feat: 增加矩阵问题的组件

- 增加 MartrixQuestion 组件
- 增加对应测试数据

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

@@ -0,0 +1,137 @@
+<script setup lang="ts">
+// import { showConfirmDialog } from 'vant';
+
+const { element } = defineProps({
+  element: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  }
+});
+
+/**
+ * input 类型映射，里面自行处理逻辑返回对应类型
+ * @param regx
+ * @default 'radio'
+ */
+const tableInputTypeMapping = (/** regx?: any */) => {
+  return 'radio';
+};
+
+/**
+ * 增加行或者列
+ * @param addType 增加行或列的类型
+ */
+const handleAdd = (addType: 'row' | 'col') => {
+  const row = element.list[1].options;
+  const col = element.list[2].options;
+  addType === 'row' ? row.push([]) : col.push([]);
+};
+
+const handleMartrixAction = (action: 'delete' | 'setting' | 'more') => {
+  switch (action) {
+  //   case 'delete':
+  // showConfirmDialog({
+  //   title: '提示',
+  //   message: '是否确认删除题目？'
+  // }).then(() => {
+  //   element.list = [];
+  // });
+  // break;
+  // case 'setting':
+  //     break;
+  // case 'more':
+  //     break;
+  default:
+    break;
+  }
+};
+</script>
+
+<template>
+  <van-cell-group :border="false">
+    <van-cell>
+      <!-- 使用 title 插槽来自定义标题 -->
+      <template #title>
+        <span v-if="element.config.is_required">*</span>
+        <span>{{ element.title }} {{ element.stem }}</span>
+      </template>
+
+      <!-- 使用 label 插槽来自定义标题 -->
+      <template #label>
+        <table class="martrix-table">
+          <tr>
+            <th></th>
+            <th v-for="col in element.list[2].options" :key="col.option" v-html="col.option"></th>
+          </tr>
+          <tr v-for="row in element.list[1].options" :key="row.option">
+            <td v-html="row.option"></td>
+            <!-- table 表格里面的内容和 th 保持一致 -->
+            <td v-for="col in element.list[2].options" :key="col.option">
+              <input :type="tableInputTypeMapping()" :name="col.option" />
+            </td>
+          </tr>
+        </table>
+        <!-- 底部功能按钮 -->
+        <van-row class="martrix-table-action">
+          <van-col :span="12">
+            <span @click="handleAdd('row')"> <van-icon name="add-o" />添加行标签</span>
+            <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
+              name="delete"
+              style="color: red;"
+            /></span>
+            <span @click="handleMartrixAction('setting')"> <van-icon
+              name="setting"
+              style="color: lightgrey;"
+            /></span>
+            <span @click="handleMartrixAction('more')"> <van-icon
+              name="ellipsis"
+              style="color: lightgrey;"
+            /></span>
+          </van-col>
+        </van-row>
+      </template>
+    </van-cell>
+  </van-cell-group>
+</template>
+<style scoped lang="scss">
+.martrix-table {
+    border-collapse: collapse;
+
+    color: black;
+    width: 100%;
+
+    th,
+    td {
+
+        border: 1px solid #ddd;
+        border-width: 0 0 1px 0;
+        padding: 8px;
+        text-align: left;
+    }
+
+}
+
+.martrix-table-action {
+
+    margin-top: 10px;
+
+    .van-icon {
+        font-size: 12px;
+        color: lightgreen;
+    }
+
+    .martrix-table-action-tool {
+        display: flex;
+        justify-content: flex-end;
+
+        &>span {
+            font-size: 16px;
+            margin-right: 6px;
+        }
+    }
+}
+</style>