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