querySelectorAll

src/components/tableList.vue

@@ -668,6 +668,11 @@
                 : scope.row[item.prop2] + "~" + scope.row[item.prop3]
             }}
           </span>
+          <template v-else-if="item.scope === 'courseAbout'">
+            <div v-for="(item, index) in scope.row[item.prop]" :key="index">
+            {{ item.courseName }}  ({{ item.aliasName }})
+          </div>
+          </template>
           <div v-else-if="item.scope === 'changAdress'">
             <div>地点：{{ scope.row[item.prop1] }}</div>
             <div>

src/newApi/course.js

@@ -46,6 +46,30 @@ export default {
             method: 'get',
         })
     },
+    //查询商品双师资模板列表
+    inquireCourseTeacherList(data) {
+        return request({
+            url: `/goods/course/teacher/list`,
+            method: 'get',
+            params: data
+        })
+    },
+    //新增商品双师资模板
+    addCourseTeacherList(data) {
+        return request({
+            url: `/goods/course/teacher`,
+            method: 'post',
+            data
+        })
+    },
+    //修改商品双师资模板
+    editCourseTeacherList(data) {
+        return request({
+            url: `/goods/course/teacher/edit`,
+            method: 'post',
+            data
+        })
+    },
     //课程统计报表
     inquireCoursestatement(data) {
         return request({

src/store/modules/tagsView.js

@@ -2,7 +2,7 @@ import { MessageBox } from 'element-ui';
 const state = {
   visitedViews: [],
   cachedViews: [],
-  alertPage: ["CommodityManageMentAdd", "CommodityManageMentEdit", "FestivalAdd", "FestivalEdit", "ChapterAdd", "ChapterEdit", "ModuleManagementAdd", "ModuleManagementEdit", "BasicInfoEdit", "BasicInfoAdd", "ChapterContent", "EditCourse", "OrderDetail", "OrderPrice", "AddOrder", "EditPaper", "AddPaper", "TopicAddPaper", "ChapterVolumeManagementEdit", "ChapterVolumeManagementAdd", "VolumeManagementAdd", "VolumeManagementEdit", "HandoutListEdit", "HandoutListAdd", "StudentXQ", "AddClass", "ManageClass", "NotificationInfo", "NotificationListAdd", "NotificationEdit", "BulkImportPlan", "MatchInfoData", "BatchRecord", "OrderChargeInfo", "RefundDocument", "BillingBillCharges", "AddMockExam", "EditMockExam","RecordQusetion"],
+  alertPage: ["CommodityManageMentAdd", "CommodityManageMentEdit", "FestivalAdd", "FestivalEdit", "ChapterAdd", "ChapterEdit", "ModuleManagementAdd", "ModuleManagementEdit", "BasicInfoEdit", "BasicInfoAdd", "ChapterContent", "EditCourse", "OrderDetail", "OrderPrice", "AddOrder", "EditPaper", "AddPaper", "TopicAddPaper", "ChapterVolumeManagementEdit", "ChapterVolumeManagementAdd", "VolumeManagementAdd", "VolumeManagementEdit", "HandoutListEdit", "HandoutListAdd", "StudentXQ", "AddClass", "ManageClass", "NotificationInfo", "NotificationListAdd", "NotificationEdit", "BulkImportPlan", "MatchInfoData", "BatchRecord", "OrderChargeInfo", "RefundDocument", "BillingBillCharges", "AddMockExam", "EditMockExam","RecordQusetion","CommoditySetTeacher"],
 }
 
 const mutations = {

src/views/Marketing/goods/commodityManageMent/index.vue

@@ -17,6 +17,12 @@
       @editInfo="editInfo"
     >
       <template slot="btn" slot-scope="props">
+        <el-button
+          v-if="props.scope.row.goodsType == 1"
+          type="text"
+          @click="setTeacher(props.scope.row)"
+          >双师制设置</el-button
+        >
         <el-button type="text" @click="addClick(props.scope.row, 0)"
           >修改</el-button
         >
@@ -54,7 +60,7 @@ export default {
         border: true,
         choice: true,
         addHide: false,
-        changeWidth:"180px",
+        changeWidth: "180px",
         backFatherBtn: {
           status: false,
           title: "未定义",
@@ -188,9 +194,9 @@ export default {
           hidden: false,
         },
         {
-          label:"科目",
-          prop:"subjectNames",
-          hidden:true
+          label: "科目",
+          prop: "subjectNames",
+          hidden: true,
         },
         {
           label: "业务层次",
@@ -358,6 +364,33 @@ export default {
         }
       });
     },
+    //双师制设置
+    setTeacher(data) {
+      const jump = () => {
+        this.$router.push({
+          path: "commoditySetTeacher",
+          query: {
+            id: data.goodsId,
+          },
+        });
+      };
+      const statusPage = this.$store.state.tagsView.visitedViews.some(
+        (item) => {
+          return item.name == "CommoditySetTeacher";
+        }
+      );
+      if (statusPage) {
+        this.$store
+          .dispatch("tagsView/delCachedView", {
+            name: "CommoditySetTeacher",
+          })
+          .then((res) => {
+            jump();
+          });
+      } else {
+        jump();
+      }
+    },
     addClick(v, int) {
       if (v === undefined) {
         this.$router.push({

src/views/Marketing/goods/commodityManageMent/teacher/index.vue

@@ -0,0 +1,382 @@
+<template>
+  <div id="commoditySetTeacher">
+    <table-list
+      :tableSets="tableSet"
+      :tableData="tableData"
+      @addClick="addClick"
+      :navText="navText"
+      :loading="loading"
+    >
+      <template slot="btn" slot-scope="props">
+        <el-button type="text" @click="edit(props.scope.row)">编辑</el-button>
+        <el-button type="text" @click="del(props.scope.row)">删除</el-button>
+      </template>
+    </table-list>
+    <!-- <pagination
+      :total="total"
+      :pageSize="formData.pageSize"
+      :currentPage="formData.pageNum"
+      @handleSizeChange="handleSizeChange"
+      @handleCurrentChange="handleCurrentChange"
+    /> -->
+    <el-dialog
+      :visible.sync="dialogVisible"
+      width="1200px"
+      :show-close="false"
+      :close-on-click-modal="false"
+    >
+      <div slot="title" class="hearders">
+        <div class="leftTitle">关联课程</div>
+        <div class="rightBoxs">
+          <img src="@/assets/images/Close@2x.png" alt="" @click="closeBZ" />
+        </div>
+      </div>
+      <div>
+        <el-form
+          label-position="right"
+          label-width="150px"
+          :model="resultData"
+          ref="resultData"
+        >
+          <el-form-item label="模板名称" prop="name">
+            <el-input v-model="resultData.name"></el-input>
+          </el-form-item>
+          <el-form-item label="关联课程" prop="majors">
+            <el-button type="primary" size="small" @click="link"
+              >关联课程</el-button
+            >
+            <el-table
+              v-if="resultData.courseList && resultData.courseList.length > 0"
+              border
+              :data="resultData.courseList"
+              style="width: 100%"
+              max-height="250"
+              :header-cell-style="{ 'text-align': 'center' }"
+            >
+              <el-table-column prop="code" label="编码" width="200">
+              </el-table-column>
+              <el-table-column prop="courseName" label="名称" width="300">
+              </el-table-column>
+              <el-table-column prop="subjectName" label="科目" width="200">
+              </el-table-column>
+              <el-table-column prop="aliasName" label="别名(必填)" width="200">
+                <template slot-scope="scope">
+                  <el-input v-model="scope.row['aliasName']"></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column label="操作" width="108">
+                <template slot-scope="scope">
+                  <el-button
+                    @click="delCourse(scope.row.courseId)"
+                    type="text"
+                    size="small"
+                  >
+                    删除
+                  </el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-form-item>
+        </el-form>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="closeBZ">取 消</el-button>
+        <el-button @click="submits">确 定</el-button>
+      </span>
+    </el-dialog>
+    <select-course ref="selectCourse" @backData="backData" />
+  </div>
+</template>
+
+<script>
+import tableList from "@/components/tableList";
+import pagination from "@/components/pagination";
+import selectCourse from "./selectCourse.vue";
+export default {
+  name: "CommoditySetTeacher",
+  components: { tableList, pagination, selectCourse },
+  data() {
+    return {
+      loading: false, //当前表单加载是否加载动画
+      goodsId: "", //商品ID
+      dialogVisible: false,
+      bieName: "",
+      navText: {
+        title: "双师制模板设置",
+        num: false,
+        border: true,
+        choice: true,
+        addHide: false,
+        changeWidth: "180px",
+        backFatherBtn: {
+          status: false,
+          title: "未定义",
+        },
+      },
+      resultData: {
+        name: "",
+        courseList: [],
+      },
+      topType: true,
+      formData: {
+        pageSize: 10,
+        pageNum: 1,
+      },
+      // 表单
+      tableSet: [
+        {
+          label: "模板名称",
+          prop: "name",
+          hidden: true,
+        },
+        {
+          label: "关联课程",
+          prop: "courseList",
+          scope: "courseAbout",
+          hidden: true,
+        },
+      ],
+      tableData: [], //表单数据
+      total: 0, //一共多少条
+    };
+  },
+  created() {
+    this.goodsId = this.$route.query.id;
+  },
+  mounted() {
+    this.search();
+  },
+  methods: {
+    edit(v) {
+      this.resultData.id = v.id;
+      this.resultData.name = v.name;
+      this.resultData.courseList = v.courseList;
+      console.log(this.resultData);
+      this.dialogVisible = true;
+    },
+    addClick() {
+      this.resultData.id = "";
+      this.resultData.name = "";
+      this.resultData.courseList = [];
+      this.dialogVisible = true;
+      this.$nextTick(() => {
+        this.$refs["listData"];
+      });
+    },
+    closeBZ() {
+      this.dialogVisible = false;
+    },
+    link() {
+      //打开关联课程组件
+      this.$refs.selectCourse.openBox(this.goodsId, this.resultData.courseList);
+    },
+    //弹窗回调
+    backData(array) {
+      let size = this.resultData.courseList.length + array.length;
+      if (size > 3) {
+        this.$message.warning("最多关联3条数据,请重新选择！");
+      } else {
+        if (array && array.length > 0) {
+          array.forEach((item) => {
+            let data = {
+              courseId: item.courseId,
+              code: item.code,
+              courseName: item.courseName,
+              subjectId: item.subjectId,
+              subjectName: item.subjectName,
+              aliasName: "",
+            };
+            this.resultData.courseList.push(data);
+          });
+        }
+      }
+    },
+    search() {
+      let param = {
+        goodsId: this.goodsId,
+      };
+      this.$api.inquireCourseTeacherList(param).then((res) => {
+        console.log(res, "res");
+        if (res.code == 200) {
+          this.tableData = res.data;
+        }
+      });
+    },
+    init() {
+      this.search();
+    },
+    delCourse(courseId) {
+      this.resultData.courseList = this.resultData.courseList.filter(
+        (x) => x.courseId !== courseId
+      );
+    },
+    del(v) {
+      console.log(v, "v");
+      //删除
+      let param = {
+        id: v.id,
+        status: -1,
+      };
+      this.$api.editCourseTeacherList(param).then((res) => {
+        this.$message.success("删除成功");
+        this.dialogVisible = false;
+        this.search();
+      });
+    },
+    handleSizeChange(v) {
+      this.formData.pageSize = v;
+      this.formData.pageNum = 1;
+      this.search();
+    },
+    handleCurrentChange(v) {
+      this.formData.pageNum = v;
+      this.search();
+    },
+    submits() {
+      if (
+        this.resultData.courseList &&
+        this.resultData.courseList.length > 1 &&
+        this.resultData.courseList.length < 4
+      ) {
+        let data = this.resultData.courseList.filter((x) => x.aliasName == "");
+        if (data && data.length > 0) {
+          this.$message.warning("请先填写别名");
+        } else {
+          let subjectId = this.resultData.courseList[0].subjectId;
+          let flag = this.resultData.courseList.every((items) => {
+            return items.subjectId === subjectId;
+          });
+          if (flag) {
+            if (this.resultData.id && this.resultData.id != "") {
+              //修改
+              let param = {
+                id: this.resultData.id,
+                goodsId: this.goodsId,
+                name: this.resultData.name,
+                courseList: this.resultData.courseList,
+              };
+              this.$api.editCourseTeacherList(param).then((res) => {
+                this.$message.success("修改成功");
+                this.dialogVisible = false;
+                this.search();
+              });
+            } else {
+              //新增
+              let param = {
+                goodsId: this.goodsId,
+                name: this.resultData.name,
+                courseList: this.resultData.courseList,
+              };
+              this.$api.addCourseTeacherList(param).then((res) => {
+                this.$message.success("添加成功");
+                this.dialogVisible = false;
+                this.search();
+              });
+            }
+          } else {
+            this.$message.warning(
+              "只能选择相同科目的课程进行关联,请重新选择！"
+            );
+          }
+        }
+      } else {
+        this.$message.warning("最多关联3条/最少关联2条数据,请重新选择！");
+      }
+      console.log(this.resultData, "resultData");
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+/deep/.el-button {
+  border-radius: 8px;
+}
+/deep/.el-dialog {
+  border-radius: 8px;
+  .el-dialog__header {
+    padding: 0;
+    .hearders {
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0px 18px 0px 20px;
+      border-bottom: 1px solid #e2e2e2;
+      .leftTitle {
+        font-size: 14px;
+        font-weight: bold;
+        color: #2f4378;
+      }
+      .rightBoxs {
+        display: flex;
+        align-items: center;
+        img {
+          width: 14px;
+          height: 14px;
+          margin-left: 13px;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+  .el-dialog__footer {
+    padding: 0;
+    .dialog-footer {
+      padding: 0px 40px;
+      height: 70px;
+      border-top: 1px solid #e2e2e2;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+    }
+  }
+}
+.imgBox {
+  width: 100%;
+  // height: 210px;
+  border: 1px solid #e2e2e2;
+  border-radius: 8px;
+  padding: 8px 8px 3px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .imgLabel {
+    flex: 1;
+    width: 100%;
+    border: 1px dotted #e2e2e2;
+    color: #999;
+    font-size: 14px;
+    cursor: pointer;
+    border-radius: 8px;
+    .msPhoto {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      max-width: 100%;
+      max-height: 270px;
+      img {
+        max-width: 100%;
+        max-height: 270px;
+      }
+    }
+    .imgbbx {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      i {
+        font-weight: bold;
+        margin: 14px 0;
+        font-size: 24px;
+      }
+    }
+  }
+  p {
+    margin: 5px 0px;
+  }
+}
+</style>
+

src/views/Marketing/goods/commodityManageMent/teacher/selectCourse.vue

@@ -0,0 +1,204 @@
+<template>
+  <div id="selectCourse">
+    <el-dialog
+      @opened="prepareEnd"
+      :visible.sync="dialogVisibleTableBoxs"
+      width="1100px"
+      :show-close="false"
+      :close-on-click-modal="false"
+    >
+      <div slot="title" class="hearders">
+        <div class="leftTitle">关联双师资课程</div>
+        <div class="rightBoxs">
+          <img
+            src="@/assets/images/Close@2x.png"
+            alt=""
+            @click="dialogVisibleTableBoxs = false"
+          />
+        </div>
+      </div>
+      <div style="margin-bottom: 10px">
+        <!-- 搜索框 -->
+        <el-input
+          style="width: 230px; margin: 0px 10px"
+          :size="size"
+          v-model="formData['key']"
+          placeholder="课程标题/课程编码"
+        ></el-input>
+        <el-button :size="size" type="primary" @click="getInfos(1)"
+          >查询</el-button
+        >
+        <el-button :size="size" @click="getInfos(0)">重置</el-button>
+      </div>
+      <span style="color: red">注：最多选择3条数据进行关联</span>
+      <el-table
+        ref="multipleTable"
+        :data="tableData"
+        border
+        @selection-change="selectCheck"
+        :row-key="getRowKeys"
+        :header-cell-style="{
+          'background-color': '#eee',
+          padding: '8px',
+          color: '#333',
+        }"
+      >
+        <el-table-column
+          align="center"
+          type="selection"
+          width="55"
+          header-align="center"
+          :selectable="checkboxT"
+          :reserve-selection="true"
+        >
+        </el-table-column>
+        <template v-for="(item, index) in tableSet">
+          <el-table-column
+            v-if="item.scope !== 'inputs'"
+            :width="item.width"
+            :key="index"
+            :label="item.label"
+            align="center"
+            :show-overflow-tooltip="true"
+            header-align="center"
+            ><template slot-scope="scope">
+              <span>{{ scope.row[item.prop] }}</span></template
+            >
+          </el-table-column></template
+        >
+      </el-table>
+      <pagination
+        :total="total"
+        :pageSize="formData.pageSize"
+        :currentPage="formData.pageNum"
+        @handleSizeChange="handleSizeChange"
+        @handleCurrentChange="handleCurrentChange"
+      />
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisibleTableBoxs = false">取 消</el-button>
+        <el-button
+          type="primary"
+          :disabled="activeLists.length === 0"
+          @click="submitTab"
+          >确 定</el-button
+        >
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import pagination from "@/components/pagination";
+export default {
+  components: { pagination },
+  data() {
+    return {
+      size: "small",
+      dialogVisibleTableBoxs: false,
+      tableData: [],
+      goodsId: "",
+      tableSet: [
+        { label: "课程编码", prop: "code", width: "140px" },
+        { label: "课程科目", prop: "subjectName"},
+        { label: "课程标题", prop: "courseName" },
+      ],
+      formData: {
+        pageSize: 10,
+        pageNum: 1,
+      },
+      activeLists: [],
+      courseIds:[],
+      total: 0,
+    };
+  },
+  methods: {
+    /**
+     * 初始
+     */
+    openBox(goodsId,courseList) {
+      this.goodsId = goodsId;
+      console.log(courseList,'courseList');
+      if(courseList && courseList.length > 0){
+        this.courseIds = courseList.map(item => item.courseId)
+        console.log(this.courseIds,'courseIds');
+      }else{
+        this.courseIds = []
+      }
+      //获取商品课程
+      this.$api.obtainCourseSgoodsId(goodsId).then((res) => {
+        console.log(res, "res");
+        if (res.code == 200) {
+          this.tableData = res.rows;
+          this.total = res.total;
+        }
+        console.log(this.tableData, "this.tableData");
+      });
+      this.dialogVisibleTableBoxs = true;
+      this.$nextTick(() => {
+        this.$refs.multipleTable.clearSelection();
+      });
+    },
+    /**
+     * 搜索数据
+     */
+    getInfos(int) {
+      //重置0
+      if (int === 0) {
+        this.formData.pageSize = 10;
+        this.formData.pageNum = 1;
+      }
+      if (int === 1) {
+        this.formData.pageNum = 1;
+      }
+      this.$api.obtainCourseSgoodsId(this.goodsId).then((res) => {
+        this.tableData = res.rows;
+        this.total = res.total;
+      });
+    },
+    /**
+     * 开启动画结束执行
+     */
+    prepareEnd() {
+      this.activeLists = []; //初始清空勾选数据
+    },
+    /**
+     * 提交回调数据
+     */
+    submitTab() {
+      if(this.activeLists && this.activeLists.length > 3){
+        this.$message.warning("最多选择3条数据进行关联,进行关联，请重新选择！");
+        return;
+      }
+      this.$message.success("添加成功");
+      this.dialogVisibleTableBoxs = false;
+      this.$emit("backData", this.activeLists);
+    },
+    selectCheck(value) {
+      this.activeLists = value;
+    },
+    checkboxT(row, index) {
+      // || row.bindStatus != 0
+      if((this.courseIds.length > 0 && this.courseIds.includes(row.courseId)) ||  (row.bindStatus && row.bindStatus > 0)){
+        return false;
+      }else{
+        return true;
+      }
+    },
+    getRowKeys(row) {
+      return row.courseId;
+    },
+    handleSizeChange(v) {
+      this.formData.pageSize = v;
+      this.formData.pageNum = 1;
+      this.getInfos();
+    },
+    handleCurrentChange(v) {
+      this.formData.pageNum = v;
+      this.getInfos();
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+</style>