feat: 矩阵抽离组件

- 矩阵的三个组件抽离，由 MatrixQuestion 内部管理

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

@@ -1,225 +1,246 @@
 <script setup lang="ts">
-// import MatrixRadio from '@/views/Design/components/Questions/MatrixRadio.vue';
-// import MatrixText from '@/views/Design/components/Questions/MatrixText.vue';
-// import MatrixCheckbox from '@/views/Design/components/Questions/MatrixCheckbox.vue';
+import { type Component, defineModel } from 'vue';
+import { Io5EllipsisVerticalSharp } from 'vue-icons-plus/io5';
+import MatrixCheckbox from '@/views/Design/components/Questions/MatrixCheckbox.vue';
+import MatrixText from '@/views/Design/components/Questions/MatrixText.vue';
+import MatrixRadio from '@/views/Design/components/Questions/MatrixRadio.vue';
 
-// import { useTemplateRef, ref, type Directive } from 'vue';
-//
-// const columnLabels = useTemplateRef<HTMLElement[]>('columnLabels');
-//
-// // 注意, element.options 里面的东西是数组，第一项内容是行标签内容，第二项内容是列标签内容
-// // 类型 AI 生成 切勿盲目相信，以实际为准
-// const { element, index } = defineProps<{ element: MatrixSurveyQuestion; index: number }>();
-//
-// const rowRecord = new Array(element.options[0].length);
-// // matrix 答案
-// const matrixAnswer = ref({
-//   question_index: index,
-//   answer: {} as any
-// });
-//
-// /**
-//  * input 类型映射，里面自行处理逻辑返回对应类型
-//  * // remark: 填空内容 question_type 8
-//  * // remark: 单选打分矩阵 question_type 9
-//  * // remark: 多选矩阵内容 question_type 10
-//  * @default 'radio'
-//  */
-// const tableInputTypeMapping = (/** regx?: any */) => {
-//   switch (element.question_type) {
-//     case 8:
-//       return 'text';
-//     case 9:
-//       return 'radio';
-//     case 10:
-//       return 'checkbox';
-//     default:
-//       return 'radio';
-//   }
-// };
-//
-// /**
-//  * 自定义指令，用于在元素挂载后自动获取焦点
-//  */
-// const vFocus: Directive = {
-//   mounted(el: HTMLInputElement) {
-//     el.focus();
-//   }
-// };
-//
-// /**
-//  * row 的数值变动之后，触发的事件
-//  * @param {string} value
-//  * @return {void}
-//  */
-// function handleRowNameChange(/* value: string */) {
-//   // if (!value) return;
-// }
-//
-// /**
-//  * col 的数值变动之后，触发的事件
-//  */
-// function handleColNameChange(rowOption: string, colOption: string, e: any) {
-//   // if (!value) return;
-//   const col = element.options[0].findIndex((option) => {
-//     return option.option === colOption;
-//   });
-//
-//   const row = element.options[1].findIndex((option) => {
-//     return option.option === rowOption;
-//   });
-//
-//   // 不同的 question_type 的 matrix 问卷处理不同的结果
-//   switch (element.question_type) {
-//     case 8: {
-//       // 获取输入框元素
-//       const inputElement = e.target as HTMLInputElement;
-//       // 如果没有获取到输入框元素，则直接返回
-//       if (!inputElement) return;
-//       // 将输入框的值保存到 rowRecord 对应位置
-//       rowRecord[col] = e!.target!.value;
-//       // 清空 matrixAnswer 的 answer 属性
-//       matrixAnswer.value.answer = {};
-//       // 遍历所有行选项
-//       element.options[0].forEach((_, rowIndex) => {
-//         // 获取当前行记录
-//         const colOptions = rowRecord[rowIndex];
-//         // 如果当前行有记录，则更新 matrixAnswer 的 answer 属性
-//         if (colOptions) {
-//           matrixAnswer.value.answer[`R${rowIndex + 1}_C${col + 1}`] = colOptions;
-//         }
-//       });
-//       break;
-//     }
-//     case 9:
-//       // 将选择的行索引加1后保存到 rowRecord 对应位置
-//       rowRecord[col] = row + 1;
-//       // 清空 matrixAnswer 的 answer 属性
-//       matrixAnswer.value.answer = {};
-//       // 遍历 rowRecord，更新 matrixAnswer 的 answer 属性
-//       rowRecord.forEach((row, index) => {
-//         matrixAnswer.value.answer[`${index + 1}_${row}`] = 1;
-//       });
-//       break;
-//     case 10:
-//       // 将选择的行索引加1后添加到 rowRecord 对应位置的数组中
-//       rowRecord[col] = (rowRecord[col] || []).concat(row + 1);
-//       // 清空 matrixAnswer 的 answer 属性
-//       matrixAnswer.value.answer = {};
-//       // 遍历所有行选项
-//       element.options[0].forEach((rowOption, rowIndex) => {
-//         // 获取当前行记录
-//         const colOptions = rowRecord[rowIndex];
-//         // 如果当前行有记录，则更新 matrixAnswer 的 answer 属性
-//         if (colOptions) {
-//           colOptions.forEach((col: any) => {
-//             matrixAnswer.value.answer[`R${rowIndex + 1}_C${col}`] = true;
-//           });
-//         }
-//       });
-//       break;
-//     default:
-//       break;
-//   }
-// }
+// 添加激活 action 的选项
+interface _questionOptionType extends questionOptionType {
+  showAction?: boolean;
+}
+
+// 题目
+const element = defineModel<question>('element', {
+  type: Object,
+  default: () => {
+    return {};
+  }
+});
+
+// table 宽度
+const tableWidth = defineModel<number>('tableWidth', { required: false, default: 110 });
+// 行记录(相关答案的记录)
+const rowRecord = defineModel<unknown[]>('rowRecord', { required: false, default: () => [] });
+// 是否是预览状态
+const isPreview = defineModel<boolean>('isPreview', { required: false, default: false });
+// 行标签
+const rows = defineModel<_questionOptionType[]>('rows', { required: false, default: () => [] });
+// 列标签
+const cols = defineModel<_questionOptionType[]>('cols', { required: false, default: () => [] });
+// 题的序号
+const index = defineModel<number>('index', { required: false, default: 0 });
+// 是否是编辑状态
+const active = defineModel<boolean>('active', { required: false, default: false });
+
+const emit = defineEmits(['update:element']);
+// 更新题
+const emitValue = () => {
+  // console.log(question.value);
+  emit('update:element', element.value);
+};
+
+// 组件选择
+const activeComponent = selectActiveComponent();
+function selectActiveComponent(): Component {
+  console.log(`question_type`, element.value.question_type);
+  switch (element.value.question_type) {
+    case 8:
+      return MatrixText;
+    case 9:
+      return MatrixRadio;
+    case 10:
+      return MatrixCheckbox;
+    default:
+      return MatrixText;
+  }
+}
+
+console.log(`active component`, activeComponent);
+// 增加 popover 的 actions
+const popoverActions = [
+  {
+    text: '删除'
+  }
+  // 置底功能暂时屏蔽
+  // {
+  //   text: '置底'
+  // }
+];
+
+/**
+ * popover 被选中的事件
+ * @param action { text: string }
+ * @param axi { option: string, showAction: boolean }
+ * @param type { 'row' | 'col' }
+ */
+function handleActionSelect(action: { text: string }, axi: any, type: 'row' | 'col') {
+  const data = type === 'row' ? rows : cols;
+  const index = data.value.indexOf(axi);
+  if (index < 0) return;
+  switch (action.text) {
+    case '删除':
+      data.value.splice(index, 1);
+      break;
+
+    case '置底':
+      data.value.push(data.value.splice(index, 1)[0]);
+      break;
+  }
+}
+
+addShowActionOption();
+/**
+ * 给行或者列选项 添加 showAction 选项
+ */
+function addShowActionOption() {
+  rows.value.forEach((row) => {
+    row.showAction = true;
+  });
+  cols.value.forEach((col) => {
+    col.showAction = true;
+  });
+}
+
+const errorMessage = defineModel('errorMessage', {
+  type: String,
+  default: ''
+});
 </script>
 
 <template>
