feat: 新增选项操作功能并优化问卷设计页面

- 新增 OptionAction 组件用于选项操作
- 更新 BaseSelect 组件，集成 OptionAction 功能
- 优化 Paging 组件样式
- 调整 Design 页面布局和样式

src/App.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import Layouts from './layouts/index.vue';
+import { RouterView } from 'vue-router';
 </script>
 
 <template>
   <div>
-    <Layouts />
+    <RouterView />
   </div>
 </template>

src/fonts/demo.css

@@ -4,11 +4,11 @@
   src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
   src:
     url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix')
-    format('embedded-opentype'),
+      format('embedded-opentype'),
     url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
     url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
     url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont')
-    format('svg');
+      format('svg');
 }
 
 .logo {

src/router/index.ts

@@ -1,16 +1,43 @@
 import { createRouter, createWebHistory } from 'vue-router';
-import Home from '../views/Home/Index.vue';
+import layout from '@/layouts/index.vue';
 import Design from '@/views/Design/Index.vue';
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
     {
       path: '/',
-      name: 'home',
-      component: Home,
+      name: '/',
+      component: layout,
+      redirect: '/home',
       meta: {
         title: '首页'
-      }
+      },
+      children: [
+        {
+          path: '/home',
+          name: 'home',
+          meta: {
+            title: '首页'
+          },
+          component: () => import('../views/Home/Index.vue')
+        },
+        {
+          path: '/survey',
+          name: 'survey',
+          meta: {
+            title: '问卷'
+          },
+          component: () => import('../views/Survey/Index.vue')
+        },
+        {
+          path: '/market',
+          name: 'market',
+          meta: {
+            title: '模板'
+          },
+          component: () => import('../views/Market/Index.vue')
+        }
+      ]
     },
     {
       path: '/design',
@@ -20,22 +47,6 @@ const router = createRouter({
       // this generates a separate chunk (About.[hash].js) for this route
       // which is lazy-loaded when the route is visited.
       component: Design
-    },
-    {
-      path: '/survey',
-      name: 'survey',
-      meta: {
-        title: '问卷'
-      },
-      component: () => import('../views/Survey/Index.vue')
-    },
-    {
-      path: '/market',
-      name: 'market',
-      meta: {
-        title: '模板'
-      },
-      component: () => import('../views/Market/Index.vue')
     }
   ]
 });

src/views/Design/components/ActionCompoents/OptionAction.vue

@@ -82,23 +82,23 @@ const openOptionActionModel = (item, index) => {
 // 上下移动
 const optionMove = (action) => {
   switch (action) {
-  case 'up':
-    if (activeIndex.value === 0) {
-      show.value = false;
-      return;
-    }
-    // 向上移动
-    element.value.splice(activeIndex.value - 1, 0, element.value.splice(activeIndex.value, 1)[0]);
-    activeIndex.value -= 1;
-    break;
-  case 'down':
-    if (activeIndex.value === element.value.length) {
-      show.value = false;
-      return;
-    }
-    element.value.splice(activeIndex.value + 1, 0, element.value.splice(activeIndex.value, 1)[0]);
-    activeIndex.value += 1;
-    break;
+    case 'up':
+      if (activeIndex.value === 0) {
+        show.value = false;
+        return;
+      }
+      // 向上移动
+      element.value.splice(activeIndex.value - 1, 0, element.value.splice(activeIndex.value, 1)[0]);
+      activeIndex.value -= 1;
+      break;
+    case 'down':
+      if (activeIndex.value === element.value.length) {
+        show.value = false;
+        return;
+      }
+      element.value.splice(activeIndex.value + 1, 0, element.value.splice(activeIndex.value, 1)[0]);
+      activeIndex.value += 1;
+      break;
   }
 };
 

src/views/Design/components/ActionCompoents/QuestionAction.vue

@@ -35,19 +35,21 @@
       <van-divider></van-divider>
       <van-cell title="题前隐藏" :border="false">
         <template #right-icon>
-          <span> {{ getSkipTypeText() }} <van-icon name="arrow"></van-icon></span>
+          <span> {{ getSkipTypeText(0) }} <van-icon name="arrow"></van-icon></span>
         </template>
       </van-cell>
       <van-cell title="题后跳转" :border="false">
         <template #right-icon>
-          <span> 设置 <van-icon name="arrow"></van-icon></span>
+          <span> {{ getSkipTypeText(1) }} <van-icon name="arrow"></van-icon></span>
         </template>
       </van-cell>
       <van-divider></van-divider>
-      <van-cell title="下移选项" :border="false" @click="questionMove('down')"></van-cell>
-      <van-cell title="上移选项" :border="false" @click="questionMove('up')"></van-cell>
+      <van-cell title="下移题目" :border="false" @click="questionMove('down')"></van-cell>
+      <van-cell title="上移题目" :border="false" @click="questionMove('up')"></van-cell>
     </van-cell-group>
   </van-action-sheet>
+
+  <!-- 题目操作   题前  题后-->
 </template>
 <script setup>
 import { showConfirmDialog } from 'vant';
@@ -80,6 +82,7 @@ const props = defineProps({
   }
 });
 const questions = ref(props.questions);
