feat: enhance inspection type management table actions

src/views/quality-management/process-control/inspection-type-management/index.vue

@@ -41,6 +41,8 @@
       :toolbar-buttons="toolbarButtons"
       :row-buttons="rowButtons"
       :pagination="pagination"
+      :table-attrs="{ highlightCurrentRow: true }"
+      :table-listeners="{ 'sort-change': handleSort }"
       help-url="/help/quality-management/inspection-type-management"
       :help-text="$t(ckey('help'))"
       auto-height
@@ -103,15 +105,21 @@ export default {
       dialogTitle: '',
       editId: '',
       handleType: 'create',
-      search: {"code":"","name":""},
+      search: { code: '', name: '' },
       pagination: { current: 1, size: 10, total: 0 },
-      formData: {"code":"","name":"","note":""},
+      order: {
+        order_type: undefined,
+        order_field: undefined
+      },
+      formData: { code: '', name: '', note: '' },
       rules: {
         code: [
-          { required: true, message: this.key('required'), trigger: 'blur' }
+          { required: true, message: this.key('required'), trigger: 'blur' },
+          { min: 2, message: this.key('length_min_2'), trigger: 'blur' }
         ],
         name: [
-          { required: true, message: this.key('required'), trigger: 'blur' }
+          { required: true, message: this.key('required'), trigger: 'blur' },
+          { min: 2, message: this.key('length_min_2'), trigger: 'blur' }
         ]
       },
       columns: [],
@@ -153,11 +161,11 @@ export default {
   },
   created () {
     this.columns = useTableColumns([
-      { prop: 'code', label: this.key('code'), minWidth: 130 },
-      { prop: 'name', label: this.key('name'), minWidth: 130 },
-      { prop: 'note', label: this.key('remark'), minWidth: 130 },
-      { prop: 'nickname', label: this.key('nickname'), minWidth: 130 },
-      { prop: 'create_date', label: this.key('create_date'), minWidth: 130 },
+      { prop: 'code', label: this.key('code'), minWidth: 130, sortable: 'custom', showOverflowTooltip: true },
+      { prop: 'name', label: this.key('name'), minWidth: 130, sortable: 'custom', showOverflowTooltip: true },
+      { prop: 'nickname', label: this.key('nickname'), minWidth: 130, sortable: 'custom', showOverflowTooltip: true },
+      { prop: 'create_date', label: this.key('create_date'), minWidth: 150, sortable: 'custom', showOverflowTooltip: true },
+      { prop: 'note', label: this.key('remark'), minWidth: 130, sortable: 'custom', showOverflowTooltip: true },
       { prop: '_actions', label: this.key('operation'), width: 160, fixed: 'right' }
     ])
     const btns = useTableButtons({
@@ -167,8 +175,17 @@ export default {
           label: this.key('add'),
           icon: 'el-icon-plus',
           type: 'primary',
-          auth: '/quality_control/first_inspection/category/create',
+          auth: '/quality_control/first_inspection/category/add',
           onClick: this.openAdd
+        },
+        {
+          key: 'batch_delete',
+          label: this.key('delete'),
+          icon: 'el-icon-delete',
+          type: 'danger',
+          auth: '/quality_control/first_inspection/category/delete',
+          needSelection: true,
+          onClick: this.handleBatchDelete
         }
       ],
       row: [
@@ -176,7 +193,7 @@ export default {
           key: 'edit',
           label: this.key('edit'),
           icon: 'el-icon-edit',
-          auth: '/quality_control/first_inspection/category/edit',
+          auth: '/quality_control/first_inspection/category/update',
           onClick: this.openEdit
         },
         {
@@ -199,6 +216,7 @@ export default {
       try {
         const params = {
           ...this.search,
+          ...this.order,
           page_no: this.pagination.current,
           page_size: this.pagination.size,
           page: this.pagination.current,
@@ -217,7 +235,7 @@ export default {
       this.fetchData()
     },
     onReset () {
-      this.search = {"code":"","name":""}
+      this.search = { code: '', name: '' }
       this.pagination.current = 1
       this.fetchData()
     },
@@ -229,8 +247,15 @@ export default {
     onSelect (rows) {
       this.selectedRows = rows
     },
+    handleSort ({ column, prop, order }) {
+      this.order = {
+        order_type: column && order ? (order === 'ascending' ? 'asc' : 'desc') : undefined,
+        order_field: column && order ? prop : undefined
+      }
+      this.fetchData()
+    },
     resetForm () {
-      this.formData = {"code":"","name":"","note":""}
+      this.formData = { code: '', name: '', note: '' }
       this.editId = ''
     },
     openAdd () {
@@ -243,7 +268,7 @@ export default {
       this.handleType = 'edit'
       this.dialogTitle = this.key('edit_title')
       this.editId = row.id
-      this.formData = { ...{"code":"","name":"","note":""}, ...row }
+      this.formData = { ...{ code: '', name: '', note: '' }, ...row }
       this.dialogVisible = true
     },
     async onDialogSubmit () {
@@ -267,8 +292,27 @@ export default {
     async handleDelete (row) {
       const cancelled = await this.$confirmAction({
         message: this.key('confirm_delete'),
-        title: this.key('tip')
-      }, () => deleteInspectionTypeManagement({ id: [row.id], ids: [row.id], inspection_order_no: row.inspection_order_no }))
+        title: this.key('tip'),
+        confirmButtonText: this.key('confirm'),
+        cancelButtonText: this.key('cancel'),
+        closeOnClickModal: false
+      }, () => deleteInspectionTypeManagement({ id: [row.id] }))
+      if (cancelled) return
+      this.$message.success(this.$t(this.key('operation_success')))
+      this.fetchData()
+    },
+    async handleBatchDelete () {
+      if (!this.selectedRows.length) {
+        this.$message.error(this.$t(this.key('select_operate_data')))
+        return
+      }
+      const cancelled = await this.$confirmAction({
+        message: this.key('confirm_delete'),
+        title: this.key('tip'),
+        confirmButtonText: this.key('confirm'),
+        cancelButtonText: this.key('cancel'),
+        closeOnClickModal: false
+      }, () => deleteInspectionTypeManagement({ id: this.selectedRows.map(item => item.id) }))
       if (cancelled) return
       this.$message.success(this.$t(this.key('operation_success')))
       this.fetchData()