You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
142 lines
3.1 KiB
142 lines
3.1 KiB
2 years ago
|
<!--
|
||
|
|
@ 作者: 秦东
|
||
|
|
@ 时间: 2024-05-09 15:12:45
|
||
|
|
@ 备注: 自定义表单组件页面(App专用)
|
||
|
|
-->
|
||
|
|
<script lang='ts' setup>
|
||
|
|
import controlListData from '@/components/DesignForm/assembly'
|
||
|
|
import Draggable from 'vuedraggable-es'
|
||
|
|
import '@/assets/iconfont/iconfont.css'
|
||
|
|
|
||
|
|
//引入页面
|
||
|
|
import FormVersion from '@/components/DesignForm/formVersion.vue';
|
||
|
|
|
||
|
|
|
||
|
|
const props = withDefaults(
|
||
|
|
defineProps<{
|
||
|
|
tableKey?: number | string,
|
||
|
|
signCode?: number | string,
|
||
|
|
}>(),
|
||
|
|
{}
|
||
|
|
)
|
||
|
|
const designType = inject('formDesignType') as string //注入一个由祖先组件或整个应用 (通过 app.provide()) 提供的值。
|
||
|
|
// 默认搜索允许显示的字段
|
||
|
|
const searchField = [
|
||
|
|
'input',
|
||
|
|
'radio',
|
||
|
|
'checkbox',
|
||
|
|
'select',
|
||
|
|
'datePicker',
|
||
|
|
'timePicker',
|
||
|
|
'inputNumber',
|
||
|
|
'cascader',
|
||
|
|
'component',
|
||
|
|
'button'
|
||
|
|
]
|
||
|
|
/**
|
||
|
|
@ 作者: 秦东
|
||
|
|
@ 时间: 2024-05-09 10:58:56
|
||
|
|
@ 功能: 表单组件数据
|
||
|
|
*/
|
||
|
|
const controlList = computed(() => {
|
||
|
|
if (designType === 'search') {
|
||
|
|
// 只返回基础字段
|
||
|
|
const temp: any = []
|
||
|
|
controlListData.forEach((item: any) => {
|
||
|
|
if (item.children) {
|
||
|
|
const filter = item.children.filter((ch: any) => {
|
||
|
|
return searchField.includes(ch.type)
|
||
|
|
})
|
||
|
|
if (filter && filter.length) {
|
||
|
|
temp.push({ title: item.title, children: filter })
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
return temp
|
||
|
|
} else {
|
||
|
|
return controlListData
|
||
|
|
}
|
||
|
|
})
|
||
|
|
const tableVersion = ref() //版本显示器
|
||
|
|
|
||
|
|
const emits = defineEmits<{
|
||
|
|
(e: 'versionUpdateForm', value: string): void
|
||
|
|
}>()
|
||
|
|
/**
|
||
|
|
@ 作者: 秦东
|
||
|
|
@ 时间: 2024-05-09 11:36:59
|
||
|
|
@ 功能: 启用和禁用版本
|
||
|
|
*/
|
||
|
|
const enableOrDisable = (val?:any) =>{
|
||
|
|
console.log("启用和禁用版本",val)
|
||
|
|
emits('versionUpdateForm', val)
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
@ 作者: 秦东
|
||
|
|
@ 时间: 2024-05-09 11:40:15
|
||
|
|
@ 功能: 打开版本选择页面
|
||
|
|
*/
|
||
|
|
const useVersionClick = () => {
|
||
|
|
tableVersion.value.open()
|
||
|
|
}
|
||
|
|
const activities = [
|
||
|
|
{
|
||
|
|
content: 'Event start',
|
||
|
|
timestamp: '2018-04-15',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
content: 'Approved',
|
||
|
|
timestamp: '2018-04-13',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
content: 'Success',
|
||
|
|
timestamp: '2018-04-11',
|
||
|
|
},
|
||
|
|
]
|
||
|
|
</script>
|
||
|
|
<template>
|
||
|
|
<div class="components-list">
|
||
|
|
<div v-for="(list, index) in controlList" :key="index">
|
||
|
|
<div class="title">
|
||
|
|
{{ list.title }}
|
||
|
|
<div
|
||
|
|
class="template"
|
||
|
|
@click="useVersionClick"
|
||
|
|
>
|
||
|
|
版本
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<draggable
|
||
|
|
v-model="list.children"
|
||
|
|
tag="ul"
|
||
|
|
:group="{ name: 'form', pull: 'clone', put: false }"
|
||
|
|
ghost-class="ghost"
|
||
|
|
:sort="false"
|
||
|
|
:clone="clone"
|
||
|
|
item-key="key123"
|
||
|
|
>
|
||
|
|
|
||
|
|
<template #item="{ element }">
|
||
|
|
<li class="fontIcon" :class="[element.type]">
|
||
|
|
<i v-if="element.iconFont==''" :class="`icon-${element.icon}`"></i>
|
||
|
|
<i v-if="element.iconFont!=''" :class="`fa ${element.iconFont} `"></i>
|
||
|
|
<span :title="element.label">{{ element.label }}</span>
|
||
|
|
</li>
|
||
|
|
</template>
|
||
|
|
</draggable>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<FormVersion ref="tableVersion" :table-key="props.tableKey" :sign-code="props.signCode" @enableOrDisable="enableOrDisable" />
|
||
|
|
</template>
|
||
|
|
<style lang='scss' scoped>
|
||
|
|
.tab_pane_body{
|
||
|
|
text-align: center;
|
||
|
|
|
||
|
|
}
|
||
|
|
.fontIcon{
|
||
|
|
i{
|
||
|
|
padding: 4px 0px 0 0px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|