style:优化代码格式和样式

- 调整 van-icon 组件的闭合方式，提高代码可读性
- 修正 CSS 选择器的子元素选择符，统一代码风格

components.d.ts

@@ -15,11 +15,13 @@ declare module 'vue' {
     VanCellGroup: typeof import('vant/es')['CellGroup']
     VanCheckbox: typeof import('vant/es')['Checkbox']
     VanCheckboxGroup: typeof import('vant/es')['CheckboxGroup']
+    VanCol: typeof import('vant/es')['Col']
     VanDialog: typeof import('vant/es')['Dialog']
     VanDivider: typeof import('vant/es')['Divider']
     VanField: typeof import('vant/es')['Field']
     VanIcon: typeof import('vant/es')['Icon']
     VanPopup: typeof import('vant/es')['Popup']
+    VanRow: typeof import('vant/es')['Row']
     VanSearch: typeof import('vant/es')['Search']
     VanSwitch: typeof import('vant/es')['Switch']
     VanTabbar: typeof import('vant/es')['Tabbar']

src/assets/css/main.scss

@@ -1,6 +1,6 @@
-@import 'base';
+@import 'base.scss';
 @import '../../fonts/iconfont.css';
-@import 'vant';
+@import 'vant.scss';
 
 a,
 .green {
@@ -39,3 +39,12 @@ a,
 .space-between {
   justify-content: space-between;
 }
+
+.text-center {
+  text-align: center;
+}
+
+//剔除移动端所有滚动条
+*::-webkit-scrollbar {
+  display: none;
+}

src/components/YLSelect.vue

@@ -1,5 +1,10 @@
 <template>
-  <el-select v-model="selectedValue" class="yl-select-wrapper" @change="handleChange">
+  <el-select
+    v-model="selectedValue"
+    class="yl-select-wrapper"
+    @change="handleChange"
+    popper-class="yl-select"
+  >
     <el-option
       v-for="item in options"
       :key="item.value"
@@ -11,7 +16,7 @@
     </el-option>
     <template #label="{ label }">
       <!--      {{ option }}-->
-      <div v-html="label"></div>
+      <div v-html="format(label)" class="yl-select-label"></div>
     </template>
   </el-select>
 </template>
@@ -59,9 +64,15 @@ export default defineComponent({
       emit('change', event);
     };
 
+    const format = (html) => {
+      let div = document.createElement('div');
+      div.innerHTML = html;
+      return div.innerText;
+    };
     return {
       selectedValue,
-      handleChange
+      handleChange,
+      format
     };
   }
 });
