hxgksystemapp/src/views/sysworkflow/lowcodepage/pageList.vue

<!--
@ 作者: 秦东
@ 时间: 2024-03-18 11:32:14
@ 备注: 自定义表单列表
-->
<script lang='ts' setup>
import { json2string,objToStringify,string2json,stringToObj } from '@/utils/DesignForm/form'
import { analysisForm,setFlowFormKeyPower } from '@/api/workflowapi/index'
import { gainFormTableField } from '@/api/DesignForm/requestapi'
import { formTableField,formTabelStruct } from "@/api/DesignForm/type";

import tempOtherUnit from '@/components/DesignForm/pageList/types'

import PageListHeadTools from '@/views/sysworkflow/lowcodepage/pageListHeadTools.vue'



const props = defineProps({
	formKey:{
		type:String,
		default:""
	},
	formVersion:{
		type:String,
		default:""
	},
	tabsActive:{
		type:Number,
		default:1
	},
	state:{
		type:Object,
		default(){
			return {}
		}
	}
});

const emits = defineEmits<{
    (e: 'update:state', val: formStruct): void
	(e: 'update:formKey', val: string): void
	(e: 'update:formVersion', val: string): void
	(e: 'judgeFlowIsEdit', val: boolean): void
	(e: 'runNextWindows', val: number): void
	(e: 'closeFormPage'): void
}>()

const statePro =  computed({
	get() {
		return props.state
	},
	set(val: formStruct) {
		emits('update:state', val)
	}
});

const formTableActive = ref(1)
const pageLoading = ref(false)
//自定义列表结构
const state = reactive({
    tableData: {
      // tableProps: {}, //表格所有参数
      columns: [],
      config: {}
    },
    searchData: {},
    loading: false,
    attrObj: {},
    config: {},
    tagList: {},
    formId: props.formKey || '',
    formList: [], // 所有可选表单数据源
    name: '',
    treeData: {}, // 左侧树相关
    previewVisible: false,
    tabsName: 'second',
    formFieldList: [], // 表单数据源所有可选字段
    dict: {},
    refreshTable: true
})

const kaif = (id: number, callback?: (list: any) => void) => {
	// const content = stringToObj(props.state.formData)
	console.log('获取当前数据下所有字段',statePro.value.formData)
	filterFiled(statePro.value.formData)
	callback && callback(statePro.value.formData.list)

	console.log('获取当前数据下所有字段--->',state.formFieldList)
}
const filterFiled = (obj: any) => {
    obj?.list.forEach((item: FormList) => {
      if (item.type === 'grid' || item.type === 'tabs') {
        item.columns.forEach((col: FormList) => {
          filterFiled(col)
        })
      } else if (['card', 'div'].includes(item.type)) {
        filterFiled(item)
      } else if (!excludeType.includes(item.type) && item.name) {
        state.formFieldList.push({
          prop: item.name,
          label: item.formItem?.label,
          help: item.config.help || ''
        })
      }
    })
  }
	const excludeType = [
    'txt',
    'title',
    'table',
    'component',
    'upload',
    'button',
    'tinymce',
    'inputSlot',
    'flex'
  ]

const powerUnitAry = ref<any>({
	nodeKey:"",
	recUnitAry:{
		masterUnitList:[],
		sunUnitList:[],
		unitAllKey:[],
		unitAllState:[]
	}
})
const formTableField = reactive<formTableField>({})
/**
@ 作者: 秦东
@ 时间: 2024-03-13 08:24:54
@ 功能: 解析表单
*/
const jieForm = () => {
	// analysisForm({nodeKey:"begin",nodeJson:JSON.stringify(statePro.value.formData)})
	// 	.then((data)=>{
	// 		if(data.code == 0){
	// 			powerUnitAry.value = data.data
	// 		}
	// 	})
	if(props.formKey != ""){
		gainFormTableField({id:props.formKey.toString()})
			.then((data)=>{
				console.log('解析表单--->',data)
				formTableField.masterTable=data.data.masterTable
				formTableField.sunTable=data.data.sunTable
			})
	}
	
}
const handleSelectionChange = (val: User[]) => {
	console.log('表单选中--->',val)
}
// watch(()=>statePro.value,()=>{
// 	jieForm()
// },
// {
// 	deep: true
// })
watch(()=>props.tabsActive,(val:number)=>{
	if(val == 3){
		jieForm()
	}
})
onMounted(()=>{
	jieForm()
})
</script>
<template>
	<div ref="container" class="design-containers design-table" v-loading="pageLoading">
		<!-- <div class="components-list">
			<el-divider content-position="left">表格列字段</el-divider>
			<el-table
				ref="multipleTableRef"
				:data="powerUnitAry.recUnitAry.masterUnitList"
				style="width: 100%"
				@selection-change="handleSelectionChange"
			>
				<el-table-column type="selection" width="30" />
				<el-table-column label="栏目">
					<template #default="scope">{{ scope.row.name }}</template>
				</el-table-column>
			</el-table>
		</div> -->
		<div class="main-body">
			<div class="header">
				<div class="field">
				</div>
				<PageListHeadTools />
			</div>

		</div>
		<div class="sidebar-tools">
			<el-tabs ref="multipleTableRef" v-model="formTableActive" class="form_tabs" @tab-click="handleClick">
				<el-tab-pane label="字段设置" :name="1">
					<el-divider content-position="left">查询设置</el-divider>
					<el-divider content-position="left">列表字段</el-divider>
					<el-table :data="formTableField.masterTable" border  style="width: 100%">
						<el-table-column fixed type="selection" width="40"  align="center" />
						<el-table-column prop="name" label="字段" />
						<el-table-column fixed="right" label="设置" width="55" align="center">
							<template #default="scope">
								<el-icon title="设置"><Setting /></el-icon>
							</template>
						</el-table-column>
					</el-table>
				</el-tab-pane>
				<el-tab-pane label="列表设置" :name="2">
					<el-divider content-position="left">批量操作</el-divider>
					<el-divider content-position="left">功能按钮</el-divider>
				</el-tab-pane>
			</el-tabs>
			<!-- {{props.formKey}}
			<br>
			{{props.formVersion}}
			<br>
			{{formTableField}} -->
		</div>
	</div>
</template>
<style  lang='scss' scoped>
.design-containers{
	display: flex;
    background-color: #FFFFFF;
	margin: 0;
	.components-list{
		width: 200px;
		padding:  0;
		overflow-y: auto;
		height: calc(100vh - 40px);
		position: relative;
		overflow-x: hidden;
		border-right: 1px solid #e0e0e0;
	}
}
.form_tabs  > .el-tabs__content{
	padding: 0;
}
</style>