配置、字典管理
This commit is contained in:
parent
0391204510
commit
337df8e1e4
25
src/views/data/config/columns.ts
Normal file
25
src/views/data/config/columns.ts
Normal file
@ -0,0 +1,25 @@
|
||||
import { h } from 'vue';
|
||||
|
||||
export const columns = [
|
||||
{
|
||||
type: 'selection',
|
||||
width: 50,
|
||||
fixed: 'left',
|
||||
},
|
||||
{
|
||||
title: 'ID',
|
||||
key: 'id',
|
||||
},
|
||||
{
|
||||
title: '配置名称',
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
title: '配置编码',
|
||||
key: 'code',
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
key: 'sort',
|
||||
},
|
||||
];
|
||||
113
src/views/data/config/columnsItem.ts
Normal file
113
src/views/data/config/columnsItem.ts
Normal file
@ -0,0 +1,113 @@
|
||||
import { h } from 'vue';
|
||||
import { NTag } from 'naive-ui';
|
||||
export const columns = [
|
||||
{
|
||||
type: 'selection',
|
||||
width: 50,
|
||||
fixed: 'left',
|
||||
},
|
||||
{
|
||||
title: 'ID',
|
||||
key: 'id',
|
||||
fixed: 'left',
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
title: '配置项名称',
|
||||
key: 'name',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '配置项编码',
|
||||
key: 'code',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '配置项值',
|
||||
key: 'value',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '配置项类型',
|
||||
key: 'type',
|
||||
width: 100,
|
||||
render(record) {
|
||||
let typeText = '';
|
||||
switch (record.type) {
|
||||
case 'hidden':
|
||||
typeText = '隐藏';
|
||||
break;
|
||||
case 'readonly':
|
||||
typeText = '只读文本';
|
||||
break;
|
||||
case 'number':
|
||||
typeText = '数字';
|
||||
break;
|
||||
case 'text':
|
||||
typeText = '单行文本';
|
||||
break;
|
||||
case 'textarea':
|
||||
typeText = '多行文本';
|
||||
break;
|
||||
case 'password':
|
||||
typeText = '密码';
|
||||
break;
|
||||
case 'radio':
|
||||
typeText = '单选框';
|
||||
break;
|
||||
case 'checkbox':
|
||||
typeText = '复选框';
|
||||
break;
|
||||
case 'select':
|
||||
typeText = '下拉框(单选)';
|
||||
break;
|
||||
case 'selects':
|
||||
typeText = '下拉框(多选)';
|
||||
break;
|
||||
case 'icon':
|
||||
typeText = '字体图标';
|
||||
break;
|
||||
case 'date':
|
||||
typeText = '日期';
|
||||
break;
|
||||
case 'datetime':
|
||||
typeText = '时间';
|
||||
break;
|
||||
case 'image':
|
||||
typeText = '单张图片';
|
||||
break;
|
||||
case 'images':
|
||||
typeText = '多张图片';
|
||||
break;
|
||||
case 'file':
|
||||
typeText = '单个文件';
|
||||
break;
|
||||
case 'files':
|
||||
typeText = '多个文件';
|
||||
break;
|
||||
case 'ueditor':
|
||||
typeText = '富文本编辑器';
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
return h('span', typeText || '-');
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '配置项状态',
|
||||
key: 'status',
|
||||
width: 100,
|
||||
render(record) {
|
||||
return h(
|
||||
NTag,
|
||||
{
|
||||
type: record.status == 1 ? 'success' : 'error',
|
||||
},
|
||||
{
|
||||
default: () => (record.status == 1 ? '正常' : '停用'),
|
||||
},
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
200
src/views/data/config/configItem.vue
Normal file
200
src/views/data/config/configItem.vue
Normal file
@ -0,0 +1,200 @@
|
||||
<template>
|
||||
<PageWrapper>
|
||||
<BasicTable
|
||||
:columns="columns"
|
||||
:actionColumn="actionColumn"
|
||||
:request="loadDataTable"
|
||||
:row-key="(row) => row.id"
|
||||
ref="tableRef"
|
||||
@update:checked-row-keys="onSelectionChange"
|
||||
>
|
||||
<template #tableTitle>
|
||||
<n-space>
|
||||
<n-input
|
||||
type="text"
|
||||
v-model:value="params.name"
|
||||
placeholder="请输入配置项名称"
|
||||
clearable
|
||||
/>
|
||||
<n-button type="primary" @click="reloadTable">
|
||||
<template #icon>
|
||||
<n-icon> <SearchOutlined /> </n-icon></template
|
||||
>查询
|
||||
</n-button>
|
||||
<n-button type="primary" @click="handleAdd">
|
||||
<template #icon>
|
||||
<n-icon> <PlusOutlined /> </n-icon></template
|
||||
>新建</n-button
|
||||
>
|
||||
<n-button type="error" :disabled="!selectionData.length" @click="handleDelete()">
|
||||
<template #icon>
|
||||
<n-icon> <DeleteOutlined /> </n-icon></template
|
||||
>删除</n-button
|
||||
>
|
||||
</n-space>
|
||||
</template>
|
||||
</BasicTable>
|
||||
<editDialog
|
||||
v-if="editVisible"
|
||||
ref="configItemRef"
|
||||
:configId="configId"
|
||||
:configItemId="configItemId"
|
||||
v-model:visible="editVisible"
|
||||
@success="reloadTable('noRefresh')"
|
||||
/>
|
||||
</PageWrapper>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, h, nextTick, watch, defineAsyncComponent } from 'vue';
|
||||
import { PlusOutlined, FormOutlined, DeleteOutlined, SearchOutlined } from '@vicons/antd';
|
||||
import { getConfigItemList, configItemDelete, configItemBatchDelete } from '@/api/data/config';
|
||||
import { columns } from './columnsItem';
|
||||
import { useMessage, useDialog } from 'naive-ui';
|
||||
import { TableAction } from '@/components/Table';
|
||||
import editDialog from './editItem.vue';
|
||||
import { renderIcon } from '@/utils';
|
||||
|
||||
/**
|
||||
* 定义参数变量
|
||||
*/
|
||||
const tableRef = ref();
|
||||
const configItemRef = ref();
|
||||
const editVisible = ref(false);
|
||||
const selectionData = ref([]);
|
||||
const configItemId = ref(0);
|
||||
const message = useMessage();
|
||||
const dialog = useDialog();
|
||||
|
||||
/**
|
||||
* 定义查询参数
|
||||
*/
|
||||
const params = ref({
|
||||
name: '',
|
||||
});
|
||||
|
||||
/**
|
||||
* 定义接收的参数
|
||||
*/
|
||||
const props = defineProps({
|
||||
configId: {
|
||||
type: Number,
|
||||
required: true,
|
||||
default: 0,
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* 侦听器
|
||||
*/
|
||||
watch(
|
||||
() => props.configId,
|
||||
async (value) => {
|
||||
if (value) {
|
||||
await nextTick();
|
||||
console.log(value);
|
||||
reloadTable();
|
||||
}
|
||||
},
|
||||
);
|
||||
const actionColumn = reactive({
|
||||
width: 200,
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
key: 'action',
|
||||
fixed: 'right',
|
||||
render(record) {
|
||||
return h(TableAction as any, {
|
||||
style: 'button',
|
||||
actions: [
|
||||
{
|
||||
label: '编辑',
|
||||
icon: renderIcon(FormOutlined),
|
||||
type: 'warning',
|
||||
onClick: handleEdit.bind(null, record),
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
icon: renderIcon(DeleteOutlined),
|
||||
type: 'error',
|
||||
onClick: handleDelete.bind(null, record),
|
||||
},
|
||||
],
|
||||
select: (key) => {
|
||||
message.info(`您点击了，${key} 按钮`);
|
||||
},
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* 刷新配置项值列表
|
||||
* @param noRefresh 参数
|
||||
*/
|
||||
function reloadTable(noRefresh = '') {
|
||||
tableRef.value.reload(noRefresh ? {} : { pageNo: 1 });
|
||||
}
|
||||
|
||||
/**
|
||||
* 加载配置项值列表
|
||||
* @param res 参数
|
||||
*/
|
||||
const loadDataTable = async (res) => {
|
||||
const result = await getConfigItemList({ ...params.value, configId: props.configId, ...res });
|
||||
return result;
|
||||
};
|
||||
|
||||
/**
|
||||
* 新建配置
|
||||
*/
|
||||
const handleAdd = async () => {
|
||||
configItemId.value = 0;
|
||||
editVisible.value = true;
|
||||
await nextTick();
|
||||
configItemRef.value.openModal();
|
||||
};
|
||||
|
||||
/**
|
||||
* 编辑配置
|
||||
* @param id 参数
|
||||
*/
|
||||
const handleEdit = async (row) => {
|
||||
configItemId.value = row.id;
|
||||
editVisible.value = true;
|
||||
await nextTick();
|
||||
configItemRef.value.openModal();
|
||||
};
|
||||
|
||||
/**
|
||||
* 删除配置项
|
||||
* @param id 参数
|
||||
*/
|
||||
async function handleDelete(row) {
|
||||
dialog.warning({
|
||||
title: '提示',
|
||||
content: '确定要删除？',
|
||||
positiveText: '确定',
|
||||
negativeText: '取消',
|
||||
onPositiveClick: async () => {
|
||||
row ? await configItemDelete(row.id) : await configItemBatchDelete(selectionData.value);
|
||||
message.success('删除成功');
|
||||
reloadTable();
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 选项发生变化
|
||||
* @param value 参数
|
||||
*/
|
||||
function onSelectionChange(value) {
|
||||
selectionData.value = value;
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
146
src/views/data/config/edit.vue
Normal file
146
src/views/data/config/edit.vue
Normal file
@ -0,0 +1,146 @@
|
||||
<template>
|
||||
<basicModal
|
||||
@register="modalRegister"
|
||||
ref="modalRef"
|
||||
class="basicModal basicFormModal"
|
||||
@on-ok="handleSubmit"
|
||||
@on-close="handleClose"
|
||||
>
|
||||
<template #default>
|
||||
<n-form
|
||||
class="ls-form"
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
label-placement="left"
|
||||
label-width="80px"
|
||||
>
|
||||
<n-form-item
|
||||
label="配置名称"
|
||||
path="name"
|
||||
:rule="{ required: true, message: '请输入配置名称', trigger: 'blur' }"
|
||||
>
|
||||
<n-input v-model:value="formData.name" placeholder="请输入名称" clearable />
|
||||
</n-form-item>
|
||||
<n-form-item
|
||||
label="配置编码"
|
||||
path="code"
|
||||
:rule="{ required: true, message: '请输入配置编码', trigger: 'blur' }"
|
||||
>
|
||||
<n-input
|
||||
v-model:value="formData.code"
|
||||
:disabled="props.configId"
|
||||
placeholder="请输入配置编码"
|
||||
clearable
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item label="排序" path="sort">
|
||||
<n-input-number v-model:value="formData.sort" />
|
||||
</n-form-item>
|
||||
<n-form-item label="备注" path="note">
|
||||
<n-input
|
||||
v-model:value="formData.note"
|
||||
type="textarea"
|
||||
placeholder="请输入备注"
|
||||
clearable
|
||||
/>
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
</template>
|
||||
</basicModal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { getConfigDetail, configAdd, configUpdate } from '@/api/data/config';
|
||||
import { onMounted, reactive, ref } from 'vue';
|
||||
import { useModal } from '@/components/Modal';
|
||||
import { useMessage } from 'naive-ui';
|
||||
|
||||
/**
|
||||
* 定义参数变量
|
||||
*/
|
||||
const emit = defineEmits(['success', 'update:visible']);
|
||||
const formRef = ref();
|
||||
|
||||
/**
|
||||
* 定义表单参数
|
||||
*/
|
||||
const formData = reactive({
|
||||
id: '',
|
||||
name: '',
|
||||
code: '',
|
||||
sort: 0,
|
||||
note: '',
|
||||
});
|
||||
const message = useMessage();
|
||||
|
||||
/**
|
||||
* 定义接收的参数
|
||||
*/
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
default: false,
|
||||
},
|
||||
configId: {
|
||||
type: Number,
|
||||
required: true,
|
||||
default: 0,
|
||||
},
|
||||
});
|
||||
|
||||
const [modalRegister, { openModal, setSubLoading }] = useModal({
|
||||
title: props.configId ? '编辑配置' : '添加配置',
|
||||
subBtuText: '确定',
|
||||
width: 600,
|
||||
});
|
||||
/**
|
||||
* 执行提交表单
|
||||
*/
|
||||
const handleSubmit = async () => {
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(async () => {
|
||||
props.configId ? await configUpdate(formData) : await configAdd(formData);
|
||||
setSubLoading(false);
|
||||
message.success('操作成功');
|
||||
emit('update:visible', false);
|
||||
emit('success');
|
||||
})
|
||||
.catch((error) => {
|
||||
setSubLoading(false);
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 关闭窗体
|
||||
*/
|
||||
const handleClose = () => {
|
||||
emit('update:visible', false);
|
||||
};
|
||||
|
||||
/**
|
||||
* 设置表单数据
|
||||
*/
|
||||
const setFormData = async () => {
|
||||
const data = await getConfigDetail(props.configId);
|
||||
for (const key in formData) {
|
||||
if (data[key] != null && data[key] != undefined) {
|
||||
//@ts-ignore
|
||||
formData[key] = data[key];
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 钩子函数
|
||||
*/
|
||||
onMounted(() => {
|
||||
if (props.configId) {
|
||||
setFormData();
|
||||
}
|
||||
});
|
||||
//导出方法
|
||||
defineExpose({
|
||||
openModal,
|
||||
});
|
||||
</script>
|
||||
551
src/views/data/config/editItem.vue
Normal file
551
src/views/data/config/editItem.vue
Normal file
@ -0,0 +1,551 @@
|
||||
<template>
|
||||
<basicModal
|
||||
@register="modalRegister"
|
||||
ref="modalRef"
|
||||
class="basicModal basicFormModal"
|
||||
@on-ok="handleSubmit"
|
||||
@on-close="handleClose"
|
||||
>
|
||||
<template #default>
|
||||
<n-form
|
||||
class="ls-form"
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
label-placement="left"
|
||||
label-width="100px"
|
||||
>
|
||||
<n-form-item
|
||||
label="配置项名称"
|
||||
path="name"
|
||||
:rule="{ required: true, message: '请输入配置项名称', trigger: 'blur' }"
|
||||
>
|
||||
<n-input
|
||||
class="ls-input"
|
||||
v-model:value="formData.name"
|
||||
placeholder="请输入配置项名称"
|
||||
clearable
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item
|
||||
label="配置项编码"
|
||||
path="code"
|
||||
:rule="{ required: true, message: '请输入配置项编码', trigger: 'blur' }"
|
||||
>
|
||||
<n-input
|
||||
class="ls-input"
|
||||
v-model:value="formData.code"
|
||||
placeholder="请输入配置项编码"
|
||||
clearable
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item
|
||||
label="配置项类型"
|
||||
path="type"
|
||||
class="flex-1"
|
||||
:rule="{ required: true, message: '请选择配置项类型', trigger: 'change' }"
|
||||
>
|
||||
<n-select
|
||||
v-model:value="formData.type"
|
||||
class="flex-1"
|
||||
clearable
|
||||
placeholder="请选择配置项类型"
|
||||
:on-update:value="handleTypeChange"
|
||||
:options="typeList"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item label="配置项源" path="options">
|
||||
<div>
|
||||
<n-icon size="25" color="#165dff" style="cursor: pointer" @click="addOptions">
|
||||
<plusCircleOutlined />
|
||||
</n-icon>
|
||||
<div v-for="(item, index) in optionsData" :key="index" style="margin-top: 8px">
|
||||
<div class="flex item-center">
|
||||
<n-input v-model:value="item.label" placeholder="请输入name" clearable />
|
||||
<div style="margin: 0 10px">-</div>
|
||||
<n-input v-model:value="item.value" placeholder="请输入value" clearable />
|
||||
<n-icon
|
||||
size="25"
|
||||
color="#f56c6c"
|
||||
style="cursor: pointer; margin-left: 10px"
|
||||
@click="delOptions(index)"
|
||||
>
|
||||
<MinusCircleOutlined />
|
||||
</n-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</n-form-item>
|
||||
<n-form-item label="配置项值" path="value">
|
||||
<template
|
||||
v-if="
|
||||
formData.type == 'text' ||
|
||||
formData.type == 'readonly' ||
|
||||
formData.type == 'textarea' ||
|
||||
formData.type == 'password'
|
||||
"
|
||||
>
|
||||
<n-input
|
||||
v-model="formData.value"
|
||||
:type="
|
||||
formData.type == 'textarea'
|
||||
? 'textarea'
|
||||
: formData.type == 'password'
|
||||
? 'password'
|
||||
: ''
|
||||
"
|
||||
placeholder="请输入配置项值"
|
||||
clearable
|
||||
/>
|
||||
</template>
|
||||
<template v-else-if="formData.type == 'number'">
|
||||
<number-input v-model="formData.value" placeholder="请输入配置项值" />
|
||||
</template>
|
||||
<template v-else-if="formData.type == 'icon'">
|
||||
<icon-picker v-model:icon="formData.value">
|
||||
<template #iconSelect>
|
||||
<n-input v-model:value="formData.value" placeholder="请选择菜单图标">
|
||||
<template #prefix>
|
||||
<component :is="iconComponent(formData.value)" />
|
||||
</template>
|
||||
</n-input>
|
||||
</template>
|
||||
</icon-picker>
|
||||
</template>
|
||||
<template v-else-if="formData.type == 'radio'">
|
||||
<n-radio-group v-model:value="formData.value">
|
||||
<n-radio v-for="(item, index) in optionsData" :value="item.value" :key="index">
|
||||
{{ item.label }}
|
||||
</n-radio>
|
||||
</n-radio-group>
|
||||
</template>
|
||||
<template v-else-if="formData.type == 'checkbox'">
|
||||
<n-checkbox-group v-model:value="formData.values">
|
||||
<n-checkbox :value="item.value" :key="index" v-for="(item, index) in optionsData">{{
|
||||
item.label
|
||||
}}</n-checkbox>
|
||||
</n-checkbox-group>
|
||||
</template>
|
||||
<template v-else-if="formData.type == 'select'">
|
||||
<n-select v-model:value="formData.value" :options="optionsData" />
|
||||
</template>
|
||||
<template v-else-if="formData.type == 'selects'">
|
||||
<n-select v-model:value="formData.values" mode="multiple" :options="optionsData" />
|
||||
</template>
|
||||
<template v-else-if="formData.type == 'date' || formData.type == 'datetime'">
|
||||
<n-date-picker
|
||||
:type="formData.type"
|
||||
placeholder="请选择日期"
|
||||
v-model:value="formData.value"
|
||||
style="width: 100%"
|
||||
:value-format="formData.type == 'date' ? 'yyyy-MM-dd' : 'yyyy-MM-dd HH:mm:ss'"
|
||||
:format="formData.type == 'date' ? 'yyyy-MM-dd' : 'yyyy-MM-dd HH:mm:ss'"
|
||||
/>
|
||||
</template>
|
||||
<template v-else-if="formData.type == 'image'">
|
||||
<UploadImg
|
||||
@change-file-name="(name) => (formData.fileName = name)"
|
||||
:fileType="['image/jpeg', 'image/png', 'image/jpg', 'image/gif']"
|
||||
name="config"
|
||||
:fileSize="200"
|
||||
v-model:image-url="formData.filePath"
|
||||
>
|
||||
<template #tip>支持扩展名: jpg png jpeg;文件大小不超过200M</template>
|
||||
</UploadImg>
|
||||
</template>
|
||||
<template v-else-if="formData.type == 'images'">
|
||||
<UploadImgs
|
||||
@upload="fileUploads"
|
||||
file-type=".jpeg,.png,.jpg,.gif"
|
||||
name="config"
|
||||
:fileSize="200"
|
||||
:multiple="true"
|
||||
:fileLists="formData.fileList"
|
||||
/>
|
||||
</template>
|
||||
<template v-else-if="formData.type == 'file'">
|
||||
<UploadFile
|
||||
@upload="fileUploadFile"
|
||||
file-type=".xlsx.xls.doc.docx"
|
||||
name="config"
|
||||
:fileLists="
|
||||
formData.filePath ? [{ name: formData.fileName, url: formData.filePath }] : []
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
<template v-else-if="formData.type == 'files'">
|
||||
<UploadFile
|
||||
@upload="fileUploads"
|
||||
file-type=".xlsx.xls.doc.docx"
|
||||
name="config"
|
||||
:multiple="true"
|
||||
:fileLists="formData.fileList"
|
||||
/>
|
||||
</template>
|
||||
<template v-else-if="formData.type == 'ueditor'">
|
||||
<Editor ref="editorRef" :height="fwbHeight" class="flex-1" name="config" />
|
||||
</template>
|
||||
</n-form-item>
|
||||
<n-form-item label="排序" path="sort">
|
||||
<n-input-number v-model:value="formData.sort" />
|
||||
</n-form-item>
|
||||
<n-form-item label="配置项状态" path="status">
|
||||
<n-radio-group v-model:value="formData.status" name="status">
|
||||
<n-radio :value="1">正常</n-radio>
|
||||
<n-radio :value="2">停用</n-radio>
|
||||
</n-radio-group>
|
||||
</n-form-item>
|
||||
<n-form-item label="备注" path="note">
|
||||
<n-input
|
||||
v-model:value="formData.note"
|
||||
type="textarea"
|
||||
placeholder="请输入备注"
|
||||
clearable
|
||||
/>
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
</template>
|
||||
</basicModal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { getConfigItemDetail, configItemAdd, configItemUpdate } from '@/api/data/config';
|
||||
import { onMounted, ref, reactive, nextTick } from 'vue';
|
||||
import { useMessage } from 'naive-ui';
|
||||
import { PlusCircleOutlined, MinusCircleOutlined } from '@vicons/antd';
|
||||
import { useModal } from '@/components/Modal';
|
||||
import Editor from '@/components/Editor/tinymce.vue';
|
||||
import UploadImg from '@/components/Upload/Image.vue';
|
||||
import UploadImgs from '@/components/Upload/Images.vue';
|
||||
import UploadFile from '@/components/Upload/file.vue';
|
||||
import IconPicker from '@/components/icon/picker.vue';
|
||||
import * as VueIcon from '@vicons/antd';
|
||||
import { renderIcon } from '@/utils';
|
||||
|
||||
/**
|
||||
* 定义接收的参数
|
||||
*/
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
default: false,
|
||||
},
|
||||
configId: {
|
||||
type: Number,
|
||||
required: true,
|
||||
default: 0,
|
||||
},
|
||||
configItemId: {
|
||||
type: Number,
|
||||
required: true,
|
||||
default: 0,
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* 定义参数变量
|
||||
*/
|
||||
const emit = defineEmits(['success', 'update:visible']);
|
||||
const formRef = ref();
|
||||
const editorRef = ref();
|
||||
const message = useMessage();
|
||||
|
||||
/**
|
||||
* 定义表单参数
|
||||
*/
|
||||
const formData = reactive({
|
||||
id: '',
|
||||
name: '',
|
||||
code: '',
|
||||
value: '',
|
||||
values: [],
|
||||
fileName: '',
|
||||
filePath: '',
|
||||
fileList: [],
|
||||
valueList: [],
|
||||
sort: 0,
|
||||
options: '',
|
||||
type: 'text',
|
||||
status: 1,
|
||||
note: '',
|
||||
});
|
||||
const fwbHeight = document.body.clientHeight - 400;
|
||||
const optionsData = ref([]);
|
||||
const [modalRegister, { openModal, setProps, setSubLoading }] = useModal({
|
||||
title: props.configItemId ? '编辑配置项' : '新增配置项',
|
||||
subBtuText: '确定',
|
||||
width: 600,
|
||||
});
|
||||
/**
|
||||
* 定义类型数据
|
||||
*/
|
||||
const typeList = ref([
|
||||
{
|
||||
label: '隐藏',
|
||||
value: 'hidden',
|
||||
},
|
||||
{
|
||||
label: '只读文本',
|
||||
value: 'readonly',
|
||||
},
|
||||
{
|
||||
label: '数字',
|
||||
value: 'number',
|
||||
},
|
||||
{
|
||||
label: '单行文本',
|
||||
value: 'text',
|
||||
},
|
||||
{
|
||||
label: '多行文本',
|
||||
value: 'textarea',
|
||||
},
|
||||
{
|
||||
label: '密码',
|
||||
value: 'password',
|
||||
},
|
||||
{
|
||||
label: '单选框',
|
||||
value: 'radio',
|
||||
},
|
||||
{
|
||||
label: '复选框',
|
||||
value: 'checkbox',
|
||||
},
|
||||
{
|
||||
label: '下拉框(单选)',
|
||||
value: 'select',
|
||||
},
|
||||
{
|
||||
label: '下拉框(多选)',
|
||||
value: 'selects',
|
||||
},
|
||||
{
|
||||
label: '字体图标',
|
||||
value: 'icon',
|
||||
},
|
||||
{
|
||||
label: '日期',
|
||||
value: 'date',
|
||||
},
|
||||
{
|
||||
label: '时间',
|
||||
value: 'datetime',
|
||||
},
|
||||
{
|
||||
label: '单张图片',
|
||||
value: 'image',
|
||||
},
|
||||
{
|
||||
label: '多张图片',
|
||||
value: 'images',
|
||||
},
|
||||
{
|
||||
label: '单个文件',
|
||||
value: 'file',
|
||||
},
|
||||
{
|
||||
label: '多个文件',
|
||||
value: 'files',
|
||||
},
|
||||
{
|
||||
label: '富文本编辑器',
|
||||
value: 'ueditor',
|
||||
},
|
||||
]);
|
||||
|
||||
/**
|
||||
* 定义Icon组件
|
||||
* @param icon 图标
|
||||
*/
|
||||
const iconComponent = (icon) => {
|
||||
const IconComponent = renderIcon(VueIcon[icon]);
|
||||
return IconComponent;
|
||||
};
|
||||
/**
|
||||
* 执行类型选择发生变化
|
||||
*/
|
||||
const handleTypeChange = (e) => {
|
||||
formData.type = e;
|
||||
formData.fileList = [];
|
||||
formData.fileName = '';
|
||||
formData.filePath = '';
|
||||
formData.values = [];
|
||||
formData.value = '';
|
||||
if (e == 'ueditor') {
|
||||
setProps({ width: 800 });
|
||||
} else {
|
||||
setProps({ width: 600 });
|
||||
}
|
||||
if (e == 'date' || e == 'datetime') {
|
||||
formData.value = null;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 执行提交表单
|
||||
*/
|
||||
const handleSubmit = async () => {
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(async () => {
|
||||
formData.options = '';
|
||||
optionsData.value.map((item, index) => {
|
||||
formData.options += `${item.value}=${item.label}${
|
||||
index < optionsData.value.length - 1 ? ',' : ''
|
||||
}`;
|
||||
});
|
||||
|
||||
if (formData.type == 'checkbox' || formData.type == 'selects') {
|
||||
formData.value = formData.values.join(',');
|
||||
}
|
||||
if (formData.type == 'image') {
|
||||
formData.value = formData.filePath;
|
||||
}
|
||||
if (formData.type == 'file') {
|
||||
formData.value = formData.fileName + '|' + formData.filePath;
|
||||
}
|
||||
if (formData.type == 'images') {
|
||||
formData.value = '';
|
||||
formData.fileList.map((item, index) => {
|
||||
formData.value += `${item.filePath}${index < formData.fileList.length - 1 ? ',' : ''}`;
|
||||
});
|
||||
}
|
||||
if (formData.type == 'files') {
|
||||
formData.value = '';
|
||||
formData.fileList.map((item, index) => {
|
||||
formData.value += `${item.fileName}|${item.filePath}${
|
||||
index < formData.fileList.length - 1 ? ',' : ''
|
||||
}`;
|
||||
});
|
||||
}
|
||||
if (formData.type == 'ueditor') {
|
||||
formData.value = editorRef.value.myValue;
|
||||
}
|
||||
props.configItemId
|
||||
? await configItemUpdate({ ...formData, configId: props.configId })
|
||||
: await configItemAdd({ ...formData, configId: props.configId });
|
||||
setSubLoading(false);
|
||||
message.success('操作成功');
|
||||
emit('update:visible', false);
|
||||
emit('success');
|
||||
})
|
||||
.catch((error) => {
|
||||
setSubLoading(false);
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 关闭窗体
|
||||
*/
|
||||
const handleClose = () => {
|
||||
emit('update:visible', false);
|
||||
};
|
||||
|
||||
/**
|
||||
* 设置表单数据
|
||||
*/
|
||||
const setFormData = async () => {
|
||||
const data = await getConfigItemDetail(props.configItemId);
|
||||
for (const key in formData) {
|
||||
if (data[key] != null && data[key] != undefined) {
|
||||
//@ts-ignore
|
||||
formData[key] = data[key];
|
||||
}
|
||||
}
|
||||
if (formData.options) {
|
||||
let arr = formData.options.split(',');
|
||||
let kk = [];
|
||||
arr.map((item) => {
|
||||
let v = item.split('=');
|
||||
kk.push({ label: v[1], value: v[0] });
|
||||
});
|
||||
optionsData.value = kk;
|
||||
}
|
||||
if (formData.type == 'checkbox' || formData.type == 'selects') {
|
||||
if (formData.value) {
|
||||
formData.value = formData.value.split(',');
|
||||
formData.values = formData.value;
|
||||
}
|
||||
}
|
||||
if (formData.type == 'image') {
|
||||
if (formData.value) {
|
||||
formData.filePath = formData.value;
|
||||
}
|
||||
}
|
||||
if (formData.type == 'file') {
|
||||
if (formData.value) {
|
||||
formData.fileName = formData.value.split('|')[0];
|
||||
formData.filePath = formData.value.split('|')[1];
|
||||
}
|
||||
}
|
||||
if (formData.type == 'images') {
|
||||
formData.valueList.map((item) => {
|
||||
formData.fileList.push({
|
||||
filePath: item,
|
||||
});
|
||||
});
|
||||
}
|
||||
if (formData.type == 'files') {
|
||||
formData.valueList.map((item) => {
|
||||
let kk = item.split('|');
|
||||
formData.fileList.push({
|
||||
fileName: kk[0],
|
||||
filePath: kk[1],
|
||||
name: kk[0],
|
||||
url: kk[1],
|
||||
});
|
||||
});
|
||||
}
|
||||
if (formData.type == 'ueditor') {
|
||||
nextTick(() => {
|
||||
editorRef.value.myValue = formData.value;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 添加选项
|
||||
*/
|
||||
const addOptions = () => {
|
||||
optionsData.value.push({ label: '', value: '' });
|
||||
};
|
||||
|
||||
/**
|
||||
* 删除选项
|
||||
* @param index 索引
|
||||
*/
|
||||
const delOptions = (index) => {
|
||||
optionsData.value.splice(index, 1);
|
||||
};
|
||||
|
||||
/**
|
||||
* 文件上传
|
||||
* @param list 列表
|
||||
*/
|
||||
const fileUploads = (list: any) => {
|
||||
formData.fileList = list;
|
||||
};
|
||||
|
||||
/**
|
||||
* 文件上传
|
||||
* @param filePath 文件路径
|
||||
* @param fileName 文件名称
|
||||
*/
|
||||
const fileUploadFile = async (filePath: any, fileName: any) => {
|
||||
formData.filePath = filePath;
|
||||
formData.fileName = fileName;
|
||||
};
|
||||
|
||||
/**
|
||||
* 钩子函数
|
||||
*/
|
||||
onMounted(() => {
|
||||
if (props.configItemId) {
|
||||
setFormData();
|
||||
}
|
||||
});
|
||||
//导出方法
|
||||
defineExpose({
|
||||
openModal,
|
||||
});
|
||||
</script>
|
||||
250
src/views/data/config/index.vue
Normal file
250
src/views/data/config/index.vue
Normal file
@ -0,0 +1,250 @@
|
||||
<template>
|
||||
<PageWrapper>
|
||||
<n-grid x-gap="12" cols="4">
|
||||
<n-grid-item span="1">
|
||||
<n-card shadow="hover" class="border-0">
|
||||
<template #header>
|
||||
<n-grid cols="24">
|
||||
<n-gi span="18">
|
||||
<n-input
|
||||
type="text"
|
||||
v-model:value="params.name"
|
||||
placeholder="请输入配置名称"
|
||||
clearable
|
||||
/>
|
||||
</n-gi>
|
||||
<n-gi span="6" style="text-align: right">
|
||||
<n-button
|
||||
type="primary"
|
||||
@click="
|
||||
pager.page = 1;
|
||||
loadDataTable();
|
||||
"
|
||||
>
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<SearchOutlined />
|
||||
</n-icon> </template
|
||||
>查询
|
||||
</n-button>
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
<div style="margin-top: 15px">
|
||||
<n-space>
|
||||
<n-button type="primary" @click="handleAdd" v-perm="['sys:config:add']">
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<PlusOutlined />
|
||||
</n-icon>
|
||||
</template>
|
||||
新建
|
||||
</n-button>
|
||||
<n-button type="warning" @click="handleEdit" v-perm="['sys:config:edit']">
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<FormOutlined />
|
||||
</n-icon> </template
|
||||
>编辑
|
||||
</n-button>
|
||||
<n-button type="error" @click="handleDelete()" v-perm="['sys:config:delete']">
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<DeleteOutlined />
|
||||
</n-icon> </template
|
||||
>删除
|
||||
</n-button>
|
||||
</n-space>
|
||||
</div>
|
||||
</template>
|
||||
<template #default>
|
||||
<div :style="{ height: fwbHeight + 'px' }" class="dict-list-box">
|
||||
<div
|
||||
v-for="(item, index) in configDataList"
|
||||
:key="index"
|
||||
@click="onCheckedRow(item)"
|
||||
class="dict-item"
|
||||
:class="item.id == configId ? 'active' : ''"
|
||||
>
|
||||
<span class="t1"
|
||||
>{{ item.name }}<span class="t2">({{ item.code }})</span></span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<pagination
|
||||
style="justify-content: flex-end"
|
||||
class="mt-10 flex"
|
||||
@change="loadDataTable"
|
||||
v-model="pager"
|
||||
/>
|
||||
</template>
|
||||
</n-card>
|
||||
</n-grid-item>
|
||||
<n-grid-item span="3">
|
||||
<n-card shadow="hover" class="mb-4 border-0 proCard">
|
||||
<configItem :configId="configId" v-if="configItemShow" />
|
||||
</n-card>
|
||||
</n-grid-item>
|
||||
</n-grid>
|
||||
<editDialog
|
||||
v-if="editVisible"
|
||||
:configId="configId"
|
||||
v-model:visible="editVisible"
|
||||
ref="createModalRef"
|
||||
@success="loadDataTable()"
|
||||
/>
|
||||
</PageWrapper>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, nextTick, defineAsyncComponent, onMounted } from 'vue';
|
||||
import { getConfigList, configDelete } from '@/api/data/config';
|
||||
import { PlusOutlined, FormOutlined, DeleteOutlined, SearchOutlined } from '@vicons/antd';
|
||||
import editDialog from './edit.vue';
|
||||
import configItem from './configItem.vue';
|
||||
import { basicModal, useModal } from '@/components/Modal';
|
||||
import { useMessage, useDialog } from 'naive-ui';
|
||||
|
||||
/**
|
||||
* 定义参数变量
|
||||
*/
|
||||
const configId = ref(0);
|
||||
const createModalRef = ref();
|
||||
const configItemShow = ref(false);
|
||||
const editVisible = ref(false);
|
||||
const message = useMessage();
|
||||
const dialog = useDialog();
|
||||
|
||||
/**
|
||||
* 定义查询参数
|
||||
*/
|
||||
const params = ref({
|
||||
name: '',
|
||||
});
|
||||
const configDataList = ref([]);
|
||||
|
||||
/**
|
||||
* 定义分页参数
|
||||
*/
|
||||
const pager = ref({
|
||||
page: 1,
|
||||
size: 10,
|
||||
count: configDataList.value.length,
|
||||
});
|
||||
const fwbHeight = document.body.clientHeight - 370;
|
||||
|
||||
/**
|
||||
* 执行添加
|
||||
*/
|
||||
const handleAdd = async () => {
|
||||
configId.value = 0;
|
||||
editVisible.value = true;
|
||||
await nextTick();
|
||||
createModalRef.value.openModal();
|
||||
};
|
||||
|
||||
/**
|
||||
* 执行编辑
|
||||
*/
|
||||
const handleEdit = async () => {
|
||||
editVisible.value = true;
|
||||
await nextTick();
|
||||
createModalRef.value.openModal();
|
||||
};
|
||||
|
||||
/**
|
||||
* 数据行选中事件
|
||||
* @param row 参数
|
||||
*/
|
||||
function onCheckedRow(row) {
|
||||
configId.value = row.id;
|
||||
}
|
||||
|
||||
/**
|
||||
* 加载数据列表
|
||||
*/
|
||||
const loadDataTable = async () => {
|
||||
let result = await getConfigList({
|
||||
...params.value,
|
||||
pageNo: pager.value.page,
|
||||
pageSize: pager.value.size,
|
||||
});
|
||||
configId.value = result?.records[0]?.id;
|
||||
configItemShow.value = true;
|
||||
configDataList.value = result.records;
|
||||
pager.value.count = result.total;
|
||||
};
|
||||
|
||||
/**
|
||||
* 执行删除
|
||||
*/
|
||||
async function handleDelete() {
|
||||
dialog.warning({
|
||||
title: '提示',
|
||||
content: '确定要删除？',
|
||||
positiveText: '确定',
|
||||
negativeText: '取消',
|
||||
onPositiveClick: async () => {
|
||||
configDelete(configId.value);
|
||||
message.success('删除成功');
|
||||
pager.value.page = 1;
|
||||
loadDataTable();
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 钩子函数
|
||||
*/
|
||||
onMounted(() => {
|
||||
loadDataTable();
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dict-list-box {
|
||||
overflow: auto;
|
||||
|
||||
.dict-item {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding: 0 6px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.t1 {
|
||||
font-size: 14px;
|
||||
display: block;
|
||||
font-weight: 700;
|
||||
|
||||
.t2 {
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: #e8f1ff;
|
||||
border-radius: 3px;
|
||||
|
||||
.t1 {
|
||||
color: #1677ff;
|
||||
}
|
||||
|
||||
.t2 {
|
||||
color: rgb(22, 119, 255, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-badge__content.is-fixed {
|
||||
top: 20px;
|
||||
right: calc(-10px + var(--ant-badge-size) / 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
21
src/views/data/dict/columns.ts
Normal file
21
src/views/data/dict/columns.ts
Normal file
@ -0,0 +1,21 @@
|
||||
import { h } from 'vue';
|
||||
|
||||
export const columns = [
|
||||
{
|
||||
type: 'selection',
|
||||
width: 50,
|
||||
fixed: 'left',
|
||||
},
|
||||
{
|
||||
title: 'ID',
|
||||
key: 'id',
|
||||
},
|
||||
{
|
||||
title: '字典名称',
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
title: '字典编码',
|
||||
key: 'code',
|
||||
},
|
||||
];
|
||||
44
src/views/data/dict/columnsItem.ts
Normal file
44
src/views/data/dict/columnsItem.ts
Normal file
@ -0,0 +1,44 @@
|
||||
import { h } from 'vue';
|
||||
import { NTag } from 'naive-ui';
|
||||
export const columns = [
|
||||
{
|
||||
type: 'selection',
|
||||
width: 50,
|
||||
fixed: 'left',
|
||||
},
|
||||
{
|
||||
title: '字典名称',
|
||||
key: 'name',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '字典编码',
|
||||
key: 'dictCode',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '字典项值',
|
||||
key: 'value',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
key: 'sort',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
key: 'note',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '创建人',
|
||||
key: 'createUser',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
key: 'createTime',
|
||||
width: 180,
|
||||
},
|
||||
];
|
||||
203
src/views/data/dict/dictItem.vue
Normal file
203
src/views/data/dict/dictItem.vue
Normal file
@ -0,0 +1,203 @@
|
||||
<template>
|
||||
<PageWrapper>
|
||||
<BasicTable
|
||||
:columns="columns"
|
||||
:actionColumn="actionColumn"
|
||||
:request="loadDataTable"
|
||||
:row-key="(row) => row.id"
|
||||
ref="tableRef"
|
||||
@update:checked-row-keys="onSelectionChange"
|
||||
>
|
||||
<template #tableTitle>
|
||||
<n-space>
|
||||
<n-input
|
||||
type="text"
|
||||
v-model:value="params.name"
|
||||
placeholder="请输入字典项名称"
|
||||
clearable
|
||||
/>
|
||||
<n-button type="primary" @click="reloadTable">
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<SearchOutlined /> </n-icon></template
|
||||
>查询
|
||||
</n-button>
|
||||
<n-button type="primary" @click="handleAdd">
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<PlusOutlined /> </n-icon></template
|
||||
>新建</n-button
|
||||
>
|
||||
<n-button type="error" :disabled="!selectionData.length" @click="handleDelete()">
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<DeleteOutlined /> </n-icon></template
|
||||
>删除</n-button
|
||||
>
|
||||
</n-space>
|
||||
</template>
|
||||
</BasicTable>
|
||||
<editDialog
|
||||
v-if="editVisible"
|
||||
ref="dictItemRef"
|
||||
:dictId="dictId"
|
||||
:dictItemId="dictItemId"
|
||||
v-model:visible="editVisible"
|
||||
@success="reloadTable('noRefresh')"
|
||||
/>
|
||||
</PageWrapper>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, h, nextTick, watch, defineAsyncComponent } from 'vue';
|
||||
import { PlusOutlined, FormOutlined, DeleteOutlined, SearchOutlined } from '@vicons/antd';
|
||||
import { getDictItemList, dictItemDelete, dictItemBatchDelete } from '@/api/data/dictionary';
|
||||
import { columns } from './columnsItem';
|
||||
import { useMessage, useDialog } from 'naive-ui';
|
||||
import { TableAction } from '@/components/Table';
|
||||
import editDialog from './editItem.vue';
|
||||
import { renderIcon } from '@/utils';
|
||||
|
||||
/**
|
||||
* 定义参数变量
|
||||
*/
|
||||
const tableRef = ref();
|
||||
const dictItemRef = ref();
|
||||
const editVisible = ref(false);
|
||||
const selectionData = ref([]);
|
||||
const dictItemId = ref(0);
|
||||
const message = useMessage();
|
||||
const dialog = useDialog();
|
||||
|
||||
/**
|
||||
* 定义查询参数
|
||||
*/
|
||||
const params = ref({
|
||||
name: '',
|
||||
});
|
||||
|
||||
/**
|
||||
* 定义接收的参数
|
||||
*/
|
||||
const props = defineProps({
|
||||
dictId: {
|
||||
type: Number,
|
||||
required: true,
|
||||
default: 0,
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* 侦听器
|
||||
*/
|
||||
watch(
|
||||
() => props.dictId,
|
||||
async (value) => {
|
||||
if (value) {
|
||||
await nextTick();
|
||||
console.log(value);
|
||||
reloadTable();
|
||||
}
|
||||
},
|
||||
);
|
||||
const actionColumn = reactive({
|
||||
width: 200,
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
key: 'action',
|
||||
fixed: 'right',
|
||||
render(record) {
|
||||
return h(TableAction as any, {
|
||||
style: 'button',
|
||||
actions: [
|
||||
{
|
||||
label: '编辑',
|
||||
icon: renderIcon(FormOutlined),
|
||||
type: 'warning',
|
||||
onClick: handleEdit.bind(null, record),
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
icon: renderIcon(DeleteOutlined),
|
||||
type: 'error',
|
||||
onClick: handleDelete.bind(null, record),
|
||||
},
|
||||
],
|
||||
select: (key) => {
|
||||
message.info(`您点击了，${key} 按钮`);
|
||||
},
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* 刷新配置项值列表
|
||||
* @param noRefresh 参数
|
||||
*/
|
||||
function reloadTable(noRefresh = '') {
|
||||
tableRef.value.reload(noRefresh ? {} : { pageNo: 1 });
|
||||
}
|
||||
|
||||
/**
|
||||
* 加载配置项值列表
|
||||
* @param res 参数
|
||||
*/
|
||||
const loadDataTable = async (res) => {
|
||||
const result = await getDictItemList({ ...params.value, dictId: props.dictId, ...res });
|
||||
return result;
|
||||
};
|
||||
|
||||
/**
|
||||
* 新建配置
|
||||
*/
|
||||
const handleAdd = async () => {
|
||||
dictItemId.value = 0;
|
||||
editVisible.value = true;
|
||||
await nextTick();
|
||||
dictItemRef.value.openModal();
|
||||
};
|
||||
|
||||
/**
|
||||
* 编辑配置
|
||||
* @param id 参数
|
||||
*/
|
||||
const handleEdit = async (row) => {
|
||||
dictItemId.value = row.id;
|
||||
editVisible.value = true;
|
||||
await nextTick();
|
||||
dictItemRef.value.openModal();
|
||||
};
|
||||
|
||||
/**
|
||||
* 删除配置项
|
||||
* @param id 参数
|
||||
*/
|
||||
async function handleDelete(row) {
|
||||
dialog.warning({
|
||||
title: '提示',
|
||||
content: '确定要删除？',
|
||||
positiveText: '确定',
|
||||
negativeText: '取消',
|
||||
onPositiveClick: async () => {
|
||||
row ? await dictItemDelete(row.id) : await dictItemBatchDelete(selectionData.value);
|
||||
message.success('删除成功');
|
||||
reloadTable();
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 选项发生变化
|
||||
* @param value 参数
|
||||
*/
|
||||
function onSelectionChange(value) {
|
||||
selectionData.value = value;
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
146
src/views/data/dict/edit.vue
Normal file
146
src/views/data/dict/edit.vue
Normal file
@ -0,0 +1,146 @@
|
||||
<template>
|
||||
<basicModal
|
||||
@register="modalRegister"
|
||||
ref="modalRef"
|
||||
class="basicModal basicFormModal"
|
||||
@on-ok="handleSubmit"
|
||||
@on-close="handleClose"
|
||||
>
|
||||
<template #default>
|
||||
<n-form
|
||||
class="ls-form"
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
label-placement="left"
|
||||
label-width="80px"
|
||||
>
|
||||
<n-form-item
|
||||
label="字典名称"
|
||||
path="name"
|
||||
:rule="{ required: true, message: '请输入字典名称', trigger: 'blur' }"
|
||||
>
|
||||
<n-input v-model:value="formData.name" placeholder="请输入字典名称" clearable />
|
||||
</n-form-item>
|
||||
<n-form-item
|
||||
label="字典编码"
|
||||
path="code"
|
||||
:rule="{ required: true, message: '请输入字典编码', trigger: 'blur' }"
|
||||
>
|
||||
<n-input
|
||||
v-model:value="formData.code"
|
||||
:disabled="props.dictId"
|
||||
placeholder="请输入字典编码"
|
||||
clearable
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item label="排序" path="sort">
|
||||
<n-input-number v-model:value="formData.sort" />
|
||||
</n-form-item>
|
||||
<n-form-item label="备注" path="note">
|
||||
<n-input
|
||||
v-model:value="formData.note"
|
||||
type="textarea"
|
||||
placeholder="请输入备注"
|
||||
clearable
|
||||
/>
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
</template>
|
||||
</basicModal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { getDictDetail, dictAdd, dictUpdate } from '@/api/data/dictionary';
|
||||
import { onMounted, reactive, ref } from 'vue';
|
||||
import { useModal } from '@/components/Modal';
|
||||
import { useMessage } from 'naive-ui';
|
||||
|
||||
/**
|
||||
* 定义参数变量
|
||||
*/
|
||||
const emit = defineEmits(['success', 'update:visible']);
|
||||
const formRef = ref();
|
||||
|
||||
/**
|
||||
* 定义表单参数
|
||||
*/
|
||||
const formData = reactive({
|
||||
id: '',
|
||||
name: '',
|
||||
code: '',
|
||||
sort: 0,
|
||||
note: '',
|
||||
});
|
||||
const message = useMessage();
|
||||
|
||||
/**
|
||||
* 定义接收的参数
|
||||
*/
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
default: false,
|
||||
},
|
||||
dictId: {
|
||||
type: Number,
|
||||
required: true,
|
||||
default: 0,
|
||||
},
|
||||
});
|
||||
|
||||
const [modalRegister, { openModal, setSubLoading }] = useModal({
|
||||
title: props.dictId ? '编辑字典' : '添加字典',
|
||||
subBtuText: '确定',
|
||||
width: 600,
|
||||
});
|
||||
/**
|
||||
* 执行提交表单
|
||||
*/
|
||||
const handleSubmit = async () => {
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(async () => {
|
||||
props.dictId ? await dictUpdate(formData) : await dictAdd(formData);
|
||||
setSubLoading(false);
|
||||
message.success('操作成功');
|
||||
emit('update:visible', false);
|
||||
emit('success');
|
||||
})
|
||||
.catch((error) => {
|
||||
setSubLoading(false);
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 关闭窗体
|
||||
*/
|
||||
const handleClose = () => {
|
||||
emit('update:visible', false);
|
||||
};
|
||||
|
||||
/**
|
||||
* 设置表单数据
|
||||
*/
|
||||
const setFormData = async () => {
|
||||
const data = await getDictDetail(props.dictId);
|
||||
for (const key in formData) {
|
||||
if (data[key] != null && data[key] != undefined) {
|
||||
//@ts-ignore
|
||||
formData[key] = data[key];
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 钩子函数
|
||||
*/
|
||||
onMounted(() => {
|
||||
if (props.dictId) {
|
||||
setFormData();
|
||||
}
|
||||
});
|
||||
//导出方法
|
||||
defineExpose({
|
||||
openModal,
|
||||
});
|
||||
</script>
|
||||
240
src/views/data/dict/editItem.vue
Normal file
240
src/views/data/dict/editItem.vue
Normal file
@ -0,0 +1,240 @@
|
||||
<template>
|
||||
<basicModal
|
||||
@register="modalRegister"
|
||||
ref="modalRef"
|
||||
class="basicModal basicFormModal"
|
||||
@on-ok="handleSubmit"
|
||||
@on-close="handleClose"
|
||||
>
|
||||
<template #default>
|
||||
<n-form
|
||||
class="ls-form"
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
label-placement="left"
|
||||
label-width="100px"
|
||||
>
|
||||
<n-form-item
|
||||
label="字典项名"
|
||||
path="name"
|
||||
:rule="{ required: true, message: '请输入字典项名称', trigger: 'blur' }"
|
||||
>
|
||||
<n-input
|
||||
class="ls-input"
|
||||
v-model:value="formData.name"
|
||||
placeholder="请输入字典项名称"
|
||||
clearable
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item label="字典项值" path="value">
|
||||
<n-input
|
||||
class="ls-input"
|
||||
v-model:value="formData.value"
|
||||
placeholder="请输入字典项值"
|
||||
clearable
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item label="排序" path="sort">
|
||||
<n-input-number v-model:value="formData.sort" />
|
||||
</n-form-item>
|
||||
<n-form-item label="备注" path="note">
|
||||
<n-input
|
||||
v-model:value="formData.note"
|
||||
type="textarea"
|
||||
placeholder="请输入备注"
|
||||
clearable
|
||||
/>
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
</template>
|
||||
</basicModal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { getDictItemDetail, dictItemAdd, dictItemUpdate } from '@/api/data/dictionary';
|
||||
import { onMounted, ref, reactive, nextTick } from 'vue';
|
||||
import { useMessage } from 'naive-ui';
|
||||
import { useModal } from '@/components/Modal';
|
||||
import { renderIcon } from '@/utils';
|
||||
|
||||
/**
|
||||
* 定义接收的参数
|
||||
*/
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
default: false,
|
||||
},
|
||||
dictId: {
|
||||
type: Number,
|
||||
required: true,
|
||||
default: 0,
|
||||
},
|
||||
dictItemId: {
|
||||
type: Number,
|
||||
required: true,
|
||||
default: 0,
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* 定义参数变量
|
||||
*/
|
||||
const emit = defineEmits(['success', 'update:visible']);
|
||||
const formRef = ref();
|
||||
const editorRef = ref();
|
||||
const message = useMessage();
|
||||
|
||||
/**
|
||||
* 定义表单参数
|
||||
*/
|
||||
const formData = reactive({
|
||||
id: '',
|
||||
name: '',
|
||||
value: '',
|
||||
sort: 0,
|
||||
note: '',
|
||||
});
|
||||
const fwbHeight = document.body.clientHeight - 400;
|
||||
const optionsData = ref([]);
|
||||
const [modalRegister, { openModal, setProps, setSubLoading }] = useModal({
|
||||
title: props.dictItemId ? '编辑字典项' : '新增字典项',
|
||||
subBtuText: '确定',
|
||||
width: 600,
|
||||
});
|
||||
|
||||
/**
|
||||
* 执行提交表单
|
||||
*/
|
||||
const handleSubmit = async () => {
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(async () => {
|
||||
props.dictItemId
|
||||
? await dictItemUpdate({ ...formData, dictId: props.dictId })
|
||||
: await dictItemAdd({ ...formData, dictId: props.dictId });
|
||||
setSubLoading(false);
|
||||
message.success('操作成功');
|
||||
emit('update:visible', false);
|
||||
emit('success');
|
||||
})
|
||||
.catch((error) => {
|
||||
setSubLoading(false);
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 关闭窗体
|
||||
*/
|
||||
const handleClose = () => {
|
||||
emit('update:visible', false);
|
||||
};
|
||||
|
||||
/**
|
||||
* 设置表单数据
|
||||
*/
|
||||
const setFormData = async () => {
|
||||
const data = await getDictItemDetail(props.dictItemId);
|
||||
for (const key in formData) {
|
||||
if (data[key] != null && data[key] != undefined) {
|
||||
//@ts-ignore
|
||||
formData[key] = data[key];
|
||||
}
|
||||
}
|
||||
if (formData.options) {
|
||||
let arr = formData.options.split(',');
|
||||
let kk = [];
|
||||
arr.map((item) => {
|
||||
let v = item.split('=');
|
||||
kk.push({ label: v[1], value: v[0] });
|
||||
});
|
||||
optionsData.value = kk;
|
||||
}
|
||||
if (formData.type == 'checkbox' || formData.type == 'selects') {
|
||||
if (formData.value) {
|
||||
formData.value = formData.value.split(',');
|
||||
formData.values = formData.value;
|
||||
}
|
||||
}
|
||||
if (formData.type == 'image') {
|
||||
if (formData.value) {
|
||||
formData.filePath = formData.value;
|
||||
}
|
||||
}
|
||||
if (formData.type == 'file') {
|
||||
if (formData.value) {
|
||||
formData.fileName = formData.value.split('|')[0];
|
||||
formData.filePath = formData.value.split('|')[1];
|
||||
}
|
||||
}
|
||||
if (formData.type == 'images') {
|
||||
formData.valueList.map((item) => {
|
||||
formData.fileList.push({
|
||||
filePath: item,
|
||||
});
|
||||
});
|
||||
}
|
||||
if (formData.type == 'files') {
|
||||
formData.valueList.map((item) => {
|
||||
let kk = item.split('|');
|
||||
formData.fileList.push({
|
||||
fileName: kk[0],
|
||||
filePath: kk[1],
|
||||
name: kk[0],
|
||||
url: kk[1],
|
||||
});
|
||||
});
|
||||
}
|
||||
if (formData.type == 'ueditor') {
|
||||
nextTick(() => {
|
||||
editorRef.value.myValue = formData.value;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 添加选项
|
||||
*/
|
||||
const addOptions = () => {
|
||||
optionsData.value.push({ label: '', value: '' });
|
||||
};
|
||||
|
||||
/**
|
||||
* 删除选项
|
||||
* @param index 索引
|
||||
*/
|
||||
const delOptions = (index) => {
|
||||
optionsData.value.splice(index, 1);
|
||||
};
|
||||
|
||||
/**
|
||||
* 文件上传
|
||||
* @param list 列表
|
||||
*/
|
||||
const fileUploads = (list: any) => {
|
||||
formData.fileList = list;
|
||||
};
|
||||
|
||||
/**
|
||||
* 文件上传
|
||||
* @param filePath 文件路径
|
||||
* @param fileName 文件名称
|
||||
*/
|
||||
const fileUploadFile = async (filePath: any, fileName: any) => {
|
||||
formData.filePath = filePath;
|
||||
formData.fileName = fileName;
|
||||
};
|
||||
|
||||
/**
|
||||
* 钩子函数
|
||||
*/
|
||||
onMounted(() => {
|
||||
if (props.dictItemId) {
|
||||
setFormData();
|
||||
}
|
||||
});
|
||||
//导出方法
|
||||
defineExpose({
|
||||
openModal,
|
||||
});
|
||||
</script>
|
||||
250
src/views/data/dict/index.vue
Normal file
250
src/views/data/dict/index.vue
Normal file
@ -0,0 +1,250 @@
|
||||
<template>
|
||||
<PageWrapper>
|
||||
<n-grid x-gap="12" cols="4">
|
||||
<n-grid-item span="1">
|
||||
<n-card shadow="hover" class="border-0">
|
||||
<template #header>
|
||||
<n-grid cols="24">
|
||||
<n-gi span="18">
|
||||
<n-input
|
||||
type="text"
|
||||
v-model:value="params.name"
|
||||
placeholder="请输入字典名称"
|
||||
clearable
|
||||
/>
|
||||
</n-gi>
|
||||
<n-gi span="6" style="text-align: right">
|
||||
<n-button
|
||||
type="primary"
|
||||
@click="
|
||||
pager.page = 1;
|
||||
loadDataTable();
|
||||
"
|
||||
>
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<SearchOutlined />
|
||||
</n-icon> </template
|
||||
>查询
|
||||
</n-button>
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
<div style="margin-top: 15px">
|
||||
<n-space>
|
||||
<n-button type="primary" @click="handleAdd" v-perm="['sys:dict:add']">
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<PlusOutlined />
|
||||
</n-icon>
|
||||
</template>
|
||||
新建
|
||||
</n-button>
|
||||
<n-button type="warning" @click="handleEdit" v-perm="['sys:dict:edit']">
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<FormOutlined />
|
||||
</n-icon> </template
|
||||
>编辑
|
||||
</n-button>
|
||||
<n-button type="error" @click="handleDelete()" v-perm="['sys:dict:delete']">
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<DeleteOutlined />
|
||||
</n-icon> </template
|
||||
>删除
|
||||
</n-button>
|
||||
</n-space>
|
||||
</div>
|
||||
</template>
|
||||
<template #default>
|
||||
<div :style="{ height: fwbHeight + 'px' }" class="dict-list-box">
|
||||
<div
|
||||
v-for="(item, index) in dictDataList"
|
||||
:key="index"
|
||||
@click="onCheckedRow(item)"
|
||||
class="dict-item"
|
||||
:class="item.id == dictId ? 'active' : ''"
|
||||
>
|
||||
<span class="t1"
|
||||
>{{ item.name }}<span class="t2">({{ item.code }})</span></span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<pagination
|
||||
style="justify-content: flex-end"
|
||||
class="mt-10 flex"
|
||||
@change="loadDataTable"
|
||||
v-model="pager"
|
||||
/>
|
||||
</template>
|
||||
</n-card>
|
||||
</n-grid-item>
|
||||
<n-grid-item span="3">
|
||||
<n-card shadow="hover" class="mb-4 border-0 proCard">
|
||||
<dictItem :dictId="dictId" v-if="dictItemShow" />
|
||||
</n-card>
|
||||
</n-grid-item>
|
||||
</n-grid>
|
||||
<editDialog
|
||||
v-if="editVisible"
|
||||
:dictId="dictId"
|
||||
v-model:visible="editVisible"
|
||||
ref="createModalRef"
|
||||
@success="loadDataTable()"
|
||||
/>
|
||||
</PageWrapper>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, nextTick, defineAsyncComponent, onMounted } from 'vue';
|
||||
import { getDictList, dictDelete } from '@/api/data/dictionary';
|
||||
import { PlusOutlined, FormOutlined, DeleteOutlined, SearchOutlined } from '@vicons/antd';
|
||||
import editDialog from './edit.vue';
|
||||
import dictItem from './dictItem.vue';
|
||||
import { basicModal, useModal } from '@/components/Modal';
|
||||
import { useMessage, useDialog } from 'naive-ui';
|
||||
|
||||
/**
|
||||
* 定义参数变量
|
||||
*/
|
||||
const dictId = ref(0);
|
||||
const createModalRef = ref();
|
||||
const dictItemShow = ref(false);
|
||||
const editVisible = ref(false);
|
||||
const message = useMessage();
|
||||
const dialog = useDialog();
|
||||
|
||||
/**
|
||||
* 定义查询参数
|
||||
*/
|
||||
const params = ref({
|
||||
name: '',
|
||||
});
|
||||
const dictDataList = ref([]);
|
||||
|
||||
/**
|
||||
* 定义分页参数
|
||||
*/
|
||||
const pager = ref({
|
||||
page: 1,
|
||||
size: 10,
|
||||
count: dictDataList.value.length,
|
||||
});
|
||||
const fwbHeight = document.body.clientHeight - 370;
|
||||
|
||||
/**
|
||||
* 执行添加
|
||||
*/
|
||||
const handleAdd = async () => {
|
||||
dictId.value = 0;
|
||||
editVisible.value = true;
|
||||
await nextTick();
|
||||
createModalRef.value.openModal();
|
||||
};
|
||||
|
||||
/**
|
||||
* 执行编辑
|
||||
*/
|
||||
const handleEdit = async () => {
|
||||
editVisible.value = true;
|
||||
await nextTick();
|
||||
createModalRef.value.openModal();
|
||||
};
|
||||
|
||||
/**
|
||||
* 数据行选中事件
|
||||
* @param row 参数
|
||||
*/
|
||||
function onCheckedRow(row) {
|
||||
dictId.value = row.id;
|
||||
}
|
||||
|
||||
/**
|
||||
* 加载数据列表
|
||||
*/
|
||||
const loadDataTable = async () => {
|
||||
let result = await getDictList({
|
||||
...params.value,
|
||||
pageNo: pager.value.page,
|
||||
pageSize: pager.value.size,
|
||||
});
|
||||
dictId.value = result?.records[0]?.id;
|
||||
dictItemShow.value = true;
|
||||
dictDataList.value = result.records;
|
||||
pager.value.count = result.total;
|
||||
};
|
||||
|
||||
/**
|
||||
* 执行删除
|
||||
*/
|
||||
async function handleDelete() {
|
||||
dialog.warning({
|
||||
title: '提示',
|
||||
content: '确定要删除？',
|
||||
positiveText: '确定',
|
||||
negativeText: '取消',
|
||||
onPositiveClick: async () => {
|
||||
dictDelete(dictId.value);
|
||||
message.success('删除成功');
|
||||
pager.value.page = 1;
|
||||
loadDataTable();
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 钩子函数
|
||||
*/
|
||||
onMounted(() => {
|
||||
loadDataTable();
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dict-list-box {
|
||||
overflow: auto;
|
||||
|
||||
.dict-item {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding: 0 6px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.t1 {
|
||||
font-size: 14px;
|
||||
display: block;
|
||||
font-weight: 700;
|
||||
|
||||
.t2 {
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: #e8f1ff;
|
||||
border-radius: 3px;
|
||||
|
||||
.t1 {
|
||||
color: #1677ff;
|
||||
}
|
||||
|
||||
.t2 {
|
||||
color: rgb(22, 119, 255, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-badge__content.is-fixed {
|
||||
top: 20px;
|
||||
right: calc(-10px + var(--ant-badge-size) / 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user