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-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" style="height: calc(100vh - 130px)">
      <!-- <el-row style="padding-bottom: 12px">
        <dv-border-box-12
          class="card_2_1_box"
          :color="['rgb(255,255,255)', 'rgb(255,255,255)']"
          :backgroundColor="'rgb(255,255,255)'"
        >
          <div class="card_2_1_box_div_1">
            <el-steps :active="active" finish-status="success" simple>
              <el-step
                v-for="(item, index) in projectStepList"
                :key="index"
                :title="item"
              ></el-step>
            </el-steps>
          </div>
          <div class="card_2_1_box_div_2">
            <dv-percent-pond
              :title="(dialogForm.speedPercent || 0) + '%'"
              :config="{
                value: dialogForm.speedPercent || 0,
                localGradient: true,
                textColor: 'rgb(0,185,253)',
                formatter: ''
              }"
              style="width: 98%; height: 55%"
            />
          </div>
        </dv-border-box-12>
      </el-row> -->
      <el-row :gutter="24">
        <el-col :span="4">
          <p_search @search="getLeftData" />
          <ele-pro-table
            ref="table"
            row-key="id"
            :columns="columnsLeft"
            :datasource="leftTreeData"
            height="calc(100vh - 200px)"
            full-height="calc(100vh - 116px)"
            :default-expand-all="true"
            cache-key="project-initiationTable"
            :tree-props="{ children: 'projectList' }"
            :indent="15"
            :needPage="false"
          >
          </ele-pro-table>
        </el-col>
        <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="17">
          <ele-split-layout
            :left-style="{
              overflow: 'hidden',
              width: '100%'
            }"
            :vertical="true"
            :max-size="500"
            :min-size="1"
            :resizable="true"
            :responsive="true"
            width="450px"
            :right-style="{ overflow: 'hidden' }"
            allow-collapse
          >
            <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>

                    <!--    <ele-pro-table
                      class="el-table"
                      ref="table"
                      row-key="id"
                      :columns="columns"
                      :datasource="planAndTaskTree"
                      height="100%"
                      @row-click="handleTableNodeClick"
                      @row-contextmenu="showTableRightMenu"
                      :toolkit="[]"
                      :default-expand-all="true"
                      cache-key="project-initiationTable"
                      :tree-props="{ children: 'children' }"
                      :need-page="false"
                      :indent="0"
                    >
                      <template v-slot:name="{ row }">
                        <span
                          v-if="!row.children.length && row.level == 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 v-if="row.type == 0" type="info">计划</el-tag>
                        <el-tag v-else-if="row.type == 1" type="info"
                          >计划节点</el-tag
                        >
                        <el-tag v-else-if="row.type == 2" type="info"
                          >任务</el-tag
                        >
                      </template>
                      <template v-slot:speedPercent="{ row }">
                        <el-progress
                          style="padding: 0 5px"
                          :stroke-width="20"
                          text-color="#606266"
                          :text-inside="true"
                          :percentage="row.speedPercent || 0"
                          :color="customColorMethod"
                        ></el-progress>
                        <vue-context-menu
                          :transferIndex="0"
                          :class="'vue-contextmenuName-' + row.name"
                          v-if="row.name == contextTableMenuData.menuName"
                          :contextMenuData="contextTableMenuData"
                          @addPlan="() => handleAddPlan('add', '', row, 'plan')"
                          @editPlan="
                            () => handleAddPlan('edit', '', row, 'plan')
                          "
                          @removePlan="() => handleRemovePlan([row.id])"
                          @terminationPlan="
                            () =>
                              handleStatus(
                                planTerminationAPI,
                                '确定终止该计划吗？',
                                '',
                                row
                              )
                          "
                          @pausePlan="
                            () =>
                              handleStatus(
                                planPauseAPI,
                                '确定暂停该计划吗',
                                '',
                                row
                              )
                          "
                          @startupPlan="
                            () =>
                              handleStatus(
                                planStartupAPI,
                                '确定启动该计划吗',
                                '',
                                row
                              )
                          "
                          @finishPlan="
                            () =>
                              handleStatus(
                                planFinishAPI,
                                '确定完成该计划吗',
                                '',
                                row
                              )
                          "
                          @terminationPlanStage="
                            () =>
                              handleStatus(
                                planStageTerminationAPI,
                                '确定终止该计划节点吗？',
                                '',
                                row
                              )
                          "
                          @pausePlanStage="
                            () =>
                              handleStatus(
                                planStagePauseAPI,
                                '确定暂停该计划节点吗',
                                '',
                                row
                              )
                          "
                          @startupPlanStage="
                            () =>
                              handleStatus(
                                planStageStartupAPI,
                                '确定启动该计划节点吗',
                                '',
                                row
                              )
                          "
                          @finishPlanStage="
                            () =>
                              handleStatus(
                                planStageFinishAPI,
                                '确定完成该计划节点吗',
                                '',
                                row
                              )
                          "
                          @addTask="() => handleAddTask('add', '', row, 'plan')"
                          @updateTask="
                            () =>
                              handleAddTask(
                                'edit',
                                '',
                                { ...row, type: 2 },
                                'plan'
                              )
                          "
                          @removeTask="() => handleRemoveTask([row.id])"
                          @startTask="
                            () =>
                              handleStartTask(row, 1, '是否确定执行该任务？')
                          "
                          @finishTask="
                            () =>
                              handleStartTask(row, 3, '是否确定报工该任务？')
                          "
                          @pauseTask="
                            () =>
                              handleStartTask(row, 2, '是否确定暂停该任务？')
                          "
                          @terminationTask="
                            () =>
                              handleStartTask(row, 4, '是否确定终止该任务？')
                          "
                          @handleTransfer="() => handleTransfer(row)"
                          @handleSubmitDeliverables="
                            () => handleSubmitDeliverables(row)
                          "
                        ></vue-context-menu>
                      </template>
                    </ele-pro-table> -->
                  </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"
                >
                </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>

      <!-- <div class="card_2_box_content">
        <ele-split-layout
          :left-style="{
            overflow: 'hidden',
            width: '100%',
            paddingLeft: '10px'
          }"
          :max-size="300"
          :min-size="0"
          :resizable="true"
          :responsive="true"
          :right-style="{ overflow: 'hidden' }"
          allow-collapse
          width="210px"
        >
          <template v-slot:content> </template>
        </ele-split-layout>
      </div> -->
    </el-card>
    <add-BOM-dialog
      v-if="addBOMDialogFlag"
      ref="addBOMDialogRef"
      :addBOMDialogFlag.sync="addBOMDialogFlag"
      :treeList="treeList"
      @reload="reload"
    ></add-BOM-dialog>
    <!-- 新增计划 -->
    <add-plan-dialog
      v-if="addPlanDialogFLag"
      @reload="reload"
      :addOrEditDialogFlag.sync="addPlanDialogFLag"
      ref="addPlanDialogRef"
    ></add-plan-dialog>
    <plan-detail-dialog
      v-if="planDetailDialogFlag"
      :detailDialogFlag.sync="planDetailDialogFlag"
      ref="planDetailDialogRef"
    ></plan-detail-dialog>
    <!-- 编辑弹窗 -->
    <add-task-dialog
      v-if="addTaskDialogFlag"
      @reload="reload"
      :addOrEditDialogFlag.sync="addTaskDialogFlag"
      ref="addTaskDialogRef"
    ></add-task-dialog>
    <task-detail-dialog
      v-if="taskDetailDialogFlag"
      :detailDialogFlag.sync="taskDetailDialogFlag"
      ref="taskDetailDialogRef"
    ></task-detail-dialog>
    <transfer-dialog
      ref="transferDialogRef"
      v-if="transferDialogFlag"
      @reload="reload"
      :transferDialogFlag.sync="transferDialogFlag"
    ></transfer-dialog>
    <submit-deliverables-dialog
      ref="submitDeliverablesDialogRef"
      v-if="submitDeliverablesDialogFlag"
      :submitDeliverablesDialogFlag.sync="submitDeliverablesDialogFlag"
      @reload="reload"
    ></submit-deliverables-dialog>
    <!-- 编辑弹窗 -->
    <addOrEditProjectDialog
      v-if="addOrEditProjectDialogFlag"
      @reload="reload"
      :addOrEditDialogFlag.sync="addOrEditProjectDialogFlag"
      ref="addOrEditProjectDialogRef"
    ></addOrEditProjectDialog>
    <!-- 阶段弹窗 -->
    <addOrEditStageDialog
      v-if="addOrEditDialogStageFlag"
      @reload="reload"
      :addOrEditDialogStageFlag.sync="addOrEditDialogStageFlag"
      ref="addOrEditStageDialogRef"
    ></addOrEditStageDialog>
  </el-drawer>
</template>
<script>
  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 {
    projectsPageAPI,
    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 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,

      planManageList,
      projectCalendar,
      projectInfoTable,
      addOrEditStageDialog
    },
    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,
        columnsLeft: [
          /*  {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true
          }, */
          {
            prop: 'code',
            label: '项目编码',
            showOverflowTooltip: true,
            minWidth: 160,
            slot: 'code',
            align: 'center'
          },
          {
            prop: 'name',
            label: '项目名称',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 140
          }
        ],
        leftTreeData: [],
        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.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 projectsPageAPI(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;
      },
      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>
  .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>