From ba460a972f7ef9d9f2d67dc0dc77bdfbed076589 Mon Sep 17 00:00:00 2001
From: zhutianqi <ztq_qi@sina.com>
Date: Mon, 10 Jan 2022 11:03:50 +0800
Subject: [PATCH] commit

---
 .../pages/creatProcess/bzzqyj/step1.vue       |   2 +-
 .../pages/creatProcess/bzzqyj/step6.vue       | 740 +++++++++---------
 2 files changed, 387 insertions(+), 355 deletions(-)

diff --git a/src/pages/processCenter/pages/creatProcess/bzzqyj/step1.vue b/src/pages/processCenter/pages/creatProcess/bzzqyj/step1.vue
index 3e72263b0..a24757b4e 100644
--- a/src/pages/processCenter/pages/creatProcess/bzzqyj/step1.vue
+++ b/src/pages/processCenter/pages/creatProcess/bzzqyj/step1.vue
@@ -162,7 +162,7 @@
                     <el-input v-model="roleForm.ministerUser" style="display: none;"/>
                     <el-input
                       v-model="roleForm.ministerUserName"
-                      placeholder="选择标准法规部部长·"
+                      placeholder="选择标准法规部部长"
                       @click.native="choiceZRR('ministerUser', '选择标准法规部部长', roleForm.ministerUser)"
                     />
                   </div>
diff --git a/src/pages/processCenter/pages/creatProcess/bzzqyj/step6.vue b/src/pages/processCenter/pages/creatProcess/bzzqyj/step6.vue
index 8877bd708..cc5272498 100644
--- a/src/pages/processCenter/pages/creatProcess/bzzqyj/step6.vue
+++ b/src/pages/processCenter/pages/creatProcess/bzzqyj/step6.vue
@@ -12,11 +12,11 @@
     <div class="content" v-show="active === '1'">
       <div style="flex: auto; overflow: auto;">
         <el-form
-          ref="bzzqyjForm"
-          :model="form"
-          :rules="formRules"
-          class="label-input-form"
-          label-width="210px"
+                ref="bzzqyjForm"
+                :model="form"
+                :rules="formRules"
+                class="label-input-form"
+                label-width="210px"
         >
           <ProcessTitle>
             <template slot="title">基础信息</template>
@@ -26,18 +26,18 @@
               <el-col :span="24">
                 <el-form-item label="标准编号/名称" prop="cid" class="add-form-item form-item-disabled">
                   <el-input
-                    disabled
-                    v-model="form.cid"
-                    placeholder="请输入标准编号"
-                    clearable
+                          disabled
+                          v-model="form.cid"
+                          placeholder="请输入标准编号"
+                          clearable
                   ></el-input>
                 </el-form-item>
                 <el-form-item label="征求意见结束日期" prop="endTime" class="add-form-item form-item-disabled">
                   <el-date-picker
-                    disabled
-                    v-model="form.endTime"
-                    type="date"
-                    placeholder="请选择结束日期">
+                          disabled
+                          v-model="form.endTime"
+                          type="date"
+                          placeholder="请选择结束日期">
                   </el-date-picker>
                 </el-form-item>
                 <el-form-item label="标准附件" prop="fjListId" class="add-form-item form-item-disabled">
@@ -76,6 +76,14 @@
                     - -
                   </div>
                 </el-form-item>
+                <el-form-item label="审批领导" prop="user7" class="add-form-item form-item-disabled">
+                  <el-input
+                          v-model="form.user7"
+                          style="display: none;"
+                          clearable
+                  ></el-input>
+                  <el-input v-model="form.user7Name" placeholder="请选择审批领导" @click.native="choiceZRR"></el-input>
+                </el-form-item>
               </el-col>
             </el-row>
           </div>
@@ -96,71 +104,71 @@
           </el-button>
         </div>
         <el-table
