diff --git a/src/components/DesignForm/assembly/index.ts b/src/components/DesignForm/assembly/index.ts index 3df9c5c6c..588f78504 100644 --- a/src/components/DesignForm/assembly/index.ts +++ b/src/components/DesignForm/assembly/index.ts @@ -592,6 +592,17 @@ const selectOption: any = [ }, config: {} }, + { + type: 'associatedForms', + label: '关联表单', + icon: '', + iconFont: 'fa-wpforms', + control: { + modelValue: '', + }, + config: {} + } + ] }, { diff --git a/src/components/DesignForm/formControlAttr.vue b/src/components/DesignForm/formControlAttr.vue index aaabc54a7..952a5bcd1 100644 --- a/src/components/DesignForm/formControlAttr.vue +++ b/src/components/DesignForm/formControlAttr.vue @@ -973,6 +973,32 @@ obj.path && getPropByPath(controlData.value, obj.path, newVal) } +<<<<<<< HEAD +======= +import { uploadUrl } from '@/api/DesignForm' + +import request from '@/utils/request'; + +import { UploadFile, UploadFiles } from 'element-plus/es/components/upload/src/upload'; + +import type Node from 'element-plus/es/components/tree/src/model/node' + +const props = withDefaults( //接收父级参数 + defineProps<{ + formData: any + formConfig: any + formOtherData: any + customerformid: number | string, + }>(), + { + formConfig: () => { + return {} + }, + formOtherData: () => { + // 其他不需要保存在formData里的数据 + return {} + } +>>>>>>> liwenxuan_v4 } /** * 获取非负整数随机数 @@ -1525,6 +1551,756 @@ { label: '每行三列', value: 'form-row-3' }, { label: '每行四列', value: 'form-row-4' } ] +<<<<<<< HEAD +======= +}) +const attrList = computed(() => { + if (Object.keys(controlData.value).length) { + const { + control = {}, + type, + name, + config = {}, + item = {}, + attr = {} + }: { control: any;type:any;name:any;item:any;attr:any; config: any } = controlData.value + 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([ + { + 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'] + }, + { + label: 'label值', + value: item.label, + path: 'item.label', + vHide: [ + 'table', + 'grid', + 'tabs', + 'title', + 'gridChild', + 'div', + 'inputSlot', + 'flex', + 'button', + 'txt' + ], + eventName: 'labelNameVal' + }, + { + 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_hide', + vIf: state.isSearch, + vShow: ['associatedForms'] + }, + { + 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.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.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 + }, + { + label: 'type', + value: control.type, + path: 'control.type', + vShow: ['datePicker'], + type: 'select', + placeholder: '显示类型', + dict: { + year: 'year', + month: 'month', + date: 'date', + datetime: 'datetime', + week: 'week', + datetimerange: 'datetimerange', + daterange: 'daterange', + monthrange: 'monthrange' + } + }, + { + label: 'format', + 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'] + } + ]) + // 过滤显示对应的值 + 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 [] + } +}) +>>>>>>> liwenxuan_v4 const layouytStyle = reactive(controlData.value.styles) @@ -2461,6 +3237,7 @@ const loadNextPage = () => { height: 100px; } } +<<<<<<< HEAD +======= +} + +//关闭大图展示 +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: '右', + }, +] + + + +//!!!!!!!!!!!!!!!树数据start + + +const dataSource = ref([]) +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] + +} + + + + + +//!!!!!!!!!!!!!!!树数据end + + +//liwenxuan 20240217 transfer end + + +//liwenxuan20240313 lowcodeImage start + +//图片上传成功钩子 +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 + +const associatedFormsHideDialogFlag = ref(false) + +const defaultProps = { + children: 'children', + label: 'label', +} + +function getAssociatedFormsCurrentFieldTree() { + return request({ + url: '/javasys/lowCode/AssociatedForms/getFieldTree', + method: 'post', + data: { + cfid:'13' + }, + }); +} + +function getAssociatedFormsOrgAndManTree() { + return request({ + url: '/javasys/lowCode/transfer/getOrgAndManTree', + method: 'post', + }); +} +const associatedFormsCurrentFormFieldTree = ref() + +getAssociatedFormsCurrentFieldTree().then(({ data }) => { + let resData = ref(data.children) + //let rootid_ = data.value.label + associatedFormsCurrentFormFieldTree.value = [{ + id: 'rootid_'+data.label, + label: '当前表单', + children: [...resData.value] + }] +}); + +const orgAndManTree = ref() + getAssociatedFormsOrgAndManTree().then(({ data }) => { + let resData = ref(data.children) + orgAndManTree.value = [{ + id: data.id, + //label: data.label, + label: '组织机构', + children: [...resData.value] + }] +}); + +const fieldTreeSearchFlag = ref(false) + +function handleFieldTreeExpand(){ + + fieldTreeSearchFlag.value = true; +} + +function handleFieldTreeCollapse(){ + + fieldTreeSearchFlag.value = false; +} +function handleFieldTreeNodeclick(){ + +} +function handleFieldTreeContextmenu(MouseEvent:any, object:any, Node:any, element:any){ + //console.log(MouseEvent) + console.log(object) + //console.log(Node) + //console.log(element) + +} +import { ElTree } from 'element-plus' +const fieldTreeFilterText = ref('') +const fieldTreeRef = ref>() + +watch(fieldTreeFilterText, (val) => { + fieldTreeRef.value!.filter(val) +}) + +const filterNode = (value: string, associatedFormsCurrentFormFieldTree: Tree) => { + if (!value) return true + return associatedFormsCurrentFormFieldTree.label.includes(value) +} + +//liwenxuan20240403 associatedForms end + + + + +>>>>>>> liwenxuan_v4 diff --git a/src/components/DesignForm/public/form/formGroup.vue b/src/components/DesignForm/public/form/formGroup.vue index 1e153e613..2b2063a01 100644 --- a/src/components/DesignForm/public/form/formGroup.vue +++ b/src/components/DesignForm/public/form/formGroup.vue @@ -458,11 +458,15 @@ const getFormItemLableStyle = (ele: any) => { +<<<<<<< HEAD +======= + +>>>>>>> liwenxuan_v4 diff --git a/src/widget/associatedforms/associatedForms.vue b/src/widget/associatedforms/associatedForms.vue new file mode 100644 index 000000000..11638e47d --- /dev/null +++ b/src/widget/associatedforms/associatedForms.vue @@ -0,0 +1,15 @@ + + + + + \ No newline at end of file diff --git a/src/widget/associatedforms/index.vue b/src/widget/associatedforms/index.vue new file mode 100644 index 000000000..162b8041a --- /dev/null +++ b/src/widget/associatedforms/index.vue @@ -0,0 +1,181 @@ + + + + \ No newline at end of file diff --git a/src/widget/index.ts b/src/widget/index.ts index 95c16a3d4..fec7a221c 100644 --- a/src/widget/index.ts +++ b/src/widget/index.ts @@ -14,6 +14,7 @@ import videoUpAndPlay from './videoupload/index.vue' import lowcodeCarsusel from './carousel/index.vue' import lowcodeTransfer from './lowcodetransfer/index.vue' import lowcodeImage from './lowcodeimage/index.vue' +import associatedForms from './associatedforms/index.vue' export default (app: any) => { @@ -30,4 +31,5 @@ export default (app: any) => { app.component('LowcodeCarsusel',lowcodeCarsusel) app.component('LowcodeTransfer',lowcodeTransfer) app.component('LowcodeImage',lowcodeImage) + app.component('AssociatedForms',associatedForms) }