248 lines
7.8 KiB
Plaintext
248 lines
7.8 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 #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);
|
||
};
|
||
|
||
/**
|
||
* 上传图片文件
|
||
* @param list 列表
|
||
* @param index 索引
|
||
*/
|
||
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 });
|
||
});
|
||
};
|
||
|
||
/**
|
||
* 上传文件
|
||
* @param filePath 文件路径
|
||
* @param fileName 文件名称
|
||
* @param index 索引
|
||
*/
|
||
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;
|
||
};
|
||
|
||
/**
|
||
* 批量上传文件
|
||
* @param list 列表
|
||
* @param index 索引
|
||
*/
|
||
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>
|