xuhongjie
parent
ac7ccff395
commit
aed1adb622
@ -1,67 +1,140 @@
|
||||
<template>
|
||||
<div class="mainbox">
|
||||
<div class="item" v-for="(item, index) in items" :key="index"
|
||||
:class="{ 'gray-background': index % 2 === 0, 'white-background': index % 2 !== 0 }" @click="getInfo(item)">
|
||||
<div>{{ item.xmmc }}</div>
|
||||
<div>{{ item.status }}</div>
|
||||
<div style="color:#7F99DB ;">
|
||||
<span v-if="item.status === '待填报'">去填报</span>
|
||||
<span v-else-if="item.status === '审核通过'">去查看</span>
|
||||
</div>
|
||||
<div>
|
||||
<!-- 表格内容区 -->
|
||||
<div class="tablebox">
|
||||
<!-- 标签行 -->
|
||||
<el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange" stripe>
|
||||
<el-table-column label="项目名称" align="center" prop="name" width="200" />
|
||||
<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')">详情</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getBasicInformationPage } from "@/api/ManageApi/index";
|
||||
import { checkPermi, checkRole } from "@/utils/permission";
|
||||
|
||||
export default {
|
||||
name: "Daiban",
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{ id: 9, xmmc: '项目A', status: '待填报' },
|
||||
{ id: 9, xmmc: '项目B', status: '审核通过' },
|
||||
{ id: 9, xmmc: '项目C', status: '待填报' },
|
||||
{ id: 9, xmmc: '项目D', status: '审核通过' },
|
||||
{ id: 9, xmmc: '项目D', status: '审核通过' },
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getInfo(item) {
|
||||
this.$store.commit("SET_CRUMBS", this.$route.meta.title + "详情");
|
||||
const id = item.id;
|
||||
this.$router.push({ path: `/manage-info/${id}` });
|
||||
}
|
||||
}
|
||||
name: "TableContent",
|
||||
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: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
xzfl: '',
|
||||
name: '',
|
||||
xmfrdwxz: '',
|
||||
dateRange: '', // 日期范围
|
||||
status: ''
|
||||
},
|
||||
};
|
||||
},
|
||||
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;
|
||||
});
|
||||
},
|
||||
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id);
|
||||
this.single = selection.length !== 1;
|
||||
this.multiple = !selection.length;
|
||||
},
|
||||
|
||||
/** 详情按钮操作 */
|
||||
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 } });
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.mainbox {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 1rem 0 0;
|
||||
margin-top: 0.5rem;
|
||||
height: 22rem;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 2rem 1rem;
|
||||
cursor: pointer;
|
||||
/* 添加鼠标指针样式 */
|
||||
.tablebox {
|
||||
background-color: #fff;
|
||||
border-radius: .5rem;
|
||||
margin: .5rem;
|
||||
}
|
||||
|
||||
.gray-background {
|
||||
background-color: #f5f5f5;
|
||||
/* 灰色背景 */
|
||||
.tablehead {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.white-background {
|
||||
background-color: #ffffff;
|
||||
/* 白色背景 */
|
||||
.tablebtntwo {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue