<template>
<div class="app-container">
<!-- 头部区域 -->
<div class="header">
<h1>菜单配置管理</h1>
<p>配置系统菜单评价权限及生失效时间</p>
</div>
<div class="content">
<!-- 搜索区域 -->
<div class="search-container">
<div class="search-heder">
<div class="icon">
<em class="el-icon-search"></em>
</div>
<h2>菜单搜索</h2>
</div>
<el-select
v-model="selectedItem"
filterable
clearable
placeholder="请搜索并选择菜单"
@change="handleSelectChange"
@clear="handleClear"
@focus="handleFocus"
remote
:remote-method="remoteMethod"
>
<el-option
v-for="item in filteredMenus"
:key="item.funcId"
:label="item.name"
:value="item.menuUrl"
/>
</el-select>
</div>
<!-- 表单区域 -->
<div class="form-container">
<div class="form-header">
<div class="icon">
<em class="el-icon-setting"></em>
</div>
<h2>菜单配置信息</h2>
</div>
<el-form :model="formData" label-width="120px" class="form-container">
<div class="form-row">
<!-- 第一列 -->
<div class="form-col">
<el-form-item label="操作员编号">
<el-input v-model="formData.createOpId" disabled />
</el-form-item>
</div>
<div class="form-col">
<el-form-item label="操作员编码">
<el-input v-model="formData.createOpCode" disabled />
</el-form-item>
</div>
<div class="form-col">
<el-form-item label="菜单编号">
<el-input v-model="formData.funcId" disabled />
</el-form-item>
</div>
<!-- 第二列 -->
<div class="form-col">
<el-form-item label="系统来源">
<el-input v-model="formData.opSource" disabled />
</el-form-item>
</div>
<div class="form-col">
<el-form-item label="页面编码">
<el-input v-model="formData.pageCode" disabled />
</el-form-item>
</div>
<div class="form-col">
<el-form-item label="菜单名称">
<el-input v-model="formData.funcName" disabled />
</el-form-item>
</div>
<!-- 第三列 -->
<div class="form-col">
<el-form-item label="创建时间">
<el-date-picker
v-model="formData.createDate"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择日期时间"
disabled
/>
</el-form-item>
</div>
<div class="form-col">
<el-form-item label="生效时间">
<el-date-picker
v-model="formData.effectiveDate"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择生效时间"
/>
</el-form-item>
</div>
<div class="form-col">
<el-form-item label="失效时间">
<el-date-picker
v-model="formData.expireDate"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择失效时间"
/>
</el-form-item>
</div>
<!-- 第四列 - 单选框单独一行 -->
<div class="form-col" style="flex: 0 0 100%; max-width: 100%;">
<el-form-item label="是否可以评价">
<el-radio-group v-model="formData.enabled">
<el-radio :label="true" border>是</el-radio>
<el-radio :label="false" border>否</el-radio>
</el-radio-group>
</el-form-item>
</div>
</div>
<div class="form-actions">
<el-button class="custom-button" @click="resetForm">重置</el-button>
<el-button type="primary" class="custom-button" @click="saveForm">保存配置</el-button>
</div>
</el-form>
</div>
</div>
</div>
</template>
<script>
import { MUTATION } from '../config/constant.js';
import WbStore from '../utils/wbstore';
import {
Button,
Input,
Select,
FormItem,
RadioGroup,
Radio,
Form,
DatePicker,
Option,
} from 'element-ui';
import PinyinMatch from 'pinyin-match';
export default {
name: 'MenuConfiguration',
components: {
[Button.name]: Button,
[Input.name]: Input,
[Select.name]: Select,
[FormItem.name]: FormItem,
[RadioGroup.name]: RadioGroup,
[Form.name]: Form,
[DatePicker.name]: DatePicker,
[Option.name]: Option,
[Radio.name]: Radio,
},
data() {
return {
allMenus: [],
selectedItem: null,
formData: {
createOpId: '', //创建的操作员编号
createOpCode: '', //创建的操作员编码
ext_C: '', //优化举措
ext_B: '', //下载地址
ext_A: '', //详细内容
funcId: '', //菜单编号
opSource: '', //系统来源
pageCode: '', //页面编号
enabled: '', //是否可以评价 A:允许 C:不允许
funcName: '', //菜单名称
hallFuncBaseId: '', //菜单基础编号
expireDate: '', //失效时间
effectiveDate: '', //生效时间
createDate: '', //创建时间
},
filteredMenus: [],
};
},
mounted() {
let menu_ = WbStore.opsForHash.get(MUTATION.MENUS, 'menus') || {};
this.$store.commit(MUTATION.MENUS, menu_.kMenu);
this.allMenus = Object.values(menu_.kMenu);
},
methods: {
handleFocus() {
this.filteredMenus = [];
},
handleClear() {
this.filteredMenus = [];
this.resetForm();
},
remoteMethod(query) {
if (query !== '') {
this.filterMenu(query);
} else {
this.filteredMenus = [];
}
},
filterMenu(query) {
this.filteredMenus = this.allMenus.filter(item => {
const nameMatch = item.name.includes(query);
const pinyinMatch = PinyinMatch.match(item.name, query);
return nameMatch || (pinyinMatch && pinyinMatch !== false);
});
},
//查询基础信息配置
async handleSelectChange(pageCode) {
if (!pageCode) {
this.resetForm();
return;
}
console.log('e', this.selectedItem, pageCode);
try {
const result = await this.$http.post(
'GW_QRY_HOME_BUSIHOME_QRYHALLFUNCBASEINFO',
{ pageCode: pageCode },
);
console.log('返回result',result)
this.formData = this.transformData(result);
} catch (error) {
console.error('获取菜单配置失败:', error);
}
},
transformData(rawData) {
delete rawData.retCode;
delete rawData.retMessage;
return {
...rawData,
opSource: rawData.opSource === '1' ? '业务大厅' : '网格通',
enabled: rawData.upvoteState === 'A',
expireDate: rawData.expireDate.replace('.0', ''),
effectiveDate: rawData.effectiveDate.replace('.0', ''),
createDate: rawData.createDate.replace('.0', ''),
};
},
resetForm() {
this.formData.effectiveDate = '';
this.formData.expireDate = '';
this.formData.enabled = '';
},
async saveForm() {
if (!this.formData.pageCode) {
this.$message.warning('请先选择菜单');
return;
}
try {
console.log('传来的数据表单:', this.formData);
let data = { ...this.formData, opSource: '1', upvoteState: this.formData.enabled ? 'A' : 'C' }
delete data.enabled;
console.log('保存的数据data:', data);
await this.$http.post('GW_DEAL_HOME_BUSIHOME_SAVEBASEINFO', data);
this.$message({
message: '保存成功',
type: 'success',
});
} catch (error) {
this.$message({
message: '保存失败',
type: 'warning',
});
}
},
},
};
</script>
以上述代码为基础增加逻辑,要求如果查询出来选中的菜单无基础信息配置,则取选中菜单的信息回填给表单的菜单名称,菜单编码,菜单编号(如果菜单无以上值,则对应项可编辑),取缓存内的操作员信息回填给表单的操作员编号,操作员编码(如果无值,则对应项可编辑),系统来源固定展示业务大厅,创建时间无值回填并不可编辑,生失效时间和是否可评价无值,待编辑完毕点击保存,创建时间回填点击保存时的时间
最新发布