kd-aiot-frontend-pro/src/views/project-manage/planManage/components/details.vue

<template>
  <div class="ele-body el-form-box">
    <el-card class="card_2_box">

      <div class="card_2_box_content">
        <ele-split-layout
          :left-style="{
          overflow: 'hidden',
          width: '100%',
          paddingLeft: '10px',
        }"
          :max-size="300"
          :min-size="0"
          :resizable="true"
          :responsive="true"
          :right-style="{ overflow: 'hidden' }"
          allow-collapse
          width="210px"
        >
          <div class="el_tree_box">
            <!--            <el-tabs-->
            <!--              v-model="treeActiveName"-->
            <!--              class="tab-box_1"-->
            <!--              type="border-card">-->

            <!--            </el-tabs>-->


            <el-input
              v-model="filterText"
              placeholder="在结构中查找"
              size="small"
              clearable
              style="margin-bottom: 3px"
            >
            </el-input>
            <el-tree
              class="project_tree"
              ref="treeRef"
              :data="treeList"
              :default-expanded-keys="currentNodeData && currentNodeData.id ? [currentNodeData.id] : []"
              :expand-on-click-node="false"
              :highlight-current="true"
              :indent='0'
              :props="defaultProps"
              node-key="id"
              style="height: 100%"
              :filter-node-method="filterNode"
              @node-click="handleNodeClick"

            >
              <div style="width: 100%;height: 100%;display: flex;" slot-scope="{ node, data }"
                   @contextmenu.stop="(e)=>showRightMenu(e,node,data)">
                <span class="custom-tree-node">
                  <span :style="fontSize(node,data)" class="label_img" :class="getIconClass(node,data)"></span>
                  <span :style="fontSize(node,data)" class="label">{{ node.label }}</span>

                </span>

                <vue-context-menu :transferIndex="0" :class="'vue-contextmenuName-'+data.id+'_'+data.name+'_rightMenu'"
                                  v-if="data.id+'_'+data.name+'_rightMenu'== contextMenuData.menuName"
                                  :contextMenuData="contextMenuData"
                                  @updateProject="()=> handleUpdateProject(node,data,'edit')"
                                  @removeBom="()=> bomRemove(node,data)"
                                  @stageRemove="()=> stageRemove(node,data)"
                                  @addBOM="()=> addOrEditBOM('add',node,data)"
                                  @editBOM="()=> addOrEditBOM('edit',node,data)"
                                  @addPlan="()=> handleAddPlan('add',node,data)"
                                  @editPlan="()=> handleAddPlan('edit',node,data,'plan')"
                                  @addTask="()=> handleAddTask('add',node,data)"
                                  @handleTermination="()=> handleStatus(projectsTerminationAPI,'确定终止该项目吗？',node,data)"
                                  @handlePause="()=> handleStatus(projectsPauseAPI,'确定暂停该项目吗',node,data)"
                                  @handleStartup="()=> handleStatus(projectsStartupAPI,'确定启动该项目吗',node,data)"
                                  @handleFinish="()=> handleStatus(projectsFinishAPI,'确定完成该项目吗',node,data)"
                                  @handleBomTermination="()=> handleStatus(projectsBomTerminationAPI,'确定终止该BOM吗？',node,data)"
                                  @handleBomPause="()=> handleStatus(projectsBomPauseAPI,'确定暂停该BOM吗',node,data)"
                                  @handleBomStartup="()=> handleStatus(projectsBomStartupAPI,'确定启动该BOM吗',node,data)"
                                  @handleBomFinish="()=> handleStatus(projectsBomFinishAPI,'确定完成该BOM吗',node,data)"
                                  @handleStageTermination="()=> handleStatus(projectsStageTerminationAPI,'确定终止该项目阶段吗？',node,data)"
                                  @handleStagePause="()=> handleStatus(projectsStagePauseAPI,'确定暂停该项目阶段吗',node,data)"
                                  @handleStageStartup="()=> handleStatus(projectsStageStartupAPI,'确定启动该项目阶段吗',node,data)"
                                  @handleStageFinish="()=> handleStatus(projectsStageFinishAPI,'确定完成该项目阶段吗',node,data)"
                ></vue-context-menu>

                <!--              <span :class="getIconClass(node,data)">{{ node.label }}</span>-->
              </div>

            </el-tree>

          </div>
          <template v-slot:content>
            <ele-split-layout
              :left-style="{
              overflow: 'hidden',
              width: '100%' }"
              :vertical="true"
              :max-size="500"
              :min-size="1"
              :resizable="true"
              :responsive="true"
              width="440px"
              :right-style="{ overflow: 'hidden' }"
              allow-collapse
            >
              <div class="card_2_layout_content">
                <!--                <div class="card_2_1_box">-->
                <!--                 -->

                <!--                </div>-->
                <dv-border-box-12 class="card_2_1_box" :color="['rgb(255,255,255)', 'rgb(255,255,255)']"
                                  :backgroundColor="'rgb(255,255,255)'">
                  <div class="card_2_1_box_div_1">
                    <el-steps :active="active" finish-status="success" simple>
                      <el-step v-for="(item,index) in planStepList" :key="index" :title="item"></el-step>
                    </el-steps>
                  </div>
                  <div class="card_2_1_box_div_2">
                    <dv-percent-pond
                      :title="(dialogForm.speedPercent||0)+'%'"
                      :config="{value:dialogForm.speedPercent||0, localGradient: true,textColor:'rgb(0,185,253)',formatter:''}"
                      style="width:98%;height:55%;"/>
                    <!--                    <el-progress :stroke-width="30" text-color="#606266" :text-inside="false"-->
                    <!--                                 :percentage="dialogForm.speedPercent||0"-->
                    <!--                                 :color="customColorMethod"></el-progress>-->
                  </div>
                </dv-border-box-12>
                <el-tabs
                  v-model="activeName"
                  class="tab-box_1"
                  @tab-click="handleTabs1"
                  type="border-card"
                >
                  <el-tab-pane label="基本信息" name="基本信息">
                    <plan-form ref="planForm" dialog-type="view"
                               :dialogForm="dialogForm" :deptList="deptList"
                               :deptTreeList="deptTreeList"></plan-form>

                  </el-tab-pane>
                  <el-tab-pane label="子计划以及节点" name="子计划以及节点" class="el-tab-pane-tree">
                    <ele-pro-table
                      class="el-table"
                      ref="table"
                      row-key="id"
                      :columns="columns"
                      :datasource="planAndTaskTree"
                      height="100%"
                      @row-click="handleTableNodeClick"
                      @row-contextmenu="showTableRightMenu"
                      :toolkit="[]"
                      :default-expand-all="true"
                      cache-key="project-initiationTable"
                      :tree-props="{children: 'children'}"
                      :need-page="false"
                      :indent="0">


                      <template v-slot:name="{ row }">
                        <span v-if="!row.children.length&&row.level==2"
                              style="margin-left: 25px;display: inline-block"></span>
                        <span class="dot" v-if="row.milepost=='1'"></span>
                        <span class="name"> {{ row.name }}</span>
                      </template>
                      <template v-slot:type="{ row }">
                        <el-tag v-if="row.type==0" type="info">计划</el-tag>
                        <el-tag v-else-if="row.type==1" type="info">计划节点</el-tag>
                        <el-tag v-else-if="row.type==2" type="info">任务</el-tag>
                      </template>
                      <template v-slot:speedPercent="{ row }">
                        <el-progress style="padding: 0 5px" :stroke-width="20" text-color="#606266" :text-inside="true"
                                     :percentage="row.speedPercent||0"
                                     :color="customColorMethod"></el-progress>

                        <!--                        planFinishAPI,
                              planPauseAPI,
                              planStartupAPI,
                              planTerminationAPI,
                              planStageFinishAPI,
                              planStagePauseAPI,
                              planStageStartupAPI,
                              planStageTerminationAPI,-->
                        <vue-context-menu :transferIndex="0"
                                          :class="'vue-contextmenuName-'+row.name "
                                          v-if="row.name== contextTableMenuData.menuName"
                                          :contextMenuData="contextTableMenuData"
                                          @addPlan="()=> handleAddPlan('add','',row,'plan')"
                                          @editPlan="()=> handleAddPlan('edit','',row,'plan')"
                                          @removePlan="()=> handleRemovePlan([row.id])"
                                          @terminationPlan="()=> handleStatus(planTerminationAPI,'确定终止该计划吗？','',row)"
                                          @pausePlan="()=> handleStatus(planPauseAPI,'确定暂停该计划吗','',row)"
                                          @startupPlan="()=> handleStatus(planStartupAPI,'确定启动该计划吗','',row)"
                                          @finishPlan="()=> handleStatus(planFinishAPI,'确定完成该计划吗','',row)"
                                          @terminationPlanStage="()=> handleStatus(planStageTerminationAPI,'确定终止该计划节点吗？','',row)"
                                          @pausePlanStage="()=> handleStatus(planStagePauseAPI,'确定暂停该计划节点吗','',row)"
                                          @startupPlanStage="()=> handleStatus(planStageStartupAPI,'确定启动该计划节点吗','',row)"
                                          @finishPlanStage="()=> handleStatus(planStageFinishAPI,'确定完成该计划节点吗','',row)"
                                          @addTask="()=> handleAddTask('add','',row,'plan')"
                                          @updateTask="()=> handleAddTask('edit','',{...row,type:2},'plan')"
                                          @removeTask="()=> handleRemoveTask([row.id])"
                                          @startTask="()=> handleStartTask(row,1,'是否确定执行该任务？')"
                                          @finishTask="()=> handleStartTask(row,3,'是否确定报工该任务？')"
                                          @pauseTask="()=> handleStartTask(row,2,'是否确定暂停该任务？')"
                                          @terminationTask="()=> handleStartTask(row,4,'是否确定终止该任务？')"
                                          @handleTransfer="()=> handleTransfer(row)"
                                          @handleSubmitDeliverables="()=> handleSubmitDeliverables(row)"
                        ></vue-context-menu>
                      </template>

                    </ele-pro-table>

                  </el-tab-pane>
                  <el-tab-pane label="任务" name="任务" class="el-tab-pane-tree">
                    <ele-pro-table
                      class="el-table"
                      ref="table"
                      row-key="id"
                      :columns="columns"
                      :datasource="taskTree"
                      height="100%"
                      :max-height="500"
                      @row-click="(row)=>handleTableNodeClick({...row,type:2})"
                      @row-contextmenu="(row, column, event)=>showTableRightMenu({...row,type:2}, column, event,'任务')"
                      :toolkit="[]"
                      :default-expand-all="true"
                      cache-key="project-initiationTable"
                      :tree-props="{children: 'children'}"
                      :need-page="false"
                      :indent="0">
                      <template v-slot:name="{ row }">
                        <span v-if="!row.children.length&&row.level==1"
                              style="margin-left: 25px;display: inline-block"></span>
                        <span class="dot" v-if="row.milepost=='1'"></span>
                        <span class="name"> {{ row.name }}</span>
                      </template>
                      <template v-slot:type="{ row }">
                        <el-tag type="info">任务</el-tag>
                      </template>
                      <template v-slot:speedPercent="{ row }">
                        <el-progress style="padding: 0 5px" :stroke-width="20" text-color="#606266" :text-inside="true"
                                     :percentage="row.speedPercent||0"
                                     :color="customColorMethod"></el-progress>
                        <vue-context-menu :transferIndex="0"
                                          :class="'vue-contextmenuName-任务'+row.name "
                                          v-if="'任务'+row.name== contextTableMenuData.menuName"
                                          :contextMenuData="contextTableMenuData"
                                          @addTask="()=> handleAddTask('add','',{...row,type:2},'plan')"
                                          @updateTask="()=> handleAddTask('edit','',{...row,type:2},'plan')"
                                          @removeTask="()=> handleRemoveTask([row.id])"
                                          @startTask="()=> handleStartTask(row,1,'是否确定执行该任务？')"
                                          @finishTask="()=> handleStartTask(row,3,'是否确定报工该任务？')"
                                          @pauseTask="()=> handleStartTask(row,2,'是否确定暂停该任务？')"
                                          @terminationTask="()=> handleStartTask(row,4,'是否确定终止该任务？')"
                                          @handleTransfer="()=> handleTransfer(row)"
                                          @handleSubmitDeliverables="()=> handleSubmitDeliverables(row)"
                        ></vue-context-menu>
                      </template>
                    </ele-pro-table>
                  </el-tab-pane>
                  <!--                  <el-tab-pane label="项目团队" name="项目团队" class="el-tab-pane-tree">-->
                  <!--                    <team-info-table ref="deliverablesInfoTable" dialog-type="view"-->
                  <!--                                     :dialogForm="teamForm"></team-info-table>-->
                  <!--                  </el-tab-pane>-->
                  <!--                  <el-tab-pane label="项目看板" name="项目看板" class="el-tab-pane-tree">-->


                  <!--                  </el-tab-pane>-->

                </el-tabs>

              </div>
              <template v-slot:content>
                <el-tabs
                  v-if="isShow"
                  v-model="attrActiveName"
                  class="tab-box_2"
                  type="border-card"
                >
                  <el-tab-pane label="属性" name="属性">
                    <!--currentTableNodeData-->
                    <plan-form ref="planForm" v-if="[0, 1].includes(currentTableNodeData.type)" dialog-type="view"
                               :dialogForm="rightForm" :deptList="deptList"
                               :deptTreeList="deptTreeList"></plan-form>

                    <base-form ref="baseForm" v-if="[2].includes(currentTableNodeData.type)" dialog-type="view"
                               :dialogForm="rightForm" :deptList="deptList"
                               :deptTreeList="deptTreeList"></base-form>
                  </el-tab-pane>
                  <el-tab-pane v-if="[0, 1].includes(currentTableNodeData.type)" label="计划节点" name="计划节点">
                    <plan-info-table ref="planInfoTable" dialog-type="view" :dialogForm="rightForm" :deptList="deptList"
                                     :deptTreeList="deptTreeList"></plan-info-table>
                  </el-tab-pane>
                  <el-tab-pane v-if="[2].includes(currentTableNodeData.type)" label="交付物" name="交付物"
                               class="el-tab-pane-tree">
                    <submit-deliverables-info-table ref="deliverablesInfoTable" :dictList="dictList" dialog-type="view"
                                                    :dialogForm="rightForm"></submit-deliverables-info-table>
                  </el-tab-pane>

                </el-tabs>
              </template>
            </ele-split-layout>


          </template>
        </ele-split-layout>

      </div>
    </el-card>

    <add-BOM-dialog v-if="addBOMDialogFlag" ref="addBOMDialogRef"
                    :addBOMDialogFlag.sync="addBOMDialogFlag"
                    :treeList="treeList"
                    @reload="reload"></add-BOM-dialog>
    <!-- 新增计划 -->
    <add-plan-dialog v-if="addPlanDialogFLag" @reload="reload" :addOrEditDialogFlag.sync="addPlanDialogFLag"
                     ref="addPlanDialogRef"></add-plan-dialog>
    <plan-detail-dialog v-if="planDetailDialogFlag" :detailDialogFlag.sync="planDetailDialogFlag"
                        ref="planDetailDialogRef"></plan-detail-dialog>
    <!-- 编辑弹窗 -->
    <add-task-dialog v-if="addTaskDialogFlag" @reload="reload" :addOrEditDialogFlag.sync="addTaskDialogFlag"
                     ref="addTaskDialogRef"></add-task-dialog>
    <task-detail-dialog v-if="taskDetailDialogFlag" :detailDialogFlag.sync="taskDetailDialogFlag"
                        ref="taskDetailDialogRef"></task-detail-dialog>
    <transfer-dialog ref="transferDialogRef" v-if="transferDialogFlag" @reload="reload"
                     :transferDialogFlag.sync="transferDialogFlag"></transfer-dialog>
    <submit-deliverables-dialog ref="submitDeliverablesDialogRef" v-if="submitDeliverablesDialogFlag"
                                :submitDeliverablesDialogFlag.sync="submitDeliverablesDialogFlag" @reload="reload"></submit-deliverables-dialog>
    <!-- 编辑弹窗 -->
    <addOrEditProjectDialog v-if="addOrEditProjectDialogFlag" @reload="reload"
                            :addOrEditDialogFlag.sync="addOrEditProjectDialogFlag"
                            ref="addOrEditProjectDialogRef"></addOrEditProjectDialog>
  </div>
