cmc-oa/oa-ui/src/views/flowable/form/projectProcess/index.vue

<!--
 * @Author: ysh
 * @Date: 2024-02-27 14:49:15
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-03-05 11:35:07
-->

<template>
  <div class="project-wrapper">
    <!-- 新建项目 -->
    <h2>经营管理部登记</h2>
    <el-form :model="addForm" :rules="rules" label-width="100px">
      <el-form-item label="项目编号：" prop="projectNumber">
        <el-input v-model="addForm.projectNumber"></el-input>
      </el-form-item>
      <el-form-item label="项目名称：" prop="projectName">
        <el-input v-model="addForm.projectName"></el-input>
      </el-form-item>
      <el-form-item label="项目负责人：" prop="projectLeader">
        <el-tag effect="plain" type="warning" style="margin-right: 10px;"
          v-if="addForm.projectLeaderName != undefined">{{ addForm.projectLeaderName }}</el-tag>
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="choosePeople">选择</el-button>
      </el-form-item>
      <el-form-item label="项目类型：" prop="projectType">
        <el-input v-model="addForm.projectType"></el-input>
      </el-form-item>
      <el-form-item label="项目级别：" prop="projectLevel">
        <el-radio v-model="addForm.projectLevel" label="0">一般项目</el-radio>
        <el-radio v-model="addForm.projectLevel" label="1">重大项目</el-radio>
      </el-form-item>
      <el-form-item label="项目来源：" prop="projectSource">
        <el-radio v-model="addForm.projectSource" label="0">院内</el-radio>
        <el-radio v-model="addForm.projectSource" label="1">院外</el-radio>
      </el-form-item>
      <el-form-item label="甲方单位：" prop="partyA">
        <el-input v-model="addForm.partyA"></el-input>
      </el-form-item>
      <el-form-item label="联系人：" prop="contactPerson">
        <el-input v-model="addForm.contactPerson"></el-input>
      </el-form-item>
      <el-form-item label="联系电话：" prop="telephone">
        <el-input v-model="addForm.telephone"></el-input>
      </el-form-item>
      <el-form-item label="项目概况：" prop="projectRegistrant">
        <table border="1">
          <tr>
            <td style="width:250px;">工作内容</td>
            <td>等级或比例尺</td>
            <td>单位</td>
            <td>工作量</td>
            <td style="width:100px;">要求完成时间</td>
            <td>备注</td>
          </tr>
          <tr v-for="(work, index) in workList" :key="index">
            <td>
              <el-input v-model="work.content" type="textarea" autosize clearable></el-input>
            </td>
            <td>
              <el-input v-model="work.scale" clearable></el-input>
            </td>
            <td>
              <el-input v-model="work.unit" clearable></el-input>
            </td>
            <td>
              <el-input v-model="work.workload" clearable></el-input>
            </td>
            <td>
              <el-date-picker style="width:140px;" v-model="work.deadline" value-format="yyyy-MM-dd" type="date"
                placeholder="选择日期">
              </el-date-picker>
            </td>
            <td>
              <el-input v-model="work.remark" type="textarea" autosize clearable></el-input>
            </td>
            <td>
              <el-button type="danger" icon="el-icon-minus" size="mini" circle
                @click="deletWorkItem(index)"></el-button>
            </td>
          </tr>
        </table>

        <el-button icon="el-icon-plus" size="mini" @click="addWorkList"></el-button>
      </el-form-item>
      <el-form-item label="项目登记人：" prop="projectRegistrant">
        <el-input v-model="addForm.projectRegistrant"></el-input>
      </el-form-item>
      <el-form-item label="备注：" prop="projectRegistrant">
        <el-input v-model="addForm.remark" type="textarea" rows="3"></el-input>
      </el-form-item>

    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: center;">
      <el-button type="primary" @click="confirmAddForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
    <!-- 人员选择对话框 -->
    <el-dialog width="30%" title="选择项目负责人" :visible.sync="peopleVisible" append-to-body>
      <el-form>
        <el-form-item label="部门：">
          <el-select v-model="peopleForm.deptId" @change="handleChangeDept">
            <el-option v-for="item in peopleForm.deptList" :key="item.deptId" :label="item.deptName"
              :value="item.deptId" v-if="item.deptName != '四川中水成勘院测绘工程有限责任公司'">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="人员：">
          <el-select v-model="peopleForm.userId">
            <el-option v-for="item in peopleForm.userList" :key="item.userId" :label="item.nickName"
              :value="item.userId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="confirmPeople" type="primary">确定</el-button>
          <el-button @click="cancelChoosePeople">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
