'init'

src/views/basicData/Equipment/equipmentDetectArea.vue

@@ -0,0 +1,233 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: gtz
+ * @LastEditTime: 2022-07-25 10:30:12
+ * @Description:拆分了搜索区和功能按钮区，增加了toptitle
+-->
+<template>
+  <div class="app-container">
+    <top-title />
+    <head-form
+      :form-config="headFormConfig"
+      @headBtnClick="btnClick"
+    />
+    <base-table
+      :top-btn-config="topBtnConfig"
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+      @clickTopBtn="clickTopBtn"
+    >
+      <method-btn
+        slot="handleBtn"
+        :width="trueWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList()"
+    />
+  </div>
+</template>
+
+<script>import i18n from '@/lang'
+import { equipmentDetectAreaList, equipmentDetectAreaDelete } from '@/api/basicData/Equipment/equipmentDetectArea'
+import TopTitle from '@/components/TopTitle'
+import HeadForm from '@/components/basicData/HeadForm'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+const topBtnConfig = [
+  {
+    type: 'add',
+    btnName: 'btn.add'
+  }
+]
+
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'detail',
+    btnName: 'btn.detail'
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  }
+]
+const tableProps = [
+  {
+    prop: 'code',
+    label: i18n.t('module.basicData.equipment.WiredCode'),
+    align: 'center'
+  },
+  {
+    prop: 'detectArea',
+    label: i18n.t('module.basicData.equipmentDetectInfo.DetectionArea'),
+    align: 'center'
+  },
+  {
+    prop: 'distributionArea',
+    label: i18n.t('module.basicData.equipmentDetectInfo.IssueArea'),
+    align: 'center'
+  }
+]
+
+export default {
+  name: 'Material',
+  components: { TopTitle, Pagination, BaseTable, MethodBtn, HeadForm },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      topBtnConfig,
+      tableBtn,
+      trueWidth: 240,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        current: 1,
+        size: 10
+      },
+      detectArea: '',
+      detectAreaArr: [{
+        value: 'Backend',
+        label: 'Backend'
+      }, {
+        value: 'Frontend',
+        label: 'Frontend'
+      }, {
+        value: 'Midend',
+        label: 'Midend'
+      }],
+      headFormConfig: [
+        {
+          type: 'input',
+          label: i18n.t('module.basicData.visual.keyword'),
+          placeholder: this.$t('module.basicData.equipmentDetectInfo.DetectionArea'),
+          param: 'detectArea'
+        },
+        {
+          type: 'button',
+          btnName: 'btn.search',
+          name: 'search',
+          color: 'primary'
+        }
+      ],
+      headFormValue: {}
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+      if (raw.type === 'delete') {
+        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.detectArea}]?`, this.$t('module.basicData.visual.Tips'), {
+          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+          type: 'warning'
+        }).then(() => {
+          equipmentDetectAreaDelete(raw.data.id).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      } else if (raw.type === 'edit') {
+        this.addNew(raw.data.id)
+      } else {
+        this.addNew(raw.data.id, true)
+      }
+    },
+    getList() {
+      this.listLoading = true
+      this.listQuery.detectArea = this.headFormValue.detectArea
+      equipmentDetectAreaList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    },
+    btnClick(val) {
+      this.headFormValue = val
+      if (this.headFormValue.btnName === 'search') {
+        this.getList()
+      }
+    },
+    clickTopBtn(val) {
+      if (val === 'add') {
+        this.addNew()
+      }
+    },
+    // 新增 / 修改
+    addNew(id, isdetail) {
+      this.$router.push({
+        name: 'equipmentDetectAreaAdd',
+        query: {
+          id: id,
+          isdetail: isdetail
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>