fuliqi
2024-11-29 7adbf0551f6a6b307e66cdd6537ab45fc5a2bf11
src/views/projectEngineering/projectLibrary/component/BasicInfo.vue
@@ -1,247 +1,254 @@
<template>
  <div class="basic-info">
    <el-form ref="demoFormRef" :disabled="disabled" :model="projectForm" :rules="rules" class="dialog_form" :inline = "true">
    <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-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="code">
            <el-input v-model.trim="projectForm.projectCode" class="item" clearable disabled maxlength="255" placeholder="请输入" />
          <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>
          <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-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="fundsType" style="width: 100%">
            <el-tree-select
              v-model="projectForm.fundType"
              :data="sys_funding_type"
              :props="{ dictLabel: 'label', dictValue: 'id' }"
              :render-after-expand="false"
              clearable
              placeholder="请选择"
              style="width: 100%"
            />
          <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="investmentType" style="width: 100%">
            <el-tree-select
              v-model="projectForm.investType"
              :data="sys_investment_type"
              :props="{ dictLabel: 'label', dictValue: 'id' }"
              :render-after-expand="false"
              clearable
              placeholder="请选择"
              style="width: 100%"
            />
          <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-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-tree-select
              v-model="projectForm.projectType"
              :data="sys_project_type"
              :props="{ dictLabel: 'label', dictValue: 'id' }"
              :render-after-expand="false"
              clearable
              placeholder="请选择"
              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-tree-select
              v-model="projectForm.projectStatus"
              :data="sys_project_status"
              :props="{ dictLabel: 'label', dictValue: 'id' }"
              :render-after-expand="false"
              clearable
              placeholder="请选择"
              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="company" style="width: 100%">
            <el-input v-model.trim="projectForm.projectOwnerUnit" class="item" clearable maxlength="255" placeholder="请输入" />
          <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" style="width: 100%">
            <el-input v-model.trim="projectForm.projectContactPerson" class="item" clearable maxlength="255" placeholder="请输入" />
          <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="projectPhone" style="width: 100%">
            <el-input v-model.trim="projectForm.contact" class="item" clearable maxlength="255" placeholder="请输入" />
          <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 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="department" style="width: 100%">
            <el-tree-select
          <el-form-item label="主管部门" label-width="100px" prop="competentDepartmentList" style="width: 100%">
            <el-select
              v-model="projectForm.competentDepartmentList"
              :data="sys_competent_department"
              :multiple="true"
              :props="{ dictLabel: 'label', dictValue: 'id' }"
              :render-after-expand="false"
              clearable
              collapse-tags
              :multiple="true"
              placeholder="请选择"
              style="width: 100%"
              @change="changeDepartment"
            />
              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" style="width: 100%">
            <el-tree-select
          <el-form-item label="行政区划" label-width="100px" prop="area" style="width: 100%">
            <el-select
              v-model="projectForm.area"
              :data="sys_administrative_divisions"
              :props="{ dictLabel: 'label', dictValue: 'id' }"
              :render-after-expand="false"
              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-tree-select
            <el-select
              v-model="projectForm.managementCentralizationList"
              :data="sys_centralized_management"
              :multiple="true"
              :props="{ dictLabel: 'label', dictValue: 'id' }"
              :render-after-expand="false"
              clearable
              collapse-tags
              :multiple="true"
              placeholder="请选择"
              style="width: 100%"
              @change="changePutUnder"
            />
              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-tree-select
            <el-select
              v-model="projectForm.projectApprovalType"
              :data="sys_approval_type"
              :props="{ dictLabel: 'label', dictValue: 'id' }"
              :render-after-expand="false"
              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" class="ml-[2%]" clearable disabled placeholder="请选择小类" style="width: 49%" />
          <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-tree-select
            <el-select
              v-model="projectForm.importanceType"
              :data="sys_key_categories"
              :props="{ dictLabel: 'label', dictValue: 'id' }"
              :render-after-expand="false"
              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="setTime" placeholder="选择时间" style="width: 100%" type="date" @change="chaneApproval" />
            <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="planStartTime" placeholder="选择时间" style="width: 100%" type="date" @change="chaneStartWork" />
            <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="planCompleteTime" placeholder="选择时间" style="width: 100%" type="date" @change="chaneCompleted" />
            <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-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-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="winTime" placeholder="选择时间" style="width: 100%" type="date" @change="chaneWinTime" />
            <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-tree-select
            <el-select
              v-model="projectForm.year"
              :data="sys_annual_plan"
              :props="{ dictLabel: 'label', dictValue: 'id' }"
              :render-after-expand="false"
              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%; display: flex; min-width: 260px">
            <el-input v-model.trim="projectForm.yearInvestAmount" clearable maxlength="255" placeholder="请输入" style="width: 90%" type="number" />
          <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>
