[修改]复用作业CRUD组件

src/views/teacher/Document/components/CreateAssignment/index.vue → src/components/AssignmentCRUD/CreateAssignment/index.vue

@@ -1,11 +1,13 @@
 <template>
   <div>
-    <a class="button is-link" @click="startCreation()">新建文档作业</a>
+    <a class="button is-link" @click="startCreation()"
+      >新建{{ createTitle }}作业</a
+    >
 
     <!--新建文档作业模态框-->
     <b-modal :active.sync="isCreateModalActive" :width="640" scroll="keep">
       <div class="card">
-        <div class="title">新建文档作业</div>
+        <div class="title">新建{{ createTitle }}作业</div>
         <div class="content">
           <b-field label="题目名称">
             <b-input v-model="problemName"></b-input>
@@ -113,11 +115,9 @@
                     props.row.name
                   }}</a>
                 </b-table-column>
-
                 <b-table-column label="题目描述" width="100">
                   <div class="description">{{ props.row.description }}</div>
                 </b-table-column>
-
                 <b-table-column
                   field="difficulty"
                   label="题目难度"
@@ -143,7 +143,6 @@
                   {{ props.row.expectTime }}分钟
                 </b-table-column>
               </template>
-
               <template slot="detail" slot-scope="props">
                 <article class="media">
                   <div class="media-content">
@@ -164,6 +163,7 @@
 <script>
 import { getTeacherKeywordQuestions } from "@/api/question";
 import { postDocAssignment } from "@/api/assignment";
+import { postCodeAssignment } from "@/api/assignment";
 import timeMixins from "@/mixins/time";
 import { required } from "vuelidate/lib/validators";
 import pathMixins from "@/mixins/path";
