vue2-client 1.16.22 → 1.16.24

package/src/base-client/components/his/XSimpleTable/XSimpleTable.vue

@@ -1,119 +1,119 @@
-<template>
-  <div class="table-container" :style="{ height: tableHeight }">
-    <a-table
-      :columns="processedColumns"
-      :dataSource="tableData"
-      :pagination="false"
-      :bordered="false"
-      :rowKey="rowKey"
-      :scroll="{ y: scrollY }"
-    />
-  </div>
-</template>
-
-<script>
-import { getConfigByName, runLogic } from '@vue2-client/services/api/common'
-
-export default {
-  props: {
-    queryParamsName: String,
-    rowKey: {
-      type: String,
-      default: 'id'
-    },
-    parameter: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  data () {
-    return {
-      columns: [],
-      tableData: [],
-      tableHeight: 'auto', // 默认高度
-      scrollY: undefined
-    }
-  },
-  watch: {
-    queryParamsName: {
-      immediate: true,
-      handler (val) {
-        val && this.init(val, this.parameter)
-      }
-    }
-  },
-  computed: {
-    processedColumns () {
-      return this.columns.map(column => ({
-        ...column,
-        customHeaderCell: column.headerStyle
-          ? () => ({ style: column.headerStyle })
-          : undefined
-      }))
-    }
-  },
-  methods: {
-    init (config, parameterData) {
-      getConfigByName(config, 'af-his', res => {
-        // 从配置中获取表格高度
-        this.tableHeight = res.tableHeight || '400px' // 默认400px
-        this.columns = res.columns || []
-
-        runLogic(res.logicName, parameterData, 'af-his').then(result => {
-          this.tableData = result.map((item, index) => ({
-            ...item,
-            key: item[this.rowKey] || `row_${index}`
-          }))
-
-          this.$nextTick(() => {
-            this.scrollY = this.tableHeight
-          })
-        })
-      })
-    }
-  }
-}
-</script>
-
-<style scoped>
-/* 表格容器 */
-.table-container {
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-/* 基础无边框样式 */
-/deep/ .ant-table {
-  border: none !important;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-}
-
-/deep/ .ant-table-content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-}
-
-/deep/ .ant-table-body {
-  flex: 1;
-  overflow-y: auto !important;
-}
-
-/deep/ .ant-table-tbody > tr > td {
-  border-bottom: none !important;
-  padding: 6px !important;
-}
-
-/deep/ .ant-table-thead > tr > th {
-  border-bottom: none !important;
-  background: none !important;
-  padding: 8px 6px !important;
-  position: sticky;
-  top: 0;
-  z-index: 1;
-  background-color: white !important;
-}
-</style>
+<template>
+  <div class="table-container" :style="{ height: tableHeight }">
+    <a-table
+      :columns="processedColumns"
+      :dataSource="tableData"
+      :pagination="false"
+      :bordered="false"
+      :rowKey="rowKey"
+      :scroll="{ y: scrollY }"
+    />
+  </div>
+</template>
+
+<script>
+import { getConfigByName, runLogic } from '@vue2-client/services/api/common'
+
+export default {
+  props: {
+    queryParamsName: String,
+    rowKey: {
+      type: String,
+      default: 'id'
+    },
+    parameter: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+      columns: [],
+      tableData: [],
+      tableHeight: 'auto', // 默认高度
+      scrollY: undefined
+    }
+  },
+  watch: {
+    queryParamsName: {
+      immediate: true,
+      handler (val) {
+        val && this.init(val, this.parameter)
+      }
+    }
+  },
+  computed: {
+    processedColumns () {
+      return this.columns.map(column => ({
+        ...column,
+        customHeaderCell: column.headerStyle
+          ? () => ({ style: column.headerStyle })
+          : undefined
+      }))
+    }
+  },
+  methods: {
+    init (config, parameterData) {
+      getConfigByName(config, 'af-his', res => {
+        // 从配置中获取表格高度
+        this.tableHeight = res.tableHeight || '400px' // 默认400px
+        this.columns = res.columns || []
+
+        runLogic(res.logicName, parameterData, 'af-his').then(result => {
+          this.tableData = result.map((item, index) => ({
+            ...item,
+            key: item[this.rowKey] || `row_${index}`
+          }))
+
+          this.$nextTick(() => {
+            this.scrollY = this.tableHeight
+          })
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* 表格容器 */
+.table-container {
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 基础无边框样式 */
+/deep/ .ant-table {
+  border: none !important;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+/deep/ .ant-table-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+/deep/ .ant-table-body {
+  flex: 1;
+  overflow-y: auto !important;
+}
+
+/deep/ .ant-table-tbody > tr > td {
+  border-bottom: none !important;
+  padding: 6px !important;
+}
+
+/deep/ .ant-table-thead > tr > th {
+  border-bottom: none !important;
+  background: none !important;
+  padding: 8px 6px !important;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background-color: white !important;
+}
+</style>

package/src/base-client/components/his/XTimeSelect/XTimeSelect.vue

@@ -1,153 +1,200 @@
-<template>
-  <div class="x-time-select">
-    <div class="time-select-container">
-      <div v-if="type === 'range'" class="picker-wrapper">
-        <a-range-picker
-          :value="dateRange"
-          :placeholder="['开始日期', '结束日期']"
-          separator="至"
-          :disabled="disabled"
-          :allowClear="allowClear"
-          :format="format"
-          @change="handleDateChange"
-        />
-      </div>
-      <div v-if="type === 'date'" class="picker-wrapper">
-        <a-date-picker
-          :value="dateRange"
-          :format="format"
-          :disabled="disabled"
-          :allowClear="allowClear"
-          @change="handleDateChange"
-        />
-      </div>
-
-    </div>
-  </div>
-</template>
-
-<script>
-import moment from 'moment'
-import { getConfigByName } from '@vue2-client/services/api/common'
-
-export default {
-  name: 'XTimeSelect',
-  inject: ['getComponentByName'],
-  props: {
-    queryParamsName: {
-      type: String,
-      default: null
-    },
-    value: {
-      type: Array,
-      default: () => []
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    allowClear: {
-      type: Boolean,
-      default: true
-    },
-    format: {
-      type: String,
-      default: 'YYYY/MM/DD'
-    }
-  },
-  data () {
-    return {
-      dateRange: [],
-      type: 'range'
-    }
-  },
-  watch: {
-    value: {
-      handler (newVal) {
-        this.convertValueToMoment(newVal)
-      },
-      immediate: true,
-      deep: true
-    },
-    type () {
-      this.convertValueToMoment(this.value)
-    }
-
-  },
-  created () {
-    this.getData(this.queryParamsName)
-  },
-  methods: {
-    convertValueToMoment (value) {
-      if (this.type === 'range' && value?.length === 2) {
-        this.dateRange = [
-          value[0] ? moment(value[0]) : null,
-          value[1] ? moment(value[1]) : null
-        ]
-      } else if (this.type === 'date' && value?.length === 1) {
-        this.dateRange = [value[0] ? moment(value[0]) : null]
-      } else {
-        this.dateRange = []
-      }
-    },
-    handleDateChange (dates, dateStrings) {
-      this.dateRange = dates
-      console.warn(dateStrings)
-      this.$emit('change', dateStrings)
-    },
-    async getData (data) {
-      if (data) {
-        getConfigByName(data, 'af-his', res => {
-          if (['date', 'range'].includes(res.type)) {
-            this.type = res.type
-          }
-          this.convertValueToMoment(this.value)
-        })
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-.x-time-select {
-  position: relative;
-  width: 100%;
-  box-sizing: border-box;
-  display: block;
-}
-
-.time-select-container {
-  display: flex;
-  align-items: center;
-}
-
-
-.picker-wrapper {
-  flex: 1;
-}
-
-.x-time-select :deep(.ant-picker-range),
-.x-time-select :deep(.ant-picker) {
-  width: 100%;
-  height: 30px;
-  border-radius: 7px;
-  background: #FFFFFF;
-  border: 1px solid #E5E9F0;
-}
-.x-time-select :deep(.ant-calendar-picker) {
-  width: 100%;
-  display: block;
-}
-.x-time-select :deep(.ant-calendar-picker-input) {
-  width: 100%;
-  height: 30px;
-  border-radius: 7px;
-  background: #FFFFFF;
-  border: 1px solid #E5E9F0;
-}
-
-.x-time-select :deep(.ant-input) {
-  width: 100%;
-}
-</style>
+<template>
+  <div class="x-time-select">
+    <div class="time-select-container">
+      <div v-if="type === 'range'" class="picker-wrapper">
+        <a-range-picker
+          :value="dateRange"
+          :placeholder="['开始日期', '结束日期']"
+          separator="至"
+          :disabled="disabled"
+          :allowClear="allowClear"
+          :format="format"
+          :showTime="showTime"
+          @change="handleDateChange"
+        />
+      </div>
+      <div v-if="type === 'date'" class="picker-wrapper">
+        <a-date-picker
+          :value="dateRange[0]"
+          :format="format"
+          :disabled="disabled"
+          :allowClear="allowClear"
+          :showTime="showTime"
+          @change="handleDateChange"
+        />
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import moment from 'moment'
+import { getConfigByName } from '@vue2-client/services/api/common'
+
+export default {
+  name: 'XTimeSelect',
+  inject: ['getComponentByName'],
+  props: {
+    queryParamsName: {
+      type: String,
+      default: null
+    },
+    value: {
+      type: Array,
+      default: () => []
+    },
+    defaultTime: {
+      type: Array,
+      default: () => []
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    allowClear: {
+      type: Boolean,
+      default: true
+    },
+    format: {
+      type: String,
+      default: 'YYYY-MM-DD'
+    }
+  },
+  data () {
+    return {
+      dateRange: [],
+      type: 'range'
+    }
+  },
+  computed: {
+    showTime () {
+      // 根据format判断是否需要显示时间选择器
+      return this.format && (this.format.includes('HH:mm') || this.format.includes('hh:mm'))
+    }
+  },
+  watch: {
+    value: {
+      handler (newVal) {
+        this.convertValueToMoment(newVal)
+      },
+      immediate: true,
+      deep: true
+    },
+    defaultTime: {
+      handler (newVal) {
+        // 只有在没有传入value时才使用defaultTime
+        if (!this.value || this.value.length === 0) {
+          this.convertValueToMoment(newVal)
+        }
+      },
+      immediate: true,
+      deep: true
+    },
+    type () {
+      this.convertValueToMoment(this.value)
+    }
+
+  },
+  created () {
+    this.getData(this.queryParamsName)
+  },
+  methods: {
+    convertValueToMoment (value) {
+      // 如果没有传入value或value为空，则使用defaultTime
+      const timeToUse = (value && value.length > 0) ? value : this.defaultTime
+      if (this.type === 'range' && timeToUse?.length === 2) {
+        this.dateRange = [
+          timeToUse[0] ? moment(timeToUse[0]) : null,
+          timeToUse[1] ? moment(timeToUse[1]) : null
+        ]
+      } else if (this.type === 'date' && timeToUse?.length === 1) {
+        this.dateRange = [timeToUse[0] ? moment(timeToUse[0]) : null]
+      } else {
+        this.dateRange = []
+      }
+    },
+    handleDateChange (dates, dateStrings) {
+      if (this.type === 'date') {
+        // 单个日期选择器，dates是一个moment对象或null
+        this.dateRange = [dates]
+      } else {
+        // 范围选择器，dates是一个数组
+        this.dateRange = dates
+      }
+      this.$emit('change', dateStrings)
+    },
+    async getData (data) {
+      if (data) {
+        getConfigByName(data, 'af-his', res => {
+          if (['date', 'range'].includes(res.type)) {
+            this.type = res.type
+          }
+          // 处理format配置
+          if (res.format !== undefined) {
+            this.format = res.format
+          }
+          // 处理defaultTime配置
+          if (res.defaultTime !== undefined) {
+            if (res.defaultTime === 'now') {
+              // 如果配置为'now'，设置当前时间
+              const now = moment().format(this.format)
+              if (this.type === 'range') {
+                this.defaultTime = [now, now]
+              } else if (this.type === 'date') {
+                this.defaultTime = [now]
+              }
+            } else if (Array.isArray(res.defaultTime)) {
+              // 如果配置为数组，直接使用
+              this.defaultTime = res.defaultTime
+            }
+          }
+          this.convertValueToMoment(this.value)
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.x-time-select {
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+  display: block;
+}
+
+.time-select-container {
+  display: flex;
+  align-items: center;
+}
+
+.picker-wrapper {
+  flex: 1;
+}
+
+.x-time-select :deep(.ant-picker-range),
+.x-time-select :deep(.ant-picker) {
+  width: 100%;
+  height: 30px;
+  border-radius: 7px;
+  background: #FFFFFF;
+  border: 1px solid #E5E9F0;
+}
+.x-time-select :deep(.ant-calendar-picker) {
+  width: 100%;
+  display: block;
+}
+.x-time-select :deep(.ant-calendar-picker-input) {
+  width: 100%;
+  height: 30px;
+  border-radius: 7px;
+  background: #FFFFFF;
+  border: 1px solid #E5E9F0;
+}
+
+.x-time-select :deep(.ant-input) {
+  width: 100%;
+}
+</style>