admin-vben5/apps/web-antd/src/views/property/customerService/questionnaire/questionnaire-modal.vue

<script setup lang="ts">
import {computed, onMounted, reactive, ref} from 'vue';
import {useVbenModal} from '@vben/common-ui';
import {cloneDeep} from '@vben/utils';
import {
  Form,
  FormItem,
  Input,
  Row,
  Col,
  Switch,
  DatePicker,
  Empty,
  Divider,
  Rate,
  Popover,
  Badge,
  message
} from 'ant-design-vue'
import {PlusOutlined, DeleteOutlined} from '@ant-design/icons-vue';
import {renderDictValue} from "#/utils/render";
import {getDictOptions} from "#/utils/dict";
import type {
  QuestionnaireForm
} from "#/api/property/customerService/questionnaire/questionnaire/model";
import type {QuestionForm} from "#/api/property/customerService/questionnaire/question/model";
import {
  questionnaireAdd,
  questionnaireUpdate,
  questionnaireInfo
} from '#/api/property/customerService/questionnaire/questionnaire';
import type {
  QuestionItemForm
} from "#/api/property/customerService/questionnaire/questionItem/model";

const emit = defineEmits<{ reload: [] }>();
const isUpdate = ref(false);
const title = computed(() => {
  return isUpdate.value ? '编辑问卷' : '新增问卷';
});

const [BasicModal, modalApi] = useVbenModal({
  fullscreenButton: false,
  fullscreen: true,
  onClosed: handleClosed,
  onOpenChange: async (isOpen) => {
    if (!isOpen) {
      return null;
    }
    modalApi.modalLoading(true);
    const {id} = modalApi.getData() as { id?: number | string };
    isUpdate.value = !!id;

    if (isUpdate.value && id) {
      const record = await questionnaireInfo(id);
      Object.assign(counts, badgeCounts);
      let questions: QuestionForm[] = [];
      if (record.questionnaireQuestionVos) {
        questions = record.questionnaireQuestionVos.map(item => {
          const question: QuestionForm = { ...item };
          switch (item.type) {
            case '1': counts.inputCount++; break;
            case '2': counts.textareaCount++; break;
            case '3': counts.radioCount++; break;
            case '4': counts.checkboxCount++; break;
            case '5': counts.rateCount++; break;
            case '6': counts.datePickerCount++; break;
          }
          if (item.questionnaireQuestionItemVos) {
            question.questionnaireQuestionItems = item.questionnaireQuestionItemVos.map(
              option => ({ ...option } as QuestionItemForm)
            );
          }
          return question;
        });
      }
      Object.assign(formState, {
        ...record,
        questionnaireQuestions: questions,
      });
    }
    modalApi.modalLoading(false);
  },
});

async function handleClosed() {
  formRef.value.clearValidate();
  Object.assign(formState, initialState);
  Object.assign(counts, badgeCounts);
  formState.questionnaireQuestions = [];
}

const initialState: QuestionnaireForm = {
  id: '',
  head: '',
  depict: '',
  isAnonyCollec: '1',
  isCommit: '1',
  deadline: '',
  status: '',
  questionnaireQuestions: [] as Array<QuestionForm>
};

const badgeCounts = {
  inputCount: 0,
  textareaCount: 0,
  radioCount: 0,
  checkboxCount: 0,
  rateCount: 0,
  datePickerCount: 0,
}

const counts = reactive({...badgeCounts})
const formState = reactive({...initialState});

async function handleCancel() {
  formRef.value.clearValidate();
  Object.assign(formState, initialState);
  Object.assign(counts, badgeCounts);
  formState.questionnaireQuestions = [];
  await modalApi.close();
}

function handleAddQuestion(type: string) {
  let question: QuestionForm = {
    type,
    questionnaireQuestionItems: [],
    isRequired: '1',
  }
  switch (type) {
    case '1':
      counts.inputCount++;
      break;
    case '2':
      counts.textareaCount++;
      break;
    case '3':
      counts.radioCount++;
      question.questionnaireQuestionItems.push({itemContent: ''});
      break;
    case '4':
      counts.checkboxCount++;
      question.questionnaireQuestionItems.push({itemContent: ''});
      break;
    case '5':
      counts.rateCount++;
      break;
    case '6':
      counts.datePickerCount++;
      break;
  }
  formState.questionnaireQuestions.push(question);
}

function addOptions(index: number) {
  formState.questionnaireQuestions[index]?.questionnaireQuestionItems.push({itemContent: ''})
}