</template>

<script>
import {
  projectsBomDeleteAPI,
  projectsBomFinishAPI,
  projectsBomPauseAPI,
  projectsBomStartupAPI,
  projectsBomTerminationAPI
} from '@/api/project-manage/BOM.js';
import Attribute from "@/views/BOMmanage/components/attribute.vue";
import BOMBaseForm from "@/views/BOMmanage/components/BOMBaseForm.vue";
import addBOMDialog from "@/views/BOMmanage/components/addBOMDialog.vue";
import {
  getPlanAndTaskTreeById,
  getTaskTreeById,
  projectsFinishAPI,
  projectsPauseAPI,
  projectsStageDeleteAPI,
  projectsStageFinishAPI,
  projectsStagePauseAPI,
  projectsStageStartupAPI,
  projectsStageTerminationAPI,
  projectsStartupAPI,
  projectsTerminationAPI
} from "@/api/project-manage";
import projectForm from "@/views/project-manage/project-initiation/components/project-form.vue";
import {listOrganizations} from "@/api/system/organization";
import {projectsTeamGetByIdAPI, projectsTeamPageAPI} from "@/api/project-manage/team";
import PlanCard from "@/views/BOMmanage/components/planCard.vue";
import addPlanDialog from "@/views/project-manage/planManage/components/addOrEditDialog.vue";
import planDetailDialog from "@/views/project-manage/planManage/components/detailDialog.vue";
import taskDetailDialog from "@/views/project-manage/task-manage/components/detailDialog.vue";
import planForm from "@/views/project-manage/planManage/components/plan-form.vue";
import {
  getTargetPlanTreeAPI,
  planFinishAPI,
  planPauseAPI,
  planStageFinishAPI,
  planStagePauseAPI,
  planStageStartupAPI,
  planStageTerminationAPI,
  planStartupAPI,
  planTerminationAPI,
  projectsPlanDeleteAPI,
  projectsPlanGetByIdAPI
} from "@/api/project-manage/plan";
import {deepClone} from "@/utils";
import planInfoTable from "@/views/project-manage/planManage/components/planInfoTable.vue";
import BaseForm from "@/views/project-manage/task-manage/components/base-form.vue";
import {projectsTaskDeleteAPI, projectsTaskGetByIdAPI, projectsTaskOpRation} from "@/api/project-manage/task";
import submitDeliverablesInfoTable from "@/views/project-manage/task-manage/components/submitDeliverablesInfoTable.vue";
import {getByCode} from "@/api/system/dictionary-data";
import teamInfoTable from "@/views/project-manage/team-manage/components/team-Info-table.vue";
import addTaskDialog from "@/views/project-manage/task-manage/components/addOrEditDialog.vue";
import {proStatusEnum, reviewStatusEnum} from "@/enum/dict";
import transferDialog from "@/views/project-manage/task-manage/components/transferDialog.vue";
import submitDeliverablesDialog from "@/views/project-manage/task-manage/components/submitDeliverablesDialog.vue";
import addOrEditProjectDialog from "@/views/project-manage/project-initiation/components/addOrEditDialog.vue";