@@ -250,9 +257,10 @@
        <el-col :span="18">
          <el-form-item label="项目地址:" label-width="100px" prop="medicalAddr" style="width: 100%">
            <div class="input-row">
              <el-input v-model.trim="projectForm.address" class="input-item" disabled maxlength="255" placeholder="请输入"></el-input>
              <el-input v-model.trim="projectForm.projectAddress" class="input-item" disabled maxlength="255"
                        placeholder="请输入"></el-input>
              <div v-if="!disabled" class="map-btn" @click="dialogMap = true">
                <img alt="" src="@/assets/images/positionl.png" />
                <img alt="" src="@/assets/images/positionl.png"/>
              </div>
            </div>
          </el-form-item>
@@ -261,47 +269,45 @@
      <el-row :gutter="0">
        <el-col :span="18">
          <el-form-item label="审批计划书:" label-width="100px" prop="medicalAddr" style="width: 100%">
            <div class="flex">
              <upload-standard
                :file-list.sync="projectList"
                :accept="accept"
                listType="text"
                @fileListAdd="handleAdd"
                @fileListRemove="handleRemove"
              >
                <el-button :icon="Upload" type="primary">上传</el-button>
              </upload-standard>
            </div>
            <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="900">
      <map-component
        v-if="dialogMap"
        id="dialogMapId"
        :mapList="dialogMapList"
        class="w-full h-[643px]"
        @map-click="mapClick"
        @label-click="mapCreateClick"
      />
    <el-dialog :visible.sync="dialogMap" width="900px">
      <div class="map_div">
        <Map
          id="dialogMapId"
          :mapList="dialogMapList"
          @mapClick="mapClick"
          @labelClick="mapCreateClick"
        />
      </div>
    </el-dialog>
  </div>
