--fix 路径图整体修改

src/components/vote/CreateVote.vue

@@ -1,15 +1,17 @@
 <!-- 评估管理-创建评估页面 -->
 <template>
+  <div @click="openDrawer">
+    <slot></slot>
+  </div>
   <a-drawer
-      :visible="createVoteVisible"
+      :visible="visible"
       class="drawerStyle createvoteDrawer"
-      width="100%"
+      width="800"
       placement="right"
-      @after-visible-change="afterVisibleChange"
   >
     <div class="researchadd">
       <div class="header">
-        <div class="headerTitle">{{ ballotId ? "编辑投票题干" : "创建投票题干" }}</div>
+        <div class="headerTitle">{{ options.length ? "编辑投票题干" : "创建投票题干" }}</div>
         <img
             style="width: 29px; height: 29px; cursor: pointer"
             src="../../assets/images/basicinfo/close.png"
@@ -28,15 +30,12 @@
             <span>创建题干：</span>
           </div>
           <div class="btnbox">
-            <button class="xkbtn" @click="handleTypes">添加题干</button>
+            <button class="xkbtn" @click="handleAdd">添加题干</button>
           </div>
         </div>
       </div>
-      <div
-          v-for="(item, index) in allFormsData"
-          :key="index + new Date().getTime()"
-      >
-        <VoteQuestion :item="item" @del="handleDel"/>
+      <div v-for="(_, index) in formData.list" :key="index">
+        <VoteQuestion v-model:item="formData[index]" :index="index" @del="itemDel"/>
       </div>
 
       <div class="footer">
@@ -49,7 +48,7 @@
               border-radius: 8px;
               background-color: #4ea6ff;
             "
-              @click="handleSave"
+              @click="confirm"
           >
             保存
           </a-button>
@@ -71,219 +70,39 @@
     </div>
   </a-drawer>
 </template>
-<script>
-import {reactive, toRefs, toRef, watch} from "vue";
-import {message} from "ant-design-vue";
+<script setup>
+import {defineEmits, defineProps, ref} from "vue";
 import VoteQuestion from "./VoteQuestion.vue";
-import {sortBy, traverseArr} from "../../utils/utils";
-import * as api from "@/api/indexVote";
 
