471 lines
14 KiB
Vue
471 lines
14 KiB
Vue
<script setup lang="ts">
|
|
import {computed, onMounted, reactive, ref} from 'vue';
|
|
import {useVbenModal} from '@vben/common-ui';
|
|
import {cloneDeep} from '@vben/utils';
|
|
import {
|
|
Form,
|
|
FormItem,
|
|
Input,
|
|
Row,
|
|
Col,
|
|
Switch,
|
|
DatePicker,
|
|
Empty,
|
|
Divider,
|
|
Rate,
|
|
Popover,
|
|
Badge,
|
|
message
|
|
} from 'ant-design-vue'
|
|
import {PlusOutlined, DeleteOutlined} from '@ant-design/icons-vue';
|
|
import {renderDictValue} from "#/utils/render";
|
|
import {getDictOptions} from "#/utils/dict";
|
|
import type {
|
|
QuestionnaireForm
|
|
} from "#/api/property/customerService/questionnaire/questionnaire/model";
|
|
import type {QuestionForm} from "#/api/property/customerService/questionnaire/question/model";
|
|
import {
|
|
questionnaireAdd,
|
|
questionnaireUpdate,
|
|
questionnaireInfo
|
|
} from '#/api/property/customerService/questionnaire/questionnaire';
|
|
import type {
|
|
QuestionItemForm
|
|
} from "#/api/property/customerService/questionnaire/questionItem/model";
|
|
|
|
const emit = defineEmits<{ reload: [] }>();
|
|
const isUpdate = ref(false);
|
|
const title = computed(() => {
|
|
return isUpdate.value ? '编辑问卷' : '新增问卷';
|
|
});
|
|
|
|
const [BasicModal, modalApi] = useVbenModal({
|
|
fullscreenButton: false,
|
|
fullscreen: true,
|
|
onClosed: handleClosed,
|
|
onOpenChange: async (isOpen) => {
|
|
if (!isOpen) {
|
|
return null;
|
|
}
|
|
modalApi.modalLoading(true);
|
|
const {id} = modalApi.getData() as { id?: number | string };
|
|
isUpdate.value = !!id;
|
|
|
|
if (isUpdate.value && id) {
|
|
const record = await questionnaireInfo(id);
|
|
Object.assign(counts, badgeCounts);
|
|
let questions: QuestionForm[] = [];
|
|
if (record.questionnaireQuestionVos) {
|
|
questions = record.questionnaireQuestionVos.map(item => {
|
|
const question: QuestionForm = { ...item };
|
|
switch (item.type) {
|
|
case '1': counts.inputCount++; break;
|
|
case '2': counts.textareaCount++; break;
|
|
case '3': counts.radioCount++; break;
|
|
case '4': counts.checkboxCount++; break;
|
|
case '5': counts.rateCount++; break;
|
|
case '6': counts.datePickerCount++; break;
|
|
}
|
|
if (item.questionnaireQuestionItemVos) {
|
|
question.questionnaireQuestionItems = item.questionnaireQuestionItemVos.map(
|
|
option => ({ ...option } as QuestionItemForm)
|
|
);
|
|
}
|
|
return question;
|
|
});
|
|
}
|
|
Object.assign(formState, {
|
|
...record,
|
|
questionnaireQuestions: questions,
|
|
});
|
|
}
|
|
modalApi.modalLoading(false);
|
|
},
|
|
});
|
|
|
|
async function handleClosed() {
|
|
formRef.value.clearValidate();
|
|
Object.assign(formState, initialState);
|
|
Object.assign(counts, badgeCounts);
|
|
formState.questionnaireQuestions = [];
|
|
}
|
|
|
|
const initialState: QuestionnaireForm = {
|
|
id: '',
|
|
head: '',
|
|
depict: '',
|
|
isAnonyCollec: '1',
|
|
isCommit: '1',
|
|
deadline: '',
|
|
status: '',
|
|
questionnaireQuestions: [] as Array<QuestionForm>
|
|
};
|
|
|
|
const badgeCounts = {
|
|
inputCount: 0,
|
|
textareaCount: 0,
|
|
radioCount: 0,
|
|
checkboxCount: 0,
|
|
rateCount: 0,
|
|
datePickerCount: 0,
|
|
}
|
|
|
|
const counts = reactive({...badgeCounts})
|
|
const formState = reactive({...initialState});
|
|
|
|
async function handleCancel() {
|
|
formRef.value.clearValidate();
|
|
Object.assign(formState, initialState);
|
|
Object.assign(counts, badgeCounts);
|
|
formState.questionnaireQuestions = [];
|
|
await modalApi.close();
|
|
}
|
|
|
|
function handleAddQuestion(type: string) {
|
|
let question: QuestionForm = {
|
|
type,
|
|
questionnaireQuestionItems: [],
|
|
isRequired: '1',
|
|
}
|
|
switch (type) {
|
|
case '1':
|
|
counts.inputCount++;
|
|
break;
|
|
case '2':
|
|
counts.textareaCount++;
|
|
break;
|
|
case '3':
|
|
counts.radioCount++;
|
|
question.questionnaireQuestionItems.push({itemContent: ''});
|
|
break;
|
|
case '4':
|
|
counts.checkboxCount++;
|
|
question.questionnaireQuestionItems.push({itemContent: ''});
|
|
break;
|
|
case '5':
|
|
counts.rateCount++;
|
|
break;
|
|
case '6':
|
|
counts.datePickerCount++;
|
|
break;
|
|
}
|
|
formState.questionnaireQuestions.push(question);
|
|
}
|
|
|
|
function addOptions(index: number) {
|
|
formState.questionnaireQuestions[index]?.questionnaireQuestionItems.push({itemContent: ''})
|
|
}
|
|
|
|
function deleteOptions(index: number, type: string) {
|
|
formState.questionnaireQuestions.splice(index, 1)
|
|
switch (type) {
|
|
case '1':
|
|
counts.inputCount--;
|
|
break;
|
|
case '2':
|
|
counts.textareaCount--;
|
|
break;
|
|
case '3':
|
|
counts.radioCount--;
|
|
break;
|
|
case '4':
|
|
counts.checkboxCount--;
|
|
break;
|
|
case '5':
|
|
counts.rateCount--;
|
|
break;
|
|
case '6':
|
|
counts.datePickerCount--;
|
|
break;
|
|
}
|
|
}
|
|
|
|
const formRef = ref();
|
|
|
|
async function handleSave(type: string) {
|
|
try {
|
|
await formRef.value.validate();
|
|
const data = cloneDeep(formState);
|
|
if (!data.questionnaireQuestions.length) {
|
|
message.error('还没有问题，请添加');
|
|
return;
|
|
}
|
|
modalApi.lock(true);
|
|
data.status = type;
|
|
data.questionnaireQuestions.forEach((item, index) => {
|
|
item.sort = index + 1;
|
|
item.questionnaireQuestionItems.forEach((option, i) => {
|
|
option.sort = i + 1;
|
|
});
|
|
});
|
|
await (isUpdate.value ? questionnaireUpdate(data) : questionnaireAdd(data));
|
|
emit('reload');
|
|
await modalApi.close();
|
|
} catch (error: any) {
|
|
if (error.errorFields) {
|
|
const firstErrorField = error.errorFields[0].name[0];
|
|
formRef.value.scrollToField(firstErrorField);
|
|
message.error('请完善问卷');
|
|
} else {
|
|
console.error(error);
|
|
}
|
|
} finally {
|
|
modalApi.lock(false);
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
getDictOptions('wy_wtsjlx')
|
|
})
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<BasicModal :title="title" :footer="false" class="modal-container">
|
|
<Row :gutter="24">
|
|
<Col class="gutter-row" :span="3">
|
|
<div class="left-options">
|
|
<div class="header-title">问题设计</div>
|
|
<Badge :count="counts.inputCount" :number-style="{ backgroundColor: '#3996f3' }">
|
|
<a-button size="large" @click="handleAddQuestion('1')">单行文本</a-button>
|
|
</Badge>
|
|
<Badge :count="counts.textareaCount" :number-style="{ backgroundColor: '#3996f3' }">
|
|
<a-button size="large" @click="handleAddQuestion('2')">多行文本</a-button>
|
|
</Badge>
|
|
<Badge :count="counts.radioCount" :number-style="{ backgroundColor: '#3996f3' }">
|
|
<a-button size="large" @click="handleAddQuestion('3')">单选题</a-button>
|
|
</Badge>
|
|
<Badge :count="counts.checkboxCount" :number-style="{ backgroundColor: '#3996f3' }">
|
|
<a-button size="large" @click="handleAddQuestion('4')">多选题</a-button>
|
|
</Badge>
|
|
<Badge :count="counts.rateCount" :number-style="{ backgroundColor: '#3996f3' }">
|
|
<a-button size="large" @click="handleAddQuestion('5')">评分题</a-button>
|
|
</Badge>
|
|
<Badge :count="counts.datePickerCount" :number-style="{ backgroundColor: '#3996f3' }">
|
|
<a-button size="large" @click="handleAddQuestion('6')">日期选择</a-button>
|
|
</Badge>
|
|
</div>
|
|
</Col>
|
|
<Col class="gutter-row" :span="21">
|
|
<div class="right-question">
|
|
<div class="header-title">基本信息</div>
|
|
<Form
|
|
:model="formState"
|
|
name="basic"
|
|
ref="formRef"
|
|
>
|
|
<FormItem
|
|
label="问卷标题"
|
|
name="head"
|
|
:rules="[{ required: true, }]"
|
|
>
|
|
<Input v-model:value="formState.head" placeholder="请输入"/>
|
|
</FormItem>
|
|
|
|
<FormItem
|
|
label="问卷描述"
|
|
name="depict"
|
|
:rules="[{ required: true, }]"
|
|
>
|
|
<Input v-model:value="formState.depict" placeholder="请输入"/>
|
|
</FormItem>
|
|
<div v-if="formState.questionnaireQuestions.length">
|
|
<div v-for="(item,index) in formState.questionnaireQuestions">
|
|
<Divider orientation="left">
|
|
问题{{ (index + 1) + '\xa0' + renderDictValue(item.type, 'wy_wtsjlx') }}
|
|
<Popover placement="top">
|
|
<template #content>
|
|
<p>删除当前问题</p>
|
|
</template>
|
|
<a-button type="link" @click="deleteOptions(index,item.type)">
|
|
<template #icon>
|
|
<DeleteOutlined style="color: red"/>
|
|
</template>
|
|
</a-button>
|
|
</Popover>
|
|
</Divider>
|
|
<FormItem
|
|
label="问题标题"
|
|
:name="['questionnaireQuestions',index,'head']"
|
|
:rules="[{ required: true }]"
|
|
>
|
|
<Input v-model:value="item.head" placeholder="请输入"/>
|
|
</FormItem>
|
|
<FormItem
|
|
:label="'\xa0\xa0\xa0问题描述'"
|
|
:name="['questionnaireQuestions',index,'depict']"
|
|
>
|
|
<Input v-model:value="item.depict" placeholder="请输入"/>
|
|
</FormItem>
|
|
<Row :gutter="24" v-if="item.type=='3'||item.type=='4'">
|
|
<Col class="gutter-row" :span="12">
|
|
<FormItem
|
|
label="选项设置"
|
|
:name="['questionnaireQuestions',index,'questionnaireQuestionItems']"
|
|
:rules="[{ required: true }]"
|
|
>
|
|
<div v-for="(option, i) in item.questionnaireQuestionItems" :key="i"
|
|
class="option-item">
|
|
<FormItem
|
|
:name="['questionnaireQuestions', index, 'questionnaireQuestionItems', i, 'itemContent']"
|
|
:rules="[{ required: true, message: '' }]"
|
|
>
|
|
<Input
|
|
style="margin-bottom: 10px"
|
|
v-model:value="option.itemContent"
|
|
:placeholder="`选项${i + 1}`"
|
|
/>
|
|
</FormItem>
|
|
</div>
|
|
|
|
</FormItem>
|
|
</Col>
|
|
<Col class="gutter-row" :span="12">
|
|
<a-button @click="addOptions(index)">
|
|
<template #icon>
|
|
<PlusOutlined/>
|
|
</template>
|
|
添加选项
|
|
</a-button>
|
|
</Col>
|
|
</Row>
|
|
<FormItem
|
|
v-if="item.type=='5'"
|
|
label="评分预览"
|
|
:name="['questionnaireQuestions',index,'rate']"
|
|
>
|
|
<Rate v-model:value="item.rate"/>
|
|
</FormItem>
|
|
<FormItem
|
|
v-if="item.type=='6'"
|
|
label="日期选择预览"
|
|
:name="['questionnaireQuestions',index,'dateTime']"
|
|
>
|
|
<DatePicker style="width: 180px" v-model:value="item.dateTime"/>
|
|
</FormItem>
|
|
<FormItem
|
|
label="是否必填"
|
|
:name="['questionnaireQuestions',index,'isRequired']"
|
|
:rules="[{ required: true}]"
|
|
>
|
|
<Switch v-model:checked="item.isRequired" checkedValue="1" unCheckedValue="2"/>
|
|
</FormItem>
|
|
</div>
|
|
</div>
|
|
<div class="empty-box" v-else>
|
|
<Empty description="还没有添加问题，点击左侧按钮开始创建"/>
|
|
</div>
|
|
<div class="header-title">发布设计</div>
|
|
<Row :gutter="24">
|
|
<Col class="gutter-row" :span="6">
|
|
<FormItem
|
|
label="匿名收集"
|
|
name="isAnonyCollec"
|
|
:rules="[{ required: true, message: '匿名收集不能为空' }]"
|
|
>
|
|
<Switch v-model:checked="formState.isAnonyCollec" checkedValue="1"
|
|
unCheckedValue="2"/>
|
|
</FormItem>
|
|
</Col>
|
|
<Col class="gutter-row" :span="6">
|
|
<FormItem
|
|
label="允许多次提交"
|
|
name="isCommit"
|
|
:rules="[{ required: true }]"
|
|
>
|
|
<Switch v-model:checked="formState.isCommit" checkedValue="1"
|
|
unCheckedValue="2"/>
|
|
</FormItem>
|
|
</Col>
|
|
<Col class="gutter-row" :span="12">
|
|
<FormItem
|
|
label="截至日期"
|
|
name="deadline"
|
|
:rules="[{ required: true }]"
|
|
>
|
|
<DatePicker style="width: 180px" v-model:value="formState.deadline" format="YYYY-MM-DD" value-format="YYYY-MM-DD"/>
|
|
</FormItem>
|
|
</Col>
|
|
</Row>
|
|
</Form>
|
|
</div>
|
|
</Col>
|
|
</Row>
|
|
<div class="footer-button">
|
|
<a-button type="primary" @click="handleSave('2')">保存并发布</a-button>
|
|
<a-button @click="handleSave('1')">保存为草稿</a-button>
|
|
<a-button @click="handleCancel">取消</a-button>
|
|
|
|
</div>
|
|
</BasicModal>
|
|
</template>
|
|
<style lang="scss" scoped>
|
|
.modal-container {
|
|
position: relative;
|
|
|
|
.header-title {
|
|
margin-bottom: 10px;
|
|
font-size: 17px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.left-options {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
:deep(.ant-badge .ant-badge-count) {
|
|
position: absolute;
|
|
top: 40px;
|
|
}
|
|
|
|
.ant-btn {
|
|
width: 150px;
|
|
margin-top: 40px;
|
|
}
|
|
}
|
|
|
|
.right-question {
|
|
max-height: 87vh;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
|
|
.option-item {
|
|
:deep(.ant-form-item .ant-form-item-control-input) {
|
|
margin-bottom: -20px;
|
|
}
|
|
}
|
|
|
|
.empty-box {
|
|
height: 50vh;
|
|
border: 2px dashed #dce0e6;
|
|
border-radius: 10px;
|
|
|
|
:deep(.ant-empty .ant-empty-image) {
|
|
margin-top: 15vh;
|
|
}
|
|
|
|
margin-bottom: 10px;
|
|
margin-left: 80px;
|
|
}
|
|
}
|
|
|
|
.footer-button {
|
|
width: 100%;
|
|
|
|
.ant-btn {
|
|
float: right;
|
|
margin: 0 15px 10px 0;
|
|
}
|
|
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 100;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
|
|
}
|
|
</style>
|
|
|