教材列表

1

src/router/index.js

@@ -456,7 +456,9 @@ export const asyncRoutes = {
   activeMarketing:()=>import ('@/views/activityScheduling/activeMarketing'),
   // 2021双11
   '2021double11List':()=>import ('@/views/activityScheduling/2021double11List'),
-  backManager:()=>import ('@/views/backManager')
+  backManager:()=>import ('@/views/backManager'),
+  // 教材列表
+  teachManager:()=>import ('@/views/teachManager')
 }
 
 export default router

src/views/accompaniment/index.vue

@@ -39,12 +39,12 @@
             ></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item prop="clientType">
+        <!-- <el-form-item prop="clientType">
           <el-select v-model="searchForm.clientType" clearable filterable placeholder="请选择客户端类型">
             <el-option value="NETWORK_ROOM" label="网络教室" ></el-option>
             <el-option value="SMART_PRACTICE" label="智能陪练" ></el-option>
           </el-select>
-        </el-form-item>
+        </el-form-item> -->
         <el-form-item prop="categoriesId">
           <el-cascader v-model="searchForm.categoriesId"
                     style="width:100%"
@@ -286,7 +286,7 @@ export default {
         type: "",
         subjectId: "",
         categoriesId: null,
-        clientType:'',
+        clientType:'NETWORK_ROOM',
         rankType: null,
         showFlag: null
       },

src/views/accompaniment/modals/form.vue

@@ -50,7 +50,7 @@
           ></el-option>
         </el-select>
       </el-form-item>
-      <el-form-item
+      <!-- <el-form-item
         prop="sysMusicScore.clientType"
         label="客户端类型"
         :rules="[{required: true, message: '请选择客户端类型'}]"
@@ -65,7 +65,7 @@
             label="智能陪练"
           ></el-option>
         </el-select>
-      </el-form-item>
+      </el-form-item> -->
       <el-form-item
         prop="sysMusicScore.order"
         label="排序"
