fe-manage/src/components/growthpath/CreateVote.vue

<!-- 评估管理-创建评估页面 -->
<template>
  <div class="researchadd growth-create-vote">
    <div class="main_left">
      <div class="main_item">
        <div class="signbox">
          <div class="sign">
            <img
              src="@/assets/images/coursewareManage/asterisk.png"
              alt="asterisk"
            />
          </div>
          <span>创建题干：</span>
        </div>
        <div class="btnbox">
          <button class="xkbtn" @click="handleAdd">添加题干</button>
        </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>

    <div class="footer">
      <div class="btn">
        <a-button
          type="primary"
          ghost
          style="
            width: 100px;
            height: 40px;
            border-radius: 8px;
            background-color: #4ea6ff;
            color: #fff;
          "
          @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>
      </div>
    </div>
  </div>
</template>
<script setup>
import { defineEmits, defineProps, ref, watch } from "vue";
import VoteQuestion from "../vote/VoteQuestion.vue";
import { message } from "ant-design-vue";

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

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

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

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

  emit("close");
};

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

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

function itemDel(i) {
  formData.value[i].deleted = true;
}
</script>
<style lang="scss">
.growth-create-vote > .ant-drawer-content-wrapper {
  min-width: 800px !important;
  width: 800px !important;
}
.growth-create-vote {
  .main_left {
    margin-left: 50px;
    padding-right: 30px;
    flex: 1;
    border-right: 1px solid #e8e8e8;

    .main_item {
      display: flex;
      align-items: center;
      margin: 32px 0 10px 0;

      .signbox {
        width: 120px;
        display: flex;
        justify-content: end;
        align-items: center;

        .sign {
          margin-right: 5px;
        }
      }

      .btnbox {
        display: flex;
        flex: 1;
        align-items: center;

        .xkbtn {
          cursor: pointer;
          width: 130px;
          height: 40px;
          background: #4ea6ff;
          border-radius: 8px;
          border: 0;
          color: #fff;
          margin: 0px;
        }
      }
    }
  }
}
</style>