zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: xselect edit参数更改

This commit is contained in:
caoqianming 2024-10-26 13:13:03 +08:00
parent 177446d8c2
commit 27fd49a690
1 changed files with 93 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

178
src/components/xSelect/index.vue
View File

@ -1,16 +1,16 @@
<template> <template>
<div> <div>
<el-input ref="inputRef" v-model="selectLabel" :readonly="true"> <el-input ref="inputRef" v-model="selectLabel" :readonly="true">
<template #prefix> <template #prefix v-if="edit">
<el-button <el-button
text text
size="small" size="small"
circle circle
icon="el-icon-search" icon="el-icon-search"
@click="showPopover=true" @click="showPopover = true"
></el-button> ></el-button>
</template> </template>
<template #suffix> <template #suffix v-if="edit">
<el-button <el-button
text text
size="small" size="small"
@ -21,48 +21,49 @@
></el-button> ></el-button>
</template> </template>
</el-input> </el-input>
<div v-if="edit"> <el-popover
<el-popover v-model:visible="showPopover"
v-model:visible="showPopover" trigger="manual"
trigger="manual" virtual-triggering
virtual-triggering :virtual-ref="inputRef"
:virtual-ref="inputRef" :width="tableWidth"
:width="tableWidth" >
<el-input
v-if="!isFixOptions"
v-model="keyword"
placeholder="关键词查找"
@keyup.enter="handleQuery"
></el-input>
<div style="height: 2px"></div>
<scTable
v-if="showPopover"
ref="table"
:apiObj="apiObj"
:data="tableData"
:params="params"
:query="query"
:height="tableHeight"
row-key="id"
stripe
@row-click="rowClick"
:hidePagination="hidePagination"
paginationLayout="prev, pager, next"
hideDo
@dataChange="tdChange"
@selection-change="selectionChange"
> >
<el-input <el-table-column
v-if="!isFixOptions" v-if="multiple"
v-model="keyword" type="selection"
placeholder="关键词查找" width="40"
@keyup.enter="handleQuery" :reserve-selection="true"
></el-input> ></el-table-column>
<div style="height: 2px"></div> <slot v-if="!isFixOptions"></slot>
<scTable <template v-else>
v-if="showPopover" <el-table-column :prop="props.labelField"></el-table-column>
ref="table" </template>
:apiObj="apiObj" </scTable>
:data="tableData" </el-popover>
:params="params"
:query="query"
:height="tableHeight"
row-key="id"
stripe
@row-click="rowClick"
:hidePagination="hidePagination"
paginationLayout="prev, pager, next"
hideDo
@dataChange="tdChange"
@selection-change="selectionChange"
>
<el-table-column v-if="multiple" type="selection" width="40" :reserve-selection="true"></el-table-column>
<slot v-if="!isFixOptions"></slot>
<template v-else>
<el-table-column
:prop="props.labelField"
></el-table-column>
</template>
</scTable>
</el-popover>
</div>
</div> </div>
</template> </template>
@ -70,7 +71,7 @@
import { ref, defineProps, defineEmits, computed, onMounted } from "vue"; import { ref, defineProps, defineEmits, computed, onMounted } from "vue";
const props = defineProps({ const props = defineProps({
multiple: { type: Boolean, default: false }, multiple: { type: Boolean, default: false },
edit: { type: Boolean, default: true }, edit: { type: Boolean, default: true },
hidePagination: { type: Boolean, default: false }, hidePagination: { type: Boolean, default: false },
tableWidth: { type: Number, default: 600 }, tableWidth: { type: Number, default: 600 },
@ -78,7 +79,7 @@ const props = defineProps({
apiObj: { type: Object, default: null }, apiObj: { type: Object, default: null },
params: { type: Object, default: () => {} }, params: { type: Object, default: () => {} },
label: { type: [String, Number, Array], default: "" }, label: { type: [String, Number, Array], default: "" },
obj: { type: Object, default: () => {} }, obj: { type: Object, default: () => {} },
modelValue: { type: [String, Number, Array], default: null }, modelValue: { type: [String, Number, Array], default: null },
labelField: { type: String, default: "name" }, labelField: { type: String, default: "name" },
valueField: { type: String, default: "id" }, valueField: { type: String, default: "id" },
@ -95,35 +96,42 @@ const table = ref();
const hidePagination = ref(props.hidePagination); const hidePagination = ref(props.hidePagination);
onMounted(() => { onMounted(() => {
if(props.options != null) { if (props.options != null) {
isFixOptions.value = true; isFixOptions.value = true;
tableData.value = props.options; tableData.value = props.options;
hidePagination.value = true; hidePagination.value = true;
} }
if(props.label) { if (props.label) {
selectLabel.value = props.label; selectLabel.value = props.label;
} } else {
else {
if (props.multiple) { if (props.multiple) {
if (isFixOptions.value) { if (isFixOptions.value) {
selectLabel.value = props.options.filter(item => props.modelValue.includes(item[props.valueField])).map(item => item[props.labelField]).join(props.splitField); 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 (props.obj && props.obj.length > 0) { } else {
selectLabel.value = props.obj.map(item => item[props.labelField]).join(props.splitField);
}
}
else {
if (isFixOptions.value) { if (isFixOptions.value) {
const selectedOption = props.options.find(item => item[props.valueField] === props.modelValue); const selectedOption = props.options.find(
selectLabel.value = selectedOption ? selectedOption[props.labelField] : ""; (item) => item[props.valueField] === props.modelValue
} );
else { selectLabel.value = selectedOption
? selectedOption[props.labelField]
: "";
} else {
selectLabel.value = props.obj[props.labelField]; selectLabel.value = props.obj[props.labelField];
} }
} }
} }
}) });
const isFixOptions = ref(false); const isFixOptions = ref(false);
const tableData = ref(null); const tableData = ref(null);
@ -134,8 +142,8 @@ const selectObj = computed({
}, },
set(val) { set(val) {
emit("update:obj", val); emit("update:obj", val);
} },
}) });
const selectValue = computed({ const selectValue = computed({
get() { get() {
@ -157,20 +165,19 @@ const handleQuery = () => {
}; };
const rowClick = (row) => { const rowClick = (row) => {
if(!props.multiple){ if (!props.multiple) {
selectObj.value = row; selectObj.value = row;
selectLabel.value = row[props.labelField]; selectLabel.value = row[props.labelField];
selectValue.value = row[props.valueField]; selectValue.value = row[props.valueField];
showPopover.value = false; showPopover.value = false;
} }
}; };
const handleClear = () => { const handleClear = () => {
if(props.multiple){ if (props.multiple) {
selectObj.value = [], (selectObj.value = []), (selectLabel.value = "");
selectLabel.value = "";
selectValue.value = []; selectValue.value = [];
}else{ } else {
selectObj.value = {}; selectObj.value = {};
selectLabel.value = ""; selectLabel.value = "";
selectValue.value = null; selectValue.value = null;
@ -178,19 +185,20 @@ const handleClear = () => {
emit("update:label", ""); emit("update:label", "");
}; };
const tdChange = (res, tableData) =>{ const tdChange = (res, tableData) => {
// if(obj.value && multiple){ // if(obj.value && multiple){
// }
// } };
}
const selectionChange = (val) => { const selectionChange = (val) => {
if(props.multiple){ if (props.multiple) {
selectObj.value = val; selectObj.value = val;
selectValue.value = val.map(item => item[props.valueField]); selectValue.value = val.map((item) => item[props.valueField]);
selectLabel.value = val.map(item => item[props.labelField]).join(props.splitField); selectLabel.value = val
.map((item) => item[props.labelField])
.join(props.splitField);
emit("update:label", val); emit("update:label", val);
} }
}; };
</script> </script>