|
|
@@ -95,6 +95,7 @@
|
|
|
class="submit"
|
|
|
size="large"
|
|
|
type="primary"
|
|
|
+ :disabled="isLockSubmit"
|
|
|
@click="submit"
|
|
|
>
|
|
|
提交
|
|
|
@@ -109,19 +110,21 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { watchEffect, ref, onMounted, computed } from "vue";
|
|
|
+import { watch, watchEffect, ref, computed } from "vue";
|
|
|
import { useMessage } from "naive-ui";
|
|
|
import subHeader from "../components/subHeader";
|
|
|
import sideMenu from "../components/sideMenu";
|
|
|
import heroSubTitle from "../components/heroSubTitle";
|
|
|
import { useSurveyStore } from "../store/survey";
|
|
|
import { useRouter } from "vue-router";
|
|
|
-
|
|
|
+import { isDefined } from "@vueuse/core";
|
|
|
const router = useRouter();
|
|
|
const surveyStore = useSurveyStore();
|
|
|
const title = ref("问卷调查");
|
|
|
const message = useMessage();
|
|
|
const details = computed(() => surveyStore.details);
|
|
|
+const isLockSubmit = ref(true);
|
|
|
+const isInit = ref(false);
|
|
|
|
|
|
const props = defineProps({
|
|
|
id: {
|
|
|
@@ -130,27 +133,78 @@ const props = defineProps({
|
|
|
required: true,
|
|
|
},
|
|
|
});
|
|
|
+
|
|
|
watchEffect(() => {
|
|
|
document.title = title.value;
|
|
|
- if (props.id) {
|
|
|
+ if (props.id && !isInit.value) {
|
|
|
surveyStore.getDetail(props.id);
|
|
|
+ isInit.value = true;
|
|
|
}
|
|
|
});
|
|
|
|
|
|
+watch(
|
|
|
+ details,
|
|
|
+ (val) => {
|
|
|
+ const handleAnswerIsReady = Array.from(val).filter((item) => {
|
|
|
+ if (item.type === 1) {
|
|
|
+ return isDefined(item.value) ? true : false;
|
|
|
+ } else {
|
|
|
+ return isDefined(item.value)
|
|
|
+ ? Array.from(item.value).length > 0
|
|
|
+ ? true
|
|
|
+ : false
|
|
|
+ : false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ isLockSubmit.value =
|
|
|
+ handleAnswerIsReady.length === val.length ? false : true;
|
|
|
+ },
|
|
|
+ {
|
|
|
+ deep: true,
|
|
|
+ }
|
|
|
+);
|
|
|
+
|
|
|
const submit = async () => {
|
|
|
- const lastAnswers = details.value.map((detail) => {
|
|
|
+ let answers = [];
|
|
|
+
|
|
|
+ Array.from(unref(details)).forEach((detail) => {
|
|
|
const mapper = {};
|
|
|
- mapper["otherDesc"] = detail.value;
|
|
|
+ // console.log("mapper", detail, mapper);
|
|
|
mapper["questionId"] = detail.id;
|
|
|
mapper["questionnaireId"] = detail.questionnaireId;
|
|
|
mapper["type"] = detail.type;
|
|
|
- return mapper;
|
|
|
+ if (detail.type === 1) {
|
|
|
+ if (detail.value === "diy") {
|
|
|
+ mapper["otherDesc"] = detail[`custom-${detail.id}`];
|
|
|
+ mapper["type"] = 0;
|
|
|
+ } else {
|
|
|
+ mapper["otherDesc"] = "";
|
|
|
+ mapper["type"] = detail.value;
|
|
|
+ }
|
|
|
+ answers.push(mapper);
|
|
|
+ }
|
|
|
+ if (detail.type === 2) {
|
|
|
+ const muliAnswer = Array.from(detail.value).map((muli) => {
|
|
|
+ const subMapper = {};
|
|
|
+ subMapper["questionId"] = detail.id;
|
|
|
+ subMapper["questionnaireId"] = detail.questionnaireId;
|
|
|
+ if (muli === "diy") {
|
|
|
+ subMapper["otherDesc"] = detail[`custom-${detail.id}`];
|
|
|
+ subMapper["type"] = 0;
|
|
|
+ } else {
|
|
|
+ subMapper["otherDesc"] = "";
|
|
|
+ subMapper["type"] = muli;
|
|
|
+ }
|
|
|
+ return subMapper;
|
|
|
+ });
|
|
|
+ answers = answers.concat(muliAnswer);
|
|
|
+ }
|
|
|
});
|
|
|
- console.log("lastAnswers", lastAnswers);
|
|
|
+ console.log("last-answers", answers);
|
|
|
message.success("提交成功!");
|
|
|
// router.go(-1);
|
|
|
try {
|
|
|
- await surveyStore.sendAnswer(lastAnswers);
|
|
|
+ await surveyStore.sendAnswer(answers);
|
|
|
} catch (error) {
|
|
|
message.warning("提交服务器失败!");
|
|
|
}
|
|
|
@@ -209,6 +263,7 @@ const submit = async () => {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
+ margin-top: 1.875rem;
|
|
|
:deep(.n-button) {
|
|
|
font-size: 1.25rem;
|
|
|
padding: 1.5625rem 3.125rem;
|
gemercheung