设备列表、工单列表

src/views/ems/site/sblb/index.vue

@@ -12,6 +12,7 @@
         <el-button @click="onReset" native-type="button">重置</el-button>
       </el-form-item>
     </el-form>
+    <el-button type="primary" @click="addDevice" native-type="button">新增设备</el-button>
     <el-table
       class="common-table"
       :data="tableData"
@@ -49,14 +50,26 @@
       <el-table-column
         fixed="right"
         label="操作"
-        width="140">
+        width="240">
         <template slot-scope="scope">
           <el-button
-            @click="toDetail(scope.row.deviceId)"
+            @click="toDetail(scope.row.id)"
             type="primary"
-            size="small">
+            size="mini">
             查看详情
           </el-button>
+          <el-button
+            @click="editDevice(scope.row)"
+            type="warning"
+            size="mini">
+            编辑
+          </el-button>
+          <el-button
+            type="danger"
+            @click="deleteDevice(scope.row)"
+            size="mini">
+            删除
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -80,19 +93,24 @@
         </el-descriptions>
       </div>
     </el-dialog>
+    <add-device ref="addDevice" :mode="mode" :id="editDeviceId" @update="getData" @clear="clearEditDeviceData"/>
   </div>
 </template>
 
 <script>
-import {getDeviceInfoList,getDeviceDetailInfo} from'@/api/ems/site'
+import {getDeviceInfoList,getDeviceDetailInfo,deleteService} from'@/api/ems/site'
 import {getAllSites} from '@/api/ems/zddt'
 import {formatNumber} from "@/filters/ems";
+import AddDevice from "./AddDevice.vue";
 export default {
   name: "Sblb",
+  components:{AddDevice},
   data() {
     return {
       loading:false,
       searchLoading:false,
+      mode:'',//新增、编辑设备
+      editDeviceId:'',//编辑设备id
       siteId:'',
       siteList:[],
       tableData:[],
@@ -124,13 +142,60 @@ export default {
     }
   },
   methods:{
+    clearEditDeviceData(){
+      this.mode = '';
+      this.editDeviceId=''
+    },
+    //  新增设备 展示弹窗
+    addDevice(){
+      this.mode = 'add';
+      this.$refs.addDevice.dialogTableVisible = true
+    },
+    // 编辑设备
+    editDevice(row){
+      this.mode = 'edit';
+      this.editDeviceId = row.id
+      this.$refs.addDevice.dialogTableVisible = true;
+    },
+    //删除设备
+    deleteDevice(){
+      this.$confirm(`确认要设备${row.deviceName}吗?`, {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        showClose:false,
+        closeOnClickModal:false,
+        type: 'warning',
+        beforeClose: (action, instance, done) => {
+          if (action === 'confirm') {
+            instance.confirmButtonLoading = true;
+            deleteService({id:row.id}).then(response => {
+              response.code === 200 && done();
+            }).finally(() => {
+              instance.confirmButtonLoading = false;
+            })
+          } else {
+            done();
+          }
+        }
+      }).then(() => {
+        //只有在废弃成功的情况下会走到这里
+        this.$message({
+          type: 'success',
+          message: '废弃成功!'
+        });
+        this.getData()
+        //调用接口 更新表格数据
+      }).catch(() => {
+        //取消关机
+      });
+    },
     handleClosed(done){
       this.detailData.forEach((item)=>{item.value = ''})
       done()
     },
-    toDetail(deviceId){
+    toDetail(id){
       this.loading = true
-      getDeviceDetailInfo(deviceId).then(response => {
+      getDeviceDetailInfo(id).then(response => {
         const data = response?.data || {};
         this.detailData.forEach(item=>{
           if(this.detailformatAttr[item.attr]){