|
|
@@ -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>
|
