fix: 修复供应商授权弹窗选择类型后无选项问题
- 根据选择的类型动态加载分类或商品列表 - 使用下拉选择框替代手动输入ID - 支持搜索过滤(filterable) - 添加加载状态提示 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -36,16 +36,28 @@
|
|||||||
<el-button type="primary" @click="addSupplier">保存</el-button>
|
<el-button type="primary" @click="addSupplier">保存</el-button>
|
||||||
</template>
|
</template>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
<el-dialog v-model="showAuth" title="授权管理" width="400px">
|
<el-dialog v-model="showAuth" title="授权管理" width="500px">
|
||||||
<el-form :model="authForm" label-width="80px">
|
<el-form :model="authForm" label-width="80px">
|
||||||
<el-form-item label="类型">
|
<el-form-item label="类型">
|
||||||
<el-select v-model="authForm.type" popper-class="dark-select-dropdown"><el-option value="category" label="分类" /><el-option value="product" label="商品" /></el-select>
|
<el-select v-model="authForm.type" @change="handleTypeChange" placeholder="选择类型">
|
||||||
|
<el-option value="category" label="分类" />
|
||||||
|
<el-option value="product" label="商品" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="关联项">
|
||||||
|
<el-select v-model="authForm.ref_id" filterable placeholder="请选择" :loading="loadingOptions">
|
||||||
|
<el-option
|
||||||
|
v-for="item in optionsList"
|
||||||
|
:key="item.id"
|
||||||
|
:value="item.id"
|
||||||
|
:label="item.name"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="关联ID"><el-input-number v-model="authForm.ref_id" /></el-form-item>
|
|
||||||
</el-form>
|
</el-form>
|
||||||
<template #footer>
|
<template #footer>
|
||||||
<el-button @click="showAuth = false">取消</el-button>
|
<el-button @click="showAuth = false">取消</el-button>
|
||||||
<el-button type="primary" @click="saveAuth">保存</el-button>
|
<el-button type="primary" @click="saveAuth" :disabled="!authForm.ref_id">保存</el-button>
|
||||||
</template>
|
</template>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
</div>
|
</div>
|
||||||
@@ -54,7 +66,7 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, reactive, computed, onMounted } from 'vue'
|
import { ref, reactive, computed, onMounted } from 'vue'
|
||||||
import { ElMessage } from 'element-plus'
|
import { ElMessage } from 'element-plus'
|
||||||
import { adminApi } from '../../api'
|
import { adminApi, categoryApi, productApi } from '../../api'
|
||||||
|
|
||||||
const suppliers = ref<any[]>([])
|
const suppliers = ref<any[]>([])
|
||||||
const showAdd = ref(false)
|
const showAdd = ref(false)
|
||||||
@@ -69,6 +81,8 @@ const paginatedSuppliers = computed(() => {
|
|||||||
})
|
})
|
||||||
const form = reactive({ username: '', email: '', password: '' })
|
const form = reactive({ username: '', email: '', password: '' })
|
||||||
const authForm = reactive({ type: 'category', ref_id: 0 })
|
const authForm = reactive({ type: 'category', ref_id: 0 })
|
||||||
|
const optionsList = ref<{ id: number; name: string }[]>([])
|
||||||
|
const loadingOptions = ref(false)
|
||||||
|
|
||||||
function handlePageChange() {
|
function handlePageChange() {
|
||||||
window.scrollTo({ top: 0, behavior: 'smooth' })
|
window.scrollTo({ top: 0, behavior: 'smooth' })
|
||||||
@@ -86,12 +100,47 @@ async function addSupplier() {
|
|||||||
await fetchSuppliers()
|
await fetchSuppliers()
|
||||||
}
|
}
|
||||||
|
|
||||||
function authorize(id: number) {
|
async function authorize(id: number) {
|
||||||
authSupplierId.value = id
|
authSupplierId.value = id
|
||||||
|
authForm.type = 'category'
|
||||||
|
authForm.ref_id = 0
|
||||||
|
await loadOptions()
|
||||||
showAuth.value = true
|
showAuth.value = true
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function handleTypeChange() {
|
||||||
|
authForm.ref_id = 0
|
||||||
|
await loadOptions()
|
||||||
|
}
|
||||||
|
|
||||||
|
async function loadOptions() {
|
||||||
|
loadingOptions.value = true
|
||||||
|
try {
|
||||||
|
if (authForm.type === 'category') {
|
||||||
|
const res: any = await categoryApi.list()
|
||||||
|
optionsList.value = (res.data || []).map((item: any) => ({
|
||||||
|
id: item.id,
|
||||||
|
name: item.name
|
||||||
|
}))
|
||||||
|
} else {
|
||||||
|
const res: any = await productApi.list()
|
||||||
|
optionsList.value = (res.data || []).map((item: any) => ({
|
||||||
|
id: item.id,
|
||||||
|
name: item.name
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
optionsList.value = []
|
||||||
|
} finally {
|
||||||
|
loadingOptions.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
async function saveAuth() {
|
async function saveAuth() {
|
||||||
|
if (!authForm.ref_id) {
|
||||||
|
ElMessage.warning('请选择关联项')
|
||||||
|
return
|
||||||
|
}
|
||||||
await adminApi.authorizeSupplier(authSupplierId.value, authForm)
|
await adminApi.authorizeSupplier(authSupplierId.value, authForm)
|
||||||
ElMessage.success('授权成功')
|
ElMessage.success('授权成功')
|
||||||
showAuth.value = false
|
showAuth.value = false
|
||||||
|
|||||||
Reference in New Issue
Block a user