ylst-h5/src/views/Design/components/ActionCompoents/components/QuestionItemAction/MartrixQuestionAction.vue

<template>
  <van-cell v-if="[9, 10].includes(actionQuestion.question_type)" title="选项随机" :border="false">
    <template #right-icon>
      <van-switch
        v-model="actionQuestion.config.select_random"
        class="option-action-sheet-switch"
        size="0.5rem"
        :active-value="1"
        :inactive-value="0"
        @change="emit('saveOption')"
      ></van-switch>
    </template>
  </van-cell>
  <van-field
    v-if="
      [9, 10].includes(actionQuestion.question_type) && actionQuestion.config.select_random === 1
    "
    v-model="actionQuestion.config.min_select"
    label=""
    :border="false"
    label-align="left"
    input-align="right"
    class="action-field"
    placeholder="不限"
    @blur="emit('saveOption')"
    @update:model-value="
      (value) => {
        actionQuestion.config.min_select = Number(value);
      }
    "
  >
    <template #input>
      <div class="flex">
        <van-checkbox
          v-model="actionQuestion.config.row_random"
          shape="square"
          name="actionQuestion.config.row_random"
          icon-size="0.5rem"
          @change="emit('saveOption')"
        >
          行随机
        </van-checkbox>
        <van-checkbox
          v-model="actionQuestion.config.cell_random"
          class="ml10"
          shape="square"
          icon-size="0.5rem"
          name="actionQuestion.config.cell_random"
          @change="emit('saveOption')"
        >
          列随机
        </van-checkbox>
      </div>
    </template>
  </van-field>
  <van-cell
    title="右极文字"
    type="number"
    :border="false"
    label-align="left"
    input-align="right"
    label-width="8em"
    placeholder="不限"
    readonly
    @blur="emit('saveOption')"
  >
    <template #right-icon>
      <van-switch
        v-model="actionQuestion.config.is_limit_right_content"
        :active-value="1"
        :inactive-value="0"
        size="0.5rem"
        @change="emit('saveOption')"
      ></van-switch>
    </template>
  </van-cell>
  <!--  每行可选数量-->
  <van-cell
    v-if="[10].includes(actionQuestion.question_type)"
    title="每行可选数量"
    :border="false"
    label-align="left"
  >
  </van-cell>
  <van-cell-group v-if="[10].includes(actionQuestion.question_type)">
    <van-field
      v-model="actionQuestion.config.min_select"
      label="最少"
      type="number"
      :border="false"
      label-align="left"
      input-align="right"
      class="action-field"
      placeholder="不限"
      @blur="emit('saveOption')"
      @update:model-value="
        (value) => {
          actionQuestion.config.min_select = Number(value);
        }
      "
    >
      <template #right-icon>
        <span>个</span>
      </template>
    </van-field>
    <van-field
      v-model="actionQuestion.config.max_select"
      label="最多"
      type="number"
      :border="false"
      placeholder="不限"
      input-align="right"
      class="action-field"
      @blur="emit('saveOption')"
      @update:model-value="
        (value) => {
          actionQuestion.config.max_select = Number(value);
        }
      "
    >
      <template #right-icon>
        <span>个</span>
      </template>
    </van-field>
  </van-cell-group>
</template>
<script setup>
import { computed, defineEmits } from 'vue';
import { saveQuestion } from '@/api/design/index.js';
const props = defineProps({
  modelValue: {
    type: Object,
    default: () => {
      return {};
    }
  }
});

const emit = defineEmits(['update:modelValue', 'saveOption']);
const actionQuestion = computed({
  get() {
    return props.modelValue;
  },
  set(newValue) {
    emit('update:modelValue', newValue);
  }
});
</script>
<style scoped lang="scss">
.action-field {
  & ::v-deep .van-field__label {
    color: #bfbfbf;
    font-size: 14px;
  }
}
</style>