@@ -190,7 +190,7 @@ export default {
           url: '',
           order: '',
           musicScoreCategoriesId: [],
-          clientType: '',
+          clientType: 'NETWORK_ROOM',
         },
         sysMusicScoreAccompaniments: [
           {

src/views/teachManager/index.vue

@@ -0,0 +1,167 @@
+<!--  -->
+<template>
+  <div class="m-container">
+    <h2>
+      <div class="squrt"></div>
+      教材列表
+    </h2>
+    <div class="m-core">
+      <save-form
+        :inline="true"
+        :model="searchForm"
+        @submit="search"
+        @reset="onReSet"
+      >
+        <el-form-item>
+          <el-input
+            v-model.trim="searchForm.search"
+            clearable
+            @keyup.enter.native="search"
+            placeholder="教材编号、名称"
+          ></el-input>
+        </el-form-item>
+        <el-form-item prop="visitFlag">
+          <el-select
+            v-model.trim="searchForm.visitFlag"
+            placeholder="教材状态"
+            clearable
+          >
+            <el-option label="启动" value="1"></el-option>
+            <el-option label="停用" value="0"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button native-type="submit" type="primary">搜索</el-button>
+          <el-button native-type="reset" type="danger">重置</el-button>
+        </el-form-item>
+      </save-form>
+      <div class="btnList">
+        <el-button type="primary" @click="addTeach">新增教材</el-button>
+      </div>
+      <div class="tableWrap">
+        <el-table
+          style="width: 100%"
+          :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
+          :data="tableList"
+        >
+          <el-table-column
+            align="center"
+            prop="studentId"
+            label="教材编号"
+          ></el-table-column>
+          <el-table-column
+            align="center"
+            prop="studentId"
+            label="教材名称"
+          ></el-table-column>
+          <el-table-column
+            align="center"
+            prop="studentId"
+            label="可见分部"
+          ></el-table-column>
+          <el-table-column
+            align="center"
+            prop="studentId"
+            label="曲目数量"
+          ></el-table-column>
+          <el-table-column
+            align="center"
+            prop="studentId"
+            label="最后更新时间"
+          ></el-table-column>
+          <el-table-column
+            align="center"
+            prop="studentId"
+            label="教材状态"
+          ></el-table-column>
+          <el-table-column align="center" prop="studentId" label="操作">
+            <template slot-scope="scope">
+              <div>
+                <el-button type="text">查看</el-button>
+                <el-button type="text">修改</el-button>
+                <el-button type="text">停用</el-button>
+                <el-button type="text">启用</el-button>
+                <el-button type="text">删除</el-button>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+        <pagination
+          sync
+          :total.sync="rules.total"
+          :page.sync="rules.page"
+          :limit.sync="rules.limit"
+          :page-sizes="rules.page_size"
+          @pagination="getList"
+        />
+      </div>
+    </div>
+    <el-dialog
+      title="新增教材"
+      :visible.sync="teachVisible"
+      width="800px"
+    >
+     <addTeach />
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="teachVisible = false">取 消</el-button>
+        <el-button type="primary" @click="teachVisible = false"
+          >确 定</el-button
+        >
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+import { getToken } from "@/utils/auth";
+import pagination from "@/components/Pagination/index";
+import load from "@/utils/loading";
+import addTeach from './modals/addTeach'
+export default {
+  components: { pagination,addTeach },
+  data() {
+    return {
+      searchForm: {
+        search: null,
+      },
+
+      tableList: [],
+      organList: [],
+      rules: {
+        // 分页规则
+        limit: 10, // 限制显示条数
+        page: 1, // 当前页
+        total: 0, // 总条数
+        page_size: [10, 20, 40, 50], // 选择限制显示条数
+      },
+      teachVisible:false
+    };
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    // 获取分部
+
+    this.init();
+  },
+  methods: {
+    init() {},
+    getList() {},
+    search() {
+      this.rules.page = 1;
+      this.getList();
+    },
+    onReSet() {},
+    addTeach(){
+      this.teachVisible = true;
+    }
+  },
+};
+</script>
+<style lang='scss' scoped>
+.btnList {
+  margin-bottom: 20px;
+}
+</style>

src/views/teachManager/modals/addTeach.vue

@@ -0,0 +1,169 @@
+<template>
+  <div>
+    <el-alert title="教材信息" :closable="false" class="alert" type="info" />
+    <el-form :model="form" :inline="true" label-width="120px" class="form">
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="教材名称">
+            <el-input v-model="form.name" style="width: 260px"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="教材分类">
+            <select-all
+              style="width: 260px"
+              v-model.trim="form.organId"
+              class="organSelect"
+              filterable
+              placeholder="请选择分部"
+              multiple
+              clearable
+            >
+              <el-option
+                v-for="(item, index) in selects.branchs"
+                :key="index"
+                :label="item.name"
+                :value="item.id"
+              ></el-option>
+            </select-all>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-form-item
+          label="教材封面图"
+          prop="poster"
+          :rules="[
+            {
+              required: true,
+              message: '请上教材封面图',
+              trigger: 'blur',
+            },
+          ]"
+          label-width="120px"
+        >
+          <upload
+            v-if="!form.poster"
+            v-model="form.poster"
+            :imageWidthM="210"
+            :imageHeightM="268"
+          ></upload>
+          <img v-else :src="form.poster" alt="" width="210px" height="268px" />
+          <p style="color: red">
+            请上传210*268像素，大小2M以内，格式为jpg、png、gif图片
+          </p>
+        </el-form-item>
+      </el-row>
+      <el-alert
+        title="教材曲目分类"
+        :closable="false"
+        class="alert"
+        type="info"
+      />
+
+      <div class="treeWrap">
+        <el-button type="primary" @click="addCate">添加分类</el-button>
+        <el-tree
+          :data="form.data"
+          show-checkbox
+          node-key="index"
+          default-expand-all
+          :expand-on-click-node="false"
+        >
+          <span class="custom-tree-node" slot-scope="{ node, data }">
+            <span>{{ node.label }}</span>
+            <span>
+              <el-button
+                type="text"
+                size="mini"
+                @click="() => appendItem(data)"
+              >
+               添加
+              </el-button>
+              <el-button
+                type="text"
+                size="mini"
+                @click="() => removeItem(node, data)"
+              >
+                删除
+              </el-button>
+            </span>
+          </span>
+        </el-tree>
+      </div>
+    </el-form>
+  </div>
+</template>
+<script>
+import Upload from "@/components/Upload/index";
+export default {
+  components: {
+    Upload,
+  },
+  data() {
+    return {
+      form: {
+        organId: [],
+        name: null,
+        data: [],
+        index: 0,
+      },
+    };
+  },
+  mounted() {
+    this.$store.dispatch("setBranchs");
+  },
+  methods: {
+    // 递归遍历数组
+    recursionDate(arr) {
+      // 这里来了
+      if (arr.length > 0) {
+        let newArr = [];
+        for (let i = 0; i < arr.length; i++) {
+          let obj = {
+            ...arr[i],
+            index: arr[i].id,
+          };
+
+          if (arr[i].sysMenus && arr[i].sysMenus.length > 0) {
+            obj.children = recursionDate(arr[i].sysMenus);
+          }
+          newArr.push(obj);
+        }
+        return newArr;
+      }
+    },
+    appendItem(data) {},
+    removeItem(node, data) {},
+    addCate() {
+
+      this.$prompt("请输入分类名称", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        closeOnClickModal:false,
+        inputPattern:
+          /^.{1,30}$/,
+        inputErrorMessage: "请输入1到15个汉字或字符",
+      })
+        .then(({ value }) => {
+           this.index += 1;
+           this.form.data.push({index:`xxx${this.index}`,label:value})
+        })
+        .catch(() => {
+
+        });
+      // this.form.data.push({})
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.alert {
+  margin-bottom: 20px;
+}
+.form {
+  /deep/.el-form-item {
+    margin-right: 0 !important;
+  }
+}
+</style>