Fix: 作业&考试表单修改

src/components/drawers/AddTest.vue

@@ -16,154 +16,134 @@
           @click="closeDrawer"
         />
       </div>
+      <a-form
+            ref="formRef"
+            name="custom-validation"
+            :model="formState"
+            :rules="rules"
+            v-bind="layout"
+            @finish="handleFinish"
+            @validate="handleValidate"
+            @finishFailed="handleFinishFailed"
+          >
       <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-form-item has-feedback label="作业名称" name="examinationName">
               <a-input
-                v-model:value="inputV1"
-                style="width: 424px; height: 32px"
+                v-model:value="formState.examinationName"
+                style="width: 424px; height: 32px;margin-left: 35px;"
+                autocomplete="off"
                 placeholder="请输入考试名称"
-                maxlength="20"
-              />
+                maxlength="20"/>
+              </a-form-item>
             </div>
           </div>
           <div class="main_item2">
-            <div class="signbox">
-              <span style="margin-right: 3px">考试说明：</span>
-            </div>
-            <div class="textarea">
+            <a-form-item has-feedback label="考试说明" name="examinationExplain">
               <a-textarea
-                v-model:value="testV1"
+                v-model:value="formState.examinationExplain"
                 placeholder="请输入考试说明"
                 allow-clear
+                style="margin-left: 35px;"
                 maxlength="150"
               />
-            </div>
+            </a-form-item>
           </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-form-item has-feedback label="选择考试" name="choosedTest">
               <a-select
                 dropdownClassName="dropdown-style"
-                style="width: 424px"
+                style="width: 424px;margin-left: 35px;"
                 placeholder="请输入考试名称"
                 :options="options1"
-                v-model:value="choosedTest"
+                v-model:value="formState.choosedTest"
                 allowClear
                 showSearch
               />
+            </a-form-item>
+ 
             </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-form-item has-feedback label="考试时间" name="choosedTime">
+
               <a-range-picker
-              v-model:value="testTime"
-                style="width: 424px"
+              v-model:value="formState.choosedTime"
+                style="width: 424px;margin-left: 35px;"
                 :placeholder="['      开始时间', '        结束时间']"
               />
+            </a-form-item>
             </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-form-item has-feedback label="考试时长" name="examinationDuration">
+
               <a-input
-                v-model:value="inputV2"
-                style="width: 388px; height: 32px"
+                v-model:value="formState.examinationDuration"
+                style="width: 388px; height: 32px;
+                margin-left: 35px;"
               />
               <span style="margin-left: 5px">分钟</span>
+            </a-form-item>
             </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">
-              <span style="margin-right: 8px">允许重复考试</span>
+              <span style="margin-right: 43px">考试限制</span>
+              <a-form-item has-feedback label="允许重复考试" name="examinationLimit">
+
               <a-input-number
                 :min="-1" :precision="0"
-                v-model:value="inputV3"
-                style="width: 88px; height: 32px;border-radius: 8px;overflow: hidden;"
+                v-model:value="formState.examinationLimit"
+                style="width: 88px; height: 32px;
+                border-radius: 8px;overflow: hidden;"
               />
               <span style="margin-left: 8px">次</span>
               <span style="margin-left: 24px; color: #999999"
-                >-1表示无限制</span
-              >
+                >-1表示无限制</span>
+            </a-form-item>
+              
+              
             </div>
           </div>
           <div class="main_item">
-            <div class="signbox">
-              <span style="margin-right: 3px">显示答案：</span>
-            </div>
             <div class="btnbox">
-              <a-radio-group v-model:value="radioV1">
+              <a-form-item has-feedback label="显示答案" name="showAnswers">
+
+              <a-radio-group style="margin-left: 35px;" v-model:value="formState.showAnswers">
                 <a-radio v-model:checked="checked" :value="1" @click="cloradio1">允许查看</a-radio>
                 <a-radio v-model:checked="checked" :value="2" @click="cloradio1"
                   >不允许查看</a-radio
                 >
               </a-radio-group>
+            </a-form-item>
+
             </div>
           </div>
           <div class="main_item">
-            <div class="signbox">
-              <span style="margin-right: 3px">显示解析：</span>
-            </div>
             <div class="btnbox">
-              <a-radio-group v-model:value="radioV2">
+              <a-form-item has-feedback label="显示解析" name="showAnalysis">
+
+              <a-radio-group style="margin-left: 35px;" v-model:value="formState.showAnalysis">
                 <a-radio v-model:checked="checked" :value="1" @click="cloradio2">允许查看</a-radio>
                 <a-radio v-model:checked="checked" :value="2" @click="cloradio2"
                   >不允许查看</a-radio
                 >
               </a-radio-group>
+            </a-form-item>
+
             </div>
           </div>
           <div class="main_item">
-            <div class="signbox">
-              <span style="margin-right: 3px">评分模式：</span>
-            </div>
             <div class="btnbox">
-              <div class="btnbox">
-                <a-radio-group v-model:value="radioV3">
+              <a-form-item has-feedback label="评分模式" name="scoringModel">
+
+                <a-radio-group style="margin-left: 35px;" v-model:value="formState.scoringModel">
                   <a-radio v-model:checked="checked" :value="1" @click="cloradio3"
                     >最高一次</a-radio
                   >
