cmc-oa/oa-ui/src/views/oa/project/info.vue

<template>
  <div class="app-container">
    <div class="header">
      <el-button icon="el-icon-d-arrow-left" plain type="primary" class="back" @click="goBack">返回</el-button>
      <h1>{{ '【' + project.projectNumber + '】' + project.projectName }}</h1>
    </div>
    <el-divider></el-divider>

    <div class="content">
      <!-- 项目基本信息 -->
      <div class="box1">
        <div class="title">项目基本信息
          <div class="line"></div>
        </div>
        <div class="info mt20">
          <el-descriptions class="descriptions" border :column="column" style="text-align: center;">
            <el-descriptions-item>
              <template slot="label">
                <svg-icon slot="prefix" icon-class="number" />
                项目编号
              </template>
              {{ project.projectNumber }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <svg-icon slot="prefix" icon-class="clipboard" />
                项目名称
              </template>
              {{ project.projectName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <svg-icon slot="prefix" icon-class="JamYelpSquare" />
                项目类型
              </template>
              {{ project.projectType }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <svg-icon slot="prefix" icon-class="guide" />
                项目来源
              </template>
              {{ project.projectSource == '0' ? '院内' : '院外' }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <svg-icon slot="prefix" icon-class="pmLevel" />
                项目级别
              </template>
              <el-tag :type="project.projectLevel ? (project.projectLevel === '0' ? 'info' : 'danger') : 'info'">
                {{ project.projectLevel ? (project.projectLevel == '0' ? '一般项目' : '重大项目') : '一般项目'}}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <svg-icon slot="prefix" icon-class="school" />
                甲方单位
              </template>
              {{ project.partyA ? project.partyA.partyAName : '' }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <svg-icon slot="prefix" icon-class="peoples" />
                联系人
              </template>
              {{ project.contactPerson }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <svg-icon slot="prefix" icon-class="phone" />
                联系电话
              </template>
              {{ project.telephone }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <svg-icon slot="prefix" icon-class="contractSign" />
                合同编码
              </template>
              {{ contractCode }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <svg-icon slot="prefix" icon-class="number" />
                合同编号
              </template>
              {{ contractNumber }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <svg-icon slot="prefix" icon-class="dept" />
                承担部门
              </template>
              {{ project.undertakingDeptName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <svg-icon slot="prefix" icon-class="user" />
                项目登记人
              </template>
              {{ getUserName(project.projectRegistrant) }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <svg-icon slot="prefix" icon-class="date" />
                项目登记时间
              </template>
              {{ project.registerTime }}
            </el-descriptions-item>
            <el-descriptions-item :span="3">
              <template slot="label">
                <svg-icon slot="prefix" icon-class="file" />
                项目任务书
              </template>
              <div v-if="project.taskDocument">
                <el-link type="primary" @click="reviewWord(`${baseUrl}${'/profile/upload' + project.taskDocument}`)">
                  {{ getFileName(project.taskDocument) }}
                </el-link>
                <el-link class="ml20" type="warning" :href="`${baseUrl}${'/profile/upload' + project.taskDocument}`"
                  :underline="false" target="_blank">
                  <span class="el-icon-download">下载文件</span>
                </el-link>
              </div>
            </el-descriptions-item>
            <el-descriptions-item :span="3">
              <template slot="label">
                <svg-icon slot="prefix" icon-class="build" />
                项目概况
              </template>
              <div>
                <el-table :data="workList">
                  <el-table-column type="index" width="50" />
                  <el-table-column label="工作内容" prop="content" />
                  <el-table-column label="比例尺" prop="scale" />
                  <el-table-column label="单位" prop="unit" />
                  <el-table-column label="工作量" prop="workload" />
                  <el-table-column label="要求完成时间" prop="deadline" />
                </el-table>
              </div>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <svg-icon slot="prefix" icon-class="edit" />
                项目备注
              </template>
              {{ project.remark }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
      <!-- 项目管理部安排 -->
      <div class="box1 mt20">
        <div class="title">项目管理部安排
          <div class="line"></div>
        </div>
        <div class="info mt20">
          <el-descriptions class="descriptions" border :column="4" style="text-align: center;">
            <el-descriptions-item>
              <template slot="label">
                <svg-icon slot="prefix" icon-class="dept" />
                承担部门
              </template>
              {{ project.undertakingDeptName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <svg-icon slot="prefix" icon-class="peoples" />
                部门负责人
              </template>
              {{ deptLeaderList.join(',') }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <svg-icon slot="prefix" icon-class="user" />
                项目负责人
              </template>
              <div style="display: flex;justify-content:space-between;">
                <div>{{ project.projectLeaderUser ? project.projectLeaderUser.nickName : "" }}</div>
                <div>
                  <el-button class="ml20" type="warning" plain size="mini" icon="el-icon-plus"
                    @click="prLeaderOpen = true" v-hasPermi="['oa:project:edit']">
                    更换项目负责人
                  </el-button>
                </div>
              </div>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <svg-icon slot="prefix" icon-class="user" />
                现场负责人
              </template>
              {{ getUserName(project.siteLeader) }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <svg-icon slot="prefix" icon-class="date" />
                组织交底时间
              </template>
              {{ project.organizeTime }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <svg-icon slot="prefix" icon-class="date" />
                项目预算
              </template>
              <!-- v-hasPermi="['oa:project:edit']" -->
              <el-link type="primary" @click="openBudget = true">预算表</el-link>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <svg-icon slot="prefix" icon-class="documentation" />
                组织交底文档
              </template>
              <div v-if="project.organizeDocument">
                <el-link type="primary" @click="reviewWord(`${baseUrl}${'/profile/upload' + project.organizeDocument}`)">
                  {{ getFileName(project.organizeDocument) }}
                </el-link>
                <el-link class="ml20" type="warning" :href="`${baseUrl}${'/profile/upload' + project.organizeDocument}`"
                  :underline="false" target="_blank">
                  <span class="el-icon-download">下载文件</span>
                </el-link>
              </div>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
      <!-- 任务审核情况  -->
      <div class="box1 mt20">
        <div class="title">任务审核情况
          <div class="line"></div>
        </div>
        <div class="info mt20">
          <el-descriptions class="descriptions" border :column="1" style="text-align: center;">
            <el-descriptions-item>
              <template slot="label">
                <svg-icon slot="prefix" icon-class="user" />
                经营发展部审核
              </template>
              <div>
                <el-input disabled type="textarea" v-model="projectComment.jyComment"></el-input>
                <div class="sign mt10">
                  <div class="mr20">签名：<span class="auditor">{{ projectComment.jyUser ? projectComment.jyUser.nickName :
                    ''
                  }}</span>
                  </div>
                  <div class="ml20"><span>审核时间：{{ projectComment.jyApprovalTime }}</span></div>
                </div>
              </div>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <svg-icon slot="prefix" icon-class="user" />
                分管领导批准
              </template>
              <div>
                <el-input disabled type="textarea" v-model="projectComment.manageComment"></el-input>
                <div class="sign mt10">
                  <div class="mr20">签名：<span class="auditor">{{ projectComment.managerUser ?
                    projectComment.managerUser.nickName : '' }}</span>
                  </div>
                  <div class="ml20"><span>审核时间：{{ projectComment.manageApprovalTime }}</span></div>
                </div>
              </div>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <svg-icon slot="prefix" icon-class="user" />
                生产部门确认
              </template>
              <div>
                <el-input disabled type="textarea" v-model="projectComment.scComment"></el-input>
                <div class="sign mt10">
                  <div class="mr20">签名：<span class="auditor">{{ projectComment.scApproverName }}</span>
                  </div>
                  <div class="ml20"><span>审核时间：{{ projectComment.scApprovalTime }}</span></div>
                </div>
              </div>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>

      <div class="box1 mt20">
        <div class="title">项目生产情况
          <div class="line"></div>
        </div>
        <div class="info mt20">
          <el-descriptions class="descriptions xmsc" border :column="2" style="text-align: center;">
            <el-descriptions-item :span="2">
              <template slot="label">
                <svg-icon slot="prefix" icon-class="form" />
                安全交底记录表
              </template>
              <el-link type="primary" @click="openSafe = true">安全交底记录表</el-link>
            </el-descriptions-item>
            <el-descriptions-item :span="2">
              <template slot="label">
                <svg-icon slot="prefix" icon-class="form" />
                技术交底记录表
              </template>
              <el-link type="primary" @click="openTech = true">技术交底记录表</el-link>
            </el-descriptions-item>
            <el-descriptions-item :span="2">
              <template slot="label">
                <svg-icon slot="prefix" icon-class="equipment" />
                申请设备
              </template>
              <el-select v-model="devices" multiple disabled style="width:100%">
                <el-option v-for="item in deviceList" :key="item.deviceId" :label="item.name + '【' + (item.brand != null ? item.brand : '') + (item.series != null ? '-' + item.series + '】' : '')
                  + (item.code != null ? '（设备编号：' + item.code + '）' : '') + '📍' + item.place" :value="item.deviceId">
                </el-option>
              </el-select>
            </el-descriptions-item>
            <el-descriptions-item :span="2">
              <template slot="label">
                <svg-icon slot="prefix" icon-class="car" />
                使用车辆
              </template>
              <el-select v-model="cars" multiple disabled style="width:100%">
                <el-option v-for="item in carList" :label="item.licensePlate + item.brand" :value="item.carId"
                  :key="item.carId">
                </el-option>
              </el-select>
            </el-descriptions-item>
            <el-descriptions-item :span="2">
              <template slot="label">
                <svg-icon slot="prefix" icon-class="peoples" />
                驾驶员
              </template>
              <el-select v-model="drivers" multiple disabled style="width:100%">
                <el-option v-for="item in userList" :label="item.nickName" :value="item.userId" :key="item.userId">
                </el-option>
              </el-select>
            </el-descriptions-item>
            <el-descriptions-item :span="2">
              <template slot="label">
                <svg-icon slot="prefix" icon-class="dept" />
                参与人员
              </template>
              <el-select v-model="participates" multiple disabled style="width:100%">
                <el-option v-for="item in userList" :label="item.nickName" :value="item.userId" :key="item.userId">
                </el-option>
              </el-select>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <svg-icon slot="prefix" icon-class="date" />
                进场时间
              </template>
              {{ project.entryTime }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <svg-icon slot="prefix" icon-class="date" />
                撤场时间
              </template>
              {{ project.exitTime }}
            </el-descriptions-item>
            <el-descriptions-item :span="2">
              <template slot="label">
                <svg-icon slot="prefix" icon-class="date" />
                项目进度
              </template>
              <div>
                <el-table :data="progressList">
                  <el-table-column type="index" width="50" />
                  <el-table-column label="截至日期" prop="date" />
                  <el-table-column label="累计总进度（%）" prop="percentage" />
                  <el-table-column label="情况说明" prop="situation" />
                </el-table>
              </div>
            </el-descriptions-item>
            <el-descriptions-item :span="2">
              <template slot="label">
                <svg-icon slot="prefix" icon-class="date" />
                项目借款
              </template>
              <borrow-data :taskForm="taskForm"></borrow-data>
            </el-descriptions-item>
            <el-descriptions-item :span="2">
              <template slot="label">
                <svg-icon slot="prefix" icon-class="date" />
                成果汇交
              </template>
              <achi-data :taskForm="taskForm" class="table-warpper"></achi-data>
            </el-descriptions-item>
            <el-descriptions-item :span="2">
              <template slot="label">
                <svg-icon slot="prefix" icon-class="date" />
                产值结算
              </template>
              <settle-data :taskForm="taskForm"></settle-data>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
    </div>
    <el-dialog title="项目预算" :visible.sync="openBudget" width="1000px" append-to-body>
      <budget-tab :taskForm="taskForm"></budget-tab>
    </el-dialog>
    <el-dialog title="安全交底记录表" :visible.sync="openSafe" width="1000px" append-to-body>
      <safe-tab :taskForm="taskForm"></safe-tab>
    </el-dialog>
    <el-dialog title="技术交底记录表" :visible.sync="openTech" width="1000px" append-to-body>
      <technical-tab :taskForm="taskForm"></technical-tab>
    </el-dialog>
    <el-dialog title="更换项目负责人" :visible.sync="prLeaderOpen" width="1000px" append-to-body>
      <choose-people :multiple="false" @chooseUser="changeProjectLeader"></choose-people>
    </el-dialog>
  </div>
</template>

<script>
import { getDept } from "@/api/system/dept";
import { getUsersDeptLeaderByDept } from '@/api/system/post'
import { listUser, getUser } from "@/api/system/user";
import { getProject, updateProject } from "@/api/oa/project/project";
import { listProjectWork, addProjectWork } from "@/api/oa/project/projectWork";
import { listProjectComment, getProjectComment } from "@/api/oa/project/projectComment";
import { listProjectProgress, getProjectProgress } from "@/api/oa/project/projectProgress";
import { listProjectContract, addProjectContract } from "@/api/oa/contract/projectContract";
import { listContract, getContract, delContract, addContract, updateContract } from "@/api/oa/contract/contract";
import { listDevice } from "@/api/oa/device/device";
import { listCar } from '@/api/oa/car/car';
import budgetInfo from '@/views/flowable/form/budget/budgetInfo.vue';
import SafeTab from '@/views/flowable/form/projectProcess/safeTab.vue';
import TechnicalTab from '@/views/flowable/form/projectProcess/technicalTab.vue';
import SettleData from '@/views/flowable/form/inProgress/settleData.vue';
import BorrowData from '@/views/flowable/form/inProgress/borrowData.vue';
import BudgetTab from '@/views/flowable/form/projectProcess/budgetTab.vue';
import achiData from "@/views/flowable/form/inProgress/achiData.vue";
import choosePeople from '@/views/flowable/form/budget/components/choosePeople.vue'
export default {
  components: { budgetInfo, SafeTab, TechnicalTab, SettleData, BorrowData, BudgetTab, achiData, choosePeople },
  created() {
    this.getUserList();
    this.getDeviceList();
    this.getCarList();
    if (this.$route.query) {
      this.taskForm.formId = this.$route.query.projectId
      let projectId = this.$route.query.projectId
      this.getProjectInfo(projectId)
      this.getProjectWorkList(projectId)
      this.getProjectCommentList(projectId)
      this.getContractDataList(projectId);
      this.getProjectProgressList(projectId);
    }
  },
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      project: {},
      activeName: '1',
      column: 3,
      userList: [],
      deviceList: [],
      carList: [],
      workList: [],
      deptLeaderList: [],
      progressList: [],
      contractCode: "",
      contractNumber: "",
      openBudget: false,
      openSafe: false,
      openTech: false,
      prLeaderOpen: false,
      taskForm: {
        formId: ''
      },
      projectComment: {},
      devices: [],
      cars: [],
      drivers: [],
      participates: []
    }
  },
  methods: {
    getProjectInfo(projectId) {
      getProject(projectId).then(res => {
        if (res.data) {
          this.project = res.data;
          let deptArr = this.project.undertakingDept.split(',');
          let undertakingDept = []
          for (let dept of deptArr) {
            getUsersDeptLeaderByDept({ deptId: Number(dept) }).then(res => {
              this.deptLeaderList.push(res.data.nickName);
            })
          }
          if (this.project.devices && this.project.devices.trim() !== '') {
            this.devices = (this.project.devices.split(',')).map(Number)
          }
          if (this.project.cars && this.project.cars.trim() !== '') {
            this.cars = (this.project.cars.split(',')).map(Number)
          }
          if (this.project.drivers && this.project.drivers.trim() !== '') {
            this.drivers = (this.project.drivers.split(',')).map(Number)
          }
          if (this.project.participates && this.project.participates.trim() !== '') {
            this.participates = (this.project.participates.split(',')).map(Number)
          }
        }
      })
    },
    getUserList() {
      listUser({
        pageNum: 1,
        pageSize: 9999
      }).then(res => {
        if (res.code == 200) {
          this.userList = res.rows
        }
      })
    },
    getDeviceList() {
      listDevice({
        pageNum: 1,
        pageSize: 99999999,
        type: '仪器设备'
      }).then(res => {
        this.deviceList = res.rows
      })
    },
    getCarList() {
      listCar({ pageSize: 9999, pageNum: 1 }).then(res => {
        this.carList = res.rows
      })
    },
    getProjectProgressList(projectId) {
      getProjectProgress(projectId).then(res => {
        if (res.data) {
          this.progressList = res.data;

        }
      });
    },
    // 获取项目相关合同编号
    getContractDataList(projectId) {
      listProjectContract({ projectId }).then(res => {
        if (res.rows) {
          for (let row of res.rows) {
            getContract(row.contractId).then(res => {
              if (res.data) {
                if (this.contractCode != '') {
                  this.contractCode = this.contractCode + '、' + res.data.contractCode;
                } else {
                  this.contractCode = res.data.contractCode;
                }
                if (this.contractNumber != '') {
                  this.contractNumber = this.contractNumber + '、' + res.data.contractNumber;
                } else {
                  this.contractNumber = res.data.contractNumber;
                }
              }
            })
          }
        }
      })
    },
    getProjectWorkList(projectId) {
      listProjectWork({ projectId }).then(res => {
        this.workList = res.rows;
      })
    },
    getProjectCommentList(projectId) {
      getProjectComment(projectId).then(res => {
        if (res.data) {
          this.projectComment = res.data
        }
      })
    },
    getUserName(userId) {
      if (userId) {
        let arr = this.userList.filter(item => item.userId == userId)
        if (arr.length == 1) {
          let name = arr[0].nickName
          return name
        }

      }
    },
    getUserListName(userIdArr) {
      if (userIdArr) {
        for (let user of userIdArr) {

        }
      }
    },
    getFileName(name) {
      if (name != null) {
        let arr = name.split('/')
        return arr[arr.length - 1];
      }
    },
    goBack() {
      let obj = { path: "/project/info" }
      this.$tab.closeOpenPage(obj);
      this.$router.push({ path: '/product/project' });
    },
    reviewWord(url) {
      this.$router.push({
        path: '/preview',
        query: {
          url: url
        }
      })
    },
    changeProjectLeader(val) {
      let preLeader = this.getUserName(this.project.projectLeader);
      let curLeader = val.nickName;
      this.$confirm('项目负责人将由' + preLeader + '变更为' + curLeader + '，是否确认', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        updateProject(
          { projectId: this.project.projectId, projectLeader: val.userId }
        ).then(res => {
          this.$message.success('项目负责人修改成功');
          this.prLeaderOpen = false;
          this.$router.go(0);
        })
      }).catch(() => { });
    }
  },
}
</script>

<style lang="scss" scoped>
@import "@/assets/styles/element-reset.scss";

.header {
  position: relative;
  text-align: center;

  .back {
    position: absolute;
    left: 12px;
    top: -10px;
  }
}

.content {
  background-color: #f3f5f7;
  padding: 20px 20px 40px 20px;

  .box1 {
    width: 100%;
    background-color: #ffffff;
  }

  .info {
    padding: 20px;
  }

  .title {
    font-size: 18px;
    font-weight: bold;
    padding: 20px 35px 0px;
    position: relative;

    .line {
      position: absolute;
      top: 22px;
      left: 20px;
      width: 4px;
      height: 20px;
      border-radius: 20px;
      background-color: #303133;
    }
  }
}

.sign {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 80px;
  /* 如果需要垂直居中 */
}

.table-warpper {
  max-width: 1422px;
}

::v-deep .el-descriptions-item__label.is-bordered-label {
  color: #5a5757;
  background: rgba($color: #a9adb3, $alpha: 0.1);
  width: 150px;
  min-width: 150px;
}

::v-deep .el-descriptions .is-bordered .el-descriptions-item__cell {
  border: 1px solid #cdd0d3;
}
</style>