DevNet

Appearance

操作按钮列 表格 ​

操作按钮列表格

基本用法 ​

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

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

let data=[];
for(var i=0;i<8;i++){
    let row = {
        fid:(i+1),
        name:'姓名_'+i,
        regcap:i + 35.67893,
        regdate:new Date(),
        isadmin: i % 2==0 ?1:0,
        remark:'备注'+i,
        state: i % 2==0 ?'0':"1",
    };   
    data.push(row)
}
let selectData=[];
for(var i=0;i<10;i++){
  selectData.push({
    value:(i+1),
    text:'Name'+i
  })
}

let dictData=[
  {id:"1",text:'打开',type:'primary'},
  {id:"0",text:'关闭',type:'danger'}
];

function createFormOptions() {  
  const { buildFormOptions } = useForm();
  return buildFormOptions({
    columns: {
        childHandleTable: {
        title: "",
        type: "table",
        form: {
          col:{span:24}, 
          props:{          
            table:{            
              component:{
                rowKey:'fid',
                height:'auto'
              },
              props:{
                headerAlign:'center',
                showNumber:true,
                showCheckbox:true,
                enabledFilter:true,
                enabledSort:true,
                enabledEdit:true
              }, 
              columns:{                             
                name: {
                  title: "可点击Link列",
                  type: "linkcol", //表格列专用                
                  props:{
                    filterData:selectData,
                    filterType:'multiple',
                    //返回列type，success,warning,danger,info,primary
                    linkType:(scope)=>{
                      if(scope.form.fid %3==0){
                        return 'warning';
                      }
                      return 'primary'
                    },
                    events:{
                        onClick:(e)=>{
                            dn.message.success(e.scope.form.name);
                        }
                    }
                  },
                  form:{
                    type:'text', //表单编辑时的组件
                    col:{span:24}
                  }    
                },                  
                state:{
                    title:'状态',                 
                    type:'checkboxlist',                   
                    props:{
                        valueMember:'id',
                        textMember:'text',
                        filterData:dictData,
                        align:'center',
                        request:{
                          getDataRequest:(query)=>{
                            return {data:dictData}
                          }
                        },
                    },
                    form:{
                        col:{span:24}
                    }
                }              
              },
              rowButtons:{
                show:true,
                dropdown:{
                    index:3       
                },                               
                buttons:{     
                  view:{
                    show:true
                  },     
                  edit:{
                    show:true
                  },
                  delete:{
                    show:true
                  },
                  customer:{
                    text:'自定义',
                    link:true,
                    type:'primary',
                    onClick:async(e)=>{
                      dn.notification.success(JSON.stringify(e.row));
                      return false;
                    },
                    disabled:(e)=>{
                      if(e.row?.state==='0'){
                       return false;
                      }
                      return true;
                    },
                    show:(e)=>{
                      if(e.row?.state==='0'){
                        return true;
                      }
                      return false;
                    }
                  }
                }
              },
              data:[]            
            },               
            request:{
              getDataRequest:(query)=>{  
                  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;     
                  dn.message.success('模拟数据哦');
                  return ret;
                }                      
            },
            form:{                           
              beforeSubmit(scope){
                console.log('beforesubmit',scope);
              },
              async submit(context){
                //这里覆盖了框架保存，需要自己保存                 
                let mode =formRef.value.children.childHandleTable.formBinding.mode?.name;                               
                dn.notification.info("submit表单提交:" + JSON.stringify(context.form));
                if (context.mode === "edit") {                
                  if (mode === "local") {              
                    formRef.value.children.childHandleTable.updateRow(context.index, context.form);
                  } else {      
                    //这里回发后台请求,返回保存后的数据或包含主键ID的json               
                    return {fid:context.form.fid};
                  }
                } else if (context.mode === "add") {                 
                  if (mode === "local") {                   
                    formRef.value.children.childHandleTable.insertRow(0, context.form);
                  } else {
                    //这里回发后台请求,返回保存后的数据或包含主键ID的json               
                    return {fid:999};
                  }
                }
              },
              afterSubmit(scope){
                console.log('aftersubmit:',scope);
              }
            }       
          }       
        }
      }
    }
  });
}

function initFormOptions() { 
  formOptions.value = createFormOptions();
  formOptions.value.initData = { fid:1,childHandleTable:[]};
  
  return {
    formOptions,   
    formRef
  };
}

export default defineComponent({
  setup(props,ctx) {  
    onMounted(()=>{
      formRef.value.children.childHandleTable.refresh();       
    });
   
     return {
      ...initFormOptions()
     }
  }
});
</script>

table API ​

参考 表格api

操作按钮列 API ​

PropsNameDescriptionTypeDefault
...key上级key，见tableapijson
└ table表格配置string
└└ columns按钮列配置json
└└└ keyjson
└└└└ type列类型 'linkcol' 为表格列专用string
└└└└ props属性配置json
└└└└└ linkType类型success,warning,danger,info,primarystring
└└ rowButtons按钮列配置json
└└└ show是否显示boolean
└└└ dropdown下拉按钮json
└└└└ position下拉按钮索引位置,从该位置往后的按钮都作为下拉按钮number
└└└ buttons按钮,默认：查看，修改，删除json
└└└└ view查看按钮json
└└└└└ show显示查看按钮,函数返回是否显示boolean
false
└└└└└ disabled显示查看按钮,函数返回是否禁用boolean
false
└└└└ edit编辑按钮json
└└└└└ show显示编辑按钮,函数返回是否显示boolean
false
└└└└└ disabled显示编辑按钮,函数返回是否禁用boolean
false
└└└└ delete删除按钮json
└└└└└ show显示删除按钮,函数返回是否显示boolean
false
└└└└└ show显示删除按钮,函数返回是否禁用boolean
false
└└└└ buttonkey其他自定义按钮json
└└└└└ click点击Click
└└└└└ key参考buttonjson