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

<template>
  <div>
    <!--    <el-descriptions  :column="4" size="medium" border>-->
    <!--      <el-descriptions-item label="项目名称" span="2">{{ form.name }}</el-descriptions-item>-->
    <!--      <el-descriptions-item label="项目类型">{{ form.type }}</el-descriptions-item>-->
    <!--      <el-descriptions-item label="项目编码">{{ form.code }}</el-descriptions-item>-->

    <!--      <el-descriptions-item label="从属项目">{{ form.parentId }}</el-descriptions-item>-->
    <!--      <el-descriptions-item label="负责部门">{{ form.responsibleDeptName }}</el-descriptions-item>-->
    <!--      <el-descriptions-item label="项目经理">{{ form.responsibleUserName }}</el-descriptions-item>-->
    <!--      <el-descriptions-item label="项目团队">{{ form.teamName }}</el-descriptions-item>-->
    <!--      <el-descriptions-item label="项目预算">{{ form.number }}</el-descriptions-item>-->
    <!--      <el-descriptions-item label="项目周期">{{ form.cycle }}</el-descriptions-item>-->
    <!--      <el-descriptions-item label="计划开始日期">{{ form.cycle }}</el-descriptions-item>-->
    <!--      <el-descriptions-item label="计划完成日期">{{ form.planEndDate }}</el-descriptions-item>-->
    <!--      <el-descriptions-item label="关联合同">{{ form.contractName }}</el-descriptions-item>-->
    <!--      <el-descriptions-item label="客户名称">{{ form.contactName }}</el-descriptions-item>-->
    <!--      <el-descriptions-item label="客户联系电话">{{ form.contactRelationPhone }}</el-descriptions-item>-->
    <!--      <el-descriptions-item label="项目简介" :span="3">{{ form.content }}</el-descriptions-item>-->
    <!--      <el-descriptions-item label="附件">-->
    <!--        <el-link-->
    <!--          v-for="item in form.files"-->
    <!--          type="primary"-->
    <!--          :underline="false"-->
    <!--          @click="downloadFile(item)">-->
    <!--          {{ item.name }}-->
    <!--        </el-link>-->
    <!--      </el-descriptions-item>-->
    <!--    </el-descriptions>-->
    <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="项目类型">
            <!--            <dict-selection dict-name="项目类型" v-model="form.type" :disabled="dialogType=='view'"-->
            <!--                            @change="changeType"></dict-selection>-->
            <ele-tree-select
              filterable
              :disabled="dialogType == 'view'"
              clearable
              :data="typeTreeList"
              v-model="form.type"
              valueKey="id"
              labelKey="name"
              placeholder="请选择"
              @change="changeType"
              default-expand-all
            />
          </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-row>
      <el-row>
        <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="负责部门" 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-row>
      <el-row>
        <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 teamList"
                :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-row>
      <el-row>
        <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 label="权重占比">-->
        <!--            <el-input type="number" :min="0" :max="100" v-model="form.proportion" :disabled="dialogType=='view'">-->
        <!--              <template slot="append">-->
        <!--                %-->
        <!--              </template>-->
        <!--            </el-input>-->
        <!--          </el-form-item>-->
        <!--        </el-col>-->
      </el-row>
      <el-row>
        <el-col :span="8">
          <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">
          <el-form-item label="客户名称">
            <el-input
              v-model="form.contactName"
              @click.native="handleGetCus"
              readonly
              :disabled="dialogType == 'view' || !!form.contractName"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="联系人">
            <el-input v-model="form.contactRelationUserName"></el-input>
            <!-- <el-select
              v-model="form.contactRelationUserId"
              placeholder="请选择"
              @change="onchangeLink"
              style="width: 100%"
              :disabled="dialogType == 'view'"
            >
              <el-option
                v-for="item in linkNameOptions"
                :key="item.id"
                :label="item.linkName"
                :value="item.id"
              >
              </el-option>
            </el-select> -->
          </el-form-item>
        </el-col>

        <!--        <el-col :span="8">-->
        <!--          <el-form-item-->
        <!--            prop="stage"-->
        <!--            label="项目阶段">-->
        <!--            <el-input v-model="form.stage" :disabled="dialogType=='view'"></el-input>-->
        <!--          </el-form-item>-->
        <!--        </el-col>-->
      </el-row>
      <el-row>
        <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-row>
      <el-row>
        <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-button type="primary"  @click="handleUpload"> 上传</el-button>-->
            <!--            <fileUpload-->
            <!--              v-if="dialogType!='view'"-->
            <!--              style="position: absolute"-->
            <!--              v-model="form.files"-->
            <!--              module="main"-->
            <!--              :showLib="false"-->
            <!--            />-->
            <!--            <el-link-->
            <!--              v-else-->
            <!--              v-for="item in form.files"-->
            <!--              type="primary"-->
            <!--              :underline="false"-->
            <!--              @click="downloadFile(item)">-->
            <!--              {{ item.name }}-->
            <!--            </el-link>-->
          </el-form-item>
        </el-col>
      </el-row>
      <!--      <el-row>-->
      <!--        <el-col :span="24">-->
      <!--          <el-form-item label="备注">-->
      <!--            <el-input type="textarea" :rows="2" v-model="form.remark" :disabled="dialogType=='view'"></el-input>-->
      <!--          </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>
  </div>
</template>

<script>
  import { getProjectCode, projectsToTreeAPI } from '@/api/project-manage';
  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 { getProduceTreeByCode } from '@/api/custom';
  import moment from 'moment';
  import { cityData } from 'ele-admin/packages/utils/regions';
  import { Link } from 'element-ui';
  import { contactDetail } from '@/api/eos';
  export default {
    name: 'project-form',
    components: { fileUpload, PersonSelect, customDialog, contractListDialog },
    props: {
      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 {
        cityData,
        linkNameOptions: [],
        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: []
        },
        typeTreeList: [],
        projectList: [],
        customDialogFlag: false,
        contractDialogFlag: false,
        rules: {
          type: {
            required: true,
            message: '请选择项目类型',
            trigger: 'change'
          },
          name: { required: true, message: '请输入项目名称', trigger: 'blur' },
          budget: {
            required: true,
            message: '请输入项目预算',
            trigger: 'blur'
          },
          contactName: {
            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'
      });
      this.typeTreeList = await getProduceTreeByCode('XM1');
    },

    methods: {
      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(val) {
        // this.form.code = await getProjectCode(val)
      },
      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.form = Object.assign({}, this.form, {
            contractName: '',
            contractId: '',
            contactId: '',
            contactName: '',
            contactRelationPhone: ''
          });
          return;
        }
        this.contractDialogFlag = true;
      },
      //选择合同信息回调
      getContractInfo(obj) {
        this.form.contractId = obj.id;
        this.form.contractName = obj.contractName;
        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 });
        }
      },
      //获取客户信息
      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>