feat(survey): 优化创建问卷页面功能和样式

- 添加题目按钮移至 Design 组件内部- 实现保存、投放和预览功能 - 优化问卷标题和投放设置样式 - 添加每页一题设置保存功能 - 调整问卷列表样式
2025-03-12 10:18:37 +08:00
parent 4d34c293b8
commit 03698d975a
9 changed files with 113 additions and 91 deletions
--- a/src/assets/css/main.scss
+++ b/src/assets/css/main.scss
@@ -3,6 +3,16 @@
@import 'vant';
@import '../../fonts/moblie/iconfont.css';

+$theme-color: #70b936;
+
+::v-deep .theme-color {
+  color: $theme-color;
+}
+
+::v-deep .theme-back-color {
+  background-color: $theme-color;
+}
+
 a,
 .green {
  padding: 3px;
--- a/src/components/YLPicker.vue
+++ b/src/components/YLPicker.vue
@@ -167,8 +167,8 @@ const getMaxDateLimit = computed(() => {
    props.format
  );
  const tempStr = '0000-12-31 23:59:59';
-  const result =
-    props.maxDate.length !== 0 && thisMax.length > props.maxDate.length
+  const result
+    = props.maxDate.length !== 0 && thisMax.length > props.maxDate.length
      ? thisMax.slice(0, props.maxDate.length) + tempStr.slice(props.maxDate.length)
      : thisMax;
  return result.slice(0, props.format.length);
@@ -191,8 +191,8 @@ function onChange({ selectedValues, columnIndex }) {
    renderMinuteColumns,
    renderSecondColumns
  ];
-  updateColumns[columnIndex] &&
-    updateColumns[columnIndex](changeValue, getMinDateLimit.value, getMaxDateLimit.value, false);
+  updateColumns[columnIndex]
+    && updateColumns[columnIndex](changeValue, getMinDateLimit.value, getMaxDateLimit.value, false);
 }

 // 渲染全部列
--- a/src/components/contenteditable.vue
+++ b/src/components/contenteditable.vue
@@ -134,6 +134,7 @@ onMounted(() => {
  bottom: 0;
  left: 0;
  z-index: 2008;
+  display: flex;
  width: 100%;
  height: 40px;
  padding: 0 10px;
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,4 +1,4 @@
-import './assets/css/main.scss';
+import '@/assets/css/main.scss';
 import 'amfe-flexible';
 import { createApp } from 'vue';
 import { createPinia } from 'pinia';
--- a/src/utils/public.js
+++ b/src/utils/public.js
@@ -0,0 +1,12 @@
+// 根据是否是每页一体 处理成不同的结构类型
+export function getPages(questions, isOnePageOneQuestion) {
+  const pages = [];
+  questions.map((item) => {
+    if (isOnePageOneQuestion === 1) {
+      pages.push([item.question_index]);
+    } else {
+      pages.push(item.question_index);
+    }
+  });
+  return isOnePageOneQuestion === 1 ? pages : [pages];
+}
--- a/src/views/Design/Index.vue
+++ b/src/views/Design/Index.vue
@@ -15,6 +15,7 @@
          :index="index"
          :chooseQuestionId="chooseQuestionId"
          @get-choose-question-id="getChooseQuestionId"
+          @move="emitFun.move"
        >
          <!-- 选择题 -->
          <Choice
@@ -103,6 +104,8 @@
            </div>
          </template>
        </choose-question>
+        <!--         增加控制按钮-->
+        <slot name="button" :item="element"></slot>

        <!--        {{ element.question_type }}-->
        <!--        {{questionInfo.survey.pages.length}}-->
@@ -295,6 +298,14 @@ const actionFun = {
  }
 };

+// emit 事件
+
+const emitFun = {
+  move: (ev) => {
+    console.log(ev);
+  }
+};
+
 onMounted(() => {
  questionInfo.value = store.questionsInfo.value;
 });
--- a/src/views/Design/components/ActionCompoents/QuestionAction.vue
+++ b/src/views/Design/components/ActionCompoents/QuestionAction.vue
@@ -158,6 +158,8 @@ const deleteQuestion = () => {
    });
 };

