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

<!--
@ 作者: 秦东
@ 时间: 2023-07-04 14:51:04
@ 备注: 编辑矩阵
-->
<script lang='ts' setup>
import { editMatrixInfo } from '@/api/matrixapi/type'
import { editMatrixCont } from '@/api/matrixapi/index'

const props = defineProps({
	editShow:{
		type:Boolean,
		default:false
	},
	matrixcont:{
		type:Object,
		default(){
			return {}
		}
	},
	orgtree:{
		type:Object,
		default(){
			return {}
		}
	}
});
const emits = defineEmits(["update:editShow","restlist"]);	//父级元素
const editMatrixRef = ref(ElForm);	//添加矩阵
const editCont = reactive<editMatrixInfo>({
	id:0,
	name:"",
	center:"",
	org:""
})
const orgTreeProps ={
  children: 'child',
  label: 'name',
}	//行政组织树对照值
/**
 * 弹窗显示控制
 */
 const edit_is_Show = computed({
	get: () => props.editShow,
	set: (val) => {
		emits("update:editShow", val);
	},
});
const editLoading = ref(false)
/**
 * 表单验证规则
 */
 const editFormRules = reactive({
	org: [{ required: true, message: "请选择归属行政组织", trigger: "blur" }],	
	name: [{ required: true, message: "请输入矩阵名称", trigger: "blur" }]
});
/**
 * 初始化数据
 */
 function initData(){
	editCont.name = "";
	editCont.center = "";
	editCont.org = "";
	editLoading.value = false;
}
/**
 * 关闭弹窗
 */
function handleCloseAdd(){
	emits("update:editShow", false);
	initData()
}
/**
 * 提交数据
 */
function submitEditMatrix(){
	editLoading.value = true;
	editMatrixRef.value.validate((isValid: boolean) => {
		if (isValid) {
			editMatrixCont(editCont)
			.then(() => {
					ElMessage.success("编辑成功");
					handleCloseAdd();
					emits('restlist');
				})
				.finally(() => (editLoading.value = false));
		}else{
			editLoading.value = false;
		}
	});
}
/**
 * 监听数据
 */
 watch(() => props.editShow,() => {
	if(!props.editShow){
		initData();
	}else{
		editCont.id = props.matrixcont.id;
		editCont.name = props.matrixcont.name;
		editCont.center = props.matrixcont.center;
		editCont.org = props.matrixcont.org;
	}
 });

</script>
<template>
	<el-dialog v-model="edit_is_Show" custom-class="dialog_box" title="编辑矩阵"  :before-close="handleCloseAdd" width="400">
		<el-form
			ref="editMatrixRef"
			:model="editCont"
			:rules="editFormRules"
			label-width="140px"                                                                                                                                                        
		>
			<el-form-item label="矩阵名称" prop="name">
				<el-input v-model="editCont.name" placeholder="请输入矩阵名称" />
			</el-form-item>
			<el-form-item label="简介" prop="center">
				<el-input
					v-model="editCont.center"
					:autosize="{ minRows: 2, maxRows: 4 }"
					type="textarea"
					placeholder="请输入矩阵简介"
				/>
			</el-form-item>
			<el-form-item label="归属行政组织" prop="org">
				<el-tree-select
					ref="orgTreePostRef"
					v-model="editCont.org"
					placeholder="选择归属行政组织"
					:data="props.orgtree"
					node-key="id"
					check-strictly
					:props="orgTreeProps" 
					:render-after-expand="false"
					class="orgTree"
				/>
			</el-form-item>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button type="primary" :loading="editLoading" @click="submitEditMatrix" >确 定</el-button>
				<el-button @click="handleCloseAdd">取 消</el-button>
			</div>
		</template>
	</el-dialog>
</template>
<style  lang='scss' scoped>

</style>