清表

src/api/exctab/excelmodel.js

@@ -0,0 +1,42 @@
+import request from '@/router/axios';
+
+//清表树
+export const tabLazytree = (params) => {
+        return request({
+            url: '/api/blade-manager/exceltab/tab-lazytree',
+            method: 'get',
+            params
+        })
+    }
+    //获取列表信息
+export const detailExcel = (params) => {
+        return request({
+            url: '/api/blade-manager/exceltab/detail',
+            method: 'get',
+            params
+        })
+    }
+    // 添加
+    // export const addExcel = (row) => {
+    //         return request({
+    //             url: '/api/blade-manager/exceltab/submit',
+    //             method: 'post',
+    //             data: row
+    //         })
+    //     }
+    // 编辑
+export const editExcel = (row) => {
+        return request({
+            url: '/api/blade-manager/exceltab/submit',
+            method: 'post',
+            data: row
+        })
+    }
+    // 删除
+export const deleteExcel = (row) => {
+    return request({
+        url: '/api/blade-manager/exceltab/remove',
+        method: 'post',
+        data: row
+    })
+}

src/router/views/index.js

@@ -131,17 +131,17 @@ export default [{
         }]
     },
     {
-        path: '/exctab',
+        path: '/excel',
         component: Layout,
-        redirect: '/exctab/excelmodel',
+        redirect: '/excel/excelmodel',
         children: [{
-            path: 'excelmodel',
-            name: '清标模板',
+            path: 'excelmodel/:id',
+            name: '清表模板',
             meta: {
-                i18n: 'edit'
+                i18n: 'excelmodel'
             },
             component: () =>
-                import ( /* webpackChunkName: "views" */ '@/views/exctab/excelmodel')
+                import ( /* webpackChunkName: "views" */ '@/views/exctab/excelmodel/excelmodel')
         }]
     },
 ]

src/views/exctab/excelmodel.vue

@@ -1,121 +0,0 @@
-<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/excelmodel/excelmodel.vue

