This commit is contained in:
qiaopengfei 2024-07-03 16:13:23 +08:00
parent cdaa6a63d2
commit 5253a74f06
3 changed files with 216 additions and 118 deletions

View File

@ -2,10 +2,8 @@
<el-input <el-input
class="ag_input" class="ag_input"
:style="{ width }" :style="{ width }"
:value="value"
:size="size"
v-on="inputListeners" v-on="inputListeners"
v-bind="[$attrs]" v-bind="attrs"
> >
<slot name="append" slot="append" /> <slot name="append" slot="append" />
<slot name="prefix" slot="prefix" /> <slot name="prefix" slot="prefix" />
@ -26,20 +24,19 @@ export default {
type: String, type: String,
default: "", default: "",
}, },
size: {
type: String,
default: "small",
},
value: {
type: String,
default: "",
},
toUpperCase: { toUpperCase: {
type: Boolean, type: Boolean,
default: false, default: true,
}, },
}, },
computed: { computed: {
attrs() {
return {
size: "small",
clearable: true, //
...this.$attrs,
};
},
// //
inputListeners() { inputListeners() {
return Object.assign( return Object.assign(

View File

@ -1,102 +1,217 @@
<template> <template>
<el-select <div
class="ag_select" @mousedown="
:style="{ width }" (e) => {
:value="value" e.preventDefault();
:size="size" selectOpen = true;
v-on="inputListeners" }
v-bind="attrs" "
ref="main"
> >
<el-option <a-select
v-for="(item, index) in options" class="t_select"
v-model="childSelectedValue"
:style="{ width: width || '100%' }"
:placeholder="placeholder"
:open="selectOpen"
@select="handleSelect"
v-bind="attrs"
v-on="$listeners"
:mode="mode"
>
<template v-for="(index, name) in $slots" v-slot:[name]>
<slot :name="name" />
</template>
<template v-for="(index, name) in $scopedSlots" v-slot:[name]="data">
<slot :name="name" v-bind="data"></slot>
</template>
<div slot="dropdownRender" slot-scope="menu">
<a-checkbox
v-if="mode && !isShowPagination"
:checked="selectChecked"
@change="selectAll"
class="all_checkbox"
>全选</a-checkbox
>
<v-nodes :vnodes="menu" />
<div class="t_select__pagination" v-if="isShowPagination">
<a-pagination
:page-size.sync="paginationOption.pageSize"
v-model="paginationOption.current"
:total="paginationOption.total"
@change="currentChange"
v-bind="{
size: 'small',
'hide-on-single-page': true,
showQuickJumper: true,
...$attrs,
...paginationOption.bind,
}"
v-on="$listeners"
/>
</div>
</div>
<a-select-option
v-for="(item, index) in optionSource"
:key="index" :key="index"
:label="item.label" :value="item[valueKey]"
:value="item.value" >{{
></el-option> customLabel ? customLabelHandler(item) : item[labelKey]
<!-- <slot name="options" slot="options" /> --> }}</a-select-option
</el-select> >
</a-select>
</div>
</template> </template>
<script> <script>
import cloneDeep from "../../../src/utils/cloneDeep";
export default { export default {
name: "agSelect", name: "TAntdSelect",
components: {
VNodes: {
functional: true,
render: (h, ctx) => ctx.props.vnodes,
},
},
props: { props: {
value: {
type: [String, Number, Array, Boolean, Object],
},
// 'multiple'
mode: {
type: String,
},
placeholder: {
type: String,
default: "请选择",
},
//
width: { width: {
type: String, type: String,
default: "",
}, },
value: { // label
customLabel: {
type: String, type: String,
default: "",
}, },
size: { // optionkey
valueKey: {
type: String, type: String,
default: "small", default: "key",
},
// option
labelKey: {
type: String,
default: "label",
},
//
optionSource: {
type: Array,
},
//
isShowPagination: {
type: Boolean,
default: false,
},
//
paginationOption: {
type: Object,
default: () => {
return {
pageSize: 6, //
current: 1, //
total: 0, //
};
},
}, },
}, },
data() { data() {
return { return {
model: "", selectOpen: false,
options: [],
}; };
}, },
computed: { computed: {
childSelectedValue: {
get() {
return this.value || undefined;
},
set(val) {
this.$emit("input", val);
},
},
attrs() { attrs() {
if (this.$attrs["remote-method"]) { return {
let obj = cloneDeep(this.$attrs); allowClear: true,
Reflect.deleteProperty(obj, "remote-method"); showSearch: true,
return { ...obj, clearable: true, filterable: true, remote: true }; ...this.$attrs,
} };
return false;
}, },
// selectChecked: {
inputListeners() { get() {
return Object.assign( return this.childSelectedValue?.length === this.optionSource?.length;
{},
//
this.$listeners,
//
//
{
// `v-model`
input: (value) => {
this.$emit("input", this.toUpperCase ? value.toUpperCase() : value);
}, },
blur: (e) => { set(val) {
let value = e.target.value // console.log('set', val)
.trim() this.$emit("input", val);
.replace(/\s/g, (match) =>
match.charCodeAt(0) === 12288 ? String.fromCharCode(32) : match
);
//
this.$emit("input", value);
},
}
);
}, },
}, },
watch: {
value: {
immediate: true,
handler(newVal) {
this.removeMethod(newVal);
this.model = newVal;
}, },
mounted() {
document.addEventListener("click", this.bodyCloseMenus);
}, },
beforeDestroy() {
document.removeEventListener("click", this.bodyCloseMenus);
}, },
methods: { methods: {
async removeMethod(keywords) { //
if (this.$attrs["remote-method"]) { bodyCloseMenus(e) {
let opts = await this.$attrs["remote-method"](keywords); if (this.$refs.main && !this.$refs.main.contains(e.target)) {
this.options = opts; if (this.selectOpen == true) {
this.selectOpen = false;
}
} }
}, },
handleChange(value) { //
this.$emit("input", value); selectAll(val) {
const options = JSON.parse(JSON.stringify(this.optionSource));
if (val.target.checked) {
this.childSelectedValue = options?.map((item) => {
return item[this.valueKey];
});
setTimeout(() => {
this.$emit("change", this.childSelectedValue);
}, 0);
} else {
this.childSelectedValue = null;
}
this.selectOpen = false;
},
handleSelect(value, option) {
if (value) {
this.selectOpen = false;
}
this.$emit("select", value, option);
},
//
currentChange(val) {
// console.log('', val)
if (!this.mode) {
this.childSelectedValue = null;
}
setTimeout(() => {
this.selectOpen = true;
}, 0);
this.$emit("current-change", val);
},
// label
customLabelHandler() {
// eslint-disable-next-line no-eval
return eval(this.customLabel);
}, },
}, },
}; };
</script> </script>
<style >
.all_checkbox {
margin-left: 12px;
margin-top: 5px;
}
</style>
<style lang="scss" scoped></style>

View File

@ -1,22 +1,6 @@
<template> <template>
<div> <div>
<agSelect <agSelect ref="ref_Pedestal" :value="value" @input="changeInput">
ref="ref_Pedestal"
v-model="value"
@input="changeInput"
:width="'180px'"
>
<!-- <template #operate="">
<el-button
class="excel"
type="success"
icon="el-icon-download"
size="small"
plain
@click="excel()"
>导出</el-button
>
</template> -->
</agSelect> </agSelect>
</div> </div>
</template> </template>
@ -28,32 +12,34 @@ export default {
data() { data() {
return { return {
value: "", value: "",
options: { options: [{
fnSearch: this.fnSearch, value: '选项1',
formItemAttrs: { label: '黄金糕'
order_sn: { }, {
type: "input", value: '选项2',
label: "订单号", label: '双皮奶'
placeholder: "请输入订单号", }, {
}, value: '选项3',
product_category_id: { label: '蚵仔煎'
type: "select", }, {
label: "商品分类", value: '选项4',
multiple: false, label: '龙须面'
selectOpts: [{ label: "全部", value: "" }], }, {
placeholder: "选择商品分类", value: '选项5',
}, label: '北京烤鸭'
}, }],
},
}; };
}, },
methods: { methods: {
changeInput() { changeInput() {
console.log(this.value); // console.log(this.value);
}, },
}, },
}; };
</script> </script>
<style scoped lang='scss'> <style>
body {
background: #918d8d;
}
</style> </style>