bonus
/
devicesmgt
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化列表序号，分页时延续问题

This commit is contained in:
BianLzhaoMin 2024-06-03 11:10:25 +08:00
parent e7e8c6da07
commit b1b42b9a78
7 changed files with 136 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

235
sgzb-ui/src/components/TableModel/index.vue
View File

@ -3,6 +3,7 @@
<!-- 查询表单 -->
<FormModel
:formLabel="config.formLabel"
:routerParams="config.routerParams"
@queryList="queryList"
v-if="config.isFormShow"
>
@ -19,6 +20,10 @@
ref="tableRef"
select-on-indeterminate
@selection-change="handleSelectionChange"
v-loading="loading"
element-loading-text="数据正在加载，请稍后"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.6)"
>
<el-table-column
type="selection"
@ -27,6 +32,14 @@
:selectable="selectable"
v-if="config.isSelShow"
/>
<el-table-column
align="center"
label="序号"
type="index"
:index="
indexContinuation(pageParams.pageNum, pageParams.pageSize)
"
/>
<el-table-column
v-for="(item, v) in tableColumCheckProps"
:key="v"
@ -42,12 +55,18 @@
<slot :data="scope.row" :name="item.t_slot"></slot>
</template>
<template v-else>
{{ scope.row[item.t_props] || '-' }}
</template>
<!-- <template v-else>
{{
v === 0
? scope.$index + 1
? indexContinuation(
pageParams.pageNum,
pageParams.pageSize,
)
: scope.row[item.t_props] || '-'
}}
</template>
</template> -->
</template>
</el-table-column>
<el-table-column
@ -93,125 +112,125 @@
</template>
<script>
import FormModel from '../FormModel'
export default {
components: {
FormModel,
import FormModel from '../FormModel'
export default {
components: {
FormModel,
},
props: {
/* 列表请求接口 */
sendApi: {
type: Function,
default: () => {
return function () {}
},
},
props: {
/* 列表请求接口 */
sendApi: {
type: Function,
default: () => {
return function () {}
},
/* 查看详情需显示列表等操作 传入的参数 */
sendParams: {
type: Object,
default: () => {
return {}
},
/* 查看详情需显示列表等操作 传入的参数 */
sendParams: {
type: Object,
default: () => {
return {}
},
},
/* 表格复选框禁用状态 */
selectable: {
type: Function,
default: () => {
return true
},
},
/* 表格复选框禁用状态 */
selectable: {
type: Function,
default: () => {
return true
},
},
/* 列表 查询表单等配置项 */
config: {
type: Object,
default: () => {
return {}
},
/* 列表 查询表单等配置项 */
config: {
type: Object,
default: () => {
return {}
},
},
data() {
return {
total: 0,
tableList: [{ demo: 123 }],
/* 分页参数 */
pageParams: {
pageNum: 1,
pageSize: 10,
},
/* 操作列显示隐藏数据源 */
columCheckList: [],
},
data() {
return {
total: 0,
tableList: [{ demo: 123 }],
/* 分页参数 */
pageParams: {
pageNum: 1,
pageSize: 10,
},
/* 操作列显示隐藏数据源 */
columCheckList: [],
loading: false,
}
},
created() {
this.getList()
this.columCheckList = this.config.columnsList
this.columCheckList = this.columCheckList.map((e) => {
this.$set(e, 'checked', true)
return e
})
},
computed: {
/* 根据操作栏控制表头是否显示 */
tableColumCheckProps() {
return this.columCheckList.filter((e) => {
return e.checked != false
})
},
},
methods: {
/* form 查询组件触发的自定义事件 */
async queryList(val, reset) {
if (reset) {
this.pageParams.pageNum = 1
this.pageParams.pageSize = 10
}
this.pageParams = Object.assign(
val,
this.pageParams,
this.sendParams,
)
this.pageParams.beginTime = val.time ? val.time[0] : ''
this.pageParams.endTime = val.time ? val.time[1] : ''
this.getList()
},
/* 获取列表信息 */
async getList() {
this.pageParams = Object.assign(this.pageParams, this.sendParams)
this.loading = true
const res = await this.sendApi(this.pageParams)
this.loading = false
if (res.code == 200) {
this.tableList = res.rows || res.data.rows
this.total = res.total || res.data.total
}
},
created() {
this.getList()
this.columCheckList = this.config.columnsList
this.columCheckList = this.columCheckList.map((e) => {
this.$set(e, 'checked', true)
return e
})
/* 表格复选框事件 */
handleSelectionChange(row) {
this.$emit('getTableSelectionChange', row)
},
computed: {
/* 根据操作栏控制表头是否显示 */
tableColumCheckProps() {
return this.columCheckList.filter((e) => {
return e.checked != false
})
},
/* 清除表格的选中状态 */
clearSelType() {
this.$refs.tableRef.clearSelection()
},
methods: {
/* form 查询组件触发的自定义事件 */
async queryList(val, reset) {
if (reset) {
this.pageParams.pageNum = 1
this.pageParams.pageSize = 10
}
this.pageParams = Object.assign(
val,
this.pageParams,
this.sendParams,
)
this.pageParams.beginTime = val.time ? val.time[0] : ''
this.pageParams.endTime = val.time ? val.time[1] : ''
this.getList()
},
/* 获取列表信息 */
async getList() {
this.pageParams = Object.assign(
this.pageParams,
this.sendParams,
)
const res = await this.sendApi(this.pageParams)
if (res.code == 200) {
this.tableList = res.rows
this.total = res.total
}
},
/* 表格复选框事件 */
handleSelectionChange(row) {
this.$emit('getTableSelectionChange', row)
},
/* 清除表格的选中状态 */
clearSelType() {
this.$refs.tableRef.clearSelection()
},
},
}
},
}
</script>
<style>
.check-all {
margin-bottom: 5px;
cursor: pointer;
}
.check-all {
margin-bottom: 5px;
cursor: pointer;
}
.handel-text {
cursor: pointer;
}
.handel-text:hover {
text-decoration: underline;
color: #409eff;
}
.handel-text {
cursor: pointer;
}
.handel-text:hover {
text-decoration: underline;
color: #409eff;
}
</style>

2
sgzb-ui/src/views/scrapManage/Inventory/config.js
View File

@ -15,7 +15,7 @@ export const config = {
{ f_label: '创建时间', f_model: 'time', f_type: 'date' },
],
columnsList: [
{ t_width: '55px', t_props: '', t_label: '序号' },
// { t_width: '55px', t_props: '', t_label: '序号' },
{ t_props: '', t_label: '预报废单号' },
{ t_props: '', t_label: '机具类型' },
{ t_props: '', t_label: '任务创建人' },

2
sgzb-ui/src/views/scrapManage/forecastWaste/auditing/config.js
View File

@ -37,7 +37,7 @@ export const config = {
{ f_label: '创建时间', f_model: 'time', f_type: 'date' },
],
columnsList: [
{ t_width: '55px', t_props: '', t_label: '序号' },
// { t_width: '55px', t_props: '', t_label: '序号' },
{ t_width: '', t_props: 'scrapNum', t_label: '预报废单号', },
{ t_width: '', t_props: '', t_label: '报废来源', t_slot: 'source', },
{ t_width: '', t_props: 'repairNum', t_label: '单号', t_slot: 'code', },

4
sgzb-ui/src/views/scrapManage/forecastWaste/auditingReturn/config.js
View File

@ -12,7 +12,7 @@ export const config = {
{ f_label: '规格型号', f_model: 'backPro', f_type: 'sel', f_selList: [] },
],
columnsList: [
{ t_width: '55px', t_props: '', t_label: '序号' },
// { t_width: '55px', t_props: '', t_label: '序号' },
{ t_width: '', t_props: 'demo', t_label: '类型名称' },
{ t_width: '', t_props: '', t_label: '规格型号' },
{ t_width: '', t_props: '', t_label: '数量' },
@ -44,7 +44,7 @@ export const dialogConfig = {
],
columnsList: [
{ t_width: '55px', t_props: '', t_label: '序号' },
// { t_width: '55px', t_props: '', t_label: '序号' },
{ t_width: '', t_props: 'demo', t_label: '设备类型' },
{ t_width: '', t_props: '', t_label: '规格型号' },
{ t_width: '', t_props: '', t_label: '设备编码' },

4
sgzb-ui/src/views/scrapManage/forecastWaste/listing/config.js
View File

@ -40,7 +40,7 @@ export const config = {
},
],
columnsList: [
{ t_width: '55px', t_props: '', t_label: '序号' },
// { t_width: '55px', t_props: '', t_label: '序号' },
{ t_width: '', t_props: 'scrapNum', t_label: '报废单号' },
{ t_width: '', t_props: '', t_label: '报废来源', t_slot: 'source' },
{ t_width: '', t_props: 'repairNum', t_label: '预报废单号' },
@ -74,7 +74,7 @@ export const dialogConfig = {
],
columnsList: [
{ t_width: '55px', t_props: '', t_label: '序号' },
// { t_width: '55px', t_props: '', t_label: '序号' },
{ t_width: '', t_props: 'machineTypeName', t_label: '设备类型' },
{ t_width: '', t_props: 'specificationType', t_label: '规格型号' },
{ t_width: '', t_props: 'maCode', t_label: '设备编码' },

2
sgzb-ui/src/views/scrapManage/scrap/disposition/config.js
View File

@ -43,7 +43,7 @@ export const dialogConfig = {
{ f_label: '类型名称', f_model: 'keywords', f_type: 'ipt' },
],
columnsList: [
{ t_width: '55px', t_props: '', t_label: '序号' },
// { t_width: '55px', t_props: '', t_label: '序号' },
{ t_width: '', t_props: 'machineTypeName', t_label: '设备类型' },
{ t_width: '', t_props: 'specificationType', t_label: '规格型号' },
{ t_width: '', t_props: 'maCode', t_label: '设备编码' },

4
sgzb-ui/src/views/scrapManage/scrap/scrapAuditing/config.js
View File

@ -15,7 +15,7 @@ export const config = {
{ f_label: '创建时间', f_model: 'time', f_type: 'date' },
],
columnsList: [
{ t_width: '55px', t_props: '', t_label: '序号' },
// { t_width: '55px', t_props: '', t_label: '序号' },
{ t_props: 'scrapNum', t_label: '报废单号' },
{ t_props: 'scrapSource', t_label: '报废来源', t_slot: 'source' },
{ t_props: 'repairNum', t_label: '预报废单号' },
@ -43,7 +43,7 @@ export const dialogConfig = {
{ f_label: '类型名称', f_model: 'keywords', f_type: 'ipt' },
],
columnsList: [
{ t_width: '55px', t_props: '', t_label: '序号' },
// { t_width: '55px', t_props: '', t_label: '序号' },
{ t_width: '', t_props: 'machineTypeName', t_label: '设备类型' },
{ t_width: '', t_props: 'specificationType', t_label: '规格型号' },
{ t_width: '', t_props: 'maCode', t_label: '设备编码' },