function deleteOptions(index: number, type: string) {
  formState.questionnaireQuestions.splice(index, 1)
  switch (type) {
    case '1':
      counts.inputCount--;
      break;
    case '2':
      counts.textareaCount--;
      break;
    case '3':
      counts.radioCount--;
      break;
    case '4':
      counts.checkboxCount--;
      break;
    case '5':
      counts.rateCount--;
      break;
    case '6':
      counts.datePickerCount--;
      break;
  }
}

const formRef = ref();

async function handleSave(type: string) {
  try {
    await formRef.value.validate();
    const data = cloneDeep(formState);
    if (!data.questionnaireQuestions.length) {
      message.error('还没有问题，请添加');
      return;
    }
    modalApi.lock(true);
    data.status = type;
    data.questionnaireQuestions.forEach((item, index) => {
      item.sort = index + 1;
      item.questionnaireQuestionItems.forEach((option, i) => {
        option.sort = i + 1;
      });
    });
    await (isUpdate.value ? questionnaireUpdate(data) : questionnaireAdd(data));
    emit('reload');
    await modalApi.close();
  } catch (error: any) {
    if (error.errorFields) {
      const firstErrorField = error.errorFields[0].name[0];
      formRef.value.scrollToField(firstErrorField);
      message.error('请完善问卷');
    } else {
      console.error(error);
    }
  } finally {
    modalApi.lock(false);
  }
}

onMounted(() => {
  getDictOptions('wy_wtsjlx')
})

</script>

