kd-aiot-frontend-pro/src/views/BOMmanage/ProjectDetailDialog.vue

<!-- 项目管理--项目信息 -->
<template>
  <el-drawer
    :title="title"
    :visible.sync="visible"
    direction="rtl"
    :append-to-body="true"
    size="100%"
  >
    <el-row :gutter="5">
      <el-col :span="3">
        <el-card class="box-card" style="height: calc(100vh - 56px)">
          <AssetTree
            @handleNodeClick="handleNodeClick1"
            :defaultExpandAll="true"
            code="XM1"
            :isProjects="true"
            :isFirstRefreshTable="false"
            ref="treeList"
            :init="false"
          />
        </el-card>
        <!-- <div style="padding: 5px;">
         
        </div> -->
      </el-col>
      <el-col :span="21">
        <el-card class="box-card">
          <div style="width: 100%">
            <el-row style="font-size: 16px">
              <el-col :span="5" style="color: #1890ff"
                >项目名称：{{ rowData.name }}
              </el-col>
              <el-col :span="5"
                >项目预算：{{
                  rowData.budget
                    ? rowData.budget +
                      this.getDictV('pro_projects_budget_unit', rowData.unit)
                    : ''
                }}
              </el-col>
              <el-col :span="5"
                >项目经理：{{ rowData.responsibleUserName }}
              </el-col>
              <el-col :span="5">项目周期：{{ rowData.cycle }} </el-col>
              <el-col :span="4"
                >项目状态：{{
                  getDictV('pro_projects_status', rowData.status)
                }}</el-col
              >
            </el-row>
          </div>
        </el-card>
        <el-card class="card_2_box card" style="height: calc(100vh - 130px)">
          <el-row :gutter="24">
            <el-col :span="3" style="padding: 0">
              <div class="el_tree_box">
                <div
                  style="
                    margin-bottom: 6px;
                    display: flex;
                    justify-items: flex-start;
                  "
                >
                  <el-button
                    style="width: 50%"
                    type="primary"
                    :class="{ current_button: leftTreeActiveName == 'BOM维度' }"
                    size="small"
                    plain
                    @click="handleLeftTreeActiveName('BOM维度')"
                    >BOM维度
                  </el-button>
                  <el-button
                    style="width: 50%"
                    type="primary"
                    :class="{
                      current_button: leftTreeActiveName == '阶段维度'
                    }"
                    size="small"
                    plain
                    @click="handleLeftTreeActiveName('阶段维度')"
                    >阶段维度
                  </el-button>
                </div>
                <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)"
                      @addChildProject="
                        () => handleUpdateProject(node, data, 'add')
                      "
                      @addStage="() => handleAddStage(node, data, 'add')"
                      @addPlan="() => handleAddPlan('add', node, data)"
                      @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>
                  </div>
                </el-tree>
              </div>
            </el-col>

            <el-col :span="21" style="height: calc(100vh - 170px)">
              <ele-split-layout
                :left-style="{
                  overflow: 'hidden',
                  width: '100%'
                }"
                :vertical="true"
                style="height: calc(100vh - 180px)"
                :min-size="1"
                :resizable="true"
                :responsive="true"
                :width="
                  activeName == '任务' || activeName == '计划'
                    ? '450px'
                    : '100%'
                "
                :right-style="{ overflow: 'hidden' }"
                :allow-collapse="false"
              >
                <div class="card_2_layout_content">
                  <el-tabs
                    v-model="activeName"
                    class="tab-box_1"
                    type="border-card"
                    @tab-click="handleTabs1"
                  >
                    <el-tab-pane label="基本信息" name="基本信息">
                      <div style="padding: 0 10px">
                        <attribute
                          v-if="currentNodeData.type == 1"
                          ref="attributeRef"
                          :dialog-type="dialogType"
                        ></attribute>
                        <project-form
                          v-if="[0, 2].includes(currentNodeData.type)"
                          ref="projectForm"
                          :deptList="deptList"
                          :deptTreeList="deptTreeList"
                          :dialogForm="dialogForm"
                          :teamList="teamList"
                          dialog-type="view"
                        ></project-form>
                      </div>
                    </el-tab-pane>
                    <el-tab-pane
                      v-if="[0, 2].includes(currentNodeData.type)"
                      label="项目阶段"
                      name="项目阶段"
                      class="el-tab-pane-tree"
                    >
                      <project-info-table
                        v-if="[0, 2].includes(currentNodeData.type)"
                        ref="projectInfoTable"
                        :dialog-type="dialogType"
                        :dialogForm="dialogForm"
                        :deptList="deptList"
                        :deptTreeList="deptTreeList"
                        :userList="userList"
                        :responsibleDeptId="responsibleDeptId"
                      ></project-info-table>
                    </el-tab-pane>
                    <el-tab-pane
                      label="计划"
                      name="计划"
                      class="el-tab-pane-tree"
                      style="overflow: scroll"
                    >
                      <div style="padding: 0 10px">
                        <planManageList
                          :tableHeight="'300px'"
                          :projectType="currentNodeData.type"
                          :ids="currentNodeData.id"
                          @handlePlanTableNodeClick="handlePlanTableNodeClick"
                          v-if="refreshPlan"
                        ></planManageList>
                      </div>
                    </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"
                    >
                      <project-statistics></project-statistics>
                    </el-tab-pane> -->
                    <el-tab-pane
                      label="项目审核流程"
                      name="项目审核流程"
                      class="el-tab-pane-tree"
                      style="overflow: scroll; padding-bottom: 30px"
                    >
                      <bpmDetail
                        v-if="dialogForm.processInstanceId && bpmDetailFlag"
                        :id="dialogForm.processInstanceId"
                      ></bpmDetail>
                    </el-tab-pane>
                    <el-tab-pane
                      label="项目行事历"
                      name="项目行事历"
                      class="el-tab-pane-tree"
                    >
                      <projectCalendar
                        ref="projectCalendarRef"
                      ></projectCalendar>
                    </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"
                        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 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>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <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>
    <!-- 阶段弹窗 -->
    <addOrEditStageDialog
      v-if="addOrEditDialogStageFlag"
      @reload="reload"
      :addOrEditDialogStageFlag.sync="addOrEditDialogStageFlag"
      ref="addOrEditStageDialogRef"
    ></addOrEditStageDialog>
  </el-drawer>
