<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=&quot;table-operator&quot;&gt;
  &lt;a-button @click=&quot;handleAdd&quot; type=&quot;primary&quot; icon=&quot;plus&quot;&gt;新增&lt;/a-button&gt;
  &lt;a-button type=&quot;primary&quot; icon=&quot;download&quot; @click=&quot;handleExportXls('vmi替换记录')&quot;&gt;导出&lt;/a-button&gt;
  &lt;a-upload name=&quot;file&quot; :showUploadList=&quot;false&quot; :multiple=&quot;false&quot; :headers=&quot;tokenHeader&quot; :action=&quot;importExcelUrl&quot; @change=&quot;handleImportExcel&quot;&gt;
    &lt;a-button type=&quot;primary&quot; icon=&quot;import&quot;&gt;导入&lt;/a-button&gt;
  &lt;/a-upload&gt;
  &lt;a-dropdown v-if=&quot;selectedRowKeys.length &gt; 0&quot;&gt;
    &lt;a-menu slot=&quot;overlay&quot;&gt;
      &lt;a-menu-item key=&quot;1&quot; @click=&quot;batchDel&quot;&gt;&lt;a-icon type=&quot;delete&quot;/&gt;删除&lt;/a-menu-item&gt;
    &lt;/a-menu&gt;
    &lt;a-button style=&quot;margin-left: 8px&quot;&gt; 批量操作 &lt;a-icon type=&quot;down&quot; /&gt;&lt;/a-button&gt;
  &lt;/a-dropdown&gt;
&lt;/div&gt;

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

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

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

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

      &lt;a-divider type=&quot;vertical&quot; /&gt;
      &lt;a-dropdown&gt;
        &lt;a class=&quot;ant-dropdown-link&quot;&gt;更多 &lt;a-icon type=&quot;down&quot; /&gt;&lt;/a&gt;
        &lt;a-menu slot=&quot;overlay&quot;&gt;
          &lt;a-menu-item&gt;
            &lt;a-popconfirm title=&quot;确定删除吗?&quot; @confirm=&quot;() =&gt; handleDelete(record.id)&quot;&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=&quot;modalForm&quot; @ok=&quot;modalFormOk&quot;&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',
            width: 60
          },
          {
            title: '操作',
            dataIndex: 'action',
            align:"center",
            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>
Vmi替换记录管理

原文地址: https://www.cveoy.top/t/topic/hAUE 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录