feat: 完善xselect封装
This commit is contained in:
parent
7cd8ad4b0d
commit
fdd3604fc3
|
|
@ -30,6 +30,7 @@
|
|||
:width="tableWidth"
|
||||
>
|
||||
<el-input
|
||||
v-if="!isFixOptions"
|
||||
v-model="keyword"
|
||||
placeholder="关键词查找"
|
||||
@keyup.enter="handleQuery"
|
||||
|
|
@ -39,6 +40,7 @@
|
|||
v-if="showPopover"
|
||||
ref="table"
|
||||
:apiObj="apiObj"
|
||||
:data="tableData"
|
||||
:params="params"
|
||||
:query="query"
|
||||
:height="tableHeight"
|
||||
|
|
@ -52,7 +54,12 @@
|
|||
@selection-change="selectionChange"
|
||||
>
|
||||
<el-table-column v-if="multiple" type="selection" width="40" :reserve-selection="true"></el-table-column>
|
||||
<slot></slot>
|
||||
<slot v-if="!isFixOptions"></slot>
|
||||
<template v-else>
|
||||
<el-table-column
|
||||
:prop="props.labelField"
|
||||
></el-table-column>
|
||||
</template>
|
||||
</scTable>
|
||||
</el-popover>
|
||||
</div>
|
||||
|
|
@ -60,7 +67,7 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, defineProps, defineEmits, computed } from "vue";
|
||||
import { ref, defineProps, defineEmits, computed, onMounted } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
multiple: { type: Boolean, default: false },
|
||||
|
|
@ -68,23 +75,58 @@ const props = defineProps({
|
|||
hidePagination: { type: Boolean, default: false },
|
||||
tableWidth: { type: Number, default: 600 },
|
||||
tableHeight: { type: Number, default: 400 },
|
||||
apiObj: { type: Object, default: () => {}, required: true },
|
||||
apiObj: { type: Object, default: null },
|
||||
params: { type: Object, default: () => {} },
|
||||
label: { type: [String, Number, Array], default: "" },
|
||||
obj: { type: Object, default: () => {} },
|
||||
modelValue: { type: [String, Number, Array], default: null },
|
||||
labelField: { type: String, default: "name" },
|
||||
valueField: { type: String, default: "id" },
|
||||
splitField: { type: String, default: ";" },
|
||||
options: { type: Array, default: null },
|
||||
});
|
||||
|
||||
const emit = defineEmits(["update:modelValue", "update:label", "update:obj"]);
|
||||
const emit = defineEmits(["update:modelValue", "update:obj", "update:label"]);
|
||||
|
||||
// 控制 popover 显示与隐藏的状态
|
||||
const multiple = ref(props.multiple);
|
||||
const obj = ref(props.obj);
|
||||
const showPopover = ref(false);
|
||||
const inputRef = ref();
|
||||
const table = ref();
|
||||
const hidePagination = ref(props.hidePagination);
|
||||
|
||||
onMounted(() => {
|
||||
if(props.options != null) {
|
||||
isFixOptions.value = true;
|
||||
tableData.value = props.options;
|
||||
hidePagination.value = true;
|
||||
}
|
||||
|
||||
if(props.label) {
|
||||
selectLabel.value = props.label;
|
||||
}
|
||||
else {
|
||||
if (props.multiple) {
|
||||
if (isFixOptions.value) {
|
||||
selectLabel.value = props.options.filter(item => props.modelValue.includes(item[props.valueField])).map(item => item[props.labelField]).join(props.splitField);
|
||||
}
|
||||
else if (props.obj && props.obj.length > 0) {
|
||||
selectLabel.value = props.obj.map(item => item[props.labelField]).join(props.splitField);
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (isFixOptions.value) {
|
||||
const selectedOption = props.options.find(item => item[props.valueField] === props.modelValue);
|
||||
selectLabel.value = selectedOption ? selectedOption[props.labelField] : "";
|
||||
}
|
||||
else {
|
||||
selectLabel.value = props.obj[props.labelField];
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const isFixOptions = ref(false);
|
||||
const tableData = ref(null);
|
||||
|
||||
const selectObj = computed({
|
||||
get() {
|
||||
|
|
@ -95,14 +137,6 @@ const selectObj = computed({
|
|||
}
|
||||
})
|
||||
|
||||
const selectLabel = computed({
|
||||
get() {
|
||||
return props.label;
|
||||
},
|
||||
set(val) {
|
||||
emit("update:label", val);
|
||||
},
|
||||
});
|
||||
const selectValue = computed({
|
||||
get() {
|
||||
return props.modelValue;
|
||||
|
|
@ -112,6 +146,8 @@ const selectValue = computed({
|
|||
},
|
||||
});
|
||||
|
||||
const selectLabel = ref("");
|
||||
|
||||
const keyword = ref("");
|
||||
const query = ref({ search: "" });
|
||||
|
||||
|
|
@ -121,7 +157,7 @@ const handleQuery = () => {
|
|||
};
|
||||
|
||||
const rowClick = (row) => {
|
||||
if(!multiple.value){
|
||||
if(!props.multiple){
|
||||
selectObj.value = row;
|
||||
selectLabel.value = row[props.labelField];
|
||||
selectValue.value = row[props.valueField];
|
||||
|
|
@ -130,9 +166,16 @@ const rowClick = (row) => {
|
|||
};
|
||||
|
||||
const handleClear = () => {
|
||||
selectObj.value = {};
|
||||
selectLabel.value = "";
|
||||
selectValue.value = null;
|
||||
if(props.multiple){
|
||||
selectObj.value = [],
|
||||
selectLabel.value = "";
|
||||
selectValue.value = [];
|
||||
}else{
|
||||
selectObj.value = {};
|
||||
selectLabel.value = "";
|
||||
selectValue.value = null;
|
||||
}
|
||||
emit("update:label", "");
|
||||
};
|
||||
|
||||
const tdChange = (res, tableData) =>{
|
||||
|
|
@ -142,10 +185,12 @@ const tdChange = (res, tableData) =>{
|
|||
}
|
||||
|
||||
const selectionChange = (val) => {
|
||||
if(multiple.value){
|
||||
if(props.multiple){
|
||||
selectObj.value = val;
|
||||
selectLabel.value = val.map(item => item[props.labelField]).join(";");
|
||||
selectValue.value = val.map(item => item[props.valueField]);
|
||||
|
||||
selectLabel.value = val.map(item => item[props.labelField]).join(props.splitField);
|
||||
emit("update:label", val);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -26,24 +26,65 @@
|
|||
></ehsSelect>
|
||||
</div>
|
||||
<div v-if="currentM == 'xSelect'">
|
||||
<h1>基于input封装的远程表格select-单选分页</h1>
|
||||
<xSelect
|
||||
:apiObj="apiObj"
|
||||
v-model="x2"
|
||||
v-model:label="x2_name"
|
||||
v-model:obj="x2_obj"
|
||||
style="width: 500px"
|
||||
>
|
||||
<el-table-column label="id" prop="id"></el-table-column>
|
||||
<el-table-column label="名称" prop="name"></el-table-column>
|
||||
</xSelect>
|
||||
<div>
|
||||
当前选择：
|
||||
<h1>v-model: {{ x2 }}</h1>
|
||||
<h1>v-model:label: {{ x2_name }}</h1>
|
||||
<h1>v-model:obj: {{ x2_obj }}</h1>
|
||||
</div>
|
||||
<h1 style="margin-top: 20px">基于input封装的远程表格select-多选不分页</h1>
|
||||
<xSelect
|
||||
:apiObj="apiObj"
|
||||
v-model="x2s"
|
||||
v-model:obj="x2s_obj"
|
||||
style="width: 500px"
|
||||
:multiple="true"
|
||||
>
|
||||
<el-table-column label="id" prop="id"></el-table-column>
|
||||
<el-table-column label="名称" prop="name"></el-table-column>
|
||||
</xSelect>
|
||||
|
||||
<div>
|
||||
当前选择：
|
||||
<h1>value: {{ x2 }}</h1>
|
||||
<h1>label: {{ x2_name }}</h1>
|
||||
<h1>obj: {{ x2_obj }}</h1>
|
||||
<h1>v-model: {{ x2s }}</h1>
|
||||
<h1>v-model:obj: {{ x2s_obj }}</h1>
|
||||
</div>
|
||||
|
||||
<h1 style="margin-top: 20px">基于input封装的固定选项select-单选</h1>
|
||||
<xSelect
|
||||
:options="options"
|
||||
v-model="x2sf"
|
||||
style="width: 500px"
|
||||
>
|
||||
</xSelect>
|
||||
<div>
|
||||
当前选择：
|
||||
<h1>v-model: {{ x2sf }}</h1>
|
||||
</div>
|
||||
|
||||
<h1 style="margin-top: 20px">基于input封装的固定选项select-多选</h1>
|
||||
<xSelect
|
||||
:options="options"
|
||||
v-model="x2sfs"
|
||||
style="width: 500px"
|
||||
:multiple="true"
|
||||
>
|
||||
</xSelect>
|
||||
<div>
|
||||
当前选择：
|
||||
<h1>v-model: {{ x2sfs }}</h1>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div v-if="currentM == 'scEcharts'">
|
||||
<el-card title="测试图表">
|
||||
|
|
@ -59,23 +100,18 @@
|
|||
<div v-if="currentM == 'ehsTableSelect'">
|
||||
<ehsTableSelect
|
||||
:apiObj="apiObj"
|
||||
v-model="x2"
|
||||
:props="{ value: 'id', label: 'name' }"
|
||||
:multiple="true"
|
||||
v-model="x_3"
|
||||
:props="props"
|
||||
>
|
||||
<el-table-column label="id" prop="id"></el-table-column>
|
||||
<el-table-column label="名称" prop="name"></el-table-column>
|
||||
</ehsTableSelect>
|
||||
</div>
|
||||
<div v-if="currentM == 'scTableSelect'">
|
||||
<scTableSelect :apiObj="apiObj" v-model="x3" :props="props">
|
||||
<scTableSelect :apiObj="apiObj" v-model="x_3" :props="props">
|
||||
<el-table-column label="id" prop="id"></el-table-column>
|
||||
<el-table-column label="名称" prop="name"></el-table-column>
|
||||
</scTableSelect>
|
||||
|
||||
<el-select v-model="x3" >
|
||||
|
||||
</el-select>
|
||||
</div>
|
||||
</el-main>
|
||||
</el-container>
|
||||
|
|
@ -103,8 +139,8 @@ export default {
|
|||
keyword: "search",
|
||||
},
|
||||
x_3: {
|
||||
value: "3347207082608115712",
|
||||
label: "烧成车间",
|
||||
id: "3347207082608115712",
|
||||
name: "烧成车间",
|
||||
},
|
||||
currentM: "",
|
||||
apiObj: this.$API.system.dept.list,
|
||||
|
|
@ -112,9 +148,22 @@ export default {
|
|||
x_name: "光芯科技",
|
||||
// x:null,
|
||||
apiObj2: this.$API.system.user.list,
|
||||
|
||||
x2: "3347207082608115712",
|
||||
x2_name: "烧成车间",
|
||||
x2_obj: {},
|
||||
|
||||
x2s: [ "1561653664806998016", "3423856735881117696" ],
|
||||
x2s_obj: [{id: "1561653664806998016", name: "水泥工厂"}, {id: "3423856735881117696", name: "光子科技"}],
|
||||
|
||||
options: [
|
||||
{ name: "选项1", id: 10 },
|
||||
{ name: "选项2", id: 20 },
|
||||
{ name: "选项3", id: 30 },
|
||||
],
|
||||
x2sf: 10,
|
||||
x2sfs: [10, 20],
|
||||
|
||||
chartOption: {
|
||||
textStyle: {
|
||||
fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif',
|
||||
|
|
|
|||
Loading…
Reference in New Issue