@@ -0,0 +1,374 @@
+<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"
+                v-model="form"
+              >
+                <span
+                  class="el-tree-node__label"
+                  slot-scope="{ node, data }"
+                >
+                  <div>
+                    <span> {{ data.name }} </span>
+                    <!-- <span> {{ node}} </span> -->
+                    <i
+                      class="el-icon-circle-plus-outline marleft10"
+                      @click.stop="addExcel()"
+                    ></i>
+                    <i
+                      class="el-icon-edit marleft10"
+                      @click.stop="editExcel()"
+                      v-if="!data.btss"
+                    ></i>
+                    <i
+                      class="el-icon-delete marleft10"
+                      @click.stop="deleteExcel()"
+                      v-if="!data.btss"
+                    ></i>
+                  </div>
+                </span>
+              </avue-tree>
+            </basic-container>
+          </el-scrollbar>
+        </div>
+      </el-col>
+      <!-- 右侧 -->
+      <el-col
+        :span="19"
+        class="box"
+      >
+        <el-scrollbar>
+          <basic-container>
+            <div class="rightHeader">
+              <div class="excelname">
+                <div>名ssssssssssssssssssssssssssssss称</div>
+                <i
+                  class="el-icon-success marleft10"
+                  style="color: rgb(0, 168, 112);"
+                ></i>
+              </div>
+              <el-button
+                size="mini"
+                class="marleft10"
+              >重新上传</el-button>
+              <el-link class="marleft10 colorblue">删除</el-link>
+              <el-link
+                underline
+                class="marleft10 colorblue"
+                style="text-decoration:underline;"
+              >下载EXCEL</el-link>
+            </div>
+          </basic-container>
+        </el-scrollbar>
+      </el-col>
+    </el-row>
+
+    <!-- 弹出框 -->
+    <el-dialog
+      title="新增编辑"
+      class="dialogModel"
+      :visible.sync="dialogTap"
+      width="800px"
+      modal-append-to-body
+      append-to-body
+      :before-close="handleClose"
+    >
+      <div class="dialogBox">
+        <el-form
+          ref="excelForm"
+          :model="excelForm"
+          label-width="80px"
+        >
+          <div style="display: flex;justify-content: space-between;">
+            <el-form-item
+              label="清表名称"
+              style="width: 370px;"
+              size="small"
+            >
+              <el-input v-model="excelForm.name"></el-input>
+            </el-form-item>
+            <el-form-item
+              label="清表类型"
+              style="width: 370px;"
+              size="small"
+            >
+              <el-select
+                v-model="excelForm.name"
+                style="width:100%;"
+                placeholder="请选择清表类型"
+              >
+                <el-option
+                  label="区域一"
+                  value="shanghai"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+          </div>
+        </el-form>
+        <div class="middle">
+          <div class="left">
+            <div class="select">
+              <el-select
+                placeholder="请选择WBS模板"
+                style="width: 96%;"
+                size="small"
+              >
+                <el-option
+                  label="区域一"
+                  value="shanghai"
+                ></el-option>
+              </el-select>
+            </div>
+            <!-- <avue-tree :permission="getPermission"
+                       :loading="loading"
+                       :option="option"
+                       :data="data"
+                       @node-click="nodeClick"
+                       v-model="form">
+              <span class="el-tree-node__label"
+                    slot-scope="{ node, data }">
+                <div>
+                  <span> {{ data.name }} </span>
+                </div>
+              </span>
+              <template slot-scope="scope"
+                        slot="menu">
+                <div class="avue-tree__item"
+                     @click.native="tip(scope.node, scope.data)">自定义按钮</div>
+              </template>
+            </avue-tree> -->
+          </div>
+          <template>
+            <table
+              class="right"
+              width="49%"
+              bordercolor="#DCDCDC"
+              border="1px"
+            >
+              <thead>
+                <tr>
+                  <td>表名</td>
+                  <td>操作</td>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>1</td>
+                  <td style="text-align: center;height:30px;">
+                    <el-button
+                      type="info"
+                      size="small"
+                    >关联</el-button>
+                    <el-button
+                      type="warning"
+                      size="small"
+                    >取消关联</el-button>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </template>
+        </div>
+      </div>
+      <div class="btbox">
+        <el-button
+          size="mini"
+          @click="dialogTap = false"
+        >取消</el-button>
+        <el-button
+          type="info"
+          style="margin-left: 50px;"
+          size="mini"
+        >确定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { detailExcel, tabLazytree } from '@/api/exctab/excelmodel'
+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',
+            }
+          ]
+        }
+      ],
+      //#region 
+      dialogTap: false,
+      excelForm: {
+
+      }
+      //#endregion
+    }
+  },
+  methods: {
+    //#region 接口
+    async tabLazytree (modeId) {//清表树
+      const { data: res } = await tabLazytree({ modeId })
+      console.log(res);
+      if (res.code === 200) {
+        res.data.forEach(value => {
+          value.btss = true
+        });
+        this.data = res.data
+      }
+    },
+    async detailExcel () {
+
+    },
+    //#endregion
+
+    //#region  
+    nodeClick () {
+
+    },
+    editExcel () {//编辑
+      console.log(111);
+    },
+    addExcel () {//添加
+      this.dialogTap = true
+    },
+    deleteExcel () {//删除
+      this.$confirm('确定将选择数据删除?', '', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'error'
+      }).then(() => {
+      }).catch(() => {
+      });
+    },
+    handleClose () {//关闭弹框触发事件
+
+    },
+    //#endregion
+  },
+  created () {
+    // this.tabLazytree(this.$route.params.id)//获取清表树
+    this.tabLazytree(0)
+  }
+}
+</script>
+<style scoped lang="scss">
+.marleft10 {
+  margin-left: 10px;
+}
+
+.colorblue {
+  color: rgb(0, 82, 217);
+}
+
+.box {
+  height: 800px;
+}
+
+.el-scrollbar {
+  height: 100%;
+}
+
+.box .el-scrollbar__wrap {
+  overflow: scroll;
+}
+
+.rightHeader {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  font-size: 14px;
+  background-color: #fff;
+
+  .excelname {
+    box-sizing: border-box;
+    min-width: 200px;
+    height: 28px;
+    border: 1px solid rgb(220, 220, 220);
+    padding: 0 10px;
+    border-radius: 3px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+}
+
+.dialogModel {
+  .dialogBox {
+    .middle {
+      display: flex;
+
+      .left {
+        border: 1px solid rgb(220, 220, 220);
+        border-radius: 3px;
+        height: 500px;
+        width: 49%;
+
+        .select {
+          box-sizing: border-box;
+          display: flex;
+          justify-content: center;
+          padding: 5px 0;
+          border-bottom: 1px solid #e0e0e0;
+        }
+      }
+
+      .right {
+        height: auto;
+        height: 60px;
+        max-height: 500px;
+        margin-left: 2%;
+        // height: 500px;
+        border-radius: 3px;
+
+        td {
+          box-sizing: border-box;
+          padding: 5px 10px;
+          height: 30px;
+          line-height: 30px;
+        }
+      }
+    }
+  }
+
+  .btbox {
+    margin-top: 20px;
+    display: flex;
+    justify-content: center;
+  }
+}
+</style>

src/views/exctab/exceltab.vue

@@ -1,49 +1,57 @@
 <template>
   <basic-container>
-    <avue-crud :option="option"
-               :table-loading="loading"
-               :data="data"
-               :page.sync="page"
-               :permission="permissionList"
-               :before-open="beforeOpen"
-               v-model="form"
-               ref="crud"
-               @row-update="rowUpdate"
-               @row-save="rowSave"
-               @row-del="rowDel"
-               @search-change="searchChange"
-               @search-reset="searchReset"
-               @selection-change="selectionChange"
-               @current-change="currentChange"
-               @size-change="sizeChange"
-               @refresh-change="refreshChange"
-               @on-load="onLoad">
+    <avue-crud
+      :option="option"
+      :table-loading="loading"
+      :data="data"
+      :page.sync="page"
+      :permission="permissionList"
+      :before-open="beforeOpen"
+      v-model="form"
+      ref="crud"
+      @row-update="rowUpdate"
+      @row-save="rowSave"
+      @row-del="rowDel"
+      @search-change="searchChange"
+      @search-reset="searchReset"
+      @selection-change="selectionChange"
+      @current-change="currentChange"
+      @size-change="sizeChange"
+      @refresh-change="refreshChange"
+      @on-load="onLoad"
+    >
       <template slot="menuLeft">
-
-        <el-button type="danger"
-                   size="small"
-                   icon="el-icon-delete"
-                   plain
-                   v-if="permission.exceltab_delete"
-                   @click="handleDelete">删 除
+        <el-button
+          type="danger"
+          size="small"
+          icon="el-icon-delete"
+          plain
+          v-if="permission.exceltab_delete"
+          @click="handleDelete"
+        >删 除
         </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">
+      <template
+        slot-scope="{row}"
+        slot="source"
+      >
         <div style="text-align:center">
           <i :class="row.source" />
         </div>
       </template>
-
     </avue-crud>
   </basic-container>
 </template>
@@ -132,7 +140,7 @@ export default {
   },
   methods: {
     handleAdd (row) {
-      this.$router.push('/exctab/excelmodel');
+      this.$router.push('/excel/excelmodel/' + row.id);
     },
     rowSave (row, done, loading) {
       add(row).then(() => {