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

<!--
@ 作者: 秦东
@ 时间: 2023-06-16 11:39:20
@ 备注: 双职工
-->
<script lang='ts' setup>
import { shuangzhigong } from '@/api/hr/people/type'
import { getWorkingCouple,editDoubleWorkState } from '@/api/hr/people/index'
/**
 * 引入页面
 */
 import WorkingCoupleAddPage  from '@/views/hr/archives/basicinformation/workingcoupleadd.vue'
 import WorkingCoupleEditPage  from '@/views/hr/archives/basicinformation/workingcoupleedit.vue'


const props = defineProps({
	tabsid:{
		type:String,
		default:"1"
	},
	usercont:{
		type:Object,
		default(){
			return {}
		}
	}
});
const addSzgBoxPage = ref(false)			//新增双职工
const editSzgBoxPage = ref(false)			//编辑双职工

const tableLoading = ref(false)
const shuangzhigongList = ref<shuangzhigong[]>([])
function getshuangzhigongList(){
	tableLoading.value = true;
	getWorkingCouple({id:props.usercont.keystr})
		.then(( data )=>{
			shuangzhigongList.value = data.data
		})
		.finally(()=>{tableLoading.value = false;})
}
const doubleWorkCont = ref<shuangzhigong>()				//双职工内容
/**
 * 监听数据
 */
 watch(() => props.tabsid,() => {
	if(props.tabsid == "5"){
		getshuangzhigongList()
	}
 })
 /**
  * 添加数据
  */
function addSzgBox(key:string){
	addSzgBoxPage.value = true;
}
/**
 * 编辑双职工
 */
function editSzgBox(cont:shuangzhigong){
	doubleWorkCont.value = cont
	editSzgBoxPage.value = true
}
/**
 * 删除双职工
 */
 function delSzgBox(cont:shuangzhigong){
	ElMessageBox.confirm("确认删除<"+cont.name+">此数据项?", "警告", {
		confirmButtonText: "确定",
		cancelButtonText: "取消",
		type: "warning",
	}).then(() => {
		editDoubleWorkState({id:cont.id.toString(),state:3,isdel:1}).then(() => {
			ElMessage.success("删除成功");
			getshuangzhigongList()
		});
	});
}
</script>
<template>
	<el-table
		v-loading="tableLoading"
		highlight-current-row
		:data="shuangzhigongList"
		border 
		:header-cell-style="{background:'#F5F7FA'}"
	>
		
		<el-table-column  label="姓名" prop="name" width="100"    />
		<el-table-column  label="联系电话" prop="tel" width="150"   align="center" />
		<el-table-column  label="行政组织关系关系" >
			<template #default="scope">
				<el-text class="mx-1">{{ scope.row.company }}</el-text>
				<el-text v-if="scope.row.department" class="mx-1"> <span v-if="scope.row.company"> / </span>{{ scope.row.department }}</el-text>
				<el-text v-if="scope.row.position" class="mx-1"> <span v-if="scope.row.department"> / </span>{{ scope.row.position }}</el-text>
			</template>
		</el-table-column>
		<el-table-column fixed="right" align="right"  width="150">
			<template #header>
				<el-button
					type="primary"
					link
					size="small"
					@click.stop="addSzgBox(props.usercont.keystr)"
				>
					<i-ep-plus /> 新增
				</el-button>
			</template>
			<template #default="scope">
				<el-button
					type="primary"
					link
					size="small"
					@click.stop="editSzgBox(scope.row)"
				>
					<i-ep-edit />编辑
				</el-button>
				<el-button
					type="primary"
					link
					size="small"
					@click.stop="delSzgBox(scope.row)"
				>
					<i-ep-delete />删除
				</el-button>
			</template>
		</el-table-column>
	</el-table>
	<WorkingCoupleAddPage v-model:addisshow="addSzgBoxPage" :keyval="props.usercont.keystr" @restdata="getshuangzhigongList" />
	<WorkingCoupleEditPage v-model:editisshow="editSzgBoxPage" :keyval="props.usercont.keystr" :datacont="doubleWorkCont" @restdata="getshuangzhigongList" />
</template>
<style  lang='scss' scoped>

</style>