feat:合并

2025-12-12 04:16:47 +08:00 · 2023-03-02 16:04:43 +08:00
parent 5691a5f4c5 5888be784d
commit 5fd944b999
5 changed files with 230 additions and 168 deletions
--- a/src/components/drawers/AddEval.vue
+++ b/src/components/drawers/AddEval.vue
@@ -2,47 +2,68 @@
  <div @click="openDrawer">
    <slot></slot>
  </div>
-  <a-drawer :visible="visible" class="drawerStyle addevalDrawer" width="800" title="添加测评" placement="right">
+  <a-drawer
+    :visible="visible"
+    class="drawerStyle addevalDrawer"
+    width="800"
+    title="添加测评"
+    placement="right"
+  >
    <div class="drawerMain">
      <div class="header">
-        <div class="headerTitle">{{ taskIndex >= 0 ? "编辑" : "添加" }}测评</div>
-        <img style="width: 29px; height: 29px; cursor: pointer" src="../../assets/images/basicinfo/close.png"
-             @click="closeDrawer"/>
+        <div class="headerTitle">
+          {{ taskIndex >= 0 ? "编辑" : "添加" }}测评
+        </div>
+        <img
+          style="width: 29px; height: 29px; cursor: pointer"
+          src="../../assets/images/basicinfo/close.png"
+          @click="closeDrawer"
+        />
      </div>
      <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=""/>
+                <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.evaluationName" style="width: 400px; height: 40px; border-radius: 8px;"
-                       placeholder="请输入测评名称"
-                       show-count
-                       :maxlength="20"/>
+              <a-input
+                v-model:value="formData.evaluationName"
+                style="width: 400px; height: 40px; border-radius: 8px"
+                placeholder="请输入测评名称"
+                show-count
+                :maxlength="20"
+              />
            </div>
          </div>
          <div class="main_item">
            <div class="signbox">
              <div class="sign">
-                <img src="@/assets/images/coursewareManage/asterisk.png" alt=""/>
+                <img
+                  src="@/assets/images/coursewareManage/asterisk.png"
+                  alt=""
+                />
              </div>
              <span style="margin-right: 3px">选择测评：</span>
            </div>
            <div class="btnbox">
-              <EvList v-model:evaluationTypeName="formData.evaluationTypeName" v-model:evaluationTypeId="formData.evaluationTypeId">
-                <button class="checkEval">
-                  选择测评
-                </button>
+              <EvList
+                v-model:evaluationTypeName="formData.evaluationTypeName"
+                v-model:evaluationTypeId="formData.evaluationTypeId"
+              >
+                <button class="checkEval">选择测评</button>
              </EvList>
-              <div v-if="formData.evaluationTypeName" style="margin-left:20px">
+              <div v-if="formData.evaluationTypeName" style="margin-left: 20px">
                <a-tag closable @close="delTag" color="processing">
-                  <span style="font-size: 14px; line-height: 33px"
-                  >{{ formData.evaluationTypeName }}</span
-                  >
+                  <span style="font-size: 14px; line-height: 33px">{{
+                    formData.evaluationTypeName
+                  }}</span>
                </a-tag>
              </div>
            </div>
@@ -53,14 +74,16 @@
            </div>
            <div class="btnbox">
              <a-range-picker
-                  :show-time="{ format: 'HH:mm' }"
-                  :disabled-date="disabledDate"
-                  :disabled-time="disabledRangeTime"
-                  style="width: 400px; height: 40px; border-radius: 8px;" v-model:value="dateTime"
-                  format="YYYY-MM-DD HH:mm"
-                  valueFormat="YYYY-MM-DD HH:mm"
-                  @change="timeChange"
-                  :placeholder="['      开始时间', '        结束时间']"/>
+                :show-time="{ format: 'HH:mm' }"
+                :disabled-date="disabledDate"
+                :disabled-time="disabledRangeTime"
+                style="width: 400px; height: 40px; border-radius: 8px"
+                v-model:value="dateTime"
+                format="YYYY-MM-DD HH:mm"
+                valueFormat="YYYY-MM-DD HH:mm"
+                @change="timeChange"
+                :placeholder="['      开始时间', '        结束时间']"
+              />
            </div>
          </div>
          <div class="main_item2">
