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

<template>
  <div>
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      class="el-form-box"
      label-width="120px"
    >
      <el-row>
        <el-col :span="8">
          <el-form-item prop="type" label="项目类型">
            <ele-tree-select
              filterable
              :disabled="dialogType == 'view'"
              clearable
              :data="typeTreeList"
              v-model="form.type"
              valueKey="id"
              labelKey="name"
              placeholder="请选择"
              @change="changeType"
              default-expand-all
              expand-on-click-node
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="code" label="项目编码">
            <el-input
              :disabled="dialogType == 'view'"
              v-model="form.code"
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item prop="name" label="项目名称">
            <el-input
              v-model="form.name"
              :disabled="dialogType == 'view'"
            ></el-input>
          </el-form-item>
        </el-col>

        <!-- <el-col :span="8">
          <el-form-item label="从属项目">
            <ele-tree-select
              :disabled="dialogType == 'view'"
              clearable
              filterable
              :data="projectList"
              v-model="form.parentId"
              childrenKey="projectList"
              valueKey="id"
              labelKey="name"
              placeholder="请选择"
              default-expand-all
            />
          </el-form-item>
        </el-col> -->

        <el-col :span="8">
          <el-form-item label="从属项目">
            <el-select
              ref="selectRef"
              v-model="form.parentId"
              placeholder="请选择"
              clearable
              @focus.prevent="openLinkParent('f')"
              @visible-change="openLinkParent('v')"
            >
              <el-option
                :key="form.parentId"
                :label="form.parentName"
                :value="form.parentId"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="负责部门" prop="responsibleDeptId">
            <ele-tree-select
              filterable
              :disabled="dialogType == 'view'"
              clearable
              :data="deptTreeList"
              v-model="form.responsibleDeptId"
              valueKey="id"
              labelKey="name"
              placeholder="请选择"
              @change="changeDeptInfo"
              default-expand-all
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="responsibleUserId" label="项目经理">
            <personSelect
              :disabled="dialogType == 'view'"
              ref="directorRef"
              :init="false"
              v-model="form.responsibleUserId"
              @selfChange="personChange"
            />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item prop="teamId" label="项目团队">
            <el-select
              v-model="form.teamId"
              placeholder="请选择"
              style="width: 100%"
              :disabled="dialogType == 'view'"
              clearable
              @change="teamChange"
            >
              <el-option
                v-for="item in grouplist"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="项目预算" prop="budget">
            <el-row>
              <el-col :span="18">
                <el-input
                  type="number"
                  :min="0"
                  v-model="form.budget"
                  :disabled="dialogType == 'view'"
                >
                </el-input>
              </el-col>
              <el-col :span="6">
                <dict-selection
                  dict-name="预算单位"
                  v-model="form.unit"
                  :disabled="dialogType == 'view'"
                ></dict-selection>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="项目优先级">
            <dict-selection
              dict-name="项目优先级别"
              v-model="form.level"
              :disabled="dialogType == 'view'"
            ></dict-selection>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item prop="planStartDate" label="计划开始日期">
            <el-date-picker
              @change="(val) => setCycleValue(val, 'planEndDate')"
              style="width: 100%"
              :disabled="dialogType == 'view'"
              v-model="form.planStartDate"
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"
              :picker-options="{
                disabledDate: (time) => {
                  return (
                    form.planEndDate &&
                    time.getTime() > new Date(form.planEndDate)
                  );
                }
              }"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="planEndDate" label="计划完成日期">
            <el-date-picker
              @change="(val) => setCycleValue(val, 'planStartDate')"
              style="width: 100%"
              :disabled="dialogType == 'view'"
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"
              :picker-options="{
                disabledDate: (time) => {
                  return (
                    form.planStartDate &&
                    time.getTime() < new Date(form.planStartDate)
                  );
                }
              }"
              v-model="form.planEndDate"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="cycle" label="项目周期">
            <el-input
              v-model="form.cycle"
              :disabled="dialogType == 'view'"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="relationType" label="关联类型">
            <el-select
              v-model="form.relationType"
              placeholder="请选择"
              @change="typeChange"
              style="width: 100%"
              :disabled="dialogType == 'view'"
            >
              <el-option
                v-for="item in typeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8" v-if="form.relationType == 3">
          <el-form-item label="关联合同" prop="contractName">
            <el-input
              :disabled="dialogType == 'view'"
              clearable
              v-model="form.contractName"
              @click.native="handleContractBtn"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="form.relationType == 1">
          <el-form-item label="关联订单" prop="relationCode">
            <el-input
              :disabled="dialogType == 'view'"
              clearable
              v-model="form.relationCode"
              @click.native="handleOrder"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="客户名称">
            <el-input
              v-model="form.contactName"
              @click.native="handleGetCus"
              readonly
              :disabled="dialogType == 'view' || !!form.relationId"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="联系人">
            <el-input
              v-model="form.contactRelationUserName"
              :disabled="dialogType == 'view'"
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item prop="contactRelationPhone" label="客户联系电话">
            <el-input
              v-model="form.contactRelationPhone"
              :disabled="dialogType == 'view'"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="联系地址" prop="contactAddressId">
            <el-cascader
              clearable
              v-model="form.contactAddressId"
              :options="cityData"
              ref="sendAddress"
              :disabled="dialogType == 'view'"
              style="width: 35%"
            ></el-cascader>
            <el-input
              placeholder="请输入"
              v-model="form.contactAddress"
              :disabled="dialogType == 'view'"
              style="width: 65%"
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="16">
          <el-form-item label="项目简介">
            <el-input
              type="textarea"
              :rows="2"
              v-model="form.content"
              :disabled="dialogType == 'view'"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="附件">
            <fileUpload v-model="form.files" :type="dialogType"></fileUpload>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <custom-dialog
      v-if="customDialogFlag"
      ref="customRef"
      :customDialogFlag.sync="customDialogFlag"
      @getCusInfo="getCusInfo"
    ></custom-dialog>
    <contractListDialog
      ref="contractRef"
      v-if="contractDialogFlag"
      :contractDialogFlag.sync="contractDialogFlag"
      @changeParent="getContractInfo"
    ></contractListDialog>
    <orderListDialog
      ref="orderListRef"
      @changeParent="getOrderDialog"
    ></orderListDialog>

    <!-- 从属项目打开弹窗 -->
    <linkParentDialog
      :linkParentDialogFlag.sync="linkParentDialogFlag"
      :multiple="true"
      ref="linkParentDialogRef"
      v-if="linkParentDialogFlag"
      @linkParent="linkParentFn"
      @close="close"
      :treeApi="getProduceTreeByCode"
      :treeApiCode="'XM1'"
      tableDataApi="projectsPageAPI"
    ></linkParentDialog>
  </div>
