项目集成

DevNet-form 是基于 element-plus & Vue3 面向配置的前端组件库，可快速集成到你的项目

• Admin-UI devnet-form , 示例丰富，功能强大

• 项目目录建立 plugin 目录，如图所示

plugin 目录

• plugin\devnet\index.ts 为框架初始化配置选项

  import { dn,DevNet } from "@sdevnet/devnet-form"
  import UiElement from "@sdevnet/ui-element";
  import * as _ from "lodash-es";
  //自定义组件
  import CustComponents from "../CustComponents";
  
  function install(app, options: any = {}) {
    console.log('devnet-form install...');
    app.use(UiElement);
    app.use(DevNet, {
      i18n: options.i18n,
      //自定义组件
      customComponents:CustComponents,
      dataBindOptions:{},
      uploadOptions:{
        defaultType:"form", //表单
        form: {
          keepName: true,
          uploadUrl: "",          
          downLoadUrl:'',
          name: "file",
          withCredentials: false,         
          uploadRequest: async ({ uploadUrl, file, onProgress,data }) => {            
            return"/upload/logo.jpg";           
          },
          uploadSuccess(ret) {
            return {
              url: ret,
              key: ret
            };
          }
        }
      },
      formOptions(props:any): any {
        const opts = {
          table: {
            component:{
              size: "default",
              'highlight-current-row':true,
              rowKey:'fid'
            },      
            props:{
              events:{
                onStoreColumns:(storeOptions)=>{
                  console.log(storeOptions);
                }
              },
              conditionalRender: {
                match(scope) {  
                  const { value, key } = scope;
                  return !value && key != "_index" && value != false;
                },
                render(scope: any) {
                  return "";
                }
              },           
            }, 
            pagination: {enabled:true}, 
            rowButtons: {
              show:false
            }
          },
          request: {
            parseQuery: (pagerQuery:any) => {
              //转换查询条件逻辑
              /* pagerQuery:{
                    pager,where, tableColumnFilterValue,
                    treeFilterValue attachFilterValue,sortStr
                  }*/
              const pageSize = pagerQuery.pager?.pageSize || 15;
              const pageIndex = pagerQuery.pager?.pageIndex || 1;        
              let sorts = pagerQuery.sortStr?.split(',');    
              let sortret = '';
              let queryret = '';
              return {                
                pageSize:pageSize,
                pageIndex:pageIndex,                
                query: queryret,   
                sort:sortret     
              };
            },            
            parseResult: ({ res }) => {
              //返回结果转换
              const pageSize = res.pagesize;
              let pageIndex = res.pageindex;              
              return { 
                       pageIndex, pageSize, data: res.data,
                       rowCount: res.rowcount, ...res 
                     };
            }
          },
          search: {
            component:{
               labelWidth: "auto"
            },
            container:{
              col: {
                span: 6
              }                        
            }                       
          },                              
          form: {
            row: {
              gutter: 20
            },
            rowKey:'fid',
            display: "flex", 
            labelWidth: "120px",
            'labelPosition':'top',
            'require-asterisk-position':'right',
            'scroll-to-error':true,
            'inline-message':true,
            'show-message':true,
            'scroll-into-view-options':{
                block:'center',
                behavior:'smooth'
            },
            childForm: {
              checkFormState: true,              
              props:{               
                toolbarPosition:'footer',
                'destroy-on-close':true
              }
            },            
            async validateError(e:any,formScope:any){
              let msg='验证失败';
              _.forEach(e, (item, key) => {
                if(item && item.length>0){                                   
                  msg=item[0].message;                
                  return false;
                }
              });   
              dn.notification.error({ message: msg });
              return false;           
            }
          },
          mode:{
            name:'local'  //local server
          }         
        };
        return opts;
      },      
      installFinish(){
        console.log(`devnet-form install finish ... `);  
      }
    });
  }
  
  export default {
    install
  };

• plugin\CustComponents.ts 自定义组件导入、导出，框架会自动注册

import custform from "../../component/comptype/custform.vue";
import custctl from "../../component/comptype/custctl.vue";

export default {
    'cust-form':custform,
    'cust-ctl':custctl
}

• plugin\index.ts 如下

import DevNet from "./devnet";

function install(app, options: any = {}) {
    app.use(DevNet,options);
}

export default {
    install
}

main.ts 导入

// main.ts
import ElementPlus from "element-plus";
import plugin from "./plugin";

//引入样式
import "@sdevnet/devnet-form/dist/style.css";
import "@sdevnet/devnet-form/dist/css/el/style.css";

app.use(ElementPlus);
app.use(plugin);

app.mount('#app')