vue2-client 1.16.91 → 1.16.93

package/src/base-client/components/common/XDatePicker/demo.vue

@@ -1,153 +1,153 @@
-<template>
-  <a-card>
-    <a-row :gutter="16">
-      <a-col :span="6" v-for="(item,index) of all" :key="index">
-        <h3>{{ item.title }}</h3>
-        <x-form-date-picker
-          v-model="formValues[item.title]"
-          :attr="{ ...item.attr }"
-          :mode="item.mode"
-        />
-      </a-col>
-    </a-row>
-    <pre>{{ formValues }}</pre>
-  </a-card>
-</template>
-
-<script>
-import { defineComponent, reactive } from 'vue'
-import XFormDatePicker from './index.vue'
-
-export default defineComponent({
-  name: 'XFormDatePickerDemo',
-  components: { XFormDatePicker },
-  setup () {
-    const formValues = reactive({
-      '单日选择器-新增模式': null,
-      '单日选择器-查询EQUALS': null,
-      '单日选择器-查询BETWEEN': null,
-      '单日范围选择器-新增模式': null,
-      '单日范围选择器-查询BETWEEN': null,
-
-      '月份选择-查询BETWEEN': null,
-      '月份选择-查询EQUALS': null,
-      '月份选择-新增': null,
-      '月份范围选择-查询BETWEEN': null,
-      '月份范围选择-新增': null,
-
-      '年份选择-查询BETWEEN': null,
-      '年份选择-查询EQUALS': null,
-      '年份选择-新增': null,
-      '年份范围选择-查询BETWEEN': null,
-      '年份范围选择-新增': null,
-    })
-
-    const oneTest = reactive([{
-      title: '月份范围选择-查询BETWEEN',
-      attr: { type: 'monthRangePicker', queryType: 'BETWEEN' },
-      mode: '查询'
-    }])
-
-    const all = reactive([
-      {
-        title: '单日选择器-新增模式',
-        attr: { type: 'datePicker' },
-        mode: '新增'
-      },
-      {
-        title: '单日选择器-查询EQUALS',
-        attr: { type: 'datePicker', queryType: 'EQUALS' },
-        mode: '查询'
-      },
-      {
-        title: '单日选择器-查询BETWEEN',
-        attr: { type: 'datePicker', queryType: 'BETWEEN' },
-        mode: '查询'
-      },
-      {
-        title: '单日范围选择器-新增模式',
-        attr: { type: 'rangePicker' },
-        mode: '新增'
-      },
-      {
-        title: '单日范围选择器-查询BETWEEN',
-        attr: { type: 'rangePicker', queryType: 'BETWEEN' },
-        mode: '查询'
-      },
-      {
-        title: '月份选择-查询BETWEEN',
-        attr: { type: 'monthPicker', queryType: 'BETWEEN' },
-        mode: '查询'
-      },
-      {
-        title: '月份选择-查询EQUALS',
-        attr: { type: 'monthPicker', queryType: 'EQUALS' },
-        mode: '查询'
-      },
-      {
-        title: '月份选择-新增',
-        attr: { type: 'monthPicker' },
-        mode: '新增'
-      },
-      {
-        title: '月份范围选择-新增',
-        attr: { type: 'monthRangePicker' },
-        mode: '新增'
-      },
-      {
-        title: '月份范围选择-查询BETWEEN',
-        attr: { type: 'monthRangePicker', queryType: 'BETWEEN' },
-        mode: '查询'
-      },
-      {
-        title: '年份选择-查询BETWEEN',
-        attr: { type: 'yearPicker', queryType: 'BETWEEN', queryValueFormat: 'YYYY-MM-DD HH:mm:ss' },
-        mode: '查询'
-      },
-      {
-        title: '年份选择-查询EQUALS',
-        attr: { type: 'yearPicker', queryType: 'EQUALS' },
-        mode: '查询'
-      },
-      {
-        title: '年份选择-新增',
-        attr: { type: 'yearPicker' },
-        mode: '新增'
-      },
-      {
-        title: '年份范围选择-新增',
-        attr: { type: 'yearRangePicker' },
-        mode: '新增'
-      },
-      {
-        title: '年份范围选择-查询BETWEEN',
-        attr: { type: 'yearRangePicker', queryType: 'BETWEEN' },
-        mode: '查询'
-      },
-    ])
-
-    return { formValues, all, oneTest }
-  }
-})
-</script>
-
-<style scoped>
-h2 {
-  margin-bottom: 16px;
-}
-
-h3 {
-  margin-top: 24px;
-  margin-bottom: 8px;
-}
-
-x-form-date-picker {
-  margin-bottom: 16px;
-}
-
-pre {
-  background: #f8f8f8;
-  padding: 16px;
-  border: 1px solid #ddd;
-}
-</style>
+<template>
+  <a-card>
+    <a-row :gutter="16">
+      <a-col :span="6" v-for="(item,index) of all" :key="index">
+        <h3>{{ item.title }}</h3>
+        <x-form-date-picker
+          v-model="formValues[item.title]"
+          :attr="{ ...item.attr }"
+          :mode="item.mode"
+        />
+      </a-col>
+    </a-row>
+    <pre>{{ formValues }}</pre>
+  </a-card>
+</template>
+
+<script>
+import { defineComponent, reactive } from 'vue'
+import XFormDatePicker from './index.vue'
+
+export default defineComponent({
+  name: 'XFormDatePickerDemo',
+  components: { XFormDatePicker },
+  setup () {
+    const formValues = reactive({
+      '单日选择器-新增模式': null,
+      '单日选择器-查询EQUALS': null,
+      '单日选择器-查询BETWEEN': null,
+      '单日范围选择器-新增模式': null,
+      '单日范围选择器-查询BETWEEN': null,
+
+      '月份选择-查询BETWEEN': null,
+      '月份选择-查询EQUALS': null,
+      '月份选择-新增': null,
+      '月份范围选择-查询BETWEEN': null,
+      '月份范围选择-新增': null,
+
+      '年份选择-查询BETWEEN': null,
+      '年份选择-查询EQUALS': null,
+      '年份选择-新增': null,
+      '年份范围选择-查询BETWEEN': null,
+      '年份范围选择-新增': null,
+    })
+
+    const oneTest = reactive([{
+      title: '月份范围选择-查询BETWEEN',
+      attr: { type: 'monthRangePicker', queryType: 'BETWEEN' },
+      mode: '查询'
+    }])
+
+    const all = reactive([
+      {
+        title: '单日选择器-新增模式',
+        attr: { type: 'datePicker' },
+        mode: '新增'
+      },
+      {
+        title: '单日选择器-查询EQUALS',
+        attr: { type: 'datePicker', queryType: 'EQUALS' },
+        mode: '查询'
+      },
+      {
+        title: '单日选择器-查询BETWEEN',
+        attr: { type: 'datePicker', queryType: 'BETWEEN' },
+        mode: '查询'
+      },
+      {
+        title: '单日范围选择器-新增模式',
+        attr: { type: 'rangePicker' },
+        mode: '新增'
+      },
+      {
+        title: '单日范围选择器-查询BETWEEN',
+        attr: { type: 'rangePicker', queryType: 'BETWEEN' },
+        mode: '查询'
+      },
+      {
+        title: '月份选择-查询BETWEEN',
+        attr: { type: 'monthPicker', queryType: 'BETWEEN' },
+        mode: '查询'
+      },
+      {
+        title: '月份选择-查询EQUALS',
+        attr: { type: 'monthPicker', queryType: 'EQUALS' },
+        mode: '查询'
+      },
+      {
+        title: '月份选择-新增',
+        attr: { type: 'monthPicker' },
+        mode: '新增'
+      },
+      {
+        title: '月份范围选择-新增',
+        attr: { type: 'monthRangePicker' },
+        mode: '新增'
+      },
+      {
+        title: '月份范围选择-查询BETWEEN',
+        attr: { type: 'monthRangePicker', queryType: 'BETWEEN' },
+        mode: '查询'
+      },
+      {
+        title: '年份选择-查询BETWEEN',
+        attr: { type: 'yearPicker', queryType: 'BETWEEN', queryValueFormat: 'YYYY-MM-DD HH:mm:ss' },
+        mode: '查询'
+      },
+      {
+        title: '年份选择-查询EQUALS',
+        attr: { type: 'yearPicker', queryType: 'EQUALS' },
+        mode: '查询'
+      },
+      {
+        title: '年份选择-新增',
+        attr: { type: 'yearPicker' },
+        mode: '新增'
+      },
+      {
+        title: '年份范围选择-新增',
+        attr: { type: 'yearRangePicker' },
+        mode: '新增'
+      },
+      {
+        title: '年份范围选择-查询BETWEEN',
+        attr: { type: 'yearRangePicker', queryType: 'BETWEEN' },
+        mode: '查询'
+      },
+    ])
+
+    return { formValues, all, oneTest }
+  }
+})
+</script>
+
+<style scoped>
+h2 {
+  margin-bottom: 16px;
+}
+
+h3 {
+  margin-top: 24px;
+  margin-bottom: 8px;
+}
+
+x-form-date-picker {
+  margin-bottom: 16px;
+}
+
+pre {
+  background: #f8f8f8;
+  padding: 16px;
+  border: 1px solid #ddd;
+}
+</style>

