发票下拉选择文本显示修改
This commit is contained in:
weiwei committed
1 parent
06ff8386d5
commit
907c89c7d8
1 file changed
+90
-73
@@ -1,20 +1,37 @@
|
||||
<template>
|
||||
<el-select style="width: 100%" v-model="state.selectId" :placeholder="props.placeholder"
|
||||
:clearable="props.clearable" remote-show-suffix filterable remote :disabled="props.disabled"
|
||||
:remote-method="remoteSearch" :loading="state.loading" @visible-change="(e: boolean) => e && getOptions()"
|
||||
@change="change">
|
||||
<el-option v-for="v in state.options" :key="v.id"
|
||||
:label="`向${v.payeeDept}汇款${displayPrice(v.totalPrice)}用于充值-创建于${v.createTime}`" :value="v.id">
|
||||
<div class="flex items-center">
|
||||
向
|
||||
<span class="color-danger">{{ v.payeeDept }}</span>
|
||||
汇款
|
||||
<span class="color-danger">{{ displayPrice(v.totalPrice) }}</span>
|
||||
用于充值
|
||||
<span>-创建于{{ v.createTime }}</span>
|
||||
</div>
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-select
|
||||
style="width: 100%"
|
||||
v-model="state.selectId"
|
||||
:placeholder="props.placeholder"
|
||||
:clearable="props.clearable"
|
||||
remote-show-suffix
|
||||
filterable
|
||||
remote
|
||||
:disabled="props.disabled"
|
||||
:remote-method="remoteSearch"
|
||||
:loading="state.loading"
|
||||
@visible-change="(e: boolean) => e && getOptions()"
|
||||
@change="change"
|
||||
>
|
||||
<el-option
|
||||
v-for="v in state.options"
|
||||
:key="v.id"
|
||||
:label="`${v.code}-${v.deptOrUser}向${v.payeeDept}汇款${displayPrice(v.totalPrice)}用于充值-创建于${v.createTime}`"
|
||||
:value="v.id"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<span class="color-danger">{{ v.code }}</span>
|
||||
-
|
||||
<span class="color-danger">{{ v.deptOrUser }}</span>
|
||||
向
|
||||
<span class="color-danger">{{ v.payeeDept }}</span>
|
||||
汇款
|
||||
<span class="color-danger">{{ displayPrice(v.totalPrice) }}</span>
|
||||
用于充值
|
||||
<span>-创建于{{ v.createTime }}</span>
|
||||
</div>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="select-wallet-invoice">
|
||||
@@ -30,90 +47,90 @@ const emit = defineEmits(["change"])
|
||||
const selectId = defineModel()
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
placeholder?: string
|
||||
disabled?: boolean
|
||||
clearable?: boolean
|
||||
autoFirst?: boolean
|
||||
apiParams?: any
|
||||
}>(),
|
||||
{
|
||||
placeholder: "请选择",
|
||||
disabled: false,
|
||||
clearable: true,
|
||||
autoFirst: false,
|
||||
apiParams: {
|
||||
status: "1"
|
||||
},
|
||||
},
|
||||
defineProps<{
|
||||
placeholder?: string
|
||||
disabled?: boolean
|
||||
clearable?: boolean
|
||||
autoFirst?: boolean
|
||||
apiParams?: any
|
||||
}>(),
|
||||
{
|
||||
placeholder: "请选择",
|
||||
disabled: false,
|
||||
clearable: true,
|
||||
autoFirst: false,
|
||||
apiParams: {
|
||||
status: "1",
|
||||
},
|
||||
},
|
||||
)
|
||||
|
||||
const queryForm = reactive<any>({
|
||||
name: "",
|
||||
current: 1,
|
||||
size: 10,
|
||||
name: "",
|
||||
current: 1,
|
||||
size: 10,
|
||||
})
|
||||
|
||||
const state = reactive<any>({
|
||||
loading: true,
|
||||
selectId: selectId,
|
||||
options: [],
|
||||
hardType: [],
|
||||
loading: true,
|
||||
selectId: selectId,
|
||||
options: [],
|
||||
hardType: [],
|
||||
})
|
||||
|
||||
const currentUserId = computed(() => {
|
||||
return useUserInfo().userInfos.user.userId
|
||||
return useUserInfo().userInfos.user.userId
|
||||
})
|
||||
|
||||
watch(
|
||||
selectId,
|
||||
(newVal, oldValue) => {
|
||||
if (newVal == oldValue) return
|
||||
state.selectId = newVal
|
||||
getOptions()
|
||||
},
|
||||
{ immediate: true },
|
||||
selectId,
|
||||
(newVal, oldValue) => {
|
||||
if (newVal == oldValue) return
|
||||
state.selectId = newVal
|
||||
getOptions()
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
async function getOptions() {
|
||||
try {
|
||||
state.loading = true
|
||||
const _pa = {
|
||||
...queryForm,
|
||||
...props.apiParams,
|
||||
userIds: [currentUserId.value],
|
||||
}
|
||||
try {
|
||||
state.loading = true
|
||||
const _pa = {
|
||||
...queryForm,
|
||||
...props.apiParams,
|
||||
userIds: [currentUserId.value],
|
||||
}
|
||||
|
||||
const { data } = await invoiceManager.invoiceSelect(_pa)
|
||||
state.options = data.records ?? []
|
||||
if (props.autoFirst && state.options.length != 0) {
|
||||
state.selectId = state.options[0].id
|
||||
emit("change", state.selectId)
|
||||
}
|
||||
const { hard_type } = useDict("hard_type")
|
||||
state.hardType = hard_type
|
||||
} finally {
|
||||
setTimeout(() => (state.loading = false), 500)
|
||||
}
|
||||
const { data } = await invoiceManager.invoiceSelect(_pa)
|
||||
state.options = data.records ?? []
|
||||
if (props.autoFirst && state.options.length != 0) {
|
||||
state.selectId = state.options[0].id
|
||||
emit("change", state.selectId)
|
||||
}
|
||||
const { hard_type } = useDict("hard_type")
|
||||
state.hardType = hard_type
|
||||
} finally {
|
||||
setTimeout(() => (state.loading = false), 500)
|
||||
}
|
||||
}
|
||||
|
||||
function remoteSearch(params: string) {
|
||||
if (params != queryForm.name) {
|
||||
queryForm.name = params
|
||||
getOptions()
|
||||
}
|
||||
if (params != queryForm.name) {
|
||||
queryForm.name = params
|
||||
getOptions()
|
||||
}
|
||||
}
|
||||
|
||||
function clear() {
|
||||
state.selectId = null
|
||||
getOptions()
|
||||
state.selectId = null
|
||||
getOptions()
|
||||
}
|
||||
|
||||
function change() {
|
||||
emit("change", selectId)
|
||||
emit("change", selectId)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
props.autoFirst && getOptions()
|
||||
props.autoFirst && getOptions()
|
||||
})
|
||||
</script>
|
||||
Reference in new issue
Block a user