-export default {
-  name: "CreateVote",
-  components: {
-    VoteQuestion,
-  },
-  props: {
-    createVoteVisible: {
-      type: Boolean,
-      default: false,
-    },
-    voteId: {
-      type: Number,
-      default: null,
-    },
-  },
-  setup(props, ctx) {
-    const ballotIdWatch = toRef(props, "voteId");
-    const state = reactive({
-      voteId: "",
-      allFormsData: [],
-    });
-    watch(ballotIdWatch, (newValue) => {
-      if (!newValue) {
-        state.voteId = "";
-        state.allFormsData = [];
-      }
-    });
+defineProps({
+  options: []
+})
+const emit = defineEmits({})
+const formData = ref({list: []})
 
-    const afterVisibleChange = () => {
-      if (props.voteId) {
-        getInfoDate();
-      } else {
-        handleTypes();
-      }
-    };
-    const closeDrawer = () => {
-      handleAllCancel();
-      ctx.emit("update:createVoteVisible", false);
-      ctx.emit("update:voteId", state.voteId);
-    };
-    // 详情
-    const getInfoDate = async () => {
-      if (props.voteId) {
-        let res = await api.queryStemByStemId(props.voteId).then((res) => res.data.data);
-        state.voteId = res.id;
-        let renderArr = [...res.voteStemDtoList];
-        sortBy(renderArr, "orderNumber"); //序号
-        state.allFormsData = parseData(renderArr);
-      }
-    };
+const visible = ref(false)
 
-    // 转换成前端格式
-    const parseData = (arr) => {
-      const resultArr = [];
+function openDrawer() {
+  visible.value = true
+}
 
-      console.log("arr.voteStemVoList=====", arr);
-      arr.forEach((item) => {
-        let obj = {};
-        let restList = traverseArr(item.optionDetailList, {
-          inputVal: "optionName",
-          imgVal: "optionPictureAddress",
-          optionId: "optionId",
-          voteStemId: "voteStemId",
-          stem: "stem",
-        }).map((itm, idx) => {
-          itm.id = idx + 1;
-          return itm;
-        });
-
-        obj = {
-          valueSingle: item.voteStemName,
-          optionDetailList: restList,
-          orderNumber: item.orderNumber,
-          voteStemId: item.voteStemId,
-        };
-        resultArr.push(obj);
-      });
-      resultArr.map((itm, idx) => {
-        itm.id = idx + 1;
-        return itm;
-      });
-      return resultArr;
-    };
-
-    // 转换成后端格式
-    const restData = (arr) => {
-      const resultArr = [];
-      arr.forEach((item) => {
-        let obj = {};
-        console.log("item=======", item);
-        let restList = traverseArr(item.optionDetailList, {
-          optionName: "inputVal",
-          optionPictureAddress: "imgVal",
-          optionId: "optionId",
-          voteStemId: "voteStemId",
-          stem: "stem",
-        }).map((itm, idx) => {
-          itm.optionOrderNum = idx + 1;
-          return itm;
-        });
-        restList.forEach((item) => {
-          item.optionId = item.optionId ? item.optionId : "";
-        });
-
-        obj = {
-          voteStemName: item.valueSingle,
-          optionDetailList: restList,
-          orderNumber: item.orderNumber,
-          voteStemId: item.voteStemId,
-        };
-        resultArr.push(obj);
-        console.log("resultArr=======", resultArr);
-      });
-      resultArr.map((itm, idx) => {
-        itm.orderNumber = idx + 1;
-        return itm;
-      });
-      return resultArr;
-    };
-
-    const handleTypes = () => {
-      let obj = {
-        id: state.allFormsData.length + 1,
-        valueSingle: "",
-        optionDetailList: [
-          {
-            id: 1,
-            inputVal: "",
-            imgVal: "",
-          },
-          {
-            id: 2,
-            inputVal: "",
-            imgVal: "",
-          },
-        ],
-      };
-      state.allFormsData.push(obj);
-    };
-
-    const handleDel = ({id, curItem}) => {
-      if (state.allFormsData.length > 1) {
-        // 接口删除
-        if (curItem.voteStemId) {
-          api.deleteVoteStem(curItem.voteStemId).then((res) => {
-            if (res.data.code === 200) {
-              virtualDel(id);
-            }
-          });
-        } else {
-          virtualDel(id);
-        }
-      }
-    };
-    const virtualDel = (id) => {
-      // 前端删除
-      state.allFormsData.forEach((item, index) => {
-        if (item.id === id) {
-          state.allFormsData.splice(index, 1);
-        }
-      });
-      state.allFormsData.map((item, index) => {
-        item.id = index + 1;
-        return item;
-      });
-    };
-
-    const handleSave = () => {
-      let filterData = restData(state.allFormsData);
-      if (!checkVal(filterData)) {
-        return false;
-      }
-      api.createStemMessage({
-        id: state.voteId,
-        voteStemDtoList: filterData,
-      }).then((res) => {
-        message.success(state.voteId ? "修改成功" : "创建成功");
-        state.voteId = res.data.data.id;
-        closeDrawer();
-      });
-    };
-    const handleAllCancel = () => {
-      state.allFormsData = [];
-    };
-
-    const checkVal = (filterData) => {
-      for (let item of filterData) {
-        if (!item.voteStemName) {
-          message.error("题干为必填 请确认");
-          return false;
-        }
-      }
-      return true;
-    };
-
-    return {
-      ...toRefs(state),
-      handleTypes,
-      handleSave,
-      handleAllCancel,
-      handleDel,
-      afterVisibleChange,
-      closeDrawer,
-    };
-  },
+const closeDrawer = () => {
+  visible.value = false
 };
+
+async function confirm() {
+  emit('update:options', formData.value.list)
+  closeDrawer()
+}
+
+function handleAdd() {
+  formData.value.list.push({})
+}
+
+function itemDel(i) {
+  formData.value.list.splice(i, 1)
+}
+
 </script>
 <style lang="scss">
 .researchadd {