[更新] 完成简单 checklist

src/components/CardJudgeItem/index.vue

@@ -0,0 +1,33 @@
+<template>
+  <div :class="{ 'judge-section': true, 'judge-success': success }">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CardJudgeItem",
+  props: {
+    success: {
+      type: Boolean,
+      default: false
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/scss/app";
+.judge-section {
+  background: $white;
+  border-left: 6px solid $danger;
+  position: relative;
+}
+
+.judge-success {
+  border-left: 6px solid $success;
+}
+.judge-primary {
+  border-left: 6px solid $info;
+}
+</style>

src/components/CheckList/index.vue

@@ -0,0 +1,73 @@
+<template>
+  <div>
+    <card-judge-item v-for="item in value" :key="item.id" :success="item.level">
+      <b-tooltip :label="item.explain" position="is-left">
+        <b-checkbox
+          class="checkbox-section"
+          v-model="item.level"
+          type="is-success"
+        >
+          {{ item.content }}
+        </b-checkbox>
+      </b-tooltip>
+      <input
+        v-model="item.comment"
+        class="input-custom"
+        :class="item.level ? 'input-custom--success' : 'input-custom--danger'"
+        type="text"
+        placeholder="填写备注"
+        style="box-shadow:none;border-color:white"
+      />
+    </card-judge-item>
+  </div>
+</template>
+
+<script>
+import CardJudgeItem from "@/components/CardJudgeItem/index";
+export default {
+  name: "CheckListItem",
+  components: { CardJudgeItem },
+  props: {
+    value: {
+      type: Array,
+      default: () => []
+    }
+  },
+  watch: {
+    value: {
+      handler(newValue) {
+        this.$emit("onchange", newValue);
+      },
+      deep: true
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/scss/app";
+.checkbox-section {
+  padding: $default-margin;
+}
+
+.input-custom {
+  padding: $default-margin;
+  width: 100%;
+  border: 0;
+  box-shadow: none;
+  color: hsl(0, 0%, 21%);
+  font-size: $size-normal;
+
+  &--danger {
+    background-color: #fff8fa;
+  }
+
+  &--success {
+    background-color: #ebfff2;
+  }
+
+  &::placeholder {
+    /*color: hsl(0, 0%, 96%);*/
+  }
+}
+</style>

src/components/CheckListItem/index.vue

@@ -1,52 +0,0 @@
-<template>
-  <check-judge-item :success="checkListItem.level === 1">
-    <b-tooltip :label="checkListItem.explain" position="is-left">
-      <b-checkbox
-        v-model="checkListItem.level"
-        type="is-success"
-        :name="checkListItem.content"
-      >
-        Success
-      </b-checkbox>
-    </b-tooltip>
-    <input
-      v-model="checkListItem.comment"
-      class="input is-small"
-      type="text"
-      placeholder="填写备注"
-      style="box-shadow:none;border-color:white"
-    />
-  </check-judge-item>
-</template>
-
-<script>
-export default {
-  name: "CheckJudgeItem",
-  props: {
-    checkListItem: {
-      type: Object,
-      default: () => {}
-    }
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-@import "../../assets/scss/app";
-.judge-section {
-  background: $white;
-  border: 1px solid $grey-lighter;
-  border-left: 6px solid $danger;
-  padding: 10px;
-  margin-bottom: 10px;
-  box-shadow: 0 2px 10px rgba(161, 161, 161, 0.082);
-  position: relative;
-}
-
-.judge-success {
-  border-left: 6px solid $success;
-}
-.judge-primary {
-  border-left: 6px solid $info;
-}
-</style>

src/views/student/Review/ReviewDocDetail/index.vue

@@ -26,25 +26,15 @@
           </div>
         </div>
         <div class="column is-4">
-          <div v-for="item in detail.checkList" :key="item.id">
-            <check-judge-item :success="item.level === 1">
-              <b-tooltip :label="item.explain" position="is-left">
-                <b-checkbox
-                  :value="true"
-                  type="is-success"
-                  :name="item.content"
-                >
-                  Success
-                </b-checkbox>
-              </b-tooltip>
-              <input
-                v-model="item.comment"
-                class="input is-small"
-                type="text"
-                placeholder="填写备注"
-                style="box-shadow:none;border-color:white"
-              />
-            </check-judge-item>
+          <div class="right-part">
+            <div
+              class="button is-primary action-button"
+              :class="{ 'is-loading': submitLoading }"
+              @click="submitCheckList"
+            >
+              提 交
+            </div>
+            <check-list v-model="detail.checkList" />
           </div>
         </div>
       </div>
@@ -55,15 +45,13 @@
 import PageHeader from "@/components/PageHeader";
 import PageBody from "@/components/PageBody/index";
 import VueMarkdown from "vue-markdown";
-import { getStudentReviewDocDetail } from "@/api/review";
+import { getStudentReviewDocDetail, postStudentReviewWork } from "@/api/review";
 import timeMixins from "@/mixins/time";
 import ReviewStateTag from "@/components/ReviewStateTag/index";
-import CheckJudgeItem from "@/components/CheckListItem/index";
-import BTooltip from "buefy/src/components/tooltip/Tooltip";
+import CheckList from "@/components/CheckList/index";
 export default {
   components: {
-    BTooltip,
-    CheckJudgeItem,
+    CheckList,
     ReviewStateTag,
     PageBody,
     PageHeader,
@@ -72,8 +60,10 @@ export default {
   data() {
     return {
       detail: {
-        review: {}
-      }
+        review: {},
+        checkList: []
+      },
+      submitLoading: false
     };
   },
   mixins: [timeMixins],
@@ -82,6 +72,18 @@ export default {
     getStudentReviewDocDetail(reviewId, docReviewId).then(
       resp => (this.detail = resp.data)
     );
+  },
+  methods: {
+    submitCheckList() {
+      const { reviewId, docReviewId } = this.$route.params;
+      this.submitLoading = true;
+      postStudentReviewWork(reviewId, docReviewId, this.detail.checkList).then(
+        resp => {
+          this.submitLoading = false;
+          this.detail.checkList = resp.data;
+        }
+      );
+    }
   }
 };
 </script>
@@ -89,11 +91,20 @@ export default {
 <style lang="scss" scoped>
 @import "../../../../assets/scss/app";
 .right-part {
-  margin-top: -1.5rem;
   margin-bottom: -1.5rem;
   margin-right: -1.5rem;
   background: white;
   border-top: 1px solid #eff2f7;
-  box-shadow: $default-shadow-lighter;
+  position: sticky;
+  top: 0;
+  max-height: 100vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  box-shadow: $default-shadow;
+}
+
+.action-button {
+  width: 100%;
+  border-radius: 0;
 }
 </style>