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: []
      },
      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.$emit('update:addOrEditDialogFlag', false);
    }
  }
};
</script>


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