| | |
| | | <template> |
| | | <div class="app-container"> |
| | | <el-form :model="queryParams" ref="queryParamsRef" size="small" :inline="true" v-show="showSearch" label-width="68px"> |
| | | <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-form-item> |
| | | <el-popover :visible="popoverValue" :width="500" placement="bottom"> |
| | | <template #reference> |
| | | <el-button style="margin-right: 16px; margin-top: 1px; color: #3369ff" @click="handlePopover" size="small"> |
| | | <el-button style="margin-right: 16px; margin-top: 1px; color: #3369ff" @click="handlePopover" |
| | | size="small"> |
| | | 更多筛查条件 |
| | | <span style="margin-left: 5px"> |
| | | <el-icon v-if="!popoverValue" class="el-icon-arrow-down"></el-icon> |
| | |
| | | </el-button> |
| | | </template> |
| | | <span>筛选条件</span> |
| | | <el-form ref="moreQueryParamsRef" label-width="68px" label-position="right" :model="moreQueryParams"> |
| | | <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="moreQueryParams.projectType" clearable placeholder="请选择" class="select-option" size="small"> |
| | | <el-option v-for="items in sys_project_type" :key="items.value" :label="items.label" :value="items.value" /> |
| | | <el-select v-model="queryParams.projectType" clearable placeholder="请选择" class="select-option" |
| | | size="small"> |
| | | <el-option v-for="items in sys_project_type" :key="items.value" :label="items.label" |
| | | :value="items.value"/> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="重点分类"> |
| | | <el-select v-model="moreQueryParams.importanceType" clearable placeholder="请选择" class="select-option"> |
| | | <el-option v-for="items in sys_key_categories" :key="items.value" :label="items.label" :value="items.value" /> |
| | | <el-select v-model="queryParams.importanceType" clearable placeholder="请选择" class="select-option"> |
| | | <el-option v-for="items in sys_key_categories" :key="items.value" :label="items.label" |
| | | :value="items.value"/> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item label="项目标签"> |
| | | <el-select v-model="moreQueryParams.tag" clearable placeholder="请选择" class="select-option"> |
| | | <el-option v-for="items in sys_project_tags" :key="items.value" :label="items.label" :value="items.value" /> |
| | | <el-select v-model="queryParams.tag" clearable placeholder="请选择" class="select-option"> |
| | | <el-option v-for="items in sys_project_tags" :key="items.value" :label="items.label" |
| | | :value="items.value"/> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="项目状态"> |
| | | <el-select v-model="moreQueryParams.projectStatus" :disabled="isProjectCategory" clearable placeholder="请选择" class="select-option"> |
| | | <el-option v-for="items in sys_project_status" :key="items.value" :label="items.label" :value="items.value" /> |
| | | <el-select v-model="queryParams.projectStatus" :disabled="isProjectCategory" clearable |
| | | placeholder="请选择" class="select-option"> |
| | | <el-option v-for="items in sys_project_status" :key="items.value" :label="items.label" |
| | | :value="items.value"/> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item label="项目码"> |
| | | <el-select v-model="moreQueryParams.projectColorCode" clearable placeholder="请选择" class="select-option"> |
| | | <el-option v-for="items in sys_project_code" :key="items.value" :label="items.label" :value="items.value" /> |
| | | <el-select v-model="queryParams.projectColorCode" clearable placeholder="请选择" class="select-option"> |
| | | <el-option v-for="items in sys_project_code" :key="items.value" :label="items.label" |
| | | :value="items.value"/> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="关联状态"> |
| | | <el-select v-model="moreQueryParams.assignmentStatus" clearable placeholder="请选择" class="select-option"> |
| | | <el-option v-for="items in sys_association_status" :key="items.value" :label="items.label" :value="items.value" /> |
| | | <el-select v-model="queryParams.assignmentStatus" clearable placeholder="请选择" class="select-option"> |
| | | <el-option v-for="items in sys_association_status" :key="items.value" :label="items.label" |
| | | :value="items.value"/> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item label="资金类型"> |
| | | <el-select v-model="moreQueryParams.investmentType" clearable placeholder="请选择" class="select-option"> |
| | | <el-option v-for="items in sys_funding_type" :key="items.value" :label="items.label" :value="items.value" /> |
| | | <el-select v-model="queryParams.investmentType" clearable placeholder="请选择" class="select-option"> |
| | | <el-option v-for="items in sys_funding_type" :key="items.value" :label="items.label" |
| | | :value="items.value"/> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="项目阶段"> |
| | | <el-select v-model="moreQueryParams.projectPhase" clearable placeholder="请选择" class="select-option"> |
| | | <el-option v-for="items in sys_project_phases" :key="items.value" :label="items.label" :value="items.value" /> |
| | | <el-select v-model="queryParams.projectPhase" clearable placeholder="请选择" class="select-option"> |
| | | <el-option v-for="items in sys_project_phases" :key="items.value" :label="items.label" |
| | | :value="items.value"/> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item label="投资类别"> |
| | | <el-select v-model="moreQueryParams.investType" clearable placeholder="请选择" class="select-option"> |
| | | <el-option v-for="items in sys_investment_type" :key="items.value" :label="items.label" :value="items.value" /> |
| | | <el-select v-model="queryParams.investType" clearable placeholder="请选择" class="select-option"> |
| | | <el-option v-for="items in sys_investment_type" :key="items.value" :label="items.label" |
| | | :value="items.value"/> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="行政区划"> |
| | | <el-select v-model="moreQueryParams.area" clearable placeholder="请选择" class="select-option"> |
| | | <el-option v-for="items in sys_administrative_divisions" :key="items.value" :label="items.label" :value="items.value" /> |
| | | <el-select v-model="queryParams.area" clearable placeholder="请选择" class="select-option"> |
| | | <el-option v-for="items in sys_administrative_divisions" :key="items.value" :label="items.label" |
| | | :value="items.value"/> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | |
| | | <el-row style="text-align: center"> |
| | | <el-col :span="24"> |
| | | <el-form-item label-width="0"> |
| | | <el-button type="primary" @click="handleQueryFrom">确 认</el-button> |
| | | <el-button type="primary" @click="handleQuery">确 认</el-button> |
| | | <el-button @click="closePopover">取 消</el-button> |
| | | </el-form-item> |
| | | </el-col> |
| | |
| | | </div> |
| | | <div class="right-section"> |
| | | <div> |
| | | <el-button @click="handleExport" size="small" > |
| | | <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" > |
| | | <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-button :disabled="!isReserve" circle icon="el-icon-plus" @click="add()" size="small"/> |
| | | </el-tooltip> |
| | | </div> |
| | | <VisibilityToolbar |
| | | v-model:showSearch="showSearch" |
| | | :columns="columns" |
| | | :columns="defaultColumns" |
| | | @queryTable="handleQuery" |
| | | @update:sort="handleUpdateSort" |
| | | @update:columns="handleUpdateColumns" |
| | | @update:resetSort="handleResetSort" |
| | | ></VisibilityToolbar> |
| | | <!-- @update:columns="handleUpdateColumns"--> |
| | | <!-- @update:sort="handleUpdateSort"--> |
| | | <!-- @update:resetSort="handleResetSort"--> |
| | | </div> |
| | | </div> |
| | | </el-form> |
| | | |
| | | <el-table |
| | | ref="elTable" |
| | | style="margin-top: 20px" |
| | | v-loading="loading" |
| | | :data="infoList" |
| | | :data="projectInfoList" |
| | | @selection-change="handleSelectionChange" |
| | | height="60vh" |
| | | :show-overflow-tooltip = "true"> |
| | | <el-table-column type="selection" width="55" align="center" /> |
| | | <template v-for="item in columns"> |
| | | 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" |
| | | v-bind="item" |
| | | :min-width="item.minWidth" |
| | | > |
| | | <template slot-scope="scope" v-if="item.slotName"> |
| | | <slot :name="item.slotName" :scope="scope"></slot> |
| | | <template slot-scope="scope"> |
| | | <!-- 使用具名插槽 --> |
| | | <template v-if="item.slotName"> |
| | | <!-- projectStatus插槽 --> |
| | | <template v-if="item.slotName === 'projectStatus'"> |
| | | <el-text class="mx-1">{{ '自定义样式' }}</el-text> |
| | | </template> |
| | | <!-- projectColorCode插槽 --> |
| | | <template v-if="item.slotName === 'projectColorCode'"> |
| | | <el-text class="mx-1 has-dot">{{ '自定义样式' }}<span class="dot" style="margin-left: 5px"></span></el-text> |
| | | </template> |
| | | <!-- projectType插槽 --> |
| | | <template v-if="item.slotName === 'projectType'"> |
| | | <el-text class="mx-1">{{ '自定义样式' }}</el-text> |
| | | </template> |
| | | <!-- investType插槽 --> |
| | | <template v-if="item.slotName === 'investType'"> |
| | | <el-text class="mx-1">{{ '自定义样式' }}</el-text> |
| | | </template> |
| | | <!-- planStartTime插槽 --> |
| | | <template v-if="item.slotName === 'planStartTime'"> |
| | | {{ '自定义样式' }} |
| | | </template> |
| | | </template> |
| | | <!-- 默认显示 --> |
| | | <span v-else>{{ scope.row[item.id] }}</span> |
| | | </template> |
| | | </el-table-column> |
| | | </template> |
| | | <el-table-column label="操作" align="center" class-name="small-padding fixed-width"> |
| | | |
| | | <!-- 操作列 --> |
| | | <el-table-column label="操作" width="140" align="center" > |
| | | <template slot-scope="scope"> |
| | | <el-button |
| | | size="mini" |
| | | size="medium" |
| | | type="text" |
| | | icon="el-icon-view" |
| | | @click="handleDetail(scope.row)" |
| | | > |
| | | </el-button> |
| | | <el-button |
| | | v-if="isReserve" |
| | | size="medium" |
| | | type="text" |
| | | icon="el-icon-edit" |
| | | @click="handleUpdate(scope.row)" |
| | | v-hasPermi="['code:info:edit']" |
| | | >修改</el-button> |
| | | > |
| | | </el-button> |
| | | <el-button |
| | | size="mini" |
| | | v-if="isReserve" |
| | | size="medium" |
| | | type="text" |
| | | icon="el-icon-delete" |
| | | @click="handleDelete(scope.row)" |
| | | v-hasPermi="['code:info:remove']" |
| | | >删除</el-button> |
| | | > |
| | | </el-button> |
| | | </template> |
| | | </el-table-column> |
| | | |
| | | <template #projectStatus="{ scope }"> |
| | | <el-text class="mx-1">{{ getProjectStatus(scope.row) }}</el-text> |
| | | </template> |
| | | <template #projectColorCode="{ scope }"> |
| | | <el-text class="mx-1 has-dot">{{ '绿' }}<span class="dot" style="margin-left: 5px"></span></el-text> |
| | | </template> |
| | | <template #projectType="{ scope }"> |
| | | <el-text class="mx-1">{{ getProjectType(scope.row) }}</el-text> |
| | | </template> |
| | | <template #investType="{ scope }"> |
| | | <el-text class="mx-1">{{ getInvesType(scope.row) }}</el-text> |
| | | </template> |
| | | <template #planStartTime="{ scope }"> |
| | | {{ scope.row.planStartTime ? scope.row.planStartTime.split('-')[0] + '年' : '' }} |
| | | </template> |
| | | </el-table> |
| | | |
| | | <pagination |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import { listInfo, getInfo, delInfo, addInfo, updateInfo } from "@/api/projectInfo"; |
| | | import { current } from './list'; |
| | | import {listInfo, getInfo, delInfo, addInfo, updateInfo} from "@/api/projectInfo"; |
| | | import {current, currentRest} from './list'; |
| | | import FileDialog from '../component/FileDialog'; |
| | | |
| | | export default { |
| | | name: "projectInfo", |
| | | components: { |
| | |
| | | fileDialogVisible: false, |
| | | //是否需要新增按钮(储蓄项目需要) |
| | | isReserve: false, |
| | | //项目状态筛选条件 |
| | | isProjectCategory: false, |
| | | //表头 |
| | | columns: [], |
| | | defaultColumns: [], |
| | | //控制更多筛选显隐 |
| | | popoverValue: false, |
| | | // 遮罩层 |
| | |
| | | // 总条数 |
| | | total: 0, |
| | | // 项目管理基础信息表格数据 |
| | | infoList: [], |
| | | projectInfoList: [], |
| | | // 弹出层标题 |
| | | title: "", |
| | | // 是否显示弹出层 |
| | | open: false, |
| | | timeRange:[], |
| | | timeRange: [], |
| | | // 查询参数 |
| | | queryParams: { |
| | | pageNum: 1, |
| | |
| | | // 表单校验 |
| | | rules: { |
| | | projectName: [ |
| | | { required: true, message: "项目名称不能为空", trigger: "blur" } |
| | | {required: true, message: "项目名称不能为空", trigger: "blur"} |
| | | ], |
| | | projectStatus: [ |
| | | { required: true, message: "项目状态 (0未开工,1已开工,2已竣工,3暂停)不能为空", trigger: "change" } |
| | | {required: true, message: "项目状态 (0未开工,1已开工,2已竣工,3暂停)不能为空", trigger: "change"} |
| | | ], |
| | | } |
| | | }; |
| | | }, |
| | | created() { |
| | | this.columns = current.map((item, index) => { |
| | | const projectCategory = this.$route.query.projectCategory; |
| | | if(!projectCategory || projectCategory === '1'){ |
| | | this.isReserve = true; |
| | | } |
| | | if(projectCategory){ |
| | | this.isProjectCategory = true; |
| | | } |
| | | const columns = current.map((item, index) => { |
| | | item.index = index + 1; |
| | | item.key = index; |
| | | item.serialNumber = index + 1; |
| | | return item; |
| | | }); |
| | | this.getList(); |
| | | this.columns = columns; |
| | | this.defaultColumns = JSON.parse(JSON.stringify(columns)); |
| | | this.getList(); |
| | | }, |
| | | methods: { |
| | | // 重置排序的方法 |
| | | handleResetSort() { |
| | | this.defaultColumns = currentRest.map((item, index) => { |
| | | item.index = index + 1; |
| | | item.key = index; |
| | | item.serialNumber = index + 1 |
| | | return item; |
| | | }); |
| | | this.columns = currentRest.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(data) { |
| | | console.log( this.columns, '排序前的列'); |
| | | this.columns = this.columns.map(item => { |
| | | if (item.key === data.key) { |
| | | item.serialNumber = data.serialNumber; |
| | | } |
| | | 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); |
| | | |
| | | console.log( this.columns, '排序后的列'); |
| | | }, |
| | | // 关闭文件处理弹框的方法 |
| | | fileDialogCancel() { |
| | | this.tableLoading = true; |
| | |
| | | handlePopover() { |
| | | this.popoverValue.value = !this.popoverValue.value; |
| | | }, |
| | | closePopover() { |
| | | |
| | | this.popoverValue.value = false; |
| | | }, |
| | | /** 查询项目管理基础信息列表 */ |
| | | getList() { |
| | | this.loading = true; |
| | | console.log("查询") |
| | | // listInfo(this.queryParams).then(response => { |
| | | // this.infoList = response.rows; |
| | | // this.total = response.total; |
| | | // }); |
| | | this.loading = false; |
| | | listInfo(this.queryParams).then(response => { |
| | | this.projectInfoList = response.data; |
| | | this.total = response.total; |
| | | }); |
| | | this.loading = false; |
| | | }, |
| | | // 取消按钮 |
| | | cancel() { |
| | |
| | | // 多选框选中数据 |
| | | handleSelectionChange(selection) { |
| | | this.ids = selection.map(item => item.id) |
| | | this.single = selection.length!==1 |
| | | this.single = selection.length !== 1 |
| | | this.multiple = !selection.length |
| | | }, |
| | | /** 新增按钮操作 */ |
| | |
| | | /** 删除按钮操作 */ |
| | | handleDelete(row) { |
| | | const ids = row.id || this.ids; |
| | | this.$modal.confirm('是否确认删除项目管理基础信息编号为"' + ids + '"的数据项?').then(function() { |
| | | this.$modal.confirm('是否确认删除项目管理基础信息编号为"' + ids + '"的数据项?').then(function () { |
| | | return delInfo(ids); |
| | | }).then(() => { |
| | | this.getList(); |
| | | this.$modal.msgSuccess("删除成功"); |
| | | }).catch(() => {}); |
| | | }).catch(() => { |
| | | }); |
| | | }, |
| | | /** 导入按钮操作 */ |
| | | handleImport() { |
| | |
| | | }; |
| | | </script> |
| | | <style lang="scss" scoped> |
| | | .select-option { |
| | | .select-option { |
| | | width: 140px; |
| | | } |
| | | |
| | | .slot { |
| | | display: flex; |
| | | } |
| | |
| | | .right-section { |
| | | display: flex; |
| | | margin-left: auto; |
| | | |
| | | .add-btn { |
| | | margin: 0 10px; |
| | | } |