wuweihua
138 lines
3.4 KiB
Vue
138 lines
3.4 KiB
Vue
<template>
|
|
<div class="price-edit-panel" v-loading="loading">
|
|
<div class="panel-head">
|
|
<div class="panel-title">
|
|
<el-button link type="primary" @click="close">
|
|
<el-icon><arrow-left /></el-icon>
|
|
返回详情
|
|
</el-button>
|
|
<i class="panel-bar" />
|
|
<span>{{ title }}</span>
|
|
</div>
|
|
<div class="panel-actions">
|
|
<el-button @click="close">关闭</el-button>
|
|
<el-button type="primary" :disabled="!priceSetId" @click="close">完成</el-button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel-body">
|
|
<step-details
|
|
v-if="loaded"
|
|
:details="details"
|
|
:price-set-id="priceSetId"
|
|
:psv-id="version.psvId"
|
|
:set-type="setType"
|
|
:effective-time="version.effectiveTime"
|
|
:version-no="version.versionNo"
|
|
:ref-data="refData"
|
|
header-title="编辑产品价格"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup name="PriceEditPanel">
|
|
import { ArrowLeft } from '@element-plus/icons-vue'
|
|
import StepDetails from './StepDetails.vue'
|
|
import { usePriceSetRefData, useDetailCascade } from '../../composables/usePriceSetRefData'
|
|
import { getPriceSet } from '@/api/price/set'
|
|
|
|
const props = defineProps({
|
|
priceSetId: { type: [Number, String], default: undefined },
|
|
psvId: { type: [Number, String], default: undefined }
|
|
})
|
|
const emit = defineEmits(['close'])
|
|
|
|
const { proxy } = getCurrentInstance()
|
|
|
|
const refData = usePriceSetRefData()
|
|
const cascade = useDetailCascade(refData)
|
|
|
|
const loading = ref(false)
|
|
const loaded = ref(false)
|
|
const setType = ref('FIXED')
|
|
const version = reactive({ psvId: undefined, versionNo: 'V1', effectiveTime: undefined })
|
|
const details = ref([])
|
|
|
|
const title = computed(() => '编辑产品价格 · ' + (version.versionNo || ''))
|
|
|
|
function load() {
|
|
const id = props.priceSetId
|
|
if (!id) {
|
|
proxy.$modal.msgError('缺少套餐ID')
|
|
return
|
|
}
|
|
loading.value = true
|
|
loaded.value = false
|
|
getPriceSet(id).then(res => {
|
|
const data = res.data || {}
|
|
setType.value = data.setType || 'FIXED'
|
|
|
|
const versions = data.versions || []
|
|
const qPsv = props.psvId
|
|
const byQuery = qPsv != null ? versions.find(v => String(v.psvId) === String(qPsv)) : null
|
|
const current = byQuery || data.version || versions[0] || {}
|
|
version.psvId = current.psvId
|
|
version.versionNo = current.versionNo || 'V1'
|
|
version.effectiveTime = current.effectiveTime
|
|
|
|
const src = (current.details && current.details.length) ? current.details : (data.details || [])
|
|
details.value = src.map(d => cascade.hydrateRow(d, setType.value))
|
|
loaded.value = true
|
|
}).finally(() => {
|
|
loading.value = false
|
|
})
|
|
}
|
|
|
|
function close() {
|
|
emit('close')
|
|
}
|
|
|
|
onMounted(() => {
|
|
refData.loadProducts().finally(load)
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.price-edit-panel {
|
|
background: #fff;
|
|
border: 1px solid #e4e7ed;
|
|
border-radius: 8px;
|
|
margin-bottom: 16px;
|
|
}
|
|
.panel-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding: 12px 16px;
|
|
border-bottom: 1px solid #ebeef5;
|
|
}
|
|
.panel-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
min-width: 0;
|
|
}
|
|
.panel-bar {
|
|
width: 3px;
|
|
height: 14px;
|
|
border-radius: 2px;
|
|
background: #1890ff;
|
|
flex: none;
|
|
}
|
|
.panel-title span {
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
color: #303133;
|
|
}
|
|
.panel-actions {
|
|
flex: none;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.panel-body {
|
|
padding: 16px;
|
|
}</style>
|