DevNet

Appearance

下拉选择 ​

下拉选择

基本用法 ​

<template>
    <dn-page>     
      <dn-form ref="formRef" v-bind="formOptions">
        <template #fn4_header="scope">
          <div style="display: flex;flex-direction: row;align-items: center">
            <dn-icon icon="search"></dn-icon>
            <span style="margin-left:10px;">自定义顶部槽位</span>
          </div>
        </template>
      </dn-form>      
    </dn-page>   
  </template>
  
<script lang="jsx">
import {ref,defineComponent} from "vue";
import { useForm } from "@sdevnet/devnet-form";

const formRef = ref();
const formOptions = ref();
const selectData = [
                    { text:'下拉框1', id:'1',name:'abc'},
                    { text:'下拉框2', id:'2'},
                    {text:'禁止选择',id:'3',disabled:1}];
                    
const selectTreeData=[
  {text:'下拉框1',id:'1',
    children:[
      {text:'下拉框1_1',id:'1_1',
         children:[
          { text:'下拉框1_1_1',id:'1_1_1', } ]}]},

  {text:'下拉框2',id:'2',
    children:[{text:'下拉框2_1', id:'2_1',
      children:[ { text:'下拉框2_1_1', id:'2_1_1', }] }]
  }     
]                    

function createFormOptions() {
  const { buildFormOptions } = useForm();
  return buildFormOptions({
    columns: {
      fn1:{
        title: "下拉框",
        type: "select",
        form: {          
          col:{span:24},
          props:{
            valueMember:'id',
            textMember:'text', 
            options:selectData,
            events:{
              change:(scope)=>{
                console.log(scope);
              }
            }                
          }            
        }
      },
      fn2:  {
        title: "多选下拉框",
        type: "select",
        form: {
          col:{span:24},
          component:{
            multiple:true,
          },
          props:{
            valueMember:'id',
            textMember:'text',           
            options:selectData,
            events:{
              onChange:(scope)=>{
                console.log('changed',scope);
              }
            }        
          }                   
        }
      },
      fn3:{
        title: "树选择",
        type: "treeselect",
        form: {
          col:{span:24},
          component:{ 
            // multiple : true,
            // 'show-checkbox':true
          },
          props:{      
            expandLevel:2, 
            valueMember:'id',
            textMember:'text',   
            options:selectTreeData,
            events:{           
              onChange:(scope)=>{
                  console.log('out',scope);
              }
            }  
          }        
        }
      },
      fn4:{
        title: "下拉顶部槽位",
        type: "select",
        form: {          
          col:{span:24},
          props:{
            valueMember:'id',
            textMember:'text', 
            options:selectData,
            events:{
              change:(scope)=>{
                console.log(scope);
              }
            }                
          }            
        }
      },
    }
  });
}

function initFormOptions() { 
  formOptions.value = createFormOptions();
  //fn2 vaue值类型需要和options的value一致
  formOptions.value.initData = { fid:1,fn2:'2' };

  return {
    formOptions,   
    formRef
  };
}

export default defineComponent({
  setup() {
    return {
      ...initFormOptions()
    };
  }
});
</script>

表格、弹框选择 ​

<template>
    <dn-page>     
      <dn-form ref="formRef" v-bind="formOptions">       
      </dn-form>      
    </dn-page>   
  </template>
  
<script lang="jsx">
import {ref,defineComponent} from "vue";
import { dn, useForm } from "@sdevnet/devnet-form";
import * as _ from "lodash-es";

const formRef = ref();
const formOptions = ref();

let data=[];
for(var i=0;i<35;i++){
    data.push({
        fid:(i+1),
        name:'NameNameNameNae'+i,
        regcap:i + 35.67893,
        regdate:'2024-08-24 13:20:30',
        isadmin: i % 2==0 ?1:0,
        remark:'备注'+i,
        state: i % 2==0 ?'0':"1"
    })
}   
const selectTreeData=[
  {text:'下拉框1',id:'1',
    children:[
      {text:'下拉框1_1',id:'1_1',
         children:[
          { text:'下拉框1_1_1',id:'1_1_1', } ]}]},

  {text:'下拉框2',id:'2',
    children:[{text:'下拉框2_1', id:'2_1',
      children:[ { text:'下拉框2_1_1', id:'2_1_1', }] }]
  }     
]  
let dictData=[
    {id:"1",text:'打开',type:'primary'},
    {id:"0",text:'关闭',type:'danger'}
];   

