ShutongInterconnectedChemicalCloudPlatform/src/components/workflow/dialog/matrix.vue

<!--
@ 作者: 秦东
@ 时间: 2023-10-28 13:56:34
@ 备注: 矩阵选项
-->
<script lang='ts' setup>
import { searchMatrix,matrixCont,martixFieldStruct,matrixInfo } from '@/api/matrixapi/type'
import { getMatrixList,getMatrixField } from '@/api/matrixapi/index'


const props = defineProps({
	isshow:{
		type:Boolean,
		default:false
	},
	data: {
		type: Object,
		default: () => {
			return {
				"matrixid":0,
				"matrixName":"",
				"factorid":0,
				"factorName":"",
				"outcomeid":0,
				"outcomeName":"",
			}
		}
	},
})
const emits = defineEmits(["update:isshow","change"]);	//父级元素
const isShow = computed({
	get: () => props.isshow,
	set: (val) => {
		emits("update:isshow", val);
	},
});
const loading = ref(true);
const loadingVal = ref(true);
const matrixContList = ref<matrixCont[]>();
const matrixIsClick = reactive<matrixInfo>({
	matrixid:0,
	factorid:0,
	outcomeid:0,
	matrixName:"",
	factorName:"",
	outcomeName:"",
});
//执行监听
watch(() => props.isshow,(val:any) => {
	if(val){
		// console.log("执行监听")
		searchMatrixList();

		matrixIsClick.matrixid = props.data.matrixid;
		matrixIsClick.matrixName =  props.data.matrixName;
		matrixIsClick.factorid =  props.data.factorid;
		matrixIsClick.factorName =  props.data.factorName;
		matrixIsClick.outcomeid =  props.data.outcomeid;
		matrixIsClick.outcomeName =  props.data.outcomeName;
	}
})
//行政组织树对照值
const searchArchiveQuery = reactive<searchMatrix>({
	page:1,
	pagesize:10
})
const total = ref(0);				//总记录数
const farstId = ref<number>(0)
/**
 * 获取矩阵列表
 */
function searchMatrixList(){
	loading.value = true
	// console.log("值改变---->",matrixIsClick)
	getMatrixList(searchArchiveQuery)
		.then(({ data })=>{
			// console.log("获取矩阵列表->",data)
			matrixContList.value = data.list
			total.value = data.total
			if(data.list.length > 0){
				farstId.value = data.list[0].id*1
				// matrixIsClick.matrixid = data.list[0].id*1
				// matrixIsClick.matrixName = data.list[0].name
			}
		}).finally(()=>{
			loading.value = false
			gainMatrixNeed(farstId.value);
		})
}
const factorList = ref<martixFieldStruct[]>()
const outcomeList = ref<martixFieldStruct[]>()
//获取矩阵相关字段
const gainMatrixNeed = (val:any) =>{
	loadingVal.value = true
	getMatrixField({id:val*1})
		.then(({data})=>{
			// console.log("监听数据---->",data)
			factorList.value = data.factor
			outcomeList.value = data.outcome
			if(data.factor.length>0){
				// matrixIsClick.factorid = data.factor[0].id*1
				// matrixIsClick.factorName = data.factor[0].name
			}
			if(data.outcome.length>0){
				// matrixIsClick.outcomeid = data.outcome[0].id*1
				// matrixIsClick.outcomeName = data.outcome[0].name
			}
		})
		.finally(()=>{
			loadingVal.value = false
		})
}
//选择矩阵
const pickmatirval = (val:matrixCont) =>{
	matrixIsClick.matrixid = val.id*1
	matrixIsClick.matrixName = val.name
	gainMatrixNeed(val.id*1);
}
//选择矩阵值
const pickval = (val:martixFieldStruct) =>{
	matrixIsClick.outcomeid = val.id*1
	matrixIsClick.outcomeName = val.name
}
//选择条件
const pickSelect = (val:any) =>{
	factorList.value.forEach((item:any)=>{
		if(item.id==val){
			matrixIsClick.factorid = item.id*1
			matrixIsClick.factorName = item.name
		}
	})
}
watch(matrixIsClick,(val:any) => {
	// console.log("值改变---->",val)
	emits("change", val);
})
onMounted(()=>{
	matrixIsClick.matrixid = props.data.matrixid;
	matrixIsClick.matrixName =  props.data.matrixName;
	matrixIsClick.factorid =  props.data.factorid;
	matrixIsClick.factorName =  props.data.factorName;
	matrixIsClick.outcomeid =  props.data.outcomeid;
	matrixIsClick.outcomeName =  props.data.outcomeName;
	searchMatrixList();

})
</script>
<template>
	<div>
	<el-divider content-position="left">矩阵选项</el-divider>
		<el-descriptions
			v-if="isShow"
			title=""
			direction="vertical"
			:column="2"
			:size="size"
			border
			class="suojin"
		>
			<el-descriptions-item  label="可用矩阵" width="50%">
				<el-row  v-loading="loading">
					<el-col  :span="24"  class="materBody">
						<ul>
							<li  v-for="item in matrixContList" :key="item.id" :class="matrixIsClick.matrixid==item.id?'active':''" @click="pickmatirval(item)">
								<el-text class="mx-1">{{item.name}}</el-text> <el-text class="mx-1">{{item.orgname}}</el-text>
							</li>
						</ul>
					</el-col>
					<el-col :span="24">
						<el-pagination v-model:total="total" v-model:current-page="searchArchiveQuery.page" small layout="prev, pager, next"  :page-size="searchArchiveQuery.pagesize" :pager-count="5"  />
					</el-col>
				</el-row>
				
			</el-descriptions-item>
			
			<el-descriptions-item  label="矩阵选项" width="50%">
				<el-row  v-loading="loadingVal">
					<el-col :span="24">
						<el-select v-model="matrixIsClick.factorid" filterable placeholder="Select" style="width:100%" @change="pickSelect">
							<el-option
								:key="0"
								label="请选择"
								:value="0"
							/>
							<el-option
								v-for="item in factorList"
								:key="item.id"
								:label="item.name"
								:value="item.id"
							/>
						</el-select>
					</el-col>
					<el-col  :span="24"  class="materBody">
						<ul>
							<li  v-for="item in outcomeList" :key="item.id" :class="matrixIsClick.outcomeid==item.id?'active':''" @click="pickval(item)">
								<el-text class="mx-1">{{item.name}}</el-text> <el-text class="mx-1">{{}}{{item.pinyin}}</el-text>
							</li>
						</ul>
						
					</el-col>
				</el-row>	
			</el-descriptions-item>
		</el-descriptions>
	</div>
</template>
<style  lang='scss' scoped>
.materBody{
	padding:5px 0 5px 0;
	
	li{
		display: flex;
		justify-content: space-between;
		align-items: center;
		cursor:pointer;
	}
	li.active span {
		color:#409EFF;
	}
}
.suojin{
	padding: 0px 20px;
}
</style>