import { listProject, submitProject, modifyProject, delProject } from "@/api/oa/project/project";
import { listDept } from '@/api/system/dept'
import { listUser, getUser } from '@/api/system/user'
export default {
  data() {
    return {
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        projectNumber: '',
        projectLeader: '',
        projectLeaderName: undefined,
        projectName: '',
      },
      projectList: [],
      total: 0,
      loading: true,
      addOpen: false,
      modifyOpen: false,
      title: '',
      addForm: {},
      rules: {
        projectNumber: [{ required: true, message: '请输入项目编号', trigger: 'blur' }],
        projectName: [{ required: true, message: '请输入项目名称', trigger: 'blur' }]
      },
      peopleVisible: false,
      peopleForm: {
        deptId: '',
        deptList: [],
        userId: '',
        userList: []
      },
      workList: [{
        content: '',
        scale: '',
        unit: '',
        workload: '',
        deadline: '',
        remark: ''
      }],
    }
  },
  created() {
    this.getList();
    this.getDeptList();
  },
  methods: {
    // 查询项目列表
    getList() {
      this.loading = true
      listProject(this.queryParams).then(response => {
        this.projectList = [];
        for (let p of response.rows) {
          if (p.projectLeader != null) {
            getUser(Number(p.projectLeader)).then(res => {
              p.projectLeaderName = res.data.nickName;
            })
          }
          this.projectList.push(p);
        }
        this.total = response.total;
        this.loading = false;
      })
    },
    getDeptList() {
      listDept({
        deptName: undefined,
        status: undefined
      }).then(res => {
        this.peopleForm.deptList = res.data
      })
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    handleAdd() {
      this.title = '新增项目'
      this.addOpen = true
    },
    handleUpdate(row) {
      debugger
      this.addForm = row;
      this.title = '修改项目信息';
      this.addOpen = true;
    },
    handleDelete(row) {
      const projectIds = row.projectId || this.ids;
      const projectNumbers = row.projectNumber || this.ids;
      this.$modal.confirm('是否确认删除项目编号为"' + projectNumbers + '"的数据项？').then(function () {
        return delProject(projectIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => { });
    },
    confirmAddForm() {
      this.addForm.workList = this.workList;
      let formData = new FormData();
      let form = JSON.stringify(this.addForm);
      formData.append("form", form);
      console.log(this.title);
      if (this.title == '新增项目')
        submitProject(formData).then(response => {
          this.$modal.msgSuccess("新增成功");
          this.addOpen = false;
          this.getList();
        });
      else
        modifyProject(formData).then(response => {
          this.$modal.msgSuccess("修改成功");
          this.addOpen = false;
          this.getList();
        });
    },
    // 人员选择
    choosePeople() {
      this.peopleVisible = true;
    },
    // 改变部门选择
    handleChangeDept(deptId) {
      this.peopleForm.userId = '';
      listUser({ pageSize: 999999, deptId }).then(res => {
        console.log(res);
        this.peopleForm.userList = res.rows
      })
    },
    // 确定项目负责人
    confirmPeople() {
      this.addForm.projectLeader = this.peopleForm.userId;
      this.addForm.projectLeaderName = this.tagLeader()
      this.peopleVisible = false
    },
    tagLeader() {
      if (this.addForm.projectLeader == '' || this.addForm.projectLeader == undefined || this.addForm.projectLeader == null) {
        return undefined
      } else {
        for (let user of this.peopleForm.userList) {
          if (this.addForm.projectLeader == user.userId) {
            return user.nickName
          }
        }
      }
    },
    cancel() {
      this.peopleForm.deptId = '';
      this.peopleForm.userId = '';
      this.addOpen = false;
      this.addForm = {}
    },
    addWorkList() {
      this.workList.push({
        content: '',
        scale: '',
        unit: '',
        workload: '',
        deadline: '',
        remark: ''
      });
    },
    deletWorkItem(index) {
      let arr = this.workList
      if (arr.length == 1) {
        return
      }
      if (index >= 0 && index < arr.length) {
        arr.splice(index, 1);
      }
    },
    cancelChoosePeople() {
      this.peopleForm.deptId = '';
      this.peopleForm.userId = '';
      this.peopleVisible = false;
    }
  },
}
</script>

<style lang="scss" scoped>
.project-wrapper {
  padding: 25px;
}

.table-header {
  background-color: #f5f5f5;
}

.card-header {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
}

table {
  /*居中*/
  margin: 0 auto;
  /*边框*/
  /* border: 1px solid black; */
  text-align: center;
  border-collapse: collapse;
  /*设置背景颜色*/
  /* background-color: #bfa; */
}
</style>