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

- 新增 OptionAction 组件用于选项操作 - 更新 BaseSelect 组件，集成 OptionAction 功能 - 优化 Paging 组件样式 - 调整 Design 页面布局和样式
2025-03-04 10:06:06 +08:00
parent 7aa18252b5
commit 08e6107b72
7 changed files with 274 additions and 39 deletions
--- a/components.d.ts
+++ b/components.d.ts
@@ -15,6 +15,7 @@ declare module 'vue' {
    RouterLink: typeof import('vue-router')['RouterLink']
    RouterView: typeof import('vue-router')['RouterView']
    Van: typeof import('vant/es')['default']
+    VanActionSheet: typeof import('vant/es')['ActionSheet']
    VanButton: typeof import('vant/es')['Button']
    VanCell: typeof import('vant/es')['Cell']
    VanCellGroup: typeof import('vant/es')['CellGroup']
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,6 @@
        "element-plus": "^2.7.8",
        "lodash": "^4.17.21",
        "pinia": "^2.1.7",
-        "sass": "^1.77.8",
        "sortablejs": "^1.15.6",
        "uuid": "^11.1.0",
        "vant": "^4.9.17",
@@ -33,6 +32,8 @@
        "husky": "^9.1.5",
        "npm-run-all2": "^6.2.0",
        "postcss-pxtorem": "^6.1.0",
+        "sass": "^1.85.1",
+        "sass-loader": "^16.0.5",
        "typescript": "~5.4.0",
        "unplugin-auto-import": "^0.18.6",
        "unplugin-vue-components": "^0.27.5",
@@ -1270,6 +1271,7 @@
      "version": "2.5.1",
      "resolved": "https://registry.npmmirror.com/@parcel/watcher/-/watcher-2.5.1.tgz",
      "integrity": "sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==",
+      "dev": true,
      "hasInstallScript": true,
      "optional": true,
      "dependencies": {
@@ -1308,6 +1310,7 @@
      "cpu": [
        "arm64"
      ],
+      "dev": true,
      "optional": true,
      "os": [
        "android"
@@ -1327,6 +1330,7 @@
      "cpu": [
        "arm64"
      ],
+      "dev": true,
      "optional": true,
      "os": [
        "darwin"
@@ -1346,6 +1350,7 @@
      "cpu": [
        "x64"
      ],
+      "dev": true,
      "optional": true,
      "os": [
        "darwin"
@@ -1365,6 +1370,7 @@
      "cpu": [
        "x64"
      ],
+      "dev": true,
      "optional": true,
      "os": [
        "freebsd"
@@ -1384,6 +1390,7 @@
      "cpu": [
        "arm"
      ],
+      "dev": true,
      "optional": true,
      "os": [
        "linux"
@@ -1403,6 +1410,7 @@
      "cpu": [
        "arm"
      ],
+      "dev": true,
      "optional": true,
      "os": [
        "linux"
@@ -1422,6 +1430,7 @@
      "cpu": [
        "arm64"
      ],
+      "dev": true,
      "optional": true,
      "os": [
        "linux"
@@ -1441,6 +1450,7 @@
      "cpu": [
        "arm64"
      ],
+      "dev": true,
      "optional": true,
      "os": [
        "linux"
@@ -1460,6 +1470,7 @@
      "cpu": [
        "x64"
      ],
+      "dev": true,
      "optional": true,
      "os": [
        "linux"
@@ -1479,6 +1490,7 @@
      "cpu": [
        "x64"
      ],
+      "dev": true,
      "optional": true,
      "os": [
        "linux"
@@ -1498,6 +1510,7 @@
      "cpu": [
        "arm64"
      ],
+      "dev": true,
      "optional": true,
      "os": [
        "win32"
@@ -1517,6 +1530,7 @@
      "cpu": [
        "ia32"
      ],
+      "dev": true,
      "optional": true,
      "os": [
        "win32"
@@ -1536,6 +1550,7 @@
      "cpu": [
        "x64"
      ],
+      "dev": true,
      "optional": true,
      "os": [
        "win32"
@@ -4835,7 +4850,7 @@
    },
    "node_modules/braces": {
      "version": "3.0.3",
-      "devOptional": true,
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "fill-range": "^7.1.1"
@@ -5300,6 +5315,7 @@
      "version": "1.0.3",
      "resolved": "https://registry.npmmirror.com/detect-libc/-/detect-libc-1.0.3.tgz",
      "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==",
+      "dev": true,
      "optional": true,
      "bin": {
        "detect-libc": "bin/detect-libc.js"
@@ -6552,7 +6568,7 @@
    },
    "node_modules/fill-range": {
      "version": "7.1.1",
-      "devOptional": true,
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "to-regex-range": "^5.0.1"
@@ -7087,7 +7103,8 @@
    "node_modules/immutable": {
      "version": "5.0.3",
      "resolved": "https://registry.npmmirror.com/immutable/-/immutable-5.0.3.tgz",
-      "integrity": "sha512-P8IdPQHq3lA1xVeBRi5VPqUm5HDgKnx0Ru51wZz5mjxHr5n3RWhjIpOFU7ybkUxfB+5IToy+OLaHYDBIWsv+uw=="
+      "integrity": "sha512-P8IdPQHq3lA1xVeBRi5VPqUm5HDgKnx0Ru51wZz5mjxHr5n3RWhjIpOFU7ybkUxfB+5IToy+OLaHYDBIWsv+uw==",
+      "dev": true
    },
    "node_modules/import-fresh": {
      "version": "3.3.1",
@@ -7313,7 +7330,7 @@
    },
    "node_modules/is-extglob": {
      "version": "2.1.1",
-      "devOptional": true,
+      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=0.10.0"
@@ -7363,7 +7380,7 @@
    },
    "node_modules/is-glob": {
      "version": "4.0.3",
-      "devOptional": true,
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "is-extglob": "^2.1.1"
@@ -7386,7 +7403,7 @@
    },
    "node_modules/is-number": {
      "version": "7.0.0",
-      "devOptional": true,
+      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=0.12.0"
@@ -7870,7 +7887,7 @@
      "version": "4.0.8",
      "resolved": "https://registry.npmmirror.com/micromatch/-/micromatch-4.0.8.tgz",
      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
-      "devOptional": true,
+      "dev": true,
      "dependencies": {
        "braces": "^3.0.3",
        "picomatch": "^2.3.1"
@@ -7883,7 +7900,7 @@
      "version": "2.3.1",
      "resolved": "https://registry.npmmirror.com/picomatch/-/picomatch-2.3.1.tgz",
      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "devOptional": true,
+      "dev": true,
      "engines": {
        "node": ">=8.6"
      },
@@ -7959,10 +7976,17 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/neo-async": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmmirror.com/neo-async/-/neo-async-2.6.2.tgz",
+      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
+      "dev": true
+    },
    "node_modules/node-addon-api": {
      "version": "7.1.1",
      "resolved": "https://registry.npmmirror.com/node-addon-api/-/node-addon-api-7.1.1.tgz",
      "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
+      "dev": true,
      "optional": true
    },
    "node_modules/node-releases": {
@@ -8953,6 +8977,7 @@
      "version": "1.85.1",
      "resolved": "https://registry.npmmirror.com/sass/-/sass-1.85.1.tgz",
      "integrity": "sha512-Uk8WpxM5v+0cMR0XjX9KfRIacmSG86RH4DCCZjLU2rFh5tyutt9siAXJ7G+YfxQ99Q6wrRMbMlVl6KqUms71ag==",
+      "dev": true,
      "dependencies": {
        "chokidar": "^4.0.0",
        "immutable": "^5.0.2",
@@ -8968,10 +8993,51 @@
        "@parcel/watcher": "^2.4.1"
      }
    },
+    "node_modules/sass-loader": {
+      "version": "16.0.5",
+      "resolved": "https://registry.npmmirror.com/sass-loader/-/sass-loader-16.0.5.tgz",
+      "integrity": "sha512-oL+CMBXrj6BZ/zOq4os+UECPL+bWqt6OAC6DWS8Ln8GZRcMDjlJ4JC3FBDuHJdYaFWIdKNIBYmtZtK2MaMkNIw==",
+      "dev": true,
+      "dependencies": {
+        "neo-async": "^2.6.2"
+      },
+      "engines": {
+        "node": ">= 18.12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "@rspack/core": "0.x || 1.x",
+        "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0",
+        "sass": "^1.3.0",
+        "sass-embedded": "*",
+        "webpack": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@rspack/core": {
+          "optional": true
+        },
+        "node-sass": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "webpack": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/sass/node_modules/chokidar": {
      "version": "4.0.3",
      "resolved": "https://registry.npmmirror.com/chokidar/-/chokidar-4.0.3.tgz",
      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
+      "dev": true,
      "dependencies": {
        "readdirp": "^4.0.1"
      },
@@ -8986,6 +9052,7 @@
      "version": "4.1.2",
      "resolved": "https://registry.npmmirror.com/readdirp/-/readdirp-4.1.2.tgz",
      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
+      "dev": true,
      "engines": {
        "node": ">= 14.18.0"
      },
@@ -9897,7 +9964,7 @@
    },
    "node_modules/to-regex-range": {
      "version": "5.0.1",
-      "devOptional": true,
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "is-number": "^7.0.0"
--- a/package.json
+++ b/package.json
@@ -17,7 +17,6 @@
    "element-plus": "^2.7.8",
    "lodash": "^4.17.21",
    "pinia": "^2.1.7",
-    "sass": "^1.77.8",
    "sortablejs": "^1.15.6",
    "uuid": "^11.1.0",
    "vant": "^4.9.17",
@@ -38,6 +37,8 @@
    "husky": "^9.1.5",
    "npm-run-all2": "^6.2.0",
    "postcss-pxtorem": "^6.1.0",
+    "sass": "^1.85.1",
+    "sass-loader": "^16.0.5",
    "typescript": "~5.4.0",
    "unplugin-auto-import": "^0.18.6",
    "unplugin-vue-components": "^0.27.5",
--- a/src/stores/modules/common.ts
+++ b/src/stores/modules/common.ts
@@ -221,6 +221,121 @@ export const useCommonStore = defineStore('common', {
            disable_copy_update: 1
          }
        },
+        {
+          id: '17852405',
+          title: 'Q6',
+          stem: '<p>请选择一个选项123123</p>',
+          other: '',
+          question_index: 29,
+          question_type: 1,
+          config: {
+            placeholder: '',
+            version: '',
+            scene: null,
+            shelf: null,
+            ware: null,
+            option_groups: null,
+            is_required: 1,
+            select_random: 0,
+            each_number: 1,
+            is_three_dimensions: 0,
+            material_sn: '',
+            scene_information: null,
+            simple_scene_information: null,
+            is_behavior: 0,
+            is_price_tag: 0,
+            is_brand: 0,
+            is_initialize: 0,
+            is_default_perspective: 0,
+            is_binding_goods: 0,
+            float_window: 0,
+            float_window_content: '',
+            popup_window: 0,
+            popup_window_content: '',
+            is_show: [],
+            quick_type: 0,
+            option_group_random_inside: null,
+            option_group_random_outside: null
+          },
+          created_at: '2025-03-03T13:55:41',
+          created_user_id: 1280,
+          updated_user_id: null,
+          survey_id: 8721,
+          logic_config: {
+            expect: '',
+            order: 0,
+            type: 0,
+            stay_time: ''
+          },
+          options: [
+            [
+              {
+                option: '<p>选项1</p>',
+                id: '1048968',
+                type: 0,
+                is_other: 0,
+                is_fixed: 0,
+                is_remove_other: 0,
+                created_at: null,
+                created_user_id: null,
+                parent_id: null,
+                option_index: 1,
+                list_id: 74403,
+                option_code: '',
+                option_config: {
+                  title: '',
+                  instructions: [],
+                  price: 0,
+                  gradient: '',
+                  image_url: [],
+                  option_type: 0,
+                  type: 0,
+                  limit_right_content: '',
+                  child_area: null,
+                  binding_goods_id: ''
+                },
+                disable_option_update: null,
+                cascade: []
+              },
+              {
+                option: '<p>选项2</p>',
+                id: '1048969',
+                type: 0,
+                is_other: 1,
+                is_fixed: 0,
+                is_remove_other: 0,
+                created_at: null,
+                created_user_id: null,
+                parent_id: null,
+                option_index: 2,
+                list_id: 74403,
+                option_code: '',
+                option_config: {
+                  title: '',
+                  instructions: [],
+                  price: 0,
+                  gradient: '',
+                  image_url: [],
+                  option_type: 0,
+                  type: 0,
+                  limit_right_content: '',
+                  child_area: null,
+                  binding_goods_id: ''
+                },
+                disable_option_update: null,
+                cascade: []
+              }
+            ]
+          ],
+          associate: [],
+          logics_has: null,
+          last_option_index: 2,
+          question_code: '',
+          question_value: '',
+          question_tag: '',
+          planet_id: '',
+          permissions: null
+        },
        {
          id: '17852298',
          title: 'Q4',
--- a/src/views/Design/Index.vue
+++ b/src/views/Design/Index.vue
@@ -42,6 +42,8 @@ import Draggable from './components/Draggable.vue';
 import BaseSelect from './components/Questions/BaseSelect.vue';
 import ChooseQuestion from './components/ChooseQuestion.vue';
 import Paging from './components/Questions/paging/Paging.vue';
+
+const activeIndex = ref(-1);
 /**
 * 工具函数
 */
--- a/src/views/Design/components/ActionCompoents/OptionAction.vue
+++ b/src/views/Design/components/ActionCompoents/OptionAction.vue
@@ -1,16 +1,65 @@
 <template>
-  <div class="flex option-action">
+  <div class="option-action">
+    <template v-for="(item, index) in data" :key="item.id">
+      <div class="flex align-center option-action-container">
+        <slot name="item" :element="item" :index="index"></slot>
+        <span v-if="active" class="flex">
          <van-icon name="close"></van-icon>
-    <van-icon name="more-o"></van-icon>
+          <van-icon name="more-o" @click="openOptionActionModel"></van-icon>
+        </span>
      </div>
    </template>
-<script setup></script>
+  </div>
+  <van-action-sheet v-model:show="show">
+    <template #description>
+      <div class="flex flex-start">操作选项</div>
+    </template>
+    <div class="">
+      <van-cell title="固定置底"></van-cell>
+      <van-cell title="固定置底"></van-cell>
+      <van-cell title="固定置底"></van-cell>
+      <van-cell title="固定置底"></van-cell>
+    </div>
+  </van-action-sheet>
+</template>
+<script setup>
+import { ref } from 'vue';
+defineProps({
+  data: {
+    type: Object,
+    default: () => {
+      return {
+        stem: ''
+      };
+    }
+  },
+  active: {
+    type: Boolean,
+    default: false
+  }
+});
+// const emit = defineEmits(['update:data']);
+const show = ref(false);
+
+/**
+ * @name 打开model弹窗
+ * @created_date 2025/3/4
+ * @description
+ **/
+const openOptionActionModel = () => {
+  show.value = true;
+};
+</script>
 <style scoped lang="scss">
 .option-action {
  font-size: 20px;

+  & .option-action-container {
+    font-size: 20px;
+
    & .van-icon + .van-icon {
      margin-left: 5px;
    }
  }
+}
 </style>
--- a/src/views/Design/components/Questions/BaseSelect.vue
+++ b/src/views/Design/components/Questions/BaseSelect.vue
@@ -16,10 +16,11 @@
    </template>
    <template #input>
      <van-checkbox-group>
-        <template v-for="item in element.options">
+        <template v-for="(item, index) in element.options" :key="item.id">
+          <option-action v-model:data="element.options[index]" :active="active">
+            <template #item="{ element: it, index: itIndex }">
              <van-checkbox
-            v-for="(it, index) in item"
-            :key="index"
+                :key="itIndex"
                :name="it.value"
                :label="it.label"
                :disabled="it.disabled"
@@ -33,13 +34,12 @@
                      @blur="saveOption($event, it)"
                      v-html="it.option"
                    ></div>
-                <div class="right-action">
-                  <option-action v-if="active"></option-action>
-                </div>
                  </div>
                </template>
              </van-checkbox>
            </template>
+          </option-action>
+        </template>
      </van-checkbox-group>
    </template>
  </van-field>