-          ref="multipleTable"
-          :data="data"
-          tooltip-effect="dark"
-          border
-          style="width: 100%; flex: auto;"
-          class="drag-table"
-          :default-sort = "{prop: 'chapterNumber', order: 'ascending'}"
-          :header-cell-style="{background: '#E8E8E8', color: '#333333', fontSize: '16px',
+                ref="multipleTable"
+                :data="data"
+                tooltip-effect="dark"
+                border
+                style="width: 100%; flex: auto;"
+                class="drag-table"
+                :default-sort = "{prop: 'chapterNumber', order: 'ascending'}"
+                :header-cell-style="{background: '#E8E8E8', color: '#333333', fontSize: '16px',
          fontWeight: 'bold', height: '48px'}">
           <el-table-column
-            type="index"
-            label="序号"
-            width="55"
-            align="center">
+                  type="index"
+                  label="序号"
+                  width="55"
+                  align="center">
           </el-table-column>
           <el-table-column
-            prop="chapterNumber"
-            align="center"
-            sortable
-            label="章条编号"
-            width="101px">
+                  prop="chapterNumber"
+                  align="center"
+                  sortable
+                  label="章条编号"
+                  width="101px">
           </el-table-column>
           <el-table-column
-            prop="chapterName"
-            align="center"
-            width="200px"
-            label="章节名称">
+                  prop="chapterName"
+                  align="center"
+                  width="200px"
+                  label="章节名称">
           </el-table-column>
           <el-table-column
-            prop="commentText"
-            align="center"
-            label="修改意见内容（包括理由或依据）">
+                  prop="commentText"
+                  align="center"
+                  label="修改意见内容（包括理由或依据）">
             <el-table-column
-              prop="oldText"
-              align="center"
-              label="修改前">
+                    prop="oldText"
+                    align="center"
+                    label="修改前">
               <template slot-scope="scope">
                 <el-button size="mini" type="primary" :disabled="scope.row.chapterNumber.length === 0" @click="itermsConditionsOpen(scope.row.oldText)" class="common-button-primary">查看修改前内容</el-button>
               </template>
             </el-table-column>
             <el-table-column
-              prop="newText"
-              align="center"
-              label="修改后">
+                    prop="newText"
+                    align="center"
+                    label="修改后">
             </el-table-column>
             <el-table-column
-              prop="reason"
-              align="center"
-              label="修改理由">
+                    prop="reason"
+                    align="center"
+                    label="修改理由">
             </el-table-column>
           </el-table-column>
           <el-table-column
-            prop="department"
-            align="center"
-            label="提出部门">
+                  prop="department"
+                  align="center"
+                  label="提出部门">
           </el-table-column>
           <el-table-column
-            prop="responUserName"
-            align="center"
-            label="提出人">
+                  prop="responUserName"
+                  align="center"
+                  label="提出人">
           </el-table-column>
           <el-table-column
-            prop="state"
-            align="center"
-            label="处理意见">
+                  prop="state"
+                  align="center"
+                  label="处理意见">
             <template slot-scope="scope">
               <div>{{ stateText(scope.row.state) }}</div>
             </template>
@@ -171,11 +179,11 @@
         <el-collapse-item title="审批意见">
           <div style="margin: 10px 0;">
             <el-input
-              type="textarea"
-              :rows="3"
-              resize="none"
-              placeholder="请输入意见"
-              v-model="commentText6">
+                    type="textarea"
+                    :rows="3"
+                    resize="none"
+                    placeholder="请输入意见"
+                    v-model="commentText6">
             </el-input>
           </div>
         </el-collapse-item>
@@ -183,24 +191,24 @@
     </div>
     <div class="content" v-show="active === '2'">
       <el-table
