ShutongInterconnectedChemicalCloudPlatform/src/components/DesignForm/aceDrawer.vue

<!--
@ 作者: 秦东
@ 时间: 2023-07-19 08:39:34
@ 备注: 抽屉
-->
<script lang='ts' setup>
import { ref, nextTick, watch, onMounted, onUnmounted } from 'vue'
import { aceEdit } from '@/api/DesignForm/utils'  
import { treeStruct } from '@/api/DesignForm/type' 

const props = withDefaults(
    defineProps<{
		data?:object
		modelValue: boolean
		// eslint-disable-next-line vue/require-default-prop
		title?: string
		direction?: 'rtl' | 'ltr'
		content: string
		id?: string
		// eslint-disable-next-line vue/require-default-prop
		codeType?: string
		data?: object
    }>(),
    {
		id: 'editJson',
		content: '',
		direction: 'ltr'
    }
)



const emits = defineEmits<{
    (e: 'beforeClose'): void
    (e: 'confirm', content: string): void
	(e: 'confirmTree', content: string): void
    (e: 'update:modelValue', val: boolean): void
}>()
const editor = ref<any>({})
const visible = ref(false)

const treeSelectAry = reactive<treeStruct[]>([])			//树形数据
const editTitleFormRef = ref(ElForm);	//编辑表单
let jibuqi = 0				//计步器计算最大值
const isTopHeader = ref(false) //是否为添加顶级树脂
const guodu =  ref<treeStruct>({})		//数据中转使用
const addIsShow = ref(false)			//添加数据	
const treeSelectTitle = reactive<treeStruct>({
	value: "1",
	label: ""
})	//编辑表格结构及数据
const butLoad = ref(false)			//按钮状态
/**
 * 表单验证规则
 */
const editTitleRules = reactive({
	label: [{ required: true, message: "请输入名称", trigger: "blur" }],	
});
watch(
    () => props.modelValue,
    (val: boolean) => {
		visible.value = val
		if (val) {
			initEditor()
		}
    }
)
const initEditor = () => {
    nextTick(() => {
      	editor.value = aceEdit(props.content, props.id, props.codeType)
    })
}
const dialogConfirm = () => {
    const editVal = editor.value.getValue()
    emits('confirm', editVal)
}
const drawerBeforeClose = () => {
    emits('update:modelValue', false)
    emits('beforeClose')
}
onMounted(() => {})
onUnmounted(() => {
    if (Object.keys(editor.value).length !== 0) {
		editor.value.destroy()
		editor.value.container.remove()
    }
})

/**
@ 作者: 秦东
@ 时间: 2024-09-27 16:03:26
@ 功能: 打开添加弹窗
*/
const pickAdd = (val:treeStruct) => {
	guodu.value = val
	isTopHeader.value = false
	addIsShow.value = true
}
/**
@ 作者: 秦东
@ 时间: 2024-09-27 16:06:41
@ 功能: 关闭弹窗
*/
const pickAddClose = () => {
	guodu.value  = {}
	treeSelectTitle.label = ""
	addIsShow.value = false
	butLoad.value = false
	editTitleFormRef.value.resetFields();
}
/**
@ 作者: 秦东
@ 时间: 2024-09-27 16:09:53
@ 功能: 添加顶级分类
*/
const addTopClass = () => {
	isTopHeader.value = true
	addIsShow.value = true
}
/**
@ 作者: 秦东
@ 时间: 2024-09-27 16:10:27
@ 功能: 确定添加分类
*/
const pickIsTrue = () => {
	butLoad.value = true
	editTitleFormRef.value.validate((isValid: boolean) => {
		if(isValid){
			jibuqi++
			if(isTopHeader.value){
				treeSelectAry.push({
					value: jibuqi,
					label: treeSelectTitle.label,
					children: []
				})
			}else{
				if(guodu.value.children){
					guodu.value.children.push({
						value: jibuqi,
						label: treeSelectTitle.label,
						children: []
					})
				}else{
					guodu.value.children=[
						{
							value: jibuqi,
							label: treeSelectTitle.label,
							children: []
						}
					]
				}
			}
			
			pickAddClose()
		}else{
			butLoad.value = false
		}
	})
}
/**
@ 作者: 秦东
@ 时间: 2024-09-27 08:38:35
@ 功能: 回填主表值
*/
const dialogConfirmTree = () => {

	let drawer = ({
		visible: false,
		type: '',
		title: '',
		codeType: '',
		direction: undefined, //弹出方向rtl / ltr
		callback: ''
	})

	emits('confirmTree', treeSelectAry)
	drawerBeforeClose()
}
/**
@ 作者: 秦东
@ 时间: 2024-09-27 13:51:31
@ 功能: 删除指定节点数据
*/
const pickDel = (val:treeStruct) => {
	console.log("要删除得节点-->",val.value)
	delDiGui(treeSelectAry,val)
		console.log("删除指定节点数据---结果-->",treeSelectAry)
}
/**
@ 作者: 秦东
@ 时间: 2024-09-27 14:13:23
@ 功能: 执行递归删除
*/
const delDiGui = (tree: treeStruct[],val:treeStruct) => {
	for (let i = 0; i < tree.length; i++) {
        const node = tree[i];
        if (node.value == val.value) {
            tree.splice(i, 1);
            return;
        }
        if (Array.isArray(node.children) && node.children.length) {
            return delDiGui(node.children, val);
        }
    }
}
</script>
<template>
	<el-drawer
		v-model="visible"
		size="60%"
		:title="title"
		:direction="direction as any"
		class="ace-dialog"
		:append-to-body="true"
		:before-close="drawerBeforeClose"
	>
		<template #header>
			<div v-html="title"></div>
		</template>
		<div v-if="['cascader', 'treeSelect'].includes(props.data.type)">{{props.data}}
			<el-table
				:data="treeSelectAry"
				row-key="value"
				default-expand-all
			>
				<el-table-column prop="label" label="名称" />
				<el-table-column  label="操作" width="200" align="center">
					<template #header>
						<el-button type="success" @click="addTopClass">添加顶级分类</el-button>
					</template>
					<template #default="scope">
						<el-button-group>
							<el-button text type="success" @click="pickAdd(scope.row)">添加</el-button>
							<el-button text type="warning" @click="pick(scope.row)">修改</el-button>
							<el-button text type="danger" @click="pickDel(scope.row)">删除</el-button>
						</el-button-group>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div  v-else :id="id"></div>
		<div class="dialog-footer">
			<el-button v-if="['cascader', 'treeSelect'].includes(props.data.type)" type="primary" size="small" @click="dialogConfirmTree">
				确定
			</el-button>
			<el-button v-else  type="primary" size="small" @click="dialogConfirm">
				确定
			</el-button>
		</div>

		<el-dialog
			v-model="addIsShow"
			title="编辑"
			width="500"
			:before-close="pickAddClose"
		>
			<el-form ref="editTitleFormRef" :rules="editTitleRules" :model="treeSelectTitle" label-width="auto" style="max-width: 600px">
				<el-form-item label="名称：" prop="label">
					<el-input v-model="treeSelectTitle.label" />
				</el-form-item>
			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="pickAddClose">取消</el-button>
					<el-button v-loading="butLoad" type="primary" @click="pickIsTrue">确定</el-button>
				</div>
			</template>
		</el-dialog>

	</el-drawer>
</template>
<style  lang='scss' scoped>
#editJson, #editJsonCopy {
    width: 100%;
    height: calc(100vh - 90px);
}
</style>