diff --git a/src/assets/icons/bianKuang.svg b/src/assets/icons/bianKuang.svg new file mode 100644 index 000000000..127598117 --- /dev/null +++ b/src/assets/icons/bianKuang.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/bianKuangBoot.svg b/src/assets/icons/bianKuangBoot.svg new file mode 100644 index 000000000..32c274022 --- /dev/null +++ b/src/assets/icons/bianKuangBoot.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/bianKuangLeft.svg b/src/assets/icons/bianKuangLeft.svg new file mode 100644 index 000000000..f5f782643 --- /dev/null +++ b/src/assets/icons/bianKuangLeft.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/bianKuangRight.svg b/src/assets/icons/bianKuangRight.svg new file mode 100644 index 000000000..105b3f55d --- /dev/null +++ b/src/assets/icons/bianKuangRight.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/bianKuangTop.svg b/src/assets/icons/bianKuangTop.svg new file mode 100644 index 000000000..cad4d7a0c --- /dev/null +++ b/src/assets/icons/bianKuangTop.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/bianKuangYuanjiao.svg b/src/assets/icons/bianKuangYuanjiao.svg new file mode 100644 index 000000000..9e3cdf3ef --- /dev/null +++ b/src/assets/icons/bianKuangYuanjiao.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/siJiao.svg b/src/assets/icons/siJiao.svg new file mode 100644 index 000000000..1485cc537 --- /dev/null +++ b/src/assets/icons/siJiao.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/DesignForm/assembly/index.ts b/src/components/DesignForm/assembly/index.ts index 46e346555..37c13919b 100644 --- a/src/components/DesignForm/assembly/index.ts +++ b/src/components/DesignForm/assembly/index.ts @@ -20,15 +20,20 @@ const selectOption: any = [ title: '基础字段', children: [ { - type: 'input', - label: '单行文本', - icon: 'input', - iconFont: 'fa-text-width', - control: { - // 组件所有属性 - modelValue: '' - }, - config: {} // 其他配置信息 + type: 'input', + label: '单行文本', + icon: 'input', + iconFont: 'fa-text-width', + control: { + // 组件所有属性 + modelValue: '' + }, + config: {}, // 其他配置信息 + styles:{ + divStyle:{}, + labelStyle:{}, + inputStyle:{} + } }, { type: 'digitpage', @@ -47,167 +52,247 @@ const selectOption: any = [ } }, config: {}, // 其他配置信息 - selectvalue: "default" + selectvalue: "default", + styles:{ + divStyle:{}, + labelStyle:{}, + inputStyle:{} + } }, { - type: 'textarea', - label: '多行文本', - icon: 'textarea', - iconFont: 'fa-text-height', - control: { - modelValue: '' - }, - config: {} + type: 'textarea', + label: '多行文本', + icon: 'textarea', + iconFont: 'fa-text-height', + control: { + modelValue: '' + }, + config: {}, + styles:{ + divStyle:{}, + labelStyle:{}, + inputStyle:{} + } }, { - type: 'radio', - label: '单选框组', - icon: 'radio', - iconFont: 'fa-dot-circle-o', - control: { - modelValue: '' - }, - options: selectOption, // 下拉选项数据集合 - config: config + type: 'radio', + label: '单选框组', + icon: 'radio', + iconFont: 'fa-dot-circle-o', + control: { + modelValue: '' + }, + options: selectOption, // 下拉选项数据集合 + config: config, + styles:{ + divStyle:{}, + labelStyle:{}, + inputStyle:{} + } }, { - type: 'checkbox', - label: '多选框组', - icon: 'checkbox', - iconFont: 'fa-check-square-o', - control: { - modelValue: [] - }, - options: selectOption, - config: config + type: 'checkbox', + label: '多选框组', + icon: 'checkbox', + iconFont: 'fa-check-square-o', + control: { + modelValue: [] + }, + options: selectOption, + config: config, + styles:{ + divStyle:{}, + labelStyle:{}, + inputStyle:{} + } }, { - type: 'select', - label: '下拉选择框', - icon: 'select', - iconFont: 'fa-toggle-down', - control: { - modelValue: '', - appendToBody: true - }, - options: selectOption, - config: config + type: 'select', + label: '下拉选择框', + icon: 'select', + iconFont: 'fa-toggle-down', + control: { + modelValue: '', + appendToBody: true + }, + options: selectOption, + config: config, + styles:{ + divStyle:{}, + labelStyle:{}, + inputStyle:{} + } }, { - type: 'datePicker', - label: '日期选择器', - icon: 'todo', - iconFont: 'fa-calendar', - control: { - modelValue: '', - type: 'date' - }, - config: {} + type: 'datePicker', + label: '日期选择器', + icon: 'todo', + iconFont: 'fa-calendar', + control: { + modelValue: '', + type: 'date' + }, + config: {}, + styles:{ + divStyle:{}, + labelStyle:{}, + inputStyle:{} + } }, { - type: 'timePicker', - label: '时间选择器', - icon: 'time', - iconFont: 'fa-clock-o', - control: { - modelValue: '' - }, - config: {} + type: 'timePicker', + label: '时间选择器', + icon: 'time', + iconFont: 'fa-clock-o', + control: { + modelValue: '' + }, + config: {}, + styles:{ + divStyle:{}, + labelStyle:{}, + inputStyle:{} + } }, { - type: 'switch', - label: '开关', - icon: 'switch', - iconFont: 'fa-toggle-on', - control: { - modelValue: false - }, - config: {} + type: 'switch', + label: '开关', + icon: 'switch', + iconFont: 'fa-toggle-on', + control: { + modelValue: false + }, + config: {}, + styles:{ + divStyle:{}, + labelStyle:{}, + inputStyle:{} + } }, { - type: 'inputNumber', - label: '计数器', - icon: 'number', - iconFont: 'fa-sort-numeric-asc', - control: { - modelValue: 0 - }, - config: {} + type: 'inputNumber', + label: '计数器', + icon: 'number', + iconFont: 'fa-sort-numeric-asc', + control: { + modelValue: 0 + }, + config: {}, + styles:{ + divStyle:{}, + labelStyle:{}, + inputStyle:{} + } }, { - type: 'cascader', - label: '级联选择器', - icon: 'cascader', - iconFont: 'fa-sitemap', - control: { - modelValue: [] - }, - options: [], - config: config + type: 'cascader', + label: '级联选择器', + icon: 'cascader', + iconFont: 'fa-sitemap', + control: { + modelValue: [] + }, + options: [], + config: config, + styles:{ + divStyle:{}, + labelStyle:{}, + inputStyle:{} + } }, { - type: 'rate', - label: '评分', - icon: 'rate', - iconFont: 'fa-star-o', - control: { - modelValue: 0 - }, - config: {} + type: 'rate', + label: '评分', + icon: 'rate', + iconFont: 'fa-star-o', + control: { + modelValue: 0 + }, + config: {}, + styles:{ + divStyle:{}, + labelStyle:{}, + inputStyle:{} + } }, { - type: 'slider', - label: '滑块', - icon: 'slider', - iconFont: 'fa-sliders', - control: { - modelValue: 0 - }, - config: {} + type: 'slider', + label: '滑块', + icon: 'slider', + iconFont: 'fa-sliders', + control: { + modelValue: 0 + }, + config: {}, + styles:{ + divStyle:{}, + labelStyle:{}, + inputStyle:{} + } }, { - type: 'treeSelect', - label: '树形控件', - icon: 'tree2', - iconFont: '', - control: { - modelValue: '', - data: [], - renderAfterExpand: false - }, - config: { - optionsType: 0 - } + type: 'treeSelect', + label: '树形控件', + icon: 'tree2', + iconFont: '', + control: { + modelValue: '', + data: [], + renderAfterExpand: false + }, + config: { + optionsType: 0 + }, + styles:{ + divStyle:{}, + labelStyle:{}, + inputStyle:{} + } }, { - type: 'txt', - label: '文字', - icon: 'text', - iconFont: 'fa-file-word-o', - control: { - modelValue: '' - }, - config: {} + type: 'txt', + label: '文字', + icon: 'text', + iconFont: 'fa-file-word-o', + control: { + modelValue: '' + }, + config: {}, + styles:{ + divStyle:{}, + labelStyle:{}, + inputStyle:{} + } }, { - type: 'title', - label: '标题', - icon: 'title', - iconFont: 'fa-header', - control: { - modelValue: '标题' - }, - config: {} + type: 'title', + label: '标题', + icon: 'title', + iconFont: 'fa-header', + control: { + modelValue: '标题' + }, + config: {}, + styles:{ + divStyle:{}, + labelStyle:{}, + inputStyle:{} + } }, { - type: 'button', - label: '按钮', - icon: 'button', - iconFont: 'fa-square-o', - control: { - label: '保存' - }, - config: {} + type: 'button', + label: '按钮', + icon: 'button', + iconFont: 'fa-square-o', + control: { + label: '保存' + }, + config: {}, + styles:{ + divStyle:{}, + labelStyle:{}, + inputStyle:{} + } }, { type: 'serialNumber', @@ -218,6 +303,11 @@ const selectOption: any = [ }, config: { automatic:false + }, + styles:{ + divStyle:{}, + labelStyle:{}, + inputStyle:{} } }, { @@ -227,7 +317,12 @@ const selectOption: any = [ iconFont: 'fa-link', control: { }, - config: {} + config: {}, + styles:{ + divStyle:{}, + labelStyle:{}, + inputStyle:{} + } }, { type: 'organization', @@ -236,7 +331,12 @@ const selectOption: any = [ iconFont: 'fa-map-marker', control: { }, - config: {} + config: {}, + styles:{ + divStyle:{}, + labelStyle:{}, + inputStyle:{} + } }, { type: 'baidumap', @@ -245,18 +345,28 @@ const selectOption: any = [ iconFont: 'fa-map-o', control: { }, - config: {} + config: {}, + styles:{ + divStyle:{}, + labelStyle:{}, + inputStyle:{} + } }, { - type: 'colorPicker', - label: '取色器', - icon: 'color', - iconFont: '', - control: { - modelValue: '' - }, - config: {} + type: 'colorPicker', + label: '取色器', + icon: 'color', + iconFont: '', + control: { + modelValue: '' + }, + config: {}, + styles:{ + divStyle:{}, + labelStyle:{}, + inputStyle:{} + } }, { type: 'orgCentent', @@ -265,7 +375,12 @@ const selectOption: any = [ iconFont: 'fa-sliders', control: { }, - config: {} + config: {}, + styles:{ + divStyle:{}, + labelStyle:{}, + inputStyle:{} + } }, { type: 'signaturemap', @@ -274,7 +389,12 @@ const selectOption: any = [ iconFont: 'fa-edit', control: { }, - config: {} + config: {}, + styles:{ + divStyle:{}, + labelStyle:{}, + inputStyle:{} + } } ] }, @@ -282,50 +402,58 @@ const selectOption: any = [ title: '高级字段', children: [ { - type: 'table', - label: '子表', - icon: 'table', - iconFont: 'fa-table', - list: [], - tableData: [], // 子表表格列表数据集合 - control: { - border: true - }, - config: { - addBtnText: '添加一行' - } + styles:{ + divStyle:{}, + labelStyle:{}, + inputStyle:{} + } }, { - type: 'component', - label: '自定义组件', - icon: 'component', - iconFont: 'fa-cubes', - control: { - modelValue: '' - }, - config: {} + type: 'component', + label: '自定义组件', + icon: 'component', + iconFont: 'fa-cubes', + control: { + modelValue: '' + }, + config: {}, + styles:{ + divStyle:{}, + labelStyle:{}, + inputStyle:{} + } /*template: '', // 组件模板名称 component: '' // 根据template注入的组件*/ }, { - type: 'upload', - label: '图片/文件', - icon: 'image', - iconFont: 'fa-photo', - control: { - modelValue: '' // 也可以是[{name:'',url:''}]形式 - }, - config: {} + type: 'upload', + label: '图片/文件', + icon: 'image', + iconFont: 'fa-photo', + control: { + modelValue: '' // 也可以是[{name:'',url:''}]形式 + }, + config: {}, + styles:{ + divStyle:{}, + labelStyle:{}, + inputStyle:{} + } }, { - type: 'tinymce', - label: '富文本', - icon: 'tinymce', - iconFont: '', - control: { - modelValue: '' - }, - config: {} + type: 'tinymce', + label: '富文本', + icon: 'tinymce', + iconFont: '', + control: { + modelValue: '' + }, + config: {}, + styles:{ + divStyle:{}, + labelStyle:{}, + inputStyle:{} + } }, { type: 'videoUpAndPlay', @@ -353,9 +481,14 @@ const selectOption: any = [ attrId: '', poster:'', loop: false - }] + }] }, - config: {} + config: {}, + styles:{ + divStyle:{}, + labelStyle:{}, + inputStyle:{} + } }, { type: 'lowcodeCarsusel', @@ -377,7 +510,12 @@ const selectOption: any = [ interval:2000, } }, - config: {} + config: {}, + styles:{ + divStyle:{}, + labelStyle:{}, + inputStyle:{} + } } ] }, @@ -391,70 +529,100 @@ const selectOption: any = [ iconFont: 'fa-th-large', columns: [ // 格栅列数据 - { - attr: { span: 12 }, - list: [] + { + attr: { span: 12 }, + list: [] + }, + { + attr: { span: 12 }, + list: [] + } + ], + control: {}, + config: {}, + styles:{ + divStyle:{}, + labelStyle:{}, + inputStyle:{} + } + }, + { + type: 'tabs', + label: '标签页', + icon: 'tabs', + iconFont: 'fa-folder-o', + columns: [ + { + label: 'Tab1', + list: [] + } + ], + control: {}, + config: {}, + styles:{ + divStyle:{}, + labelStyle:{}, + inputStyle:{} + } + }, + { + type: 'card', + label: '卡片布局', + icon: 'card', + iconFont: 'fa-credit-card', + list: [], + control: {}, + config: {}, + item: {}, // label标题相关 + styles:{ + divStyle:{}, + labelStyle:{}, + inputStyle:{} + } + }, + { + type: 'flex', + label: '弹性布局', + icon: 'flex', + iconFont: 'fa-file-text-o', + list: [], + tableData: [], // 值集合 + control: {}, + config: { + addBtnText: '添加一行' }, - { - attr: { span: 12 }, - list: [] + styles:{ + divStyle:{}, + labelStyle:{}, + inputStyle:{} } - ], - control: {}, - config: {} }, { - type: 'tabs', - label: '标签页', - icon: 'tabs', - iconFont: 'fa-folder-o', - columns: [ - { - label: 'Tab1', - list: [] - } - ], - control: {}, - config: {} - }, - { - type: 'card', - label: '卡片布局', - icon: 'card', - iconFont: 'fa-credit-card', - list: [], - control: {}, - config: {}, - item: {} // label标题相关 - }, - { - type: 'flex', - label: '弹性布局', - icon: 'flex', - iconFont: 'fa-file-text-o', - list: [], - tableData: [], // 值集合 - control: {}, - config: { - addBtnText: '添加一行' - } - }, - { - type: 'divider', - label: '分割线', - icon: 'divider', - iconFont: '', - control: {}, - config: {} - }, - { - type: 'div', - label: '容器', - icon: 'div', - iconFont: '', - control: {}, - config: {}, - list: [] + type: 'divider', + label: '分割线', + icon: 'divider', + iconFont: '', + control: {}, + config: {}, + styles:{ + divStyle:{}, + labelStyle:{}, + inputStyle:{} + } + }, + { + type: 'div', + label: '容器', + icon: 'div', + iconFont: '', + control: {}, + config: {}, + list: [], + styles:{ + divStyle:{}, + labelStyle:{}, + inputStyle:{} + } } ] }, @@ -462,15 +630,20 @@ const selectOption: any = [ title: '扩展组件', children: [ { - type: 'expand-user', - label: '选择用户', - icon: 'user', - iconFont: 'fa-user-o', - control: { - // 组件所有属性 - modelValue: '' - }, - config: {} // 其他配置信息 + type: 'expand-user', + label: '选择用户', + icon: 'user', + iconFont: 'fa-user-o', + control: { + // 组件所有属性 + modelValue: '' + }, + config: {}, // 其他配置信息 + styles:{ + divStyle:{}, + labelStyle:{}, + inputStyle:{} + } }, { type: 'orgCentent', @@ -479,7 +652,12 @@ const selectOption: any = [ iconFont: 'fa-sliders', control: { }, - config: {} + config: {}, + styles:{ + divStyle:{}, + labelStyle:{}, + inputStyle:{} + } } ] } diff --git a/src/components/DesignForm/designLayout/bianXian.vue b/src/components/DesignForm/designLayout/bianXian.vue new file mode 100644 index 000000000..9eb912333 --- /dev/null +++ b/src/components/DesignForm/designLayout/bianXian.vue @@ -0,0 +1,247 @@ + + + + \ No newline at end of file diff --git a/src/components/DesignForm/designLayout/designLayoutButPage.vue b/src/components/DesignForm/designLayout/designLayoutButPage.vue new file mode 100644 index 000000000..2b3bdfa27 --- /dev/null +++ b/src/components/DesignForm/designLayout/designLayoutButPage.vue @@ -0,0 +1,107 @@ + + + + \ No newline at end of file diff --git a/src/components/DesignForm/designLayout/designLayoutPage.vue b/src/components/DesignForm/designLayout/designLayoutPage.vue new file mode 100644 index 000000000..9430ab747 --- /dev/null +++ b/src/components/DesignForm/designLayout/designLayoutPage.vue @@ -0,0 +1,177 @@ + + + + diff --git a/src/components/DesignForm/designLayout/pageSize.vue b/src/components/DesignForm/designLayout/pageSize.vue new file mode 100644 index 000000000..546e5687a --- /dev/null +++ b/src/components/DesignForm/designLayout/pageSize.vue @@ -0,0 +1,318 @@ + + + + \ No newline at end of file diff --git a/src/components/DesignForm/designLayout/pageSizeSmail.vue b/src/components/DesignForm/designLayout/pageSizeSmail.vue new file mode 100644 index 000000000..ab99bf684 --- /dev/null +++ b/src/components/DesignForm/designLayout/pageSizeSmail.vue @@ -0,0 +1,230 @@ + + + + \ No newline at end of file diff --git a/src/components/DesignForm/designLayout/textPage.vue b/src/components/DesignForm/designLayout/textPage.vue new file mode 100644 index 000000000..19ed41609 --- /dev/null +++ b/src/components/DesignForm/designLayout/textPage.vue @@ -0,0 +1,141 @@ + + + + \ No newline at end of file diff --git a/src/components/DesignForm/designLayout/unitBackGround.vue b/src/components/DesignForm/designLayout/unitBackGround.vue new file mode 100644 index 000000000..b955b4487 --- /dev/null +++ b/src/components/DesignForm/designLayout/unitBackGround.vue @@ -0,0 +1,82 @@ + + + + \ No newline at end of file diff --git a/src/components/DesignForm/designLayout/yuanjao.vue b/src/components/DesignForm/designLayout/yuanjao.vue new file mode 100644 index 000000000..cfcbc762a --- /dev/null +++ b/src/components/DesignForm/designLayout/yuanjao.vue @@ -0,0 +1,165 @@ + + + + diff --git a/src/components/DesignForm/formControlAttr.vue b/src/components/DesignForm/formControlAttr.vue index bce9f04f2..a656d3366 100644 --- a/src/components/DesignForm/formControlAttr.vue +++ b/src/components/DesignForm/formControlAttr.vue @@ -22,6 +22,9 @@ import { uploadUrl } from '@/api/DesignForm' import { UploadFilled } from '@element-plus/icons-vue' import { UploadFile, UploadFiles } from 'element-plus/es/components/upload/src/upload'; +//样式布局 +import LayoutPage from '@/components/DesignForm/layoutPage/index.vue' + const props = withDefaults( //接收父级参数 defineProps<{ @@ -57,6 +60,11 @@ const controlData = computed(() => { // 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({ @@ -131,45 +139,45 @@ const formAttr = computed(() => { 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: 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, @@ -859,6 +867,7 @@ watch( if (val) { // 有值时自动跳到第一项 state.tabsName = 'first' + cssIsShouw(attrList) } } ) @@ -1504,19 +1513,51 @@ const changeCurrentUploadImgid = (clickedRow:any) => { currentUploadImgid = clickedRow.imgId } + + +const optionsCss = [ + { label: '无样式', value: '' }, + { label: '每行两列', value: 'form-row-2' }, + { label: '每行三列', value: 'form-row-3' }, + { label: '每行四列', value: 'form-row-4' } +] + +const layouytStyle = reactive(controlData.value.styles) +watch(()=>layouytStyle,(val : any)=>{ + console.log("监听样式处理",val) + controlData.value.styles = val + // Object.assign(store.controlAttr.styles.divStyle, val) +}, +{ + deep: true +}); +const setStylefield = ref("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; +}