feat: 新增快捷编辑参数 quickEdit，表格设置面板新增显隐搜索项

mineadmin · Apr 10, 2024 · 16603f5 · 16603f5
1 parent eae4745
commit 16603f5
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 13 deletions.
diff --git a/src/components/ma-crud/components/column.vue b/src/components/ma-crud/components/column.vue
@@ -119,10 +119,10 @@
           </template>
           <template v-else-if="row.customRender">
             <custom-render
-                :column="column"
-                :record="record"
-                :render="row.customRender"
-                :rowIndex="rowIndex"
+              :column="column"
+              :record="record"
+              :render="row.customRender"
+              :rowIndex="rowIndex"
             ></custom-render>
           </template>
           <slot :name="row.dataIndex" v-bind="{ record, column, rowIndex }" v-else>
@@ -131,10 +131,13 @@
               <template v-if="row.isEdit">
                 <a-form>
                   <a-button-group class="flex">
-                    <a-input />
+                    <a-input v-if="row?.formType === undefined || row.formType === 'input'" v-bind="row" v-model="record[row.dataIndex]" />
+                    <a-input-number v-if="row.formType === 'input-number'" v-bind="row" v-model="record[row.dataIndex]" />
+                    <a-select v-if="['select', 'radio'].includes(row.formType)" v-bind="row" v-model="record[row.dataIndex]" :options="dicts[row.dataIndex]" />
                     <a-link
+                      class="block"
                       v-if="row?.quickEdit && allowQuickEdit(row.formType) && row.isEdit === true"
-                      @click="quickEdit(row, record, rowIndex)"
+                      @click="updateQuickEditData(row, record)"
                     >
                       <icon-check />
                     </a-link>
@@ -157,12 +160,12 @@
               <template v-else-if="row.formType === 'upload'">
                 <a-link @click="imageSee(row, record, row.dataIndex)"><icon-image /> 查看图片</a-link>
               </template>
-              <template v-else>{{ record[row.dataIndex] }} {{ row.formType }}</template>
+              <template v-else>{{ record[row.dataIndex] }}</template>
 
               <a-link
                 class="absolute top-1 right-0"
                 v-if="row?.quickEdit && allowQuickEdit(row.formType) && !row.isEdit"
-                @click="quickEdit(row, record, rowIndex)"
+                @click="quickEdit(row, record)"
               >
                 <icon-edit />
               </a-link>
@@ -194,6 +197,7 @@ const props = defineProps({
 })
 const options = inject('options')
 const requestParams = inject('requestParams')
+const dicts = inject('dicts')
 const dictTrans = inject('dictTrans')
 const dictColors = inject('dictColors')
 
@@ -267,13 +271,25 @@ const editAction = record => {
   }
 }
 
-const allowQuickEdit = (formType) => ['select', 'input', 'input-number', 'date'].includes(formType ?? 'input')
+const allowQuickEdit = (formType) => ['select', 'input', 'input-number', 'radio'].includes(formType ?? 'input')
 
-const quickEdit = (row, record, index) => {
-  console.log(props.crudFormRef.form)
+const quickEdit = (row, record) => {
+  if (row.formType === 'select' || row.formType === 'radio') {
+    record[row.dataIndex] = record[row.dataIndex].toString()
+  }
   row.isEdit = true
 }
 
+const updateQuickEditData = async (row, record) => {
+  if (isFunction(options.beforeEdit) && ! await options.beforeEdit(record)) {
+    return false
+  }
+  const response = await options.edit.api(record[options.pk], record)
+  row.isEdit = false
+  isFunction(options.afterEdit) && await options.afterEdit(response, record)
+  Message.success(response.message || `修改成功！`)
+}
+
 const recoveryAction = async record => {
   const response = await options.recovery.api({ ids: [record[options.pk]] })
   response.success && Message.success(response.message || `恢复成功！`)

diff --git a/src/components/ma-crud/components/setting.vue b/src/components/ma-crud/components/setting.vue
@@ -57,7 +57,10 @@
               <span v-else> / </span>
           </template>
         </a-table-column>
-        <a-table-column title="隐藏" data-index="hide" align="center">
+        <a-table-column title="搜索" data-index="hide" align="center">
+          <template #cell="{ record }"><a-checkbox v-model="record.search" @change="changeColumn($event, 'search', record.dataIndex)" /></template>
+        </a-table-column>
+        <a-table-column title="表格" data-index="hide" align="center">
           <template #cell="{ record }"><a-checkbox v-model="record.hide" @change="changeColumn($event, 'hide', record.dataIndex)" /></template>
         </a-table-column>
         <a-table-column title="固定" data-index="fixed" align="center">
@@ -92,6 +95,8 @@ const options = inject('options')
 const columns = inject('columns')
 const allowShowColumns = ref([])
 
+const emit = defineEmits([ 'onChangeSearchHide' ])
+
 const setShowColumns = () => {
   allowShowColumns.value = columns.value.filter(item => {
     return ! (item?.settingHide ?? false)
@@ -122,6 +127,9 @@ const changeColumn = (ev, type, name) => {
         column.sortable = undefined
       }
       break
+    case 'search':
+      emit('onChangeSearchHide')
+      break
   }
 }
 

diff --git a/src/components/ma-crud/index.vue b/src/components/ma-crud/index.vue
@@ -236,7 +236,11 @@
       />
     </div>
 
-    <ma-setting ref="crudSettingRef" />
+    <ma-setting
+      ref="crudSettingRef"
+      @onChangeSearchHide="initSearchColumns()"
+      @onChangeColumnHide="changeColumn"
+    />
 
     <ma-form ref="crudFormRef" @success="requestSuccess">
       <template v-for="slot in Object.keys($slots)" #[slot]="component">