<template>
  <BasicModal :title="title" :footer="false" class="modal-container">
    <Row :gutter="24">
      <Col class="gutter-row" :span="3">
        <div class="left-options">
          <div class="header-title">问题设计</div>
          <Badge :count="counts.inputCount" :number-style="{ backgroundColor: '#3996f3' }">
            <a-button size="large" @click="handleAddQuestion('1')">单行文本</a-button>
          </Badge>
          <Badge :count="counts.textareaCount" :number-style="{ backgroundColor: '#3996f3' }">
            <a-button size="large" @click="handleAddQuestion('2')">多行文本</a-button>
          </Badge>
          <Badge :count="counts.radioCount" :number-style="{ backgroundColor: '#3996f3' }">
            <a-button size="large" @click="handleAddQuestion('3')">单选题</a-button>
          </Badge>
          <Badge :count="counts.checkboxCount" :number-style="{ backgroundColor: '#3996f3' }">
            <a-button size="large" @click="handleAddQuestion('4')">多选题</a-button>
          </Badge>
          <Badge :count="counts.rateCount" :number-style="{ backgroundColor: '#3996f3' }">
            <a-button size="large" @click="handleAddQuestion('5')">评分题</a-button>
          </Badge>
          <Badge :count="counts.datePickerCount" :number-style="{ backgroundColor: '#3996f3' }">
            <a-button size="large" @click="handleAddQuestion('6')">日期选择</a-button>
          </Badge>
        </div>
      </Col>
      <Col class="gutter-row" :span="21">
        <div class="right-question">
          <div class="header-title">基本信息</div>
          <Form
            :model="formState"
            name="basic"
            ref="formRef"
          >
            <FormItem
              label="问卷标题"
              name="head"
              :rules="[{ required: true, }]"
            >
              <Input v-model:value="formState.head" placeholder="请输入"/>
            </FormItem>

            <FormItem
              label="问卷描述"
              name="depict"
              :rules="[{ required: true, }]"
            >
              <Input v-model:value="formState.depict" placeholder="请输入"/>
            </FormItem>
            <div v-if="formState.questionnaireQuestions.length">
              <div v-for="(item,index) in formState.questionnaireQuestions">
                <Divider orientation="left">
                  问题{{ (index + 1) + '\xa0' + renderDictValue(item.type, 'wy_wtsjlx') }}
                  <Popover placement="top">
                    <template #content>
                      <p>删除当前问题</p>
                    </template>
                    <a-button type="link" @click="deleteOptions(index,item.type)">
                      <template #icon>
                        <DeleteOutlined style="color: red"/>
                      </template>
                    </a-button>
                  </Popover>
                </Divider>
                <FormItem
                  label="问题标题"
                  :name="['questionnaireQuestions',index,'head']"
                  :rules="[{ required: true }]"
                >
                  <Input v-model:value="item.head" placeholder="请输入"/>
                </FormItem>
                <FormItem
                  :label="'\xa0\xa0\xa0问题描述'"
                  :name="['questionnaireQuestions',index,'depict']"
                >
                  <Input v-model:value="item.depict" placeholder="请输入"/>
                </FormItem>
                <Row :gutter="24" v-if="item.type=='3'||item.type=='4'">
                  <Col class="gutter-row" :span="12">
                    <FormItem
                      label="选项设置"
                      :name="['questionnaireQuestions',index,'questionnaireQuestionItems']"
                      :rules="[{ required: true }]"
                    >
                      <div v-for="(option, i) in item.questionnaireQuestionItems" :key="i"
                           class="option-item">
                        <FormItem
                          :name="['questionnaireQuestions', index, 'questionnaireQuestionItems', i, 'itemContent']"
                          :rules="[{ required: true, message: '' }]"
                        >
                          <Input
                            style="margin-bottom: 10px"
                            v-model:value="option.itemContent"
                            :placeholder="`选项${i + 1}`"
                          />
                        </FormItem>
                      </div>

                    </FormItem>
                  </Col>
                  <Col class="gutter-row" :span="12">
                    <a-button @click="addOptions(index)">
                      <template #icon>
                        <PlusOutlined/>
                      </template>
                      添加选项
                    </a-button>
                  </Col>
                </Row>
                <FormItem
                  v-if="item.type=='5'"
                  label="评分预览"
                  :name="['questionnaireQuestions',index,'rate']"
                >
                  <Rate v-model:value="item.rate"/>
                </FormItem>
                <FormItem
                  v-if="item.type=='6'"
                  label="日期选择预览"
                  :name="['questionnaireQuestions',index,'dateTime']"
                >
                  <DatePicker style="width: 180px" v-model:value="item.dateTime"/>
                </FormItem>
                <FormItem
                  label="是否必填"
                  :name="['questionnaireQuestions',index,'isRequired']"
                  :rules="[{ required: true}]"
                >
                  <Switch v-model:checked="item.isRequired" checkedValue="1" unCheckedValue="2"/>
                </FormItem>
              </div>
            </div>
            <div class="empty-box" v-else>
              <Empty description="还没有添加问题，点击左侧按钮开始创建"/>
            </div>
            <div class="header-title">发布设计</div>
            <Row :gutter="24">
              <Col class="gutter-row" :span="6">
                <FormItem
                  label="匿名收集"
                  name="isAnonyCollec"
                  :rules="[{ required: true, message: '匿名收集不能为空' }]"
                >
                  <Switch v-model:checked="formState.isAnonyCollec" checkedValue="1"
                          unCheckedValue="2"/>
                </FormItem>
              </Col>
              <Col class="gutter-row" :span="6">
                <FormItem
                  label="允许多次提交"
                  name="isCommit"
                  :rules="[{ required: true }]"
                >
                  <Switch v-model:checked="formState.isCommit" checkedValue="1"
                          unCheckedValue="2"/>
                </FormItem>
              </Col>
              <Col class="gutter-row" :span="12">
                <FormItem
                  label="截至日期"
                  name="deadline"
                  :rules="[{ required: true }]"
                >
                  <DatePicker style="width: 180px" v-model:value="formState.deadline" format="YYYY-MM-DD" value-format="YYYY-MM-DD"/>
                </FormItem>
              </Col>
            </Row>
          </Form>
        </div>
      </Col>
    </Row>
    <div class="footer-button">
      <a-button type="primary" @click="handleSave('2')">保存并发布</a-button>
      <a-button @click="handleSave('1')">保存为草稿</a-button>
      <a-button @click="handleCancel">取消</a-button>

    </div>
  </BasicModal>
</template>
<style lang="scss" scoped>
.modal-container {
  position: relative;

  .header-title {
    margin-bottom: 10px;
    font-size: 17px;
    font-weight: bold;
  }

  .left-options {
    display: flex;
    flex-direction: column;

    :deep(.ant-badge .ant-badge-count) {
      position: absolute;
      top: 40px;
    }

    .ant-btn {
      width: 150px;
      margin-top: 40px;
    }
  }

  .right-question {
    max-height: 87vh;
    overflow-x: hidden;
    overflow-y: auto;

    .option-item {
      :deep(.ant-form-item .ant-form-item-control-input) {
        margin-bottom: -20px;
      }
    }

    .empty-box {
      height: 50vh;
      border: 2px dashed #dce0e6;
      border-radius: 10px;

      :deep(.ant-empty .ant-empty-image) {
        margin-top: 15vh;
      }

      margin-bottom: 10px;
      margin-left: 80px;
    }
  }

  .footer-button {
    width: 100%;

    .ant-btn {
      float: right;
      margin: 0 15px 10px 0;
    }

    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 100;
    background-color: #ffffff;
  }


}
</style>