+
 // 当前题目
 const activeQuestion = ref(props.data);
 
@@ -122,11 +125,21 @@ const questionMove = (action) => {
 };
 
 // 获取题前隐藏  和题后 跳转 文字
-const getSkipTypeText = () => {
-  setTimeout(() => {
-    logics[0].id = 123;
-  }, 2000);
-  return logics[0].id;
+const getSkipTypeText = (skipType) => {
+  const ls = [];
+  logics.map((item) => {
+    if (
+      item.skip_type === skipType &&
+      item.question_index === activeQuestion.value.question_index
+    ) {
+      ls.push(item);
+    }
+  });
+  let text = '未设置';
+  if (ls.length > 0) {
+    text = `已配置 (${ls.length})`;
+  }
+  return text;
 };
 </script>
 <style scoped lang="scss">

src/views/Design/components/Questions/paging/Paging.vue

@@ -11,7 +11,8 @@
           class="iconfont active-icon"
           :style="{ marginRight: isLastPage ? '0' : '16px' }"
           @click="activePage"
-        >&#xe86c;</i>
+          >&#xe86c;</i
+        >
         <template v-if="!isLastPage">
           <i class="iconfont moverQues" style="margin-right: 16px">&#xe71b;</i>
           <i class="iconfont" @click="deleteHandle">&#xe6c5;</i>

src/views/Home/components/Market/Index.vue

@@ -11,13 +11,11 @@
   </div>
 </template>
 
-<script setup lang="ts">
-
-</script>
+<script setup lang="ts"></script>
 
 <style scoped>
 .market {
-  &> :first-child {
+  & > :first-child {
     display: flex;
     align-items: end;
     justify-content: space-between;

src/views/Home/components/Suvrey/Index.vue

@@ -6,25 +6,22 @@
       <span @click="$router.push('/survey')">全部问卷></span>
     </div>
     <div class="survey_items">
-      <div v-for="survey in 3" :key="survey">
-      </div>
+      <div v-for="survey in 3" :key="survey"></div>
     </div>
   </div>
 </template>
 
-<script setup lang="ts">
-
-</script>
+<script setup lang="ts"></script>
 
 <style scoped>
 .survey {
-  &> :first-child {
+  & > :first-child {
     display: flex;
     align-items: end;
     justify-content: space-between;
     margin: 10px 0;
 
-    &>span {
+    & > span {
       color: grey;
       font-size: 10px;
     }
@@ -44,6 +41,5 @@
       background-color: white;
     }
   }
-
 }
 </style>

src/views/Market/Index.vue

@@ -3,7 +3,9 @@
     <div v-for="item in 10" :key="item" class="template">
       <img src="https://picsum.photos/131/128" width="110" height="100" alt="" />
       <span>报名/签到模板</span>
-      <span style="color: rgb(127, 127, 127);">报名签到 | 引用 {{ item }} 次 | 创建人: {{ '张三' }}</span>
+      <span style="color: rgb(127, 127, 127)"
+        >报名签到 | 引用 {{ item }} 次 | 创建人: {{ '张三' }}</span
+      >
     </div>
   </div>
 </template>