-        height="100%"
-        ref="selection"
-        :data="histortData"
-        tooltip-effect="dark"
-        style="width: 100%"
-        border
-        row-key="id"
-        :header-cell-style="{background: '#f8f8f9', color: '#515a6e'}">
+              height="100%"
+              ref="selection"
+              :data="histortData"
+              tooltip-effect="dark"
+              style="width: 100%"
+              border
+              row-key="id"
+              :header-cell-style="{background: '#f8f8f9', color: '#515a6e'}">
         <el-table-column
-          prop="name"
-          label="任务步骤"
-          align="center"
+                prop="name"
+                label="任务步骤"
+                align="center"
         >
         </el-table-column>
         <el-table-column
-          prop="assignee"
-          label="任务受理人"
-          align="center"
+                prop="assignee"
+                label="任务受理人"
+                align="center"
         >
         </el-table-column>
         <el-table-column
@@ -220,17 +228,17 @@
           </template>
         </el-table-column>
         <el-table-column
-          prop="comment"
-          label="流程信息"
-          align="center">
+                prop="comment"
+                label="流程信息"
+                align="center">
           <template slot-scope="scope">
             <span>{{ scope.row.commentText }}</span>
           </template>
         </el-table-column>
         <el-table-column
-          prop="completeFlag"
-          label="状态"
-          align="center">
+                prop="completeFlag"
+                label="状态"
+                align="center">
           <template slot-scope="scope">
             <span>{{ scope.row.endTime ? "已完成" : "未完成" }}</span>
           </template>
@@ -238,16 +246,16 @@
       </el-table>
     </div>
     <ProcessFooter
-      show-submit
-      :submitLoading="isSubmit"
-      :saveLoading="saveLoading"
-      @submit="handleSubmit"
-      show-back
-      @back="handleSubmitNo"
-      show-transfer
-      @transfer="handleTransfer"
-      approval
-      submitBTNText="同意"
+            show-submit
+            :submitLoading="isSubmit"
+            :saveLoading="saveLoading"
+            @submit="handleSubmit"
+            show-back
+            @back="handleSubmitNo"
+            show-transfer
+            @transfer="handleTransfer"
+            approval
+            submitBTNText="同意"
     >
     </ProcessFooter>
     <Role-tree
@@ -265,187 +273,209 @@
         <el-button class="common-button-default" size="mini" icon="el-icon-close" @click="itermsConditionsClose">关闭</el-button>
       </div>
     </el-dialog>
+    <Role-tree
+            check-box
+            is-title="选择审批领导"
+            :is-visible.sync="modalshowflag"
+            @checkedRole="checkedRole2"
+            :nodeList="nodeList"
+    ></Role-tree>
   </div>
 </template>
 
 <script>
-import ProcessHeader from "../../components/ProcessHeader";
-import ProcessFooter from "../../components/ProcessFooter";
-import ProcessTitle from "../../components/ProcessTitle";
-import { inboundLiaisonDetail, processCreateStand, changeAssigneeNew } from "api/process";
-import axios from "axios";
+  import ProcessHeader from "../../components/ProcessHeader";
+  import ProcessFooter from "../../components/ProcessFooter";
+  import ProcessTitle from "../../components/ProcessTitle";
+  import { inboundLiaisonDetail, processCreateStand, changeAssigneeNew } from "api/process";
+  import axios from "axios";
 
