更新页面
This commit is contained in:
@ -0,0 +1,246 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="我的审核" >
|
||||
<template #left>
|
||||
<el-button :type="activeMainNav == 'todo' ? 'primary':''" @click="activeMainNav = 'todo'">我的待办</el-button>
|
||||
<el-button :type="activeMainNav == 'done' ? 'primary':''" @click="activeMainNav = 'done'">我的已办</el-button>
|
||||
</template>
|
||||
<el-tabs v-model="activeSubNav" @click="handleType">
|
||||
<el-tab-pane label="我的发起" name="myInitiate"></el-tab-pane>
|
||||
<el-tab-pane label="我的审核" name="myAudit"></el-tab-pane>
|
||||
<el-tab-pane label="我的审批" name="myApprove"></el-tab-pane>
|
||||
<el-tab-pane label="我的签收" name="mySign"></el-tab-pane>
|
||||
<el-tab-pane label="我的处置" name="myHandle"></el-tab-pane>
|
||||
</el-tabs>
|
||||
</PageTitle>
|
||||
</div>
|
||||
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch"></Search>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<div ref="btns" class="btns flexcb">
|
||||
<div class="">
|
||||
<el-button>批量处理</el-button>
|
||||
<el-button>导出</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData"
|
||||
>
|
||||
<template #bkDj="{ row }">
|
||||
<DictTag :tag="false" :value="row.bkDj" :options="D_GS_BK_DJ" />
|
||||
</template>
|
||||
<template #bkDx="{ row }">
|
||||
<DictTag :tag="false" :value="row.bkDx" :options="D_GS_BK_DX" />
|
||||
</template>
|
||||
<template #bkZt="{ row }">
|
||||
<DictTag :tag="false" :value="row.bkZt" :options="D_GS_BK_ZT" />
|
||||
</template>
|
||||
<template #czYq="{ row }">
|
||||
<DictTag :tag="false" :value="row.czYq" :options="D_GS_BK_CZYQ" />
|
||||
</template>
|
||||
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-button size="small" @click="autoEdit('auto', row)" >审核</el-button>
|
||||
<el-button size="small" @click="autoEdit('approval', row)">审批</el-button>
|
||||
<el-button size="small" @click="autoEdit('detail', row)">详情</el-button>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight + 42"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import { qcckGet, qcckPost } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_GS_BK_DJ, D_GS_BK_DX, D_GS_BK_ZT, D_GS_BK_SJLX, D_GS_BK_CZYQ } = proxy.$dict( "D_GS_BK_DJ", "D_GS_BK_DX", "D_GS_BK_ZT", "D_GS_BK_SJLX", "D_GS_BK_CZYQ" ); //获取字典数据
|
||||
const searchBox = ref(); //搜索框
|
||||
const btns = ref();
|
||||
|
||||
// 主导航激活状态
|
||||
const activeMainNav = ref("todo");
|
||||
// 子导航激活状态
|
||||
const activeSubNav = ref("myAudit");
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
label: "布控等级",
|
||||
prop: "bqDj",
|
||||
placeholder: "请选择布控等级",
|
||||
showType: "select",
|
||||
options: D_GS_BK_DJ
|
||||
},
|
||||
{
|
||||
label: "布控对象",
|
||||
prop: "bkDx",
|
||||
placeholder: "请选择布控对象",
|
||||
showType: "select",
|
||||
options: D_GS_BK_DX
|
||||
},
|
||||
{
|
||||
label: "布控状态",
|
||||
prop: "bkZt",
|
||||
placeholder: "请选择布控状态",
|
||||
showType: "select",
|
||||
options: D_GS_BK_ZT
|
||||
},
|
||||
{
|
||||
label: "布控时间类型",
|
||||
prop: "bkSjLx",
|
||||
placeholder: "请选择布控时间",
|
||||
showType: "date",
|
||||
options: D_GS_BK_SJLX
|
||||
},
|
||||
{
|
||||
label: "预计标签模型",
|
||||
prop: "jyzt",
|
||||
placeholder: "请选预计标签模型",
|
||||
showType: "select",
|
||||
options: [{ label: "在业", value: "在业" }]
|
||||
},
|
||||
{
|
||||
label: "最近预警时间",
|
||||
prop: "checkDate",
|
||||
placeholder: "最近预警时间",
|
||||
showType: "date"
|
||||
},
|
||||
]);
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [], //表格数据
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
}, //分页
|
||||
controlsWidth: "240", //操作栏宽度
|
||||
|
||||
tableColumn: [
|
||||
{ label: "布控级别", prop: "bkDj", showSolt: true },
|
||||
{ label: "布控标题", prop: "bkBt" },
|
||||
{ label: "处置接收单位", prop: "czJsdwdm"},
|
||||
{ label: "处置要求", prop: "czYq", showSolt: true },
|
||||
{ label: "开始时间", prop: "bkSjKs" },
|
||||
{ label: "结束时间", prop: "bkSjJs" },
|
||||
{ label: "失效时间", prop: "bkSjSx" },
|
||||
{ label: "布控发起人", prop: "bkfqrXm" },
|
||||
{ label: "布控状态", prop: "bkZt", showSolt: true }
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//选择类型
|
||||
const handleType = () => {
|
||||
pageData.keyCount++;
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList();
|
||||
};
|
||||
// 搜索
|
||||
const onSearch = (val) => {
|
||||
queryFrom.value = { ...val };
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList();
|
||||
};
|
||||
|
||||
const changeNo = (val) => {
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getList();
|
||||
};
|
||||
const changeSize = (val) => {
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList();
|
||||
};
|
||||
|
||||
// 获取列表
|
||||
const getList = () => {
|
||||
// pageData.tableConfiger.loading = true;
|
||||
// let data = {
|
||||
// ...pageData.pageConfiger,
|
||||
// ...queryFrom.value,
|
||||
// };
|
||||
// qcckGet(data, "/mosty-gsxt/tbGsxtBk/selectPage").then((res) => {
|
||||
// pageData.tableData = res.records || [];
|
||||
// pageData.total = res.total;
|
||||
// pageData.tableConfiger.loading = false;
|
||||
// }).catch(() => {
|
||||
// pageData.tableConfiger.loading = false;
|
||||
// });
|
||||
};
|
||||
|
||||
// 详情
|
||||
const autoEdit = (type, row) => {
|
||||
};
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 300;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.main-nav {
|
||||
padding: 16px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
|
||||
.sub-nav {
|
||||
background-color: #fff;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
:deep(.el-tabs__header) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
:deep(.el-tabs__nav-wrap::after) {
|
||||
height: 1px;
|
||||
background: none;
|
||||
}
|
||||
|
||||
:deep(.el-table--fit) {
|
||||
top: 52px !important;
|
||||
}
|
||||
.btns {
|
||||
height: 52px;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user