需求描述
- 列表点创建,弹出窗体
- 如果选的不是公共/交警 就直接进功能表单 并把选的类型值带入表单数据,否则就弹出表单窗体
- 输入弹窗表单数据完毕,点击确定按钮跳转都功能表单页面,并把值带入
/*
方法调用示例:JE.callCustomFn('编码',{ param1:1, param2:2 });
*/
const {h,createVNode,reactive,resolveComponent} = JE.useVue();
const {Input,InputPicker} = JE.useUi();
const {Modal,isNotEmpty,isEmpty} = JE.useUtils();
const { $func } = EventOptions;
// 客户类型数据
const khTypes = [
{text:'政府',value:'1'},
{text:'公安',value:'2'},
{text:'交警',value:'5'},
{text:'渠道/代理',value:'3'},
{text:'其他',value:'4'}
];
// 表单数据
const formData = reactive({
KH_TYPE_NAME:'', // 客户类型名称
KH_TYPE_CODE:'', // 客户类型编码
KH_PROVINCE_CODE:'', // 省编码
KH_PROVINCE_NAME:'', // 省名称
KH_PROVINCE_ID:'', // 省ID
KH_CITY_CODE:'', // 市编码
KH_CITY_NAME:'', // 市名称
KH_CITY_ID:'', // 市ID
KH_COUNTY_CODE:'', // 县/区编码
KH_COUNTY_NAME:'', // 县/区名称
KH_COUNTY_ID:'', // 县/区ID
KH_NAME:'', //客户名称
});
// 表单列数据
const htmlArr = [{
name: 'KH_PROVINCE_CODE',
label: '省',
type:InputPicker.Select,
required:true,
options:{
configInfo:'JE_COMM_SSQX,KH_PROVINCE_CODE~KH_PROVINCE_NAME~KH_PROVINCE_ID,code~text~id,S',
}
},{
name: 'KH_CITY_CODE',
label: '市',
type:InputPicker.Select,
options:{
configInfo:'JE_COMM_SSQX,KH_CITY_CODE~KH_CITY_NAME~KH_CITY_ID,code~text~id,S',
querys:[{"type":"=","code":"SY_PARENT","value":"{KH_PROVINCE_ID}","cn":"and"}]
},
},{
name: 'KH_COUNTY_CODE',
label: '县/区',
type:InputPicker.Select,
options:{
configInfo:'JE_COMM_SSQX,KH_COUNTY_CODE~KH_COUNTY_NAME~KH_COUNTY_ID,code~text~id,S',
querys:[{"type":"=","code":"SY_PARENT","value":"{KH_CITY_ID}","cn":"and"}]
}
},{
name: 'KH_NAME',
label: '客户名称',
type:Input,
options:{
disabled:true,
placeholder:'根据所选择行政区规则自动生成',
}
}];
// 实例化表单
const renderContent = ()=> {
const Vnode = htmlArr.map((item)=>{
let labelNode= h('div',{class:'item-label'},item.label);
// 必填label
if(item.required){
labelNode = h('div',{class:'item-label'},[item.label,h('span',{style:{color:'red'}},'*')]);
}
const node= h('div', {class:'item'},
[
labelNode,
h('div',{class:'item-context'},
h(item.type,
{
value: formData[item.name],
model:formData,
'onUpdate:value': function (val) {
formData[item.name] = val;
setTimeout(()=>{
changePlace(item.name);
},100)
},
...item.options
}
)
),
]
)
return node;
});
Vnode.unshift(h('div',{class:'hint-context'},'提示说明:公安/交警类型的客户名称由行政区统一生成'));
return h('div',{class:'ylsa-client-modal-context'},Vnode);
};
// 修改省市县数据
const changePlace = (fielCode)=>{
// 省为空 市县也为空
if(fielCode == 'KH_PROVINCE_CODE' && isEmpty(formData[fielCode])){
formData.KH_CITY_CODE = ''; // 市编码
formData.KH_CITY_NAME = ''; // 市名称
formData.KH_CITY_ID = ''; // 市ID
formData.KH_COUNTY_CODE = ''; // 县/区编码
formData.KH_COUNTY_NAME = ''; // 县/区名称
formData.KH_COUNTY_ID = ''; // // 县/区ID
}
// 市为空 县也为空
if(fielCode == 'KH_CITY_CODE' && isEmpty(formData[fielCode])){
formData.KH_COUNTY_CODE = ''; // 县/区编码
formData.KH_COUNTY_NAME = ''; // 县/区名称
formData.KH_COUNTY_ID = ''; // // 县/区ID
}
const place = [];
['KH_PROVINCE_NAME','KH_CITY_NAME','KH_COUNTY_NAME'].forEach((key)=>{
if(isNotEmpty(formData[key])){
place.push(formData[key]);
}
});
formData.KH_NAME = place.join('');
};
// 添加数据操作
const addData = ()=>{
$func?.action.doGridInsert({ bean: formData });
}
// 改变客户类型数据
const changeKhtype =(tapIndex)=>{
formData.KH_TYPE_NAME = khTypes[tapIndex].text;
formData.KH_TYPE_CODE = khTypes[tapIndex].value;
}
// 选择客户类型窗体
uni.showActionSheet({
itemList: ['政府', '公安', '交警','渠道/代理','其他'],
success: function (res) {
// 改变客户类型数据
changeKhtype(res.tapIndex);
// 如果选择 公安/交警 需要弹出表单
if([1,2].includes(res.tapIndex)){
Modal.window({
height: '100%',
contentStyle: { padding: 0 },
content: renderContent,
okButton: {
closable: false,
handler({ $modal }) {
if(isNotEmpty(formData.KH_PROVINCE_NAME)){
addData();
$modal.close();
}else{
Modal.notice('省不能为空','error');
}
},
},
});
}else{
addData();
}
},
fail: function (res) {
}
});
/*自定义样式*/
.ylsa-client-modal-context .item{
display: flex;
align-items: center;
padding: 5px 15px 5px 10px;
}
.ylsa-client-modal-context .item-label{
width: 80px;
text-align: right;
margin-right: 15px;
}
.ylsa-client-modal-context .item-context{
flex:1;
}
.ylsa-client-modal-context .hint-context{
padding: 20px 15px;
color: #3265f5;
}
最后编辑: 庞峰 文档更新时间: 2024-08-29 09:50 作者:庞峰