export default {
  name: 'BOMDetails',
  components: {
    addOrEditProjectDialog,
    submitDeliverablesDialog,
    transferDialog,
    addTaskDialog,
    teamInfoTable,
    submitDeliverablesInfoTable,
    BaseForm,
    planInfoTable,
    planForm,
    taskDetailDialog,
    planDetailDialog,
    addPlanDialog,
    PlanCard,
    projectForm,
    BOMBaseForm,
    Attribute,
    addBOMDialog,
  },
  data() {
    return {
      projectsFinishAPI,
      projectsPauseAPI,
      projectsStartupAPI,
      projectsTerminationAPI,
      projectsBomFinishAPI,
      projectsBomPauseAPI,
      projectsBomStartupAPI,
      projectsBomTerminationAPI,
      projectsStageFinishAPI,
      projectsStagePauseAPI,
      projectsStageStartupAPI,
      projectsStageTerminationAPI,
      planFinishAPI,
      planPauseAPI,
      planStartupAPI,
      planTerminationAPI,
      planStageFinishAPI,
      planStagePauseAPI,
      planStageStartupAPI,
      planStageTerminationAPI,
      activeName: '基本信息',
      attrActiveName: '属性',
      active: 0,
      contextMenuData: {
        menuName: '',
        axis: {
          x: null,
          y: null
        }, // 鼠标位置
        menulists: [],
      },
      contextTableMenuData: {
        menuName: '',
        axis: {
          x: null,
          y: null
        }, // 鼠标位置
        menulists: [],
      },
      currentNodeData: {},
      planAndTaskTree: [],
      taskTree: [],
      deptList: [],
      deptTreeList: [],
      planStepList: ['待审核', '审核中', '执行中', '已完成'],
      teamList: [],
      current: {},
      dialogForm: {},
      rightForm: {},
      teamForm: {},
      dictList: {},
      currentTableNodeData: {},
      treeList: [],
      isShow: false,
      treeLoading: false,
      addBOMDialogFlag: false,
      addPlanDialogFLag: false,
      addTaskDialogFlag: false,
      planDetailDialogFlag: false,
      taskDetailDialogFlag: false,
      transferDialogFlag: false,
      submitDeliverablesDialogFlag: false,
      addOrEditProjectDialogFlag: false,
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      loading: false,
      filterText: null,
      categoryId: 1,
      loadingInstance: null,
      treeId: null,
      dialogType: null,
      mainPlanRow: {},

    };
  },
  watch: {
    filterText(val) {
      this.$refs.treeRef.filter(val);
    }
  },
  computed: {
    columns() {
      return [
        {
          columnKey: 'index',
          label: '序号',
          type: 'index',
          width: 55,
          align: 'center',
          showOverflowTooltip: true,
        },
        {
          label: '名称',
          prop: 'name',
          showOverflowTooltip: true,
          minWidth: 180,
          slot: 'name',
        },
        {
          label: '类型名称',
          prop: 'type',
          showOverflowTooltip: true,
          minWidth: 80,
          align: 'center',
          slot: 'type',

        },
        {
          label: '预计开始时间',
          prop: 'planStartDate',
          formatter: (val) => {
            return val.planStartDate?.split(' ')[0]
          },
          showOverflowTooltip: true,
          minWidth: 120,
          align: 'center',
        },
        {
          label: '预计结束时间',
          prop: 'planEndDate',
          formatter: (val) => {
            return val.planEndDate?.split(' ')[0]
          },
          showOverflowTooltip: true,
          minWidth: 120,
          align: 'center',
        },
        {
          label: '预计工期(天)',
          prop: 'planDay',
          showOverflowTooltip: true,
          minWidth: 120,
          align: 'center',
        },
        {
          label: '实际开始时间',
          prop: 'realStartTime',
          // formatter: (val) => {
          //   return val.realStartTime?.split(' ')[0]
          // },
          showOverflowTooltip: true,
          minWidth: 150,
          align: 'center',
        },
        {
          label: '实际结束时间',
          prop: 'realEndTime',
          // formatter: (val) => {
          //   return val.realEndTime?.split(' ')[0]
          // },
          showOverflowTooltip: true,
          minWidth: 150,
          align: 'center',
        },
        {
          label: '实际工期(天)',
          prop: 'realDay',
          showOverflowTooltip: true,
          minWidth: 120,
          align: 'center',
        },
        {
          label: '负责人',
          prop: 'responsibleUserName',
          showOverflowTooltip: true,
          minWidth: 100,
          align: 'center',
        },
        {
          prop: 'processStatus',
          label: '审核状态',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 100,
          formatter: (_row, _column, cellValue) => {
            return reviewStatusEnum[_row.processStatus]?.label;
          }
        },
        {
          prop: 'status',
          label: '状态',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 100,
          formatter: (_row, _column, cellValue) => {
            return proStatusEnum[_row.status]?.label;
          }
        },
        {
          label: '进度',
          prop: 'speedPercent',
          showOverflowTooltip: false,
          minWidth: 120,
          align: 'center',
          slot: 'speedPercent'
        },

      ]
    }
  },
  mounted() {
    this.activeName = '基本信息'
    this.attrActiveName = '属性'
    this.isShow = false
    if (this.$route.query.row) {
      this.mainPlanRow = JSON.parse(this.$route.query.row);
      this.initData();
    }
    this.getDeptList();
    this.getTeamList();
    this.getDictList('pro_files_approve_type')
    this.getDictList('deliverables_type')
  },
  activated() {
    if (this.$route.query.row) {
      this.mainPlanRow = JSON.parse(this.$route.query.row);
      this.initData();
    }
  },
  methods: {
    handleTabs1(val) {
      this.activeName = val.label
      this.attrActiveName = '属性'
      this.isShow = false
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    async getDictList(code) {
      let {data: res} = await getByCode(code)
      this.dictList[code] = res.map(item => {
        let values = Object.keys(item)
        return {
          value: values[0],
          label: item[values[0]]
        }
      })
    },
    initData() {
      this.getTreeData();
    },
    // 获取部门数据
    getDeptList() {
      listOrganizations().then((list) => {
        this.deptList = list;
        this.deptTreeList = this.$util.toTreeData({
          data: list,
          idField: 'id',
          parentIdField: 'parentId'
        });
        console.log(this.deptTreeList);
      });
    },
    getTeamList() {
      projectsTeamPageAPI(
        {
          pageNum: 1,
          size: 999
        }
      ).then((list) => {
        this.teamList = list;
      });
    },
    handleUpdateProject(node, data, type) {
      this.addOrEditProjectDialogFlag = true;
      this.$nextTick(() => {
        this.$refs.addOrEditProjectDialogRef.init(data, type)
      })
    },
    bomRemove(node, data) {
      let message = data.children.length ? '当前节点包含子节点，是否确认删除?' : '是否确认删除?'
      this.$confirm(message, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const loading = this.$loading({lock: true});
          await projectsBomDeleteAPI([data.id])
          loading.close();
          this.$message.success('删除成功');
          await this.getTreeData();
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
    },
    stageRemove(node, data) {
      let message = data.children.length ? '当前节点包含子节点，是否确认删除?' : '是否确认删除?'
      this.$confirm(message, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const loading = this.$loading({lock: true});
          await projectsStageDeleteAPI([data.id])
          loading.close();
          this.$message.success('删除成功');
          await this.getTreeData();
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
    },

    back() {
      this.$router.go(-1);
    },
    async validateForm() {
      return Promise.all([new Promise((resolve, reject) => {
        this.$refs.BOMBaseFormRef.getValidaValue((valid) => {
          if (!valid) {
            reject(false);
          } else {
            resolve(true);
          }
        })
      })]).catch(() => {
        this.$message.warning('请先填写完整信息');
        return Promise.reject(false);
      });
    },

    addOrEditBOM(type, node, data) {
      this.addBOMDialogFlag = true;
      this.$nextTick(() => {
        this.$refs.addBOMDialogRef.init(data, type);
      })
    },
    handleAddPlan(type, node, data, sourceName = 'project') {
      this.addPlanDialogFLag = true;
      let params = {
        projectId: data.projectId,
        projectStageId: data.projectStageId,
        projectBomId: data.projectBomId,
        parentPlanId: data.id,
        id: data.id
      }

      this.$nextTick(() => {

        this.$refs.addPlanDialogRef.init(params, type)
      })
    },
    async handleStatus(API, msg, node, row) {
      this.$confirm(msg, '提示', {
        type: 'warning'
      }).then(async () => {
        await API(row.id)
        this.$message.success('操作成功');
        this.reload();
      }).catch(() => {
      });
    },
    //报工/执行
    async handleStartTask(row, afterStatus, msg) {
      this.$confirm(msg, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let params = {
          id: row.id,
          afterStatus: afterStatus,
          status: row.status
        }
        await projectsTaskOpRation(params)
        this.$message.success('操作成功');
        this.reload();
      }).catch(() => {
      });
    },
    handleRemovePlan(ids) {
      this.$confirm('此操作将永久删除该计划, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const loading = this.$loading({lock: true});
        projectsPlanDeleteAPI(ids)
          .then((res) => {
            loading.close();
            this.$message.success('删除成功');
            this.reload();
          })
          .catch((e) => {
            loading.close();
            // this.$message.error(e.message);
          });
      })

    },
    /* 删除 */
    handleRemoveTask(ids) {
      this.$confirm('此操作将永久删除该任务, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const loading = this.$loading({lock: true});
        projectsTaskDeleteAPI(ids)
          .then((res) => {
            loading.close();
            this.$message.success('删除成功');
            this.reload();
          })
          .catch((e) => {
            loading.close();
            // this.$message.error(e.message);
          });
      }).catch(() => {
      });

    },
    /*  */
    handleAddTask(type, node, data, sourceName = 'project') {
      this.addTaskDialogFlag = true;
      let params = {}
      switch (data.type) {
        case 0:
          params = {
            targetPlanId: data.id,
            projectId: data.projectId,
            projectStageId: data.projectStageId,
            projectBomId: data.projectBomId,

          }
          break;
        case 1:
          params = {
            targetPlanId: data.parentId,
            projectId: data.projectId,
            projectStageId: data.projectStageId,
            projectBomId: data.projectBomId,
            planStageId: data.id,
          }
          break;
        case 2:
          params = {
            targetPlanId: data.targetPlanId,
            projectId: data.projectId,
            projectStageId: data.projectStageId,
            projectBomId: data.projectBomId,
            planStageId: data.planStageId,
            taskId: data.id,
            id: type !== 'add' ? data.id : '',
          }
          break;
        default:
          params = {
            targetPlanId: data.id,
            projectId: data.projectId,
            projectStageId: data.projectStageId,
            projectBomId: data.projectBomId,
          }
          break;
      }
      this.$nextTick(() => {
        this.$refs.addTaskDialogRef.init(params, type)
      })
    },
    async getTreeData() {
      try {
        this.treeLoading = true;
        let API = getTargetPlanTreeAPI
        let params = {
          id: this.mainPlanRow.id,
          projectBomId: this.mainPlanRow.projectBomId,
          projectId: this.mainPlanRow.projectId,
          projectStageId: this.mainPlanRow.projectStageId,
          rootParentId: this.mainPlanRow.parentId,
        }
        this.treeList = await API(params);
        this.$nextTick(() => {
          if (this.treeList.length) {
            // 默认高亮第一个
            this.$refs.treeRef.setCurrentKey(this.treeList[0]?.id);
            this.handleNodeClick(this.treeList[0]);
          }
        });
      } catch (error) {
      }
      this.treeLoading = false;
    },
    getIconClass(node, data) {
      switch (data.type) {
        case 2:
          return node.expanded ? 'el-icon-document' : 'el-icon-tickets';
        case 1:
          return node.expanded ? 'el-icon-document' : 'el-icon-tickets';
        case 0:
          return node.expanded ? 'el-icon-folder-opened' : 'el-icon-folder';
        default :
          return ''
      }
    },
    showRightMenu(event, node, data) {
      this.contextMenuData.menuName = data.id+'_'+data.name+'_rightMenu'
      this.$nextTick(() => {
        let menuList = [...document.querySelectorAll('.vue-contextmenu-listWrapper')]
        menuList.forEach(item => {
          item.style.display = 'none'
        })

        event.preventDefault();
        const x = event.clientX;
        const y = event.clientY;
        this.contextMenuData.axis = {x, y}

        this.contextMenuData.menulists = [
          {
            fnHandler: 'addPlan',
            icoName: 'fa el-icon-plus',
            btnName: '新建子计划',
            disabled: this.disableToAddPlan(data)
          },
          {
            fnHandler: 'addTask',
            icoName: 'fa el-icon-plus',
            btnName: '新建任务',
            disabled: this.disableToAddTask(data)
          },
          {
            fnHandler: 'editPlan',
            icoName: 'fa el-icon-edit',
            btnName: '修改',
            disabled: [1, 2].includes(data.processStatus)
          },
          {
            fnHandler: 'onRemove',
            icoName: 'fa el-icon-delete',
            btnName: '删除',
            disabled: [1, 2].includes(data.processStatus)
          },
          {
            fnHandler: 'handleFinish',
            icoName: 'fa el-icon-success',
            btnName: '完成',
            disabled: this.disableToFinish(data)
          },
          {
            fnHandler: 'handlePause',
            icoName: 'fa el-icon-video-pause',
            btnName: '暂停',
            disabled: this.disableToPause(data)
          },
          {
            fnHandler: 'handleStartup',
            icoName: 'fa el-icon-video-play',
            btnName: '启动',
            disabled: this.disableToStartup(data)
          },
          {
            fnHandler: 'handleTermination',
            icoName: 'fa el-icon-error',
            btnName: '终止',
            disabled: this.disableToTermination(data)
          },
        ]
      })

    },
    disableToAddBOM(row) {
      return ![2].includes(row.processStatus) || ![0, 1].includes(row.status)
    },
    disableToAddPlan(row) {
      return ![0,1,2,3].includes(row.processStatus) || ![0, 1].includes(row.status)
    },
    disableToAddTask(row) {
      return ![0,1,2,3].includes(row.processStatus) || ![0, 1].includes(row.status)
    },
    disableToFinish(row) {
      return ![2].includes(row.processStatus) || [4, 2, 3].includes(row.status)
    },
    disableToPause(row) {
      return ![2].includes(row.processStatus) || [4, 2, 3].includes(row.status)
    },
    disableToStartup(row) {
      return ![2].includes(row.processStatus) || [4, 1, 0, 3].includes(row.status)
    },
    disableToTermination(row) {
      return ![2].includes(row.processStatus) || [4, 3].includes(row.status)
    },
    handleNodeClick(data) {
      this.treeId = data.id;
      this.currentNodeData = data
      this.$nextTick(async () => {
        this.dialogForm = await projectsPlanGetByIdAPI(data.id)
        this.dialogForm.responsibleUserIds = this.dialogForm.responsibleUserList?.map(i => i.userName) || []
        this.dialogForm.planStageList?.forEach((item, index) => {
          let userNames = item.responsibleUserList.map(i => i.userName) || []
          this.$set(item, 'responsibleUserNames', userNames.join(','))
        })
        this.getPlanAndTaskTree(data)
        this.getTaskTree(data)
        this.planStepList = ['待审核', '审核中', '执行中', '已完成']
        if (data.processStatus == 0) {
          this.active = 0
          return
        }
        if ([1, 3].includes(data.processStatus)) {
          let stepName = data.processStatus == 3 ? '审核未通过' : '审核中'
          this.planStepList.splice(1, 1, stepName)
          this.active = 1
          return
        }
        if ([0, 1, 2].includes(data.status)) {
          let stepName = data.status == 1 ? '执行中' : data.status == 2 ? '暂停中' : '未开始'
          this.planStepList.splice(2, 1, stepName)
          this.active = 2
          return
        }
        if ([3, 4].includes(data.status)) {
          let stepName = data.status == 3 ? '已完成' : '已终止'
          this.planStepList.splice(3, 1, stepName)
          this.active = 4
          return
        }
        // await this.getTeamInfo(this.dialogForm.teamId)
      })



    },
    async getPlanAndTaskTree(data) {
      let params = {
        id: data.id,
      }
      let res = await getPlanAndTaskTreeById(params)
      this.planAndTaskTree = res[0]?.children || []
    },
    async getTaskTree(data) {
      let params = {
        planId: data.id,
      }
      this.taskTree = await getTaskTreeById(params)
    },

    reload(where) {
      this.getTreeData();
    },
    setTableCell({row}) {
      console.log(row.level);
      if (row.level === 1) return '' //
      return {marginLeft: (row.level + 3) + 'px'} //
    },
    handleTableNodeClick(row) {
      this.isShow = true;
      this.attrActiveName = '属性'
      this.currentTableNodeData = row;
      switch (row.type) {
        case 0:
          this.getProjectPlanInfo(row.id)
          break;
        case 1:
          this.getProjectPlanInfo(row.targetPlanId)
          break;
        case 2:
          this.getProjectTaskInfo(row.id)
          break;
      }
    },
    showTableRightMenu(row, column, event,name='') {
      this.contextTableMenuData.menuName = name+row.name
      this.$nextTick(() => {
        let menuList = [...document.querySelectorAll('.vue-contextmenu-listWrapper')]
        menuList.forEach(item => {
          item.style.display = 'none'
        })

        event.preventDefault();
        const x = event.clientX;
        const y = event.clientY;
        this.contextTableMenuData.axis = {x, y}
        switch (row.type) {
          case 0:
            this.contextTableMenuData.menulists = [
              {
                fnHandler: 'addPlan',
                icoName: 'fa el-icon-plus',
                btnName: '新建子计划',
                disabled: this.disableToAddPlan(row)
              },
              {
                fnHandler: 'addTask',
                icoName: 'fa el-icon-plus',
                btnName: '新建任务',
                disabled: this.disableToAddTask(row)
              },
              {
                fnHandler: 'editPlan',
                icoName: 'fa el-icon-edit',
                btnName: '修改',
                disabled: [1, 2].includes(row.processStatus) || ![0].includes(row.status)

              },
              {
                fnHandler: 'removePlan',
                icoName: 'fa el-icon-delete',
                btnName: '删除',
                disabled: [1, 2].includes(row.processStatus) || ![0].includes(row.status)
              },
              {
                fnHandler: 'finishPlan',
                icoName: 'fa el-icon-success',
                btnName: '完成',
                disabled: this.disableToFinish(row)
              },
              {
                fnHandler: 'pausePlan',
                icoName: 'fa el-icon-video-pause',
                btnName: '暂停',
                disabled: this.disableToPause(row)
              },
              {
                fnHandler: 'startupPlan',
                icoName: 'fa el-icon-video-play',
                btnName: '启动',
                disabled: this.disableToStartup(row)
              },
              {
                fnHandler: 'terminationPlan',
                icoName: 'fa el-icon-error',
                btnName: '终止',
                disabled: this.disableToTermination(row)
              },
            ]
            break
          case 1:
            this.contextTableMenuData.menulists = [
              {
                fnHandler: 'addTask', icoName: 'fa el-icon-plus', btnName: '新建任务',
                disabled: this.disableToAddTask(row)
              },
              // {fnHandler: 'editBOM', icoName: 'fa el-icon-edit', btnName: '修改'},
              // {fnHandler: 'removeBom', icoName: 'fa el-icon-delete', btnName: '删除'},
              {
                fnHandler: 'finishPlanStage', icoName: 'fa el-icon-success', btnName: '完成',
                disabled: this.disableToFinish(row)
              },
              {
                fnHandler: 'pausePlanStage', icoName: 'fa el-icon-video-pause', btnName: '暂停',
                disabled: this.disableToPause(row)
              },
              {
                fnHandler: 'startupPlanStage', icoName: 'fa el-icon-video-play', btnName: '启动',
                disabled: this.disableToStartup(row)
              },
              {
                fnHandler: 'terminationPlanStage', icoName: 'fa el-icon-error', btnName: '终止',
                disabled: this.disableToTermination(row)
              },
            ]
            break
          case 2:
            this.contextTableMenuData.menulists = [
              {
                fnHandler: 'addTask', icoName: 'fa el-icon-plus', btnName: '新建任务',
                disabled: [4, 2, 3].includes(row.status)
              },
              {
                fnHandler: 'updateTask', icoName: 'fa el-icon-edit', btnName: '修改',
                disabled: [4, 2, 3, 1].includes(row.status)
              },
              {
                fnHandler: 'removeTask', icoName: 'fa el-icon-delete', btnName: '删除',
                disabled: [4, 2, 3, 1].includes(row.status)
              },
              {
                fnHandler: 'startTask',
                icoName: 'fa el-icon-video-play',
                btnName: '执行',
                disabled: [4, 3, 1].includes(row.status)
              },

              {
                fnHandler: 'handleSubmitDeliverables',
                icoName: 'fa el-icon-folder-add',
                btnName: '交付物提交',
                disabled: [4, 3, 0, 2].includes(row.status)
              },
              {
                fnHandler: 'finishTask',
                icoName: 'fa el-icon-success',
                btnName: '报工',
                disabled: !([1].includes(row.status) && row.ifFilesAllFinish == 1)
              },
              {
                fnHandler: 'pauseTask', icoName: 'fa el-icon-video-pause', btnName: '暂停',
                disabled: this.disableToPause(row)
              },
              {
                fnHandler: 'terminationTask', icoName: 'fa el-icon-error', btnName: '终止',
                disabled: this.disableToTermination(row)
              },
              {
                fnHandler: 'handleTransfer', icoName: 'fa el-icon-position', btnName: '转派',
                disabled: !([1].includes(row.status))
              },

            ]
            break
        }
        console.log(this.contextTableMenuData.menulists);
      })
    },
    //转派
    handleTransfer(row) {
      this.transferDialogFlag = true;
      this.$nextTick(() => {
        this.$refs.transferDialogRef.init(row)
      })
    },
    /* 交付物提交 */
    handleSubmitDeliverables(row = {}, type) {
      this.submitDeliverablesDialogFlag = true;
      this.$nextTick(() => {
        this.$refs.submitDeliverablesDialogRef.init(row, type)
      })
    },
    async getProjectTaskInfo(id = '') {
      this.rightForm = await projectsTaskGetByIdAPI(id)
      this.rightForm.type = this.rightForm.type + ''
      this.rightForm.responsibleUserIds = this.rightForm.responsibleUserList?.map(i => i.userName) || []
    },
    async getProjectPlanInfo(id = '') {
      let res = await projectsPlanGetByIdAPI(id)
      this.rightForm = deepClone(res)
      this.rightForm.responsibleUserIds = this.rightForm.responsibleUserList?.map(i => i.userName) || []
      this.rightForm.planStageList?.forEach((item, index) => {
        let userNames = item.responsibleUserList.map(i => i.userName) || []
        this.$set(item, 'responsibleUserNames', userNames.join(','))
      })
      // await this.changeProject(this.dialogForm.projectId)
    },
    async getTeamInfo(teamId='') {
      if(teamId){
        this.teamForm = await projectsTeamGetByIdAPI(teamId)
      }
    },

    // 每一级字体变小
    fontSize(node, data) {
      if (node.level === 1 || node.level === 2) return 'font-size:14px' // 一二级字体
      return 'font-size:' + (13) + 'px' // 三级以下字号减小
    },
    uploadFile() {
      this.$refs.importDialogRef.open();
    },
    customColorMethod(percentage) {
      if (percentage < 30) {
        return '#b6b6b6';
      } else if (percentage < 70) {
        return '#b3e496';
      } else {
        return '#67c23a';
      }
    },
  }
};
</script>
<style lang="scss" scoped>
.ele-body {
  display: flex;
  flex-direction: column;
  height: 100%;


  .card_2_box {
    flex: 1;

    ::v-deep .el-card__body {
      height: 100%;

      .card_2_box_content {
        height: 100%;

        .ele-split-panel {
          height: 100%;

          .el_tree_box {

            padding: 0 4px 0 0;
            height: 100%;
            border: none;
            border-right: 1px solid #e8eaec;
            //border-radius: 3px;
            .el-tree-node {
              .el-tree-node__children {
                height: 100%;
                overflow: auto
              }
            }

          }
        }

      }

    }

  }
}

