feat: 矩阵增加操作选项

- 矩阵可以删除某个行或者列，实现置底的功能

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

@@ -3,22 +3,46 @@
     <el-table-column :width="tableWidth">
       <template #header></template>
       <template #default="{ row /*, column, $index*/ }">
-        <el-text truncated :style="{ width: `${tableWidth}px` }">
-          <contenteditable v-model="row.option" :active="active" @blur="emitValue" />
-        </el-text>
+        <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="right"
+            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>
-        <el-text truncated :style="{ width: `${tableWidth}px` }">
-          <contenteditable
-            v-if="col.option"
-            v-model="col.option"
-            :active="active"
-            @blur="emitValue"
-          />
-          <van-field v-else v-model="col.option" placeholder="请输入"></van-field>
-        </el-text>
+        <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="right"
+            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 }">
         <input
@@ -34,6 +58,13 @@
 </template>
 
 <script setup lang="ts">
+import { Io5EllipsisVerticalSharp } from 'vue-icons-plus/io5';
+
+// 添加激活 action 的选项
+interface _questionOptionType extends questionOptionType {
+  showAction?: boolean;
+}
+
 // 记录行和列的索引
 const rowRecord = defineModel<string[][]>('rowRecord', { required: false, default: () => [] });
 // const matrixAnswer = defineModel<{ [key: string]: 1 }>('matrixAnswer', { required: false, default: () => ({}) });
@@ -47,16 +78,50 @@ const element = defineModel<question>('element', {
   }
 });
 /* 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 rows = defineModel<_questionOptionType[]>('rows', { required: false, default: () => [] });
+const cols = defineModel<_questionOptionType[]>('cols', { required: false, default: () => [] });
 const tableWidth = defineModel<number>('tableWidth', { required: false, default: 110 });
 
 const emit = defineEmits(['update:matrixAnswer', 'update:rowRecord', 'update:element']);
 
-// const handleRowNameChange = (/* value: string */) => {
-// console.log(`row change: ${value}`);
-// 你可以在这里添加其他逻辑
-// };
+addShowActionOption();
+/**
+ * 给行或者列选项 添加 showAction 选项
+ */
+function addShowActionOption() {
+  rows.value.forEach((row) => {
+    row.showAction = true;
+  });
+  cols.value.forEach((col) => {
+    col.showAction = true;
+  });
+}
+
+// 增加 popover 的 actions
+const popoverActions = [
+  {
+    text: '删除'
+  },
+  {
+    text: '置底'
+  }
+];
+
+// popover 的事件
+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;
+  }
+}
 
 function getInputValue(row: number, col: number) {
   // console.log(`row: ${row}, col: ${col}`);
@@ -80,22 +145,7 @@ function handleMatrixTextChange(row: number, col: number, e: Event) {
   cols[col] = inputValue;
   // console.log(`rowRecord:`, rowRecord.value);
 }
-// const handleColNameChange = (rowOption: string, colOption: string) => {
-// // const target = e.target as HTMLInputElement;
-// const col = props.columns.findIndex((option) => option.option === colOption);
-// const row = props.rows.findIndex((option) => option.option === rowOption);
 
-// if (props.questionType === 9) {
-//   props.rowRecord[col] = row + 1;
-//   props.matrixAnswer = {};
-//   props.rowRecord.forEach((row, index) => {
-//     props.matrixAnswer[`${index + 1}_${row}`] = 1;
-//   });
-// }
-
-// emits('update:matrixAnswer', props.matrixAnswer);
-// emits('update:rowRecord', props.rowRecord);
-// };
 const emitValue = () => {
   emit('update:element', element.value);
 };
@@ -124,4 +174,14 @@ input {
     outline: 1px solid $theme-color;
   }
 }
+
+.icon {
+  position: absolute;
+  top: 0;
+  right: -5px;
+
+  & > svg {
+    height: 15px;
+  }
+}
 </style>