feat:修改投票

2025-12-23 01:36:47 +08:00 · 2023-02-24 13:34:57 +08:00
parent 117f9b83c0
commit 2bd7282abe
2 changed files with 107 additions and 79 deletions
--- a/src/components/vote/CreateVote.vue
+++ b/src/components/vote/CreateVote.vue
@@ -4,18 +4,20 @@
    <slot></slot>
  </div>
  <a-drawer
-      :visible="visible"
-      class="drawerStyle createvoteDrawer"
-      width="800"
-      placement="right"
+    :visible="visible"
+    class="drawerStyle createvoteDrawer"
+    width="800"
+    placement="right"
  >
    <div class="researchadd">
      <div class="header">
-        <div class="headerTitle">{{ options.length ? "编辑投票题干" : "创建投票题干" }}</div>
+        <div class="headerTitle">
+          {{ options.length ? "编辑投票题干" : "创建投票题干" }}
+        </div>
        <img
-            style="width: 29px; height: 29px; cursor: pointer"
-            src="../../assets/images/basicinfo/close.png"
-            @click="closeDrawer"
+          style="width: 29px; height: 29px; cursor: pointer"
+          src="../../assets/images/basicinfo/close.png"
+          @click="closeDrawer"
        />
      </div>
      <div class="main_left">
@@ -23,8 +25,8 @@
          <div class="signbox">
            <div class="sign">
              <img
-                  src="@/assets/images/coursewareManage/asterisk.png"
-                  alt="asterisk"
+                src="@/assets/images/coursewareManage/asterisk.png"
+                alt="asterisk"
              />
            </div>
            <span>创建题干：</span>
@@ -34,34 +36,35 @@
          </div>
        </div>
      </div>
-      <div v-for="(item, index) in formData" :key="index+Math.random()">
-        <VoteQuestion v-if="!item.deleted" :item="item" :index="index" @del="itemDel"/>
+      <div v-for="(item, index) in formData" :key="index + Math.random()">
+        <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"
+            type="primary"
+            ghost
+            style="width: 100px; height: 40px; border-radius: 8px"
+            @click="closeDrawer"
          >
            取消
          </a-button>
          <a-button
-              type="primary"
-              style="
+            type="primary"
+            style="
              margin-left: 14px;
              width: 100px;
              height: 40px;
              border-radius: 8px;
              background-color: #4ea6ff;
            "
-              @click="confirm"
+            @click="confirm"
          >
            保存
          </a-button>
@@ -71,62 +74,80 @@
  </a-drawer>
 </template>
 <script setup>
-import {defineEmits, defineProps, ref, watch} from "vue";
+import { defineEmits, defineProps, ref, watch } from "vue";
 import VoteQuestion from "./VoteQuestion.vue";
-import {message} from "ant-design-vue";
+import { message } from "ant-design-vue";

 const props = defineProps({
-  options: []
-})
+  options: [],
+});

-const emit = defineEmits({})
-const formData = ref(props.options && props.options.length ? [...props.options] : [{
-  voteStemName: '',
-  optionDetailList: []
-}])
+const emit = defineEmits({});
+const formData = ref(
+  props.options && props.options.length
+    ? [...props.options]
+    : [
+        {
+          voteStemName: "",
+          optionDetailList: [],
+        },
+      ]
+);

-const visible = ref(false)
+const visible = ref(false);

