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.
306 lines
8.1 KiB
306 lines
8.1 KiB
<!--
|
|
@ 作者: 秦东
|
|
@ 时间: 2023-07-12 10:58:26
|
|
@ 备注: 快速选择表单字段
|
|
-->
|
|
<script lang='ts' setup>
|
|
import type { TabsPaneContext } from 'element-plus'
|
|
|
|
import { FormData,FormList } from '@/api/DesignForm/types'
|
|
import { stringToObj } from '@/utils/DesignForm/form'
|
|
import { jsonParseStringify } from '@/utils/DesignForm'
|
|
import controlListData from '@/components/DesignForm/assembly'
|
|
import { getRequest } from '@/api/DesignForm'
|
|
import Draggable from 'vuedraggable-es'
|
|
import UseTemplate from './template.vue'
|
|
|
|
import { customerFormVersionCont } from '@/api/DesignForm/type'
|
|
|
|
import '@/assets/iconfont/iconfont.css'
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
// eslint-disable-next-line vue/require-default-prop
|
|
formId?: number | string,
|
|
// eslint-disable-next-line vue/require-default-prop
|
|
versioncont?:customerFormVersionCont[],
|
|
versionid:number | string,
|
|
}>(),
|
|
{}
|
|
)
|
|
// 默认搜索允许显示的字段
|
|
const searchField = [
|
|
'input',
|
|
'radio',
|
|
'checkbox',
|
|
'select',
|
|
'datePicker',
|
|
'timePicker',
|
|
'inputNumber',
|
|
'cascader',
|
|
'component',
|
|
'button'
|
|
]
|
|
const designType = inject('formDesignType') as string //注入一个由祖先组件或整个应用 (通过 app.provide()) 提供的值。
|
|
const formDataList = ref<any[]>([])
|
|
const isSearch = computed(() => {
|
|
return designType === 'search'
|
|
})
|
|
const emits = defineEmits(["clickCheck","click","update:versionid","editversionstaus"]);
|
|
// 筛选设计时左则勾选已有表单字段
|
|
const selectChange = (val: any,obj: FormList) => {
|
|
if (val) {
|
|
// 勾选时追加
|
|
const newObj = jsonParseStringify(obj)
|
|
delete newObj.rules
|
|
delete newObj.customRules
|
|
emits('clickCheck', newObj)
|
|
}
|
|
}
|
|
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 useTemplateEl = ref()
|
|
const useTemplateClick = () => {
|
|
useTemplateEl.value.open()
|
|
}
|
|
const useTemplateSelect = (data: FormData) => {
|
|
console.log("使用模版",data);
|
|
emits('click', data)
|
|
}
|
|
const clone = (origin: any) => {
|
|
// console.log("All--->克隆选中的组件数据结构",origin)
|
|
return jsonParseStringify(origin)
|
|
}
|
|
//数据监听
|
|
watch(
|
|
() => props.formId,
|
|
(val: any) => {
|
|
if (val && isSearch.value) {
|
|
getFormField(val)
|
|
}
|
|
}
|
|
)
|
|
|
|
// 加载当前列表所属的表单，从表单中提取可用于搜索的字段
|
|
const getFormField = (formId: number) => {
|
|
getRequest('designById', { id: formId }).then((res: any) => {
|
|
const data = stringToObj(res.data.data)
|
|
if (data && data.list) {
|
|
forEachGetData(data.list)
|
|
}
|
|
})
|
|
}
|
|
const forEachGetData = (data: FormList[]) => {
|
|
data.forEach((item: any) => {
|
|
if (item.type === 'grid' || item.type === 'tabs') {
|
|
item.columns.forEach((col: any) => {
|
|
forEachGetData(col.list)
|
|
})
|
|
} else if (item.type === 'card') {
|
|
forEachGetData(item.list)
|
|
} else if (searchField.includes(item.type) && item.type !== 'button') {
|
|
formDataList.value.push(item)
|
|
}
|
|
})
|
|
}
|
|
|
|
//当前版本
|
|
const activeName = ref<any>(6)
|
|
//切换版本
|
|
const handleTabsClick = (val:any) =>{
|
|
// console.log("切换版本",val)
|
|
emits("update:versionid",val)
|
|
|
|
|
|
}
|
|
watch(()=>props.versioncont,(val: any)=>{
|
|
// console.log("versioncont---版本-->",val)
|
|
if(val.length>0){
|
|
val.forEach((item:any,index:number) => {
|
|
if(item.status == 1){
|
|
activeName.value = item.id
|
|
}
|
|
});
|
|
}
|
|
|
|
// console.log("选定版本------->",activeName.value)
|
|
})
|
|
//编辑状态
|
|
const setupStatus = (val:any) =>{
|
|
emits("editversionstaus",val.id)
|
|
}
|
|
</script>
|
|
<template>
|
|
<div class="components-list">
|
|
<div v-if="isSearch && formDataList?.length">
|
|
<div class="title">快速选择表单字段</div>
|
|
<div class="content">
|
|
<el-checkbox
|
|
v-for="item in formDataList"
|
|
:key="item.name"
|
|
@change="selectChange($event,item)"
|
|
>
|
|
{{ item.item?.label }}
|
|
</el-checkbox>
|
|
</div>
|
|
</div>
|
|
<!--组件主体-->
|
|
<div v-for="(list, index) in controlList" :key="index">
|
|
<div class="title">
|
|
{{ list.title }}
|
|
<div
|
|
v-if="index === 0 && !isSearch"
|
|
class="template"
|
|
@click="useTemplateClick"
|
|
>
|
|
使用模板
|
|
</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>
|
|
<use-template
|
|
v-if="!isSearch"
|
|
ref="useTemplateEl"
|
|
@click="useTemplateSelect"
|
|
/>
|
|
|
|
<div>版本</div>
|
|
{{props.formId}}
|
|
<el-tabs v-model="activeName" :stretch="true" class="demo-tabs" @tab-change="handleTabsClick" >
|
|
<el-tab-pane v-for="(item,index) in props.versioncont" :key="index" :label="'V'+item.version" :name="item.id" class="tab_pane_body">
|
|
<el-button v-if="item.status!=1" type="primary" round @click="setupStatus(item)">启用</el-button>
|
|
<el-button v-if="item.status==1" type="warning" round @click="setupStatus(item)">使用中</el-button>
|
|
</el-tab-pane>
|
|
|
|
</el-tabs>
|
|
<div style="display:none">
|
|
<i class="icon-mouse"></i>
|
|
<i class="icon-hand"></i>
|
|
<i class="icon-lock-open"></i>
|
|
<i class="icon-lock"></i>
|
|
<i class="icon-eye-close"></i>
|
|
<i class="icon-border"></i><br>
|
|
<i class="icon-text2"></i>
|
|
<i class="icon-stext"></i>
|
|
<i class="icon-apply"></i>
|
|
<i class="icon-work"></i>
|
|
<i class="icon-todo"></i>
|
|
<i class="icon-applyed"></i>
|
|
<i class="icon-done"></i><br>
|
|
<i class="icon-button"></i>
|
|
<i class="icon-design"></i>
|
|
<i class="icon-data-source"></i>
|
|
<i class="icon-sp"></i>
|
|
<i class="icon-cs"></i>
|
|
<i class="icon-branch"></i>
|
|
<i class="icon-doc"></i><br>
|
|
<i class="icon-sys"></i>
|
|
<i class="icon-creat"></i>
|
|
<i class="icon-data"></i>
|
|
<i class="icon-menu"></i>
|
|
<i class="icon-user"></i>
|
|
|
|
<i class="icon-form"></i>
|
|
<i class="icon-list"></i>
|
|
<i class="icon-log"></i><br>
|
|
<i class="icon-dict"></i>
|
|
<i class="icon-post"></i>
|
|
<i class="icon-role"></i>
|
|
<i class="icon-log2"></i>
|
|
<i class="icon-tool"></i>
|
|
<i class="icon-bar"></i>
|
|
<i class="icon-pie"></i>
|
|
<i class="icon-line"></i>
|
|
<i class="icon-tree2"></i><br>
|
|
<i class="icon-flex"></i>
|
|
<i class="icon-div"></i>
|
|
<i class="icon-tree"></i>
|
|
<i class="icon-time"></i>
|
|
<i class="icon-tinymce"></i>
|
|
<i class="icon-rate"></i>
|
|
<i class="icon-slider"></i>
|
|
<i class="icon-divider"></i>
|
|
<i class="icon-color"></i>
|
|
<i class="icon-import"></i><br>
|
|
<i class="icon-image"></i>
|
|
<i class="icon-card"></i>
|
|
<i class="icon-help"></i>
|
|
<i class="icon-table"></i>
|
|
<i class="icon-component"></i>
|
|
|
|
|
|
<i class="icon-link"></i>
|
|
<i class="icon-cascader"></i>
|
|
<i class="icon-number"></i>
|
|
<i class="icon-title"></i>
|
|
<i class="icon-tabs"></i>
|
|
<i class="icon-close"></i><br>
|
|
<i class="icon-plus"></i>
|
|
<i class="icon-arrow"></i>
|
|
<i class="icon-check"></i>
|
|
<i class="icon-vue"></i>
|
|
<i class="icon-switch"></i>
|
|
<i class="icon-save"></i>
|
|
<i class="icon-move"></i>
|
|
<i class="icon-clone"></i>
|
|
<i class="icon-del"></i>
|
|
<i class="icon-eye"></i>
|
|
<i class="icon-json"></i><br>
|
|
<i class="icon-grid"></i>
|
|
<i class="icon-text"></i>
|
|
<i class="icon-date"></i>
|
|
<i class="icon-input"></i>
|
|
<i class="icon-checkbox"></i>
|
|
<i class="icon-textarea"></i>
|
|
<i class="icon-radio"></i>
|
|
<i class="icon-select"></i>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style lang='scss' scoped>
|
|
.tab_pane_body{
|
|
text-align: center;
|
|
|
|
}
|
|
.fontIcon{
|
|
i{
|
|
padding: 4px 0px 0 0px;
|
|
}
|
|
}
|
|
</style>
|
|
|