herenshan112
/
ShutongInterconnectedChemicalCloudPlatform
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
数通互联化工云平台
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.
344 Commits
62 Branches
0 Tags
99 MiB
Tree: cf73730339
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'cf73730339'
${ noResults }
ShutongInterconnectedChemic.../src/components/DesignForm/formControlAttr.vue

4305 lines
174 KiB
Raw Normal View History

初始化数据
1 year ago
<!--
@ 作者: 秦东
@ 时间: 2023-08-28 08:31:58
@ 备注:
-->
<script lang='ts' setup>
import { reactive, computed, toRefs, ref, watch, inject } from 'vue'
import { getRequest } from '@/api/DesignForm'
import { useDesignFormStore } from '@/store/DesignForm/designForm'
import validate from './validate'
import { ElMessage } from 'element-plus'
import { formatNumber } from '@/api/DesignForm/utils'
import { PublicAtrr } from '@/api/DesignForm/types'
import { chineseToPinyin,customerFormGroupList } from '@/api/DesignForm/requestapi'
import request from '@/utils/request';
//数学计算公式编辑器
import MathFormula from '@/components/DesignForm/math/mathFormula.vue'
import { uploadUrl } from '@/api/DesignForm'
import { UploadFilled } from '@element-plus/icons-vue'
import { UploadFile, UploadFiles } from 'element-plus/es/components/upload/src/upload';
import type Node from 'element-plus/es/components/tree/src/model/node'
//样式布局
import LayoutPage from '@/components/DesignForm/layoutPage/index.vue'
import { Plus } from '@element-plus/icons-vue'
多选框组新增拖动排序功能---单页面表单
1 year ago
import Draggable from 'vuedraggable-es'
初始化数据
1 year ago
const props = withDefaults( //接收父级参数
defineProps<{
formData: any
formList: any
formConfig: any
formOtherData: any
customerformid: number | string,
formInfo: any
}>(),
{
formConfig: () => {
return {}
},
formOtherData: () => {
// 其他不需要保存在formData里的数据
return {}
}
}
)
const mathBoxShow = ref(false)
//注册自定义事件
const emits = defineEmits<{
(e: 'openDialog', data: any): void
(e: 'update:formOtherData', data: any): void
(e: 'videoMsgChange', data: VideoMsg): void
(e: 'formNameChange', data: any): void
//(e: 'update:formData', data: any): void
//(e: 'update:formConfig', data: any): void
}>()
const { formConfig, formData } = toRefs(props)
const store = useDesignFormStore() as any
const controlData = computed(() => {
// console.log("注册自定义事件----------------->",props.formInfo)
// console.log("注册自定义事件--------1--------->",store.controlAttr)
return store.controlAttr
})
//获取组件样式Demo
const controlDataStyls = computed(() => {
return store.controlAttr.styles
})
const dataSourceOption = ref([])
const designType = inject('formDesignType')
const state = reactive({
dataSourceList: [],
customRulesList: [
...validate,
{
type: 'rules',
label: '自定义正则'
},
{
type: 'methods',
label: '自定义方法'
}
], // 自定义校验规则
isSearch: designType === 'search',
tooltip: {
css: '当前表单应用页的样式，类似于.vue文件中的style scoped中的样式',
dict: '数据字典，用于匹配多选组、下拉选择等，提供动态获取Options接口字典数据，一般不设置，从接口dict获取。json格式："sex":{"0":"男","1":"女"}',
rules:
"可参考UI组件表单校验，<a href='https://element-plus.gitee.io/zh-CN/component/form.html#%E8%A1%A8%E5%8D%95%E6%A0%A1%E9%AA%8C' target='_blank' style='color:red'>详情点击</a>",
props: '可添加当前组件所有prop属性及事件方法'
},
tabsName: 'second',
numberRulesList:[
{
type: 'time',
label: '时间',
msg:'请选择时间格式'
},
{
type: 'text',
label: '自定义字符',
msg:'请输入自定义字符'
},
{
type: 'serialnumber',
label: '流水序号',
msg:'流水号起始值'
},
{
type: 'randomnumber',
label: '随机数',
msg:'请输入随机数位数'
}
]
})
const formAttr = computed(() => {
const isSearch = state.isSearch
return [
{
label: '表单名称',
placeholder: '用于保存的表单名称',
value: props.formOtherData.formName,
key: 'formName',
hide: isSearch
},
{
label: '数据源',
placeholder: '请选择数据源',
value: formatNumber(props.formOtherData.source),
type: 'select',
options: dataSourceOption.value,
key: 'source',
hide: isSearch || !dataSourceOption.value?.length,
clearable: true
},
{
label: '表单标识',
value: formData.value.name,
placeholder: '表单唯一标识，可为空',
key: 'name',
hide: isSearch
}
// {
// label: '表单标签宽度',
// value: formData.value.labelWidth,
// placeholder: '表单label宽，如180px',
// key: 'labelWidth'
// },
// {
// label: '表单样式名称',
// value: formData.value.class,
// placeholder: '额外添加的表单class类名',
// key: 'class',
// type: 'select',
// options: [
// { label: '无样式', value: '',name:'',id:'' },
// { label: '每行两列', value: 'form-row-2',name:'',id:'' },
// { label: '每行三列', value: 'form-row-3',name:'',id:'' },
// { label: '每行四列', value: 'form-row-4',name:'',id:'' }
// ],
// hide: isSearch,
// clearable: true
// },
// {
// label: '字段名后添加冒号',
// value: formData.value.showColon,
// key: 'showColon',
// type: 'switch'
// },
// {
// label: '组件尺寸',
// value: formData.value.size,
// type: 'select',
// key: 'size',
// options: [
// { label: 'large', value: 'large',name:'',id:'' },
// { label: 'default', value: 'default',name:'',id:'' },
// { label: 'small', value: 'small',name:'',id:'' }
// ]
// }
/*{
label: '筛选条件展开/收起',
value: formConfig.value.expand,
type: 'switch',
path: 'config',
key: 'expand',
hide: !isSearch
}*/
]
})
const attrList = computed(() => {
// console.log("controlData.value-1-->",controlData.value)
if (Object.keys(controlData.value).length) {
const {
control = {},
type,
name,
config = {},
item = {},
attr = {},
selectvalue = "default",
mathFormula = {}
}: { control: any;type:any;name:any;item:any;attr:any; config: any,selectvalue:any,mathFormula:any } = controlData.value
111
1 year ago
// console.log("controlData.value--->",controlData.value)
初始化数据
1 year ago
// console.log("controlData.value-1-->",control,selectvalue)
let columnIndex = false // 是否显示序号列
if (type === 'table') {
// 表格时处理
const list = controlData.value && controlData.value.list
if (list && list.length > 0) {
columnIndex = list[0].type === 'index'
}
}
const temp =reactive<PublicAtrr[]>([
完成页面信息展示
1 year ago
{
label: 'label值',
value: item.label,
path: 'item.label',
vHide: [
'table',
'grid',
'tabs',
'title',
'gridChild',
'div',
'inputSlot',
'flex',
'button',
'txt'
],
eventName: 'labelNameVal'
},
初始化数据
1 year ago
{
label: '自定义Class',
value: config.className,
placeholder: '样式类名',
path: 'config.className'
},
{
label: '字段标识',
value: name,
type:
Object.keys(state.dataSourceList).length > 0 ? 'select' : 'text',
placeholder: '字段唯一标识，对应数据库',
dict: state.dataSourceList,
path: 'name',
vHide: [
'grid',
'tabs',
'card',
'title',
'gridChild',
'tableColumn',
'divider',
'txt',
'div',
'button'
],
eventName: 'filedNameKey'
},
{
label: '占位内容',
value: control.placeholder,
placeholder: 'placeholder',
path: 'control.placeholder',
vShow: [
'password',
'input',
'textarea',
'select',
'date',
'number',
'datePicker',
'tinymce',
'timePicker',
'treeSelect'
]
},
{
label: '按钮类型',
value: control.type,
path: 'control.type',
type: 'select',
dict: {
primary: 'primary',
success: 'success',
info: 'info',
warning: 'warning',
danger: 'danger'
},
vShow: ['button'],
clearable: true
},
{
label: '按钮名称',
value: control.label,
path: 'control.label',
vShow: ['button']
},
{
label: '按钮事件',
value: control.key,
path: 'control.key',
type: 'select',
dict: {
submit: '提交表单',
reset: '重置表单',
cancel: '取消返回',
none: '无动作(自定义)'
},
vShow: ['button']
},
{
label: '对齐方式',
value: config.textAlign,
path: 'config.textAlign',
type: 'select',
dict: {
left: 'left',
right: 'right',
center: 'center'
},
vShow: ['button', 'div']
},
完成页面信息展示
1 year ago
初始化数据
1 year ago
{
label: '隐藏label',
value: item.showLabel,
path: 'item.showLabel',
type: 'switch',
vHide: [
'table',
'grid',
'tabs',
'title',
'gridChild',
'divider',
'card',
'div',
'inputSlot',
'flex',
'button',
'txt'
]
},
{
label: '帮助信息',
value: config.help,
path: 'config.help',
vHide: [
'table',
'grid',
'tabs',
'gridChild',
'divider',
'div',
'inputSlot',
'flex',
'button',
'txt'
]
},
{
label: '表单栅格',
value: config.span,
placeholder: '表单区域栅格宽，0为自动宽',
path: 'config.span',
vHide: ['gridChild'],
isNum: true
},
/*{
label: '行类样式',
value: config.inline,
type: 'switch',
path: 'config.inline',
vShow: ['div']
},*/
{
label: '文本值',
value: control.modelValue,
placeholder: '支持html',
path: 'control.modelValue',
vShow: ['txt'],
inputStyle: 'textarea'
},
{
label: '设为密码',
value: type,
type: 'select',
dict: { input: '文本', password: '密码' },
path: 'type',
vShow: ['input', 'password'],
vIf: state.isSearch // 搜索模式下隐藏 为true
},
{
label: '文本域高度',
value: control.rows,
placeholder: '输入框行数',
path: 'control.rows',
vShow: ['textarea'],
isNum: true
},
{
label: '前缀',
value: config.prepend,
placeholder: '文本前缀',
path: 'config.prepend',
vShow: ['input', 'password']
},
{
label: '后缀',
value: config.append,
placeholder: '文本后缀',
path: 'config.append',
vShow: ['input', 'password']
},
{
label: '状态打开时的值',
value: control.activeValue,
placeholder: '状态打开时的值',
path: 'control.activeValue',
vShow: ['switch'],
isNum: true
},
{
label: '状态关闭时的值',
value: control.inactiveValue,
placeholder: '状态关闭时的值',
path: 'control.inactiveValue',
vShow: ['switch'],
isNum: true
},
// {
// label: '转换格式化值',
// value: config.transform,
// path: 'config.transform',
// type: 'switch',
// vShow: [
// 'checkbox',
// 'select',
// 'switch',
// 'cascader',
// 'slider',
// 'table',
// 'flex',
// 'treeSelect'
// ]
// },
{
label: '增加按钮文案',
value: config.addBtnText,
path: 'config.addBtnText',
type: 'text',
vShow: ['flex', 'table']
},
{
label: '删除按钮文案',
value: config.delBtnText,
path: 'config.delBtnText',
type: 'text',
vShow: ['flex', 'table']
},
{
label: '是否多选',
value: control.multiple,
path: 'control.multiple',
type: 'switch',
vShow: ['select', 'treeSelect'],
eventName: 'selectMultiple'
},
{
label: '可清空',
value: control.clearable,
path: 'control.clearable',
type: 'switch',
vShow: ['select']
},
{
label: '是否禁用',
value: control.disabled,
path: 'control.disabled',
type: 'switch',
vShow: [
'input',
'password',
'textarea',
'radio',
'checkbox',
'select',
'date',
'switch',
'number',
'cascader',
'upload',
'rate',
'tinymce',
'treeSelect'
],
vIf: state.isSearch
},
{
label: '是否禁用编辑',
value: config.editDisabled,
path: 'config.editDisabled',
type: 'switch',
vShow: [
'input',
'password',
'textarea',
'radio',
'checkbox',
'select',
'date',
'switch',
'number',
'cascader',
'upload',
'treeSelect',
'table',
'flex'
],
vIf: state.isSearch
},
{
label: '添加页隐藏',
value: config.disabledAdd,
path: 'config.disabledAdd',
type: 'switch',
vIf: state.isSearch,
vHide: ['inputSlot']
},
{
label: '编辑页隐藏',
value: config.disabledEdit,
path: 'config.disabledEdit',
type: 'switch',
vIf: state.isSearch,
vHide: ['inputSlot']
},
{
label: '详情页隐藏',
value: config.disabledDetail,
path: 'config.disabledDetail',
type: 'switch',
vIf: state.isSearch,
vHide: ['inputSlot']
},
{
label: '设为Input输入框的前/后缀',
value: type === 'inputSlot',
path: '',
type: 'switch',
vShow: ['select', 'inputSlot'],
eventName: 'setInputSlot'
},
{
label: '标题',
value: control.modelValue,
path: 'control.modelValue',
vShow: ['title']
},
{
label: '占据的列数span',
value: attr.span,
path: 'attr.span',
vShow: ['gridChild'],
eventName: 'formatNumber',
isNum: true
},
{
label: '左侧的间隔格数offset',
value: attr.offset,
path: 'attr.offset',
vShow: ['gridChild'],
eventName: 'formatNumber',
isNum: true
},
{
label: '向右移动格数push',
value: attr.push,
path: 'attr.push',
vShow: ['gridChild'],
eventName: 'formatNumber',
isNum: true
},
{
label: '向左移动格数pull',
value: attr.pull,
path: 'attr.pull',
vShow: ['gridChild'],
eventName: 'formatNumber',
isNum: true
},
{
label: '序号列',
value: columnIndex,
type: 'switch',
vShow: ['table'],
eventName: 'tableColumn1'
},
/*{
label: '操作列',
value: columnOperate,
type: 'switch',
vShow: ['table'],
eventName: 'tableColumn2'
},*/
{
label: '组件名',
value: config.componentName,
placeholder: '全局注册的组件名称',
path: 'config.componentName',
vShow: ['component']
},
{
label: '关联表单',
value: config.associatedForms,
path: 'config.associatedForms',
type: 'associatedForms_form',
vIf: state.isSearch,
vShow: ['associatedForms']
},
{
label: '隐藏条件',
value: config.associatedForms,
path: 'config.associatedForms',
type: 'associatedForms_hide',
vIf: state.isSearch,
vShow: ['associatedForms']
},
{
label: '数据范围',
value: config.associatedForms,
path: 'config.associatedForms',
type: 'associatedForms_dataRange',
vIf: state.isSearch,
vShow: ['associatedForms']
},
{
label: '数据填充规则',
value: config.associatedForms,
path: 'config.associatedForms',
type: 'associatedForms_FillRoles',
vIf: state.isSearch,
vShow: ['associatedForms']
},
{
label: '轮播图设置',
value: config.carousel,
path: 'config.carousel',
type: 'carousel',
vIf: state.isSearch,
vShow: ['lowcodeCarsusel']
},
{
label: '穿梭框名',
value: config.transfer,
path: 'config.transfer',
type: 'transfer_name',
vIf: state.isSearch,
vShow: ['lowcodeTransfer']
},
{
label: '选项数据源',
value: config.transfer,
path: 'config.transfer',
type: 'transfer_options_datasource',
vIf: state.isSearch,
vShow: ['lowcodeTransfer']
},
{
label: '上传视频',
value: config.uploadvideo,
path: 'config.uploadvideo',
type: 'uploadvideo_url',
vIf: state.isSearch,
vShow: ['videoUpAndPlay']
},
{
label: '上传图片',
value: config.lowcodeImage,
path: 'config.lowcodeImage',
type: 'lowcodeImage_url',
vIf: state.isSearch,
vShow: ['lowcodeImage']
},
{
label: '尺寸',
value: config.lowcodeImage,
path: 'config.lowcodeImage',
type: 'lowcodeImage_showMode',
vIf: state.isSearch,
vShow: ['lowcodeImage']
},
{
label: '契合度',
value: config.lowcodeImage,
path: 'config.lowcodeImage',
type: 'lowcodeImage_fit',
vIf: state.isSearch,
vShow: ['lowcodeImage']
},
{
label: '圆角',
value: config.lowcodeImage,
path: 'config.lowcodeImage',
type: 'lowcodeImage_radius',
vIf: state.isSearch,
vShow: ['lowcodeImage']
},
{
label: '边框和阴影',
value: config.lowcodeImage,
path: 'config.lowcodeImage',
type: 'lowcodeImage_boderAndShadow',
vIf: state.isSearch,
vShow: ['lowcodeImage']
},
{
label: '图片链接',
value: config.lowcodeImage,
path: 'config.lowcodeImage',
type: 'lowcodeImage_link',
vIf: state.isSearch,
vShow: ['lowcodeImage']
},
{
label: '浮动',
value: config.lowcodeImage,
path: 'config.lowcodeImage',
type: 'lowcodeImage_float',
vIf: state.isSearch,
vShow: ['lowcodeImage']
},
{
label: '内外四边距',
value: config.lowcodeImage,
path: 'config.lowcodeImage',
type: 'lowcodeImage_marginAndPadding',
vIf: state.isSearch,
vShow: ['lowcodeImage']
},
/* {
label: '上传视频封面',
value: config.uploadvideo,
path: 'config.uploadvideo',
type: 'uploadvideo_poster',
vIf: state.isSearch,
vShow: ['videoUpAndPlay']
}, */
{
label: '视频宽度(像素)',
value: config.uploadvideo,
path: 'config.uploadvideo',
type: 'uploadvideo_width',
vIf: state.isSearch,
vShow: ['videoUpAndPlay']
},
{
label: '视频高度(像素)',
value: config.uploadvideo,
path: 'config.uploadvideo',
type: 'uploadvideo_height',
vIf: state.isSearch,
vShow: ['videoUpAndPlay']
},
{
label: '视频自动播放',
value: config.uploadvideo,
path: 'config.uploadvideo',
type: 'uploadvideo_autoPlay',
vIf: state.isSearch,
vShow: ['videoUpAndPlay']
},
{
label: '视频循环播放',
value: config.uploadvideo,
path: 'config.uploadvideo',
type: 'uploadvideo_loopPlay',
vIf: state.isSearch,
vShow: ['videoUpAndPlay']
},
{
label: '上传地址',
value: control.action,
placeholder: '图片/文件上传地址,可不填有默认值',
path: 'control.action',
vShow: ['upload']
},
{
label: '文件字段名',
value: control.name,
placeholder: '上传的文件字段名,默认file',
path: 'control.name',
vShow: ['upload']
},
{
label: '列表类型',
value: control.listType,
type: 'select',
dict: {
text: 'text',
picture: 'picture',
'picture-card': 'picture-card'
},
path: 'control.listType',
vShow: ['upload']
},
{
label: '提示文字',
value: config.tip,
placeholder: '提示说明文字',
path: 'config.tip',
vShow: ['upload']
},
{
label: '按钮文本',
value: config.btnText,
placeholder: '上传按钮文本',
path: 'config.btnText',
vShow: ['upload']
},
{
label: 'direction',
type: 'select',
dict: { horizontal: 'horizontal', vertical: 'vertical' },
placeholder: '分割线方向，默认horizontal',
value: control.direction,
path: 'control.direction',
vShow: ['divider']
},
{
label: 'border-style',
placeholder: '分隔符样式，默认solid',
value: control.borderStyle,
path: 'control.borderStyle',
vShow: ['divider']
},
{
label: 'content-position',
type: 'select',
dict: { left: 'left', right: 'right', center: 'center' },
value: control.contentPosition,
path: 'control.contentPosition',
vShow: ['divider']
},
{
label: '最小值',
value: control.min,
path: 'control.min',
vShow: ['slider'],
eventName: 'formatNumber',
isNum: true
},
{
label: '最大值',
value: control.max,
path: 'control.max',
vShow: ['rate', 'slider'],
eventName: 'formatNumber',
isNum: true
},
{
label: '步长',
value: control.step,
path: 'control.step',
vShow: ['slider'],
eventName: 'formatNumber',
isNum: true
},
{
修改优化
1 year ago
label: '显示类型',
初始化数据
1 year ago
value: control.type,
path: 'control.type',
vShow: ['datePicker'],
type: 'select',
placeholder: '显示类型',
dict: {
修正一些小BUG。修正日期选择文书
1 year ago
year: '年',
month: '月',
date: '日期',
datetime: '日期+时间',
week: '周',
datetimerange: '开始日期时间至结束日期时间',
daterange: '开始日期至结束日期',
monthrange: '开始月至结束月'
初始化数据
1 year ago
}
},
{
修改优化
1 year ago
label: '时间类型',
初始化数据
1 year ago
value: control.format,
path: 'control.format',
vShow: ['datePicker', 'timePicker'],
placeholder: '显示在输入框中的格式'
},
{
label: 'color-format',
value: control.colorFormat,
path: 'control.colorFormat',
type: 'select',
placeholder: '写入 v-model 的颜色的格式',
dict: { hsl: 'hsl', hsv: 'hsv', hex: 'hex', rgb: 'rgb' },
vShow: ['colorPicker']
},
{
label: '文本高度',
value: control.height,
path: 'control.height',
placeholder: '文本高度(预览查看效果)',
vShow: ['tinymce']
},
{
label: '文本宽度',
value: control.width,
path: 'control.width',
placeholder: '文本宽度(预览查看效果)',
vShow: ['tinymce']
},
{
label: '图片上传地址',
value: control.imgUrl,
path: 'control.imgUrl',
placeholder: '图片上传地址',
vShow: ['tinymce']
},
{
label: '附件上传地址',
value: control.blobUrl,
path: 'control.blobUrl',
placeholder: '附件上传地址',
vShow: ['tinymce']
},
{
label: '显示模式',
value: config.style,
path: 'config.style',
placeholder: '显示风格(预览查看效果)',
type: 'select',
dict: { default: 'default', simple: 'simple' },
vShow: ['tinymce']
},
{
label: '默认值',
value: control.mathsValue,
selectvalue: selectvalue,
path: 'control.mathsValue',
placeholder: '显示风格(预览查看效果)',
type: 'digitpage',
dict: { default: '自定义', simple: '编辑公式' },
vShow: ['digitpage'],
control:control
}
])
// 过滤显示对应的值
return temp.filter((item: any) => {
let hasFilter = true
if (item.vShow) {
hasFilter = item.vShow.includes(type)
}
if (item.vHide) {
hasFilter = !item.vHide.includes(type)
}
if (item.vIf) {
// 不显示vif＝true的
hasFilter = false
}
return hasFilter
})
} else {
return []
}
})
watch(
() => store.activeKey,
(val: string) => {
if (val) {
// 有值时自动跳到第一项
state.tabsName = 'first'
cssIsShouw(attrList)
}
}
)
const fileSignAry = reactive<any>([])
const controlChange = (obj: any, val: any) => {
// console.log("字段编辑--1--》",obj)
// console.log("字段编辑--2--》",obj.eventName)
// console.log("字段编辑--3--》",val)
// console.log("字段编辑--4--》",controlData.value)
// console.log("字段编辑--5--》",obj.path)
// select多选属性，
switch (obj.eventName) {
case 'selectMultiple':
if (val) {
// 多选，将值改为数组
controlData.value.control.modelValue = []
} else {
// 单选
controlData.value.control.modelValue = ''
}
break
case 'tableColumn1':
tableColumnAdd(val)
break
case 'formatNumber':
val = parseInt(val) // 将值转数值
break
case 'filedNameKey':
// 选择字段标识时，同时修改显示标题
// 根据value找key
if (obj.type === 'select') {
state.dataSourceList.forEach((item: any) => {
if (item.name === val) {
if (controlData.value.item) {
controlData.value.item.label = item.label
}
controlData.value.name = item.label
}
})
}
break
case 'setInputSlot':
if (val) {
// 将类型改为inputSlot
controlData.value.type = 'inputSlot'
ElMessage.success(
`请在对应的Input输入框属性前后缀设置key:${controlData.value.name}`
)
} else {
controlData.value.type = 'select'
}
// 这里会报错Cannot set properties of null (setting 'checked')
// 因value:type===inputSlot，这里使用了v-model，影响不大暂不处理
break
case 'labelNameVal':
if(val != ""){
let ary = ["founder","founderTime","editTime","owner","deptOrg"]
if (!ary.includes(controlData.value.type)){
chineseToPinyin({title:val,types:8,connector:"",formJson:JSON.stringify(props.formInfo)})
.then((data:any)=>{
if(data.code == 0){
if(data.data != ""){
if(!fileSignAry.includes(data.data)){
controlData.value.name = data.data
fileSignAry.push(data.data)
}else{
let isEnd = true;
do{
let titleVal = data.data + Rand(10000000,99999999)
if(!fileSignAry.includes(titleVal)){
controlData.value.name = titleVal;
fileSignAry.push(titleVal);
isEnd=false;
}
}while(isEnd);
}
}else{
if(!fileSignAry.includes(val)){
controlData.value.name = val
fileSignAry.push(val)
}else{
let titleVal = val + Rand(10000000,99999999)
if(!fileSignAry.includes(titleVal)){
controlData.value.name = titleVal;
fileSignAry.push(titleVal);
}
}
}
}
111
1 year ago
// console.log("字段编辑--fileSignAry-111-》",fileSignAry)
初始化数据
1 year ago
})
}
}
111
1 year ago
// console.log("字段编辑--fileSignAry--》",controlData.value)
初始化数据
1 year ago
break
}
if (obj.path) {
const newVal = obj.isNum ? formatNumber(val) : val // 类型为数字时转整数
obj.path && getPropByPath(controlData.value, obj.path, newVal)
}
//liwenxuan 关联选项设置 修复bug:当字段标识改变时，关联选项设置的字段标识未同步更改 start
emits('formNameChange',val);
//liwenxuan 关联选项设置 修复bug:当字段标识改变时，关联选项设置的字段标识未同步更改 end
}
/**
* 获取非负整数随机数
* @param Min 最小整数
* @param Max 最大整数
* @returns 随机数
*/
const Rand = (Min: number, Max: number) => {
switch (Min) {
case 0: return Math.round(Math.random() * Max);
case 1: return Math.ceil(Math.random() * Max);
default: return Math.round(Math.random() * (Max - Min) + Min);
}
}
// 修改指定路径下的值
const getPropByPath = (obj: any, path: string, val: any) => {
let tempObj = obj
const keyArr = path.split('.')
let i = 0
for (i; i < keyArr.length - 1; i++) {
const key = keyArr[i]
if (key in tempObj) {
tempObj = tempObj[key]
} else {
throw new Error(`${key} is undefined`)
// break
}
}
const key = keyArr[i]
const value = tempObj[keyArr[i]]
// 检查最后一级是否存在
/*if (!(key in tempObj)) {
throw new Error(`${key} is undefined`)
}*/
if (val !== undefined) {
tempObj[key] = val
}
return {
obj: tempObj,
key: key,
value: value
}
}
// 属性设置相关结束
// 多选固定选项删除
const delSelectOption = (index: number, type?: string) => {
//liwenxuan 20240508 checkbox 删除选项时提醒 start
let delflag = true
let breakFlag = 0
if(controlData.value.type === 'checkbox'&& controlData.value.config.optionsType==0){
多选框组新增拖动排序功能---单页面表单
1 year ago
//多选删除时,当前index并不是索引而是value,需找出选择的多选框实际的索引作为index liwenxuan 多选选择框选项拖动功能 20240815 start
for(let i = 0;i<controlData.value.options.length;i++){
if(controlData.value.options[i].value==index){
index = i
break
}
}
//多选删除时,当前index并不是索引而是value,需找出选择的多选框实际的索引作为index liwenxuan 多选选择框选项拖动功能 20240815 end
初始化数据
1 year ago
for(var i = 0;i < controlData.value.control.glxxszForCheckBox.length;i ++){
if(breakFlag>0){
break
}
for(var j = 0; j < controlData.value.control.glxxszForCheckBox[i].selectedOptions.length; j++){
if(controlData.value.control.glxxszForCheckBox[i].selectedOptions[j] === controlData.value.options[index].value){
let del =confirm("您本次删除的选项已在关联选项设置中有所配置，相关关联选项设置将被删除，是否确定删除？");
if (del==true){
breakFlag++
break
}else{
delflag = false
breakFlag++
break
}
}
}
}
}
if(delflag === true){
//删除相关关联选项设置
if(controlData.value.type === 'checkbox'){
const todelArr:any = []
for(var i = 0;i < controlData.value.control.glxxszForCheckBox.length;i ++){
for(var j = 0; j < controlData.value.control.glxxszForCheckBox[i].selectedOptions.length; j++){
if(controlData.value.control.glxxszForCheckBox[i].selectedOptions[j] === controlData.value.options[index].value){
todelArr.push(controlData.value.control.glxxszForCheckBox[i].id)
}
}
}
for(var i = 0;i < todelArr.length;i++){
controlData.value.control.glxxszForCheckBox = controlData.value.control.glxxszForCheckBox.filter((item: { id: any }) => item.id != todelArr[i])
}
}
//liwenxuan 20240508 checkbox 删除选项时提醒 end
if (type === 'tabs' ) {
controlData.value.columns.splice(index, 1)
} else {
controlData.value.options.splice(index, 1)
}
}
}
// 多选固定选项增加
const addSelectOption = (type: any) => {
111
1 year ago
// console.log("选择项添加",controlData.value.type)
初始化数据
1 year ago
if (controlData.value.type === 'cascader') {
// 级联时打开弹窗口
openAttrDialog('cascader',"级联选择器")
} else if (controlData.value.type === 'treeSelect') {
openAttrDialog('treeSelect', '编辑组件下拉选项数据')
} else {
if (type === 'tabs') {
controlData.value.columns.push({
label: '标签名称',
list: []
})
} else {
111
1 year ago
// console.log("选择项添加--->controlData.value.options-->",controlData.value.options)
初始化数据
1 year ago
let maxVal = 1;
if(controlData.value.options && controlData.value.options.length > 0){
controlData.value.options.forEach((item:any)=>{
if(item.value >= maxVal){
maxVal = item.value
}
})
maxVal = maxVal*1 + 1
}
controlData.value.options.push({
label: '',
value: maxVal.toString()
})
}
}
}
// 更多属性弹窗
const openAttrDialog = (type?: string, tooltip?: string) => {
let editData = controlData.value.control
if (controlData.value.type === 'button') {
// 按钮组件编辑属性
editData = controlData.value.config
type = 'button'
}
switch (type) {
case 'treeSelect':
editData = controlData.value.control.data
break
case 'cascader':
editData = controlData.value.options
break
case 'optionsParams': // 选项请求附加参数
editData = controlData.value.config.beforeRequest
// params.codeType = 'json'
break
case 'optionsResult':
editData = controlData.value.config.afterResponse
break
}
const emitsParams = {
content: editData,
title: tooltip,
type: type,
direction: 'ltr',
callback: (result: any) => {
switch (type) {
case 'treeSelect':
controlData.value.control.data = result
break
case 'cascader':
controlData.value.options = result
break
case 'optionsParams':
controlData.value.config.beforeRequest = result
break
case 'optionsResult':
controlData.value.config.afterResponse = result
break
case 'button':
controlData.value.config = result
break
default:
controlData.value.control = {}
Object.assign(controlData.value.control, result)
}
}
}
emits('openDialog', emitsParams)
}
// 必填校验
const requiredChange = (val: any) => {
if (!controlData.value.item?.rules) {
controlData.value.item.rules = []
}
if (val) {
controlData.value.item.rules.push({
required: true,
message: '必填项',
trigger: 'change'
})
} else {
controlData.value.item.rules.splice(0, 1)
}
}
// 添加校验规则
const addRules = (tooltip: string) => {
if (!controlData.value.item?.rules) {
controlData.value.item.rules = []
}
const params = {
content: controlData.value.item?.rules,
title: tooltip,
direction: 'ltr',
callback: (result: any) => {
Object.assign(controlData.value.item.rules, result)
}
}
emits('openDialog', params)
}
// 根据不同类型判断是否显示当前属性
const showHide = (type: string[], show?: boolean) => {
// show=true 条件成立显示，false符合条件隐藏
if (
(type && type.length === 0) ||
Object.keys(controlData.value).length === 0
) {
return false
}
const index = type.indexOf(controlData.value.type)
return show ? index !== -1 : index === -1
}
// 子表时添加序号和操作列
const tableColumnAdd = (val: string) => {
const item = {
name: 'index',
type: 'index',
item: {
label: '序号'
},
control: {},
config: {}
}
if (val) {
controlData.value.list.unshift(item)
} else {
controlData.value.list.splice(0, 1)
}
}
// 校验规则必填勾选设置，存在校验规则时勾选
const checkboxRequired = computed(() => {
const val = controlData.value && controlData.value.item?.rules
if(val && val.length > 0){
return true
}else{
return false
}
})
// 快速添加一条校验规则
const addRulesFast = () => {
if (!controlData.value.customRules) {
controlData.value.customRules = []
}
controlData.value.customRules.push({
type: 'required',
message: '必填项',
trigger: 'blur'
})
}
// 删除一条校验规则
const delAddRules = (index: number) => {
controlData.value.customRules &&
controlData.value.customRules.splice(index, 1)
}
//添加一条编码规则
const addNumRules = () => {
if (!controlData.value.config.customRules) {
controlData.value.config.customRules = []
}
controlData.value.config.customRules.push({
type:'time',
rule:"YYYYMMDD"
})
}
//删除一条编码规则
const delNumRules = (index: number) => {
controlData.value.config.customRules &&
controlData.value.config.customRules.splice(index, 1)
}
// 编辑表单样式
const editFormStyle = (tooltip: string) => {
emits('openDialog', {
codeType: 'css',
direction: 'ltr',
type: 'css',
title: tooltip
})
}
const editFormDict = (tooltip: string) => {
emits('openDialog', {
type: 'dict',
direction: 'ltr',
codeType: 'json',
title: tooltip
})
}
// 根据选定数据源获取表单字段
const getFormFieldBySource = (id?: string) => {
if (state.isSearch) {
// 搜索设计这里不需要数据源
return
}
const source = id
if (source) {
getRequest('sourceById', { id: source })
.then(res => {
// console.log(res)
const tableData = res.data.result?.tableData
if (tableData && tableData.length) {
state.dataSourceList = tableData.filter(
(item: any) => item.enterable
)
}
})
.catch(res => {
// console.log(res)
})
}
}
const getDataSource = () => {
// 获取数据源，表单设计才加载，搜索设置不需要
if (!state.isSearch) {
// getRequest('sourceList').then((res: any) => {
// dataSourceOption.value = res.data.list
// //dataSourceOption.value.unshift({ name: '无', id: '' })
// })
}
}
// 表单属性修改
const formAttrChange = (obj: any, val?: any) => {
// console.log("表单属性修改--->",obj,val,{ [obj.key]: obj.value })
if (obj.key === 'source') {
getFormFieldBySource(obj.value) // 改变了数据源了，重新请求数据
// 清空设计区已选择的组件，再一次选择时字段标识才会变
store.setActiveKey('')
store.setControlAttr({})
}
if (['formName', 'source'].includes(obj.key)) {
emits(
'update:formOtherData',
Object.assign(props.formOtherData, { [obj.key]: obj.value })
)
formData.value[obj.key] = obj.value
return
}
if (obj.path === 'config') {
formConfig.value[obj.key] = obj.value || val
} else {
formData.value[obj.key] = obj.value
}
}
// 返回选项配置提示
const getOptionPlaceholder = (type: number) => {
switch (type) {
case 1:
return '数据源接口URL,可带参数'
case 2:
return '字典key，默认为字段标识'
}
return ''
}
// 快速添加校验规则改变时，填写默认的校验提示信息
const rulesSelectChange = (item: any, val: string) => {
const filter = validate.filter(item => item.type === val)
if (filter && filter.length) {
item.message = filter[0].message
}
}
const rulesSelectNumChange = (item: any, val: string) => {
// console.log("快速添加校验规则改变时",item,val)
const filter = state.numberRulesList.filter(item => item.type === val)
if (filter && filter.length) {
item.message = filter[0].msg
if(val == "time") {
item.rule = "YYYYMMDD"
}else{
item.rule = ""
}
}
}
// options动态选项数据源请求时
const optionsEvent = (type: string, tooltip?: string) => {
openAttrDialog(type, tooltip)
}
const eventClick = (type: string, tooltip?: string) => {
emits('openDialog', { type: type, title: tooltip, direction: 'ltr' })
}
getDataSource()
defineExpose({ getFormFieldBySource })
//判断输入框是否可写
const isNotWrite = (val:any) =>{
111
1 year ago
// console.log("判断输入框是否可写--->",val,props.customerformid)
初始化数据
1 year ago
if(val.key === "name" && props.customerformid != ""){
return true
}
return false
}
const unitInfo = ref<any>()
const formListmap = ref<any>()
const subUnit = ref<any>()
//默认值处理
const digitPageSub = (val:any,envt:any) => {
111
1 year ago
// console.log("默认值处理--->",val.value,envt,props.formData)
初始化数据
1 year ago
// console.log("默认值处理-1-->",props.formList)
// console.log("默认值处理-2-->",props.formConfig)
// console.log("默认值处理--3->",props.formOtherData)
// console.log("默认值处理--4->",props.customerformid)
// console.log("默认值处理--5->",controlData.value)
// console.log("默认值处理-6-->",val)
subUnit.value = val
controlData.value.selectvalue = envt
formListmap.value = props.formList
if(envt == "simple"){
unitInfo.value = attrList.value
mathBoxShow.value = true
}
}
const openMathDialog = (val:any) => {
subUnit.value = val
formListmap.value = props.formList
unitInfo.value = attrList.value
mathBoxShow.value = true
}
//返回值处理
const updataDigit = (key:string,val:any) => {
// console.log("默认值处理-1-->",props.formList)
// console.log("默认值处理-2-->",props.formConfig)
// console.log("默认值处理--3->",props.formOtherData)
111
1 year ago
// console.log("默认值处理--4->",val)
初始化数据
1 year ago
formConfig.value[key] = {
mathsFormula:val.mathsFormula,
takingMethod:val.takingMethod,
digit:val.digit
}
111
1 year ago
// console.log("返回值处理--->",formConfig.value)
初始化数据
1 year ago
attrList.value.forEach((item:any)=>{
// console.log("返回值处理--1->",item)
if(item.type == "digitpage"){
item.control.mathFormula = {
formulaHtml:val.formulaHtml,
mathsString:val.mathsString,
mathsFormula:val.mathsFormula,
takingMethod:val.takingMethod,
digit:val.digit
}
}
})
// console.log("默认值处理-5-->",props.formConfig)
}
//liwenxuan 20240108 vidioupload start
import { VideoMsg } from '@/api/DesignForm/types'
import { genFileId } from 'element-plus'
import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'
//更改已上传的视频:el-upload中设置 limit 和 on-exceed 可以在选中时自动替换上一个文件。
const upload = ref<UploadInstance>()
const handleExceed: UploadProps['onExceed'] = (files) => {
upload.value!.clearFiles()
const file = files[0] as UploadRawFile
file.uid = genFileId()
upload.value!.handleStart(file)
}
//每个视频上传控件对应一个videoMsg[videoIndex]
const videoIndex = ref(0);
//上传成功钩子
function videoUploadOk(response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) {
const { control = {} } : { control: any } = controlData.value
control.videoMsg[videoIndex.value].url = response.data.url;
control.videoMsg[videoIndex.value].videoReady = true;
control.videoMsg[videoIndex.value].CreatedAt = response.data.CreatedAt;
control.videoMsg[videoIndex.value].UpdatedAt = response.data.UpdatedAt;
control.videoMsg[videoIndex.value].fileSize = response.data.fileSize;
control.videoMsg[videoIndex.value].id = response.data.id;
control.videoMsg[videoIndex.value].key = response.data.key;
control.videoMsg[videoIndex.value].name = response.data.name;
control.videoMsg[videoIndex.value].physicspath = response.data.physicspath;
control.videoMsg[videoIndex.value].size = response.data.size;
control.videoMsg[videoIndex.value].tag = response.data.tag;
control.videoMsg[videoIndex.value].type = response.data.type;
}
//删除钩子 禁止删除
function beforeRemove(){
return false;
}
//上传失败钩子
function videoUploadErr(error: Error, uploadFile: UploadFile, uploadFiles: UploadFiles){
alert("上传失败,请重试")
111
1 year ago
// console.log("上传失败"+error);
初始化数据
1 year ago
}
//liwenxuan 20240108 vidioupload end
//liwenxuan 20240111 carousel start
import { Delete } from '@element-plus/icons-vue'
import { CarsuselConfig } from '@/api/DesignForm/types'
import errimg from '@/assets/404_images/untilUploadImg.png'
import { v4 as uuidv4 } from "uuid";
//轮播图设置弹窗显示控制
const dialogTableVisible = ref(false)
//穿梭框设置弹窗显示控制
const transferDialogTableVisible = ref(false)
//图片展示显示控制
const showImagePreview = ref(false)
//最近点击的上传按钮对应的imgId
let currentUploadImgid = "";
//刚拖拽视频组件时,初始化imgid监听designForm.activeKey,变化时,如果controlData.value.type=='lowcodeCarsusel',就遍历轮播图数组把imgid=''的都生成uuid
watch(()=>store.activeKey, (newVal) => {
//啊啊啊啊
if(controlData.value.type==='lowcodeCarsusel'){
const carsuselConfigData:CarsuselConfig[] = controlData.value.control.carsuselConfigArr
carsuselConfigData.forEach(element => {
//console.log(element)
if(element.imgId==''){
//console.log("初始化imgid")
let onlyNumber = uuidv4().replaceAll('-','').toString(); //获取唯一编码
element.imgId = onlyNumber;
}
});
}else if(controlData.value.type==='associatedForms'){
controlData.value.control.fillRoles[0].id = uuidv4().replaceAll('-','').toString();
}
//实现关联表单设置可选字段中没有当前字段效果 start
//console.log(controlData.value.name)
resDataForGlxxszExceptself1 = JSON.parse(JSON.stringify(resDataForGlxxszExceptself));
//console.log(resDataForGlxxszExceptself1)
for(let i = 0;i<resDataForGlxxszExceptself1.length;i++){
let strArr:[string] = resDataForGlxxszExceptself1[i].id.split(":")
//console.log(strArr)
let str = strArr[strArr.length-1]
//console.log(str)
if(str==newVal){
resDataForGlxxszExceptself1.splice(i, 1); // 将使后面的元素依次前移，数组长度减1
i--; // 如果不减，将漏掉一个元素
}
}
//console.log(resDataForGlxxszExceptself1)
if(getAssociatedFormsCurrentFieldTreeData.treeAttrs!=undefined){
associatedFormsCurrentFormFieldTreeForGlxxszExceptSelf.value = [{
id: 'rootid_'+getAssociatedFormsCurrentFieldTreeData.label,
//label: '当前表单',
label: '当前表单-'+getAssociatedFormsCurrentFieldTreeData.treeAttrs.show,
children: resDataForGlxxszExceptself1,
treeAttrs: getAssociatedFormsCurrentFieldTreeData.treeAttrs,//
}]
}
//associatedFormsCurrentFormFieldTreeForGlxxszExceptSelf.value.children = [...resDataForGlxxszExceptself1]
//实现关联表单设置可选字段中没有当前字段效果 end
})
//轮播图图片上传成功钩子
function carouselImgUploadSuccess(response: any, uploadFile: UploadFile, uploadFiles: UploadFiles){
const carsuselConfigData:CarsuselConfig[] = controlData.value.control.carsuselConfigArr
carsuselConfigData.forEach(element => {
if(element.imgId==currentUploadImgid){
element.imgUrl=response.data.url
element.uploadFlag=true
}
});
}
//轮播图所有已上传的图片的url,点击略缩图展示大图用
const carouselImgUrlList = computed(() => {
const list:string[] = [];
const carsuselConfigData:CarsuselConfig[] = store.controlAttr.control.carsuselConfigArr
carsuselConfigData.forEach(element => {
if(element.uploadFlag===true){
list.push(element.imgUrl)
}
});
return list;
})
//轮播图设置table
function createRow(clickedRow:any){
const newRow:CarsuselConfig = {
uploadFlag:false,
imgId:'',
imgSort:1,
imgUrl: '',
link: ''
}
let onlyNumber = uuidv4().replaceAll('-','').toString(); //获取唯一编码
newRow.imgId = onlyNumber;
const nextSort:number = clickedRow.sort+1;
newRow.imgSort = nextSort;
controlData.value.control.carsuselConfigArr.push(newRow)
}
function deleteRow(clickedRow:any){
//alert('删除一行')
const carsuselConfigData:CarsuselConfig[] = controlData.value.control.carsuselConfigArr
for (var i = 0; i < carsuselConfigData.length; i++) {
if(carsuselConfigData[i].imgId===clickedRow.imgId){
carsuselConfigData.splice(i, 1);
i--; // 如果不减，将漏掉一个元素
}
}
}
//关闭大图展示
const closePreview = () => {
showImagePreview.value = false
}
//开启大图展示
const handlePreview = (index: number, row: any) => {
showImagePreview.value = true
}
const changeCurrentUploadImgid = (clickedRow:any) => {
currentUploadImgid = clickedRow.imgId
}
//liwenxuan 20240111 carousel end
//liwenxuan 20240217 transfer start
const showModeSelectOptions = [
{
value: '自定义像素值',
label: '自定义像素值',
},
{
value: '自定义占父容器比例',
label: '自定义占父容器比例',
},
]
const floatSelectOptions = [
{
value: 'left',
label: '左',
},
{
value: 'right',
label: '右',
},
]
const dataSource = ref<Tree[]>([])
interface Tree {
id?: string
label: string
disabled?: boolean
children?: Tree[]
parentId?: string
[key: string]: any
}
const addRootNode = () => {
let onlyNumber = uuidv4().replaceAll('-','').toString();
controlData.value.control.fixedOptions.push({
id: onlyNumber,
label: '新根节点',
disabled: false,
children: [],
})
}
const append = (data: Tree) => {
let onlyNumber = uuidv4().replaceAll('-','').toString();
const newChild = { id: onlyNumber, label: '新节点', disabled:false,children: [] }
if (!data.children) {
data.children = []
}
data.children.push(newChild)
dataSource.value = [...dataSource.value]
}
const remove = (node: Node, data: Tree) => {
let really = confirm("确认删除吗?\n将删除本节点与本节点的所有子孙节点!");
if(really){
const parent = node.parent
const children: Tree[] = parent.data.children || parent.data
const index = children.findIndex((d) => d.id === data.id)
children.splice(index, 1)
dataSource.value = [...dataSource.value]
}
}
const changeLabel = (node:Node,data:Tree) =>{
let favDrink = prompt("请输入:");
if(favDrink!=null && favDrink.length>0){
const parent = node.parent
const children: Tree[] = parent.data.children || parent.data
const index = children.findIndex((d) => d.id === data.id)
children[index].label = favDrink
dataSource.value = [...dataSource.value]
}
}
const setNodeEnable = (node:Node,data:Tree) =>{
const parent = node.parent
const children: Tree[] = parent.data.children || parent.data
const index = children.findIndex((d) => d.id === data.id)
children[index].disabled = !children[index].disabled
dataSource.value = [...dataSource.value]
}
//图片上传成功钩子
function lowcodeImageUploadSuccess(response: any, uploadFile: UploadFile, uploadFiles: UploadFiles){
const element = controlData.value.control
element.imgUrl=response.data.url
element.uploadFlag=true
}
//
const transferDataSourceOptions = [
{
value: '数据源',
label: '数据源',
},
{
value: '固定选项',
label: '固定选项',
},
]
//const radio = ref(controlData.value.control.fit)
//liwenxuan20240313 lowcodeImage end
//liwenxuan20240403 associatedForms start
import AssociatedFormsTinyace from '@/widget/associatedforms/associatedFormsTinyace.vue'
import AssociatedFormsTinyaceRange from '@/widget/associatedforms/associatedFormsTinyaceRange.vue'
import AssociatedFormsFillRole from '@/widget/associatedforms/associatedFormsFillRole.vue'
const treeDefaultProps = {
children: 'children',
label: 'label',
}
//拿到子组件AssociatedFormsTinyace的实例
1.修改开关的关联选项设置按钮不显示bug 2.优化关联表单的tinymce编辑器样式和提醒
1 year ago
const aft = ref();
初始化数据
1 year ago
const aftRange = ref();
function getAssociatedFormsCurrentFieldTree() {
return request({
url: '/javasys/lowCode/AssociatedForms/getFieldTree',
method: 'post',
data: {
//cfid:'13'
cfid:props.customerformid
},
});
}
function getAssociatedFormsOrgAndManTree() {
return request({
url: '/javasys/lowCode/transfer/getOrgAndManTree',
method: 'post',
});
}
function getCustomerFormList() {
return request({
url: '/javasys/lowCode/AssociatedForms/getCustomerFormList',
method: 'post',
});
}
function getAssociatedFormsRoleTree() {
return request({
url: '/javasys/lowCode/AssociatedForms/getRoleList',
method: 'post',
});
}
function getAsfasfFieldTree() {
return request({
url: '/javasys/lowCode/AssociatedForms/getFieldTree',
method: 'post',
data: {
//cfid:'13'
cfid:controlData.value.control.formid
},
});
}
function getAsfasfFieldTreeOptionsValue3() {
return request({
url: '/javasys/lowCode/AssociatedForms/getFieldTree',
method: 'post',
data: {
//cfid:'13'
cfid:controlData.value.control.optionsValue3Formid
},
});
}
//
const asfasfFieldTree = ref<Tree[]>()
const asfasfFieldTreeOptionsValue3 = ref<Tree[]>()
function formidChanged(){
if(controlData.value.control.formid===''){
}else{
getAsfasfFieldTree().then(({ data }) => {
if(data.id==="cfid为空"){
//alert("cfid为空")
}else{
let resData = ref(data.children)
//let rootid_ = data.value.label
asfasfFieldTree.value = [{
id: 'rootid_'+data.label,
label: '关联的表单-'+data.label,
children: [...resData.value],
treeAttrs: data.treeAttrs,
}]
}
controlData.value.control.asfasfLabel = data.label
});
}
}
function formidChangedOptionsValue3(){
if(controlData.value.control.optionsValue3Formid===''){
}else{
getAsfasfFieldTreeOptionsValue3().then(({ data }) => {
if(data.id==="cfid为空"){
//alert("cfid为空")
}else{
if(data.treeAttrs.onlyToShowTableId==""){//当前选中的是主表
let resData = ref(data.children)
//let rootid_ = data.value.label
asfasfFieldTreeOptionsValue3.value = [{
id: 'rootid_'+data.label,
label: '关联的表单-'+data.label,
children: [...resData.value],
treeAttrs: data.treeAttrs,
}]
}else{//当前选中的是子表
let resData = ref(data.children)
resData.value = resData.value.filter((item: { children: null }) => item.children != null)
let arr = JSON.parse(JSON.stringify(resData.value));
arr = arr.filter( (item: { label: any }) => item.label == data.treeAttrs.onlyToShowTableId )
arr = arr[0].children
//console.log(arr)
asfasfFieldTreeOptionsValue3.value = [{
id: 'rootid_'+data.label,
label: '关联的表单-'+data.label,
children: [...arr],
treeAttrs: data.treeAttrs,
}]
}
let optionsValue3Formid = controlData.value.control.optionsValue3Formid
let str_optionsValue3Formid = optionsValue3Formid.split(":")[0]
let optionsValue3Field = controlData.value.control.optionsValue3Field
let str_optionsValue3Field = optionsValue3Field.split(":")[1]
//alert(str_optionsValue3Field)
if(typeof(str_optionsValue3Field)!='undefined'){
if(str_optionsValue3Formid!=str_optionsValue3Field){
controlData.value.control.optionsValue3Field = ""
}else{
if(optionsValue3Formid.includes(":zibiaoid-")){
let zibiaoid = optionsValue3Formid.split(":zibiaoid-")[1]
if(!optionsValue3Field.includes(zibiaoid)){
controlData.value.control.optionsValue3Field = ""
}
}
}
}
}
});
}
}
const associatedFormsCurrentFormFieldTree = ref<Tree[]>()
const associatedFormsCurrentFormFieldTreeNoTable = ref<Tree[]>()
const associatedFormsCurrentFormFieldTreeForGlxxsz = ref<Tree[]>()
let associatedFormsCurrentFormFieldTreeForGlxxszExceptSelf = ref<Tree[]>()
let resDataForGlxxszExceptself: any[] = []
let resDataForGlxxszExceptself1: any[] = []
let getAssociatedFormsCurrentFieldTreeData:any
getAssociatedFormsCurrentFieldTree().then(({ data }) => {
//console.log(data)
getAssociatedFormsCurrentFieldTreeData = JSON.parse(JSON.stringify(data))
//console.log(getAssociatedFormsCurrentFieldTreeData)
修改数据提交模式
1 year ago
if(data.id==="cfid为空"||data.id==="masterTable为null"){
初始化数据
1 year ago
//alert("cfid为空")
}else{
let resData = ref(data.children)
let resDataNoTable = JSON.parse(JSON.stringify(data.children))
//let rootid_ = data.value.label
associatedFormsCurrentFormFieldTree.value = [{
id: 'rootid_'+data.label,
//label: '当前表单',
label: '当前表单-'+data.treeAttrs.show,
children: [...resData.value],
treeAttrs: data.treeAttrs,
}]
resDataNoTable = resDataNoTable.filter((item: { type: string | null }) => item.type!="table")
associatedFormsCurrentFormFieldTreeNoTable.value = [{
id: 'rootid_'+data.label,
label: '当前表单-'+data.treeAttrs.show,
children: [...resDataNoTable],
treeAttrs: data.treeAttrs,
}]
let resDataForGlxxsz = ref(data.children.slice(8))
resDataForGlxxszExceptself = JSON.parse(JSON.stringify(resDataForGlxxsz.value));
//console.log(resDataForGlxxszExceptself)
associatedFormsCurrentFormFieldTreeForGlxxsz.value = [{
id: 'rootid_'+data.label,
//label: '当前表单',
label: '当前表单-'+data.treeAttrs.show,
children: [...resDataForGlxxsz.value],
treeAttrs: data.treeAttrs,
}]
associatedFormsCurrentFormFieldTreeForGlxxszExceptSelf.value = [{
id: 'rootid_'+data.label,
//label: '当前表单',
label: '当前表单-'+data.treeAttrs.show,
children: [...resDataForGlxxsz.value],
treeAttrs: data.treeAttrs,//getAssociatedFormsCurrentFieldTreeData
}]
}
});
const customerFormTree = ref<Tree[]>()
getCustomerFormList().then(({ data }) => {
let resData = ref(data.children)
customerFormTree.value = [{
id: data.id,
//value: data.value,
//label: data.label,
label: '请选择表单',
children: [...resData.value]
}]
});
const orgAndManTree = ref<Tree[]>()
getAssociatedFormsOrgAndManTree().then(({ data }) => {
let resData = ref(data.children)
orgAndManTree.value = [{
id: data.id,
//label: data.label,
label: '组织机构',
children: [...resData.value]
}]
});
const roleTree = ref<Tree[]>()
getAssociatedFormsRoleTree().then(({ data }) => {
let resData = ref(data.children)
//console.log("roleTree=============="+resData.value);
roleTree.value = [{
id: data.id,
//label: data.label,
label: '角色',
children: [...resData.value]
}]
});
// field
const fieldTreeSearchFlag = ref(false)
function handleFieldTreeExpand(){
fieldTreeSearchFlag.value = true;
}
function handleFieldTreeCollapse(){
fieldTreeSearchFlag.value = false;
}
function handleFieldTreeContextmenu(MouseEvent:any, object:any, Node:any, element:any){
aft.value.addIcon_field(object)
}
function handleFieldTreeContextmenuRange(MouseEvent:any, object:any, Node:any, element:any){
aftRange.value.addIcon_field(object)
}
//org
const orgTreeSearchFlag = ref(false)
function handleOrgTreeExpand(){
orgTreeSearchFlag.value = true;
}
function handleOrgTreeCollapse(){
orgTreeSearchFlag.value = false;
}
function handleOrgTreeContextmenu(MouseEvent:any, object:any, Node:any, element:any){
aft.value.addIcon_org(object)
}
function handleOrgTreeContextmenuRange(MouseEvent:any, object:any, Node:any, element:any){
aftRange.value.addIcon_org(object)
}
//role
const roleTreeSearchFlag = ref(false)
function handleRoleTreeExpand(){
roleTreeSearchFlag.value = true;
}
function handleRoleTreeCollapse(){
roleTreeSearchFlag.value = false;
}
function handleRoleTreeContextmenu(MouseEvent:any, object:any, Node:any, element:any){
aft.value.addIcon(object)
}
function handleRoleTreeContextmenuRange(MouseEvent:any, object:any, Node:any, element:any){
aftRange.value.addIcon(object)
}
import { ElTree } from 'element-plus'
const fieldTreeFilterText = ref('')
const orgTreeFilterText = ref('')
const roleTreeFilterText = ref('')
const fieldTreeRef = ref<InstanceType<typeof ElTree>>()
const orgTreeRef = ref<InstanceType<typeof ElTree>>()
const roleTreeRef = ref<InstanceType<typeof ElTree>>()
watch(fieldTreeFilterText, (val) => {
fieldTreeRef.value!.filter(val)
})
watch(orgTreeFilterText, (val) => {
orgTreeRef.value!.filter(val)
})
watch(roleTreeFilterText, (val) => {
roleTreeRef.value!.filter(val)
})
const filterNode = (value: string, associatedFormsCurrentFormFieldTree: Tree) => {
if (!value) return true
return associatedFormsCurrentFormFieldTree.label.includes(value)
}
//关联表单隐藏条件弹窗flag
const associatedFormsHideDialogFlag = ref(false)
const associatedFormsDataRangeDialogFlag = ref(false)
//点击开启隐藏设置
function associatedFormsHideDialoghandle(){
associatedFormsHideDialogFlag.value = true
controlData.value.control.hideConditionHtmlCopy = controlData.value.control.hideConditionHtml
nextTick(() => {
aft.value.focusEditor()
})
}
function associatedFormsDataRangeDialoghandle(){
getAsfasfFieldTree().then(({ data }) => {
if(data.id==="cfid为空"){
//alert("cfid为空")
}else{
let resData = ref(data.children)
//let rootid_ = data.value.label
asfasfFieldTree.value = [{
id: 'rootid_'+data.label,
label: '关联的表单-'+data.label,
children: [...resData.value],
treeAttrs: data.treeAttrs,
}]
}
});
associatedFormsDataRangeDialogFlag.value = true
controlData.value.control.dataRangeConditionHtmlCopy = controlData.value.control.dataRangeConditionHtml
nextTick(() => {
aftRange.value.focusEditor()
})
}
//自定义事件同步父子组件的text
function aftTextChanged(str:string){
controlData.value.control.hideConditionHtml = str
}
function aftGongshiChanged(gongshi:any){
controlData.value.control.hideGongShi.formulaHtml = gongshi.formulaHtml
controlData.value.control.hideGongShi.mathsFormula = gongshi.mathsFormula
controlData.value.control.hideGongShi.mathsString = gongshi.mathsString
}
function aftTextChangedRange(str:string){
controlData.value.control.dataRangeConditionHtml = str
}
function aftGongshiChangedRange(gongshi:any){
controlData.value.control.dataRangeGongShi.formulaHtml = gongshi.formulaHtml
controlData.value.control.dataRangeGongShi.mathsFormula = gongshi.mathsFormula
controlData.value.control.dataRangeGongShi.mathsString = gongshi.mathsString
}
//asf隐藏条件取消编辑
function asfhTextCancel(){
determine.value = false
associatedFormsHideDialogFlag.value = false
controlData.value.control.hideConditionHtml = controlData.value.control.hideConditionHtmlCopy
//父组件取消将copy同步至子组件
aft.value.handelCancel(controlData.value.control.hideConditionHtmlCopy)
}
function asfhTextCancelRange(){
determineRange.value = false
associatedFormsDataRangeDialogFlag.value = false
controlData.value.control.dataRangeConditionHtml = controlData.value.control.dataRangeConditionHtmlCopy
//父组件取消将copy同步至子组件
aftRange.value.handelCancel(controlData.value.control.dataRangeConditionHtmlCopy)
}
//上次点击了确定为true
let determine = ref(true)
let determineRange = ref(true)
//监听associatedFormsHideDialogFlag true 重新init tinymce
watch(associatedFormsHideDialogFlag, (val) => {
if(val===true&&determine.value===false){
setTimeout(() => {
aft.value.tinymceReInit()
}, 200);
}
})
watch(associatedFormsDataRangeDialogFlag, (val) => {
if(val===true&&determineRange.value===false){
setTimeout(() => {
aftRange.value.tinymceReInit()
}, 200);
}
})
//确定回调
function handleDetermine(){
associatedFormsHideDialogFlag.value = false
determine.value = true
controlData.value.control.hideConditionHtmlCopy = controlData.value.control.hideConditionHtml
}
function handleDetermineRange(){
associatedFormsDataRangeDialogFlag.value = false
determineRange.value = true
controlData.value.control.dataRangeConditionHtmlCopy = controlData.value.control.dataRangeConditionHtml
}
//数据填充规则
const associatedFormsFillRolesDialogFlag = ref(false)
//数据填充规则设置按钮
function associatedFormsDataFillRolesDialoghandle(){
if(controlData.value.control.formid===''){
alert("请先选择要关联的表单")
}else{
associatedFormsFillRolesDialogFlag.value = true
}
}
function asfhTextCancelFillRoles(){
associatedFormsFillRolesDialogFlag.value = false
}
//数据填充规则确定按钮
function handleDetermineFillRoles(){
associatedFormsFillRolesDialogFlag.value = false
}
watch(()=>store.activeKey, () => {
if(controlData.value.type==='associatedForms'){
setTimeout(() => {
formidChanged()
}, 800);
}else if(controlData.value.type==='radio'||controlData.value.type==='select'||controlData.value.type==='checkbox'){
setTimeout(() => {
formidChangedOptionsValue3()
}, 800);
}
})
function addFillRole(){
let onlyNumber = uuidv4().replaceAll('-','').toString(); //获取唯一编码
controlData.value.control.fillRoles.push({
leftValue:'',
rightValue:'',
id:onlyNumber,
})
}
function delRole(id:String){
const delRoleData:any = controlData.value.control.fillRoles
for (var i = 0; i < delRoleData.length; i++) {
if(delRoleData[i].id===id){
delRoleData.splice(i, 1);
i--; // 如果不减，将漏掉一个元素
}
}
}
const associatedFormsChooseDialogFlag = ref(false)
function chooseAssociatedForm(){
associatedFormsChooseDialogFlag.value = true
}
function handleDetermineAssociatedFormsChooseDialog(){
associatedFormsChooseDialogFlag.value = false
}
//liwenxuan20240403 associatedForms end
//liwenxuan20240426 单选多选下拉 关联选项设置 start
const glxxszDialogFlag = ref(false)
const glxxszDialogFlagCheckBox = ref(false)
const glxxszDialogFlagSwitch = ref(false)
function handelGlxxszDialogSwitch(){
if(controlData.value.control.activeValue==undefined||controlData.value.control.inactiveValue==undefined){
alert("请先设置开关状态打开/关闭时的值")
}else{
glxxszDialogFlagSwitch.value = true
}
}
function handelGlxxszDialog(){
if(controlData.value.options.length===0){
alert("无可配置选项，请先添加。")
}else{
glxxszDialogFlag.value = true
}
}
function handelGlxxszDialogCheckbox(){
glxxszDialogFlagCheckBox.value = true
}
function handleDetermineGlxxszDialog(){
glxxszDialogFlag.value = false
}
function handleDetermineGlxxszDialogSwitch(){
glxxszDialogFlagSwitch.value = false
}
function handleDetermineGlxxszDialogCheckBox(){
glxxszDialogFlagCheckBox.value = false
}
//同步开关的设置值和开关关联选项设置的值
watch(()=>controlData.value.control,(newVal) => {
if(typeof(newVal)!="undefined"){
if(typeof(newVal.glxxszSwitch)!="undefined"){
if(typeof(controlData.value.control.activeValue)!="undefined"){
controlData.value.control.glxxszSwitch[0].openValue = controlData.value.control.activeValue
controlData.value.control.glxxszSwitch[0].conditionField = controlData.value.name
}
if(typeof(controlData.value.control.inactiveValue)!="undefined"){
controlData.value.control.glxxszSwitch[1].offValue = controlData.value.control.inactiveValue
controlData.value.control.glxxszSwitch[1].conditionField = controlData.value.name
}
}
}
},{ deep: true })
//radio,select添加选项时同步配置选项
watch(()=>controlData.value.options, (changedOptions:any) => {
if(controlData.value.type === "radio" || controlData.value.type === "select"){
if(controlData.value.config.optionsType==0){
if(changedOptions.length===0){
//删没了option
controlData.value.control.glxxsz = []
}else{
if(changedOptions.length < controlData.value.control.glxxsz.length){
//删除了某个option
controlData.value.control.glxxsz = controlData.value.control.glxxsz.filter((item: { optionValue: any }) => changedOptions.find((bItem: { value: any }) => item.optionValue == bItem.value))
}else{
for(var i = 0; i < changedOptions.length; i++){
if(controlData.value.control.glxxsz[i]===undefined){
//新增了某个option
controlData.value.control.glxxsz.push(
{
conditionField: controlData.value.name,
optionLabel: changedOptions[i].label,
optionValue: changedOptions[i].value,
tableIndex: i,
id: uuidv4().replaceAll('-','').toString(),
}
)
}else{
//修改了某个option
controlData.value.control.glxxsz[i].optionLabel = changedOptions[i].label
controlData.value.control.glxxsz[i].optionValue = changedOptions[i].value
}
}
}
}
}
}else if(controlData.value.type === "checkbox"){
}
},{ deep: true })
function createRowForGlxxsz(){
if(controlData.value.config.optionsType==0){
controlData.value.control.glxxszForCheckBox.push(
{
conditionField: controlData.value.name,
selectedOptions:[],
showFields:[],
id: uuidv4().replaceAll('-','').toString(),
}
)
}
}
function deleteRowForGlxxsz(row: { id: any }){
if(controlData.value.config.optionsType==0){
controlData.value.control.glxxszForCheckBox = controlData.value.control.glxxszForCheckBox.filter((item: { id: any }) => item.id!=row.id)
}
}
/* */
const optionsValue3SettingDialogOpenFlag = ref(false)
function optionsValue3Setting(){
optionsValue3SettingDialogOpenFlag.value = true
}
function handleDetermineoptionsValue3(){
optionsValue3SettingDialogOpenFlag.value = false
}
//liwenxuan20240426 单选多选下拉 关联选项设置 end
function optionsTypeChanged(){
controlData.value.config.optionsFun = ''
controlData.value.options = []
}
const optionsCss = [
{ label: '无样式', value: '' },
{ label: '每行两列', value: 'form-row-2' },
{ label: '每行三列', value: 'form-row-3' },
{ label: '每行四列', value: 'form-row-4' }
]
const layouytStyle = reactive<any>(controlData.value.styles)
watch(()=>layouytStyle,(val : any)=>{
111
1 year ago
// console.log("监听样式处理",val)
初始化数据
1 year ago
controlData.value.styles = val
// Object.assign(store.controlAttr.styles.divStyle, val)
},
{
deep: true
});
const setStylefield = ref<string>("divStyle")
//liwenxuan 20240111 carousel end
const activeFormName = ref("0")
/**
@ 作者: 秦东
@ 时间: 2024-03-01 08:16:45
@ 功能: 判断是否是组件
*/
const cssIsShouw = (val:any) => {
if(val.length && val.length > 0){
return true;
}
return false;
}
/**
@ 作者: 秦东
@ 时间: 2024-03-18 11:42:52
@ 功能: 上传图标相关
*/
const imgUploadApiUrl = import.meta.env.VITE_APP_BASE_API+"/api/upordown" //上传地址
const handleAvatarSuccess: UploadProps['onSuccess'] = (
response,
uploadFile
) => {
// imageUrl.value = URL.createObjectURL(uploadFile.raw!)
formConfig.value.imageUrl = response.data.url
}
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
111
1 year ago
// console.log("beforeAvatarUpload",rawFile.type)
初始化数据
1 year ago
if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/jpg' && rawFile.type !== 'image/png' && rawFile.type !== 'image/gif' && rawFile.type !== 'image/icon') {
ElMessage.error('请上传以下格式的图片(jpg、jpeg、png、gif、icon)!'+rawFile.type)
return false
} else if (rawFile.size / 1024 / 1024 > 2) {
ElMessage.error('图片大小不要大于 2MB!')
return false
}
return true
}
const page = ref<number>(1)
const pageSize = ref<number>(200000)
const loadingmore = ref(false)
const loadingnomore = ref(false)
const formGroup = ref<any[]>([])
/**
@ 作者: 秦东
@ 时间: 2024-03-19 08:38:27
@ 功能: 获取表单分组
*/
const gainFormGroupList = () =>{
loadingmore.value = true;
let sendInfo = {
page:page.value,
pagesize:pageSize.value,
state:1
}
customerFormGroupList(sendInfo)
.then((data)=>{
111
1 year ago
// console.log("获取表单分组",data)
初始化数据
1 year ago
formGroup.value = data.data
})
.finally(()=>{
loadingmore.value = false;
})
}
onMounted(() => {
gainFormGroupList()
})
/**
@ 作者: 秦东
@ 时间: 2024-03-19 09:17:51
@ 功能: 控制下拉列表触底加载
*/
const handleVisibleChange = (visible: any) => {
if (visible) {
// 如果下拉框显示
let selectDropdown: any = document.querySelector('.el-select-dropdown__wrap')
// 监听下拉框滚动事件
selectDropdown.addEventListener('scroll', loadNextPage)
} else {
// 如果下拉框隐藏
let selectDropdown: any = document.querySelector('.el-select-dropdown__wrap')
// 移除下拉框滚动事件监听
selectDropdown.removeEventListener('scroll', loadNextPage)
}
}
const loadNextPage = () => {
let selectDropdown: any = document.querySelector('.el-select-dropdown__wrap');
// 判断下拉框是否触底
if (selectDropdown.scrollTop + selectDropdown.clientHeight >= selectDropdown.scrollHeight - 2) {
loadingnomore.value = false
loadingmore.value = true
if (selectoptions.value.length <= 20) {
setTimeout(() => {
selectoptions.value.push({
label: String(selectoptions.value.length),
value: String(selectoptions.value.length),
}
)
loadingmore.value = false
}, 2000)
}else{
loadingmore.value = false
selectDropdown.removeEventListener('scroll', loadNextPage)
loadingnomore.value = true
}
} else {
loadingnomore.value = true
}
}
/**
@ 作者: 秦东
@ 时间: 2024-06-22 13:57:55
@ 功能: 判断该输入框是否不可编辑
*/
const disabledIstrue = (val:string) => {
let ary = ["creater","creater_time","edit_time","owner","org"]
if (ary.includes(val)){
return true;
}else{
return false;
}
}
</script>
<template>
<div class="sidebar-tools">
<el-tabs v-model="state.tabsName">
<el-tab-pane label="字段配置" name="first">
<el-form size="small" class="form">
<!-- <div class=""><h3>通用属性</h3></div> -->
<el-divider content-position="left">通用属性</el-divider>
<template v-for="(item, index) in attrList" :key="index">
<el-form-item :label="item.label" class="form_cont">
<el-select
v-if="item.type === 'select'"
:placeholder="item.placeholder"
v-model="item.value"
:filterable="item.path === 'name'"
:allow-create="item.path === 'name'"
:clearable="item.clearable"
@change="controlChange(item, $event)"
>
<el-option
v-for="(opt, key) in item.dict"
:key="key"
:value="item.path === 'name' ? opt.name : key"
:label="
item.path === 'name' ? `${opt.label}(${opt.name})` : opt
"
/>
</el-select>
<el-switch
v-else-if="item.type === 'switch'"
v-model="item.value"
@change="controlChange(item, $event)"
/>
<template v-else-if="item.type === 'digitpage'">
<el-row>
<el-col :span="12">
<el-select
v-model="item.selectvalue"
:placeholder="item.placeholder"
:filterable="item.path === 'name'"
:allow-create="item.path === 'name'"
:clearable="item.clearable"
@change="digitPageSub(item, $event)"
>
<el-option
v-for="(opt, key) in item.dict"
:key="key"
:value="item.path === 'name' ? opt.name : key"
:label="
item.path === 'name' ? `${opt.label}(${opt.name})` : opt
"
/>
</el-select>
</el-col>
<el-col :span="12">
<el-input-number
v-if="item.selectvalue == 'default'"
v-model="item.value"
class="mx-4"
/>
</el-col>
</el-row>
<div v-if="item.selectvalue == 'simple'" style="width:100%;cursor: pointer; margin-top:10px;" @click="openMathDialog(item)" v-html="item.control.mathFormula.formulaHtml"></div>
<MathFormula v-model:show="mathBoxShow" :sub-unit="subUnit" :unit-info="attrList" :form-listmap="formListmap" @updata-digit="updataDigit" />
</template>
<el-row v-else-if="item.type === 'uploadvideo_url'">
<!-- {{ controlData.control }} -->
<el-upload
:action="uploadUrl" :before-remove="beforeRemove"
:on-success="videoUploadOk" :show-file-list="true"
:on-error="videoUploadErr"
:limit="1"
:on-exceed="handleExceed"
accept=".mp4,.MOV,.WMV,.FLV,.AVI,.AVCHD,.WebM,.MKV,.rmvb">
<el-button v-if="!controlData.control.videoMsg[videoIndex].videoReady" type="primary">点此上传</el-button>
<el-button v-if="controlData.control.videoMsg[videoIndex].videoReady" type="primary">已上传,点击修改</el-button>
</el-upload>
<!-- <el-button v-if="controlData.control.videoMsg[videoIndex].videoReady" type="primary">已上传,点击修改</el-button>
v-if="!controlData.control.videoMsg[videoIndex].videoReady"-->
</el-row>
<!-- <el-row v-else-if="item.type === 'uploadvideo_poster'">
<el-upload
v-if="controlData.control.videoMsg[videoIndex].videoReady&&controlData.control.videoMsg[videoIndex].poster===''"
:action="uploadUrl" :before-remove="beforeRemove"
:on-success="videoUploadOk" :show-file-list="true"
:on-error="videoUploadErr"
accept=".mp4,.MOV,.WMV,.FLV,.AVI,.AVCHD,.WebM,.MKV,.rmvb">
<el-tooltip
class="box-item"
content="不上传则视频封面默认为视频第一帧"
placement="top-end"
>
<el-button type="primary">点此上传</el-button>
</el-tooltip>
</el-upload>
<el-button v-if="!controlData.control[videoIndex].videoReady" type="warning">请先上传视频</el-button>
<el-button v-if="controlData.control.videoMsg[videoIndex].videoReady&&controlData.control.videoMsg[videoIndex].poster!=''" type="primary">已上传,点击修改</el-button>
</el-row> -->
<el-row v-else-if="item.type === 'uploadvideo_autoPlay'">
<el-switch v-model="controlData.control.videoMsg[videoIndex].videoAutoPlay" />
</el-row>
<el-row v-else-if="item.type === 'uploadvideo_loopPlay'">
<el-switch v-model="controlData.control.videoMsg[videoIndex].loop" />
</el-row>
<el-row v-else-if="item.type === 'uploadvideo_width'">
<el-input-number v-model="controlData.control.videoMsg[videoIndex].videoWidth" :step="50" :max="4096"/>
</el-row>
<el-row v-else-if="item.type === 'uploadvideo_height'">
<el-input-number v-model="controlData.control.videoMsg[videoIndex].videoHeight" :step="50" :max="2160"/>
</el-row>
<el-row v-else-if="item.type === 'carousel'">
<el-button type="primary" append-to-body="true" modal="true" @click="dialogTableVisible = true" >轮播图设置</el-button>
</el-row>
<el-row v-else-if="item.type === 'transfer_name'">
<el-input
v-model="controlData.config.transferName"
placeholder="请输入穿梭框名"
style="width:221px"
/>
</el-row>
<el-row v-else-if="item.type ==='transfer_options_datasource'">
<!-- <span style="display:inline-block;width:78px">选项数据源</span> -->
<el-select
v-model="controlData.config.transferDataSource"
placeholder="选项数据源"
style="width: 150px; height:20px">
<el-option
v-for="dataSourceOption1 in transferDataSourceOptions"
:key="dataSourceOption1.value"
:label="dataSourceOption1.label"
:value="dataSourceOption1.value"
/>
</el-select>
<div v-if="controlData.config.transferDataSource==='固定选项'" style="width: auto;margin-top:33px;margin-left:-220px;padding-bottom: 6px;">
<el-button type="primary" append-to-body="true" modal="true" @click="transferDialogTableVisible = true" >编辑固定选项</el-button>
</div>
<div v-if="controlData.config.transferDataSource==='数据源'" style="width: auto;margin-top: 20px;">
<!-- <span style="display:inline-block;width:50px;margin-bottom: 25px;">接口url</span> -->
<el-input
v-model="controlData.config.apiUrl"
style="width:278px;margin-left: -68px;margin-top: -5px;"
placeholder="数据源接口url">
<template #prepend>
<el-select
v-model="controlData.config.method"
style="width: 100px">
<el-option label="get" value="get" />
<el-option label="post" value="post" />
</el-select>
</template>
</el-input>
</div>
</el-row>
<el-row v-else-if="item.type === 'lowcodeImage_radius'">
<el-switch v-model="controlData.control.radius" style="margin-right: 15px;"/>
<el-popover
placement="top-start"
:width="200"
trigger="hover"
content="数值越大圆角程度越高"
>
<template #reference>
<el-input-number v-if="controlData.control.radius" v-model="controlData.control.radiusNum" :step="1"/>
</template>
</el-popover>
</el-row>
<el-row v-else-if="item.type === 'lowcodeImage_url'">
<el-upload
:action="uploadUrl" :before-remove="beforeRemove"
:on-success="lowcodeImageUploadSuccess"
:on-error="videoUploadErr"
:limit="1"
accept=".jpg,.jpeg,.png,.tif,.tga,.bmp,.dds,.svg,.eps,.pdf,.hdr,.raw,.exr,.psd,.afphoto,.afdesign">
<el-button v-if="!controlData.control.uploadFlag" type="primary">点此上传</el-button>
<el-button v-if="controlData.control.uploadFlag" type="primary">已上传,点击修改</el-button>
</el-upload>
</el-row>
<el-row v-else-if="item.type === 'lowcodeImage_showMode'">
<el-select
v-model="controlData.control.showMode"
placeholder="选项数据源"
style="width: 150px; height:20px">
<el-option
v-for="showModeSelected in showModeSelectOptions"
:key="showModeSelected.value"
:label="showModeSelected.label"
:value="showModeSelected.value"
/>
</el-select>
<div v-if="controlData.control.showMode==='自定义像素值'" style="width: auto;margin-top:33px;margin-left:-187px;padding-bottom: 6px;">
<span style="margin-right: 10px;">宽度(像素) </span><el-input-number v-model="controlData.control.pxWidth" style="margin-bottom: 10px;" /><br/>
<span style="margin-right: 10px;">高度(像素) </span><el-input-number v-model="controlData.control.pxHeight" />
</div>
<div v-if="controlData.control.showMode==='自定义占父容器比例'" style="width: auto;margin-top:33px;margin-left:-187px;padding-bottom: 6px;">
<span style="margin-right: 10px;">百分比宽 </span><el-input-number v-model="controlData.control.widthPercent" style="margin-bottom: 10px;"/><br/>
<span style="margin-right: 10px;">百分比高 </span><el-input-number v-model="controlData.control.heightPercent" />
</div>
</el-row>
<el-row v-else-if="item.type === 'lowcodeImage_fit'">
<el-radio-group v-model="controlData.control.fit">
<el-popover
placement="top-start"
优化图片契合度名称
1 year ago
title="填充"
初始化数据
1 year ago
:width="200"
trigger="hover"
content="默认值。调整替换后的内容大小，以填充元素的内容框。如有必要，将拉伸或挤压物体以适应该对象。"
>
<template #reference>
优化图片契合度名称2
1 year ago
<el-radio :label="1" :value="1">填充</el-radio><!-- fill -->
初始化数据
1 year ago
</template>
</el-popover>
<el-popover
placement="top-start"
优化图片契合度名称
1 year ago
title="适应"
初始化数据
1 year ago
:width="200"
trigger="hover"
content="缩放替换后的内容以保持其纵横比，同时将其放入元素的内容框。"
>
<template #reference>
优化图片契合度名称2
1 year ago
<el-radio :label="2" :value="2">适应</el-radio><!-- contain -->
初始化数据
1 year ago
</template>
</el-popover>
<el-popover
placement="top-start"
优化图片契合度名称2
1 year ago
title="裁切"
初始化数据
1 year ago
:width="200"
trigger="hover"
content="调整替换内容的大小，以在填充元素的整个内容框时保持其长宽比。该对象将被裁剪以适应。"
>
<template #reference>
优化图片契合度名称2
1 year ago
<el-radio :label="3" :value="3">裁切</el-radio><!-- cover -->
初始化数据
1 year ago
</template>
</el-popover>
<el-popover
placement="top-start"
优化图片契合度名称
1 year ago
title="无"
初始化数据
1 year ago
:width="200"
trigger="hover"
content="不对替换的内容调整大小。"
>
<template #reference>
优化图片契合度名称2
1 year ago
<el-radio :label="4" :value="4">无</el-radio><!-- none -->
初始化数据
1 year ago
</template>
</el-popover>
<el-popover
placement="top-start"
优化图片契合度名称
1 year ago
title="缩减"
初始化数据
1 year ago
:width="200"
trigger="hover"
content="调整内容大小就像没有指定内容或包含内容一样（将导致较小的具体对象尺寸）"
>
<template #reference>
优化图片契合度名称2
1 year ago
<el-radio :label="5" :value="5">缩减</el-radio><!-- scale-down -->
初始化数据
1 year ago
</template>
</el-popover>
</el-radio-group>
</el-row>
<el-row v-else-if="item.type === 'lowcodeImage_boderAndShadow'">
<el-switch v-model="controlData.control.boderAndShadow" style="margin-right: 15px;"/>
</el-row>
<el-row v-else-if="item.type === 'lowcodeImage_link'">
<el-input
v-model="controlData.control.link"
placeholder="请录入图片链接地址"
style="width:221px"
/>
</el-row>
<el-row v-else-if="item.type === 'lowcodeImage_marginAndPadding'">
<div style="width: auto;margin-top:33px;margin-left:-47px;padding-bottom: 6px;">
<span style="margin-right: 10px;"> 外边距(上)</span><el-input-number v-model="controlData.control.mt" style="margin-bottom: 10px;"/><br/>
<span style="margin-right: 10px;"> 外边距(下)</span><el-input-number v-model="controlData.control.mb" style="margin-bottom: 10px;"/><br/>
<span style="margin-right: 10px;"> 外边距(左)</span><el-input-number v-model="controlData.control.ml" style="margin-bottom: 10px;"/><br/>
<span style="margin-right: 10px;"> 外边距(右)</span><el-input-number v-model="controlData.control.mr" style="margin-bottom: 10px;"/><br/>
<span style="margin-right: 10px;"> 内边距(上)</span><el-input-number v-model="controlData.control.pt" style="margin-bottom: 10px;"/><br/>
<span style="margin-right: 10px;"> 内边距(下)</span><el-input-number v-model="controlData.control.pb" style="margin-bottom: 10px;"/><br/>
<span style="margin-right: 10px;"> 内边距(左)</span><el-input-number v-model="controlData.control.pl" style="margin-bottom: 10px;"/><br/>
<span style="margin-right: 10px;"> 内边距(右)</span><el-input-number v-model="controlData.control.pr" style="margin-bottom: 10px;"/><br/>
</div>
</el-row>
<el-row v-else-if="item.type === 'lowcodeImage_float'">
<el-switch v-model="controlData.control.floatFlag" style="margin-right: 15px;"/>
<el-select
v-if="controlData.control.floatFlag"
v-model="controlData.control.floatValue"
style="width: 150px; height:20px">
<el-option
v-for="showModeSelected1 in floatSelectOptions"
:key="showModeSelected1.value"
:label="showModeSelected1.label"
:value="showModeSelected1.value"
/>
</el-select>
</el-row>
<el-row v-else-if="item.type === 'associatedForms_hide'">
<el-button v-if="controlData.control.hideConditionHtml===''" style="padding-top: 5px;" type="primary" link append-to-body="true" modal="true" @click="associatedFormsHideDialoghandle" >设置隐藏条件</el-button>
<div style="width:100%; cursor: pointer;" @click="associatedFormsHideDialoghandle" v-html="controlData.control.hideConditionHtml"></div>
</el-row>
<el-row v-else-if="item.type === 'associatedForms_form'">
<el-button type="primary" link style="display:block;cursor: pointer;" @click="chooseAssociatedForm">{{ controlData.control.asfasfLabel==''?'选择关联表单':controlData.control.asfasfLabel }}</el-button>
</el-row>
<el-row v-else-if="item.type === 'associatedForms_dataRange'">
<el-button v-if="controlData.control.dataRangeConditionHtml===''" style="padding-top: 5px;" type="primary" link append-to-body="true" modal="true" @click="associatedFormsDataRangeDialoghandle" >设置数据范围</el-button>
<div style="width:100%; cursor: pointer;" @click="associatedFormsDataRangeDialoghandle" v-html="controlData.control.dataRangeConditionHtml"></div>
</el-row>
<el-row v-else-if="item.type === 'associatedForms_FillRoles'">
<el-button style="padding-top: 5px;" type="primary" link append-to-body="true" modal="true" @click="associatedFormsDataFillRolesDialoghandle" >设置数据填充规则</el-button>
</el-row>
<el-input
v-else
:type="item.inputStyle"
v-model="item.value"
:disabled="disabledIstrue(item.value)"
:placeholder="item.placeholder"
@input="controlChange(item, $event)"
/>
</el-form-item>
</template>
<template v-if="controlData.config">
<el-form-item label="联动条件" class="form_cont">
<el-switch v-model="controlData.config.linkKey" />
</el-form-item>
<template v-if="controlData.config.linkKey">
<el-form-item class="form_cont">
<el-input
v-model="controlData.config.linkValue"
type="textarea"
placeholder="表达式如: $.input>1 $表示为当前表单数据，input为字段标识"
/>
</el-form-item>
<el-form-item
class="form_cont"
v-if="
showHide(
[
'input',
'textarea',
'radio',
'checkbox',
'select',
'date',
'switch',
'number',
'cascader',
'slider',
'datePicker',
'timePicker',
'colorPicker',
'inputNumber',
'rate',
'treeSelect'
],
true
)
"
label="联动结果"
>
<el-radio-group
v-model="controlData.config.linkResult"
class="option-radio"
>
<el-radio label="hidden">隐藏(默认)</el-radio>
<el-radio label="disabled">禁用</el-radio>
</el-radio-group>
</el-form-item>
</template>
</template>
<template v-if="showHide(['tabs'], true)">
<!-- <div class="h3"><h3>标签配置项</h3></div> -->
<el-divider content-position="left">标签配置项</el-divider>
<el-form-item
class="form_cont"
v-for="(item, index) in controlData.columns"
:key="index"
>
<el-col :span="12">
<el-input v-model="item.label" placeholder="标签配置项" />
</el-col>
<el-col :span="2" :offset="1">
<i
class="icon-del"
@click="delSelectOption(index as number, 'tabs')"
></i>
</el-col>
</el-form-item>
<el-form-item class="form_cont">
<el-button @click="addSelectOption('tabs')">增加标签</el-button>
</el-form-item>
</template>
<!--编号规则设置--->
<div
v-if="showHide(['serialNumber'],true)"
>
<!-- <div class="h3"><h3>编码规则配置</h3></div> -->
<el-divider content-position="left">编码规则配置</el-divider>
<el-form-item label="编码方式" class="form_cont">
<el-switch v-model="controlData.config.automatic" inline-prompt active-text="自动编码" inactive-text="手动编码" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #E6A23C" />
</el-form-item>
<div v-if="controlData.config.automatic">
<el-form-item v-for="(item, index) in controlData.config.customRules" :key="index" class="form_cont">
<el-input v-model="item.rule" :placeholder="item.message?item.message:'请输入自定义字符'">
<template #prepend>
<el-select
v-model="item.type"
style="width: 100px"
@change="rulesSelectNumChange(item, $event)"
>
<el-option
v-for="list in state.numberRulesList"
:key="list.type"
:label="list.label"
:value="list.type"
/>
</el-select>
</template>
<template #append>
<i
class="icon-del"
@click="delNumRules(index as number)"
></i>
</template>
</el-input>
</el-form-item>
<el-form-item class="form_cont">
<el-button @click="addNumRules">添加规则</el-button>
</el-form-item>
</div>
</div>
1.修改开关的关联选项设置按钮不显示bug 2.优化关联表单的tinymce编辑器样式和提醒
1 year ago
<div v-if="showHide(['switch'],true)">
初始化数据
1 year ago
<el-button @click="handelGlxxszDialogSwitch">关联选项设置</el-button>
</div>
<div v-if="showHide(['radio','select',],true)&&controlData.config.optionsType==0">
<el-button @click="handelGlxxszDialog">关联选项设置</el-button>
</div>
<div v-if="showHide(['checkbox',],true)&&controlData.config.optionsType==0">
<el-button @click="handelGlxxszDialogCheckbox">关联选项设置</el-button>
</div>
<div
v-if="
showHide(
[
'radio',
'select',
'checkbox',
'cascader',
'inputSlot',
'treeSelect'
],
true
)
"
>
<!-- <div class="h3"><h3>选项配置</h3></div> -->
<el-divider content-position="left">选项配置</el-divider>
<el-form-item v-if="showHide(['select'], true)" label="添加全部项" class="form_cont">
<el-input
v-model="controlData.config.addAll"
placeholder="请输入全部项文案"
/>
</el-form-item>
<el-form-item label="选项数据源" class="form_cont">
<el-select
v-model="controlData.config.optionsType"
@change="optionsTypeChanged"
>
<el-option :value="0" label="固定选项" />
<el-option :value="3" label="系统表单字段"/>
<el-option :value="1" label="数据源" />
<el-option :value="2" label="接口字典" />
</el-select>
</el-form-item>
<template v-if="controlData.config.optionsType === 0">
多选框组新增拖动排序功能---单页面表单
1 year ago
<div v-if="controlData.type !== 'cascader'&&controlData.type !== 'checkbox'">
初始化数据
1 year ago
<el-form-item
v-for="(item, index) in controlData.options"
:key="index"
class="form_cont"
label="选项标签"
>
<el-col :span="10">
<el-input v-model="item.label" placeholder="选项标签" />
</el-col>
<!-- <el-col :span="10" :offset="1">
<el-input v-model="item.value" placeholder="选项值" />
</el-col> -->
<el-col :span="2" :offset="1">
<i
class="icon-del"
@click="delSelectOption(index as number)"
></i>
</el-col>
</el-form-item>
</div>
多选框组新增拖动排序功能---单页面表单
1 year ago
<!-- 多选选择框选项拖动功能 liwenxuan 20240815 start -->
<div v-if="controlData.type !== 'cascader'&&controlData.type == 'checkbox'">
<draggable
:list="controlData.options"
:force-fallback="true"
chosen-class="chosenClass"
animation="300"
>
<template #item="{ element }">
<div class="item form_cont">
<el-form-item>
<el-col :span="2" style="padding-top:4px;cursor: move;color: #66B1FF">
<i class="icon-move" ></i>
</el-col>
<el-col :span="6" style="cursor: move;">
选项标签
</el-col>
<el-col :span="10">
<el-input v-model="element.label" placeholder="选项标签" />
</el-col>
<el-col :span="2" :offset="1">
<i
class="icon-del"
@click="delSelectOption(element.value as number)"
></i>
</el-col>
</el-form-item>
</div>
</template>
</draggable>
</div>
<!-- 多选选择框选项拖动功能 liwenxuan 20240815 end -->
初始化数据
1 year ago
<el-form-item class="form_cont">
<el-button @click="addSelectOption">{{ controlData.type === 'cascader' ? '编辑' : '新增' }}</el-button>
</el-form-item>
</template>
<template v-if="controlData.config.optionsType === 3">
<el-button type="primary" style="margin-bottom:10px;margin-left:11px" plain @click="optionsValue3Setting">选择系统表单字段</el-button>
<!-- <el-button style="padding-top: 5px;" type="primary" link append-to-body="true" modal="true" @click="optionsValue3Setting" >选择系统表单字段</el-button> -->
</template>
<template v-else>
<el-form-item class="form_cont">
<el-input
v-model="controlData.config.optionsFun"
:placeholder="
getOptionPlaceholder(controlData.config.optionsType)
"
>
<template
v-if="controlData.config.optionsType === 1"
#prepend
>
<el-select
v-model="controlData.config.method"
style="width: 80px"
>
<el-option label="get" value="get" />
<el-option label="post" value="post" />
</el-select>
</template>
</el-input>
</el-form-item>
<template v-if="controlData.config.optionsType === 1">
<el-form-item label="指定label属性值" class="form_cont">
<el-input
v-model="controlData.config.label"
placeholder="返回数据中没有label时可设置"
/>
</el-form-item>
<el-form-item label="指定value属性值" class="form_cont">
<el-input
v-model="controlData.config.value"
placeholder="返回数据中没有value时可设置"
/>
</el-form-item>
</template>
<el-form-item v-if="controlData.config.optionsType === 1" class="form_cont">
<el-button
@click="
optionsEvent(
'optionsParams',
'请求前处理事件，参数(data,route,form) data请求参数,route页面路由,form表单值'
)
"
>beforeRequest</el-button>
<el-button
@click="
optionsEvent(
'optionsResult',
'请求返回结束处理；，也可为字符串，如opt=formatTest'
)
"
>afterResponse</el-button>
</el-form-item>
</template>
<el-form-item label="尝试转换value值为" class="form_cont">
<el-select
v-model="controlData.config.transformData"
placeholder="默认为number"
>
<el-option value="none">不转换</el-option>
<el-option value="number">number</el-option>
<el-option value="string">string</el-option>
</el-select>
</el-form-item>
</div>
<template
v-if="
!state.isSearch &&
showHide([
'txt',
'title',
'table',
'grid',
'tabs',
'card',
'switch',
'gridChild',
'tableColumn',
'divider',
'div',
'button'
])
"
>
<!-- <div class="h3"><h3>校验设置</h3></div> -->
<el-divider content-position="left">校验设置</el-divider>
<div v-if="showHide(['input', 'password', 'component'], true)">
<el-form-item
v-for="(item, index) in controlData.customRules"
:key="item.type"
class="form_cont"
>
<el-input v-model="item.message" placeholder="校验提示信息">
<template #prepend>
<el-select
v-model="item.type"
style="width: 80px"
@change="rulesSelectChange(item, $event)"
>
<el-option
v-for="list in state.customRulesList"
:key="list.type"
:label="list.label"
:value="list.type"
/>
</el-select>
</template>
<template #append>
<i
class="icon-del"
@click="delAddRules(index as number)"
></i>
</template>
</el-input>
<el-input
v-if="item.type === 'rules'"
v-model="item.rules"
placeholder="正则表达式"
/>
<el-input
v-if="item.type === 'methods'"
v-model="item.methods"
placeholder="方法名称，此方法仅适用于导出vue文件"
/>
</el-form-item>
<el-form-item class="form_cont">
<el-button @click="addRulesFast">快速添加</el-button>
<el-button @click="addRules(state.tooltip.rules)"
>编写校验规则
<el-tooltip
:content="state.tooltip.rules"
placement="top"
raw-content
>
<el-icon>
<QuestionFilled />
</el-icon>
</el-tooltip>
</el-button>
</el-form-item>
</div>
<el-form-item class="form_cont" v-else>
<el-checkbox
:model-value="checkboxRequired"
@change="requiredChange"
>必填
</el-checkbox>
<el-input
v-if="controlData.item?.rules && controlData.item?.rules[0]"
v-model="controlData.item.rules[0].message"
placeholder="自定义必填错误提示"
/>
</el-form-item>
</template>
<!-- <div class="h3"><h3>其他属性</h3></div> -->
<el-divider content-position="left">其他属性</el-divider>
<div v-if="showHide(['grid', 'card', 'gridChild', 'divider', 'div'])" class="form_cont">
<el-button
size="small"
@click="openAttrDialog('', state.tooltip.props)"
>编辑属性
<el-tooltip :content="state.tooltip.props" placement="top">
<el-icon>
<QuestionFilled />
</el-icon>
</el-tooltip>
</el-button>
</div>
<el-divider content-position="left">高级属性</el-divider>
<LayoutPage v-if="cssIsShouw(attrList)" v-model:styles-val="controlDataStyls" :place="controlData.type" />
</el-form>
</el-tab-pane>
<el-tab-pane label="表单配置" name="second">
<el-form size="small" class="form">
<el-divider content-position="left">基础配置</el-divider>
<el-form-item class="form_cont">
<template #label>
归属分组
</template>
<el-select id="groupForm" v-model="formConfig.groupKey" placeholder="Select" ref="groupForm">
<el-option v-for="item in formGroup.list" :key="item.idStr" :label="item.title" :value="item.idStr" />
<p v-if="loadingmore">加载中</p>
<p v-if="loadingnomore">无数据</p>
</el-select>
</el-form-item>
<el-form-item
v-for="(item, index) in formAttr.filter(item => !item.hide)"
:label="item.label"
:key="index"
class="form_cont"
>
<el-select
v-if="item.type === 'select'"
v-model="item.value"
:filterable="item.key === 'class'"
:allow-create="item.key === 'class'"
:placeholder="item.placeholder"
:clearable="item.clearable"
@change="formAttrChange(item)"
>
<el-option
v-for="opt in item.options"
:key="opt.label || opt.name"
:label="opt.label || opt.name"
:value="formatNumber(opt.value ?? opt.id)"
/>
</el-select>
<el-switch
v-else-if="item.type === 'switch'"
v-model="item.value"
@input="formAttrChange(item)"
/>
<el-input
v-else
v-model="item.value"
:placeholder="item.placeholder"
:disabled="isNotWrite(item)"
@input="formAttrChange(item)"
/>
</el-form-item>
<el-form-item class="form_cont">
<template #label>
表单图标
</template>
<el-upload
class="avatar-uploader"
:action="imgUploadApiUrl"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
>
<img v-if="formConfig.imageUrl" :src="formConfig.imageUrl" class="avatar" />
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
</el-upload>
</el-form-item>
<el-form-item class="form_cont">
数据标题
<el-tree-select
v-model="formData.dataTitle"
multiple
clearable
collapse-tags
:data="associatedFormsCurrentFormFieldTreeNoTable"
:render-after-expand="false"
style="width: 240px"
/>
</el-form-item>
<template v-if="!state.isSearch">
<el-divider content-position="left">接口数据事件</el-divider>
<el-form-item v-if="!state.isSearch" class="form_cont">
<template #label
>
添加时获取请求
<el-tooltip
content="新增表单数据时，从接口获取新增初始数据"
placement="top"
>
<el-icon>
<QuestionFilled />
</el-icon>
</el-tooltip>
</template>
<el-switch
v-model="formConfig.addLoad"
@change="
formAttrChange({ key: 'addLoad', path: 'config' }, $event)
"
/>
</el-form-item>
<el-form-item label="新增数据保存url" class="form_cont">
<el-input
v-model="formConfig.addUrl"
placeholder="表单提交的url，非特殊不需要设置"
/>
</el-form-item>
<el-form-item label="修改数据保存url" class="form_cont">
<el-input
v-model="formConfig.editUrl"
placeholder="修改提交的url，非特殊不需要设置"
/>
</el-form-item>
<el-form-item label="获取表单数据url" class="form_cont">
<el-input
v-model="formConfig.requestUrl"
placeholder="获取表单数据url，非特殊不需要设置"
/>
</el-form-item>
<el-form-item class="event-btn form_cont">
<el-button
@click="
eventClick(
'beforeRequest',
'获取表单初始数据前事件，可修改请求参数'
)
"
>beforeRequest
</el-button>
<el-button
@click="
eventClick(
'afterResponse',
'获取表单初始数据后事件，可对请求返回数据进行处理；也可为字符串，如opt=formatTest'
)
"
>afterResponse
</el-button>
<el-button
@click="
eventClick(
'beforeSubmit',
'表单数据提交前事件，可对提交数据进行处理；也可为字符串，如opt=formatTest'
)
"
>beforeSubmit
</el-button>
<el-button
@click="eventClick('afterSubmit', '表单数据提交成功事件')"
>afterSubmit
</el-button>
<el-button
@click="
eventClick(
'change',
'表单组件值改变事件。当表单某值改变时，可修改其他组件的值；也可为字符串，如opt=formChange,字符串即为/utils/formChangeValue(name,model,key)中的key值'
)
"
>表单组件改变事件change
</el-button>
</el-form-item>
</template>
<el-divider content-position="left">表单整体布局</el-divider>
<el-form-item label="组件尺寸" class="form_cont">
<el-radio-group v-model="formData.size">
<el-radio-button label="large">大</el-radio-button>
<el-radio-button label="default">适中</el-radio-button>
<el-radio-button label="small">小</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="表单样式名称" class="form_cont">
<el-select
v-model="formData.class"
class="m-2"
placeholder="额外添加的表单class类名"
>
<el-option
v-for="item in optionsCss"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="行内表单模式" class="form_cont">
<el-switch v-model="formData.inline" active-text="开启" inactive-text="关闭" />
</el-form-item>
<el-form-item label="标签宽度" class="form_cont">
<el-input v-model="formData.labelWidth" clearable placeholder="表单标签宽度">
<template #append >PX</template>
</el-input>
</el-form-item>
<el-form-item label="标签后缀" class="form_cont">
<el-input v-model="formData.labelSuffix" placeholder="表单标签后缀" />
</el-form-item>
<el-form-item label="表单标签对齐方式" class="form_cont">
<el-radio-group v-model="formData.labelPosition">
<el-radio-button label="left">左</el-radio-button>
<el-radio-button label="right">右</el-radio-button>
<el-radio-button label="top">上</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="必填项星号位置" class="form_cont">
<el-radio-group v-model="formData.requireAsteriskPosition">
<el-radio-button label="left">左</el-radio-button>
<el-radio-button label="right">右</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="是否隐藏星号" class="form_cont">
<el-switch v-model="formData.hideRequiredAsterisk" active-text="隐藏" inactive-text="显示" style="--el-switch-on-color: #ff4949; --el-switch-off-color: #13ce66" />
</el-form-item>
<el-form-item label="校验错误信息" class="form_cont">
<el-switch v-model="formData.showMessage" active-text="显示" inactive-text="隐藏" />
</el-form-item>
<el-form-item label="以行内形式展示校验信息" class="form_cont">
<el-switch v-model="formData.inlineMessage" active-text="显示" inactive-text="隐藏" />
</el-form-item>
<el-form-item label="是否显示校验结果反馈图标" class="form_cont">
<el-switch v-model="formData.statusIcon" active-text="显示" inactive-text="隐藏" />
</el-form-item>
<el-divider content-position="left">表单功能补充</el-divider>
<el-form-item class="form_cont">
<el-button @click="editFormStyle(state.tooltip.css)"
>
编辑表单样式
<el-tooltip :content="state.tooltip.css" placement="top">
<el-icon>
<QuestionFilled />
</el-icon>
</el-tooltip>
</el-button>
<el-button @click="editFormDict(state.tooltip.dict)"
>
设置数据字典
<el-tooltip :content="state.tooltip.dict" placement="top">
<el-icon>
<QuestionFilled />
</el-icon>
</el-tooltip>
</el-button>
</el-form-item>
</el-form>
</el-tab-pane>
</el-tabs>
</div>
<!-- 轮播图设置弹窗 20240122 start -->
<el-dialog v-model="dialogTableVisible" title="轮播图设置" top="20px" style="margin-top:70px,margin-left:270px">
<div v-if="controlData.type=='lowcodeCarsusel'" style="margin-bottom: 30px;">
<span style="margin-right: 10px;">轮播图宽度(像素):</span><el-input-number v-model="controlData.control.config.carsuselWidth" :step="64" :max="4096" :min="178"/>
<span style="margin-left:15px;margin-right: 10px;">轮播图高度(像素):</span><el-input-number v-model="controlData.control.config.carsuselHeight" :step="36" :max="4096" :min="100"/>
<span style="margin-left:15px;margin-right: 10px;">切图间隔(毫秒):</span><el-input-number v-model="controlData.control.config.interval" :step="200"/>
</div>
<el-table v-if="controlData.type=='lowcodeCarsusel'" :data="controlData.control.carsuselConfigArr" border style="width: 100%" row-key="imgId">
<el-table-column label="设置图片" width="180" >
<template #default="propFlag">
<el-upload
:action="uploadUrl" :before-remove="beforeRemove"
:on-success="carouselImgUploadSuccess"
:on-error="videoUploadErr"
:limit="1"
accept=".jpg,.jpeg,.png,.tif,.tga,.bmp,.dds,.svg,.eps,.pdf,.hdr,.raw,.exr,.psd,.afphoto,.afdesign">
<el-button v-if="!propFlag.row.uploadFlag" type="primary" @click="changeCurrentUploadImgid(propFlag.row)">点此上传</el-button>
<el-button v-if="propFlag.row.uploadFlag" type="primary" @click="changeCurrentUploadImgid(propFlag.row)">已上传,点击修改</el-button>
</el-upload>
</template>
</el-table-column>
<el-table-column prop="imgUrl" label="查看图片" width="180">
<template #default="imgScope">
<!-- {{ imgScope.row.imgUrl }} -->
<el-image style="width: 100px; height: 100px;cursor:pointer;" :src="imgScope.row.imgUrl" fit="contain" alt="暂未上传" @click="handlePreview(imgScope.$index, imgScope.row)" >
<template #error>
<div class="image-slot">
<el-image style="width: 100px; height: 100px;" :src="errimg" fit="contain" ></el-image>
</div>
</template>
</el-image>
</template>
</el-table-column>
<el-table-column prop="link" label="链接地址">
<template #default="linkScope">
<el-input v-model="linkScope.row.link" placeholder="输入图片的链接地址" />
</template>
</el-table-column>
<el-table-column fixed="right" label="操作（增/删）" width="120" >
<template #default="scope">
<el-button v-if="controlData.control.carsuselConfigArr.length>1" type="danger" :icon="Delete" circle @click="deleteRow(scope.row)"/>
<el-button v-if="controlData.control.carsuselConfigArr[controlData.control.carsuselConfigArr.length-1].imgId == scope.row.imgId" type="success" :icon="Plus" circle @click="createRow(scope.row)" />
</template>
</el-table-column>
</el-table>
</el-dialog>
<!-- 图片预览 -->
<el-image-viewer
v-if="showImagePreview"
:zoom-rate="1.2"
:url-list="carouselImgUrlList"
@close="closePreview"
/>
<el-dialog v-model="transferDialogTableVisible" title="创建穿梭框选项树" top="150px" style="margin-top:70px;" width="50%" >
<div v-if="controlData.type=='lowcodeTransfer'">
<el-button type="success" plain style="margin-top: 5px;margin-bottom: 5px;" @click="addRootNode()">新增根节点</el-button>
<!-- 建立树 -->
<div class="custom-tree-container">
<el-tree
:data="controlData.control.fixedOptions"
show-checkbox
node-key="id"
:default-expand-all = "false"
:expand-on-click-node="true"
>
<template #default="{ node, data }">
<span class="custom-tree-node">
<span>{{ node.label }}</span>
<span style="float: right;">
<a style="color: green;" @click="append(data)"> 新增子节点 </a>
<a style="margin-left: 8px;" @click="changeLabel(node,data)"> 编辑节点名 </a>
<a style="margin-left: 8px;color: orange;" @click="setNodeEnable(node,data)"> 设为可选/不可选 </a>
<a style="margin-left: 8px;color: red;" @click="remove(node, data)"> 删除本节点 </a>
</span>
</span>
</template>
</el-tree>
</div>
</div>
</el-dialog>
<!-- 穿梭框设置弹窗 liwenxuan 20240217 end -->
<!-- 关联表单设置弹窗 liwenxuan 20240402 start -->
<el-dialog v-model="associatedFormsChooseDialogFlag" class="glxxsztc" top="150px" :close-on-click-modal="false" title="选择关联表单" :show-close="false" style="margin-top:70px;" width="50%" >
<template v-if="controlData.type=='associatedForms'">
<div style="display:flex;margin-bottom: 2px;margin-top:28px"><span style="font-size: larger;margin-left: 35px;margin-right: 15px;">请选择表单</span>
<el-tree-select
v-model="controlData.control.formid"
style="width: 390px;"
:data="customerFormTree[0].children"
check-strictly
:render-after-expand="false"
filterable
@change="formidChanged"
/>
</div>
</template>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="handleDetermineAssociatedFormsChooseDialog">
确定
</el-button>
</div>
</template>
</el-dialog>
<el-dialog v-model="associatedFormsHideDialogFlag" title="隐藏条件" top="150px" :close-on-click-modal="false" :show-close="false" style="margin-top:70px ;min-height: 500px" width="50%" >
<template v-if="controlData.type=='associatedForms'">
<div class="common-layout">
<el-container>
<el-aside width="300px" style="height:420px;border: 1px solid gainsboro;margin-right: 5px;">
<el-input
v-show="fieldTreeSearchFlag"
v-model="fieldTreeFilterText"
style="width:98%;margin: 3px;"
placeholder="搜索字段"
class="filter-tree"
/>
<el-tree
ref="fieldTreeRef"
node-key="id"
empty-text="请先保存当前表单"
:data="associatedFormsCurrentFormFieldTree"
:props="treeDefaultProps"
:filter-node-method="filterNode"
style="max-width: 600px; border: 1px solid gainsboro; margin: 3px;"
@node-expand="handleFieldTreeExpand"
@node-collapse="handleFieldTreeCollapse"
@node-contextmenu="handleFieldTreeContextmenu"
/>
<el-input
v-show="orgTreeSearchFlag"
v-model="orgTreeFilterText"
style="width:98%;margin: 3px;"
placeholder="搜索字段"
class="filter-tree"
/>
<el-tree
ref="orgTreeRef"
style="max-width: 600px; border: 1px solid gainsboro; margin: 3px;"
:data="orgAndManTree"
:props="treeDefaultProps"
:filter-node-method="filterNode"
@node-expand="handleOrgTreeExpand"
@node-collapse="handleOrgTreeCollapse"
@node-contextmenu="handleOrgTreeContextmenu"
/>
<el-input
v-show="roleTreeSearchFlag"
v-model="roleTreeFilterText"
style="width:98%;margin: 3px;"
placeholder="搜索字段"
class="filter-tree"
/>
<el-tree
ref="roleTreeRef"
style="max-width: 600px; border: 1px solid gainsboro; margin: 3px;"
:data="roleTree"
:props="treeDefaultProps"
:filter-node-method="filterNode"
@node-expand="handleRoleTreeExpand"
@node-collapse="handleRoleTreeCollapse"
@node-contextmenu="handleRoleTreeContextmenu"
/>
</el-aside>
<el-main style="border: 1px solid gainsboro; padding: 3px;" class="associatedFormsHideDialogMain">
<div style="border: 1px solid gainsboro; height: 7%; border-bottom: 0px; padding-top: 3px; padding-left: 5px; background-color: #E6F3FE;">当满足以下条件时此控件隐藏</div>
关联表单隐藏效果-组织机构条件
1 year ago
<div id="associatedFormsHideEditArea" style="border: 1px solid gainsboro; height: 38%; border-bottom: 0px;">
初始化数据
1 year ago
<AssociatedFormsTinyace ref="aft" :aft-text="controlData.control.hideConditionHtml" :aft-text-copy = "controlData.control.hideConditionHtmlCopy" @text-change = "aftTextChanged" @gongshi-change = "aftGongshiChanged"></AssociatedFormsTinyace>
<!-- <div style="border: 1px solid #4189EF;width:90px;height:26px;border-radius: 3px;padding:2px;text-align: center;cursor:pointer;float: right;margin-top: -32px;margin-right: 5px;z-index:99999999;position: relative;">
<span style="color: #4189EF;font:6px;margin-right: 5px;">fx</span>插入函数
</div> -->
</div>
关联表单隐藏效果-组织机构条件
1 year ago
<div style="border: 1px solid gainsboro; height: 55%; padding-top: 20px;">
初始化数据
1 year ago
<ul>
<li>请从左侧面板<span style="color: red">右击</span>选择字段或选项</li>
关联表但条件设置帮助描述优化
1 year ago
<li>支持的符号：<span style="color: red">'==', '>=', '>', '<=', '<', '!='</span></li>
<li>支持<span style="color: red">"包含,不包含,当前用户"</span>关键字,用于组织机构条件和角色条件</li>
<li>参考举例：</li>
<span style="margin-left: 14px;">年龄>10</span><br>
关联表单隐藏效果-组织机构条件
1 year ago
<span style="margin-left: 14px;">企管部包含当前用户</span><br>
<span style="margin-left: 14px;">绩效考核执行人包含当前用户</span><br>
<span style="margin-left: 14px;">张三!=当前用户</span>
初始化数据
1 year ago
</ul>
</div>
</el-main>
</el-container>
</div>
</template>
<template #footer>
<div class="dialog-footer">
<el-button @click="asfhTextCancel">取消</el-button>
<el-button type="primary" @click="handleDetermine">
确定
</el-button>
</div>
</template>
</el-dialog>
<!-- 数据范围编辑弹窗 -->
<el-dialog v-model="associatedFormsDataRangeDialogFlag" title="数据范围" top="150px" :close-on-click-modal="false" :show-close="false" style="margin-top:70px ;min-height: 500px" width="50%" >
<template v-if="controlData.type=='associatedForms'">
<div class="common-layout">
<el-container>
<el-aside width="300px" style="height:420px;border: 1px solid gainsboro;margin-right: 5px;">
<el-tree
ref="fieldTreeRef"
node-key="id"
empty-text="选择关联的表单后展示"
:data="asfasfFieldTree"
:props="treeDefaultProps"
:filter-node-method="filterNode"
style="max-width: 600px; border: 1px solid gainsboro; margin: 3px;"
@node-expand="handleFieldTreeExpand"
@node-collapse="handleFieldTreeCollapse"
@node-contextmenu="handleFieldTreeContextmenuRange"
/>
<el-input
v-show="fieldTreeSearchFlag"
v-model="fieldTreeFilterText"
style="width:98%;margin: 3px;"
placeholder="搜索字段"
class="filter-tree"
/>
<el-tree
ref="fieldTreeRef"
node-key="id"
empty-text="请先保存当前表单"
:data="associatedFormsCurrentFormFieldTree"
:props="treeDefaultProps"
:filter-node-method="filterNode"
style="max-width: 600px; border: 1px solid gainsboro; margin: 3px;"
@node-expand="handleFieldTreeExpand"
@node-collapse="handleFieldTreeCollapse"
@node-contextmenu="handleFieldTreeContextmenuRange"
/>
<el-input
v-show="orgTreeSearchFlag"
v-model="orgTreeFilterText"
style="width:98%;margin: 3px;"
placeholder="搜索字段"
class="filter-tree"
/>
<el-tree
ref="orgTreeRef"
style="max-width: 600px; border: 1px solid gainsboro; margin: 3px;"
:data="orgAndManTree"
:props="treeDefaultProps"
:filter-node-method="filterNode"
@node-expand="handleOrgTreeExpand"
@node-collapse="handleOrgTreeCollapse"
@node-contextmenu="handleOrgTreeContextmenuRange"
/>
<el-input
v-show="roleTreeSearchFlag"
v-model="roleTreeFilterText"
style="width:98%;margin: 3px;"
placeholder="搜索字段"
class="filter-tree"
/>
<el-tree
ref="roleTreeRef"
style="max-width: 600px; border: 1px solid gainsboro; margin: 3px;"
:data="roleTree"
:props="treeDefaultProps"
:filter-node-method="filterNode"
@node-expand="handleRoleTreeExpand"
@node-collapse="handleRoleTreeCollapse"
@node-contextmenu="handleRoleTreeContextmenuRange"
/>
</el-aside>
<el-main style="border: 1px solid gainsboro; padding: 3px;" class="associatedFormsHideDialogMain">
<div style="border: 1px solid gainsboro; height: 7%; border-bottom: 0px; padding-top: 3px; padding-left: 5px; background-color: #E6F3FE;">仅可选择符合以下条件的数据</div>
关联表单隐藏效果-组织机构条件
1 year ago
<div id="associatedFormsHideEditArea" style="border: 1px solid gainsboro; height: 38%; border-bottom: 0px;">
初始化数据
1 year ago
<AssociatedFormsTinyaceRange ref="aftRange" :aft-text="controlData.control.dataRangeConditionHtml" :aft-text-copy = "controlData.control.dataRangeConditionHtmlCopy" @text-change = "aftTextChangedRange" @gongshi-change = "aftGongshiChangedRange"></AssociatedFormsTinyaceRange>
<!-- <div style="border: 1px solid #4189EF;width:90px;height:26px;border-radius: 3px;padding:2px;text-align: center;cursor:pointer;float: right;margin-top: -32px;margin-right: 5px;z-index:99999999;position: relative;">
<span style="color: #4189EF;font:6px;margin-right: 5px;">fx</span>插入函数
</div> -->
</div>
关联表单隐藏效果-组织机构条件
1 year ago
<div style="border: 1px solid gainsboro; height: 55%; padding-top: 20px;">
初始化数据
1 year ago
<ul>
<li>请从左侧面板<span style="color: red">右击</span>选择字段或选项</li>
关联表但条件设置帮助描述优化
1 year ago
<li>支持的符号：<span style="color: red">'==', '>=', '>', '<=', '<', '!='</span></li>
优化图片契合度名称
1 year ago
<li>支持<span style="color: red">"包含,不包含,数据拥有者,数据所属部门"</span>关键字,用于组织机构条件,角色条件,==运算符和!=运算符</li>
关联表但条件设置帮助描述优化
1 year ago
<li>参考举例：</li>
<span style="margin-left: 14px;">年龄>10</span><br>
优化图片契合度名称
1 year ago
<span style="margin-left: 14px;">企管部==数据所属部门</span><br>
<span style="margin-left: 14px;">绩效考核执行人包含数据拥有者</span><br>
<span style="margin-left: 14px;">生产部包含数据所属部门</span>
初始化数据
1 year ago
</ul>
</div>
</el-main>
</el-container>
</div>
</template>
<template #footer>
<div class="dialog-footer">
<el-button @click="asfhTextCancelRange">取消</el-button>
<el-button type="primary" @click="handleDetermineRange">
确定
</el-button>
</div>
</template>
</el-dialog>
<!-- 数据填充规则弹窗 -->
修复空指针异常
1 year ago
<el-dialog v-model="associatedFormsFillRolesDialogFlag" title="数据填充规则" top="150px" :close-on-click-modal="false" :show-close="false" style="margin-top:70px ;min-height: 800px" width="50%" >
初始化数据
1 year ago
<template v-if="controlData.type=='associatedForms'">
<el-divider style="margin-top: 0px;" />
<div style="margin-top: -10px;"><span style="color: grey;">当选择具体数据后，将按如下规则给当前表单字段填充数据 </span></div>
<el-button style="font-size: large;margin-top: 3px;" type="primary" link append-to-body="true" modal="true" @click="addFillRole">十 添加规则</el-button>
<el-divider />
修复空指针异常
1 year ago
<div style="height:600px;border:1px solid white;overflow-y:auto">
初始化数据
1 year ago
<template v-for="(item, index) in controlData.control.fillRoles" :key="controlData.control.fillRoles[index].id">
<AssociatedFormsFillRole v-model:left-value="controlData.control.fillRoles[index].leftValue" v-model:right-value="controlData.control.fillRoles[index].rightValue" :left-tree-source = "asfasfFieldTree" :right-tree-source = "associatedFormsCurrentFormFieldTree" :current-key="controlData.control.fillRoles[index].id" @del-Role = "delRole" ></AssociatedFormsFillRole>
</template>
</div>
</template>
<template #footer>
<div class="dialog-footer">
<!-- <el-button @click="asfhTextCancelFillRoles">取消</el-button> -->
<el-button type="primary" @click="handleDetermineFillRoles">
确定
</el-button>
</div>
</template>
</el-dialog>
<!-- 关联表单设置弹窗 liwenxuan 20240402 end -->
<!-- 关联选项设置弹窗 liwenxuan 20240426 start --> <!-- :title="`关联选项设置--`+controlData.item.label+`--`+controlData.name" -->
<el-dialog v-model="glxxszDialogFlag" class="glxxsztc" top="150px" :close-on-click-modal="false" :title="`关联选项设置--`+controlData.name" :show-close="false" style="margin-top:70px;" width="50%" >
<template v-if="(controlData.type=='radio'||controlData.type=='select')&&controlData.config.optionsType==0">
<el-table
:data="controlData.options" stripe border style="width: 100%;min-height:50px;max-height:500px;overflow-y:auto"
:cell-style="{height: '55px',paddingLeft: '15px'}" :header-cell-style="{background:'#F3F4F7',color:'#555',}"
>
<el-table-column prop="link" label="当选项为" width="220">
<template #default="optionScope">
<span style="background-color: #E8EAEE;border-radius: 8px;padding-top: 5px;padding-bottom: 5px;padding-left: 15px;padding-right: 15px;">{{ optionScope.row.label }}</span>
</template>
</el-table-column>
<el-table-column fixed="right" label="显示以下组件" >
<template #default="fieldScope">
<el-tree-select v-model="controlData.control.glxxsz[fieldScope.$index].showFields" style="width: 100%" :data="associatedFormsCurrentFormFieldTreeForGlxxszExceptSelf[0].children" multiple />
</template>
</el-table-column>
</el-table>
</template>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="handleDetermineGlxxszDialog">
确定
</el-button>
</div>
</template>
</el-dialog>
<el-dialog v-model="glxxszDialogFlagCheckBox" class="glxxsztc" top="150px" :close-on-click-modal="false" :title="`关联选项设置--`+controlData.name" :show-close="false" style="margin-top:70px;" width="50%" >
<template v-if="controlData.type=='checkbox'">
<el-table
:data="controlData.control.glxxszForCheckBox" stripe border style="width: 100%;min-height:50px;max-height:500px;overflow-y:auto"
:cell-style="{height: '55px',paddingLeft: '15px'}" :header-cell-style="{background:'#F3F4F7',color:'#555',}">
<el-table-column prop="link" label="当选项为" width="300">
<template #default="optionScope">
<el-tree-select v-model="controlData.control.glxxszForCheckBox[optionScope.$index].selectedOptions" style="width: 100%" :data="controlData.options" multiple />
</template>
</el-table-column>
<el-table-column fixed="right" label="显示以下组件" >
<template #default="fieldScope">
<el-tree-select v-model="controlData.control.glxxszForCheckBox[fieldScope.$index].showFields" style="width: 100%" :data="associatedFormsCurrentFormFieldTreeForGlxxszExceptSelf[0].children" multiple />
</template>
</el-table-column>
<el-table-column fixed="right" label="操作" width="130">
<template #default="operateScope">
<el-button type="danger" :icon="Delete" circle @click="deleteRowForGlxxsz(operateScope.row)"/>
</template>
</el-table-column>
</el-table>
<el-button plain type="success" style="margin-top: 10px;" @click="createRowForGlxxsz">新增</el-button>
</template>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="handleDetermineGlxxszDialogCheckBox">
确定
</el-button>
</div>
</template>
</el-dialog>
<el-dialog v-model="glxxszDialogFlagSwitch" class="glxxsztc" top="150px" :close-on-click-modal="false" :title="`关联选项设置--`+controlData.name" :show-close="false" style="margin-top:70px;" width="50%" >
<template v-if="controlData.type=='switch'">
<div style="display:flex;margin-bottom: 20px;margin-top:20px"><span style="font-size: larger;margin-left: 35px;margin-right: 15px;">当开关打开时显示</span>
<el-tree-select v-model="controlData.control.glxxszSwitch[0].showFields" style="width: 60%" :data="associatedFormsCurrentFormFieldTreeForGlxxszExceptSelf[0].children" multiple />
</div>
<div style="display:flex"><span style="font-size: larger;margin-left: 35px;margin-right: 15px;">当开关关闭时显示</span>
<el-tree-select v-model="controlData.control.glxxszSwitch[1].showFields" style="width: 60%" :data="associatedFormsCurrentFormFieldTreeForGlxxszExceptSelf[0].children" multiple />
</div>
</template>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="handleDetermineGlxxszDialogSwitch">
确定
</el-button>
</div>
</template>
</el-dialog>
<!-- 关联选项设置弹窗 liwenxuan 20240426 end -->
<!-- 单选下拉多选选项来源value3--系统表单字段 start-->
<el-dialog v-model="optionsValue3SettingDialogOpenFlag" class="glxxsztc" top="150px" :close-on-click-modal="false" title="选择表单字段" :show-close="false" style="margin-top:70px;" width="50%" >
<template v-if="controlData.type=='radio'||controlData.type=='select'||controlData.type=='checkbox'">
<div style="display:flex;margin-bottom: 20px;margin-top:20px"><span style="font-size: larger;margin-left: 35px;margin-right: 15px;">请选择表单</span>
<el-tree-select
v-model="controlData.control.optionsValue3Formid"
style="width: 390px;"
:data="customerFormTree[0].children"
check-strictly
:render-after-expand="false"
filterable
@change="formidChangedOptionsValue3"
/>
</div>
<div style="display:flex" v-if="typeof(controlData.control.optionsValue3Formid)!='undefined' && typeof(asfasfFieldTreeOptionsValue3)!='undefined' && controlData.control.optionsValue3Formid!=''"><span style="font-size: larger;margin-left: 35px;margin-right: 15px;">请选择字段</span>
<!--
-->
<el-tree-select v-model="controlData.control.optionsValue3Field" style="width: 390px;" :data="asfasfFieldTreeOptionsValue3[0].children" />
</div>
</template>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="handleDetermineoptionsValue3">
确定
</el-button>
</div>
</template>
</el-dialog>
<!-- 单选下拉多选选项来源value3--系统表单字段 end-->
</template>
<style lang='scss' scoped>
li::before {
content: "";
display: inline-block;
width: 4px;
height: 4px;
border-radius: 50%;
background-color: gray;
margin-right: 5px;
margin-left: 5px;
margin-bottom: 3.5px;
}
.sidebar-tools .el-tabs__content{
padding: 0;
}
.el-collapse-item__header {
padding-left: 10px;
background-color: rgb(229, 229, 229);
}
.el-collapse-item__header{
padding-left: 10px;
background-color: rgb(229, 229, 229);
}
.form_cont{
padding: 0 10px;
}
.avatar-uploader{
width: 100px;
height: 100px;
.avatar{
width: 100px;
height: 100px;
}
.avatar-uploader-icon{
width: 100px;
height: 100px;
}
}
.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right: 8px;
}
.custom-tree-node:hover{
background-color:antiquewhite;
}
.associatedFormsHideDialogMain7{
display: flex;
}
.el-main{
--el-main-padding: 5px
}
</style>