add switch change event

cherry-white · cherry-white · commit 907faa44e6d5 · 2022-08-26T19:56:05.000+08:00
diff --git a/CrazyCarBackground/src/views/assets/index.vue b/CrazyCarBackground/src/views/assets/index.vue
@@ -17,7 +17,10 @@
       </el-table-column>
       <el-table-column label="Status" width="110px" align="center">
         <template v-slot="{row}">
-          <span>{{ row.is_on }}</span>
+          <el-switch
+            v-model="row.is_on"
+            @change="handleIsOnChange(row)"
+          />
         </template>
       </el-table-column>
       <el-table-column label="Url" min-width="150px">
@@ -166,6 +169,20 @@ export default {
         this.$refs['dataForm'].clearValidate()
       })
     },
+    handleIsOnChange(row) {
+      const tempData = Object.assign({}, row)
+      tempData.timestamp = +new Date(tempData.timestamp)
+      updateAssetsInfo(tempData).then(response => {
+        const index = this.list.findIndex(v => v.id === response.id)
+        this.list.splice(index, 1, response)
+        this.$notify({
+          title: 'Success',
+          message: 'Update Successfully',
+          type: 'success',
+          duration: 2000
+        })
+      })
+    },
     updateData() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
diff --git a/CrazyCarBackground/src/views/equip/index.vue b/CrazyCarBackground/src/views/equip/index.vue
@@ -47,12 +47,18 @@
       </el-table-column>
       <el-table-column label="Wade" min-width="150px">
         <template v-slot="{row}">
-          <span>{{ row.can_wade }}</span>
+          <el-switch
+            v-model="row.can_wade"
+            @change="handleSwitchChange(row)"
+          />
         </template>
       </el-table-column>
       <el-table-column label="Show" min-width="150px">
         <template v-slot="{row}">
-          <span>{{ row.is_show }}</span>
+          <el-switch
+            v-model="row.is_show"
+            @change="handleSwitchChange(row)"
+          />
         </template>
       </el-table-column>
       <el-table-column label="Actions" align="center" width="230" class-name="small-padding fixed-width">
@@ -217,6 +223,19 @@ export default {
         this.$refs['dataForm'].clearValidate()
       })
     },
+    handleSwitchChange(row) {
+      const tempData = Object.assign({}, row)
+      updtaeEquipInfo(tempData).then(response => {
+        const index = this.list.findIndex(v => v.eid === response.eid)
+        this.list.splice(index, 1, response)
+        this.$notify({
+          title: 'Success',
+          message: 'Update Successfully',
+          type: 'success',
+          duration: 2000
+        })
+      })
+    },
     updateData() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
diff --git a/CrazyCarBackground/src/views/match/index.vue b/CrazyCarBackground/src/views/match/index.vue
@@ -42,7 +42,10 @@
       </el-table-column>
       <el-table-column label="Water" min-width="150px">
         <template v-slot="{row}">
-          <span>{{ row.has_water }}</span>
+          <el-switch
+            v-model="row.has_water"
+            @change="handleHasWaterChange(row)"
+          />
         </template>
       </el-table-column>
       <el-table-column label="Actions" align="center" width="230" class-name="small-padding fixed-width">
@@ -196,6 +199,19 @@ export default {
         this.$refs['dataForm'].clearValidate()
       })
     },
+    handleHasWaterChange(row) {
+      const tempData = Object.assign({}, row)
+      updtaeMatchInfo(tempData).then(response => {
+        const index = this.list.findIndex(v => v.cid === response.cid)
+        this.list.splice(index, 1, response)
+        this.$notify({
+          title: 'Success',
+          message: 'Update Successfully',
+          type: 'success',
+          duration: 2000
+        })
+      })
+    },
     updateData() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
diff --git a/CrazyCarBackground/src/views/trial/index.vue b/CrazyCarBackground/src/views/trial/index.vue
@@ -42,7 +42,10 @@
       </el-table-column>
       <el-table-column label="Water" min-width="150px">
         <template v-slot="{row}">
-          <span>{{ row.has_water }}</span>
+          <el-switch
+            v-model="row.has_water"
+            @change="handleHasWaterChange(row)"
+          />
         </template>
       </el-table-column>
       <el-table-column label="Actions" align="center" width="230" class-name="small-padding fixed-width">
@@ -196,6 +199,19 @@ export default {
         this.$refs['dataForm'].clearValidate()
       })
     },
+    handleHasWaterChange(row) {
+      const tempData = Object.assign({}, row)
+      updtaeTimeTrialInfo(tempData).then(response => {
+        const index = this.list.findIndex(v => v.cid === response.cid)
+        this.list.splice(index, 1, response)
+        this.$notify({
+          title: 'Success',
+          message: 'Update Successfully',
+          type: 'success',
+          duration: 2000
+        })
+      })
+    },
     updateData() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
