Ext.form.RadioGroup的赋值问题

本文介绍了一种在ExtJS框架中自定义方法来查找表单字段的方法,并演示了如何设置特定字段值的过程。
需要在页面中加入以下代码,可以加到任意处

Ext.override(Ext.form.BasicForm,{
findField : function(id){
var field = this.items.get(id);
if(!field){
this.items.each(function(f){
if(f.isXType('radiogroup')||f.isXType('checkboxgroup')){
f.items.each(function(c){
if(c.isFormField && (c.dataIndex == id || c.id == id || c.getName() == id)){
field = c;
return false;
}
});
}

if(f.isFormField && (f.dataIndex == id || f.id == id || f.getName() == id)){
field = f;
return false;
}
});
}
return field || null;
}
});
然后赋值
form.findById('iscluster').setValue('true');
<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> 以上述代码为基础增加逻辑,要求如果查询出来选中的菜单无基础信息配置,则取选中菜单的信息回填给表单的菜单名称,菜单编码,菜单编号(如果菜单无以上值,则对应项可编辑),取缓存内的操作员信息回填给表单的操作员编号,操作员编码(如果无值,则对应项可编辑),系统来源固定展示业务大厅,创建时间无值回填并不可编辑,生失效时间和是否可评价无值,待编辑完毕点击保存,创建时间回填点击保存时的时间
最新发布
07-18
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值