@@ -74,30 +85,17 @@ export default defineComponent({
   font-size: 16px; /* 增加字体大小 */
   line-height: 1.5; /* 增加行高 */
 }
-
+.yl-select-label {
-.yl-select {
+  //width: 80%;
-  height: 35px; /* 增加高度以适应触摸 */
+  //overflow: hidden;
-  padding: 10px; /* 增加内边距 */
+  //text-overflow: ellipsis;
-  border: 1px solid #ccc;
+  //white-space: nowrap;
-  border-radius: 5px;
+}
-  background-color: #fff;
+</style>
-  outline: none;
+
-  cursor: pointer;
+<style>
-  appearance: none;
+.yl-select {
-
+  max-width: 80%;
-  &:disabled {
+  overflow: hidden;
-    background-color: #f5f5f5;
-    cursor: not-allowed;
-  }
-
-  &::after {
-    content: '\25BC'; /* 添加下拉箭头 */
-    position: absolute;
-    top: 50%;
-    right: 10px;
-    color: #999;
-    pointer-events: none;
-    transform: translateY(-50%);
-  }
 }
 </style>

src/stores/modules/common.ts

@@ -5837,7 +5837,8 @@ export const useCommonStore = defineStore('common', {
             is_repeat: 0,
             allow_repeat_num: 2,
             repeat_type: 0,
-            alert_text: '您在每一题的态度与观点均对我们有非常重要的意义，请您务必仔细阅读题目后回答，连续一致的答案可能会导致整个问卷的作废，谢谢您的配合。'
+            alert_text:
+              '您在每一题的态度与观点均对我们有非常重要的意义，请您务必仔细阅读题目后回答，连续一致的答案可能会导致整个问卷的作废，谢谢您的配合。'
           },
           tip: '',
           question_code: '',
@@ -6102,7 +6103,6 @@ export const useCommonStore = defineStore('common', {
           ],
           related: []
         }
-
       ],
       cycle_pages: null
     }

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

@@ -5,7 +5,7 @@
   </div>
 
   <!--  操作项弹窗-->
-  <van-action-sheet v-model:show="show">
+  <van-action-sheet v-model:show="show" title="">
     <template #description>
       <div class="flex flex-start">操作选项</div>
     </template>
@@ -53,53 +53,28 @@
 
   <van-popup
     v-model:show="questionBeforeShow"
+    :close-on-click-overlay="false"
     title="题前隐藏逻辑"
     label="题前隐藏逻辑"
     position="bottom"
-    :overlay="false"
     closeable
     close-icon="close"
     round
-    :style="{ maxHeight: '75%' }"
+    :style="{ minHeight: '50%', maxHeight: '75%' }"
   >
     <div class="mv10">
-      <header><strong>题前隐藏逻辑</strong></header>
+      <header>
-      <question-before
+        <strong>{{ skipType === 0 ? '题后跳转逻辑' : '题前隐藏逻辑' }}</strong>
-        v-model="questionsInfo.logics"
+      </header>
-        :skipType="skipType"
+      <!--      题前 题后逻辑  本来打算拆成两个  但是 只有最后的处理不一样-->
-        :activeQuestion="activeQuestion"
+      <div class="before-or-after">
-      ></question-before>
+        <question-before
-      <van-button>添加逻辑</van-button>
+          v-model="questionsInfo.logics"
+          :skipType="skipType"
+          :activeQuestion="activeQuestion"
+        ></question-before>
+      </div>
     </div>
-
-    <!--    <template v-for="(item, index) in logics" :key="index" class="flex">-->
-    <!--      <div class="flex space-between mv10">-->
-    <!--        <div-->
-    <!--          v-if="-->
-    <!--            item.skip_type === skipType && item.question_index === activeQuestion.question_index-->
-    <!--          "-->
-    <!--          class="question-setting"-->
-    <!--        >-->
-    <!--          <template v-for="(log, logIndex) in item.logic" :key="logIndex">-->
-    <!--            <div>-->
-    <!--              <yl-select-->
-    <!--                v-model="log.logic"-->
-    <!--                :options="settingIfOption"-->
-    <!--                class="question-setting-if"-->
-    <!--              ></yl-select>-->
-    <!--              <yl-select v-model="log.logic" :options="settingIfOption"></yl-select>-->
-    <!--            </div>-->
-    <!--          </template>-->
-    <!--        </div>-->
-    <!--        <div-->
-    <!--          v-if="-->
-    <!--            item.skip_type === skipType && item.question_index === activeQuestion.question_index-->
-    <!--          "-->
-    <!--        >-->
-    <!--          del-->
-    <!--        </div>-->
-    <!--      </div>-->
-    <!--    </template>-->
   </van-popup>
 </template>
 <script setup>
@@ -218,7 +193,10 @@ const questionSetting = (type) => {
 .mv10 {
   margin: 10px;
 }
-
+.before-or-after {
+  height: 500px;
+  overflow: auto;
+}
 .y-select {
   min-width: 10vw;
 

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

@@ -73,13 +73,22 @@
               <van-icon
                 v-if="log.logic !== 'always'"
                 name="add"
-                @click="addLogic(logIndex, item.logic)"
+                @click="addLogicItem(logIndex, item.logic)"
               ></van-icon>
             </div>
           </div>
         </template>
         <!--            如果是题前隐藏-->
         <div v-if="skipType === 1">隐藏本题</div>
+        <!--            如果是题后跳转-->
+        <div v-if="skipType === 0" class="flex align-center space-between">
+          <div class="jump-text mr10">跳转到</div>
+          <yl-select
+            class="skip-select"
+            v-model="item.skip_question_index"
+            :options="skipOption"
+          ></yl-select>
+        </div>
       </div>
 
       <van-divider
@@ -88,7 +97,7 @@
         content-position="right"
         :style="{ borderColor: '#bfbfbf' }"
       >
-        <van-icon name="delete">删除</van-icon>
+        <van-icon name="delete" @click="remoteLogic(index)">删除</van-icon>
       </van-divider>
       <!--      <div-->
       <!--        v-if="item.skip_type === skipType && item.question_index === activeQuestion.question_index"-->
@@ -97,6 +106,9 @@
       <!--      </div>-->
     </div>
   </template>
+  <div class="text-center">
+    <van-button size="small" @click="addLogic">添加逻辑</van-button>
+  </div>
 </template>
 <script setup>
 import YlSelect from '@/components/YLSelect.vue';
@@ -136,6 +148,35 @@ if (questionIndex > 0) {
     };
   });
 }