.card_2_layout_content {
  display: flex;
  flex-direction: column;
  height: 100%;

  ::v-deep .card_2_1_box {
    height: 50px;
    width: 100%;
    margin-bottom: 10px;
    .border-box-content {
      height: 100%;
      width: 100%;
      background: rgba(203, 203, 203, 0.12);
      border-radius: 3px;

      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;


      .card_2_1_box_div_1 {
        flex: 1;
        height: 50px;
        display: flex;
        align-items: center;
        .el-steps--simple {
          border-radius: 0 !important;
          background: none;
          width: 100%;
        }

        .is-success {
          color: rgb(103, 103, 103) !important;

          .el-step__icon {
            border-color: rgb(103, 103, 103) !important
          }

          .el-icon-check:before {
            font-size: 14px;
            line-height: 14px;
            font-weight: bold;
            color: rgb(103, 103, 103) !important;
          }
        }

        .el-step__main {
          .is-process:before {
            content: '';
            background: rgba(182, 182, 182, 0.26);
            height: 30px;
            width: 160px;
            display: block;
            position: absolute;
            border-radius: 15px;
            transform: translate(-40%, -18%);
          }
        }

        .is-process {
          border-color: #f8f8f8 !important;
          font-weight: bold;
        }

        .is-success + .el-step__arrow:before {
          background: rgb(202, 205, 212) !important;
        }

        .is-success + .el-step__arrow:after {
          background: rgb(202, 205, 212) !important;
        }
      }

      .card_2_1_box_div_2 {

        width: 150px;
        margin-right: 10px;
        height: 100%;
        display: flex;
        align-items: center;

        .dv-percent-pond text {
          font-size: 20px !important;
          transform: translate(0%, 8%)
        }
      }
    }

  }


  ::v-deep .tab-box_1 {
    flex: 1;

    .el-tabs__content {
      //padding: 10px;
      height: calc(100% - 45px);
      //overflow: auto;
      padding: 0;
      padding-top: 10px;

      .el-tab-pane {
        height: 100%;
      }
    }
  }

}


