<template>
|
<el-dialog v-model="dialogCertificate" :title="title">
|
<div class="system-user-search mb15">
|
<el-input size="default" v-model.trim="listQuery.searchParams.userName" placeholder="请输入用户名" style="max-width: 180px"> </el-input>
|
<el-button size="default" type="primary" class="ml10" @click="handleSearch">
|
<el-icon>
|
<ele-Search />
|
</el-icon>
|
查询
|
</el-button>
|
</div>
|
<el-table
|
:data="tableData"
|
highlight-current-row
|
style="width: 100%;margin-top: 20px"
|
border
|
:header-cell-style="{background: '#fafafa'}"
|
>
|
<el-table-column property="userName" label="姓名"/>
|
<el-table-column property="depName" label="所属部门"/>
|
<el-table-column property="certTypeName" label="证书类型"/>
|
<el-table-column property="certExpiredAt" label="到期时间"/>
|
</el-table>
|
<br />
|
<el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="page-position" :pager-count="5" :page-sizes="[10]" v-model:current-page="listQuery.pageIndex" background v-model:page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
|
<br />
|
<br />
|
</el-dialog>
|
</template>
|
|
<script lang="ts">
|
import {toRefs, reactive, defineComponent, ref, defineAsyncComponent, onMounted} from 'vue';
|
import { storeToRefs } from 'pinia';
|
import { initBackEndControlRoutes } from '/@/router/backEnd';
|
import {useUserInfo} from "/@/stores/userInfo";
|
import { Session } from '/@/utils/storage';
|
import { Search, Delete, Edit, View, Plus } from '@element-plus/icons-vue'
|
import {ElMessage, ElMessageBox, ElTable} from 'element-plus'
|
import {certApi} from "/@/api/systemManage/certificate";
|
|
|
interface stateType {
|
title: string
|
dialogCertificate: boolean
|
tableData: Array<any>
|
listQuery: {
|
pageIndex: number
|
pageSize: number
|
searchParams: {
|
userName: string
|
certTypeId: number | null
|
}
|
}
|
total: number | null
|
}
|
export default defineComponent({
|
name: 'certificateMember',
|
components: {},
|
props:[],
|
setup() {
|
const userInfo = useUserInfo()
|
const { userInfos } = storeToRefs(userInfo);
|
const state = reactive<stateType>({
|
title: '',
|
dialogCertificate: false,
|
tableData: [],
|
total: null,
|
listQuery: {
|
pageIndex: 1,
|
pageSize: 10,
|
searchParams: {
|
userName:'',
|
certTypeId: null
|
}
|
}
|
});
|
// 页面载入时执行方法
|
onMounted(() => {
|
|
});
|
const ctfRef = ref()
|
const openDialog = (type:string,value: any) => {
|
state.tableData = []
|
state.total = null
|
state.listQuery.searchParams.certTypeId = value.id
|
state.dialogCertificate = true
|
if(type == '人员'){
|
state.title = '证书人员'
|
getUserData()
|
}else{
|
state.title = '证书即将到期'
|
getUnvalidData()
|
}
|
}
|
|
const getUserData = async () => {
|
let res = await certApi().getCertUsers(state.listQuery);
|
if (res.data.code === '200') {
|
state.tableData = res.data.data
|
state.total = res.data.total
|
} else {
|
ElMessage({
|
type: 'warning',
|
message: res.data.msg
|
});
|
}
|
}
|
|
const getUnvalidData = async () => {
|
let res = await certApi().getCertUnvalid(state.listQuery);
|
if (res.data.code === '200') {
|
state.tableData = res.data.data
|
state.total = res.data.total
|
} else {
|
ElMessage({
|
type: 'warning',
|
message: res.data.msg
|
});
|
}
|
}
|
|
|
const onHandleSizeChange = (val: number) => {
|
state.listQuery.pageSize = val;
|
if(state.title == '证书人员'){
|
getUserData();
|
}else{
|
getUnvalidData()
|
}
|
}
|
|
const onHandleCurrentChange = (val: number) => {
|
state.listQuery.pageIndex = val;
|
if(state.title == '证书人员'){
|
getUserData();
|
}else{
|
getUnvalidData()
|
}
|
}
|
|
const handleSearch = () => {
|
state.listQuery.pageIndex = 1
|
if(state.title == '证书人员'){
|
getUserData();
|
}else{
|
getUnvalidData()
|
}
|
}
|
|
const renderMenu = async (value: string) => {
|
Session.set('projectId',value)
|
userInfos.value.projectId = value
|
await initBackEndControlRoutes();
|
};
|
return {
|
renderMenu,
|
openDialog,
|
ctfRef,
|
Search,
|
Delete,
|
Edit,
|
View,
|
Plus,
|
onHandleSizeChange,
|
onHandleCurrentChange,
|
handleSearch,
|
...toRefs(state),
|
};
|
},
|
});
|
</script>
|
|
<style scoped lang="scss">
|
.home-container {
|
height: 100%;
|
overflow: hidden;
|
position: relative;
|
.homeCard{
|
width: 100%;
|
padding: 0 20px;
|
box-sizing: border-box;
|
background: #fff;
|
border-radius: 4px;
|
}
|
.applyBtn{
|
width: 100%;
|
background: #fff;
|
padding-top: 15px;
|
z-index: 5;
|
box-shadow: 0 -3px 8px rgba(150,150,150,.1);
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
.el-row{
|
margin-bottom: 20px;
|
}
|
.el-row:last-child {
|
margin-bottom: 0;
|
}
|
.el-input{
|
width: 100% !important;
|
}
|
.el-date-editor::v-deep{
|
width: 100%;
|
}
|
.el-select{
|
width: 100%;
|
}
|
.el-cascader{
|
width: 100% !important;
|
}
|
}
|
</style>
|
