138 lines
2.8 KiB
Vue
138 lines
2.8 KiB
Vue
<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.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">
|
|
import { reactive } from "vue"
|
|
import { useDict } from "/@/hooks/dict"
|
|
import { useUserInfo } from "/@/stores/userInfo"
|
|
import { displayPrice } from "/@/utils/formatMoney"
|
|
|
|
import * as invoiceManager from "/@/api/wallet/wallet-recharge-invoice"
|
|
|
|
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",
|
|
},
|
|
},
|
|
)
|
|
|
|
const queryForm = reactive<any>({
|
|
name: "",
|
|
current: 1,
|
|
size: 999999,
|
|
})
|
|
|
|
const state = reactive<any>({
|
|
loading: true,
|
|
selectId: selectId,
|
|
options: [],
|
|
hardType: [],
|
|
})
|
|
|
|
const currentUserId = computed(() => {
|
|
return useUserInfo().userInfos.user.userId
|
|
})
|
|
|
|
watch(
|
|
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],
|
|
size: 999999,
|
|
}
|
|
|
|
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()
|
|
}
|
|
}
|
|
|
|
function clear() {
|
|
state.selectId = null
|
|
getOptions()
|
|
}
|
|
|
|
function change() {
|
|
emit("change", selectId)
|
|
}
|
|
|
|
onMounted(() => {
|
|
props.autoFirst && getOptions()
|
|
})
|
|
</script>
|