个性开发

个性开发

自己写前端JS 进行页面布局

基础配置

自定义列表

/* 
    // JE：公共类库，提供了常用的类库
    const vue = JE.useVue();        // Vue库
    const ui = JE.useUi();          // UI库
    const utils = JE.useUtils();    // 工具库
    const system = JE.useSystem();  // 系统类库
*/
const {Modal,Form,Input,Grid} = JE.useUi();
const {h,createVNode,ref,reactive}= JE.useVue();
//列表列
const gridColumn = [{
    field:'no',
    title:'序号',
    width:'90',
    editType:Input
},{
    field:'name',
    title:'姓名',
    width:'200',
    editType:Input
},{
    field:'sex',
    title:'姓别',
    width:'200',
    editType:Input
},{
    field:'age',
    title:'年龄',
    width:'200',
    editType:Input
}];
//列表数据
const gridData = [
    {no:1,name:'张三',sex:'男',age:'18'},
    {no:2,name:'王五',sex:'男',age:'18'},
    {no:3,name:'小红',sex:'女',age:'18'},
    {no:4,name:'小花',sex:'男',age:'18'}
];
const Vnode = gridColumn.map((item,index)=>{
    return  h(Grid.Column, {
        field:item.field,
        title:item.title,
        minWidth:item.width,
        editRender:{autofocus: '.ant-input'}},{
            edit: ({row}) =>h(item.editType,{value:row[item.field]}) 
        }
    );
})
return  h(Grid,{
    data:gridData,
    align:'center',
    editConfig:{
        trigger: 'click',
        mode: 'cell',
        showStatus: true,
    }
},Vnode)

自定义表单

// 工具库
const {Form,Input,Radio,Button} = JE.useUi();
const {h,createVNode,reactive,ref} = JE.useVue();
const formRef = ref('');
let formState = reactive({
    YSAL_XM: '',
    YSAL_NL:'',
    YSAL_SEX_CODE:'',
    YSAL_SEX_NAME:''
});
const sqlVnodeArr = [{
    name: 'YSAL_XM',
    text: '姓名',
    type:Input,
    required: true,
    requiredText: '该输入项为必填项！',
},{
    name: 'YSAL_NL',
    text: '年龄',
    type:Input,
    required: false,
    requiredText: '',
},{
    name: 'YSAL_SEX_CODE',
    text: '性别',
    required: true,
    type:Radio.Group,
    configInfo:'JE_RBAC_SEX,YSAL_SEX_NAME~YSAL_SEX_CODE,text~code,S',
    requiredText: '该输入项为必填项！',
}];

const labelCol1 = { style: 'width:100px;' };
const Vnode = sqlVnodeArr.map((item)=>{
    return  h(Form.Item, {
        label:item.text,
        name:item.name,
        rules:[{ 
            required: item.required, 
            message: item.requiredText 
        }]},createVNode(item.type,{
            value: formState[item.name],
            allowClear: true,
            configInfo:item?.configInfo,
            'onUpdate:value': function (val) {
                formState[item.name] = val;
           }}
        ))
})
// const VButtonOK = h(Button,{bgColor:"#00B42A",fontColor: "#f9f9f9",type:'primary'},'确定');
// const VButton = h(Button,{bgColor:"#00B42A",fontColor: "#f9f9f9",type:'primary'},'取消');
//定义按钮
const VDiv = h('div',{},[
    h(Button,{
        fontColor: "#f9f9f9",
        type:'primary',
        style:{margin:'0 5px'},
        //注册确定按钮点击事件
        onclick:function(){
            alert(1);
        }
    },'确定'),
    h(Button,{fontColor: "#f9f9f9",type:'danger'},'取消')
])
return h(Form,{
    // ref:formRef,
    layout:'vertical',
    name: 'form',
    size: 'small',
    autocomplete:"off",
    model: formState,
    labelCol: labelCol1,

},[Vnode,VDiv]);

效果图