let selectProps = {
    dialog:{     
        teleport:'#dn-dialog-provider-vitepress'
    }, 
    tree:{
      props:{
        search:{
          searchTreeMember:'id',
            sqlCompare:'=',               
            searchRefMember:'name',
            excludeValue:'1'
        },    
        valueMember:'id',   
        textMember:'text',     
        expandLevel:2,                 
        data:selectTreeData       
      }
    },
    table:{
      table:{  
        columns:{                      
          name: {
            title: "姓名",
            type: "text",
            form:{                
              component:{
                placeholder:'输入姓名'
              },
              props:{                     
                search:{                                           
                  isSearch:true
                }
              }
            }                     
          },
          regcap:{
            title:'数字',
            type:'number',
            component:{
              precision:4,
            },
            props:{
              thousands:','
            }         
          },
          state:{
            title:'状态',                 
            type:'checkboxlist', 
            component:{
              align:'center',
            } ,              
            props:{              
              valueMember:'id',
              textMember:'text',
              request:{
                getDataRequest:(query)=>{
                  return {data:dictData}
                }
              }    
            },
          },
          regdate:{
              title:'日期',
              type:'datetime',              
          }
        }                                          
      },  
      search:{
        container:{                
          col:{span:8}
        },
      },           
      request:{
        getDataRequest:(query)=>{
          console.log(query);      
          dn.message.success('后端查询');
          let sort= query.sort;
          let sortName='fid';
          let order='asc';
          if(sort && sort.length>0){                    
              sortName=sort[0]['sortname'] ?? 'fid';
              order = sort[0]['sortorder'] ?? 'asc';
          }
          data.sort((a,b)=>{
            if(a[sortName]<b[sortName]){
              return order==='asc'? -1 : 1;
            }
            if(a[sortName]>b[sortName]){
              return order==='asc'? 1 : -1;
            }
            return 0;
          });
          
          var ret={data:[]};
          for(var i=((query.pageIndex-1) * query.pageSize);
                i<((query.pageIndex) * query.pageSize);
                i++){
              if(i<data.length){
                ret.data.push(data[i]);
              }
          }
          var pcount= parseInt(data.length / query.pageSize);
          if((data.length % query.pageSize) !== 0){
            pcount++;
          }
          ret.pageindex=query.pageIndex;
          ret.pagesize=query.pageSize;
          ret.rowcount=data.length;
          ret.pagecount=pcount;                 
          return ret;
        }
      },    
    }
  };            

function createFormOptions() {
  const { buildFormOptions } = useForm();
  return buildFormOptions({
    columns: {
      fn1:{
        title: "表格单选",
        type: "tableselect",
        form: { 
          col:{span:24},
          props:{              
           valueMember:'fid',
           textMember:'name',

           dataBind:{
              getTextByValues:async (values)=>{  
                //一般根据values从接口获取                             
                let ret=[];
                _.forEach(values,(val)=>{
                  _.forEach(data,(item)=>{
                    if(`${item.fid}`==`${val}`){
                      ret.push(item);
                      return false;
                    }
                  })
                })
                return ret;
              }
            },        
           ...selectProps,
           ...{
            tree:null
           }
          }  
        },
      },  
      fn2:  {
        title: "表格多选",
        type: "tableselect",
        form: {
          col:{span:24},
          component:{      
            multiple:true,
          },
          props:{
           valueMember:'fid',
           textMember:'name',
           dataBind:{
              getTextByValues:async (values)=>{ 
                let ret=[];
                _.forEach(values,(val)=>{
                  _.forEach(data,(item)=>{
                    if(item.fid==val){
                      ret.push(item);
                      return false;
                    }
                  })
                })
                return ret;
              }
            },    
           ..._.merge({},
                selectProps,{
                table:{
                  table:{
                    props:{
                      rememberChecked:true
                    }
                  }
                }
              })
          }  
        },
      }, 
    }
  });
}

function initFormOptions() { 
  formOptions.value = createFormOptions();
  formOptions.value.initData = { fid:1};

  return {
    formOptions,   
    formRef
  };
}

export default defineComponent({
  setup() {
    return {
      ...initFormOptions()
    };
  }
});
</script>

select API ​

PropsNameDescriptionTypeDefault
key字段名称子组件column配置json
└ title标题string
└ typeselect
cascader
treeselect
tableselect		string
└ form表单栏位配置json
└└ rules验证规则，参考原生el配置array
└└ colel-col配置，参考原生组件json
└└ component原生组件属性json
└└└ multiple是否多选booleanfalse
└└└ filterable开启默认搜索booleanfalse
└└└ key参考原生el组件
└└ props组件属性json
└└└ valueMember选项的值字段string
└└└ textMember选项的文本字段string
└└└ expandLevel树选择时默认展开的层级number
└└└ options选项数组array
└└└└ json选项json
└└└ dataBind数据绑定json
└└└└ getTextByValues根据valus获取text文本
└└└ dialog弹框选择时的弹框配置，参考dialogjson
└└└└ teleport弹框挂载元素，一般为根节点#dn-dialog-provider-poppercontainer
└└└ selectDialogComponentName自定义弹框组件名称string
└└└ tree弹框选择时的tree配置，参考treejson
└└└ table弹框选择时的table配置，参考tablejson
└└└ events组件事件json
└└└└ onChange值change触发
└└└ slots槽位json
└└└└ optionRender选项自定义展示
└└└└ key组件槽位，参考原生槽位
└└ tooltip输入提示内容string
└└ order排序number
└└ show是否显示boolean
└└ blank是否空占位boolean
└└ prefixRender组件左边render
└└ suffixRender组件右边render

select Slots ​

NameDescription
key_[原生组件槽位名称]原生槽位

select Exposes ​

NameDescription
ctlRef原生组件引用