<template>
|
<div>
|
<el-card class="box-card">
|
<div slot="header" class="clearfix">
|
<span>系统配置</span>
|
<!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
|
</div>
|
|
<el-tabs v-model="activeName" type="card" class="setupClass-tab" @tab-click="handleClick">
|
<el-tab-pane v-for="(item, index) in tabList" :key="item.id" :label="item.paramGroupName"
|
:name="item.paramGroup">
|
|
<el-form :model="formModels[item.id]" :rules="formRules[item.id]" label-width="120px"
|
:ref="(el) => (formRefs[index] = el)" style="width: 100%">
|
|
<el-form-item v-for="(param) in item.paramList" :key="param.id" :label="param.paramName"
|
:prop="param.paramKey">
|
|
<el-input v-if="param.paramControlType === 'input'"
|
v-model="formModels[item.id][param.paramKey]" :placeholder="param.paramPlaceholder"
|
clearable />
|
|
<el-upload v-if="param.paramControlType === 'image'" :action="uploadUrl"
|
list-type="picture-card" :file-list="formModels[item.id][param.paramKey]"
|
:limit="param.paramLimit"
|
:on-preview="handlePictureCardPreview"
|
:on-remove="(file) => handleRemove(file, param)"
|
:on-success="(response, file, fileList) => handleUploadSuccess(response, file, fileList, param)">
|
<i class="el-icon-plus"></i>
|
</el-upload>
|
</el-form-item>
|
|
<el-form-item v-if="item.paramList && item.paramList.length > 0">
|
<el-button type="primary" @click="submitForm(index)">提交</el-button>
|
<el-button @click="resetForm(index)">重置</el-button>
|
</el-form-item>
|
</el-form>
|
</el-tab-pane>
|
</el-tabs>
|
</el-card>
|
|
<!-- 预览弹窗 -->
|
<el-dialog :visible.sync="previewVisible">
|
<img :src="previewImage" alt="Preview Image" style="width: 100%;" />
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
|
import utils from 'el-business-utils'
|
|
export default {
|
data() {
|
return {
|
uploadUrl: '',
|
activeName: 'first',
|
tabList: [],
|
previewVisible: false,
|
previewImage: '',
|
curTab: {},
|
curIndex: 0,
|
formRefs: [],
|
formModels: {}, // 存储每个 tab 的 formModel
|
srcFormModels: {}, // 原始表单数据
|
formRules: {}, // 存储每个 tab 的 formRules
|
};
|
},
|
|
created() {
|
const config = process.env.config
|
this.uploadUrl = utils.joinPath(config.httpBaseUri, `flower/api/upload/oss/file`)
|
},
|
async mounted() {
|
await this.getConfigParamGroup();
|
},
|
|
methods: {
|
handleClick(tab, event) {
|
this.chooseTab(tab.index)
|
},
|
|
chooseTab(index) {
|
this.curTab = this.tabList[index];
|
this.curIndex = index;
|
this.getConfigParam();
|
},
|
|
async getConfigParamGroup() {
|
const { code, data } = await this.$elBusHttp.request('flower/v2/config-param-group/list', { params: {} });
|
if (code === 0) {
|
this.tabList = [...data];
|
this.activeName = data[0]?.paramGroup || '';
|
this.tabList.forEach(item => {
|
this.$set(this.formModels, item.id, {});
|
this.$set(this.srcFormModels, item.id, {}); // 初始化 srcFormModels
|
this.$set(this.formRules, item.id, {});
|
});
|
if (data[0]) {
|
this.curTab = this.tabList[0];
|
this.curIndex = 0;
|
this.getConfigParam();
|
}
|
|
}
|
},
|
|
createFormModel(paramList) {
|
// 创建一个空的对象，用于存储参数
|
const model = {};
|
paramList.forEach(param => {
|
// 如果param.paramControlType是image的话，则将值反序列化成ArrayList
|
if (param.paramControlType === 'image') {
|
model[param.paramKey] = this.parseFileList(param.paramValue) || [];
|
} else {
|
// 默认处理为字符串
|
model[param.paramKey] = param.paramValue || '';
|
}
|
});
|
return model;
|
},
|
|
createFormRules(paramList) {
|
const rules = {};
|
paramList.forEach(param => {
|
if (param.paramRequire) {
|
const trigger = param.paramControlType === 'input' ? 'blur' : 'change';
|
const rule = [
|
{ required: true, message: `${param.paramPlaceholder}`, trigger }
|
];
|
|
// 如果param_limit存在且不为null/undefined，添加最大值校验
|
if (param.paramLimit) {
|
// 如果paramControlType是'input'，执行最大值校验
|
if (param.paramControlType !== 'image') {
|
rule.push({
|
max: param.paramLimit,
|
message: `${param.paramName}最大值为 ${param.paramLimit}!`,
|
trigger
|
});
|
} else {
|
// 如果是image类型，添加自定义验证，判断数组长度
|
rule.push({
|
validator: (rule, value, callback) => {
|
if (Array.isArray(value) && value.length > param.paramLimit) {
|
callback(new Error(`${param.paramName}最多上传 ${param.paramLimit} 张图片`));
|
} else {
|
callback(); // 验证通过
|
}
|
},
|
trigger
|
});
|
}
|
}
|
|
rules[param.paramKey] = rule;
|
}
|
});
|
return rules;
|
},
|
|
async getConfigParam() {
|
const { code, data } = await this.$elBusHttp.request('flower/v2/config-param/list', {
|
params: { paramGroupId: this.curTab.id },
|
});
|
if (code === 0) {
|
this.tabList[this.curIndex].paramList = [...data];
|
|
// 构造 formModel 和 formRules，并分别存储到对应的对象中
|
const formData = this.createFormModel(data);
|
this.$set(this.formModels, this.curTab.id, { ...formData });
|
this.$set(this.srcFormModels, this.curTab.id, { ...formData }); // 初始化 srcFormModels
|
this.$set(this.formRules, this.curTab.id, this.createFormRules(data));
|
}
|
},
|
|
handleRemove(file, param) {
|
const srcFormModel = this.srcFormModels[this.curTab.id];
|
const currentFormModel = this.formModels[this.curTab.id];
|
if (file?.response?.code === '0') {
|
const data = file?.response?.data;
|
if (data && data[0]) {
|
const removeFile = data[0]
|
const updatedFileList = currentFormModel[param.paramKey].filter(item => item.url !== removeFile.url);
|
// 保存原有的图片控件属性值
|
if (updatedFileList.length === 0) {
|
// 如果文件列表为空，设置为空字符串
|
this.$set(currentFormModel, param.paramKey, []);
|
} else {
|
// 否则，更新为新的文件列表 JSON 字符串
|
this.$set(currentFormModel, param.paramKey, updatedFileList);
|
|
}
|
|
}
|
|
} else if (file && file?.url) {
|
const updatedFileList = currentFormModel[param.paramKey].filter(item => item.url !== file.url);
|
// 保存原有的图片控件属性值
|
if (updatedFileList.length === 0) {
|
// 如果文件列表为空，设置为空字符串
|
this.$set(currentFormModel, param.paramKey, []);
|
} else {
|
// 否则，更新为新的文件列表 JSON 字符串
|
this.$set(currentFormModel, param.paramKey, updatedFileList);
|
|
}
|
}
|
|
},
|
|
parseFileList(fileListString) {
|
try {
|
return JSON.parse(fileListString || '[]');
|
} catch (error) {
|
console.error('Error parsing fileList JSON:', error);
|
return [];
|
}
|
},
|
parseFileListCompare(fileListString, groupId, paramKey) {
|
console.log("parseFileListCompare")
|
try {
|
return JSON.parse(fileListString || '[]');
|
} catch (error) {
|
console.error('Error parsing fileList JSON:', error);
|
return [];
|
}
|
|
// const newVal = this.formModels[groupId][paramKey]
|
// const srcVal = this.srcFormModels[groupId][paramKey]
|
// if (newVal !== srcVal) {
|
// try {
|
// return JSON.parse(fileListString || '[]');
|
// } catch (error) {
|
// console.error('Error parsing fileList JSON:', error);
|
// return [];
|
// }
|
// }
|
},
|
|
handleUploadSuccess(response, file, fileList, param) {
|
if (response.code === '0') {
|
const currentFormModel = this.formModels[this.curTab.id];
|
const existingFileList = currentFormModel[param.paramKey];
|
const newFile = response.data[0];
|
const updatedFileList = [...existingFileList, newFile];
|
// this.$set(currentFormModel, param.paramKey, JSON.stringify(updatedFileList));
|
currentFormModel[param.paramKey] = updatedFileList;
|
} else {
|
this.$message.error('文件上传失败');
|
}
|
},
|
|
handlePictureCardPreview(file) {
|
if (file.url) {
|
this.previewImage = file.url;
|
this.previewVisible = true;
|
} else {
|
this.$message.error('无法预览该文件');
|
}
|
},
|
|
submitForm(index) {
|
console.log("submitForm")
|
console.log(this.formModels[this.curTab.id])
|
console.log(this.formRules[this.curTab.id])
|
|
const formRef = this.formRefs[index];
|
if (formRef) {
|
formRef.validate(async (valid) => {
|
if (valid) {
|
|
// 这里需要将表单的属性匹配到当前的tabList下的paramList的列
|
const tmpParamList = this.tabList[this.curIndex].paramList;
|
// 遍历
|
const submitFormModel = this.formModels[this.curTab.id]
|
// 遍历 submitFormModel 的属性
|
Object.keys(submitFormModel).forEach((key) => {
|
// 在 tmpParamList 中找到 paramKey 与当前属性 key 匹配的记录
|
const paramItem = tmpParamList.find((item) => item.paramKey === key);
|
if (paramItem) {
|
// 将 paramValue 设置为表单中对应属性的值
|
paramItem.paramValue = submitFormModel[key];
|
}
|
});
|
console.log("修改后的值")
|
console.log(tmpParamList)
|
const resultArray = tmpParamList
|
.filter((item) => item.id !== undefined) // 确保 id 存在
|
.map((item) => ({
|
id: item.id,
|
paramValue: item.paramControlType === 'image' ? JSON.stringify(item.paramValue) : item.paramValue
|
}));
|
|
await this.$elBusUtil.confirm('确定要提交吗？')
|
const { code } = await this.$elBusHttp.request(
|
'flower/v2/config-param/update/batch',
|
{
|
method: 'put',
|
data: {
|
paramList: resultArray,
|
},
|
}
|
)
|
if (code === 0) {
|
await this.getConfigParam()
|
this.$message.success('更新成功')
|
|
}
|
|
|
// this.$message.success('表单校验成功！');
|
// console.log('提交的表单数据: ', this.formModels[this.tabList[index].id]);
|
} else {
|
this.$message.error('表单校验失败，请检查填写内容！');
|
}
|
});
|
} else {
|
console.error(`表单引用未找到: formRefs[${index}]`);
|
}
|
},
|
|
resetForm(index) {
|
// console.log()
|
// const formRef = this.formRefs[index];
|
// if (formRef) {
|
// formRef.resetFields();
|
|
// this.$message.info('表单已重置');
|
// } else {
|
// console.error(`未找到表单引用: formRefs[${index}]`);
|
// }
|
this.chooseTab(index)
|
this.activeName = this.tabList[index]?.paramGroup
|
|
},
|
},
|
};
|
</script>
|