@@ -68,10 +91,15 @@
              <span style="margin-right: 3px">测评说明：</span>
            </div>
            <div class="textarea">
-              <a-textarea show-count :maxlength="200" v-model:value="formData.evaluationExplain"
-                          placeholder="请输入测评说明"
-                          style="width:400px;" allowClear :rows="6"/>
-
+              <a-textarea
+                show-count
+                :maxlength="200"
+                v-model:value="formData.evaluationExplain"
+                placeholder="请输入测评说明"
+                style="width: 400px"
+                allowClear
+                :rows="6"
+              />
            </div>
          </div>
        </div>
@@ -84,55 +112,55 @@
  </a-drawer>
 </template>
 <script setup>
-import {defineEmits, defineProps, ref} from "vue";
+import { defineEmits, defineProps, ref } from "vue";
 import EvList from "./EvList.vue";
-import {Form, message} from "ant-design-vue";
+import { Form, message } from "ant-design-vue";
 import dayjs from "dayjs";

 const props = defineProps({
  type: Number,
-  taskList: []
-})
-const visible = ref(false)
+  taskList: [],
+});
+const visible = ref(false);
 const formData = ref({
-  evaluationName: '',
-  evaluationTypeId: '',
-  evaluationTypeName: '',
-  evaluationExplain: '',
-  evaluationStartTime: '',
-  evaluationEndTime: '',
-})
-const emit = defineEmits({})
+  evaluationName: "",
+  evaluationTypeId: "",
+  evaluationTypeName: "",
+  evaluationExplain: "",
+  evaluationStartTime: "",
+  evaluationEndTime: "",
+});
+const emit = defineEmits({});
 const taskIndex = ref(-1);
 const dateTime = ref([]);
 const rulesRef = ref({
  evaluationName: [
    {
      required: true,
-      message: '请输入测评名称',
+      message: "请输入测评名称",
    },
  ],
  evaluationTypeId: [
    {
      required: true,
-      message: '请选择测评',
+      message: "请选择测评",
    },
  ],
  evaluationTypeName: [
    {
      required: true,
-      message: '请选择测评',
+      message: "请选择测评",
    },
  ],
 });

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

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

 const range = (start, end) => {
@@ -144,12 +172,12 @@ const range = (start, end) => {
 };

 function timeChange(time, timeStr) {
-  formData.value.evaluationStartTime = timeStr[0]
-  formData.value.evaluationEndTime = timeStr[1]
+  formData.value.evaluationStartTime = timeStr[0];
+  formData.value.evaluationEndTime = timeStr[1];
 }

 const disabledDate = (current) => {
-  return current && current < dayjs().startOf('day');
+  return current && current < dayjs().startOf("day");
 };

 const disabledRangeTime = () => ({
@@ -159,38 +187,51 @@ const disabledRangeTime = () => ({
 });

 function delTag() {
-  formData.value.evaluationTypeId = ''
-  formData.value.evaluationTypeName = ''
+  formData.value.evaluationTypeId = "";
+  formData.value.evaluationTypeName = "";
 }

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

 function openDrawer(i, row) {
-  row && (formData.value = {...row.info});
-  row && (dateTime.value = [dayjs(row.info.evaluationStartTime, "YYYY-MM-DD HH:mm"), dayjs(row.info.evaluationEndTime, "YYYY-MM-DD HH:mm")]);
-  (i >= 0) && (taskIndex.value = i)
-  visible.value = true
+  row && (formData.value = { ...row.info });
+  row &&
+    (dateTime.value = [
+      dayjs(row.info.evaluationStartTime, "YYYY-MM-DD HH:mm"),
+      dayjs(row.info.evaluationEndTime, "YYYY-MM-DD HH:mm"),
+    ]);
+  i >= 0 && (taskIndex.value = i);
+  visible.value = true;
 }

-defineExpose({openDrawer})
-
+defineExpose({ openDrawer });
 </script>
 <style lang="scss">
 .ant-table-striped :deep(.table-striped) td {
@@ -402,8 +443,8 @@ defineExpose({openDrawer})
      }

      .ant-table-tbody
-      > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
-      > td {
+        > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
+        > td {
        background: #f6f9fd;
      }