You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

322 lines
12 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<div>
<!-- 企业端页面 -->
<!-- 表单查询项 -->
<div class="headerbox">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
label-width="200">
<el-row>
<el-col :span="5">
<el-form-item label="项目名称" style="width: 100%;">
<el-input v-model="queryParams.name" placeholder="请输入项目名称" clearable
@keyup.enter.native="handleQuery" />
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="建设起止时间">
<el-date-picker v-model="queryParams.startTime" type="month" placeholder="开始月份"
value-format="yyyy-MM" style="width: 9rem;" :clearable="true">
</el-date-picker>
~
<el-date-picker v-model="queryParams.endTime" type="month" placeholder="结束月份"
value-format="yyyy-MM" style="width: 9rem;" :clearable="true">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="现状分类">
<el-select v-model="queryParams.xzfl" placeholder="现状分类" clearable>
<el-option v-for="dict in dict.type.xzfl" :key="dict.value" :label="dict.label"
:value="dict.value" />
</el-select>
</el-form-item>
</el-col>
<!-- <el-col :span="7">
<el-form-item label="项目法人单位">
<el-input v-model="queryParams.xmfrdwxz" placeholder="请输入项目名称" clearable
@keyup.enter.native="handleQuery" />
</el-form-item>
</el-col> -->
<el-col :span="5">
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini"
@click="handleQuery"></el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"></el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<!-- 表格内容区 -->
<div class="tablebox">
<!-- 标签行 -->
<div class="tablehead">
<div class="headtitle"><span>项目清单</span></div>
</div>
<!-- 导入弹窗 -->
<el-dialog title="导入" :visible.sync="upload.open" width="400px" append-to-body>
<el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
:action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
:on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处<em>点击上传</em></div>
<div class="el-upload__tip text-center" slot="tip">
<span>仅允许导入xlsxlsx格式文件</span>
</div>
</el-upload>
<span slot="footer" class="dialog-footer">
<el-button @click="upload.open = false">取消</el-button>
<el-button type="primary" @click="submitFileForm" :loading="upload.isUploading">确定</el-button>
</span>
</el-dialog>
<!-- 导出行 -->
<div class="tablebtntwo">
</div>
<el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange" stripe>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="序号" align="center">
<template slot-scope="scope">
{{ (scope.$index + 1) + (queryParams.current - 1) * queryParams.size }}
</template>
</el-table-column>
<el-table-column label="项目名称" align="center" prop="name" width="200" />
<el-table-column label="现状分类" align="center" prop="xzfl">
<template slot-scope="scope">
<span>{{ xzflMap[scope.row.xzfl] }}</span>
</template>
</el-table-column>
<el-table-column label="项目法人单位" align="center" prop="xmfrdwxz" width="200" />
<el-table-column label="统一信用代码" align="center" prop="tyshxydm" width="200" />
<el-table-column label="项目建设起止时间" align="center" width="200">
<template slot-scope="scope">
{{ scope.row.begainTime }} 至 {{ scope.row.endTime }}
</template>
</el-table-column>
<el-table-column label="总投资额(万元)" align="center" width="130" prop="ztze" />
<el-table-column label="总用地面积(平方米)" align="center" width="180" prop="zydmj" />
<el-table-column label="当前状态" align="center" prop="status">
<template slot-scope="scope">
<span :style="{ color: statusColors[statusMap[scope.row.status]] }">{{
statusMap[scope.row.status] }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button size="mini" type="text" @click="getInfo(scope.row, 'fill')"
v-if="statusMap[scope.row.status] === '待填报'">填报</el-button>
<el-button size="mini" type="text" @click="getInfo(scope.row, 'detail')"
v-if="statusMap[scope.row.status] !== '待填报'"></el-button>
</template>
</el-table-column>
</el-table>
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.current"
:limit.sync="queryParams.size" @pagination="getList" />
</div>
</div>
</template>
<script>
import { getBasicInformationPage } from "@/api/ManageApi/index";
import { getToken } from "@/utils/auth";
import { checkPermi, checkRole } from "@/utils/permission";
export default {
name: "Post",
dicts: ["xzfl"],
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 项目表格数据
postList: [],
// 状态颜色映射
statusColors: {
'审核通过': '#6EDABE',
'待填报': '#FFBF6B',
'待审核': '#7693D8'
},
//状态文本映射
statusMap: {
1: '待填报',
2: '待审核',
3: '审核通过'
},
xzflMap: {
1: '已建',
2: '在建',
3: '拟建'
},
// 查询参数
queryParams: {
current: 1,
size: 10,
xzfl: undefined,
name: undefined,
xmfrdwxz: undefined,
startTime: undefined,
endTime: undefined,
status: undefined
},
// 导入相关数据
upload: {
open: false, // 是否显示导入弹窗
isUploading: false, // 是否正在上传
updateSupport: 0, // 是否更新已存在数据
headers: { Authorization: "Bearer " + getToken() }, // 上传请求头
url: process.env.VUE_APP_BASE_API + "/gysl/basicInformation/import", // 上传地址
},
};
},
created() {
this.getList();
},
methods: {
checkPermi,
checkRole,
/** 查询项目列表 */
getList() {
this.loading = true;
// 处理日期范围参数
const params = {
...this.queryParams,
begainTime: this.queryParams.dateRange ? this.queryParams.dateRange[0] : undefined,
endTime: this.queryParams.dateRange ? this.queryParams.dateRange[1] : undefined
};
// console.log('【查询参数】', params);
getBasicInformationPage(params).then((response) => {
this.postList = response.data.records;
this.total = response.data.total;
this.loading = false;
}).catch(error => {
console.error('查询失败:', error);
this.loading = false;
});
},
// 处理日期范围
processDateRange() {
if (this.queryParams.dateRange && this.queryParams.dateRange.length === 2) {
return {
begainTime: this.queryParams.dateRange[0],
endTime: this.queryParams.dateRange[1]
};
}
return {};
},
/** 导入按钮操作 */
handleImport() {
this.upload.open = true;
},
// 文件上传中处理
handleFileUploadProgress(event, file, fileList) {
this.upload.isUploading = true;
},
// 文件上传成功处理
handleFileSuccess(response, file, fileList) {
this.upload.open = false;
this.upload.isUploading = false;
this.$refs.upload.clearFiles();
this.$alert(
"<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
response.msg +
"</div>",
"导入结果",
{ dangerouslyUseHTMLString: true }
);
this.getList();
},
// 提交上传文件
submitFileForm() {
this.$refs.upload.submit();
},
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id);
this.single = selection.length !== 1;
this.multiple = !selection.length;
},
/** 导出按钮操作 */
handleExport() {
this.download('/gysl/basicInformation/export', {
...this.queryParams,
idList: this.ids[0]
}, `信息管理导出${new Date().getTime()}.xlsx`)
},
/** 详情按钮操作 */
getInfo(row, type) {
this.$store.commit("SET_CRUMBS", this.$route.meta.title + "详情");
const id = row.id || this.ids[0];
this.$router.push({ path: `/manage-info/${id}`, query: { action: type } });
},
/** 重置按钮操作 */
resetQuery() {
this.queryParams = {
current: 1,
size: 10,
xzfl: '',
name: '',
xmfrdwxz: '',
dateRange: '',
status: ''
};
this.handleQuery();
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.current = 1;
this.getList();
},
},
};
</script>
<style scoped>
.headerbox {
background-color: #fff;
border-radius: .5rem;
padding: 1rem;
margin: .5rem;
border: 1px solid #eee;
}
.tablebox {
background-color: #fff;
border-radius: .5rem;
padding: 1rem;
margin: .5rem;
border: 1px solid #eee;
}
.tablehead {
display: flex;
justify-content: space-between;
align-items: center;
}
.headbtn {
display: flex;
}
.tablebtntwo {
margin-top: 1rem;
margin-bottom: 1rem;
}
</style>