清表模板

src/router/views/index.js

@@ -1,134 +1,147 @@
 import Layout from '@/page/index/'
 
 export default [{
-  path: '/wel',
-  component: Layout,
-  redirect: '/wel/index',
-  children: [{
-    path: 'index',
-    name: '首页',
-    meta: {
-      i18n: 'dashboard'
+        path: '/wel',
+        component: Layout,
+        redirect: '/wel/index',
+        children: [{
+            path: 'index',
+            name: '首页',
+            meta: {
+                i18n: 'dashboard'
+            },
+            component: () =>
+                import ( /* webpackChunkName: "views" */ '@/views/wel/index')
+        }, {
+            path: 'dashboard',
+            name: '控制台',
+            meta: {
+                i18n: 'dashboard',
+                menu: false,
+            },
+            component: () =>
+                import ( /* webpackChunkName: "views" */ '@/views/wel/dashboard')
+        }]
+    }, {
+        path: '/test',
+        component: Layout,
+        redirect: '/test/index',
+        children: [{
+            path: 'index',
+            name: '测试页',
+            meta: {
+                i18n: 'test'
+            },
+            component: () =>
+                import ( /* webpackChunkName: "views" */ '@/views/util/test')
+        }]
+    }, {
+        path: '/dict-horizontal',
+        component: Layout,
+        redirect: '/dict-horizontal/index',
+        children: [{
+            path: 'index',
+            name: '字典管理',
+            meta: {
+                i18n: 'dict'
+            },
+            component: () =>
+                import ( /* webpackChunkName: "views" */ '@/views/util/demo/dict-horizontal')
+        }]
+    }, {
+        path: '/dict-vertical',
+        component: Layout,
+        redirect: '/dict-vertical/index',
+        children: [{
+            path: 'index',
+            name: '字典管理',
+            meta: {
+                i18n: 'dict'
+            },
+            component: () =>
+                import ( /* webpackChunkName: "views" */ '@/views/util/demo/dict-vertical')
+        }]
+    }, {
+        path: '/info',
+        component: Layout,
+        redirect: '/info/index',
+        children: [{
+            path: 'index',
+            name: '个人信息',
+            meta: {
+                i18n: 'info'
+            },
+            component: () =>
+                import ( /* webpackChunkName: "views" */ '@/views/system/userinfo')
+        }]
+    }, {
+        path: '/work/process/leave',
+        component: Layout,
+        redirect: '/work/process/leave/form',
+        children: [{
+            path: 'form/:processDefinitionId',
+            name: '请假流程',
+            meta: {
+                i18n: 'work'
+            },
+            component: () =>
+                import ( /* webpackChunkName: "views" */ '@/views/work/process/leave/form')
+        }, {
+            path: 'handle/:taskId/:processInstanceId/:businessId',
+            name: '处理请假流程',
+            meta: {
+                i18n: 'work'
+            },
+            component: () =>
+                import ( /* webpackChunkName: "views" */ '@/views/work/process/leave/handle')
+        }, {
+            path: 'detail/:processInstanceId/:businessId',
+            name: '请假流程详情',
+            meta: {
+                i18n: 'work'
+            },
+            component: () =>
+                import ( /* webpackChunkName: "views" */ '@/views/work/process/leave/detail')
+        }]
+    }, {
+        path: '/wbs',
+        component: Layout,
+        redirect: '/wbs/edit',
+        children: [{
+            path: 'edit/:id',
+            name: '编辑WBS树',
+            meta: {
+                i18n: 'edit'
+            },
+            component: () =>
+                import ( /* webpackChunkName: "views" */ '@/views/manager/wbsinfo/edit')
+        }]
+    }, {
+        path: '/contract',
+        component: Layout,
+        redirect: '/contract/detail',
+        children: [{
+            path: 'detail',
+            name: '创建合同段',
+            meta: {
+                i18n: 'edit'
+            },
+            component: () =>
+                import ( /* webpackChunkName: "views" */ '@/views/manager/contractinfo/detail')
+        }]
     },
-    component: () =>
-      import( /* webpackChunkName: "views" */ '@/views/wel/index')
-  }, {
-    path: 'dashboard',
-    name: '控制台',
-    meta: {
-      i18n: 'dashboard',
-      menu: false,
+    {
+        path: '/exctab',
+        component: Layout,
+        redirect: '/exctab/excelmodel',
+        children: [{
+            path: 'excelmodel',
+            name: '清标模板',
+            meta: {
+                i18n: 'edit'
+            },
+            component: () =>
+                import ( /* webpackChunkName: "views" */ '@/views/exctab/excelmodel')
+        }]
     },
-    component: () =>
-      import( /* webpackChunkName: "views" */ '@/views/wel/dashboard')
-  }]
-}, {
-  path: '/test',
-  component: Layout,
-  redirect: '/test/index',
-  children: [{
-    path: 'index',
-    name: '测试页',
-    meta: {
-      i18n: 'test'
-    },
-    component: () =>
-      import( /* webpackChunkName: "views" */ '@/views/util/test')
-  }]
-}, {
-  path: '/dict-horizontal',
-  component: Layout,
-  redirect: '/dict-horizontal/index',
-  children: [{
-    path: 'index',
-    name: '字典管理',
-    meta: {
-      i18n: 'dict'
-    },
-    component: () =>
-      import( /* webpackChunkName: "views" */ '@/views/util/demo/dict-horizontal')
-  }]
-}, {
-  path: '/dict-vertical',
-  component: Layout,
-  redirect: '/dict-vertical/index',
-  children: [{
-    path: 'index',
-    name: '字典管理',
-    meta: {
-      i18n: 'dict'
-    },
-    component: () =>
-      import( /* webpackChunkName: "views" */ '@/views/util/demo/dict-vertical')
-  }]
-}, {
-  path: '/info',
-  component: Layout,
-  redirect: '/info/index',
-  children: [{
-    path: 'index',
-    name: '个人信息',
-    meta: {
-      i18n: 'info'
-    },
-    component: () =>
-      import( /* webpackChunkName: "views" */ '@/views/system/userinfo')
-  }]
-}, {
-  path: '/work/process/leave',
-  component: Layout,
-  redirect: '/work/process/leave/form',
-  children: [{
-    path: 'form/:processDefinitionId',
-    name: '请假流程',
-    meta: {
-      i18n: 'work'
-    },
-    component: () =>
-      import( /* webpackChunkName: "views" */ '@/views/work/process/leave/form')
-  }, {
-    path: 'handle/:taskId/:processInstanceId/:businessId',
-    name: '处理请假流程',
-    meta: {
-      i18n: 'work'
-    },
-    component: () =>
-      import( /* webpackChunkName: "views" */ '@/views/work/process/leave/handle')
-  }, {
-    path: 'detail/:processInstanceId/:businessId',
-    name: '请假流程详情',
-    meta: {
-      i18n: 'work'
-    },
-    component: () =>
-      import( /* webpackChunkName: "views" */ '@/views/work/process/leave/detail')
-  }]
-},{
-  path: '/wbs',
-  component: Layout,
-  redirect: '/wbs/edit',
-  children: [{
-    path: 'edit/:id',
-    name: '编辑WBS树',
-    meta: {
-      i18n: 'edit'
-    },
-    component: () =>
-      import( /* webpackChunkName: "views" */ '@/views/manager/wbsinfo/edit')
-  }]
-},{
-  path: '/contract',
-  component: Layout,
-  redirect: '/contract/detail',
-  children: [{
-    path: 'detail',
-    name: '创建合同段',
-    meta: {
-      i18n: 'edit'
-    },
-    component: () =>
-      import( /* webpackChunkName: "views" */ '@/views/manager/contractinfo/detail')
-  }]
-}
-
-]
+]