</template>
<script>
// import Upload from '@element-plus/icons-vue/dist/Upload.vue';
// import MapComponent from '@/components/Map/index.vue';
import Map from '@/views/components/Map/index.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 { formatDate } from '@/utils';
import Cookies from "js-cookie";
import {addProject, getProject, updateProject, getProjectCode} from '@/api/projectEngineering/projectInfo';
import {approvalList} from "@/api/system/dept";
export default {
  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'],
  components: {
    // MapComponent,
    Map,
    // UploadStandard,
    // RemoteSelect
  },
@@ -309,15 +315,20 @@
    disabled: {
      type: Boolean,
      default: false
    }
    },
    isShow: {
      type: Boolean,
      required: true,
    },
  },
  data() {
    return {
      projectForm: {
        id: '',
        projectName: '',
        projectCode: '',
        projectType: '',
        projectStatus: '1',
        projectStatus: 'working',
        fundType: '',
        investType: '',
        importanceType: '',
@@ -339,7 +350,7 @@
        winTime: '',
        winUnit: '',
        winAmount: '',
        address: '',
        projectAddress: '',
        engineeringIdList: [],
        content: '',
        contact: '',
@@ -347,81 +358,122 @@
        planStartTime: '',
        planCompleteTime: '',
        projectContactPerson: '',
        fileIdList: [],
        sysOssVos: [],
        fileList: [],
        engineeringInfos: [],
        year: '',
        yearInvestAmount: '',
        competentDepartmentList: [],
        managementCentralizationList: []
        managementCentralizationList: [],
      },
      projectList: [],
      subclass: '',
      largeCategory: '',
      approvalList: [],
      setTime: '',
      planStartTime: '',
      planCompleteTime: '',
      winTime: '',
      dialogMap: false,
      page: 1,
      loading: false,
      hasMore: true,
      selectOptions: [],
      accept: `'pdf', 'docx', 'xlsx', 'jpg','jpeg'`,
      largeCategory: '',
      subclass: '',
      accept: ['pdf', 'docx', 'xlsx', 'jpg', 'jpeg'],
      mapCreateInfo: {},
      demoFormRef: null,
      rules: {
        projectName: [{ required: true, message: '请输入项目名称', trigger: 'blur' }]
        projectName: [{required: true, message: '请输入项目名称', trigger: 'blur'}]
      }
    };
  },
  computed: {
    dialogMapList() {
      return [{
        addr: this.projectForm.address,
        addr: this.projectForm.projectAddress,
        name: '创建'
      }];
    },
    // // 在Vue 2中使用 computed 替代 sys_* 的响应式字典
    // sysFundingType() {
    //   return this.$dict.get('sys_funding_type');
    // },
    // sysInvestmentType() {
    //   return this.$dict.get('sys_investment_type');
    //   // 其他字典同理
    // }
  },
  created() {
    this.handleLoadMore(1);
  mounted() {
    this.projectForm.id = this.$route.query.projectId;
    const projectForm = localStorage.getItem("projectForm");
    //初始化主管部门下拉框
    this.getApprovalList();
    if (projectForm) {
      this.projectForm = JSON.parse(projectForm);
      this.$emit('updateIsShow', true);
    } else {
      this.projectForm.id = this.$route.query.projectId;
      // 在组件创建时获取项目信息,如果 projectId 存在
      if (this.projectForm.id) {
        this.getProjectInfo(this.projectForm.id);
      } else {
        this.getProjectCodeApi();
        this.$emit('updateIsShow', true);
      }
      // this.handleLoadMore(1);
    }
  },
  beforeDestroy() {
    localStorage.setItem("projectForm", JSON.stringify(this.projectForm));
  },
  methods: {
    changeDepartment(val) {
      if (!val.length) {
        this.largeCategory = '';
        return;
      }
      const labels = this.sysDepartment.filter(item => val.includes(item.value)).map(item => item.label);
      this.largeCategory = labels.join(',');
    getProjectInfo(id) {
      getProject(id).then(res => {
        this.projectForm = res.data;
        this.$emit('updateIsShow', true);
      });
    },
    changePutUnder(val) {
      // 同 changeDepartment 方法
    getApprovalList() {
      approvalList().then(res => {
        this.approvalList = res.data;
      });
    },
    chaneApproval(val) {
      if (!val) return;
      this.projectForm.setTime = formatDate(val);
    submit() {
      this.$refs["projectForm"].validate(valid => {
        if (valid) {
          if (this.projectForm.id) {
            updateProject(this.projectForm).then(response => {
              this.$modal.msgSuccess("修改成功");
              //跳转到下个组件
              this.$emit('toNext', 1);
            });
          } else {
            addProject(this.projectForm).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.projectForm.id = response.data
              //跳转到下个组件
              this.$emit('toNext', 1);
            });
          }
        }
      });
    },
    chaneCompleted(val) {
      if (!val) return;
      this.projectForm.planCompleteTime = formatDate(val);
    getProjectCodeApi() {
      getProjectCode().then(res => {
        this.projectForm.projectCode = res.data;
      });
    },
    chaneWinTime(val) {
      if (!val) return;
      this.projectForm.winTime = formatDate(val);
    },
    chaneStartWork(val) {
      if (!val) return;
      this.projectForm.planStartTime = formatDate(val);
    },
    // 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 });
        const res = await getList({pageNum: newPage, pageSize: 10000});
        const list = res.rows || [];
        if (newPage === 1) {
          this.selectOptions = [];
@@ -438,59 +490,46 @@
    handleLoadMore(newPage) {
      this.loadDataList(newPage);
    },
    mapClick({ e, addr }) {
    mapClick(e) {
      console.log(e)
      this.mapCreateInfo = {
        lon: e.lnglat.lng,
        lat: e.lnglat.lat,
        addr
        lon: e.e.lnglat.lng,
        lat: e.e.lnglat.lat,
        addr: e.addr
      };
    },
    mapCreateClick() {
      const { lon, lat, addr } = this.mapCreateInfo;
      console.log("创建")
      const {lon, lat, addr} = this.mapCreateInfo;
      if (lon && lat && addr) {
        this.projectForm.longitude = lon;
        this.projectForm.latitude = lat;
        this.projectForm.address = addr;
        this.projectForm.projectAddress = addr;
        this.$message.success('获取地址成功');
        this.dialogMap = false;
      } else {
        this.$message.error('获取坐标失败');
      }
    },
    handleRemove(file) {
      if (file) {
        this.projectForm.fileIdList = this.projectList.map(item => item.fileId);
        localStorage.setItem('projectList', JSON.stringify(file));
      }
    },
    handleAdd(file) {
      if (file) {
        localStorage.setItem('projectList', JSON.stringify(file));
      }
    }
  },
  watch: {
    'projectForm.managementCentralizationList'(val) {
      if (val) {
        const labels = this.sysCentralizedManagement
          .filter(item => val.includes(item.value))
          .map(item => item.label);
        this.subclass = labels.join(',');
      }
    },
    'projectForm.competentDepartmentList'(val) {
      if (val) {
        const labels = this.sysDepartment
          .filter(item => val.includes(item.value))
          .map(item => item.label);
        this.largeCategory = labels.join(',');
      }
    },
    projectList: {
      handler(val) {
        if (val) {
          this.projectForm.fileIdList = val.map(item => item.fileId);
        }
    '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);
      },
      deep: true
    }
@@ -500,7 +539,12 @@
<style lang="scss" scoped>
.item {
  width: 130%;
  width: 100%;
}
.map_div {
  width: 100%;
  height: 643px;
}
.input-row {