策略配置

src/views/ems/dzjk/clpz/xftg/TempTable.vue

@@ -4,9 +4,9 @@
     <div slot="header">
       <span class="card-title">新增模板</span>
       <div style="float: right; padding: 3px 0">
-        <el-button type="primary" size="mini">新增</el-button>
-        <el-button type="warning" size="mini">编辑</el-button>
-        <el-button type="primary" class="alarm-btn" size="mini">删除</el-button>
+        <el-button type="primary" size="mini" @click="handlerType = 'add';$refs.addTemplate.dialogTableVisible=true">新增</el-button>
+        <el-button type="warning" size="mini" @click="handlerType = 'edit';$refs.addTemplate.dialogTableVisible=true">编辑</el-button>
+        <el-button type="primary" class="alarm-btn" size="mini" @click="deleteTemp">删除</el-button>
       </div>
     </div>
     <div>
@@ -17,7 +17,7 @@
         :data="tableData"
         :span-method="tableSpanFilter"
         border
-        style="width: 100%;">
+        style="width: 100%;margin-top:25px;">
         <!--            todo 如果要在span-method中使用column.property 在表格中必须定义prop="xxx"属性-->
         <el-table-column
           prop="name"
@@ -67,17 +67,17 @@
 
       </el-table>
     </div>
-
+    <add-template ref="addTemplate" :mode="handlerType" :edit-temp-id="activeTempData.id" :edit-temp-name="activeTempData.name"/>
   </el-card>
 </template>
 
-<style scoped lang="scss">
-
-</style>
 <script>
+import AddTemplate from "./AddTemplate.vue";
 export default {
+  components: {AddTemplate},
   data() {
     return {
+      handlerType:'',
       activeBtn:1,
       tempList:[
         {name:'模板1',id:1},
@@ -94,7 +94,43 @@ export default {
       mixinPrototype:['name','status','min','max']
     }
   },
+  computed:{
+    activeTempData(){
+      return this.tempList.find(item=>item.id === this.activeBtn)
+    }
+  },
   methods:{
+    deleteTemp(){
+      this.$confirm(`确认要删除${this.activeTempData.name}吗?`, {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        showClose:false,
+        closeOnClickModal:false,
+        type: 'warning',
+        beforeClose: (action, instance, done) => {
+          if (action === 'confirm') {
+            instance.confirmButtonLoading = true;
+            setTimeout(() => {
+              // todo 调用接口如果关机成功 调用done方法 否则不关闭弹窗
+              done();
+              // setTimeout(() => {
+              instance.confirmButtonLoading = false;
+              // }, 300);
+            }, 3000);
+          } else {
+            done();
+          }
+        }
+      }).then(() => {
+        //只有在故障复位成功的情况下会走到这里
+        this.$message({
+          type: 'success',
+          message: '删除成功!'
+        });
+      }).catch(() => {
+        //取消复位
+      });
+    },
     changeTemp(id){
       //切换模板 更新数据
       if(id !== this.activeBtn){