410 lines
13 KiB
Plaintext
410 lines
13 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
|
|
@changeFileName="(name)=>formData.fileName=name"
|
|
:fileType=" ['image/jpeg', 'image/png', 'image/jpg', 'image/gif']"
|
|
name="config"
|
|
:fileSize="200"
|
|
v-model:image-url="formData.filePath">
|
|
<template v-slot: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>
|