【jeecg-boot】jeecg-boot的一些功能扩展：

---

一、Template里面将数组对象里面的值遍历=>对象的key

二、利用ES6的解构赋值互换数组数据：

一定要注意写分号，否则解构赋值代码会报错

三、a-select实现可输入可下拉:

#### 一、a-select实现可输入可下拉
a-select改为:  a-auto-complete并添加 <template slot="dataSource">...</template>

eg：
<a-form-model-item label="作业通知单列表" prop="workNo">
  <a-auto-complete v-model="sendCarParam.workNo" showSearch allowClear optionLabelProp="label"
    style="width: 100%;" :filter-option="filterOption" mode="combobox">
    <template slot="dataSource">
      <a-select-option v-for="item in ladingBillWorkList" :key="item.id" :value="item.workNo"
        :label="item.workNo">
        {{ item.workNo }}
      </a-select-option>
    </template>
  </a-auto-complete>
</a-form-model-item>

四、a-table实现动态表头：

如果存在列定义时【一般情况下，动态表头不用加列定义，这个可以忽略】，（1）将图中columns改为defColumns，（2）并将this.columns= [] this.settingColumns= []加上，（3）this.initColumns();放在 this.getSuperFieldList();一起，（4）去除created里面的this.initColumns();和 this.getSuperFieldList();

五、jeecg-boot列自定义：

<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="4" :lg="7" :md="8" :sm="24">
            <a-form-item label="车牌号码">
              <j-input placeholder="请输入车牌号码" v-model="queryParam.carNumber" />
            </a-form-item>
          </a-col>
          <a-col :xl="4" :lg="7" :md="8" :sm="24">
            <a-form-item label="过磅类型">
              <!-- <j-dict-select-tag placeholder="请选择过磅类型" v-model="queryParam.poundType" dictCode="weight_poundType" /> -->
              <j-input placeholder="请输入过磅类型" v-model="queryParam.poundType" />
            </a-form-item>
          </a-col>
          <a-col :xl="4" :lg="7" :md="8" :sm="24">
            <a-form-item label="数据状态">
              <j-dict-select-tag placeholder="请选择数据状态" v-model="queryParam.dataStatus" dictCode="weight_dataStatus" />
            </a-form-item>
          </a-col>
          <a-col :xl="2" :lg="7" :md="8" :sm="24">
            <a-form-item>
              <j-dict-select-tag v-model="timeType" dictCode="weight__searchTimeType" @change="handleChange" />
            </a-form-item>
          </a-col>
          <a-col :xl="7" :lg="11" :md="12" :sm="24">
            <a-form-item v-if="timeType == 'tareWeightTime'">
              <j-date placeholder="请选择开始日期" v-model="queryParam.tareWeightTime_begin" class="query-group-cust"
                :show-time="true" date-format="YYYY-MM-DD HH:mm:ss" />
              <span class="query-group-split-cust"></span>
              <j-date placeholder="请选择结束日期" v-model="queryParam.tareWeightTime_end" class="query-group-cust"
                :show-time="true" date-format="YYYY-MM-DD HH:mm:ss" />
            </a-form-item>
            <a-form-item v-else>
              <j-date placeholder="请选择开始日期" v-model="queryParam.grossWeightTime_begin" class="query-group-cust"
                :show-time="true" date-format="YYYY-MM-DD HH:mm:ss" />
              <span class="query-group-split-cust"></span>
              <j-date placeholder="请选择结束日期" v-model="queryParam.grossWeightTime_end" class="query-group-cust"
                :show-time="true" date-format="YYYY-MM-DD HH:mm:ss" />
            </a-form-item>
          </a-col>
          <a-col :xl="3" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">{{ $t('common.search') }}</a-button>
              <a-button type="primary" @click="SearchReset" icon="reload" style="margin-left: 8px">
                {{ $t('common.reset') }}</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button type="primary" icon="download" @click="handleExportXls('过磅记录表')">{{ $t('common.export') }}</a-button>
      <!-- 高级查询区域 -->
      <j-super-query :fieldList="superFieldList" ref="superQueryModal" @handleSuperQuery="handleSuperQuery">
      </j-super-query>
    </div>

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> {{ $t('common.selected') }}
        <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>{{ $t('common.term') }}
        <a style="margin-left: 24px" @click="onClearSelected">{{ $t('common.clear') }}</a>
        <span style="float:right;">
          <a @click="loadData()"><a-icon type="sync" />{{ $t('common.refresh') }}</a>
          <a-divider type="vertical" />
          <a-popover title="自定义列" trigger="click" placement="leftBottom">
            <template slot="content">
              <a-checkbox-group @change="onColSettingsChange" v-model="settingColumns" :defaultValue="settingColumns">
                <a-row style="width: 400px">
                  <template v-for="item in defColumns">
                    <template v-if="item.key != 'rowIndex' && item.dataIndex != 'action'">
                      <a-col :span="12">
                        <a-checkbox :value="item.dataIndex">
                          <j-ellipsis :value="item.title" :length="10"></j-ellipsis>
                        </a-checkbox>
                      </a-col>
                    </template>
                  </template>
                </a-row>
              </a-checkbox-group>
            </template>
            <a> <a-icon type="setting" />{{ $t('common.setting') }}</a>
          </a-popover>
        </span>
      </div>

      <!--  :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" -->
      <a-table ref="table" size="middle" :scroll="{ x: true }" bordered rowKey="id" :columns="columns"
        :dataSource="dataSource" :pagination="ipagination" :loading="loading" class="j-table-force-nowrap"
        @change="handleTableChange" v-bind="tableProps">

        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>
        <template slot="imgSlot" slot-scope="text, record">
          <i v-if="!text || text.length == 0">无图片</i>
          <a v-else @click="handelPrevew(record, 'img')">图片</a>
        </template>
        <template slot="videoSlot" slot-scope="text, record">
          <i v-if="!text || text.length == 0">无视频</i>
          <a v-else @click="handelPrevew(record, 'video')">视频</a>
        </template>
        <template slot="fileSlot" slot-scope="text">
          <i v-if="!text || text.length == 0">无文件</i>
          <a-button v-else :ghost="true" type="primary" icon="download" size="small" @click="downloadFile(text)">
            下载
          </a-button>
        </template>

        <span slot="action" slot-scope="text, record" style="display:flex;justify-content:space-evenly">
          <a @click="handleEdit(record)">{{ $t('common.detail') }}</a>
        </span>
      </a-table>
    </div>

    <variety-type-modal ref="modalForm" @ok="modalFormOk"></variety-type-modal>
    <filePreview ref="filePreview" />
  </a-card>
