xiangpei
2025-02-24 08166d0f2f82f109055602fbecbb68400f2926d1
src/views/projectEngineering/projectLibrary/component/BasicInfo.vue
@@ -1,259 +1,422 @@
<template>
  <div class="basic-info">
    <el-form ref="projectForm" :disabled="disabled" :model="projectForm" :rules="rules" class="dialog_form">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item class="item" label="项目名称" label-width="100px" prop="projectName">
            <el-input v-model.trim="projectForm.projectName" class="item" clearable maxlength="255" placeholder="请输入"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item class="item" label="项目代码" label-width="100px" prop="projectCode">
            <el-input v-model.trim="projectForm.projectCode" class="item" clearable disabled maxlength="255"
                      placeholder="请输入"/>
          </el-form-item>
        </el-col>
        <el-col :span="12" style="position: relative">
          <div style="width: 150px; position: absolute;"><img alt="" src="../../../../assets/images/s.png"/></div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item class="item" label="建设内容" label-width="100px" prop="content">
            <el-input v-model.trim="projectForm.content" style="width: 100%;" clearable maxlength="255"
                      placeholder="请输入" type="textarea"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="资金类型" label-width="100px" prop="fundType" style="width: 100%">
            <el-select v-model="projectForm.fundType" clearable placeholder="请选择" style="width: 100%">
              <el-option v-for="item in dict.type.sys_funding_type" :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="100px" prop="investType" style="width: 100%">
            <el-select v-model="projectForm.investType" clearable placeholder="请选择" style="width: 100%">
              <el-option v-for="item in dict.type.sys_investment_type" :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="100px" prop="fundsType" style="width: 100%">
            <el-input v-model.trim="projectForm.projectPhase" 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="100px" prop="projectType" style="width: 100%">
            <el-select v-model="projectForm.projectType" clearable placeholder="请选择" style="width: 100%">
              <el-option v-for="item in dict.type.sys_project_type" :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="100px" prop="projectstatus" style="width: 100%">
            <el-select v-model="projectForm.projectStatus" clearable placeholder="请选择" style="width: 100%">
              <el-option v-for="item in dict.type.sys_project_status" :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="100px" prop="projectOwnerUnit" style="width: 100%">
            <el-input v-model.trim="projectForm.projectOwnerUnit" 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="100px" prop="projectContactPerson" style="width: 100%">
            <el-input v-model.trim="projectForm.projectContactPerson" class="item" clearable maxlength="255"
                      placeholder="请输入"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="联系方式" label-width="100px" prop="contact" style="width: 100%">
            <el-input v-model.trim="projectForm.contact" class="item" clearable maxlength="255" placeholder="请输入"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <!-- TODO:暂时不做 -->
          <el-form-item label="关联工程" label-width="100px" prop="engineering" style="width: 100%">
            <!--            <el-input v-model.trim="getEngineeringName" class="item" clearable disabled maxlength="255" placeholder="请在工程中选择项目" />-->
            <el-select v-model="projectForm.engineeringIdList" :multiple="true" collapse-tags placeholder="请选择"
                       style="width: 100%">
              <el-option v-for="item in selectOptions" :key="item.id" :label="item.engineeringName" :value="item.id"/>
              <!--              <RemoteSelect v-if="selectOptions.length" :hasMore="hasMore" :loading="loading" :page="page" @loadMore="handleLoadMore" />-->
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="主管部门" label-width="100px" prop="competentDepartmentList" style="width: 100%">
            <el-select
              v-model="projectForm.competentDepartmentList"
              clearable
              :multiple="true"
              placeholder="请选择"
              style="width: 100%"
              collapse-tags
              @change="changeDepartment">
              <el-option
                v-for="item in approvalList"
                :key="item.id"
                :value="item.id"
                :label="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="行政区划" label-width="100px" prop="area" style="width: 100%">
            <el-select
              v-model="projectForm.area"
              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="100px" style="width: 100%">
            <el-select
              v-model="projectForm.managementCentralizationList"
              clearable
              :multiple="true"
              placeholder="请选择"
              style="width: 100%"
              collapse-tags
              @change="changePutUnder"
            >
              <el-option v-for="item in dict.type.sys_centralized_management" :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="100px" style="width: 100%">
            <el-select
              v-model="projectForm.projectApprovalType"
              clearable
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option v-for="item in dict.type.sys_approval_type" :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="100px" style="width: 100%">
            <el-input v-model="largeCategory" clearable disabled placeholder="请选择大类" style="width: 49%"/>
            <el-input v-model="subclass" clearable disabled placeholder="请选择小类" style="width: 49%;margin-left: 2%"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="重点分类" label-width="100px" style="width: 100%">
            <el-select
              v-model="projectForm.importanceType"
              clearable
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option v-for="item in dict.type.sys_key_categories" :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="100px" prop="setTime" style="width: 100%">
            <el-date-picker v-model="projectForm.createProjectTime"
                            placeholder="选择时间"
                            style="width: 100%"
                            type="date"
                            value-format="yyyy-MM-dd HH:mm:ss"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="计划开工时间" label-width="100px" style="width: 100%">
            <el-date-picker v-model="projectForm.planStartTime "
                            placeholder="选择时间"
                            style="width: 100%"
                            type="date"
                            value-format="yyyy-MM-dd HH:mm:ss"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="计划竣工时间" label-width="100px" style="width: 100%">
            <el-date-picker v-model="projectForm.planCompleteTime "
                            placeholder="选择时间"
                            style="width: 100%"
                            type="date"
                            value-format="yyyy-MM-dd HH:mm:ss"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="中标单位" label-width="100px" prop="setTime" style="width: 100%">
            <el-input v-model.trim="projectForm.winUnit" class="item" clearable maxlength="255" placeholder="请输入"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="中标金额" label-width="100px" style="width: 100%">
            <el-input v-model.trim="projectForm.winAmount" class="item" clearable maxlength="255" placeholder="请输入"
                      type="number"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="中标时间" label-width="100px" style="width: 100%">
            <el-date-picker v-model="projectForm.winTime"
                            placeholder="选择时间"
                            style="width: 100%"
                            type="date"
                            value-format="yyyy-MM-dd HH:mm:ss"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="年度投资计划" label-width="100px" prop="year" style="width: 100%">
            <el-select
              v-model="projectForm.year"
              clearable
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option v-for="item in dict.type.sys_annual_plan" :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="100px" prop="company" style="width: 100%; min-width: 260px">
            <el-input v-model.trim="projectForm.yearInvestAmount" clearable maxlength="255" placeholder="请输入"
                      style="width: 90%" type="number"/>
            <span style="margin-left: 2px">元</span>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="label">
        <div style="font-size: small;margin-bottom: 10px">基础信息:</div>
        <div>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item class="item" label="项目名称" label-width="100px" prop="projectName">
                <el-input v-model.trim="projectForm.projectName" class="item" clearable maxlength="255" placeholder="请输入"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item class="item" label="项目代码" label-width="100px" prop="projectCode">
                <el-input v-model.trim="projectForm.projectCode" class="item" clearable maxlength="255"
                          placeholder="请输入"/>
              </el-form-item>
            </el-col>
            <el-col :span="5">
                <el-form-item class="item" label="赋码" label-width="50px" prop="coding">
                    <template slot-scope="scope">
                      <!--                <div class="yellow-dot" v-if="scope.row.coding === 'yellow'"></div>-->
                      <!--                <div class="green-dot" v-if="scope.row.coding === 'green'"></div>-->
                      <!--                <div class="red-dot" v-if="scope.row.coding === 'red'"></div>-->
                      <div class="red-dot"></div>
                    </template>
                  </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="标签" label-width="50px" prop="tag">
                <template slot-scope="scope">
                  <tag-list :tag-list="tagList" ref="tagList" @getTags="getTagList"></tag-list>
                </template>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item class="item" label="建设内容" label-width="100px" prop="content">
                <el-input v-model.trim="projectForm.content" style="width: 100%;" clearable maxlength="255"
                          placeholder="请输入" type="textarea"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="资金类型" label-width="100px"  style="width: 100%">
                <el-select
                  v-model="projectForm.fundTypeList"
                  clearable
                  :multiple="true"
                  placeholder="请选择"
                  style="width: 100%"
                  collapse-tags>
                  <el-option v-for="item in dict.type.sys_funding_type" :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="100px" prop="investType" style="width: 100%">
                <el-select v-model="projectForm.investType" clearable placeholder="请选择" style="width: 100%">
                  <el-option v-for="item in dict.type.sys_investment_type" :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="100px" prop="constructionNature"
                            style="width: 100%; min-width: 260px">
                <el-select
                  v-model="projectForm.constructionNature"
                  clearable
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option v-for="item in dict.type.construction_nature" :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="100px" prop="attractInvestment"
                            style="width: 100%; min-width: 260px">
                <el-select
                  v-model="projectForm.attractInvestment"
                  clearable
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option v-for="item in dict.type.attract_investment" :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="100px" prop="projectType" style="width: 100%">
                <el-select v-model="projectForm.projectType" @change="getChildSelect" clearable placeholder="请选择" style="width: 100%">
                  <el-option v-for="item in dict.type.sys_project_type" :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="100px" prop="projectSubType" style="width: 100%">-->