-  <van-cell>
+  <van-field
+    v-model="element.stem"
+    :label="element.stem"
+    :required="element.config?.is_required === 1"
+    label-align="top"
+    class="contenteditable-question-title"
+  >
+    <template #left-icon>
+      {{ index + 1 }}
+    </template>
     <!-- 使用 title 插槽来自定义标题 -->
-    <template #title>
-      <span>
-        <span v-if="element?.config?.is_required">*</span>
-        <span v-html="element.title"></span>
-        <span v-html="element.stem"></span>
-      </span>
-    </template>
-
-    <!-- 使用 label 插槽来自定义标题 -->
     <template #label>
-      <table class="matrix-table">
-        <thead>
-          <tr>
-            <!-- 第一行内容为空 -->
-            <th></th>
-            <!-- 第二行内容开始填充 -->
-            <td v-for="col in element.options[1]" :key="col.option" ref="columnLabels">
-              <!-- 编辑状态，单次点击出输入框，失焦后关闭 -->
-              <input
-                v-if="col.editor"
-                v-model="col.option"
-                v-focus
-                type="text"
-                @focusout="col.editor = false"
-                @click="handleRowNameChange(col.option!)"
-              />
-              <span v-else @click="col.editor = true" v-html="col.option"></span>
-            </td>
-            <th></th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="row in element.options[0]" :key="row.option">
-            <!-- 编辑状态，单次点击出输入框，失焦后关闭 -->
-            <td>
-              <input
-                v-if="row.editor"
-                v-model="row.option"
-                v-focus
-                type="text"
-                @focusout="row.editor = false"
-              />
-              <span v-else @click="row.editor = true" v-html="row.option"></span>
-            </td>
-            <td v-for="col in element.options[1]" :key="col.option">
-              <!-- 编辑状态，单次点击出输入框，失焦后关闭 -->
-              <input
-                :id="col.option"
-                :type="tableInputTypeMapping()"
-                :name="row.option"
-                @change="handleColNameChange(col.option!, row.option!, $event)"
-              />
-            </td>
-          </tr>
-        </tbody>
-      </table>
+      <contenteditable
+        v-model="element.stem"
+        :active="active"
+        @blur="emitValue"
+        :errorMessage="errorMessage"
+      />
     </template>
