修改系统设置
This commit is contained in:
parent
975701ec3e
commit
a5597938f5
@ -1,73 +1,75 @@
|
||||
<template>
|
||||
<el-row :gutter="20">
|
||||
<el-col :xs="24" :sm="20" :md="14" :lg="12" :xl="8">
|
||||
<el-form label-position="top" :label-width="80" :model="formData" ref="formRef">
|
||||
<el-form-item v-for="(item, index) in configItemList.filter(item => item.type != 'hidden')" :key="index"
|
||||
:label="item.name" :prop="item.code">
|
||||
<template
|
||||
v-if="item.type == 'text' || item.type == 'readonly' || item.type == 'textarea' || item.type == 'password'">
|
||||
<el-input v-model="formData[item.code]" :placeholder="`请输入${item.name}`"
|
||||
:type="item.type == 'textarea' ? 'textarea' : (item.type == 'password' ? 'password' : '')"
|
||||
:readonly="item.type == 'readonly'" />
|
||||
</template>
|
||||
<template v-else-if="item.type == 'number'">
|
||||
<el-input-number v-model="formData[item.code]" :placeholder="`请输入${item.name}`" />
|
||||
</template>
|
||||
<template v-else-if="item.type=='icon'">
|
||||
<IconPicker class="flex-1" v-model="formData[item.code]"/>
|
||||
</template>
|
||||
<template v-else-if="item.type == 'radio'">
|
||||
<el-radio-group v-model="formData[item.code]" :name="item.code">
|
||||
<el-radio v-for="(value, key) in item.param" :label="key" :key="key">
|
||||
{{ value }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</template>
|
||||
<template v-else-if="item.type == 'checkbox'">
|
||||
<el-checkbox-group v-model="formData[item.code]" :name="item.code">
|
||||
<el-checkbox :label="key" :key="key" v-for="(value, key) in item.param">{{ value }}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</template>
|
||||
<template v-else-if="item.type == 'select' || item.type == 'selects'">
|
||||
<el-select v-model="formData[item.code]" :multiple="item.type == 'selects'">
|
||||
<el-option v-for="(value, key) in item.param" :key="key" :value="key" :label="value" />
|
||||
</el-select>
|
||||
</template>
|
||||
<template v-else-if="item.type == 'date' || item.type == 'datetime'">
|
||||
<el-date-picker :type="item.type" :placeholder="`请选择${item.name}`" v-model="formData[item.code]"
|
||||
:value-format="item.type == 'date'?'YYYY-MM-DD':'YYYY-MM-DD HH:mm:ss'" :format="item.type == 'date'?'YYYY-MM-DD':'YYYY-MM-DD HH:mm:ss'" />
|
||||
</template>
|
||||
<template v-else-if="item.type == 'image'">
|
||||
<UploadImg
|
||||
:fileType=" ['image/jpeg', 'image/png', 'image/jpg', 'image/gif']"
|
||||
name="setting"
|
||||
:fileSize="200"
|
||||
v-model:image-url="formData[item.code]">
|
||||
<template v-slot:tip>支持扩展名: jpg png jpeg;文件大小不超过200M</template>
|
||||
</UploadImg>
|
||||
</template>
|
||||
<template v-else-if="item.type == 'images'">
|
||||
<UploadImgs @upload="fileUploadImgs" file-type=".jpeg,.png,.jpg,.gif" name="setting"
|
||||
:fileSize="200" :multiple="true" :fileList="item.filePath" :z-index="index"/>
|
||||
</template>
|
||||
<template v-else-if="item.type == 'file'">
|
||||
<UploadFile @upload="fileUploadFile" file-type=".xlsx.xls.doc.docx" name="setting"
|
||||
:file-list="formData[item.code]?[{name:item.fileName,url:item.filePath}]:[]" :z-index="index"/>
|
||||
</template>
|
||||
<template v-else-if="item.type == 'files'">
|
||||
<UploadFile @upload="fileUploadFiles" file-type=".xlsx.xls.doc.docx" name="setting" :multiple="true"
|
||||
:file-list="item.filePath" :z-index="index"/>
|
||||
</template>
|
||||
<template v-else-if="item.type == 'ueditor'">
|
||||
<Editor ref="editorRef" :height="fwbHeight" class="flex-1"/>
|
||||
</template>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleSubmit">更新基本信息</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div>
|
||||
<el-row :gutter="20">
|
||||
<el-col :xs="24" :sm="20" :md="14" :lg="12" :xl="8">
|
||||
<el-form :label-width="150" :model="formData" ref="formRef">
|
||||
<el-form-item v-for="(item, index) in configItemList.filter(item => item.type != 'hidden')" :key="index"
|
||||
:label="`${item.name}：`" :prop="item.code">
|
||||
<template
|
||||
v-if="item.type == 'text' || item.type == 'readonly' || item.type == 'textarea' || item.type == 'password'">
|
||||
<el-input v-model="formData[item.code]" :placeholder="`请输入${item.name}`"
|
||||
:type="item.type == 'textarea' ? 'textarea' : (item.type == 'password' ? 'password' : '')"
|
||||
:readonly="item.type == 'readonly'" />
|
||||
</template>
|
||||
<template v-else-if="item.type == 'number'">
|
||||
<el-input-number v-model="formData[item.code]" :placeholder="`请输入${item.name}`" />
|
||||
</template>
|
||||
<template v-else-if="item.type=='icon'">
|
||||
<IconPicker class="flex-1" v-model="formData[item.code]"/>
|
||||
</template>
|
||||
<template v-else-if="item.type == 'radio'">
|
||||
<el-radio-group v-model="formData[item.code]" :name="item.code">
|
||||
<el-radio v-for="(value, key) in item.param" :label="key" :key="key">
|
||||
{{ value }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</template>
|
||||
<template v-else-if="item.type == 'checkbox'">
|
||||
<el-checkbox-group v-model="formData[item.code]" :name="item.code">
|
||||
<el-checkbox :label="key" :key="key" v-for="(value, key) in item.param">{{ value }}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</template>
|
||||
<template v-else-if="item.type == 'select' || item.type == 'selects'">
|
||||
<el-select v-model="formData[item.code]" :multiple="item.type == 'selects'">
|
||||
<el-option v-for="(value, key) in item.param" :key="key" :value="key" :label="value" />
|
||||
</el-select>
|
||||
</template>
|
||||
<template v-else-if="item.type == 'date' || item.type == 'datetime'">
|
||||
<el-date-picker :type="item.type" :placeholder="`请选择${item.name}`" v-model="formData[item.code]" style="width:100%;"
|
||||
:value-format="item.type == 'date'?'YYYY-MM-DD':'YYYY-MM-DD HH:mm:ss'" :format="item.type == 'date'?'YYYY-MM-DD':'YYYY-MM-DD HH:mm:ss'" />
|
||||
</template>
|
||||
<template v-else-if="item.type == 'image'">
|
||||
<UploadImg
|
||||
:fileType=" ['image/jpeg', 'image/png', 'image/jpg', 'image/gif']"
|
||||
name="setting"
|
||||
:fileSize="200"
|
||||
v-model:image-url="formData[item.code]">
|
||||
<template v-slot:tip>支持扩展名: jpg png jpeg;文件大小不超过200M</template>
|
||||
</UploadImg>
|
||||
</template>
|
||||
<template v-else-if="item.type == 'images'">
|
||||
<UploadImgs @upload="fileUploadImgs" file-type=".jpeg,.png,.jpg,.gif" name="setting"
|
||||
:fileSize="200" :multiple="true" :fileList="item.filePath" :z-index="index"/>
|
||||
</template>
|
||||
<template v-else-if="item.type == 'file'">
|
||||
<UploadFile @upload="fileUploadFile" file-type=".xlsx.xls.doc.docx" name="setting"
|
||||
:file-list="formData[item.code]?[{name:item.fileName,url:item.filePath}]:[]" :z-index="index"/>
|
||||
</template>
|
||||
<template v-else-if="item.type == 'files'">
|
||||
<UploadFile @upload="fileUploadFiles" file-type=".xlsx.xls.doc.docx" name="setting" :multiple="true"
|
||||
:file-list="item.filePath" :z-index="index"/>
|
||||
</template>
|
||||
<template v-else-if="item.type == 'ueditor'">
|
||||
<Editor ref="editorRef" :height="fwbHeight" class="flex-1"/>
|
||||
</template>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="submit-btn">
|
||||
<el-button type="primary" @click="handleSubmit">更新系统设置</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
@ -85,7 +87,12 @@ const props = defineProps({
|
||||
type: Array,
|
||||
required: true,
|
||||
default: []
|
||||
}
|
||||
},
|
||||
activeName: {
|
||||
type: String,
|
||||
required: true,
|
||||
default: ''
|
||||
},
|
||||
});
|
||||
type FormInstance = InstanceType<typeof ElForm>;
|
||||
const editorRef=ref()
|
||||
@ -94,6 +101,7 @@ const fwbHeight=document.body.clientHeight -400
|
||||
|
||||
const formData = reactive({});
|
||||
const configItemList = ref([])
|
||||
const emit = defineEmits(['success']);
|
||||
|
||||
const handleSubmit = async () => {
|
||||
await formRef.value?.validate();
|
||||
@ -107,6 +115,7 @@ const handleSubmit = async () => {
|
||||
console.log(formData)
|
||||
await updateWeb(formData)
|
||||
message("更新成功");
|
||||
emit('success',props.activeName)
|
||||
};
|
||||
const fileUploadImgs = (list: any,index:any) => {
|
||||
const code = configItemList.value[index].code
|
||||
@ -137,7 +146,7 @@ onMounted(() => {
|
||||
configItemList.value = JSON.parse(JSON.stringify(props.dataList))
|
||||
nextTick(()=>{
|
||||
let ueditorIndex = 0
|
||||
configItemList.value.map((item,index)=>{
|
||||
configItemList.value.map(item=>{
|
||||
formData[item.code] = item.value
|
||||
if(item.type=='ueditor'){
|
||||
if(editorRef.value) {
|
||||
@ -150,3 +159,10 @@ onMounted(() => {
|
||||
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.submit-btn {
|
||||
position: fixed;
|
||||
bottom: 50px;
|
||||
right: 4%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<el-card shadow="never" size="small" class="proCard tabsCard">
|
||||
<el-tabs v-model="activeName" v-if="tabData.length>0">
|
||||
<el-tab-pane :name="item.configName" :label="item.configName" v-for="(item,index) in tabData" :key="index">
|
||||
<BasicSetting :dataList="item.dataList" v-if="activeName==item.configName"/>
|
||||
<BasicSetting :dataList="item.dataList" v-if="activeName==item.configName" @success="getReshTabData" :activeName="activeName"/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
@ -17,7 +17,7 @@
|
||||
const activeName = ref();
|
||||
const tabData=ref([])
|
||||
|
||||
const getTabData = async () => {
|
||||
const getTabData = async (name) => {
|
||||
let res = await getWebInfo();
|
||||
res.map(item=>{
|
||||
item.dataList.map(sub=>{
|
||||
@ -54,7 +54,10 @@
|
||||
})
|
||||
})
|
||||
tabData.value = res
|
||||
activeName.value=tabData.value[0].configName
|
||||
activeName.value=name?name:tabData.value[0].configName
|
||||
}
|
||||
const getReshTabData = (name)=>{
|
||||
getTabData(name)
|
||||
}
|
||||
onMounted(()=>{
|
||||
getTabData()
|
||||
|
||||
Loading…
Reference in New Issue
Block a user