fe-manage/src/components/drawers/AddInvist.vue

<template>
  <div @click="openDrawer">
    <slot></slot>
  </div>
  <a-drawer :visible="visible" class="drawerStyle addinvistDrawer" width="70%" title="添加评估" placement="right">
    <div class="drawerMain">
      <div class="header">
        <div v-if="taskIndex>=0" class="headerTitle">编辑评估</div>
        <div v-else class="headerTitle">添加评估</div>
        <img style="width: 29px; height: 29px; cursor: pointer" src="../../assets/images/basicinfo/close.png"
             @click="closeDrawer"/>
      </div>
      <div class="contentMain">
        <div class="main">
          <div class="main_left">
            <AssessmentAll v-model:id="formData.assessmentId" v-model:name="formData.assessmentName"/>
          </div>
        </div>
      </div>
      <div class="main_btns">
        <button class="btn1" @click="closeDrawer">取消</button>
        <button class="btn2" @click="confirm">确定</button>
      </div>
    </div>
  </a-drawer>
</template>
<script setup>
import {defineEmits, defineProps, ref} from "vue";
import {Form, message} from "ant-design-vue";
import AssessmentAll from "@/components/drawers/AssessmentAll.vue";

const props = defineProps({
  type: Number,
  taskList: []
})
const visible = ref(false)
const formData = ref({
  assessmentId: '',
  assessmentName: '',
})
const emit = defineEmits({})
const taskIndex = ref(-1);
const rulesRef = ref({
  assessmentId: [
    {
      required: true,
      message: '请选择评估',
    },
  ],
  assessmentName: [
    {
      required: true,
      message: '请选择评估',
    },
  ],
});

const {resetFields, validate} = Form.useForm(formData, rulesRef);

const closeDrawer = () => {
  visible.value = false
  taskIndex.value = -1
  resetFields()
};

async function confirm() {
  await validate().catch(({errorFields}) => {
    message.warning(errorFields[0].errors.join());
    throw Error("数据校验不通过")
  });
  if (taskIndex.value === -1) {
    const list = props.taskList
    list.push({
      name: formData.value.assessmentName,
      type: props.type,
      courseId: formData.value.assessmentId,
      info: {...formData.value}
    })
  } else {
    const data = props.taskList[taskIndex.value]
    data.name = formData.value.assessmentName
    data.courseId = formData.value.assessmentId
    data.info = {...formData.value}
  }
  emit('update:taskList', [...props.taskList])
  closeDrawer()
}

function openDrawer(i, row) {
  row && (formData.value = {assessmentId: row.info.id, assessmentName: row.info.assessmentName});
  (i >= 0) && (taskIndex.value = i);
  visible.value = true
}

defineExpose({openDrawer})
</script>
<style lang="scss">
.ant-table-striped :deep(.table-striped) td {
  background-color: #fafafa !important;
}

.addinvistDrawer {
  .drawerMain {
    .header {
      height: 73px;
      border-bottom: 1px solid #e8e8e8;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .headerTitle {
        font-size: 18px;
        font-weight: 600;
        color: #333333;
        line-height: 25px;
        margin-left: 24px;
      }
    }

    .contentMain {
      .main {
        width: 100%;

        .main_left {
          padding-right: 30px;
          margin-top: 32px;

          .main_item {
            display: flex;
            align-items: center;

            .fi_input {
              margin-right: 20px;
            }

            .btns {
              margin-right: 20px;
              padding: 0px 26px 0px 26px;
              height: 38px;
              background: #4ea6ff;
              border-radius: 8px;
              //border: 1px solid rgba(64, 158, 255, 1);
              display: flex;
              align-items: center;
              justify-content: center;
              margin-right: 14px;
              flex-shrink: 0;
              cursor: pointer;

              .search {
                width: 15px;
                height: 17px;
                background-image: url("../../assets/images/courseManage/search0.png");
                background-size: 100% 100%;
              }

              .btnText {
                font-size: 14px;
                font-weight: 400;
                color: #ffffff;
                line-height: 36px;
                margin-left: 5px;
              }
            }

            .btnsn {
              padding: 0px 26px 0px 26px;
              height: 38px;
              background: #ffffff;
              border-radius: 8px;
              border: 1px solid rgba(64, 158, 255, 1);
              display: flex;
              align-items: center;
              justify-content: center;
              margin-right: 14px;
              flex-shrink: 0;
              cursor: pointer;

              .search {
                width: 16px;
                height: 18px;
                background-image: url("../../assets/images/courseManage/reset1.png");
                background-size: 100% 100%;
              }

              .btnText {
                font-size: 14px;
                font-weight: 400;
                color: #4ea6ff;
                line-height: 36px;
                margin-left: 5px;
              }
            }
          }

          .main_notice {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 3px;
            height: 40px;
            background-color: #e9f6fe;

            .mntc_left {
              display: flex;
              align-items: center;

              .title {
                color: rgba(0, 0, 0, 0.65);
                margin-right: 17px;
              }

              .data {
                color: #4ea6ff;
              }

              .notice_icon {
                width: 14px;
                height: 14px;
                margin-right: 9px;
                margin-left: 9px;
                background-image: url(@/assets/images/coursewareManage/gan.png);
                background-size: 100% 100%;
              }
            }

            .mntc_right {
              cursor: pointer;
            }
          }
        }
      }
    }

    .main_btns {
      height: 72px;
      width: 100%;

      bottom: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);

      .btn1 {
        width: 100px;
        height: 40px;
        border: 1px solid #4ea6ff;
        border-radius: 8px;
        color: #4ea6ff;
        background-color: #fff;
        cursor: pointer;
      }

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