index.vue 2.21 KB
<template>
  <a-card title :bordered="false">
    <section class="flex-table">
      <a-skeleton :loading="loading" avatar active title="搜索">
        <a-form-model ref="searchForm" :model="searchForm" :rules="searchRule" layout="inline">
          <a-row :gutter="24">
            <a-col :span="6">
              <a-form-model-item label="商品名称" prop="productName">
                <a-input placeholder="请输入" allow-clear v-model.trim="searchForm.productName" />
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item label="商品编码" prop="productCode">
                <a-input placeholder="请输入" allow-clear v-model.trim="searchForm.productCode" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12" class="right">
              <a-form-model-item label class="submit">
                <a-button type="primary" @click="searchHandle('searchForm')">查询</a-button>
                <a-button class="buttonLeft5" @click="specialResetQuery('searchForm')">重置</a-button>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </a-skeleton>
    </section>
    <section ref="table">
      <a-table rowKey="id" :columns="columns" :data-source="tableData" :pagination="pagination" @change="pageChangeHandle" :scroll="scroll" :loading="loading">
        <span slot="productName" slot-scope="text, record" :title="record.productName">
          <a @click="jumpDetail(record)">{{record.productName}}</a>
        </span>
        <span slot="action" slot-scope="text, record">
          <a @click="handleLook(record)">查看</a>
        </span>
      </a-table>
    </section>
  </a-card>
</template>
<script>
import tableMixin from '@/components/mixins/tableMixin'
import columns from './column'
export default {
  name: 'CarouseManage',
  mixins: [tableMixin],
  data() {
    return {
      searchForm: {},
      searchRule: {},
      selectedRowKeys: [],
      selectIds: [],
      columns,
      tableUrl: ''
    }
  },
  methods: {
    // 表格界面初始化渲染
    init() {
      this.tableListHandle();
    },
    handleLook(record) {
      console.log(record)
    }
  }
}
</script>