365 lines
8.9 KiB
Vue
365 lines
8.9 KiB
Vue
|
<template>
|
|||
|
|
<DesignPopup
|
|||
|
|
v-model="popupShow"
|
|||
|
|
:title="`自定义按钮配置 【${tableDescribe}】（${tableName}）`"
|
|||
|
|
:fullscreen="true"
|
|||
|
|
v-model:isFull="isFull"
|
|||
|
|
>
|
|||
|
|
<div class="p-20px">
|
|||
|
|
<avue-crud
|
|||
|
|
ref="crudRef"
|
|||
|
|
v-model="tableForm"
|
|||
|
|
v-model:page="tablePage"
|
|||
|
|
v-model:search="tableSearch"
|
|||
|
|
:data="tableData"
|
|||
|
|
:option="tableOption"
|
|||
|
|
:table-loading="loading"
|
|||
|
|
:before-open="beforeOpen"
|
|||
|
|
@search-change="searchChange"
|
|||
|
|
@search-reset="resetChange"
|
|||
|
|
@row-save="rowSave"
|
|||
|
|
@row-update="rowUpdate"
|
|||
|
|
@row-del="rowDel"
|
|||
|
|
@refresh-change="getTableData"
|
|||
|
|
@size-change="sizeChange"
|
|||
|
|
@current-change="currentChange"
|
|||
|
|
@selection-change="selectionChange"
|
|||
|
|
>
|
|||
|
|
<template #menu-left="{ size }">
|
|||
|
|
<el-button
|
|||
|
|
:size="size"
|
|||
|
|
type="danger"
|
|||
|
|
:disabled="!tableSelect.length"
|
|||
|
|
@click="rowDel(selectIds)"
|
|||
|
|
>
|
|||
|
|
<Icon :size="16" icon="mi:delete" class="mr-3px" />批量删除
|
|||
|
|
</el-button>
|
|||
|
|
</template>
|
|||
|
|
<template #buttonExp-form="scope">
|
|||
|
|
<avue-input
|
|||
|
|
v-model="tableForm[scope.column.prop]"
|
|||
|
|
:size="scope.size"
|
|||
|
|
readonly
|
|||
|
|
:placeholder="`请输入 ${scope.column.label}`"
|
|||
|
|
@click="openMEDialog(scope.column, tableForm)"
|
|||
|
|
></avue-input>
|
|||
|
|
</template>
|
|||
|
|
<template #buttonIcon-form="{ column, size, disabled }">
|
|||
|
|
<IconSelectInput
|
|||
|
|
v-model="tableForm.buttonIcon"
|
|||
|
|
:prop="column.prop"
|
|||
|
|
:column="column"
|
|||
|
|
:size="size"
|
|||
|
|
:disabled="disabled"
|
|||
|
|
/>
|
|||
|
|
</template>
|
|||
|
|
<template #buttonIcon="{ row }">
|
|||
|
|
<Icon :size="14" :icon="row.buttonIcon" />
|
|||
|
|
</template>
|
|||
|
|
<template #buttonI18n-form>
|
|||
|
|
<I18nInput v-model="tableForm.buttonI18n" :def-name="tableForm.buttonName"></I18nInput>
|
|||
|
|
</template>
|
|||
|
|
</avue-crud>
|
|||
|
|
</div>
|
|||
|
|
<DesignPopup v-model="MEDialog.value" v-bind="MEDialog.params" :isBodyFull="true">
|
|||
|
|
<template #title>{{ MEDialog.title }}</template>
|
|||
|
|
<template #default>
|
|||
|
|
<MonacoEditor
|
|||
|
|
class="bg-#1e1e1e"
|
|||
|
|
v-model="MEData.value"
|
|||
|
|
v-bind="MEData.params"
|
|||
|
|
></MonacoEditor>
|
|||
|
|
</template>
|
|||
|
|
</DesignPopup>
|
|||
|
|
</DesignPopup>
|
|||
|
|
</template>
|
|||
|
|
<script lang="ts" setup>
|
|||
|
|
import * as ButtonApi from '@/api/design/table/customButton'
|
|||
|
|
import useMEDialog from '@/hooks/design/useMEDialog'
|
|||
|
|
import { I18nInput } from '@/components/LowDesign/src/shareControl/index'
|
|||
|
|
import { customButtonExample } from '@/components/LowDesign/src/utils/example'
|
|||
|
|
import useCopyText from '@/hooks/design/useCopyText'
|
|||
|
|
|
|||
|
|
const message = useMessage() // 消息弹窗
|
|||
|
|
const { t } = useI18n() // 国际化
|
|||
|
|
|
|||
|
|
defineOptions({ name: 'CustomButton' })
|
|||
|
|
interface Props {
|
|||
|
|
dbformId?: string
|
|||
|
|
tableName?: string
|
|||
|
|
tableDescribe?: string
|
|||
|
|
}
|
|||
|
|
const popupShow = defineModel({ default: false, type: Boolean })
|
|||
|
|
const props = defineProps<Props>()
|
|||
|
|
|
|||
|
|
const { copyText } = useCopyText()
|
|||
|
|
const { MEDialog, MEData, openMEDialog } = useMEDialog()
|
|||
|
|
|
|||
|
|
const loading = ref(true) // 列表的加载中消息弹窗
|
|||
|
|
const defaultBtn = [
|
|||
|
|
'addBtn',
|
|||
|
|
'editBtn',
|
|||
|
|
'viewBtn',
|
|||
|
|
'delBtn',
|
|||
|
|
'importBtn',
|
|||
|
|
'exportBtn',
|
|||
|
|
'batchDelBtn'
|
|||
|
|
]
|
|||
|
|
const tableOption = reactive({
|
|||
|
|
border: true,
|
|||
|
|
align: 'center',
|
|||
|
|
headerAlign: 'center',
|
|||
|
|
searchMenuSpan: 6,
|
|||
|
|
searchMenuPosition: 'left',
|
|||
|
|
labelSuffix: ' ',
|
|||
|
|
span: 12,
|
|||
|
|
calcHeight: 20,
|
|||
|
|
labelWidth: 100,
|
|||
|
|
dialogWidth: 900,
|
|||
|
|
selection: true,
|
|||
|
|
viewBtn: false,
|
|||
|
|
column: {
|
|||
|
|
buttonName: {
|
|||
|
|
label: '按钮名称',
|
|||
|
|
rules: [{ required: true, message: '请输入按钮名称', trigger: 'blur' }]
|
|||
|
|
},
|
|||
|
|
buttonCode: {
|
|||
|
|
label: '按钮编码',
|
|||
|
|
rules: [
|
|||
|
|
{ required: true, message: '请输入按钮编码', trigger: 'blur' },
|
|||
|
|
{
|
|||
|
|
validator: (rule, value, callback) => {
|
|||
|
|
if (defaultBtn.includes(value)) callback(`请不要以${value}作为按钮编码`)
|
|||
|
|
else callback()
|
|||
|
|
},
|
|||
|
|
trigger: 'blur'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
buttonLocation: {
|
|||
|
|
label: '按钮位置',
|
|||
|
|
type: 'select',
|
|||
|
|
clearable: false,
|
|||
|
|
dicData: [
|
|||
|
|
{ label: '操作列按钮', value: 'menu' },
|
|||
|
|
{ label: '表格头部按钮', value: 'header' }
|
|||
|
|
],
|
|||
|
|
value: 'menu'
|
|||
|
|
},
|
|||
|
|
buttonType: {
|
|||
|
|
label: '按钮类型',
|
|||
|
|
type: 'select',
|
|||
|
|
clearable: false,
|
|||
|
|
dicData: [
|
|||
|
|
{ label: '默认', value: '' },
|
|||
|
|
{ label: '主要', value: 'primary' },
|
|||
|
|
{ label: '成功', value: 'success' },
|
|||
|
|
{ label: '信息', value: 'info' },
|
|||
|
|
{ label: '警告', value: 'warning' },
|
|||
|
|
{ label: '危险', value: 'danger' }
|
|||
|
|
],
|
|||
|
|
value: ''
|
|||
|
|
},
|
|||
|
|
buttonIcon: {
|
|||
|
|
label: '按钮图标'
|
|||
|
|
},
|
|||
|
|
buttonSort: {
|
|||
|
|
label: '按钮排序',
|
|||
|
|
value: '1'
|
|||
|
|
},
|
|||
|
|
buttonI18n: {
|
|||
|
|
label: '国际化配置',
|
|||
|
|
row: true,
|
|||
|
|
hide: true
|
|||
|
|
},
|
|||
|
|
buttonShow: {
|
|||
|
|
label: '是否启用',
|
|||
|
|
type: 'radio',
|
|||
|
|
dicData: [
|
|||
|
|
{ label: '启用', value: 'Y' },
|
|||
|
|
{ label: '停用', value: 'N' }
|
|||
|
|
],
|
|||
|
|
span: 12,
|
|||
|
|
value: 'Y'
|
|||
|
|
},
|
|||
|
|
buttonAuth: {
|
|||
|
|
label: '权限控制',
|
|||
|
|
type: 'radio',
|
|||
|
|
labelTip: '开启后可以通过菜单权限控制显隐',
|
|||
|
|
dicData: [
|
|||
|
|
{ label: '启用', value: 'Y' },
|
|||
|
|
{ label: '停用', value: 'N' }
|
|||
|
|
],
|
|||
|
|
span: 12,
|
|||
|
|
value: 'N'
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
buttonExp: {
|
|||
|
|
label: '其他配置',
|
|||
|
|
span: 24,
|
|||
|
|
hide: true,
|
|||
|
|
params: {
|
|||
|
|
providerType: 'tableJsEnhance',
|
|||
|
|
width: '50%',
|
|||
|
|
headerBtn: [
|
|||
|
|
{
|
|||
|
|
name: `复制配置示例`,
|
|||
|
|
icon: 'solar:copy-outline',
|
|||
|
|
clickFun: () => {
|
|||
|
|
copyText(customButtonExample || '')
|
|||
|
|
},
|
|||
|
|
params: {
|
|||
|
|
size: 'small',
|
|||
|
|
type: 'primary'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}) //表格配置
|
|||
|
|
const tableForm = ref<any>({})
|
|||
|
|
const tableData = ref([])
|
|||
|
|
const tableSearch = ref({})
|
|||
|
|
const tablePage = ref({
|
|||
|
|
currentPage: 1,
|
|||
|
|
pageSize: 10,
|
|||
|
|
total: 0
|
|||
|
|
})
|
|||
|
|
const isFull = ref(true)
|
|||
|
|
const tableSelect = ref([])
|
|||
|
|
|
|||
|
|
const crudRef = ref()
|
|||
|
|
const { initTableLayout, windowSize } = useCrudHeight(crudRef)
|
|||
|
|
|
|||
|
|
const selectIds = computed(() => {
|
|||
|
|
return tableSelect.value.map((item) => item['id'])
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const calcHeight = computed(() => {
|
|||
|
|
return isFull.value ? 20 : windowSize.height.value * 0.1 + 70
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
watch(
|
|||
|
|
() => popupShow.value,
|
|||
|
|
(val: boolean) => {
|
|||
|
|
if (val) getTableData()
|
|||
|
|
}
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
watch(
|
|||
|
|
() => calcHeight.value,
|
|||
|
|
() => {
|
|||
|
|
tableOption.calcHeight = calcHeight.value
|
|||
|
|
}
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
watch(
|
|||
|
|
() => isFull.value,
|
|||
|
|
() => {
|
|||
|
|
initTableLayout()
|
|||
|
|
}
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
/** 查询列表 */
|
|||
|
|
const getTableData = async () => {
|
|||
|
|
loading.value = true
|
|||
|
|
let searchObj = {
|
|||
|
|
...tableSearch.value,
|
|||
|
|
pageNo: tablePage.value.currentPage,
|
|||
|
|
pageSize: tablePage.value.pageSize,
|
|||
|
|
dbformId: props.dbformId
|
|||
|
|
}
|
|||
|
|
for (let key in searchObj) if (searchObj[key] === '') delete searchObj[key]
|
|||
|
|
try {
|
|||
|
|
const data = await ButtonApi.getBtnList(searchObj)
|
|||
|
|
tableData.value = data.records
|
|||
|
|
tablePage.value.total = data.total
|
|||
|
|
} finally {
|
|||
|
|
loading.value = false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/** 搜索按钮操作 */
|
|||
|
|
const searchChange = (params, done) => {
|
|||
|
|
tablePage.value.currentPage = 1
|
|||
|
|
getTableData().finally(() => {
|
|||
|
|
done()
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/** 清空按钮操作 */
|
|||
|
|
const resetChange = () => {
|
|||
|
|
searchChange({}, () => {})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const sizeChange = (pageSize) => {
|
|||
|
|
tablePage.value.pageSize = pageSize
|
|||
|
|
resetChange()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const currentChange = (currentPage) => {
|
|||
|
|
tablePage.value.currentPage = currentPage
|
|||
|
|
getTableData()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const selectionChange = (data) => {
|
|||
|
|
tableSelect.value = data
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/** 表单打开前 */
|
|||
|
|
const beforeOpen = async (done, type) => {
|
|||
|
|
if (['edit', 'view'].includes(type) && tableForm.value.id) {
|
|||
|
|
tableForm.value = await ButtonApi.getBtnDetail(tableForm.value.id)
|
|||
|
|
}
|
|||
|
|
done()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/** 新增操作 */
|
|||
|
|
const rowSave = async (form, done, loading) => {
|
|||
|
|
let bool = await ButtonApi.saveBtnData({ ...form, dbformId: props.dbformId }).catch(() => false)
|
|||
|
|
if (bool) {
|
|||
|
|
message.success(t('common.createSuccess'))
|
|||
|
|
resetChange()
|
|||
|
|
done()
|
|||
|
|
} else loading()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/** 编辑操作 */
|
|||
|
|
const rowUpdate = async (form, index, done, loading) => {
|
|||
|
|
let bool = await ButtonApi.updateBtnData({ ...form, dbformId: props.dbformId }).catch(() => false)
|
|||
|
|
if (bool) {
|
|||
|
|
message.success(t('common.updateSuccess'))
|
|||
|
|
getTableData()
|
|||
|
|
done()
|
|||
|
|
} else loading()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/** 删除按钮操作 */
|
|||
|
|
const rowDel = async (data) => {
|
|||
|
|
try {
|
|||
|
|
// 删除的二次确认
|
|||
|
|
await message.delConfirm()
|
|||
|
|
// 发起删除
|
|||
|
|
await ButtonApi.deleteBtnData(data instanceof Array ? data : [data.id])
|
|||
|
|
message.success(t('common.delSuccess'))
|
|||
|
|
// 刷新列表
|
|||
|
|
await getTableData()
|
|||
|
|
} catch {}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/** 初始化 **/
|
|||
|
|
onMounted(async () => {
|
|||
|
|
await getTableData()
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
.button-info-dialog {
|
|||
|
|
.el-dialog__body {
|
|||
|
|
padding: 20px;
|
|||
|
|
overflow-x: hidden;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|