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

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

@ -1,16 +1,16 @@
<template>
<div>
<el-input ref="inputRef" v-model="selectLabel" :readonly="true">
<template #prefix>
<template #prefix v-if="edit">
<el-button
text
size="small"
circle
icon="el-icon-search"
@click="showPopover=true"
@click="showPopover = true"
></el-button>
</template>
<template #suffix>
<template #suffix v-if="edit">
<el-button
text
size="small"
@ -21,7 +21,6 @@
></el-button>
</template>
</el-input>
<div v-if="edit">
<el-popover
v-model:visible="showPopover"
trigger="manual"
@ -53,17 +52,19 @@
@dataChange="tdChange"
@selection-change="selectionChange"
>
<el-table-column v-if="multiple" type="selection" width="40" :reserve-selection="true"></el-table-column>
<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>
<el-table-column :prop="props.labelField"></el-table-column>
</template>
</scTable>
</el-popover>
</div>
</div>
</template>
<script setup>
@ -95,35 +96,42 @@ const table = ref();
const hidePagination = ref(props.hidePagination);
onMounted(() => {
if(props.options != null) {
if (props.options != null) {
isFixOptions.value = true;
tableData.value = props.options;
hidePagination.value = true;
}
if(props.label) {
if (props.label) {
selectLabel.value = props.label;
}
else {
} 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);
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) {
selectLabel.value = props.obj.map(item => item[props.labelField]).join(props.splitField);
}
}
else {
} else {
if (isFixOptions.value) {
const selectedOption = props.options.find(item => item[props.valueField] === props.modelValue);
selectLabel.value = selectedOption ? selectedOption[props.labelField] : "";
}
else {
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);
@ -134,8 +142,8 @@ const selectObj = computed({
},
set(val) {
emit("update:obj", val);
}
})
},
});
const selectValue = computed({
get() {
@ -157,7 +165,7 @@ const handleQuery = () => {
};
const rowClick = (row) => {
if(!props.multiple){
if (!props.multiple) {
selectObj.value = row;
selectLabel.value = row[props.labelField];
selectValue.value = row[props.valueField];
@ -166,11 +174,10 @@ const rowClick = (row) => {
};
const handleClear = () => {
if(props.multiple){
selectObj.value = [],
selectLabel.value = "";
if (props.multiple) {
(selectObj.value = []), (selectLabel.value = "");
selectValue.value = [];
}else{
} else {
selectObj.value = {};
selectLabel.value = "";
selectValue.value = null;
@ -178,18 +185,19 @@ const handleClear = () => {
emit("update:label", "");
};
const tdChange = (res, tableData) =>{
const tdChange = (res, tableData) => {
// if(obj.value && multiple){
// }
}
};
const selectionChange = (val) => {
if(props.multiple){
if (props.multiple) {
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);
}
};