feat:预览问卷

apps/web-antd/src/api/property/customerService/questionnaire/question/model.d.ts

@@ -1,6 +1,6 @@
-import type { PageQuery, BaseEntity } from '#/api/common';
+import type {PageQuery, BaseEntity} from '#/api/common';
 import type {
-  QuestionItemForm
+  QuestionItemForm, QuestionItemVO
 } from "#/api/property/customerService/questionnaire/questionItem/model";
 
 export interface QuestionVO {
@@ -39,6 +39,19 @@ export interface QuestionVO {
    */
   sort: number;
 
+  /**
+   * 问题选项
+   */
+  questionnaireQuestionItemVos: QuestionItemVO[];
+
+  options: string[];
+
+  answer: string;
+
+  rate:number;
+
+  checked:string[];
+
 }
 
 export interface QuestionForm extends BaseEntity {
@@ -80,17 +93,17 @@ export interface QuestionForm extends BaseEntity {
   /**
    * 选项
    */
-  questionnaireQuestionItems:QuestionItemForm[]
+  questionnaireQuestionItems: QuestionItemForm[]
 
   /**
    * 评分预览
    */
-  rate?:number;
+  rate?: number;
 
   /**
    * 时间预览
    */
-  dateTime?:string;
+  dateTime?: string;
 
 }
 
@@ -126,7 +139,7 @@ export interface QuestionQuery extends PageQuery {
   sort?: number;
 
   /**
-    * 日期范围参数
+   * 日期范围参数
-    */
+   */
   params?: any;
 }

apps/web-antd/src/api/property/customerService/questionnaire/questionnaire/model.d.ts

@@ -1,5 +1,8 @@
 import type { PageQuery, BaseEntity } from '#/api/common';
-import type {QuestionForm} from "#/api/property/customerService/questionnaire/question/model";
+import type {
+  QuestionForm,
+  QuestionVO
+} from "#/api/property/customerService/questionnaire/question/model";
 
 export interface QuestionnaireVO {
   /**
@@ -36,7 +39,10 @@ export interface QuestionnaireVO {
    * 状态(1草稿2已发布3未发布)
    */
   status: string;
-
+  /**
+   * 问题
+   */
+  questionnaireQuestionVos:QuestionVO[];
 }
 
 export interface QuestionnaireForm extends BaseEntity {

apps/web-antd/src/views/property/customerService/questionnaire/data.ts

@@ -1,104 +1,84 @@
 import type { FormSchemaGetter } from '#/adapter/form';
 import type { VxeGridProps } from '#/adapter/vxe-table';
-import { getDictOptions } from '#/utils/dict';
+import {renderDict} from "#/utils/render";
-import { renderDict } from '#/utils/render';
+import {getDictOptions} from "#/utils/dict";
-import {h} from "vue";
+
-import {Rate} from "ant-design-vue";
 
 export const querySchema: FormSchemaGetter = () => [
   {
-    component: 'Select',
+    component: 'Input',
-    componentProps: {
+    fieldName: 'head',
-      options: getDictOptions('type_contingency_plan'),
+    label: '问卷标题',
-    },
-    fieldName: 'contingenPlanType',
-    label: '预案类型',
-  },
-  {
-    component: 'ApiSelect',
-    fieldName: 'dutyPersion',
-    label: '责任人',
   },
+
   {
     component: 'Select',
     componentProps: {
-      options: getDictOptions('pro_exercise_status'),
+      options:getDictOptions('wy_dcwjzt')
     },
     fieldName: 'status',
-    label: '演练状态',
+    label: '问卷状态',//(1草稿2已发布3未发布)
   },
 ];
 
+// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
+// export const columns: () => VxeGridProps['columns'] = () => [
 export const columns: VxeGridProps['columns'] = [
   { type: 'checkbox', width: 60 },
   {
-    title: '序号',
+    title: '问卷标题',
-    field: 'id',
+    field: 'head',
-    slots: {
+    width:200,
-      default: ({rowIndex}) => {
-        return (rowIndex + 1).toString();
-      }
-    }
   },
   {
-    title: '预案名称',
+    title: '问卷描述',
-    field: 'contingenPlanName',
+    field: 'depict',
+    minWidth:180,
   },
   {
-    title: '预案类型',
+    title: '匿名收集',
-    field: 'contingenPlanType',
+    field: 'isAnonyCollec',
-    slots: {
+    slots:{
-      default: ({ row }) => {
+      default: ({row})=>{
-        return renderDict(row.contingenPlanType, 'type_contingency_plan');
+        return row.isAnonyCollec=='1'?'是':'否'
-      },
+      }},
-    },
+    width:100,
   },
   {
-    title: '风险等级',
+    title: '多次提交',
-    field: 'grade',
+    field: 'isCommit',
-    slots: {
+    slots:{
-      default: ({ row }) => {
+      default: ({row})=>{
-        return h(Rate, {
+        return row.isCommit=='1'?'是':'否'
-          value: row.grade || 0,
+      }},
-          disabled: true,
+    width:100,
-        });
-      },
-    },
-    minWidth: '150'
   },
   {
-    title: '发起人',
+    title: '截止日期',
-    field: 'initiatName',
+    field: 'deadline',
+    width:150,
   },
   {
-    title: '演练状态',
+    title: '问卷状态',//(1草稿2已发布3未发布)
     field: 'status',
-    slots: {
+    slots:{
-      default: ({ row }) => {
+      default: ({row})=>{
-        return renderDict(row.status, 'pro_exercise_status');
+        return renderDict(row.status,'wy_dcwjzt')
-      },
+      }},
-    },
+    width:100,
-  },
-  {
-    title: '责任人',
-    field: 'dutyPersionName',
-  },
-  {
-    title: '完成时间',
-    field: 'compleTimes',
   },
   {
     field: 'action',
     fixed: 'right',
     slots: { default: 'action' },
     title: '操作',
-    width: 240,
+    width: 280,
   },
 ];
 
 export const modalSchema: FormSchemaGetter = () => [
   {
-    label: '主键',
+    label: 'id',
     fieldName: 'id',
     component: 'Input',
     dependencies: {
@@ -107,52 +87,46 @@ export const modalSchema: FormSchemaGetter = () => [
     },
   },
   {
-    label: '预案名称',
+    label: '问卷标题',
-    fieldName: 'contingenPlanName',
+    fieldName: 'head',
+    component: 'Textarea',
+    rules: 'required',
+  },
+  {
+    label: '问卷描述',
+    fieldName: 'depict',
+    component: 'Textarea',
+  },
+  {
+    label: '是否匿名收集',
+    fieldName: 'isAnonyCollec',
     component: 'Input',
     rules: 'required',
   },
   {
-    label: '预案类型',
+    label: '是否多次提交',
-    fieldName: 'contingenPlanType',
+    fieldName: 'isCommit',
-    component: 'Select',
+    component: 'Input',
+    rules: 'required',
+  },
+  {
+    label: '截止日期',
+    fieldName: 'deadline',
+    component: 'DatePicker',
     componentProps: {
-      options: getDictOptions('type_contingency_plan'),
+      showTime: true,
-    },
+      format: 'YYYY-MM-DD HH:mm:ss',
-    rules: 'selectRequired',
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
-  },
-  {
-    label: '发起人',
-    fieldName: 'initiat',
-    component: 'ApiSelect',
-    rules: 'selectRequired',
-  },
-  {
-    label: '责任人',
-    fieldName: 'dutyPersion',
-    component: 'ApiSelect',
-    rules: 'selectRequired',
-  },
-  {
-    label: '预案内容',
-    fieldName: 'contingenPlanContent',
-    component: 'RichTextarea',
-    componentProps: {
-      // disabled: false, // 是否只读
-      // height: 400 // 高度 默认400
-    },
-    formItemClass: 'col-span-2'
-  },
-  {
-    label: '风险等级',
-    fieldName: 'grade',
-    component: 'Rate',
-    componentProps: {
-      allowHalf: false,
-      count: 5,
-      tooltips: ['1星', '2星', '3星', '4星', '5星'],
-      defaultValue: 0
     },
     rules: 'required',
   },
+  {
+    label: '状态(1草稿2已发布3未发布)',
+    fieldName: 'status',
+    component: 'RadioGroup',
+    componentProps: {
+      buttonStyle: 'solid',
+      optionType: 'button',
+    },
+  },
 ];

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

@@ -1,28 +1,26 @@
 <script setup lang="ts">
+
 import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
 import { getVxePopupContainer } from '@vben/utils';
+
 import { Modal, Popconfirm, Space } from 'ant-design-vue';
+
 import {
   useVbenVxeGrid,
-  vxeCheckboxChecked,
   type VxeGridProps
 } from '#/adapter/vxe-table';
-import {onMounted} from "vue";
+
 import {
-  contingenPlanExport,
+  questionnaireExport,
-  contingenPlanList,
+  questionnaireList,
-  contingenPlanRemove,
+  questionnaireRemove,
-  contingenPlanUpdate
+} from '#/api/property/customerService/questionnaire/questionnaire';
-} from '#/api/property/customerService/contingenPlan';
+import type { QuestionnaireForm } from '#/api/property/customerService/questionnaire/questionnaire/model';
-import type { ContingenPlanForm } from '#/api/property/customerService/contingenPlan/model';
 import { commonDownloadExcel } from '#/utils/file/download';
 
-import contingenPlanModal from './questionnaire-modal.vue';
+import questionnaireModal from './questionnaire-modal.vue';
-import contingenPlanDetail from './questionnaire-detail.vue';
 import { columns, querySchema } from './data';
-import {personList} from "#/api/property/resident/person";
+import questionnaireDetail from './questionnaire-detail.vue'
-import {renderDictValue} from "#/utils/render";
-
 const formOptions: VbenFormProps = {
   commonConfig: {
     labelWidth: 80,
@@ -40,6 +38,8 @@ const gridOptions: VxeGridProps = {
     highlight: true,
     // 翻页时保留选中状态
     reserve: true,
+    // 点击行选中
+    // trigger: 'row',
   },
   columns,
   height: 'auto',
@@ -48,7 +48,7 @@ const gridOptions: VxeGridProps = {
   proxyConfig: {
     ajax: {
       query: async ({ page }, formValues = {}) => {
-        return await contingenPlanList({
+        return await questionnaireList({
           pageNum: page.currentPage,
           pageSize: page.pageSize,
           ...formValues,
@@ -60,7 +60,7 @@ const gridOptions: VxeGridProps = {
     keyField: 'id',
   },
   // 表格全局唯一表示 保存列配置需要用到
-  id: 'system-contingenPlan-index'
+  id: 'property-questionnaire-index'
 };
 
 const [BasicTable, tableApi] = useVbenVxeGrid({
@@ -68,113 +68,76 @@ const [BasicTable, tableApi] = useVbenVxeGrid({
   gridOptions,
 });
 
-const [ContingenPlanModal, modalApi] = useVbenModal({
+const [QuestionnaireModal, modalApi] = useVbenModal({
-  connectedComponent: contingenPlanModal,
+  connectedComponent: questionnaireModal,
 });
 
-const [contingenPlanDetailModal, contingenPlanDetailApi] = useVbenModal({
+const [QuestionnaireDetail, detailApi] = useVbenModal({
-  connectedComponent: contingenPlanDetail,
+  connectedComponent: questionnaireDetail,
 });
 
-async function handleInfo(row: Required<ContingenPlanForm>) {
-  contingenPlanDetailApi.setData({ id: row.id });
-  contingenPlanDetailApi.open();
-}
-
 function handleAdd() {
   modalApi.setData({});
   modalApi.open();
 }
 
-async function handleEdit(row: Required<ContingenPlanForm>) {
+async function handleEdit(row: Required<QuestionnaireForm>) {
   modalApi.setData({ id: row.id });
   modalApi.open();
 }
+async function handleInfo(row: Required<QuestionnaireForm>) {
+  detailApi.setData({ id: row.id });
+  detailApi.open();
+}
 
-async function handleDelete(row: Required<ContingenPlanForm>) {
+async function handleDelete(row: Required<QuestionnaireForm>) {
-  await contingenPlanRemove(row.id);
+  await questionnaireRemove(row.id);
   await tableApi.query();
 }
 
-async function handleExamine(row: Required<ContingenPlanForm>) {
+// function handleMultiDelete() {
-  row.status = '1'
+//   const rows = tableApi.grid.getCheckboxRecords();
-  await contingenPlanUpdate(row);
+//   const ids = rows.map((row: Required<QuestionnaireForm>) => row.id);
-  await tableApi.query();
+//   Modal.confirm({
-}
+//     title: '提示',
-
+//     okType: 'danger',
-function handleMultiDelete() {
+//     content: `确认删除选中的${ids.length}条记录吗？`,
-  const rows = tableApi.grid.getCheckboxRecords();
+//     onOk: async () => {
-  const ids = rows.map((row: Required<ContingenPlanForm>) => row.id);
+//       await questionnaireRemove(ids);
-  Modal.confirm({
+//       await tableApi.query();
-    title: '提示',
+//     },
-    okType: 'danger',
+//   });
-    content: `确认删除选中的${ids.length}条记录吗？`,
+// }
-    onOk: async () => {
+//
-      await contingenPlanRemove(ids);
+// function handleDownloadExcel() {
-      await tableApi.query();
+//   commonDownloadExcel(questionnaireExport, '调查问卷数据', tableApi.formApi.form.values, {
-    },
+//     fieldMappingTime: formOptions.fieldMappingTime,
-  });
+//   });
-}
+// }
-
-function handleDownloadExcel() {
-  commonDownloadExcel(contingenPlanExport, '应急预案管理数据', tableApi.formApi.form.values, {
-    fieldMappingTime: formOptions.fieldMappingTime,
-  });
-}
-
-async function queryPersonData() {
-  let params = {
-    pageSize: 1000,
-    pageNum: 1,
-  }
-  const res = await personList(params);
-  const options = res.rows.map((user) => ({
-    label: user.userName + '-' + renderDictValue(user.gender, 'sys_user_sex') + '-' + user.phone,
-    value: user.id,
-  }));
-  tableApi.formApi.updateSchema([
-    {
-      componentProps: () => ({
-        options: options,
-        showSearch:true,
-        filterOption: filterOption
-      }),
-      fieldName: 'dutyPersion',
-    }
-  ])
-}
-
-const filterOption = (input: string, option: any) => {
-  return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
-};
-
-onMounted(async () => {
-  await queryPersonData()
-})
 </script>
 
 <template>
   <Page :auto-content-height="true">
-    <BasicTable table-title="应急预案管理列表">
+    <BasicTable table-title="调查问卷列表">
       <template #toolbar-tools>
         <Space>
-          <a-button
+<!--          <a-button-->
-            v-access:code="['system:contingenPlan:export']"
+<!--            v-access:code="['property:questionnaire:export']"-->
-            @click="handleDownloadExcel"
+<!--            @click="handleDownloadExcel"-->
-          >
+<!--          >-->
-            {{ $t('pages.common.export') }}
+<!--            {{ $t('pages.common.export') }}-->
-          </a-button>
+<!--          </a-button>-->
-          <a-button
+<!--          <a-button-->
-            :disabled="!vxeCheckboxChecked(tableApi)"
+<!--            :disabled="!vxeCheckboxChecked(tableApi)"-->
-            danger
+<!--            danger-->
-            type="primary"
+<!--            type="primary"-->
-            v-access:code="['system:contingenPlan:remove']"
+<!--            v-access:code="['property:questionnaire:remove']"-->
-            @click="handleMultiDelete">
+<!--            @click="handleMultiDelete">-->
-            {{ $t('pages.common.delete') }}
+<!--            {{ $t('pages.common.delete') }}-->
-          </a-button>
+<!--          </a-button>-->
           <a-button
             type="primary"
-            v-access:code="['system:contingenPlan:add']"
+            v-access:code="['property:questionnaire:add']"
             @click="handleAdd"
           >
             {{ $t('pages.common.add') }}
@@ -183,28 +146,16 @@ onMounted(async () => {
       </template>
       <template #action="{ row }">
         <Space>
-          <Popconfirm
-            v-if="row.status === '0'"
-            :get-popup-container="getVxePopupContainer"
-            placement="left"
-            title="确认审核？"
-            @confirm="handleExamine(row)"
-          >
-            <ghost-button
-              @click.stop=""
-            >
-              {{ '审核' }}
-            </ghost-button>
-          </Popconfirm>
           <ghost-button
+            v-access:code="['property:questionnaire:info']"
             @click.stop="handleInfo(row)"
           >
-            {{ $t('pages.common.info') }}
+            预览问卷
           </ghost-button>
           <ghost-button
-            v-if="row.status === '0'"
+            v-access:code="['property:questionnaire:edit']"
-            v-access:code="['system:contingenPlan:edit']"
             @click.stop="handleEdit(row)"
+            :disabled="row.status!=='1'"
           >
             {{ $t('pages.common.edit') }}
           </ghost-button>
@@ -216,16 +167,23 @@ onMounted(async () => {
           >
             <ghost-button
               danger
-              v-access:code="['system:contingenPlan:remove']"
+              v-access:code="['property:questionnaire:remove']"
               @click.stop=""
+              :disabled="row.status!=='1'"
             >
               {{ $t('pages.common.delete') }}
             </ghost-button>
           </Popconfirm>
+          <ghost-button
+            v-access:code="['property:questionnaire:info']"
+            @click.stop="handleEdit(row)"
+          >
+            统计分析
+          </ghost-button>
         </Space>
       </template>
     </BasicTable>
-    <ContingenPlanModal @reload="tableApi.query()" />
+    <QuestionnaireModal @reload="tableApi.query()" />
-    <contingenPlanDetailModal/>
+    <QuestionnaireDetail/>
   </Page>
 </template>

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

@@ -1,96 +1,158 @@
 <script setup lang="ts">
-import type {ContingenPlanVO} from '#/api/property/customerService/contingenPlan/model';
+import {reactive, shallowRef} from 'vue';
-import {shallowRef} from 'vue';
 import {useVbenModal} from '@vben/common-ui';
+import {questionnaireInfo} from "#/api/property/customerService/questionnaire/questionnaire";
+import type {
+  QuestionnaireVO
+} from "#/api/property/customerService/questionnaire/questionnaire/model";
 import {
-  Descriptions,
+  Tag,
-  DescriptionsItem,
+  RadioGroup,
-  Divider,
+  Radio,
+  CheckboxGroup,
   Rate,
-  Timeline,
+  DatePicker,
-  TimelineItem
+  Textarea,
-} from 'ant-design-vue';
+  Input,
-import {contingenPlanInfo} from '#/api/property/customerService/contingenPlan';
+  Popover
-import {renderDict} from "#/utils/render";
+} from 'ant-design-vue'
+import {QuestionCircleOutlined} from '@ant-design/icons-vue';
 
 const [BasicModal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  fullscreen: true,
   onOpenChange: handleOpenChange,
+  cancelText: '保存为草稿',
+  confirmText: '保存并发布',
   onClosed() {
-    contingenPlanIDetail.value = null;
+    questionnaireDetail.value = null;
+  },
+  onConfirm: () => {
+    questionnaireDetail.value = null;
+    modalApi.close()
   },
 });
 
-const contingenPlanIDetail = shallowRef<null | ContingenPlanVO>(null);
+const questionnaireDetail = shallowRef<null | QuestionnaireVO>(null);
-const handleRecords = shallowRef<null | ContingenPlanVO>(null);
+
 async function handleOpenChange(open: boolean) {
   if (!open) {
     return null;
   }
   modalApi.modalLoading(true);
   const {id} = modalApi.getData() as { id: number | string };
-  const response = await contingenPlanInfo(id);
+  questionnaireDetail.value = await questionnaireInfo(id);
-  contingenPlanIDetail.value = response;
+  if (questionnaireDetail.value.questionnaireQuestionVos) {
-  handleRecords.value = response.contingenPlanRecordVos.map(item => ({
+    questionnaireDetail.value.questionnaireQuestionVos.forEach(item => {
-    status: item.status,
+      item.answer = ''
-    createTime: item.createTime,
+      if (item.questionnaireQuestionItemVos) {
-    handlerName: item.dutyPersionName
+        item.options = item.questionnaireQuestionItemVos.map(item => item.itemContent)
-  }));
+      }
-  console.log(handleRecords.value)
+    })
+  }
   modalApi.modalLoading(false);
 }
+
+const radioStyle = reactive({
+  display: 'flex',
+  height: '30px',
+  lineHeight: '30px',
+});
 </script>
 
 <template>
-  <BasicModal :footer="false" :fullscreen-button="false" title="详情" class="w-[70%]">
+  <BasicModal :fullscreen-button="false" title="预览问卷">
-    <Descriptions v-if="contingenPlanIDetail" size="small" :column="2" bordered :labelStyle="{width:'120px'}">
+    <div v-if="questionnaireDetail" class="questionnaire-container">
-      <DescriptionsItem label="预案名称">
+      <div class="head-title">{{ questionnaireDetail.head }}</div>
-        {{ contingenPlanIDetail.contingenPlanName }}
+      <div class="subtitle">{{ questionnaireDetail.depict }}</div>
-      </DescriptionsItem>
+      <div v-for="(item,index) in questionnaireDetail.questionnaireQuestionVos"
-      <DescriptionsItem label="创建时间">
+           class="question-content">
-        {{ contingenPlanIDetail.createTime }}
+        <div class="question-head">
-      </DescriptionsItem>
+          <Tag :bordered="false">{{ index + 1 }}</Tag>
-      <DescriptionsItem label="预案类型" v-if="contingenPlanIDetail.contingenPlanType!=null">
+          <span>{{ item.head }}</span>
-        <component
+          <Popover title="问题描述" placement="right">
-          :is="renderDict(contingenPlanIDetail.contingenPlanType,'type_contingency_plan')"
+            <template #content>
-        />
+              <p>{{ item.depict }}</p>
-      </DescriptionsItem>
+            </template>
-      <DescriptionsItem label="最后更新时间">
+            <QuestionCircleOutlined v-if="item.depict!=null"
-        {{ contingenPlanIDetail.updateTime }}
+                                    style="font-size: 10px;margin-left: 10px"/>
-      </DescriptionsItem>
+          </Popover>
-      <DescriptionsItem label="演练状态" v-if="contingenPlanIDetail.status!=null">
+          <span style="color: red;margin-left: 5px" v-if="item.isRequired=='1'">*</span>
-        <component
+        </div>
-          :is="renderDict(contingenPlanIDetail.status,'pro_exercise_status')"
+        <div class="question-item">
-        />
+          <div v-if="item.type=='1'">
-      </DescriptionsItem>
+            <Input style="width: 80%;" v-model:value="item.answer"
-      <DescriptionsItem label="完成时间">
+                   placeholder="请输入您的详细回答"/>
-        {{ contingenPlanIDetail.compleTimes }}
+          </div>
-      </DescriptionsItem>
+          <div v-if="item.type=='2'">
-      <DescriptionsItem label="发起人">
+          <Textarea style="width: 80%;" v-model:value="item.answer"
-        {{ contingenPlanIDetail.initiatName }}
+                    placeholder="请输入您的详细回答"/>
-      </DescriptionsItem>
+          </div>
-      <DescriptionsItem label="责任人">
+          <div v-if="item.type=='3'">
-        {{ contingenPlanIDetail.dutyPersionName}}
+            <RadioGroup v-model:value="item.answer">
-      </DescriptionsItem>
+              <Radio :style="radioStyle"
-      <DescriptionsItem label="预案内容" :span="2">
+                     v-for="option in item.questionnaireQuestionItemVos"
-        <div v-html="contingenPlanIDetail.contingenPlanContent"></div>
+                     :value="option.itemContent">{{ option.itemContent }}
-      </DescriptionsItem>
+              </Radio>
-      <DescriptionsItem label="风险等级">
+            </RadioGroup>
-        <Rate :value="contingenPlanIDetail.grade" disabled />
+          </div>
-      </DescriptionsItem>
+          <div v-if="item.type=='4'">
-    </Descriptions>
+            <CheckboxGroup class="vertical-checkbox-group" v-model:value="item.checked"
-
+                           :options="item.options"/>
-    <Divider orientation="left" orientation-margin="0px">
+          </div>
-      处理记录
+          <div v-if="item.type=='5'">
-    </Divider>
+            <Rate v-model:value="item.rate"/>
-    <Timeline>
+            <span style="color:#8f8e8e;margin-left: 20px">请评分</span>
-      <TimelineItem v-for="(item,index) in handleRecords" :key="index">
+          </div>
-        <p style="display: flex;">类型：
+          <div v-if="item.type=='6'">
-          <component
+            <DatePicker style="width: 200px" v-model:value="item.answer"/>
-            :is="renderDict(item.status,'pro_exercise_status')"
+          </div>
-          /></p>
+        </div>
-        <p>时间：{{item.createTime}}</p>
+      </div>
-        <p>处理人：{{item.handlerName}}</p>
+    </div>
-      </TimelineItem>
-    </Timeline>
   </BasicModal>
 </template>
+
+<style scoped lang="scss">
+.questionnaire-container {
+  .head-title {
+    text-align: center;
+    font-size: 30px;
+    font-weight: bold;
+    line-height: 60px;
+  }
+
+  .subtitle {
+    text-align: center;
+    font-size: 18px;
+  }
+
+  .question-content {
+    margin-left: 20px;
+
+    .question-item {
+      margin-left: 20px;
+    }
+
+    .vertical-checkbox-group {
+      display: flex;
+      flex-direction: column;
+
+      :deep(.ant-checkbox-wrapper) {
+        margin-bottom: 10px;
+      }
+    }
+  }
+
+  .question-head {
+    margin: 20px 0 10px 0;
+
+    :deep(.ant-tag) {
+      font-size: 16px;
+      line-height: 21px;
+      margin-inline-end: 7px;
+      padding-inline: 8px;
+    }
+  }
+}
+</style>

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);
+      const record = await questionnaireInfo(id);
-      // await formApi.setValues(record);
+      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();
+  formRef.value.clearValidate();
-  // resetInitialized();
+  Object.assign(formState, initialState);
+  Object.assign(counts, badgeCounts);
+  formState.questionnaireQuestions = [];
 }
 
-const initialState = {
+const initialState: QuestionnaireForm = {
-  username: '',
+  id: '',
-  password: '',
+  head: '',
-  questionList: [],
+  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({
+const formState = reactive({...initialState});
-  ...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) {
+function handleAddQuestion(type: string) {
-  formState.questionList.push({type})
+  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) {
+function deleteOptions(index: number, type: string) {
-  formState.questionList.splice(index, 1)
+  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) {
+const formRef = ref();
-  await modalApi.close();
+
+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"
+              name="head"
-              :rules="[{ required: true, message: '问卷标题不能为空' }]"
+              :rules="[{ required: true, }]"
             >
-              <Input v-model:value="formState.username"/>
+              <Input v-model:value="formState.head" placeholder="请输入"/>
             </FormItem>
 
             <FormItem
               label="问卷描述"
-              name="password"
+              name="depict"
-              :rules="[{ required: true, message: 'Please input your password!' }]"
+              :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-if="formState.questionnaireQuestions.length">
-              <div v-for="(item,index) in formState.questionList">
+              <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="问题描述"
+                  :label="'\xa0\xa0\xa0问题描述'"
-                  name="password"
+                  :name="['questionnaireQuestions',index,'depict']"
-                  :rules="[{ required: true }]"
                 >
-                  <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"
+                      <div v-for="(option, i) in item.questionnaireQuestionItems" :key="i"
-                             placeholder="选项1"/>
+                           class="option-item">
-                      <Input v-model:value="formState.password" placeholder="选项1"/>
+                        <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"
+                  :name="['questionnaireQuestions',index,'isRequired']"
-                  :rules="[{ required: true, message: 'Please input your password!' }]"
+                  :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"
+                  name="isCommit"
-                  :rules="[{ required: true, message: '多次提交不能为空' }]"
+                  :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"
+                  name="deadline"
-                  :rules="[{ required: true, message: '截止日期不能为空' }]"
+                  :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 type="primary" @click="handleSave('2')">保存并发布</a-button>
-      <a-button @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>