perf: 封装SwitchFormatter组件

src/components/Table/TableFormatters/SwitchFormatter.vue

@@ -0,0 +1,64 @@
+<template>
+  <div v-if="display">
+    <el-switch v-model="value" @change="onChange" />
+  </div>
+  <span v-else>-</span>
+</template>
+
+<script>
+import BaseFormatter from './base.vue'
+
+export default {
+  name: 'SwitchFormatter',
+  extends: BaseFormatter,
+  props: {
+    formatterArgsDefault: {
+      type: Object,
+      default() {
+        return {
+          getPatchUrl(row) {
+            return ''
+          },
+          getPatchData(row) {
+            return {}
+          },
+          isDisplay(row) {
+            return true
+          }
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      formatterArgs: Object.assign(this.formatterArgsDefault, this.col.formatterArgs),
+      value: this.cellValue
+    }
+  },
+  computed: {
+    patchUrl() {
+      return this.formatterArgs.getPatchUrl(this.row)
+    },
+    patchData() {
+      return this.formatterArgs.getPatchData(this.row)
+    },
+    display(row) {
+      return this.formatterArgs.isDisplay(this.row)
+    }
+  },
+  methods: {
+    onChange(val) {
+      this.$axios.patch(this.patchUrl, this.patchData).then(res => {
+        this.$message.success(this.$t('common.updateSuccessMsg'))
+      }).catch(err => {
+        this.value = !val
+        this.$message.error(this.$t('common.updateErrorMsg' + ' ' + err))
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/Table/TableFormatters/index.js

@@ -16,6 +16,7 @@ import ObjectRelatedFormatter from './ObjectRelatedFormatter.vue'
 import TwoTabFormatter from './TwoTabFormatter.vue'
 import ProtocolsFormatter from './ProtocolsFormatter.vue'
 import TagChoicesFormatter from './TagChoicesFormatter.vue'
+import SwitchFormatter from './SwitchFormatter.vue'
 
 export default {
   DetailFormatter,
@@ -35,7 +36,8 @@ export default {
   TwoTabFormatter,
   ProtocolsFormatter,
   TagChoicesFormatter,
-  LabelsFormatter
+  LabelsFormatter,
+  SwitchFormatter
 }
 
 export {
@@ -56,5 +58,6 @@ export {
   TwoTabFormatter,
   ProtocolsFormatter,
   TagChoicesFormatter,
-  LabelsFormatter
+  LabelsFormatter,
+  SwitchFormatter
 }

src/views/settings/Task/TaskList.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script type="text/jsx">
-import { ChoicesFormatter, DetailFormatter } from '@/components/Table/TableFormatters'
+import { ChoicesFormatter, DetailFormatter, SwitchFormatter } from '@/components/Table/TableFormatters'
 import { BASE_URL } from '@/utils/common'
 import ListTable from '@/components/Table/ListTable/index.vue'
 
@@ -112,25 +112,18 @@ export default {
           enabled: {
             width: '80px',
             label: `${this.$t('common.Enable')}/${this.$t('common.Disable')}`,
-            formatter: (row) => {
-              console.log(row.exec_cycle)
-              if (row.exec_cycle === undefined) {
-                return '-'
-              } else {
-                return <el-switch
-                  v-model={row.enabled}
-                  onChange={(v) => {
-                    const url = `/api/v1/ops/celery/period-tasks/${row.name}/`
-                    const data = { enabled: v }
-                    this.$axios.patch(url, data).catch(() => {
-                      row.enabled = !v
-                    }).then(res => {
-                      this.$message.success(this.$t('common.updateSuccessMsg'))
-                    }).catch(err => {
-                      this.$message.error(this.$t('common.updateErrorMsg' + ' ' + err))
-                    })
-                  }}
-                />
+            formatter: SwitchFormatter,
+            formatterArgs: {
+              isDisplay(row) {
+                return row.exec_cycle !== undefined
+              },
+              getPatchUrl(row) {
+                return `/api/v1/ops/celery/period-tasks/${row.name}/`
+              },
+              getPatchData(row) {
+                return {
+                  enabled: !row.enabled
+                }
               }
             }
           }