Merge branch 'mes-henq-tree-20201016' into product

合并

components/page/dataGrid.vue

@@ -143,8 +143,10 @@
 </template>
 
 <script>
+import ColumnSlot from "./treeGrid/columnSolt";
 export default {
   name: "DataGrid",
+  components: { ColumnSlot },
   data() {
     return {
       keys: "",
@@ -155,7 +157,7 @@ export default {
         pageIndex: 1,
         pageSize: 20,
         sortBy: "id",
-        isDesc:true,
+        isDesc: true,
         conditions: [],
       },
       searchConditions: this.search,
@@ -294,15 +296,16 @@ export default {
       default: "",
     },
   },
+  provide() {
+    return {
+      tableRoot: this.slots,
+    };
+  },
   created() {
-    this.columns.forEach((u) => {
-      if (!u.hide) {
-        u.hide = false;
-      }
-    });
-    this.columnsCur = this.$u.clone(this.columns);
+   
   },
   mounted() {
+     this.initColumns();
     if (this.data && this.data.length > 0) {
       this.list = this.data;
       return;
@@ -350,7 +353,41 @@ export default {
     this.getRoutingHeaderData();
     this.getAllUser(); //获取所有用户
   },
+
   methods: {
+    //列初始化 slot 支持;
+    slots() {
+      return this.$scopedSlots;
+    },
+    initColumns() {
+      this.columns.forEach((u) => {
+        if (!u.hide) {
+          u.hide = false;
+        }
+      });
+     
+     var items=this.$u.clone(this.columns);
+     var soct=this.$scopedSlots;
+     console.warn("that.$scopedSlots()",soct["action"]());
+      items.forEach((u) => {
+        if (u.slot) {
+          u.render = (h, params) => {
+            return h(
+              "span",
+              // soct[u.slot]({
+              //   row: params.row,
+              //   column: params.column,
+              //   index: params.index,
+              // })
+              params.row.id
+            );
+          };
+          delete u.slot;
+        }
+      });
+       this.columnsCur = items;
+      console.log("cur", items,this.columnsCur);
+    },
     //数据加载
     load() {
       if (this.action) {

components/page/treeGrid/columnSolt.js

+export default {
+    name: 'ColumnSlot',
+    functional: true,
+    inject: ['tableRoot'],
+    props: {
+        row: Object,
+        index: Number,
+        column: {
+            type: Object,
+            default: null
+        }
+    },
+    render: (h, ctx) => {
+        return h('span', ctx.injections.tableRoot()[ctx.props.column.slot]({
+            row: ctx.props.row,
+            column: ctx.props.column,
+            index: ctx.props.index
+        }));
+    }
+};
\ No newline at end of file

components/treeGrid/slot.js

+export default {
+    name: 'TableSlot',
+    functional: true,
+    inject: ['tableRoot'],
+    props: {
+        row: Object,
+        index: Number,
+        column: {
+            type: Object,
+            default: null
+        }
+    },
+    render: (h, ctx) => {
+        return h('div', ctx.injections.tableRoot.$scopedSlots[ctx.props.column.slot]({
+            row: ctx.props.row,
+            column: ctx.props.column,
+            index: ctx.props.index
+        }));
+    }
+};
\ No newline at end of file

pages/test.vue

@@ -17,13 +17,13 @@
 <template>
   <div class="flex fd test_layout">
     <div>
-      <Menu mode="horizontal" theme="light" active-name="0">
+      <Menu mode="horizontal" theme="light" active-name="a0">
         <div class="layout-assistant">
-          <MenuItem name="0" to="/test/example">基础组件</MenuItem>
-          <MenuItem name="1" to="/test/user">人员选择</MenuItem>
-          <MenuItem name="2" to="/test/com">异步组件</MenuItem>
-          <MenuItem name="4" to="/test/resource">资源选择</MenuItem>
-          <MenuItem name="3" to="/test/view">详情拖拽排版</MenuItem>
+          <MenuItem name="a0" to="/test/example">基础组件</MenuItem>
+          <MenuItem name="a1" to="/test/user">人员选择</MenuItem>
+          <MenuItem name="a2" to="/test/com">异步组件</MenuItem>
+          <MenuItem name="a4" to="/test/resource">资源选择</MenuItem>
+          <MenuItem name="a3" to="/test/view">详情拖拽排版</MenuItem>
         </div>
       </Menu>
     </div>

pages/test/api.js

@@ -13,10 +13,16 @@ export const exampleRouter = [
     },
     {
       route: '/test/example/table',
-      title: 'treeGrid组件',
+      title: '表格',
       name: 'components-table',
       icon: 'md-aperture'
     },
+    {
+      route: '/test/example/tree',
+      title: '树',
+      name: 'tree',
+      icon: 'md-aperture'
+    },
     {
       route: '/test/example/select',
       title: 'select组件',

pages/test/example/table/index.vue

@@ -21,6 +21,9 @@
           </FormItem>
         </Form>
       </template>
+      <template slot-scope="{row,column,index}" slot="action">
+            <strong>aaaa</strong>
+        </template>
     </DataGrid>
   </div>
 </template>
@@ -62,6 +65,7 @@ export default {
                     easy: true,
                       sortable:true,
                     high: true,
+                    slot:"cardNo",
                     tooltip: true,
                 },
                ],

pages/test/example/tree/index.vue

+<template>
+  <div class="tree">
+    <TreeGrid :columns="columns" :items="treeData">
+        <template slot-scope="{row,column,index}" slot="name">
+           <Icon type="md-folder" /> {{row.name}}
+        </template>
+        <template slot-scope="{row,column,index}" slot="action">
+            <strong>{{row.action}}</strong>
+        </template>
+    </TreeGrid>
+    <!-- <Input v-model="data" type="textarea" rows="20" placeholder=""></Input> -->
+  </div>
+</template>
+
+<script>
+import Mock from "mockjs";
+export default {
+  name: "",
+  data() {
+    return {
+      columns: [
+         {
+          type: "selection",
+          width:50,
+          align:"center"
+        },
+        {
+          key: "name",
+          title: "名称",
+           tree:true,
+             slot:"name"
+        },
+        {
+          key: "status",
+          title: "状态",
+          width: "100"
+        },
+        {
+          key: "action",
+          title: "操作",
+          width: "100",
+          sortable:true,
+          slot:"action"
+        },
+      ],
+      treeData1: [],
+      treeData: [
+        {
+          action: "510000202006085435",
+          name: "书加部保处",
+          status: 0,
+          children: [
+            { action: "430000200008054924", name: "越组大过越", status: 0 },
+            { action: "350000200106195747", name: "反走和报山", status: 1 },
+            { action: "46000019920810827X", name: "强级法量少务持", status: 1 },
+            { action: "620000198005286979", name: "况题米", status: 1 },
+            { action: "440000200901093872", name: "又多为", status: 0 },
+          ],
+        },
+        { action: "510000199304272074", name: "参什叫", status: 1 },
+        { action: "710000199110144186", name: "情克应个该农", status: 1 },
+        { action: "140000201204175550", name: "阶研其交式", status: 1 },
+        { action: "500000198710051748", name: "议开你集", status: 1 },
+      ],
+      data: "",
+    };
+  },
+  mounted() {
+    // this.init();
+  
+  },
+  methods: {
+    init() {
+      var data = Mock.mock({
+        "data|5": [
+          {
+            action: "@id",
+            name: "@ctitle",
+            "status|1": [0, 1],
+          },
+        ],
+      });
+      console.warn(data);
+      this.data = JSON.stringify(data.data);
+      this.treeData = data.data;
+    },
+  },
+};
+</script>
+
+<style lang="less" >
+</style>
\ No newline at end of file