fix:修改投票编辑

src/api/indexVote.js

@@ -60,15 +60,10 @@ export const createVote = (obj) => http.post('/vote/createVote', obj)
 export const deleteVoteMessage = (obj) => http.post('/vote/deleteVoteMessage', { params: obj })
 
 //删除题干信息接口
-export const deleteVoteStem = (obj) => http.post('/vote/deleteVoteStem', obj, {
+export const deleteVoteStem = (voteStemId) => http.post(`/vote/deleteVoteStem?voteStemId=${voteStemId}`)
-  headers: {
-    'token': '123',
-    'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
-  }
-})
 
 //删除题选项息接口
-export const deleteVoteStemOption = (obj) => http.post('/vote/deleteVoteStemOption', { params: obj })
+export const deleteVoteStemOption = (optionId) => http.post(`/vote/deleteVoteStemOption?optionId=${optionId}`)
 
 //修改投票信息接口
 export const editVote = (obj) => http.post('/vote/editVote', obj)

src/components/vote/CreateVote.vue

@@ -34,8 +34,10 @@
         </div>
         <!-- 创建投票侧弹窗 -->
       </div>
+
       <div v-for="(item, index) in allFormsData" :key="index">
-        <VoteQuestion :item="item" :optionId="optionId" @del="handleDel" />
+        <VoteQuestion v-model:info="information" :item="item" :optionId="optionId" @delOption="delOption"
+          @del="handleDel" @edits="edits" @addOption="addOption" />
       </div>
 
       <div class="footer">
@@ -105,6 +107,7 @@ export default {
       ballotId: "",
       ballotName: "",
       allFormsData: [],
+      allFormsData1: [],
 
     });
     // const router = useRouter();
@@ -139,6 +142,7 @@ export default {
         // let renderArr = [...res];
         // sortBy(renderArr, "orderNumber"); //序号
         state.allFormsData = parseData(res); //类型
+        state.allFormsData1 = parseData(res); //类型
 
         console.log(state.allFormsData);
       }
@@ -271,27 +275,93 @@ export default {
         ],
       };
       state.allFormsData.push(obj);
+      state.allFormsData1.push(obj);
     };
 
     const handleDel = ({ id }) => {
+      console.log('1234523432434234234', id, state.allFormsData)
+
       state.allFormsData.forEach((item, index) => {
         if (item.id === id) {
+          console.log('oooooo', item)
           state.allFormsData.splice(index, 1);
         }
       });
-      state.allFormsData.map((item, index) => {
+
-        item.id = index + 1;
+      // state.allFormsData.map((item, index) => {
-        return item;
+      //   item.id = index + 1;
-      });
+      //   return item;
+      // });
 
       // orderNumber: curItem.orderNumber,
     };
 