@@ -171,44 +151,47 @@
                     >最后一次</a-radio
                   >
                 </a-radio-group>
-              </div>
+              </a-form-item>
             </div>
           </div>
           <div class="main_item">
-            <div class="signbox">
-              <span style="margin-right: 3px">及格线：</span>
-            </div>
             <div class="btnbox">
+              <a-form-item has-feedback label="及格线" name="passLine">
+
               <a-input
-                v-model:value="inputV4"
-                style="width: 88px; height: 32px"
+                v-model:value="formState.passLine"
+                style="width: 88px; height: 32px;margin-left: 35px;"
               />
+            </a-form-item>
+
               <span style="margin-left: 8px">分</span>
             </div>
           </div>
           <div class="main_item">
-            <div class="signbox">
-              <span style="margin-right: 3px">试题排列：</span>
-            </div>
             <div class="btnbox">
-              <a-radio-group v-model:value="radioV4">
+              <a-form-item has-feedback label="作业要求" name="questionArrangement">
+
+              <a-radio-group v-model:value="formState.questionArrangement">
                 <a-radio v-model:checked="checked" :value="1" @click="cloradio4">试题乱序</a-radio>
                 <a-radio v-model:checked="checked" :value="2" @click="cloradio4">试题排序</a-radio>
                 <a-radio v-model:checked="checked" :value="3" @click="cloradio4">全部乱序</a-radio>
               </a-radio-group>
+            </a-form-item>
+
             </div>
           </div>
         </div>
       </div>
       <div class="main_btns">
-        <button class="btn1" @click="closeDrawer">取消</button>
-        <button class="btn2" @click="addTest">确定</button>
+        <a-button class="btn1" @click="closeDrawer">取消</a-button>
+        <a-button class="btn2" html-type="submit" >确定</a-button>
       </div>
+    </a-form>
     </div>
   </a-drawer>
 </template>
   <script>
-import { reactive, toRefs, ref } from "vue";
+import { reactive, ref } from "vue";
 import {message} from"ant-design-vue";
 import {createExamination} from "@/api/indexExam"
 import  dayjs from 'dayjs';