-  </van-cell>
+
+    <template #input>
+      <el-table :data="rows" style="width: 90vw">
+        <el-table-column :width="tableWidth">
+          <template #header></template>
+          <template #default="{ row /*, column, $index*/ }">
+            <div style="position: relative">
+              <el-text truncated :style="{ width: `${tableWidth}px` }">
+                <contenteditable v-model="row.option" :active="active" @blur="emitValue" />
+              </el-text>
+              <van-popover
+                v-model="row.showAction"
+                placement="left-end"
+                trigger="click"
+                :actions="popoverActions"
+                @select="handleActionSelect($event, row, 'row')"
+              >
+                <template #reference>
+                  <div v-if="active" class="icon">
+                    <Io5EllipsisVerticalSharp />
+                  </div>
+                </template>
+              </van-popover>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column v-for="(col, colIndex) in cols" :key="col.option" :width="tableWidth">
+          <template #header>
+            <div style="position: relative">
+              <el-text truncated :style="{ width: `${tableWidth}px` }">
+                <contenteditable v-model="col.option" :active="active" @blur="emitValue" />
+              </el-text>
+              <van-popover
+                v-model="col.showAction"
+                placement="left-end"
+                trigger="click"
+                :actions="popoverActions"
+                @select="handleActionSelect($event, col, 'col')"
+              >
+                <template #reference>
+                  <div v-if="active" class="icon">
+                    <Io5EllipsisVerticalSharp />
+                  </div>
+                </template>
+              </van-popover>
+            </div>
+          </template>
+          <template #default="{ /*row, column, */ $index: rowIndex }">
+            <component
+              :is="activeComponent"
+              :element="element"
+              :rowIndex="rowIndex"
+              :colIndex="colIndex"
+              v-model:rowRecord="rowRecord"
+            />
+          </template>
+        </el-table-column>
+      </el-table>
+    </template>
+  </van-field>
 </template>
-<style scoped lang="scss">
+<style lang="scss">
+@import '@/assets/css/theme';
+
 .matrix-table {
-  width: 100%;
-  border-collapse: collapse;
-  color: black;
-
-  th,
-  td {
-    padding: 8px;
-    border-width: 0 0 1px;
-    text-align: left;
-  }
+  text-align: left;
 }
-
 input[type='text'] {
-  width: 85%;
+  width: 70%;
+  padding: 0 5px;
+  border: none;
+  border-radius: 4px;
+  outline: 1px solid #f4f4f4;
+
+  &:focus {
+    outline: 1px solid $theme-color;
+  }
+}
+.matrix-radio {
+  position: relative;
+  overflow: hidden;
+  width: 15px;
+  height: 15px;
+  border: 1px solid #f4f4f4;
+  border-radius: 50%;
+  outline: none;
+  cursor: pointer;
+  appearance: none; /* 去除默认样式 */
+  //transition: border-color 0.3s;
 }
 
-.matrix-table-action {
-  margin-top: 10px;
+.matrix-radio:checked {
+  border-color: transparent; /* 选中时边框颜色 */
+}
 
-  .van-icon {
-    color: lightgreen;
-    font-size: 12px;
-  }
+.matrix-radio:checked::before {
+  content: '\e728';
+  position: absolute;
+  width: 15px;
+  height: 15px;
+  background-color: $theme-color; /* 选中颜色 */
+  color: #fff;
+  line-height: 15px;
+  text-align: center;
+}
 
-  .matrix-table-action-tool {
-    display: flex;
-    justify-content: flex-end;
+.icon {
+  position: absolute;
+  top: 3px;
+  right: -10px;
 
-    & > span {
-      margin-right: 6px;
-      font-size: 16px;
-    }
+  & > svg {
+    height: 15px;
   }
 }
 </style>