<!--                <el-select v-model="projectForm.projectSubType" :disabled="projectForm.projectType === ''" clearable placeholder="请选择" style="width: 100%">-->
<!--                  <el-option v-for="item in projectSubTypeList" :key="item.dictCode + 'zd'" :label="item.dictLabel"-->
<!--                             :value="item.dictValue"/>-->
<!--                </el-select>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
            <el-col :span="6">
              <el-form-item label="项目状态" label-width="100px" prop="projectstatus" style="width: 100%">
                <el-select v-model="projectForm.projectStatus" clearable placeholder="请选择" @change="handleProjectStatusChange" style="width: 100%">
                  <el-option v-for="item in dict.type.sys_project_status" :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="100px" prop="projectPhase" style="width: 100%">
                <el-select v-model="projectForm.projectPhase" clearable placeholder="请选择" style="width: 100%">
                  <el-option v-for="item in dict.type.sys_project_phases" :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="100px" prop="projectOwnerUnit" style="width: 100%">-->
<!--                        <el-input v-model.trim="projectForm.projectOwnerUnit" 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="100px" prop="projectContactPerson" style="width: 100%">
                <el-input v-model.trim="projectForm.projectContactPerson" class="item" clearable maxlength="255"
                          placeholder="请输入"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="联系方式" label-width="100px" prop="contact" style="width: 100%">
                <el-input v-model.trim="projectForm.contact" class="item" clearable maxlength="255" placeholder="请输入"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <!-- TODO:暂时不做 -->
              <el-form-item label="项目业主单位" label-width="100px" prop="engineering" style="width: 100%">
                <!--            <el-input v-model.trim="getEngineeringName" class="item" clearable disabled maxlength="255" placeholder="请在工程中选择项目" />-->
