XiaoMo/x-php-Admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

no message

Browse Source
This commit is contained in:
小陌 2023-12-25 19:03:23 +08:00
parent ffd3b2325d
commit 4ccef9dc20
2 changed files with 252 additions and 218 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

146
src/components/xTableSelect/index.vue
View File

@ -10,9 +10,6 @@
</div> </div>
<el-table ref="table" :data="tableData" :height="245" :highlight-current-row="!multiple" @row-click="click" @select="select" @select-all="selectAll"> <el-table ref="table" :data="tableData" :height="245" :highlight-current-row="!multiple" @row-click="click" @select="select" @select-all="selectAll">
<el-table-column v-if="multiple" type="selection" width="55"></el-table-column> <el-table-column v-if="multiple" type="selection" width="55"></el-table-column>
<el-table-column v-else type="index" width="55">
<template #default="scope"><span>{{scope.$index+(currentPage - 1) * limit + 1}}</span></template>
</el-table-column>
<slot></slot> <slot></slot>
</el-table> </el-table>
<div class="x-table-select__page"> <div class="x-table-select__page">
@ -24,13 +21,13 @@
</template> </template>
<script> <script>
import config from "@/config/tableSelect"; import config from "@/config/tableSelect";
export default { export default {
props: { props: {
modelValue: null, modelValue: null,
api: { type: String, default: '' }, api: { type: String, default: '' },
params: { type: Object, default: () => {} }, params: { type: Object, default: () => { } },
form: { type: Array, default: () => [] }, form: { type: Array, default: () => [] },
placeholder: { type: String, default: "请选择" }, placeholder: { type: String, default: "请选择" },
size: { type: String, default: "default" }, size: { type: String, default: "default" },
@ -41,7 +38,7 @@
collapseTagsTooltip: { type: Boolean, default: false }, collapseTagsTooltip: { type: Boolean, default: false },
disabled: { type: Boolean, default: false }, disabled: { type: Boolean, default: false },
mode: { type: String, default: "popover" }, mode: { type: String, default: "popover" },
props: { type: Object, default: () => {} } props: { type: Object, default: () => { } }
}, },
data() { data() {
return { return {
@ -57,17 +54,20 @@
value: config.props.value, value: config.props.value,
page: config.request.page, page: config.request.page,
limit: config.request.limit, limit: config.request.limit,
keyword: config.request.keyword keyword: config.request.keyword,
field: {}
}, },
formData: {} formData: {},
skey: '',
dkey: '',
} }
}, },
computed: { computed: {
}, },
watch: { watch: {
modelValue:{ modelValue: {
handler(){ handler() {
this.defaultValue = this.modelValue this.defaultValue = this.modelValue
this.autoCurrentLabel() this.autoCurrentLabel()
}, },
@ -77,22 +77,37 @@
mounted() { mounted() {
this.defaultProps = Object.assign(this.defaultProps, this.props); this.defaultProps = Object.assign(this.defaultProps, this.props);
this.defaultValue = this.modelValue this.defaultValue = this.modelValue
this.skey = this.defaultProps.value;
if (Object.keys(this.defaultProps.field).length === 0) {
this.defaultProps.field = {
[this.defaultProps.value]: this.defaultProps.value,
[this.defaultProps.label]: this.defaultProps.label,
}
}
for (let key in this.defaultProps.field) {
if (key == this.skey) {
this.dkey = this.defaultProps.field[key];
break;
}
}
this.autoCurrentLabel() this.autoCurrentLabel()
}, },
methods: { methods: {
//表格显示隐藏回调 //表格显示隐藏回调
visibleChange(visible){ visibleChange(visible) {
if(visible){ if (visible) {
this.currentPage = 1 this.currentPage = 1
this.keyword = null this.keyword = null
this.formData = {} this.formData = {}
this.getData() this.getData()
}else{ } else {
this.autoCurrentLabel() this.autoCurrentLabel()
} }
}, },
//获取表格数据 //获取表格数据
async getData(){ async getData() {
this.loading = true; this.loading = true;
var reqData = { var reqData = {
[this.defaultProps.page]: this.currentPage, [this.defaultProps.page]: this.currentPage,
@ -100,7 +115,7 @@
[this.defaultProps.keyword]: this.keyword [this.defaultProps.keyword]: this.keyword
} }
Object.assign(reqData, this.params, this.formData) Object.assign(reqData, this.params, this.formData)
var res = await this.$http.get(this.api, reqData, {cacheparameters:1}); var res = await this.$http.get(this.api, reqData, { cacheparameters: 1 });
var parseData = config.parseData(res) var parseData = config.parseData(res)
this.tableData = parseData.rows; this.tableData = parseData.rows;
this.total = parseData.total; this.total = parseData.total;
@ -108,60 +123,60 @@
//表格默认赋值 //表格默认赋值
this.$nextTick(() => { this.$nextTick(() => {
if(typeof this.defaultValue === 'undefined'){ if (typeof this.defaultValue === 'undefined') {
this.defaultValue = this.multiple ? [] : {}; this.defaultValue = this.multiple ? [] : {};
} }
if(this.multiple){ if (this.multiple) {
this.defaultValue.forEach(row => { this.defaultValue.forEach(row => {
var setrow = this.tableData.filter(item => item[this.defaultProps.value]===row[this.defaultProps.value] ) var setrow = this.tableData.filter(item => item[this.dkey] === row[this.skey])
if(setrow.length > 0){ if (setrow.length > 0) {
this.$refs.table.toggleRowSelection(setrow[0], true); this.$refs.table.toggleRowSelection(setrow[0], true);
} }
}) })
}else{ } else {
var setrow = this.tableData.filter(item => item[this.defaultProps.value]===this.defaultValue[this.defaultProps.value] ) var setrow = this.tableData.filter(item => item[this.dkey] === this.defaultValue[this.skey])
this.$refs.table.setCurrentRow(setrow[0]); this.$refs.table.setCurrentRow(setrow[0]);
} }
this.$refs.table.setScrollTop(0) this.$refs.table.setScrollTop(0)
}) })
}, },
//插糟表单提交 //插糟表单提交
formSubmit(){ formSubmit() {
this.currentPage = 1 this.currentPage = 1
this.keyword = null this.keyword = null
this.getData() this.getData()
}, },
//分页刷新表格 //分页刷新表格
reload(){ reload() {
this.getData() this.getData()
}, },
//自动模拟options赋值 //自动模拟options赋值
autoCurrentLabel(){ autoCurrentLabel() {
this.$nextTick(() => { this.$nextTick(() => {
if(this.multiple){ if (this.multiple) {
this.$refs.select.selected.forEach(item => { this.$refs.select.selected.forEach(item => {
item.currentLabel = item.value[this.defaultProps.label] item.currentLabel = item.value[this.defaultProps.label]
}) })
return ; return;
} }
this.$refs.select.selectedLabel = typeof this.defaultValue === 'object' ? this.defaultValue[this.defaultProps.label] : this.defaultValue this.$refs.select.selectedLabel = typeof this.defaultValue === 'object' ? this.defaultValue[this.defaultProps.label] : this.defaultValue
}) })
}, },
//表格勾选事件 //表格勾选事件
select(rows, row){ select(rows, row) {
var isSelect = rows.length && rows.indexOf(row) !== -1 var isSelect = rows.length && rows.indexOf(row) !== -1
if(isSelect){ if (isSelect) {
var data = {}; var data = {};
for (const key in this.defaultProps) { for (let key in this.defaultProps.field) {
if (Object.prototype.hasOwnProperty.call(row, this.defaultProps[key])) { if (Object.prototype.hasOwnProperty.call(row, this.defaultProps.field[key])) {
data[this.defaultProps[key]] = row[this.defaultProps[key]] data[key] = row[this.defaultProps.field[key]]
} }
} }
this.defaultValue.push(data) this.defaultValue.push(data)
}else{ } else {
this.defaultValue.splice( this.defaultValue.splice(
this.defaultValue.findIndex(item => item[this.defaultProps.value] == row[this.defaultProps.value]), this.defaultValue.findIndex(item => item[this.dkey] == row[this.skey]),
1 1
); );
} }
@ -170,21 +185,21 @@
this.$emit('change', this.defaultValue); this.$emit('change', this.defaultValue);
}, },
//表格全选事件 //表格全选事件
selectAll(rows){ selectAll(rows) {
var isAllSelect = rows.length > 0 var isAllSelect = rows.length > 0
if(isAllSelect){ if (isAllSelect) {
rows.forEach(row => { rows.forEach(row => {
var isHas = this.defaultValue.find(item => item[this.defaultProps.value] == row[this.defaultProps.value]) var isHas = this.defaultValue.find(item => item[this.skey] == row[this.dkey])
if(!isHas){ if (!isHas) {
this.defaultValue.push(row) this.defaultValue.push(row)
} }
}) })
}else{ } else {
this.tableData.forEach(row => { this.tableData.forEach(row => {
var isHas = this.defaultValue.find(item => item[this.defaultProps.value] == row[this.defaultProps.value]) var isHas = this.defaultValue.find(item => item[this.skey] == row[this.dkey])
if(isHas){ if (isHas) {
this.defaultValue.splice( this.defaultValue.splice(
this.defaultValue.findIndex(item => item[this.defaultProps.value] == row[this.defaultProps.value]), this.defaultValue.findIndex(item => item[this.skey] == row[this.dkey]),
1 1
) )
} }
@ -194,15 +209,25 @@
this.$emit('update:modelValue', this.defaultValue); this.$emit('update:modelValue', this.defaultValue);
this.$emit('change', this.defaultValue); this.$emit('change', this.defaultValue);
}, },
click(row){ click(row) {
if(this.multiple){ if (this.multiple) {
//处理多选点击行 //处理多选点击行
}else{ } else {
for (const key in this.defaultProps) {
if (Object.prototype.hasOwnProperty.call(row, this.defaultProps[key])) { if (this.defaultProps.field) {
this.defaultValue[this.defaultProps[key]] = row[this.defaultProps[key]] if (typeof this.defaultValue === 'object') {
for (let key in this.defaultProps.field) {
if (Object.prototype.hasOwnProperty.call(row, this.defaultProps.field[key])) {
this.defaultValue[key] = row[this.defaultProps.field[key]]
} }
} }
} else {
this.defaultValue = row[this.dkey];
}
} else {
this.defaultValue = row;
}
this.$refs.select.blur() this.$refs.select.blur()
this.autoCurrentLabel() this.autoCurrentLabel()
this.$emit('update:modelValue', this.defaultValue); this.$emit('update:modelValue', this.defaultValue);
@ -210,21 +235,21 @@
} }
}, },
//tags删除后回调 //tags删除后回调
removeTag(tag){ removeTag(tag) {
var row = this.findRowByKey(tag[this.defaultProps.value]) var row = this.findRowByKey(tag[this.defaultProps.value])
this.$refs.table.toggleRowSelection(row, false); this.$refs.table.toggleRowSelection(row, false);
this.$emit('update:modelValue', this.defaultValue); this.$emit('update:modelValue', this.defaultValue);
}, },
//清空后的回调 //清空后的回调
clear(){ clear() {
this.$emit('update:modelValue', this.defaultValue); this.$emit('update:modelValue', this.defaultValue);
}, },
// 关键值查询表格数据行 // 关键值查询表格数据行
findRowByKey (value) { findRowByKey(value) {
return this.tableData.find(item => item[this.defaultProps.value] === value) return this.tableData.find(item => item[this.defaultProps.value] === value)
}, },
filterMethod(keyword){ filterMethod(keyword) {
if(!keyword){ if (!keyword) {
this.keyword = null; this.keyword = null;
return false; return false;
} }
@ -232,18 +257,23 @@
this.getData() this.getData()
}, },
// 触发select隐藏 // 触发select隐藏
blur(){ blur() {
this.$refs.select.blur(); this.$refs.select.blur();
}, },
// 触发select显示 // 触发select显示
focus(){ focus() {
this.$refs.select.focus(); this.$refs.select.focus();
} }
} }
} }
</script> </script>
<style scoped> <style scoped>
.x-table-select__table {padding:12px;} .x-table-select__table {
.x-table-select__page {padding-top: 12px;} padding: 12px;
}
.x-table-select__page {
padding-top: 12px;
}
</style> </style>

10
src/config/tableSelect.js
View File

@ -1,7 +1,7 @@
//表格选择器配置 //表格选择器配置
export default { export default {
limit: 20, //表格每一页条数 limit: 20, //表格每一页条数
parseData: function(res) { parseData: function (res) {
return { return {
data: res.data, data: res.data,
rows: res.data.data, //分析行数据字段结构 rows: res.data.data, //分析行数据字段结构
@ -16,7 +16,11 @@ export default {
keyword: 'keyword' //规定搜索字段 keyword: 'keyword' //规定搜索字段
}, },
props: { props: {
label: 'label', // 映射label显示字段 key: null,
value: 'value', // 映射value值字段 label: 'id', // 映射label显示字段
value: 'name', // 映射value值字段
field: {
}
} }
} }