APP弹窗脚本

需求描述

1. 列表点创建,弹出窗体
2. 如果选的不是公共/交警 就直接进功能表单 并把选的类型值带入表单数据,否则就弹出表单窗体
3. 输入弹窗表单数据完毕,点击确定按钮跳转都功能表单页面,并把值带入

/*
 方法调用示例：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;
}