kd-aiot-frontend-pro/src/views/project-manage/project-initiation/index.vue

<template>
  <div class="ele-body">
    <el-card shadow="never">
      <index-search @search="reload"/>
      <!-- 数据表格 -->
      <ele-pro-table
        ref="table"
        row-key="id"
        :columns="columns"
        :datasource="datasource"
        height="calc(100vh - 400px)"
        full-height="calc(100vh - 116px)"
        :default-expand-all="true"
        cache-key="project-initiationTable"
        :selection.sync="selection"
        :tree-props="{children: 'projectList'}"
        @done="onDone"
        :indent="15"
      >
        <!--        :lazy="true"-->
        <!-- 表头工具栏 -->
        <template v-slot:toolbar>
          <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
            class="ele-btn-icon"
            @click="openEdit('','add')">
            新建
          </el-button>
          <el-button
            size="small"
            type="danger"
            icon="el-icon-delete"
            class="ele-btn-icon"
            @click="allDelBtn"
          >
            删除
          </el-button>
          <!--          <el-button-->
          <!--            size="small"-->
          <!--            type="danger"-->
          <!--            icon="el-icon-remove-outline"-->
          <!--            class="ele-btn-icon"-->
          <!--            @click="handleStatus('4')"-->
          <!--          >-->
          <!--            终止-->
          <!--          </el-button>-->
          <!--          <el-button-->
          <!--            size="small"-->
          <!--            type="warning"-->
          <!--            icon="el-icon-video-play"-->
          <!--            class="ele-btn-icon"-->
          <!--            @click="handleStatus('2')"-->
          <!--          >-->
          <!--            暂停-->
          <!--          </el-button>-->
          <!--          <el-button-->
          <!--            size="small"-->
          <!--            type="primary"-->
          <!--            icon="el-icon-video-pause"-->
          <!--            class="ele-btn-icon"-->
          <!--            @click="handleStatus('1')"-->
          <!--          >-->
          <!--            启动-->
          <!--          </el-button>-->
          <!--          <el-button class="el-icon-sort" size="small" @click="expandAll">-->
          <!--            展开/折叠-->
          <!--          </el-button>-->
          <!-- <div class="el-button--primary">122222</div> -->
        </template>
        <template v-slot:code="{ row }">
          <el-button type="text" @click="handelBOMConstructDetail(row,'view')">{{ row.code }}</el-button>
        </template>
        <template v-slot:status="{ row }">
          {{ getDictV('pro_projects_status', row.status) }}
        </template>
        <template v-slot:type="{ row }">
          {{ getDictV('pro_projects_type', row.type) }}
        </template>
        <template v-slot:isOverTime="{ row }">
          <el-tag v-if="row.isOverTime==0" type="success">正常</el-tag>
          <el-tag v-else type="danger">超时</el-tag>
        </template>
        <template v-slot:isOverbudget="{ row }">
          <el-tag v-if="row.isOverbudget==0" type="success">否</el-tag>
          <el-tag v-else type="danger">是</el-tag>
        </template>
        <template v-slot:speedPercent="{ row }">
          <el-progress :stroke-width="20" text-color="#606266" :text-inside="true" :percentage="row.speedPercent||0"
                       :color="customColorMethod"></el-progress>
        </template>

        <!-- 操作列 -->
        <template v-slot:action="{ row }">

          <el-link
            type="primary"
            :underline="false"
            icon="el-icon-plus"
            @click="processSubmit(row)"
            v-if="[0, 3].includes(row.processStatus)"
          >
            提交
          </el-link>
          <el-link
            type="primary"
            :underline="false"
            icon="el-icon-edit"
            v-if="[0, 3].includes(row.processStatus)"
            @click="openEdit(row,'edit')"
          >
            修改
          </el-link>

          <el-popconfirm
            class="ele-action"
            title="确定要删除吗？"
            v-if="[0, 3].includes(row.processStatus)"
            @confirm="remove([row.id])">
            <template v-slot:reference>
              <el-link type="danger" :underline="false" icon="el-icon-delete">
                删除
              </el-link>
            </template>
          </el-popconfirm>

          <el-dropdown trigger="click" >
            <span class="el-dropdown-link">
              操作菜单<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-if="![0,1, 3].includes(row.processStatus)&&![4,2,3].includes(row.status)">
                <el-link icon="el-icon-success" type="success" :underline="false" @click="handleStatus(projectsFinishAPI,'完成',row)">完成
                </el-link>
              </el-dropdown-item>
              <el-dropdown-item v-if="![0,1, 3].includes(row.processStatus)&&![4,2,3].includes(row.status)">
                <el-link icon="el-icon-video-pause" type="warning" :underline="false" @click="handleStatus(projectsPauseAPI,'暂停',row)">暂停
                </el-link>
              </el-dropdown-item>
              <el-dropdown-item v-if="![0,1, 3].includes(row.processStatus)&&![4,1,0,3].includes(row.status)">
                <el-link icon="el-icon-video-play" type="success" :underline="false" @click="handleStatus(projectsStartupAPI,'启动',row)">启动
                </el-link>
              </el-dropdown-item>
              <el-dropdown-item v-if="![0,1, 3].includes(row.processStatus)&&![4,3].includes(row.status)">
                <el-link icon="el-icon-error" type="danger" :underline="false" @click="handleStatus(projectsTerminationAPI,'终止',row)">终止</el-link>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-link icon="el-icon-info" type="primary" :underline="false" @click="handelBOMConstructDetail(row)">
                  项目信息
                </el-link>
              </el-dropdown-item>
              <el-dropdown-item divided v-if="[0,1,2,3].includes(row.processStatus)&&[0,1].includes(row.status)">
                <el-link
                  icon="el-icon-circle-plus"
                  type="primary"
                  :underline="false"
                  @click="handleAddPlan(row)">
                  新增计划
                </el-link>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>


        </template>


      </ele-pro-table>
    </el-card>
    <!-- 编辑弹窗 -->
    <add-or-edit-dialog v-if="addOrEditDialogFlag" @reload="reload" :addOrEditDialogFlag.sync="addOrEditDialogFlag"
                        ref="addOrEditDialogRef"></add-or-edit-dialog>
    <detail-dialog v-if="detailDialogFlag" :detailDialogFlag.sync="detailDialogFlag"
                   ref="detailDialogRef"></detail-dialog>
    <!-- 新增计划 -->
    <add-plan-dialog v-if="addPlanDialogFLag" @reload="reload" :addOrEditDialogFlag.sync="addPlanDialogFLag"
                     ref="addPlanDialogRef"></add-plan-dialog>
    <!-- 多选删除弹窗 -->
    <pop-modal
      :visible.sync="delVisible"
      content="是否确定删除？"
      @done="commitBtn"
    />
    <process-submit-dialog :processSubmitDialogFlag.sync="processSubmitDialogFlag" v-if="processSubmitDialogFlag" ref="processSubmitDialogRef" @reload="reload"></process-submit-dialog>
  </div>
