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="3" style="color: #1890ff"
                >项目名称：{{ rowData.name }}
              </el-col>
              <el-col :span="3"
                >项目预算：{{
                  rowData.budget
                    ? rowData.budget +
                      this.getDictV('pro_projects_budget_unit', rowData.unit)
                    : ''
                }}
              </el-col>
              <el-col :span="3"
                >项目经理：{{ rowData.responsibleUserName }}
              </el-col>
              <el-col :span="3">项目周期：{{ rowData.cycle }} </el-col>
              <el-col :span="3"
                >项目状态：
                {{ 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
                        ref="projectInfoTable"
                        :dialog-type="dialogType"
                        :dialogForm="dialogForm"
                        :deptList="deptList"
                        :deptTreeList="deptTreeList"
                      ></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
                          :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"
                      style="overflow: scroll; padding-bottom: 30px"
                    >
                      <projectCalendar></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 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 {
        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;
        if (this.rowData.id) {
          this.$nextTick(()=>{
            this.$refs.treeList.getTreeData('',this.rowData.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()
        }
       

      },
      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) {
        this.treeId = data.id;
        this.currentNodeData = data;
        this.$nextTick(async () => {
          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';
        }
      }
    }
  };
</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>