配置
This commit is contained in:
parent
4b1a4c641d
commit
93bd12108d
@ -17,7 +17,7 @@
|
|||||||
</el-space>
|
</el-space>
|
||||||
</template>
|
</template>
|
||||||
</BasicTable>
|
</BasicTable>
|
||||||
<editDialog v-if="editVisible" :configId="configId" :configItemId="configItemId" v-model:visible="editVisible" @success="reloadTable">
|
<editDialog v-if="editVisible" :configId="configId" :configItemId="configItemId" v-model:visible="editVisible" @success="reloadTable('noRefresh')">
|
||||||
</editDialog>
|
</editDialog>
|
||||||
</PageWrapper>
|
</PageWrapper>
|
||||||
</template>
|
</template>
|
||||||
@ -83,29 +83,28 @@ const actionColumn = reactive({
|
|||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
//刷新字典项值列表
|
//刷新配置项值列表
|
||||||
function reloadTable() {
|
function reloadTable(noRefresh='') {
|
||||||
tableRef.value.reload({ pageNo: 1 });
|
tableRef.value.reload(noRefresh?{}:{pageNo:1});
|
||||||
}
|
}
|
||||||
|
//加载配置项值列表
|
||||||
//加载字典项值列表
|
|
||||||
const loadDataTable = async (res) => {
|
const loadDataTable = async (res) => {
|
||||||
const result = await getConfigItemList({ ...params.value, configId:props.configId, ...res });
|
const result = await getConfigItemList({ ...params.value, configId:props.configId, ...res });
|
||||||
return result;
|
return result;
|
||||||
};
|
};
|
||||||
//新建字典
|
//新建配置
|
||||||
const handleAdd = async () => {
|
const handleAdd = async () => {
|
||||||
configItemId.value=0
|
configItemId.value=0
|
||||||
await nextTick();
|
await nextTick();
|
||||||
editVisible.value=true
|
editVisible.value=true
|
||||||
};
|
};
|
||||||
//编辑字典
|
//编辑配置
|
||||||
const handleEdit = async (record: Recordable) => {
|
const handleEdit = async (record: Recordable) => {
|
||||||
configItemId.value=record.row.id
|
configItemId.value=record.row.id
|
||||||
await nextTick();
|
await nextTick();
|
||||||
editVisible.value=true
|
editVisible.value=true
|
||||||
};
|
};
|
||||||
//删除字典项
|
//删除配置项
|
||||||
async function handleDelete(record: Recordable) {
|
async function handleDelete(record: Recordable) {
|
||||||
let ids = []
|
let ids = []
|
||||||
if (!record) {
|
if (!record) {
|
||||||
|
|||||||
@ -1,70 +1,100 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-dialog
|
<el-dialog v-model="props.visible" :title="props.configItemId ? '编辑配置项' : '新增配置项'" width="500"
|
||||||
v-model="props.visible"
|
:close-on-click-modal="false" :before-close="dialogClose">
|
||||||
:title="props.configItemId?'编辑配置项':'新增配置项'"
|
<el-form class="ls-form" ref="formRef" :model="formData" label-width="100px">
|
||||||
width="500"
|
<el-form-item label="配置项名称" prop="name" :rules="{ required: true, message: '请输入配置项名称', trigger: 'blur' }">
|
||||||
:close-on-click-modal="false"
|
<el-input v-model="formData.name" placeholder="请输入配置项名称" clearable />
|
||||||
:before-close="dialogClose"
|
|
||||||
>
|
|
||||||
<el-form
|
|
||||||
class="ls-form"
|
|
||||||
ref="formRef"
|
|
||||||
:model="formData"
|
|
||||||
label-width="100px"
|
|
||||||
>
|
|
||||||
<el-form-item
|
|
||||||
label="配置项名称"
|
|
||||||
prop="name"
|
|
||||||
:rules="{ required: true, message: '请输入配置项名称', trigger: 'blur' }"
|
|
||||||
>
|
|
||||||
<el-input
|
|
||||||
class="ls-input"
|
|
||||||
v-model="formData.name"
|
|
||||||
placeholder="请输入配置项名称"
|
|
||||||
clearable
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item
|
<el-form-item label="配置项编码" prop="code" :rules="{ required: true, message: '请输入配置项编码', trigger: 'blur' }">
|
||||||
label="配置项编码"
|
<el-input v-model="formData.code" placeholder="请输入配置项编码" clearable />
|
||||||
prop="code"
|
|
||||||
:rules="{ required: true, message: '请输入配置项编码', trigger: 'blur' }"
|
|
||||||
>
|
|
||||||
<el-input
|
|
||||||
class="ls-input"
|
|
||||||
v-model="formData.code"
|
|
||||||
placeholder="请输入配置项编码"
|
|
||||||
clearable
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item
|
|
||||||
label="配置项值"
|
<el-form-item label="配置项类型" prop="type" class="flex-1"
|
||||||
prop="value"
|
:rules="{ required: true, message: '请选择配置项类型', trigger: 'change' }">
|
||||||
>
|
<el-select v-model="formData.type" class="flex-1" placeholder="请选择配置项类型" @change="handleTypeChange">
|
||||||
<el-input
|
|
||||||
class="ls-input"
|
|
||||||
v-model="formData.value"
|
|
||||||
placeholder="请输入配置项值"
|
|
||||||
clearable
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="配置项类型" prop="type" class="flex-1" :rules="{ required: true, message: '请选择配置项类型', trigger: 'change' }">
|
|
||||||
<el-select v-model="formData.type" class="flex-1" clearable placeholder="请选择配置项类型">
|
|
||||||
<el-option v-for="(item, index) in typeList" :key="index" :label="item.name" :value="item.value" />
|
<el-option v-for="(item, index) in typeList" :key="index" :label="item.name" :value="item.value" />
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item
|
<el-form-item label="配置项源" prop="options">
|
||||||
label="配置项源"
|
<el-icon :size="25" color="#165DFF" style="cursor:pointer;" @click="addOptions"><CirclePlusFilled /></el-icon>
|
||||||
prop="options"
|
<div v-for="(item,index) in optionsData" :key="index" style="margin-top:8px;">
|
||||||
>
|
<div class="flex item-center">
|
||||||
<el-input
|
<el-input v-model="item.name" placeholder="请输入name" clearable />
|
||||||
class="ls-input"
|
<div style="margin:0 10px;">-</div>
|
||||||
v-model="formData.options"
|
<el-input v-model="item.value" placeholder="请输入value" clearable />
|
||||||
placeholder="请输入配置项数据源"
|
<el-icon :size="25" color="#f56c6c" style="cursor:pointer;margin-left:10px;" @click="delOptions(index)"><RemoveFilled /></el-icon>
|
||||||
clearable
|
</div>
|
||||||
/>
|
</div>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="配置项值" prop="value">
|
||||||
|
<template
|
||||||
|
v-if="formData.type == 'text' || formData.type == 'readonly' || formData.type == 'textarea' || formData.type == 'password'">
|
||||||
|
<el-input v-model="formData.value"
|
||||||
|
:type="formData.type == 'textarea' ? 'textarea' : (formData.type == 'password' ? 'password' : '')"
|
||||||
|
placeholder="请输入配置项值" clearable />
|
||||||
|
</template>
|
||||||
|
<template v-else-if="formData.type == 'number'">
|
||||||
|
<el-input-number 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'">
|
||||||
|
<el-radio-group v-model="formData.value">
|
||||||
|
<el-radio v-for="(item,index) in optionsData" :value="item.value" :key="index">
|
||||||
|
{{ item.name }}
|
||||||
|
</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="formData.type == 'checkbox'">
|
||||||
|
<el-checkbox-group v-model="formData.values">
|
||||||
|
<el-checkbox :value="item.value" :key="index" v-for="(item, index) in optionsData">{{ item.name }}</el-checkbox>
|
||||||
|
</el-checkbox-group>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="formData.type == 'select'">
|
||||||
|
<el-select v-model="formData.value">
|
||||||
|
<el-option v-for="(item, index) in optionsData" :key="index" :value="item.value" :label="item.name" />
|
||||||
|
</el-select>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="formData.type == 'selects'">
|
||||||
|
<el-select v-model="formData.values" :multiple="true">
|
||||||
|
<el-option v-for="(item, index) in optionsData" :key="index" :value="item.value" :label="item.name" />
|
||||||
|
</el-select>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="formData.type == 'date' || formData.type == 'datetime'">
|
||||||
|
<el-date-picker :type="formData.type"
|
||||||
|
placeholder="请选择日期" v-model="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
|
||||||
|
@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>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="排序" prop="sort">
|
<el-form-item label="排序" prop="sort">
|
||||||
<el-input-number v-model="formData.sort"/>
|
<el-input-number v-model="formData.sort" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="配置项状态" prop="status">
|
<el-form-item label="配置项状态" prop="status">
|
||||||
<el-radio-group v-model="formData.status" name="status">
|
<el-radio-group v-model="formData.status" name="status">
|
||||||
@ -87,97 +117,108 @@
|
|||||||
</el-dialog>
|
</el-dialog>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import type {FormInstance} from "element-plus";
|
import type { FormInstance } from "element-plus";
|
||||||
import {getConfigItemDetail,configItemAdd,configItemUpdate} from "@/api/data/config";
|
import { getConfigItemDetail, configItemAdd, configItemUpdate } from "@/api/data/config";
|
||||||
import {onMounted, ref,reactive, shallowRef} from "vue";
|
import { onMounted, ref, reactive, shallowRef } from "vue";
|
||||||
import {message} from "@/utils/auth";
|
import { message } from "@/utils/auth";
|
||||||
import {useLockFn} from "@/utils/useLockFn";
|
import IconPicker from "@/components/icon/picker.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 emit = defineEmits(["success", "update:visible"]);
|
||||||
const formRef = shallowRef<FormInstance>();
|
const formRef = shallowRef<FormInstance>();
|
||||||
const formData = reactive({
|
const formData = reactive({
|
||||||
id: "",
|
id: "",
|
||||||
name: "",
|
name: "",
|
||||||
code:"",
|
code: "",
|
||||||
value: "",
|
value: "",
|
||||||
|
values:[],
|
||||||
|
fileName:'',
|
||||||
|
filePath:'',
|
||||||
|
fileList:[],
|
||||||
sort: 0,
|
sort: 0,
|
||||||
options:'',
|
options: '',
|
||||||
type:'',
|
type: 'text',
|
||||||
status:1,
|
status: 1,
|
||||||
note:''
|
note: ''
|
||||||
});
|
});
|
||||||
|
const fwbHeight=document.body.clientHeight -400
|
||||||
|
const optionsData=ref([])
|
||||||
const typeList = ref([
|
const typeList = ref([
|
||||||
{
|
{
|
||||||
name:'隐藏',
|
name: '隐藏',
|
||||||
value:'hidden'
|
value: 'hidden'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name:'只读文本',
|
name: '只读文本',
|
||||||
value:'readonly'
|
value: 'readonly'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name:'数字',
|
name: '数字',
|
||||||
value:'number'
|
value: 'number'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name:'单行文本',
|
name: '单行文本',
|
||||||
value:'text'
|
value: 'text'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name:'多行文本',
|
name: '多行文本',
|
||||||
value:'textarea'
|
value: 'textarea'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name:'密码',
|
name: '密码',
|
||||||
value:'password'
|
value: 'password'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name:'单选框',
|
name: '单选框',
|
||||||
value:'radio'
|
value: 'radio'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name:'复选框',
|
name: '复选框',
|
||||||
value:'checkbox'
|
value: 'checkbox'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name:'下拉框(单选)',
|
name: '下拉框(单选)',
|
||||||
value:'select'
|
value: 'select'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name:'下拉框(多选)',
|
name: '下拉框(多选)',
|
||||||
value:'selects'
|
value: 'selects'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name:'字体图标',
|
name: '字体图标',
|
||||||
value:'icon'
|
value: 'icon'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name:'日期',
|
name: '日期',
|
||||||
value:'date'
|
value: 'date'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name:'时间',
|
name: '时间',
|
||||||
value:'datetime'
|
value: 'datetime'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name:'单张图片',
|
name: '单张图片',
|
||||||
value:'image'
|
value: 'image'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name:'多张图片',
|
name: '多张图片',
|
||||||
value:'images'
|
value: 'images'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name:'单个文件',
|
name: '单个文件',
|
||||||
value:'file'
|
value: 'file'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name:'多个文件',
|
name: '多个文件',
|
||||||
value:'files'
|
value: 'files'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name:'富文本编辑器',
|
name: '富文本编辑器',
|
||||||
value:'ueditor'
|
value: 'ueditor'
|
||||||
},
|
},
|
||||||
])
|
])
|
||||||
|
|
||||||
@ -198,10 +239,36 @@ const props = defineProps({
|
|||||||
default: 0
|
default: 0
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
const handleTypeChange = ()=>{
|
||||||
|
formData.fileList = []
|
||||||
|
formData.fileName = ''
|
||||||
|
formData.filePath = ''
|
||||||
|
formData.values = []
|
||||||
|
formData.value=''
|
||||||
|
}
|
||||||
|
|
||||||
const handleSubmit = async () => {
|
const handleSubmit = async () => {
|
||||||
await formRef.value?.validate();
|
await formRef.value?.validate();
|
||||||
props.configItemId ? await configItemUpdate({...formData,configId:props.configId}) : await configItemAdd({...formData,configId:props.configId});
|
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.type=='file'){
|
||||||
|
formData.value = formData.fileName +'|'+ formData.filePath
|
||||||
|
}
|
||||||
|
if(formData.type=='images' || formData.type=='files'){
|
||||||
|
formData.value =''
|
||||||
|
formData.fileList.map((item,index)=>{
|
||||||
|
formData.value+=`${item.fileName}|${item.filePath}${index<formData.fileList.length-1?',':''}`
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
console.log(formData)
|
||||||
|
props.configItemId ? await configItemUpdate({ ...formData, configId: props.configId }) : await configItemAdd({ ...formData, configId: props.configId });
|
||||||
message("操作成功");
|
message("操作成功");
|
||||||
emit("update:visible", false);
|
emit("update:visible", false);
|
||||||
emit("success");
|
emit("success");
|
||||||
@ -211,7 +278,7 @@ const dialogClose = () => {
|
|||||||
emit("update:visible", false);
|
emit("update:visible", false);
|
||||||
};
|
};
|
||||||
|
|
||||||
const { isLock:subLoading,lockFn: submit } = useLockFn(handleSubmit);
|
const { isLock: subLoading, lockFn: submit } = useLockFn(handleSubmit);
|
||||||
|
|
||||||
|
|
||||||
const setFormData = async () => {
|
const setFormData = async () => {
|
||||||
@ -222,8 +289,56 @@ const setFormData = async () => {
|
|||||||
formData[key] = data[key];
|
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' || formData.type=='file'){
|
||||||
|
if(formData.value) {
|
||||||
|
formData.fileName = formData.value.split('|')[0]
|
||||||
|
formData.filePath = formData.value.split('|')[1]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if(formData.type=='images' || formData.type=='files'){
|
||||||
|
if(formData.value) {
|
||||||
|
let arr =formData.value.split(',')
|
||||||
|
arr.map(item=>{
|
||||||
|
let kk = item.split('|')
|
||||||
|
formData.fileList.push({
|
||||||
|
fileName:kk[0],
|
||||||
|
filePath:kk[1],
|
||||||
|
name:kk[0],
|
||||||
|
url:kk[1]
|
||||||
|
})
|
||||||
|
})
|
||||||
|
console.log(formData.fileList)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
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(() => {
|
onMounted(() => {
|
||||||
if (props.configItemId) {
|
if (props.configItemId) {
|
||||||
setFormData();
|
setFormData();
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user