lingyun/NetAdmin
Template
7
0
Fork 0
mirror of https://github.com/nsnail/NetAdmin.git synced 2025-06-20 02:38:15 +08:00
Code Issues 1 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
tk
2025-06-17 17:05:52 +08:00
committed by nsnail
parent 541c0616bf
commit 51cc9fa80c
6 changed files with 71 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
src/frontend/admin/src/components/naColOperation/index.vue
View File

@ -1,34 +1,40 @@
<template>
<el-table-column align="right" fixed="right">
<template #default="{ row }">
<el-button-group>
<template v-for="(item, i) in buttons?.filter((x) => !x.condition || x.condition(row))" :key="i">
<el-popconfirm
v-if="item.confirm"
:title="this.$t(`确定 {title}？`, { title: item.title })"
@confirm="click(item, row, vue)"
width="20rem">
<template #reference>
<el-button
:disabled="disabled"
:icon="item.icon"
:title="item.title ? $t(item.title) : ''"
:type="item.type"
@click.native.stop
size="small"></el-button>
</template>
</el-popconfirm>
<el-button
v-else
:disabled="disabled"
:icon="item.icon"
:title="item.title ? $t(item.title) : ''"
:type="item.type"
@click="click(item, row, vue)"
size="small">
</el-button>
</template>
</el-button-group>
<template v-if="showMenu">
<el-dropdown>
<el-button icon="el-icon-setting" size="small"> {{ $t('操作') }} </el-button>
<template #dropdown>
<el-dropdown-menu>
<template v-for="(item, i) in buttons?.filter((x) => !x.condition || x.condition(row))" :key="i">
<el-dropdown-item
:disabled="disabled"
:icon="item.icon"
:title="item.title ? $t(item.title) : ''"
:type="item.type"
@click="click(item, row, vue)"
size="small"
>{{ item.title }}
</el-dropdown-item>
</template>
</el-dropdown-menu>
</template>
</el-dropdown>
</template>
<template v-else>
<el-button-group>
<template v-for="(item, i) in buttons?.filter((x) => !x.condition || x.condition(row))" :key="i">
<el-button
:disabled="disabled"
:icon="item.icon"
:title="item.title ? $t(item.title) : ''"
: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
},

14
src/frontend/admin/src/components/naColTags/index.vue
View File

@ -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>

8
src/frontend/admin/src/components/naSearch/index.vue
View File

@ -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)

2
src/frontend/admin/src/components/scSelect/index.vue
View File

@ -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()
}
},

4
src/frontend/admin/src/components/scUpload/multiple.vue
View File

@ -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
}

2
src/frontend/admin/src/config/table.js
View File

@ -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)