feat:预览问卷

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

@@ -14,11 +14,24 @@ import {
   Divider,
   Rate,
   Popover,
-  Badge
+  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);
@@ -26,35 +39,10 @@ const title = computed(() => {
   return isUpdate.value ? '编辑问卷' : '新增问卷';
 });
 
-// const [BasicForm, formApi] = useVbenForm({
-//   commonConfig: {
-//     // 默认占满两列
-//     formItemClass: 'col-span-1',
-//     // 默认label宽度 px
-//     labelWidth: 80,
-//     // 通用配置项 会影响到所有表单项
-//     componentProps: {
-//       class: 'w-full',
-//     }
-//   },
-//   schema: modalSchema(),
-//   showDefaultActions: false,
-//   wrapperClass: 'grid-cols-2',
-// });
-
-// const {onBeforeClose, markInitialized, resetInitialized} = useBeforeCloseDiff(
-//   {
-//     initializedGetter: defaultFormValueGetter(formApi),
-//     currentGetter: defaultFormValueGetter(formApi),
-//   },
-// );
-
 const [BasicModal, modalApi] = useVbenModal({
-  // 在这里更改宽度
   fullscreenButton: false,
   fullscreen: true,
   onClosed: handleClosed,
-  onConfirm: handleConfirm,
   onOpenChange: async (isOpen) => {
     if (!isOpen) {
       return null;
@@ -64,44 +52,53 @@ const [BasicModal, modalApi] = useVbenModal({
     isUpdate.value = !!id;
 
     if (isUpdate.value && id) {
-      // const record = await contingenPlanInfo(id);
-      // await formApi.setValues(record);
+      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,
+      });
     }
-    // await markInitialized();
-
     modalApi.modalLoading(false);
   },
 });
 
-async function handleConfirm() {
-  try {
-    modalApi.lock(true);
-    // const {valid} = await formApi.validate();
-    // if (!valid) {
-    //   return;
-    // }
-    // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
-    // const data = cloneDeep(await formApi.getValues());
-    // await (isUpdate.value ? contingenPlanUpdate(data) : contingenPlanAdd(data));
-    // resetInitialized();
-    emit('reload');
-    modalApi.close();
-  } catch (error) {
-    console.error(error);
-  } finally {
-    modalApi.lock(false);
-  }
-}
-
 async function handleClosed() {
-  // await formApi.resetForm();
-  // resetInitialized();
+  formRef.value.clearValidate();
+  Object.assign(formState, initialState);
+  Object.assign(counts, badgeCounts);
+  formState.questionnaireQuestions = [];
 }
 
-const initialState = {
-  username: '',
-  password: '',
-  questionList: [],
+const initialState: QuestionnaireForm = {
+  id: '',
+  head: '',
+  depict: '',
+  isAnonyCollec: '1',
+  isCommit: '1',
+  deadline: '',
+  status: '',
+  questionnaireQuestions: [] as Array<QuestionForm>
 };
 
 const badgeCounts = {
@@ -114,74 +111,110 @@ const badgeCounts = {
 }
 
 const counts = reactive({...badgeCounts})
-const formState = reactive({
-  ...initialState
-});
+const formState = reactive({...initialState});
 
 async function handleCancel() {
+  formRef.value.clearValidate();
   Object.assign(formState, initialState);
   Object.assign(counts, badgeCounts);
-  formState.questionList = [];
+  formState.questionnaireQuestions = [];
   await modalApi.close();
 }
 
-function handleAddQuestion(type: number) {
-  formState.questionList.push({type})
+function handleAddQuestion(type: string) {
+  let question: QuestionForm = {
+    type,
+    questionnaireQuestionItems: [],
+    isRequired: '1',
+  }
   switch (type) {
-    case 1:
+    case '1':
       counts.inputCount++;
       break;
-    case 2:
+    case '2':
       counts.textareaCount++;
       break;
-    case 3:
+    case '3':
       counts.radioCount++;
+      question.questionnaireQuestionItems.push({itemContent: ''});
       break;
-    case 4:
+    case '4':
       counts.checkboxCount++;
+      question.questionnaireQuestionItems.push({itemContent: ''});
       break;
-    case 5:
+    case '5':
       counts.rateCount++;
       break;
-    case 6:
+    case '6':
       counts.datePickerCount++;
       break;
   }
+  formState.questionnaireQuestions.push(question);
 }
 
-function addOptions(val: any) {
-
+function addOptions(index: number) {
+  formState.questionnaireQuestions[index]?.questionnaireQuestionItems.push({itemContent: ''})
 }
 
-function deleteOptions(index: number, type: number) {
-  formState.questionList.splice(index, 1)
+function deleteOptions(index: number, type: string) {
+  formState.questionnaireQuestions.splice(index, 1)
   switch (type) {
-    case 1:
+    case '1':
       counts.inputCount--;
       break;
-    case 2:
+    case '2':
       counts.textareaCount--;
       break;
-    case 3:
+    case '3':
       counts.radioCount--;
       break;
-    case 4:
+    case '4':
       counts.checkboxCount--;
       break;
-    case 5:
+    case '5':
       counts.rateCount--;
       break;
-    case 6:
+    case '6':
       counts.datePickerCount--;
       break;
   }
 }
 
-async function handleSave(type: number) {
-  await modalApi.close();
+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(()=>{
+onMounted(() => {
   getDictOptions('wy_wtsjlx')
 })
 
@@ -194,22 +227,22 @@ onMounted(()=>{
         <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>
+            <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>
+            <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>
+            <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>
+            <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>
+            <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>
+            <a-button size="large" @click="handleAddQuestion('6')">日期选择</a-button>
           </Badge>
         </div>
       </Col>
@@ -219,24 +252,25 @@ onMounted(()=>{
           <Form
             :model="formState"
             name="basic"
+            ref="formRef"
           >
             <FormItem
               label="问卷标题"
-              name="username"
-              :rules="[{ required: true, message: '问卷标题不能为空' }]"
+              name="head"
+              :rules="[{ required: true, }]"
             >
-              <Input v-model:value="formState.username"/>
+              <Input v-model:value="formState.head" placeholder="请输入"/>
             </FormItem>
 
             <FormItem
               label="问卷描述"
-              name="password"
-              :rules="[{ required: true, message: 'Please input your password!' }]"
+              name="depict"
+              :rules="[{ required: true, }]"
             >
-              <Input v-model:value="formState.password"/>
+              <Input v-model:value="formState.depict" placeholder="请输入"/>
             </FormItem>
-            <div v-if="formState.questionList.length">
-              <div v-for="(item,index) in formState.questionList">
+            <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">
@@ -252,32 +286,42 @@ onMounted(()=>{
                 </Divider>
                 <FormItem
                   label="问题标题"
-                  name="username"
+                  :name="['questionnaireQuestions',index,'head']"
                   :rules="[{ required: true }]"
                 >
-                  <Input v-model:value="formState.username"/>
+                  <Input v-model:value="item.head" placeholder="请输入"/>
                 </FormItem>
                 <FormItem
-                  label="问题描述"
-                  name="password"
-                  :rules="[{ required: true }]"
+                  :label="'\xa0\xa0\xa0问题描述'"
+                  :name="['questionnaireQuestions',index,'depict']"
                 >
-                  <Input v-model:value="formState.password"/>
+                  <Input v-model:value="item.depict" placeholder="请输入"/>
                 </FormItem>
-                <Row :gutter="24" v-if="item.type==3||item.type==4">
+                <Row :gutter="24" v-if="item.type=='3'||item.type=='4'">
                   <Col class="gutter-row" :span="12">
                     <FormItem
                       label="选项设置"
-                      name="password"
+                      :name="['questionnaireQuestions',index,'questionnaireQuestionItems']"
                       :rules="[{ required: true }]"
                     >
-                      <Input style="margin-bottom: 10px" v-model:value="formState.password"
-                             placeholder="选项1"/>
-                      <Input v-model:value="formState.password" placeholder="选项1"/>
+                      <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(item)">
+                    <a-button @click="addOptions(index)">
                       <template #icon>
                         <PlusOutlined/>
                       </template>
@@ -286,25 +330,25 @@ onMounted(()=>{
                   </Col>
                 </Row>
                 <FormItem
-                  v-if="item.type==5"
+                  v-if="item.type=='5'"
                   label="评分预览"
-                  name="password"
+                  :name="['questionnaireQuestions',index,'rate']"
                 >
-                  <Rate v-model:value="formState.username"/>
+                  <Rate v-model:value="item.rate"/>
                 </FormItem>
                 <FormItem
-                  v-if="item.type==6"
+                  v-if="item.type=='6'"
                   label="日期选择预览"
-                  name="password"
+                  :name="['questionnaireQuestions',index,'dateTime']"
                 >
-                  <DatePicker style="width: 180px" v-model:value="formState.username"/>
+                  <DatePicker style="width: 180px" v-model:value="item.dateTime"/>
                 </FormItem>
                 <FormItem
                   label="是否必填"
-                  name="password"
-                  :rules="[{ required: true, message: 'Please input your password!' }]"
+                  :name="['questionnaireQuestions',index,'isRequired']"
+                  :rules="[{ required: true}]"
                 >
-                  <Switch v-model:checked="formState.username"/>
+                  <Switch v-model:checked="item.isRequired" checkedValue="1" unCheckedValue="2"/>
                 </FormItem>
               </div>
             </div>
@@ -316,28 +360,30 @@ onMounted(()=>{
               <Col class="gutter-row" :span="6">
                 <FormItem
                   label="匿名收集"
-                  name="username"
+                  name="isAnonyCollec"
                   :rules="[{ required: true, message: '匿名收集不能为空' }]"
                 >
-                  <Switch v-model:checked="formState.username"/>
+                  <Switch v-model:checked="formState.isAnonyCollec" checkedValue="1"
+                          unCheckedValue="2"/>
                 </FormItem>
               </Col>
               <Col class="gutter-row" :span="6">
                 <FormItem
                   label="允许多次提交"
-                  name="username"
-                  :rules="[{ required: true, message: '多次提交不能为空' }]"
+                  name="isCommit"
+                  :rules="[{ required: true }]"
                 >
-                  <Switch v-model:checked="formState.username"/>
+                  <Switch v-model:checked="formState.isCommit" checkedValue="1"
+                          unCheckedValue="2"/>
                 </FormItem>
               </Col>
               <Col class="gutter-row" :span="12">
                 <FormItem
                   label="截至日期"
-                  name="username"
-                  :rules="[{ required: true, message: '截止日期不能为空' }]"
+                  name="deadline"
+                  :rules="[{ required: true }]"
                 >
-                  <DatePicker style="width: 180px" v-model:value="formState.username"/>
+                  <DatePicker style="width: 180px" v-model:value="formState.deadline" format="YYYY-MM-DD" value-format="YYYY-MM-DD"/>
                 </FormItem>
               </Col>
             </Row>
@@ -346,8 +392,8 @@ onMounted(()=>{
       </Col>
     </Row>
     <div class="footer-button">
-      <a-button type="primary" @click="handleSave(1)">保存并发布</a-button>
-      <a-button @click="handleSave(2)">保存为草稿</a-button>
+      <a-button type="primary" @click="handleSave('2')">保存并发布</a-button>
+      <a-button @click="handleSave('1')">保存为草稿</a-button>
       <a-button @click="handleCancel">取消</a-button>
 
     </div>
@@ -382,6 +428,25 @@ onMounted(()=>{
     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 {
@@ -399,23 +464,7 @@ onMounted(()=>{
     background-color: #ffffff;
   }
 
-  .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;
-  }
-
-  .question-item-title {
-    font-weight: bold;
-    margin: 5px 12px;
-  }
 }
 </style>