feat:调查问卷管理
Some checks are pending
Gitea Actions Demo / Explore-Gitea-Actions (push) Waiting to run
Some checks are pending
Gitea Actions Demo / Explore-Gitea-Actions (push) Waiting to run
This commit is contained in:
@@ -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',
|
||||||
|
},
|
||||||
|
];
|
||||||
@@ -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>
|
||||||
@@ -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>
|
||||||
@@ -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>
|
||||||
|
|
||||||
Reference in New Issue
Block a user