+    const delOption = (data) => {
+      console.log('datadatadatadatadata', data, state.allFormsData)
+      state.allFormsData.forEach((item, index) => {
+        if (item.voteStemId === data.value.voteStemId) {
+          state.allFormsData[index].singleList.forEach((ii, nn) => {
+            if (ii.id == data.value.id) {
+              console.log(1212121212, state.allFormsData[index].singleList[nn], nn)
+              state.allFormsData[index].singleList.splice(nn, 1)
+              console.log('12', state.allFormsData)
+            }
+          })
+
+        }
+      });
+
+      state.allFormsData1.forEach((item, index) => {
+        if (item.voteStemId === data.value.voteStemId) {
+          state.allFormsData1[index].singleList.forEach((ii, nn) => {
+            if (ii.id == data.value.id) {
+              console.log(1212121212, state.allFormsData1[index].singleList[nn], nn)
+              state.allFormsData1[index].singleList.splice(nn, 1)
+              console.log('33', state.allFormsData1)
+            }
+          })
+
+        }
+      });
+
+
+    }
+
+    const edits = (data) => {
+      console.log('我传递过来了吗---111', data, data.value.id, state.allFormsData1)
+
+      state.allFormsData1.forEach((item, index) => {
+        if (item.voteStemId === data.value.voteStemId) {
+          item.singleList.forEach((ii, nn) => {
+            if (ii.id === data.value.id) {
+              // ii.optionName = data.value.inputVal
+              state.allFormsData1[index].singleList[nn].inputVal = data.value.inputVal
+            }
+          })
+        }
+      });
+
+      console.log('123-456-789', state.allFormsData1)
+    }
+
+    // 增加选项
+    const addOption = (data) => {
+      console.log(data)
+      state.allFormsData1.forEach((item, index) => {
+        if (item.voteStemId === data.value.voteStemId) {
+          state.allFormsData1[index].singleList = data.value.singleList
+        }
+      });
+    }
+
     const handleSave = () => {
 
+
       let resultPost = {};
 
-      let filterData = parseItem(restData(state.allFormsData, "type"));
+      let filterData = parseItem(restData(state.allFormsData1, "type"));
+
+      console.log("filterData==111", filterData)
 
       if (!state.ballotName) {
         return message.warning("请输入投票名称");
@@ -305,7 +375,7 @@ export default {
       // checkVal(filterData);
       console.log(12121212);
       console.log(filterData);
-
+      console.log('111111222223333----0000', state.ballotId)
       if (state.ballotId) {
         resultPost = {
           ballotId: state.ballotId,
@@ -386,6 +456,9 @@ export default {
       handleDel,
       afterVisibleChange,
       closeDrawer,
+      edits,
+      delOption,
+      addOption
     };
   },
 };

src/components/vote/VoteQuestion.vue

@@ -10,38 +10,20 @@
     </div>
     <div class="name">
       <div class="namebox">
-        <img
+        <img class="nameimg" src="../../assets/images/basicinfo/asterisk.png" />
-          class="nameimg"
+        <div class="inname">题干{{ item.id }}</div>
-          src="../../assets/images/basicinfo/asterisk.png"
-        />
-        <div class="inname">题干{{item.id}}</div>
       </div>
       <div class="in">
-        <a-input
+        <a-input v-model:value="curItem.valueSingle" placeholder="请输入题干名称" show-count :maxlength="20"
-          v-model:value="curItem.valueSingle"
+          style="border-radius: 8px" />
-          placeholder="请输入题干名称"
-          show-count
-          :maxlength="20"
-          style="border-radius: 8px"
-        />
       </div>
     </div>
-    <VoteQuestionItem
+    <VoteQuestionItem v-model:info="info" v-for="(item, index) in curItem.singleList" :key="index" :item="item"
-      v-for="(item, index) in curItem.singleList"
+      @input="input" @src="imgSrc" @delImg="delImg" @del="del" @edit="edit" />
-      :key="index"
-      :item="item"
-      @input="input"
-      @src="imgSrc"
-      @delImg="delImg"
-      @del="del"
-    />
     <div class="name">
       <div class="in" style="margin-left: 85px; margin-bottom: 20px">
-        <a-button
+        <a-button type="primary" style="width: 100px;height: 40px;border-radius: 8px;background-color: #409eff;"
-          type="primary"
+          @click="handleSingleAdd">
-          style="width: 100px;height: 40px;border-radius: 8px;background-color: #409eff;"
-          @click="handleSingleAdd"
-        >
           添加选项
         </a-button>
       </div>
@@ -58,7 +40,7 @@ export default {
     VoteQuestionItem,
   },
   props: {
-    num:{
+    num: {
       type: Number,
       default: null,
     },
@@ -70,18 +52,18 @@ export default {
     },
 
   },
-  setup(props,{ emit }) {
+  setup(props, { emit }) {
 
 
 
     const curItem = ref(props.item);
     const handleTypesDel = () => {
-      emit("del", { id: curItem.value.id, curItem: curItem.value });
+
-      console.log("删除题干======",{ id: curItem.value.id, curItem: curItem.value });
+      console.log("删除题干======", { id: curItem.value.id, curItem: curItem.value });
-      api.deleteVoteStem({voteStemId:3})
+      api.deleteVoteStem(curItem.value.voteStemId)
         .then(() => {
           //  message.success('删除题干信息成功')
-          
+          emit("del", { id: curItem.value.id, curItem: curItem.value });
         })
 
     };
@@ -92,8 +74,10 @@ export default {
         inputVal: "",
         imgVal: "",
       });
+      emit("addOption", curItem);
     };
     const input = ({ id, val }) => {
+      console.log(id, val)
       curItem.value.singleList.forEach((item) => {
         if (item.id === id) {
           item.inputVal = val;
@@ -114,7 +98,13 @@ export default {
         }
       });
     };
-    const del = ({ id }) => {
+    const del = ({ id, data }) => {
+      console.log(data)
+      api.deleteVoteStemOption(data.value.optionId)
+        .then(() => {
+          //  message.success('删除题干信息成功')
+          emit("delOption", data);
+        })
       curItem.value.singleList.forEach((item, index) => {
         if (item.id === id) {
           curItem.value.singleList.splice(index, 1);
@@ -125,6 +115,11 @@ export default {
 
     };
 
+    const edit = (data) => {
+      // console.log('111111-223', data.value)
+      emit("edits", data)
+    }
+
     return {
       curItem,
       handleTypesDel,
@@ -133,6 +128,7 @@ export default {
       imgSrc,
       delImg,
       del,
+      edit
     };
   },
 };
@@ -142,10 +138,12 @@ export default {
   width: 100%;
   display: flex;
   flex-direction: column;
+
   .header {
     width: 100%;
     display: flex;
     justify-content: space-between;
+
     .title {
       color: #000000;
       font-size: 18px;
@@ -154,10 +152,12 @@ export default {
       padding-left: 37px;
       //font-weight: 500;
     }
+
     .goback {
       padding-right: 70px;
       //padding-top: 37px;
       position: relative;
+
       .return {
         display: inline-block;
         width: 42px;
@@ -166,6 +166,7 @@ export default {
         margin-right: 10px;
         background-image: url("../../assets/images/projectadd/return.png");
       }
+
       .returntext {
         display: inline-block;
         position: absolute;
@@ -175,16 +176,19 @@ export default {
       }
     }
   }
+
   .addtype {
     display: flex;
     border-bottom: 1px solid rgba(0, 0, 0, 0.1);
     margin-right: 20px;
     align-items: center;
     margin-left: 41px;
+
     .addtypen {
       color: #6f6f6f;
       font-size: 14px;
     }
+
     .types {
       cursor: pointer;
       width: 80px;
@@ -197,11 +201,13 @@ export default {
       align-items: center;
       margin: 20px 10px;
     }
+
     .typesCur {
       color: #fff;
       background: #409eff;
     }
   }
+
   .content {
     display: flex;
     flex-direction: column;
@@ -210,9 +216,11 @@ export default {
     min-width: 690px;
     margin-left: 38px;
     margin-top: 20px;
+
     .tagbox {
       display: flex;
       justify-content: right;
+
       .tagname {
         width: 90px;
         height: 32px;
@@ -226,6 +234,7 @@ export default {
         color: rgba(64, 158, 255, 1);
         font-size: 16px;
       }
+
       .deleteop {
         display: flex;
         justify-content: center;
@@ -237,6 +246,7 @@ export default {
         border: 1px solid #409eff;
         border-radius: 8px;
         cursor: pointer;
+
         .del_text {
           color: #409eff;
           font-size: 14px;
@@ -244,21 +254,25 @@ export default {
         }
       }
     }
+
     .scorebox {
       display: flex;
       align-items: center;
       margin-top: 20px;
       margin-left: 70px;
+
       .scoretext {
         font-size: 14px;
         color: #56a3f9;
       }
+
       .number {
         display: flex;
         border: 1px solid #d7e5fd;
         border-radius: 5px;
         margin: 0 10px;
         padding: 5px;
+
         .btn {
           width: 40px;
           height: 40px;
@@ -274,30 +288,36 @@ export default {
           line-height: 24px;
           cursor: pointer;
         }
+
         .curBtn {
           background: #56a3f9;
           color: #fff;
         }
       }
     }
+
     .picture {
       width: 100px;
       display: flex;
       flex-direction: column;
       margin-top: 20px;
       margin-left: 133px;
+
       .pictureimg {
         width: 100px;
         height: 100px;
       }
+
       .picturename {
         color: #6f6f6f;
         font-size: 14px;
       }
     }
+
     .options {
       display: flex;
     }
+
     .delete {
       cursor: pointer;
       margin-top: 32px;
@@ -306,15 +326,18 @@ export default {
       color: #4ea6ff;
       font-size: 14px;
     }
+
     .name2 {
       display: flex;
       align-items: flex-start;
     }
+
     .name {
       width: 60%;
       // background-color: lightcoral;
       display: flex;
       margin-top: 20px;
+
       //align-items: center;
       //height: 40px;
       // border: 1px solid black;
@@ -324,25 +347,30 @@ export default {
         align-items: center;
         justify-content: flex-end;
         flex-shrink: 0;
+
         .nameimg {
           width: 10px;
           height: 10px;
         }
       }
+
       .inname {
         color: #6f6f6f;
         font-size: 14px;
         margin-left: 7px;
         font-weight: 700;
       }
+
       .in {
         margin-left: 14px;
         flex: 1;
+
         .assess {
           display: flex;
           width: 226px;
           height: 40px;
           border: 1px solid #56a3f9;
+
           //margin-bottom: 20px;
           .assesstype {
             width: 50%;
@@ -352,6 +380,7 @@ export default {
             justify-content: center;
             align-items: center;
           }
+
           .assesswhole {
             width: 50%;
             background: rgba(86, 163, 249, 0.1);
@@ -361,6 +390,7 @@ export default {
             justify-content: center;
             align-items: center;
           }
+
           .ratio {
             position: absolute;
             right: 10px;
@@ -369,24 +399,28 @@ export default {
             font-size: 14px;
           }
         }
+
         .addimg {
           cursor: pointer;
           color: rgba(78, 166, 255, 1);
           font-size: 14px;
         }
+
         .text {
           color: rgba(109, 117, 132, 1);
           font-size: 14px;
           //line-height: 24px;
         }
-        .ant-radio-wrapper {
+
-        }
+        .ant-radio-wrapper {}
+
         .ant-input {
           border-radius: 5px;
           // height: 120%;
           width: 100%;
           height: 35px;
         }
+
         .ant-select-selector {
           border-radius: 5px;
           // height: 120%;
@@ -394,26 +428,32 @@ export default {
           height: 40px;
         }
       }
+
       .numberInp {
         width: 200px;
+
         .ant-input-number {
           width: 200px;
           height: 40px;
           border-radius: 8px;
         }
+
         // .ant-input-number-input-wrap {
         //   width: 200px;
         // }
       }
     }
   }
+
   .name2 {
     display: flex;
     align-items: flex-start;
   }
+
   .opinion {
     display: flex;
     margin-top: 30px;
+
     .namebox {
       width: 120px;
       display: flex;
@@ -421,27 +461,33 @@ export default {
       justify-content: flex-end;
       flex-shrink: 0;
     }
+
     .in {
       margin-left: 14px;
       width: 500px;
+
       .ant-input-textarea-show-count {
         position: relative;
         height: 110px;
       }
+
       .ant-input-textarea-show-count::after {
         position: absolute;
         right: 10px;
         bottom: 0px;
       }
+
       .ant-input {
         border-radius: 8px;
       }
     }
   }
+
   .footer {
     width: 100%;
     margin-top: 31px;
     margin-bottom: 14px;
+
     .btn {
       display: flex;
       margin-bottom: 20px;
@@ -452,6 +498,7 @@ export default {
 
   .uploadContent {
     display: block !important;
+
     .uploadBtn {
       margin-left: 120px !important;
     }

src/components/vote/VoteQuestionItem.vue

@@ -7,41 +7,27 @@
           <div class="inname">选项{{ item.id }}</div>
         </div>
         <div class="in">
-          <a-input
+          <a-input v-model:value="curItem.inputVal" show-count :maxlength="30" style="border-radius: 8px"
-            v-model:value="curItem.inputVal"
+            @change="handleInput" />
-            show-count
-            :maxlength="30"
-            style="border-radius: 8px"
-            @change="handleInput"
-          />
         </div>
       </div>
       <div class="delete" @click="handleDel">删除</div>
     </div>
     <div class="name uploadContent">
-      <a-upload
+      <a-upload v-show="!item.imgVal" class="in uploadBtn" :show-upload-list="false" :before-upload="beforeUpload">
-        v-show="!item.imgVal"
-        class="in uploadBtn"
-        :show-upload-list="false"
-        :before-upload="beforeUpload"
-      >
         <div class="addimg">+添加图片</div>
       </a-upload>
       <div v-show="item.imgVal" class="picture" style="position: relative">
         <img class="pictureimg" :src="item.imgVal" />
         <div class="picturename" v-show="hasImgName">{{ hasImgName }}</div>
-        <img
+        <img style="
-          style="
             cursor: pointer;
             width: 20px;
             height: 20px;
             position: absolute;
             right: 0;
             top: 0;
-          "
+          " src="../../assets/images/basicinfo/close.png" @click="handleCancel" />
-          src="../../assets/images/basicinfo/close.png"
-          @click="handleCancel"
-        />
       </div>
     </div>
   </div>
@@ -67,12 +53,14 @@ export default {
       hasImgName: "",
     });
 
-    const handleInput = () => {
+    const handleInput = (value) => {
-      emit("input", { id: curItem.value.id, val: curItem.value.inputVal });
+      console.log(value.target.value)
+      emit("edit", curItem)
+      emit("input", { id: curItem.value.id, val: value.target.value });
     };
     const handleDel = () => {
       handleCancel();
-      emit("del", { id: curItem.value.id, optionId: curItem.value.optionId });
+      emit("del", { id: curItem.value.id, optionId: curItem.value.optionId, data: curItem });
     };
     const handleCancel = () => {
       state.hasImgName = "";
@@ -124,10 +112,12 @@ export default {
   width: 100%;
   display: flex;
   flex-direction: column;
+
   .header {
     width: 100%;
     display: flex;
     justify-content: space-between;
+
     .title {
       color: #000000;
       font-size: 18px;
@@ -136,10 +126,12 @@ export default {
       padding-left: 37px;
       //font-weight: 500;
     }
+
     .goback {
       padding-right: 70px;
       //padding-top: 37px;
       position: relative;
+
       .return {
         display: inline-block;
         width: 42px;
@@ -148,6 +140,7 @@ export default {
         margin-right: 10px;
         background-image: url("../../assets/images/projectadd/return.png");
       }
+
       .returntext {
         display: inline-block;
         position: absolute;
@@ -157,16 +150,19 @@ export default {
       }
     }
   }
+
   .addtype {
     display: flex;
     border-bottom: 1px solid rgba(0, 0, 0, 0.1);
     margin-right: 20px;
     align-items: center;
     margin-left: 41px;
+
     .addtypen {
       color: #6f6f6f;
       font-size: 14px;
     }
+
     .types {
       cursor: pointer;
       width: 80px;
@@ -179,11 +175,13 @@ export default {
       align-items: center;
       margin: 20px 10px;
     }
+
     .typesCur {
       color: #fff;
       background: #409eff;
     }
   }
+
   .content {
     display: flex;
     flex-direction: column;
@@ -192,9 +190,11 @@ export default {
     min-width: 690px;
     margin-left: 38px;
     margin-top: 20px;
+
     .tagbox {
       display: flex;
       justify-content: space-between;
+
       .tagname {
         width: 90px;
         height: 32px;
@@ -208,6 +208,7 @@ export default {
         color: rgba(64, 158, 255, 1);
         font-size: 16px;
       }
+
       .deleteop {
         display: flex;
         justify-content: center;
@@ -219,6 +220,7 @@ export default {
         border: 1px solid #409eff;
         border-radius: 8px;
         cursor: pointer;
+
         .del_text {
           color: #409eff;
           font-size: 14px;
@@ -226,21 +228,25 @@ export default {
         }
       }
     }
+
     .scorebox {
       display: flex;
       align-items: center;
       margin-top: 20px;
       margin-left: 70px;
+
       .scoretext {
         font-size: 14px;
         color: #56a3f9;
       }
+
       .number {
         display: flex;
         border: 1px solid #d7e5fd;
         border-radius: 5px;
         margin: 0 10px;
         padding: 5px;
+
         .btn {
           width: 40px;
           height: 40px;
@@ -258,24 +264,29 @@ export default {
         }
       }
     }
+
     .picture {
       width: 100px;
       display: flex;
       flex-direction: column;
       margin-top: 20px;
       margin-left: 133px;
+
       .pictureimg {
         width: 100px;
         height: 100px;
       }
+
       .picturename {
         color: #6f6f6f;
         font-size: 14px;
       }
     }
+
     .options {
       display: flex;
     }
+
     .delete {
       cursor: pointer;
       margin-top: 32px;
@@ -284,15 +295,18 @@ export default {
       color: #4ea6ff;
       font-size: 14px;
     }
+
     .name2 {
       display: flex;
       align-items: flex-start;
     }
+
     .name {
       width: 60%;
       // background-color: lightcoral;
       display: flex;
       margin-top: 20px;
+
       //align-items: center;
       //height: 40px;
       // border: 1px solid black;
@@ -302,25 +316,30 @@ export default {
         align-items: center;
         justify-content: flex-end;
         flex-shrink: 0;
+
         .nameimg {
           width: 10px;
           height: 10px;
         }
       }
+
       .inname {
         color: #6f6f6f;
         font-size: 14px;
         margin-left: 7px;
         font-weight: 700;
       }
+
       .in {
         margin-left: 14px;
         flex: 1;
+
         .assess {
           display: flex;
           width: 226px;
           height: 40px;
           border: 1px solid #56a3f9;
+
           //margin-bottom: 20px;
           .assesstype {
             width: 50%;
@@ -330,6 +349,7 @@ export default {
             justify-content: center;
             align-items: center;
           }
+
           .assesswhole {
             width: 50%;
             background: rgba(86, 163, 249, 0.1);
@@ -339,6 +359,7 @@ export default {
             justify-content: center;
             align-items: center;
           }
+
           .ratio {
             position: absolute;
             right: 10px;
@@ -347,24 +368,28 @@ export default {
             font-size: 14px;
           }
         }
+
         .addimg {
           cursor: pointer;
           color: rgba(78, 166, 255, 1);
           font-size: 14px;
         }
+
         .text {
           color: rgba(109, 117, 132, 1);
           font-size: 14px;
           //line-height: 24px;
         }
-        .ant-radio-wrapper {
+
-        }
+        .ant-radio-wrapper {}
+
         .ant-input {
           border-radius: 5px;
           // height: 120%;
           width: 100%;
           height: 35px;
         }
+
         .ant-select-selector {
           border-radius: 5px;
           // height: 120%;
@@ -372,26 +397,32 @@ export default {
           height: 40px;
         }
       }
+
       .numberInp {
         width: 200px;
+
         .ant-input-number {
           width: 200px;
           height: 40px;
           border-radius: 8px;
         }
+
         // .ant-input-number-input-wrap {
         //   width: 200px;
         // }
       }
     }
   }
+
   .name2 {
     display: flex;
     align-items: flex-start;
   }
+
   .opinion {
     display: flex;
     margin-top: 30px;
+
     .namebox {
       width: 120px;
       display: flex;
@@ -399,27 +430,33 @@ export default {
       justify-content: flex-end;
       flex-shrink: 0;
     }
+
     .in {
       margin-left: 14px;
       width: 500px;
+
       .ant-input-textarea-show-count {
         position: relative;
         height: 110px;
       }
+
       .ant-input-textarea-show-count::after {
         position: absolute;
         right: 10px;
         bottom: 0px;
       }
+
       .ant-input {
         border-radius: 8px;
       }
     }
   }
+
   .footer {
     width: 100%;
     margin-top: 31px;
     margin-bottom: 14px;
+
     .btn {
       display: flex;
       margin-bottom: 20px;
@@ -430,6 +467,7 @@ export default {
 
   .uploadContent {
     display: block !important;
+
     .uploadBtn {
       margin-left: 120px !important;
     }