From 2cdbc64250818f3515d9416fc08395dffa59211d Mon Sep 17 00:00:00 2001
From: dev_ljl <2590379346@qq.com>
Date: Thu, 14 Aug 2025 14:58:42 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E8=B0=83=E6=9F=A5=E9=97=AE=E5=8D=B7?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../customerService/questionnaire/data.ts     | 158 +++++++
 .../customerService/questionnaire/index.vue   | 231 ++++++++++
 .../questionnaire/questionnaire-detail.vue    |  96 ++++
 .../questionnaire/questionnaire-modal.vue     | 421 ++++++++++++++++++
 4 files changed, 906 insertions(+)
 create mode 100644 apps/web-antd/src/views/property/customerService/questionnaire/data.ts
 create mode 100644 apps/web-antd/src/views/property/customerService/questionnaire/index.vue
 create mode 100644 apps/web-antd/src/views/property/customerService/questionnaire/questionnaire-detail.vue
 create mode 100644 apps/web-antd/src/views/property/customerService/questionnaire/questionnaire-modal.vue

diff --git a/apps/web-antd/src/views/property/customerService/questionnaire/data.ts b/apps/web-antd/src/views/property/customerService/questionnaire/data.ts
new file mode 100644
index 00000000..933e55ec
--- /dev/null
+++ b/apps/web-antd/src/views/property/customerService/questionnaire/data.ts
@@ -0,0 +1,158 @@
+import type { FormSchemaGetter } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import { getDictOptions } from '#/utils/dict';
+import { renderDict } from '#/utils/render';
+import {h} from "vue";
+import {Rate} from "ant-design-vue";
+
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Select',
+    componentProps: {
+      options: getDictOptions('type_contingency_plan'),
+    },
+    fieldName: 'contingenPlanType',
+    label: '预案类型',
+  },
+  {
+    component: 'ApiSelect',
+    fieldName: 'dutyPersion',
+    label: '责任人',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      options: getDictOptions('pro_exercise_status'),
+    },
+    fieldName: 'status',
+    label: '演练状态',
+  },
+];
+
+export const columns: VxeGridProps['columns'] = [
+  { type: 'checkbox', width: 60 },
+  {
+    title: '序号',
+    field: 'id',
+    slots: {
+      default: ({rowIndex}) => {
+        return (rowIndex + 1).toString();
+      }
+    }
+  },
+  {
+    title: '预案名称',
+    field: 'contingenPlanName',
+  },
+  {
+    title: '预案类型',
+    field: 'contingenPlanType',
+    slots: {
+      default: ({ row }) => {
+        return renderDict(row.contingenPlanType, 'type_contingency_plan');
+      },
+    },
+  },
+  {
+    title: '风险等级',
+    field: 'grade',
+    slots: {
+      default: ({ row }) => {
+        return h(Rate, {
+          value: row.grade || 0,
+          disabled: true,
+        });
+      },
+    },
+    minWidth: '150'
+  },
+  {
+    title: '发起人',
+    field: 'initiatName',
+  },
+  {
+    title: '演练状态',
+    field: 'status',
+    slots: {
+      default: ({ row }) => {
+        return renderDict(row.status, 'pro_exercise_status');
+      },
+    },
+  },
+  {
+    title: '责任人',
+    field: 'dutyPersionName',
+  },
+  {
+    title: '完成时间',
+    field: 'compleTimes',
+  },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: { default: 'action' },
+    title: '操作',
+    width: 240,
+  },
+];
+
+export const modalSchema: FormSchemaGetter = () => [
+  {
+    label: '主键',
+    fieldName: 'id',
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+  },
+  {
+    label: '预案名称',
+    fieldName: 'contingenPlanName',
+    component: 'Input',
+    rules: 'required',
+  },
+  {
+    label: '预案类型',
+    fieldName: 'contingenPlanType',
+    component: 'Select',
+    componentProps: {
+      options: getDictOptions('type_contingency_plan'),
+    },
+    rules: 'selectRequired',
+  },
+  {
+    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',
+  },
+];
diff --git a/apps/web-antd/src/views/property/customerService/questionnaire/index.vue b/apps/web-antd/src/views/property/customerService/questionnaire/index.vue
new file mode 100644
index 00000000..149a5bd4
--- /dev/null
+++ b/apps/web-antd/src/views/property/customerService/questionnaire/index.vue
@@ -0,0 +1,231 @@
+<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,
+  contingenPlanList,
+  contingenPlanRemove,
+  contingenPlanUpdate
+} from '#/api/property/customerService/contingenPlan';
+import type { ContingenPlanForm } from '#/api/property/customerService/contingenPlan/model';
+import { commonDownloadExcel } from '#/utils/file/download';
+
+import contingenPlanModal from './questionnaire-modal.vue';
+import contingenPlanDetail from './questionnaire-detail.vue';
+import { columns, querySchema } from './data';
+import {personList} from "#/api/property/resident/person";
+import {renderDictValue} from "#/utils/render";
+
+const formOptions: VbenFormProps = {
+  commonConfig: {
+    labelWidth: 80,
+    componentProps: {
+      allowClear: true,
+    },
+  },
+  schema: querySchema(),
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+};
+
+const gridOptions: VxeGridProps = {
+  checkboxConfig: {
+    // 高亮
+    highlight: true,
+    // 翻页时保留选中状态
+    reserve: true,
+  },
+  columns,
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues = {}) => {
+        return await contingenPlanList({
+          pageNum: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  rowConfig: {
+    keyField: 'id',
+  },
+  // 表格全局唯一表示 保存列配置需要用到
+  id: 'system-contingenPlan-index'
+};
+
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
+
+const [ContingenPlanModal, modalApi] = useVbenModal({
+  connectedComponent: contingenPlanModal,
+});
+
+const [contingenPlanDetailModal, contingenPlanDetailApi] = useVbenModal({
+  connectedComponent: contingenPlanDetail,
+});
+
+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>) {
+  modalApi.setData({ id: row.id });
+  modalApi.open();
+}
+
+async function handleDelete(row: Required<ContingenPlanForm>) {
+  await contingenPlanRemove(row.id);
+  await tableApi.query();
+}
+
+async function handleExamine(row: Required<ContingenPlanForm>) {
+  row.status = '1'
+  await contingenPlanUpdate(row);
+  await tableApi.query();
+}
+
+function handleMultiDelete() {
+  const rows = tableApi.grid.getCheckboxRecords();
+  const ids = rows.map((row: Required<ContingenPlanForm>) => row.id);
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    content: `确认删除选中的${ids.length}条记录吗？`,
+    onOk: async () => {
+      await contingenPlanRemove(ids);
+      await tableApi.query();
+    },
+  });
+}
+
+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="应急预案管理列表">
+      <template #toolbar-tools>
+        <Space>
+          <a-button
+            v-access:code="['system:contingenPlan:export']"
+            @click="handleDownloadExcel"
+          >
+            {{ $t('pages.common.export') }}
+          </a-button>
+          <a-button
+            :disabled="!vxeCheckboxChecked(tableApi)"
+            danger
+            type="primary"
+            v-access:code="['system:contingenPlan:remove']"
+            @click="handleMultiDelete">
+            {{ $t('pages.common.delete') }}
+          </a-button>
+          <a-button
+            type="primary"
+            v-access:code="['system:contingenPlan:add']"
+            @click="handleAdd"
+          >
+            {{ $t('pages.common.add') }}
+          </a-button>
+        </Space>
+      </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
+            @click.stop="handleInfo(row)"
+          >
+            {{ $t('pages.common.info') }}
+          </ghost-button>
+          <ghost-button
+            v-if="row.status === '0'"
+            v-access:code="['system:contingenPlan:edit']"
+            @click.stop="handleEdit(row)"
+          >
+            {{ $t('pages.common.edit') }}
+          </ghost-button>
+          <Popconfirm
+            :get-popup-container="getVxePopupContainer"
+            placement="left"
+            title="确认删除？"
+            @confirm="handleDelete(row)"
+          >
+            <ghost-button
+              danger
+              v-access:code="['system:contingenPlan:remove']"
+              @click.stop=""
+            >
+              {{ $t('pages.common.delete') }}
+            </ghost-button>
+          </Popconfirm>
+        </Space>
+      </template>
+    </BasicTable>
+    <ContingenPlanModal @reload="tableApi.query()" />
+    <contingenPlanDetailModal/>
+  </Page>
+</template>
diff --git a/apps/web-antd/src/views/property/customerService/questionnaire/questionnaire-detail.vue b/apps/web-antd/src/views/property/customerService/questionnaire/questionnaire-detail.vue
new file mode 100644
index 00000000..bf8fb9a2
--- /dev/null
+++ b/apps/web-antd/src/views/property/customerService/questionnaire/questionnaire-detail.vue
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import type {ContingenPlanVO} from '#/api/property/customerService/contingenPlan/model';
+import {shallowRef} from 'vue';
+import {useVbenModal} from '@vben/common-ui';
+import {
+  Descriptions,
+  DescriptionsItem,
+  Divider,
+  Rate,
+  Timeline,
+  TimelineItem
+} from 'ant-design-vue';
+import {contingenPlanInfo} from '#/api/property/customerService/contingenPlan';
+import {renderDict} from "#/utils/render";
+
+const [BasicModal, modalApi] = useVbenModal({
+  onOpenChange: handleOpenChange,
+  onClosed() {
+    contingenPlanIDetail.value = null;
+  },
+});
+
+const contingenPlanIDetail = shallowRef<null | ContingenPlanVO>(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);
+  contingenPlanIDetail.value = response;
+  handleRecords.value = response.contingenPlanRecordVos.map(item => ({
+    status: item.status,
+    createTime: item.createTime,
+    handlerName: item.dutyPersionName
+  }));
+  console.log(handleRecords.value)
+  modalApi.modalLoading(false);
+}
+</script>
+
+<template>
+  <BasicModal :footer="false" :fullscreen-button="false" title="详情" class="w-[70%]">
+    <Descriptions v-if="contingenPlanIDetail" size="small" :column="2" bordered :labelStyle="{width:'120px'}">
+      <DescriptionsItem label="预案名称">
+        {{ contingenPlanIDetail.contingenPlanName }}
+      </DescriptionsItem>
+      <DescriptionsItem label="创建时间">
+        {{ contingenPlanIDetail.createTime }}
+      </DescriptionsItem>
+      <DescriptionsItem label="预案类型" v-if="contingenPlanIDetail.contingenPlanType!=null">
+        <component
+          :is="renderDict(contingenPlanIDetail.contingenPlanType,'type_contingency_plan')"
+        />
+      </DescriptionsItem>
+      <DescriptionsItem label="最后更新时间">
+        {{ contingenPlanIDetail.updateTime }}
+      </DescriptionsItem>
+      <DescriptionsItem label="演练状态" v-if="contingenPlanIDetail.status!=null">
+        <component
+          :is="renderDict(contingenPlanIDetail.status,'pro_exercise_status')"
+        />
+      </DescriptionsItem>
+      <DescriptionsItem label="完成时间">
+        {{ contingenPlanIDetail.compleTimes }}
+      </DescriptionsItem>
+      <DescriptionsItem label="发起人">
+        {{ contingenPlanIDetail.initiatName }}
+      </DescriptionsItem>
+      <DescriptionsItem label="责任人">
+        {{ contingenPlanIDetail.dutyPersionName}}
+      </DescriptionsItem>
+      <DescriptionsItem label="预案内容" :span="2">
+        <div v-html="contingenPlanIDetail.contingenPlanContent"></div>
+      </DescriptionsItem>
+      <DescriptionsItem label="风险等级">
+        <Rate :value="contingenPlanIDetail.grade" disabled />
+      </DescriptionsItem>
+    </Descriptions>
+
+    <Divider orientation="left" orientation-margin="0px">
+      处理记录
+    </Divider>
+    <Timeline>
+      <TimelineItem v-for="(item,index) in handleRecords" :key="index">
+        <p style="display: flex;">类型：
+          <component
+            :is="renderDict(item.status,'pro_exercise_status')"
+          /></p>
+        <p>时间：{{item.createTime}}</p>
+        <p>处理人：{{item.handlerName}}</p>
+      </TimelineItem>
+    </Timeline>
+  </BasicModal>
+</template>
diff --git a/apps/web-antd/src/views/property/customerService/questionnaire/questionnaire-modal.vue b/apps/web-antd/src/views/property/customerService/questionnaire/questionnaire-modal.vue
new file mode 100644
index 00000000..f49a0444
--- /dev/null
+++ b/apps/web-antd/src/views/property/customerService/questionnaire/questionnaire-modal.vue
@@ -0,0 +1,421 @@
+<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
+} from 'ant-design-vue'
+import {PlusOutlined, DeleteOutlined} from '@ant-design/icons-vue';
+import {renderDictValue} from "#/utils/render";
+import {getDictOptions} from "#/utils/dict";
+
+const emit = defineEmits<{ reload: [] }>();
+const isUpdate = ref(false);
+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;
+    }
+    modalApi.modalLoading(true);
+    const {id} = modalApi.getData() as { id?: number | string };
+    isUpdate.value = !!id;
+
+    if (isUpdate.value && id) {
+      // const record = await contingenPlanInfo(id);
+      // await formApi.setValues(record);
+    }
+    // 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();
+}
+
+const initialState = {
+  username: '',
+  password: '',
+  questionList: [],
+};
+
+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() {
+  Object.assign(formState, initialState);
+  Object.assign(counts, badgeCounts);
+  formState.questionList = [];
+  await modalApi.close();
+}
+
+function handleAddQuestion(type: number) {
+  formState.questionList.push({type})
+  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;
+  }
+}
+
+function addOptions(val: any) {
+
+}
+
+function deleteOptions(index: number, type: number) {
+  formState.questionList.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;
+  }
+}
+
+async function handleSave(type: number) {
+  await modalApi.close();
+}
+
+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"
+          >
+            <FormItem
+              label="问卷标题"
+              name="username"
+              :rules="[{ required: true, message: '问卷标题不能为空' }]"
+            >
+              <Input v-model:value="formState.username"/>
+            </FormItem>
+
+            <FormItem
+              label="问卷描述"
+              name="password"
+              :rules="[{ required: true, message: 'Please input your password!' }]"
+            >
+              <Input v-model:value="formState.password"/>
+            </FormItem>
+            <div v-if="formState.questionList.length">
+              <div v-for="(item,index) in formState.questionList">
+                <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="username"
+                  :rules="[{ required: true }]"
+                >
+                  <Input v-model:value="formState.username"/>
+                </FormItem>
+                <FormItem
+                  label="问题描述"
+                  name="password"
+                  :rules="[{ required: true }]"
+                >
+                  <Input v-model:value="formState.password"/>
+                </FormItem>
+                <Row :gutter="24" v-if="item.type==3||item.type==4">
+                  <Col class="gutter-row" :span="12">
+                    <FormItem
+                      label="选项设置"
+                      name="password"
+                      :rules="[{ required: true }]"
+                    >
+                      <Input style="margin-bottom: 10px" v-model:value="formState.password"
+                             placeholder="选项1"/>
+                      <Input v-model:value="formState.password" placeholder="选项1"/>
+                    </FormItem>
+                  </Col>
+                  <Col class="gutter-row" :span="12">
+                    <a-button @click="addOptions(item)">
+                      <template #icon>
+                        <PlusOutlined/>
+                      </template>
+                      添加选项
+                    </a-button>
+                  </Col>
+                </Row>
+                <FormItem
+                  v-if="item.type==5"
+                  label="评分预览"
+                  name="password"
+                >
+                  <Rate v-model:value="formState.username"/>
+                </FormItem>
+                <FormItem
+                  v-if="item.type==6"
+                  label="日期选择预览"
+                  name="password"
+                >
+                  <DatePicker style="width: 180px" v-model:value="formState.username"/>
+                </FormItem>
+                <FormItem
+                  label="是否必填"
+                  name="password"
+                  :rules="[{ required: true, message: 'Please input your password!' }]"
+                >
+                  <Switch v-model:checked="formState.username"/>
+                </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="username"
+                  :rules="[{ required: true, message: '匿名收集不能为空' }]"
+                >
+                  <Switch v-model:checked="formState.username"/>
+                </FormItem>
+              </Col>
+              <Col class="gutter-row" :span="6">
+                <FormItem
+                  label="允许多次提交"
+                  name="username"
+                  :rules="[{ required: true, message: '多次提交不能为空' }]"
+                >
+                  <Switch v-model:checked="formState.username"/>
+                </FormItem>
+              </Col>
+              <Col class="gutter-row" :span="12">
+                <FormItem
+                  label="截至日期"
+                  name="username"
+                  :rules="[{ required: true, message: '截止日期不能为空' }]"
+                >
+                  <DatePicker style="width: 180px" v-model:value="formState.username"/>
+                </FormItem>
+              </Col>
+            </Row>
+          </Form>
+        </div>
+      </Col>
+    </Row>
+    <div class="footer-button">
+      <a-button type="primary" @click="handleSave(1)">保存并发布</a-button>
+      <a-button @click="handleSave(2)">保存为草稿</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;
+  }
+
+  .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;
+  }
+
+  .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>
+