| 对比新文件 | 
|  |  |  | 
|---|
|  |  |  | <template> | 
|---|
|  |  |  | <el-bus-crud v-bind="tableConfig"/> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <script> | 
|---|
|  |  |  | export default { | 
|---|
|  |  |  | data() { | 
|---|
|  |  |  | return { | 
|---|
|  |  |  | tableConfig: { | 
|---|
|  |  |  | url: 'flower/api/configCustomer/list', | 
|---|
|  |  |  | newUrl: 'flower/api/configCustomer/new', | 
|---|
|  |  |  | editUrl: 'flower/api/configCustomer/edit', | 
|---|
|  |  |  | deleteUrl: 'flower/api/configCustomer/delete', | 
|---|
|  |  |  | columns: [ | 
|---|
|  |  |  | {label: '序号', type: 'index'}, | 
|---|
|  |  |  | {label: '名称', prop: 'name'}, | 
|---|
|  |  |  | {label: '描述', prop: 'description'}, | 
|---|
|  |  |  | {label: '图标内容', prop: 'iconContent'}, | 
|---|
|  |  |  | { | 
|---|
|  |  |  | label: '图标地址', | 
|---|
|  |  |  | formatter: (row) => | 
|---|
|  |  |  | row.iconUrl ? ( | 
|---|
|  |  |  | <el-bus-image | 
|---|
|  |  |  | src={row.iconUrl} | 
|---|
|  |  |  | lazy={true} | 
|---|
|  |  |  | style="width:50px;height:50px" | 
|---|
|  |  |  | ></el-bus-image> | 
|---|
|  |  |  | ) : null, | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | {label: '微信号', prop: 'weixin'}, | 
|---|
|  |  |  | ], | 
|---|
|  |  |  |  | 
|---|
|  |  |  | searchForm: [ | 
|---|
|  |  |  | { | 
|---|
|  |  |  | type: 'row', | 
|---|
|  |  |  | items: [{label: '等级名称:', id: 'name', type: 'input'}], | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | ], | 
|---|
|  |  |  | form: [ | 
|---|
|  |  |  | { | 
|---|
|  |  |  | label: '名称:', | 
|---|
|  |  |  | id: 'name', | 
|---|
|  |  |  | type: 'input', | 
|---|
|  |  |  | rules: {required: true, message: '请输入客服名称'}, | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | { | 
|---|
|  |  |  | label: '描述:', | 
|---|
|  |  |  | id: 'description', | 
|---|
|  |  |  | type: 'input', | 
|---|
|  |  |  | rules: {required: true, message: '请输入客服描述'}, | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | { | 
|---|
|  |  |  | label: '图标内容:', | 
|---|
|  |  |  | id: 'iconContent', | 
|---|
|  |  |  | type: 'input', | 
|---|
|  |  |  | rules: {required: true, message: '请输入客服图标内容'}, | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | { | 
|---|
|  |  |  | label: '背景图片:', | 
|---|
|  |  |  | id: 'iconUrl', | 
|---|
|  |  |  | type: 'bus-upload', | 
|---|
|  |  |  | el: { | 
|---|
|  |  |  | listType: 'picture-card', | 
|---|
|  |  |  | limit: 1, | 
|---|
|  |  |  | limitSize: 2, | 
|---|
|  |  |  | tipText: '大小不超过2M', | 
|---|
|  |  |  | valueType: 'string', | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | forceDisabled: true, | 
|---|
|  |  |  | rules: { | 
|---|
|  |  |  | required: true, | 
|---|
|  |  |  | message: '请上传背景图片', | 
|---|
|  |  |  | trigger: 'blur', | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | { | 
|---|
|  |  |  | label: '微信号', | 
|---|
|  |  |  | id: 'weixin', | 
|---|
|  |  |  | type: 'input', | 
|---|
|  |  |  | rules: {required: true, message: '请输入客服关联微信号'}, | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | ], | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | head() { | 
|---|
|  |  |  | return { | 
|---|
|  |  |  | title: '客服电话', | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | } | 
|---|
|  |  |  | </script> | 
|---|
| 对比新文件 | 
|  |  |  | 
|---|
|  |  |  | <template> | 
|---|
|  |  |  | <el-bus-crud v-bind="tableConfig"/> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <script> | 
|---|
|  |  |  | export default { | 
|---|
|  |  |  | data() { | 
|---|
|  |  |  | return { | 
|---|
|  |  |  | tableConfig: { | 
|---|
|  |  |  | url: 'flower/v2/config-param-group/group/list', | 
|---|
|  |  |  | newUrl: 'flower/v2/config-param-group/new', | 
|---|
|  |  |  | editUrl: 'flower/v2/config-param-group/edit', | 
|---|
|  |  |  | deleteUrl: 'flower/v2/config-param-group/delete', | 
|---|
|  |  |  | columns: [ | 
|---|
|  |  |  | {label: '序号', type: 'index'}, | 
|---|
|  |  |  | {label: '变量分组', prop: 'paramGroup'}, | 
|---|
|  |  |  | {label: '变量分组名', prop: 'paramGroupName'}, | 
|---|
|  |  |  | {label: '变量排序号', prop: 'paramOrder'}, | 
|---|
|  |  |  | ], | 
|---|
|  |  |  |  | 
|---|
|  |  |  | searchForm: [ | 
|---|
|  |  |  | { | 
|---|
|  |  |  | type: 'row', | 
|---|
|  |  |  | items: [ | 
|---|
|  |  |  | {label: '变量分组名:', id: 'paramGroupName', type: 'input'}], | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | ], | 
|---|
|  |  |  | form: [ | 
|---|
|  |  |  | { | 
|---|
|  |  |  | label: '变量分组:', | 
|---|
|  |  |  | id: 'paramGroup', | 
|---|
|  |  |  | type: 'input', | 
|---|
|  |  |  | rules: { | 
|---|
|  |  |  | required: true, | 
|---|
|  |  |  | pattern: /^[a-z]+$/, | 
|---|
|  |  |  | message: '请输入变量分组,只允许小写英文字母' | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | { | 
|---|
|  |  |  | label: '变量分组名:', | 
|---|
|  |  |  | id: 'paramGroupName', | 
|---|
|  |  |  | type: 'input', | 
|---|
|  |  |  | rules: {required: true, message: '请输入变量分组名'}, | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | { | 
|---|
|  |  |  | label: '变量排序号:', | 
|---|
|  |  |  | id: 'paramOrder', | 
|---|
|  |  |  | type: 'input', | 
|---|
|  |  |  | rules: { | 
|---|
|  |  |  | required: true, | 
|---|
|  |  |  | pattern: /^\d+$/, | 
|---|
|  |  |  | message: '请输入变量排序号,只允许非负整数'}, | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | ], | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | head() { | 
|---|
|  |  |  | return { | 
|---|
|  |  |  | title: '配置系统参数组', | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | } | 
|---|
|  |  |  | </script> | 
|---|
| 对比新文件 | 
|  |  |  | 
|---|
|  |  |  | <template> | 
|---|
|  |  |  | <el-bus-crud v-bind="tableConfig"/> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <script> | 
|---|
|  |  |  | export default { | 
|---|
|  |  |  | data() { | 
|---|
|  |  |  | return { | 
|---|
|  |  |  | tableConfig: { | 
|---|
|  |  |  | url: 'flower/v2/config-param/config/list', | 
|---|
|  |  |  | newUrl: 'flower/v2/config-param/new', | 
|---|
|  |  |  | editUrl: 'flower/v2/config-param/edit', | 
|---|
|  |  |  | deleteUrl: 'flower/v2/config-param/delete', | 
|---|
|  |  |  | columns: [ | 
|---|
|  |  |  | {label: '序号', type: 'index'}, | 
|---|
|  |  |  | {label: '变量分组名', prop: 'paramGroupName'}, | 
|---|
|  |  |  | {label: '变量名', prop: 'paramName'}, | 
|---|
|  |  |  | {label: '变量键', prop: 'paramKey'}, | 
|---|
|  |  |  | {label: '变量值', prop: 'paramValue'}, | 
|---|
|  |  |  | {label: '变量规则', prop: 'paramPlaceholder'}, | 
|---|
|  |  |  | {label: '变量提示', prop: 'paramTip'}, | 
|---|
|  |  |  | {label: '变量排序号', prop: 'paramOrder'}, | 
|---|
|  |  |  | {label: '变量值类型', prop: 'paramValueType'}, | 
|---|
|  |  |  | {label: '变量字典', prop: 'paramDict'}, | 
|---|
|  |  |  | {label: '控件类型', prop: 'paramControlType'}, | 
|---|
|  |  |  | {label: '是否是必填', prop: 'paramRequire'}, | 
|---|
|  |  |  | {label: '参数限制数量', prop: 'paramLimit'}, | 
|---|
|  |  |  | ], | 
|---|
|  |  |  |  | 
|---|
|  |  |  | searchForm: [ | 
|---|
|  |  |  | { | 
|---|
|  |  |  | type: 'row', | 
|---|
|  |  |  | items: [{label: '变量分组:', id: 'paramGroup', type: 'input'}, | 
|---|
|  |  |  | {label: '变量分组名:', id: 'paramGroupName', type: 'input'}], | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | ], | 
|---|
|  |  |  | form: [ | 
|---|
|  |  |  | { | 
|---|
|  |  |  | label: '变量分组名:', | 
|---|
|  |  |  | id: 'paramGroupId', | 
|---|
|  |  |  | type: 'bus-select', | 
|---|
|  |  |  | el: { | 
|---|
|  |  |  | interfaceUri: 'flower/v2/config-param-group/group/list', | 
|---|
|  |  |  | props: { | 
|---|
|  |  |  | label: 'paramGroupName', | 
|---|
|  |  |  | value: 'id', | 
|---|
|  |  |  | dataPath: 'records', | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | extraQuery: { | 
|---|
|  |  |  | current: 1, | 
|---|
|  |  |  | size: 2000, | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | filterable: true, | 
|---|
|  |  |  | style: 'width:100%', | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | rules: { required: true, message: '请选择变量分组' }, | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | { | 
|---|
|  |  |  | label: '变量名:', | 
|---|
|  |  |  | id: 'paramName', | 
|---|
|  |  |  | type: 'input', | 
|---|
|  |  |  | rules: {required: true, message: '请输入变量名'}, | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | { | 
|---|
|  |  |  | label: '变量键', | 
|---|
|  |  |  | id: 'paramKey', | 
|---|
|  |  |  | type: 'input', | 
|---|
|  |  |  | rules: {required: true, message: '请输入变量键'}, | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | { | 
|---|
|  |  |  | label: '变量值', | 
|---|
|  |  |  | id: 'paramValue', | 
|---|
|  |  |  | type: 'input', | 
|---|
|  |  |  | rules: {required: true, message: '请输入变量值'}, | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | { | 
|---|
|  |  |  | label: '变量规则', | 
|---|
|  |  |  | id: 'paramPlaceholder', | 
|---|
|  |  |  | type: 'input', | 
|---|
|  |  |  | rules: {required: true, message: '请输入变量规则'}, | 
|---|
|  |  |  | },{ | 
|---|
|  |  |  | label: '变量提示', | 
|---|
|  |  |  | id: 'paramTip', | 
|---|
|  |  |  | type: 'input', | 
|---|
|  |  |  | rules: {required: true, message: '请输入变量提示'}, | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | { | 
|---|
|  |  |  | label: '变量排序号', | 
|---|
|  |  |  | id: 'paramOrder', | 
|---|
|  |  |  | type: 'input', | 
|---|
|  |  |  | rules: { | 
|---|
|  |  |  | required: true, | 
|---|
|  |  |  | pattern: /^\d+$/, | 
|---|
|  |  |  | message: '请输入变量排序号,只允许非负整数'}, | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | { | 
|---|
|  |  |  | label: '变量值类型', | 
|---|
|  |  |  | id: 'paramValueType', | 
|---|
|  |  |  | type: 'input', | 
|---|
|  |  |  | },{ | 
|---|
|  |  |  | label: '变量字典', | 
|---|
|  |  |  | id: 'paramDict', | 
|---|
|  |  |  | type: 'input', | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | { | 
|---|
|  |  |  | label: '控件类型', | 
|---|
|  |  |  | id: 'paramControlType', | 
|---|
|  |  |  | type: 'input', | 
|---|
|  |  |  | rules: {required: true, message: '请输入控件类型'}, | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | { | 
|---|
|  |  |  | label: '是否是必填', | 
|---|
|  |  |  | id: 'paramRequire', | 
|---|
|  |  |  | type: 'bus-select-dict', | 
|---|
|  |  |  | el: { | 
|---|
|  |  |  | code: 'IS_REQUIRED', | 
|---|
|  |  |  | style: 'width:100%', | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | rules: {required: true, message: '请输入是否是必填'}, | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | { | 
|---|
|  |  |  | label: '参数限制数量', | 
|---|
|  |  |  | id: 'paramLimit', | 
|---|
|  |  |  | type: 'input', | 
|---|
|  |  |  | rules: {required: true, message: '请输入参数限制数量'}, | 
|---|
|  |  |  | }, | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | ], | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | head() { | 
|---|
|  |  |  | return { | 
|---|
|  |  |  | title: '配置系统参数', | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | } | 
|---|
|  |  |  | </script> | 
|---|
|  |  |  | 
|---|
|  |  |  | :on-success="(response, file, fileList) => handleUploadSuccess(response, file, fileList, param)"> | 
|---|
|  |  |  | <i class="el-icon-plus"></i> | 
|---|
|  |  |  | </el-upload> | 
|---|
|  |  |  | <el-switch v-if="param.paramControlType === 'switch'" v-model="formModels[item.id][param.paramKey]" | 
|---|
|  |  |  | active-text="启用" inactive-text="禁用"></el-switch> | 
|---|
|  |  |  | <el-radio-group v-if="param.paramControlType === 'radio'" | 
|---|
|  |  |  | v-model="formModels[item.id][param.paramValue]"> | 
|---|
|  |  |  | <el-radio v-for="option in dictOptions[param.paramDict]" :key="option.value" | 
|---|
|  |  |  | :label="option.value"> | 
|---|
|  |  |  | {{ option.label }} | 
|---|
|  |  |  | </el-radio> | 
|---|
|  |  |  | </el-radio-group> | 
|---|
|  |  |  | <el-checkbox-group v-if="param.paramControlType === 'checkbox'" v-model="formModels[item.id][param.paramKey]"> | 
|---|
|  |  |  | <el-checkbox v-for="option in dictOptions[param.paramDict]" :key="option.value" :label="option.value">{{ option.label }}</el-checkbox> | 
|---|
|  |  |  | </el-checkbox-group> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <el-form-item v-if="item.paramList && item.paramList.length > 0"> | 
|---|
|  |  |  | 
|---|
|  |  |  | formModels: {}, // 存储每个 tab 的 formModel | 
|---|
|  |  |  | srcFormModels: {}, // 原始表单数据 | 
|---|
|  |  |  | formRules: {}, // 存储每个 tab 的 formRules | 
|---|
|  |  |  | dictOptions: [], // 存储字典选项 | 
|---|
|  |  |  | }; | 
|---|
|  |  |  | }, | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | async mounted() { | 
|---|
|  |  |  | await this.getConfigParamGroup(); | 
|---|
|  |  |  | await this.getDictOptions(); // 获取字典选项 | 
|---|
|  |  |  | }, | 
|---|
|  |  |  |  | 
|---|
|  |  |  | methods: { | 
|---|
|  |  |  | 
|---|
|  |  |  | this.activeName = this.tabList[index]?.paramGroup | 
|---|
|  |  |  |  | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | getDictOptions() { | 
|---|
|  |  |  | // 模拟 API 调用获取字典选项 | 
|---|
|  |  |  | this.dictOptions = { radioDict: [{ value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' }] }; | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | }; | 
|---|
|  |  |  | </script> | 
|---|