</template>

<script>
import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { pageTotalDigit } from '@/utils/util';
import { JeecgListMixinNoIsorter } from '@/mixins/JeecgListMixinNoIsorter'
import VarietyTypeModal from './modules/VarietyTypeModal'
import { filterMultiDictText, filterDictTextByCache } from '@/components/dict/JDictSelectUtil'
import Vue from 'vue'
import filePreview from '@/components/filePreview'

export default {
  name: 'WeightHistoryList',
  mixins: [JeecgListMixinNoIsorter, mixinDevice],
  components: {
    VarietyTypeModal, filePreview
  },
  data() {
    return {
      description: '过磅记录',

      queryParam: {
        grossWeightTime_begin: this.$moment(new Date()).startOf("day").format('YYYY-MM-DD HH:mm:ss'),
        grossWeightTime_end: this.$moment(new Date()).endOf('day').format('YYYY-MM-DD HH:mm:ss'),
      },
      timeType: 'grossWeightTime',

      columns: [], //表头
      settingColumns: [], //列设置
      defColumns: [//列定义
        {
          title: '序号',
          width: 60,
          align: "center",
          key: 'rowIndex',
          dataIndex: 'rowIndex',
          customRender: function (text, r, index) {
            return (text !== '总计') ? (parseInt(index) + 1) : text
          }
        },
        {
          title: '流水单号',
          align: "center",
          width: 180,
          dataIndex: 'serialNumber'
        },
        {
          title: '过磅类型',
          align: "center",
          width: 100,
          dataIndex: 'poundType',
          // customRender: (text) => {
          //   return filterDictTextByCache('weight_poundType', text);
          // }
        },
        {
          title: '车牌号码',
          align: "center",
          width: 100,
          dataIndex: 'carNumber',
        },
        {
          title: '供应商/发货单位',
          align: "left",
          width: 180,
          dataIndex: 'consigner'
        },
        {
          title: '客户/收货单位',
          align: "left",
          width: 180,
          dataIndex: 'consignee'
        },
        {
          title: '货品',
          align: "center",
          width: 100,
          dataIndex: 'variety'
        },
        {
          title: '毛重',
          align: "center",
          width: 100,
          dataIndex: 'grossWeight'
        },
        {
          title: '皮重',
          align: "center",
          width: 100,
          dataIndex: 'tareWeight'
        },
        {
          title: '净重',
          align: "center",
          width: 100,
          dataIndex: 'netWeight'
        },
        {
          title: '毛重司磅员',
          align: "center",
          width: 100,
          dataIndex: 'grossWeighman'
        },
        {
          title: '毛重称重时间',
          align: "center",
          width: 180,
          dataIndex: 'grossWeightTime'
        },
        {
          title: '皮重司磅员',
          align: "center",
          width: 100,
          dataIndex: 'tareWeighman'
        },
        {
          title: '皮重称重时间',
          align: "center",
          width: 150,
          dataIndex: 'tareWeightTime'
        },
        {
          title: '数据状态',
          align: "center",
          width: 100,
          dataIndex: 'dataStatus',
          // customRender: (text) => {
          //   return filterDictTextByCache('weight_dataStatus', text);
          // }
        },
        {
          title: '一次过磅时间',
          align: "center",
          width: 150,
          dataIndex: 'firstWeighingTime'
        },
        {
          title: '二次过磅时间',
          align: "center",
          width: 150,
          dataIndex: 'secondWeighingTime'
        },
        {
          title: '图片',
          align: "center",
          width: 100,
          dataIndex: 'pictureList',
          scopedSlots: { customRender: "imgSlot" }
        },
        {
          title: '视频',
          align: "center",
          width: 100,
          dataIndex: 'videoList',
          scopedSlots: { customRender: "videoSlot" }
        },
        {
          title: '更新时间',
          align: "center",
          width: 150,
          dataIndex: 'updateTime'
        },
        {
          title: '更新人',
          align: "center",
          width: 100,
          dataIndex: 'updateUser'
        },
        {
          title: '操作',
          align: "center",
          fixed: "right",
          width: 147,
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ],
      dictOptions: {},
      superFieldList: [],
      dataSource: [],

      newArr: [],
      newDataSource: [],
      footerDataSource: [],
      url: {
        list: "/kd/weightInfo/findInfo",
        delete: "/kd/weightInfo/delete",
        deleteBatch: "/kd/weightInfo/deleteBatch",
        exportXlsUrl: "/weightinfo/findInfoExport",
        importExcelUrl: "/kd/weightInfo/importExcel",
      },
    }
  },
  created() {
    this.initColumns();
    this.getSuperFieldList();
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
    },
    // 数据表格的固定属性
    tableProps() {
      let tableProps = {
        size: 'middle',
        rowKey: 'rowIndex',
        columns: this.columns,
        scroll: { x: true },
      }
      let renderFooter = this.footerDataSource.length === 0 ? null : () => this.renderTableFooter(tableProps)
      return {
        ...tableProps,
        ref: 'table',
        class: 'chart-data-list',
        pagination: this.ipagination,
        columns: this.columns,
        dataSource: this.dataSource,
        footer: renderFooter,
      }
    },
  },
  watch: {
    dataSource: function (val) {
      this.newDataSource = val
      this.dataHandling(1, this.ipagination.pageSize)
    },
    //update-begin---author:wangshuai ---date:20220209  for：[JTC-494]常用示例->表格合计写法改成新的写法------------
    'pageSwitch': function (val) {
      if (!val) {
        this.dataHandling('-1', 0)
      } else {
        this.dataHandling(1, this.ipagination.pageSize)
      }
    },
    'ipagination.current': function (val) {
      this.dataHandling(val, this.ipagination.pageSize)
    },
    //当合计行变化时，绑定滚动条
    'footerDataSource': {
      async handler(dataSource) {
        // 当底部合计行有值，并且显示出来时，再同步滚动条
        if (dataSource && dataSource.length > 0) {
          await this.$nextTick()
          // 同步表与footer滚动
          let dom = this.$refs.table.$el.querySelectorAll('.ant-table-body')[0]
          let footerDom = this.$refs.footerTable.$el.querySelectorAll('.ant-table-body')[0]
          dom.addEventListener('scroll', () => {
            footerDom.scrollLeft = dom.scrollLeft
          }, true)
        }
      },
      //update-end---author:wangshuai ---date:20220209  for：[JTC-494]常用示例->表格合计写法改成新的写法------------
    },
  },
  methods: {
    getSuperFieldList() {
      let fieldList = [];
      fieldList.push({ type: 'string', value: 'serialNumber', text: '流水号', dictCode: '' })
      fieldList.push({ type: 'string', value: 'carNumber', text: '车号', dictCode: '' })
      // fieldList.push({ type: 'string', value: 'poundType', text: '过磅类型', dictCode: 'weight_poundType' })
      fieldList.push({ type: 'string', value: 'poundType', text: '过磅类型', dictCode: '' })
      fieldList.push({ type: 'string', value: 'consigner', text: '发货单位', dictCode: '' })
      fieldList.push({ type: 'string', value: 'consignee', text: '收货单位', dictCode: '' })
      fieldList.push({ type: 'string', value: 'variety', text: '货名', dictCode: '' })
      fieldList.push({ type: 'string', value: 'specification', text: '规格', dictCode: '' })
      fieldList.push({ type: 'BigDecimal', value: 'grossWeight', text: '毛重', dictCode: '' })
      fieldList.push({ type: 'BigDecimal', value: 'tareWeight', text: '皮重', dictCode: '' })
      fieldList.push({ type: 'BigDecimal', value: 'netWeight', text: '净重', dictCode: '' })
      fieldList.push({ type: 'string', value: 'grossWeighman', text: '毛重司磅员', dictCode: '' })
      fieldList.push({ type: 'datetime', value: 'grossWeightTime', text: '毛重时间' })
      fieldList.push({ type: 'string', value: 'tareWeighman', text: '皮重司磅员', dictCode: '' })
      fieldList.push({ type: 'datetime', value: 'tareWeightTime', text: '皮重时间' })
      fieldList.push({ type: 'string', value: 'dataStatus', text: '数据状态', dictCode: 'weight_dataStatus' })
      fieldList.push({ type: 'datetime', value: 'firstWeighingTime', text: '一次过磅时间' })
      fieldList.push({ type: 'datetime', value: 'secondWeighingTime', text: '二次过磅时间' })
      this.superFieldList = fieldList
    },
    //列设置更改事件
    onColSettingsChange(checkedValues) {
      var key = this.$route.name + ":colsettings";
      Vue.ls.set(key, checkedValues, 7 * 24 * 60 * 60 * 1000)
      this.settingColumns = checkedValues;
      const cols = this.defColumns.filter(item => {
        if (item.key == 'rowIndex' || item.dataIndex == 'action') { return true }
        if (this.settingColumns.includes(item.dataIndex)) { return true }
        return false
      })
      this.columns = cols;
    },
    initColumns() {
      var key = this.$route.name + ":colsettings";
      let colSettings = Vue.ls.get(key);
      if (colSettings == null || colSettings == undefined) {
        let allSettingColumns = [];
        this.defColumns.forEach(function (item, i, array) {
          allSettingColumns.push(item.dataIndex);
        })
        this.settingColumns = allSettingColumns;
        this.columns = this.defColumns;
      } else {
        this.settingColumns = colSettings;
        const cols = this.defColumns.filter(item => {
          if (item.key == 'rowIndex' || item.dataIndex == 'action') { return true }
          if (colSettings.includes(item.dataIndex)) { return true }
          return false;
        })
        this.columns = cols;
      }
    },
    /** 表格增加合计行 */
    tableAddTotalRow(columns, dataSource) {
      let numKey = 'rowIndex'
      let totalRow = { [numKey]: '合计' }
      columns.forEach(column => {
        let { key, dataIndex } = column
        if (![key, dataIndex].includes(numKey)) {
          let total = 0
          dataSource.forEach(data => {
            total += /^\d+\.?\d?$/.test(data[dataIndex]) ? Number.parseInt(data[dataIndex]) : Number.NaN
          })
          if (Number.isNaN(total)) { total = '-' }
          totalRow[dataIndex] = total
        }
      })
      dataSource.push(totalRow)
    },
    //update-begin---author:wangshuai ---date:20220209  for：[JTC-494]常用示例->表格合计写法改成新的写法------------
    /*如果分页走这个方法*/
    dataHandling(pageNo, pageSize) {
      //根据当前页数和每页显示条数分割数组
      let arrs = [];
      //如果pageNo不是-1（不分页）,那么需要对数据进行分页计算
      if (pageNo != -1) {
        arrs = this.newDataSource.slice((pageNo - 1) * pageSize, pageNo * pageSize)
      } else {
        arrs = this.newDataSource
      }
      let newDataSource = [];
      let newArr = {};
      newArr.rowIndex = "总计"
      let grossWeight = 0;//毛重
      let tareWeight = 0;//皮重
      let netWeight = 0;//净重
      let money = 0;//金额
      //每一项的数值相加
      for (let j = 0; j < arrs.length; j++) {
        grossWeight += Number(arrs[j].grossWeight);
        tareWeight += Number(arrs[j].tareWeight);
        netWeight += Number(arrs[j].netWeight);
        money += Number(arrs[j].money);
      }
      newArr.grossWeight = pageTotalDigit(grossWeight);
      newArr.tareWeight = pageTotalDigit(tareWeight);
      newArr.netWeight = pageTotalDigit(netWeight);
      newArr.money = pageTotalDigit(money);
      newDataSource.push(newArr);
      //给foot底部数组赋值
      this.footerDataSource = newDataSource;
    },
    // 渲染表格底部合计行
    renderTableFooter(tableProps) {
      let h = this.$createElement
      return h('a-table', {
        ref: 'footerTable',
        props: {
          ...tableProps,
          pagination: false,
          dataSource: this.footerDataSource,
          showHeader: false,
        },
      })
      //update-end---author:wangshuai ---date:20220209  for：[JTC-494]常用示例->表格合计写法改成新的写法------------
    },
    // 图片或视频预览
    handelPrevew(record, type) {
      this.$nextTick(() => {
        this.$refs.filePreview.init(record, type);
      });
    },
    handleChange() {
      this.queryParam.tareWeightTime_begin = null
      this.queryParam.tareWeightTime_end = null
      this.queryParam.grossWeightTime_begin = null
      this.queryParam.grossWeightTime_end = null
      this.queryParam[this.timeType + '_begin'] = this.$moment(new Date()).startOf('day').format('YYYY-MM-DD HH:mm:ss')
      this.queryParam[this.timeType + '_end'] = this.$moment(new Date()).endOf('day').format('YYYY-MM-DD HH:mm:ss')
    },
    // 重置按钮
    SearchReset() {
      this.timeType = 'grossWeightTime'
      this.queryParam = {
        grossWeightTime_begin: this.$moment(new Date()).startOf("day").format('YYYY-MM-DD HH:mm:ss'),
        grossWeightTime_end: this.$moment(new Date()).endOf('day').format('YYYY-MM-DD HH:mm:ss'),
      }
      this.loadData(1)
    },
  }
}
</script>


<style scoped>
@import '~@assets/less/common.less';

/* // 解决合计行样式问题 */
/deep/.chart-data-list .ant-table-footer .ant-table-body {
  overflow: hidden !important;
}

/deep/.ant-table-footer {
  padding: 0 !important;
}
</style>

六、jeecg-boot合计行：

代码见上面