分页修改

quanyawei

2024-01-25 a4831debee63c7071a261c5f6ecfa62fd535b2ab

 src/views/list/devicesVersion.vue

@@ -3,23 +3,24 @@
    <a-card :bordered="false" style="margin-top:24px">

      <div class="tableList">

        <div class="tableListForm">

          <a-form

            @submit="handleSearch"

            layout="horizontal"

            :form="searchForm"

          >

          <a-form @submit="handleSearch" layout="horizontal" :form="searchForm">

            <a-row :gutter="{ md: 8, lg: 24, xl: 48 }">

              <a-button

                icon="plus"

                type="primary"

                @click="() => this.handleModalVisible(true)"

                style="margin-left: 25px;"

              >新建</a-button>

                >新建</a-button

              >

              <a-form-item

                v-bind="searchFormLayout"

                style="width: 240px;float: right;"

              >

                <a-input v-model="serch.name" placeholder="请输入型号名称" allow-clear />

                <a-input

                  v-model="serch.name"

                  placeholder="请输入型号名称"

                  allow-clear

                />

              </a-form-item>

            </a-row>

          </a-form>

@@ -45,19 +46,21 @@
      @cancel="handleCreateModalCancel"

      okText="保存"

    >



      <a-form style="margin-top: 8px"  :form="createForm">

      <a-form style="margin-top: 8px" :form="createForm">

        <a-form-item

          :labelCol="{ span: 5 }"

          :wrapperCol="{ span: 15 }"

          label="名称"

          has-feedback

        >

         <a-input

                placeholder="型号名称"

                type="string"

                v-decorator="['deviceName', { rules: [{ required: true, message: '请输入名称！' }] }]"

              />

          <a-input

            placeholder="型号名称"

            type="string"

            v-decorator="[

              'deviceName',

              { rules: [{ required: true, message: '请输入名称！' }] },

            ]"

          />

        </a-form-item>



        <a-form-item

@@ -90,14 +93,11 @@
<script lang="tsx">

import { Component, Prop, Vue, Model, Watch } from "vue-property-decorator";





import moment from "moment";

import { get, post } from "@/util/request";





import UpdateTaskForm from "./components/UpdateTaskFormVersion.vue";

import DistributionVersion from "./components/DistributionVersion.vue";





import modalService from "@/core/ModalService.ts";



@@ -107,24 +107,24 @@
@Component({

  components: {

    UpdateTaskForm,

    DistributionVersion

  }

    DistributionVersion,

  },

})

export default class QueryList extends Vue {

  private searchForm: any;



  private serch: any = {

    name: ""

    name: "",

  };



  private searchFormLayout: any = {

    labelCol: {

      span: 5

      span: 5,

    },

    wrapperCol: {

      span: 18,

      offset: 1

    }

      offset: 1,

    },

  };



  private form: any = {};

@@ -159,30 +159,40 @@


  private columns: any[] = [

    {

      title: "序号",

      dataIndex: "key",

      key: "key",

      align: "center",

      customRender: (text: any, record: any, index: any) => `${index + 1}`,

      width: 60,

    },

    {

      title: "名称",

      dataIndex: "name"

      dataIndex: "name",

    },



    {

      title: "创建日期",

      dataIndex: "createTime"

      dataIndex: "createTime",

    },

    {

      title: "备注",

      dataIndex: "desc"

      dataIndex: "desc",

    },

    {

      title: "操作",

      customRender: this.opRender

    }

      customRender: this.opRender,

    },

  ];



  private pagination: any = {

    total: 0,

    current: 0,

    pageSize: 5,

    showSizeChanger: false,

    showQuickJumper: false

    current: 1,

    pageSize: 10,

    showSizeChanger: true,

    showQuickJumper: true,

    pageSizeOptions: ["10", "30", "60", "100"],

    showTotal: (total: number) => `共有 ${this.pagination.total} 条数据`, //分页中显示总的数据

  };

  constructor() {

    super();

@@ -200,20 +210,20 @@
    return [

      {

        text: status[0],

        value: 0

        value: 0,

      },

      {

        text: status[1],

        value: 1

        value: 1,

      },

      {

        text: status[2],

        value: 2

        value: 2,

      },

      {

        text: status[3],

        value: 3

      }

        value: 3,

      },

    ];

  }



