状态列控制器基本完成

Former-commit-id: 0e03e0fea7fbaacf1c2d8ff2411c151d0aef433c [formerly 0e03e0fea7fbaacf1c2d8ff2411c151d0aef433c [formerly 0e03e0fea7fbaacf1c2d8ff2411c151d0aef433c [formerly 0e03e0fea7fbaacf1c2d8ff2411c151d0aef433c [formerly ce25e70b23df7f428a514a7a92790de70a393274 [formerly 0dc8f4cd9be176aae57942767a315623d104932d]]]]]
Former-commit-id: 9b38b47bc438321aa72180f9a170af8f92a9e77d
Former-commit-id: 01108104a6d5c36e474fdfb7ec0b0b8d73048221
Former-commit-id: 0cfebf110b20794e2690674ac285e3cba5280ae4 [formerly 5b9e9a9d9bef2e6d37eeb2630ad73d9f0494d967]
Former-commit-id: fd0ff1d79aebf7f13218e0149e1948083e1ba904
Former-commit-id: 7e1ede18df14c10daf4a25fdb509518929fb9d96
Former-commit-id: af50aad4bfb60e7b5ed9b6ca991e51a2f3490df2
Former-commit-id: 3462539ef1c1bba8d6efc7f52e95930515f1e108
Former-commit-id: b882ff02952b1f164f061ab090174018ee9afb4a

src/pages/demo/business/table/1/componnets/PageMain/index.vue

@@ -15,7 +15,7 @@
       <template slot-scope="scope">
         <el-tag
           size="mini"
-          type="info">
+          type="success">
           {{scope.row.value}}
         </el-tag>
       </template>
@@ -23,25 +23,20 @@
 
     <el-table-column label="状态" width="60" align="center">
       <template slot-scope="scope">
-        <el-popover
-          placement="left"
-          title="切换状态"
-          width="200"
-          trigger="hover">
-          <el-switch
-            v-model="currentTableData[scope.$index].type"
-            active-color="#67C23A"
-            inactive-color="#F56C6C"
-            active-text="正常"
-            inactive-text="禁用"
-            @change="(val) => {
-              handleSwitchChange(val, scope.$index)
-            }">
-          </el-switch>
-          <el-tag slot="reference" size="mini">
-            {{scope.row.type}}
-          </el-tag>
-        </el-popover>
+        <type-control
+          :value="scope.row.type"
+          @change="(val) => {
+            handleSwitchChange(val, scope.$index)
+          }">
+          <d2-icon
+            name="check-circle"
+            style="font-size: 20px; line-height: 32px; color: #67C23A;"
+            slot="active"/>
+          <d2-icon
+            name="times-circle"
+            style="font-size: 20px; line-height: 32px; color: #F56C6C;"
+            slot="inactive"/>
+        </type-control>
       </template>
     </el-table-column>
 
@@ -65,8 +60,11 @@
 
     <el-table-column label="使用状态" width="100" align="center">
       <template slot-scope="scope">
-        <el-tag v-if="scope.row.used" type="mini">已经使用</el-tag>
-        <el-tag v-else type="mini">未使用</el-tag>
+        <el-tag
+          size="mini"
+          :type="scope.row.used ? 'info' : ''">
+          {{scope.row.used ? '已使用' : '未使用'}}
+        </el-tag>
       </template>
     </el-table-column>
 
@@ -80,7 +78,11 @@
 </template>
 
 <script>
+import TypeControl from '../TypeControl'
 export default {
+  components: {
+    TypeControl
+  },
   props: {
     tableData: {
       default: () => []
@@ -101,8 +103,11 @@ export default {
   },
   methods: {
     handleSwitchChange (val, index) {
-      console.log('val', val)
-      console.log('index', index)
+      const oldValue = this.currentTableData[index]
+      this.$set(this.currentTableData, index, {
+        ...oldValue,
+        type: val
+      })
     }
   }
 }

src/pages/demo/business/table/1/componnets/TypeControl/index.vue

@@ -0,0 +1,85 @@
+<template>
+  <el-popover
+    :placement="popoverPlacement"
+    :title="popoverTitle"
+    :width="popoverWidth"
+    trigger="hover">
+    <el-switch
+      v-model="currentValue"
+      :active-color="activeColor"
+      :inactive-color="inactiveColor"
+      :active-text="activeText"
+      :inactive-text="inactiveText"
+      :disabled="switchDisabled"
+      @change="handleChange">
+    </el-switch>
+    <span slot="reference">
+      <slot v-if="value" name="active"/>
+      <slot v-else name="inactive"/>
+    </span>
+  </el-popover>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      default: false
+    },
+    popoverPlacement: {
+      default: 'left'
+    },
+    popoverTitle: {
+      default: '修改'
+    },
+    popoverWidth: {
+      default: '150'
+    },
+    activeColor: {
+      default: '#67C23A'
+    },
+    inactiveColor: {
+      default: '#F56C6C'
+    },
+    activeText: {
+      default: '正常'
+    },
+    inactiveText: {
+      default: '禁用'
+    }
+  },
+  data () {
+    return {
+      currentValue: false,
+      switchDisabled: false
+    }
+  },
+  watch: {
+    value: {
+      handler (val) {
+        this.currentValue = val
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    handleChange (val) {
+      this.switchDisabled = true
+      this.$message({
+        message: '正在发送请求',
+        type: 'info'
+      })
+      // 请将 setTimeout 修改为您的异步请求
+      setTimeout(() => {
+        this.switchDisabled = false
+        this.$message({
+          message: '修改成功',
+          type: 'success'
+        })
+        this.$emit('change', val)
+        // 如果修改失败的话需要在这里手动将 currentValue 复原
+      }, 1000)
+    }
+  }
+}
+</script>