|
|
@@ -1,6 +1,6 @@
|
|
|
<script lang="ts" setup>
|
|
|
-import { ref, watch } from 'vue';
|
|
|
-import { message } from 'ant-design-vue';
|
|
|
+import { ref, watch, reactive, onMounted, h, computed } from 'vue';
|
|
|
+import { message } from 'ant-design-vue';
|
|
|
import { PlusOutlined } from '@ant-design/icons-vue'; // 确保导入
|
|
|
import VxeUI from 'vxe-table';
|
|
|
import { useRequest } from 'alova/client';
|
|
|
@@ -10,8 +10,10 @@ import { systemCpEditMethod, getAllSupplierMethod, getConditioningSchemeDetailMe
|
|
|
import { UploadIFile } from '@/request/api/follow.api';
|
|
|
import type { SystemItemModel } from '@/model/care.model';
|
|
|
import RemoteSelect from '@/libs/v-select-page/RemoteSelect.vue';
|
|
|
+import SearchableSelect from '@/components/SearchableSelect.vue';
|
|
|
import type { UploadFile } from 'ant-design-vue/es/upload/interface';
|
|
|
import type { FormInstance } from 'ant-design-vue';
|
|
|
+import Derivation from '@/service/Derivation.vue';
|
|
|
type SystemModel = Partial<SystemItemModel>;
|
|
|
const props = defineProps<{ data: SystemModel }>();
|
|
|
const formRef = ref<FormInstance>();
|
|
|
@@ -28,6 +30,14 @@ const unitOptions = [
|
|
|
{ label: '贴', value: '贴' },
|
|
|
{ label: '次', value: '次' },
|
|
|
];
|
|
|
+const herbList = ref<any[]>([]);
|
|
|
+// function getHerb(value: string) {
|
|
|
+// console.log(value, 'value==>');
|
|
|
+// cpMedicinesMethod(1, 10, { keyword: value }).then((res) => {
|
|
|
+// herbList.value = res.data;
|
|
|
+// console.log(herbList.value, 'herbList==>');
|
|
|
+// });
|
|
|
+// }
|
|
|
|
|
|
// 获取所有的机构
|
|
|
const branch = ref<any[]>([]);
|
|
|
@@ -47,7 +57,7 @@ const { loading: branchLoading } = useRequest(branchMethod).onSuccess(({ data })
|
|
|
branch.value = to(data);
|
|
|
console.log(branch.value, '获取所有的机构');
|
|
|
});
|
|
|
-const form = reactive<SystemModel>({
|
|
|
+const form = reactive<SystemItemModel>({
|
|
|
institutionName: '',
|
|
|
conditioningProgramType: '',
|
|
|
conditioningProgramSupplierId: '',
|
|
|
@@ -58,24 +68,51 @@ const form = reactive<SystemModel>({
|
|
|
],
|
|
|
pricingType: '0',
|
|
|
cpFixedPricingRule: {
|
|
|
- unitPrice: 0,
|
|
|
+ unitPrice: '',
|
|
|
pricingUnit: '',
|
|
|
- convertDose: 0,
|
|
|
+ convertDose: '',
|
|
|
convertUnit: '',
|
|
|
},
|
|
|
+ cpPatientMatchRule: {
|
|
|
+ sex: '', // 性别
|
|
|
+ age: '', // 年龄
|
|
|
+ diagnoseDiseaseNames: [], // 疾病
|
|
|
+ diagnoseSyndromeNames: [], // 证型
|
|
|
+ constitutionGroupNames: [], // 体质
|
|
|
+ willillStateNames: [], // 欲病状态
|
|
|
+ tabooCrowds: [], // 禁忌
|
|
|
+ },
|
|
|
cpMedicines: [{ name: '', dosage: '', id: '' }],
|
|
|
isOffline: null,
|
|
|
isDelivery: null,
|
|
|
+ effect: '', // 功效
|
|
|
+ photo: '', // 商品图片
|
|
|
+ itemImgFirst: '', // 操作图片
|
|
|
+ itemVideoFirst: '', // 操作视频
|
|
|
+ attrFirst: '', // 特色
|
|
|
+ attrSeventh: '', //使用注意
|
|
|
+ attrSixth: '', // 疗程说明
|
|
|
+ attrFifth: '', // 操作方法
|
|
|
+ attrFourth: '', // 用法
|
|
|
+ attrThird: '', // 制法
|
|
|
+ status: '0', // 状态
|
|
|
+ isForWrap: null, // 是否服务包项目
|
|
|
+ isForInfer: null, // 是否调理方案项目
|
|
|
});
|
|
|
+
|
|
|
+const checkedList = ref<string[]>(['1']); // 默认选中第一个
|
|
|
+
|
|
|
const onlineArr = ref<string[]>([]);
|
|
|
const deliverArr = ref<string[]>([]);
|
|
|
+
|
|
|
const rules = {
|
|
|
name: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
|
|
|
conditioningProgramType: [{ required: true, message: '请选择方案类型', trigger: 'change' }],
|
|
|
- pricingType: [{ required: true, message: '请选择计价规则', trigger: 'change' }],
|
|
|
- conditioningProgramSupplierId: [{ required: true, message: '请选择供应商', trigger: 'change' }],
|
|
|
+ // 移除 pricingType 验证,使用动态验证
|
|
|
+ // 移除 conditioningProgramSupplierId 验证,使用动态验证
|
|
|
institutionId: [{ required: true, message: '请选择机构名称', trigger: 'change' }],
|
|
|
- isOffline: [{ required: true, message: '请选择线下项目', trigger: 'change' }],
|
|
|
+ // 移除 isOffline 验证,使用动态验证
|
|
|
+ // 移除 projectType 验证,使用自定义验证
|
|
|
};
|
|
|
const isShowOnline = ref<boolean>(false);
|
|
|
const isShowDelivery = ref<boolean>(false);
|
|
|
@@ -177,20 +214,112 @@ function removeHerb(idx: number) {
|
|
|
form.cpMedicines.splice(idx, 1);
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+// 新增:处理自定义药材输入
|
|
|
+function handleCustomHerb(value: string, idx: number) {
|
|
|
+ if (form.cpMedicines && form.cpMedicines[idx]) {
|
|
|
+ form.cpMedicines[idx].name = value;
|
|
|
+ form.cpMedicines[idx].id = value; // 自定义选项使用输入值作为ID
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
function cancel() {
|
|
|
VxeUI.modal.close(`add-items-modal`);
|
|
|
}
|
|
|
function doSubmit() {
|
|
|
- console.log(formRef.value, 'formRef==>');
|
|
|
- console.log(form, 'Form Data Before Submit');
|
|
|
+ // 自定义验证:检查项目应用是否已选择
|
|
|
+ if (!checkedList.value || checkedList.value.length === 0) {
|
|
|
+ message.error('请选择项目应用');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ form.isForWrap = checkedList.value.includes('1') ? 'Y' : null;
|
|
|
+ form.isForInfer = checkedList.value.includes('2') ? 'Y' : null;
|
|
|
+ // 服务包项目相关必填
|
|
|
+ if (form.addType === 'itemsList' && checkedList.value.includes('1') || form.addType === 'system') {
|
|
|
+ // 计价规则
|
|
|
+ if (!form.pricingType) {
|
|
|
+ message.error('请选择计价规则');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ // 计价规则相关字段校验
|
|
|
+ if (form.pricingType === '0') {
|
|
|
+ const { unitPrice, pricingUnit, convertDose, convertUnit } = form.cpFixedPricingRule || {};
|
|
|
+ const allFilled = unitPrice && pricingUnit && convertDose && convertUnit;
|
|
|
+ if (!allFilled) {
|
|
|
+ message.error('请将单价、计价单位、相当于、使用单位全部填写');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ } else if (form.pricingType === '1') {
|
|
|
+ const rule1 = form.cpDynamicPricingRule[0] || {};
|
|
|
+ const rule2 = form.cpDynamicPricingRule[1] || {};
|
|
|
+ const allFilled1 = rule1.min && typeof rule1.priceType !== 'undefined' && rule1.price;
|
|
|
+ const allFilled2 = rule2.max && typeof rule2.priceType !== 'undefined' && rule2.price;
|
|
|
+ if (!(allFilled1 && allFilled2)) {
|
|
|
+ message.error('请将按穴位/经络/部位的所有计价字段全部填写');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 供应商
|
|
|
+ if (!form.conditioningProgramSupplierId) {
|
|
|
+ message.error('请选择供应商');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ // 线下项目
|
|
|
+ if (isShowOnline.value && !form.isOffline) {
|
|
|
+ message.error('请选择是否为线下项目');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ // 配送
|
|
|
+ if (isShowDelivery.value && (!deliverArr.value || deliverArr.value.length === 0)) {
|
|
|
+ message.error('请选择配送方式');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ } else if (form.addType === 'itemsList') {
|
|
|
+ // 计价规则非必填时,做全填/全空校验
|
|
|
+ if (form.pricingType === '0') {
|
|
|
+ const { unitPrice, pricingUnit, convertDose, convertUnit } = form.cpFixedPricingRule || {};
|
|
|
+ const allFilled = unitPrice && pricingUnit && convertDose && convertUnit;
|
|
|
+ const allEmpty = !unitPrice && !pricingUnit && !convertDose && !convertUnit;
|
|
|
+ if (!(allFilled || allEmpty)) {
|
|
|
+ message.error('单价、计价单位、相当于、使用单位要么全部填写,要么全部为空');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ } else if (form.pricingType === '1') {
|
|
|
+ const rule1 = form.cpDynamicPricingRule[0] || {};
|
|
|
+ const rule2 = form.cpDynamicPricingRule[1] || {};
|
|
|
+ const allFilled1 = rule1.min && typeof rule1.priceType !== 'undefined' && rule1.price;
|
|
|
+ const allEmpty1 = !rule1.min && (typeof rule1.priceType === 'undefined' || rule1.priceType === '' || rule1.priceType === null) && !rule1.price;
|
|
|
+ const allFilled2 = rule2.max && typeof rule2.priceType !== 'undefined' && rule2.price;
|
|
|
+ const allEmpty2 = !rule2.max && (typeof rule2.priceType === 'undefined' || rule2.priceType === '' || rule2.priceType === null) && !rule2.price;
|
|
|
+ if (!((allFilled1 && allFilled2) || (allEmpty1 && allEmpty2))) {
|
|
|
+ message.error('按穴位/经络/部位的所有计价字段要么全部填写,要么全部为空');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 调理方案项目相关必填
|
|
|
+ if (form.addType === 'itemsList' && checkedList.value.includes('2')) {
|
|
|
+ if (!hasDerivationLogic.value) {
|
|
|
+ message.error('请设置推导逻辑');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
formRef.value
|
|
|
?.validate()
|
|
|
.then(() => {
|
|
|
form.photo = fileList.value[0]?.response?.url || fileList.value[0]?.url || '';
|
|
|
+ form.itemImgFirst = optionsList.value[0]?.response?.url || optionsList.value[0]?.url || '';
|
|
|
+ // form.itemVideoFirst = fileList.value[0]?.response?.url || fileList.value[0]?.url || '';
|
|
|
+ // 合并推导逻辑数据到表单数据中
|
|
|
+ if (hasDerivationLogic.value && derivationData.value.cpPatientMatchRule) {
|
|
|
+ form.cpPatientMatchRule = { ...derivationData.value.cpPatientMatchRule };
|
|
|
+ }
|
|
|
+ // console.log('提交的最后数据', form);
|
|
|
submit(form);
|
|
|
})
|
|
|
.catch((error) => {
|
|
|
- console.error('Validation Error:', error);
|
|
|
+ // console.error('Validation Error:', error);
|
|
|
message.error('请完善必填项');
|
|
|
});
|
|
|
}
|
|
|
@@ -203,14 +332,15 @@ async function getConditioningProgramType() {
|
|
|
typeOptions.value = res; // 直接使用返回的数据
|
|
|
}
|
|
|
} catch (error) {
|
|
|
- console.error('获取方案类型列表失败:', error);
|
|
|
+ // console.error('获取方案类型列表失败:', error);
|
|
|
} finally {
|
|
|
typeOptionsLoading.value = false;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
onMounted(async () => {
|
|
|
- console.log(props.data, '获取传来的数据');
|
|
|
+ // console.log(props.data, '获取传来的数据');
|
|
|
+ // getHerb('');
|
|
|
const deptId = localStorage.getItem('deptId');
|
|
|
if (props.data.addType === 'system' && deptId) {
|
|
|
form.institutionId = deptId;
|
|
|
@@ -221,6 +351,11 @@ onMounted(async () => {
|
|
|
form.addType = props.data.addType;
|
|
|
if (props.data.id || props.data.sourceId) {
|
|
|
const res: any = await getConditioningSchemeDetailMethod(props.data);
|
|
|
+ // console.log(res, 'res==>');
|
|
|
+ const checked: string[] = [];
|
|
|
+ if (res.isForWrap === 'Y') checked.push('1');
|
|
|
+ if (res.isForInfer === 'Y') checked.push('2');
|
|
|
+ checkedList.value = checked.length > 0 ? checked : ['1', '2'];
|
|
|
Object.assign(form, res);
|
|
|
form.cpMedicines = (res.cpMedicines ?? []).map((item: any) => ({
|
|
|
name: item.name || item.herbName || item.medicineName || '',
|
|
|
@@ -228,6 +363,12 @@ onMounted(async () => {
|
|
|
id: item.id,
|
|
|
}));
|
|
|
|
|
|
+ // 处理推导逻辑数据回填
|
|
|
+ if (res.cpPatientMatchRule) {
|
|
|
+ derivationData.value = { cpPatientMatchRule: res.cpPatientMatchRule };
|
|
|
+ hasDerivationLogic.value = true;
|
|
|
+ }
|
|
|
+
|
|
|
fileList.value = res.photo
|
|
|
? [
|
|
|
{
|
|
|
@@ -239,10 +380,35 @@ onMounted(async () => {
|
|
|
},
|
|
|
]
|
|
|
: [];
|
|
|
- console.log(props.data, 'form==>');
|
|
|
+ optionsList.value = res.itemImgFirst
|
|
|
+ ? [
|
|
|
+ {
|
|
|
+ uid: '-1',
|
|
|
+ name: 'image.png',
|
|
|
+ status: 'done',
|
|
|
+ url: res.itemImgFirst,
|
|
|
+ thumbUrl: res.itemImgFirst,
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ : [];
|
|
|
+
|
|
|
+ // 处理视频数据
|
|
|
+ if (res.itemVideoFirst) {
|
|
|
+ videoFileList.value = [
|
|
|
+ {
|
|
|
+ uid: '-1',
|
|
|
+ name: '操作视频',
|
|
|
+ status: 'done',
|
|
|
+ url: res.itemVideoFirst,
|
|
|
+ response: { url: res.itemVideoFirst },
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ }
|
|
|
+
|
|
|
+ // console.log(props.data, 'form==>');
|
|
|
if (props.data.addType === 'itemsList' && props.data.sourceId) {
|
|
|
form.sourceId = form.id;
|
|
|
- form.institutionId='';
|
|
|
+ form.institutionId = '';
|
|
|
delete form.id;
|
|
|
}
|
|
|
}
|
|
|
@@ -250,7 +416,7 @@ onMounted(async () => {
|
|
|
// getSupplier({});
|
|
|
// 获取方案类型
|
|
|
getConditioningProgramType();
|
|
|
- console.log(form, 'form==>');
|
|
|
+ // console.log(form, 'form==>');
|
|
|
});
|
|
|
const emits = defineEmits<{
|
|
|
submit: [data?: SystemItemModel];
|
|
|
@@ -263,12 +429,15 @@ const { loading: submitting, send: submit } = useRequest(systemCpEditMethod, {
|
|
|
});
|
|
|
|
|
|
const visible = ref<boolean>(false);
|
|
|
-const setVisible = (value): void => {
|
|
|
+const setVisible = (value: boolean): void => {
|
|
|
visible.value = value;
|
|
|
};
|
|
|
const previewImg = ref<string>('');
|
|
|
const uploadProps = reactive({ showRemoveIcon: true });
|
|
|
+// 商品图片
|
|
|
const fileList = ref<UploadFile[]>([]);
|
|
|
+// 操作图片
|
|
|
+const optionsList = ref<UploadFile[]>([]);
|
|
|
// 预览图片
|
|
|
const handlePreview = async (file: UploadFile) => {
|
|
|
previewImg.value = file.response?.url ?? file.thumbUrl;
|
|
|
@@ -287,6 +456,152 @@ function customUpload(e: any) {
|
|
|
e.onError(err);
|
|
|
});
|
|
|
}
|
|
|
+// 视频上传相关
|
|
|
+const accept = 'video/mp4,video/avi,video/mov,video/webm';
|
|
|
+const maxSize = 100 * 1024 * 1024; // 100MB
|
|
|
+
|
|
|
+const videoUrl = ref('');
|
|
|
+const uploading = ref(false);
|
|
|
+const progress = ref(0);
|
|
|
+const videoFileList = ref<UploadFile[]>([]);
|
|
|
+
|
|
|
+// 上传前校验
|
|
|
+function beforeVideoUpload(file: File) {
|
|
|
+ const isValidType = accept.split(',').includes(file.type);
|
|
|
+ if (!isValidType) {
|
|
|
+ message.error('仅支持mp4、avi、mov、webm格式视频');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ const isValidSize = file.size <= maxSize;
|
|
|
+ if (!isValidSize) {
|
|
|
+ message.error('视频大小不能超过100MB');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ return true;
|
|
|
+}
|
|
|
+
|
|
|
+// 视频预览
|
|
|
+function handleVideoPreview(file: UploadFile) {
|
|
|
+ const videoUrl = file.response?.url || file.url || form.itemVideoFirst;
|
|
|
+ if (videoUrl) {
|
|
|
+ // 创建一个模态框来预览视频
|
|
|
+ VxeUI.modal.open({
|
|
|
+ title: '视频预览',
|
|
|
+ width: 800,
|
|
|
+ height: 600,
|
|
|
+ escClosable: true,
|
|
|
+ destroyOnClose: true,
|
|
|
+ slots: {
|
|
|
+ default() {
|
|
|
+ return h(
|
|
|
+ 'div',
|
|
|
+ {
|
|
|
+ style: {
|
|
|
+ display: 'flex',
|
|
|
+ justifyContent: 'center',
|
|
|
+ alignItems: 'center',
|
|
|
+ height: '100%',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ [
|
|
|
+ h('video', {
|
|
|
+ src: videoUrl,
|
|
|
+ controls: true,
|
|
|
+ style: {
|
|
|
+ maxWidth: '100%',
|
|
|
+ maxHeight: '100%',
|
|
|
+ borderRadius: '8px',
|
|
|
+ },
|
|
|
+ }),
|
|
|
+ ]
|
|
|
+ );
|
|
|
+ },
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 删除视频
|
|
|
+function removeVideo() {
|
|
|
+ form.itemVideoFirst = '';
|
|
|
+ videoFileList.value = [];
|
|
|
+ message.success('视频已删除');
|
|
|
+}
|
|
|
+
|
|
|
+// 自定义上传
|
|
|
+function customVideoRequest(e: any) {
|
|
|
+ const { file, onSuccess, onError, onProgress } = e;
|
|
|
+
|
|
|
+ // 验证文件
|
|
|
+ if (!beforeVideoUpload(file)) {
|
|
|
+ onError(new Error('文件验证失败'));
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ uploading.value = true;
|
|
|
+ progress.value = 0;
|
|
|
+
|
|
|
+ // 模拟上传进度
|
|
|
+ const progressInterval = setInterval(() => {
|
|
|
+ if (progress.value < 90) {
|
|
|
+ progress.value += Math.random() * 10;
|
|
|
+ onProgress({ percent: progress.value });
|
|
|
+ }
|
|
|
+ }, 200);
|
|
|
+
|
|
|
+ // 上传文件
|
|
|
+ UploadIFile(file)
|
|
|
+ .then((res: any) => {
|
|
|
+ clearInterval(progressInterval);
|
|
|
+ progress.value = 100;
|
|
|
+ onProgress({ percent: 100 });
|
|
|
+
|
|
|
+ // 设置视频URL
|
|
|
+ form.itemVideoFirst = res?.url || res?.data?.url;
|
|
|
+
|
|
|
+ // 更新文件列表
|
|
|
+ videoFileList.value = [
|
|
|
+ {
|
|
|
+ uid: file.uid,
|
|
|
+ name: file.name,
|
|
|
+ status: 'done',
|
|
|
+ url: form.itemVideoFirst,
|
|
|
+ response: res,
|
|
|
+ },
|
|
|
+ ];
|
|
|
+
|
|
|
+ onSuccess(res, e);
|
|
|
+ uploading.value = false;
|
|
|
+ message.success('视频上传成功');
|
|
|
+
|
|
|
+ console.log('上传视频成功', form.itemVideoFirst);
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ clearInterval(progressInterval);
|
|
|
+ uploading.value = false;
|
|
|
+ progress.value = 0;
|
|
|
+ onError(err);
|
|
|
+ message.error('视频上传失败,请重试');
|
|
|
+ console.error('视频上传失败:', err);
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+// 视频上传状态变化
|
|
|
+function handleVideoChange(info: any) {
|
|
|
+ const { file, fileList } = info;
|
|
|
+
|
|
|
+ if (file.status === 'uploading') {
|
|
|
+ uploading.value = true;
|
|
|
+ } else if (file.status === 'done') {
|
|
|
+ uploading.value = false;
|
|
|
+ videoFileList.value = fileList;
|
|
|
+ } else if (file.status === 'error') {
|
|
|
+ uploading.value = false;
|
|
|
+ message.error('视频上传失败');
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
watch(
|
|
|
() => form.pricingType,
|
|
|
@@ -322,9 +637,65 @@ function getConditioningProgramSupplier(value: any) {
|
|
|
form.isDelivery = null;
|
|
|
isShowDelivery.value = false;
|
|
|
}
|
|
|
-function handleSelect(value: string, node: any, extra: any) {
|
|
|
+// 修正参数以适配 a-tree-select 的 @select 事件
|
|
|
+function handleSelect(value: any, node: any) {
|
|
|
form.institutionId = value;
|
|
|
- form.institutionName = node.label;
|
|
|
+ if (node && node.label) {
|
|
|
+ form.institutionName = node.label;
|
|
|
+ } else if (node && node.title) {
|
|
|
+ form.institutionName = node.title;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 项目应用数据
|
|
|
+const plainOptions = [
|
|
|
+ { id: '1', name: '服务包项目' },
|
|
|
+ { id: '2', name: '调理方案项目' },
|
|
|
+];
|
|
|
+
|
|
|
+// 推导逻辑
|
|
|
+const hasDerivationLogic = ref(false); // 添加推导逻辑状态跟踪
|
|
|
+const derivationData = ref<any>({});
|
|
|
+// 新增:判断推导逻辑内容是否为空
|
|
|
+const isDerivationEmpty = computed(() => {
|
|
|
+ const rule = derivationData.value.cpPatientMatchRule;
|
|
|
+ if (!rule) return true;
|
|
|
+ // 检查所有字段都为空或未填写
|
|
|
+ const fields = ['sex', 'age', 'diagnoseDiseaseNames', 'diagnoseSyndromeNames', 'constitutionGroupNames', 'willillStateNames', 'tabooCrowds'];
|
|
|
+ return fields.every((key) => {
|
|
|
+ const val = rule[key];
|
|
|
+ if (Array.isArray(val)) return val.length === 0;
|
|
|
+ return !val;
|
|
|
+ });
|
|
|
+});
|
|
|
+function handleDerivation() {
|
|
|
+ VxeUI.modal.open({
|
|
|
+ title: `推导逻辑`,
|
|
|
+ height: 750,
|
|
|
+ width: 750,
|
|
|
+ escClosable: true,
|
|
|
+ destroyOnClose: true,
|
|
|
+ id: `derivation-modal`,
|
|
|
+ remember: true,
|
|
|
+ storage: true,
|
|
|
+ slots: {
|
|
|
+ default() {
|
|
|
+ return h(Derivation, {
|
|
|
+ data: {
|
|
|
+ ...props.data,
|
|
|
+ // 传递当前的推导逻辑数据
|
|
|
+ cpPatientMatchRule: derivationData.value.cpPatientMatchRule || form.cpPatientMatchRule,
|
|
|
+ checkedList: checkedList.value,
|
|
|
+ },
|
|
|
+ onSubmit: (data: any) => {
|
|
|
+ console.log('推导逻辑传来的数据', data);
|
|
|
+ derivationData.value = data;
|
|
|
+ hasDerivationLogic.value = true; // 设置推导逻辑已编辑
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ });
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
@@ -345,7 +716,14 @@ function handleSelect(value: string, node: any, extra: any) {
|
|
|
@change="bindchange"
|
|
|
/>
|
|
|
</a-form-item>
|
|
|
- <a-form-item label="计价规则:" name="pricingType" required>
|
|
|
+ <a-form-item label="项目应用:" required v-if="form.addType === 'itemsList'">
|
|
|
+ <a-checkbox-group v-model:value="checkedList">
|
|
|
+ <a-checkbox v-for="option in plainOptions" :key="option.id" :value="option.id">
|
|
|
+ {{ option.name }}
|
|
|
+ </a-checkbox>
|
|
|
+ </a-checkbox-group>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="计价规则:" name="pricingType" :required="checkedList.includes('1')">
|
|
|
<a-radio-group v-model:value="form.pricingType">
|
|
|
<a-radio value="0">一口价</a-radio>
|
|
|
<a-radio value="1">按穴位/经络/部位</a-radio>
|
|
|
@@ -410,12 +788,23 @@ function handleSelect(value: string, node: any, extra: any) {
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <a-form-item label="中药组成:">
|
|
|
+ <a-form-item label="组成:">
|
|
|
<div class="herb-list">
|
|
|
<template v-for="(herb, idx) in form.cpMedicines" :key="herb.id">
|
|
|
<div class="herb-item">
|
|
|
<button class="herb-remove" v-if="form?.cpMedicines?.length > 1" @click="removeHerb(idx)" type="button">×</button>
|
|
|
- <RemoteSelect :load="cpMedicinesMethod" key-prop="name" v-model:value="herb.name" />
|
|
|
+ <!-- <RemoteSelect :load="cpMedicinesMethod" key-prop="name" v-model:value="herb.name" /> -->
|
|
|
+ <SearchableSelect
|
|
|
+ v-model="herb.name"
|
|
|
+ :options="herbList"
|
|
|
+ placeholder="请选择"
|
|
|
+ value-key="name"
|
|
|
+ label-key="name"
|
|
|
+ key-key="id"
|
|
|
+ :fetch-options="cpMedicinesMethod"
|
|
|
+ style="width: 150px"
|
|
|
+ :allow-custom-input="true"
|
|
|
+ />
|
|
|
<a-input v-model:value="herb.dosage" class="herb-dosage" placeholder="剂量" />
|
|
|
<span>g</span>
|
|
|
</div>
|
|
|
@@ -423,11 +812,160 @@ function handleSelect(value: string, node: any, extra: any) {
|
|
|
<button style="margin-left: 8px" @click="addHerb" type="button">+</button>
|
|
|
</div>
|
|
|
</a-form-item>
|
|
|
+ <a-form-item label="特色:" v-if="form.addType === 'itemsList'">
|
|
|
+ <textarea
|
|
|
+ v-model="form.attrFirst"
|
|
|
+ placeholder="请输入"
|
|
|
+ rows="3"
|
|
|
+ style="width: 100%; padding: 8px; border: 1px solid #d9d9d9; border-radius: 4px; resize: vertical; font-family: inherit"
|
|
|
+ />
|
|
|
+ </a-form-item>
|
|
|
<a-form-item label="功效:">
|
|
|
<a-input v-model:value="form.effect" placeholder="请输入" />
|
|
|
</a-form-item>
|
|
|
+ <a-form-item label="制法:" v-if="form.addType === 'itemsList'">
|
|
|
+ <a-input v-model:value="form.attrThird" placeholder="请输入" />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="用法:" v-if="form.addType === 'itemsList'">
|
|
|
+ <a-input v-model:value="form.attrFourth" placeholder="请输入" />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="操作方法:" v-if="form.addType === 'itemsList'">
|
|
|
+ <textarea
|
|
|
+ v-model="form.attrFifth"
|
|
|
+ placeholder="请输入"
|
|
|
+ rows="3"
|
|
|
+ style="width: 100%; padding: 8px; border: 1px solid #d9d9d9; border-radius: 4px; resize: vertical; font-family: inherit"
|
|
|
+ />
|
|
|
+ </a-form-item>
|
|
|
+
|
|
|
+ <div class="image-row">
|
|
|
+ <a-form-item label="操作图片:" class="image-form-item" v-if="form.addType === 'itemsList'">
|
|
|
+ <a-upload :showUploadList="uploadProps" v-model:file-list="optionsList" list-type="picture-card" @preview="handlePreview" :maxCount="1" :customRequest="customUpload">
|
|
|
+ <div v-if="optionsList.length < 1">
|
|
|
+ <PlusOutlined />
|
|
|
+ <div style="margin-top: 8px">上传</div>
|
|
|
+ </div>
|
|
|
+ </a-upload>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="商品图片:" class="image-form-item">
|
|
|
+ <a-upload :showUploadList="uploadProps" v-model:file-list="fileList" list-type="picture-card" @preview="handlePreview" :maxCount="1" :customRequest="customUpload">
|
|
|
+ <div v-if="fileList.length < 1">
|
|
|
+ <PlusOutlined />
|
|
|
+ <div style="margin-top: 8px">上传</div>
|
|
|
+ </div>
|
|
|
+ </a-upload>
|
|
|
+ </a-form-item>
|
|
|
+ </div>
|
|
|
+ <a-form-item label="操作视频:" class="image-form-item" v-if="form.addType === 'itemsList'">
|
|
|
+ <div class="video-upload-wrapper">
|
|
|
+ <div class="video-upload-container">
|
|
|
+ <a-upload
|
|
|
+ :showUploadList="false"
|
|
|
+ :custom-request="customVideoRequest"
|
|
|
+ :max-count="1"
|
|
|
+ :multiple="false"
|
|
|
+ :before-upload="beforeVideoUpload"
|
|
|
+ @change="handleVideoChange"
|
|
|
+ :file-list="videoFileList"
|
|
|
+ accept="video/mp4,video/avi,video/mov,video/webm"
|
|
|
+ >
|
|
|
+ <div v-if="!form.itemVideoFirst && !uploading" class="video-upload-btn">
|
|
|
+ <PlusOutlined />
|
|
|
+ <div style="margin-top: 8px">上传视频</div>
|
|
|
+ <div class="video-upload-tip">mp4/avi/mov/webm<br />最大100MB</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 上传中状态 -->
|
|
|
+ <div v-else-if="uploading" class="video-uploading">
|
|
|
+ <div class="upload-progress">
|
|
|
+ <a-progress :percent="progress" :show-info="false" size="small" stroke-color="#1890ff" />
|
|
|
+ <div class="upload-text">上传中... {{ Math.round(progress) }}%</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 视频预览 -->
|
|
|
+ <div v-else class="video-preview-container">
|
|
|
+ <div class="video-thumbnail">
|
|
|
+ <video :src="form.itemVideoFirst" preload="metadata" class="video-preview" />
|
|
|
+ <div class="video-overlay">
|
|
|
+ <a-button
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ @click.stop="
|
|
|
+ handleVideoPreview({
|
|
|
+ uid: 'video-preview',
|
|
|
+ name: '操作视频',
|
|
|
+ url: form.itemVideoFirst,
|
|
|
+ })
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 预览
|
|
|
+ </a-button>
|
|
|
+ <a-button danger size="small" @click.stop="removeVideo"> 删除 </a-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="video-info">
|
|
|
+ <div class="video-name">操作视频</div>
|
|
|
+ <div class="video-size">已上传</div>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+ </a-upload>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="疗程说明:" v-if="form.addType === 'itemsList'">
|
|
|
+ <textarea
|
|
|
+ v-model="form.attrSixth"
|
|
|
+ placeholder="请输入"
|
|
|
+ rows="3"
|
|
|
+ style="width: 100%; padding: 8px; border: 1px solid #d9d9d9; border-radius: 4px; resize: vertical; font-family: inherit"
|
|
|
+ />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="使用注意:" v-if="form.addType === 'itemsList'">
|
|
|
+ <textarea
|
|
|
+ v-model="form.attrSeventh"
|
|
|
+ placeholder="请输入"
|
|
|
+ rows="3"
|
|
|
+ style="width: 100%; padding: 8px; border: 1px solid #d9d9d9; border-radius: 4px; resize: vertical; font-family: inherit"
|
|
|
+ />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="推导逻辑:" v-if="form.addType === 'itemsList'" :required="checkedList.includes('2')">
|
|
|
+ <button @click="handleDerivation" v-if="!hasDerivationLogic || isDerivationEmpty">编辑</button>
|
|
|
+ <div v-else @click="handleDerivation" style="cursor: pointer">
|
|
|
+ <div v-if="derivationData.cpPatientMatchRule" class="derivation-container">
|
|
|
+ <div v-if="derivationData.cpPatientMatchRule.sex" class="derivation-item">
|
|
|
+ <span class="derivation-label">性别限制:</span>
|
|
|
+ <span class="derivation-content">{{ derivationData.cpPatientMatchRule.sex }}</span>
|
|
|
+ </div>
|
|
|
+ <div v-if="derivationData.cpPatientMatchRule.age" class="derivation-item">
|
|
|
+ <span class="derivation-label">年龄限制:</span>
|
|
|
+ <span class="derivation-content">{{ derivationData.cpPatientMatchRule.age }}</span>
|
|
|
+ </div>
|
|
|
+ <div v-if="derivationData.cpPatientMatchRule.diagnoseDiseaseNames && derivationData.cpPatientMatchRule.diagnoseDiseaseNames.length > 0" class="derivation-item">
|
|
|
+ <span class="derivation-label">专病:</span>
|
|
|
+ <span class="derivation-content">{{ derivationData.cpPatientMatchRule.diagnoseDiseaseNames.join('、') }}</span>
|
|
|
+ </div>
|
|
|
+ <div v-if="derivationData.cpPatientMatchRule.diagnoseSyndromeNames && derivationData.cpPatientMatchRule.diagnoseSyndromeNames.length > 0" class="derivation-item">
|
|
|
+ <span class="derivation-label">证型:</span>
|
|
|
+ <span class="derivation-content">{{ derivationData.cpPatientMatchRule.diagnoseSyndromeNames.join('、') }}</span>
|
|
|
+ </div>
|
|
|
+ <div v-if="derivationData.cpPatientMatchRule.constitutionGroupNames && derivationData.cpPatientMatchRule.constitutionGroupNames.length > 0" class="derivation-item">
|
|
|
+ <span class="derivation-label">体质:</span>
|
|
|
+ <span class="derivation-content">{{ derivationData.cpPatientMatchRule.constitutionGroupNames.join('、') }}</span>
|
|
|
+ </div>
|
|
|
+ <div v-if="derivationData.cpPatientMatchRule.willillStateNames && derivationData.cpPatientMatchRule.willillStateNames.length > 0" class="derivation-item">
|
|
|
+ <span class="derivation-label">欲病状态:</span>
|
|
|
+ <span class="derivation-content">{{ derivationData.cpPatientMatchRule.willillStateNames.join('、') }}</span>
|
|
|
+ </div>
|
|
|
+ <div v-if="derivationData.cpPatientMatchRule.tabooCrowds && derivationData.cpPatientMatchRule.tabooCrowds.length > 0" class="derivation-item">
|
|
|
+ <span class="derivation-label">禁忌人群:</span>
|
|
|
+ <span class="derivation-content">{{ derivationData.cpPatientMatchRule.tabooCrowds.join('、') }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a-form-item>
|
|
|
<!-- 机构名称 -->
|
|
|
- <a-form-item label="机构名称:" v-if="form?.addType === 'itemsList' && form?.id" required name="institutionId">
|
|
|
+ <a-form-item label="机构名称:" v-if="form?.addType === 'itemsList'" required name="institutionId">
|
|
|
<a-tree-select
|
|
|
v-model:value="form.institutionId"
|
|
|
style="width: 100%"
|
|
|
@@ -439,28 +977,26 @@ function handleSelect(value: string, node: any, extra: any) {
|
|
|
@select="handleSelect"
|
|
|
></a-tree-select>
|
|
|
</a-form-item>
|
|
|
- <a-form-item label="供应商:" name="conditioningProgramSupplierId" required>
|
|
|
+ <a-form-item label="供应商:" name="conditioningProgramSupplierId" :required="checkedList.includes('1')">
|
|
|
<a-select v-model:value="form.conditioningProgramSupplierId" :options="supplierOptions" placeholder="请选择" allowClear @change="getConditioningProgramSupplier" />
|
|
|
</a-form-item>
|
|
|
- <a-form-item label="线下项目:" name="isOffline" v-if="isShowOnline" required>
|
|
|
+ <a-form-item label="线下项目:" name="isOffline" v-if="isShowOnline" :required="checkedList.includes('1')">
|
|
|
<a-checkbox-group v-model:value="onlineArr" @change="onlineChange">
|
|
|
<a-checkbox value="Y">是</a-checkbox>
|
|
|
<a-checkbox value="N">否</a-checkbox>
|
|
|
</a-checkbox-group>
|
|
|
</a-form-item>
|
|
|
- <a-form-item label="配送:" name="isDelivery" v-if="isShowDelivery">
|
|
|
+ <a-form-item label="配送:" name="isDelivery" v-if="isShowDelivery" :required="checkedList.includes('1')">
|
|
|
<a-checkbox-group v-model:value="deliverArr" @change="deliveryChange">
|
|
|
<a-checkbox value="Y">支持</a-checkbox>
|
|
|
<a-checkbox value="N">不支持</a-checkbox>
|
|
|
</a-checkbox-group>
|
|
|
</a-form-item>
|
|
|
- <a-form-item label="图片:">
|
|
|
- <a-upload :showUploadList="uploadProps" v-model:file-list="fileList" list-type="picture-card" @preview="handlePreview" :maxCount="1" :customRequest="customUpload">
|
|
|
- <div v-if="fileList.length < 1">
|
|
|
- <PlusOutlined />
|
|
|
- <div style="margin-top: 8px">上传</div>
|
|
|
- </div>
|
|
|
- </a-upload>
|
|
|
+ <a-form-item label="启用状态:" name="status" v-if="form.addType === 'itemsList'" required>
|
|
|
+ <a-radio-group v-model:value="form.status">
|
|
|
+ <a-radio value="0">启用</a-radio>
|
|
|
+ <a-radio value="1">停用</a-radio>
|
|
|
+ </a-radio-group>
|
|
|
</a-form-item>
|
|
|
<a-image
|
|
|
:width="200"
|
|
|
@@ -471,6 +1007,7 @@ function handleSelect(value: string, node: any, extra: any) {
|
|
|
}"
|
|
|
:src="previewImg"
|
|
|
/>
|
|
|
+ <video :src="videoUrl" controls v-if="videoUrl" style="width: 100%; max-width: 500px; border-radius: 6px" preload="metadata" />
|
|
|
<div class="form-actions-center">
|
|
|
<a-button @click="cancel">取消</a-button>
|
|
|
<a-button type="primary" style="background: #faad14; border: none" @click="doSubmit">确定</a-button>
|
|
|
@@ -513,7 +1050,7 @@ function handleSelect(value: string, node: any, extra: any) {
|
|
|
}
|
|
|
.herb-dosage {
|
|
|
width: 70px;
|
|
|
- padding: 2px 6px;
|
|
|
+ /* padding: 2px 6px; */
|
|
|
font-size: 14px;
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
@@ -569,4 +1106,274 @@ function handleSelect(value: string, node: any, extra: any) {
|
|
|
color: #faad14;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
+.upload-btn {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ min-height: 100px;
|
|
|
+ border: 1px dashed #d9d9d9;
|
|
|
+ border-radius: 6px;
|
|
|
+ background: #fafafa;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: border-color 0.3s;
|
|
|
+ width: 100px;
|
|
|
+}
|
|
|
+.upload-btn:hover {
|
|
|
+ border-color: #1890ff;
|
|
|
+ background: #f0f7ff;
|
|
|
+}
|
|
|
+.upload-btn .anticon {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #1890ff;
|
|
|
+}
|
|
|
+.upload-btn .upload-text {
|
|
|
+ margin-top: 8px;
|
|
|
+ color: #666;
|
|
|
+ font-size: 15px;
|
|
|
+}
|
|
|
+.video-preview {
|
|
|
+ border-radius: 6px;
|
|
|
+ /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); */
|
|
|
+ background: #000;
|
|
|
+ width: 120px !important;
|
|
|
+ height: 100px !important;
|
|
|
+ /* outline: none; */
|
|
|
+}
|
|
|
+.video-preview video {
|
|
|
+ border-radius: 6px;
|
|
|
+ /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); */
|
|
|
+ background: #000;
|
|
|
+ width: 120px;
|
|
|
+ height: 100px;
|
|
|
+ /* outline: none; */
|
|
|
+}
|
|
|
+.video-preview .ant-btn-link {
|
|
|
+ padding: 0;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #ff4d4f;
|
|
|
+}
|
|
|
+.image-row {
|
|
|
+ display: flex;
|
|
|
+ gap: 32px;
|
|
|
+ align-items: flex-start;
|
|
|
+ margin-bottom: 16px;
|
|
|
+}
|
|
|
+.image-form-item {
|
|
|
+ flex: 1;
|
|
|
+ margin-bottom: 0 !important;
|
|
|
+}
|
|
|
+.image-form-item .ant-upload-picture-card-wrapper {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: flex-start;
|
|
|
+}
|
|
|
+.derivation-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ min-width: 200px;
|
|
|
+ max-width: 300px;
|
|
|
+ padding: 6px 12px;
|
|
|
+ background: #f5f5f5;
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 1px solid #e8e8e8;
|
|
|
+}
|
|
|
+.derivation-label {
|
|
|
+ font-weight: 500;
|
|
|
+ color: #222;
|
|
|
+ margin-right: 8px;
|
|
|
+ white-space: nowrap;
|
|
|
+ font-size: 13px;
|
|
|
+}
|
|
|
+.derivation-content {
|
|
|
+ color: #555;
|
|
|
+ font-size: 13px;
|
|
|
+ flex: 1;
|
|
|
+ word-break: break-all;
|
|
|
+}
|
|
|
+.derivation-container {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 16px;
|
|
|
+ align-items: flex-start;
|
|
|
+}
|
|
|
+.video-upload-wrapper {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+}
|
|
|
+
|
|
|
+.video-upload-container {
|
|
|
+ position: relative;
|
|
|
+ width: 130px;
|
|
|
+ height: 130px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ border: 2px dashed #d9d9d9;
|
|
|
+ border-radius: 8px;
|
|
|
+ background: #fafafa;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.video-upload-container:hover {
|
|
|
+ border-color: #1890ff;
|
|
|
+ background: #f0f7ff;
|
|
|
+ transform: translateY(-1px);
|
|
|
+ box-shadow: 0 2px 8px rgba(24, 144, 255, 0.1);
|
|
|
+}
|
|
|
+
|
|
|
+.video-upload-btn {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 16px 12px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.video-upload-btn .anticon {
|
|
|
+ font-size: 20px;
|
|
|
+ color: #1890ff;
|
|
|
+ margin-bottom: 6px;
|
|
|
+}
|
|
|
+
|
|
|
+.video-upload-tip {
|
|
|
+ font-size: 11px;
|
|
|
+ color: #999;
|
|
|
+ margin-top: 6px;
|
|
|
+ line-height: 1.3;
|
|
|
+}
|
|
|
+
|
|
|
+.video-uploading {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: rgba(255, 255, 255, 0.95);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ z-index: 10;
|
|
|
+ backdrop-filter: blur(2px);
|
|
|
+}
|
|
|
+
|
|
|
+.upload-progress {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ width: 90%;
|
|
|
+ max-width: 160px;
|
|
|
+}
|
|
|
+
|
|
|
+.upload-text {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #1890ff;
|
|
|
+ font-weight: 500;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.video-preview-container {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ padding: 10px;
|
|
|
+ background: #fafafa;
|
|
|
+ border-radius: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.video-thumbnail {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100px;
|
|
|
+ border-radius: 6px;
|
|
|
+ overflow: hidden;
|
|
|
+ background: #000;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-bottom: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.video-thumbnail .video-preview {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+}
|
|
|
+
|
|
|
+.video-overlay {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: rgba(0, 0, 0, 0.7);
|
|
|
+ border-radius: 6px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 8px;
|
|
|
+ opacity: 0;
|
|
|
+ transition: opacity 0.3s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.video-preview-container:hover .video-overlay {
|
|
|
+ opacity: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.video-overlay .ant-btn {
|
|
|
+ background: rgba(255, 255, 255, 0.95);
|
|
|
+ border: none;
|
|
|
+ color: #333;
|
|
|
+ font-size: 11px;
|
|
|
+ padding: 3px 8px;
|
|
|
+ border-radius: 4px;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ min-width: 40px;
|
|
|
+ height: 28px;
|
|
|
+ line-height: 1.2;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+
|
|
|
+.video-overlay .ant-btn:hover {
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
+ transform: scale(1.05);
|
|
|
+}
|
|
|
+
|
|
|
+.video-overlay .ant-btn-danger {
|
|
|
+ background: rgba(255, 77, 79, 0.95);
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.video-overlay .ant-btn-danger:hover {
|
|
|
+ background: rgba(255, 77, 79, 1);
|
|
|
+}
|
|
|
+
|
|
|
+.video-info {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 11px;
|
|
|
+ color: #666;
|
|
|
+}
|
|
|
+
|
|
|
+.video-name {
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 2px;
|
|
|
+}
|
|
|
+
|
|
|
+.video-size {
|
|
|
+ color: #999;
|
|
|
+ font-size: 10px;
|
|
|
+}
|
|
|
</style>
|