@@ -233,20 +243,23 @@


  private handleSearch(): void {

    get("manageRole/getManageRoleByNameFuzzy", {

          name: this.serch.name,

          current: 1,

          size: 100

      })

      .then(res => {

      name: this.serch.name,

      current: 1,

      size: 100,

    })

      .then((res) => {

        this.dataSource = res.data.data.manageRoles;

      })

      .catch(err => {

      .catch((err) => {

        console.log(err);

      });

  }



  private handlerTableChange(pagination: any, filter: any, sorter: any): void {

    this.loadRuleData(pagination.current)

    this.pagination.current = pagination.current;

    this.pagination.pageSize = pagination.pageSize;

    this.pagination.total = pagination.total;

    this.loadRuleData(pagination.current);

  }



  private testCallback(param: any) {}

@@ -287,7 +300,7 @@


  private handleUpdateModalVisible1(visible: boolean, record: any): void {

    this.updateRecord1 = record;

      this.distributionMenuVisible = true;

    this.distributionMenuVisible = true;

  }



  private handleCreateModalOk() {

@@ -295,23 +308,21 @@
      if (err) {

        return;

      }

      post("version/insert",

          {

            name: this.createForm.getFieldValue("deviceName"),

            desc: this.createForm.getFieldValue("desc")

          }

        )

      post("version/insert", {

        name: this.createForm.getFieldValue("deviceName"),

        desc: this.createForm.getFieldValue("desc"),

      })

        .then((res: any) => {

          if (res.data.code !== 0) {

            this.$message.warning(res.data.message, 2);

            return

            return;

          }

          this.createForm.resetFields();

          this.$message.success(res.data.message, 2);

          this.visibleCreateModal = false;

          this.loadRuleData(1);

        })

        .catch(err => {

        .catch((err) => {

          console.log(err);

        });

    });

@@ -333,44 +344,41 @@


  private created() {

    this.createForm = this.$form.createForm(this, { name: "devicesVersion" });

    this.searchForm = this.$form.createForm(this, {name: "devicesVersion"});

    this.searchForm = this.$form.createForm(this, { name: "devicesVersion" });

    this.loadRuleData(1);

  }



  private loadRuleData(page:number) {

  private loadRuleData(page: number) {

    this.tableLoading = true;

    get("version/query", {

          name: this.serch.name,

          orderType: 1,

          order: 'createTime',

          page: page,

          size: 8

      })

      .then(res => {

        if (res.data.code !== 0) {

          this.$message.error(res.data.message, 2);

        } else {

          this.tableLoading = false;

          this.pagination.current = res.data.data.current;

          this.pagination.total = res.data.data.total;

          this.pagination.pageSize = res.data.data.size;

          this.dataSource = res.data.data.versions;

        }

      });

      name: this.serch.name,

      orderType: 1,

      order: "createTime",

      page: page,

      size: this.pagination.pageSize,

    }).then((res) => {

      if (res.data.code !== 0) {

        this.$message.error(res.data.message, 2);

      } else {

        this.tableLoading = false;

        this.pagination.current = res.data.data.current;

        this.pagination.total = res.data.data.total;

        this.pagination.pageSize = res.data.data.size;

        this.dataSource = res.data.data.versions;

      }

    });

  }



  private deleteManageRole(record: any) {

    post("version/delete",

        { id: record.id },

      )

      .then(res => {

    post("version/delete", { id: record.id })

      .then((res) => {

        if (res.data.code === 0) {

          this.$message.success('删除成功',2)

          this.$message.success("删除成功", 2);

          this.loadRuleData(1);

        }

      })

      .catch(err=> {

        this.$message.warning(err,2)

      .catch((err) => {

        this.$message.warning(err, 2);

      });

  }