New file |
| | |
| | | <template> |
| | | <div class="app-container"> |
| | | <el-form :model="queryParams" ref="queryParamsRef" size="small" :inline="true" v-show="showSearch" |
| | | label-width="68px"> |
| | | <div class="slot"> |
| | | <div class="left-section"> |
| | | <el-form-item label="项目名称" prop="projectName"> |
| | | <el-input |
| | | style="width: 190px;margin-right: 20px" |
| | | size="small" |
| | | v-model="queryParams.projectName" |
| | | placeholder="请输入项目名称" |
| | | clearable |
| | | @keyup.enter.native="handleQuery" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item label="项目代码" prop="projectCode"> |
| | | <el-input |
| | | style="width: 190px;margin-right: 20px" |
| | | size="small" |
| | | v-model="queryParams.projectCode" |
| | | placeholder="请输入项目代码" |
| | | clearable |
| | | @keyup.enter.native="handleQuery" |
| | | /> |
| | | </el-form-item> |
| | | |
| | | <el-form-item label="项目年限" prop="timeRange"> |
| | | <el-date-picker |
| | | style="width: 270px" |
| | | size="small" |
| | | v-model="queryParams[timeRange]" |
| | | type="daterange" |
| | | range-separator="-" |
| | | value-format="yyyy-MM-dd" |
| | | start-placeholder="开始日期" |
| | | end-placeholder="结束日期" |
| | | @change="handleQuery" |
| | | clearable |
| | | > |
| | | </el-date-picker> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button icon="el-icon-search" size="small" @click="handleQuery">查询</el-button> |
| | | <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button> |
| | | </el-form-item> |
| | | <el-popover :value="popoverValue" trigger="click" :width="500" placement="bottom"> |
| | | <span>筛选条件</span> |
| | | <el-form ref="moreQueryParamsRef" label-width="68px" label-position="right" :model="queryParams"> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item label="项目类型"> |
| | | <el-select v-model="queryParams.projectType" clearable placeholder="请选择" class="select-option" @change="handleQuery" |
| | | size="small"> |
| | | <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="12"> |
| | | <el-form-item label="重点分类"> |
| | | <el-select v-model="queryParams.importanceType" clearable placeholder="请选择" class="select-option" @change="handleQuery"> |
| | | <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> |
| | | <el-col :span="12"> |
| | | <el-form-item label="项目标签"> |
| | | <el-select v-model="queryParams.tag" clearable placeholder="请选择" class="select-option" @change="handleQuery"> |
| | | <el-option v-for="item in dict.type.sys_project_tags" :key="item.value" :label="item.label" |
| | | :value="item.value"/> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="项目状态"> |
| | | <el-select v-model="queryParams.projectStatus" :disabled="isProjectCategory" clearable @change="handleQuery" |
| | | placeholder="请选择" class="select-option"> |
| | | <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-row> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item label="项目码"> |
| | | <el-select v-model="queryParams.coding" clearable placeholder="请选择" class="select-option" @change="handleQuery"> |
| | | <el-option v-for="item in dict.type.sys_project_code" :key="item.value" :label="item.label" |
| | | :value="item.value"/> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="关联状态"> |
| | | <el-select v-model="queryParams.assignmentStatus" clearable placeholder="请选择" class="select-option" @change="handleQuery"> |
| | | <el-option v-for="item in dict.type.sys_association_status" :key="item.value" :label="item.label" |
| | | :value="item.value"/> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item label="资金类型"> |
| | | <el-select v-model="queryParams.investmentType" clearable placeholder="请选择" class="select-option" @change="handleQuery"> |
| | | <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="12"> |
| | | <el-form-item label="项目阶段"> |
| | | <el-select v-model="queryParams.projectPhase" clearable placeholder="请选择" class="select-option" @change="handleQuery"> |
| | | <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-row> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item label="投资类别"> |
| | | <el-select v-model="queryParams.investType" clearable placeholder="请选择" class="select-option" @change="handleQuery"> |
| | | <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="12"> |
| | | <el-form-item label="行政区划"> |
| | | <el-select v-model="queryParams.area" clearable placeholder="请选择" class="select-option" @change="handleQuery"> |
| | | <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-row> |
| | | </el-form> |
| | | <el-button style="margin-right: 16px; margin-top: 1px; color: #3369ff" slot="reference" |
| | | size="small"> |
| | | 更多筛查条件 |
| | | <span style="margin-left: 5px"> |
| | | <el-icon v-if="!popoverValue" class="el-icon-arrow-down"></el-icon> |
| | | <el-icon v-else-if="popoverValue" class="el-icon-arrow-up"></el-icon> |
| | | </span> |
| | | </el-button> |
| | | </el-popover> |
| | | </div> |
| | | <div class="right-section"> |
| | | <div> |
| | | <el-button @click="handleExport" size="small"> |
| | | <svg-icon icon-class="exportIcon" style="margin-right: 8px"/> |
| | | 导出数据 |
| | | </el-button> |
| | | <el-button :disabled="!isReserve" @click="handleImport" size="small"> |
| | | <svg-icon icon-class="importIcon" style="margin-right: 8px"/> |
| | | 导入数据 |
| | | </el-button> |
| | | </div> |
| | | <div class="add-btn"> |
| | | <el-tooltip content="新增" effect="dark" placement="top"> |
| | | <el-button :disabled="!isReserve" circle icon="el-icon-plus" @click="add()" size="small"/> |
| | | </el-tooltip> |
| | | </div> |
| | | <VisibilityToolbar |
| | | v-model:showSearch="showSearch" |
| | | :columns="defaultColumns" |
| | | @queryTable="handleQuery" |
| | | @update:sort="handleUpdateSort" |
| | | @update:columns="handleUpdateColumns" |
| | | @update:resetSort="handleResetSort" |
| | | ></VisibilityToolbar> |
| | | </div> |
| | | </div> |
| | | </el-form> |
| | | |
| | | <el-table |
| | | :key="tableKey" |
| | | ref="elTable" |
| | | style="margin-top: 20px" |
| | | v-loading="loading" |
| | | :data="projectInfoList" |
| | | @selection-change="handleSelectionChange" |
| | | height="100%" |
| | | sortable="custom" |
| | | :show-overflow-tooltip="true"> |
| | | <el-table-column type="selection" width="55" align="center"/> |
| | | <!-- 动态列 --> |
| | | <el-table-column |
| | | v-for="item in columns" |
| | | :key="item.id" |
| | | v-if="item.visible" |
| | | :prop="item.id" |
| | | :label="item.label" |
| | | :min-width="item.minWidth" |
| | | :show-overflow-tooltip="item.showOverflowTooltip" |
| | | > |
| | | <template slot-scope="scope"> |
| | | <!-- 使用具名插槽 --> |
| | | <template v-if="item.slotName"> |
| | | <!-- projectStatus插槽 --> |
| | | <template v-if="item.slotName === 'projectStatus'"> |
| | | <dict-tag :options="dict.type.sys_project_status" :value="scope.row.projectStatus"/> |
| | | </template> |
| | | <!-- coding插槽 --> |
| | | <template v-if="item.slotName === 'coding' || item.slotName === 'coding'"> |
| | | <dict-tag :options="dict.type.sys_project_code" :value="scope.row.coding"/> |
| | | </template> |
| | | <!-- projectType插槽 --> |
| | | <template v-if="item.slotName === 'projectType'"> |
| | | <dict-tag :options="dict.type.sys_project_type" :value="scope.row.projectType"/> |
| | | </template> |
| | | <!-- investType插槽 --> |
| | | <template v-if="item.slotName === 'investType'"> |
| | | <dict-tag :options="dict.type.sys_investment_type" :value="scope.row.investType"/> |
| | | </template> |
| | | </template> |
| | | <!-- 默认显示 --> |
| | | <span v-else>{{ scope.row[item.id] }}</span> |
| | | </template> |
| | | </el-table-column> |
| | | |
| | | <!-- 操作列 --> |
| | | <el-table-column label="操作" width="140" align="center" > |
| | | <template slot-scope="scope"> |
| | | <el-button |
| | | size="medium" |
| | | type="text" |
| | | icon="el-icon-view" |
| | | v-if="scope.row.processInsId" |
| | | @click="lookProcessDetail(scope.row)" |
| | | > |
| | | </el-button> |
| | | <!-- <el-button--> |
| | | <!-- v-if="isReserve"--> |
| | | <!-- size="medium"--> |
| | | <!-- type="text"--> |
| | | <!-- icon="el-icon-edit"--> |
| | | <!-- @click="handleUpdate(scope.row)"--> |
| | | <!-- >--> |
| | | <!-- </el-button>--> |
| | | <el-tooltip content="流程" placement="top" effect="light" :enterable="false"> |
| | | <el-button |
| | | v-if="isReserve" |
| | | size="medium" |
| | | type="text" |
| | | icon="el-icon-s-operation" |
| | | @click="openOpProcess(scope.row)" |
| | | > |
| | | </el-button> |
| | | </el-tooltip> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | |
| | | <pagination |
| | | v-show="total>0" |
| | | :total="total" |
| | | :page.sync="queryParams.currentPage" |
| | | :limit.sync="queryParams.pageSize" |
| | | @pagination="getList" |
| | | /> |
| | | |
| | | <FileDialog |
| | | :fileDialogVisible.sync="fileDialogVisible" |
| | | :isImportOrExport="isImportOrExport" |
| | | @fileDialogCancel="fileDialogCancel" |
| | | :currentColumns="columns" |
| | | /> |
| | | |
| | | <RunProcess ref="runProcess" :show="showRunProcess" |
| | | :now-process-def-id="nowProcessDefId" |
| | | :now-process-ins-id="nowProcessInsId" |
| | | :project-info="projectRunFrom" |
| | | :process-list="processList" |
| | | @close="closeRunProcess"> |
| | | </RunProcess> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import { listDefinition } from "@/api/flowable/definition"; |
| | | import {listInfo, getInfo, delInfo, addInfo, updateInfo} from "@/api/projectEngineering/projectInfo"; |
| | | import { getProjectProcess } from "@/api/projectProcess/projectProcess" |
| | | import {projectProcessCurrent, projectProcessCurrentRest} from '@/views/projectEngineering/projectLibrary/list'; |
| | | import FileDialog from '@/views/projectEngineering/projectLibrary/component/FileDialog'; |
| | | import RunProcess from "@/views/projectProcess/components/RunProcess"; |
| | | import {getProcessConfigInfoList} from "@/api/projectProcess/processConfigInfo"; |
| | | |
| | | export default { |
| | | dicts: ['sys_administrative_divisions', 'sys_investment_type', 'sys_project_phases', |
| | | 'sys_funding_type', 'sys_association_status', 'sys_project_status', 'sys_project_code', |
| | | 'sys_project_tags', 'sys_key_categories', 'sys_project_type'], |
| | | name: "projectInfo", |
| | | components: { |
| | | FileDialog, RunProcess |
| | | }, |
| | | data() { |
| | | return { |
| | | projectRunFrom: { |
| | | projectId: null, |
| | | projectName: '' |
| | | }, |
| | | processList: [], |
| | | showRunProcess: false, |
| | | nowProcessDefId: '', |
| | | nowProcessInsId: '', |
| | | isImportOrExport: false, |
| | | fileDialogVisible: false, |
| | | //是否需要新增按钮(储蓄项目需要) |
| | | isReserve: false, |
| | | //项目状态筛选条件 |
| | | isProjectCategory: false, |
| | | //表头 |
| | | columns: [], |
| | | defaultColumns: [], |
| | | //控制更多筛选显隐 |
| | | popoverValue: false, |
| | | // 遮罩层 |
| | | loading: true, |
| | | // 选中数组 |
| | | ids: [], |
| | | // 非单个禁用 |
| | | single: true, |
| | | // 非多个禁用 |
| | | multiple: true, |
| | | // 显示搜索条件 |
| | | showSearch: true, |
| | | // 总条数 |
| | | total: 0, |
| | | // 项目管理基础信息表格数据 |
| | | projectInfoList: [], |
| | | // 弹出层标题 |
| | | title: "", |
| | | // 是否显示弹出层 |
| | | tableKey: 0, |
| | | open: false, |
| | | timeRange: [], |
| | | // 查询参数 |
| | | queryParams: { |
| | | currentPage: 1, |
| | | pageSize: 10, |
| | | projectName: null, |
| | | projectCode: null, |
| | | }, |
| | | moreQueryParams: { |
| | | projectType: '', // 项目类型 |
| | | importanceType: '', // 重点分类 |
| | | projectStatus: '', // 项目状态 |
| | | coding: '', // 项目码 |
| | | investmentType: '', // 资金类型 |
| | | projectPhase: '', // 项目阶段 |
| | | investType: '', // 投资类别 |
| | | area: '', // 行政区划 |
| | | assignmentStatus: '', //关联状态 |
| | | tag: '' //项目标签 |
| | | }, |
| | | // 表单参数 |
| | | form: {}, |
| | | // 表单校验 |
| | | rules: { |
| | | projectName: [ |
| | | {required: true, message: "项目名称不能为空", trigger: "blur"} |
| | | ], |
| | | projectStatus: [ |
| | | {required: true, message: "项目状态不能为空", trigger: "change"} |
| | | ], |
| | | } |
| | | }; |
| | | }, |
| | | created() { |
| | | const projectCategory = this.$route.query.projectCategory; |
| | | if(!projectCategory || projectCategory === '1'){ |
| | | this.isReserve = true; |
| | | } |
| | | if(projectCategory){ |
| | | this.isProjectCategory = true; |
| | | } |
| | | const columns = projectProcessCurrent.map((item, index) => { |
| | | item.index = index + 1; |
| | | item.key = index; |
| | | item.serialNumber = index + 1; |
| | | return item; |
| | | }); |
| | | this.columns = columns; |
| | | this.defaultColumns = JSON.parse(JSON.stringify(columns)); |
| | | this.getList(); |
| | | }, |
| | | methods: { |
| | | // 查看详情 |
| | | lookProcessDetail(row) { |
| | | sessionStorage.removeItem("projectProDetail") |
| | | this.$router.push({ |
| | | path: '/projectFlow/detail', |
| | | query: { |
| | | projectId: row.id, |
| | | processDefId: row.processDefId, |
| | | processInsId: row.processInsId, |
| | | deployId: row.deployId, |
| | | processName: row.flowableProcessName |
| | | } |
| | | }) |
| | | }, |
| | | closeRunProcess() { |
| | | this.projectRunFrom = { |
| | | projectId: null, |
| | | projectName: '' |
| | | } |
| | | this.nowProcessDefId = ""; |
| | | this.nowProcessInsId = ""; |
| | | this.showRunProcess = false |
| | | this.getList() |
| | | }, |
| | | // 打开流程页面 |
| | | openOpProcess(row) { |
| | | this.nowProcessDefId = row.processDefId ? row.processDefId : ''; |
| | | this.nowProcessInsId = row.processInsId ? row.processInsId : ''; |
| | | // // 防止:id没变不触发监听 |
| | | // this.$refs.runProcess.setSelect(row.flowableProcessId); |
| | | this.projectRunFrom.projectId = row.id; |
| | | this.projectRunFrom.projectName = row.projectName; |
| | | |
| | | this.showRunProcess = true; |
| | | // 拿到流程列表 TODO 根据项目类型做筛选 |
| | | // getProcessConfigInfoList().then(response => { |
| | | // this.processList = response.data; |
| | | // |
| | | // }); |
| | | }, |
| | | // 重置排序的方法 |
| | | handleResetSort() { |
| | | this.defaultColumns = projectProcessCurrentRest.map((item, index) => { |
| | | item.index = index + 1; |
| | | item.key = index; |
| | | item.serialNumber = index + 1 |
| | | return item; |
| | | }); |
| | | this.columns = projectProcessCurrentRest.map((item, index) => { |
| | | item.index = index + 1; |
| | | item.key = index; |
| | | item.serialNumber = index + 1 |
| | | return item; |
| | | }); |
| | | }, |
| | | // 更新列的方法 |
| | | handleUpdateColumns(row) { |
| | | // this.currentColumns = row; |
| | | this.columns = this.columns.map(item => { |
| | | if (item.key === row.key) { |
| | | return row; |
| | | } |
| | | return item; |
| | | }); |
| | | }, |
| | | handleUpdateSort(row) { |
| | | console.log( this.columns, '排序前的列'); |
| | | this.columns = this.columns.map(item => { |
| | | if (item.key === row.key) { |
| | | return row; |
| | | } |
| | | return item; |
| | | }); |
| | | this.defaultColumns = JSON.parse(JSON.stringify(this.columns)).sort((a, b) => a.index - b.index); |
| | | this.columns.sort((a, b) => a.serialNumber - b.serialNumber); |
| | | //强制table渲染 |
| | | this.tableKey = this.tableKey +1; |
| | | console.log( this.columns, '排序后的列'); |
| | | }, |
| | | // 关闭文件处理弹框的方法 |
| | | fileDialogCancel() { |
| | | this.tableLoading = true; |
| | | this.fileDialogVisible = false; |
| | | // this.getList(); |
| | | this.tableLoading = false; |
| | | }, |
| | | handlePopover() { |
| | | this.popoverValue = true; |
| | | }, |
| | | closePopover() { |
| | | this.popoverValue = false; |
| | | }, |
| | | /** 查询项目管理基础信息列表 */ |
| | | getList() { |
| | | this.loading = true; |
| | | getProjectProcess(this.queryParams).then(response => { |
| | | this.projectInfoList = response.data; |
| | | this.total = response.total; |
| | | this.loading = false; |
| | | }); |
| | | }, |
| | | // 取消按钮 |
| | | cancel() { |
| | | this.open = false; |
| | | this.reset(); |
| | | }, |
| | | // 表单重置 |
| | | reset() { |
| | | this.form = { |
| | | id: null, |
| | | projectName: null, |
| | | projectCode: null, |
| | | content: null, |
| | | projectType: null, |
| | | projectStatus: null, |
| | | fundType: null, |
| | | investType: null, |
| | | projectPhase: null, |
| | | tag: null, |
| | | competentDepartment: null, |
| | | areaCode: null, |
| | | managementCentralization: null, |
| | | projectApprovalType: null, |
| | | investmentCatalogue: null, |
| | | importanceType: null, |
| | | year: null, |
| | | yearInvestAmount: null, |
| | | createProjectTime: null, |
| | | planStartTime: null, |
| | | planCompleteTime: null, |
| | | winUnit: null, |
| | | winAmount: null, |
| | | winTime: null, |
| | | projectAddress: null, |
| | | longitude: null, |
| | | latitude: null, |
| | | projectOwnerUnit: null, |
| | | projectContactPerson: null, |
| | | contact: null, |
| | | gmtCreateTime: null, |
| | | gmtUpdateTime: null, |
| | | updateBy: null, |
| | | createBy: null, |
| | | deleted: null |
| | | }; |
| | | this.resetForm("form"); |
| | | }, |
| | | /** 搜索按钮操作 */ |
| | | handleQuery() { |
| | | this.queryParams.currentPage = 1; |
| | | this.getList(); |
| | | }, |
| | | /** 重置按钮操作 */ |
| | | resetQuery() { |
| | | this.resetForm("queryForm"); |
| | | this.handleQuery(); |
| | | }, |
| | | // 多选框选中数据 |
| | | handleSelectionChange(selection) { |
| | | this.ids = selection.map(item => item.id) |
| | | this.single = selection.length !== 1 |
| | | this.multiple = !selection.length |
| | | }, |
| | | /** 新增按钮操作 */ |
| | | handleAdd() { |
| | | this.reset(); |
| | | this.open = true; |
| | | this.title = "添加项目管理基础信息"; |
| | | }, |
| | | /** 修改按钮操作 */ |
| | | handleUpdate(row) { |
| | | this.reset(); |
| | | const id = row.id || this.ids |
| | | getInfo(id).then(response => { |
| | | this.form = response.data; |
| | | this.open = true; |
| | | this.title = "修改项目管理基础信息"; |
| | | }); |
| | | }, |
| | | /** 提交按钮 */ |
| | | submitForm() { |
| | | this.$refs["form"].validate(valid => { |
| | | if (valid) { |
| | | if (this.form.id != null) { |
| | | updateInfo(this.form).then(response => { |
| | | this.$modal.msgSuccess("修改成功"); |
| | | this.open = false; |
| | | this.getList(); |
| | | }); |
| | | } else { |
| | | addInfo(this.form).then(response => { |
| | | this.$modal.msgSuccess("新增成功"); |
| | | this.open = false; |
| | | this.getList(); |
| | | }); |
| | | } |
| | | } |
| | | }); |
| | | }, |
| | | /** 删除按钮操作 */ |
| | | handleDelete(row) { |
| | | const ids = row.id || this.ids; |
| | | this.$modal.confirm('是否确认删除项目管理基础信息编号为"' + ids + '"的数据项?').then(function () { |
| | | return delInfo(ids); |
| | | }).then(() => { |
| | | this.getList(); |
| | | this.$modal.msgSuccess("删除成功"); |
| | | }).catch(() => { |
| | | }); |
| | | }, |
| | | /** 导入按钮操作 */ |
| | | handleImport() { |
| | | this.isImportOrExport = false; |
| | | this.fileDialogVisible = true; |
| | | }, |
| | | /** 导出按钮操作 */ |
| | | handleExport() { |
| | | this.download('code/info/export', { |
| | | ...this.queryParams |
| | | }, `info_${new Date().getTime()}.xlsx`) |
| | | } |
| | | } |
| | | }; |
| | | </script> |
| | | <style lang="scss" scoped> |
| | | .select-option { |
| | | width: 100%; |
| | | } |
| | | |
| | | .slot { |
| | | display: flex; |
| | | } |
| | | |
| | | .left-section { |
| | | flex-grow: 1; |
| | | } |
| | | |
| | | .right-section { |
| | | display: flex; |
| | | margin-left: auto; |
| | | |
| | | .add-btn { |
| | | margin: 0 10px; |
| | | } |
| | | } |
| | | |
| | | </style> |