<!--                <el-select v-model="projectForm.engineeringIdList" :multiple="true" collapse-tags placeholder="请选择"-->
<!--                           style="width: 100%">-->
<!--                <treeselect v-model="form.parentId" :options="deptOptions" :normalizer="normalizer" placeholder="选择上级部门" />-->
                <treeselect v-model="projectForm.projectOwnerUnit"  :options="selectOptions"  :normalizer="normalizer" placeholder="选择单位" />
                  <!--              <RemoteSelect v-if="selectOptions.length" :hasMore="hasMore" :loading="loading" :page="page" @loadMore="handleLoadMore" />-->
<!--                </el-select>-->
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="主管部门" label-width="100px" prop="competentDepartmentList" style="width: 100%">
                <el-select
                  v-model="projectForm.competentDepartmentList"
                  clearable
                  :multiple="true"
                  placeholder="请选择"
                  style="width: 100%"
                  collapse-tags
                >
                  <el-option
                    v-for="item in approvalList"
                    :key="item.id"
                    :value="item.id"
                    :label="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="行政区划" label-width="100px" prop="area" style="width: 100%">
                <el-select
                  v-model="projectForm.area"
                  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="100px" style="width: 100%">
                <el-select
                  v-model="projectForm.managementCentralizationList"
                  clearable
                  :multiple="true"
                  placeholder="请选择"
                  style="width: 100%"
                  collapse-tags
                >
                  <el-option v-for="item in dict.type.sys_centralized_management" :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="100px" style="width: 100%">
                <el-select
                  v-model="projectForm.projectApprovalType"
                  clearable
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option v-for="item in dict.type.sys_approval_type" :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="100px" style="width: 100%">
                <el-input v-model="largeCategory" clearable disabled placeholder="请选择大类" style="width: 49%"/>
                <el-input v-model="subclass" clearable disabled placeholder="请选择小类" style="width: 49%;margin-left: 2%"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="重点分类" label-width="100px" style="width: 100%">
                <el-select
                  v-model="projectForm.importanceTypeList"
                  clearable
                  :multiple="true"
                  placeholder="请选择"
                  style="width: 100%"
                  collapse-tags
                >
                  <el-option v-for="item in dict.type.sys_key_categories" :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="100px" prop="setTime" style="width: 100%">
                <el-date-picker v-model="projectForm.createProjectTime"
                                placeholder="选择时间"
                                style="width: 100%"
                                type="date"
                                value-format="yyyy-MM-dd HH:mm:ss"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="计划开工时间" label-width="100px" style="width: 100%">
                <el-date-picker v-model="projectForm.planStartTime "
                                placeholder="选择时间"
                                style="width: 100%"
                                type="date"
                                value-format="yyyy-MM-dd HH:mm:ss"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="计划竣工时间" label-width="100px" style="width: 100%">
                <el-date-picker v-model="projectForm.planCompleteTime "
                                placeholder="选择时间"
                                style="width: 100%"
                                type="date"
                                value-format="yyyy-MM-dd HH:mm:ss"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="行业主管部门" label-width="100px" prop="industryCompetentDepartment" style="width: 100%">
                  <el-select
                    v-model="projectForm.industryCompetentDepartment"
                    clearable
                    @change="handleDepartmentChange"
                    placeholder="请选择"
                    style="width: 100%;"
                  >
                    <el-option
                      v-for="item in approvalList"
                      :key="item.id"
                      :value="item.id"
                      :label="item.value"
                    />
                  </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="行业主管部门联系人" label-width="160px" style="width: 100%">
                <el-select
                  v-model="projectForm.industryCompetentDepartmentPerson"
                  clearable
                  placeholder="请选择"
                  @change="handleContactChange"
                  style="width: 100%;"
                >
                  <el-option
                    v-for="person in personList"
                    :key="person.userId"
                    :value="person.userId"
                    :label="person.nickName"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="行业主管部门联系方式" label-width="160px" style="width: 100%">
                <el-input
                  v-model="projectForm.departmentPersonPhone"
                  clearable
                  placeholder="请输入联系方式"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="label">
        <div style="font-size: small;margin-bottom: 10px">中标单位:</div>
        <div>
          <el-row :gutter="20" v-for="(winUnit,index) in projectForm.winUnitList" :key="'zb' + index">
            <el-col :span="4">
              <el-form-item label="单位名称" label-width="100px" prop="setTime" style="width: 100%">
                <el-input v-model.trim="winUnit.winUnit" class="item" clearable maxlength="255" placeholder="请输入"/>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="中标金额" label-width="100px" style="width: 100%">
                <el-input v-model.trim="winUnit.winAmount" class="item" clearable maxlength="255" placeholder="请输入"
                          type="number"/>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="中标时间" label-width="100px" style="width: 100%">
                <el-date-picker v-model="winUnit.winTime"
                                placeholder="选择时间"
                                style="width: 100%"
                                type="date"
                                value-format="yyyy-MM-dd HH:mm:ss"/>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="单位联系人" label-width="100px" style="width: 100%">
                <el-input v-model.trim="winUnit.contacts" class="item" clearable maxlength="20" placeholder="请输入"/>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="联系电话" label-width="100px" style="width: 100%">
                <el-input v-model.trim="winUnit.phone" class="item" clearable maxlength="20" placeholder="请输入"/>
              </el-form-item>
            </el-col>
            <el-col :span="1">
              <el-button type="danger" icon="el-icon-delete" @click="removeWinUnit(index)" circle></el-button>
            </el-col>
          </el-row>
        </div>
        <div style="position: absolute; top: 0px; right: 0px">
          <el-button type="primary" @click="addWinUnit" icon="el-icon-plus"></el-button>
        </div>
      </div>
      <div class="label">
        <div style="font-size: small;margin-bottom: 10px">年度投资计划:</div>
        <div>
          <el-row :gutter="20" v-for="(yearPlan,index) in projectForm.yearPlanList" :key="'year' + index">
            <el-col :span="6">
              <el-form-item label="年度" label-width="100px" prop="year" style="width: 100%">
                <el-select
                  v-model="yearPlan.year"
                  clearable
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option v-for="item in dict.type.sys_annual_plan" :key="item.value" :label="item.label"
                             :value="item.value"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="年度投资金额" label-width="100px" prop="company" style="width: 100%; min-width: 260px">
                <el-input v-model.trim="yearPlan.yearTotalMoney" clearable maxlength="255" placeholder="请输入"
                          style="width: 90%" type="number"/>
                <span style="margin-left: 2px">万元</span>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="工程形象进度" label-width="100px" style="width: 100%">
                <el-input v-model.trim="yearPlan.projectImageProgress" class="item" clearable maxlength="255" placeholder="请输入" type="textarea"/>
              </el-form-item>
            </el-col>
            <el-col :span="1">
              <el-button type="danger" icon="el-icon-delete" @click="removeYearPlan(index)" circle></el-button>
            </el-col>
          </el-row>
        </div>
        <div style="position: absolute; top: 0px; right: 0px">
          <el-button type="primary" @click="addYearPlan" icon="el-icon-plus"></el-button>
        </div>
      </div>
      <el-row :gutter="0">
        <el-col :span="18">
          <el-form-item label="项目地址:" label-width="100px" prop="medicalAddr" style="width: 100%">
