|
|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <Dialog v-model="dialogVisible" :title="dialogTitle" width="72vw">
|
|
|
+ <Dialog v-model="dialogVisible" scroll :title="dialogTitle" width="72vw">
|
|
|
<el-form
|
|
|
ref="formRef"
|
|
|
:model="formData"
|
|
|
@@ -142,44 +142,7 @@
|
|
|
</div>
|
|
|
</el-form-item>
|
|
|
|
|
|
- <!-- 消费券选择 -->
|
|
|
- <el-form-item label="消费券" prop="consumerVoucherId">
|
|
|
- <el-select
|
|
|
- v-model="formData.consumerVoucherId"
|
|
|
- placeholder="请选择消费券"
|
|
|
- class="w-full"
|
|
|
- clearable
|
|
|
|
|
|
- @change="handleVoucherChange"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="item in consumerVoucherList"
|
|
|
- :key="item.id"
|
|
|
- :label="`${item.voucherType === 'percentage' ? '百分比' : '固定金额'} - ${item.amount}${item.voucherType === 'percentage' ? '%' : '元'}`"
|
|
|
- :value="item.id"
|
|
|
- />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <!-- 消费券金额/百分比编辑 -->
|
|
|
- <el-form-item
|
|
|
- v-if="selectedVoucher"
|
|
|
- :label="selectedVoucher.voucherType === 'percentage' ? '百分比值' : '使用金额'"
|
|
|
- prop="voucherValue"
|
|
|
- :rules="voucherValueRules"
|
|
|
- >
|
|
|
- <el-input
|
|
|
- v-model="formData.voucherValue"
|
|
|
- :placeholder="selectedVoucher.voucherType === 'percentage' ? '请输入1-100之间的百分比' : '请输入使用金额'"
|
|
|
- :disabled="isDetailMode"
|
|
|
- class="w-full"
|
|
|
- >
|
|
|
- <template #append>{{ selectedVoucher.voucherType === 'percentage' ? '%' : '元' }}</template>
|
|
|
- </el-input>
|
|
|
- <div class="tip-text" v-if="selectedVoucher">
|
|
|
- 消费券总额:{{ selectedVoucher.amount }}{{ selectedVoucher.voucherType === 'percentage' ? '%' : '元' }}
|
|
|
- </div>
|
|
|
- </el-form-item>
|
|
|
|
|
|
|
|
|
|
|
|
@@ -260,85 +223,100 @@
|
|
|
</div>
|
|
|
</el-form-item>
|
|
|
|
|
|
- <!-- 需求明细 - 使用 Transfer 穿梭框 -->
|
|
|
- <el-form-item label="需求明细" prop="serviceItems" required style="margin-top: 40px">
|
|
|
- <div class="transfer-wrapper">
|
|
|
- <div class="transfer-header" v-if="!isDetailMode">
|
|
|
- <el-button type="primary" size="small" @click="addToRight" :disabled="leftSelected.length === 0">
|
|
|
- 添加项目 >
|
|
|
- </el-button>
|
|
|
- <el-button type="primary" size="small" @click="addToLeft" :disabled="rightSelected.length === 0">
|
|
|
- < 移除项目
|
|
|
- </el-button>
|
|
|
- </div>
|
|
|
- <div class="transfer-header" v-else>
|
|
|
- <span style="color: #909399; font-size: 14px;">已选服务项目</span>
|
|
|
- </div>
|
|
|
- <div class="transfer-content">
|
|
|
- <div class="transfer-panel">
|
|
|
- <div class="transfer-panel__header">
|
|
|
- <el-checkbox v-model="leftCheckAll" :indeterminate="leftIsIndeterminate" @change="handleLeftCheckAllChange" label="可选服务项目"/>
|
|
|
- <span>{{ leftSelected.length }}/{{ serviceItemTransferData.length }}</span>
|
|
|
- </div>
|
|
|
- <div class="transfer-panel__filter">
|
|
|
- <el-input v-model="leftFilter" placeholder="请输入搜索内容" clearable prefix-icon="Search" />
|
|
|
- </div>
|
|
|
- <div class="transfer-panel__list">
|
|
|
- <el-checkbox-group v-model="leftSelected">
|
|
|
- <el-checkbox
|
|
|
- v-for="item in filteredLeftItems"
|
|
|
- :key="item.key"
|
|
|
- :label="item.key"
|
|
|
- class="transfer-item"
|
|
|
- >
|
|
|
- {{ item.label }}
|
|
|
- </el-checkbox>
|
|
|
- </el-checkbox-group>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div style="width: 20px;background-color: #e4e7ed"></div>
|
|
|
- <div class="transfer-panel">
|
|
|
- <div class="transfer-panel__header">
|
|
|
- <el-checkbox v-model="rightCheckAll" :indeterminate="rightIsIndeterminate" @change="handleRightCheckAllChange" label="已选服务项目"/>
|
|
|
- <span>{{ rightSelected.length }}/{{ rightItems.length }}</span>
|
|
|
- </div>
|
|
|
- <div class="transfer-panel__filter">
|
|
|
- <el-input v-model="rightFilter" placeholder="请输入搜索内容" clearable prefix-icon="Search" />
|
|
|
- </div>
|
|
|
- <div class="transfer-panel__list">
|
|
|
- <el-checkbox-group v-model="rightSelected">
|
|
|
- <el-checkbox
|
|
|
- v-for="item in filteredRightItems"
|
|
|
- :key="item.key"
|
|
|
- :label="item.key"
|
|
|
- class="transfer-item"
|
|
|
- >
|
|
|
- {{ item.label }}
|
|
|
- </el-checkbox>
|
|
|
- </el-checkbox-group>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <!-- 需求明细 - 使用远程搜索多选输入框 -->
|
|
|
+ <el-form-item label="项目明细" prop="serviceItems" required style="margin-top: 40px">
|
|
|
+ <el-select
|
|
|
+ v-model="formData.serviceItems"
|
|
|
+ placeholder="请输入服务项目名称搜索"
|
|
|
+ class="w-full service-item-select"
|
|
|
+ filterable
|
|
|
+ remote
|
|
|
+ multiple
|
|
|
+ clearable
|
|
|
+ :disabled="isDetailMode"
|
|
|
+ :remote-method="searchServiceItemRemote"
|
|
|
+ :loading="serviceItemSearchLoading"
|
|
|
+ @change="handleServiceItemChange"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in serviceItemSearchOptions"
|
|
|
+ :key="item.id"
|
|
|
+ :label="`${item.serviceName || item.itemName || item.name} (${item.amount}元)`"
|
|
|
+ :value="item.id"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <!-- 消费券选择 -->
|
|
|
+ <el-row :gutter="20" style="margin-top: 40px">
|
|
|
+ <el-col :span="10">
|
|
|
+ <el-form-item label="消费券" prop="consumerVoucherId">
|
|
|
+ <el-select
|
|
|
+ v-model="formData.consumerVoucherId"
|
|
|
+ placeholder="请选择消费券"
|
|
|
+ class="w-full"
|
|
|
+ clearable
|
|
|
+ @change="handleVoucherChange"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in consumerVoucherList"
|
|
|
+ :key="item.id"
|
|
|
+ :label="`${item.amount}元`"
|
|
|
+ :value="item.id"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="14">
|
|
|
+ <el-form-item
|
|
|
+ label="抵扣方式"
|
|
|
+ prop="voucherValue"
|
|
|
+ :rules="voucherValueRules"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ v-model="formData.voucherValue"
|
|
|
+ placeholder="请输入抵扣金额"
|
|
|
+ :disabled="isDetailMode||!formData.consumerVoucherId"
|
|
|
+ class="w-full"
|
|
|
+ >
|
|
|
+ <template #prepend>
|
|
|
+ <el-select v-model="formData.voucherType" placeholder="选择方式" style="width: 115px" :disabled="isDetailMode || !formData.consumerVoucherId">
|
|
|
+ <el-option label="按金额" value="amount" />
|
|
|
+ <el-option label="按百分比" value="percentage" />
|
|
|
+ </el-select>
|
|
|
+ </template>
|
|
|
+ <template #append>{{ formData.voucherType === 'percentage' ? '%' : '元' }}</template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <!-- 消费券提示信息 -->
|
|
|
+ <el-form-item v-if="selectedVoucher">
|
|
|
+ <div class="tip-text">
|
|
|
+ 消费券总额:{{ selectedVoucher.amount }}元({{ formData.voucherType === 'percentage' ? '按百分比抵扣,输入' + formData.voucherValue + '%可抵扣' + discountAmount + '元' : '按固定金额抵扣' }})
|
|
|
</div>
|
|
|
</el-form-item>
|
|
|
+
|
|
|
<!-- 此处为金额板块 -->
|
|
|
- <el-divider content-position="left">金额明细</el-divider>
|
|
|
+ <el-divider content-position="left" style="margin-top: 50px">金额明细</el-divider>
|
|
|
<el-row :gutter="20">
|
|
|
<el-col :span="8" :xs="24">
|
|
|
<el-form-item label="总金额">
|
|
|
- <el-input v-model="totalAmount" disabled class="w-full">
|
|
|
- <template #append>元</template>
|
|
|
- </el-input>
|
|
|
+ <div class="amount-display">
|
|
|
+ <span class="amount-value">¥{{ totalAmount }}</span>
|
|
|
+ </div>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="8" :xs="24">
|
|
|
<el-form-item label="优惠金额">
|
|
|
- <el-input v-model="discountAmount" disabled class="w-full">
|
|
|
- <template #append>元</template>
|
|
|
- </el-input>
|
|
|
+ <div class="amount-display">
|
|
|
+ <span class="amount-value">¥{{ discountAmount }}</span>
|
|
|
+ </div>
|
|
|
<div class="tip-text" v-if="selectedVoucher">
|
|
|
- 消费券类型:{{ selectedVoucher.voucherType === 'percentage' ? '百分比' : '固定金额' }}
|
|
|
- <span v-if="selectedVoucher.voucherType === 'percentage'">
|
|
|
+ 抵扣方式:{{ formData.voucherType === 'percentage' ? '按百分比' : '按固定金额' }}
|
|
|
+ <span v-if="formData.voucherType === 'percentage' && formData.voucherValue">
|
|
|
({{ formData.voucherValue }}%)
|
|
|
</span>
|
|
|
</div>
|
|
|
@@ -346,9 +324,9 @@
|
|
|
</el-col>
|
|
|
<el-col :span="8" :xs="24">
|
|
|
<el-form-item label="自费金额">
|
|
|
- <el-input v-model="selfPayAmount" disabled class="w-full" type="number">
|
|
|
- <template #append>元</template>
|
|
|
- </el-input>
|
|
|
+ <div class="amount-display">
|
|
|
+ <span class="amount-value">¥{{ selfPayAmount }}</span>
|
|
|
+ </div>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
@@ -502,13 +480,9 @@ const serviceAreaFilter = ref('')
|
|
|
const servicePersonKeyword = ref('')
|
|
|
const selectedServicePerson = ref<any>(null)
|
|
|
|
|
|
-// 自定义穿梭框相关
|
|
|
-const leftSelected = ref<number[]>([])
|
|
|
-const rightSelected = ref<number[]>([])
|
|
|
-const leftFilter = ref('')
|
|
|
-const rightFilter = ref('')
|
|
|
-const leftCheckAll = ref(false)
|
|
|
-const rightCheckAll = ref(false)
|
|
|
+// 服务项目远程搜索相关
|
|
|
+const serviceItemSearchLoading = ref(false)
|
|
|
+const serviceItemSearchOptions = ref<any[]>([])
|
|
|
|
|
|
const formData = reactive({
|
|
|
elderId: undefined as number | undefined,
|
|
|
@@ -524,7 +498,8 @@ const formData = reactive({
|
|
|
serviceItems: [] as number[],
|
|
|
remark: '',
|
|
|
consumerVoucherId: undefined as number | undefined,
|
|
|
- voucherValue: ''
|
|
|
+ voucherValue: '',
|
|
|
+ voucherType: 'amount' as 'amount' | 'percentage'
|
|
|
})
|
|
|
|
|
|
// 消费券列表
|
|
|
@@ -547,16 +522,20 @@ const totalAmount = computed(() => {
|
|
|
// 优惠金额(消费券抵扣金额)
|
|
|
const discountAmount = computed(() => {
|
|
|
if (!selectedVoucher.value || !formData.voucherValue) return '0.00'
|
|
|
+
|
|
|
const total = parseFloat(totalAmount.value)
|
|
|
- if (selectedVoucher.value.voucherType === 'percentage') {
|
|
|
- // 百分比类型:总金额 × 百分比
|
|
|
- const percentage = parseFloat(formData.voucherValue) || 0
|
|
|
- return (total * percentage / 100).toFixed(2)
|
|
|
+ const maxAmount = parseFloat(selectedVoucher.value.amount) || 0
|
|
|
+ const voucherVal = parseFloat(formData.voucherValue) || 0
|
|
|
+
|
|
|
+ if (formData.voucherType === 'percentage') {
|
|
|
+ // 百分比抵扣:总价 × 百分比
|
|
|
+ let discount = total * voucherVal / 100
|
|
|
+ // 不能超过消费券总额
|
|
|
+ discount = Math.min(discount, maxAmount)
|
|
|
+ return discount.toFixed(2)
|
|
|
} else {
|
|
|
- // 固定金额类型:直接使用 voucherValue
|
|
|
- const voucherVal = parseFloat(formData.voucherValue) || 0
|
|
|
- // 优惠金额不能超过总金额
|
|
|
- return Math.min(voucherVal, total).toFixed(2)
|
|
|
+ // 固定金额抵扣
|
|
|
+ return Math.min(voucherVal, total, maxAmount).toFixed(2)
|
|
|
}
|
|
|
})
|
|
|
|
|
|
@@ -567,31 +546,26 @@ const selfPayAmount = computed(() => {
|
|
|
return (total - discount).toFixed(2)
|
|
|
})
|
|
|
|
|
|
-// 消费券金额/百分比校验规则
|
|
|
+// 消费券金额校验规则
|
|
|
const voucherValueRules = computed(() => {
|
|
|
if (!selectedVoucher.value) return []
|
|
|
-
|
|
|
- if (selectedVoucher.value.voucherType === 'percentage') {
|
|
|
- return [
|
|
|
- { required: true, message: '请输入百分比值', trigger: 'blur' },
|
|
|
- {
|
|
|
- validator: (rule: any, value: any, callback: any) => {
|
|
|
- const num = Number(value)
|
|
|
+ return [
|
|
|
+ {
|
|
|
+ validator: (rule: any, value: any, callback: any) => {
|
|
|
+ if (!value || Number(value) <= 0) {
|
|
|
+ callback(new Error(formData.voucherType === 'percentage' ? '请输入百分比' : '请输入抵扣金额'))
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const num = Number(value)
|
|
|
+ if (formData.voucherType === 'percentage') {
|
|
|
+ // 百分比校验
|
|
|
if (isNaN(num) || num < 1 || num > 100) {
|
|
|
callback(new Error('百分比值必须在1-100之间'))
|
|
|
} else {
|
|
|
callback()
|
|
|
}
|
|
|
- },
|
|
|
- trigger: 'blur'
|
|
|
- }
|
|
|
- ]
|
|
|
- } else {
|
|
|
- return [
|
|
|
- { required: true, message: '请输入使用金额', trigger: 'blur' },
|
|
|
- {
|
|
|
- validator: (rule: any, value: any, callback: any) => {
|
|
|
- const num = Number(value)
|
|
|
+ } else {
|
|
|
+ // 金额校验
|
|
|
if (isNaN(num) || num <= 0) {
|
|
|
callback(new Error('金额必须大于0'))
|
|
|
} else if (num > Number(selectedVoucher.value.amount)) {
|
|
|
@@ -599,11 +573,11 @@ const voucherValueRules = computed(() => {
|
|
|
} else {
|
|
|
callback()
|
|
|
}
|
|
|
- },
|
|
|
- trigger: 'blur'
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ]
|
|
|
})
|
|
|
|
|
|
const formRules = {
|
|
|
@@ -634,95 +608,32 @@ const formRules = {
|
|
|
serviceItems: [{ required: true, message: '请选择服务项目', trigger: 'change', type: 'array' }]
|
|
|
}
|
|
|
|
|
|
-// 服务项目穿梭框数据
|
|
|
-const serviceItemTransferData = computed(() => {
|
|
|
- return serviceItemList.value.map(item => ({
|
|
|
- key: item.id,
|
|
|
- label: `${item.serviceName || item.itemName || item.name} - (${item.amount}元)`,
|
|
|
- disabled: false
|
|
|
- }))
|
|
|
-})
|
|
|
-
|
|
|
-// 右侧已选项(已选服务项目)
|
|
|
-const rightItems = computed(() => {
|
|
|
- return serviceItemTransferData.value.filter(item => formData.serviceItems.includes(item.key))
|
|
|
-})
|
|
|
-
|
|
|
-// 左侧可选项目(过滤掉已选的)
|
|
|
-const leftItems = computed(() => {
|
|
|
- return serviceItemTransferData.value.filter(item => !formData.serviceItems.includes(item.key))
|
|
|
-})
|
|
|
-
|
|
|
-// 过滤后的左侧项目
|
|
|
-const filteredLeftItems = computed(() => {
|
|
|
- if (!leftFilter.value) return leftItems.value
|
|
|
- return leftItems.value.filter(item =>
|
|
|
- item.label.toLowerCase().includes(leftFilter.value.toLowerCase())
|
|
|
- )
|
|
|
-})
|
|
|
-
|
|
|
-// 过滤后的右侧项目
|
|
|
-const filteredRightItems = computed(() => {
|
|
|
- if (!rightFilter.value) return rightItems.value
|
|
|
- return rightItems.value.filter(item =>
|
|
|
- item.label.toLowerCase().includes(rightFilter.value.toLowerCase())
|
|
|
- )
|
|
|
-})
|
|
|
-
|
|
|
-// 左侧全选状态
|
|
|
-const leftIsIndeterminate = computed(() => {
|
|
|
- return leftSelected.value.length > 0 && leftSelected.value.length < filteredLeftItems.value.length
|
|
|
-})
|
|
|
-
|
|
|
-// 右侧全选状态
|
|
|
-const rightIsIndeterminate = computed(() => {
|
|
|
- return rightSelected.value.length > 0 && rightSelected.value.length < filteredRightItems.value.length
|
|
|
-})
|
|
|
-
|
|
|
-// 监听左侧选择变化
|
|
|
-watch(leftSelected, (val) => {
|
|
|
- leftCheckAll.value = val.length === filteredLeftItems.value.length && val.length > 0
|
|
|
-})
|
|
|
-
|
|
|
-// 监听右侧选择变化
|
|
|
-watch(rightSelected, (val) => {
|
|
|
- rightCheckAll.value = val.length === filteredRightItems.value.length && val.length > 0
|
|
|
-})
|
|
|
-
|
|
|
-// 监听左侧过滤变化,清空选择
|
|
|
-watch(leftFilter, () => {
|
|
|
- leftSelected.value = []
|
|
|
- leftCheckAll.value = false
|
|
|
-})
|
|
|
-
|
|
|
-// 监听右侧过滤变化,清空选择
|
|
|
-watch(rightFilter, () => {
|
|
|
- rightSelected.value = []
|
|
|
- rightCheckAll.value = false
|
|
|
-})
|
|
|
-
|
|
|
-// 左侧全选
|
|
|
-const handleLeftCheckAllChange = (val: boolean) => {
|
|
|
- leftSelected.value = val ? filteredLeftItems.value.map(item => item.key) : []
|
|
|
-}
|
|
|
-
|
|
|
-// 右侧全选
|
|
|
-const handleRightCheckAllChange = (val: boolean) => {
|
|
|
- rightSelected.value = val ? filteredRightItems.value.map(item => item.key) : []
|
|
|
-}
|
|
|
-
|
|
|
-// 添加到右侧
|
|
|
-const addToRight = () => {
|
|
|
- formData.serviceItems.push(...leftSelected.value)
|
|
|
- leftSelected.value = []
|
|
|
- leftCheckAll.value = false
|
|
|
+// 远程搜索服务项目
|
|
|
+const searchServiceItemRemote = async (query: string) => {
|
|
|
+ if (query) {
|
|
|
+ serviceItemSearchLoading.value = true
|
|
|
+ try {
|
|
|
+ const params = {
|
|
|
+ pageNo: 1,
|
|
|
+ pageSize: 50,
|
|
|
+ name: query
|
|
|
+ }
|
|
|
+ const data = await ElderApi.getServiceItemList(params)
|
|
|
+ serviceItemSearchOptions.value = data.list || []
|
|
|
+ } catch (error) {
|
|
|
+ console.log('搜索服务项目失败', error)
|
|
|
+ } finally {
|
|
|
+ serviceItemSearchLoading.value = false
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ serviceItemSearchOptions.value = []
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
-// 添加到左侧(移除)
|
|
|
-const addToLeft = () => {
|
|
|
- formData.serviceItems = formData.serviceItems.filter(key => !rightSelected.value.includes(key))
|
|
|
- rightSelected.value = []
|
|
|
- rightCheckAll.value = false
|
|
|
+// 服务项目选择变化
|
|
|
+const handleServiceItemChange = (val: number[]) => {
|
|
|
+ // 选择变化时更新金额计算
|
|
|
+ console.log('服务项目选择变化:', val)
|
|
|
}
|
|
|
|
|
|
// 过滤后的服务人员列表
|
|
|
@@ -810,6 +721,7 @@ const resetForm = () => {
|
|
|
formData.remark = ''
|
|
|
formData.consumerVoucherId = undefined
|
|
|
formData.voucherValue = ''
|
|
|
+ formData.voucherType = 'amount'
|
|
|
selectedServicePerson.value = null
|
|
|
serviceAreaFilter.value = ''
|
|
|
servicePersonKeyword.value = ''
|
|
|
@@ -993,10 +905,12 @@ const loadConsumerVouchers = async (elderId: number) => {
|
|
|
const handleVoucherChange = (val: number) => {
|
|
|
const voucher = consumerVoucherList.value.find(item => item.id === val)
|
|
|
if (voucher) {
|
|
|
- // 默认填充最大可用金额/百分比
|
|
|
+ // 默认填充消费券总额作为使用金额
|
|
|
formData.voucherValue = voucher.amount
|
|
|
+ formData.voucherType = 'amount'
|
|
|
} else {
|
|
|
formData.voucherValue = ''
|
|
|
+ formData.voucherType = 'amount'
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -1102,6 +1016,24 @@ defineExpose({ open })
|
|
|
line-height: 1.5;
|
|
|
}
|
|
|
|
|
|
+.amount-display {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 32px;
|
|
|
+
|
|
|
+ .amount-label {
|
|
|
+ color: #333;
|
|
|
+ font-size: 14px;
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .amount-value {
|
|
|
+ color: #f56c6c;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
.empty-text {
|
|
|
color: #909399;
|
|
|
padding: 20px 0;
|
|
|
@@ -1198,104 +1130,36 @@ defineExpose({ open })
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
-.transfer-wrapper {
|
|
|
- width: 100%;
|
|
|
- border: 1px solid #e4e7ed;
|
|
|
- border-radius: 4px;
|
|
|
+// 详情模式下服务人员列表不可点击
|
|
|
+.service-person-list.detail-mode {
|
|
|
+ .service-person-card {
|
|
|
+ cursor: default;
|
|
|
|
|
|
- .transfer-header {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- min-height: 40px;
|
|
|
+ &:hover {
|
|
|
+ box-shadow: none;
|
|
|
}
|
|
|
|
|
|
- // 详情模式下服务人员列表不可点击
|
|
|
- .service-person-list.detail-mode {
|
|
|
- .service-person-card {
|
|
|
- cursor: default;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- box-shadow: none;
|
|
|
- }
|
|
|
-
|
|
|
- &.selected {
|
|
|
- border-color: #409eff;
|
|
|
- box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
|
|
|
- }
|
|
|
- }
|
|
|
- };
|
|
|
- gap: 20px;
|
|
|
- padding: 10px;
|
|
|
- background-color: #f5f7fa;
|
|
|
- border-bottom: 1px solid #e4e7ed;
|
|
|
- }
|
|
|
-
|
|
|
- .transfer-content {
|
|
|
- display: flex;
|
|
|
- height: 400px;
|
|
|
- }
|
|
|
-
|
|
|
- .transfer-panel {
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- overflow: hidden;
|
|
|
-
|
|
|
- &:first-child {
|
|
|
- border-right: 1px solid #e4e7ed;
|
|
|
- }
|
|
|
-
|
|
|
- &__header {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- padding: 10px 15px;
|
|
|
- background-color: #f5f7fa;
|
|
|
- border-bottom: 1px solid #e4e7ed;
|
|
|
- font-size: 14px;
|
|
|
- color: #606266;
|
|
|
-
|
|
|
- span {
|
|
|
- color: #909399;
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &__filter {
|
|
|
- padding: 10px 15px;
|
|
|
- border-bottom: 1px solid #e4e7ed;
|
|
|
+ &.selected {
|
|
|
+ border-color: #409eff;
|
|
|
+ box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
|
|
|
}
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
- &__list {
|
|
|
- flex: 1;
|
|
|
- overflow-y: auto;
|
|
|
- padding: 10px 15px;
|
|
|
-
|
|
|
- &::-webkit-scrollbar {
|
|
|
- width: 6px;
|
|
|
- }
|
|
|
-
|
|
|
- &::-webkit-scrollbar-thumb {
|
|
|
- background-color: #c0c4cc;
|
|
|
- border-radius: 3px;
|
|
|
- }
|
|
|
- }
|
|
|
+// 服务项目多选输入框样式
|
|
|
+.service-item-select {
|
|
|
+ :deep(.el-select__wrapper) {
|
|
|
+ min-height: 80px;
|
|
|
+ align-items: flex-start;
|
|
|
+ padding-top: 4px;
|
|
|
+ padding-bottom: 4px;
|
|
|
}
|
|
|
|
|
|
- .transfer-item {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- padding: 8px 0;
|
|
|
- width: 100%;
|
|
|
-
|
|
|
- :deep(.el-checkbox__label) {
|
|
|
- flex: 1;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
- }
|
|
|
+ :deep(.el-select__selection) {
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 4px;
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
|
|
|
// 数据库字段说明样式
|