hxgksystemapp/src/views/matrix/matrixcont/setupmatrixuser.vue

<!--
@ 作者: 秦东
@ 时间: 2023-07-05 15:03:42
@ 备注: 设置字段值
-->
<script lang='ts' setup>
import { matrixTable,objectStruct,orgAndUserMatrixCont } from '@/api/matrixapi/type'
import { getMatrixField,getNumber,submitMatrixData,haveMatrixCont } from '@/api/matrixapi';
import { Search } from '@element-plus/icons-vue'
/**
 * 引入页面
 */
import PickOrg from '@/views/matrix/orgoruser/pickorg.vue'
import PickUser from '@/views/matrix/orgoruser/pickuser.vue'
import { th } from 'element-plus/es/locale';

const props = defineProps({
	userShow:{
		type:Boolean,
		default:false
	},
	matrixcont:{
		type:Object,
		default(){
			return {}
		}
	}
});
const emits = defineEmits(["update:userShow"]);	//父级元素
const addFieldLoading = ref(false)
const tabelColumn = reactive<matrixTable[]>([])
const tableList = reactive<any[]>([])
const loading = ref(false)
const orgOrUserBox = ref(false);		//选择行政组织或选择人员
const judgePage = ref(false); 
const orguseInfo = reactive<orgAndUserMatrixCont[]>([])
const systemMenuTreeProps = {
    children: "child",
    label: "name",
	value:"id"
}
const orgOptionsList = ref<any>();	//行政组织树
const tableValue = ref<any>();	//单元格内容
const ids = ref<number[]>([]);	//批量删除的ID
/**
 * 弹窗显示控制
 */
const field_is_Show = computed({
	get: () => props.userShow,
	set: (val) => {
		emits("update:userShow", val);
	},
});
/**
 * 关闭弹窗
 */
 function handleCloseBox(){
	emits("update:userShow", false);
	initData()
}
/**
 * 初始化数据
 */
function initData(){
	orgOptionsList.value?.splice(0,orgOptionsList.value.length);
	// console.log("tableList-------->",tableList.length)
	tableList.splice(0, tableList.length);
}
/**
 * 监听数据
 */
 watch(() => props.userShow,() => {
	if(props.userShow){
		getMatrixField({id:props.matrixcont.id})
			.then(({data})=>{
				console.log("监听数据---->",data)
				tabelColumn.splice(0,tabelColumn.length)
				data.factor.forEach(item=>{
					tabelColumn.push({
						id:item.id,
						label:item.name,
						prop:item.pinyin,
						types:item.types
					})
				})
				data.outcome.forEach(item=>{
					tabelColumn.push({
						id:item.id,
						label:item.name,
						prop:item.pinyin,
						types:item.types
					})
				})
			})
			.finally(()=>{
				tableList.splice(0,tableList.length)
				haveMatrixCont({id:props.matrixcont.id})
					.then((data)=>{
						if(data.data&&data.data.length>0){
							data.data.forEach((item:any)=>{
								tableList.push(item)
							})
						}
					})
					.finally(()=>{
						if(tableList.length<1){
							addTableHang();
						}
					})
			})
	}
});
/**
 * 添加行
 */
function addTableHang(){
	//获取编号
	getNumber({id:8})
		.then((data)=>{
			var jks:objectStruct = {}
			tabelColumn.forEach(item=>{
				jks[item.prop]={
					id:item.id,
					types:item.types,
					number:data.data.uuidstring,
					userlist:[],
					orgid:0,
					namelist:[],
					isedit:false,
					pinyin:item.prop
				}
			})		
			tableList.push(jks)
		})
	// console.log("监听数据-1111->",props.orglist,props.orgtree)
}
/**
 * 提交使用人
 */
function submitAddMatrixUser(){
	if(orguseInfo&&orguseInfo.length>0){
		orguseInfo.splice(0,orguseInfo.length)
	}
	console.log("提交数据-->",tableList)
	if(tableList&&tableList.length > 0){
		tableList.forEach((item)=>{
			console.log("提交数据-4->",item,item.bm)
			// if(item&&item.length>=0){
			// 	item.forEach((items: any)=>{
			// 		console.log("提交数据-2->",items)
			// 	})
			// }
			const entries = Object.entries(item);
			entries.map((val:any)=>{
				console.log("提交数据-2->",val,val[val.length-1].number)
				let typeClass = 1
				if(val[val.length-1].types == 1){
					typeClass = 2
				}
				orguseInfo.push({
					id:0,
					number:val[val.length-1].number,
					userlist:val[val.length-1].userlist,
					types:typeClass,
					mcid:props.matrixcont.id,
					mhid:val[val.length-1].id,
				})
			})
			
			
			
		})
	}
	submitMatrixData(orguseInfo)
		.then((data)=>{
			console.log("提交数据-66666->",data)
			handleCloseBox();
		})

	console.log("提交数据-1->",orguseInfo)
}
function sdfdsf(cont:any){
	console.log("单击单元格-2222222->",cont)
	if(cont.types<1){
		judgePage.value = true
	}else{
		judgePage.value = false
	}
	cont.isedit=true
	orgOrUserBox.value = true
	tableValue.value = cont
}
/**
 * 删除行
 */
function delTableHang(id:any){
	console.log("删除行",id)
	tableList.splice(id,1)
	if(tableList.length<1){
		addTableHang();
	}
}
</script>
<template>
	<el-dialog v-model="field_is_Show" custom-class="dialog_box" title="矩阵数据维护"  :before-close="handleCloseBox" width="80%" draggable>
		<PickOrg v-model:orgBoxShow="orgOrUserBox" :ismultiselect="false" :tabledata="tableValue" />
		<el-table
			v-loading="loading"
			highlight-current-row
			:data="tableList"
			border
		>
			<el-table-column v-for="(item,index) in tabelColumn" :key="index"  align="center">
				<!-- 自定义表头 -->
				<template #header>
					{{item.label}} 
				</template>
				<!-- 自定义表项/单元格内容 -->
				<template #default="scope">
						<div v-if="!scope.row[item.prop].isedit" class="edit_table_row" @dblclick="sdfdsf(scope.row[item.prop])" >
							<el-tag v-for="(itemtext,ti) in scope.row[item.prop].userlist" :key="ti" class="ml-2"  size="small">{{ itemtext.name }}</el-tag>&nbsp;
						</div>
						<div v-else>
							<el-input
								v-model="scope.row[item.prop].namelist"
								placeholder="请选择"
								:suffix-icon="Search"
							/>
						</div>
				</template>
			</el-table-column>
			<el-table-column label="操作"  width="80" align="center">
				<template #default="scope">
					<el-button type="danger" link @click="delTableHang(scope.$index)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		
		<template #footer>
			<div class="dialog-footer left_right">
				<div>
					<el-button type="warning" @click="addTableHang">添加数据</el-button>
				</div>
				<div>
					<el-button type="primary" :loading="addFieldLoading" @click="submitAddMatrixUser" >确 定</el-button>
					<el-button @click="handleCloseBox">取 消</el-button>
				</div>
			</div>
		</template>

		

	</el-dialog>
</template>
<style  lang='scss' scoped>
.edit_table_row{
	display: block;
	width: 100%;
	height: 100%;
}
.left_right{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
</style>