@@ -173,6 +173,18 @@ export default {
   props: {
     courseId: {
       type: String
+    },
+    assignType: {
+      type: Number
+    }
+  },
+  mounted() {
+    if (this.assignType === 1) {
+      this.createTitle = "文档";
+      this.postParam = "DOCUMENT";
+    } else {
+      this.createTitle = "代码";
+      this.postParam = "CODE";
     }
   },
   data() {
@@ -184,6 +196,9 @@ export default {
         endAt: null,
         problem: null //题目编号
       },
+      createTitle: "",
+      postParam: "",
+      myPromise: null,
       problemName: "",
       searchContent: "",
       questions: [],
@@ -204,6 +219,12 @@ export default {
     };
   },
   methods: {
+    /**
+     * 准备新建或者修改
+     */
+    startCreation() {
+      this.isSearchModalActive = true;
+    },
     /**
      * 搜索题目
      * @param content
@@ -227,12 +248,6 @@ export default {
       this.isProblemListModalActive = false;
       this.isCreateModalActive = true;
     },
-    /**
-     * 准备新建或者修改
-     */
-    startCreation() {
-      this.isSearchModalActive = true;
-    },
     /**
      * 确认新建或者修改
      */
@@ -240,17 +255,29 @@ export default {
       this.$v.params.$touch();
       if (!this.$v.params.$invalid) {
         this.isCreateModalActive = false;
-        this.params["type"] = "DOCUMENT";
+        this.params["type"] = this.postParam;
         this.parseParams();
-        postDocAssignment(this.params, parseInt(this.courseId)).then(res => {
+        if (this.assignType === 1) {
+          this.myPromise = postDocAssignment(
+            this.params,
+            parseInt(this.courseId)
+          );
+        } else {
+          this.myPromise = postCodeAssignment(
+            this.params,
+            parseInt(this.courseId)
+          );
+        }
+        this.myPromise.then(res => {
           if (res.code === 0) {
             //创建成功
-            console.log(res.data);
             this.$emit("sendCreatedAssignment", res.data);
             this.isCreateModalActive = false;
-            this.$router.push({
-              path: `${this.prefix}/review?documentHwId=${res.data.id}`
-            });
+            if (this.assignType === 1) {
+              this.$router.push({
+                path: `${this.prefix}/review?documentHwId=${res.data.id}`
+              });
+            }
           } else {
             //创建失败
             this.$dialog.alert({
@@ -299,7 +326,7 @@ export default {
   watch: {
     isCreateModalActive(newValue) {
       if (newValue === false) {
-        this.$v.$reset();
+        this.$v.params.$reset();
       }
     },
     isSearchModalActive(newValue) {

src/views/teacher/Document/components/DeleteAssignment/index.vue → src/components/AssignmentCRUD/DeleteAssignment/index.vue

@@ -4,13 +4,22 @@
 
 <script>
 import { delDocAssignment } from "@/api/assignment";
+import { delCodeAssignment } from "@/api/assignment";
 
 export default {
   props: {
     delId: {
       type: Number
+    },
+    assignType: {
+      type: Number
     }
   },
+  data() {
+    return {
+      myPromise: null
+    };
+  },
   methods: {
     confirmDelete() {
       this.$dialog.confirm({
@@ -18,7 +27,12 @@ export default {
         confirmText: "删除",
         type: "is-danger",
         onConfirm: () => {
-          delDocAssignment(this.delId).then(res => {
+          if (this.assignType === 1) {
+            this.myPromise = delDocAssignment(this.delId);
+          } else {
+            this.myPromise = delCodeAssignment(this.delId);
+          }
+          this.myPromise.then(res => {
             if (res.code === 0) {
               this.$emit("del");
               this.$toast.open("删除成功");

src/views/teacher/Document/components/UpdateAssignment/index.vue → src/components/AssignmentCRUD/UpdateAssignment/index.vue

@@ -4,7 +4,7 @@
     <!--新建文档作业模态框-->
     <b-modal :active.sync="isUpdateModalActive" :width="640" scroll="keep">
       <div class="card">
-        <div class="title">修改文档作业</div>
+        <div class="title">修改{{ updateTitle }}作业</div>
         <div class="content">
           <b-field
             label="作业名称"
@@ -51,9 +51,7 @@
               :config="endAtConfig"
             ></flat-pickr>
           </b-field>
-          <a class="button is-link" @click="createDocAssignment()">
-            确认修改
-          </a>
+          <a class="button is-link" @click="updateAssignment()"> 确认修改 </a>
         </div>
       </div>
     </b-modal>
@@ -63,14 +61,25 @@
 <script>
 import timeMixins from "@/mixins/time";
 import { putDocAssignment } from "@/api/assignment";
+import { putCodeAssignment } from "@/api/assignment";
 import { required } from "vuelidate/lib/validators";
 export default {
   props: {
     updateItem: {
       type: Object
+    },
+    assignType: {
+      type: Number
     }
   },
   mixins: [timeMixins],
+  mounted() {
+    if (this.assignType === 1) {
+      this.updateTitle = "文档";
+    } else {
+      this.updateTitle = "代码";
+    }
+  },
   data() {
     return {
       isUpdateModalActive: false,
@@ -80,6 +89,8 @@ export default {
         startAt: null,
         endAt: null
       },
+      updateTitle: "",
+      myPromise: null,
       startAtConfig: {
         ...this.getDefaultConfig(),
         minDate: "today",
@@ -104,12 +115,17 @@ export default {
     /**
      * 确认修改
      */
-    createDocAssignment() {
+    updateAssignment() {
       this.$v.params.$touch();
       if (!this.$v.params.$invalid) {
         this.isUpdateModalActive = false;
         this.parseParams();
-        putDocAssignment(this.params, this.updateItem.id).then(res => {
+        if (this.assignType === 1) {
+          this.myPromise = putDocAssignment(this.params, this.updateItem.id);
+        } else {
+          this.myPromise = putCodeAssignment(this.params, this.updateItem.id);
+        }
+        this.myPromise.then(res => {
           if (res.code === 0) {
             this.$emit("updateDocData", res.data);
           } else {

src/views/teacher/Code/index.vue

@@ -8,9 +8,11 @@
         共有 {{ codeData.length }} 份作业
       </template>
       <template slot="action">
-        <b-field>
-          <a class="button is-link" @click="updateInfo(-1)">新建代码作业</a>
-        </b-field>
+        <create-assignment
+          @sendCreatedAssignment="pushNewAssignment($event)"
+          :course-id="course.id"
+          :assign-type="assignType"
+        ></create-assignment>
       </template>
     </page-header>
 
@@ -47,12 +49,18 @@
               {{ displayUnixTime(props.row.endAt) }}
             </b-table-column>
             <b-table-column label="修改" centered>
-              <a @click="updateInfo(props.row.id)">修改</a>
+              <update-assignment
+                :assign-type="assignType"
+                :update-item="props.row"
+                @updateDocData="updateData($event)"
+              ></update-assignment>
             </b-table-column>
             <b-table-column label="删除" centered>
-              <a style="color:#b34141" @click="confirmDelete(props.row.id)"
-                >删除</a
-              >
+              <delete-assignment
+                :del-id="props.row.id"
+                :assign-type="assignType"
+                @del="deleteAssignment(props.row.id)"
+              ></delete-assignment>
             </b-table-column>
           </template>
 
@@ -71,86 +79,6 @@
         </b-table>
       </div>
     </page-body>
-
-    <!--新建代码作业模态框-->
-    <b-modal :active.sync="isCardModalActive" :width="640" scroll="keep">
-      <div class="card">
-        <div class="title">{{ modal.title }}</div>
-        <div class="content">
-          <div v-if="display">
-            <b-field label="查找题目"></b-field>
-            <b-field :type="$v.params.problem.$error ? 'is-danger' : ''">
-              <b-input
-                placeholder="输入ID查找题目"
-                type="search"
-                icon="magnify"
-                :value="searchContent"
-                v-model="$v.params.problem.$model"
-                expanded
-                @keyup.enter.native="search(searchContent)"
-              >
-              </b-input>
-              <p class="control">
-                <button class="button is-link" @click="search(searchContent)">
-                  查找
-                </button>
-              </p>
-            </b-field>
-          </div>
-          <b-field
-            label="作业名称"
-            :type="$v.params.name.$error ? 'is-danger' : ''"
-            :message="$v.params.name.$error ? '请填写作业名称' : ''"
-          >
-            <b-input
-              placeholder="请填写作业名称"
-              v-model="$v.params.name.$model"
-            ></b-input>
-          </b-field>
-          <b-field
-            label="作业描述"
-            :type="$v.params.description.$error ? 'is-danger' : ''"
-            :message="$v.params.description.$error ? '请填写作业描述' : ''"
-          >
-            <b-input
-              type="textarea"
-              placeholder="请填写作业描述"
-              v-model="$v.params.description.$model"
-            ></b-input>
-          </b-field>
-          <b-field
-            label="开始时间"
-            :type="$v.params.startAt.$error ? 'is-danger' : ''"
-            :message="$v.params.startAt.$error ? '请填写作业开始时间' : ''"
-          >
-            <flat-pickr
-              placeholder="Click to select..."
-              class="input"
-              v-model="$v.params.startAt.$model"
-              :config="startAtConfig"
-            ></flat-pickr>
-          </b-field>
-          <b-field
-            label="结束时间"
-            :type="$v.params.endAt.$error ? 'is-danger' : ''"
-            :message="$v.params.endAt.$error ? '请填写作业结束时间' : ''"
-          >
-            <flat-pickr
-              placeholder="Click to select..."
-              class="input"
-              v-model="$v.params.endAt.$model"
-              :config="endAtConfig"
-            ></flat-pickr>
-          </b-field>
-          <!--传入codeId-->
-          <a
-            class="button is-link"
-            @click="createDocAssignment($v.params.id)"
-            >{{ modal.submit }}</a
-          >
-        </div>
-      </div>
-    </b-modal>
   </div>
 </template>
 
@@ -158,227 +86,51 @@
 import PageHeader from "@/components/PageHeader";
 import PageBody from "@/components/PageBody/index";
 import { getCodeAssignmentListByTeacher } from "@/api/assignment";
-import { getQuestionDetail } from "@/api/question";
-import { postCodeAssignment } from "@/api/assignment";
-import { putCodeAssignment } from "@/api/assignment";
-import { delCodeAssignment } from "@/api/assignment";
 import timeMixins from "@/mixins/time";
-import { required } from "vuelidate/lib/validators";
-import pathMixins from "@/mixins/path";
 import { mapState } from "vuex";
+import DeleteAssignment from "@/components/AssignmentCRUD/DeleteAssignment";
+import UpdateAssignment from "@/components/AssignmentCRUD/UpdateAssignment";
+import CreateAssignment from "@/components/AssignmentCRUD/CreateAssignment";
 
 export default {
   components: {
     PageBody,
-    PageHeader
+    PageHeader,
+    DeleteAssignment,
+    UpdateAssignment,
+    CreateAssignment
   },
-  mixins: [timeMixins, pathMixins],
+  mixins: [timeMixins],
   mounted() {
-    console.log(this.$v.params);
     getCodeAssignmentListByTeacher(this.course.id).then(res => {
       this.codeData = res.data;
     });
   },
   data() {
     return {
-      searchContent: null,
-      question: {},
       codeData: [],
-      params: {
-        name: null,
-        description: null,
-        startAt: null,
-        endAt: null,
-        problem: null //选择题目编号
-      },
-      // 返回的代码作业信息
-      isCardModalActive: false,
-      modal: {
-        title: "新建代码作业",
-        submit: "确认创建"
-      },
-      flag: -1, //区分创建还是修改
-      display: true, //展示题目搜索框
-      startAtConfig: {
-        ...this.getDefaultConfig(),
-        minDate: "today",
-        maxDate: null
-      },
-      endAtConfig: {
-        ...this.getDefaultConfig(),
-        minDate: "today",
-        maxDate: null
-      }
+      assignType: 0
     };
   },
-  validations: {
-    params: {
-      name: {
-        required
-      },
-      description: {
-        required
-      },
-      startAt: {
-        required
-      },
-      endAt: {
-        required
-      },
-      problem: {
-        required
-      }
-    }
-  },
-  watch: {
-    isCardModalActive(newValue) {
-      if (newValue === false) {
-        this.$v.$reset();
-      }
-    }
-  },
   methods: {
-    /**
-     * 搜索题目
-     * @param content
-     * @return {Promise<void>}
-     */
-    async searchAssis(content) {
-      console.log(content);
-      await getQuestionDetail().then(res => {
-        this.question = res.data;
-      });
-    },
-    search(content) {
-      this.searchAssis(content).then(() => {
-        console.log(this.question);
-        this.params.problem = this.question.id;
-        this.searchContent = this.question.name;
-        this.$dialog.alert({
-          title: "题目信息",
-          message: this.searchContent,
-          confirmText: "OK"
-        });
-      });
-    },
-
-    /**
-     * 确定删除
-     * @param id
-     */
-    confirmDelete(id) {
-      this.$dialog.confirm({
-        message: "确认删除？",
-        confirmText: "删除",
-        type: "is-danger",
-        onConfirm: () => {
-          delCodeAssignment(id).then(res => {
-            console.log(res);
-            if (res.code === 0) {
-              //删除成功
-              for (let item of this.codeData) {
-                if (item.id === id) {
-                  this.codeData.pop(item);
-                }
-              }
-              this.$toast.open("删除成功");
-            } else {
-              this.$dialog.alert({
-                title: "删除失败",
-                message: res.message,
-                type: "is-danger",
-                hasIcon: true,
-                icon: "times-circle",
-                iconPack: "fa"
-              });
-            }
-          });
-        }
-      });
+    pushNewAssignment(item) {
+      this.codeData.push(item);
     },
-    /**
-     * 准备新建或者修改
-     * @param id
-     */
-    updateInfo(id) {
-      this.isCardModalActive = true;
-      if (id === -1) {
-        // 准备新建
-        this.display = true;
-        this.modal.title = "新建代码作业";
-        this.modal.submit = "确认创建";
-        this.flag = -1;
-      } else {
-        this.display = false;
-        // 准备修改
-        this.modal.title = "修改代码作业";
-        this.modal.submit = "确认修改";
-        for (let item of this.codeData) {
-          if (item.id === id) {
-            this.params.name = item.name;
-            this.params.description = item.description;
-            // 以下两项无效
-            this.params.startAt = item.startAt;
-            this.params.endAt = item.endAt;
-            break;
-          }
+    updateData(modifiedItem) {
+      let length = this.codeData.length;
+      for (let i = 0; i < length; i++) {
+        if (modifiedItem.id === this.codeData[i].id) {
+          this.codeData.splice(i, 1, modifiedItem);
+          break;
         }
-        this.flag = 0;
       }
     },
-    /**
-     * 确认新建或者修改
-     */
-    createDocAssignment(codeId) {
-      this.$v.$touch();
-      if (!this.$v.$invalid) {
-        this.isCardModalActive = false;
-        if (this.flag === -1) {
-          // 确认新建作业
-          this.params["type"] = "DOCUMENT";
-          postCodeAssignment(this.params, this.course.id).then(res => {
-            console.log(res);
-            if (res.code === 0) {
-              //创建成功
-              this.codeData.push(res.data);
-              this.$router.push({
-                path: `${this.prefix}/review?documentHwId=${res.data.id}`
-              });
-            } else {
-              //创建失败
-              this.$dialog.alert({
-                title: "创建失败",
-                message: res.message,
-                type: "is-danger",
-                hasIcon: true,
-                icon: "times-circle",
-                iconPack: "fa"
-              });
-            }
-          });
-        } else {
-          // 确认修改作业
-          putCodeAssignment(this.params, codeId).then(res => {
-            if (res.code === 0) {
-              let id = res.data.id;
-              for (let item of this.codeData) {
-                if (item.id === id) {
-                  item = res.data;
-                  console.log("修改成功");
-                  break;
-                }
-              }
-            } else {
-              this.$dialog.alert({
-                title: "修改失败",
-                message: res.message,
-                type: "is-danger",
-                hasIcon: true,
-                icon: "times-circle",
-                iconPack: "fa"
-              });
-            }
-          });
+    deleteAssignment(delId) {
+      let length = this.codeData.length;
+      for (let i = 0; i < length; i++) {
+        if (this.codeData[i].id === delId) {
+          this.codeData.splice(i, 1);
+          break;
         }
       }
     }

src/views/teacher/Document/index.vue

@@ -11,6 +11,7 @@
         <create-assignment
           @sendCreatedAssignment="pushNewAssignment($event)"
           :course-id="course.id"
+          :assign-type="assignType"
         ></create-assignment>
       </template>
     </page-header>
@@ -49,13 +50,15 @@
             </b-table-column>
             <b-table-column label="修改" centered>
               <update-assignment
+                :assign-type="assignType"
                 :update-item="props.row"
-                v-on:updateDocData="modifyDocData($event)"
+                @updateDocData="updateData($event)"
               ></update-assignment>
             </b-table-column>
             <b-table-column label="删除" centered>
               <delete-assignment
                 :del-id="props.row.id"
+                :assign-type="assignType"
                 @del="deleteAssignment(props.row.id)"
               ></delete-assignment>
             </b-table-column>
@@ -85,9 +88,9 @@ import PageBody from "@/components/PageBody/index";
 import { getDocAssignmentListTeacherByCrs } from "@/api/assignment";
 import timeMixins from "@/mixins/time";
 import { mapState } from "vuex";
-import DeleteAssignment from "./components/DeleteAssignment";
-import UpdateAssignment from "./components/UpdateAssignment";
-import CreateAssignment from "./components/CreateAssignment";
+import DeleteAssignment from "@/components/AssignmentCRUD/DeleteAssignment";
+import UpdateAssignment from "@/components/AssignmentCRUD/UpdateAssignment";
+import CreateAssignment from "@/components/AssignmentCRUD/CreateAssignment";
 
 export default {
   computed: {
@@ -110,6 +113,7 @@ export default {
   },
   data() {
     return {
+      assignType: 1,
       docData: []
     };
   },
@@ -117,7 +121,7 @@ export default {
     pushNewAssignment(item) {
       this.docData.push(item);
     },
-    modifyDocData(modifiedItem) {
+    updateData(modifiedItem) {
       let length = this.docData.length;
       for (let i = 0; i < length; i++) {
         if (modifiedItem.id === this.docData[i].id) {