hxgksystemapp/src/views/sysworkflow/codepage/datatablestructure.vue

<!--
@ 作者: 秦东
@ 时间: 2023-09-13 10:43:12
@ 备注: 数据结构表单
-->
<script lang='ts' setup>
import { publicFormTableStruct,formTabelStruct } from "@/api/DesignForm/type";
import { callBackFormTableVersion,haveFormTabelcont,optimizeOrRepairFormTable,haveFormTablelist } from '@/api/DesignForm/requestapi'
//引入页面
import SetupField from '@/views/sysworkflow/codepage/setupfield.vue'


import {
	Ticket,
	Finished
} from '@element-plus/icons-vue'

const props = defineProps({
	isshow:{
		type:Boolean,
		default:true
	},
	formcont:{
		type:Object,
		default(){
			return {}
		}
	},
})
const emits = defineEmits(["update:isshow"]);
const isShow =   computed({
	get: () => props.isshow,
	set: (val) => {
		emits("update:isshow", val);
	},
});
//字段列表
const formTableFieldList = ref<formTabelStruct[]>()
const versionIndex = ref("")	//当前版本
const formTableIndex = ref("")	//当前表单
const versionAry = ref<publicFormTableStruct[]>([])		//版本列表
const formTableAry = ref<publicFormTableStruct[]>([])	//表单列表
const isEditForm = ref(false)
const formTableCont = ref<publicFormTableStruct>()	//表单内容
const isEditFormField = ref(false)
const tableLoading  = ref(false)
//选择版本
const clickVersion = (val:any) =>{
	// console.log("切换版本",val,versionIndex.value)
	formTableAry.value.slice(0,formTableAry.value.length)
	// console.log("舒适化",formTableAry.value)
	haveFormTablelist({id:val.toString()})
		.then(({data})=>{
			// console.log("选择版本",data,formTableAry.value)
			formTableAry.value = data
			if(data.length > 0){
				data.forEach( item =>{
					if(item.ismain){
						formTableIndex.value = item.name
					}
				})
			}
		})
		.finally(()=>{
			getTableFieldList(versionIndex.value,formTableIndex.value)
		})
}
//选择表单
const clickFormTable = (val:any) =>{
	// console.log("切换表单",val,formTableIndex.value)
	getTableFieldList(versionIndex.value,val)
}
//获取版本及表列表
const getVersionFormTable = () =>{
	callBackFormTableVersion({id:props.formcont.id})
		.then(({ data }) =>{
			// console.log("获取版本及表列表--->",data)
			versionAry.value = data.version
			formTableAry.value = data.tablelist
			if(data.version){
				if(data.version.length > 0){
					data.version.forEach( item =>{
						if(item.ismain){
							versionIndex.value = item.versionid
						}
					})
				}
			}
			if(data.tablelist){
				if(data.tablelist.length > 0){
					data.tablelist.forEach( item =>{
						if(item.ismain){
							formTableIndex.value = item.name
						}
					})
				}
			}
		})
		.finally(() =>{
			// console.log("初始化数据结构-->",formTableIndex.value,versionIndex.value)
			getTableFieldList(versionIndex.value,formTableIndex.value)
		});
}
function getTableFieldList(id:string,name:string){
	tableLoading.value = true;
	haveFormTabelcont({"id":id, "name":name})
				.then(({data}) =>{
					// console.log("初始化数据结构-->",data)
					formTableFieldList.value = data.filedlist
					isEditForm.value = data.isedit
				})
				.finally(()=>{
					tableLoading.value = false;
				})

}
//监听
watch(()=>props.isshow,()=>{
	if(props.isshow){
		getVersionFormTable()
	}
})
//编辑字段
const editCustomerFormField = (val:any) =>{
	// optimizeOrRepairFormTable()
	formTableCont.value = val
	isEditFormField.value = true
}
//优化修复表单
const optimizeOrRepairTable = (val:number) =>{
	optimizeOrRepairFormTable({name:formTableIndex.value,optimizerender:val})
		.then((data:any)=>{
			// console.log("表单处理",data,formTableIndex.value,val)
			ElMessage.success(data.msg || '加载异常')
		})
}
//刷新表单
const refreshTable = () =>{
	getTableFieldList(versionIndex.value,formTableIndex.value)
}
</script>
<template>
	<el-dialog v-model="isShow" :title="'<'+props.formcont.name+'>数据结构'" width="70%" draggable>
		<div class="common-layout">
			<el-container>
				<el-main style="padding: 0;">
					<!-- 表结构 -->
					<el-tabs v-model="formTableIndex" class="form_version" style="height: 40px;"  @tab-change="clickFormTable">
						<el-tab-pane v-for="item in formTableAry" :key="item.name" :name="item.name" >
							<template #label>
								<el-icon v-if="item.ismain"><Management /></el-icon>
								<el-icon v-else><Memo /></el-icon>
								{{ item.name }}
							</template>
						</el-tab-pane>
					</el-tabs>
					<el-table v-loading="tableLoading" :data="formTableFieldList" border  height="460" style="width: 100%;">
						<el-table-column fixed prop="field" label="字段" width="120" />
						<el-table-column prop="type" label="类型"  width="120"  />
						<el-table-column prop="collation" label="排序规则"  width="180"  />
						<el-table-column prop="attribute" label="属性"  width="100"  />
						<el-table-column prop="null" label="空" align="center"  />
						<el-table-column prop="default" label="默认值"  align="center"  />
						<el-table-column prop="extra" label="补充信息" width="200" />	
						<el-table-column fixed="right" prop="comment" label="备注"  width="200" />
						<el-table-column fixed="right" v-if="isEditForm" label="操作" align="center">
							<template #default="scope">
								<el-button			
									type="primary"
									link
									size="small"
									@click.stop="editCustomerFormField(scope.row)"
								>
									<i-ep-edit />编辑
								</el-button>
							</template>
						</el-table-column>					
					</el-table>

					<el-row style="margin-top: 10px;margin-bottom: 10px;">
						<el-col :span="24">
							<el-button :icon="Finished" type="primary" @click.stop="optimizeOrRepairTable(1)">优化表单</el-button>
    						<el-button :icon="Ticket" type="warning" @click.stop="optimizeOrRepairTable(2)">修复表单</el-button>
						</el-col>
					</el-row>
					
				</el-main>
				<el-aside width="100px">
					<!-- 版本 -->
					<el-tabs v-model="versionIndex" tab-position="right" style="height: 500px;" @tab-change="clickVersion">
						<el-tab-pane v-for="item in versionAry" :key="item.versionid" :label="item.name" :name="item.versionid">
							<template #label>
								<div class="version_field" title="ConfigConfigConfig">
									{{ item.name }}
								</div>
							</template>
						</el-tab-pane>
					</el-tabs>
				</el-aside>
			</el-container>
		</div>
		<SetupField v-model:isEditFormField="isEditFormField" :formtablecont="formTableCont" :formname="formTableIndex" @refreshtable="refreshTable" />
	</el-dialog>
</template>
<style  lang='scss'>
.form_version{
	height: 500px;
	
}
.form_table{
	height: 500px;
	width: 100%;
	overflow-y: auto;
}
.form_version  > .el-tabs__content{
	padding: 0;
}
.version_field{
	width:60px;
	
	// white-space: normal; 
	// word-break: break-word;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.but_clic{
	margin-top: 10px;
}
</style>