@tongfun/tf-widget 0.1.5 → 0.1.9

package/package/t-data-list/src/t-table/table-records.vue

@@ -0,0 +1,324 @@
+<template>
+  <div ref="tableRecords" class="table-records">
+    <div class="table-wrapper">
+      <ux-grid
+        ref="dataRecordsRef"
+        v-loading="syncData.tableLoading"
+        :data="data.records"
+        size="mini"
+        column-key
+        beautify-table
+        :show-summary="showSummary && !disableSum"
+        :summary-method="summaryMethod"
+        :width-resize="true"
+        :highlight-current-row="false"
+        show-overflow="tooltip"
+        @row-click="handleRowClick"
+        @select="handleSelect"
+        @row-dblclick="handelRowDblClick"
+        @select-all="selectAll"
+      >
+        <ux-table-column :width="50" type="checkbox" fixed="left" />
+        <template v-for="(item,index) in layout">
+          <ux-table-column
+            v-if="item.visible"
+            :key="item.field"
+            :width="layout.length<8?'': '150'"
+            align="center"
+            resizable
+            :title="item.title"
+            :field="item.field"
+          >
+            <template v-slot:header="{ column }">
+              <div class="filter-slot">
+                <span class="title">{{ column.title }}</span>
+                <TableRecordsHeaderPopover
+                  :class="{'my-popover':true,'is-show-filter-icon': !!item.isShowIcon || item.isShowFilter }"
+                  :item="item"
+                  :upload-data-map="uploadDataMap"
+                  :table-filter-data="tableFilterData"
+                  @condition-change="$emit('condition-change', $event)"
+                  @filter-click="filterClick($event,index)"
+                />
+              </div>
+            </template>
+          </ux-table-column>
+        </template>
+      </ux-grid>
+      <TableRecordsSelected
+        v-if="isSelector"
+        :select-data="selectedRows"
+        :show-field="syncData.displayField"
+        @del="handleDel"
+        @clear="handleClearSelected"
+      />
+    </div>
+
+    <!-- 分页 -->
+    <div class="page-wrapper">
+      <el-pagination
+        :current-page="currentPage"
+        :page-sizes="[200, 500, 1000, 5000]"
+        :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="data.total"
+        @size-change="$emit('size-change', $event)"
+        @current-change="$emit('current-change', $event)"
+      />
+    </div>
+
+  </div>
+</template>
+<script>
+import TableRecordsSelected from './table-records-selected'
+export default {
+  components: {
+    TableRecordsHeaderPopover: () => import('./table-records-header-popover.vue'),
+    TableRecordsSelected
+  },
+  props: {
+    data: {
+      type: Object,
+      default: null
+    },
+    isSelector: {
+      type: Boolean,
+      default: false
+    },
+    layout: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    sum: {
+      type: Array,
+      default: () => []
+    },
+    pageSize: {
+      type: Number,
+      default: 100
+    },
+    currentPage: {
+      type: Number,
+      default: 1
+    },
+    updateInDialog: {
+      type: Boolean,
+      default: false
+    },
+    disableSum: {
+      type: Boolean,
+      default: false
+    }
+  },
+  inject: ['selectedRows', 'ids', 'syncData', 'getDbRow', 'showSummary', 'queryType'],
+  data () {
+    return {
+      tableFilterData: {}, // 表头过滤条件的数据的存储集合
+      uploadDataMap: {}, // 真实向上发送的数据集合
+      idField: null,
+      filterSelectedId: '',
+      isSingleFilter: true,
+      displayField: ''
+    }
+  },
+  computed: {
+
+  },
+  watch: {
+    layout: {
+      handler (newVal) {
+        // 初始化绑定tableFilterData
+        // 如果tableFilterData有内容则抛出
+        if (Object.keys(this.tableFilterData).length !== 0) {
+          return
+        }
+        // 初始化tableFilterData的数据
+        newVal.length > 0 && newVal.forEach(e => {
+          if (e.isId) this.idField = e.field
+          this.$set(this.tableFilterData, e.field, { field: e.field, operator: '', value: '', fieldType: e.componentType })
+        })
+      },
+      immediate: true
+    },
+    'data.records': {
+      handler (newValue) {
+        /**
+         * 在列表的情况下,只有提交审核等几个有限的操作,数据刷新不清空已选
+         */
+        if (this.queryType === 'LIST' && this.syncData.tableSelectionClear) {
+          return this.clearSelectedRows()
+        }
+        this.syncData.tableSelectionClear = true
+
+        /**
+         * 在弹窗的所有情况和列表特殊情况(提交/审核后重新获取数据)
+         * 数据刷新后,重新勾选之前已经选择的数据
+         */
+        const xidList = this.selectedRows.map(item => item.Sid)
+        if (!xidList[0]) {
+          return
+        }
+        const currentSelectRows = newValue.filter(item => {
+          if (xidList.indexOf(item.Sid) > -1) {
+            this.selectedRows[xidList.indexOf(item.Sid)] = item
+            return true
+          }
+          return false
+        })
+        const params = currentSelectRows.map(x => {
+          return { row: x, selected: true }
+        })
+        this.$refs.dataRecordsRef.toggleRowSelection(params)
+      }
+    }
+  },
+  methods: {
+    handleClearSelected () {
+      this.$refs.dataRecordsRef.clearSelection()
+      this.clearSelectedRows()
+    },
+    filterClick (value, index) {
+      if (!this.isSingleFilter) {
+        return
+      }
+      // 重置其他页面的表头过滤显示状态
+      if (!value && this.filterSelectedId) {
+        this.layout[this.filterSelectedId].isShowFilter = false
+      }
+      this.filterSelectedId = index
+    },
+    // 清空已选
+    clearSelectedRows () {
+      this.selectedRows.splice(0, this.selectedRows.length)
+      this.ids.splice(0, this.ids.length)
+    },
+    // 列表合计
+    summaryMethod () {
+      return [this.sum]
+    },
+    handleDel (item) {
+      this.selectedRows.splice(this.selectedRows.indexOf(item), 1)
+      this.ids.splice(this.ids.indexOf(item.id), 1)
+      this.$refs.dataRecordsRef.toggleRowSelection([{ row: item, selected: false }])
+    },
+    handleRowClick (row) {
+      this.$refs.dataRecordsRef.toggleRowSelection([{ row }])
+      if (!this.ids.includes(row[this.idField])) {
+        this.selectedRows.push(row)
+        this.ids.push(row[this.idField])
+      } else {
+        this.selectedRows.splice(this.selectedRows.indexOf(row), 1)
+        this.ids.splice(this.ids.indexOf(row[this.idField]), 1)
+      }
+    },
+    handelRowDblClick (row) {
+      // todo:这里判断条件太多，并且条件之间有优先级,将来条件可能冲突
+      if (this.isSelector) {
+        return this.$emit('fastConfirm', row)
+      }
+      if (this.updateInDialog) {
+        return this.$emit('dbClick', row[this.idField])
+      }
+      if (this.getDbRow) {
+        return this.$emit('dbRowClick', row)
+      }
+
+      const randomStr = Math.random().toString(36).slice(8)
+      this.$router.replace(`${this.$route.path}/update/${randomStr}/${row[this.idField]}`)
+    },
+    selectAll (selection) {
+      if (selection.length > 1) {
+        // 是全选的处理方式
+        const needAddData = this.data.records.filter(e => !this.selectedRows.includes(e))
+        needAddData.forEach(e => {
+          this.selectedRows.push(e)
+          this.ids.push(e[this.idField])
+        })
+      } else {
+        // 非全选的处理方式
+        const selectedRowsCache = this.selectedRows.filter(e => !this.data.records.includes(e))
+        this.selectedRows.splice(0, this.selectedRows.length)
+        this.ids.splice(0, this.ids.length)
+        this.selectedRows.push(...selectedRowsCache)
+        this.ids.push(...selectedRowsCache.map(v => v[this.idField]))
+      }
+    },
+
+    /**
+     * 复选框被勾选
+     */
+    handleSelect (selection, row) {
+      if (!this.ids.includes(row[this.idField])) {
+        if (selection.includes(row)) {
+          this.selectedRows.push(row)
+          row[this.idField] && this.ids.push(row[this.idField])
+        }
+      } else {
+        if (!selection.includes(row)) {
+          this.selectedRows.splice(this.selectedRows.indexOf(row), 1)
+          row[this.idField] && this.ids.splice(this.ids.indexOf(row[this.idField]), 1)
+        }
+      }
+    }
+
+  }
+}
+</script>
+
+<style scoped lang='less'>
+  .table-records {
+    height:90vh;
+    .table-wrapper {
+      overflow: hidden;
+      display: flex;
+      ::v-deep .plTableBox{
+        .elx-table--body-wrapper{
+          height: calc(90vh - 230px );//修改以适应合计行的添加，
+          // margin-bottom: 10px;
+        }
+        .elx-table--footer-wrapper{
+          margin-top: 0px!important;
+        }
+        .elx-header--column{
+          color: #085497;
+            transition: opacity 0.5s ease-in;
+          .filter-slot{
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
+          .my-popover{
+            opacity: 0;
+            width: 0;
+            cursor: pointer;
+            transition: all 0.5s ease-out;
+          }
+          :hover .my-popover{
+            width:15px;
+            opacity: 1;
+            transition: opacity 0.5s ease-in;
+          }
+          .is-show-filter-icon{
+            width:15px;
+            opacity: 1;
+          }
+
+        }
+      }
+    }
+    .page-wrapper {
+      margin-top:5px;
+      position:relative;
+      .el-pagination {
+        position:absolute;
+        right:0;
+      }
+    }
+  }
+::v-deep .elx-table:not(.is--empty).show--foot.scroll--x .elx-table--body-wrapper{
+  overflow-x: hidden !important;
+}
+
+</style>

package/package/t-input/children/address.vue

@@ -0,0 +1,101 @@
+<template>
+  <div>
+    <!-- 分组输入框 -->
+    <div class="address">
+      <el-cascader
+        :value="value"
+        :options="options"
+        placeholder="选择地址"
+        popper-class="t-input-cascader-box"
+        separator=""
+        :props="{
+          value:'name',
+          label:'name',
+          children:'districts',
+          leaf:'leaf',
+          lazy:'true',
+          lazyLoad:lazyLoad,
+          checkStrictly: true
+        }"
+        filterable
+        @input="handleInput"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+
+import axios from 'axios'
+import TInputCache from '../tInputCache'
+
+export default {
+  name: 'Address',
+  props: {
+    value: {
+      type: [String, Object],
+      default: null
+    }
+  },
+  data () {
+    return {
+      options: []
+    }
+  },
+  mounted () {
+    this.getAddress()
+  },
+  methods: {
+    lazyLoad (node, resolve) {
+      const { data } = node
+      resolve(data)
+    },
+    async getAddress () {
+      const tInputDataCache = new TInputCache()
+      console.log(tInputDataCache.getCacheData('address'))
+      if (tInputDataCache.getCacheData('address')) {
+        this.options = tInputDataCache.getCacheData('address')
+        return
+      }
+      // 这边的接口用的自己的key,后期可能会换
+      const res = await axios.get('https://restapi.amap.com/v3/config/district?subdistrict=3&key=7f3a1929b7016033782ef2aace13c449')
+      if (!res.data) {
+        this.$message.error('未查询到数据')
+        return
+      }
+      const optionData = this.setLeaf(res.data.districts[0].districts)
+      this.options = optionData
+      tInputDataCache.setCacheData('address', optionData)
+    },
+    setLeaf (data) {
+      if (!data || data.length === 0) {
+        return
+      }
+      console.log(data)
+      data.forEach(e => {
+        e.leaf = true
+        if (e.districts.length > 0) {
+          e.leaf = false
+          this.setLeaf(e.districts)
+        }
+      })
+      return data
+    },
+    handleInput (value) {
+      console.log(value.join(''))
+    }
+  }
+}
+</script>
+<style lang="less">
+// 更改地址组组件的样式
+.t-input-cascader-box{
+  .el-cascader-panel{
+    height: 400px;
+    ul{
+      height: 400px;
+    }
+  }
+}
+
+</style>

