课程管理-课程目标管理

src/modules/base/api.js

@@ -580,6 +580,39 @@ export const batchAddTeacherSimple = (datas) => {
   return $postParam("/api/admin/teach/course/select_create_teacher", datas);
 };
 
+// course-target-manage
+export const courseTargetList = (courseCode) => {
+  return $postParam("/api/admin/teach/course_target/list", { courseCode });
+};
+export const updateCourseTarget = (datas) => {
+  return $post("/api/admin/teach/course_target/save", datas);
+};
+export const deleteCourseTarget = (id) => {
+  return $postParam("/api/admin/teach/course_target/delete", { id });
+};
+export const courseDimensionTree = (courseCode) => {
+  return $postParam("/api/admin/teach/course_target/dimension_tree", {
+    courseCode,
+  });
+};
+// comment-style-manage
+export const courseEvaluationList = (courseCode) => {
+  return $postParam("/api/admin/teach/course_evaluation/list", { courseCode });
+};
+export const updateCourseEvaluation = (datas) => {
+  return $post("/api/admin/teach/course_evaluation/save", datas);
+};
+export const deleteCourseEvaluation = (id) => {
+  return $postParam("/api/admin/teach/course_evaluation/delete", { id });
+};
+// course-weight-manage
+export const courseWeightDetail = (courseCode) => {
+  return $postParam("/api/admin/teach/course_weight/find", { courseCode });
+};
+export const courseWeightSave = (datas) => {
+  return $post("/api/admin/teach/course_weight/save", datas);
+};
+
 // exam-student-manage
 export const examStudentListPage = (datas) => {
   return $postParam("/api/admin/basic/exam_student/page", datas);

src/modules/base/components/course-simple/CourseEvaluationManage.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="">CourseEvaluationManage</div>
+</template>
+
+<script>
+export default {
+  name: "CourseEvaluationManage",
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>

src/modules/base/components/course-simple/CourseSimpleDetail.vue

@@ -25,7 +25,7 @@
       </div>
 
       <div v-if="modalIsShow">
-        <component :is="compName" :course="course"></component>
+        <component :is="curTab" :course="course"></component>
       </div>
 
       <div slot="footer"></div>
@@ -36,10 +36,19 @@
 <script>
 import ClazzSimpleManage from "./ClazzSimpleManage.vue";
 import TeacherSimpleManage from "./TeacherSimpleManage.vue";
+import CourseTargetManage from "./CourseTargetManage.vue";
+import CourseEvaluationManage from "./CourseEvaluationManage.vue";
+import CourseWeightManage from "./CourseWeightManage.vue";
 
 export default {
   name: "course-simple-detail",
-  components: { ClazzSimpleManage, TeacherSimpleManage },
+  components: {
+    ClazzSimpleManage,
+    TeacherSimpleManage,
+    CourseTargetManage,
+    CourseEvaluationManage,
+    CourseWeightManage,
+  },
   props: {
     course: {
       type: Object,
@@ -51,24 +60,31 @@ export default {
   data() {
     return {
       modalIsShow: false,
-      curTab: "clazz",
+      curTab: "ClazzSimpleManage",
       tabs: [
         {
           name: "班级管理",
-          val: "clazz",
+          val: "ClazzSimpleManage",
         },
         {
           name: "教师团队管理",
-          val: "teacher",
+          val: "TeacherSimpleManage",
+        },
+        {
+          name: "课程目标管理",
+          val: "CourseTargetManage",
+        },
+        {
+          name: "评价方式管理",
+          val: "CourseEvaluationManage",
+        },
+        {
+          name: "权重设置",
+          val: "CourseWeightManage",
         },
       ],
     };
   },
-  computed: {
-    compName() {
-      return `${this.curTab}-simple-manage`;
-    },
-  },
   methods: {
     cancel() {
       this.modalIsShow = false;

src/modules/base/components/course-simple/CourseTargetManage.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="course-target-manage">
+    <div class="part-box part-box-pad box-justify">
+      <p>请根据《课程教学大纲》中的课程对“毕业要求”进行填写</p>
+      <div>
+        <el-button type="success">导入课程知识点</el-button>
+        <el-button type="primary" @click="toAdd">新增目标</el-button>
+      </div>
+    </div>
+    <div class="part-box part-box-pad">
+      <el-table :data="dataList">
+        <el-table-column type="index" label="序号" width="70"></el-table-column>
+        <el-table-column prop="targetName" label="课程目标"></el-table-column>
+        <el-table-column prop="targetValue" label="毕业要求指标">
+          <template slot-scope="scope">
+            <p v-for="item in scope.row.targetValue" :key="item.dimensionId">
+              {{ item.dimensionName }}（{{ item.dimensionCode }}）
+            </p>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="degreeRequirement"
+          label="毕业要求"
+        ></el-table-column>
+        <el-table-column class-name="action-column" label="操作" width="120px">
+          <template slot-scope="scope">
+            <el-button
+              class="btn-primary"
+              type="text"
+              @click="toEdit(scope.row)"
+              >编辑</el-button
+            >
+            <el-button
+              class="btn-danger"
+              type="text"
+              @click="toDelete(scope.row)"
+              >删除</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <!-- ModifyCourseTarget -->
+    <modify-course-target
+      ref="ModifyCourseTarget"
+      :instance="curRow"
+      @modified="getList"
+    ></modify-course-target>
+  </div>
+</template>
+
+<script>
+import { courseTargetList, deleteCourseTarget } from "../../api";
+import ModifyCourseTarget from "./ModifyCourseTarget.vue";
+
+export default {
+  name: "CourseTargetManage",
+  components: { ModifyCourseTarget },
+  props: {
+    instance: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+      dataList: [],
+      curRow: {},
+    };
+  },
+  mounted() {
+    // this.getList();
+  },
+  methods: {
+    async getList() {
+      const res = await courseTargetList(this.instance.courseCode);
+      this.dataList = res || [];
+    },
+    toAdd() {
+      this.curRow = { courseCode: this.instance.courseCode };
+      this.$refs.ModifyCourseTarget.open();
+    },
+    toEdit(row) {
+      this.curRow = { ...row, courseCode: this.instance.courseCode };
+      this.$refs.ModifyCourseTarget.open();
+    },
+    async toDelete(row) {
+      const confirm = await this.$confirm(
+        `确定要删除课程目标【${row.targetName}】吗?`,
+        "提示",
+        {
+          type: "warning",
+        }
+      ).catch(() => {});
+      if (confirm !== "confirm") return;
+
+      await deleteCourseTarget(row.id);
+      this.$message.success("删除成功！");
+      this.dataList = this.dataList.filter((item) => item.id !== row.id);
+    },
+  },
+};
+</script>

src/modules/base/components/course-simple/CourseWeightManage.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="">CourseWeightManage</div>
+</template>
+
+<script>
+export default {
+  name: "CourseWeightManage",
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>

src/modules/base/components/course-simple/ModifyCourseTarget.vue

@@ -0,0 +1,201 @@
+<template>
+  <div>
+    <el-dialog
+      class="modify-course-target"
+      :visible.sync="modalIsShow"
+      :title="title"
+      top="10vh"
+      width="448px"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      append-to-body
+      @open="visibleChange"
+    >
+      <el-form
+        ref="modalFormComp"
+        :model="modalForm"
+        :rules="rules"
+        :key="modalForm.id"
+        label-width="100px"
+      >
+        <el-form-item prop="targetName" label="课程目标：">
+          <el-input
+            v-model.trim="modalForm.targetName"
+            placeholder="请输入课程目标"
+            clearable
+          ></el-input>
+        </el-form-item>
+        <el-form-item prop="dimensionIdList" label="课程目标：">
+          <el-button type="text" class="btn-primary" @click="toSelectDimension"
+            >选择知识点</el-button
+          >
+          <el-table :data="targetValue" :show-header="false">
+            <el-table-column
+              prop="dimensionName"
+              label="知识点"
+            ></el-table-column>
+            <el-table-column class-name="action-column" label="操作" width="60">
+              <template slot-scope="scope">
+                <i
+                  class="el-icon-error"
+                  @click="toDeleteDimension(scope.$index)"
+                ></i>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-form-item>
+        <el-form-item prop="degreeRequirement" label="毕业要求：">
+          <el-input
+            v-model="modalForm.degreeRequirement"
+            placeholder="请输入毕业要求"
+            type="textarea"
+            :autosize="{ minRows: 2, maxRows: 6 }"
+            :maxlength="999"
+            show-word-limit
+          ></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button type="primary" :disabled="isSubmit" @click="submit"
+          >确认</el-button
+        >
+        <el-button @click="cancel">取消</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- SelectDimensionDialog -->
+    <select-dimension-dialog
+      ref="SelectDimensionDialog"
+      :course-code="instance.courseCode"
+      :selected-data="modalForm.dimensionIdList"
+      @confirm="dimensionSelected"
+    ></select-dimension-dialog>
+  </div>
+</template>
+
+<script>
+import { updateCourseTarget } from "../../api";
+import SelectDimensionDialog from "./SelectDimensionDialog.vue";
+
+const initModalForm = {
+  id: null,
+  courseCode: "",
+  targetName: "",
+  degreeRequirement: "",
+  dimensionIdList: [],
+};
+
+export default {
+  name: "modify-course-target",
+  components: { SelectDimensionDialog },
+  props: {
+    instance: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+  },
+  computed: {
+    isEdit() {
+      return !!this.instance.id;
+    },
+    title() {
+      return (this.isEdit ? "编辑" : "新增") + "课程目标";
+    },
+  },
+  data() {
+    return {
+      modalIsShow: false,
+      isSubmit: false,
+      modalForm: { ...initModalForm },
+      targetValue: [],
+      rules: {
+        targetName: [
+          {
+            required: true,
+            message: "请输入课程目标",
+            trigger: "change",
+          },
+          {
+            max: 30,
+            message: "课程目标不能超过30个字",
+            trigger: "change",
+          },
+        ],
+        dimensionIdList: [
+          {
+            validator: (rule, value, callback) => {
+              if (value && value.length) {
+                return callback();
+              }
+              return callback(new Error("请选择毕业要求指标"));
+            },
+          },
+        ],
+        degreeRequirement: [
+          {
+            required: false,
+            max: 999,
+            message: "课程目标不能超过999个字",
+            trigger: "change",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    initData(val) {
+      this.modalForm = this.$objAssign(initModalForm, val);
+      if (val.targetValue) {
+        this.targetValue = [...val.targetValue];
+        this.updateDimensionIds();
+      } else {
+        this.modalForm.dimensionIdList = [];
+      }
+    },
+    visibleChange() {
+      this.initData(this.instance);
+    },
+    cancel() {
+      this.modalIsShow = false;
+    },
+    open() {
+      this.modalIsShow = true;
+    },
+    toSelectDimension() {
+      this.$refs.SelectDimensionDialog.open();
+    },
+    updateDimensionIds() {
+      this.modalForm.dimensionIdList = this.targetValue.map(
+        (item) => item.dimensionId
+      );
+    },
+    dimensionSelected(dimensions) {
+      this.targetValue = [...dimensions];
+      this.updateDimensionIds();
+      this.$refs.modalFormComp.validateField("dimensionIdList").catch(() => {});
+    },
+    toDeleteDimension(index) {
+      this.targetValue.splice(index, 1);
+      this.updateDimensionIds();
+      this.$refs.modalFormComp.validateField("dimensionIdList").catch(() => {});
+    },
+    async submit() {
+      const valid = await this.$refs.modalFormComp.validate().catch(() => {});
+      if (!valid) return;
+
+      if (this.isSubmit) return;
+      this.isSubmit = true;
+      const res = await updateCourseTarget(this.modalForm).catch(() => {});
+      this.isSubmit = false;
+
+      if (!res) return;
+
+      this.$message.success(this.title + "成功！");
+      this.$emit("modified");
+      this.cancel();
+    },
+  },
+};
+</script>

src/modules/base/components/course-simple/SelectDimensionDialog.vue

@@ -0,0 +1,102 @@
+<template>
+  <el-dialog
+    class="select-user-dialog"
+    :visible.sync="modalIsShow"
+    title="选择知识点"
+    top="10px"
+    width="600px"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    append-to-body
+    @opened="visibleChange"
+  >
+    <el-tree
+      ref="treeRef"
+      :data="roleTree"
+      show-checkbox
+      check-on-click-node
+      node-key="dimensionId"
+      :props="defaultProps"
+    >
+    </el-tree>
+
+    <div slot="footer">
+      <el-button type="primary" @click="submit">确认</el-button>
+      <el-button @click="cancel">取消</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { courseDimensionTree } from "../../api";
+
+export default {
+  name: "select-dimension-dialog",
+  props: {
+    selectedData: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+    courseCode: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      modalIsShow: false,
+      treeData: [],
+      defaultProps: {
+        children: "children",
+        label: "dimensionName",
+      },
+    };
+  },
+  watch: {
+    courseCode: {
+      immediate: true,
+      handler(val, oldVal) {
+        if (!val) return;
+        if (val !== oldVal) this.getTree();
+      },
+    },
+  },
+  methods: {
+    async getTree() {
+      const data = await courseDimensionTree(this.courseCode);
+      this.treeData = data || [];
+    },
+    visibleChange() {
+      this.$refs.treeRef.setCheckedKeys(this.selectedData);
+    },
+    cancel() {
+      this.modalIsShow = false;
+    },
+    open() {
+      this.modalIsShow = true;
+    },
+    submit() {
+      const selectedNodes = this.$refs.treeRef.setCheckedNodes();
+
+      if (!selectedNodes.length) {
+        this.$message.error("请选择知识点");
+        return;
+      }
+
+      this.$emit(
+        "confirm",
+        selectedNodes.map((item) => {
+          return {
+            dimensionId: item.dimensionId,
+            dimensionCode: item.dimensionCode,
+            dimensionName: item.dimensionName,
+          };
+        })
+      );
+      this.cancel();
+    },
+  },
+};
+</script>