@@ -267,15 +430,15 @@
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="0">
        <el-col :span="18">
          <el-form-item label="审批计划书:" label-width="100px" prop="medicalAddr" style="width: 100%">
            <file-upload v-model="projectForm.fileList"
                         :fileType="accept"
                         :isShowTip="false"/>
          </el-form-item>
        </el-col>
      </el-row>
<!--      <el-row :gutter="0">-->
<!--        <el-col :span="18">-->
<!--          <el-form-item label="审批计划书:" label-width="100px" prop="medicalAddr" style="width: 100%">-->
<!--            <file-upload v-model="projectForm.fileList"-->
<!--                         :fileType="accept"-->
<!--                         :isShowTip="false"/>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--      </el-row>-->
    </el-form>
    <el-dialog :visible.sync="dialogMap" width="900px">
@@ -294,21 +457,32 @@
<script>
// import Upload from '@element-plus/icons-vue/dist/Upload.vue';
import Treeselect from '@riophae/vue-treeselect'
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import Map from '@/views/components/Map/index.vue';
import TagList from "./TagList.vue";
// import MapMouseEvent  from '@/views/components/Map/types';
// import UploadStandard from '@/components/uploadStandard.vue';
// import { usePlanLibrary } from '@/hooks/detailsInformation';
// import { getList } from '@/api/engineeringLibrary/index';
// import RemoteSelect from '@/components/RemoteSelect/index.vue';
import Cookies from "js-cookie";
import {addProject, getProject, updateProject, getProjectCode} from '@/api/projectEngineering/projectInfo';
import {approvalList} from "@/api/system/dept";
import {addProject, getProject, updateProject, getProjectCode, editProject} from '@/api/projectEngineering/projectInfo';
import {approvalList,listDept} from "@/api/system/dept";
import {getByDept} from "@/api/system/user";
import {getChildList, getDicts} from "@/api/system/dict/data";
import log from "@/views/monitor/job/log";
import { deptList2 } from '../../../../api/system/dept'
export default {
  name: 'BasicInfo',
  dicts: ['sys_funding_type', 'sys_investment_type', 'sys_project_type', 'sys_project_status', 'sys_competent_department'
    , 'sys_administrative_divisions', 'sys_centralized_management', 'sys_approval_type', 'sys_key_categories', 'sys_annual_plan'],
    , 'sys_administrative_divisions', 'sys_centralized_management', 'sys_approval_type', 'sys_key_categories', 'sys_annual_plan'
    , 'construction_nature', 'attract_investment', 'sys_project_phases'],
  components: {
    Treeselect,
    Map,
    TagList,
    // UploadStandard,
    // RemoteSelect
  },
