110 lines
3.4 KiB
Vue
110 lines
3.4 KiB
Vue
<template>
|
||
<div class="catalog-page">
|
||
<el-card shadow="never">
|
||
<div class="mb-md text-xs text-text-placeholder">
|
||
机构只能勾选「是否开展」与「价格」，目录项目名称与来源由属地/国家库决定，不可修改。
|
||
</div>
|
||
<el-table v-loading="loading" :data="rows" border>
|
||
<el-table-column prop="name" label="项目" min-width="180">
|
||
<template #default="{ row }">
|
||
{{ row.name }}
|
||
<el-tag v-if="row.isNewNational" type="warning" size="small" class="ml-xs">国家新增</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="来源" width="90" align="center">
|
||
<template #default="{ row }">{{ row.srcType === 'local' ? '属地' : '国家' }}</template>
|
||
</el-table-column>
|
||
<el-table-column label="是否开展" width="110" align="center">
|
||
<template #default="{ row }">
|
||
<el-switch
|
||
v-model="row.isEnabled"
|
||
:loading="togglingId === row.id"
|
||
@change="toggleEnabled(row)"
|
||
/>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="价格" width="160">
|
||
<template #default="{ row }">
|
||
<el-input v-model="row.price" placeholder="预留，本期不参与结算" clearable />
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作" width="100" align="center" fixed="right">
|
||
<template #default="{ row }">
|
||
<el-button
|
||
v-permission="'svc-org:config'"
|
||
link
|
||
type="primary"
|
||
:loading="savingId === row.id"
|
||
@click="savePrice(row)"
|
||
>
|
||
保存
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-card>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { onMounted, ref } from 'vue'
|
||
import { ElMessage } from 'element-plus'
|
||
import { ApiError } from '@/api/http'
|
||
import { configSvcOrg } from '@/api/catalog'
|
||
import { loadL4Projects, type L4ProjectRow } from '../l4-projects'
|
||
|
||
defineOptions({ name: 'svc-config-catalog' })
|
||
|
||
const rows = ref<L4ProjectRow[]>([])
|
||
const loading = ref(false)
|
||
const togglingId = ref<string | null>(null)
|
||
const savingId = ref<string | null>(null)
|
||
|
||
async function load(): Promise<void> {
|
||
loading.value = true
|
||
try {
|
||
rows.value = await loadL4Projects()
|
||
} catch (e) {
|
||
if (e instanceof ApiError) ElMessage.error(e.message)
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
/** 开关即存：只改 isEnabled。失败回滚开关。 */
|
||
async function toggleEnabled(row: Record<string, any>): Promise<void> {
|
||
togglingId.value = row.id
|
||
const before = row.isEnabled
|
||
try {
|
||
await configSvcOrg({ id: row.id, isEnabled: row.isEnabled })
|
||
ElMessage.success('已保存')
|
||
} catch (e) {
|
||
row.isEnabled = !before
|
||
if (e instanceof ApiError) ElMessage.error(e.message)
|
||
} finally {
|
||
togglingId.value = null
|
||
}
|
||
}
|
||
|
||
/** 配价：只改 price。 */
|
||
async function savePrice(row: Record<string, any>): Promise<void> {
|
||
savingId.value = row.id
|
||
try {
|
||
await configSvcOrg({ id: row.id, price: row.price ?? undefined })
|
||
ElMessage.success('已保存')
|
||
} catch (e) {
|
||
if (e instanceof ApiError) ElMessage.error(e.message)
|
||
} finally {
|
||
savingId.value = null
|
||
}
|
||
}
|
||
|
||
onMounted(load)
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.catalog-page {
|
||
@apply flex h-full flex-col;
|
||
}
|
||
</style>
|