From a4b826a62d2fab346af15de467fadfd33f757339 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E8=A3=95=E8=B4=A2?= Date: Thu, 5 Oct 2023 05:58:37 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/mdp-ui/directive/adaptive.js | 67 +++ .../mdp-ui/directive/el-table/adaptive.js | 53 -- .../mdp-ui/directive/{el-table => }/index.js | 0 src/components/mdp-ui/index.js | 2 +- src/views/mdp/form/formDef/Form.vue | 7 +- src/views/mdp/form/formDef/Index.vue | 14 +- src/views/mdp/form/formField/Field.vue | 252 ++++++++ src/views/mdp/form/formField/FieldCfg.vue | 219 +++++++ src/views/mdp/form/formField/FormField.vue | 569 ------------------ src/views/mdp/form/formField/Index.vue | 317 ++++++++++ 10 files changed, 864 insertions(+), 636 deletions(-) create mode 100644 src/components/mdp-ui/directive/adaptive.js delete mode 100644 src/components/mdp-ui/directive/el-table/adaptive.js rename src/components/mdp-ui/directive/{el-table => }/index.js (100%) create mode 100644 src/views/mdp/form/formField/Field.vue create mode 100644 src/views/mdp/form/formField/FieldCfg.vue delete mode 100644 src/views/mdp/form/formField/FormField.vue create mode 100644 src/views/mdp/form/formField/Index.vue diff --git a/src/components/mdp-ui/directive/adaptive.js b/src/components/mdp-ui/directive/adaptive.js new file mode 100644 index 0000000..366a345 --- /dev/null +++ b/src/components/mdp-ui/directive/adaptive.js @@ -0,0 +1,67 @@ +// 设置表格高度 +const doResize = async (el, binding, vnode) => { + + // 获取表格Dom对象 + if(vnode.$table){ + const { + componentInstance: $table + } = await vnode + + // 获取调用传递过来的数据 + const { + value + } = binding + + if (!$table.height) { + throw new Error(`el-$table must set the height. Such as height='100px'`) + } + // 获取距底部距离（用于展示页码等信息） + const bottomOffset = (value && value.bottomOffset) || 50 + + // 计算列表高度并设置 + const height = window.innerHeight - el.getBoundingClientRect().top - bottomOffset + $table.layout.setHeight(height) + $table.doLayout() + }else{ + //要起作用，请先给容器添加一个默认高度，否则不起作用 + // 获取调用传递过来的数据 + const { + value + } = binding + // 获取距底部距离（用于展示页码等信息） + const bottomOffset = (value && value.bottomOffset) || 50 + + // 计算列表高度并设置 + const height = window.innerHeight - el.getBoundingClientRect().top - bottomOffset + el.style.height = height+'px'; // 更新元素高度 + } + +} + +export default { + // 初始化设置 + bind(el, binding, vnode) { + // 设置resize监听方法 + el.resizeListener = async () => { + await doResize(el, binding, vnode) + } + // 绑定监听方法到addResizeListener + // addResizeListener(window.document.body, el.resizeListener) + window.addEventListener('resize', el.resizeListener) + }, + update(el, binding, vnode) { + doResize(el, binding, vnode) + }, + // 绑定默认高度 + async inserted(el, binding, vnode) { + await doResize(el, binding, vnode) + }, + // 销毁时设置 + unbind(el) { + // 移除resize监听 + // removeResizeListener(el, el.resizeListener) + window.removeEventListener('resize', el.resizeListener) + } +} + + diff --git a/src/components/mdp-ui/directive/el-table/adaptive.js b/src/components/mdp-ui/directive/el-table/adaptive.js deleted file mode 100644 index 2938a74..0000000 --- a/src/components/mdp-ui/directive/el-table/adaptive.js +++ /dev/null @@ -1,53 +0,0 @@ -// 设置表格高度 -const doResize = async (el, binding, vnode) => { - // 获取表格Dom对象 - - const { - componentInstance: $table - } = await vnode - // 获取调用传递过来的数据 - const { - value - } = binding - - if (!$table.height) { - throw new Error(`el-$table must set the height. Such as height='100px'`) - } - // 获取距底部距离（用于展示页码等信息） - const bottomOffset = (value && value.bottomOffset) || 30 - - if (!$table) return - - // 计算列表高度并设置 - const height = window.innerHeight - el.getBoundingClientRect().top - bottomOffset - $table.layout.setHeight(height) - $table.doLayout() -} - -export default { - // 初始化设置 - bind(el, binding, vnode) { - // 设置resize监听方法 - el.resizeListener = async () => { - await doResize(el, binding, vnode) - } - // 绑定监听方法到addResizeListener - // addResizeListener(window.document.body, el.resizeListener) - window.addEventListener('resize', el.resizeListener) - }, - update(el, binding, vnode) { - doResize(el, binding, vnode) - }, - // 绑定默认高度 - async inserted(el, binding, vnode) { - await doResize(el, binding, vnode) - }, - // 销毁时设置 - unbind(el) { - // 移除resize监听 - // removeResizeListener(el, el.resizeListener) - window.removeEventListener('resize', el.resizeListener) - } -} - - diff --git a/src/components/mdp-ui/directive/el-table/index.js b/src/components/mdp-ui/directive/index.js similarity index 100% rename from src/components/mdp-ui/directive/el-table/index.js rename to src/components/mdp-ui/directive/index.js diff --git a/src/components/mdp-ui/index.js b/src/components/mdp-ui/index.js index 26a8f86..3fb43e0 100644 --- a/src/components/mdp-ui/index.js +++ b/src/components/mdp-ui/index.js @@ -10,7 +10,7 @@ import MdpTable from './mdp-table/Index' import MdpTableConfigs from './mdp-table-configs/Index' import MdpHiQuery from './mdp-hi-query/Index' // 表格高度设定指令 -import adaptive from './directive/el-table' +import adaptive from './directive' import './mdp.scss' // global css diff --git a/src/views/mdp/form/formDef/Form.vue b/src/views/mdp/form/formDef/Form.vue index c58bb05..9283c34 100644 --- a/src/views/mdp/form/formDef/Form.vue +++ b/src/views/mdp/form/formDef/Form.vue @@ -6,7 +6,7 @@ 表单中心 配置 - + @@ -64,13 +64,12 @@ import * as FormDefApi from '@/api/mdp/form/formDef'; import { mapGetters } from 'vuex' import { MdpFormMixin } from '@/components/mdp-ui/mixin/MdpFormMixin.js'; -import FormField from '../formField/FormField' -import MDinput from '@/components/MDinput' +import FormField from '../formField/Index' export default { name:'formDefForm', mixins:[MdpFormMixin], components: { - FormField,'md-input':MDinput + FormField }, computed: { }, diff --git a/src/views/mdp/form/formDef/Index.vue b/src/views/mdp/form/formDef/Index.vue index 05ca1a2..6d532db 100644 --- a/src/views/mdp/form/formDef/Index.vue +++ b/src/views/mdp/form/formDef/Index.vue @@ -133,7 +133,7 @@