| | |
| | | <template> |
| | | <div class="basic-info"> |
| | | <el-form ref="demoFormRef" :disabled="disabled" :model="projectForm" :rules="rules" class="dialog_form"> |
| | | <el-form ref="projectForm" :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-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-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> |
| | | <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-input v-model.trim="projectForm.content" style="width: 100%;" clearable maxlength="255" |
| | | placeholder="请输入" type="textarea"/> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | |
| | | </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-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-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-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-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-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-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 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-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 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> |
| | |
| | | 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-option |
| | | v-for="item in approvalList" |
| | | :key="item.id" |
| | | :value="item.id" |
| | | :label="item.value" |
| | | /> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | |
| | | 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> |
| | |
| | | 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-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 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-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-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="计划开工时间" label-width="100px" style="width: 100%"> |
| | | <el-date-picker v-model="planStartTime" placeholder="选择时间" style="width: 100%" type="date" @change="chaneStartWork" /> |
| | | <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="计划竣工时间" label-width="100px" style="width: 100%"> |
| | | <el-date-picker v-model="planCompleteTime" placeholder="选择时间" style="width: 100%" type="date" @change="chaneCompleted" /> |
| | | <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="setTime" style="width: 100%"> |
| | | <el-input v-model.trim="projectForm.winUnit" class="item" clearable maxlength="255" placeholder="请输入" /> |
| | | <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-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-date-picker v-model="projectForm.winTime" |
| | | placeholder="选择时间" |
| | | style="width: 100%" |
| | | type="date" |
| | | value-format="yyyy-MM-dd HH:mm:ss"/> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | |
| | | </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" /> |
| | | <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-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> |
| | | <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" /> |
| | | <img alt="" src="@/assets/images/positionl.png"/> |
| | | </div> |
| | | </div> |
| | | </el-form-item> |
| | |
| | | <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" |
| | | <file-upload v-model="projectForm.fileList" |
| | | :fileType="accept" |
| | | :isShowTip="false"/> |
| | | </el-form-item> |
| | |
| | | // import { usePlanLibrary } from '@/hooks/detailsInformation'; |
| | | // import { getList } from '@/api/engineeringLibrary/index'; |
| | | // import RemoteSelect from '@/components/RemoteSelect/index.vue'; |
| | | import { formatDate } from '@/utils'; |
| | | import Cookies from "js-cookie"; |
| | | import {addProject, getProject, updateProject, getProjectCode} from '@/api/projectEngineering/projectInfo'; |
| | | import {approvalList} from "@/api/system/dept"; |
| | | |
| | | 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'], |
| | | 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, |
| | |
| | | disabled: { |
| | | type: Boolean, |
| | | default: false |
| | | } |
| | | }, |
| | | isShow: { |
| | | type: Boolean, |
| | | required: true, |
| | | }, |
| | | }, |
| | | data() { |
| | | return { |
| | | projectForm: { |
| | | id: '', |
| | | projectName: '', |
| | | projectCode: '', |
| | | projectType: '', |
| | |
| | | winTime: '', |
| | | winUnit: '', |
| | | winAmount: '', |
| | | address: '', |
| | | projectAddress: '', |
| | | engineeringIdList: [], |
| | | content: '', |
| | | contact: '', |
| | |
| | | planStartTime: '', |
| | | planCompleteTime: '', |
| | | projectContactPerson: '', |
| | | fileIdList: [], |
| | | sysOssVos: [], |
| | | fileList: [], |
| | | engineeringInfos: [], |
| | | year: '', |
| | | yearInvestAmount: '', |
| | | competentDepartmentList: [], |
| | | managementCentralizationList: [] |
| | | managementCentralizationList: [], |
| | | }, |
| | | subclass: '', |
| | | largeCategory: '', |
| | | approvalList: [], |
| | | setTime: '', |
| | | planStartTime: '', |
| | | planCompleteTime: '', |
| | | winTime: '', |
| | | projectList: [], |
| | | dialogMap: false, |
| | | page: 1, |
| | | loading: false, |
| | | hasMore: true, |
| | | selectOptions: [], |
| | | accept: ['pdf', 'docx', 'xlsx', 'jpg','jpeg'], |
| | | largeCategory: '', |
| | | subclass: '', |
| | | accept: ['pdf', 'docx', 'xlsx', 'jpg', 'jpeg'], |
| | | mapCreateInfo: {}, |
| | | demoFormRef: null, |
| | | rules: { |
| | | projectName: [{ required: true, message: '请输入项目名称', trigger: 'blur' }] |
| | | projectName: [{required: true, message: '请输入项目名称', trigger: 'blur'}] |
| | | } |
| | | }; |
| | | }, |
| | | computed: { |
| | | dialogMapList () { |
| | | dialogMapList() { |
| | | return [{ |
| | | addr: this.projectForm.address, |
| | | addr: this.projectForm.projectAddress, |
| | | name: '创建' |
| | | }]; |
| | | }, |
| | | }, |
| | | created() { |
| | | this.handleLoadMore(1); |
| | | mounted() { |
| | | this.projectForm.id = this.$route.query.projectId; |
| | | const projectForm = localStorage.getItem("projectForm"); |
| | | //初始化主管部门下拉框 |
| | | this.getApprovalList(); |
| | | if (projectForm) { |
| | | this.projectForm = JSON.parse(projectForm); |
| | | this.$emit('updateIsShow', true); |
| | | } 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); |
| | | } |
| | | }, |
| | | beforeDestroy() { |
| | | localStorage.setItem("projectForm", JSON.stringify(this.projectForm)); |
| | | }, |
| | | 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(','); |
| | | getProjectInfo(id) { |
| | | getProject(id).then(res => { |
| | | this.projectForm = res.data; |
| | | this.$emit('updateIsShow', true); |
| | | }); |
| | | }, |
| | | changePutUnder(val) { |
| | | // 同 changeDepartment 方法 |
| | | getApprovalList() { |
| | | approvalList().then(res => { |
| | | this.approvalList = res.data; |
| | | }); |
| | | }, |
| | | chaneApproval(val) { |
| | | if (!val) return; |
| | | this.projectForm.setTime = formatDate(val); |
| | | submit() { |
| | | this.$refs["projectForm"].validate(valid => { |
| | | if (valid) { |
| | | 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); |
| | | }); |
| | | } |
| | | } |
| | | }); |
| | | }, |
| | | chaneCompleted(val) { |
| | | if (!val) return; |
| | | this.projectForm.planCompleteTime = formatDate(val); |
| | | getProjectCodeApi() { |
| | | getProjectCode().then(res => { |
| | | this.projectForm.projectCode = res.data; |
| | | }); |
| | | }, |
| | | chaneWinTime(val) { |
| | | if (!val) return; |
| | | this.projectForm.winTime = formatDate(val); |
| | | }, |
| | | chaneStartWork(val) { |
| | | if (!val) return; |
| | | this.projectForm.planStartTime = formatDate(val); |
| | | }, |
| | | // 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 res = await getList({pageNum: newPage, pageSize: 10000}); |
| | | const list = res.rows || []; |
| | | if (newPage === 1) { |
| | | this.selectOptions = []; |
| | |
| | | }, |
| | | mapCreateClick() { |
| | | console.log("创建") |
| | | const { lon, lat, addr } = this.mapCreateInfo; |
| | | const {lon, lat, addr} = this.mapCreateInfo; |
| | | if (lon && lat && addr) { |
| | | this.projectForm.longitude = lon; |
| | | this.projectForm.latitude = lat; |
| | | this.projectForm.address = addr; |
| | | this.projectForm.projectAddress = 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); |
| | | } |
| | | '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(','); |
| | | } |
| | | if (newVal.competentDepartmentList) { |
| | | const labels = this.approvalList |
| | | .filter(item => newVal.competentDepartmentList.includes(item.id)) |
| | | .map(item => item.value); |
| | | this.largeCategory = labels.join(','); |
| | | } |
| | | }, 1000); |
| | | }, |
| | | deep: true |
| | | } |
| | |
| | | .item { |
| | | width: 100%; |
| | | } |
| | | |
| | | .map_div { |
| | | width: 100%; |
| | | height: 643px; |
| | | } |
| | | |
| | | .input-row { |
| | | display: flex; |
| | | width: 100%; |