luohairen
2024-11-27 abedc0c7a1a5b4b47d65d43a3d27fd8cb30c6848
src/views/projectEngineering/projectLibrary/component/InvestInfo.vue
New file
@@ -0,0 +1,294 @@
<template>
  <div class="basic-info">
    <el-form ref="demoFormRef" :disabled="disabled" :model="investment" class="dialog_form">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="建设地点是否跨域" label-width="120px" prop="fundsType" style="width: 100%">
            <el-select
              v-model="investment.beCrossRegion"
              clearable
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option v-for="item in dict.type.sys_cross_domain" :key="item.value" :label="item.label"
                         :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="项目建设地点" label-width="120px" prop="investmentType" style="width: 100%">
            <el-select
              v-model="investment.constructionLocation"
              clearable
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option v-for="item in dict.type.sys_administrative_divisions" :key="item.value" :label="item.label"
                         :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="建设详细地址" label-width="120px" prop="fundsType" style="width: 100%">
            <el-input v-model.trim="investment.detailedAddress" class="item" clearable disabled maxlength="255" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="是否是补码项目" label-width="120px" prop="projectType" style="width: 100%">
            <el-select
              v-model="investment.beCompensationProject"
              clearable
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option v-for="item in dict.type.sys_whether_project" :key="item.value" :label="item.label"
                         :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="补码原因" label-width="120px" prop="projectstatus" style="width: 100%">
            <el-input v-model.trim="investment.compensationReason" class="item" clearable maxlength="255" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="计划开工时间" label-width="120px" prop="plannedStartDate" style="width: 100%">
            <!--            <el-date-picker v-model="plannedStartDate" placeholder="选择时间" style="width: 100%" type="date" @change="chaneStartWork" />-->
            <el-input v-model.trim="plannedStartDate" class="item" clearable disabled maxlength="255" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="拟建成时间" label-width="120px" prop="expectedCompletionDate" style="width: 100%">
            <!--            <el-date-picker v-model="expectedCompletionDate" placeholder="选择时间" style="width: 100%" type="date" @change="chaneCompleted" />-->
            <el-input v-model.trim="expectedCompletionDate" class="item" clearable disabled maxlength="255" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="国际行业分类" label-width="120px" prop="engineering" style="width: 100%">
            <el-select
              v-model="investment.nationalIndustryClassification"
              clearable
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option v-for="item in dict.type.sys_whether_project" :key="item.value" :label="item.label"
                         :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="所属行业分类" label-width="120px" prop="department" style="width: 100%">
            <el-input v-model.trim="investment.industryClassification" class="item" clearable maxlength="255" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="项目建成性质" label-width="120px" prop="design" style="width: 100%">
            <el-select
              v-model="investment.projectNature"
              clearable
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option v-for="item in dict.type.sys_industry_belong" :key="item.value" :label="item.label"
                         :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="项目属性" label-width="120px" prop="putUnder" style="width: 100%">
            <el-select
              v-model="investment.projectAttribute"
              clearable
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option v-for="item in dict.type.sys_project_attributes" :key="item.value" :label="item.label"
                         :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="18">
          <el-form-item label="是否使用土地" label-width="120px" prop="approvalType" style="width: 100%">
            <el-select
              v-model="investment.useEarth"
              clearable
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option v-for="item in dict.type.sys_whether_project" :key="item.value" :label="item.label"
                         :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="18">
          <el-form-item class="item" label="主要建设内容及规模" label-width="120px" prop="content">
            <el-input v-model.trim="investment.contentScale" class="item" clearable maxlength="255" placeholder="请输入" type="textarea" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="18">
          <el-form-item class="item" label="建管平台代码" label-width="120px" prop="content">
            <el-input v-model.trim="investment.code" class="item" clearable maxlength="255" placeholder="请输入" type="textarea" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import { formatDate } from '@/utils';
export default {
  dicts: ['sys_cross_domain','sys_administrative_divisions','sys_whether_project','sys_industry_belong','sys_project_attributes'],
  name: 'InvestmentForm',
  props: {
    disabled: {
      type: Boolean,
      default: false,
      required: true
    }
  },
  data() {
    return {
      investment: {
        beCrossRegion: '',
        constructionLocation: '',
        detailedAddress: '',
        beCompensationProject: '',
        compensationReason: '',
        plannedStartDate: '',
        expectedCompletionDate: '',
        nationalIndustryClassification: '',
        industryClassification: '',
        projectNature: '',
        projectAttribute: '',
        useEarth: '',
        contentScale: '',
        code: '',
        projectId: ''
      },
      projectForm: {
        projectName: '',
        projectCode: '',
        projectType: '',
        projectStatus: '1',
        fundType: '',
        investType: '',
        importanceType: '',
        projectPhase: '储备规划阶段',
        tag: '',
        competentDepartment: '',
        projectLocation: '',
        longitude: '',
        latitude: '',
        managementCentralization: '',
        projectApplicationPhase: '',
        projectApprovalType: '',
        investmentCatalogue: '',
        approvalPlan: '',
        isSetProject: '',
        setTime: '',
        assignmentStatus: '',
        area: '',
        winTime: '',
        winUnit: '',
        winAmount: '',
        address: '',
        engineeringIdList: [],
        content: '',
        contact: '',
        projectOwnerUnit: '',
        planStartTime: '',
        planCompleteTime: '',
        projectContactPerson: '',
        fileIdList: [],
        sysOssVos: [],
        engineeringInfos: [],
        year: '',
        yearInvestAmount: '',
        competentDepartmentList: [],
        managementCentralizationList: []
      },
      plannedStartDate: '',
      expectedCompletionDate: '',
      sys_cross_domain: [],
      sys_industry_classification: [],
      sys_industry_belong: [],
      sys_project_attributes: [],
      sys_whether_project: [],
      sys_administrative_divisions: []
    };
  },
  mounted() {
    this.updateFormData();
  },
  methods: {
    chaneCompleted(val) {
      if (!val) return;
      this.investment.expectedCompletionDate = formatDate(val);
    },
    chaneStartWork(val) {
      if (!val) return;
      this.investment.plannedStartDate = formatDate(val);
    },
    updateFormData() {
      if(this.projectForm) {
        this.plannedStartDate = this.projectForm.planStartTime.slice(0, 10);
        this.expectedCompletionDate = this.projectForm.planCompleteTime.slice(0, 10);
        this.investment.constructionLocation = this.projectForm.area;
        this.investment.detailedAddress = this.projectForm.address;
      }
    }
  },
  watch: {
    projectForm: {
      deep: true,
      handler() {
        this.updateFormData();
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.item {
  width: 100%;
}
.input-row {
  display: flex;
  width: 100%;
  .input-item {
    width: 100%;
  }
}
.map-btn {
  width: 32px;
  height: 32px;
  background: #c6d6ff;
  border: 1px solid #3369ff;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  img {
    width: 20px;
  }
}
</style>