src/views/exctab/excelmodel.vue

@@ -0,0 +1,121 @@
+<template>
+  <div>
+    <el-row class="box">
+      <!-- 左侧树结构 -->
+      <el-col :span="5">
+        <div class="box">
+          <el-scrollbar>
+            <basic-container>
+              <avue-tree :permission="getPermission"
+                         :loading="loading"
+                         :option="option"
+                         :data="data"
+                         @node-click="nodeClick"
+                         @update="update"
+                         @save="save"
+                         @del="del"
+                         v-model="form">
+                <span class="el-tree-node__label"
+                      slot-scope="{ node, data }">
+                  <div>
+                    <span> {{ data.label }} </span>
+                    <i class="el-icon-circle-plus-outline marleft10"></i>
+                    <i class="el-icon-edit marleft10"
+                       @click.stop="edit()"></i>
+                    <i class="el-icon-delete marleft10"></i>
+                  </div>
+                </span>
+                <template slot-scope="scope"
+                          slot="menu">
+                  <div class="avue-tree__item"
+                       @click.native="tip(scope.node, scope.data)">自定义按钮</div>
+                </template>
+              </avue-tree>
+            </basic-container>
+          </el-scrollbar>
+        </div>
+      </el-col>
+      <!-- 右侧 -->
+      <el-col :span="19">
+        <el-scrollbar>
+          <div class="rightHeader">
+            <div>名称</div>
+            <el-button size="mini">默认按钮</el-button>
+            <el-link>删除</el-link>
+            <el-link :underline="false">下载EXCEL</el-link>
+          </div>
+        </el-scrollbar>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<script>
+export default {
+  data () {
+    return {
+      loading: false,//懒加载
+      option: {
+        filter: false,
+      },
+      data: [
+        {
+          value: 0,
+          label: '一级部门',
+          children: [
+            {
+              value: 1,
+              label: '一级部门1',
+            }, {
+              value: 2,
+              label: '一级部门2',
+            }
+          ]
+        }, {
+          value: 3,
+          label: '二级部门',
+          children: [
+            {
+              value: 4,
+              label: '二级部门1',
+            }, {
+              value: 5,
+              label: '二级部门2',
+            }
+          ]
+        }
+      ],
+
+    }
+  },
+  methods: {
+    nodeClick () {
+
+    },
+    edit () {
+      console.log(111);
+    }
+  },
+}
+</script>
+<style scoped lang="scss">
+.marleft10 {
+  margin-left: 10px;
+}
+
+.box {
+  height: 800px;
+}
+
+.el-scrollbar {
+  height: 100%;
+}
+
+.box .el-scrollbar__wrap {
+  overflow: scroll;
+}
+
+.rightHeader {
+  display: flex;
+  justify-content: flex-start;
+}
+</style>

