<template>
|
<div class="basic-info">
|
<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">
|
<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 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" prop="area" style="width: 100%">
|
<el-select
|
v-model="projectForm.area"
|
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-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="setTime" placeholder="选择时间" style="width: 100%" type="date" @change="chaneApproval" />
|
</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-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-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="winTime" placeholder="选择时间" style="width: 100%" type="date" @change="chaneWinTime" />
|
</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>
|
<el-row :gutter="0">
|
<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>
|
<div v-if="!disabled" class="map-btn" @click="dialogMap = true">
|
<img alt="" src="@/assets/images/positionl.png" />
|
</div>
|
</div>
|
</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="projectList"
|
:fileType="accept"
|
:isShowTip="false"/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
|
<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 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';
|
|
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: {
|
Map,
|
// UploadStandard,
|
// RemoteSelect
|
},
|
props: {
|
disabled: {
|
type: Boolean,
|
default: false
|
}
|
},
|
data() {
|
return {
|
projectForm: {
|
projectName: '',
|
projectCode: '',
|
projectType: '',
|
projectStatus: 'working',
|
fundType: '',
|
investType: '',
|
importanceType: '',
|
projectPhase: '储备规划阶段',
|
tag: '',
|
competentDepartment: '',
|
projectLocation: '',
|
longitude: '',
|
latitude: '',
|
managementCentralization: '',
|
projectApplicationPhase: '',
|
projectApprovalType: '',
|
investmentCatalogue: '',
|
approvalPlan: '',
|
isSetProject: '',
|
setTime: '',
|
assignmentStatus: '',
|
area: '',
|
winTime: '',
|
winUnit: '',
|
winAmount: '',
|
address: '',
|
engineeringIdList: [],
|
content: '',
|
contact: '',
|
projectOwnerUnit: '',
|
planStartTime: '',
|
planCompleteTime: '',
|
projectContactPerson: '',
|
fileIdList: [],
|
sysOssVos: [],
|
engineeringInfos: [],
|
year: '',
|
yearInvestAmount: '',
|
competentDepartmentList: [],
|
managementCentralizationList: []
|
},
|
setTime: '',
|
planStartTime: '',
|
planCompleteTime: '',
|
winTime: '',
|
projectList: [],
|
dialogMap: false,
|
page: 1,
|
loading: false,
|
hasMore: true,
|
selectOptions: [],
|
accept: ['pdf', 'docx', 'xlsx', 'jpg','jpeg'],
|
largeCategory: '',
|
subclass: '',
|
mapCreateInfo: {},
|
demoFormRef: null,
|
rules: {
|
projectName: [{ required: true, message: '请输入项目名称', trigger: 'blur' }]
|
}
|
};
|
},
|
computed: {
|
dialogMapList () {
|
return [{
|
addr: this.projectForm.address,
|
name: '创建'
|
}];
|
},
|
},
|
created() {
|
this.handleLoadMore(1);
|
},
|
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(',');
|
},
|
changePutUnder(val) {
|
// 同 changeDepartment 方法
|
},
|
chaneApproval(val) {
|
if (!val) return;
|
this.projectForm.setTime = formatDate(val);
|
},
|
chaneCompleted(val) {
|
if (!val) return;
|
this.projectForm.planCompleteTime = formatDate(val);
|
},
|
chaneWinTime(val) {
|
if (!val) return;
|
this.projectForm.winTime = formatDate(val);
|
},
|
chaneStartWork(val) {
|
if (!val) return;
|
this.projectForm.planStartTime = formatDate(val);
|
},
|
async loadDataList(newPage) {
|
try {
|
this.loading = true;
|
const res = await getList({ pageNum: newPage, pageSize: 10000 });
|
const list = res.rows || [];
|
if (newPage === 1) {
|
this.selectOptions = [];
|
}
|
this.selectOptions.push(...list);
|
this.hasMore = this.selectOptions.length < res.total;
|
this.page = newPage;
|
} catch (err) {
|
console.error(err);
|
} finally {
|
this.loading = false;
|
}
|
},
|
handleLoadMore(newPage) {
|
this.loadDataList(newPage);
|
},
|
mapClick(e) {
|
console.log(e)
|
this.mapCreateInfo = {
|
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;
|
this.projectForm.latitude = lat;
|
this.projectForm.address = 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);
|
}
|
},
|
deep: true
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.item {
|
width: 100%;
|
}
|
.map_div {
|
width: 100%;
|
height: 643px;
|
}
|
.input-row {
|
display: flex;
|
width: 100%;
|
|
.input-item {
|
width: 100%;
|
}
|
}
|
|
.map-btn {
|
width: 32px;
|
height: 32px;
|
background: #c6d6ff;
|
border: 1px solid #3369ff;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
cursor: pointer;
|
|
img {
|
width: 20px;
|
}
|
}
|
</style>
|