-export default {
-  name: "bzzqyjStep6",
-  data() {
-    return {
-      commentText6: '',
-      itermsConditionsFlag: false,
-      itermsConditionsTitle: '',
-      drawerModal: false,
-      histortData: [],
-      oldData: [],
-      data: [],
-      commentText: "",
-      oldText: "",
-      newText: "",
-      reason: "",
-      taskIds: this.$route.query.taskIds,
-      pId: this.$route.query.prcId,
-      roleRow: {},
-      nodeList: [],
-      type: "",
-      defaultProps: {
-        children: "children",
-        label: "name"
+  export default {
+    name: "bzzqyjStep6",
+    data() {
+      return {
+        commentText6: '',
+        itermsConditionsFlag: false,
+        itermsConditionsTitle: '',
+        drawerModal: false,
+        histortData: [],
+        oldData: [],
+        data: [],
+        commentText: "",
+        oldText: "",
+        newText: "",
+        reason: "",
+        taskIds: this.$route.query.taskIds,
+        pId: this.$route.query.prcId,
+        roleRow: {},
+        nodeList: [],
+        type: "",
+        defaultProps: {
+          children: "children",
+          label: "name"
+        },
+        treeData: [], // 人员数据
+        modalshowflag: false, // drawer开关
+        drawerTitle: "", //drawer标题
+        textarea: "", // 意见
+        ListModel: false, // 新增编辑抽屉开关
+        active: "1", // 默认显示
+        isSubmit: false,
+        saveLoading: false,
+        form: {
+          cid: "", // 编号
+          endTime: "", // 结束日期
+          cname: "", // 名称
+          fjList: [],
+          fjListId: '',
+          textType: '',
+          modelList: [],
+          modelNameList: '',
+          user7: '',
+          user7Name: ''
+        },
+        formRules: {
+          responUserList: [
+            {required: true, message: "请选择责任人", trigger: "change"}
+          ]
+        },
+        json: {}
+      };
+    },
+    components: {
+      ProcessHeader,
+      ProcessFooter,
+      ProcessTitle
+    },
+    methods: {
+      choiceZRR () {
+        this.nodeList = [];
+        if (this.form.user7.length > 0) {
+          this.nodeList = this.form.user7.split(",");
+        }
+        this.modalshowflag = true;
       },
-      treeData: [], // 人员数据
-      modalshowflag: false, // drawer开关
-      drawerTitle: "", //drawer标题
-      textarea: "", // 意见
-      ListModel: false, // 新增编辑抽屉开关
-      active: "1", // 默认显示
-      isSubmit: false,
-      saveLoading: false,
-      form: {
-        cid: "", // 编号
-        endTime: "", // 结束日期
-        cname: "", // 名称
-        fjList: [],
-        fjListId: '',
-        textType: '',
-        modelList: [],
-        modelNameList: '',
+      checkedRole2(data) {
+        this.form.user7 = data[0].id
+        this.form.user7Name = data[0].name
       },
-      formRules: {
-        responUserList: [
-          {required: true, message: "请选择责任人", trigger: "change"}
-        ]
+      filesUpload (file) { // 下载
+        const attId = file.attId
+        if (attId) {
+          window.location.href = '/api/att/attFile/downloadFileForSar?fileId=' + attId
+        } else {
+          this.$message.warning('文件不存在,下载失败')
+        }
       },
-      json: {}
-    };
-  },
-  components: {
-    ProcessHeader,
-    ProcessFooter,
-    ProcessTitle
-  },
-  methods: {
-    filesUpload (file) { // 下载
-      const attId = file.attId
-      if (attId) {
+      fileLook(file) { // 预览
+        const attId = file.attId
+        this.$preview(attId)
+      },
+      itermsConditionsClose () {
+        this.itermsConditionsFlag = false
+      },
+      itermsConditionsOpen (row) {
+        this.itermsConditionsFlag = true
+        this.itermsConditionsTitle = row
+      },
+      downloadFile (attId) {
         window.location.href = '/api/att/attFile/downloadFileForSar?fileId=' + attId
-      } else {
-        this.$message.warning('文件不存在,下载失败')
-      }
-    },
-    fileLook(file) { // 预览
-      const attId = file.attId
-      this.$preview(attId)
-    },
-    itermsConditionsClose () {
-      this.itermsConditionsFlag = false
-    },
-    itermsConditionsOpen (row) {
-      this.itermsConditionsFlag = true
-      this.itermsConditionsTitle = row
-    },
-    downloadFile (attId) {
-      window.location.href = '/api/att/attFile/downloadFileForSar?fileId=' + attId
-    },
+      },
       handleTransfer() {
-          this.drawerModal = true
+        this.drawerModal = true
       },
       checkedRole (data) {
-          changeAssigneeNew({
-              taskId: this.$route.query.taskIds, // 任务id
-              userId:this.$store.getters.userInfo.userId, // 委托人
-              assignee: data[0].id, // 被委托人
-              pId: this.$route.query.prcId, // 流程实例
-          }).then(res => {
-              if (res.success) {
-                  this.drawerModal = false
-                  this.$message.success('调整成功')
-                  this.processNum()
-                  this.$router.push({path:'/processCenter?tabsName=ProcessCenter'})
-              } else {
-                  this.$message.warning(res.message)
-              }
-          })
+        changeAssigneeNew({
+          taskId: this.$route.query.taskIds, // 任务id
+          userId:this.$store.getters.userInfo.userId, // 委托人
+          assignee: data[0].id, // 被委托人
+          pId: this.$route.query.prcId, // 流程实例
+        }).then(res => {
+          if (res.success) {
+            this.drawerModal = false
+            this.$message.success('调整成功')
+            this.processNum()
+            this.$router.push({path:'/processCenter?tabsName=ProcessCenter'})
+          } else {
+            this.$message.warning(res.message)
+          }
+        })
       },
       // 请求转换流程图
       processNum (row) {
-          axios.request({
-              url: '/api/lawss/activiti/getImg?_t=' + new Date().getTime(),
-              responseType: 'blob',
-              method: 'get',
-              params: {
-                  prcNum: this.$route.query.prcNum
-              }
-          }).then(res => {
-              this.processStep = window.URL.createObjectURL(res.data)
-          })
-      },
-    updataFj(item) {
-      window.location.href = '/api/att/attFile/downloadFile?fileId=' + item.id
-    },
-    getHistoryData() {
-      this.$http.get("lawss/activiti/get_list_by_instance", {
-        prcNum: this.$route.query.prcNum
-      }, {}, res => {
-        this.histortData = res;
-      }, e => {
-      });
-    },
-    stateText(row) {
-      if (row === "1") {
-        return "上报";
-      } else if (row === "2") {
-        return "处理后上报";
-      }
-    },
-    upload(row, title) {
-      if (row.length > 0) {
-        var params = {
-          columnName: {
-            chapterNumber: "章条编号",
-            chapterName: "章节名称",
-            commentText: "修改意见内容（包括理由或依据）",
-            oldText: "修改前",
-            newText: "修改后",
-            reason: "修改理由",
-            department: "提出部门",
-            responUserName: "提出人",
-          },
-          dataList: []
-        };
-        if (title === '上报意见.xls') {
-          params.columnName.stateText = "处理意见"
-        }
-        params.dataList = JSON.parse(JSON.stringify(row));
-        params.dataList.forEach(item => {
-          if (item.state === "1") {
-            item.stateText = "上报";
-          } else if (item.state === "2") {
-            item.stateText = "处理后上报";
-          } else {
-            item.stateText = "不上报";
+        axios.request({
+          url: '/api/lawss/activiti/getImg?_t=' + new Date().getTime(),
+          responseType: 'blob',
+          method: 'get',
+          params: {
+            prcNum: this.$route.query.prcNum
           }
+        }).then(res => {
+          this.processStep = window.URL.createObjectURL(res.data)
+        })
+      },
+      updataFj(item) {
+        window.location.href = '/api/att/attFile/downloadFile?fileId=' + item.id
+      },
+      getHistoryData() {
+        this.$http.get("lawss/activiti/get_list_by_instance", {
+          prcNum: this.$route.query.prcNum
+        }, {}, res => {
+          this.histortData = res;
+        }, e => {
         });
-        this.$http.downloadFile("/api/lawss/activiti/export_excel", params, title, res => {
-        });
-      } else {
-        this.$message.warning('无上报数据')
-      }
-    },
-    handleTabs(name) {
-      this.active = name;
-    },
-    handleSubmit() {
+      },
+      stateText(row) {
+        if (row === "1") {
+          return "上报";
+        } else if (row === "2") {
+          return "处理后上报";
+        }
+      },
+      upload(row, title) {
+        if (row.length > 0) {
+          var params = {
+            columnName: {
+              chapterNumber: "章条编号",
+              chapterName: "章节名称",
+              commentText: "修改意见内容（包括理由或依据）",
+              oldText: "修改前",
+              newText: "修改后",
+              reason: "修改理由",
+              department: "提出部门",
+              responUserName: "提出人",
+            },
+            dataList: []
+          };
+          if (title === '上报意见.xls') {
+            params.columnName.stateText = "处理意见"
+          }
+          params.dataList = JSON.parse(JSON.stringify(row));
+          params.dataList.forEach(item => {
+            if (item.state === "1") {
+              item.stateText = "上报";
+            } else if (item.state === "2") {
+              item.stateText = "处理后上报";
+            } else {
+              item.stateText = "不上报";
+            }
+          });
+          this.$http.downloadFile("/api/lawss/activiti/export_excel", params, title, res => {
+          });
+        } else {
+          this.$message.warning('无上报数据')
+        }
+      },
+      handleTabs(name) {
+        this.active = name;
+      },
+      handleSubmit() {
         this.isSubmit = true;
         var json = this.json;
         json.hqFlag = '0';
         json.commentText = this.commentText6;
+        json.user7 = this.form.user7;
+        json.user7Name = this.form.user7Name;
         this.$http.post("lawss/activiti/completeTask", {
           json: JSON.stringify(json),
           taskId: this.taskIds,
@@ -457,128 +487,130 @@ export default {
           }
           this.isSubmit = false;
         });
-    },
-    handleSubmitNo() {
-      if (this.commentText6) {
-        this.isSubmit = true;
-        var json = this.json;
-        json.hqFlag = '1';
-        json.commentText = this.commentText6;
-        this.$http.post("lawss/activiti/completeTask", {
-          json: JSON.stringify(json),
-          taskIds: this.taskIds,
-          userId: this.$store.getters.userInfo.userId
-        }, {}, res => {
-          if (res.success) {
-            this.$message.success("驳回成功");
-            this.$router.push("/processCenter");
-          }
-          this.isSubmit = false;
+      },
+      handleSubmitNo() {
+        if (this.commentText6) {
+          this.isSubmit = true;
+          var json = this.json;
+          json.hqFlag = '1';
+          json.commentText = this.commentText6;
+          this.$http.post("lawss/activiti/completeTask", {
+            json: JSON.stringify(json),
+            taskIds: this.taskIds,
+            userId: this.$store.getters.userInfo.userId
+          }, {}, res => {
+            if (res.success) {
+              this.$message.success("驳回成功");
+              this.$router.push("/processCenter");
+            }
+            this.isSubmit = false;
+          });
+        } else {
+          this.$message.warning("请输入反馈意见");
+        }
+      },
+      getData() {
+        return new Promise((resolve, reject) => {
+          inboundLiaisonDetail({
+            taskIds: this.taskIds,
+            pId: this.pId
+          }).then(res => {
+            let data = JSON.parse(res.mesg);
+            this.commentText6 = data.commentText6 || ''
+            this.form.fjList = data.fjList || data.form.fjList
+            this.form.cid = data.cid || data.form.cid;
+            this.form.endTime = data.endTime || data.form.endTime;
+            this.form.textType = data.textType || data.form.textType
+            this.form.modelList = data.modelList || data.form.modelList
+            this.form.user7 = data.form ? data.form.user7 : (data.user7 ? data.user7 :  '')
+            this.form.user7Name = data.form ? data.form.user7Name : (data.user7Name ? data.user7Name :  '')
+            this.oldData = JSON.parse(JSON.stringify(data.info))
+            var arr = []
+            data.info.forEach(item => {
+              if (item.state != '3') {
+                arr.push(item)
+              }
+            })
+            this.json = data
+            this.data = arr
+          }).catch(e => {
+          });
         });
-      } else {
-        this.$message.warning("请输入反馈意见");
       }
     },
-    getData() {
-      return new Promise((resolve, reject) => {
-        inboundLiaisonDetail({
-          taskIds: this.taskIds,
-          pId: this.pId
-        }).then(res => {
-          let data = JSON.parse(res.mesg);
-          this.commentText6 = data.commentText6 || ''
-          this.form.fjList = data.fjList || data.form.fjList
-          this.form.cid = data.cid || data.form.cid;
-          this.form.endTime = data.endTime || data.form.endTime;
-          this.form.textType = data.textType || data.form.textType
-          this.form.modelList = data.modelList || data.form.modelList
-          this.oldData = JSON.parse(JSON.stringify(data.info))
-          var arr = []
-          data.info.forEach(item => {
-            if (item.state != '3') {
-              arr.push(item)
-            }
-          })
-          this.json = data
-          this.data = arr
-        }).catch(e => {
-        });
-      });
+    mounted() {
+      this.getHistoryData();
+      this.getData();
     }
-  },
-  mounted() {
-    this.getHistoryData();
-    this.getData();
-  }
-};
+  };
 </script>
 
 <style lang="less" scoped>
-@import '~@/assets/styles/style';
+  @import '~@/assets/styles/style';
 
-.bzdyStep6 {
-  /deep/ .el-drawer__container {
-    .prc-content-border {
-      border: none;
-      padding: 0 20px 0;
+  .bzdyStep6 {
+    /deep/ .el-drawer__container {
+      .prc-content-border {
+        border: none;
+        padding: 0 20px 0;
+      }
     }
-  }
 
-  .fileClass {
-    cursor: pointer;
-  }
-
-  .fileClass:hover {
-    color: #0c91e5;
-  }
-
-  position: relative;
-  height: 100%;
-
-  .headerTabs {
-    height: 52px;
-    display: flex;
-    align-items: center;
-    position: absolute;
-    top: 0;
-    right: 10px;
-
-    .headerTabsItem {
-      border: 1px solid #c1c1c1;
-      padding: 0 5px;
-      height: 30px;
-      line-height: 30px;
+    .fileClass {
       cursor: pointer;
     }
 
-    .active {
-      border: 1px solid #E6A23C;
-      color: #fff;
-      background: #E6A23C;
+    .fileClass:hover {
+      color: #0c91e5;
     }
-  }
 
-  .content {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    height: calc(~'100% - 103px');
-    overflow: auto;
+    position: relative;
+    height: 100%;
 
-    .tableTitle {
-      margin-bottom: 10px;
-      height: 30px;
-      line-height: 30px;
-      position: relative;
-      font-size: 13px;
-      font-weight: bold;
+    .headerTabs {
+      height: 52px;
+      display: flex;
+      align-items: center;
+      position: absolute;
+      top: 0;
+      right: 10px;
 
-      .tableButton {
-        position: absolute;
-        right: 0;
-        top: 0;
+      .headerTabsItem {
+        border: 1px solid #c1c1c1;
+        padding: 0 5px;
+        height: 30px;
+        line-height: 30px;
+        cursor: pointer;
+      }
+
+      .active {
+        border: 1px solid #E6A23C;
+        color: #fff;
+        background: #E6A23C;
+      }
+    }
+
+    .content {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      height: calc(~'100% - 103px');
+      overflow: auto;
+
+      .tableTitle {
+        margin-bottom: 10px;
+        height: 30px;
+        line-height: 30px;
+        position: relative;
+        font-size: 13px;
+        font-weight: bold;
+
+        .tableButton {
+          position: absolute;
+          right: 0;
+          top: 0;
+        }
       }
     }
   }
-}
 </style>