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

<template>
  <ele-modal
    custom-class="ele-dialog-form long-dialog-form"
    :centered="true"
    :visible.sync="addOrEditDialogFlag"
    :title="title"
    :close-on-click-modal="false"
    :append-to-body="true"
    width="70%"
    :before-close="cancel"
  >
    <headerTitle title="基础信息"></headerTitle>
    <project-form
      ref="projectForm"
      :dialog-type="dialogType"
      :dialogForm="dialogForm"
      :deptList="deptList"
      :deptTreeList="deptTreeList"
      :teamList="teamList"
      @teamChange="getUserList"
    ></project-form>
    <!--    <headerTitle title="项目阶段"></headerTitle>-->
    <!--    <project-info-table ref="projectInfoTable" :dialog-type="dialogType" :dialogForm="dialogForm" :deptList="deptList"-->
    <!--                        :deptTreeList="deptTreeList" :userList="userList"></project-info-table>-->
    <div slot="footer">
      <el-button type="primary" size="small" @click="submit">保 存</el-button>
      <!--      <el-button type="primary" size="small" @click="submit('sub')">提 交</el-button>-->
      <el-button size="small" @click="cancel">关 闭</el-button>
    </div>
  </ele-modal>
</template>

<script>
  import projectForm from './project-form.vue';
  import projectInfoTable from './projectInfoTable.vue';
  import {
    projectsGetByIdAPI,
    projectsSaveAPI,
    projectsUpdateAPI,
    submit
  } from '@/api/project-manage';
  import { listOrganizations } from '@/api/system/organization';
  import {
    projectsTeamGetByIdAPI,
    projectsTeamPageAPI
  } from '@/api/project-manage/team';
  import { deepClone } from '@/utils';

  export default {
    name: 'addOrEditDialog',
    components: {
      projectForm,
      projectInfoTable
    },
    props: {
      addOrEditDialogFlag: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        title: '',
        dialogType: '',
        dialogForm: {
          budget: '',
          unit: '1',
          code: '',
          contactId: '',
          contactName: '',
          contactRelationPhone: '',
          contactRelationUserId: '',
          contactRelationUserName: '',
          content: '',
          cycle: '',
          deptUserId: '',
          deptUserName: '',
          level: '',
          monitorUserId: '',
          monitorUserName: '',
          planStartDate: '',
          planEndDate: '',
          proportion: undefined,
          name: '',
          parentId: '',
          remark: '',
          responsibleUserId: '',
          responsibleUserName: '',
          responsibleDeptId: '',
          responsibleDeptName: '',
          stage: '',
          teamId: '',
          teamName: '',
          type: '',
          contractId: '',
          contractName: '',
          files: [],
          contactAddress: ''
        },
        teamList: [],
        userList: [],
        deptList: [],
        deptTreeList: []
      };
    },
    created() {
      this.getDeptList();
      this.getTeamList();
    },
    methods: {
      init(row = {}, type) {
        this.title = type === 'add' ? '新增' : '编辑';
        this.dialogType = type;
        if (type === 'add') {
          console.log(row);
          this.$set(this.dialogForm, 'parentId', row.id);
        } else {
          this.getInfo(row.id);
        }
      },
      async getInfo(id) {
        this.dialogForm = await projectsGetByIdAPI(id);
        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.forEach((item, index) => {
          let userIds = item.responsibleUserList.map((i) => i.userId) || [];
          this.$set(item, 'responsibleUserIds', userIds);
        });
        if (this.dialogForm.teamId) this.getUserList(this.dialogForm.teamId);
      },
      // 获取部门数据
      getDeptList() {
        listOrganizations().then((list) => {
          this.deptList = list;
          this.deptTreeList = this.$util.toTreeData({
            data: list,
            idField: 'id',
            parentIdField: 'parentId'
          });
        });
      },
      // 获取项目团队集合
      getTeamList() {
        projectsTeamPageAPI({
          pageNum: 1,
          size: 999
          // processStatus: 2
        }).then((list) => {
          this.teamList = list;
        });
      },
      // 获取项目团队下团队人员集合
      getUserList(val) {
        if (!val) {
          this.userList = [];
          return;
        }
        projectsTeamGetByIdAPI(val).then((list) => {
          this.userList = list.teamUserList;
        });
      },

      async submit(type = '') {
        let form = await this.$refs.projectForm.validForm();
        // form.stageList = await this.$refs.projectInfoTable.getTableValidate();
        form.realStartDate = null;
        form.realEndDate = null;
        // form.stageList.forEach((item) => {
        //   item.responsibleUserList = item.responsibleUserIds.map(
        //     i => {
        //       return {
        //         userId: i,
        //         userName: this.userList.find(u => u.id === i).name
        //       }
        //     }
        //   ) || []
        // })

        const API =
          this.dialogType === 'add' ? projectsSaveAPI : projectsUpdateAPI;
        const id = await API(form);
        if (type === 'sub') {
          this.processSubmit(id);
          return;
        }
        this.$message.success('操作成功');
        this.cancel();
        this.$emit('reload');
      },
      //流程提交
      processSubmit(id = '') {
        submit({
          projectId: this.dialogType === 'add' ? id : this.dialogForm.id
        }).then((res) => {
          this.$message.success('提交成功');
          this.cancel();
          this.$emit('reload');
        });
      },
      cancel() {
        this.$refs.projectForm.$refs.form.resetFields();

        this.$emit('update:addOrEditDialogFlag', false);
      }
    }
  };
</script>

<style scoped lang="scss">
  :deep(.el-dialog) {
    margin-top: 0 !important;
  }
</style>