165 lines
6.5 KiB
Plaintext
165 lines
6.5 KiB
Plaintext
<template>
|
||
<div>
|
||
<a-form :label-col="{ style: { width: '150px' }}" :model="formData" ref="formRef">
|
||
<a-form-item v-for="(item, index) in configItemList.filter(item => item.type != 'hidden')" :key="index"
|
||
:label="`${item.name}：`" :name="item.code">
|
||
<template
|
||
v-if="item.type == 'text' || item.type == 'readonly' || item.type == 'textarea' || item.type == 'password'">
|
||
<component
|
||
:is="item.type == 'text' || item.type == 'readonly'?'a-input':(item.type == 'textarea'?'a-textarea':'a-input-password')"
|
||
v-model:value="formData[item.code]" :placeholder="`请输入${item.name}`"
|
||
:type="item.type == 'textarea' ? 'textarea' : (item.type == 'password' ? 'password' : '')"
|
||
:disabled="item.type == 'readonly'" />
|
||
</template>
|
||
<template v-else-if="item.type == 'number'">
|
||
<a-input-number v-model:value="formData[item.code]" placeholder="请输入" />
|
||
</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'">
|
||
<a-radio-group v-model:value="formData[item.code]" :name="item.code">
|
||
<a-radio v-for="(value, key) in item.param" :value="key" :key="key">
|
||
{{ value }}
|
||
</a-radio>
|
||
</a-radio-group>
|
||
</template>
|
||
<template v-else-if="item.type == 'checkbox'">
|
||
<a-checkbox-group v-model:value="formData[item.code]" :name="item.code">
|
||
<a-checkbox :value="key" :key="key" v-for="(value, key) in item.param">{{ value }}</a-checkbox>
|
||
</a-checkbox-group>
|
||
</template>
|
||
<template v-else-if="item.type == 'select' || item.type == 'selects'">
|
||
<a-select v-model:value="formData[item.code]" :mode="item.type == 'selects'?'multiple':''">
|
||
<a-select-option v-for="(value, key) in item.param" :key="key" :value="key">{{ value }}</a-select-option>
|
||
</a-select>
|
||
</template>
|
||
<template v-else-if="item.type == 'date' || item.type == 'datetime'">
|
||
<a-date-picker :type="item.type" :placeholder="`请选择${item.name}`" v-model:value="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" name="setting"/>
|
||
</template>
|
||
</a-form-item>
|
||
</a-form>
|
||
<div class="submit-btn">
|
||
<a-button type="primary" @click="handleSubmit" v-perm="['sys:configWeb:save']">更新系统设置</a-button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { reactive, ref, onMounted,nextTick } from 'vue';
|
||
import { message } from 'ant-design-vue';
|
||
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';
|
||
// import IconPicker from "@/components/icon/picker.vue";
|
||
import { updateWeb } from '@/api/setting/web';
|
||
const props = defineProps({
|
||
dataList: {
|
||
type: Array,
|
||
required: true,
|
||
default: []
|
||
},
|
||
activeName: {
|
||
type: String,
|
||
required: true,
|
||
default: ''
|
||
},
|
||
});
|
||
const editorRef=ref()
|
||
const formRef = ref();
|
||
const fwbHeight=document.body.clientHeight -400
|
||
|
||
const formData = reactive({});
|
||
const configItemList = ref([])
|
||
const emit = defineEmits(['success']);
|
||
|
||
const handleSubmit = async () => {
|
||
await formRef.value?.validate();
|
||
let ueditorIndex = 0
|
||
configItemList.value.map(item=>{
|
||
if(item.type=='ueditor'){
|
||
formData[item.code] = editorRef.value[ueditorIndex].myValue
|
||
ueditorIndex++
|
||
}
|
||
})
|
||
console.log(formData)
|
||
await updateWeb(formData)
|
||
message.success("更新成功");
|
||
emit('success',props.activeName)
|
||
};
|
||
const fileUploadImgs = (list: any,index:any) => {
|
||
const code = configItemList.value[index].code
|
||
formData[code] = []
|
||
configItemList.value[index].filePath = []
|
||
list.map(item=>{
|
||
formData[code].push(item.filePath)
|
||
configItemList.value[index].filePath.push({filePath:item.filePath})
|
||
})
|
||
};
|
||
const fileUploadFile = async (filePath: any, fileName: any,index:any) => {
|
||
const code = configItemList.value[index].code
|
||
formData[code] = filePath?`${fileName}|${filePath}`:''
|
||
configItemList.value[index].filePath = filePath
|
||
configItemList.value[index].fileName = fileName
|
||
};
|
||
const fileUploadFiles = (list: any,index:any) => {
|
||
const code = configItemList.value[index].code
|
||
configItemList.value[index].filePath = []
|
||
formData[code] = []
|
||
list.map(item=>{
|
||
formData[code].push(`${item.name}|${item.url}`)
|
||
configItemList.value[index].filePath.push({name:item.name,url:item.url})
|
||
})
|
||
};
|
||
|
||
onMounted(() => {
|
||
configItemList.value = JSON.parse(JSON.stringify(props.dataList))
|
||
nextTick(()=>{
|
||
let ueditorIndex = 0
|
||
configItemList.value.map(item=>{
|
||
formData[item.code] = item.value
|
||
if(item.type=='ueditor'){
|
||
if(editorRef.value) {
|
||
editorRef.value[ueditorIndex].myValue=item.value
|
||
ueditorIndex++
|
||
}
|
||
}
|
||
})
|
||
})
|
||
|
||
});
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.submit-btn {
|
||
position: fixed;
|
||
bottom: 50px;
|
||
right: 4%;
|
||
}
|
||
</style>
|