Vmi替换记录管理

<template>
  <a-card :bordered='false'>
    <!-- 查询区域 -->
    <div class='table-page-search-wrapper'>
      <a-form layout='inline' @keyup.enter.native='searchQuery'>
        <a-row :gutter='24'>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->
<pre><code>&lt;!-- 操作按钮区域 --&gt;
&lt;div class='table-operator'&gt;
  &lt;a-button @click='handleAdd' type='primary' icon='plus'&gt;新增&lt;/a-button&gt;
  &lt;a-button type='primary' icon='download' @click='handleExportXls('vmi替换记录')'&gt;导出&lt;/a-button&gt;
  &lt;a-upload name='file' :showUploadList='false' :multiple='false' :headers='tokenHeader' :action='importExcelUrl' @change='handleImportExcel'&gt;
    &lt;a-button type='primary' icon='import'&gt;导入&lt;/a-button&gt;
  &lt;/a-upload&gt;
  &lt;a-dropdown v-if='selectedRowKeys.length &gt; 0'&gt;
    &lt;a-menu slot='overlay'&gt;
      &lt;a-menu-item key='1' @click='batchDel'&gt;&lt;a-icon type='delete'/&gt;删除&lt;/a-menu-item&gt;
    &lt;/a-menu&gt;
    &lt;a-button style='margin-left: 8px'&gt; 批量操作 &lt;a-icon type='down' /&gt;&lt;/a-button&gt;
  &lt;/a-dropdown&gt;
&lt;/div&gt;

&lt;!-- table区域-begin --&gt;
&lt;div&gt;
  &lt;div class='ant-alert ant-alert-info' style='margin-bottom: 16px;'&gt;
    &lt;i class='anticon anticon-info-circle ant-alert-icon'&gt;&lt;/i&gt; 已选择 &lt;a style='font-weight: 600'&gt;{{ selectedRowKeys.length }}&lt;/a&gt;项
    &lt;a style='margin-left: 24px' @click='onClearSelected'&gt;清空&lt;/a&gt;
  &lt;/div&gt;

  &lt;a-table
    ref='table'
    size='middle'
    bordered
    rowKey='id'
    :columns='columns'
    :dataSource='dataSource'
    :pagination='ipagination'
    :loading='loading'
    :rowSelection='{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}'
    class='j-table-force-nowrap'
    @change='handleTableChange'&gt;

    &lt;template slot='htmlSlot' slot-scope='text'&gt;
      &lt;div v-html='text'&gt;&lt;/div&gt;
    &lt;/template&gt;
    &lt;template slot='imgSlot' slot-scope='text'&gt;
      &lt;span v-if='!text' style='font-size: 12px;font-style: italic;'&gt;无图片&lt;/span&gt;
      &lt;img v-else :src='getImgView(text)' height='25px' alt='' style='max-width:80px;font-size: 12px;font-style: italic;'/&gt;
    &lt;/template&gt;
    &lt;template slot='fileSlot' slot-scope='text'&gt;
      &lt;span v-if='!text' style='font-size: 12px;font-style: italic;'&gt;无文件&lt;/span&gt;
      &lt;a-button
        v-else
        :ghost='true'
        type='primary'
        icon='download'
        size='small'
        @click='uploadFile(text)'&gt;
        下载
      &lt;/a-button&gt;
    &lt;/template&gt;

    &lt;span slot='action' slot-scope='text, record'&gt;
      &lt;a @click='handleEdit(record)'&gt;编辑&lt;/a&gt;

      &lt;a-divider type='vertical' /&gt;
      &lt;a-dropdown&gt;
        &lt;a class='ant-dropdown-link'&gt;更多 &lt;a-icon type='down' /&gt;&lt;/a&gt;
        &lt;a-menu slot='overlay'&gt;
          &lt;a-menu-item&gt;
            &lt;a-popconfirm title='确定删除吗?' @confirm='() =&gt; handleDelete(record.id)'&gt;
              &lt;a&gt;删除&lt;/a&gt;
            &lt;/a-popconfirm&gt;
          &lt;/a-menu-item&gt;
        &lt;/a-menu&gt;
      &lt;/a-dropdown&gt;
    &lt;/span&gt;

  &lt;/a-table&gt;
&lt;/div&gt;

&lt;vmiReplaceRecord-modal ref='modalForm' @ok='modalFormOk'&gt;&lt;/vmiReplaceRecord-modal&gt;
</code></pre>
  </a-card>
</template>
<script>

  import '@/assets/less/TableExpand.less'
  import { mixinDevice } from '@/utils/mixin'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import VmiReplaceRecordModal from './modules/VmiReplaceRecordModal'

  export default {
    name: 'VmiReplaceRecordList',
    mixins:[JeecgListMixin, mixinDevice],
    components: {
      VmiReplaceRecordModal
    },
    data () {
      return {
        description: 'vmi替换记录管理页面',
        // 表头
        columns: [
          {
            title: '#',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:'center',
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title: '单位',
            align: 'center',
            dataIndex: 'unit',
            scopedSlots: {  // 添加scopedSlots属性
              customRender: 'unitRender'  // 设置自定义渲染函数的名称
            }
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: 'center',
            // fixed:'right',
            width:147,
            scopedSlots: { customRender: 'action' }
          }
        ],
        url: {
          list: '/vmiReplaceRecordService/vmiReplaceRecord/list',
          delete: '/vmiReplaceRecordService/vmiReplaceRecord/delete',
          deleteBatch: '/vmiReplaceRecordService/vmiReplaceRecord/deleteBatch',
          exportXlsUrl: '/vmiReplaceRecordService/vmiReplaceRecord/exportXls',
          importExcelUrl: 'vmiReplaceRecordService/vmiReplaceRecord/importExcel',
        },
        dictOptions:{}
      }
    },
    computed: {
      importExcelUrl: function(){
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      },
    },
    methods: {
      initDictConfig(){
      }
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>
<template slot='unitRender' slot-scope='text, record'>
  <a-input :value='record.unit || 'KG'' disabled></a-input>
</template>