+// 跳转题目
+const skipOption = [
+  {
+    value: -1,
+    label: '正常完成'
+  },
+  {
+    value: -2,
+    label: '提前终止'
+  },
+  {
+    value: -3,
+    label: '配额超限'
+  }
+];
+// questions 排除当前题目的所有数据 并且 排除questions里面无question_type的数据
+
+skipOption.push(
+  ...questions
+    .filter((item) => {
+      return item.question_index !== props.activeQuestion.question_index && item.question_type;
+    })
+    .map((item) => {
+      return {
+        value: item.question_index,
+        label: item.stem
+      };
+    })
+);
 // 题目选项
 let optionOptions = [];
 
@@ -177,8 +218,13 @@ const deleteLogic = (logIndex, item, index) => {
     logics.value.splice(index, 1);
   }
 };
+//  删除 一个 逻辑
+const remoteLogic = (index) => {
+  logics.value.splice(index, 1);
+};
+
 //  添加题目
-const addLogic = (logIndex, item) => {
+const addLogicItem = (logIndex, item) => {
   item.splice(logIndex + 1, 0, {
     logic: 'and',
     question_index: '',
@@ -192,6 +238,42 @@ const addLogic = (logIndex, item) => {
     group_index: null
   });
 };
+
+// 增加逻辑配置
+const addLogic = () => {
+  logics.value.push({
+    logic: [
+      {
+        value: '',
+        location: 0,
+        date: '',
+        time: '',
+        type: 0,
+        row_type: 0,
+        cell_type: 0,
+        logic: 'if',
+        operator: '=',
+        is_answer: 1,
+        is_select: 0,
+        row_index: 0,
+        cell_index: 0,
+        question_type: '',
+        question_index: '',
+        relation_question_index: 0,
+        relation_question_row_index: 0,
+        relation_question_cell_index: 0,
+        is_option_group: '',
+        option_index: '',
+        skip_type: null,
+        question_id: null
+      }
+    ],
+    skip_type: props.skipType,
+    id: props.activeQuestion.id,
+    question_index: props.activeQuestion.question_index,
+    question_id: props.activeQuestion.question_id
+  });
+};
 const groupOptions = [
   {
     label: '选项',
@@ -272,7 +354,9 @@ const logicIf = (value, index) => {
   flex: none;
   width: 40px;
 }
-
+.jump-text {
+  width: 50px;
+}
 .question-before {
   & .if {
     flex: none;
@@ -300,10 +384,10 @@ const logicIf = (value, index) => {
   }
 
   & .option {
-    //width: 120px;
     width: 100%;
-
+  }
-    //flex: 1;
+  & .skip-select {
+    width: 200px;
   }
 }
 </style>

src/views/Design/components/Questions/MartrixQuestion.vue

@@ -30,20 +30,20 @@ const handleAdd = (addType: 'row' | 'col') => {
 
 const handleMartrixAction = (action: 'delete' | 'setting' | 'more') => {
   switch (action) {
-  //   case 'delete':
+    //   case 'delete':
-  // showConfirmDialog({
+    // showConfirmDialog({
-  //   title: '提示',
+    //   title: '提示',
-  //   message: '是否确认删除题目？'
+    //   message: '是否确认删除题目？'
-  // }).then(() => {
+    // }).then(() => {
-  //   element.list = [];
+    //   element.list = [];
-  // });
+    // });
-  // break;
+    // break;
-  // case 'setting':
+    // case 'setting':
-  //     break;
+    //     break;
-  // case 'more':
+    // case 'more':
-  //     break;
+    //     break;
-  default:
+    default:
-    break;
+      break;
   }
 };
 </script>
@@ -79,17 +79,14 @@ const handleMartrixAction = (action: 'delete' | 'setting' | 'more') => {
             <span @click="handleAdd('col')"> <van-icon name="add-o" />添加列标签</span>
           </van-col>
           <van-col :span="6" :offset="6" class="martrix-table-action-tool">
-            <span @click="handleMartrixAction('delete')"> <van-icon
+            <span @click="handleMartrixAction('delete')">
-              name="delete"
+              <van-icon name="delete" style="color: red"
-              style="color: red;"
             /></span>
-            <span @click="handleMartrixAction('setting')"> <van-icon
+            <span @click="handleMartrixAction('setting')">
-              name="setting"
+              <van-icon name="setting" style="color: lightgrey"
-              style="color: lightgrey;"
             /></span>
-            <span @click="handleMartrixAction('more')"> <van-icon
+            <span @click="handleMartrixAction('more')">
-              name="ellipsis"
+              <van-icon name="ellipsis" style="color: lightgrey"
-              style="color: lightgrey;"
             /></span>
           </van-col>
         </van-row>
@@ -110,7 +107,6 @@ const handleMartrixAction = (action: 'delete' | 'setting' | 'more') => {
     border-width: 0 0 1px;
     text-align: left;
   }
-
 }
 
 .martrix-table-action {
@@ -125,10 +121,10 @@ const handleMartrixAction = (action: 'delete' | 'setting' | 'more') => {
     display: flex;
     justify-content: flex-end;
 
-    &>span {
+    & > span {
       margin-right: 6px;
       font-size: 16px;
     }
   }
 }
-</style>
+</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>

src/views/Survey/views/Create/Index.vue

@@ -19,7 +19,9 @@
           <van-popup v-model:show="show" round position="bottom" :style="{ height: '50%' }">
             <van-row class="ques_title">
               <van-col :span="6">添加题目</van-col>
-              <van-col :span="6" :offset="12" @click="show = false"> <van-icon name="close" /></van-col>
+              <van-col :span="6" :offset="12" @click="show = false">
+                <van-icon name="close"
+              /></van-col>
             </van-row>
             <ul>
               <li v-for="item in quesList" :key="item.type">
@@ -149,13 +151,13 @@ defineExpose({ init });
   margin: 10px 5px;
   padding: 5px;
 
-  &>div {
+  & > div {
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
 
-    &>button {
+    & > button {
       margin: 20px;
       border-radius: 10px;
       background-color: lightgreen;

src/views/Survey/views/Publish/Index.vue

@@ -6,7 +6,7 @@
       </template>
     </van-nav-bar>
 
-    <van-cell-group inset style="margin-top: 20px;padding: 30px;">
+    <van-cell-group inset style="margin-top: 20px; padding: 30px">
       <div>
         <img
           width="100%"
@@ -89,7 +89,7 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    margin: 10px
+    margin: 10px;
   }
 }
 </style>