update 文档库改使用JTable

2023-08-22 17:23:15 +08:00
parent 7fc49ccb49
commit 1a111efc6e
7 changed files with 421 additions and 137 deletions
@@ -59,23 +59,6 @@
                                 :triggerChange="false" :dictCode="item.dict_field"/>
            </a-form-item>
          </template>
-          <!--  单选框  -->
-<!--          <template v-else-if="item.field_show_type === '12'">-->
-<!--            <a-form-item :label="item.db_field_txt" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
-<!--              <a-select :placeholder="$t('pleaseSelect')+item.db_field_txt"-->
-<!--                        :getPopupContainer="triggerNode=> triggerNode.parentNode"-->
-<!--                        allowClear-->
-<!--                        v-model="queryParam[item.db_field_name]">-->
-<!--                <a-select-option v-for="(item, key) in item.option"-->
-<!--                                 :key="key"-->
-<!--                                 :value="item.value">-->
-<!--                       <span style="display: inline-block;width: 100%" :title=" item.name">-->
-<!--                             {{ item.name }}-->
-<!--                       </span>-->
-<!--                </a-select-option>-->
-<!--              </a-select>-->
-<!--            </a-form-item>-->
-<!--          </template>-->
        </template>

        <template v-if="index >= minLength && toggleSearchStatus">
@@ -127,22 +110,6 @@
                                 :triggerChange="false" :dictCode="item.dict_field"/>
            </a-form-item>
          </template>
-<!--          <template v-else-if="item.field_show_type === '12'">-->
-<!--            <a-form-item :label="item.db_field_txt" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
-<!--              <a-select :placeholder="$t('pleaseSelect')+item.db_field_txt"-->
-<!--                        :getPopupContainer="triggerNode=> triggerNode.parentNode"-->
-<!--                        allowClear-->
-<!--                        v-model="queryParam[item.db_field_name]">-->
-<!--                <a-select-option v-for="(item, key) in item.option"-->
-<!--                                 :key="key"-->
-<!--                                 :value="item.value">-->
-<!--                       <span style="display: inline-block;width: 100%" :title=" item.name">-->
-<!--                             {{ item.name }}-->
-<!--                       </span>-->
-<!--                </a-select-option>-->
-<!--              </a-select>-->
-<!--            </a-form-item>-->
-<!--          </template>-->
        </template>
      </a-col>
      <span style="float: right;overflow: hidden;margin-right: 11px" class="table-page-search-submitButtons">
@@ -160,7 +127,6 @@
 </template>

 <script>
-import { getAction } from '@/api/manage'
 import JDictSelectTag from '../dict/JDictSelectTag'
 import JMultiSelectTag from '../dict/JMultiSelectTag'
 import { FieldType } from '../../enums/commonEnums'
