项目管理基础信息页面

fuliqi

2024-11-26 42e1d8e76fbf40f053a480cfdd359c9479b1cd63

项目管理基础信息页面

 src/components/FileUpload/index.vue

@@ -15,7 +15,7 @@
      ref="fileUpload"
    >
      <!-- 上传按钮 -->
      <el-button size="mini" type="primary">选取文件</el-button>
      <el-button icon="el-icon-upload2" size="small" type="primary">上传</el-button>
      <!-- 上传提示 -->
      <div class="el-upload__tip" slot="tip" v-if="showTip">
        请上传

 src/views/components/Map/index.vue

@@ -198,7 +198,7 @@
                offset: [-35, -45],
                labelBg: "#3369FF",
                labelColor: "#fff",
                labelClick,
                labelClick: this.labelClick,
            };
            // 清除之前的标记
            this.map && this.map.clearOverLays();
@@ -213,13 +213,16 @@
            const { lat, lng: lon } = e.lnglat;

            this.makeDefaultMask({
                ...defaultMaskInfo,
                ...this.defaultMaskInfo,
                lon: String(lon),
                lat: String(lat),
            });
            this.getReverseGeocode(e).then((addr) => {
                this.$emit("mapClick", { e, addr });
          this.getReverseGeocode(e).then((addr) => {
            this.$emit("mapClick", {
              e,
              addr,
            });
          });
            console.log("点击事件", e);
        },

@@ -360,9 +363,9 @@
            }

            this.addEvent(marker, "mouseover", (e) =>
                markerMouseover(e, infoWin, labelOptions, getUniqueId())
                this.markerMouseover(e, infoWin, labelOptions, this.getUniqueId())
            );
            this.addEvent(marker, "mouseout", (e) => markerMouseout(e, infoWin));
            this.addEvent(marker, "mouseout", (e) => this.markerMouseout(e, infoWin));
        },

        // 标记所有点
@@ -401,7 +404,7 @@
        //标记点击事件
        markerClick(currentLabel, e) {
            const id = e.target.options.id;
            currentLabelStyleChange(currentLabel);
            this.currentLabelStyleChange(currentLabel);
            console.log("点击事件", e, currentLabel);
            this.getReverseGeocode(e).then((addr) => {
                this.$emit(
@@ -415,9 +418,10 @@

        // label点击事件
        labelClick(currentLabel, e) {
            console.log("触发点击事件")
            const id = e.target.options.id;
            currentLabelStyleChange(currentLabel);
            getReverseGeocode(e).then((addr) => {
            this.currentLabelStyleChange(currentLabel);
            this.getReverseGeocode(e).then((addr) => {
                this.$emit(
                    "labelClick",
                    id
@@ -449,9 +453,9 @@
            },
        },
    },
    beforeUnmount() {
        this.map = null;
    },
  beforeDestroy() {
    this.map = null;
  }
};

// const emits = defineEmits<{

 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%;

 src/views/projectEngineering/projectLibrary/projectDetails.vue

@@ -1,6 +1,6 @@
<template>
  <el-card class="card-container">
    <div class="flex justify-between mb-4">
    <div class="flex-container mb-4">
      <el-tabs v-model="currentTab" @tab-click="handleClick">
        <el-tab-pane
          v-for="item in TABS_DATA"
@@ -8,17 +8,22 @@
          :label="item.label"
          :name="item.value"
        >
          <template slot="label">
            <div class="text-sm">{{ item.label }}</div>
          <template slot-scope="item">
            <div class="tab-label">{{ item.label }}</div>
          </template>
        </el-tab-pane>
      </el-tabs>
    </div>
    <component :is="componentName" ref="childRef" :disabled="disabled" class="w-full h-[calc(100%-55px)]" />
    <div v-if="!disabled" class="mt-[3%] ml-[3%] flex">
      <el-button class="w-[72px]" type="primary" @click="submit">保存</el-button>
      <el-button class="w-[72px]" @click="reset">重置</el-button>
      <!-- <el-button v-else class="w-[72px]" @click="cancel">取消</el-button> -->
    <component
      :is="componentName"
      ref="childRef"
      :disabled="disabled"
      class="full-width custom-height"
    />
    <div v-if="!disabled" class="button-container">
      <el-button class="save-button" type="primary" @click="submit">保存</el-button>
      <el-button class="reset-button" @click="reset">重置</el-button>
      <!-- <el-button v-else class="cancel-button" @click="cancel">取消</el-button> -->
    </div>
  </el-card>
</template>
@@ -38,7 +43,7 @@
      currentTab: '项目管理基础信息',
      id: this.$route.query.id || '',
      disabled: false,
      componentName: 'BasicInfo',
      componentName: BasicInfo,
      TABS_DATA: [
        {
          label: '项目管理基础信息',
@@ -202,5 +207,36 @@
</script>

<style scoped>
/* 你的样式 */

::v-deep .el-tabs__nav-wrap::after {
  background-color: rgba(0, 0, 0, 0) !important;
}
.flex-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}

.tab-label {
  font-size: 14px;
}

.full-width {
  width: 100%;
}

.custom-height {
  height: calc(100% - 55px);
}

.button-container {
  margin-top: 3%;
  margin-left: 3%;
  display: flex;
}

.save-button,
.reset-button {
  width: 72px;
}
</style>