diff --git a/FcDesigner文档说明.docx b/FcDesigner文档说明.docx new file mode 100644 index 0000000..78fe670 Binary files /dev/null and b/FcDesigner文档说明.docx differ diff --git a/examples/App.vue b/examples/App.vue index 24fdc91..c0403ef 100644 --- a/examples/App.vue +++ b/examples/App.vue @@ -721,62 +721,62 @@ export default { } } }); - this.$refs.designer.setRule(formCreate.parseJson("[{\"type\":\"html\",\"native\":true,\"attrs\":{\"innerHTML\":\"\"},\"style\":{\"height\":\"100px\",\"width\":\"100%\",\"display\":\"flex\",\"justifyContent\":\"center\",\"alignItems\":\"center\"},\"children\":[\"
\\n👈🏻 点击左侧边栏 按钮查看更多功能示例\\n
\"],\"_fc_id\":\"id_F85km1usjbq4egc\",\"name\":\"ref_F2n0m1usjbq4ehc\",\"_fc_drag_tag\":\"html\",\"display\":true,\"hidden\":false},{\"type\":\"html\",\"native\":true,\"attrs\":{\"innerHTML\":\"\"},\"style\":{\"display\":\"block\",\"width\":\"100%\"},\"children\":[\"
\\n
FormCreate 设计器高级版演示站
\\n
全面实现多端表单设计，为企业提供低代码表单解决方案
\\n
\\n \\n
ElementPlus版PC端设计器👨🏻‍💻(Vue3)
立即体验
采用 Vue3.0 和 ElementPlus 进行页面构建\\n \\n \\n
ElementUI版PC端设计器👨🏻‍💻(Vue2)
立即体验
采用 Vue2.7 和 ElementUI 进行页面构建\\n \\n \\n
ElementPlus版移动端设计器📱(Vue3)
立即体验
采用 Vue3.0 和 ElementPlus 进行页面构建，移动端采用Vant4.0\\n \\n \\n
ElementUI版移动端设计器📱(Vue2)
立即体验
采用 Vue2.7 和 ElementUI 进行页面构建，移动端采用Vant2.0\\n \\n \\n
Ant Design Vue版PC端设计器👨🏻‍💻(Vue3)
立即体验
采用 Vue3.0 和 Ant Design Vue 进行页面构建\\n \\n \\n
Ant Design Vue版PC端设计器👨🏻‍💻(Vue2)
立即体验
采用 Vue2.7 和 Ant Design Vue 进行页面构建\\n \\n \\n
Ant Design Vue版移动端设计器📱(Vue3)
立即体验
采用 Vue3.0 和 Ant Design Vue 进行页面构建，移动端采用Vant4.0\\n \\n \\n
Ant Design Vue版移动端设计器📱(Vue2)
立即体验
采用 Vue2.7 和 Ant Design Vue 进行页面构建，移动端采用Vant2.0\\n \\n
\\n
\"],\"_fc_id\":\"id_Fr6ym35jirw4acc\",\"name\":\"ref_Fcfnm35jirw4adc\",\"_fc_drag_tag\":\"html\",\"display\":true,\"hidden\":false}]")) + // this.$refs.designer.setRule(formCreate.parseJson("[{\"type\":\"html\",\"native\":true,\"attrs\":{\"innerHTML\":\"\"},\"style\":{\"height\":\"100px\",\"width\":\"100%\",\"display\":\"flex\",\"justifyContent\":\"center\",\"alignItems\":\"center\"},\"children\":[\"
\\n👈🏻 点击左侧边栏 按钮查看更多功能示例\\n
\"],\"_fc_id\":\"id_F85km1usjbq4egc\",\"name\":\"ref_F2n0m1usjbq4ehc\",\"_fc_drag_tag\":\"html\",\"display\":true,\"hidden\":false},{\"type\":\"html\",\"native\":true,\"attrs\":{\"innerHTML\":\"\"},\"style\":{\"display\":\"block\",\"width\":\"100%\"},\"children\":[\"
\\n
FormCreate 设计器高级版演示站
\\n
全面实现多端表单设计，为企业提供低代码表单解决方案
\\n
\\n \\n
ElementPlus版PC端设计器👨🏻‍💻(Vue3)
立即体验
采用 Vue3.0 和 ElementPlus 进行页面构建\\n \\n \\n
ElementUI版PC端设计器👨🏻‍💻(Vue2)
立即体验
采用 Vue2.7 和 ElementUI 进行页面构建\\n \\n \\n
ElementPlus版移动端设计器📱(Vue3)
立即体验
采用 Vue3.0 和 ElementPlus 进行页面构建，移动端采用Vant4.0\\n \\n \\n
ElementUI版移动端设计器📱(Vue2)
立即体验
采用 Vue2.7 和 ElementUI 进行页面构建，移动端采用Vant2.0\\n \\n \\n
Ant Design Vue版PC端设计器👨🏻‍💻(Vue3)
立即体验
采用 Vue3.0 和 Ant Design Vue 进行页面构建\\n \\n \\n
Ant Design Vue版PC端设计器👨🏻‍💻(Vue2)
立即体验
采用 Vue2.7 和 Ant Design Vue 进行页面构建\\n \\n \\n
Ant Design Vue版移动端设计器📱(Vue3)
立即体验
采用 Vue3.0 和 Ant Design Vue 进行页面构建，移动端采用Vant4.0\\n \\n \\n
Ant Design Vue版移动端设计器📱(Vue2)
立即体验
采用 Vue2.7 和 Ant Design Vue 进行页面构建，移动端采用Vant2.0\\n \\n
\\n
\"],\"_fc_id\":\"id_Fr6ym35jirw4acc\",\"name\":\"ref_Fcfnm35jirw4adc\",\"_fc_drag_tag\":\"html\",\"display\":true,\"hidden\":false}]")) } - this.$refs.designer.setGlobalEvent({ - "event_Feq4lui56zxbabc": { - "label": "自定义", - "deletable": false, - "handle": "[[FORM-CREATE-PREFIX-function handle($inject){aaa;}-FORM-CREATE-SUFFIX]]" - }, - "event_Feq4lui56zxbab2c": { - "label": "自定义2", - "handle": function ($inject) { - console.log($inject); - } - } - }); - this.$refs.designer.setGlobalVariable({ - "var_Fppdlz6gytmzb1c": { - "label": "token", - "deletable": false, - "handle": function (get, api) { - return get('$cookie.token') || 'default Token' - } - } - }) - this.$refs.designer.setGlobalClass({ - "cls_Fzmulzw3u0oib0c": { - "label": "fff", - "deletable": false, - "style": { - "color": "red" - } - } - }) - this.$refs.designer.setGlobalData({ - "data_Fk6dlui4k0xuabc": { - "label": "自定义数据", - "type": "static", - "data": [ - 1, - 2, - 3, - 4 - ] - }, - "data_Fs1elui4kttlacc": { - "action": "http://192.168.1.4:8081/", - "deletable": false, - "method": "GET", - "headers": {}, - "data": {}, - "parse": "[[FORM-CREATE-PREFIX-function parse(res){return res.data;}-FORM-CREATE-SUFFIX]]", - "onError": "[[FORM-CREATE-PREFIX-function onError(e){}-FORM-CREATE-SUFFIX]]", - "label": "自定义接口数据", - "type": "fetch" - } - }) + // this.$refs.designer.setGlobalEvent({ + // "event_Feq4lui56zxbabc": { + // "label": "自定义", + // "deletable": false, + // "handle": "[[FORM-CREATE-PREFIX-function handle($inject){aaa;}-FORM-CREATE-SUFFIX]]" + // }, + // "event_Feq4lui56zxbab2c": { + // "label": "自定义2", + // "handle": function ($inject) { + // console.log($inject); + // } + // } + // }); + // this.$refs.designer.setGlobalVariable({ + // "var_Fppdlz6gytmzb1c": { + // "label": "token", + // "deletable": false, + // "handle": function (get, api) { + // return get('$cookie.token') || 'default Token' + // } + // } + // }) + // this.$refs.designer.setGlobalClass({ + // "cls_Fzmulzw3u0oib0c": { + // "label": "fff", + // "deletable": false, + // "style": { + // "color": "red" + // } + // } + // }) + // this.$refs.designer.setGlobalData({ + // "data_Fk6dlui4k0xuabc": { + // "label": "自定义数据", + // "type": "static", + // "data": [ + // 1, + // 2, + // 3, + // 4 + // ] + // }, + // "data_Fs1elui4kttlacc": { + // "action": "http://192.168.1.4:8081/", + // "deletable": false, + // "method": "GET", + // "headers": {}, + // "data": {}, + // "parse": "[[FORM-CREATE-PREFIX-function parse(res){return res.data;}-FORM-CREATE-SUFFIX]]", + // "onError": "[[FORM-CREATE-PREFIX-function onError(e){}-FORM-CREATE-SUFFIX]]", + // "label": "自定义接口数据", + // "type": "fetch" + // } + // }) } }; diff --git a/src/components/FcDesigner.vue b/src/components/FcDesigner.vue index 05d7765..48d96b1 100644 --- a/src/components/FcDesigner.vue +++ b/src/components/FcDesigner.vue @@ -202,7 +202,7 @@ - !node.children?.length - }, - fieldData:[] - + } }, emits: ['active', 'create', 'copy', 'delete', 'drag', 'inputData', 'inputPageData', 'save', 'clear', 'switchForm', 'copyRule', 'pasteRule', 'sortUp', 'sortDown', 'changeDevice', 'previewSubmit', 'previewReset'], @@ -1027,6 +1016,20 @@ export default defineComponent({ idx: -1, list: [] }, + modelValue: '', + selectedNodeName: '', + datasetData: [], + datasetInfo:{}, + dsSelectProps: { + label: 'name', + children: 'children', + value: 'id', + isLeaf: node => !node.children?.length + }, + fieldData:[], + datasetId: '', // 数据集id + + pageData: [], gridLine: false, hiddenLeft: false, @@ -1068,7 +1071,9 @@ export default defineComponent({ rule: [], api: {}, }), - formOptions: {}, + formOptions: { + datasetInfo:{} + }, oldOptionsKeys: [], form: { rule: tidyRuleConfig(form, formRule.value, {t}), @@ -1339,6 +1344,59 @@ export default defineComponent({ // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ const methods = { + dsClick(id) { + methods.onDatasetChange(id) + data.datasetData.forEach(element => { + if(element.table_id == id){ + data.datasetInfo = element + // data.inputForm.datasetInfo = element + data.formOptions.datasetInfo = element + } + }); + }, + onDatasetChange(id){ + let appUrl = data.appUrl + if( data.appUrl == null){ + appUrl = "http://192.168.1.38:8100" + } + data.fieldData = [] + axios.get( appUrl + '/datasetData/getFieldsByTableId', { + params: { + id: id + } + }).then(response => { + console.log(response) + response.data.data.forEach(element => { + element.label = element.name + element.item = 'input', + element.fieldtype = element.type, + element.maxlength = element.size, + element.field = element.origin_name + element.update = { + disabled: false + } + data.fieldData.push(element) + }) + }).catch(error => { + console.error(' 请求出错:', error); + }); + }, + getInit(){ + let appUrl = data.appUrl + if( data.appUrl == null){ + appUrl = "http://192.168.1.38:8100" + } + axios.get( appUrl+ '/datasetData/getTablesByAppId', { + params: { + appid: '1907238244651679745' + } + }).then(response => { + data.datasetData = response.data.data + }).catch(error => { + console.error(' 请求出错:', error); + }); + }, + setDevice(device) { data.device = device; vm.emit('changeDevice', device); @@ -2076,6 +2134,7 @@ export default defineComponent({ return data.dragForm.api.all().map(rule => rule.field).filter(id => !!id); }, getTitle(rule) { + debugger return (rule?.__fc__?.refRule?.__$title?.value || rule.title || '').trim() || (rule.props && rule.props.label) || t('com.' + (rule._menu && rule._menu.name) + '.name') || (rule._menu && rule._menu.label) || rule.type }, baseChange(field, value, _, fapi) { @@ -2399,8 +2458,10 @@ export default defineComponent({ data.baseForm.value = { field: rule.field, title: rule.title || '', + fieldtype: rule.fieldtype || '', info: rule.info, ignore: rule.ignore || false, + attributeId: rule.attributeId || false, _control: rule._control, ...formData }; @@ -2437,6 +2498,10 @@ export default defineComponent({ if (menu.field) { update.field = menu.field; } + if (menu.fieldtype) { + update.fieldtype = menu.fieldtype; + } + if (menu.rule) { methods.dragMenu({ rule: menu.rule, @@ -2719,7 +2784,7 @@ export default defineComponent({ } return !(globalDenyDrag && checkDragCondition(globalDenyDrag)); }, - dragAdd(children, evt, slot) { + dragAdd(children, evt, slot) { // 添加节点 delete evt.item._fc_allow_drag; const newIndex = evt.newIndex; const menu = evt.item._underlying_vm_ || evt.item.__rule__; @@ -3488,93 +3553,6 @@ export default defineComponent({ }, onPopoverHide() { }, - getInit(){ - axios.get('http://192.168.1.38:8100/datasetData/getTablesByAppId', { - headers: { - 'X-De-Token': 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1aWQiOjEsIm9pZCI6MX0.i8pMPviPZoQyjXML3dLfLek4XML2acUf-x0K90u9KoY' - }, - params: { - appid: '1907238244651679745' - } - }).then(response => { - this.datasetData = response.data.data - console.log(this.datasetData); - }).catch(error => { - console.error(' 请求出错:', error); - }); - }, - - dsClick(id) { - this.onDatasetChange(id) - this.datasetData.forEach(element => { - if(element.id == id){ - this.datasetInfo = element - } - }); - console.log(data); - // if (data.leaf) { - // if (this.modelValue !== data.id) { - // - // } - // //选中赋值 - // // _modelValue.value = data.id - // this.modelValue = data.id - // this.selectedNodeName = data.name - // // //关闭弹窗 - // // datasetSelectorPopover.value?.hide() - // this.$refs.datasetSelectorPopover.hide() - // } - }, - onDatasetChange(id){ - this.fieldData = [] - axios.post('http://192.168.1.38:8100/chart/listByDQ/'+ id +'/00', { - type: "table-info", - }, { - headers: { - 'X-De-Token': 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1aWQiOjEsIm9pZCI6MX0.i8pMPviPZoQyjXML3dLfLek4XML2acUf-x0K90u9KoY' - } - }).then(response => { - if(response.data.data.dimensionList.length>0){ - this.fieldData.push({ - label:'维度', - children:[] - }) - let dimensionList = response.data.data.dimensionList - dimensionList.forEach(element => { - element.label = element.name - element.item = 'input', - element.field = element.originName - element.update = { - disabled: true - } - this.fieldData[0].children.push(element) - }); - } - if(response.data.data.quotaList.length>0){ - this.fieldData.push({ - label:'指标', - children:[] - }) - let quotaList = response.data.data.quotaList - quotaList.forEach(element => { - element.label = element.name - element.item = 'input', - element.field = element.originName - element.update = { - disabled: true - } - this.fieldData[1].children.push(element) - }); - } - }).catch(error => { - console.error(' 请求出错:', error); - }); - - } - - - - }, }); diff --git a/src/config/base/field.js b/src/config/base/field.js index d86323e..bc6ab55 100644 --- a/src/config/base/field.js +++ b/src/config/base/field.js @@ -3,6 +3,22 @@ import {localeOptions} from '../../utils'; export default function field({t}) { return [ { + type: 'ConfigItem', + col: {show: true}, + style: 'margin-bottom: 10px', + name: 'attributeId', + props: { + label: t('form.attributeId'), + warning: t('warning.attributeId'), + }, + children: [{ + type: 'switch', + field: 'attributeId', + value: false, + wrap: {show: false}, + col: {show: false}, + }] + }, { type: 'FieldInput', field: 'field', value: '', @@ -14,6 +30,11 @@ export default function field({t}) { value: '', title: t('form.title'), }, { + type: 'Input', + field: 'fieldtype', + value: '', + title: t('form.fieldtype'), + },{ type: 'LanguageInput', field: 'info', value: '', diff --git a/src/config/base/form.js b/src/config/base/form.js index 28259e7..f74be9d 100644 --- a/src/config/base/form.js +++ b/src/config/base/form.js @@ -33,6 +33,11 @@ export default function form({t}) { {value: 'right', label: 'right'}, {value: 'top', label: 'top'}, ]) + }, { + type: 'input', + field: '>tableName', + value: '', + title: t('form.tableName'), }, { type: 'radio', field: 'size', diff --git a/src/locale/zh-cn.js b/src/locale/zh-cn.js index 0cba3b4..e55a957 100644 --- a/src/locale/zh-cn.js +++ b/src/locale/zh-cn.js @@ -3,12 +3,15 @@ const ZhCn = { form: { field: '字段 ID', title: '字段名称', + attributeId: '是否主键', + fieldtype: '字段类型', info: '提示信息', ignore: '忽略字段', native: '是否显示标题', control: '组件联动', labelShow: '是否显示', labelPosition: '标签的位置', + tableName: '自定义名称', labelStyle: '标签的样式', labelSuffix: '标签的后缀', formItem: '配置表单项', diff --git a/方法集合.docx b/方法集合.docx new file mode 100644 index 0000000..cf5b58d Binary files /dev/null and b/方法集合.docx differ