New file |
| | |
| | | <template> |
| | | <div class="basic-info"> |
| | | <el-form ref="demoFormRef" :disabled="disabled" :model="projectForm" :rules="rules" class="dialog_form" :inline = "true"> |
| | | <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="code"> |
| | | <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="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> |
| | | </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> |
| | | </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-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-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-form-item> |
| | | </el-col> |
| | | <el-col :span="6"> |
| | | <el-form-item label="项目业主单位" label-width="100px" prop="company" 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-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-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="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="department" style="width: 100%"> |
| | | <el-tree-select |
| | | v-model="projectForm.competentDepartmentList" |
| | | :data="sys_competent_department" |
| | | :multiple="true" |
| | | :props="{ dictLabel: 'label', dictValue: 'id' }" |
| | | :render-after-expand="false" |
| | | clearable |
| | | collapse-tags |
| | | placeholder="请选择" |
| | | style="width: 100%" |
| | | @change="changeDepartment" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="6"> |
| | | <el-form-item label="行政区划" label-width="100px" style="width: 100%"> |
| | | <el-tree-select |
| | | v-model="projectForm.area" |
| | | :data="sys_administrative_divisions" |
| | | :props="{ dictLabel: 'label', dictValue: 'id' }" |
| | | :render-after-expand="false" |
| | | clearable |
| | | placeholder="请选择" |
| | | style="width: 100%" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="6"> |
| | | <el-form-item label="管理归口" label-width="100px" style="width: 100%"> |
| | | <el-tree-select |
| | | v-model="projectForm.managementCentralizationList" |
| | | :data="sys_centralized_management" |
| | | :multiple="true" |
| | | :props="{ dictLabel: 'label', dictValue: 'id' }" |
| | | :render-after-expand="false" |
| | | clearable |
| | | collapse-tags |
| | | placeholder="请选择" |
| | | style="width: 100%" |
| | | @change="changePutUnder" |
| | | /> |
| | | </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 |
| | | v-model="projectForm.projectApprovalType" |
| | | :data="sys_approval_type" |
| | | :props="{ dictLabel: 'label', dictValue: 'id' }" |
| | | :render-after-expand="false" |
| | | clearable |
| | | placeholder="请选择" |
| | | style="width: 100%" |
| | | /> |
| | | </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-form-item> |
| | | </el-col> |
| | | <el-col :span="6"> |
| | | <el-form-item label="重点分类" label-width="100px" style="width: 100%"> |
| | | <el-tree-select |
| | | v-model="projectForm.importanceType" |
| | | :data="sys_key_categories" |
| | | :props="{ dictLabel: 'label', dictValue: 'id' }" |
| | | :render-after-expand="false" |
| | | clearable |
| | | placeholder="请选择" |
| | | style="width: 100%" |
| | | /> |
| | | </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-tree-select |
| | | v-model="projectForm.year" |
| | | :data="sys_annual_plan" |
| | | :props="{ dictLabel: 'label', dictValue: 'id' }" |
| | | :render-after-expand="false" |
| | | clearable |
| | | placeholder="请选择" |
| | | style="width: 100%" |
| | | /> |
| | | </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-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%"> |
| | | <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> |
| | | </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> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | // import Upload from '@element-plus/icons-vue/dist/Upload.vue'; |
| | | // import MapComponent from '@/components/Map/index.vue'; |
| | | // 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 { |
| | | components: { |
| | | // MapComponent, |
| | | // UploadStandard, |
| | | // RemoteSelect |
| | | }, |
| | | props: { |
| | | disabled: { |
| | | type: Boolean, |
| | | default: false |
| | | } |
| | | }, |
| | | data() { |
| | | return { |
| | | projectForm: { |
| | | projectName: '', |
| | | projectCode: '', |
| | | projectType: '', |
| | | projectStatus: '1', |
| | | 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: [] |
| | | }, |
| | | 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: '创建' |
| | | }]; |
| | | }, |
| | | // // 在Vue 2中使用 computed 替代 sys_* 的响应式字典 |
| | | // sysFundingType() { |
| | | // return this.$dict.get('sys_funding_type'); |
| | | // }, |
| | | // sysInvestmentType() { |
| | | // return this.$dict.get('sys_investment_type'); |
| | | // // 其他字典同理 |
| | | // } |
| | | }, |
| | | 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, addr }) { |
| | | this.mapCreateInfo = { |
| | | lon: e.lnglat.lng, |
| | | lat: e.lnglat.lat, |
| | | addr |
| | | }; |
| | | }, |
| | | mapCreateClick() { |
| | | 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: 130%; |
| | | } |
| | | |
| | | .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> |