From 42e1d8e76fbf40f053a480cfdd359c9479b1cd63 Mon Sep 17 00:00:00 2001
From: fuliqi <fuliqi@qq.com>
Date: 星期二, 26 十一月 2024 20:54:18 +0800
Subject: [PATCH] 项目管理基础信息页面
---
src/views/projectEngineering/projectLibrary/component/BasicInfo.vue | 222 ++++++++++++++++--------------------
src/views/components/Map/index.vue | 28 ++--
src/views/projectEngineering/projectLibrary/projectDetails.vue | 56 +++++++-
src/components/FileUpload/index.vue | 2
4 files changed, 163 insertions(+), 145 deletions(-)
diff --git a/src/components/FileUpload/index.vue b/src/components/FileUpload/index.vue
index c7f6b0a..e396687 100644
--- a/src/components/FileUpload/index.vue
+++ b/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">
璇蜂笂浼�
diff --git a/src/views/components/Map/index.vue b/src/views/components/Map/index.vue
index 38f61f6..a9fee43 100644
--- a/src/views/components/Map/index.vue
+++ b/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<{
diff --git a/src/views/projectEngineering/projectLibrary/component/BasicInfo.vue b/src/views/projectEngineering/projectLibrary/component/BasicInfo.vue
index c649a96..5b3a7ce 100644
--- a/src/views/projectEngineering/projectLibrary/component/BasicInfo.vue
+++ b/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: '鍒涘缓'
}];
},
- // // 鍦╒ue 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%;
diff --git a/src/views/projectEngineering/projectLibrary/projectDetails.vue b/src/views/projectEngineering/projectLibrary/projectDetails.vue
index 0cd0d7e..42b76f0 100644
--- a/src/views/projectEngineering/projectLibrary/projectDetails.vue
+++ b/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>
--
Gitblit v1.8.0