<template>
<div class="search-form-container">
<el-select
v-model="selectedItem"
filterable
clearable
placeholder="请搜索并选择菜单"
@change="handleSelectChange"
:filter-method="filterMenu"
@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>
<el-form :model="formData" label-width="120px" class="form-container">
<el-form-item label="操作员编号">
<el-input v-model="formData.createOpId" disabled />
</el-form-item>
<el-form-item label="操作员编码">
<el-input v-model="formData.createOpCode" disabled />
</el-form-item>
<el-form-item label="菜单编号">
<el-input v-model="formData.funcId" disabled />
</el-form-item>
<el-form-item label="系统来源">
<el-input v-model="formData.opSource" disabled />
</el-form-item>
<el-form-item label="页面编码">
<el-input v-model="formData.pageCode" disabled />
</el-form-item>
<el-form-item label="菜单名称">
<el-input v-model="formData.funcName" disabled />
</el-form-item>
<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>
<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>
<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>
<el-form-item label="是否可以评价">
<el-radio-group v-model="formData.enabled">
<el-radio :label="true">是</el-radio>
<el-radio :label="false">否</el-radio>
</el-radio-group>
</el-form-item>
<div class="form-actions">
<el-button @click="resetForm">重置</el-button>
<el-button type="primary" @click="saveForm">保存</el-button>
</div>
</el-form>
</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>
<style scoped>
.search-form-container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
border: 1px solid #ebeef5;
border-radius: 4px;
}
.form-container {
margin-top: 20px;
}
.form-actions {
display: flex;
justify-content: flex-end;
margin-top: 20px;
}
</style>
以上述代码为基础，实现整个页面的样式优化，最好表单一行内三列，冒号对齐
最新发布
本文详细介绍了在pgAdmin4中遇到布局混乱且File菜单消失的问题解决方法。通过发送特定的DELETE请求或删除相关配置文件可以重置布局，但会丢失已保存的数据库连接。文章还探讨了ResetLayout功能的工作原理。
扫一扫
5600
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
