<template>
|
<el-dialog v-model="dialogCertificate" title="证书管理">
|
<el-row>
|
<el-button type="primary" :icon="Plus" size="default" @click="openEdit('add',{})">新增</el-button>
|
</el-row>
|
<el-table
|
:data="tableData"
|
highlight-current-row
|
style="width: 100%;margin-top: 20px"
|
border
|
:header-cell-style="{background: '#fafafa'}"
|
>
|
<el-table-column type="index" label="序号" width="80"/>
|
<el-table-column property="id" label="证件Id"/>
|
<el-table-column property="certTypeName" label="证书类型"/>
|
<el-table-column property="certNo" label="证件编号"/>
|
<el-table-column property="certExpiredAt" label="证书有效期至"/>
|
<el-table-column fixed="right" label="操作" align="center" width="250">
|
<template #default="scope">
|
<el-button link type="primary" size="small" :icon="View" @click="openEdit('view',scope.row)">查看</el-button>
|
<el-button link type="primary" size="small" :icon="Edit" @click="openEdit('edit', scope.row)">修改</el-button>
|
<el-button link type="danger" size="small" :icon="Delete" @click="deleteRecord(scope.row)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<ctf-dialog ref="ctfRef" @refresh="getCtf()" :role-data="roleList"></ctf-dialog>
|
</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 {userApi} from "/@/api/systemManage/user";
|
import ctfDialog from "/@/views/system/user/component/ctfDialog.vue";
|
import {useRoleApi} from "/@/api/systemManage/role";
|
|
|
interface stateType {
|
dialogCertificate: boolean
|
tableData: Array<any>
|
roleList: Array<any>
|
uid: number | null
|
}
|
export default defineComponent({
|
name: 'dialogCertificate',
|
components: {ctfDialog},
|
props:[],
|
setup() {
|
const userInfo = useUserInfo()
|
const { userInfos } = storeToRefs(userInfo);
|
const state = reactive<stateType>({
|
dialogCertificate: false,
|
tableData: [],
|
roleList: [],
|
uid: null
|
});
|
// 页面载入时执行方法
|
onMounted(() => {
|
|
});
|
const ctfRef = ref()
|
const openDialog = (value: any) => {
|
state.dialogCertificate = true
|
state.uid = value.uid
|
getRoleData()
|
getCtf()
|
}
|
|
const openEdit = (type: string,value: any)=>{
|
ctfRef.value.openDialog(type,value,state.uid)
|
}
|
|
const getRoleData = async () => {
|
let res = await useRoleApi().getRoleList();
|
if (res.data.code === '200') {
|
state.roleList = res.data.data;
|
} else {
|
ElMessage({
|
type: 'warning',
|
message: res.data.msg
|
});
|
}
|
};
|
|
const getCtf = async()=>{
|
let res = await userApi().getCtf({uid: state.uid})
|
if(res.data.code == 200){
|
state.tableData = res.data.data
|
}else{
|
ElMessage({
|
type: 'warning',
|
message: res.data.msg
|
})
|
}
|
}
|
|
// 删除方法
|
const deleteRecord = (data: any) => {
|
ElMessageBox.confirm(`此操作将永久删除该条证书，是否继续?`, '提示', {
|
confirmButtonText: '确认',
|
cancelButtonText: '取消',
|
type: 'warning'
|
})
|
.then(async () => {
|
let res = await userApi().delCtf({userCertId: data.id});
|
if (res.data.code === '200') {
|
ElMessage({
|
type: 'success',
|
message: '删除成功！'
|
});
|
await getCtf();
|
} else {
|
ElMessage({
|
type: 'warning',
|
message: res.data.msg
|
});
|
}
|
})
|
.catch(() => {});
|
}
|
|
// 折线图
|
const renderMenu = async (value: string) => {
|
Session.set('projectId',value)
|
userInfos.value.projectId = value
|
await initBackEndControlRoutes();
|
};
|
return {
|
renderMenu,
|
openDialog,
|
deleteRecord,
|
openEdit,
|
getRoleData,
|
getCtf,
|
ctfRef,
|
Search,
|
Delete,
|
Edit,
|
View,
|
Plus,
|
...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>
|
