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

View File

@ -1,102 +1,217 @@
<template>
<el-select
class="ag_select"
:style="{ width }"
:value="value"
:size="size"
v-on="inputListeners"
v-bind="attrs"
<div
@mousedown="
(e) => {
e.preventDefault();
selectOpen = true;
}
"
ref="main"
>
<el-option
v-for="(item, index) in options"
:key="index"
:label="item.label"
:value="item.value"
></el-option>
<!-- <slot name="options" slot="options" /> -->
</el-select>
<a-select
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"
:value="item[valueKey]"
>{{
customLabel ? customLabelHandler(item) : item[labelKey]
}}</a-select-option
>
</a-select>
</div>
</template>
<script>
import cloneDeep from "../../../src/utils/cloneDeep";
export default {
name: "agSelect",
name: "TAntdSelect",
components: {
VNodes: {
functional: true,
render: (h, ctx) => ctx.props.vnodes,
},
},
props: {
value: {
type: [String, Number, Array, Boolean, Object],
},
// 'multiple'
mode: {
type: String,
},
placeholder: {
type: String,
default: "请选择",
},
//
width: {
type: String,
default: "",
},
value: {
// label
customLabel: {
type: String,
default: "",
},
size: {
// optionkey
valueKey: {
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() {
return {
model: "",
options: [],
selectOpen: false,
};
},
computed: {
childSelectedValue: {
get() {
return this.value || undefined;
},
set(val) {
this.$emit("input", val);
},
},
attrs() {
if (this.$attrs["remote-method"]) {
let obj = cloneDeep(this.$attrs);
Reflect.deleteProperty(obj, "remote-method");
return { ...obj, clearable: true, filterable: true, remote: true };
}
return false;
return {
allowClear: true,
showSearch: true,
...this.$attrs,
};
},
//
inputListeners() {
return Object.assign(
{},
//
this.$listeners,
//
//
{
// `v-model`
input: (value) => {
this.$emit("input", this.toUpperCase ? value.toUpperCase() : value);
selectChecked: {
get() {
return this.childSelectedValue?.length === this.optionSource?.length;
},
blur: (e) => {
let value = e.target.value
.trim()
.replace(/\s/g, (match) =>
match.charCodeAt(0) === 12288 ? String.fromCharCode(32) : match
);
//
this.$emit("input", value);
},
}
);
set(val) {
// console.log('set', val)
this.$emit("input", val);
},
},
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: {
async removeMethod(keywords) {
if (this.$attrs["remote-method"]) {
let opts = await this.$attrs["remote-method"](keywords);
this.options = opts;
//
bodyCloseMenus(e) {
if (this.$refs.main && !this.$refs.main.contains(e.target)) {
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>
<style >
.all_checkbox {
margin-left: 12px;
margin-top: 5px;
}
</style>
<style lang="scss" scoped></style>

View File

@ -1,22 +1,6 @@
<template>
<div>
<agSelect
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 ref="ref_Pedestal" :value="value" @input="changeInput">
</agSelect>
</div>
</template>
@ -28,32 +12,34 @@ export default {
data() {
return {
value: "",
options: {
fnSearch: this.fnSearch,
formItemAttrs: {
order_sn: {
type: "input",
label: "订单号",
placeholder: "请输入订单号",
},
product_category_id: {
type: "select",
label: "商品分类",
multiple: false,
selectOpts: [{ label: "全部", value: "" }],
placeholder: "选择商品分类",
},
},
},
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
};
},
methods: {
changeInput() {
console.log(this.value);
// console.log(this.value);
},
},
};
</script>
<style scoped lang='scss'>
<style>
body {
background: #918d8d;
}
</style>