hxgksystemapp/src/views/hr/archives/basicinformation/certificates.vue

<!--
@ 作者: 袁纪菲
@ 时间: 2024-4-28
@ 备注: 证书信息
-->
<script lang="ts" setup>
import {reactive} from 'vue';
import { zhengshuxinxi } from "@/api/hr/people/type";
import {
	getCertificatesCont,
	editCertificatesContState,
} from "@/api/hr/people/index";

/**
 * 引入页面
 */
import EditCertificates from "@/views/hr/archives/basicinformation/certificatesedit.vue";
import AddCertificates from "@/views/hr/archives/basicinformation/certificatesadd.vue";

const props = defineProps({
	tabsid: {
		type: String,
		default: "1",
	},
	usercont: {
		type: Object,
		default() {
			return {};
		},
	},
});

const addzsxxBoxPage = ref(false); 
const editzsxxBoxPage = ref(false); 
const tableLoading = ref(false);
const zsxxList = ref<zhengshuxinxi[]>([]);
const zsxxInfo = ref<zhengshuxinxi>();
const getzsxxList = () => {
	tableLoading.value = true;
	getCertificatesCont({ id: props.usercont.keystr })
		.then((data) => {
			zsxxList.value = data.data;
		})
		.finally(() => {
			tableLoading.value = false;
		});
}
/**
 * 监听数据
 */
watch(
	() => props.tabsid,
	() => {
		if (props.tabsid == "4") {
			getzsxxList();
		}
	}
);
/**
 * 添加数据
 */
const addzsxxBox = () => {
	addzsxxBoxPage.value = true;
}
/**
 * 编辑证书信息
 */
const editzsxxBox = (cont: zhengshuxinxi) => {
	zsxxInfo.value = cont;
	editzsxxBoxPage.value = true;
}
/**
 * 删除证书信息
 */
const delzsxxBox = (cont: zhengshuxinxi) => {
	ElMessageBox.confirm("确认删除<" + cont.id + ">此数据项?", "警告", {
		confirmButtonText: "确定",
		cancelButtonText: "取消",
		type: "warning",
	}).then(() => {
		editCertificatesContState({ id: toString(), state: 3, isdel: 1 }).then(
      () => {
        ElMessage.success("删除成功");
		getzsxxList();
		});
	});
}
</script>
<template>
    <AddCertificates
	v-model:addisshow="addzsxxBoxPage" 
	:keyval="props.usercont.keystr"
	@restdata="getzsxxList" />
	<EditCertificates
	v-model:editisshow="editzsxxBoxPage" 
	:keyval="props.usercont.keystr"
	:datacont="zsxxInfo" 
	@restdata="getzsxxList" 
    />
	<el-row>
		<el-col v-for="(item, index) in zsxxList" :key="index" :span="24" class="colBox">
			<el-descriptions
				class="margin-top"
				:column="3"
				border
			>
				<template #extra>
					<el-button
						type="primary"
						link
						size="small"
						@click.stop="editzsxxBox(item)"
					>
						<i-ep-edit />编辑
					</el-button>
					<el-button
						type="primary"
						link
						size="small"
						@click.stop="delzsxxBox(item)"
					>
						<i-ep-delete />删除
					</el-button>
				</template>

				<el-descriptions-item>
						<template #label>
                            <el-text><el-icon><Tickets /></el-icon> 证书名称</el-text>
                        </template>
                        {{ item.name }}
                </el-descriptions-item>
				<el-descriptions-item>
						<template #label>
                            <el-text><svg-icon icon-class="number" class="svg_box"></svg-icon> 证书编号</el-text>
                        </template>
                        {{ item.number }}
                </el-descriptions-item>
				<el-descriptions-item>
						<template #label>
                            <el-text><el-icon><OfficeBuilding /></el-icon> 发证单位</el-text>
                        </template>
                        {{ item.issuingunit }}
                </el-descriptions-item>
				<el-descriptions-item>
						<template #label>
                            <el-text><svg-icon icon-class="yunxing" class="svg_box"></svg-icon> 生效时间</el-text>
                        </template>
                        {{ item.effectivetime }}
                </el-descriptions-item>
				<el-descriptions-item>
						<template #label>
                            <el-text><svg-icon icon-class="stop" class="svg_box"></svg-icon> 截止时间</el-text>
                        </template>
						{{ item.deadline }}
                </el-descriptions-item>
				<el-descriptions-item>
					<template #label>
                        <el-text><svg-icon icon-class="time" class="svg_box"></svg-icon> 有效期限</el-text>
                     </template>
                        {{ item.validity }}
                </el-descriptions-item>
				<el-descriptions-item>
					<template #label>
                        <el-text><el-icon><QuestionFilled /></el-icon> 是否生效</el-text>
                     </template>
                        {{ item.iseffective }}
                </el-descriptions-item>
			</el-descriptions>
		</el-col>
		<el-col :span="24" class="colBut">
			<el-button type="primary" @click="addzsxxBox"><i-ep-plus />新增证书信息</el-button>
		</el-col>
	</el-row>
</template>
<style lang="scss" scoped>
.colBox{
	margin-top:25px;
}
.colBut{
	margin-top:25px;
	text-align:right
}
</style>