实验面板拖拽等

.env

@@ -2,7 +2,7 @@ VITE_APP_TITLE=金融产品设计及数字化营销沙盘
 VITE_PORT=9520
 VITE_PROXY=http://192.168.31.125:8080
 VITE_PUBLIC_PATH=./
-VITE_BASE_API=http://192.168.31.51:9000
+# VITE_BASE_API=http://192.168.31.51:9000
-# VITE_BASE_API=http://121.37.12.51
+VITE_BASE_API=http://121.37.12.51
 VITE_I18N_LOCALE=zh-cn
 VITE_I18N_FALLBACK_LOCALE=zh-cn

src/components/Panel/index.vue

@@ -1,7 +1,19 @@
 <template>
+  <!-- <Draggable
+      v-slot="{ x, y }"
+      p="x-4 y-2"
+      border="~ gray-400/30 rounded"
+      shadow="~ hover:lg"
+      class="fixed bg-$vp-c-bg select-none z-24"
+      :initial-value="{ x: innerWidth / 3.6, y: 240 }"
+      :prevent-default="true"
+      :handle="handle"
+    > -->
   <div v-if="!hidePanel"
        :class="['panel', { active: visible }]"
-       id="panel">
+       id="panel"
+       ref="container"
+       :style="style">
     <el-container class="scrollbar"
                   id="container"
                   v-show="visible">
@@ -203,15 +215,24 @@
       </el-container>
     </el-container>
 
-    <div class="toggle-panel absolute w-[40px] h-[175px] bg-[url('@/assets/images/panel/right.png')] bg-[length:100%_100%] bg-no-repeat cursor-pointer"
+    <div :class="['toggle absolute top-[200px] text-center', visible ? 'top-[35%] left-[100%]' : '']">
+      <el-icon class="cursor-pointer"
+               color="#f1772b"
+               :size="24">
+        <Rank id="toggle" />
+      </el-icon>
+      <div class="toggle-panel w-[40px] h-[175px] bg-[length:100%_100%] bg-no-repeat cursor-pointer"
            :class="{ active: visible }"
+           ref="handle"
            @click="visible = !visible"></div>
     </div>
+  </div>
+  <!-- </Draggable> -->
   <div v-if="isSubmit && !isReport"
        class="z-[199] fixed top-[64px] right-0 bottom-0 left-0 bg-[rgba(0,0,0,.3)]"></div>
 </template>
 <script setup lang="ts">
-import { ref, reactive, onMounted, toRefs, computed, watch } from 'vue';
+import { ref, reactive, onMounted, inject, computed, watch } from 'vue';
 import { submitOpe } from '@/api/bank';
 import { deleteCache } from '@/api/judgment';
 import { pageStuAssessment, getProjectBySystemId, getProjectDetail, getDetailById, getCompetition } from '@/api/system';
@@ -219,12 +240,13 @@ import Settings from '@/settings';
 import { useRouter, useRoute } from 'vue-router';
 import type { Action } from 'element-plus';
 import { ElMessage, ElMessageBox } from 'element-plus';
-import { Close, Check } from '@element-plus/icons-vue';
+import { Close, Check, Rank } from '@element-plus/icons-vue';
 import dayjs from 'dayjs';
 import Cookies from 'js-cookie';
 import { mavonEditor } from 'mavon-editor';
 import 'mavon-editor/dist/css/index.css';
 import '@vueup/vue-quill/dist/vue-quill.snow.css';
+import { useDraggable } from '@vueuse/core';
 
 const router = useRouter();
 const route = useRoute();
@@ -254,6 +276,20 @@ const pannelTab = ref<string>('first');
 const statusTimer = ref<any>(null);
 const reportId = ref<string | number>('');
 const countVal = ref<any>('');