@@ -239,19 +222,138 @@ export default {
     },
   },
   setup(props, ctx) {
-    const state = reactive({
-      inputV1: "",
-      inputV2: "",
-      inputV3: "",
-      inputV4: "60",
-      testV1: "",
-      radioV1: "",
-      radioV2: "",
-      radioV3: "",
-      radioV4: "",
-      choosedTest: "",
-      testTime:"",
+    const formState = reactive({
+      examinationName:'',
+      examinationDuration:"",
+      examinationLimit:"",
+      passLine:60,
+      examinationEndTime:"",
+      examinationExplain:"",
+      questionArrangement:1,
+      scoringModel:2,
+      showAnalysis:2,
+      showAnswers:2,
     });
+    const formRef = ref();
+    let checkExaminationName = async (_rule, value) => {
+      if (!value) {
+        message.warning("请输入考试名称");
+        return Promise.reject('请输入考试名称');
+      }
+    };
+    let checkExaminationExplain = async (_rule, value) => {
+      if (!value) {
+        message.warning("请输入考试说明");
+        return Promise.reject('请输入考试说明');
+      }
+    };
+    let checkChoosedTest = async (_rule, value) => {
+      if (!value) {
+        message.warning("请选择考试");
+        return Promise.reject('请选择考试');
+      }
+    };
+    let checkChoosedTime = async (_rule, value) => {
+      if (!value) {
+        message.warning("请选择时间");
+        return Promise.reject('请选择时间');
+      }
+    };
+    let checkExaminationDuration = async (_rule, value) => {
+      if (!value) {
+        message.warning("请输入考试时长");
+        return Promise.reject('请输入考试时长');
+      }
+    };
+    let checkLimit = async (_rule, value) => {
+      if (!value) {
+        message.warning("请输入考试限制");
+        return Promise.reject('请输入考试限制');
+      }
+    };
+    let checkShowAnswers = async (_rule, value) => {
+      if (!value) {
+        message.warning("请输入作业名称");
+        return Promise.reject('请输入作业名称');
+      }
+    };
+    let checkShowAnalysis = async (_rule, value) => {
+      if (!value) {
+        message.warning("请输入作业名称");
+        return Promise.reject('请输入作业名称');
+      }
+    };
+    let checkScoringModel = async (_rule, value) => {
+      if (!value) {
+        message.warning("请输入作业名称");
+        return Promise.reject('请输入作业名称');
+      }
+    };
+    let checkPassLine = async (_rule, value) => {
+      if (!value) {
+        message.warning("请输入及格线");
+        return Promise.reject('请输入及格线');
+      }
+    };
+    let checkQuestionArrangement = async (_rule, value) => {
+      if (!value) {
+        message.warning("请输入作业名称");
+        return Promise.reject('请输入作业名称');
+      }
+    };
+    const rules = {
+      examinationName: [{
+        required: true,
+        validator: checkExaminationName,
+        trigger: 'change',
+      }],
+      examinationExplain: [{
+        validator: checkExaminationExplain,
+        trigger: 'change',
+      }],
+      choosedTest: [{
+        required: true,
+        validator: checkChoosedTest,
+        trigger: 'change',
+      }],
+      choosedTime: [{
+        required: true,
+        validator: checkChoosedTime,
+        trigger: 'change',
+      }],
+      examinationDuration: [{
+        required: true,
+        validator: checkExaminationDuration,
+        trigger: 'change',
+      }],
+      limit: [{
+        required: true,
+        validator: checkLimit,
+        trigger: 'change',
+      }],
+      showAnswers: [{
+        validator: checkShowAnswers,
+        trigger: 'change',
+      }],
+      showAnalysis: [{
+        validator: checkShowAnalysis,
+        trigger: 'change',
+      }],
+      scoringModel: [{
+        validator: checkScoringModel,
+        trigger: 'change',
+      }],
+      passLine: [{
+        required: true,
+        validator: checkPassLine,
+        trigger: 'change',
+      }],
+      questionArrangement: [{
+        validator: checkQuestionArrangement,
+        trigger: 'change',
+      }],
+    };
+
     const options1 = ref([
       {
         label:'math',
@@ -262,76 +364,82 @@ export default {
         value:'eng',
       },
     ])
+    const handleFinish = values => {
+      console.log(values);
+      addTest()
+    };
+
+    const handleFinishFailed = errors => {
+      console.log(errors);
+      // message.error("handleFinishFailed");
+    };
+
+    const resetForm = () => {
+      formRef.value.resetFields();
+    };
+
+    const handleValidate = (...args) => {
+      console.log(args);
+    };
     const closeDrawer = () => {
+      resetForm();
       ctx.emit("update:addtestVisible", false);
-      state.radioV1 = "";
-        state.radioV2 = "";
-        state.radioV3 = "";
-        state.radioV4 = "";
     };
     const addTest = () => {
-      if(state.testTime.length
-      && state.inputV1&& state.inputV2&& state.inputV3&& state.inputV4
-      && state.radioV1&& state.radioV2&& state.radioV3
-      ){
         createExamination({
             "createTime": "",
             "createUser": 0,
-            "examinationDuration": state.inputV2,
-            "examinationEndTime": dayjs(state.testTime[1]).format("YYYY-MM-DD"),
-            "examinationExplain": state.testV1,
+            "examinationDuration": formState.examinationDuration,
+            "examinationEndTime": dayjs(formState.choosedTime[1]).format("YYYY-MM-DD"),
+            "examinationExplain": formState.examinationExplain,
             "examinationFlag": "",
             "examinationId": 0,
-            "examinationLimit": state.inputV3,
-            "examinationName": state.inputV1,
+            "examinationLimit": formState.examinationLimit,
+            "examinationName": formState.examinationName,
             "examinationPaperId": 0,
-            "examinationPaperName": state.choosedTest,
-            "examinationStartTime": dayjs(state.testTime[0]).format("YYYY-MM-DD"),
+            "examinationPaperName": formState.choosedTest,
+            "examinationStartTime": dayjs(formState.choosedTime[0]).format("YYYY-MM-DD"),
             "examinationTag": "",
-            "passLine": state.inputV4,
-            "questionArrangement": state.radioV4,
-            "scoringModel": state.radioV3,
-            "showAnalysis": state.radioV2,
-            "showAnswers": state.radioV1,
+            "passLine": formState.passLine,
+            "questionArrangement": formState.questionArrangement,
+            "scoringModel": formState.scoringModel,
+            "showAnalysis": formState.showAnalysis,
+            "showAnswers": formState.showAnswers,
             "updateTime": "",
             "updateUser": 0
           }).then((res)=>{
         message.success(`添加成功${res}`)
-        ctx.emit("update:addtestVisible", false);
+        closeDrawer();
       }).catch((err)=>{
         message.error(`添加失败${err}`)
       })
-      }
-      else{ 
-        message.error(`字段不能为空`)
-        return 0
-      }
+      
     }
     const afterVisibleChange = (bool) => {
-      console.log("state", bool);
+      console.log("formState", bool);
     };
     const cloradio1 = (value) => {
       if (value != "") {
-        state.radioV1 = "";
+        formState.showAnswers = "";
       }
     }
     const cloradio2 = (value) => {
       if (value != "") {
-        state.radioV2 = "";
+        formState.showAnalysis = "";
       }
     }
     const cloradio3 = (value) => {
       if (value != "") {
-        state.radioV3 = "";
+        formState.scoringModel = "";
       }
     }
     const cloradio4 = (value) => {
       if (value != "") {
-        state.radioV4 = "";
+        formState.questionArrangement = "";
       }
     }
     return {
-      ...toRefs(state),
+      formState,
       afterVisibleChange,
       closeDrawer,
       rowSelection,
@@ -341,6 +449,13 @@ export default {
       cloradio4,
       addTest,
       options1,
+      handleFinish,
+      handleFinishFailed,
+      resetForm,
+      handleValidate,
+      formRef,
+      // layout,
+      rules,
     };
   },
 };