修改公共配置

src/benyun/components/byDatePicker/byDatePicker.vue

@@ -33,21 +33,10 @@
  */
 import { Component, Prop, Vue, Watch } from "vue-property-decorator";
 import Format from '@/benyun/utils/dateFormat'
+import VueViews from '@/benyun/utils/VueViews'
 
 @Component
-export default class ByDatePicker extends Vue {
-  config:any={};
-  value:any='';
-
-  @Prop()
-  propConfig: any
-
-  @Prop()
-  propValue:any
-
-  get attrs(){
-    return this.config?.attr ? this.config.attr : {};
-  }
+export default class ByDatePicker extends VueViews {
 
   created(){
     if(this.propConfig){
@@ -61,15 +50,6 @@ export default class ByDatePicker extends Vue {
     
   }
 
-  setConfig(c:any){
-    if(c){
-      this.config = c;
-    }
-  }
-  getConfig(){
-    return (this as any).$lodash.cloneDeep(this.config)
-  }
-
   setValue(data:any){
     if(data){
       this.value = (this as any).$lodash.cloneDeep(data);
@@ -101,7 +81,9 @@ export default class ByDatePicker extends Vue {
     }else if(this.attrs.type == 'month'){
       type = 'yyyy-MM'
     }
-    type = this.attrs.format;
+    if(this.attrs.format){
+      type = this.attrs.format;
+    }
     return Format(this.value,type)
   }
 

src/benyun/components/byForm/byForm.vue

@@ -69,20 +69,11 @@
   }
  */
 import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+import VueViews from '@/benyun/utils/VueViews'
 @Component
-export default class ByForm extends Vue {
-  config:any={};
-  value:any={};
-
-  @Prop()
-  propConfig: any
-
-  get attrs(){
-    return this.config?.attr ? this.config.attr : {};
-  }
-  get requestConfig(){
-    return this.config?.request ? this.config.request : null
-  }
+export default class ByForm extends VueViews {
+  value:any={}
+  
   get columns(){
     let columns:Array<any> = this.config?.columns ? this.config.columns : []
       //分栏设置
@@ -117,18 +108,6 @@ export default class ByForm extends Vue {
   }
   mounted(){}
 
-  //设置表单配置
-  setConfig(c:any){
-    if(c){
-      this.config = c;
-    }
-  }
-
-  //获取表单配置
-  getConfig(){
-    return (this as any).$lodash.cloneDeep(this.config)
-  }
-
   //设置数据
   setValue(data:any){
     this.clearChildrenComp();

src/benyun/components/byInput/byInput.vue

@@ -20,20 +20,11 @@
 
 <script lang="ts">
 import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+import VueViews from '@/benyun/utils/VueViews'
 @Component
-export default class ByInput extends Vue {
-  config:any={};
+export default class ByInput extends VueViews {
   value:any='';
 
-  @Prop()
-  propConfig: any
-
-  @Prop()
-  propValue:any
-
-  get attrs(){
-    return this.config?.attr ? this.config.attr : {};
-  }
 
   created(){
     if(this.propConfig){
@@ -47,15 +38,6 @@ export default class ByInput extends Vue {
     
   }
 
-  setConfig(c:any){
-    if(c){
-      this.config = c;
-    }
-  }
-  getConfig(){
-    return (this as any).$lodash.cloneDeep(this.config)
-  }
-
   setValue(data:any){
     if(data){
       this.value = (this as any).$lodash.cloneDeep(data);

src/benyun/components/bySelect/bySelect.vue

@@ -34,25 +34,11 @@
   }
 */
 import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+import VueViews from '@/benyun/utils/VueViews'
 @Component
-export default class BySelect extends Vue {
-  config:any={};
+export default class BySelect extends VueViews {
   value:any='';
   options:Array<any>=[]
-   
-  @Prop()
-  propConfig: any
-
-  @Prop()
-  propValue:any
-
-  get attrs(){
-    return this.config?.attr ? this.config.attr : {};
-  }
-
-  get requestConfig(){
-    return this.config?.request ? this.config.request : null;
-  }
 
   get itemLabel(){
     let n = 'label';
@@ -89,15 +75,6 @@ export default class BySelect extends Vue {
     })
   }
 
-  setConfig(c:any){
-    if(c){
-      this.config = c;
-    }
-  }
-  getConfig(){
-    return (this as any).$lodash.cloneDeep(this.config)
-  }
-
   setValue(data:any){
     if(data){
       this.value = (this as any).$lodash.cloneDeep(data);
@@ -123,15 +100,19 @@ export default class BySelect extends Vue {
     this.value = ''
   }
 
+  //请求url
   request(){
     if(!this.requestConfig || !this.requestConfig.url){
       return
     }
-    (this as any).$request(this.requestConfig).then((res:any) => {
+    let parame = (this as any).$lodash.cloneDeep(this.requestConfig);
+    parame.success = (res:any) => {
       if(res.data){
         this.setOptions(res.data);
       }
-    })
+    }
+    parame.fail = (err:any) => {}
+    this.requestHandle(parame);
   }
 }
 </script>

src/benyun/components/byTable/byTable.vue

@@ -10,12 +10,13 @@
     :stripe="attrs.stripe"
     :border="attrs.border"
     :align="attrs.align"
+    :tree-config="{transform: attrs.transform, rowField: attrs.rowField, parentField: attrs.parentField}"
     :row-config="{isHover: true}"
     style="width: 100%">
 
     <vxe-column v-if="attrs.checkbox" type="checkbox" width="50" fixed="left" />
     <vxe-column v-if="attrs.radio" type="radio" width="50" fixed="left" />
-    <vxe-column v-if="attrs.seq" type="seq" title="序号" width="50" fixed="left" />
+    <vxe-column v-if="attrs.seq" type="seq" title="序号" :width="attrs.seqWidth?attrs.seqWidth:50" fixed="left" :tree-node="attrs.treeNodeSeq" />
     <template v-for="(item,index) in columns">
       <vxe-column
         v-if="item.action"
@@ -30,6 +31,7 @@
               v-for="(pluginsItem,_index) of item.plugins" 
               :key="'plu'+_index" 
               @click="pluginClick(pluginsItem,row)">
+              <i v-if="pluginsItem.icon" :class="pluginsItem.icon" ></i>
               {{ pluginsItem.name }}
             </span>
           </template>
@@ -43,6 +45,7 @@
         :width="item.width"
         :fixed="item.fixed"
         :align="item.align"
+        :tree-node="item.treeNode"
       >
       <template #default="{ row }">
         <slot v-if="item.slot" :name='item.field' :row='row'></slot>
@@ -64,9 +67,14 @@
       stripe: true/false  //是否为斑马纹
       border: true/false  //是否带有纵向边框
       seq:true/false  //显示序号
+      seqWidth:''  //序号宽度
       checkbox: true/false  //显示复选框
       radio:true/false  //显示单选框
       align: left/center/right  //对齐方式
+      transform: true/false  //开启自动将列表转成树结构
+      rowField:''  row对应id
+      parentField:''  row父id
+      
     },
     columns:[{
       title:''  //标题
@@ -75,32 +83,23 @@
       fixed: true, left, right  // 固定列
       action： true/false 是否操作列
       plugins:操作列执行
+      tree-node: true/false  //展开节点
     }],
     request:{}
   }
 
  */
 import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+import VueViews from '@/benyun/utils/VueViews'
+
 @Component
-export default class ByTable extends Vue {
+export default class ByTable extends VueViews {
   value:Array<any>=[];
-  config:any={}
-
-  get requestConfig(){
-    return this.config?.request ? this.config.request : null;
-  }
-
-  get attrs(){
-    return  this.config?.attr ? this.config.attr : {};
-  }
 
   get columns(){
     return this.config?.columns ? this.config.columns : [];
   }
 
-  @Prop()
-  propConfig: any
-
   created(){
     if(this.propConfig){
       this.setConfig(this.propConfig)
@@ -151,34 +150,27 @@ export default class ByTable extends Vue {
     return d;
   }
 
-  //设置表单配置
-  setConfig(c:any){
-    if(c){
-      this.config = c;
-    }
-  }
-
-  //获取表单配置
-  getConfig(){
-    return (this as any).$lodash.cloneDeep(this.config)
-  }
 
   request(){
     if(!this.requestConfig || !this.requestConfig.url){
       return
     }
-    (this as any).$request(this.requestConfig).then((res:any) => {
+
+    let parame = (this as any).$lodash.cloneDeep(this.requestConfig);
+    parame.success = (res:any) => {
       if(res.data){
         this.setValue(res.data);
       }
-    })
+    }
+    parame.fail = (err:any) => {}
+    this.requestHandle(parame);
   }
 }
 </script>
 
 <style lang="scss" scoped>
 .col-action{
-  color: blue;
+  color: #0089ff;
   cursor: pointer;
   padding: 0 4px;
 }

src/benyun/utils/VueViews.ts

@@ -0,0 +1,51 @@
+import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
+import lodash from 'lodash' //导入深度拷贝
+import { MessageBox, Message } from 'element-ui'
+
+export default class VueViews extends Vue{
+  value:any=null;
+  config:any={}
+
+  get requestConfig(){
+    return this.config?.request ? this.config.request : null;
+  }
+
+  get attrs(){
+    return  this.config?.attr ? this.config.attr : {};
+  }
+
+  @Prop()
+  propConfig: any
+
+  @Prop()
+  propValue:any
+
+  //设置配置
+  setConfig(c:any){
+    if(c){
+      this.config = c;
+    }
+    this.setConfigAfter()
+  }
+
+  //获取配置
+  getConfig(){
+    return (this as any).$lodash.cloneDeep(this.config)
+  }
+
+  setConfigAfter(){}
+
+  requestHandle(requestParames:any){
+    if(requestParames && requestParames.url){
+      (this as any).$request(requestParames).then((res:any) => {
+        if(requestParames.success){
+          requestParames.success(res.data)
+        }
+      }).catch((err:any) => {
+        if(requestParames.fail){
+          requestParames.fail(err);
+        }
+      })
+    }
+  }
+}

src/main.ts

@@ -4,6 +4,7 @@ import './registerServiceWorker'
 import router from './router'
 import store from './store/index'
 import request from '@/benyun/utils/request'
+import {download} from '@/benyun/utils/request'
 import Cookies from 'js-cookie'
 import lodash from 'lodash'
 import plugins from '@/benyun/plugins'
@@ -41,6 +42,7 @@ Vue.config.productionTip = false
 // 全局方法挂载
 Vue.prototype.$request = request;
 Vue.prototype.$lodash = lodash;
+Vue.prototype.$download = download; //下载
 
 new Vue({
   router,

src/views/demo/table.vue

@@ -5,6 +5,8 @@
     </by-table>
     <el-button type="primary" @click="setData">设置数据</el-button>
     <el-button type="primary" @click="getSelect">获取选中数据</el-button>
+    <div>树型表格</div>
+    <by-table :propConfig="treeConfig" ref="treeTable"></by-table>
   </div>
 </template>
 
@@ -15,7 +17,7 @@ export default class DemoTable extends Vue {
   config:any={
     attr:{
       size:'mini',
-      height:500,
+      height:240,
       seq:true,
       align:'center',
       checkbox:true
@@ -43,6 +45,7 @@ export default class DemoTable extends Vue {
       title:'操作',
       action:true,
       plugins:[{
+        icon:'el-icon-edit',
         name:'编辑',
         event:{
           click:(item:any) => {
@@ -75,11 +78,38 @@ export default class DemoTable extends Vue {
     time:'2023-04-09'
   }]
 
+
+  treeConfig:any={
+    attr:{
+      size:'mini',
+      height:400,
+      seq:true,
+      treeNodeSeq:true,
+      seqWidth:140,
+      align:'center',
+      transform:true,
+      rowField:'menuId',
+      parentField:'parentId'
+    },
+    columns:[{
+      treeNode:true,
+      title:'menuId',
+      field:'menuId',
+      width:150
+    },
+    {
+      title:'标题',
+      field:'menuName',
+      width:200
+    }]
+  }
+  treeData:Array<any>=[]
+
   mounted(){
     setTimeout(()=>{
       (this as any).$refs.table.setValue(this.data);
     },500)
-    
+    this.request();
   }
   fun(){
     console.log('操作00000000')
@@ -91,6 +121,15 @@ export default class DemoTable extends Vue {
     let data:Array<any>=(this as any).$refs.table.getSelectData();
     console.log('选中数据为：',data);
   }
+  request(){
+    (this as any).$request({
+      url: '/system/menu/list',
+      method: 'get'
+    }).then((res:any) => {
+      this.treeData = res.data;
+      (this as any).$refs.treeTable.setValue(this.treeData);
+    })
+  }
 }
 </script>
 <style lang="scss" scoped>