-watch(() => props.options.length, () => {
-  formData.value = props.options && props.options.length ? [...props.options] : [{
-    voteStemName: '',
-    optionDetailList: []
-  }]
-})
+watch(
+  () => props.options.length,
+  () => {
+    formData.value =
+      props.options && props.options.length
+        ? [...props.options]
+        : [
+            {
+              voteStemName: "",
+              optionDetailList: [],
+            },
+          ];
+  }
+);

 function openDrawer() {
-  visible.value = true
+  visible.value = true;
 }

 const closeDrawer = () => {
-  visible.value = false
-  formData.value = props.options && props.options.length ? [...props.options] : [{
-    voteStemName: '',
-    optionDetailList: []
-  }]
+  visible.value = false;
+  formData.value =
+    props.options && props.options.length
+      ? [...props.options]
+      : [
+          {
+            voteStemName: "",
+            optionDetailList: [],
+          },
+        ];
 };

 async function confirm() {
-  console.log(formData.value)
-  if (formData.value.some(t => !t.voteStemName && !t.deleted)) {
-    message.warning('请输入题干名称')
-    return
+  console.log(formData.value);
+  if (formData.value.some((t) => !t.voteStemName && !t.deleted)) {
+    message.warning("请输入题干名称");
+    return;
  }
-  visible.value = false
-  emit('update:options', formData.value)
+  visible.value = false;
+  emit("update:options", formData.value);
 }

 function handleAdd() {
  formData.value.push({
-    voteStemName: '',
-    optionDetailList: []
-  })
+    voteStemName: "",
+    optionDetailList: [],
+  });
 }

 function itemDel(i) {
-  formData.value[i].deleted = true
+  formData.value[i].deleted = true;
 }
-
 </script>
 <style lang="scss">
 .researchadd {
--- a/src/components/vote/VoteQuestion.vue
+++ b/src/components/vote/VoteQuestion.vue
@@ -4,39 +4,47 @@
  <div class="content">
    <div class="tagbox">
      <div class="deleteop" @click="handleDel">
-        <div><img src="../../assets/images/projectadd/delete.png"/></div>
-        <div class="del_text">删除选项</div>
+        <div><img src="../../assets/images/projectadd/delete.png" /></div>
+        <div class="del_text">删除题干</div>
      </div>
    </div>
    <div class="name">
      <div class="namebox">
-        <img class="nameimg" src="../../assets/images/basicinfo/asterisk.png"/>
+        <img class="nameimg" src="../../assets/images/basicinfo/asterisk.png" />
        <div class="inname">题干</div>
      </div>
      <div class="in">
        <a-input
-            v-model:value="formData.voteStemName"
-            placeholder="请输入题干名称"
-            show-count
-            :maxlength="20"
-            style="border-radius: 8px"
+          v-model:value="formData.voteStemName"
+          placeholder="请输入题干名称"
+          show-count
+          :maxlength="20"
+          style="border-radius: 8px"
        />
      </div>
    </div>
-    <div v-for="(item, index) in formData.optionDetailList" :key="index+Math.random()">
-      <VoteQuestionItem v-if="!item.deleted" :item="item" :index="index" @del="delItem"/>
+    <div
+      v-for="(item, index) in formData.optionDetailList"
+      :key="index + Math.random()"
+    >
+      <VoteQuestionItem
+        v-if="!item.deleted"
+        :item="item"
+        :index="index"
+        @del="delItem"
+      />
    </div>
    <div class="name">
      <div class="in" style="margin-left: 85px; margin-bottom: 20px">
        <a-button
-            type="primary"
-            style="
+          type="primary"
+          style="
            width: 100px;
            height: 40px;
            border-radius: 8px;
            background-color: #4ea6ff;
          "
-            @click="handleSingleAdd"
+          @click="handleSingleAdd"
        >
          添加选项
        </a-button>
@@ -45,34 +53,33 @@
  </div>
 </template>
 <script setup>
-import {defineEmits, defineProps, ref, watch} from "vue";
+import { defineEmits, defineProps, ref, watch } from "vue";
 import VoteQuestionItem from "./VoteQuestionItem.vue";

 const props = defineProps({
  index: Number,
-  item: {}
-})
+  item: {},
+});

-const emit = defineEmits(['del'])
+const emit = defineEmits(["del"]);

-const formData = ref(props.item)
+const formData = ref(props.item);

 watch(props, () => {
-  formData.value = props.item
-})
+  formData.value = props.item;
+});

 function handleSingleAdd() {
-  formData.value.optionDetailList.push({})
+  formData.value.optionDetailList.push({});
 }

 function delItem(i) {
-  formData.value.optionDetailList[i].deleted = true
+  formData.value.optionDetailList[i].deleted = true;
 }

 function handleDel() {
  emit("del", props.index);
 }
-
 </script>
 <style lang="scss">
 .researchadd {