</template>

<script>
import processSubmitDialog from "@/BIZComponents/processSubmitDialog/processSubmitDialog.vue";
import indexSearch from "./components/index-search.vue";
import addOrEditDialog from "./components/addOrEditDialog.vue";
import addPlanDialog from "../planManage/components/addOrEditDialog.vue";
import detailDialog from "./components/detailDialog.vue";
import {projectsDeleteAPI, projectsPageAPI, submit,projectsFinishAPI,projectsPauseAPI,projectsStartupAPI,projectsTerminationAPI} from "@/api/project-manage";
import {reviewStatusEnum} from '@/enum/dict';
import {mapGetters} from "vuex";
import {getByCode} from "@/api/system/dictionary-data";
import popModal from "@/components/pop-modal/index.vue";

export default {
  name: 'index',
  components: {
    popModal,
    addOrEditDialog,
    detailDialog,
    indexSearch,
    processSubmitDialog,
    addPlanDialog
  },
  computed: {
    ...mapGetters(['getDictValue']),

    columns() {
      return [
        {
          width: 45,
          type: 'selection',
          columnKey: 'selection',
          align: 'center'
        },
        {
          columnKey: 'index',
          label: '序号',
          type: 'index',
          width: 55,
          align: 'center',
          showOverflowTooltip: true,
        },
        {
          prop: 'type',
          label: '项目类型',
          showOverflowTooltip: true,
          minWidth: 150,
          align: 'center',
          slot: 'type',
        },
        {
          prop: 'code',
          label: '项目编码',
          showOverflowTooltip: true,
          minWidth: 160,
          slot: 'code',
          align: 'center',
        },
        {
          prop: 'name',
          label: '项目名称',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 140
        },

        {
          prop: 'responsibleDeptName',
          label: '负责部门',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 100
        },
        {
          prop: 'responsibleUserName',
          label: '项目经理',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 100
        },
        {
          prop: 'teamName',
          label: '项目团队',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 100
        },
        {
          prop: 'cycle',
          label: '项目周期',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 100
        },
        {
          prop: 'budget',
          label: '项目预算',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 110,
          formatter: (_row, _column, cellValue) => {
            return cellValue ? cellValue + this.getDictV('pro_projects_budget_unit', _row.unit) : '';
          }
        },
        {
          prop: 'planStartDate',
          label: '计划开始日期',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 120
        },
        {
          prop: 'planEndDate',
          label: '计划完成日期',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 120
        },
        {
          prop: 'realStartTime',
          label: '实际开始日期',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 120
        },
        {
          prop: 'realEndTime',
          label: '实际完成日期',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 120
        },
        {
          prop: 'cost',
          label: '费用(元)',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 140
        },
        {
          prop: 'status',
          label: '项目状态',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 100,
          slot: 'status',
        },
        {
          prop: 'processStatus',
          label: '审核状态',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 100,
          formatter: (_row, _column, cellValue) => {
            return reviewStatusEnum[_row.processStatus].label;
          }
        },
        {
          prop: 'isOverTime',
          label: '是否超时',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 100,
          slot: 'isOverTime'
        },
        {
          prop: 'isOverbudget',
          label: '是否超预算',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 100,
          slot: 'isOverbudget'
        },
        {
          prop: 'speedPercent',
          label: '项目进度',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 150,
          slot: 'speedPercent'
        },
        {
          columnKey: 'action',
          label: '操作',
          width: 200,
          align: 'center',
          resizable: false,
          slot: 'action',
          showOverflowTooltip: true,
          fixed: 'right'
        }
      ]
    },
  },
  data() {
    return {
      projectsFinishAPI:projectsFinishAPI,
      projectsPauseAPI:projectsPauseAPI,
      projectsStartupAPI:projectsStartupAPI,
      projectsTerminationAPI:projectsTerminationAPI,
      selection: [],
      dictList: [],
      // 表格列配置

      // 是否显示编辑弹窗
      addOrEditDialogFlag: false,
      detailDialogFlag: false,
      processSubmitDialogFlag: false,
      delVisible: false,
      addPlanDialogFLag: false,
      // 全部菜单数据
      menuList: [],
      // 展开折叠
      expandAllFlag: false,
    };
  },
  async created() {
  },
  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]]
        }
      })
    },
    handelBOMConstructDetail(row,type='') {
      this.$router.push({
        path: '/BOMmanage/details',
        query: {
          id: row.id,
          type
        }
      });
    },
    customColorMethod(percentage) {
      if (percentage < 30) {
        return '#909399';
      } else if (percentage < 70) {
        return '#e6a23c';
      } else {
        return '#67c23a';
      }
    },
    /* 表格数据源 */
    async datasource({page, limit, where, parent}) {
      await this.getDictList('pro_projects_status')
      await this.getDictList('pro_projects_type')
      await this.getDictList('pro_projects_budget_unit')
      return projectsPageAPI({
        pageNum: page,
        size: limit,
        parentId: parent?.id ?? '0',
        ...where
      });
    },
    onDone(row) {
      console.log(row);
    },
    /* 刷新表格 */
    reload(where) {
      this.$refs.table.reload({where, size: 1, pageNum: 10, parentId: '0'});
      this.$refs.table.reRenderTable()
    },
    /* 显示编辑 */
    openEdit(row = {}, type) {
      this.addOrEditDialogFlag = true;
      this.$nextTick(() => {
        this.$refs.addOrEditDialogRef.init(row, type)
      })
    },
    openDetail(row = {}) {
      this.detailDialogFlag = true;
      this.$nextTick(() => {
        this.$refs.detailDialogRef.init(row)
      })
    },
    handleAddPlan(row) {
      this.addPlanDialogFLag = true;
      this.$nextTick(() => {
        row.projectId = row.id
        this.$refs.addPlanDialogRef.init(row, 'add')
      })
    },
    async handleStatus(API, msg, row) {
      let message = '确定' + msg + '该项目吗';
      this.$confirm(message, '提示', {
        type: 'warning'
      }).then(async () => {
        await API(row.id)
        this.$message.success('操作成功');
        this.reload();
      }).catch(() => {
      });
    },
    //流程提交
    processSubmit(row) {
      this.processSubmitDialogFlag = true
      this.$nextTick(()=>{
        let params = {
          businessId:row.id,
          businessKey : 'pro_project_approve',
        }
        this.$refs.processSubmitDialogRef.init(params)
      })
      // submit({
      //   projectId: row.id
      // }).then((res) => {
      //   this.$message.success('提交成功');
      //   this.reload();
      // });
    },
    //批量删除
    allDelBtn() {
      if (this.selection.length === 0) return;
      let flag = this.selection.some(item => [1, 2].includes(item.processStatus))
      if (flag) return this.$message.warning('抱歉已审核、审核中的数据不能删除,请检查')
      this.delVisible = true;
    },
    //删除弹框确定
    commitBtn() {
      const dataId = this.selection.map((v) => v.id);
      this.remove(dataId);
    },
    /* 删除 */
    remove(ids) {
      const loading = this.$loading({lock: true});
      projectsDeleteAPI(ids)
        .then((res) => {
          loading.close();
          this.$message.success('删除成功');
          this.reload();
        })
        .catch((e) => {
          loading.close();
          // this.$message.error(e.message);
        });
    },
    /* 展开/折叠全部 */
    expandAll() {
      this.expandAllFlag = !this.expandAllFlag;
      this.$refs.table.toggleRowExpansionAll(this.expandAllFlag);
    },
  }
};
</script>
<style lang="scss" scoped>
::v-deep .el-dropdown-link {
  cursor: pointer;
  color: #188ffd;

}
::v-deep .el-dropdown-menu__item{
  .el-link{
    width: 100%;
    display: flex;
    flex: 1;
    justify-content: flex-start;
  }
}

</style>