</template>

<script>
  import {
    getProjectCode,
    projectsToTreeAPI,
    getProjectCodeG,
    projectsPageAPI
  } from '@/api/project-manage';
  import { projectsTeamPageAPI } from '@/api/project-manage/team';

  import linkParentDialog from '@/components/linkParentDialog';

  import PersonSelect from '@/components/CommomSelect/person-select.vue';
  import customDialog from '../../components/custom-dialog.vue';
  import fileUpload from '@/BIZComponents/addDoc/index.vue';
  import { getFile } from '@/api/system/file';
  import contractListDialog from '@/views/project-manage/components/contractListDialog.vue';
  import orderListDialog from '@/BIZComponents/orderListDialog/orderListDialog.vue';
  import { getProduceTreeByCode } from '@/api/custom';
  import moment from 'moment';
  import { cityData } from 'ele-admin/packages/utils/regions';

  import { contactDetail } from '@/api/eos';
  export default {
    name: 'project-form',
    components: {
      fileUpload,
      PersonSelect,
      customDialog,
      contractListDialog,
      orderListDialog,
      linkParentDialog
    },
    props: {
      code: {
        type: String,
        default: ''
      },
      dialogType: {
        type: String,
        default: ''
      },
      dialogForm: {
        type: Object,
        default: () => {
          return {
            ...this.form
          };
        }
      },
      teamList: {
        type: Array,
        default: () => {
          return [];
        }
      },
      deptList: {
        type: Array,
        default: () => {
          return [];
        }
      },

      deptTreeList: {
        type: Array,
        default: () => {
          return [];
        }
      }
    },
    watch: {
      dialogForm: {
        handler(val) {
          this.form = { ...this.dialogForm };
          // 回显地址选择器
          if (
            this.form.contactAddressId &&
            this.form.contactAddressId.length > 0
          ) {
            this.form.contactAddressId = this.form.contactAddressId.split(',');
          }
          this.$nextTick(async () => {
            await this.getUserList(this.dialogForm.responsibleDeptId);
          });
        },
        deep: true
      }
    },
    data() {
      return {
        projectsPageAPI:'',
        getProduceTreeByCode: '',
        linkParentDialogFlag: false,
        rootId: [],
        // 编码规则要传的参数
        ruleCode: '',
        cityData,
        typeOptions: [
          {
            value: 1,
            label: '订单'
          },
          {
            value: 3,
            label: '合同'
          }
        ],
        form: {
          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: [],
          relationType: 1
        },
        typeTreeList: [],
        projectList: [],
        grouplist: [],
        customDialogFlag: false,
        contractDialogFlag: false,
        rules: {
          type: {
            required: true,
            message: '请选择项目类型',
            trigger: 'change'
          },
          name: { required: true, message: '请输入项目名称', trigger: 'blur' },
          budget: {
            required: true,
            message: '请输入项目预算',
            trigger: 'blur'
          },
          // contactId: {
          //   required: true,
          //   message: '请选择客户',
          //   trigger: 'blur'
          // },

          teamId: {
            required: true,
            message: '请选择项目团队',
            trigger: 'change'
          },
          responsibleDeptId: {
            required: true,
            message: '请选择负责部门',
            trigger: 'change'
          },
          responsibleUserId: {
            required: true,
            message: '请选择项目经理',
            trigger: 'change'
          },
          planStartDate: {
            required: true,
            message: '请选择计划开始日期',
            trigger: 'change'
          },
          planEndDate: {
            required: true,
            message: '请选择计划完成日期',
            trigger: 'change'
          },
          code: {
            required: true,
            message: '请输入项目编码',
            trigger: ['blur', 'change']
          }
        }
      };
    },
    async created() {
      this.projectList = await projectsToTreeAPI({
        processStatus: '2',
        treeType: '0'
      });
      console.log(this.projectList);
      this.getProduceTreeByCode = getProduceTreeByCode;
      const res1 = await getProduceTreeByCode('XM1');
      this.typeTreeList = res1;
      // 根id为了tree不能选择树节点
      this.rootId = res1.map((item) => item.id);
      let res2 = await projectsTeamPageAPI({ pageNum: 1, size: 10 });
      this.grouplist = res2;
      this.ruleCode = this.typeTreeList[0].ruleCode;
    },

    methods: {
      close() {
        this.linkParentDialogFlag = false;
      },
      openLinkParent(...arg) {
        console.log(arg);
        let _this = this;
        _this.$refs.selectRef.blur();
        this.linkParentDialogFlag = true;
      },
      linkParentFn() {},
      setCycleValue(val, prop) {
        if (!this.form[prop] || !val) return (this.form.cycle = '');
        const a = moment(this.form.planEndDate);
        const b = moment(this.form.planStartDate);
        this.form.cycle = a.diff(b, 'days') + 1 + ' 天'; // 1
      },
      async changeType(e) {
        if (this.rootId.includes(e)) {
          console.log('不饿能');
          return;
        }
        this.form.code = await getProjectCodeG(this.ruleCode);
      },
      async teamChange(val) {
        let find = this.teamList.find((e) => e.id == val) || {};
        this.form.teamName = find.name;
        this.$emit('teamChange', val);
      },
      // 选择负责人部门
      changeDeptInfo(id) {
        const info = this.deptList.find((e) => e.id == id) || {};
        this.form.responsibleDeptName = info.name;
        this.form.responsibleUserId = '';
        this.form.responsibleUserName = '';
        this.getUserList(id);
      },
      // 获取人员数据
      getUserList(groupId) {
        if (groupId) {
          this.$refs.directorRef && this.$refs.directorRef.getList({ groupId });
        }
      },
      handleContractBtn(e) {
        if (e.target.nodeName == 'I') {
          this.clearInfo();
          return;
        }
        this.contractDialogFlag = true;
      },
      handleOrder() {
        this.$refs.orderListRef.open();
      },

      clearInfo() {
        this.form = Object.assign({}, this.form, {
          contractName: '',
          contractId: '',
          contactId: '',
          contactName: '',
          contactRelationPhone: '',
          contactRelationUserName: '',
          contactAddressId: '',
          contactAddress: '',
          relationId: '',
          relationId: '',
          relationName: '',
          relationCode: ''
        });
      },
      typeChange() {
        this.clearInfo();
      },

      //选择合同信息回调
      getContractInfo(obj) {
        this.form.contractId = obj.id;
        this.form.contractName = obj.contractName;
        this.form.relationId = obj.id;
        this.form.relationName = obj.contractName;
        this.form.relationCode = obj.contractNo;

        if (obj.type == 1) {
          this.form.contactId = obj.partaId;
          this.form.contactName = obj.partaName;
          this.getCusInfo({ id: obj.partaId });
        } else {
          this.form.contactId = obj.partbId;
          this.form.contactName = obj.partbName;
          this.getCusInfo({ id: obj.partbId });
        }
      },
      //选择订单信息回调
      getOrderDialog(obj) {
        this.form.relationId = obj.id;
        this.form.relationCode = obj.orderNo;
        this.getCusInfo({ id: obj.partaId });
      },
      //获取客户信息
      handleGetCus() {
        this.customDialogFlag = true;
        let item = { id: this.form.contactId };
        this.$nextTick(() => {
          this.$refs.customRef.open(item);
        });
      },
      //选择客户信息回调
      async getCusInfo(obj) {
        const { base, other } = await contactDetail(obj.id);
        this.form = Object.assign({}, this.form, {
          contactId: base.id,
          contactName: base.name,
          contactRelationPhone: obj.linkPhone || obj.phone,
          contactRelationUserName: obj.linkName
        });
        if (other.addressId) {
          this.form.contactAddressId =
            other.addressId && other.addressId.split(',');
          this.form.contactAddressName = other.addressName;
          this.form.contactAddress = other.address;
        } else if (base.addressId) {
          this.form.contactAddressId =
            base.addressId && base.addressId.split(',');
          this.form.contactAddressName = base.addressName;
          this.form.contactAddress = base.address;
        }
      },
      downloadFile(file) {
        getFile({ objectName: file.storePath }, file.type);
      },
      personChange(val, info) {
        this.form.responsibleUserName = info.name;
      },
      validForm() {
        return new Promise((resolve, reject) => {
          this.$refs.form.validate((valid) => {
            if (!valid) {
              this.$message.warning('有必填项未填，请检查');
              reject('有必填项未填，请检查');
            } else {
              // 基本信息处理
              if (this.$refs.sendAddress.getCheckedNodes()) {
                let node = this.$refs.sendAddress.getCheckedNodes()[0];
                if (node) {
                  this.form.contactAddressId = node.path.join();
                  this.form.contactAddressName = node.pathLabels.join();
                } else {
                  this.form.contactAddressId = '';
                  this.form.contactAddressName = '';
                }
              }
              resolve(this.form);
            }
          });
        });
      }
    }
  };
</script>

<style scoped lang="scss"></style>