<template>
|
<div class="basic-info">
|
<el-form ref="projectForm" :disabled="disabled" :model="projectForm" :rules="rules" class="dialog_form">
|
<div class="label">
|
<div style="font-size: small;margin-bottom: 10px">基础信息：</div>
|
<div>
|
<el-row :gutter="20">
|
<el-col :span="10">
|
<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 maxlength="255"
|
placeholder="请输入"/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="3">
|
<el-form-item class="item" label="赋码" label-width="50px" prop="coding">
|
<template slot-scope="scope">
|
<!-- <div class="yellow-dot" v-if="scope.row.coding === 'yellow'"></div>-->
|
<!-- <div class="green-dot" v-if="scope.row.coding === 'green'"></div>-->
|
<!-- <div class="red-dot" v-if="scope.row.coding === 'red'"></div>-->
|
<div class="red-dot"></div>
|
</template>
|
|
</el-form-item>
|
</el-col>
|
<el-col :span="5">
|
<el-form-item label="标签" label-width="50px" prop="tag">
|
<template slot-scope="scope">
|
<tag-list :tag-list="tagList" ref="tagList" @getTags="getTagList"></tag-list>
|
</template>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="24">
|
<el-form-item class="item" label="建设内容" label-width="100px" prop="content">
|
<el-input v-model.trim="projectForm.content" style="width: 100%;" :rows="4" maxlength="1000"
|
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="fundTypeList" style="width: 100%">
|
<el-select
|
v-model="projectForm.fundTypeList"
|
clearable
|
:multiple="true"
|
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="constructionNature"
|
style="width: 100%; min-width: 260px">
|
<el-select
|
v-model="projectForm.constructionNature"
|
clearable
|
placeholder="请选择"
|
style="width: 100%"
|
>
|
<el-option v-for="item in dict.type.construction_nature" :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="attractInvestment"
|
style="width: 100%; min-width: 260px">
|
<el-select
|
v-model="projectForm.attractInvestment"
|
clearable
|
placeholder="请选择"
|
style="width: 100%"
|
>
|
<el-option v-for="item in dict.type.attract_investment" :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="projectType" style="width: 100%">
|
<el-select v-model="projectForm.projectType" @change="getChildSelect" 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="projectSubType" style="width: 100%">-->
|
<!-- <el-select v-model="projectForm.projectSubType" :disabled="projectForm.projectType === ''" clearable placeholder="请选择" style="width: 100%">-->
|
<!-- <el-option v-for="item in projectSubTypeList" :key="item.dictCode + 'zd'" :label="item.dictLabel"-->
|
<!-- :value="item.dictValue"/>-->
|
<!-- </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="projectPhase" style="width: 100%">
|
<el-select v-model="projectForm.projectPhase" clearable placeholder="请选择" style="width: 100%">
|
<el-option v-for="item in dict.type.sys_project_phases" :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">
|
<el-form-item label="项目业主单位" label-width="100px" prop="projectOwnerUnit" 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%">-->
|
<!-- <treeselect v-model="form.parentId" :options="deptOptions" :normalizer="normalizer" placeholder="选择上级部门" />-->
|
|
<treeselect v-model="projectForm.projectOwnerUnit" :disabled="disabled" :options="selectOptions" @input="getProjectOwnerUnit" noChildrenText="无匹配数据" :normalizer="normalizer" placeholder="选择单位" />
|
<!-- <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="competentDepartment" style="width: 100%">
|
<treeselect v-model="competentDepartment" :disabled="disabled" @input="getCompetentDepartmentInfo" noChildrenText="无匹配数据" :options="approvalList" :normalizer="normalizer" placeholder="选择单位" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="主管部门联系人" prop="competentDepartmentPerson" label-width="140px" style="width: 100%">
|
<el-select
|
v-model="projectForm.competentDepartmentPerson"
|
clearable
|
filterable
|
allow-create
|
placeholder="请选择"
|
@change="handleDeptContactChange"
|
style="width: 100%;"
|
>
|
<el-option
|
v-for="person in deptPersonList"
|
:key="person.userId"
|
:value="person.userId"
|
:label="person.nickName"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="主管部门联系方式" prop="competentDepartmentPhone" label-width="140px" style="width: 100%">
|
<el-input
|
v-model="projectForm.competentDepartmentPhone"
|
clearable
|
placeholder="请输入联系方式"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<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%"
|
>
|
<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="管理归口" prop="managementCentralizationList" label-width="100px" style="width: 100%">
|
<el-select
|
v-model="projectForm.managementCentralizationList"
|
clearable
|
:multiple="true"
|
placeholder="请选择"
|
style="width: 100%"
|
>
|
<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="项目审批类型" prop="projectApprovalType" 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="投资类别" prop="largeCategory" 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="重点分类" prop="importanceTypeList" label-width="100px" style="width: 100%">
|
<el-select
|
v-model="projectForm.importanceTypeList"
|
:multiple="true"
|
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="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="计划开工时间" prop="planStartTime" label-width="100px" style="width: 100%">
|
<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="计划竣工时间" prop="planCompleteTime" label-width="100px" style="width: 100%">
|
<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="industryCompetentDepartment" style="width: 100%">
|
<treeselect v-model="industryCompetentDepartment" :disabled="disabled" noChildrenText="无匹配数据" @input="getIndustryCompetentDepartmentInfo" :options="approvalList" :normalizer="normalizer" placeholder="选择单位" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="行业主管部门联系人" prop="industryCompetentDepartmentPerson" label-width="160px" style="width: 100%">
|
<el-select
|
v-model="projectForm.industryCompetentDepartmentPerson"
|
clearable
|
filterable
|
allow-create
|
placeholder="请选择"
|
@change="handleContactChange"
|
style="width: 100%;"
|
>
|
<el-option
|
v-for="person in personList"
|
:key="person.userId"
|
:value="person.userId"
|
:label="person.nickName"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="行业主管部门联系方式" prop="departmentPersonPhone" label-width="160px" style="width: 100%">
|
<el-input
|
v-model="projectForm.departmentPersonPhone"
|
clearable
|
placeholder="请输入联系方式"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
<div class="label">
|
<div style="font-size: small;margin-bottom: 10px">中标单位：</div>
|
<div>
|
<el-row :gutter="10" v-for="(winUnit,index) in projectForm.winUnitList" :key="'zb' + index">
|
<el-col :span="7">
|
<el-form-item label="单位名称" label-width="80px" prop="setTime" style="width: 100%">
|
<el-input v-model.trim="winUnit.winUnit" class="item" clearable maxlength="255" placeholder="请输入"/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="4">
|
<el-form-item label="中标金额" label-width="80px" style="width: 100%">
|
<el-input v-model.trim="winUnit.winAmount" class="item" clearable maxlength="255" placeholder="请输入"
|
type="number"/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="5">
|
<el-form-item label="中标时间" label-width="80px" style="width: 100%">
|
<el-date-picker v-model="winUnit.winTime"
|
placeholder="选择时间"
|
style="width: 100%"
|
type="date"
|
value-format="yyyy-MM-dd HH:mm:ss"/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="3">
|
<el-form-item label="单位联系人" label-width="100px" style="width: 100%">
|
<el-input v-model.trim="winUnit.contacts" class="item" clearable maxlength="20" placeholder="请输入"/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="4">
|
<el-form-item label="联系电话" label-width="80px" style="width: 100%">
|
<el-input v-model.trim="winUnit.phone" class="item" clearable maxlength="20" placeholder="请输入"/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="1">
|
<el-button type="danger" icon="el-icon-delete" @click="removeWinUnit(index)" circle></el-button>
|
</el-col>
|
</el-row>
|
</div>
|
<div style="position: absolute; top: 0px; right: 0px">
|
<el-button type="primary" @click="addWinUnit" icon="el-icon-plus"></el-button>
|
</div>
|
</div>
|
|
<div class="label">
|
<div style="font-size: small;margin-bottom: 10px">年度投资计划：</div>
|
<div>
|
<el-row :gutter="20" v-for="(yearPlan,index) in projectForm.yearPlanList" :key="'year' + index">
|
<el-col :span="6">
|
<el-form-item label="年度" label-width="100px" prop="year" style="width: 100%">
|
<el-select
|
v-model="yearPlan.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="7">
|
<el-form-item label="年度投资金额" label-width="100px" prop="company" style="width: 100%; min-width: 260px">
|
<el-input v-model.trim="yearPlan.yearTotalMoney" clearable maxlength="255" placeholder="请输入"
|
style="width: 90%" type="number"/>
|
<span style="margin-left: 2px">万元</span>
|
</el-form-item>
|
</el-col>
|
<el-col :span="10">
|
<el-form-item label="工程形象进度" label-width="100px" style="width: 100%">
|
<el-input v-model.trim="yearPlan.projectImageProgress" class="item" clearable maxlength="255" placeholder="请输入" type="textarea"/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="1">
|
<el-button type="danger" icon="el-icon-delete" @click="removeYearPlan(index)" circle></el-button>
|
</el-col>
|
</el-row>
|
</div>
|
<div style="position: absolute; top: 0px; right: 0px">
|
<el-button type="primary" @click="addYearPlan" icon="el-icon-plus"></el-button>
|
</div>
|
</div>
|
|
<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.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"/>
|
</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="projectForm.fileList"-->
|
<!-- :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 Treeselect from '@riophae/vue-treeselect'
|
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
import Map from '@/views/components/Map/index.vue';
|
import TagList from "./TagList.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 Cookies from "js-cookie";
|
import {addProject, getProject, updateProject, getProjectCode, editProject} from '@/api/projectEngineering/projectInfo';
|
import {approvalList,listDept} from "@/api/system/dept";
|
import {getByDept} from "@/api/system/user";
|
import {getChildList, getDicts} from "@/api/system/dict/data";
|
import log from "@/views/monitor/job/log";
|
import { deptList2 } from '../../../../api/system/dept'
|
|
export default {
|
name: 'BasicInfo',
|
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'
|
, 'construction_nature', 'attract_investment', 'sys_project_phases'],
|
components: {
|
Treeselect,
|
Map,
|
TagList,
|
// UploadStandard,
|
// RemoteSelect
|
},
|
props: {
|
disabled: {
|
type: Boolean,
|
default: false
|
},
|
isShow: {
|
type: Boolean,
|
required: true,
|
},
|
},
|
data() {
|
return {
|
tagList: [],
|
projectSubTypeList: [], // 项目子类型
|
competentDepartment: '',
|
industryCompetentDepartment: '',
|
projectForm: {
|
id: '',
|
projectName: '',
|
attractInvestment: '',
|
projectCode: '',
|
projectType: '',
|
projectSubType: '',
|
projectStatus: 'pendding',
|
fundTypeList: [], //资金类型
|
investType: '',
|
importanceTypeList: [], //重点分类
|
projectPhase: '1',
|
tag: '',
|
competentDepartment: '',
|
competentDepartmentPerson: '',
|
competentDepartmentPhone: '',
|
projectLocation: '',
|
longitude: '',
|
latitude: '',
|
managementCentralization: '',
|
projectApplicationPhase: '',
|
projectApprovalType: '',
|
investmentCatalogue: '',
|
approvalPlan: '',
|
isSetProject: '',
|
setTime: '',
|
assignmentStatus: '',
|
area: '',
|
winUnitList: [{
|
winUnit: '',
|
winTime: null,
|
winAmount: '',
|
contacts: '',
|
phone: ''
|
}],
|
yearPlanList: [{
|
year: '',
|
yearTotalMoney: null,
|
projectImageProgress: '',
|
}],
|
projectAddress: '',
|
engineeringIdList: null,
|
content: '',
|
constructionNature: '',
|
contact: '',
|
projectOwnerUnit: null,
|
planStartTime: '',
|
planCompleteTime: '',
|
projectContactPerson: '',
|
fileList: [],
|
engineeringInfos: [],
|
managementCentralizationList: [],
|
remark: '',
|
industryCompetentDepartment: null,
|
industryCompetentDepartmentPerson: null,
|
departmentPersonPhone: null,
|
},
|
personList: [],
|
deptPersonList: [],
|
subclass: '',
|
largeCategory: '',
|
approvalList: [],
|
setTime: '',
|
planStartTime: '',
|
planCompleteTime: '',
|
winTime: '',
|
dialogMap: false,
|
page: 1,
|
loading: false,
|
hasMore: true,
|
deptOptions: [],
|
selectOptions: [],
|
accept: ['pdf', 'docx', 'xlsx', 'jpg', 'jpeg'],
|
mapCreateInfo: {},
|
demoFormRef: null,
|
rules: {
|
projectName: [{required: true, message: '请输入项目名称', trigger: 'blur'}],
|
content: [{required: true, message: '请输入建设内容', trigger: 'blur'}],
|
fundTypeList: [{required: true, message: '请选择资金类型', trigger: 'change'}],
|
investType: [{required: true, message: '请选择项目投资类别', trigger: 'change'}],
|
constructionNature: [{required: true, message: '请选择建设性质', trigger: 'change'}],
|
attractInvestment: [{required: true, message: '请选择是否招商引资项目', trigger: 'change'}],
|
projectType: [{required: true, message: '请选择项目推进类型', trigger: 'change'}],
|
projectStatus: [{required: true, message: '请选择项目状态', trigger: 'change'}],
|
projectPhase: [{required: true, message: '请选择项目阶段', trigger: 'change'}],
|
projectContactPerson: [{required: true, message: '请输入项目联系人', trigger: 'blur'}],
|
contact: [{required: true, message: '请输入项目联系方式', trigger: 'blur'}],
|
projectOwnerUnit: [{required: true, message: '请选择项目业主单位', trigger: 'change'}],
|
competentDepartment: [{required: true, message: '请选择主管部门', trigger: 'change'}],
|
competentDepartmentPerson: [{required: true, message: '请选择主管部门联系人', trigger: 'change'}],
|
competentDepartmentPhone: [{required: true, message: '请输入主管部门联系方式', trigger: 'blur'}],
|
area: [{required: true, message: '请选择行政区划', trigger: 'change'}],
|
managementCentralizationList: [{required: true, message: '请选择管理归口', trigger: 'change'}],
|
projectApprovalType: [{required: true, message: '请选择项目审批类型', trigger: 'change'}],
|
importanceTypeList: [{required: true, message: '请选择重点分类', trigger: 'change'}],
|
planStartTime: [{required: true, message: '请选择计划开工时间', trigger: 'change'}],
|
planCompleteTime: [{required: true, message: '请选择计划竣工时间', trigger: 'change'}],
|
industryCompetentDepartment: [{required: true, message: '请选择行业主管部门', trigger: 'change'}],
|
industryCompetentDepartmentPerson: [{required: true, message: '请输入行业主管部门联系人', trigger: 'blur'}],
|
departmentPersonPhone: [{required: true, message: '请输入行业主管部门联系方式', trigger: 'blur'}],
|
},
|
needClearPeople: true
|
};
|
},
|
computed: {
|
dialogMapList() {
|
return [{
|
addr: this.projectForm.projectAddress,
|
name: '创建'
|
}];
|
},
|
},
|
mounted() {
|
this.getDeptList();
|
|
this.projectForm.id = this.$route.query.projectId;
|
const projectForm = localStorage.getItem("projectForm");
|
//初始化主管部门下拉框
|
this.getApprovalList();
|
|
if (projectForm) {
|
this.projectForm = JSON.parse(projectForm);
|
if (this.projectForm.projectType) {
|
// 根据项目类型查子类型
|
getDicts("sys_project_type").then(res => {
|
const projectType = res.data.find(item => item.dictValue === this.projectForm.projectType);
|
if (projectType) {
|
getChildList(projectType.dictCode).then(res => {
|
this.projectSubTypeList = res.data
|
})
|
}
|
})
|
}
|
this.$emit('updateIsShow', true);
|
this.competentDepartment = this.projectForm.competentDepartment
|
this.industryCompetentDepartment = this.projectForm.industryCompetentDepartment
|
} 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);
|
}
|
|
this.$nextTick(() => {
|
this.tagList = this.projectForm.tag ? this.projectForm.tag.split(",") : []
|
})
|
},
|
beforeDestroy() {
|
localStorage.setItem("projectForm", JSON.stringify(this.projectForm));
|
},
|
methods: {
|
getIndustryCompetentDepartmentPeople(deptId) {
|
// 根据选中的部门ID查询人员
|
getByDept(deptId).then((res) => {
|
this.personList = res.data;
|
this.personList.forEach(item => item.userId += '')
|
})
|
},
|
getCompetentDepartmentPeople(deptId) {
|
// 根据选中的部门ID查询人员
|
getByDept(deptId).then((res) => {
|
this.deptPersonList = res.data;
|
this.deptPersonList.forEach(item => item.userId += '')
|
})
|
},
|
getTagList(list) {
|
console.log("拿到了")
|
if (!list || list.length < 1) {
|
this.projectForm.tag = ''
|
} else {
|
this.projectForm.tag = list.join(",");
|
}
|
},
|
getChildSelect(select) {
|
this.projectForm.projectSubType = ''
|
if (select) {
|
getChildList(this.dict.type.sys_project_type.filter(item => item.raw.dictValue === select)[0].raw.dictCode).then(res => {
|
this.projectSubTypeList = res.data
|
})
|
}
|
},
|
/** 转换部门数据结构 */
|
normalizer(node) {
|
if (node.children && !node.children.length) {
|
delete node.children;
|
}
|
return {
|
id: node.deptId,
|
label: node.deptName,
|
children: node.children
|
};
|
},
|
// 监听联系人选择事件
|
handleContactChange(userId) {
|
if (userId) {
|
// 根据选中的userId查找对应的联系人
|
const selectedPerson = this.personList.find(person => person.userId === userId);
|
if (selectedPerson && selectedPerson.phonenumber) {
|
// 将联系人的phone字段回填到联系电话输入框
|
this.projectForm.departmentPersonPhone = selectedPerson.phonenumber;
|
}
|
}
|
},
|
handleDeptContactChange(userId) {
|
if (userId) {
|
// 根据选中的userId查找对应的联系人
|
const selectedPerson = this.deptPersonList.find(person => person.userId === userId);
|
if (selectedPerson && selectedPerson.phonenumber) {
|
// 将联系人的phone字段回填到联系电话输入框
|
this.projectForm.competentDepartmentPhone = selectedPerson.phonenumber;
|
}
|
}
|
},
|
getIndustryCompetentDepartmentInfo(deptId) {
|
if (deptId) {
|
if (this.projectForm.industryCompetentDepartment != deptId) {
|
this.projectForm.industryCompetentDepartmentPerson = ""
|
this.projectForm.departmentPersonPhone = ""
|
}
|
this.projectForm.industryCompetentDepartment = deptId
|
this.getIndustryCompetentDepartmentPeople(deptId)
|
} else {
|
this.projectForm.industryCompetentDepartment = ''
|
this.personList = [];
|
}
|
},
|
getProjectOwnerUnit(deptId) {
|
if (deptId) {
|
this.projectForm.projectOwnerUnit = deptId
|
} else {
|
this.projectForm.projectOwnerUnit = ''
|
}
|
},
|
getCompetentDepartmentInfo(deptId) {
|
if (deptId) {
|
if (this.projectForm.competentDepartment != deptId) {
|
this.projectForm.competentDepartmentPerson = ""
|
this.projectForm.competentDepartmentPhone = ""
|
}
|
this.projectForm.competentDepartment = deptId
|
this.getCompetentDepartmentPeople(deptId)
|
} else {
|
this.projectForm.competentDepartment = ''
|
this.deptPersonList = [];
|
}
|
},
|
handleDepartmentChange(departmentId) {
|
if (departmentId) {
|
// 根据选中的部门ID查询人员
|
this.getIndustryCompetentDepartmentPeople(departmentId)
|
} else {
|
// 如果未选择部门，清空人员列表
|
this.personList = [];
|
}
|
this.$set(this.projectForm, 'industryCompetentDepartmentPerson', null);
|
this.$set(this.projectForm, 'departmentPersonPhone', '');
|
},
|
addWinUnit() {
|
this.projectForm.winUnitList.push({
|
winUnit: '',
|
winTime: null,
|
winAmount: '',
|
contacts: '',
|
phone: ''
|
})
|
},
|
removeWinUnit(index) {
|
this.projectForm.winUnitList.splice(index, 1)
|
},
|
addYearPlan() {
|
this.projectForm.yearPlanList.push({
|
year: '',
|
yearTotalMoney: null,
|
projectImageProgress: '',
|
})
|
},
|
removeYearPlan(index) {
|
this.projectForm.yearPlanList.splice(index, 1)
|
},
|
handleProjectStatusChange(value) {
|
// 根据选中的 projectStatus 修改 anotherField 的值
|
if (value === 'working' || value === 'stop') {
|
this.projectForm.projectPhase = '实施阶段';
|
} else if (value === 'finish') {
|
this.projectForm.projectPhase = '竣工投用阶段';
|
} else if (value === 'pendding') {
|
this.projectForm.projectPhase = '储备规划阶段';
|
}
|
},
|
getProjectInfo(id) {
|
getProject(id).then(res => {
|
this.projectForm = res.data;
|
if (this.projectForm.industryCompetentDepartment) {
|
// 根据选中的部门ID查询人员
|
getByDept(this.projectForm.industryCompetentDepartment).then((res) => {
|
this.personList = res.data;
|
})
|
}
|
if (this.projectForm.projectType) {
|
// 根据项目类型查子类型
|
getDicts("sys_project_type").then(res => {
|
const projectType = res.data.find(item => item.dictValue === this.projectForm.projectType);
|
if (projectType) {
|
getChildList(projectType.dictCode).then(res => {
|
this.projectSubTypeList = res.data
|
})
|
}
|
})
|
}
|
this.$emit('updateIsShow', true);
|
console.log(this.projectForm, "原始值")
|
this.$nextTick(() => {
|
console.log("设置了")
|
this.tagList = this.projectForm.tag ? this.projectForm.tag.split(",") : []
|
console.log(this.tagList)
|
})
|
this.competentDepartment = this.projectForm.competentDepartment
|
this.industryCompetentDepartment = this.projectForm.industryCompetentDepartment
|
});
|
},
|
getApprovalList() {
|
approvalList().then(res => {
|
this.approvalList = this.handleTree(res.data, "deptId");
|
this.approvalList.push({deptId: '', deptName: '无', children: []})
|
});
|
},
|
getDeptList(){
|
listDept().then(response => {
|
console.log(response.data)
|
this.selectOptions = this.handleTree(response.data, "deptId");
|
this.selectOptions.push({deptId: '', deptName: '无', children: []})
|
});
|
},
|
|
submit(usedStatus) {
|
console.log((this.projectForm));
|
this.$refs["projectForm"].validate(valid => {
|
if (valid) {
|
this.projectForm.usedStatus = usedStatus;
|
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);
|
});
|
}
|
}
|
});
|
},
|
getProjectCodeApi() {
|
getProjectCode().then(res => {
|
this.projectForm.projectCode = res.data;
|
});
|
},
|
// 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 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.projectAddress = addr;
|
this.$message.success('获取地址成功');
|
this.dialogMap = false;
|
} else {
|
this.$message.error('请先点击地图选择地址');
|
}
|
},
|
|
},
|
watch: {
|
'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(',');
|
}
|
}, 1000);
|
this.$emit('basicInfoForm', newVal)
|
},
|
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;
|
}
|
}
|
|
.yellow-dot {
|
width: 10px; /* 圆点的宽度 */
|
height: 10px; /* 圆点的高度 */
|
background-color: yellow; /* 圆点的颜色 */
|
border-radius: 50%; /* 使元素变成圆形 */
|
display: inline-block; /* 确保元素可以和其他内联元素一起显示 */
|
}
|
|
.red-dot {
|
width: 10px; /* 圆点的宽度 */
|
height: 10px; /* 圆点的高度 */
|
background-color: red; /* 圆点的颜色 */
|
border-radius: 50%; /* 使元素变成圆形 */
|
display: inline-block; /* 确保元素可以和其他内联元素一起显示 */
|
}
|
|
.green-dot {
|
width: 10px; /* 圆点的宽度 */
|
height: 10px; /* 圆点的高度 */
|
background-color: green; /* 圆点的颜色 */
|
border-radius: 50%; /* 使元素变成圆形 */
|
display: inline-block; /* 确保元素可以和其他内联元素一起显示 */
|
}
|
.label {
|
width: 100%;
|
position: relative;
|
border: 1px solid #d7d7d7;
|
margin-bottom: 15px;
|
padding: 4px;
|
min-height: 45px;
|
color: #909399;
|
}
|
</style>
|