src/views/exctab/exceltab.vue

@@ -29,19 +29,18 @@
         </el-button>
       </template>
 
-      <template slot-scope="scope" slot="menu">
-        <el-button
-          type="text"
-          icon="el-icon-circle-plus-outline"
-          size="small"
-          @click.stop="handleAdd(scope.row,scope.index)"
-        >清表模版
+      <template slot-scope="scope"
+                slot="menu">
+        <el-button type="text"
+                   icon="el-icon-circle-plus-outline"
+                   size="small"
+                   @click.stop="handleAdd(scope.row, scope.index)">清表模版
         </el-button>
       </template>
       <template slot-scope="{row}"
                 slot="source">
         <div style="text-align:center">
-          <i :class="row.source"/>
+          <i :class="row.source" />
         </div>
       </template>
 
@@ -51,202 +50,202 @@
 
 
 <script>
-  import {getList, getDetail, add, update, remove} from "@/api/exctab/exceltab";
-  import {mapGetters} from "vuex";
+import { getList, getDetail, add, update, remove } from "@/api/exctab/exceltab";
+import { mapGetters } from "vuex";
 
-  export default {
-    data() {
-      return {
-        form: {},
-        query: {},
-        loading: true,
-        page: {
-          pageSize: 10,
-          currentPage: 1,
-          total: 0
-        },
-        selectionList: [],
-        option: {
-          height:'auto',
-          calcHeight: 30,
-          tip: false,
-          searchShow: true,
-          searchMenuSpan: 6,
-          border: true,
-          index: true,
-          viewBtn: true,
-          selection: true,
-          menuWidth: 300,
-          dialogClickModal: false,
-          column: [
-            {
-              label: '创建时间',
-              prop: 'createTime',
-              width: 300,
-              editDisplay:false,
-              addDisplay:false,
-            },
-            {
-              label: "模版名称",
-              prop: "name",
-              search: true,
-              rules: [{
-                required: true,
-                message: "请输入名称",
-                trigger: "blur"
-              }]
-            },
+export default {
+  data () {
+    return {
+      form: {},
+      query: {},
+      loading: true,
+      page: {
+        pageSize: 10,
+        currentPage: 1,
+        total: 0
+      },
+      selectionList: [],
+      option: {
+        height: 'auto',
+        calcHeight: 30,
+        tip: false,
+        searchShow: true,
+        searchMenuSpan: 6,
+        border: true,
+        index: true,
+        viewBtn: true,
+        selection: true,
+        menuWidth: 300,
+        dialogClickModal: false,
+        column: [
+          {
+            label: '创建时间',
+            prop: 'createTime',
+            width: 300,
+            editDisplay: false,
+            addDisplay: false,
+          },
+          {
+            label: "模版名称",
+            prop: "name",
+            search: true,
+            rules: [{
+              required: true,
+              message: "请输入名称",
+              trigger: "blur"
+            }]
+          },
 
-            {
-              label: "表数量",
-              prop: "tabCout",
-              width: 300,
-              editDisplay:false,
-              addDisplay:false,
-              rules: [{
-                message: "请输入表数量",
-                trigger: "blur",
-              }]
-            }
-          ]
-        },
-        data: []
+          {
+            label: "表数量",
+            prop: "tabCout",
+            width: 300,
+            editDisplay: false,
+            addDisplay: false,
+            rules: [{
+              message: "请输入表数量",
+              trigger: "blur",
+            }]
+          }
+        ]
+      },
+      data: []
+    };
+  },
+  computed: {
+    ...mapGetters(["permission"]),
+    permissionList () {
+      return {
+        addBtn: this.vaildData(this.permission.exceltab_add, false),
+        viewBtn: this.vaildData(this.permission.exceltab_view, false),
+        delBtn: this.vaildData(this.permission.exceltab_delete, false),
+        editBtn: this.vaildData(this.permission.exceltab_edit, false)
       };
     },
-    computed: {
-      ...mapGetters(["permission"]),
-      permissionList() {
-        return {
-          addBtn: this.vaildData(this.permission.exceltab_add, false),
-          viewBtn: this.vaildData(this.permission.exceltab_view, false),
-          delBtn: this.vaildData(this.permission.exceltab_delete, false),
-          editBtn: this.vaildData(this.permission.exceltab_edit, false)
-        };
-      },
-      ids() {
-        let ids = [];
-        this.selectionList.forEach(ele => {
-          ids.push(ele.id);
+    ids () {
+      let ids = [];
+      this.selectionList.forEach(ele => {
+        ids.push(ele.id);
+      });
+      return ids.join(",");
+    }
+  },
+  methods: {
+    handleAdd (row) {
+      this.$router.push('/exctab/excelmodel');
+    },
+    rowSave (row, done, loading) {
+      add(row).then(() => {
+        this.onLoad(this.page);
+        this.$message({
+          type: "success",
+          message: "操作成功!"
         });
-        return ids.join(",");
-      }
+        done();
+      }, error => {
+        loading();
+        window.console.log(error);
+      });
     },
-    methods: {
-      handleAdd(row) {
-        this.$router.push('/system/user/');
-      },
-      rowSave(row, done, loading) {
-        add(row).then(() => {
+    rowUpdate (row, index, done, loading) {
+      update(row).then(() => {
+        this.onLoad(this.page);
+        this.$message({
+          type: "success",
+          message: "操作成功!"
+        });
+        done();
+      }, error => {
+        loading();
+        console.log(error);
+      });
+    },
+    rowDel (row) {
+      this.$confirm("确定将选择数据删除?", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+        .then(() => {
+          return remove(row.id);
+        })
+        .then(() => {
           this.onLoad(this.page);
           this.$message({
             type: "success",
             message: "操作成功!"
           });
-          done();
-        }, error => {
-          loading();
-          window.console.log(error);
         });
-      },
-      rowUpdate(row, index, done, loading) {
-        update(row).then(() => {
+    },
+    handleDelete () {
+      if (this.selectionList.length === 0) {
+        this.$message.warning("请选择至少一条数据");
+        return;
+      }
+      this.$confirm("确定将选择数据删除?", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+        .then(() => {
+          return remove(this.ids);
+        })
+        .then(() => {
           this.onLoad(this.page);
           this.$message({
             type: "success",
             message: "操作成功!"
           });
-          done();
-        }, error => {
-          loading();
-          console.log(error);
+          this.$refs.crud.toggleSelection();
         });
-      },
-      rowDel(row) {
-        this.$confirm("确定将选择数据删除?", {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning"
-        })
-          .then(() => {
-            return remove(row.id);
-          })
-          .then(() => {
-            this.onLoad(this.page);
-            this.$message({
-              type: "success",
-              message: "操作成功!"
-            });
-          });
-      },
-      handleDelete() {
-        if (this.selectionList.length === 0) {
-          this.$message.warning("请选择至少一条数据");
-          return;
-        }
-        this.$confirm("确定将选择数据删除?", {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning"
-        })
-          .then(() => {
-            return remove(this.ids);
-          })
-          .then(() => {
-            this.onLoad(this.page);
-            this.$message({
-              type: "success",
-              message: "操作成功!"
-            });
-            this.$refs.crud.toggleSelection();
-          });
-      },
-      beforeOpen(done, type) {
-        if (["edit", "view"].includes(type)) {
-          getDetail(this.form.id).then(res => {
-            this.form = res.data.data;
-          });
-        }
-        done();
-      },
-      searchReset() {
-        this.query = {};
-        this.onLoad(this.page);
-      },
-      searchChange(params, done) {
-        this.query = params;
-        this.page.currentPage = 1;
-        this.onLoad(this.page, params);
-        done();
-      },
-      selectionChange(list) {
-        this.selectionList = list;
-      },
-      selectionClear() {
-        this.selectionList = [];
-        this.$refs.crud.toggleSelection();
-      },
-      currentChange(currentPage){
-        this.page.currentPage = currentPage;
-      },
-      sizeChange(pageSize){
-        this.page.pageSize = pageSize;
-      },
-      refreshChange() {
-        this.onLoad(this.page, this.query);
-      },
-      onLoad(page, params = {}) {
-        this.query.parentId=0;
-        this.loading = true;
-        getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
-          const data = res.data.data;
-          this.page.total = data.total;
-          this.data = data.records;
-          this.loading = false;
-          this.selectionClear();
+    },
+    beforeOpen (done, type) {
+      if (["edit", "view"].includes(type)) {
+        getDetail(this.form.id).then(res => {
+          this.form = res.data.data;
         });
       }
+      done();
+    },
+    searchReset () {
+      this.query = {};
+      this.onLoad(this.page);
+    },
+    searchChange (params, done) {
+      this.query = params;
+      this.page.currentPage = 1;
+      this.onLoad(this.page, params);
+      done();
+    },
+    selectionChange (list) {
+      this.selectionList = list;
+    },
+    selectionClear () {
+      this.selectionList = [];
+      this.$refs.crud.toggleSelection();
+    },
+    currentChange (currentPage) {
+      this.page.currentPage = currentPage;
+    },
+    sizeChange (pageSize) {
+      this.page.pageSize = pageSize;
+    },
+    refreshChange () {
+      this.onLoad(this.page, this.query);
+    },
+    onLoad (page, params = {}) {
+      this.query.parentId = 0;
+      this.loading = true;
+      getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
+        const data = res.data.data;
+        this.page.total = data.total;
+        this.data = data.records;
+        this.loading = false;
+        this.selectionClear();
+      });
     }
-  };
+  }
+};
 </script>
 
 <style>