feat(web): 新增设备管理功能

- 新增设备管理页面和相关功能

web/src/views/system/policy.vue

@@ -20,32 +20,7 @@
           }}</a-tag>
         </template>
         <template #action="record">
-          <a-button
-            type="primary"
-            size="small"
-            @click="operateForm('read', record)"
-            style="margin-left: 10px"
-            >查看</a-button
-          >
-          <a-button
-            type="primary"
-            size="small"
-            @click="operateForm('edit', record)"
-            class="btn-edit"
-            style="margin-left: 10px"
-            >修改</a-button
-          >
-          <a-popconfirm
-            title="确认要删除数据吗?"
-            ok-text="确认"
-            cancel-text="取消"
-            @confirm="operateForm('del', record)"
-            @cancel="() => {}"
-          >
-            <a-button type="primary" size="small" class="btn-del" style="margin-left: 10px"
-              >删除</a-button
-            >
-          </a-popconfirm>
+            <OperateCom :record="record" :operate-list="operateList" @operateForm="operateForm" />
         </template>
       </ComTable>
     </div>
@@ -67,6 +42,8 @@
 import policyForm from '@/components/system/policyForm.vue'
 import { getReq } from '@/request/api'
 import { policyTypes } from '@/utils/config'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
+import { createVNode } from 'vue'
 export default {
   name: '',
   components: { policyForm },
@@ -75,8 +52,6 @@ export default {
     return {
       formModal: false,
       btnOptionList: [
-        { label: '新增', icon: 'icon-tianjia', type: 'add' }
-        // { label: '删除', icon: 'icon-tianjia', type: 'del' }
       ],
       columns: [
         {
@@ -144,10 +119,13 @@ export default {
       },
       tableH: '',
       formState: {},
-      formStatus: 'add' //表单状态辑状态 add:新增 edit:编辑
+      formStatus: 'add', //表单状态辑状态 add:新增 edit:编辑
+      operateList:[]
     }
   },
   mounted() {
+    this.operateList = this.$getBtns(['查看', '修改', '删除'])
+    this.btnOptionList = this.$getBtns(['新增'])
     this.getTableList()
   },
   methods: {
@@ -185,7 +163,7 @@ export default {
         this.formState = record
         break
       case 'del':
-        this.handleDelete(record)
+        this.handleDelete(record.policy_id)
         break
       case 'edit':
         this.formModal = true
@@ -195,18 +173,44 @@ export default {
         break
       }
     },
-    async handleDelete(record) {
-      try {
-        const res = await getReq('/deletePolicy', {
-          policy_id: record['policy_id']
-        })
-        if (res.errcode == 0) {
-          this.$message.success('删除成功')
-          this.getTableList()
-        }
-      } catch (error) {
-        this.$message.success(error)
-      }
+    // async handleDelete(record) {
+    //   try {
+    //     const res = await getReq('/deletePolicy', {
+    //       policy_id: record['policy_id']
+    //     })
+    //     if (res.errcode == 0) {
+    //       this.$message.success('删除成功')
+    //       this.getTableList()
+    //     }
+    //   } catch (error) {
+    //     this.$message.success(error)
+    //   }
+    // },
+    //  删除操作
+    async handleDelete(id) {
+      const that = this
+      this.$Modal.confirm({
+        title: '你确认删除数据吗?',
+        icon: createVNode(ExclamationCircleOutlined),
+
+        async onOk() {
+          try {
+            const res = await getReq('/deletePolicy', {
+              policy_id: id
+            })
+            if (res.errcode == 0) {
+              that.$message.success('删除成功')
+              that.getTableList()
+            }
+          } catch (error) {
+            that.$message.success(error)
+          }
+        },
+        onCancel() {
+          // console.log("Cancel");
+        },
+        class: 'test'
+      })
     },
     closeModal(flag = false) {
       this.formModal = false
@@ -235,7 +239,7 @@ export default {
   padding: 0 15px;
   .content-table {
     width: 100%;
-    height: calc(100% - 92px);
+    height: calc(100% - 90px);
   }
 }
 </style>