Device.vue

<template>
  <a-page-header-wrapper title="查询表格">
    <a-card :bordered="false">
      <div class="tableList">
        <div class="tableListForm">
          <a-form layout="inline">
            <a-row :gutter="{ md: 8, lg: 24, xl: 48 }">
              <a-col :md="8" :sm="24">
                <a-form-item label="设备名" v-decorator="['name']">
                  <a-input v-model="query.name" placeholder="请输入" />
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="IMEI" v-decorator="['imei']">
                  <a-input v-model="query.imei" placeholder="请输入" />
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <span class="submitButtons">
                  <a-button
                    type="primary"
                    htmlType="submit"
                    @click="getDataList"
                  >
                    查询
                  </a-button>
                  <a-button :style="{ marginLeft: '8px' }" @click="resetForm">
                    重置
                  </a-button>
                </span>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <div class="tableListOperator">
          <a-button icon="plus" type="primary" @click="handleAdd">
            新建
          </a-button>
          <span v-show="selectedRowKeys.length > 0">
            <a-button>批量操作</a-button>
            <!-- <a-dropdown overlay={menu}>
                  <a-button>
                    更多操作 <icon type="down" />
                  </a-button>
                </a-dropdown> -->
          </span>
        </div>
        <!-- <StandardTable
              selectedRows={selectedRows}
              loading={loading}
              data={data}
              columns={this.columns}
              onSelectRow={this.handleSelectRows}
              onChange={this.handleStandardTableChange}
            /> -->
        <a-table
          :columns="columns"
          :rowKey="(record) => record.uuid"
          :dataSource="tableData.list"
          :pagination="tableData.pagination"
          :loading="loading"
          @change="handleTableChange"
        >
          <template slot="action" slot-scope="text, record">
            <a href="javascript:void(0);" @click="handleEdit(record)">编辑</a>
            <a-divider type="vertical" />
            <a href="javascript:void(0);" @click="handleDelete(record)">删除</a>
          </template>
        </a-table>
      </div>
    </a-card>
  </a-page-header-wrapper>
</template>

<script>
import {
  Avatar,
  Row,
  Col,
  Card,
  List,
  Button,
  Form,
  Icon,
  Table,
  Divider,
  Dropdown,
  Input,
  Select,
  DatePicker,
  message,
} from "ant-design-vue";
import PageHeaderWrapper from "@/components/PageHeaderWrapper";
import DescriptionItem from "@/components/DescriptionItem";
const columns = [
  {
    title: "IMEI",
    dataIndex: "imei",
    width: "15%",
  },
  {
    title: "设备名称",
    dataIndex: "name",
  },
  {
    title: "设备类型",
    dataIndex: "type",
  },
  {
    title: "设备描述",
    dataIndex: "desc",
  },
  {
    title: "Action",
    key: "action",
    scopedSlots: { customRender: "action" },
  },
];

import { mapTrim } from "@/utils/index";
import { getDeviceList, deleteDevice } from "@/api/openapi";

export default {
  name: "DeviceIndex",
  data: () => ({
    selectedRowKeys: [],
    columns,
    sya: {
      fontSize: "16px",
      color: "rgba(0,0,0,0.85)",
      lineHeight: "24px",
      display: "block",
      marginBottom: "16px",
    },
    syb: {
      marginBottom: "24px",
    },
    loading: false,
    tableData: {
      list: [],
      pagination: {
        total: 0,
        pageSize: 15,
      },
    },
    query: {
      imei: null,
      name: null,
      type: null,
    },
    post: {
      page: 1,
      pageSize: 15,
    },
  }),
  components: {
    APageHeaderWrapper: PageHeaderWrapper,
    AAvatar: Avatar,
    ARow: Row,
    ACol: Col,
    ACard: Card,
    ACardGrid: Card.Grid,
    ACardMeta: Card.Meta,
    AList: List,
    AButton: Button,
    AForm: Form,
    AFormItem: Form.Item,
    AIcon: Icon,
    ATable: Table,
    ADescriptionItem: DescriptionItem,
    ADivider: Divider,
    ADropdown: Dropdown,
    AInput: Input,
    ASelect: Select,
    AOption: Select.Option,
    ARangePicker: DatePicker.RangePicker,
  },
  methods: {
    resetForm() {
      this.query = {
        imei: null,
        name: null,
        type: null,
      };
      this.getDataList();
    },
    handleAdd() {
      this.$router.push({ name: "DeviceForm", params: { title: "添加" } });
    },
    handleEdit(record) {
      this.$router.push({
        name: "DeviceForm",
        params: { title: "编辑", record },
      });
    },
    handleDelete(record) {
      deleteDevice(record.uuid)
        .then((res) => {
          message.success(res.msg);
          this.getDataList();
        })
        .catch((err) => {
          message.error(err.msg);
        });
    },
    onSelectChange(selectedRowKeys) {
      window.console.log("selectedRowKeys changed: ", selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
    handleTableChange(pagination, filters, sorter) {
      console.log(pagination, filters, sorter);
    },
    getDataList() {
      this.loading = true;
      let opts = mapTrim(this.query);
      opts = Object.assign(opts, this.post);

      getDeviceList(opts)
        .then((res) => {
          message.success(res.msg);
          if (res.code == 200) {
            this.tableData.list = res.data;
            this.tableData.pagination.pageSize = res.pageSize;
            this.tableData.pagination.total = res.total;
          }
        })
        .catch((err) => {
          message.error(err.msg);
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
  created() {
    this.getDataList();
  },
};
</script>
<style lang="less">
@import url("styles/tableList.less");
</style>