vue2-client 1.12.1 → 1.12.3-9.alpha

package/src/base-client/components/common/XTable/XTableWrapper.vue

@@ -1,240 +1,244 @@
-<template>
-  <s-table
-    ref="table"
-    :id="tableContext.uniqueId"
-    :alert="true"
-    :columns="tableContext.tableColumns"
-    :data="loadData()"
-    :rowKey="tableContext.rowKey"
-    :showSummary="tableContext.showSummary"
-    :rowSelection="tableContext.rowSelection"
-    :scroll="{ x: tableContext.scrollXWidth, y: tableContext.scrollYHeight }"
-    :showPagination="tableContext.showPagination"
-    :hidePagination="tableContext.simpleMode"
-    :showSelected="!tableContext.simpleMode"
-    :pageSize="tableContext.simpleMode ? 1000 : undefined"
-    :setScrollYHeight="tableContext.setScrollYHeight"
-    :selectRowMode="tableContext.selectRowMode"
-    size="default"
-  >
-    <template
-      v-for="(item, c_index) in tableContext.tableColumns"
-      :slot="item.dataIndex"
-      slot-scope="text, record, index">
-      <template v-if="tableContext.isEditMode && getFromItem(item.dataIndex,text, record, index)">
-        <x-form-item
-          class="innerTable"
-          :style="{ paddingTop: 0, paddingBottom: 0, paddingLeft: 0, paddingRight: 0 }"
-          :form="record"
-          :attr="getFromItem(item.dataIndex,text, record, index)"
-          :service-name="tableContext.serviceName"
-          mode="新增/修改"
-          :env="tableContext.env"
-          :setForm="(obj)=>tableContext.setForm(record,obj)"
-          @rowChoose="(row, attr, callback) => tableContext.rowChoose(row, attr, callback, record)"
-          :showLabel="false"
-          :key="'editRow-' + c_index"
-        />
-      </template>
-      <span v-else-if="item.slotType === 'index'" :key="'index-' + c_index">
-        {{ index + 1 }}
-      </span>
-      <CustomFuncCel
-        :text="text"
-        :record="text"
-        :index="index"
-        :item="item"
-        :localDataSource="$refs.table.localDataSource"
-        v-else-if="item.slotCustomFunction"
-        :key="'customJs-' + c_index"></CustomFuncCel>
-      <span v-else-if="item.slotType === 'link'" :key="'link-' + c_index">
-        <a @click="tableContext.columnClick(item.dataIndex,text,record)">{{ text }}</a>
-      </span>
-      <span v-else-if="item.slotType === 'gotoUserDetail'" :key="'gotoUserDetail-' + c_index">
-        <a @click="tableContext.gotoUserDetail(item.dataIndex,text,record)">{{ text }}</a>
-      </span>
-      <span v-else-if="item.slotType === 'ellipsis'" :key="'ellipsis-' + c_index">
-        <ellipsis :length="item.slotValue" tooltip>{{ text === '' ? '--' : text }}</ellipsis>
-      </span>
-      <span v-else-if="item.slotType === 'badge'" :key="'badge-' + c_index">
-        <x-badge
-          :service-name="tableContext.serviceName"
-          :env="tableContext.env"
-          v-if="text !== null && text !== undefined"
-          :badge-key="item.slotKeyMap"
-          :value="text"/>
-      </span>
-      <span v-else-if="item.slotType === 'date'" :key="'date-' + c_index">
-        {{ format(text, 'yyyy-MM-dd') }}
-      </span>
-      <span v-else-if="item.slotType === 'dateTime'" :key="'dateTime-' + c_index">
-        {{ format(text, 'yyyy-MM-dd hh:mm:ss') }}
-      </span>
-      <span v-else-if="item.slotType === 'towDecimal'" :key="'towDecimal-' + c_index">
-        {{ numberFormat(text, 2) }}
-      </span>
-      <span v-else-if="item.slotType === 'fourDecimal'" :key="'fourDecimal-' + c_index">
-        {{ numberFormat(text, 4) }}
-      </span>
-      <span v-else-if="item.slotType === 'int'" :key="'int-' + c_index">
-        {{ numberFormat(text, 0) }}
-      </span>
-      <span v-else-if="item.slotType === 'action'" :key="'action-' + c_index">
-        <template v-if="item.actionArr && item.actionArr.length > 0">
-          <a-dropdown>
-            <a class="ant-dropdown-link" @click="e => e.preventDefault()">
-              {{ item.scopedSlots?.customRender || item.slotValue }} <a-icon type="down"/>
-            </a>
-            <a-menu slot="overlay" style="min-width: 60px">
-              <a-menu-item
-                v-for="(action_item, actionIndex) in item.actionArr"
-                :key="actionIndex"
-                v-show="!action_item.customFunction || tableContext.customFunctionShow(action_item.customFunction,record,c_index)">
-                <a
-                  style="text-align: center"
-                  @click="tableContext.action(record, item.dataIndex, action_item.func)"
-                >{{ action_item.text }}</a>
-              </a-menu-item>
-            </a-menu>
-          </a-dropdown>
-        </template>
-        <template v-if="!item.actionArr || item.actionArr.length === 0">
-          <a @click="tableContext.action(record, item.dataIndex,'action', index)">{{ item.slotValue }}</a>
-        </template>
-      </span>
-    </template>
-    <template slot="footer">
-      <slot name="footer" :selectedRowKeys="tableContext.selectedRowKeys" :selectedRows="tableContext.selectedRows"></slot>
-    </template>
-  </s-table>
-</template>
-
-<script>
-import { Ellipsis, STable } from '@vue2-client/components'
-import { formatDate } from '@vue2-client/utils/util'
-import XBadge from '@vue2-client/base-client/components/common/XBadge'
-import XFormItem from '@vue2-client/base-client/components/common/XForm/XFormItem'
-import CustomFuncCel from '@vue2-client/base-client/components/common/XTable/CustomFuncCel.vue'
-import { executeStrFunctionByContext } from '@vue2-client/utils/runEvalFunction'
-
-export default {
-  name: 'XTableWrapper',
-  components: {
-    Ellipsis,
-    STable,
-    XBadge,
-    XFormItem,
-    CustomFuncCel
-  },
-  computed: {
-    localDataSource () {
-      return this.$refs?.table?.localDataSource
-    }
-  },
-  props: {
-    loadSelectedData: {
-      type: Boolean,
-      required: false,
-      default: false
-    }
-  },
-  inject: ['tableContext'],
-  methods: {
-    loadData () {
-      if (this.loadSelectedData) {
-        return this.loadSelectedDataGen
-      } else {
-        return this.tableContext.loadData
-      }
-    },
-    loadSelectedDataGen (requestParameters) {
-      console.log('loadSelectedDataGen', {
-        pageNo: requestParameters?.pageNo,
-        pageSize: requestParameters?.pageSize
-      })
-
-      const { pageNo = 1, pageSize = 10 } = requestParameters || {}
-      const startIndex = (pageNo - 1) * pageSize
-      const endIndex = startIndex + pageSize
-      const paginatedData = this.tableContext.selectedRows.slice(startIndex, endIndex)
-
-      return new Promise((resolve) => {
-        resolve({
-          data: paginatedData,
-          pageNo,
-          pageSize,
-          totalPage: Math.ceil(this.tableContext.selectedRows.length / pageSize),
-          totalCount: this.tableContext.selectedRows.length
-        })
-      })
-    },
-    updateSelect (selectedRowKeys, selectedRows) {
-      this.$refs.table.updateSelect(selectedRowKeys, selectedRows)
-    },
-    clearSelected () {
-      this.$refs.table.clearSelected()
-    },
-    refresh (bool) {
-      this.$refs.table.refresh(bool)
-    },
-
-    /**
-     * 格式化日期
-     * @param date 日期字符串
-     * @param format 格式化方式
-     */
-    format (date, format) {
-      return formatDate(date, format)
-    },
-    /**
-     * 格式化数字
-     * @param number string 或者 number
-     * @param decimalPlaces 小数位数
-     */
-    numberFormat (number, decimalPlaces = 2) {
-      const value = parseFloat(number)
-      if (!isNaN(value)) {
-        return value.toFixed(decimalPlaces)
-      } else {
-        return ''
-      }
-    },
-    getFromItem (model, text, record, index) {
-      const aa = this.tableContext.formItems.reduce((acc, item) => {
-        if (item.type === 'group') {
-          const foundItem = item.groupItems.find(_item => _item.model === model && _item.editRow)
-          if (foundItem) {
-            acc = foundItem
-          }
-        } else if (item.model === model && item.editRow) {
-          acc = item
-        }
-        return acc
-      }, null)
-      if (aa) {
-        const tempConfig = JSON.parse(JSON.stringify(aa))
-        // 如果找到了字段
-        const ColumnIndex = this.tableContext.tableColumns.findIndex(item => item.dataIndex === model)
-        // 并且表单项是日期框
-        if (ColumnIndex !== -1 && ['yearPicker', 'monthPicker', 'datePicker', 'rangePicker'].includes(tempConfig.type)) {
-          // 修改他的列宽
-          this.tableContext.tableColumns[ColumnIndex].width = 220
-        }
-        // 如果有检验规则检验是数字
-        if (ColumnIndex !== -1 && ['number', 'integer', 'float'].includes(tempConfig?.rule?.type)) {
-          // 修改他的列宽
-          tempConfig.numberInput = true
-        }
-        if (tempConfig.editRowShowFunc) {
-          if (executeStrFunctionByContext(this.tableContext, tempConfig.editRowShowFunc, [text, record, index, tempConfig])) {
-            return tempConfig
-          }
-        } else {
-          return tempConfig
-        }
-      }
-      return false
-    },
-  }
-}
-</script>
+<template>
+  <s-table
+    ref="table"
+    :id="tableContext.uniqueId"
+    :alert="true"
+    :columns="tableContext.tableColumns"
+    :data="loadData()"
+    :rowKey="tableContext.rowKey"
+    :showSummary="tableContext.showSummary"
+    :rowSelection="tableContext.rowSelection"
+    :scroll="{ x: tableContext.scrollXWidth, y: tableContext.scrollYHeight }"
+    :showPagination="tableContext.showPagination"
+    :hidePagination="tableContext.simpleMode"
+    :showSelected="!tableContext.simpleMode"
+    :pageSize="tableContext.simpleMode ? 1000 : undefined"
+    :setScrollYHeight="tableContext.setScrollYHeight"
+    :selectRowMode="tableContext.selectRowMode"
+    :size="tableContext.tableSize"
+  >
+    <template
+      v-for="(item, c_index) in tableContext.tableColumns"
+      :slot="item.dataIndex"
+      slot-scope="text, record, index">
+      <template v-if="tableContext.isEditMode && getFromItem(item.dataIndex,text, record, index)">
+        <x-form-item
+          class="innerTable"
+          :style="{ paddingTop: 0, paddingBottom: 0, paddingLeft: 0, paddingRight: 0 }"
+          :form="record"
+          :attr="getFromItem(item.dataIndex,text, record, index)"
+          :service-name="tableContext.serviceName"
+          mode="新增/修改"
+          :env="tableContext.env"
+          :setForm="(obj)=>tableContext.setForm(record,obj)"
+          @rowChoose="(row, attr, callback) => tableContext.rowChoose(row, attr, callback, record)"
+          :showLabel="false"
+          :key="'editRow-' + c_index"
+        />
+      </template>
+      <span v-else-if="item.slotType === 'rate'" :key="'rate-' + c_index">
+        <x-rate :value="text" :disabled="true" :allow-half="item.allowHalf" :max-count="item.maxCount" />
+      </span>
+      <span v-else-if="item.slotType === 'index'" :key="'index-' + c_index">
+        {{ index + 1 }}
+      </span>
+      <CustomFuncCel
+        :text="text"
+        :record="text"
+        :index="index"
+        :item="item"
+        :localDataSource="$refs.table.localDataSource"
+        v-else-if="item.slotCustomFunction"
+        :key="'customJs-' + c_index"></CustomFuncCel>
+      <span v-else-if="item.slotType === 'link'" :key="'link-' + c_index">
+        <a @click="tableContext.columnClick(item.dataIndex,text,record)">{{ text }}</a>
+      </span>
+      <span v-else-if="item.slotType === 'gotoUserDetail'" :key="'gotoUserDetail-' + c_index">
+        <a @click="tableContext.gotoUserDetail(item.dataIndex,text,record)">{{ text }}</a>
+      </span>
+      <span v-else-if="item.slotType === 'ellipsis'" :key="'ellipsis-' + c_index">
+        <ellipsis :length="item.slotValue" tooltip>{{ text === '' ? '--' : text }}</ellipsis>
+      </span>
+      <span v-else-if="item.slotType === 'badge'" :key="'badge-' + c_index">
+        <x-badge
+          :service-name="tableContext.serviceName"
+          :env="tableContext.env"
+          v-if="text !== null && text !== undefined"
+          :badge-key="item.slotKeyMap"
+          :value="text"/>
+      </span>
+      <span v-else-if="item.slotType === 'date'" :key="'date-' + c_index">
+        {{ format(text, 'yyyy-MM-dd') }}
+      </span>
+      <span v-else-if="item.slotType === 'dateTime'" :key="'dateTime-' + c_index">
+        {{ format(text, 'yyyy-MM-dd hh:mm:ss') }}
+      </span>
+      <span v-else-if="item.slotType === 'towDecimal'" :key="'towDecimal-' + c_index">
+        {{ numberFormat(text, 2) }}
+      </span>
+      <span v-else-if="item.slotType === 'fourDecimal'" :key="'fourDecimal-' + c_index">
+        {{ numberFormat(text, 4) }}
+      </span>
+      <span v-else-if="item.slotType === 'int'" :key="'int-' + c_index">
+        {{ numberFormat(text, 0) }}
+      </span>
+      <span v-else-if="item.slotType === 'action'" :key="'action-' + c_index">
+        <template v-if="item.actionArr && item.actionArr.length > 0">
+          <a-dropdown :getPopupContainer=" triggerNode => { return triggerNode.parentNode } ">
+            <a class="ant-dropdown-link" @click="e => e.preventDefault()">
+              {{ item.scopedSlots?.customRender || item.slotValue }} <a-icon type="down"/>
+            </a>
+            <a-menu slot="overlay" style="min-width: 60px">
+              <a-menu-item
+                v-for="(action_item, actionIndex) in item.actionArr"
+                :key="actionIndex"
+                v-show="!action_item.customFunction || tableContext.customFunctionShow(action_item.customFunction,record,c_index)">
+                <a
+                  style="text-align: center"
+                  @click="tableContext.action(record, item.dataIndex, action_item.func)"
+                >{{ action_item.text }}</a>
+              </a-menu-item>
+            </a-menu>
+          </a-dropdown>
+        </template>
+        <template v-if="!item.actionArr || item.actionArr.length === 0">
+          <a @click="tableContext.action(record, item.dataIndex,'action', index)">{{ item.slotValue }}</a>
+        </template>
+      </span>
+    </template>
+    <template slot="footer">
+      <slot name="footer" :selectedRowKeys="tableContext.selectedRowKeys" :selectedRows="tableContext.selectedRows"></slot>
+    </template>
+  </s-table>
+</template>
+
+<script>
+import { Ellipsis, STable } from '@vue2-client/components'
+import { formatDate } from '@vue2-client/utils/util'
+import XBadge from '@vue2-client/base-client/components/common/XBadge'
+import XFormItem from '@vue2-client/base-client/components/common/XForm/XFormItem'
+import CustomFuncCel from '@vue2-client/base-client/components/common/XTable/CustomFuncCel.vue'
+import { executeStrFunctionByContext } from '@vue2-client/utils/runEvalFunction'
+import XRate from '@vue2-client/base-client/components/common/XRate/index.vue'
+export default {
+  name: 'XTableWrapper',
+  components: {
+    Ellipsis,
+    STable,
+    XBadge,
+    XFormItem,
+    XRate,
+    CustomFuncCel
+  },
+  computed: {
+    localDataSource () {
+      return this.$refs?.table?.localDataSource
+    }
+  },
+  props: {
+    loadSelectedData: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  inject: ['tableContext'],
+  methods: {
+    loadData () {
+      if (this.loadSelectedData) {
+        return this.loadSelectedDataGen
+      } else {
+        return this.tableContext.loadData
+      }
+    },
+    loadSelectedDataGen (requestParameters) {
+      console.log('loadSelectedDataGen', {
+        pageNo: requestParameters?.pageNo,
+        pageSize: requestParameters?.pageSize
+      })
+
+      const { pageNo = 1, pageSize = 10 } = requestParameters || {}
+      const startIndex = (pageNo - 1) * pageSize
+      const endIndex = startIndex + pageSize
+      const paginatedData = this.tableContext.selectedRows.slice(startIndex, endIndex)
+
+      return new Promise((resolve) => {
+        resolve({
+          data: paginatedData,
+          pageNo,
+          pageSize,
+          totalPage: Math.ceil(this.tableContext.selectedRows.length / pageSize),
+          totalCount: this.tableContext.selectedRows.length
+        })
+      })
+    },
+    updateSelect (selectedRowKeys, selectedRows) {
+      this.$refs.table.updateSelect(selectedRowKeys, selectedRows)
+    },
+    clearSelected () {
+      this.$refs.table.clearSelected()
+    },
+    refresh (bool) {
+      this.$refs.table.refresh(bool)
+    },
+
+    /**
+     * 格式化日期
+     * @param date 日期字符串
+     * @param format 格式化方式
+     */
+    format (date, format) {
+      return formatDate(date, format)
+    },
+    /**
+     * 格式化数字
+     * @param number string 或者 number
+     * @param decimalPlaces 小数位数
+     */
+    numberFormat (number, decimalPlaces = 2) {
+      const value = parseFloat(number)
+      if (!isNaN(value)) {
+        return value.toFixed(decimalPlaces)
+      } else {
+        return ''
+      }
+    },
+    getFromItem (model, text, record, index) {
+      const aa = this.tableContext.formItems.reduce((acc, item) => {
+        if (item.type === 'group') {
+          const foundItem = item.groupItems.find(_item => _item.model === model && _item.editRow)
+          if (foundItem) {
+            acc = foundItem
+          }
+        } else if (item.model === model && item.editRow) {
+          acc = item
+        }
+        return acc
+      }, null)
+      if (aa) {
+        const tempConfig = JSON.parse(JSON.stringify(aa))
+        // 如果找到了字段
+        const ColumnIndex = this.tableContext.tableColumns.findIndex(item => item.dataIndex === model)
+        // 并且表单项是日期框
+        if (ColumnIndex !== -1 && ['yearPicker', 'monthPicker', 'datePicker', 'rangePicker'].includes(tempConfig.type)) {
+          // 修改他的列宽
+          this.tableContext.tableColumns[ColumnIndex].width = 220
+        }
+        // 如果有检验规则检验是数字
+        if (ColumnIndex !== -1 && ['number', 'integer', 'float'].includes(tempConfig?.rule?.type)) {
+          // 修改他的列宽
+          tempConfig.numberInput = true
+        }
+        if (tempConfig.editRowShowFunc) {
+          if (executeStrFunctionByContext(this.tableContext, tempConfig.editRowShowFunc, [text, record, index, tempConfig])) {
+            return tempConfig
+          }
+        } else {
+          return tempConfig
+        }
+      }
+      return false
+    },
+  }
+}
+</script>