+// emit
+const emit = defineEmits(['move', 'copy']);
 // 打开题目弹窗
 const openQuestionActionModel = () => {
  show.value = true;
@@ -166,6 +168,7 @@ const openQuestionActionModel = () => {
 const openQuestionSettingModel = () => {
  questionShow.value = true;
 };
+
 // 题目上下移动
 const questionMove = (action) => {
  if (action.action === 'down') {
@@ -175,6 +178,8 @@ const questionMove = (action) => {
    const temp = questions.value[props.questionIndex];
    questions.value.splice(props.questionIndex, 1);
    questions.value.splice(props.questionIndex + 1, 0, temp);
+
+    emit('move', 'down');
  } else if (action.action === 'up') {
    if (props.questionIndex === 0) {
      return;
@@ -182,6 +187,7 @@ const questionMove = (action) => {
    const temp = questions.value[props.questionIndex];
    questions.value.splice(props.questionIndex, 1);
    questions.value.splice(props.questionIndex - 1, 0, temp);
+    emit('move', 'up');
  } else {
    //   复制 题目  生成新的id   更新最新的 last index
    const temp = questions.value[props.questionIndex];
@@ -191,6 +197,7 @@ const questionMove = (action) => {
      question_index: questionsInfo.value.survey.last_question_index + 1
    });
    questionsInfo.value.survey.last_question_index += 1;
+    emit('copy', 'down');
  }
 };

--- a/src/views/Design/components/ChooseQuestion.vue
+++ b/src/views/Design/components/ChooseQuestion.vue
@@ -17,20 +17,10 @@
            v-model:data="element"
            :questions="questions"
            :questionIndex="index"
+            @move="emit('move', $event)"
+            @copy="emit('copy', $event)"
          ></question-action>
        </template>
-        <!--        <div-->
-        <!--          v-for="item in questionAction"-->
-        <!--          :key="item.key"-->
-        <!--          class=""-->
-        <!--          :class="item.class ? item.class : ''"-->
-        <!--          @click="itemAction(item)"-->
-        <!--        >-->
-        <!--          <i class="icon iconfont choose-question-active-container-icon" v-html="item.icon"></i>-->
-        <!--          <div class="choose-question-active-container-name">-->
-        <!--            {{ item.name }}-->
-        <!--          </div>-->
-        <!--        </div>-->
      </van-cell>
    </div>
  </div>
@@ -59,70 +49,14 @@ const props = defineProps({
  }
 });
 const element = ref(props.element);
-
 // 选中题目后出现的操作
-// const questionAction = ref([
-//   {
-//     icon: '&#xe630;',
-//     name: '编辑',
-//     key: 'edit',
-//     class: ''
-//   },
-//   {
-//     icon: '&#xe632;',
-//     name: '复制',
-//     key: 'copy',
-//     class: ''
-//   },
-//   {
-//     icon: '&#xe6a0;',
-//     name: '移动',
-//     key: 'moveUp',
-//     class: 'moverQues'
-//   },
-//   // {
-//   //   icon:'',
-//   //   name:'下移',
-//   //   key:'moveDown',
-//   // class:''
-//   // },
-//   {
-//     icon: '&#xe63f;',
-//     name: '删除',
-//     key: 'delete',
-//     class: ''
-//   }
-// ]);
-const emit = defineEmits(['getChooseQuestionId']);
+const emit = defineEmits(['getChooseQuestionId', 'move', 'copy']);

 // 选中题目
 const chooseItem = () => {
  // 使用从 defineProps 接收的 element 对象
  emit('getChooseQuestionId', props.element);
 };
-
-// const itemAction = (item) => {
-//   switch (item.key) {
-//     case 'edit':
-//       // vue router跳转到/edit
-//
-//       router.push({
-//         path: '/design/edit',
-//         query: {
-//           id: props.element.id
-//         }
-//       });
-//       break;
-//     case 'copy':
-//       break;
-//     case 'moveUp':
-//       break;
-//     case 'moveDown':
-//       break;
-//     case 'delete':
-//       break;
-//   }
-// };
 </script>
 <style scoped lang="scss">
 .choose-question-container {
--- a/src/views/Survey/views/Create/Index.vue
+++ b/src/views/Survey/views/Create/Index.vue
@@ -25,17 +25,23 @@
          ></contenteditable>
        </div>

-        <button v-if="questionInfo.questions.length === 0" @click="show = true">添加题目</button>
+        <van-button v-if="questionInfo.questions.length === 0" size="small" @click="show = true">
+          添加题目
+        </van-button>
      </div>
    </van-cell-group>

    <div class="ques">
      <!--      题目-->
-      <Design
-        :active-id="activeId"
-        class="desgin"
-        @get-active-question="getActiveQuestion"
-      ></Design>
+      <Design :active-id="activeId" class="design" @get-active-question="getActiveQuestion">
+        <template #button="{ item }">
+          <div class="design-button">
+            <van-button v-if="activeId === item.id" size="small" @click="show = true">
+              添加题目
+            </van-button>
+          </div>
+        </template>
+      </Design>
      <!--      <van-button @click="show = true">添加题目</van-button>-->
      <!--   弹出的新增题目弹窗-->
      <van-popup
@@ -74,9 +80,9 @@
        <span>投放设置</span>
      </div>
      <div class="survey-action_btn">
-        <van-button size="small">预览</van-button>
-        <van-button size="small">保存</van-button>
-        <van-button size="small" @click="$router.push({ name: 'publish' })">投放</van-button>
+        <van-button size="small" @click="previewQuestion">预览</van-button>
+        <van-button size="small" @click="saveAs">保存</van-button>
+        <van-button size="small" @click="publishQuestion">投放</van-button>
      </div>
    </div>
  </div>
@@ -96,6 +102,7 @@
            size="0.5rem"
            :active-value="1"
            :inactive-value="0"
+            @change="saveIsOnePage"
          ></van-switch>
        </template>
      </van-cell>
@@ -302,8 +309,9 @@ import {
  signQuestion,
  nps
 } from '@/utils/importJsons';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import YLPicker from '@/components/YLPicker.vue';
+import { getPages } from '@/utils/public';

 // 获取 Store 实例
 const counterStore = useCounterStore();
@@ -314,6 +322,7 @@ const activeQuestionIndex = ref(-1);
 const currentDate = ref();
 const currentType = ref();
 const route = useRoute();
+const router = useRouter();
 const surveyTitle = route.meta.title as string;
 const show = ref(false);
 // const textModel = ref(false);
@@ -344,6 +353,7 @@ const onConfirmDate = (e) => {
 // 获取选中的题目
 const getActiveQuestion = (activeQues) => {
  chooseQuestionId.value = activeQues.id;
+  activeId.value = activeQues.id;
  // 在questions 里 查找index 给 activeQuestionIndex
  questionInfo.value.questions.forEach((item, index) => {
    if (item.id === activeQues.id) {
@@ -482,9 +492,10 @@ const saveQuestionItem = (questionJson) => {
      questions: [questionJson],
      survey: {
        local_pages: [],
-        pages: questionInfo.value.questions.map((item) => {
-          return [item.question_index];
-        }),
+        pages: getPages(
+          questionInfo.value.questions,
+          questionInfo.value.survey.is_one_page_one_question
+        ),
        version: Base64.encode(`${new Date().getTime()}`)
      }
    }
@@ -520,6 +531,13 @@ const saveSetting = (parentKey, childKeys) => {
  });
 };

+// 保存是否每页一题
+const saveIsOnePage = () => {
+  questionDetails({
+    sn: route.query.sn,
+    is_one_page_one_question: questionInfo.value.survey.is_one_page_one_question
+  });
+};
 const init = () => {
  // event.detail 为当前输入的值
  show.value = true;
@@ -565,6 +583,20 @@ watch(
  },
  { deep: true }
 );
+
+// 保存   目前没有任何逻辑可以执行所有保存
+const saveAs = () => {
+  //   保存所有
+};
+// 投放
+const publishQuestion = () => {
+  router.push({ name: 'publish', query: { ...route.query } });
+};
+// 预览
+const previewQuestion = () => {
+  router.push({ name: 'preview', query: { ...route.query } });
+};
+
 onMounted(async () => {
  await getQuestionDetail(); // 等待接口返回数据
 });
@@ -598,8 +630,10 @@ onMounted(async () => {

    & > button {
      margin: 20px;
-      border-radius: 10px;
-      background-color: lightgreen;
+
+      //border-radius: 10px;
+      background-color: #70b936;
+      color: #fff;
    }
  }
 }
@@ -624,8 +658,21 @@ onMounted(async () => {
    font-size: 16px;
  }

-  & .desgin {
-    padding-bottom: 50px;
+  & .design {
+    padding-bottom: 60px;
+
+    & .design-button {
+      width: 100%;
+      text-align: center;
+
+      ::v-deep .van-button {
+        background-color: #70b936;
+
+        //width: 140px;
+        color: #fff;
+        font-size: 12px;
+      }
+    }
  }

  .ques_list {