</template>
<script>
import AssetTree from '@/components/AssetTree';

import { getUserPage } from '@/api/system/organization';

import p_search from './p_search.vue';
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 {
  getMyProjectsPage,
  getByBomTreeAPI,
  getPlanAndTaskTreeById,
  getProjectStageTree,
  getTaskTreeById,
  projectsFinishAPI,
  projectsGetByIdDetailsAPI,
  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 projectStatistics from '@/views/project-manage/project-statistics/index.vue';
import planForm from '@/views/project-manage/planManage/components/plan-form.vue';
import {
  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';
import bpmDetail from '@/views/bpm/processInstance/detail.vue';

import projectCalendar from '@/views/project-manage/project-calendar/index.vue';
import planManageList from '@/views/project-manage/planManage/index.vue';

import addOrEditStageDialog from '@/views/project-manage/project-initiation/components/addOrEditStageDialog.vue';
import projectInfoTable from '@/views/project-manage/project-initiation/components/projectInfoTable.vue';
export default {
  props: {},
  components: {
    p_search,
    bpmDetail,
    addOrEditProjectDialog,
    submitDeliverablesDialog,
    transferDialog,
    addTaskDialog,
    teamInfoTable,
    submitDeliverablesInfoTable,
    BaseForm,
    planInfoTable,
    planForm,
    taskDetailDialog,
    planDetailDialog,
    addPlanDialog,
    PlanCard,
    projectForm,
    BOMBaseForm,
    Attribute,
    addBOMDialog,
    AssetTree,
    planManageList,
    projectCalendar,
    projectInfoTable,
    addOrEditStageDialog,
    projectStatistics
  },
  data() {
    return {
      responsibleDeptId: '',
      userList: [],
      visible: false,
      title: '项目信息',
      projectsFinishAPI,
      projectsPauseAPI,
      projectsStartupAPI,
      projectsTerminationAPI,
      projectsBomFinishAPI,
      projectsBomPauseAPI,
      projectsBomStartupAPI,
      projectsBomTerminationAPI,
      projectsStageFinishAPI,
      projectsStagePauseAPI,
      projectsStageStartupAPI,
      projectsStageTerminationAPI,
      planFinishAPI,
      planPauseAPI,
      planStartupAPI,
      planTerminationAPI,
      planStageFinishAPI,
      planStagePauseAPI,
      planStageStartupAPI,
      planStageTerminationAPI,
      activeName: '基本信息',
      attrActiveName: '属性',
      leftTreeActiveName: 'BOM维度',
      active: 0,
      contextMenuData: {
        menuName: '',
        axis: {
          x: null,
          y: null
        }, // 鼠标位置
        menulists: []
      },
      contextTableMenuData: {
        menuName: '',
        axis: {
          x: null,
          y: null
        }, // 鼠标位置
        menulists: []
      },
      currentNodeData: {},
      planAndTaskTree: [],
      taskTree: [],
      deptList: [],
      deptTreeList: [],
      projectStepList: ['待立项', '审核中', '执行中', '已完成'],
      teamList: [],
      current: {},
      dialogForm: {},
      rightForm: {},
      teamForm: {},
      dictList: {},
      currentTableNodeData: {},
      treeList: [],
      addOrEditDialogStageFlag: false,
      bpmDetailFlag: false,
      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,

      rowData: {},
      refreshPlan: true
    };
  },
  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: 150,
          align: 'center'
        },
        {
          label: '预计结束时间',
          prop: 'planEndDate',
          formatter: (val) => {
            return val.planEndDate?.split(' ')[0];
          },
          showOverflowTooltip: true,
          minWidth: 150,
          align: 'center'
        },
        {
          label: '预计工期(天)',
          prop: 'planDay',
          showOverflowTooltip: true,
          minWidth: 150,
          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: 150,
          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.leftTreeActiveName = 'BOM维度';
    this.activeName = '基本信息';
    this.attrActiveName = '属性';
    this.isShow = false;
    /*  if (this.$route.query.id) {
        this.initData();
        this.dialogType = this.$route.query.type;
      } */
    this.getDeptList();
    this.getTeamList();
    this.getDictList('pro_files_approve_type');
    this.getDictList('deliverables_type');
    this.getDictList('pro_projects_status');
    this.getDictList('pro_projects_budget_unit');
  },
  /*  activated() {
      if (this.$route.query.id) {
        this.initData();
        this.dialogType = this.$route.query.type;
      }
    }, */
  methods: {
    getDictV(code, val) {
      if (!this.dictList[code]) return '';
      return this.dictList[code].find((item) => item.value == val)?.label;
    },
    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]]
        };
      });
    },
    async open(row) {
      this.rowData = row;
      this.visible = true;
      // 将负责人的列表带给新建项目阶段
      const { list: res } = await getUserPage({
        pageNum: 1,
        size: -1,
        groupId: row.responsibleDeptId
      });
      this.userList = res;
      this.responsibleDeptId = row.responsibleDeptId;

      // -----
      if (this.rowData.id) {
        this.$nextTick(() => {
          this.$refs.treeList.getTreeData('', this.rowData.id);
          this.$refs.projectCalendarRef.init(row.id);
        });
        this.initData();
        this.dialogType = this.rowData.type;
      }
      // this.getLeftData();
    },
    // async getLeftData(where) {
    //   let pp = {
    //     pageNum: 1,
    //     size: 999,
    //     parentId: parent?.id ?? '0',
    //     /*  name: this.rowData.name ?? '', */
    //     ...where
    //   };
    //   const res = await getMyProjectsPage(pp);
    //   this.leftTreeData = res.list;
    // },
    cancel() {
      this.$nextTick(() => {
        this.visible = false;
      });
    },
    handleTabs1(val) {
      this.activeName = val.label;
      this.attrActiveName = '属性';
      this.isShow = false;
      this.bpmDetailFlag = false;
      this.$nextTick(() => {
        this.bpmDetailFlag = true;
      });
    },
    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);
      });
    },
    addChildProject() {},
    addOrEditBOM(type, node, data) {
      this.addBOMDialogFlag = true;
      this.$nextTick(() => {
        this.$refs.addBOMDialogRef.init(data, type);
      });
    },
    handleAddStage(node, data, type) {
      this.addOrEditDialogStageFlag = true;
      this.$nextTick(() => {
        this.$refs.addOrEditStageDialogRef.init(data, type);
      });
    },
    handleAddPlan(type, node, data, sourceName = 'project') {
      this.addPlanDialogFLag = true;
      let params = {};
      if (sourceName == 'plan') {
        params = {
          projectId: data.projectId,
          projectStageId: data.projectStageId,
          projectBomId: data.projectBomId,
          parentPlanId: data.id,
          id: data.id
        };
      } else {
        switch (data.type) {
          case 0:
            params = {
              projectId: data.id
            };
            break;
          case 1:
            params = {
              projectId: data.projectId,
              projectBomId: data.id
            };
            break;
          case 2:
            params = {
              projectId: data.projectId,
              projectStageId: data.id
            };
            break;
        }
      }

      this.$nextTick(() => {
        this.$refs.addPlanDialogRef.init(params, type);
        this.$refs.refreshPlan.datasource();
      });
    },
    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 = {};
      if (sourceName == 'plan') {
        switch (data.type) {
          case 0:
            params = {
              targetPlanId: data.id,
              projectId: data.projectId,
              projectStageId: data.projectStageId
            };
            break;
          case 1:
            params = {
              targetPlanId: data.parentId,
              projectId: data.projectId,
              projectStageId: data.projectStageId,
              planStageId: data.id
            };
            break;
          case 2:
            params = {
              targetPlanId: data.targetPlanId,
              projectId: data.projectId,
              projectStageId: data.projectStageId,
              planStageId: data.planStageId,
              taskId: data.id,
              id: type !== 'add' ? data.id : ''
            };
            break;
        }
      } else {
        switch (data.type) {
          case 0:
            params = {
              projectId: data.id
            };
            break;
          case 1:
            params = {
              projectId: data.projectId,
              projectBomId: data.id
            };
            break;
          case 2:
            params = {
              projectId: data.projectId,
              projectStageId: data.id
            };
            break;
        }
      }
      this.$nextTick(() => {
        this.$refs.addTaskDialogRef.init(params, type);
      });
    },
    async getTreeData() {
      try {
        this.treeLoading = true;
        let API =
          this.leftTreeActiveName == 'BOM维度'
            ? getByBomTreeAPI
            : getProjectStageTree;
        const res = await API(this.rowData.id);
        this.treeList = [res];
        this.$nextTick(() => {
          if (this.treeList.length) {
            // 默认高亮第一个
            this.$refs.treeRef.setCurrentKey(this.treeList[0]?.id);
            this.handleNodeClick(this.treeList[0]);
          }
        });
      } catch (error) {}
      this.treeLoading = false;
    },
    async handleNodeClick1(data) {
      if (data.type == 'projectType') {
        this.rowData = this.dialogForm = await projectsGetByIdDetailsAPI(
          data.id
        );
        this.getTreeData();
        this.$nextTick(() => {
          this.$refs.projectCalendarRef.init(data.id);
        });
      }
    },
    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) {
      if (this.dialogType == 'view') return;
      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 };

        switch (data.type) {
          case 0:
            this.contextMenuData.menulists = [
              {
                fnHandler: 'addChildProject',
                icoName: 'fa el-icon-plus',
                btnName: '新建子项目',
                disabled:
                  this.disableToAddBOM(data) &&
                  this.$hasPermission('pro:projects:save')
              },
              {
                fnHandler: 'addStage',
                icoName: 'fa el-icon-plus',
                btnName: '新建阶段',
                disabled:
                  this.disableToAddBOM(data) &&
                  this.$hasPermission('pro:projects:save')
              },
              {
                fnHandler: 'addBOM',
                icoName: 'fa el-icon-plus',
                btnName: '新建BOM',
                disabled:
                  this.disableToAddBOM(data) &&
                  this.$hasPermission('pro:projects:save')
              },
              {
                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: 'updateProject',
                icoName: 'fa el-icon-edit',
                btnName: '修改',
                disabled:
                  [1, 2].includes(data.processStatus) &&
                  this.$hasPermission('pro:projects:update')
              },
              {
                fnHandler: 'onRemove',
                icoName: 'fa el-icon-delete',
                btnName: '删除',
                disabled:
                  [1, 2].includes(data.processStatus) &&
                  this.$hasPermission('pro:projects:delete')
              },
              {
                fnHandler: 'handleFinish',
                icoName: 'fa el-icon-success',
                btnName: '完成',
                disabled:
                  this.disableToFinish(data) &&
                  this.$hasPermission('pro:projects:update')
              },
              {
                fnHandler: 'handlePause',
                icoName: 'fa el-icon-video-pause',
                btnName: '暂停',
                disabled:
                  this.disableToPause(data) &&
                  this.$hasPermission('pro:projects:update')
              },
              {
                fnHandler: 'handleStartup',
                icoName: 'fa el-icon-video-play',
                btnName: '启动',
                disabled:
                  this.disableToStartup(data) &&
                  this.$hasPermission('pro:projects:update')
              },
              {
                fnHandler: 'handleTermination',
                icoName: 'fa el-icon-error',
                btnName: '终止',
                disabled:
                  this.disableToTermination(data) &&
                  this.$hasPermission('pro:projects:update')
              }
            ];
            break;
          case 1:
            this.contextMenuData.menulists = [
              {
                fnHandler: 'addBOM',
                icoName: 'fa el-icon-plus',
                btnName: '新建BOM',
                disabled:
                  this.disableToAddBOM(data) &&
                  this.$hasPermission('pro:projects:save')
              },
              {
                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: 'editBOM',
                icoName: 'fa el-icon-edit',
                btnName: '修改',
                disabled:
                  ![0].includes(data.status) &&
                  this.$hasPermission('pro:projects:update')
              },
              {
                fnHandler: 'removeBom',
                icoName: 'fa el-icon-delete',
                btnName: '删除',
                disabled:
                  ![0].includes(data.status) &&
                  this.$hasPermission('pro:projects:delete')
              },
              {
                fnHandler: 'handleBomFinish',
                icoName: 'fa el-icon-success',
                btnName: '完成',
                disabled:
                  this.disableToFinish(data) &&
                  this.$hasPermission('pro:projects:update')
              },
              {
                fnHandler: 'handleBomPause',
                icoName: 'fa el-icon-video-pause',
                btnName: '暂停',
                disabled:
                  this.disableToPause(data) &&
                  this.$hasPermission('pro:projects:update')
              },
              {
                fnHandler: 'handleBomStartup',
                icoName: 'fa el-icon-video-play',
                btnName: '启动',
                disabled:
                  this.disableToStartup(data) &&
                  this.$hasPermission('pro:projects:update')
              },
              {
                fnHandler: 'handleBomTermination',
                icoName: 'fa el-icon-error',
                btnName: '终止',
                disabled:
                  this.disableToTermination(data) &&
                  this.$hasPermission('pro:projects:update')
              }
            ];
            break;
          case 2:
            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: 'onSave',
              //   icoName: 'fa el-icon-edit',
              //   btnName: '修改'
              // },
              // {fnHandler: 'stageRemove',
              //   icoName: 'fa el-icon-delete',
              //   btnName: '删除'
              // },
              {
                fnHandler: 'handleStageFinish',
                icoName: 'fa el-icon-success',
                btnName: '完成',
                disabled: this.disableToFinish(data)
              },
              {
                fnHandler: 'handleStagePause',
                icoName: 'fa el-icon-video-pause',
                btnName: '暂停',
                disabled: this.disableToPause(data)
              },
              {
                fnHandler: 'handleStageStartup',
                icoName: 'fa el-icon-video-play',
                btnName: '启动',
                disabled: this.disableToStartup(data)
              },
              {
                fnHandler: 'handleStageTermination',
                icoName: 'fa el-icon-error',
                btnName: '终止',
                disabled: this.disableToTermination(data)
              }
            ];
            break;
        }
      });
    },
    disableToAddBOM(row) {
      return (
        ![0, 1, 2, 3].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) {
      console.log('点击');

      this.treeId = data.id;
      this.currentNodeData = data;

      this.$nextTick(async () => {
        // this.$refs.projectInfoTable.init();
        switch (data.type) {
          case 1:
            await this.$refs.attributeRef.setAttributeFormData(
              this.currentNodeData
            );
            break;
          case 2:
            this.dialogForm = await projectsGetByIdDetailsAPI(data.parentId);
            break;
          case 0:
            this.dialogForm = await projectsGetByIdDetailsAPI(data.id);
            this.dialogForm.type = this.dialogForm.type + '';
            this.dialogForm.level = this.dialogForm.level + '';
            this.dialogForm.parentId =
              this.dialogForm.parentId == 0 ? '' : this.dialogForm.parentId;
            this.projectStepList = ['待立项', '审核中', '执行中', '已完成'];
            if (data.processStatus == 0) {
              this.active = 0;
              break;
            }

            if ([1, 3].includes(data.processStatus)) {
              let stepName = data.processStatus == 3 ? '审核未通过' : '审核中';
              this.projectStepList.splice(1, 1, stepName);
              this.active = 1;
              break;
            }
            if ([0, 1, 2].includes(data.status)) {
              let stepName =
                data.status == 1
                  ? '执行中'
                  : data.status == 2
                  ? '暂停中'
                  : '未开始';
              this.projectStepList.splice(2, 1, stepName);
              this.active = 2;
              break;
            }
            if ([3, 4].includes(data.status)) {
              let stepName = data.status == 3 ? '已完成' : '已终止';
              this.projectStepList.splice(3, 1, stepName);
              this.active = 4;
              break;
            }
            break;
        }
        if ([0, 2].includes(data.type)) {
          this.dialogForm.type = this.dialogForm.type + '';
          this.dialogForm.level = this.dialogForm.level + '';
          this.dialogForm.parentId =
            this.dialogForm.parentId == 0 ? '' : this.dialogForm.parentId;
          this.dialogForm.stageList = this.dialogForm.allStageList;

          await this.getTeamInfo(this.dialogForm.teamId);
        }
      });
      this.getPlanAndTaskTree(data);
      this.getTaskTree(data);
    },
    async getPlanAndTaskTree(data) {
      let paramAttr = '';
      switch (data.type) {
        case 1:
          paramAttr = 'projectBomId';
          break;
        case 2:
          paramAttr = 'projectStageId';
          break;
        default:
          paramAttr = 'projectId';
      }
      let params = {
        [paramAttr]: data.id
      };
      this.planAndTaskTree = await getPlanAndTaskTreeById(params);
    },
    async getTaskTree(data) {
      let paramAttr = '';
      switch (data.type) {
        case 1:
          paramAttr = 'projectBomId';
          break;
        case 2:
          paramAttr = 'projectStageId';
          break;
        default:
          paramAttr = 'projectId';
      }
      let params = {
        [paramAttr]: 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;
      console.log(row, 'row.type');
      switch (row.type) {
        case 0:
          this.getProjectPlanInfo(row.id);
          break;
        case 1:
          this.getProjectPlanInfo(row.targetPlanId);
          break;
        case 2:
          this.getProjectTaskInfo(row.id);
          break;
      }
    },
    handlePlanTableNodeClick(row) {
      console.log(row, '点击计划某一行');
      this.isShow = true;
      this.attrActiveName = '属性';
      this.currentTableNodeData = row;
      this.getProjectPlanInfo(row.id);
    },
    showTableRightMenu(row, column, event) {
      if (this.dialogType == 'view') return;
      this.contextTableMenuData.menuName = 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;
        }
      });
    },
    //转派
    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();
    },
    handleLeftTreeActiveName(val) {
      console.log(val);
      this.leftTreeActiveName = val;
      this.getTreeData();
    },
    customColorMethod(percentage) {
      if (percentage < 30) {
        return '#b6b6b6';
      } else if (percentage < 70) {
        return '#b3e496';
      } else {
        return '#67c23a';
      }
    }
  },
  created() {}
};
</script>
<style lang="scss" scoped>
:deep(.el-drawer__body) {
  overflow: hidden;
}
.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%;
          padding: 10px 8%;
        }

        .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%, 10%);
        }
      }
    }
  }

  ::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;
    }
  }

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