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

460
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,226 +21,259 @@
</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" },
clearable: { type: Boolean, default: false }, clearable: { type: Boolean, default: false },
multiple: { type: Boolean, default: false }, multiple: { type: Boolean, default: false },
filterable: { type: Boolean, default: false }, filterable: { type: Boolean, default: false },
collapseTags: { type: Boolean, default: false }, collapseTags: { type: Boolean, default: false },
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 {
loading: false, loading: false,
keyword: null, keyword: null,
defaultValue: [], defaultValue: [],
tableData: [], tableData: [],
limit: config.limit, limit: config.limit,
total: 0, total: 0,
currentPage: 1, currentPage: 1,
defaultProps: { defaultProps: {
label: config.props.label, label: config.props.label,
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: '',
computed: { dkey: '',
}
},
computed: {
}, },
watch: { watch: {
modelValue:{ modelValue: {
handler(){ handler() {
this.defaultValue = this.modelValue this.defaultValue = this.modelValue
this.autoCurrentLabel()
},
deep: true
}
},
mounted() {
this.defaultProps = Object.assign(this.defaultProps, this.props);
this.defaultValue = this.modelValue
this.autoCurrentLabel()
},
methods: {
//表格显示隐藏回调
visibleChange(visible){
if(visible){
this.currentPage = 1
this.keyword = null
this.formData = {}
this.getData()
}else{
this.autoCurrentLabel()
}
},
//获取表格数据
async getData(){
this.loading = true;
var reqData = {
[this.defaultProps.page]: this.currentPage,
[this.defaultProps.limit]: this.limit,
[this.defaultProps.keyword]: this.keyword
}
Object.assign(reqData, this.params, this.formData)
var res = await this.$http.get(this.api, reqData, {cacheparameters:1});
var parseData = config.parseData(res)
this.tableData = parseData.rows;
this.total = parseData.total;
this.loading = false;
//表格默认赋值
this.$nextTick(() => {
if(typeof this.defaultValue === 'undefined'){
this.defaultValue = this.multiple ? [] : {};
}
if(this.multiple){
this.defaultValue.forEach(row => {
var setrow = this.tableData.filter(item => item[this.defaultProps.value]===row[this.defaultProps.value] )
if(setrow.length > 0){
this.$refs.table.toggleRowSelection(setrow[0], true);
}
})
}else{
var setrow = this.tableData.filter(item => item[this.defaultProps.value]===this.defaultValue[this.defaultProps.value] )
this.$refs.table.setCurrentRow(setrow[0]);
}
this.$refs.table.setScrollTop(0)
})
},
//插糟表单提交
formSubmit(){
this.currentPage = 1
this.keyword = null
this.getData()
},
//分页刷新表格
reload(){
this.getData()
},
//自动模拟options赋值
autoCurrentLabel(){
this.$nextTick(() => {
if(this.multiple){
this.$refs.select.selected.forEach(item => {
item.currentLabel = item.value[this.defaultProps.label]
})
return ;
}
this.$refs.select.selectedLabel = typeof this.defaultValue === 'object' ? this.defaultValue[this.defaultProps.label] : this.defaultValue
})
},
//表格勾选事件
select(rows, row){
var isSelect = rows.length && rows.indexOf(row) !== -1
if(isSelect){
var data = {};
for (const key in this.defaultProps) {
if (Object.prototype.hasOwnProperty.call(row, this.defaultProps[key])) {
data[this.defaultProps[key]] = row[this.defaultProps[key]]
}
}
this.defaultValue.push(data)
}else{
this.defaultValue.splice(
this.defaultValue.findIndex(item => item[this.defaultProps.value] == row[this.defaultProps.value]),
1
);
}
this.autoCurrentLabel() this.autoCurrentLabel()
this.$emit('update:modelValue', this.defaultValue);
this.$emit('change', this.defaultValue);
}, },
//表格全选事件 deep: true
selectAll(rows){ }
var isAllSelect = rows.length > 0 },
if(isAllSelect){ mounted() {
rows.forEach(row => { this.defaultProps = Object.assign(this.defaultProps, this.props);
var isHas = this.defaultValue.find(item => item[this.defaultProps.value] == row[this.defaultProps.value]) this.defaultValue = this.modelValue
if(!isHas){ this.skey = this.defaultProps.value;
this.defaultValue.push(row)
} if (Object.keys(this.defaultProps.field).length === 0) {
}) this.defaultProps.field = {
}else{ [this.defaultProps.value]: this.defaultProps.value,
this.tableData.forEach(row => { [this.defaultProps.label]: this.defaultProps.label,
var isHas = this.defaultValue.find(item => item[this.defaultProps.value] == row[this.defaultProps.value])
if(isHas){
this.defaultValue.splice(
this.defaultValue.findIndex(item => item[this.defaultProps.value] == row[this.defaultProps.value]),
1
)
}
})
}
this.autoCurrentLabel()
this.$emit('update:modelValue', this.defaultValue);
this.$emit('change', this.defaultValue);
},
click(row){
if(this.multiple){
//处理多选点击行
}else{
for (const key in this.defaultProps) {
if (Object.prototype.hasOwnProperty.call(row, this.defaultProps[key])) {
this.defaultValue[this.defaultProps[key]] = row[this.defaultProps[key]]
}
}
this.$refs.select.blur()
this.autoCurrentLabel()
this.$emit('update:modelValue', this.defaultValue);
this.$emit('change', this.defaultValue);
}
},
//tags删除后回调
removeTag(tag){
var row = this.findRowByKey(tag[this.defaultProps.value])
this.$refs.table.toggleRowSelection(row, false);
this.$emit('update:modelValue', this.defaultValue);
},
//清空后的回调
clear(){
this.$emit('update:modelValue', this.defaultValue);
},
// 关键值查询表格数据行
findRowByKey (value) {
return this.tableData.find(item => item[this.defaultProps.value] === value)
},
filterMethod(keyword){
if(!keyword){
this.keyword = null;
return false;
}
this.keyword = keyword;
this.getData()
},
// 触发select隐藏
blur(){
this.$refs.select.blur();
},
// 触发select显示
focus(){
this.$refs.select.focus();
} }
} }
for (let key in this.defaultProps.field) {
if (key == this.skey) {
this.dkey = this.defaultProps.field[key];
break;
}
}
this.autoCurrentLabel()
},
methods: {
//表格显示隐藏回调
visibleChange(visible) {
if (visible) {
this.currentPage = 1
this.keyword = null
this.formData = {}
this.getData()
} else {
this.autoCurrentLabel()
}
},
//获取表格数据
async getData() {
this.loading = true;
var reqData = {
[this.defaultProps.page]: this.currentPage,
[this.defaultProps.limit]: this.limit,
[this.defaultProps.keyword]: this.keyword
}
Object.assign(reqData, this.params, this.formData)
var res = await this.$http.get(this.api, reqData, { cacheparameters: 1 });
var parseData = config.parseData(res)
this.tableData = parseData.rows;
this.total = parseData.total;
this.loading = false;
//表格默认赋值
this.$nextTick(() => {
if (typeof this.defaultValue === 'undefined') {
this.defaultValue = this.multiple ? [] : {};
}
if (this.multiple) {
this.defaultValue.forEach(row => {
var setrow = this.tableData.filter(item => item[this.dkey] === row[this.skey])
if (setrow.length > 0) {
this.$refs.table.toggleRowSelection(setrow[0], true);
}
})
} else {
var setrow = this.tableData.filter(item => item[this.dkey] === this.defaultValue[this.skey])
this.$refs.table.setCurrentRow(setrow[0]);
}
this.$refs.table.setScrollTop(0)
})
},
//插糟表单提交
formSubmit() {
this.currentPage = 1
this.keyword = null
this.getData()
},
//分页刷新表格
reload() {
this.getData()
},
//自动模拟options赋值
autoCurrentLabel() {
this.$nextTick(() => {
if (this.multiple) {
this.$refs.select.selected.forEach(item => {
item.currentLabel = item.value[this.defaultProps.label]
})
return;
}
this.$refs.select.selectedLabel = typeof this.defaultValue === 'object' ? this.defaultValue[this.defaultProps.label] : this.defaultValue
})
},
//表格勾选事件
select(rows, row) {
var isSelect = rows.length && rows.indexOf(row) !== -1
if (isSelect) {
var data = {};
for (let key in this.defaultProps.field) {
if (Object.prototype.hasOwnProperty.call(row, this.defaultProps.field[key])) {
data[key] = row[this.defaultProps.field[key]]
}
}
this.defaultValue.push(data)
} else {
this.defaultValue.splice(
this.defaultValue.findIndex(item => item[this.dkey] == row[this.skey]),
1
);
}
this.autoCurrentLabel()
this.$emit('update:modelValue', this.defaultValue);
this.$emit('change', this.defaultValue);
},
//表格全选事件
selectAll(rows) {
var isAllSelect = rows.length > 0
if (isAllSelect) {
rows.forEach(row => {
var isHas = this.defaultValue.find(item => item[this.skey] == row[this.dkey])
if (!isHas) {
this.defaultValue.push(row)
}
})
} else {
this.tableData.forEach(row => {
var isHas = this.defaultValue.find(item => item[this.skey] == row[this.dkey])
if (isHas) {
this.defaultValue.splice(
this.defaultValue.findIndex(item => item[this.skey] == row[this.dkey]),
1
)
}
})
}
this.autoCurrentLabel()
this.$emit('update:modelValue', this.defaultValue);
this.$emit('change', this.defaultValue);
},
click(row) {
if (this.multiple) {
//处理多选点击行
} else {
if (this.defaultProps.field) {
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.autoCurrentLabel()
this.$emit('update:modelValue', this.defaultValue);
this.$emit('change', this.defaultValue);
}
},
//tags删除后回调
removeTag(tag) {
var row = this.findRowByKey(tag[this.defaultProps.value])
this.$refs.table.toggleRowSelection(row, false);
this.$emit('update:modelValue', this.defaultValue);
},
//清空后的回调
clear() {
this.$emit('update:modelValue', this.defaultValue);
},
// 关键值查询表格数据行
findRowByKey(value) {
return this.tableData.find(item => item[this.defaultProps.value] === value)
},
filterMethod(keyword) {
if (!keyword) {
this.keyword = null;
return false;
}
this.keyword = keyword;
this.getData()
},
// 触发select隐藏
blur() {
this.$refs.select.blur();
},
// 触发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: {
}
} }
} }