完成调查问卷
This commit is contained in:
Zy
324
src/views/system/Questionnaire/addQuestionnaire.vue
Normal file
324
src/views/system/Questionnaire/addQuestionnaire.vue
Normal file
@@ -0,0 +1,324 @@
|
||||
<template>
|
||||
<div class="AddBuildingBox">
|
||||
<PageHeader :title="userid ? '编辑问卷' : '添加问卷'"></PageHeader>
|
||||
<div class="AddBuildingBody">
|
||||
<el-form class="formBody" label-position="right" label-width="130px">
|
||||
<el-card>
|
||||
<template #header>
|
||||
<span>基本信息</span>
|
||||
</template>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="参与范围" prop="cardName">
|
||||
<el-radio-group v-model="form.scope">
|
||||
<el-radio v-for="item in com_questionnaire_scope" :value="item.value" :label="item.label" :key="item.value"></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row v-if="form.scope === '1'">
|
||||
<el-col :span="12">
|
||||
<ul class="checkoutSideUsesbox">
|
||||
<li v-for="(item, index) in checkoutUses" :key="index">
|
||||
<div>
|
||||
<span>姓名：</span>
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
<el-icon @click="delteUse(item.id)">
|
||||
<Delete></Delete>
|
||||
</el-icon>
|
||||
</li>
|
||||
<Holder returnvalue="*" ref="HolderRef" :isMultiple="true" :userid="checkoutUses" @change="handleSelect">
|
||||
<template #default>
|
||||
<li @click="OpenUseTablesfun" class="add justify-center">
|
||||
<el-icon>
|
||||
<DocumentAdd></DocumentAdd>
|
||||
</el-icon>
|
||||
<span>添加业主</span>
|
||||
</li>
|
||||
</template>
|
||||
</Holder>
|
||||
</ul>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="时间范围" prop="timedata">
|
||||
<el-date-picker
|
||||
v-model="timedata"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
type="datetimerange"
|
||||
range-separator="到"
|
||||
start-placeholder="开始日期时间"
|
||||
end-placeholder="结束日期时间"
|
||||
placeholder="请选择问卷时间范围"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input :rows="5" type="textarea" placeholder="请输入" v-model="form.remark"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
<el-card class="mt-20px">
|
||||
<template #header>
|
||||
<span>问卷题目</span>
|
||||
</template>
|
||||
<QuestionnaireEdit ref="questionnaireEditRef" :initial-data="editData" @cancel="handleCancel" @save="handleSave" @publish="handlePublish" />
|
||||
</el-card>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Holder from '@/components/Holder/index.vue';
|
||||
import QuestionnaireEdit from './components/QuestionnaireEdit.vue';
|
||||
|
||||
import PageHeader from '@/components/Pageheader/index.vue';
|
||||
import { Delete, DocumentAdd } from '@element-plus/icons-vue';
|
||||
import { getQuestionnaire } from '../test/api';
|
||||
import { QuestionnaireForm, QuestionnaireVO } from '@/api/system/Questionnaire/type';
|
||||
import { addQuestionnaire, updateQuestionnaire } from '@/api/system/Questionnaire';
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const { com_questionnaire_scope } = toRefs<any>(proxy?.useDict('com_questionnaire_scope'));
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
import { useHouseStore } from '@/store/modules/house';
|
||||
import { listResident } from '@/api/system/resident';
|
||||
const houseStore = useHouseStore();
|
||||
|
||||
const form = ref({
|
||||
scope: '0',
|
||||
residents: '',
|
||||
remark: ''
|
||||
});
|
||||
const timedata = ref([]);
|
||||
// ! 路由参数 --------------------------------------------------------------------------------
|
||||
// 打开
|
||||
const HolderRef = ref<InstanceType<typeof Holder>>();
|
||||
function OpenUseTablesfun() {
|
||||
HolderRef.value.open();
|
||||
}
|
||||
// 多选
|
||||
const checkoutUses = ref([]);
|
||||
function handleSelect(val) {
|
||||
checkoutUses.value = val;
|
||||
form.value.residents = val.map((item) => item.id).join(',');
|
||||
}
|
||||
// 删除
|
||||
function delteUse(id: string | number) {
|
||||
checkoutUses.value = checkoutUses.value.filter((item) => item.id !== id);
|
||||
}
|
||||
// ! 编辑问卷 ------------------------------------------------------------------------
|
||||
const questionnaireEditRef = ref<InstanceType<typeof QuestionnaireEdit>>();
|
||||
const editData = ref<QuestionnaireVO | null>(null);
|
||||
|
||||
// ! 路由参数 --------------------------------------------------------------------------------
|
||||
const userid = ref(null);
|
||||
|
||||
if (route.query.id) {
|
||||
userid.value = route.query.id;
|
||||
|
||||
handleEdit(userid.value);
|
||||
} else {
|
||||
handleAdd();
|
||||
}
|
||||
|
||||
//
|
||||
const tableData = ref([]);
|
||||
|
||||
// 新增问卷
|
||||
function handleAdd() {
|
||||
editData.value = null;
|
||||
questionnaireEditRef.value?.reset();
|
||||
}
|
||||
// 编辑问卷
|
||||
async function handleEdit(id: string | number) {
|
||||
const res = await listResident();
|
||||
tableData.value = res.rows;
|
||||
// 父组件自己调用接口获取数据
|
||||
getQuestionnaire(id).then((res) => {
|
||||
editData.value = res.data;
|
||||
editData.value.content = JSON.parse(res.data.content);
|
||||
questionnaireEditRef.value?.init(res.data);
|
||||
form.value = {
|
||||
scope: res.data.scope,
|
||||
residents: res.data.residents,
|
||||
remark: res.data.remark
|
||||
};
|
||||
checkoutUses.value = res.data.residents
|
||||
.split(',')
|
||||
.filter((item) => item)
|
||||
.map((item) => {
|
||||
const find = tableData.value.find((useritem) => useritem.id == item);
|
||||
if (find) {
|
||||
return {
|
||||
name: find.name,
|
||||
id: item
|
||||
};
|
||||
}
|
||||
});
|
||||
timedata.value = [res.data.startTime, res.data.endTime];
|
||||
});
|
||||
}
|
||||
|
||||
// 保存草稿
|
||||
async function handleSave(data: QuestionnaireForm) {
|
||||
try {
|
||||
// 父组件自己调用接口提交
|
||||
console.log(data);
|
||||
if (userid.value) {
|
||||
await updateQuestionnaire({
|
||||
...data,
|
||||
content: JSON.stringify(data.content),
|
||||
status: '0', // 草稿状态
|
||||
startTime: timedata.value[0],
|
||||
endTime: timedata.value[1],
|
||||
...form.value
|
||||
});
|
||||
} else {
|
||||
await addQuestionnaire({
|
||||
...data,
|
||||
content: JSON.stringify(data.content),
|
||||
status: '0', // 草稿状态
|
||||
startTime: timedata.value[0],
|
||||
endTime: timedata.value[1],
|
||||
...form.value
|
||||
});
|
||||
}
|
||||
ElMessage.success('保存成功');
|
||||
handleCancel();
|
||||
} catch (e) {
|
||||
// 错误处理
|
||||
console.log(e);
|
||||
}
|
||||
}
|
||||
|
||||
// 发布问卷
|
||||
async function handlePublish(data: QuestionnaireForm) {
|
||||
try {
|
||||
if (userid.value) {
|
||||
await updateQuestionnaire({
|
||||
...data,
|
||||
content: JSON.stringify(data.content),
|
||||
status: '1', // 发布状态
|
||||
startTime: timedata.value[0],
|
||||
villageId: houseStore.currentVilageInfo.villageId,
|
||||
endTime: timedata.value[1]
|
||||
});
|
||||
} else {
|
||||
await addQuestionnaire({
|
||||
...data,
|
||||
content: JSON.stringify(data.content),
|
||||
status: '1', // 发布状态
|
||||
startTime: timedata.value[0],
|
||||
villageId: houseStore.currentVilageInfo.villageId,
|
||||
endTime: timedata.value[1]
|
||||
});
|
||||
}
|
||||
ElMessage.success('发布成功');
|
||||
handleCancel();
|
||||
} catch (e) {
|
||||
// 错误处理
|
||||
}
|
||||
}
|
||||
// 取消
|
||||
function handleCancel() {
|
||||
// 跳转到列表页或关闭弹窗
|
||||
router.push('/repair/Questionnaire');
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.AddBuildingBox {
|
||||
padding: 15px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.AddBuildingBody {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
position: relative;
|
||||
|
||||
.formBody {
|
||||
.checkoutSideUsesbox {
|
||||
margin-left: 130px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 10px;
|
||||
li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 35px;
|
||||
font-size: 14px;
|
||||
padding: 0 10px;
|
||||
line-height: 35px;
|
||||
margin-bottom: 10px;
|
||||
background-color: #f3f9ff;
|
||||
border: 1px solid #8fc0f1;
|
||||
|
||||
@media (max-width: 2000px) {
|
||||
font-size: 12px;
|
||||
}
|
||||
@media (max-width: 1650px) {
|
||||
font-size: 10px;
|
||||
}
|
||||
@media (max-width: 1650px) {
|
||||
font-size: 8px;
|
||||
}
|
||||
.el-icon {
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
&.add {
|
||||
cursor: pointer;
|
||||
justify-content: center;
|
||||
color: #409eff;
|
||||
border: 1px dashed #409eff;
|
||||
background-color: transparent;
|
||||
&:hover {
|
||||
background-color: #40a0ff10;
|
||||
}
|
||||
span {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:deep(.el-form-item__content, .el-select, .el-input) {
|
||||
width: 350px !important;
|
||||
margin-right: 10px;
|
||||
.el-cascader {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.el-form-item {
|
||||
margin-bottom: 20px;
|
||||
align-items: center;
|
||||
}
|
||||
.el-button {
|
||||
width: 100px;
|
||||
height: 35px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user