+const getLevel = ref();
+const container = ref<HTMLElement | null>(null);
+const handle = ref<HTMLElement | null>(null);
+// 实验面板拖拽
+const { x, y, style } = useDraggable(container, {
+  initialValue: { x: 0, y: 200 },
+  stopPropagation: true,
+  // exact: true,
+  handle: handle.value,
+  onStart(position, e) {
+    const { id } = e.target;
+    if (id !== 'panelHeader' && id !== 'toggle') return false;
+  },
+});
 
 if (param.token) {
   // 从url带进来的参数，存cookie里，其他页面直接取cookie
@@ -404,11 +440,19 @@ const getCompetitionStatus = async () => {
 };
 // 项目选择回调
 const selectProject = () => {
+  Cookies.set('sand-projectId', param.projectId);
   getProDetail();
   setSubmit(false);
   countVal.value = 0;
   grade.value = '00';
   pannelTab.value = 'first';
+  reload();
+  // 在选择关卡的页面，直接刷新；否则调选择关卡页的获取关卡接口
+  if (route.path === '/') {
+    location.reload();
+  } else {
+    getLevel.value && getLevel.value();
+  }
 };
 // 查看实验报告
 const toReport = () => {
@@ -539,6 +583,7 @@ const getList = async () => {
   getProDetail();
 };
 onMounted(() => {
+  getLevel.value = inject('getLevel'); // 关卡页面获取关卡方法
   per.value = param.assessmentId ? 1 : param.competitionId ? 2 : 0;
   if (param.assessmentId) {
     getAssList();
@@ -747,9 +792,9 @@ onMounted(() => {
   width: 0;
   height: 0;
   .toggle-panel {
-    @apply top-[200px];
+    @apply bg-[url('@/assets/images/panel/right.png')];
     &.active {
-      @apply top-[35%] left-[100%] bg-[url('@/assets/images/panel/left.png')];
+      @apply bg-[url('@/assets/images/panel/left.png')];
     }
   }
   &.active {

src/views/Home.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex justify-between items-center h-[64px] px-5 bg-white">
-    <h1>金融产品设计及数字化营销沙盘系统</h1>
+    <h1>金融产品设计及数字化营销沙盘系统{{ projectId }}</h1>
     <div class="inline-flex items-center">
       <el-tooltip effect="light"
                   content="退出实训"
@@ -65,7 +65,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, provide } from 'vue';
 import { cancelCollection, collect } from '@/api/bank';
 import { checkPointListByStu } from '@/api/config';
 import Panel from '@/components/Panel/index.vue';
@@ -81,13 +81,13 @@ const collected = ref<boolean>(false);
 const curLevel = ref<number | string>('');
 const levels = ref<Record<string, any>[]>([]);
 const projectId = Cookies.get('sand-projectId') ?? route.query.projectId;
-const step = 150;
 // 关卡列表
 const getLevel = async (only: any = '') => {
   if (only) collected.value = !collected.value;
   const { data } = await checkPointListByStu(+projectId, collected.value ? 1 : '');
   levels.value = data;
 };
+provide('getLevel', getLevel);
 // 点击关卡回调
 const selecLevel = (item: Record<string, any>) => {
   curLevel.value = item.checkpointId;

src/views/product/bank/Add.vue

@@ -424,6 +424,10 @@ const submit = async (formEl: FormInstance | undefined) => {
           await save(param);
           addRecord(param);
         }
+        router.push({
+          path: '/product/bank/detail',
+          query: route.query,
+        });
         ElMessage.success('提交成功！');
         emit('getList', 1);
       } finally {

src/views/product/bank/CardList.vue

@@ -22,7 +22,7 @@
         <li v-for="(item, i) in list"
             :key="i"
             :class="{ active: item.id === id }"
-            @click="switchProduct(item.id)">
+            @click="switchProduct('/product/bank/detail', item.id)">
           <el-popconfirm title="您确定删除吗？"
                          @confirm="handleDelete(item.id)">
             <template #reference>
@@ -69,6 +69,7 @@ import Cookies from 'js-cookie';
 const router = useRouter();
 const route = useRoute();
 const action = ref<any>('');
+const name = route.query.name ?? '';
 const projectId = +Cookies.get('sand-projectId');
 const levelId = +Cookies.get('sand-level');
 
@@ -80,12 +81,20 @@ const productType = computed(() => route.query.type); // 个人/企业
 const role = computed(() => +route.query.role || 41);
 const id = computed(() => +route.query.id);
 // 列表
-const getList = async (first: any) => {
+const getList = async () => {
   loading.value = true;
   try {
-    const { data } = await bankingProductsList({ pageNum: 1, pageSize: 1000, productType: productType.value, checkPointId: levelId, projectId });
+    const { data } = await bankingProductsList({
+      pageNum: 1,
+      pageSize: 1000,
+      productType: productType.value,
+      checkPointId: levelId,
+      projectId,
+      roleId: route.query.role,
+      keyWord: name,
+    });
     list.value = data.message.records;
-    first && list.value.length && switchProduct(list.value[0].id);
+    route.path !== '/product/bank/add' && list.value.length && !id.value && switchProduct(route.path, list.value[0].id);
   } finally {
     loading.value = false;
   }
@@ -104,20 +113,20 @@ watch(
   },
 );
 // 产品切换
-const switchProduct = (id: number) => {
+const switchProduct = (path: string, bankId?: number) => {
-  router.push(`/product/bank/detail?type=${route.query.type}&i=${route.query.i}&role=${route.query.role}&id=${id}`);
+  router.push(`${path}?type=${route.query.type || ''}&i=${route.query.i}&role=${route.query.role}&id=${bankId}&name=${name}`);
 };
 // 新增
 const toAdd = () => {
-  router.push(`/product/bank/add?type=${route.query.type}&i=${route.query.i}&role=${route.query.role}`);
+  router.push(`/product/bank/add?type=${route.query.type || ''}&i=${route.query.i}&role=${route.query.role}`);
 };
 // 返回列表
 const toList = () => {
-  router.push(`/product/bank?type=${route.query.type}&i=${route.query.i}&role=${route.query.role}`);
+  router.push(`/product/bank?type=${route.query.type || ''}&i=${route.query.i}&role=${route.query.role}`);
 };
 const handleDelete = async (id: number) => {
   await batchDeletion([id]);
-  getList(1);
+  getList();
   ElMessage.success('删除成功！');
 };
 </script>

src/views/product/bank/List.vue

@@ -210,14 +210,11 @@ const toAdd = () => {
 };
 // 产品详情
 const toDetail = async (path: string, id: number) => {
-  router.push(`${path}?type=${params.productType}&i=${route.query.i}&role=${route.query.role}&id=${id}`);
+  router.push(`${path}?type=${params.productType}&i=${route.query.i}&role=${route.query.role}&id=${id}&name=${params.keyWord}`);
 };
 // 卡片模式
 const toCardList = () => {
-  router.push({
+  router.push(`/product/bank/detail?type=${params.productType}&i=${route.query.i}&role=${route.query.role}&name=${params.keyWord}`);
-    path: '/product/bank/config',
-    query: route.query,
-  });
 };
 
 const handleDelete = async (id: number) => {

src/views/product/insurance/Add.vue

@@ -187,6 +187,7 @@ const submit = async () => {
           sumInsured: +e.sumInsured,
         });
     });
+    if (param.premiumAmount && !isNaN(param.premiumAmount)) param.premiumAmount = Number(param.premiumAmount).toFixed(2);
     param.applicationMaterial = param.applicationMaterial.join();
     param.exemptionFromLiability = param.exemptionFromLiability.join();
     await addInsuranceProducts(param);

src/views/product/insurance/CardList.vue

@@ -2,8 +2,7 @@
   <div class="block flex"
        style="padding-top: 0">
     <div class="left w-[241px] min-w-[241px] pr-5 py-4">
-      <div v-if="role == 41"
+      <div class="flex justify-center items-center py-2 mb-3 text-sm text-[#006BFF] bg-[rgba(0,107,255,0.1)] border border-solid border-[#006BFF] rounded-[10px] cursor-pointer"
-           class="flex justify-center items-center py-2 mb-3 text-sm text-[#006BFF] bg-[rgba(0,107,255,0.1)] border border-solid border-[#006BFF] rounded-[10px] cursor-pointer"
            @click="toAdd">
         <el-icon class="mr-1"
                  :size="16"
@@ -35,6 +34,8 @@
           <h6>{{ item.insuranceName }}</h6>
           <p v-if="item.minimumAge && item.maximumAge"
              class="type">{{ item.minimumAge + '-' + item.maximumAge + '周岁' }}</p>
+          <p v-if="item.insuranceCoverageConfig"
+             class="type">{{ item.insuranceCoverageConfig }}</p>
           <p class="date">创建日期：{{ item.createTime.split(' ')[0] }}</p>
         </li>
       </ul>
@@ -48,7 +49,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref, watch, defineAsyncComponent } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 import { ElMessage } from 'element-plus';
 import { Plus } from '@element-plus/icons-vue';
 import { insuranceList, batchDeletion } from '@/api/insurance';
@@ -60,21 +61,20 @@ import Cookies from 'js-cookie';
 const router = useRouter();
 const route = useRoute();
 const action = ref<any>('');
+const name = route.query.name ?? '';
 const projectId = +Cookies.get('sand-projectId');
 const levelId = +Cookies.get('sand-level');
 
 const list = ref<Array<any>>([]);
 const loading = ref<boolean>(false);
-const productType = computed(() => route.query.type); // 个人/企业
-const role = computed(() => +route.query.role || 41);
 const id = computed(() => +route.query.id);
 // 列表
-const getList = async (first: any) => {
+const getList = async () => {
   loading.value = true;
   try {
-    const { data } = await insuranceList({ pageNum: 1, pageSize: 1000, checkPointId: levelId, projectId });
+    const { data } = await insuranceList({ pageNum: 1, pageSize: 1000, checkPointId: levelId, projectId, insuranceName: name });
     list.value = data.records;
-    first && list.value.length && switchProduct(list.value[0].insuranceId);
+    route.path !== '/product/insurance/add' && list.value.length && !id.value && switchProduct(list.value[0].insuranceId);
   } finally {
     loading.value = false;
   }
@@ -93,8 +93,8 @@ watch(
   },
 );
 // 产品切换
-const switchProduct = (id: number) => {
+const switchProduct = (insId: number) => {
-  router.push(`/product/insurance/detail?id=` + id);
+  router.push(`/product/insurance/detail?id=` + insId);
 };
 // 新增
 const toAdd = () => {
@@ -104,8 +104,8 @@ const toAdd = () => {
 const toList = () => {
   router.push(`/product/insurance`);
 };
-const handleDelete = async (id: number) => {
+const handleDelete = async (insId: number) => {
-  await batchDeletion([id]);
+  await batchDeletion([insId]);
   getList(1);
   ElMessage.success('删除成功！');
 };
@@ -134,7 +134,7 @@ const handleDelete = async (id: number) => {
     @apply my-[15px] text-sm text-[#333];
   }
   .date {
-    @apply text-sm text-[#8798a9];
+    @apply mt-[15px] text-sm text-[#8798a9];
   }
 }
 </style>

src/views/product/insurance/List.vue

@@ -66,7 +66,7 @@
                        label="保费金额（元）"
                        min-width="120">
         <template #default="{ row }">
-          {{ row.premiumAmount || '-' }}
+          {{ row.premiumAmount?.toFixed(2) || '-' }}
         </template>
       </el-table-column>
       <el-table-column prop="createTime"
@@ -110,7 +110,6 @@ import { insuranceList, batchDeletion } from '@/api/insurance';
 import Search from '@/components/Search.vue';
 import { useRouter, useRoute } from 'vue-router';
 import Cookies from 'js-cookie';
-import { productState, getExpertStatus, getStatus } from '@/store/useProduct';
 
 const router = useRouter();
 const route = useRoute();
@@ -173,16 +172,11 @@ const toAdd = () => {
 };
 // 产品详情
 const toDetail = async (path: string, id: number) => {
-  router.push({
+  router.push(`${path}?id=${id}&name=${params.insuranceName}`);
-    path,
-    query: {
-      id,
-    },
-  });
 };
 // 卡片模式
 const toCardList = () => {
-  router.push('/product/insurance/detail');
+  router.push(`/product/insurance/detail?name=${params.insuranceName}`);
 };
 
 const handleDelete = async (id: number) => {

src/views/product/interestRate/CardList.vue

@@ -71,7 +71,7 @@ const switchProduct = (productId: number | string) => {
   router.push(`/product/interestRate/${route.params.action}?i=3&role=42&id=${productId}`);
 };
 // 列表
-const getList = async (refresh?: number) => {
+const getList = async () => {
   const { process } = await getProcessInformationBasedOnRoles(68);
   // eslint-disable-next-line no-unused-expressions
   !id.value && switchProduct(process[curTab.value === 'tab1' ? 0 : 1].recordChildren[0].id);

src/views/product/strategy/CardList.vue

@@ -124,11 +124,11 @@ const riskId = ref<number>(702);
 
 // 准入策略切换
 const switchProduct = (id: number) => {
-  router.push(`/product/strategy?type=${route.query.type}&i=${route.query.i}&role=${route.query.role}&id=${id}`);
+  router.push(`/product/strategy?&i=${route.query.i}&role=${route.query.role}&id=${id}`);
 };
 // 信用评分策略切换
 const switchProductCredit = (id: number) => {
-  router.push(`/product/strategy?type=${route.query.type}&i=${route.query.i}&role=${route.query.role}&creditId=${id}`);
+  router.push(`/product/strategy?&i=${route.query.i}&role=${route.query.role}&creditId=${id}`);
 };
 // 风险度策略切换
 const switchProductRisk = (id: number) => {