package/package/t-input/children/basic-display.vue

@@ -0,0 +1,41 @@
+<template>
+  <el-input disabled :value="displayName" suffix-icon="el-icon-search" />
+</template>
+<script>
+export default {
+  components: {
+  },
+  props: {
+    value: {
+      type: Object,
+      default: function () {
+        return { name: null, id: null }
+      }
+    }
+  },
+  data () {
+    return {
+
+    }
+  },
+  computed: {
+    displayName () {
+      return this.value.name
+    }
+  },
+  created () {
+    if (!this.value) {
+      this.hanleInput({ name: null, id: null })
+    }
+  },
+  methods: {
+    hanleInput (value) {
+      this.$emit('input', value)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

package/package/t-input/children/basic.vue

@@ -0,0 +1,251 @@
+<template>
+  <div class="basic-input">
+    <!-- 输入控件 -->
+    <el-autocomplete
+      ref="basic"
+      v-model="displayValue"
+      placeholder=""
+      :fetch-suggestions="getAdvice"
+      :disabled="disabled"
+      popper-class="basic-suggest-poper"
+      :trigger-on-focus="false"
+      @select="handleSelect"
+      @keydown.delete.native="handleDeleteKeyDown"
+    >
+      <i slot="suffix" class="el-icon-search" style="cursor: pointer" @click="showDialog" />
+      <template slot-scope="{item}">
+        <div>{{ suggestDisplay(item) }}</div>
+      </template>
+    </el-autocomplete>
+
+    <!-- 弹窗数据选择器 -->
+    <el-dialog
+      :visible.sync="dialogVisible"
+      width="80%"
+      :append-to-body="appendToBody"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :modal-append-to-body="modalAppendToBody"
+      @open="getTableData"
+    >
+      <div class="dataDialog">
+        <Ttable
+          class="t-table"
+          is-selector
+          :layout="tableLayout"
+          :sum="tableSum"
+          :data="tableData"
+          enable-group
+          :page-size="query.pageSize"
+          :current-page="query.pageNum"
+          update-in-dialog
+          @condition-change="handleHeadChange"
+          @groupChange="handleGroupChange"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          @fastConfirm="handleFastSelect"
+        />
+      </div>
+      <template v-slot:title>
+        <div class="common-title">
+          <TListSearch class="common-table-buttons-search" @search="handleSuggestMultiCondition($event,true)" />
+        </div>
+      </template>
+      <span slot="footer" class="dialog-footer basic-selector-footer">
+        <el-button class="common-header-button close" size="mini" type="primary" @click="dialogVisible = false">取 消</el-button>
+        <el-button class="common-header-button" size="mini" type="primary" @click="handleDialogConfirm">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import TListSearch from '../../t-data-list/src/t-list-search.vue'
+import Ttable from '../../t-data-list/src/t-table/index'
+import dataQuery from '@/mixins/t-data-query-mixin.js'
+export default {
+  components: {
+    TListSearch,
+    Ttable
+  },
+  mixins: [dataQuery],
+  props: {
+    value: {
+      type: Object,
+      default: () => {
+        return { name: '', id: null }
+      }
+    },
+    limitation: {
+      type: Object,
+      default: () => {}
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    appendToBody: {
+      type: Boolean,
+      default: true
+    },
+    modalAppendToBody: {
+      type: Boolean,
+      default: false
+    }
+  },
+  inject: ['target', 'entity'],
+  data () {
+    return {
+      dialogVisible: false,
+      // 选中一个基础资料之后，基础资料控件显示的名称
+      displayField: null,
+      queryType: 'SELECTOR'
+    }
+  },
+  computed: {
+    displayValue: {
+      set (value) {
+        if (this.value.id) {
+          return
+        }
+        this.value.name = value
+      },
+      get () {
+        if (!this.value) {
+          return
+        }
+        return this.value.name
+      }
+    }
+  },
+  created () {
+    if (this.entity) {
+      this.$nextTick(() => {
+        this.$refs.basic.focus()
+      })
+    }
+    this.getTableLayout()
+  },
+  methods: {
+    /**
+     * 弹窗和数据选择
+     */
+    // 展开弹窗
+    showDialog () {
+      if (this.disabled) {
+        return
+      }
+      this.dialogVisible = true
+    },
+    // 点击弹窗确定按钮
+    handleDialogConfirm () {
+      if (!this.ids.length) {
+        this.dialogVisible = false
+        return
+      }
+
+      if (!this.entity && this.ids.length > 1) {
+        return this.$message.error('单据头中只能选择一条数据')
+      }
+
+      if (!this.entity) {
+        const name = this.selectedRows[0][this.displayField]
+        const id = this.ids[0]
+        this.$emit('input', { name, id })
+        this.$emit('selected', this.selectedRows)
+      } else {
+        this.$emit('selected', this.selectedRows)
+      }
+      this.dialogVisible = false
+    },
+    // 双击选择数据
+    handleFastSelect (row) {
+      this.$emit('input', { name: row[this.displayField], id: row[this.idField] })
+      this.$emit('selected', [row])
+      this.dialogVisible = false
+    },
+    /**
+     * 输入框相关逻辑
+     */
+    // 删除按键处理函数
+    handleDeleteKeyDown () {
+      if (this.value.id) {
+        this.$emit('input', { name: '', id: null })
+        this.$emit('delete')
+      }
+    },
+    // 获取搜索建议
+    // 此时的搜索建议也需要对限定范围条件进行拼接
+    async getAdvice (queryString, callback) {
+      let record = []
+      if (!/^\s*$/g.test(queryString)) {
+        this.handleSuggestMultiCondition(queryString, false)
+        record = await this.getTableData(true, false)
+      }
+      callback(record)
+    },
+    // 搜索建议的显示格式
+    suggestDisplay (item) {
+      const valueList = []
+      for (const fieldObj of this.suggestFieldList) {
+        valueList.push(item[fieldObj.field])
+      }
+      return valueList.join('/')
+    },
+    // 搜索建议被选择
+    handleSelect (item) {
+      const name = item[this.displayField]
+      const id = item[this.idField]
+      this.$emit('input', { name, id })
+      this.$emit('selected', [item])
+    }
+  }
+}
+</script>
+
+<style>
+.basic-suggest-poper {
+  width:unset !important;
+}
+</style>
+<style lang="less" scoped>
+  .el-autocomplete {
+    ::v-deep .el-input__suffix {
+      display:flex;
+      align-items:center;
+    }
+  }
+
+/deep/.t-table{
+  height: 59vh;
+  .table-records{
+    height: 100%;
+    position: relative;
+    .plTableBox .elx-table--body-wrapper{
+      height: calc(59vh - 80px);
+    }
+    .el-pagination{
+      right: 0;
+    }
+  }
+}
+/deep/.el-dialog__body{
+  padding-top: 0;
+}
+
+.basic-selector-footer {
+  .el-button {
+    background-color: #0A5194;
+    border:none;
+  }
+}
+
+.common-title{
+  // background-color: pink;
+  display:flex;
+  justify-content: right;
+  .common-table-buttons-search{
+    margin-right:50px;
+  }
+}
+
+</style>