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

<template>
  <div class="growth-homework">
    <div class="contentMain">
      <div class="main_left">
        <div class="main_item">
          <div class="signbox">
            <div class="sign">
              <img src="@/assets/images/coursewareManage/asterisk.png" alt="" />
            </div>
            <span style="margin-right: 3px">作业名称：</span>
          </div>
          <div class="btnbox">
            <a-input
              v-model:value="formData.workName"
              style="width: 400px; height: 40px; border-radius: 8px"
              placeholder="请输入作业名称"
              autocomplete="off"
              show-count
              :maxlength="20"
            />
          </div>
        </div>

        <div class="main_item">
          <div class="signbox">
            <div class="sign">
              <img src="@/assets/images/coursewareManage/asterisk.png" alt="" />
            </div>
            <span style="margin-right: 3px">开始时间：</span>
          </div>
          <div class="btnbox">
            <a-range-picker
              style="width: 400px; height: 40px; border-radius: 8px"
              :show-time="{ format: 'hh:mm' }"
              v-model:value="dateTime"
              format="YYYY-MM-DD HH:mm"
              @change="timeChange"
              :placeholder="['      开始时间', '        结束时间']"
            />
          </div>
        </div>
        <div class="main_item2">
          <div class="signbox">
            <div class="sign">
              <img src="@/assets/images/coursewareManage/asterisk.png" alt="" />
            </div>
            <span style="margin-right: 3px">作业要求：</span>
          </div>
          <div class="textarea">
            <a-textarea
              v-model:value="formData.workRequirement"
              placeholder="请输入作业要求"
              autocomplete="off"
              allow-clear
              :rows="6"
              show-count
              :maxlength="200"
            />
          </div>
        </div>
        <div class="mbl_items">
          <div class="item_nam">
            <span style="margin-right: 10px"></span>
          </div>
          <div class="item_inp">
            <FJUpload v-model:value="formData.workEnclosureAddress" />
          </div>
        </div>
        <div style="width: 100%; height: 80px"></div>
      </div>
    </div>
    <div class="main_btns" style="background: #fff">
      <a-button class="btn2" @click="closeDrawer">取消</a-button>
      <a-button class="btn2" html-type="submit" @click="confirm">确定</a-button>
    </div>
  </div>
</template>
<script setup>
import { defineEmits, defineProps, ref, watch, onMounted } from "vue";
import FJUpload from "@/components/common/FJUpload";
import { useResetRef } from "@/utils/useCommon";
import { Form, message } from "ant-design-vue";
import dayjs from "dayjs";
const props = defineProps({
  info: {},
});

const formData = useResetRef({
  workName: "",
  submitStartTime: "",
  submitEndTime: "",
  workRequirement: "",
  workEnclosureAddress: "",
});
const emit = defineEmits(["update:info", "close"]);
const dateTime = ref([]);
const rulesRef = ref({
  workName: [
    {
      required: true,
      message: "请输入作业名称",
    },
  ],
  submitStartTime: [
    {
      required: true,
      message: "请选择开始时间",
    },
  ],
  submitEndTime: [
    {
      required: true,
      message: "请选择结束时间",
    },
  ],
  workRequirement: [
    {
      required: true,
      message: "请输入作业要求",
    },
  ],
});

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

onMounted(() => {
  formData.value = props.info;
  props.info.submitStartTime &&
    (dateTime.value = [
      dayjs(formData.value.submitStartTime, "YYYY-MM-DD HH:mm"),
      dayjs(formData.value.submitEndTime, "YYYY-MM-DD HH:mm"),
    ]);
});
const closeDrawer = () => {
  dateTime.value = [];
  emit("close");
};

function timeChange(time, timeStr) {
  console.log(dateTime.value);
  formData.value.submitStartTime = timeStr[0];
  formData.value.submitEndTime = timeStr[1];
}

async function confirm() {
  // 表单校验
  await validate().catch(({ errorFields }) => {
    message.warning(errorFields[0].errors.join());
    throw Error("数据校验不通过");
  });
  emit("update:info", formData.value);
  closeDrawer();
}
</script>
<style lang="scss">
.ant-table-striped :deep(.table-striped) td {
  background-color: #fafafa !important;
}

.growth-homework {
  .contentMain {
    display: flex;
    justify-content: space-between;

    .main_left {
      flex: 1;
      border-right: 1px solid #e8e8e8;
      margin-top: 0px !important;
      padding-right: 0px;

      .main_item {
        display: flex;
        align-items: center;
        margin-top: 32px;
        margin-bottom: 32px;

        .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;
            margin-right: 8px;
            color: #fff;
          }
        }
      }

      .mbl_items {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-bottom: 10px;

        .item_nam {
          width: 100px;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          white-space: nowrap;

          .asterisk_icon {
            width: 10px;
            height: 10px;
            margin-right: 5px;
            margin-top: -15px;
          }
        }

        .item_inp {
          flex: 1;
          position: relative;
          margin-left: -25px;

          .inp_num {
            position: absolute;
            left: 398px;
            top: 10px;
          }
        }
      }

      .main_item2 {
        display: flex;
        align-items: flex-start;
        margin-bottom: 32px;

        .textarea {
          width: 373px;

          .ant-input {
            width: 100%;
          }

          .ant-input-textarea-show-count {
            position: relative;
          }

          .ant-input-textarea-show-count::after {
            position: absolute;
            right: 10px;
            bottom: 0px;
          }

          .ant-input {
            border-radius: 8px;
          }
        }

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

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

        .kqszbox {
          .qdqtbox {
            margin-left: 56px;
          }

          .setbox {
            display: flex;
            flex-wrap: wrap;
            margin-top: 10px;
            margin-bottom: 24px;

            .timerbox {
              margin-top: 6px;
              margin-right: 32px;
              display: flex;
              align-items: center;
              flex-wrap: nowrap;
            }
          }
        }

        .btnbox2 {
          display: flex;
          flex-direction: column;
          justify-content: flex-start;

          .xkbtn {
            cursor: pointer;
            width: 130px;
            height: 40px;
            background: #4ea6ff;
            border-radius: 8px;
            border: 0;
            margin-right: 16px 8px 32px 0;
            color: #fff;
            margin-top: 16px;
            margin-bottom: 60px;
            margin-left: 124px;
          }
        }
      }
    }
  }

  .main_btns {
    position: absolute;
    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>