parent
b8ea5d89d7
commit
48f2c3a403
@ -0,0 +1,316 @@
|
||||
<template>
|
||||
<div>
|
||||
<vxe-modal
|
||||
:z-index="zIndex"
|
||||
:value="isShow"
|
||||
show-footer
|
||||
title="学校选择"
|
||||
show-confirm-button
|
||||
:width="defaultModalSize.width"
|
||||
:height="defaultModalSize.height"
|
||||
esc-closable
|
||||
transfer
|
||||
:fullscreen="$store.getters.device === 'mobile'"
|
||||
@input="e => $emit('update:isShow',e)"
|
||||
>
|
||||
<section>
|
||||
<div class="select-panel">
|
||||
<el-input style="width: 120px;" v-model="select['filter[1][value]']" placeholder="学校名称.." size="small"></el-input>
|
||||
<el-select style="width: 100px;" clearable v-model="select['filter[0][value]']" placeholder="区域.." size="small">
|
||||
<el-option v-for="item in area" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
<el-input style="width: 120px;" v-model="select['filter[2][value]']" placeholder="学校星级.." size="small"></el-input>
|
||||
|
||||
<el-button
|
||||
icon="el-icon-search"
|
||||
type="primary"
|
||||
plain
|
||||
size="small"
|
||||
@click="getList(true)"
|
||||
>搜索</el-button
|
||||
>
|
||||
</div>
|
||||
|
||||
<vxe-table
|
||||
ref="table"
|
||||
stripe
|
||||
style="margin-top: 10px"
|
||||
:loading="loading"
|
||||
:max-height="tableHeight"
|
||||
keep-source
|
||||
show-overflow
|
||||
:row-config="{ isCurrent: true, isHover: true, keyField: 'id' }"
|
||||
:column-config="{ resizable: true }"
|
||||
:export-config="{}"
|
||||
:edit-config="{}"
|
||||
:checkbox-config="{ trigger: 'row', labelField: 'name', highlight: true, range: true, reserve: true }"
|
||||
:align="allAlign"
|
||||
:data="tableData"
|
||||
@checkbox-change="checkboxChange"
|
||||
@checkbox-all="checkboxAll"
|
||||
@checkbox-range-end="checkboxRangeEnd"
|
||||
>
|
||||
<vxe-column type="checkbox" width="260" header-align="center" title="学校名称" />
|
||||
|
||||
<vxe-column
|
||||
align="center"
|
||||
field="area_id"
|
||||
width="180"
|
||||
title="区域"
|
||||
:edit-render="{
|
||||
name: 'VxeSelect',
|
||||
options: area,
|
||||
props: { multiple: false },
|
||||
optionProps: { value: 'id', label: 'name' },
|
||||
}"
|
||||
/>
|
||||
|
||||
<vxe-column
|
||||
align="center"
|
||||
field="code"
|
||||
width="160"
|
||||
title="学校代码"
|
||||
:edit-render="{ name: 'input', attrs: { type: 'text' } }"
|
||||
/>
|
||||
|
||||
<vxe-column
|
||||
align="center"
|
||||
field="star"
|
||||
width="160"
|
||||
title="星级"
|
||||
:edit-render="{ name: 'input', attrs: { type: 'text' } }"
|
||||
/>
|
||||
|
||||
<vxe-column
|
||||
header-align="center"
|
||||
field="address"
|
||||
width="160"
|
||||
title="地址"
|
||||
:edit-render="{ name: 'input', attrs: { type: 'text' } }"
|
||||
/>
|
||||
|
||||
<vxe-column
|
||||
align="center"
|
||||
field="nature"
|
||||
width="180"
|
||||
title="性质"
|
||||
:edit-render="{
|
||||
name: 'VxeSelect',
|
||||
options: [
|
||||
{ value: 1, label: '公办' },
|
||||
{ value: 2, label: '民办' },
|
||||
],
|
||||
props: { multiple: false },
|
||||
optionProps: { value: 'value', label: 'label' },
|
||||
}"
|
||||
/>
|
||||
|
||||
<vxe-column
|
||||
align="center"
|
||||
field="type"
|
||||
width="180"
|
||||
title="学校类型"
|
||||
/>
|
||||
|
||||
<vxe-column
|
||||
header-align="center"
|
||||
field="build_year"
|
||||
width="160"
|
||||
title="建校年份"
|
||||
:edit-render="{ name: 'input', attrs: { type: 'text' } }"
|
||||
/>
|
||||
</vxe-table>
|
||||
<el-pagination
|
||||
style="margin-top: 10px; display: flex; justify-content: flex-end"
|
||||
:current-page.sync="select.page"
|
||||
:page-sizes="[20, 30, 40, 50]"
|
||||
:page-size.sync="select.page_size"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
@size-change="
|
||||
(e) => {
|
||||
select.page_size = e;
|
||||
select.page = 1;
|
||||
getList();
|
||||
}
|
||||
"
|
||||
@current-change="
|
||||
(e) => {
|
||||
select.page = e;
|
||||
getList();
|
||||
}
|
||||
"
|
||||
/>
|
||||
</section>
|
||||
|
||||
<template #footer>
|
||||
<el-button type="primary" @click="submit">确认</el-button>
|
||||
</template>
|
||||
</vxe-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { PopupManager } from "element-ui/lib/utils/popup";
|
||||
import { defaultModalSize } from "@/settings";
|
||||
import { index as areaIndex } from "@/api/area/area";
|
||||
import { index } from "@/api/school/school";
|
||||
|
||||
export default {
|
||||
props: {
|
||||
isShow: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
zIndex: PopupManager.nextZIndex(),
|
||||
defaultModalSize,
|
||||
defaultValue: [],
|
||||
loading: false,
|
||||
tableHeight: 400,
|
||||
select: {
|
||||
page: 1,
|
||||
page_size: 20,
|
||||
keyword: "",
|
||||
show_relation: [],
|
||||
'filter[0][key]': 'area_id',
|
||||
'filter[0][op]': 'eq',
|
||||
'filter[0][value]': '',
|
||||
'filter[1][key]': 'name',
|
||||
'filter[1][op]': 'like',
|
||||
'filter[1][value]': '',
|
||||
'filter[2][key]': 'star',
|
||||
'filter[2][op]': 'like',
|
||||
'filter[2][value]': '',
|
||||
},
|
||||
total: 0,
|
||||
allAlign: null,
|
||||
tableData: [],
|
||||
|
||||
area: [],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
checkboxRangeEnd() {
|
||||
const $table = this.$refs['table']
|
||||
if ($table) {
|
||||
const selected = $table.getCheckboxRecords(true)
|
||||
if (selected.length === 0) {
|
||||
this.checkboxAll({ checked: false })
|
||||
} else {
|
||||
const abandonData = this.tableData.filter(i => selected.indexOf(j => j.id === i.id) === -1)
|
||||
abandonData.forEach(row => {
|
||||
this.spliceData(row)
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
spliceData(row) {
|
||||
let index = this.defaultValue.findIndex(i => i.id === row.id)
|
||||
if (index !== -1) {
|
||||
this.defaultValue.splice(index, 1)
|
||||
}
|
||||
},
|
||||
checkboxAll({ checked }) {
|
||||
if (!checked) {
|
||||
this.tableData.forEach(row => {
|
||||
this.spliceData(row)
|
||||
})
|
||||
}
|
||||
},
|
||||
checkboxChange({ checked, row }) {
|
||||
if (!checked) {
|
||||
this.spliceData(row)
|
||||
}
|
||||
},
|
||||
setDefaultValue(arr = []) {
|
||||
this.defaultValue = arr
|
||||
},
|
||||
uniqueArr(...args) {
|
||||
let arr = args.flat()
|
||||
return arr.reduce((acc, cur) => {
|
||||
const hasDuplicate = acc.some(item => item.id === cur.id);
|
||||
if (!hasDuplicate) {
|
||||
acc.push(cur);
|
||||
}
|
||||
return acc;
|
||||
}, []);
|
||||
},
|
||||
async getArea() {
|
||||
try {
|
||||
const res = await areaIndex(
|
||||
{
|
||||
page: 1,
|
||||
page_size: 999,
|
||||
},
|
||||
false
|
||||
);
|
||||
this.area = res.data;
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
},
|
||||
async getList(isRefresh=false) {
|
||||
if(isRefresh) {
|
||||
this.select.page = 1
|
||||
}
|
||||
this.loading = true;
|
||||
try {
|
||||
const res = await index(this.select, false);
|
||||
this.tableData = res.data;
|
||||
this.total = res.total;
|
||||
this.loading = false;
|
||||
|
||||
this.toggleDefault()
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
toggleDefault() {
|
||||
this.$nextTick(_ => {
|
||||
this.$refs['table']?.clearCheckboxRow()
|
||||
this.$refs['table']?.setCheckboxRow(this.tableData.filter(i => !!this.defaultValue.find(j => j.id === i.id)), true)
|
||||
})
|
||||
},
|
||||
submit() {
|
||||
const $table = this.$refs['table']
|
||||
if ($table) {
|
||||
console.log(this.uniqueArr($table.getCheckboxReserveRecords(true), $table.getCheckboxRecords(true), this.defaultValue).map(i => ({ id: i.id, code: i.code, name: i.name })))
|
||||
this.$emit('confirm', this.uniqueArr($table.getCheckboxReserveRecords(true), $table.getCheckboxRecords(true), this.defaultValue).map(i => ({ id: i.id, code: i.code, name: i.name })))
|
||||
this.$emit('update:isShow', false)
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
watch: {
|
||||
isShow(newVal) {
|
||||
if(newVal) {
|
||||
this.zIndex = PopupManager.nextZIndex()
|
||||
|
||||
this.toggleDefault()
|
||||
} else {
|
||||
this.setDefaultValue()
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getArea();
|
||||
|
||||
this.getList();
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.select-panel {
|
||||
|
||||
* + * {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue