From 3807d34ee0719c1562c17a06214850d2bfcbc0cc Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期一, 17 二月 2025 09:47:27 +0800
Subject: [PATCH] table组件分页序号连续
---
src/views/system/customer/index.vue | 475 +++++++++++++++++++++++++---------------------------------
1 files changed, 205 insertions(+), 270 deletions(-)
diff --git a/src/views/system/customer/index.vue b/src/views/system/customer/index.vue
index 9bef5d6..b67c0b1 100644
--- a/src/views/system/customer/index.vue
+++ b/src/views/system/customer/index.vue
@@ -2,318 +2,253 @@
<div class="app-container">
<div class="search">
<div>
- <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
- <el-form-item label="鐘舵��" prop="state">
- <el-input size="small" placeholder="璇疯緭鍏�" clearable v-model="queryParams.company"
- @keyup.enter.native="refreshTable()"></el-input>
+ <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-form-item>
<el-form-item>
- <el-button type="primary" icon="el-icon-search" size="mini" @click="refreshTable">鏌� 璇�</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="addDia = true" v-if="addPower" icon="el-icon-plus">鏂板</el-button>
+ <el-button
+ size="small"
+ type="primary"
+ @click="openFormDia('add')"
+ icon="el-icon-plus"
+ >鏂板</el-button
+ >
</div>
</div>
-<!-- <div class="table">-->
-<!-- <ValueTable ref="ValueTable" :url="$api.user.selectCustomPageList" :delUrl="$api.user.delCustomById"-->
-<!-- :componentData="componentData" :key="upIndex" :upUrl="$api.user.upCustom"/>-->
-<!-- </div>-->
- <el-dialog title="鏂板瀹㈡埛" :visible.sync="addDia" width="450px">
- <div style="margin-bottom: 15px;">
- <el-row style="line-height: 50px;">
- <el-col :span="7" style="text-align: right;padding-right: 8px;"><span class="required-span">*
- </span>瀹㈡埛鍚嶇О锛�</el-col>
- <el-col :span="15">
- <el-input v-model="user.company" size="small" clearable></el-input>
- </el-col>
- </el-row>
- <el-row style="line-height: 50px;">
- <el-col :span="7" style="text-align: right;padding-right: 8px;"><span class="required-span">*
- </span>瀹㈡埛鍗曚綅EN锛�</el-col>
- <el-col :span="15">
- <el-input v-model="user.companyEn" size="small" clearable></el-input>
- </el-col>
- </el-row>
- <el-row style="margin-top: 15px;">
- <el-col :span="7" style="text-align: right;padding-right: 8px;"><span class="required-span">*
- </span>鍗曚綅鍦板潃锛�</el-col>
- <el-col :span="15">
- <el-input type="textarea" v-model="user.address" size="small" clearable
- :autosize="{minRows: 2, maxRows: 4}"></el-input>
- </el-col>
- </el-row>
- <el-row style="margin-top: 15px;">
- <el-col :span="7" style="text-align: right;padding-right: 8px;"><span class="required-span">*
- </span>瀹㈡埛鍦板潃EN锛�</el-col>
- <el-col :span="15">
- <el-input type="textarea" v-model="user.addressEn" size="small" clearable
- :autosize="{minRows: 2, maxRows: 4}"></el-input>
- </el-col>
- </el-row>
- <el-row style="line-height: 50px;">
- <el-col :span="7" style="text-align: right;padding-right: 8px;"><span class="required-span">*
- </span>鍔犳�ラ搴︼細</el-col>
- <el-col :span="15">
- <el-input v-model="user.num" size="small" clearable></el-input>
- </el-col>
- </el-row>
- <el-row style="line-height: 50px;">
- <el-col :span="7" style="text-align: right;padding-right: 8px;">鍗曚綅鐢佃瘽锛�</el-col>
- <el-col :span="15">
- <el-input v-model="user.phone" size="small" clearable></el-input>
- </el-col>
- </el-row>
- <el-row style="line-height: 50px;">
- <el-col :span="7" style="text-align: right;padding-right: 8px;">宸ュ巶鍩燂細</el-col>
- <el-col :span="15">
- <el-input v-model="user.code" size="small" clearable></el-input>
- </el-col>
- </el-row>
- <el-row style="line-height: 50px;">
- <el-col :span="7" style="text-align: right;padding-right: 8px;"><span class="required-span">*
- </span>瀹㈡埛缂栧彿锛�</el-col>
- <el-col :span="15">
- <el-input v-model="user.code2" size="small" clearable></el-input>
- </el-col>
- </el-row>
- </div>
+ <div>
+ <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-item label="瀹㈡埛鍚嶇О" prop="company">
+ <el-input v-model="user.company" size="small" clearable></el-input>
+ </el-form-item>
+ <el-form-item label="瀹㈡埛鍗曚綅EN" prop="companyEn">
+ <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-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-form-item>
+ <el-form-item label="鍗曚綅鐢佃瘽" prop="phone">
+ <el-input v-model="user.phone" size="small" clearable></el-input>
+ </el-form-item>
+ <el-form-item label="鍔犳�ラ搴�" prop="num">
+ <el-input v-model="user.num" size="small" clearable></el-input>
+ </el-form-item>
+ <el-form-item label="瀹㈡埛缂栧彿" prop="code2">
+ <el-input v-model="user.code2" size="small" clearable></el-input>
+ </el-form-item>
+ <el-form-item label="宸ュ巶鍩�" prop="code">
+ <el-input v-model="user.code" size="small" clearable></el-input>
+ </el-form-item>
+ </el-form>
<span slot="footer" class="dialog-footer">
- <el-button @click="addDia = false">鍙� 娑�</el-button>
- <el-button type="primary" @click="customAdd" :loading="loading">纭� 瀹�</el-button>
- </span>
- </el-dialog>
- <el-dialog title="閫夋嫨鐢ㄦ埛" :visible.sync="selectUserDia" width="70%">
- <div class="search" style="height: 35px; margin-bottom: 9px;">
- <div class="search_thing">
- <div class="search_label">鐢ㄦ埛鍚嶏細</div>
- <div class="search_input"><el-input size="small" placeholder="璇疯緭鍏�" clearable
- v-model="componentData2.entity.name" @keyup.enter.native="$refs.ValueTable2.selectList()"></el-input></div>
- </div>
- </div>
-<!-- <div class="body" style="height: 60vh;" v-if="selectUserDia">-->
-<!-- <ValueTable ref="ValueTable2" :url="$api.user.selectUserList" :componentData="componentData2" />-->
-<!-- </div>-->
- <span slot="footer" class="dialog-footer">
- <el-button @click="selectUserDia = false">鍙� 娑�</el-button>
- <el-button type="primary" @click="selectUser">纭� 瀹�</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 ValueTable from '@/components/Table/value-table.vue'
+import limsTable from "@/components/Table/lims-table.vue";
+import {
+ addCustom,
+ selectCustomPageList,
+ upCustom,
+} from "@/api/system/customer";
export default {
components: {
- ValueTable
+ limsTable,
},
data() {
return {
queryParams: {
- company: ''
+ company: "",
},
- componentData: {
- entity: {
- company: null,
- orderBy: {
- field: 'id',
- order: 'asc'
- }
+ 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" },
+ {
+ dataType: "action",
+ fixed: "right",
+ label: "鎿嶄綔",
+ operation: [
+ {
+ name: "缂栬緫",
+ type: "text",
+ clickFun: (row) => {
+ this.openFormDia("edit", row);
+ },
+ },
+ ],
},
- isIndex: true,
- showSelect: false,
- select: false,
- do: [{
- font: '濮旀墭璁板綍',
- type: 'text',
- method: 'entrust'
- }, {
- font: '鍗忚璁板綍',
- type: 'text',
- method: 'protocol'
- },{
- id: 'update',
- font: '缂栬緫',
- type: 'text',
- method: 'doDiy',
- field:[]
- },{
- id: 'delete',
- font: '鍒犻櫎',
- type: 'text',
- method: 'doDiy'
- }],
- tagField: {
- state: {
- select: [{
- value: 1,
- type: 'success',
- label: '鍚敤'
- }, {
- value: 0,
- type: 'danger',
- label: '鍋滅敤'
- }]
- }
- },
- selectField: {
- state: {
- select: [{
- value: 1,
- type: 'success',
- label: '鍚敤'
- }, {
- value: 0,
- type: 'danger',
- label: '鍋滅敤'
- }]
- }
- },
- requiredAdd: [],
- requiredUp: ['company','address','code2','companyEn','addressEn','num']
+ ],
+ page: {
+ total: 0,
+ size: 10,
+ current: 0,
},
- entityCopy: {},
- upIndex: 0,
+ tableLoading: false,
+ // 缂栬緫瀹㈡埛寮规
+ 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" }],
},
- selectUserDia: false,
loading: false,
- componentData2: {
- entity: {
- isCustom: 0,
- orderBy: {
- field: 'id',
- order: 'asc'
- }
- },
- isIndex: true,
- showSelect: true,
- select: false,
- do: [],
- tagField: {
- state: {
- select: [{
- value: 1,
- type: 'success',
- label: '鍚敤'
- }, {
- value: 0,
- type: 'danger',
- label: '鍋滅敤'
- }]
- }
- },
- selectField: {},
- needSort: ['company'],
- }
- }
+ //
+ };
},
mounted() {
- this.entityCopy = this.HaveJson(this.componentData.entity)
- this.getPower()
+ this.getList();
},
methods: {
- refreshTable() {
- this.$refs['ValueTable'].selectList()
+ // 鏌ヨ瀹㈡埛鍒楄〃
+ 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;
+ });
},
+ // 閲嶇疆table
refresh() {
- this.componentData.entity = this.HaveJson(this.entityCopy)
- this.upIndex++
+ this.queryParams.company = "";
+ this.getList();
+ },
+ openFormDia(type, row) {
+ this.addDia = true;
+ this.formTitle = type === "add" ? "鏂板瀹㈡埛" : "缂栬緫瀹㈡埛";
+ this.operationType = type;
},
customAdd() {
- if (this.user.company == '' || this.user.company == null) {
- this.$message.error('璇峰～鍐欏鎴峰崟浣�')
- return
- }
- if (this.user.address == '' || this.user.address == null) {
- this.$message.error('璇峰～鍐欏崟浣嶅湴鍧�')
- return
- }
- if (this.user.companyEn == '' || this.user.companyEn == null) {
- this.$message.error('璇峰～鍐欒嫳鏂囧鎴峰崟浣�')
- return
- }
- if (this.user.addressEn == '' || this.user.addressEn == null) {
- this.$message.error('璇峰～鍐欒嫳鏂囧崟浣嶅湴鍧�')
- return
- }
- if (this.user.code2 == '' || this.user.code2 == null) {
- this.$message.error('璇峰～鍐欏鎴风紪鍙�')
- return
- }
- if (this.user.code2 == '' || this.user.code2 == null) {
- this.$message.error('璇峰～鍐欏姞鎬ラ搴�')
- return
- }
- this.loading = true
- this.$axios.post(this.$api.user.addCustom, this.user, {
- headers: {
- 'Content-Type': 'application/json'
+ this.$refs["userForm"].validate((valid) => {
+ if (valid) {
+ 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) => {
+ this.loading = false;
+ if (res.code !== 200) return;
+ this.$message.success("淇敼鎴愬姛");
+ this.getList();
+ this.reset();
+ })
+ .catch((err) => {
+ this.loading = false;
+ });
+ }
}
- }).then(res => {
- if (res.code == 201) return
- this.$message.success('娣诲姞鎴愬姛')
- this.refreshTable()
- this.loading = false
- this.addDia = false
- })
+ });
},
- // 鏉冮檺鍒嗛厤
- getPower() {
- let power = JSON.parse(sessionStorage.getItem('power'))
- let up = false
- let del = false
- let add = false
- for (var i = 0; i < power.length; i++) {
- if (power[i].menuMethod == 'delCustomById') {
- del = true
- }
- if (power[i].menuMethod == 'addCustom') {
- add = true
- }
- if (power[i].menuMethod == 'upCustom') {
- up = true
- }
- }
- if (!del) {
- this.componentData.do.splice(3, 1)
- }
- if (!up) {
- this.componentData.do.splice(2, 1)
- }
- this.addPower = add
+ reset() {
+ this.addDia = false;
+ this.resetForm("userForm");
},
- entrust(data) {
-
- },
- protocol(data) {
-
- },
- selectUser() {
- let selects = this.$refs.ValueTable2.multipleSelection
- if (selects.length == 0) {
- this.$message.error('鏈�夋嫨鏁版嵁')
- return
- }
- delete selects['orderBy']
- delete selects['updateUser']
- delete selects['updateTime']
- this.user = selects
- this.selectUserDia = false
- }
- }
-}
+ },
+};
</script>
<style scoped>
.search {
- height: 80px;
+ height: 46px;
display: flex;
justify-content: space-between;
}
--
Gitblit v1.9.3