::v-deep .project_tree {
  .custom-tree-node {
    display: flex;
    align-items: center;

    .label_img {
      width: 20px;
      height: 20px;
      margin-left: 5px;
    }

    .label {

    }
  }

  .el-tree-node {
    position: relative;
    padding-left: 0px;
  }

  .el-tree-node__children {
    padding-left: 22px;
  }

  // 自定义图标中隐藏自带箭头
  //.el-tree-node__content > .el-tree-node__expand-icon {
  //  position: absolute;
  //  opacity: 0;
  //}
  .el-tree-node__content > .el-tree-node__expand-icon {
    padding: 0;
  }

  // 禁止旋转
  .el-tree .el-tree-node__expand-icon.expanded {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  // 节点高度与边距
  .el-tree-node__content {
    height: 30px;
  }

  .el-tree-node {
    margin: 1px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  //高亮字体颜色
  .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
    color: #ee7355 !important;
    background-color: red !important; // 设置选中背景颜色
  }

  // 设置竖线
  .el-tree-node .is-focusable:before {
    content: "";
    display: inline-block;
    position: absolute;
    left: -15px;
    border-left: 1px solid #f8f8f8;
    height: calc(100%);
  }

  .list-left {
    width: 214px;
    height: auto;
    margin: 10px 0 20px 20px;
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
  }

  // 鼠标移入高亮
  .custom-tree-node:hover {
    //color: #070a0c !important;
  }

  .el-icon-folder-opened, .el-icon-folder, .el-icon-document, .el-icon-tickets {
    display: flex;
    align-items: center;
  }

  .el-icon-document, .el-icon-folder-opened {
    //color: #0e85fa;
  }

  //高亮字体颜色
  .el-tree--highlight-current, .el-tree-node.is-current > .el-tree-node__content {
    color: #f8f8f8 !important;
    background-color: #72b9ff !important; // 设置选中背景颜色
    border-radius: 3px;
  }

  .el-tree-node__content:hover {
    color: #f8f8f8 !important;
    background-color: #b7d6f8 !important; // 设置选中背景颜色
    border-radius: 3px;
  }
}


::v-deep .ele-table-tool-default {
  display: none;
}

::v-deep .ele-split-panel-body {
  .ele-split-panel-side {
    border-bottom: 1px solid #e8e8e8;
  }
}

::v-deep .ele-split-panel-side {
  // border-bottom: 2px solid #e6e8ea;
  height: 100%;


  .tab-box_1 {
    height: 100%;

    .el-tabs__item {
      background: rgba(246, 246, 247, 0.8);
      border-bottom: 1px solid #e6e8ea;
    }

    .is-active.el-tabs__item {
      background: #FFFFFF;
      border-bottom: none;
    }

    .el-table {
      height: calc(100% - 1px);
    }

  }


}
::v-deep .tab-box_2 {
  height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  .el-tabs__content {
    flex: 1;
    .el-tab-pane {
      height: 100%;
    }
  }
}
.current_button {
  background: #096cd7;
  border-color: #096cd7;
  color: #FFFFFF;
}

::v-deep .vue-contextmenu-listWrapper {
  display: block;
  background: #fff !important;
  padding: 4px 0 !important;
  border: 1px solid #dadada;
  border-radius: 7px !important;
  color: #606266;

  .context-menu-list:hover {
    background: rgba(156, 156, 156, 0.2) !important;
    //color: #FFFFFF !important;
  }

  .context-menu-list {
    background: #fff !important;
    width: 100%;
    height: 25px;

    div {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      min-width: 120px;
      width: 100%;
      height: 100%;

      i {
        margin-left: 15px;
      }

      span {
        margin: 0 !important;
        margin-left: 25px !important;
      }
    }
  }
}

::v-deep tr[class^="el-table__row--level"] > td:nth-child(2) > .cell {
  margin-left: 24px;
}

::v-deep .el-table__header-wrapper .el-table__cell {
  .cell {
    text-align: center;
  }
}

@for $i from 1 to 10 {
  ::v-deep .el-table__row--level-#{$i} > td:nth-child(2) > .cell {
    margin-left: #{ $i * 4 +10}px;
    display: flex;
    flex-direction: row;
    align-items: center;
  }
}

.dot {
  border-radius: 50%;
  -webkit-background-clip: text;
  color: #0e85fa;
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 2px;
  text-align: center;
  background: #0e85fa;
}

</style>