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> <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,7 +21,6 @@
></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"
@ -53,17 +52,19 @@
@dataChange="tdChange" @dataChange="tdChange"
@selection-change="selectionChange" @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> <slot v-if="!isFixOptions"></slot>
<template v-else> <template v-else>
<el-table-column <el-table-column :prop="props.labelField"></el-table-column>
:prop="props.labelField"
></el-table-column>
</template> </template>
</scTable> </scTable>
</el-popover> </el-popover>
</div> </div>
</div>
</template> </template>
<script setup> <script setup>
@ -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,7 +165,7 @@ 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];
@ -166,11 +174,10 @@ const rowClick = (row) => {
}; };
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,18 +185,19 @@ 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);
} }
}; };