@@ -316,19 +490,27 @@
    disabled: {
      type: Boolean,
      default: false
    }
    },
    isShow: {
      type: Boolean,
      required: true,
    },
  },
  data() {
    return {
      tagList: [],
      projectSubTypeList: [], // 项目子类型
      projectForm: {
        id: '',
        projectName: '',
        attractInvestment: '',
        projectCode: '',
        projectType: '',
        projectStatus: 'working',
        fundType: '',
        projectSubType: '',
        projectStatus: 'pendding',
        fundTypeList: [], //资金类型
        investType: '',
        importanceType: '',
        importanceTypeList: [], //重点分类
        projectPhase: '储备规划阶段',
        tag: '',
        competentDepartment: '',
@@ -344,24 +526,39 @@
        setTime: '',
        assignmentStatus: '',
        area: '',
        winTime: '',
        winUnit: '',
        winAmount: '',
        winUnitList: [{
          winUnit: '',
          winTime: null,
          winAmount: '',
          contacts: '',
          phone: ''
        }],
        yearPlanList: [{
          year: '',
          yearTotalMoney: null,
          projectImageProgress: '',
        }],
        projectAddress: '',
        engineeringIdList: [],
        engineeringIdList: null,
        content: '',
        constructionNature: '',
        contact: '',
        projectOwnerUnit: '',
        projectOwnerUnit: null,
        planStartTime: '',
        planCompleteTime: '',
        projectContactPerson: '',
        fileList: [],
        engineeringInfos: [],
        year: '',
        yearInvestAmount: '',
        competentDepartmentList: [],
        managementCentralizationList: []
        managementCentralizationList: [],
        remark: '',
        industryCompetentDepartment: null,
        industryCompetentDepartmentPerson: null,
        departmentPersonPhone: null,
      },
      personList: [],
      subclass: '',
      largeCategory: '',
      approvalList: [],
      setTime: '',
      planStartTime: '',
@@ -371,10 +568,9 @@
      page: 1,
      loading: false,
      hasMore: true,
      deptOptions: [],
      selectOptions: [],
      accept: ['pdf', 'docx', 'xlsx', 'jpg', 'jpeg'],
      largeCategory: '',
      subclass: '',
      mapCreateInfo: {},
      demoFormRef: null,
      rules: {
@@ -391,29 +587,171 @@
    },
  },
  mounted() {
    this.getDeptList();
    this.projectForm.id = this.$route.query.projectId;
    const projectForm = Cookies.get("projectForm");
    const projectForm = localStorage.getItem("projectForm");
    //初始化主管部门下拉框
    this.getApprovalList();
    if (projectForm) {
      this.projectForm = JSON.parse(projectForm);
      if (this.projectForm.industryCompetentDepartment) {
        // 根据选中的部门ID查询人员
        getByDept(this.projectForm.industryCompetentDepartment).then((res) => {
          this.personList = res.data;
        })
      }
      if (this.projectForm.projectType) {
        // 根据项目类型查子类型
        getDicts("sys_project_type").then(res => {
          const projectType = res.data.find(item => item.dictValue === this.projectForm.projectType);
          if (projectType) {
            getChildList(projectType.dictCode).then(res => {
              this.projectSubTypeList = res.data
            })
          }
        })
      }
      this.$emit('updateIsShow', true);
    } else {
      //初始化主管部门下拉框
      this.getApprovalList();
      this.projectForm.id = this.$route.query.projectId;
      // 在组件创建时获取项目信息,如果 projectId 存在
      if (this.projectForm.id) {
        this.getProjectInfo(this.projectForm.id);
      } else {
        this.getProjectCodeApi();
        // this.getProjectCodeApi();
        this.$emit('updateIsShow', true);
      }
      // this.handleLoadMore(1);
    }
    console.log(this.projectForm, "原始值")
    this.$nextTick(() => {
      console.log("设置了")
      this.tagList = this.projectForm.tag ? this.projectForm.tag.split(",") : []
      console.log(this.tagList)
    })
  },
  beforeDestroy() {
    Cookies.set("projectForm", JSON.stringify(this.projectForm));
    localStorage.setItem("projectForm", JSON.stringify(this.projectForm));
  },
  methods: {
    getTagList(list) {
      console.log("拿到了")
      if (!list || list.length < 1) {
        this.projectForm.tag = ''
      } else {
        this.projectForm.tag = list.join(",");
      }
    },
    getChildSelect(select) {
      this.projectForm.projectSubType = ''
      if (select) {
        getChildList(this.dict.type.sys_project_type.filter(item => item.raw.dictValue === select)[0].raw.dictCode).then(res => {
          this.projectSubTypeList = res.data
        })
      }
    },
    /** 转换部门数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.deptId,
        label: node.deptName,
        children: node.children
      };
    },
    // 监听联系人选择事件
    handleContactChange(userId) {
      if (userId) {
        // 根据选中的userId查找对应的联系人
        const selectedPerson = this.personList.find(person => person.userId === userId);
        if (selectedPerson) {
          // 将联系人的phone字段回填到联系电话输入框
          this.projectForm.departmentPersonPhone = selectedPerson.phonenumber;
        } else {
          // 如果未找到联系人,清空联系电话
          this.projectForm.departmentPersonPhone = '';
        }
      } else {
        // 如果userId为空,清空联系电话
        this.projectForm.departmentPersonPhone = '';
      }
    },
    handleDepartmentChange(departmentId) {
      if (departmentId) {
        // 根据选中的部门ID查询人员
        getByDept(departmentId).then((res) => {
          this.personList = res.data;
        })
      } else {
        // 如果未选择部门,清空人员列表
        this.personList = [];
      }
      this.$set(this.projectForm, 'industryCompetentDepartmentPerson', null);
      this.$set(this.projectForm, 'departmentPersonPhone', '');
    },
    addWinUnit() {
      this.projectForm.winUnitList.push({
        winUnit: '',
        winTime: null,
        winAmount: '',
        contacts: '',
        phone: ''
      })
    },
    removeWinUnit(index) {
      this.projectForm.winUnitList.splice(index, 1)
    },
    addYearPlan() {
      this.projectForm.yearPlanList.push({
        year: '',
        yearTotalMoney: null,
        projectImageProgress: '',
      })
    },
    removeYearPlan(index) {
      this.projectForm.yearPlanList.splice(index, 1)
    },
    handleProjectStatusChange(value) {
      // 根据选中的 projectStatus 修改 anotherField 的值
      if (value === 'working' || value === 'stop') {
        this.projectForm.projectPhase = '实施阶段';
      } else if (value === 'finish') {
        this.projectForm.projectPhase = '竣工投用阶段';
      } else if (value === 'pendding') {
        this.projectForm.projectPhase = '储备规划阶段';
      }
    },
    getProjectInfo(id) {
      getProject(id).then(res => {
        this.projectForm = res.data;
        if (this.projectForm.industryCompetentDepartment) {
          // 根据选中的部门ID查询人员
          getByDept(this.projectForm.industryCompetentDepartment).then((res) => {
            this.personList = res.data;
          })
        }
        if (this.projectForm.projectType) {
          // 根据项目类型查子类型
          getDicts("sys_project_type").then(res => {
            const projectType = res.data.find(item => item.dictValue === this.projectForm.projectType);
            if (projectType) {
              getChildList(projectType.dictCode).then(res => {
                this.projectSubTypeList = res.data
              })
            }
          })
        }
        this.$emit('updateIsShow', true);
        console.log(this.projectForm, "原始值")
        this.$nextTick(() => {
          console.log("设置了")
          this.tagList = this.projectForm.tag ? this.projectForm.tag.split(",") : []
          console.log(this.tagList)
        })
      });
    },
    getApprovalList() {
@@ -421,10 +759,20 @@
        this.approvalList = res.data;
      });
    },
    submit() {
    getDeptList(){
      listDept().then(response => {
        console.log(response.data)
        this.selectOptions = this.handleTree(response.data, "deptId");
      });
    },
    submit(usedStatus) {
      console.log((this.projectForm));
      this.$refs["projectForm"].validate(valid => {
        if (valid) {
          if (this.projectForm.id != null) {
          this.projectForm.usedStatus = usedStatus;
          if (this.projectForm.id) {
            updateProject(this.projectForm).then(response => {
              this.$modal.msgSuccess("修改成功");
              //跳转到下个组件
@@ -446,23 +794,25 @@
        this.projectForm.projectCode = res.data;
      });
    },
    changeDepartment(val) {
      if (!val.length) {
        this.largeCategory = '';
        return;
      }
      const labels = this.approvalList.filter(item => val.includes(item.id)).map(item => item.value);
      this.largeCategory = labels.join(',');
    },
    changePutUnder(val) {
      if (!val.length) {
        this.subclass = '';
        return;
      }
      const labels = this.dict.type.sys_centralized_management.filter(item => val.includes(item.value)).map(item => item.label);
      this.subclass = labels.join(',');
    },
    // changeDepartment(val) {
    //   console.log("触发事件" + val + this.approvalList)
    //   if (!val.length) {
    //     this.largeCategory = '';
    //     return;
    //   }
    //   const labels = this.approvalList.filter(item => val.includes(item.id)).map(item => item.value);
    //   this.largeCategory = labels.join(',');
    // },
    // changePutUnder(val) {
    //   if (!val.length) {
    //     this.subclass = '';
    //     return;
    //   }
    //   const labels = this.dict.type.sys_centralized_management.filter(item => val.includes(item.value)).map(item => item.label);
    //   this.subclass = labels.join(',');
    // },
    async loadDataList(newPage) {
      try {
        this.loading = true;
        const res = await getList({pageNum: newPage, pageSize: 10000});
@@ -500,28 +850,32 @@
        this.$message.success('获取地址成功');
        this.dialogMap = false;
      } else {
        this.$message.error('获取坐标失败');
        this.$message.error('请先点击地图选择地址');
      }
    },
  },
  watch: {
    'projectForm.managementCentralizationList'(val) {
      if (val) {
        const labels = this.dict.type.sys_centralized_management
          .filter(item => val.includes(item.value))
          .map(item => item.label);
        this.subclass = labels.join(',');
      }
    },
    'projectForm.competentDepartmentList'(val) {
      if (val) {
        const labels = this.approvalList
          .filter(item => val.includes(item.id))
          .map(item => item.value);
        this.largeCategory = labels.join(',');
      }
    },
    'projectForm': {
      handler(newVal, oldVal) {
        setTimeout(() => {
          if (newVal.managementCentralizationList) {
            const labels = this.dict.type.sys_centralized_management
              .filter(item => newVal.managementCentralizationList.includes(item.value))
              .map(item => item.label);
            this.subclass = labels.join(',');
          }
          if (newVal.competentDepartmentList) {
            const labels = this.approvalList
              .filter(item => newVal.competentDepartmentList.includes(item.id))
              .map(item => item.value);
            this.largeCategory = labels.join(',');
          }
        }, 1000);
        this.$emit('basicInfoForm', newVal)
      },
      deep: true
    }
  }
};
</script>
@@ -559,4 +913,37 @@
    width: 20px;
  }
}
.yellow-dot {
  width: 10px; /* 圆点的宽度 */
  height: 10px; /* 圆点的高度 */
  background-color: yellow; /* 圆点的颜色 */
  border-radius: 50%; /* 使元素变成圆形 */
  display: inline-block; /* 确保元素可以和其他内联元素一起显示 */
}
.red-dot {
  width: 10px; /* 圆点的宽度 */
  height: 10px; /* 圆点的高度 */
  background-color: red; /* 圆点的颜色 */
  border-radius: 50%; /* 使元素变成圆形 */
  display: inline-block; /* 确保元素可以和其他内联元素一起显示 */
}
.green-dot {
  width: 10px; /* 圆点的宽度 */
  height: 10px; /* 圆点的高度 */
  background-color: green; /* 圆点的颜色 */
  border-radius: 50%; /* 使元素变成圆形 */
  display: inline-block; /* 确保元素可以和其他内联元素一起显示 */
}
.label {
  width: 100%;
  position: relative;
  border: 1px solid #d7d7d7;
  margin-bottom: 15px;
  padding: 4px;
  min-height: 45px;
  color: #909399;
}
</style>