检查项目设置-套餐设置界面
This commit is contained in:
@@ -0,0 +1,696 @@
|
||||
<template>
|
||||
<div class="package-settings">
|
||||
<!-- 顶部操作按钮区 -->
|
||||
<div class="header-actions">
|
||||
<el-button type="primary" @click="handlePackageManagement">套餐管理</el-button>
|
||||
<el-button @click="handleRefresh">刷新</el-button>
|
||||
<el-button type="success" @click="handleSave">保存</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 基本信息表单区 -->
|
||||
<div class="basic-info-section">
|
||||
<h3 class="section-title">基本信息</h3>
|
||||
<el-form
|
||||
ref="basicFormRef"
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
label-width="120px"
|
||||
class="basic-form"
|
||||
>
|
||||
<el-row :gutter="20">
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6">
|
||||
<el-form-item label="套餐类别" prop="packageType">
|
||||
<el-select v-model="formData.packageType" placeholder="请选择套餐类别" style="width: 100%">
|
||||
<el-option label="检查套餐" value="检查套餐" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6">
|
||||
<el-form-item label="套餐级别" prop="packageLevel">
|
||||
<el-select
|
||||
v-model="formData.packageLevel"
|
||||
placeholder="请选择套餐级别"
|
||||
style="width: 100%"
|
||||
@change="handlePackageLevelChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in packageLevelOptions"
|
||||
:key="item.dictValue"
|
||||
:label="item.dictLabel"
|
||||
:value="item.dictValue"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col v-if="formData.packageLevel === '2'" :xs="24" :sm="12" :md="8" :lg="6">
|
||||
<el-form-item label="科室选择" prop="department">
|
||||
<el-select v-model="formData.department" placeholder="请选择科室" style="width: 100%">
|
||||
<el-option
|
||||
v-for="dept in departments"
|
||||
:key="dept.dictValue"
|
||||
:label="dept.dictLabel"
|
||||
:value="dept.dictValue"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col v-if="formData.packageLevel === '3'" :xs="24" :sm="12" :md="8" :lg="6">
|
||||
<el-form-item label="用户选择" prop="user">
|
||||
<el-select v-model="formData.user" placeholder="请选择用户" style="width: 100%">
|
||||
<el-option label="当前用户" value="当前用户" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6">
|
||||
<el-form-item label="套餐名称" prop="packageName">
|
||||
<el-input v-model="formData.packageName" placeholder="请输入套餐名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6">
|
||||
<el-form-item label="卫生机构">
|
||||
<el-select v-model="formData.organization" placeholder="请选择卫生机构" style="width: 100%">
|
||||
<el-option label="演示医院" value="演示医院" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6">
|
||||
<el-form-item label="套餐金额">
|
||||
<el-input v-model="formData.packagePrice" :disabled="true" placeholder="自动计算">
|
||||
<template #append>元</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6">
|
||||
<el-form-item label="折扣">
|
||||
<el-input v-model="formData.discount" placeholder="请输入折扣">
|
||||
<template #append>%</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6">
|
||||
<el-form-item label="制单人">
|
||||
<el-input v-model="formData.creator" :disabled="true" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6">
|
||||
<el-form-item label="是否停用">
|
||||
<el-radio-group v-model="formData.isDisabled">
|
||||
<el-radio :value="0">启用</el-radio>
|
||||
<el-radio :value="1">停用</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6">
|
||||
<el-form-item label="显示套餐名">
|
||||
<el-radio-group v-model="formData.showPackageName">
|
||||
<el-radio :value="1">是</el-radio>
|
||||
<el-radio :value="0">否</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6">
|
||||
<el-form-item label="生成服务费">
|
||||
<el-radio-group v-model="formData.generateServiceFee">
|
||||
<el-radio :value="1">是</el-radio>
|
||||
<el-radio :value="0">否</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6">
|
||||
<el-form-item label="套餐价格">
|
||||
<el-radio-group v-model="formData.packagePriceEnabled">
|
||||
<el-radio :value="1">启用</el-radio>
|
||||
<el-radio :value="0">不启用</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6">
|
||||
<el-form-item label="服务费">
|
||||
<el-input-number
|
||||
v-model="formData.serviceFee"
|
||||
:precision="2"
|
||||
:min="0"
|
||||
placeholder="请输入服务费"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6">
|
||||
<el-form-item label="日期">
|
||||
<el-date-picker
|
||||
v-model="formData.createDate"
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
:disabled="true"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12">
|
||||
<el-form-item label="备注">
|
||||
<el-input v-model="formData.remark" type="textarea" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<!-- 套餐明细表格区 -->
|
||||
<div class="package-detail-section">
|
||||
<h3 class="section-title">套餐明细</h3>
|
||||
<el-table
|
||||
:data="detailData"
|
||||
border
|
||||
style="width: 100%"
|
||||
:max-height="450"
|
||||
>
|
||||
<el-table-column type="index" label="序号" width="60" align="center" />
|
||||
<el-table-column prop="code" label="编号" width="120" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-input v-if="row.editing" v-model="row.code" placeholder="请输入编号" />
|
||||
<span v-else>{{ row.code }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="itemName" label="项目名称/规格" min-width="200">
|
||||
<template #default="{ row }">
|
||||
<el-select
|
||||
v-if="row.editing"
|
||||
v-model="row.itemId"
|
||||
placeholder="请选择项目"
|
||||
filterable
|
||||
style="width: 100%"
|
||||
@change="handleItemSelect(row)"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in diagnosisTreatmentList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
<span v-else>{{ row.itemName }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="dose" label="剂量" width="80" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-input v-if="row.editing" v-model="row.dose" placeholder="-" />
|
||||
<span v-else>{{ row.dose || '-' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="method" label="途径" width="80" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-input v-if="row.editing" v-model="row.method" placeholder="-" />
|
||||
<span v-else>{{ row.method || '-' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="frequency" label="频次" width="80" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-input v-if="row.editing" v-model="row.frequency" placeholder="-" />
|
||||
<span v-else>{{ row.frequency || '-' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="days" label="天数" width="80" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-input v-if="row.editing" v-model="row.days" placeholder="-" />
|
||||
<span v-else>{{ row.days || '-' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="quantity" label="数量" width="100" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-input-number
|
||||
v-if="row.editing"
|
||||
v-model="row.quantity"
|
||||
:min="0"
|
||||
:precision="0"
|
||||
placeholder="请输入数量"
|
||||
style="width: 100%"
|
||||
@change="calculateAmount(row)"
|
||||
/>
|
||||
<span v-else>{{ row.quantity }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="unitPrice" label="单价" width="120" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-input-number
|
||||
v-if="row.editing"
|
||||
v-model="row.unitPrice"
|
||||
:min="0"
|
||||
:precision="6"
|
||||
placeholder="请输入单价"
|
||||
style="width: 100%"
|
||||
@change="calculateAmount(row)"
|
||||
/>
|
||||
<span v-else>{{ row.unitPrice?.toFixed(6) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="amount" label="金额" width="100" align="center">
|
||||
<template #default="{ row }">
|
||||
{{ row.amount?.toFixed(2) || '0.00' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="serviceCharge" label="服务费" width="100" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-input-number
|
||||
v-if="row.editing"
|
||||
v-model="row.serviceCharge"
|
||||
:min="0"
|
||||
:precision="2"
|
||||
placeholder="服务费"
|
||||
style="width: 100%"
|
||||
@change="calculateTotal(row)"
|
||||
/>
|
||||
<span v-else>{{ row.serviceCharge?.toFixed(2) || '0.00' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="total" label="总金额" width="100" align="center">
|
||||
<template #default="{ row }">
|
||||
{{ row.total?.toFixed(2) || '0.00' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="origin" label="产地" width="120">
|
||||
<template #default="{ row }">
|
||||
<el-input v-if="row.editing" v-model="row.origin" placeholder="-" />
|
||||
<span v-else>{{ row.origin || '-' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="150" align="center" fixed="right">
|
||||
<template #default="{ row, $index }">
|
||||
<el-button
|
||||
v-if="!row.editing"
|
||||
type="primary"
|
||||
size="small"
|
||||
icon="Edit"
|
||||
circle
|
||||
@click="handleEditRow(row)"
|
||||
/>
|
||||
<el-button
|
||||
v-if="row.editing"
|
||||
type="success"
|
||||
size="small"
|
||||
icon="Check"
|
||||
circle
|
||||
@click="handleConfirmRow(row)"
|
||||
/>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
icon="Plus"
|
||||
circle
|
||||
@click="handleAddRow"
|
||||
/>
|
||||
<el-button
|
||||
type="danger"
|
||||
size="small"
|
||||
icon="Delete"
|
||||
circle
|
||||
@click="handleDeleteRow($index)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getDicts } from '@/api/system/dict/data'
|
||||
import { addCheckPackage, updateCheckPackage } from '@/api/system/checkType'
|
||||
import { getDiagnosisTreatmentList } from '@/views/catalog/diagnosistreatment/components/diagnosistreatment'
|
||||
import { useUserStore } from '@/store/modules/user'
|
||||
|
||||
const userStore = useUserStore()
|
||||
|
||||
// 表单引用
|
||||
const basicFormRef = ref(null)
|
||||
|
||||
// 表单数据
|
||||
const formData = reactive({
|
||||
id: null,
|
||||
packageType: '检查套餐',
|
||||
packageLevel: '',
|
||||
department: '',
|
||||
user: '',
|
||||
packageName: '',
|
||||
organization: '演示医院',
|
||||
packagePrice: '0.00',
|
||||
discount: '',
|
||||
creator: userStore.name || '当前用户',
|
||||
isDisabled: 0,
|
||||
showPackageName: 1,
|
||||
generateServiceFee: 0,
|
||||
packagePriceEnabled: 1,
|
||||
serviceFee: 0,
|
||||
remark: '',
|
||||
createDate: new Date().toISOString().split('T')[0] // 自动生成当前系统日期
|
||||
})
|
||||
|
||||
// 表单验证规则
|
||||
const formRules = {
|
||||
packageType: [
|
||||
{ required: true, message: '请选择套餐类别', trigger: 'change' }
|
||||
],
|
||||
packageLevel: [
|
||||
{ required: true, message: '请选择套餐级别', trigger: 'change' }
|
||||
],
|
||||
packageName: [
|
||||
{ required: true, message: '请输入套餐名称', trigger: 'blur' }
|
||||
],
|
||||
department: [
|
||||
{ required: true, message: '请选择科室', trigger: 'change' }
|
||||
],
|
||||
user: [
|
||||
{ required: true, message: '请选择用户', trigger: 'change' }
|
||||
]
|
||||
}
|
||||
|
||||
// 套餐级别选项
|
||||
const packageLevelOptions = ref([])
|
||||
// 科室选项
|
||||
const departments = ref([])
|
||||
// 诊疗项目列表
|
||||
const diagnosisTreatmentList = ref([])
|
||||
|
||||
// 明细数据
|
||||
const detailData = ref([])
|
||||
|
||||
// 初始化数据
|
||||
onMounted(async () => {
|
||||
try {
|
||||
// 获取套餐级别字典
|
||||
try {
|
||||
const levelResponse = await getDicts('examination_item_package_level')
|
||||
if (levelResponse && levelResponse.data) {
|
||||
packageLevelOptions.value = levelResponse.data
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取套餐级别字典失败:', error)
|
||||
}
|
||||
|
||||
// 获取科室字典
|
||||
try {
|
||||
const deptResponse = await getDicts('dept')
|
||||
if (deptResponse && deptResponse.data) {
|
||||
departments.value = deptResponse.data
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取科室字典失败:', error)
|
||||
}
|
||||
|
||||
// 获取诊疗项目列表
|
||||
try {
|
||||
const treatmentResponse = await getDiagnosisTreatmentList({
|
||||
pageNo: 1,
|
||||
pageSize: 1000
|
||||
})
|
||||
if (treatmentResponse && treatmentResponse.data && treatmentResponse.data.records) {
|
||||
diagnosisTreatmentList.value = treatmentResponse.data.records
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取诊疗项目列表失败:', error)
|
||||
}
|
||||
|
||||
// 初始化一行空数据
|
||||
handleAddRow()
|
||||
} catch (error) {
|
||||
console.error('初始化数据失败:', error)
|
||||
}
|
||||
})
|
||||
|
||||
// 套餐级别变更处理
|
||||
function handlePackageLevelChange(value) {
|
||||
// 重置关联字段
|
||||
if (value !== '2') {
|
||||
formData.department = ''
|
||||
}
|
||||
if (value !== '3') {
|
||||
formData.user = ''
|
||||
}
|
||||
}
|
||||
|
||||
// 添加行
|
||||
function handleAddRow() {
|
||||
detailData.value.push({
|
||||
code: '',
|
||||
itemId: null,
|
||||
itemName: '',
|
||||
dose: '',
|
||||
method: '',
|
||||
frequency: '',
|
||||
days: '',
|
||||
quantity: 1,
|
||||
unitPrice: 0,
|
||||
amount: 0,
|
||||
serviceCharge: 0,
|
||||
total: 0,
|
||||
origin: '',
|
||||
editing: true
|
||||
})
|
||||
}
|
||||
|
||||
// 编辑行
|
||||
function handleEditRow(row) {
|
||||
row.editing = true
|
||||
}
|
||||
|
||||
// 确认编辑
|
||||
function handleConfirmRow(row) {
|
||||
if (!row.itemName) {
|
||||
ElMessage.warning('请选择项目')
|
||||
return
|
||||
}
|
||||
if (!row.quantity || row.quantity <= 0) {
|
||||
ElMessage.warning('请输入有效数量')
|
||||
return
|
||||
}
|
||||
row.editing = false
|
||||
}
|
||||
|
||||
// 删除行
|
||||
function handleDeleteRow(index) {
|
||||
ElMessageBox.confirm('确定要删除这一行吗?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
detailData.value.splice(index, 1)
|
||||
calculatePackagePrice()
|
||||
ElMessage.success('删除成功')
|
||||
}).catch(() => {})
|
||||
}
|
||||
|
||||
// 项目选择处理
|
||||
function handleItemSelect(row) {
|
||||
const item = diagnosisTreatmentList.value.find(i => i.id === row.itemId)
|
||||
if (item) {
|
||||
row.itemName = item.name || ''
|
||||
row.code = item.busNo || ''
|
||||
// 获取单价，使用retailPrice
|
||||
row.unitPrice = item.retailPrice || 0
|
||||
calculateAmount(row)
|
||||
}
|
||||
}
|
||||
|
||||
// 计算金额
|
||||
function calculateAmount(row) {
|
||||
row.amount = (row.quantity || 0) * (row.unitPrice || 0)
|
||||
calculateTotal(row)
|
||||
}
|
||||
|
||||
// 计算总金额
|
||||
function calculateTotal(row) {
|
||||
row.total = (row.amount || 0) + (row.serviceCharge || 0)
|
||||
calculatePackagePrice()
|
||||
}
|
||||
|
||||
// 计算套餐金额
|
||||
function calculatePackagePrice() {
|
||||
const total = detailData.value.reduce((sum, item) => sum + (item.total || 0), 0)
|
||||
formData.packagePrice = total.toFixed(2)
|
||||
}
|
||||
|
||||
// 套餐管理
|
||||
function handlePackageManagement() {
|
||||
ElMessage.info('即将进入套餐管理界面')
|
||||
}
|
||||
|
||||
// 刷新
|
||||
function handleRefresh() {
|
||||
ElMessageBox.confirm('确定要刷新页面吗？未保存的数据将丢失', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
location.reload()
|
||||
}).catch(() => {})
|
||||
}
|
||||
|
||||
// 保存
|
||||
async function handleSave() {
|
||||
try {
|
||||
// 验证基本信息
|
||||
await basicFormRef.value.validate()
|
||||
|
||||
// 验证明细数据
|
||||
if (detailData.value.length === 0) {
|
||||
ElMessage.warning('请至少添加一条套餐明细')
|
||||
return
|
||||
}
|
||||
|
||||
// 检查是否有未确认的编辑行
|
||||
const hasEditingRow = detailData.value.some(row => row.editing)
|
||||
if (hasEditingRow) {
|
||||
ElMessage.warning('请先确认所有正在编辑的行')
|
||||
return
|
||||
}
|
||||
|
||||
// 检查明细数据完整性
|
||||
const hasEmptyItem = detailData.value.some(row => !row.itemName || !row.quantity)
|
||||
if (hasEmptyItem) {
|
||||
ElMessage.warning('请完善所有明细项目信息')
|
||||
return
|
||||
}
|
||||
|
||||
// 更新创建日期为当前系统时间
|
||||
formData.createDate = new Date().toISOString().split('T')[0]
|
||||
|
||||
// 构建保存数据
|
||||
const saveData = {
|
||||
id: formData.id,
|
||||
packageName: formData.packageName,
|
||||
code: formData.code || '',
|
||||
description: formData.description || '',
|
||||
packageType: formData.packageType,
|
||||
packageLevel: formData.packageLevel,
|
||||
department: formData.department || '',
|
||||
user: formData.user || '',
|
||||
organization: formData.organization,
|
||||
packagePrice: formData.packagePrice,
|
||||
discount: formData.discount ? parseFloat(formData.discount) : null,
|
||||
creator: formData.creator,
|
||||
isDisabled: formData.isDisabled,
|
||||
showPackageName: formData.showPackageName,
|
||||
generateServiceFee: formData.generateServiceFee,
|
||||
packagePriceEnabled: formData.packagePriceEnabled,
|
||||
serviceFee: formData.serviceFee || 0,
|
||||
remark: formData.remark || '',
|
||||
createDate: formData.createDate,
|
||||
items: detailData.value.map(item => ({
|
||||
itemCode: item.code || '',
|
||||
itemName: item.itemName || '',
|
||||
checkItemId: item.itemId || null, // 诊疗项目ID
|
||||
dose: item.dose || '',
|
||||
method: item.method || '',
|
||||
frequency: item.frequency || '',
|
||||
days: item.days || '',
|
||||
quantity: item.quantity || 1,
|
||||
unitPrice: item.unitPrice || 0,
|
||||
amount: item.amount || 0,
|
||||
serviceCharge: item.serviceCharge || 0,
|
||||
total: item.total || 0,
|
||||
origin: item.origin || ''
|
||||
}))
|
||||
}
|
||||
|
||||
// 调用API保存
|
||||
const response = await addCheckPackage(saveData)
|
||||
|
||||
if (response && response.code === 200) {
|
||||
ElMessage.success('套餐数据已保存')
|
||||
// 如果有返回ID，更新formData.id以便后续更新
|
||||
if (response.data) {
|
||||
formData.id = response.data
|
||||
}
|
||||
} else {
|
||||
ElMessage.error(response?.msg || '保存失败，请检查表单数据')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('保存失败:', error)
|
||||
if (error !== 'cancel') {
|
||||
ElMessage.error('保存失败，请检查表单数据')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.package-settings {
|
||||
padding: 24px;
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 24px;
|
||||
padding: 12px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.basic-info-section,
|
||||
.package-detail-section {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 24px;
|
||||
margin-bottom: 24px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #000000;
|
||||
margin: 0 0 16px 0;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
}
|
||||
|
||||
.basic-form {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.el-table {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.package-settings {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.header-actions .el-button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.basic-info-section,
|
||||
.package-detail-section {
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user