483 lines
14 KiB
Plaintext
483 lines
14 KiB
Plaintext
<template>
|
|
<a-modal
|
|
v-model:visible="props.visible"
|
|
:title="props.configItemId ? '编辑配置项' : '新增配置项'"
|
|
:width="formData.type == 'ueditor' ? '800px' : '500px'"
|
|
@cancel="dialogClose"
|
|
>
|
|
<a-form
|
|
class="ls-form"
|
|
ref="formRef"
|
|
:model="formData"
|
|
:label-col="{ style: { width: '100px' } }"
|
|
>
|
|
<a-form-item
|
|
label="配置项名称"
|
|
name="name"
|
|
:rules="{ required: true, message: '请输入配置项名称', trigger: 'blur' }"
|
|
>
|
|
<a-input
|
|
class="ls-input"
|
|
v-model:value="formData.name"
|
|
placeholder="请输入配置项名称"
|
|
allow-clear
|
|
/>
|
|
</a-form-item>
|
|
<a-form-item
|
|
label="配置项编码"
|
|
name="code"
|
|
:rules="{ required: true, message: '请输入配置项编码', trigger: 'blur' }"
|
|
>
|
|
<a-input
|
|
class="ls-input"
|
|
v-model:value="formData.code"
|
|
placeholder="请输入配置项编码"
|
|
allow-clear
|
|
/>
|
|
</a-form-item>
|
|
<a-form-item
|
|
label="配置项类型"
|
|
name="type"
|
|
class="flex-1"
|
|
:rules="{ required: true, message: '请选择配置项类型', trigger: 'change' }"
|
|
>
|
|
<a-select
|
|
v-model:value="formData.type"
|
|
class="flex-1"
|
|
allow-clear
|
|
placeholder="请选择配置项类型"
|
|
@change="handleTypeChange"
|
|
>
|
|
<a-select-option v-for="(item, index) in typeList" :key="index" :value="item.value">{{
|
|
item.name
|
|
}}</a-select-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
<a-form-item label="配置项源" name="options">
|
|
<!-- <a-input
|
|
class="ls-input"f
|
|
v-model:value="formData.options"
|
|
placeholder="请输入配置项数据源"
|
|
allow-clear
|
|
/> -->
|
|
<plusCircleOutlined
|
|
style="cursor: pointer; color: #165dff; font-size: 25px"
|
|
@click="addOptions"
|
|
/>
|
|
<div v-for="(item, index) in optionsData" :key="index" style="margin-top: 8px">
|
|
<div class="flex item-center">
|
|
<a-input v-model:value="item.name" placeholder="请输入name" allow-clear />
|
|
<div style="margin: 0 10px">-</div>
|
|
<a-input v-model:value="item.value" placeholder="请输入value" allow-clear />
|
|
<MinusCircleOutlined
|
|
style="cursor: pointer; color: #f56c6c; font-size: 25px; margin-left: 10px"
|
|
@click="delOptions(index)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</a-form-item>
|
|
<a-form-item label="配置项值" name="value">
|
|
<template
|
|
v-if="
|
|
formData.type == 'text' ||
|
|
formData.type == 'readonly' ||
|
|
formData.type == 'textarea' ||
|
|
formData.type == 'password'
|
|
"
|
|
>
|
|
<component
|
|
:is="
|
|
formData.type == 'textarea'
|
|
? 'a-textarea'
|
|
: formData.type == 'password'
|
|
? 'a-input-password'
|
|
: 'a-input'
|
|
"
|
|
v-model:value="formData.value"
|
|
placeholder="请输入配置项值"
|
|
allow-clear
|
|
/>
|
|
</template>
|
|
<template v-else-if="formData.type == 'number'">
|
|
<number-input v-model="formData.value" placeholder="请输入配置项值" />
|
|
</template>
|
|
<!-- <template v-else-if="formData.type == 'icon'">
|
|
<IconPicker class="flex-1" v-model="formData.value" />
|
|
</template> -->
|
|
<template v-else-if="formData.type == 'radio'">
|
|
<a-radio-group v-model:value="formData.value">
|
|
<a-radio v-for="(item, index) in optionsData" :value="item.value" :key="index">
|
|
{{ item.name }}
|
|
</a-radio>
|
|
</a-radio-group>
|
|
</template>
|
|
<template v-else-if="formData.type == 'checkbox'">
|
|
<a-checkbox-group v-model:value="formData.values">
|
|
<a-checkbox :value="item.value" :key="index" v-for="(item, index) in optionsData">{{
|
|
item.name
|
|
}}</a-checkbox>
|
|
</a-checkbox-group>
|
|
</template>
|
|
<template v-else-if="formData.type == 'select'">
|
|
<a-select v-model:value="formData.value">
|
|
<a-select-option
|
|
v-for="(item, index) in optionsData"
|
|
:key="index"
|
|
:value="item.value"
|
|
>{{ item.name }}</a-select-option
|
|
>
|
|
</a-select>
|
|
</template>
|
|
<template v-else-if="formData.type == 'selects'">
|
|
<a-select v-model:value="formData.values" mode="multiple">
|
|
<a-select-option
|
|
v-for="(item, index) in optionsData"
|
|
:key="index"
|
|
:value="item.value"
|
|
>{{ item.name }}</a-select-option
|
|
>
|
|
</a-select>
|
|
</template>
|
|
<template v-else-if="formData.type == 'date' || formData.type == 'datetime'">
|
|
<a-date-picker
|
|
:type="formData.type"
|
|
placeholder="请选择日期"
|
|
v-model:value="formData.value"
|
|
style="width: 100%"
|
|
:show-time="formData.type == 'datetime'"
|
|
: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"
|
|
:fileList="formData.fileList"
|
|
/>
|
|
</template>
|
|
<template v-else-if="formData.type == 'file'">
|
|
<UploadFile
|
|
@upload="fileUploadFile"
|
|
file-type=".xlsx.xls.doc.docx"
|
|
name="config"
|
|
:file-list="
|
|
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"
|
|
:file-list="formData.fileList"
|
|
/>
|
|
</template>
|
|
<template v-else-if="formData.type == 'ueditor'">
|
|
<Editor ref="editorRef" :height="fwbHeight" class="flex-1" name="config" />
|
|
</template>
|
|
</a-form-item>
|
|
<a-form-item label="排序" name="sort">
|
|
<a-input-number v-model:value="formData.sort" />
|
|
</a-form-item>
|
|
<a-form-item label="配置项状态" name="status">
|
|
<a-radio-group v-model:value="formData.status" name="status">
|
|
<a-radio :value="1">正常</a-radio>
|
|
<a-radio :value="2">停用</a-radio>
|
|
</a-radio-group>
|
|
</a-form-item>
|
|
<a-form-item label="备注" name="note">
|
|
<a-input
|
|
v-model:value="formData.note"
|
|
type="textarea"
|
|
placeholder="请输入备注"
|
|
allow-clear
|
|
/>
|
|
</a-form-item>
|
|
</a-form>
|
|
<template #footer>
|
|
<span class="dialog-footer">
|
|
<a-button @click="dialogClose">取消</a-button>
|
|
<a-button :loading="subLoading" type="primary" @click="submit"> 确定 </a-button>
|
|
</span>
|
|
</template>
|
|
</a-modal>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import type { FormInstance } from 'ant-design-vue';
|
|
import { getConfigItemDetail, configItemAdd, configItemUpdate } from '@/api/data/config';
|
|
import { onMounted, ref, reactive, shallowRef, nextTick } from 'vue';
|
|
import { message } from 'ant-design-vue';
|
|
import { PlusCircleOutlined, MinusCircleOutlined } from '@ant-design/icons-vue';
|
|
import { useLockFn } from '@/utils/useLockFn';
|
|
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';
|
|
|
|
const emit = defineEmits(['success', 'update:visible']);
|
|
const formRef = shallowRef<FormInstance>();
|
|
const editorRef = ref();
|
|
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 typeList = ref([
|
|
{
|
|
name: '隐藏',
|
|
value: 'hidden',
|
|
},
|
|
{
|
|
name: '只读文本',
|
|
value: 'readonly',
|
|
},
|
|
{
|
|
name: '数字',
|
|
value: 'number',
|
|
},
|
|
{
|
|
name: '单行文本',
|
|
value: 'text',
|
|
},
|
|
{
|
|
name: '多行文本',
|
|
value: 'textarea',
|
|
},
|
|
{
|
|
name: '密码',
|
|
value: 'password',
|
|
},
|
|
{
|
|
name: '单选框',
|
|
value: 'radio',
|
|
},
|
|
{
|
|
name: '复选框',
|
|
value: 'checkbox',
|
|
},
|
|
{
|
|
name: '下拉框(单选)',
|
|
value: 'select',
|
|
},
|
|
{
|
|
name: '下拉框(多选)',
|
|
value: 'selects',
|
|
},
|
|
{
|
|
name: '字体图标',
|
|
value: 'icon',
|
|
},
|
|
{
|
|
name: '日期',
|
|
value: 'date',
|
|
},
|
|
{
|
|
name: '时间',
|
|
value: 'datetime',
|
|
},
|
|
{
|
|
name: '单张图片',
|
|
value: 'image',
|
|
},
|
|
{
|
|
name: '多张图片',
|
|
value: 'images',
|
|
},
|
|
{
|
|
name: '单个文件',
|
|
value: 'file',
|
|
},
|
|
{
|
|
name: '多个文件',
|
|
value: 'files',
|
|
},
|
|
{
|
|
name: '富文本编辑器',
|
|
value: 'ueditor',
|
|
},
|
|
]);
|
|
|
|
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 handleTypeChange = () => {
|
|
formData.fileList = [];
|
|
formData.fileName = '';
|
|
formData.filePath = '';
|
|
formData.values = [];
|
|
formData.value = '';
|
|
};
|
|
|
|
const handleSubmit = async () => {
|
|
await formRef.value?.validate();
|
|
formData.options = '';
|
|
optionsData.value.map((item, index) => {
|
|
formData.options += `${item.value}=${item.name}${
|
|
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 });
|
|
message.success('操作成功');
|
|
emit('update:visible', false);
|
|
emit('success');
|
|
};
|
|
|
|
const dialogClose = () => {
|
|
emit('update:visible', false);
|
|
};
|
|
|
|
const { isLock: subLoading, lockFn: submit } = useLockFn(handleSubmit);
|
|
|
|
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({ name: 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({ name: '', value: '' });
|
|
};
|
|
const delOptions = (index) => {
|
|
optionsData.value.splice(index, 1);
|
|
};
|
|
const fileUploads = (list: any) => {
|
|
formData.fileList = list;
|
|
};
|
|
const fileUploadFile = async (filePath: any, fileName: any) => {
|
|
formData.filePath = filePath;
|
|
formData.fileName = fileName;
|
|
};
|
|
|
|
onMounted(() => {
|
|
if (props.configItemId) {
|
|
setFormData();
|
|
}
|
|
});
|
|
</script>
|