feat: ✨ 表格操作栏按钮下拉菜单

src/frontend/admin/src/components/naColOperation/index.vue

@@ -1,34 +1,40 @@
 <template>
     <el-table-column align="right" fixed="right">
         <template #default="{ row }">
-            <el-button-group>
+            <template v-if="showMenu">
-                <template v-for="(item, i) in buttons?.filter((x) => !x.condition || x.condition(row))" :key="i">
+                <el-dropdown>
-                    <el-popconfirm
+                    <el-button icon="el-icon-setting" size="small"> {{ $t('操作') }} </el-button>
-                        v-if="item.confirm"
+                    <template #dropdown>
-                        :title="this.$t(`确定 {title}？`, { title: item.title })"
+                        <el-dropdown-menu>
-                        @confirm="click(item, row, vue)"
+                            <template v-for="(item, i) in buttons?.filter((x) => !x.condition || x.condition(row))" :key="i">
-                        width="20rem">
+                                <el-dropdown-item
-                        <template #reference>
+                                    :disabled="disabled"
-                            <el-button
+                                    :icon="item.icon"
-                                :disabled="disabled"
+                                    :title="item.title ? $t(item.title) : ''"
-                                :icon="item.icon"
+                                    :type="item.type"
-                                :title="item.title ? $t(item.title) : ''"
+                                    @click="click(item, row, vue)"
-                                :type="item.type"
+                                    size="small"
-                                @click.native.stop
+                                    >{{ item.title }}
-                                size="small"></el-button>
+                                </el-dropdown-item>
-                        </template>
+                            </template>
-                    </el-popconfirm>
+                        </el-dropdown-menu>
-                    <el-button
+                    </template>
-                        v-else
+                </el-dropdown>
-                        :disabled="disabled"
+            </template>
-                        :icon="item.icon"
+            <template v-else>
-                        :title="item.title ? $t(item.title) : ''"
+                <el-button-group>
-                        :type="item.type"
+                    <template v-for="(item, i) in buttons?.filter((x) => !x.condition || x.condition(row))" :key="i">
-                        @click="click(item, row, vue)"
+                        <el-button
-                        size="small">
+                            :disabled="disabled"
-                    </el-button>
+                            :icon="item.icon"
-                </template>
+                            :title="item.title ? $t(item.title) : ''"
-            </el-button-group>
+                            :type="item.type"
+                            @click="click(item, row, vue)"
+                            size="small">
+                        </el-button>
+                    </template>
+                </el-button-group>
+            </template>
         </template>
     </el-table-column>
 </template>
@@ -44,6 +50,7 @@ export default {
             default: naColOperation.buttons,
         },
         prop: { type: String },
+        showMenu: { type: Boolean },
     },
     data() {
         return {
@@ -57,6 +64,19 @@ export default {
     methods: {
         async click(item, row, vue) {
             this.disabled = true
+
+            if (item.confirm) {
+                try {
+                    await this.$confirm(this.$t(`确定 {title}？`, { title: item.title }), this.$t('提示'), {
+                        type: 'warning',
+                    })
+                } catch {
+                    //
+
+                    this.disabled = false
+                    return
+                }
+            }
             await item.click(row, vue)
             this.disabled = false
         },

src/frontend/admin/src/components/naColTags/index.vue

@@ -2,7 +2,11 @@
     <el-table-column :label="label" :prop="`${prop}.${field}`">
         <template #default="{ row }">
             <div class="flex">
-                <template v-for="(item, i) in Array.isArray(row[prop]) ? row[prop] : [row[prop]]" :key="i">
+                <template
+                    v-for="(item, i) in Array.isArray(tool.getNestedProperty(row, prop))
+                        ? tool.getNestedProperty(row, prop)
+                        : [tool.getNestedProperty(row, prop)]"
+                    :key="i">
                     <el-tag
                         v-if="item"
                         :type="['success', 'danger', 'info', 'primary', 'warning'][$TOOL.crypto.hashCode(item[field]) % 5]"
@@ -15,6 +19,8 @@
     </el-table-column>
 </template>
 <script>
+import tool from '@/utils/tool'
+
 export default {
     emits: ['click'],
     props: {
@@ -28,7 +34,11 @@ export default {
     mounted() {},
     created() {},
     components: {},
-    computed: {},
+    computed: {
+        tool() {
+            return tool
+        },
+    },
     methods: {},
 }
 </script>

src/frontend/admin/src/components/naSearch/index.vue

@@ -10,7 +10,8 @@
             :start-placeholder="$t('开始日期')"
             :teleported="false"
             :type="dateType"
-            :value-format="dateValueFormat"></el-date-picker>
+            :value-format="dateValueFormat"
+            @change="dateChange"></el-date-picker>
 
         <template v-for="(item, i) in controls" :key="i">
             <el-input
@@ -42,6 +43,8 @@
                 v-role="item.role || '*/*/*'"
                 :class="item.class"
                 :config="item.config"
+                :multiple="item.multiple"
+                :params="item.params"
                 :placeholder="item.placeholder"
                 :query-api="item.api"
                 :style="item.style"
@@ -501,6 +504,9 @@ export default {
         },
     },
     methods: {
+        dateChange(val) {
+            this.$emit('dateChange', val)
+        },
         jsonFormat() {
             try {
                 this.aceEditorValue = vkbeautify.json(this.aceEditorValue, 2)

src/frontend/admin/src/components/scSelect/index.vue

@@ -47,7 +47,7 @@ export default {
     methods: {
         //选项显示隐藏事件
         visibleChange(isOpen) {
-            if (isOpen && this.options.length === 0 && (this.dic || this.queryApi)) {
+            if (isOpen && (this.dic || this.queryApi)) {
                 this.getRemoteData()
             }
         },

src/frontend/admin/src/components/scUpload/multiple.vue

@@ -77,7 +77,7 @@ export default {
             type: Object,
             default: () => {},
         },
-        accept: { type: String, default: 'image/gif, image/jpeg, image/png' },
+        accept: { type: String, default: 'image/gif,image/jpeg,image/jpg,image/png' },
         maxSize: { type: Number, default: config.maxSizeFile },
         limit: { type: Number, default: 0 },
         autoUpload: { type: Boolean, default: true },
@@ -182,7 +182,7 @@ export default {
             })
         },
         before(file) {
-            if (!['image/jpeg', 'image/png', 'image/gif'].includes(file.type)) {
+            if (!this.accept.split(',').includes(file.type)) {
                 this.$message.warning(`选择的文件类型 ${file.type} 非图像类文件`)
                 return false
             }

src/frontend/admin/src/config/table.js

@@ -75,7 +75,7 @@ export default {
         } else if (mode === 'edit') {
             function func(items) {
                 items.forEach((item) => {
-                    if (item.id === data.id) {
+                    if (item.id === data?.id) {
                         Object.keys(item).forEach((x) => delete item[x])
                         Object.assign(item, data)
                     } else if (item.children) return func(item.children)