package/src/base-client/components/common/XDatePicker/index.vue

@@ -40,6 +40,11 @@ export default {
       type: Boolean,
       default: false,
     },
+    // 是否启用时间弹出到最外层
+    enablePopupToBody: {
+      type: Boolean,
+      default: false
+    },
     getCalendarContainer: {
       type: Function,
       default: (triggerNode) => triggerNode.parentNode,
@@ -187,6 +192,9 @@ export default {
         moment(value[1]).format(this.formatType),
       ]
     },
+    getBodyContainer (triggerNode) {
+      return document.body
+    }
   },
 }
 </script>
@@ -199,7 +207,8 @@ export default {
         (attr?.queryType !== 'BETWEEN' || mode !== '查询')) ||
         (['rangePicker'].includes(attr.type) && mode !== '查询')
     "
-    :getCalendarContainer="getCalendarContainer"
+    :getCalendarContainer="enablePopupToBody? undefined :getCalendarContainer"
+    :getPopupContainer="enablePopupToBody? getBodyContainer : undefined"
     v-model="localValue"
     :disabled="disabled || readOnly"
     style="width: 100%"
@@ -215,7 +224,8 @@ export default {
       attr.type === 'monthPicker' ||
         (attr.type === 'monthRangePicker' && mode !== '查询')
     "
-    :getCalendarContainer="(triggerNode) => triggerNode.parentNode"
+    :getCalendarContainer="enablePopupToBody? undefined :getCalendarContainer"
+    :getPopupContainer="enablePopupToBody? getBodyContainer : undefined"
     v-model="localValue"
     :disabled="disabled || readOnly"
     :show-time="true"
@@ -229,7 +239,8 @@ export default {
       attr.type === 'yearPicker' ||
         (attr.type === 'yearRangePicker' && mode !== '查询')
     "
-    :getCalendarContainer="(triggerNode) => triggerNode.parentNode"
+    :getCalendarContainer="enablePopupToBody? undefined :getCalendarContainer"
+    :getPopupContainer="enablePopupToBody? getBodyContainer : undefined"
     v-model="localValue"
     :disabled="disabled || readOnly"
     format="YYYY"
@@ -254,7 +265,8 @@ export default {
         (attr.type === 'rangePicker' && mode === '查询') ||
         ['yearRangePicker', 'monthRangePicker'].includes(attr.type)
     "
-    :getCalendarContainer="(triggerNode) => triggerNode.parentNode"
+    :getCalendarContainer="enablePopupToBody? undefined :getCalendarContainer"
+    :getPopupContainer="enablePopupToBody? getBodyContainer : undefined"
     v-model="localValue"
     :disabled="disabled"
     :placeholder="placeholder"

package/src/base-client/components/common/XDescriptions/index.js

@@ -1,3 +1,3 @@
-import XDescriptions from './XDescriptions.vue'
-
-export default XDescriptions
+import XDescriptions from './XDescriptions.vue'
+
+export default XDescriptions

package/src/base-client/components/common/XDescriptions/index.md

@@ -1,83 +1,83 @@
-# XDescriptions
-
-动态Descriptions控件，根据JSON配置动态生成Descriptions
-
-
-## 何时使用
-
-当需要一个动态生成的Descriptions时
-
-
-引用方式：
-
-```javascript
-import XDescriptions from '@vue2-client/base-client/components/XDescriptions/XDescriptions'
-
-export default {
-    components: {
-      XDescriptions
-    }
-}
-```
-
-
-
-## 代码演示
-
-```html
-<x-descriptions
-  title="设备属性"
-  :content="details.prop_json"
-  :queryParamsName="queryParamsName">
-</x-descriptions>
-```
-
-## API
-
-| 参数              | 说明          | 类型     | 默认值  |
-|-----------------|-------------|--------|------|
-| title           | 业务名称        | String | ''   |
-| content         | 业务内容        | String | ''   |
-| queryParamsName | 查询配置JSON文件名 | String | null |
-| serviceName     | 配置所属命名空间    | String | null |
-
-## 例子1
-----
-（基础使用）
-
-```vue
-<template>
-  <x-descriptions
-    title="设备属性"
-    :content="details.prop_json"
-    :configName="configName">
-  </x-descriptions>
-</template>
-
-<script>
-  import XDescriptions from '@vue2-client/base-client/components/XDescriptions/XDescriptions'
-
-  export default {
-    components: {
-      XDescriptions
-    },
-    data () {
-      return {
-        // 查询配置文件名
-        configName: 'logQueryParams',
-        details: {
-          prop_json: {
-              规格: 'G2.5'
-          }
-        }
-      }
-    },
-    created () {
-
-    },
-    methods: {
-
-    }
-  }
-</script>
-```
+# XDescriptions
+
+动态Descriptions控件，根据JSON配置动态生成Descriptions
+
+
+## 何时使用
+
+当需要一个动态生成的Descriptions时
+
+
+引用方式：
+
+```javascript
+import XDescriptions from '@vue2-client/base-client/components/XDescriptions/XDescriptions'
+
+export default {
+    components: {
+      XDescriptions
+    }
+}
+```
+
+
+
+## 代码演示
+
+```html
+<x-descriptions
+  title="设备属性"
+  :content="details.prop_json"
+  :queryParamsName="queryParamsName">
+</x-descriptions>
+```
+
+## API
+
+| 参数              | 说明          | 类型     | 默认值  |
+|-----------------|-------------|--------|------|
+| title           | 业务名称        | String | ''   |
+| content         | 业务内容        | String | ''   |
+| queryParamsName | 查询配置JSON文件名 | String | null |
+| serviceName     | 配置所属命名空间    | String | null |
+
+## 例子1
+----
+（基础使用）
+
+```vue
+<template>
+  <x-descriptions
+    title="设备属性"
+    :content="details.prop_json"
+    :configName="configName">
+  </x-descriptions>
+</template>
+
+<script>
+  import XDescriptions from '@vue2-client/base-client/components/XDescriptions/XDescriptions'
+
+  export default {
+    components: {
+      XDescriptions
+    },
+    data () {
+      return {
+        // 查询配置文件名
+        configName: 'logQueryParams',
+        details: {
+          prop_json: {
+              规格: 'G2.5'
+          }
+        }
+      }
+    },
+    created () {
+
+    },
+    methods: {
+
+    }
+  }
+</script>
+```