From ec79aa30ddf56e04efc9b511439c3ca16b891f9a Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期一, 17 二月 2025 09:47:03 +0800
Subject: [PATCH] table组件分页序号连续
---
src/views/system/customer/index.vue | 247 +++++++++++++++++++++++++++++++------------------
1 files changed, 157 insertions(+), 90 deletions(-)
diff --git a/src/views/system/customer/index.vue b/src/views/system/customer/index.vue
index bdd5b8f..b67c0b1 100644
--- a/src/views/system/customer/index.vue
+++ b/src/views/system/customer/index.vue
@@ -2,26 +2,61 @@
<div class="app-container">
<div class="search">
<div>
- <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
+ <el-form
+ :model="queryParams"
+ ref="queryForm"
+ size="small"
+ :inline="true"
+ >
<el-form-item label="瀹㈡埛鍚嶇О" prop="company">
- <el-input size="small" placeholder="璇疯緭鍏�" clearable v-model="queryParams.company"
- @keyup.enter.native="getList"></el-input>
+ <el-input
+ size="small"
+ placeholder="璇疯緭鍏�"
+ clearable
+ v-model="queryParams.company"
+ @keyup.enter.native="getList"
+ ></el-input>
</el-form-item>
<el-form-item>
- <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">鏌� 璇�</el-button>
- <el-button icon="el-icon-refresh" size="mini" @click="refresh">閲� 缃�</el-button>
+ <el-button
+ type="primary"
+ icon="el-icon-search"
+ size="mini"
+ @click="getList"
+ >鏌� 璇�</el-button
+ >
+ <el-button icon="el-icon-refresh" size="mini" @click="refresh"
+ >閲� 缃�</el-button
+ >
</el-form-item>
</el-form>
</div>
<div>
- <el-button size="small" type="primary" @click="openFormDia('add')" icon="el-icon-plus">鏂板</el-button>
+ <el-button
+ size="small"
+ type="primary"
+ @click="openFormDia('add')"
+ icon="el-icon-plus"
+ >鏂板</el-button
+ >
</div>
</div>
<div>
- <lims-table :tableData="tableData" :column="column" :page="page" :tableLoading="tableLoading"></lims-table>
+ <lims-table
+ :tableData="tableData"
+ :column="column"
+ :page="page"
+ :tableLoading="tableLoading"
+ ></lims-table>
</div>
<el-dialog :title="formTitle" :visible.sync="addDia" width="450px">
- <el-form ref="userForm" :model="user" :rules="userRules" label-position="right" label-width="100px">
+ <el-form
+ ref="userForm"
+ :model="user"
+ :rules="userRules"
+ label-position="right"
+ label-width="100px"
+ >
<el-form-item label="瀹㈡埛鍚嶇О" prop="company">
<el-input v-model="user.company" size="small" clearable></el-input>
</el-form-item>
@@ -29,12 +64,22 @@
<el-input v-model="user.companyEn" size="small" clearable></el-input>
</el-form-item>
<el-form-item label="鍗曚綅鍦板潃" prop="address">
- <el-input type="textarea" v-model="user.address" size="small" clearable
- :autosize="{minRows: 2, maxRows: 4}"></el-input>
+ <el-input
+ type="textarea"
+ v-model="user.address"
+ size="small"
+ clearable
+ :autosize="{ minRows: 2, maxRows: 4 }"
+ ></el-input>
</el-form-item>
<el-form-item label="鍗曚綅鍦板潃EN" prop="addressEn">
- <el-input type="textarea" v-model="user.addressEn" size="small" clearable
- :autosize="{minRows: 2, maxRows: 4}"></el-input>
+ <el-input
+ type="textarea"
+ v-model="user.addressEn"
+ size="small"
+ clearable
+ :autosize="{ minRows: 2, maxRows: 4 }"
+ ></el-input>
</el-form-item>
<el-form-item label="鍗曚綅鐢佃瘽" prop="phone">
<el-input v-model="user.phone" size="small" clearable></el-input>
@@ -50,133 +95,155 @@
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
- <el-button @click="reset">鍙� 娑�</el-button>
- <el-button type="primary" @click="customAdd" :loading="loading">纭� 瀹�</el-button>
- </span>
+ <el-button @click="reset">鍙� 娑�</el-button>
+ <el-button type="primary" @click="customAdd" :loading="loading"
+ >纭� 瀹�</el-button
+ >
+ </span>
</el-dialog>
</div>
</template>
<script>
-import limsTable from '@/components/Table/lims-table.vue'
-import {addCustom, selectCustomPageList, upCustom} from "@/api/system/customer";
+import limsTable from "@/components/Table/lims-table.vue";
+import {
+ addCustom,
+ selectCustomPageList,
+ upCustom,
+} from "@/api/system/customer";
export default {
components: {
- limsTable
+ limsTable,
},
data() {
return {
queryParams: {
- company: ''
+ company: "",
},
tableData: [],
column: [
- {label: '瀹㈡埛鍚嶇О', prop: 'company'},
- {label: '瀹㈡埛鍗曚綅EN', prop: 'companyEn'},
- {label: '鍗曚綅鍦板潃', prop: 'address'},
- {label: '鍗曚綅鍦板潃EN', prop: 'addressEn'},
- {label: '鍗曚綅鐢佃瘽', prop: 'phone'},
- {label: '鍔犳�ラ搴�', prop: 'num'},
- {label: '瀹㈡埛缂栧彿', prop: 'code2'},
- {label: '宸ュ巶鍩�', prop: 'code'},
+ { label: "瀹㈡埛鍚嶇О", prop: "company" },
+ { label: "瀹㈡埛鍗曚綅EN", prop: "companyEn" },
+ { label: "鍗曚綅鍦板潃", prop: "address" },
+ { label: "鍗曚綅鍦板潃EN", prop: "addressEn" },
+ { label: "鍗曚綅鐢佃瘽", prop: "phone" },
+ { label: "鍔犳�ラ搴�", prop: "num" },
+ { label: "瀹㈡埛缂栧彿", prop: "code2" },
+ { label: "宸ュ巶鍩�", prop: "code" },
{
- dataType: 'action',
- fixed: 'right',
- label: '鎿嶄綔',
+ dataType: "action",
+ fixed: "right",
+ label: "鎿嶄綔",
operation: [
{
- name: '缂栬緫',
- type: 'text',
+ name: "缂栬緫",
+ type: "text",
clickFun: (row) => {
- this.openFormDia('edit', row);
+ this.openFormDia("edit", row);
},
},
- ]
- }
+ ],
+ },
],
page: {
- total:0,
- size:10,
- current:0
+ total: 0,
+ size: 10,
+ current: 0,
},
tableLoading: false,
// 缂栬緫瀹㈡埛寮规
- operationType: '',
- formTitle: '',
+ operationType: "",
+ formTitle: "",
addDia: false,
addPower: true,
- user: {
- name: null
- },
+ user: {},
userRules: {
- company: [{ required: true, message: '璇疯緭鍏ュ鎴峰悕绉�', trigger: 'blur' }],
- companyEn: [{ required: true, message: '璇疯緭鍏ュ鎴峰悕绉癊N', trigger: 'blur' }],
- address: [{ required: true, message: '璇疯緭鍏ュ崟浣嶅湴鍧�', trigger: 'blur' }],
- addressEn: [{ required: true, message: '璇疯緭鍗曚綅鍦板潃EN', trigger: 'blur' }],
- num: [{ required: true, message: '璇疯緭鍏ュ姞鎬ラ搴�', trigger: 'blur' }],
- code2: [{ required: true, message: '璇疯緭鍏ュ鎴风紪鍙�', trigger: 'blur' }],
+ company: [
+ { required: true, message: "璇疯緭鍏ュ鎴峰悕绉�", trigger: "blur" },
+ ],
+ companyEn: [
+ { required: true, message: "璇疯緭鍏ュ鎴峰悕绉癊N", trigger: "blur" },
+ ],
+ address: [
+ { required: true, message: "璇疯緭鍏ュ崟浣嶅湴鍧�", trigger: "blur" },
+ ],
+ addressEn: [
+ { required: true, message: "璇疯緭鍗曚綅鍦板潃EN", trigger: "blur" },
+ ],
+ num: [{ required: true, message: "璇疯緭鍏ュ姞鎬ラ搴�", trigger: "blur" }],
+ code2: [{ required: true, message: "璇疯緭鍏ュ鎴风紪鍙�", trigger: "blur" }],
},
loading: false,
//
- }
+ };
},
mounted() {
- this.getList()
+ this.getList();
},
methods: {
// 鏌ヨ瀹㈡埛鍒楄〃
getList() {
- this.tableLoading = true
- selectCustomPageList({...this.queryParams, ...this.page}).then(res => {
- this.tableLoading = false
- if (res.code === 200) {
- this.tableData = res.data
- this.page.total = res.total
- }
- }).catch(err => {
- this.tableLoading = false
- })
+ this.tableLoading = true;
+ selectCustomPageList({ ...this.queryParams, ...this.page })
+ .then((res) => {
+ this.tableLoading = false;
+ if (res.code === 200) {
+ this.tableData = res.data;
+ this.page.total = res.total;
+ }
+ })
+ .catch((err) => {
+ this.tableLoading = false;
+ });
},
// 閲嶇疆table
refresh() {
- this.queryParams.company = ''
- this.getList()
+ this.queryParams.company = "";
+ this.getList();
},
- openFormDia (type, row) {
- this.addDia = true
- this.formTitle = type === 'add' ? '鏂板瀹㈡埛' : '缂栬緫瀹㈡埛'
- this.operationType = type
+ openFormDia(type, row) {
+ this.addDia = true;
+ this.formTitle = type === "add" ? "鏂板瀹㈡埛" : "缂栬緫瀹㈡埛";
+ this.operationType = type;
},
customAdd() {
- this.$refs['userForm'].validate((valid) => {
+ this.$refs["userForm"].validate((valid) => {
if (valid) {
- this.loading = true
- if (this.operationType === 'add') {
- addCustom(this.user).then(res => {
- if (res.code === 201) return
- this.$message.success('鏂板鎴愬姛')
- this.getList()
- this.loading = false
- this.reset()
- })
+ this.loading = true;
+ if (this.operationType === "add") {
+ addCustom(this.user)
+ .then((res) => {
+ this.loading = false;
+ if (res.code !== 200) return;
+ this.$message.success("鏂板鎴愬姛");
+ this.getList();
+ this.reset();
+ })
+ .catch((err) => {
+ this.loading = false;
+ });
} else {
- upCustom(this.user).then(res => {
- if (res.code === 201) return
- this.$message.success('淇敼鎴愬姛')
- this.getList()
- this.loading = false
- this.reset()
- })
+ upCustom(this.user)
+ .then((res) => {
+ this.loading = false;
+ if (res.code !== 200) return;
+ this.$message.success("淇敼鎴愬姛");
+ this.getList();
+ this.reset();
+ })
+ .catch((err) => {
+ this.loading = false;
+ });
}
}
- })
+ });
},
- reset () {
- this.addDia = false
+ reset() {
+ this.addDia = false;
this.resetForm("userForm");
- }
- }
-}
+ },
+ },
+};
</script>
<style scoped>
--
Gitblit v1.9.3