-- fix 投票bug

src/components/vote/AddVote.vue

@@ -54,7 +54,6 @@
               <a-range-picker
                   :show-time="{ format: 'HH:mm' }"
                   :disabled-date="disabledDate"
-                  :disabled-time="disabledRangeTime"
                   format="YYYY-MM-DD HH:mm"
                   style="width: 424px"
                   v-model:value="dateTime"
@@ -74,16 +73,14 @@
               <span>创建投票题干：</span>
             </div>
             <div class="btnbox">
-              <CreateVote v-model:options="formData.voteStemDtoList" :list="formData.voteStemDtoList">
+              <CreateVote v-model:options="formData.voteStemDtoList">
                 <button class="xkbtn">
                   {{ formData.voteStemDtoList.length ? "编辑" : "创建" }}投票题干
                 </button>
               </CreateVote>
               <div v-if="formData.voteStemDtoList.length">
                 <a-tag closable color="processing" @close="handleDel">
-                  <span style="font-size: 14px; line-height: 33px">
+                  <span style="font-size: 14px; line-height: 33px">删除投票题干</span>
-                    删除投票题干
-                  </span>
                 </a-tag>
               </div>
             </div>
@@ -168,14 +165,6 @@ const closeDrawer = () => {
   resetFields()
 };
 
