feat: 快捷编辑

mineadmin · Apr 9, 2024 · 8790a44 · 8790a44
1 parent 15f24d7
commit 8790a44
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 24 deletions.
diff --git a/package.json b/package.json
@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@arco-design/color": "^0.4.0",
-    "@arco-design/web-vue": "^2.54.6",
+    "@arco-design/web-vue": "^2.55.0",
     "@arco-themes/vue-mine-admin-v2": "^0.0.3",
     "@tinymce/tinymce-vue": "^5.0.0",
     "@wangeditor/editor": "^5.1.23",

diff --git a/src/components/ma-crud/components/column.vue b/src/components/ma-crud/components/column.vue
@@ -127,24 +127,46 @@
           </template>
           <slot :name="row.dataIndex" v-bind="{ record, column, rowIndex }" v-else>
             <template v-if="row.dataIndex === '__index'">{{ getIndex(rowIndex) }}</template>
-
-            <template v-if="row.dict && row.dict.translation">
-              <template v-if="isArray(get(record, row.dataIndex))">
-                <a-tag v-for="item in get(record, row.dataIndex)" class="ml-1">{{ getDataIndex(row, item) }}</a-tag>
+            <span :class="['relative', row?.quickEdit && allowQuickEdit(row.formType) ? 'flex' : '']">
+              <template v-if="row.isEdit">
+                <a-form>
+                  <a-button-group class="flex">
+                    <a-input />
+                    <a-link
+                      v-if="row?.quickEdit && allowQuickEdit(row.formType) && row.isEdit === true"
+                      @click="quickEdit(row, record, rowIndex)"
+                    >
+                      <icon-check />
+                    </a-link>
+                  </a-button-group>
+                </a-form>
+              </template>
+              <template v-else-if="row.dict && row.dict.translation">
+                <template v-if="isArray(get(record, row.dataIndex))">
+                  <a-tag v-for="item in get(record, row.dataIndex)" class="ml-1">{{ getDataIndex(row, item) }}</a-tag>
+                </template>
+                <a-tag v-else-if="row.dict.tagColors" :color="getTagColor(row, record)">
+                  {{ getDataIndex(row, record) }}
+                </a-tag>
+                <a-tag v-else-if="row.dict.tagColor" :color="row.dict.tagColor">{{ getDataIndex(row, record) }}</a-tag>
+                <span v-else>{{ getDataIndex(row, record) }}</span>
+              </template>
+              <template v-else-if="row.dataIndex && row.dataIndex.indexOf('.') !== -1">
+                {{ get(record, row.dataIndex) }}
+              </template>
+              <template v-else-if="row.formType === 'upload'">
+                <a-link @click="imageSee(row, record, row.dataIndex)"><icon-image /> 查看图片</a-link>
               </template>
-              <a-tag v-else-if="row.dict.tagColors" :color="getTagColor(row, record)">
-                {{ getDataIndex(row, record) }}
-              </a-tag>
-              <a-tag v-else-if="row.dict.tagColor" :color="row.dict.tagColor">{{ getDataIndex(row, record) }}</a-tag>
-              <span v-else>{{ getDataIndex(row, record) }}</span>
-            </template>
-            <template v-else-if="row.dataIndex && row.dataIndex.indexOf('.') !== -1">
-              {{ get(record, row.dataIndex) }}
-            </template>
-            <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] }}</template>
+              <template v-else>{{ record[row.dataIndex] }} {{ row.formType }}</template>
+
+              <a-link
+                class="absolute top-1 right-0"
+                v-if="row?.quickEdit && allowQuickEdit(row.formType) && !row.isEdit"
+                @click="quickEdit(row, record, rowIndex)"
+              >
+                <icon-edit />
+              </a-link>
+            </span>
           </slot>
         </template>
       </a-table-column>
@@ -153,7 +175,7 @@
 </template>
 
 <script setup>
-import { inject } from 'vue'
+import { inject, ref, provide } from 'vue'
 import config from '@/config/crud'
 import uploadConfig from '@/config/upload'
 import { Message } from '@arco-design/web-vue'
@@ -162,13 +184,14 @@ import CustomRender from '../js/custom-render'
 import tool from '@/utils/tool'
 import commonApi from '@/api/common'
 
+import formInput from '@cps/ma-form/formItem/form-input.vue'
+
 const emit = defineEmits(['refresh', 'showImage'])
 const props = defineProps({
   columns: Array,
   isRecovery: Boolean,
   crudFormRef: Object
 })
-
 const options = inject('options')
 const requestParams = inject('requestParams')
 const dictTrans = inject('dictTrans')
@@ -244,6 +267,13 @@ const editAction = record => {
   }
 }
 
+const allowQuickEdit = (formType) => ['select', 'input', 'input-number', 'date'].includes(formType ?? 'input')
+
+const quickEdit = (row, record, index) => {
+  console.log(props.crudFormRef.form)
+  row.isEdit = true
+}
+
 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/types/columns.ts b/src/components/ma-crud/types/columns.ts
@@ -118,6 +118,8 @@ export interface BasicColumn {
   searchDefaultValue?: number | string | undefined;
   // 搜索描述
   searchPlaceholder?: string;
+  // 表格是否快捷编辑，只支持 input date select
+  quickEdit?: boolean;
   //编辑|创建 通用规则
   commonRules?: FieldRule | FieldRule[];
   // 创建时规则

diff --git a/yarn.lock b/yarn.lock
@@ -22,10 +22,10 @@
   dependencies:
     color "^3.1.3"
 
-"@arco-design/web-vue@^2.54.6":
-  version "2.54.6"
-  resolved "https://registry.npmmirror.com/@arco-design/web-vue/-/web-vue-2.54.6.tgz#9064e28dd006889901a3cd60b5e56618299ca348"
-  integrity sha512-Qx+HHL5G5gIvrbxGC6ZF/L8ACD1L/RkPJd9e4SR+vI6lEg+nGlUBplkR4pY7e7mqYXY2H6uzh+radT+QxXKVRg==
+"@arco-design/web-vue@^2.55.0":
+  version "2.55.1"
+  resolved "https://registry.yarnpkg.com/@arco-design/web-vue/-/web-vue-2.55.1.tgz#ebc03745bc33aef65719bc696362b346c8c1befc"
+  integrity sha512-MI0mteI4B1+UAKAslCrV2zqRKHWwkjLjdOpOLAR36cAbYhtlj7Tel3yAjGHk5zsQ1ODZX60OFfRfl66pq6919A==
   dependencies:
     "@arco-design/color" "^0.4.0"
     b-tween "^0.3.3"