项目管理基础信息页面

fuliqi

2024-11-26 42e1d8e76fbf40f053a480cfdd359c9479b1cd63

 src/views/projectEngineering/projectLibrary/component/BasicInfo.vue

@@ -1,6 +1,6 @@
<template>
  <div class="basic-info">
    <el-form ref="demoFormRef" :disabled="disabled" :model="projectForm" :rules="rules" class="dialog_form" :inline = "true">
    <el-form ref="demoFormRef" :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">
@@ -8,7 +8,7 @@
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item class="item" label="项目代码" label-width="100px" prop="code">
          <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>
@@ -25,29 +25,19 @@
      </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">
@@ -59,135 +49,126 @@
      <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-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-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-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" />
<!--              <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
              @change="changeDepartment">
              <el-option v-for="item in dict.type.sys_competent_department" :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-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%"
            />
              collapse-tags
              >
              <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%"
              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-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-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>
@@ -228,19 +209,19 @@
      <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-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>
@@ -261,38 +242,32 @@
      <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="projectList"
                         :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';
@@ -300,8 +275,10 @@
import { formatDate } from '@/utils';

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
  },
@@ -317,7 +294,7 @@
        projectName: '',
        projectCode: '',
        projectType: '',
        projectStatus: '1',
        projectStatus: 'working',
        fundType: '',
        investType: '',
        importanceType: '',
@@ -355,13 +332,17 @@
        competentDepartmentList: [],
        managementCentralizationList: []
      },
      setTime: '',
      planStartTime: '',
      planCompleteTime: '',
      winTime: '',
      projectList: [],
      dialogMap: false,
      page: 1,
      loading: false,
      hasMore: true,
      selectOptions: [],
      accept: `'pdf', 'docx', 'xlsx', 'jpg','jpeg'`,
      accept: ['pdf', 'docx', 'xlsx', 'jpg','jpeg'],
      largeCategory: '',
      subclass: '',
      mapCreateInfo: {},
@@ -372,20 +353,12 @@
    };
  },
  computed: {
    dialogMapList() {
    dialogMapList () {
      return [{
        addr: this.projectForm.address,
        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);
@@ -438,14 +411,16 @@
    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() {
      console.log("创建")
      const { lon, lat, addr } = this.mapCreateInfo;
      if (lon && lat && addr) {
        this.projectForm.longitude = lon;
@@ -500,9 +475,12 @@

<style lang="scss" scoped>
.item {
  width: 130%;
  width: 100%;
}

.map_div {
  width: 100%;
  height: 643px;
}
.input-row {
  display: flex;
  width: 100%;