FE_judgmentPoint/src/views/Catalog.vue

<template>
  <div class="content">
    <div class="flex">
      <div class="left">
        <div class="flex footer_h">
          <i class="el-icon-collection-tag"></i>
          <p>目录树</p>
        </div>
        <div>
          <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
        </div>
      </div>
      <div class="right">
        <div class="flex footer_h">
          <i class="el-icon-collection-tag"></i>
          <p>授信审批-工单页面</p>
        </div>
        <div class="table">
          <el-row>
            <el-col :span="24">
              <el-card shadow="hover">
                <el-table
                  :data="tableData"
                  height="360"
                  :cell-style="rowClass"
                  :header-cell-style="headClass"
                  :stripe="true"
                  header-align="center"
                >
                  <el-table-column prop="id" type="index" label="序号" width="150" align="center"></el-table-column>
                  <el-table-column prop="name" label="页面名称" align="center"></el-table-column>
                  <el-table-column prop="operate" label="操作" width="100" align="center">
                    <template slot-scope="scope">
                      <el-radio v-model="scope.radio"></el-radio>
                    </template>
                  </el-table-column>
                </el-table>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div class="bt">
      <el-button type="primary" @click="confirm()">确认</el-button>
      <el-button @click="cancel()">取消</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          label: "贷款申请",
          children: [
            {
              label: "二级 1-1",
              children: [
                {
                  label: "三级 1-1-1"
                }
              ]
            }
          ]
        },
        {
          label: "贷后管理",
          children: [
            {
              label: "二级 2-1",
              children: [
                {
                  label: "三级 2-1-1"
                }
              ]
            },
            {
              label: "二级 2-2",
              children: [
                {
                  label: "三级 2-2-1"
                }
              ]
            }
          ]
        },
        {
          label: "贷中管理",
          children: [
            {
              label: "授信审批"
            }
          ]
        }
      ],
      defaultProps: {
        children: "children",
        label: "label"
      },
      tableData: [
        {
          name: "贷款申请表"
        },
        {
          name: "授信审批表"
        },
        {
          name: "贷款申请表"
        },
        {
          name: "授信审批表"
        }
      ],
      scope: [
        {
          radio: "1"
        },
        {
          radio: "2"
        }
      ]
    };
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
    },
    cancel() {
      this.$router.push({ path: "/flow" });
    },
    confirm() {
      this.$router.push({ path: "/process" });
    }
  }
};
</script>

<style lang="scss" scoped>
//按钮
.bt {
  text-align: center;
}
/deep/ .el-button {
  width: 100px;
  margin: 0 30px;
}
// 右边表格
.right {
  width: 800px;
  height: 500px;
  margin: 20px 0;
  background-color: #ffffff;
}
.table {
  margin: 0 20px;
}
/deep/ .el-table--group::after,
.el-table--border::after,
.el-table::before {
  background-color: #ffffff;
}
// 滚动条的宽度
/deep/ ::-webkit-scrollbar {
  width: 6px; // 横向滚动条
  height: 6px; // 纵向滚动条 必写
}
// 滚动条的滑块
/deep/ ::-webkit-scrollbar-thumb {
  background-color: #9278ff;
  border-radius: 3px;
  -webkit-box-shadow: inset 0 0 5px #dddddd;
}
/deep/ ::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px #dddddd;
  border-radius: 0;
  background: #dddddd;
}
/deep/ .el-row {
  padding: 0 20px;
}
/deep/ .el-card__body {
  padding: 0;
}
/deep/ .el-card {
  border: none;
}
/deep/ .el-table th {
  font-size: 16px;
  font-family: Microsoft YaHei;
  color: rgba(255, 255, 255, 1);
  background-color: #9278ff;
}
/deep/ .el-table__row {
  height: 80px;
}
/deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
  background-color: #f5f2ff;
}
// 左边
.left {
  width: 250px;
  height: 500px;
  margin: 20px 20px;
  background-color: #ffffff;
}
/deep/ .el-tree {
  width: 150px;
  height: 400px;
  background-color: #f5f2ff;
  margin: 0 50px;
}
/deep/ .el-tree-node:focus > .el-tree-node__content {
  background-color: #f5f2ff;
}
/deep/ .el-tree-node__content:hover {
  background-color: #f5f2ff;
}
/deep/ .el-tree-node__label:active {
  color: #9278ff;
}
// 第一部分
.footer_h {
  padding: 10px 0;
  margin: 0 15px;
}
.flex {
  display: flex;
  justify-content: flex-start;
}
.footer_h p {
  padding-left: 10px;
  line-height: 15px;
  font-weight: 600;
}
/deep/ [class*=" el-icon-"],
[class^="el-icon-"] {
  line-height: 3;
  padding-left: 10px;
  color: #9278ff;
}
.content {
  width: 1110px;
  height: 650px;
  position: relative;
  margin: 0 auto;
  // display: flex;
  background-color: rgb(243, 235, 235);
  // background-color: red;
}
</style>