-const range = (start, end) => {
-  const result = [];
-  for (let i = start; i < end; i++) {
-    result.push(i);
-  }
-  return result;
-};
-
 function timeChange(time, timeStr) {
   formData.value.voteStartTime = timeStr[0]
   formData.value.voteEndTime = timeStr[1]
@@ -185,13 +174,6 @@ const disabledDate = (current) => {
   return current && current < dayjs().startOf('day');
 };
 
-const disabledRangeTime = () => ({
-  disabledHours: () => range(0, 24).splice(4, 20),
-  disabledMinutes: () => range(30, 60),
-  disabledSeconds: () => [55, 56],
-});
-
-
 async function confirm() {
   await validate().catch(({errorFields}) => {
     message.warning(errorFields[0].errors.join());
@@ -223,133 +205,6 @@ function handleDel() {
 
 defineExpose({openDrawer})
 
-// 限制文件格式上传
-// const beforeUpload = (file) => {
-//   if (file.type.indexOf("sheet") == -1) {
-//     message.destroy();
-//     message.error("请上传正确的文件格式");
-//
-//     state.fileList = [];
-//     return false;
-//   }
-//
-//   const formData = new FormData();
-//   formData.append("uploadFile", file);
-//   baseVoteupload(formData).then((res) => {
-//     if (res.data.code === 200) {
-//       state.basevote = res.data.data;
-//     }
-//   });
-//   return false;
-// };
-//
-// //删除题干信息接口
-// const dleVoteStem = () => {
-//   api.deleteVoteStem({voteStemId: state.voteId}).then(() => {
-//     message.success("删除题干信息成功");
-//   });
-// };
-//
-// //根据投票id获取投票信息
-// const queryVoteInfo = () => {
-//   api.queryVoteDetailById(props.EditVoteId)
-//       .then((res) => {
-//         state.inputV1 = res.data.data.voteName;
-//         state.textV1 = res.data.data.voteExplain;
-//         state.baseVote = res.data.data.baseVote;
-//         state.ascriptionId = res.data.data.ascriptionId;
-//         state.voteId = res.data.data.id;
-//         state.time = [
-//           dayjs(res.data.data.voteStartTime, "YYYY-MM-DD HH:mm"),
-//           dayjs(res.data.data.voteEndTime, "YYYY-MM-DD HH:mm"),
-//         ];
-//       })
-// };
-// const updateToTask = (res) => {
-//   console.log("props.isLevel=====", props.isLevel);
-//   if (props.isLevel == 1) {
-//     if (!props.isactive) {
-//       message.destroy();
-//       return message.warning("请先选中关卡");
-//     }
-//     RouterEditTask({
-//       chapterId: props.isactive,
-//       courseId: res.data.data.id,
-//       name: res.data.data.voteName,
-//       routerId: props.routerId,
-//       routerTaskId: props.routerTaskId || 0,
-//       type: 12,
-//       id: props.taskIdDraft
-//     }).then(() => {
-//       ctx.emit("changeData", false);
-//       state.addLoading = false;
-//     })
-//   } else if (props.isLevel == 2) {
-//     apiTask.addTask({
-//       courseId: res.data.data.id,
-//       name: res.data.data.voteName,
-//       projectId: props.projectId,
-//       projectTaskId: props.projectTaskId || 0,
-//       stageId: props.chooseStageId || 0,
-//       type: 12,
-//       id: props.taskIdDraft
-//     })
-//         .then(() => {
-//           ctx.emit("changeData", false);
-//         })
-//   } else if (props.isLevel == 3) {
-//     addTempTask({
-//       courseId: res.data.data.id,
-//       name: res.data.data.voteName,
-//       projectTemplateId: props.projectTemplateId,
-//       projectTaskId: props.projectTaskId || 0,
-//       stageId: props.chooseStageId || 0,
-//       type: 12,
-//       id: props.taskIdDraft
-//     })
-//         .then(() => {
-//           ctx.emit("changeData", false);
-//           //message.success(`${props.edit ? "编辑" : "新增"}阶段任务成功`);
-//         })
-//   }
-// };
-// //修改投票信息接口
-// const updateVoteInfo = () => {
-//
-//   if (state.time) {
-//     state.startTime = dayjs(state.time[0]).format("YYYY-MM-DD HH:mm:ss");
-//     state.endTime = dayjs(state.time[1]).format("YYYY-MM-DD HH:mm:ss");
-//   }
-//   let obj = {
-//     voteName: state.inputV1,
-//     voteStartTime: dayjs(state.time[0]).format("YYYY-MM-DD HH:mm:ss"),
-//     voteEndTime: dayjs(state.time[1]).format("YYYY-MM-DD HH:mm:ss"),
-//     id: state.voteId,
-//     voteExplain: state.textV1,
-//   };
-//   api.editVote(obj).then(async (res) => {
-//     await updateToTask(res);
-//     closeDrawer();
-//     message.destroy();
-//     message.success(props.edit ? "修改投票信息成功" : "添加投票信息成功");
-//   })
-// };
-// const queryStem = () => {
-//   state.addStemVisible = true;
-// };
-// const closeStem = () => {
-//   state.addStemVisible = false;
-// };
-// const handlelog = (e) => {
-//   state.ballotId = null;
-//   console.log(e);
-// };
-//
-// function downloadTemplate() {
-//   window.open("/manageApi/投票基础数据模版.xlsx");
-// }
-
-
 </script>
 <style lang="scss">
 .ConfirmModal {

src/components/vote/CreateVote.vue

@@ -34,37 +34,37 @@
           </div>
         </div>
       </div>
-      <div v-for="(_, index) in formData.list" :key="index">
+      <div v-for="(item, index) in formData" :key="index+Math.random()">
-        <VoteQuestion v-model:item="formData[index]" :index="index" @del="itemDel"/>
+        <VoteQuestion v-if="!item.deleted" :item="item" :index="index" @del="itemDel"/>
       </div>
 
       <div class="footer">
         <div class="btn">
           <a-button
               type="primary"
+              ghost
               style="
               width: 100px;
               height: 40px;
               border-radius: 8px;
+            "
+              @click="closeDrawer"
+          >
+            取消
+          </a-button>
+          <a-button
+              type="primary"
+              style="
+              margin-left: 14px;
+              width: 100px;
+              height: 40px;
+              border-radius: 8px;
               background-color: #4ea6ff;
             "
               @click="confirm"
           >
             保存
           </a-button>
-          <a-button
-              type="primary"
-              ghost
-              style="
-              width: 100px;
-              height: 40px;
-              margin-left: 14px;
-              border-radius: 8px;
-            "
-              @click="closeDrawer"
-          >
-            取消
-          </a-button>
         </div>
       </div>
     </div>
@@ -73,64 +73,58 @@
 <script setup>
 import {defineEmits, defineProps, ref, watch} from "vue";
 import VoteQuestion from "./VoteQuestion.vue";
+import {message} from "ant-design-vue";
 
-const prop = defineProps({
+const props = defineProps({
-  options: [],
+  options: []
-  list: []
 })
-const emit = defineEmits({})
-const formData = ref({list: [{}]})
-const initData = ref({list: [{}]})
 
-console.log(prop.options.length);
+const emit = defineEmits({})
+const formData = ref(props.options && props.options.length ? [...props.options] : [{
+  voteStemName: '',
+  optionDetailList: []
+}])
 
 const visible = ref(false)
 
+watch(() => props.options.length, () => {
+  formData.value = props.options && props.options.length ? [...props.options] : [{
+    voteStemName: '',
+    optionDetailList: []
+  }]
+})
+
 function openDrawer() {
-  
-  if (prop.options.length > 0) {
- 
-    for(let i in initData.value) {
-      console.log(formData.value[i])
-      if (initData.value[i].valueSingle != formData.value[i].valueSingle) {
-        console.log('不等于')
-        formData.value[i].valueSingle = initData.value[i].valueSingle
-      }
-    }
-
-  }else {
-    formData.value.list = []
-    setTimeout(() =>{
-      formData.value.list = [{}]
-    }, 100)
-  }
   visible.value = true
 }
 
-watch(formData.value, () => {
-  console.log('111',formData.value)
-})
-
 const closeDrawer = () => {
-  console.log('formData',formData.value)
-  // formData.value = JSON.parse(JSON.stringify(initData.value));
   visible.value = false
+  formData.value = props.options && props.options.length ? [...props.options] : [{
+    voteStemName: '',
+    optionDetailList: []
+  }]
 };
 
 async function confirm() {
-  console.log('confirm');
+  console.log(formData.value)
-  initData.value = JSON.parse(JSON.stringify(formData.value));
+  if (formData.value.some(t => !t.voteStemName && !t.deleted)) {
-  emit('update:options', formData.value.list)
+    message.warning('请输入题干名称')
-  // closeDrawer()
+    return
+  }
   visible.value = false
+  emit('update:options', formData.value)
 }
 
 function handleAdd() {
-  formData.value.list.push({})
+  formData.value.push({
+    voteStemName: '',
+    optionDetailList: []
+  })
 }
 
 function itemDel(i) {
-  formData.value.list.splice(i, 1)
+  formData.value[i].deleted = true
 }
 
 </script>

src/components/vote/VoteQuestion.vue

@@ -15,7 +15,7 @@
       </div>
       <div class="in">
         <a-input
-            v-model:value="formData.valueSingle"
+            v-model:value="formData.voteStemName"
             placeholder="请输入题干名称"
             show-count
             :maxlength="20"
@@ -23,13 +23,9 @@
         />
       </div>
     </div>
-    <VoteQuestionItem
+    <div v-for="(item, index) in formData.optionDetailList" :key="index+Math.random()">
-        :key="index"
+      <VoteQuestionItem v-if="!item.deleted" :item="item" :index="index" @del="delItem"/>
-        v-for="(_, index) in formData.optionDetailList"
+    </div>
-        v-model:item="formData.optionDetailList[index]"
-        :index="index"
-        @del="delItem"
-    />
     <div class="name">
       <div class="in" style="margin-left: 85px; margin-bottom: 20px">
         <a-button
@@ -57,13 +53,12 @@ const props = defineProps({
   item: {}
 })
 
-const emit = defineEmits({})
+const emit = defineEmits(['del'])
 
-const formData = ref({optionDetailList: []})
+const formData = ref(props.item)
 
-watch(formData.value, () => {
+watch(props, () => {
-  console.log(formData.value)
+  formData.value = props.item
-  emit('update:item', formData.value)
 })
 
 function handleSingleAdd() {
@@ -71,61 +66,13 @@ function handleSingleAdd() {
 }
 
 function delItem(i) {
-  formData.value.optionDetailList.splice(i, 1)
+  formData.value.optionDetailList[i].deleted = true
 }
 
 function handleDel() {
   emit("del", props.index);
 }
 
-// const handleTypesDel = () => {
-//   emit("del", {id: curItem.value.id, curItem: curItem.value});
-// };
-//
-// const handleSingleAdd = () => {
-//   curItem.value.optionDetailList.push({
-//     id: curItem.value.optionDetailList.length + 1,
-//     inputVal: "",
-//     imgVal: "",
-//   });
-// };
-// const imgSrc = ({id, src}) => {
-//   curItem.value.optionDetailList.forEach((item) => {
-//     if (item.id === id) {
-//       item.imgVal = src;
-//     }
-//   });
-// };
-// const delImg = ({id}) => {
-//   curItem.value.optionDetailList.forEach((item) => {
-//     if (item.id === id) {
-//       item.imgVal = "";
-//     }
-//   });
-// };
-// const del = ({id, optionId}) => {
-//   if (optionId) {
-//     api.deleteVoteStemOption(optionId).then((res) => {
-//       if (res.data.code === 200) {
-//         virtualDel(id);
-//       }
-//     });
-//   } else {
-//     virtualDel(id);
-//   }
-// };
-// const virtualDel = (id) => {
-//   // 前端删除
-//   curItem.value.optionDetailList.forEach((item, index) => {
-//     if (item.id === id) {
-//       curItem.value.optionDetailList.splice(index, 1);
-//     }
-//   });
-//   curItem.value.optionDetailList.map((item, index) => {
-//     item.id = index + 1;
-//   });
-// };
-
 </script>
 <style lang="scss">
 .researchadd {

src/components/vote/VoteQuestionItem.vue

@@ -8,7 +8,7 @@
         </div>
         <div class="in">
           <a-input
-              v-model:value="formData.name"
+              v-model:value="formData.optionName"
               show-count
               :maxlength="30"
               style="border-radius: 8px"
@@ -22,12 +22,11 @@
           v-show="!formData.imgVal"
           class="in uploadBtn"
           :show-upload-list="false"
-          :before-upload="beforeUpload"
       >
         <div class="addimg">+添加图片{{ index }}</div>
       </a-upload>
-      <div v-show="formData.imgVal" class="picture" style="position: relative">
+      <div v-show="formData.optionPictureAddress" class="picture" style="position: relative">
-        <img class="pictureimg" :src="formData.imgVal"/>
+        <img class="pictureimg" :src="formData.optionPictureAddress"/>
         <div class="picturename" v-show="hasImgName">{{ hasImgName }}</div>
         <img
             style="
@@ -46,19 +45,15 @@
   </div>
 </template>
 <script setup>
-import {defineEmits, defineProps, ref, watch} from "vue";
+import {defineEmits, defineProps, ref} from "vue";
 
 const props = defineProps({
   item: {},
   index: Number
 })
-const emit = defineEmits({})
+const emit = defineEmits(['del'])
 
-const formData = ref({})
+const formData = ref(props.item)
-
-watch(formData.value, () => {
-  emit('update:item', formData.value)
-})
 
 function handleDel() {
   emit('del', props.index)