@tongfun/tf-widget 0.1.29 → 0.1.30

package/package/tf-widget/src/children/basic-data/dependcy/common-table.vue

@@ -1,750 +0,0 @@
-<template>
-  <div ref="commonTableMain" class="common-table-main" @click="closeAllVisible">
-    <!--    表格主体-->
-    <!-- 开启双击是开启显示tag -->
-    <div v-if="doubleSelect">
-      <el-tag
-        v-for="tag in selectData"
-        :key="tag.head__code"
-        closable
-        @close="handleTagClose(tag)"
-      >
-        {{ tag.head__name }}
-      </el-tag>
-    </div>
-    <ux-grid
-      ref="commonTable"
-      column-key
-      :data="tableData"
-      class="common-table"
-      beautify-table
-      show-header-overflow
-      show-overflow="tooltip"
-      show-summary
-      :summary-method="getSummaries"
-      :checkbox-config="{highlight: true,trigger: 'row'}"
-      :sort-config="{showIcon: false}"
-      :width-resize="true"
-      :header-cell-style="headCellStyle"
-      highlight-current-row
-      :cell-style="getCellStyle"
-      @current-change="handleRowSelect"
-      @selection-change="selectionChange"
-      @header-dragend="changeColumnWidth"
-      @row-dblclick="handleDbclick"
-      @select="handleSelect"
-    >
-      <ux-table-column type="checkbox" align="center" fixed="left" width="60" />
-      <template v-for="(item,index) in tableLayout">
-        <ux-table-column
-          v-if="!item.hiddenFlag"
-          :key="index"
-          :field="item.fieldName"
-          :title="item.title"
-          :align="item.align"
-          :width="item.width ? item.width : tableLayout.length < 15 ? '' : '150' "
-          :fixed="item.fixed ? item.fixed : '' "
-          :sortable="item.sortable"
-          :formatter="formatterDec"
-          resizable
-        >
-          <template v-slot:header="{ column }">
-            <div class="common-header-filter" @click="sortTableData(item,column)">
-              <span>{{ column.title }}</span>
-              <i v-if="column.order==='asc'" class="el-icon-top" />
-              <i v-if="column.order==='desc'" class="el-icon-bottom" />
-              <div v-if="item.isQuick" id="popover" class="popover">
-                <el-popover
-                  v-model="quickFilterData[item.fieldName + 'Visible']"
-                  placement="bottom"
-                  width="160"
-                  trigger="manual"
-                >
-                  <el-input
-                    v-model="quickFilterData[item.fieldName]"
-                    class="popover-input"
-                    clearable
-                    :placeholder="`请输入${item.title}`"
-                    @input="inputChange(item.fieldName)"
-                  />
-                  <div class="header-filter">
-                    <el-scrollbar style="height: 100%">
-                      <el-checkbox-group v-if="quickFilterData[item.fieldName+ 'Checked']" v-model="quickFilterData[item.fieldName+ 'Checked']" @change="bindCheckBox(item.fieldName + 'Checked')">
-                        <el-checkbox label="全选" @change="changeAll(item.fieldName, $event)" />
-                        <template v-for="key in quickFilterData[item.fieldName+ 'CheckedList']">
-                          <el-checkbox :key="key" :label="key" />
-                        </template>
-                      </el-checkbox-group>
-                    </el-scrollbar>
-                  </div>
-                  <div style="text-align: right; margin: 5px 0 0 0">
-                    <el-button class="common-header-button" type="primary" size="mini" @click="closeVisible(item.fieldName)">取消</el-button>
-                    <el-button class="common-header-button" type="primary" size="mini" @click="confirmVisible(item.fieldName)">筛选</el-button>
-                  </div>
-                  <div slot="reference" class="reference">
-                    <i
-                      v-show="!quickFilterData[item.fieldName + 'Visible'] && ( quickFilterData[item.fieldName + 'Checked_True'] && quickFilterData[item.fieldName + 'Checked_True'].length === 0 )"
-                      class="el-icon-arrow-down"
-                      style="cursor: pointer"
-                      @click.stop="quickFilterData[item.fieldName + 'Visible'] = true"
-                    />
-                    <SvgIcon
-                      v-show="!quickFilterData[item.fieldName + 'Visible'] && ( quickFilterData[item.fieldName + 'Checked_True'] && quickFilterData[item.fieldName + 'Checked_True'].length !== 0 )"
-                      icon-class="filter"
-                      style="width:15px;height: 15px;cursor: pointer"
-                      @click.stop="quickFilterData[item.fieldName + 'Visible'] = true"
-                    />
-                    <i
-                      v-show="quickFilterData[item.fieldName + 'Visible']"
-                      class="el-icon-arrow-up"
-                      style="cursor: pointer"
-                      @click.stop="quickFilterData[item.fieldName + 'Visible'] = false"
-                    />
-                  </div>
-                </el-popover>
-              </div>
-            </div>
-          </template>
-          <template v-if="item.controlType ==='small_pictures'" v-slot:default="scope">
-            <div v-if="scope.row[item.fieldName]" class="view-picture">
-              <span style="color:#0c4c8e;border-bottom:1px solid #0c4c8e;cursor: pointer;" @click="handelClickViewPicture(scope.row, item.fieldName)">
-                查看图片
-              </span>
-            </div>
-            <div v-else style="color:red">
-              暂无图片
-            </div>
-          </template>
-          <!-- 对于复选框的类型，value和label后端没有进行处理，前端处理成展示的值 建国需求：2021.8.11 T-BUG -->
-          <template v-else-if="item.controllType === 'check_box'" v-slot:default="scope">
-            <div>
-              {{ scope.row[item.fieldName] | checkedFilter }}
-            </div>
-          </template>
-        </ux-table-column>
-      </template>
-      <ux-table-column v-if="isShow" title="操作" align="center" width="100">
-        <template v-slot:default="scope">
-          <slot ref="control" name="tableControl" :value="scope.row" />
-        </template>
-      </ux-table-column>
-      <!--<ux-table-column type="setting" resizable align="center" fixed="right" width="50">
-        <template slot="header">
-          <i class="el-icon-setting" style="cursor: pointer" @click="tableControlClick" />
-        </template>
-      </ux-table-column>-->
-      <template slot="empty">
-        <SvgIcon icon-class="table-empty" style="width: 100px;height: 100px;margin-top: 100px" />
-        <div style="font-size: 18px;margin-bottom: 100px">
-          数据为空
-        </div>
-      </template>
-    </ux-grid>
-    <!--    表格分页-->
-    <div ref="commonTablePagination" class="common-table-pagination">
-      <Pagination ref="commonTablePage" :total="paging.total" :paging="paging" :selected-total="selectedTotal" @pageChange="pageChange" />
-    </div>
-    <!--  列表控制弹框组件-->
-    <TableControl
-      :table-layout="tableLayout"
-      :dialog-table-visible="dialogTableVisible"
-      @closeDialog="closeDialog"
-      @updateColumn="updateColumn"
-    />
-    <!-- 查看图片的弹框 -->
-    <ViewPicture
-      :dialog-visible="viewPictureVisable"
-      :view-picture-data="viewPictureData"
-      @handelClose="handelClose"
-    />
-  </div>
-</template>
-
-<script>
-import Sortable from 'sortablejs/modular/sortable.core.esm.js'
-import Pagination from './pagination'
-import TableControl from './table-control'
-import ViewPicture from './view-picture'
-import { getFastSearchSuggestionVos } from '@/api/table'
-export default {
-  name: 'CommonTable',
-  components: {
-    Pagination, TableControl, ViewPicture
-  },
-  filters: {
-    checkedFilter (value) {
-      if (!value) return ''
-      if (value === '0') return '否'
-      if (value === '1') return '是'
-      return '不兼容的选项'
-    }
-  },
-  props: {
-    // 绑定字段，字段变化时修改对应行颜色
-    fieldChangeData: {
-      type: Object,
-      default: () => {}
-    },
-    // 选中行数
-    selectedTotal: {
-      type: Number,
-      default: 0
-    },
-    // 表格ID
-    tableId: {
-      type: String,
-      default: ''
-    },
-    // 表格数据
-    tableData: {
-      type: Array,
-      default: () => {
-        return []
-      }
-    },
-    // 表格布局
-    tableLayout: {
-      type: Array,
-      default: () => {
-        return []
-      }
-    },
-    // 表格数据
-    getTableDataFunc: {
-      type: Function,
-      default: () => {
-        return null
-      }
-    },
-    // 分页
-    paging: {
-      type: Object,
-      default: () => {
-        return {}
-      }
-    },
-    // 合计数据
-    totalData: {
-      type: Array,
-      default: () => {
-        return []
-      }
-    },
-    // 是否开启单选模式
-    singleSelect: {
-      type: Boolean,
-      default: false
-    },
-    // 双击行编辑功能(默认开启)
-    dbClickAction: {
-      type: Boolean,
-      default: true
-    },
-    // 快捷过滤信息
-    quickFilterData: {
-      type: Object,
-      default: () => {}
-    },
-    // 是否开启双选
-    doubleSelect: {
-      type: Boolean,
-      default: false
-    },
-    // 表头的表名
-    headName: {
-      type: String,
-      default: ''
-    },
-    isShowTableSlot: {
-      type: Boolean,
-      default: null
-    }
-  },
-  data () {
-    return {
-      dialogTableVisible: false,
-      maxHeight: '60vh', // 表格最大宽度
-      // currentTableData: this.tableData,
-      tableTitle: null,
-      cities: [1, 2, 3],
-      checked: [],
-      selectData: [], // 暂存选中的数据
-      viewPictureVisable: false, // 打开查看图片模态框
-      viewPictureData: ''// 要传给图片模态框的值
-    }
-  },
-  computed: {
-    currentTableData: function () {
-      return this.tableData
-    },
-    isShow: function () {
-      if (this.isShowTableSlot === null) {
-        this.$nextTick(() => {
-          const slotArr = Object.keys(this.$scopedSlots)
-          if (slotArr.indexOf('tableControl') !== -1) {
-            return true
-          } else {
-            return false
-          }
-        })
-      }
-      return this.isShowTableSlot
-    }
-  },
-  watch: {
-    currentTableData: {
-      handler (newVal) {
-        this.$emit('updateParentTableData', newVal)
-      },
-      deep: true
-    },
-    // 用于刷新合计
-    totalData: {
-      handler (newVal) {
-        this.$refs.commonTable.updateData()
-      },
-      deep: true
-    },
-    tableLayout: {
-      handler (newVal) {
-      },
-      deep: true
-    }
-  },
-
-  mounted () {
-    this.columnDrop()
-  },
-
-  beforeDestroy () {
-    this.$emit('tableBeforeDestroy', this.tableTitle)
-  },
-
-  methods: {
-    // 表头单元格的style回调方法
-    headCellStyle () {
-      return 'font-family: Source Han Sans SC, Source Han Sans SC-Normal;font-weight: Normal;font-size:1.4vh'
-    },
-    // 表头点击事件 ---> 排序
-
-    /**
-     * 关闭所有表头筛选
-     */
-    closeAllVisible () {
-      for (const key in this.quickFilterData) {
-        if (key.indexOf('Visible') !== -1 && this.quickFilterData[key] === true) {
-          this.quickFilterData[key] = false
-        }
-      }
-    },
-
-    /**
-     * 表头点击事件 ---> 排序
-     */
-    sortTableData (item, column) {
-      if (column.order === 'desc') {
-        this.$refs.commonTable.clearSort()
-      } else if (column.order === 'asc') {
-        this.$refs.commonTable.sort(column.property, 'desc')
-      } else {
-        this.$refs.commonTable.sort(column.property, 'asc')
-      }
-    },
-
-    /**
-     * 点击查看图片
-     */
-    handelClickViewPicture (item, fieldName) {
-      this.viewPictureVisable = true
-      this.viewPictureData = item[fieldName]
-    },
-
-    /**
-     * 图片模态框子组件传来的方法，点击取消关闭模态框
-     */
-    handelClose (item) {
-      this.viewPictureVisable = item
-    },
-
-    /**
-     * 表头过滤的输入框input事件
-     */
-    inputChange (fieldName) {
-      const data = {
-        fastSearchSuggestQueryDtos: [{
-          columnName: fieldName.split('__')[1],
-          tableName: this.headName,
-          value: this.quickFilterData[fieldName]
-        }
-        ]
-      }
-      getFastSearchSuggestionVos(data).then(res => {
-        this.quickFilterData[fieldName + 'CheckedList'] = res.data[0].suggestions
-        this.quickFilterData[fieldName + 'Checked'] = [...this.quickFilterData[fieldName + 'CheckedList'], '全选']
-      })
-      // // 过滤数组
-      // this.quickFilterData[fieldName + 'CheckedList'] = this.quickFilterData[fieldName + 'CheckedList_Bak'].filter(item => {
-      //   return item.indexOf(this.quickFilterData[fieldName]) !== -1
-      // })
-      // 默认全选
-      // this.quickFilterData[fieldName + 'Checked'] = [...this.quickFilterData[fieldName + 'CheckedList'], '全选']
-    },
-
-    /**
-     * 表头过滤选中数组change事件
-     */
-    bindCheckBox (value) {
-      // 实现单选功能
-      // if (this.quickFilterData[value].length > 1) {
-      //   this.quickFilterData[value].splice(0, 1)
-      // }
-
-    },
-
-    /**
-     * 表头筛选的全选|取消全选
-     * @param fieldName 字段
-     * @param value true为全选，false为取消全选
-     */
-    changeAll (fieldName, value) {
-      if (value) {
-        // 全选
-        this.quickFilterData[fieldName + 'Checked'] = [...this.quickFilterData[fieldName + 'CheckedList'], '全选']
-      } else {
-        // 取消全选
-        this.quickFilterData[fieldName + 'Checked'] = []
-      }
-    },
-
-    /**
-     * 取消筛选
-     * @param fieldValue 字段
-     */
-    closeVisible: function (fieldValue) {
-      this.quickFilterData[fieldValue + 'Visible'] = false
-      this.quickFilterData[fieldValue] = ''
-      // this.quickFilterData[fieldValue + 'Checked'] = []
-    },
-
-    /**
-     * 确认筛选
-     * @param fieldValue 字段
-     */
-    confirmVisible: function (fieldValue) {
-      this.quickFilterData[fieldValue + 'Visible'] = false
-      this.quickFilterData[fieldValue + 'Checked_True'] = this.quickFilterData[fieldValue + 'Checked']
-      this.$emit('quickSearch')
-    },
-
-    /**
-     * 表格数据格式化： 数字精度统一为2
-     */
-    formatterDec ({ cellValue, row, column }) {
-      const reg = /^[0-9]+.?[0-9]*$/ // 判断字符串是否为数字
-      if (reg.test(cellValue)) {
-        const y = String(cellValue).indexOf('.') + 1 // 获取小数点的位置
-        const count = String(cellValue).length - y // 获取小数点后的个数
-        if (y > 0 && count > 2) {
-          return Number(cellValue).toFixed(2)
-        } else {
-          return cellValue
-        }
-      } else {
-        return cellValue
-      }
-    },
-
-    /**
-     * 表格双击
-     * @param row 行
-     */
-    handleDbclick (row) {
-      try {
-        if (this.$refs.commonTable.$children[0].$children[0].$children) {
-          const arr = this.$refs.commonTable.$children[0].$children[0].$children
-          arr.forEach(item => {
-            if (item.$options._componentTag === 'elx-tooltip') {
-              item.targetMouseleaveEvent()
-            }
-          })
-        }
-      } catch (e) {
-        console.log(e)
-      }
-      this.$emit('dbClick', row)
-    },
-
-    /**
-     * 表格选择项change事件
-     */
-    selectionChange (value) {
-      if (this.selectData.length === 0) {
-        this.$emit('selectionChange', value)
-      } else {
-        this.$emit('selectionChange', this.selectData)
-      }
-    },
-
-    /**
-     * 手动勾选数据行的 Checkbox 时触发事件
-     */
-    handleSelect (selection, row) {
-      if (this.doubleSelect) {
-        const selectData = new Set(this.selectData)
-        if (this.selectData.indexOf(row) === -1) {
-          selectData.add(row)
-          this.selectData = Array.from(selectData)
-        } else {
-          this.selectData = Array.from(selectData)
-          this.selectData.splice(this.selectData.indexOf(row), 1)
-        }
-        if (this.selectData.length > 2) {
-          this.$message.error('最多选择两条数据')
-          this.selectData.pop()
-        }
-        this.$refs.commonTable.clearSelection()
-        this.selectData.forEach(element => {
-          this.$refs.commonTable.toggleRowSelection([
-            {
-              row: element,
-              selected: true
-            }
-          ])
-        })
-      }
-    },
-
-    /**
-     * 关闭tag
-     * @param tag
-     */
-    handleTagClose (tag) {
-      this.selectData.splice(this.selectData.indexOf(tag), 1)
-      this.$refs.commonTable.clearSelection()
-      this.selectData.forEach(element => {
-        this.$refs.commonTable.toggleRowSelection([
-          {
-            row: element,
-            selected: true
-          }
-        ])
-      })
-    },
-
-    /**
-     * 动态设定单元格样式
-     * 根据绑定的字段，依据字段值获取表格内容样式
-     */
-    getCellStyle ({ row, column, rowIndex, columnIndex }) {
-      if (this.fieldChangeData && this.fieldChangeData.fieldName) {
-        const fieldName = this.fieldChangeData.fieldName
-        const findIndex = this.fieldChangeData.changeList.findIndex(d => d.key === row[fieldName])
-        if (findIndex !== -1) {
-          return {
-            color: this.fieldChangeData.changeList[findIndex].value
-          }
-        }
-      }
-    },
-
-    /**
-     * 表格当前行change事件
-     * @param row
-     */
-    handleRowSelect (row) {
-      if (this.singleSelect) {
-        this.$refs.commonTable.clearSelection()
-        this.$refs.commonTable.setCurrentRow(row)
-      }
-    },
-
-    /**
-     * 表格合计
-     */
-    getSummaries (param) {
-      return [this.totalData]
-    },
-
-    arraySorting (newValue) {
-      const arr = {}
-      newValue.forEach(item => {
-        arr[item.index] = item
-      })
-      arr.length = newValue.length
-      this.tableTitle = Array.from(arr)
-    },
-
-    /**
-     * 拖动表单列
-     */
-    columnDrop () {
-      this.$nextTick(() => {
-        const table = this.$refs.commonTable
-        this.sortable = Sortable.create(table.$el.querySelector('.body--wrapper .elx-table--header .elx-header--row'), {
-          handle: '.elx-header--column:not(.col--fixed)',
-          ghostClass: 'dragColbg',
-          chosenClass: 'dragColbg',
-          onEnd: ({ item, newIndex, oldIndex, ...arg }) => {
-            // fullColumn: 全量表头列   tableColumn: 当前渲染中的表头列
-            const { fullColumn, tableColumn } = table.getTableColumn()
-            const targetThElem = item
-            const wrapperElem = targetThElem.parentNode
-            const newColumn = fullColumn[newIndex]
-            if (newColumn.fixed) {
-              // 错误的移动
-              if (newIndex > oldIndex) {
-                wrapperElem.insertBefore(targetThElem, wrapperElem.children[oldIndex])
-              } else {
-                wrapperElem.insertBefore(wrapperElem.children[oldIndex], targetThElem)
-              }
-              return this.$message.error('固定列不允许拖动!')
-            }
-            // 转换真实索引
-            const oldColumnIndex = table.getColumnIndex(tableColumn[oldIndex])
-            const newColumnIndex = table.getColumnIndex(tableColumn[newIndex])
-            // 移动到目标列
-            const currRow = fullColumn.splice(oldColumnIndex, 1)[0]
-            fullColumn.splice(newColumnIndex, 0, currRow)
-            // 加载列
-            // 向父组件发送表格顺序
-            this.$emit('columnChange', fullColumn)
-            table.loadColumn(fullColumn)
-          }
-        })
-      })
-    },
-
-    /**
-     * 改变表格列宽度
-     */
-    changeColumnWidth ({ column, $columnIndex }) {
-      try {
-        this.$emit('changeWidth', column)
-        // this.tableTitle[$columnIndex].width = column['renderWidth']
-      } catch (err) {
-        throw new Error(err)
-      }
-    },
-
-    /**
-     * 页签变化
-     */
-    async pageChange (value) {
-      this.$emit('pageChange', value)
-    },
-
-    /**
-     * 刷新表格数据
-     */
-    refreshTableData () {
-      this.$refs.commonTablePage.changePage()
-    },
-
-    /**
-     * 打开列表控制弹框
-     */
-    tableControlClick () {
-      this.dialogTableVisible = true
-    },
-
-    /**
-     * 子传父关闭Dialog
-     * @param value
-     */
-    closeDialog (value) {
-      this.dialogTableVisible = value
-    },
-
-    /**
-     * 更新表格列配置
-     */
-    updateColumn () {
-      this.$nextTick(() => {
-        this.$refs.commonTable.refreshColumn()
-      })
-    }
-
-  }
-}
-</script>
-
-<style lang="less" scoped>
-@import "@/assets/styles/common-table";
-@paginationHeight: 8vh;
-.common-table-main{
-  height: 100%;
-  >div:nth-child(1) {
-    margin-bottom: 0.5vh;
-    ::v-deep .el-tag {
-      margin-right: 0.2vw;
-      height: 3vh;
-      line-height: 3vh;
-    }
-  }
-}
-.common-header-filter{
-  position: relative;
-  .popover{
-    position: absolute;
-    right: 2px;
-    bottom: 0;
-  }
-}
-// 分页组件定位
-.common-table-pagination{
-  margin-top: -0.5vh;
-  height: @paginationHeight;
-  ::v-deep .pagination{
-    height: @paginationHeight;
-    //display: flex;
-    .el-pagination{
-      padding: 0;
-    }
-    .el-pagination__total, .el-pagination__sizes{
-      height: @paginationHeight;
-      line-height: @paginationHeight;
-    }
-    .btn-prev,  .btn-next,  .el-pager,  .el-pager li{
-      height: @paginationHeight;
-      line-height: @paginationHeight;
-    }
-    .el-select__caret{
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-    .el-pagination__editor{
-      height: @paginationHeight;
-      line-height: @paginationHeight;
-    }
-  }
-  // position: absolute;
-  // bottom: 1.5vh;
-  // right: 2vw;
-}
-// 表头快捷过滤样式
-.el-popover{
-  .popover-input{
-    ::v-deep .el-input__inner{
-      height: 3vh;
-      margin-bottom: 1vh;
-    }
-    ::v-deep .el-input__suffix{
-      height: 3vh;
-    }
-  }
-  .el-checkbox{
-    display: block !important;
-  }
-  // 表头筛选
-  .header-filter{
-    height: 12vh;
-    ::v-deep .el-scrollbar{
-      .el-scrollbar__wrap{
-        overflow-x: hidden;
-      }
-    }
-  }
-}
-
-</style>