@@ -268,11 +234,13 @@ export default {
  },
  methods: {
    searchQuery () {
-      eventBus.$emit('searchQuery', JSON.parse(JSON.stringify(this.queryParam)))
+      this.$emit('search', JSON.parse(JSON.stringify(this.queryParam)))
+      // eventBus.$emit('searchQuery', JSON.parse(JSON.stringify(this.queryParam)))
    },
    searchReset () {
      this.queryParam = {}
-      eventBus.$emit('searchQuery', JSON.parse(JSON.stringify(this.queryParam)))
+      this.$emit('reset', JSON.parse(JSON.stringify(this.queryParam)))
+      // eventBus.$emit('searchQuery', JSON.parse(JSON.stringify(this.queryParam)))
    },
    // 获取查询条件列表
    getSearch () {
@@ -3,22 +3,28 @@
    class="j-table"
    ref="table"
    :bordered="bordered"
-    :table-key="tableKey"
    :columns="resultColumns"
    :components="components"
    :scroll="scroll || selfScroll"
    v-bind="$attrs"
    v-on="$listeners">

-      <!-- 如果插槽是作用域插槽，将作用域插槽的props包装成对象传递给slot -->
+    <!-- 如果插槽是作用域插槽，将作用域插槽的props包装成对象传递给slot -->
    <template v-for="(_, slotName) in $scopedSlots" :slot="slotName" slot-scope="text, record, index">
      <slot :name="slotName" v-bind="{text, record, index}" />
    </template>
    <!-- 如果是普通插槽，直接使用$slots渲染 -->
-    <slot v-for="(_, slotName) in $slots" :name="slotName" :slot="slotName"/>
+    <slot v-for="(_, slotName) in $slots" :name="slotName" :slot="slotName" />
+
+    <template slot="text" slot-scope="text">
+      <a-tooltip overlay-class-name="tooltip-style">
+        <template slot="title">{{ text || text === 0 ? text : global.emptyLine }}</template>
+        <div class="table-text">{{ text || text === 0 ? text : global.emptyLine }}</div>
+      </a-tooltip>
+    </template>

    <div slot="settingDropdown">
-      <a-card>
+      <a-card v-if="needSettingColumnHideOrFreeze">
        <a-table
          rowKey="key"
          :style="settingStyle"
@@ -41,7 +47,8 @@
        </a-table>
      </a-card>
    </div>
-    <a-icon ref="settingBtn" slot="settingIcon" type="setting" :style="{ fontSize:'16px', color: '#108ee9' }" />
+    <a-icon ref="settingBtn" slot="settingIcon" type="setting" :style="{ fontSize:'16px', color: '#108ee9' }"
+            v-if="needSettingColumnHideOrFreeze" />

  </a-table>
 </template>
@@ -66,7 +73,8 @@ export default {
    // 用于持久化存储列配置，保证唯一
    tableKey: {
      type: String,
-      required: true
+      required: false,
+      default: 'j-table'
    },
    columns: {
      type: Array,
@@ -98,6 +106,24 @@ export default {
    bordered: {
      type: Boolean,
      required: false
+    },
+    // 是否需要设置冻结列和显隐列
+    needSettingColumnHideOrFreeze: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    // 是否需要将冻结和显隐的设置存储在localStorage中
+    needSaveSettingInLocal: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    // 是否可拖拽
+    canDrag: {
+      type: Boolean,
+      required: false,
+      default: false
    }
  },
  data () {
@@ -106,8 +132,22 @@ export default {
      // 设置表格
      settingColumns: [
        { title: '列名', dataIndex: 'title', align: 'center', ellipsis: true, width: 150 },
-        { title: '隐藏', dataIndex: 'hide', align: 'center', ellipsis: true, width: 60, scopedSlots: { customRender: 'hide' } },
-        { title: '冻结', dataIndex: 'freeze', align: 'center', ellipsis: true, width: 60, scopedSlots: { customRender: 'freeze' } }
+        {
+          title: '隐藏',
+          dataIndex: 'hide',
+          align: 'center',
+          ellipsis: true,
+          width: 60,
+          scopedSlots: { customRender: 'hide' }
+        },
+        {
+          title: '冻结',
+          dataIndex: 'freeze',
+          align: 'center',
+          ellipsis: true,
+          width: 60,
+          scopedSlots: { customRender: 'freeze' }
+        }
      ],
      settingDataSource: [],
      settingColumnsObj: { hide: [], freeze: [] }, // 本地存储的配置对象
@@ -157,26 +197,29 @@ export default {
    setResultColumns (columns) {
      // 深度克隆，防止直接修改父组件数据
      columns = cloneDeep(columns)
-      // 设置按钮插槽配置
-      const settingOption = {
-        filterDropdown: 'settingDropdown',
-        filterIcon: 'settingIcon'
+      // 有设置功能再进行这个插槽的配置
+      if (this.needSettingColumnHideOrFreeze) {
+        // 设置按钮插槽配置
+        const settingOption = {
+          filterDropdown: 'settingDropdown',
+          filterIcon: 'settingIcon'
+        }
+        let findActionIndex = columns.findIndex(col => col && (getKey(col) === actionKey))
+        // 将设置按钮放到表格右上角，如果有操作栏就固定到右侧（操作栏固定右侧，没有的话就最后一列）
+        if (findActionIndex === -1) {
+          findActionIndex = columns.length - 1
+        }
+        if (columns[findActionIndex].scopedSlots instanceof Object) {
+          Object.assign(columns[findActionIndex].scopedSlots, settingOption)
+        } else {
+          columns[findActionIndex].scopedSlots = settingOption
+        }
+        // 自定义设置弹框（尝试解决表格刷新丢失弹框的问题）此方法会出现两个弹框
+        // columns[findActionIndex].filterDropdownVisible = this.settingVisible
+        // columns[findActionIndex].onFilterDropdownVisibleChange = (visible) => {
+        //   this.settingVisible = visible
+        // }
      }
-      let findActionIndex = columns.findIndex(col => col && (getKey(col) === actionKey))
-      // 将设置按钮放到表格右上角，如果有操作栏就固定到右侧（操作栏固定右侧，没有的话就最后一列）
-      if (findActionIndex === -1) {
-        findActionIndex = columns.length - 1
-      }
-      if (columns[findActionIndex].scopedSlots instanceof Object) {
-        Object.assign(columns[findActionIndex].scopedSlots, settingOption)
-      } else {
-        columns[findActionIndex].scopedSlots = settingOption
-      }
-      // 自定义设置弹框（尝试解决表格刷新丢失弹框的问题）此方法会出现两个弹框
-      // columns[findActionIndex].filterDropdownVisible = this.settingVisible
-      // columns[findActionIndex].onFilterDropdownVisibleChange = (visible) => {
-      //   this.settingVisible = visible
-      // }

      // 最后过滤掉需要隐藏的字段,按定位进行排序
      const startArr = [] // 冻结左侧的列
@@ -191,6 +234,11 @@ export default {
        col.width = col.width && parseInt(col.width + '')
        // 如果没有最小宽度就获取统一设置的最小宽度
        col.minWidth = (col.minWidth && parseInt(col.minWidth + '')) || this.columnMinWidth
+        if (!col.scopedSlots) {
+          col.scopedSlots = {
+            customRender: 'text'
+          }
+        }
        if (!col.hide) {
          // 如果没有宽度就取minWidth（不添加原数据的width属性，这里只对需要固定的minWidth生效）
          const width = col.width || col.minWidth
@@ -218,18 +266,19 @@ export default {
        ...midArr,
        ...endArr
      ]
+      console.log(this.resultColumns)
      return this.resultColumns
    },
    // 初始化表格拖拽
    initDrag (columns) {
      // 没有边框就不能拖拽
-      if (!this.bordered) {
+      if (!this.bordered || !this.canDrag) {
        return
      }
      // 如果没有任何列开启拖拽就不需要拖拽
-      if (!columns.some(col => col.resizable)) {
-        return
-      }
+      // if (!columns.some(col => col.resizable)) {
+      //   return
+      // }
      // 第一步：列宽映射
      const draggingMap = {}
      columns.forEach((col) => {
@@ -248,10 +297,10 @@ export default {
        if (key === 'selection-column') {
          col = {}
        } else {
-          col = columns.find(col => getKey(col) === key)
+          col = columns.find(col => getKey(col) === key) || {}
        }
        // 没有开启拖拽 或 没有宽度 或 有定位，都不能拖拽（防止布局异常，至少有一列不设width并且不能有fixed）
-        if (!col.resizable || !col.width || !!col.fixed) {
+        if (!col.width || !!col.fixed) {
          return <th {...restProps}>{children}</th>
        }
        // 开始拖拽监听
@@ -361,6 +410,9 @@ export default {
    },
    // 配置保存到本地
    saveSetting () {
+      if (!this.needSaveSettingInLocal) {
+        return
+      }
      // 获取所有的jtable缓存的key数组（用于清除缓存，没有就初始化数组）
      const jTableKeys = Vue.ls.get(J_TABLE_KEYS) || []
      const saveKey = this.tableKey + saveSuffix
@@ -397,7 +449,10 @@ export default {
  mounted () {
    // 备份默认配置
    this.columnsBak = cloneDeep(this.columns)
-    const settingColumnsObj = Vue.ls.get(this.tableKey + saveSuffix)
+    let settingColumnsObj
+    if (this.needSaveSettingInLocal) {
+      settingColumnsObj = Vue.ls.get(this.tableKey + saveSuffix)
+    }
    // 第一次进页面或清空缓存进行初始化
    if (settingColumnsObj) {
      this.settingColumnsObj = settingColumnsObj