<template>
|
<div class="form-dialog">
|
<Modal
|
:model-value="modelValue"
|
title="修改查询表单"
|
class-name="form-dialog"
|
@update:model-value="(v) => this.$emit('update:modelValue', v)"
|
>
|
<Checkbox
|
:indeterminate="indeterminate"
|
:model-value="checkAll"
|
@click.prevent="onCheckAll"
|
>全选</Checkbox
|
>
|
<Divider size="small" />
|
<CheckboxGroup v-model="showList" @on-change="onShowChange">
|
<Checkbox v-for="(item, i) in list" :key="i" :label="item.field">{{
|
item.label?.replace("：", "")
|
}}</Checkbox>
|
</CheckboxGroup>
|
<template #footer>
|
<Space>
|
<Button type="text" @click="onCancel">取消</Button>
|
<Button type="primary" @click="onOk">确定</Button>
|
</Space>
|
</template>
|
</Modal>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "FormDialog",
|
props: {
|
modelValue: Boolean,
|
list: Array,
|
},
|
data() {
|
return {
|
indeterminate: false,
|
checkAll: true,
|
showList: [],
|
};
|
},
|
methods: {
|
onOk() {
|
this.$emit("ok", this.showList);
|
this.$emit("update:modelValue", false);
|
},
|
onCancel() {
|
this.$emit("update:modelValue", false);
|
},
|
onCheckAll() {
|
if (this.indeterminate) {
|
this.checkAll = false;
|
} else {
|
this.checkAll = !this.checkAll;
|
}
|
this.indeterminate = false;
|
|
if (this.checkAll) {
|
this.showList = this.list.map((l) => l.field);
|
} else {
|
this.showList = [];
|
}
|
},
|
onShowChange(data) {
|
if (data.length == this.list.length) {
|
this.indeterminate = false;
|
this.checkAll = true;
|
} else if (data.length > 0) {
|
this.indeterminate = true;
|
this.checkAll = false;
|
} else {
|
this.indeterminate = false;
|
this.checkAll = false;
|
}
|
},
|
},
|
watch: {
|
list(list) {
|
this.showList = list.map((l) => l.field);
|
},
|
},
|
};
|
</script>
|
|
<style lang="less">
|
.form-dialog {
|
.ivu-modal {
|
top: 40px;
|
}
|
.ivu-divider-horizontal {
|
margin: 9px 0;
|
}
|
.ivu-checkbox-group {
|
display: flex;
|
flex-direction: column;
|
}
|
}
|
</style>
|
