11

.gitignore

@@ -26,4 +26,6 @@ dist-ssr
 src/*.d.ts
 /.idea/
 yarn.lock
-package-locl.json
+package-locl.json
+
+src/*/drop.*

src/App.vue

@@ -1,11 +1,15 @@
 <script setup>
-
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
 </script>
 
 <template>
-  <div class="w-screen h-screen overflow-y-auto _scrollbar scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-gray-300 scrollbar-track-transparent">
-    <router-view></router-view>
-  </div>
+  <el-config-provider :locale="zhCn">
+    <div
+      class="w-screen h-screen overflow-y-auto _scrollbar scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-gray-300 scrollbar-track-transparent">
+      <router-view></router-view>
+    </div>
+  </el-config-provider>
+
 </template>
 
 

src/components/RemoteSelect/index.vue

@@ -0,0 +1,96 @@
+<script setup>
+
+// <{
+//   url?: string,
+//   to?: 'team' | 'grade' | 'class' | 'subject',
+//   modelValue?: string,
+//   modelName?: string,
+//   change?: (item: object | undefined) => void,
+//   fields?: [string, string],
+//   d?:{}
+// }>
+const props = defineProps({
+
+  url: String,
+  to: String,
+  modelValue: String,
+  modelName: String,
+  change: Function,
+  fields: Array,
+  d: Object
+})
+const emits = defineEmits(["update:modelValue", "update:modelName"])
+
+const loading = ref(false)
+
+const value = ref(props.modelValue)
+const options = ref((props.modelValue && props.modelName) ? [{
+  name: props.modelName,
+  value: props.modelValue
+}] : [])
+
+remoteMethod().then(() => {
+  // 
+
+  // console.log('true :>> ', props.modelValue, props.modelName, options.value.find(({ value: val }) => val === props.modelValue));
+  if (props.modelValue && props.modelName && !options.value.find(({ value: val }) => val === props.modelValue)) {
+    // console.log('true :>> ', true);
+    options.value.unshift({
+      name: props.modelName,
+      value: props.modelValue
+    })
+  }
+})
+
+function remoteMethod(keyword) {
+  loading.value = true
+  return request({
+    url: props.to ? `/jcxx/${props.to}/index` : props.url,
+    data: {
+      ...props.d,
+      keyword,
+      limit: 100,
+    }
+  }).then(({ data }) => {
+    options.value = data.page_data.map((item) => ({
+      value: item[props.fields ? props.fields[0] : props.to + '_id'],
+      name: item[props.fields ? props.fields[1] : props.to + '_name'],
+      origin: item
+    }))
+
+    loading.value = false
+  })
+}
+
+
+
+watch(
+  () => value.value,
+  (val) => {
+    const item = options.value.find(({ value }) => value === val)
+    emits("update:modelValue", val)
+    emits("update:modelName", item?.name)
+    props.change?.(item?.origin)
+  }
+)
+
+watch(() => props.modelValue, (val) => {
+  if (val === undefined) {
+    value.value = undefined
+  }
+})
+</script>
+
+
+
+<template>
+  <!-- remote :remote-method="remoteMethod"-->
+  <el-select class="w-full" v-model="value" filterable reserve-keyword clearable :loading="loading">
+    <el-option v-for="item in options" :key="item.value" :label="item.name" :value="item.value">
+      <slot :item="item.origin">
+        <span>{{item.name}}</span>
+      </slot>
+    </el-option>
+  </el-select>
+</template>
+

src/pages/personal/components/MyCourse/wlzb/drop..edit.vue

@@ -0,0 +1,474 @@
+<template>
+  <!-- 创建课程 -->
+  <div class="createCourse">
+    <el-card>
+      <div style="padding: 0 75px;">
+        <span class="title">双师一生</span>
+        <span class="subTitle">我的课程 - 我创建的 - <span class="pointer" @click="goBack">网络直播</span> - <span
+            style="color: #000;">创建课程</span></span>
+      </div>
+    </el-card>
+
+    <el-card>
+      <div style="color: #050026;font-size: 18px;font-weight: 400;">创建课程</div>
+      <div class="formContent">
+        <el-form :model="formline" ref="formline" :rules="rules" size="large" label-position="top"
+          class="demo-ruleForm">
+          <div class="must">
+            <div class="label">课程封面图</div>
+            <div class="uploadDiv">
+              <div style="display: flex;">
+                <el-upload class="mainUpload" action="" accept=".png, .jpg, .jpeg" :auto-upload="false"
+                  list-type="picture-card" :on-change="handleMainChange" :file-list="fileList">
+                  <el-icon v-if="fileList.length==0">
+                    <Picture />
+                  </el-icon>
+                  <img v-else :src="fileList[0].url" alt="" style="width: 100%;height: 100%;" />
+                </el-upload>
+                <div style="font-size: 12px;margin-left: 20px;position: relative;">
+                  <div style="color: #949494;">支持格式：jpg,png,jpeg（200kb以内） 建议尺寸600x320</div>
+                  <div style="color: #F35421;position: absolute;bottom: 0;" v-if="fileList.length==0">{{mainTip}}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <el-form-item label="主讲账号" prop="kz_master_teacher">
+            <el-input v-model="formline.kz_master_teacher" />
+          </el-form-item>
+          <el-form-item label="主讲老师" prop="kz_master_user_name">
+            <el-input v-model="formline.kz_master_user_name" />
+          </el-form-item>
+          <el-form-item label="课程名称" prop="kz_title">
+            <el-input v-model="formline.kz_title" />
+          </el-form-item>
+          <el-form-item label="课程简介" prop="kz_kcjj">
+            <el-input v-model="formline.kz_kcjj" type="textarea" :rows="4" />
+          </el-form-item>
+          <el-form-item label="课时数" prop="kz_kss">
+            <el-input v-model="formline.kz_kss" />
+          </el-form-item>
+
+          <div class="must" style="display: block;">
+            <div class="label" style="margin-bottom: 12px;">类型（每个类型只能选一个）</div>
+            <div class="showType">
+              <div class="typeItem" style="background: #00a3ff;">{{formline.grade_name}}</div>
+              <div class="typeItem" style="background: rgba(0,131,197,0.8);">{{formline.subject_name}}</div>
+            </div>
+          </div>
+          <div class="type">
+            <div class="flex">
+              <div class="label">年级</div>
+              <div class="valueDiv">
+                <div class="item pointer" :class="formline.grade_id==item.grade_id?'active':''" @click="initGrade(item)"
+                  v-for="item in gradeData" :key="item.grade_id">{{item.grade_name}}</div>
+              </div>
+            </div>
+            <div class="flex">
+              <div class="label">分类</div>
+              <div class="valueDiv">
+                <div class="item pointer" :class="formline.subject_id==item.subject_id?'active':''"
+                  @click="initSubject(item)" v-for="item in subjectData" :key="item.subject_id">{{item.subject_name}}
+                </div>
+              </div>
+            </div>
+          </div>
+          <div style="display: flex;">
+            <el-form-item style="flex: 1;" label="开始时间" prop="kz_starttime">
+              <el-date-picker v-model="formline.kz_starttime" :disabled-date="pickerStartTime" type="datetime"
+                placeholder="选择日期时间"></el-date-picker>
+            </el-form-item>
+            <el-form-item style="flex: 1;margin-left: 20px;" label="结束时间" prop="kz_endtime">
+              <el-date-picker v-model="formline.kz_endtime" :disabled-date="pickerEndTime" type="datetime"
+                placeholder="选择日期时间"></el-date-picker>
+            </el-form-item>
+          </div>
+
+
+          <div style="display: flex;">
+            <el-form-item label="是否手机端推荐课程" prop="kz_recommend">
+              <el-radio-group v-model="formline.kz_recommend">
+                <el-radio label="1">推荐</el-radio>
+                <el-radio label="0">不推荐</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="是否精品" prop="kz_best">
+              <el-radio-group v-model="formline.kz_best">
+                <el-radio label="1">是</el-radio>
+                <el-radio label="0">否</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </div>
+          <el-form-item label="是否需要审核" prop="is_shenhe">
+            <el-radio-group v-model="formline.is_shenhe">
+              <el-radio label="1">需要审核</el-radio>
+              <el-radio label="0">不需要审核</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="审核状态">
+            <el-select v-model="formline.kz_shzt" placeholder=" " size="large">
+              <el-option v-for="item in shztData" :key="item.v" :label="item.n" :value="item.v" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="审核对象">
+            <el-select v-model="formline.shdx" placeholder=" " size="large">
+              <el-option v-for="item in shztData" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-checkbox class="read" v-model="isRead" label="已阅读并同意《课程上传协议》" size="large" />
+          </el-form-item>
+          <el-form-item>
+            <div class="btnDiv">
+              <el-button type="primary" @click="submitForm('formline')">提 交</el-button>
+              <el-button>关 闭</el-button>
+            </div>
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { grade_list, subject_list, wlzb_list, upload_file } from "./api";
+
+import { Picture, FolderOpened } from "@element-plus/icons-vue";
+export default {
+  data() {
+    return {
+      formline: {
+        kz_img: '',
+        kz_master_teacher: '',
+        kz_master_user_name: '',
+        kz_title: '',
+        kz_kcjj: '',
+        kz_kss: '',
+        grade_id: '',
+        subject_id: '',
+        kz_starttime: '',
+        kz_endtime: '',
+        kz_recommend: '',
+        kz_best: '',
+        is_shenhe: '',
+        shenhe_user: '',
+      },
+      rules: {
+        kz_master_teacher: [
+          { required: true, message: '请输入主讲账号', trigger: 'blur' },
+        ],
+        kz_master_user_name: [
+          { required: true, message: '请输入主讲老师', trigger: 'blur' },
+        ],
+        kz_title: [
+          { required: true, message: '请输入课程名称', trigger: 'blur' },
+        ],
+        kz_kcjj: [
+          { required: true, message: '请输入课程简介', trigger: 'blur' },
+        ],
+        kz_kss: [
+          { required: true, message: '请输入课时数', trigger: 'blur' },
+        ],
+        kz_starttime: [
+          { required: true, message: '请选择开始时间', trigger: 'change', type: 'date' },
+        ],
+        kz_endtime: [
+          { required: true, message: '请选择结束时间', trigger: 'change', type: 'date' },
+        ]
+      },
+      fileList: [],
+      mainFileData: ["png", "jpg", "jpeg"],
+      mainFileSize: 200,
+      mainTip: "",
+      attachList: [],
+      attachFileData: ["ppt", "pptx", "pdf", "mp4"],
+      attachFileSize: 500,
+      attachTip: "",
+      gradeData: ["一年级", "二年级", "三年级", "四年级", "五年级", "六年级", "初一", "初二", "初三", "高一", "高二", "高三"],
+      subjectData: ["美术", "音乐", "舞蹈"],
+      sfsjdtjkcData: [],
+      sfjpData: [],
+      sfxyshData: [],
+      shztData: [],
+      isRead: false,
+      pickerStartTime: (time) => {
+        let beginDateVal = this.formline.kz_endtime;
+        if (beginDateVal) {
+          return time.getTime() > new Date(beginDateVal).getTime();
+        }
+      },
+      pickerEndTime: (time) => {
+        let beginDateVal = this.formline.kz_starttime;
+        if (beginDateVal) {
+          return time.getTime() < new Date(beginDateVal).getTime();
+        }
+      },
+    }
+  },
+  components: { Picture, FolderOpened, ElConfigProvider },
+  methods: {
+    goBack() {
+      this.$router.go(-1);
+    },
+    initValue() {
+      for (let key in this.formline) {
+        this.formline[key] = "";
+      }
+
+      this.formline.kz_sfsjdtjkc = "1";
+      this.formline.kz_sfjp = "1";
+      this.formline.kz_sfxysh = "1";
+      if (this.gradeData[0]) {
+        this.formline.grade_name = this.gradeData[0].grade_name;
+        this.formline.grade_id = this.gradeData[0].grade_id;
+      }
+      if (this.subjectData[0]) {
+        this.formline.subject_name = this.subjectData[0].subject_name;
+        this.formline.subject_id = this.subjectData[0].subject_id;
+      }
+    },
+    // 获取下拉数据
+    initSelectData() {
+      wlzb_list().then((res) => {
+        if (res.code == 1) {
+          // 是否手机端推荐课程
+          this.sfsjdtjkcData = res.data.table_structure.field.kz_sfsjdtjkc.option;
+          // 是否精品
+          this.sfjpData = res.data.table_structure.field.kz_sfjp.option;
+          // 是否需要审核
+          this.sfxyshData = res.data.table_structure.field.kz_sfxysh.option;
+          // 审核对象
+          this.shztData = res.data.table_structure.field.kz_shzt.option;
+        }
+      });
+    },
+    // 年级
+    initGradeData() {
+      this.gradeData = [];
+      grade_list().then((res) => {
+        if (res.code == 1) {
+          this.gradeData = res.data.page_data;
+
+          if (this.gradeData[0]) {
+            this.formline.grade_name = this.gradeData[0].grade_name;
+            this.formline.grade_id = this.gradeData[0].grade_id;
+          }
+        }
+      });
+    },
+    // 分类
+    initSubjectData() {
+      this.subjectData = [];
+      subject_list().then((res) => {
+        if (res.code == 1) {
+          this.subjectData = res.data.page_data;
+
+          if (this.subjectData[0]) {
+            this.formline.subject_name = this.subjectData[0].subject_name;
+            this.formline.subject_id = this.subjectData[0].subject_id;
+          }
+        }
+      });
+    },
+    initGrade(value) {
+      this.formline.grade_name = value.grade_name;
+      this.formline.grade_id = value.grade_id;
+    },
+    initSubject(value) {
+      this.formline.subject_name = value.subject_name;
+      this.formline.subject_id = value.subject_id;
+    },
+    // 封面图
+    handleMainChange(file) {
+      let fileType = file.name.substring(file.name.lastIndexOf(".") + 1);
+      const isJPG = this.mainFileData.includes(fileType);
+      const sizeLimit = file.size / 1024 < this.mainFileSize;
+      if (!isJPG) {
+        this.mainTip = "上传文件只能是jpg,png,jpeg格式";
+      }
+      if (!sizeLimit) {
+        this.mainTip = "上传文件不能超过200KB";
+      }
+      if (isJPG && sizeLimit) {
+        this.fileList = [file];
+      } else {
+        this.fileList = [];
+      }
+
+      if (this.fileList.length == 0) {
+        return false;
+      }
+
+      upload_file(file.raw).then(res => {
+        if (res.code == 1) {
+          this.formline.kz_img = res.data.url;
+        } else {
+          this.mainTip = "上传失败";
+        }
+      })
+    },
+
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid && this.formline.kz_img != "" && this.formline.kz_kj == "") {
+          // alert('submit!');
+          console.log(this.formline)
+        } else {
+          if (this.formline.kz_img == "") {
+            this.mainTip = "请上传课程封面图";
+          }
+          if (this.formline.kz_kj == "") {
+            this.attachTip = "请上传源文件";
+          }
+        }
+      });
+    }
+  },
+  created() {
+    this.initValue();
+    this.initSelectData();
+    this.initGradeData();
+    this.initSubjectData();
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.createCourse {
+  .el-card {
+    margin-bottom: 15px;
+    background: #fff;
+  }
+
+  .pointer {
+    cursor: pointer;
+  }
+
+  .title {
+    font-size: 18px;
+    color: #050026;
+  }
+
+  .subTitle {
+    font-size: 14px;
+    color: #949494;
+    margin-left: 45px;
+  }
+
+  .formContent {
+    width: 575px;
+    margin: auto;
+
+    .must {
+      display: flex;
+      align-items: center;
+      margin-bottom: 22px;
+
+      .label {
+        color: #949494;
+        font-size: 14px;
+        margin-right: 15px;
+
+        &::after {
+          content: "*";
+          color: #f35421;
+          margin-left: 4px;
+        }
+      }
+
+      .uploadDiv {
+        flex: 1;
+
+        .el-upload--picture-card {
+          width: 180px;
+          height: 96px;
+        }
+      }
+    }
+
+    .showType {
+      width: 100%;
+      height: 40px;
+      background: #f9f9f9;
+      border-radius: 6px;
+      display: flex;
+      align-items: center;
+      padding: 0 20px;
+
+      .typeItem {
+        color: #fff;
+        font-size: 13px;
+        padding: 3px 8px;
+        border-radius: 6px;
+        margin-right: 20px;
+        line-height: 22px;
+      }
+    }
+
+    .type {
+      padding: 0 20px;
+      margin-bottom: 10px;
+
+      .flex {
+        display: flex;
+        align-items: baseline;
+
+        .label {
+          font-size: 13px;
+          color: #333;
+
+          &::after {
+            content: "*";
+            color: #f35421;
+            margin-left: 4px;
+          }
+        }
+
+        .valueDiv {
+          margin-left: 15px;
+          flex: 1;
+          display: flex;
+          flex-wrap: wrap;
+          color: #949494;
+          padding-bottom: 15px;
+          font-weight: 400;
+          font-size: 14px;
+
+          .item {
+            padding: 3px 5px;
+            margin-right: 20px;
+            margin-bottom: 5px;
+
+            &.active {
+              color: #00a3ff;
+              border-radius: 6px;
+              background: rgba($color: #00a3ff, $alpha: 0.1);
+            }
+          }
+        }
+      }
+    }
+
+    .btnDiv {
+      text-align: center;
+      width: 100%;
+
+      .el-button {
+        background: #f4f4f4;
+        border: none;
+        width: 160px;
+        height: 50px;
+        color: #41387f;
+        font-family: PingFangSC, PingFangSC-Semibold;
+      }
+
+      .el-button--primary {
+        background: #00a3ff;
+        margin-right: 80px;
+        color: #fff;
+      }
+    }
+  }
+}
+</style>
+
+

src/pages/personal/components/MyCourse/wlzb/drop..index.vue

@@ -0,0 +1,450 @@
+<template>
+  <!-- 网络直播 -->
+  <div class="ssysContent">
+    <el-card>
+      <div style="padding: 0 75px;">
+        <span class="title">网络直播</span>
+        <span class="subTitle">我的课程 - 我创建的 - <span style="color: #000;">网络直播</span></span>
+      </div>
+    </el-card>
+
+    <el-card style="padding-bottom: 50px;">
+      <div class="searchDiv">
+        <div class="menuDiv">
+          <div class="list pointer" :class="activeName==item.status?'active':''" v-for="item in tabData" :key="item"
+            @click="handleClick(item.status)">{{item.name}}</div>
+        </div>
+        <div style="display: flex;align-items: center;">
+          <el-button type="primary" @click="handleCreate">创建课程</el-button>
+          <div class="searchValue">
+            <input type="text" placeholder="搜索关键字" v-model="searchKey">
+            <div class="searchBtn" @click="initData">
+              <img src="/kczy/searchIcon.png" alt="">
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="line"></div>
+      <div class="contentDiv">
+        <div class="searchBtn">
+          <div class="search-list">
+            <div class="label">年级</div>
+            <div class="valueDiv">
+              <div class="item pointer" :class="activeGrade==item.grade_id?'active':''" @click="initGrade(item)"
+                v-for="item in gradeData" :key="item.grade_id">{{item.grade_name}}</div>
+            </div>
+          </div>
+          <div class="search-list">
+            <div class="label">分册</div>
+            <div class="valueDiv">
+              <div class="item pointer" :class="activeFascicule==item.v?'active':''" @click="initFascicule(item)"
+                v-for="item in fasciculeData" :key="item.v">{{item.n}}</div>
+            </div>
+          </div>
+        </div>
+        <el-empty v-if="resultData.length==0" image-size="100" description="无数据" style="padding: 10px 0;" />
+        <div class="resultDiv">
+          <el-row :gutter="20">
+            <el-col :span="12" v-for="item in resultData" :key="item.name" @click="lookDetail(item)">
+              <el-card class="resultCard pointer">
+                <div style="display: flex;">
+                  <img class="leftImg" :src="getFullUrl(item.ks_img)" alt="" />
+                  <div style="flex: 1;padding: 8px 10px;position: relative;font-size: 14px">
+                    <div class="production">
+                      <div style="display: flex;justify-content: space-between;">
+                        <div style="line-height: 28px;">
+                          <div style="font-size: 16px;color: #050026;">{{item.ks_name}}</div>
+                          <div style="color: #949494;">{{item.ks_brief}}</div>
+                          <div style="color: #000;">{{item.grade_name}} <span
+                              v-if="item.grade_name && item.subject_name">|</span> {{item.subject_name}}</div>
+                        </div>
+                        <div v-if="activeName==1" style="font-size: 18px;">
+                          <el-icon @click.stop="handleEdit(item.ks_id)">
+                            <EditPen />
+                          </el-icon>
+                          <el-icon @click.stop="handleDelete(item.ks_id)" style="margin-left: 20px;">
+                            <Delete />
+                          </el-icon>
+                        </div>
+                        <div v-if="activeName==3">
+                          <el-icon>
+                            <View />
+                          </el-icon>
+                          <span style="color: #666;font-size: 12px;">{{item.bfl}}</span>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="user">
+                      <div style="display: flex;">
+                        <el-avatar style="width: 24px;height: 24px;" :size="16" :src="getAvatarUrl(item.user_id)" />
+                        <span style="margin-left: 8px;color: #050026;">{{ item.ks_zjjsxm }}</span>
+                      </div>
+                      <div style="display: flex;align-items: center;">
+                        <el-icon size="16" color="#949494" style="margin-right: 10px;">
+                          <Histogram />
+                        </el-icon>
+                        <span v-if="activeName==1" style="color: #00A3FF;">待开始</span>
+                        <span v-if="activeName==3" style="color: #666;">已结束</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </el-card>
+            </el-col>
+          </el-row>
+        </div>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { Delete, EditPen, Histogram, View } from '@element-plus/icons-vue';
+
+
+import { grade_list, wlzb_list, wlzb_delete } from "./api";
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getFullUrl, getAvatarUrl } from '@/utils/helper';
+export default {
+  data() {
+    return {
+      activeName: "1",
+      tabData: [
+        {
+          name: "待开始",
+          status: "1"
+        },
+        // {
+        //   name:"进行中",
+        //   status:"2"
+        // },
+        {
+          name: "已结束",
+          status: "3"
+        }
+      ],
+      searchKey: "",
+      gradeData: ["幼儿园", "一年级", "二年级", "三年级", "四年级", "五年级", "六年级", "初一", "初二", "初三", "高一", "高二", "高三", "其他"],
+      fasciculeData: ["上册", "下册"],
+      activeGrade: "",
+      activeFascicule: "",
+      wholeData: [],
+      resultData: []
+    }
+  },
+  components: { Delete, EditPen, Histogram, View, ElMessageBox },
+  methods: {
+    handleClick(index) {
+      this.activeName = index;
+
+      this.initResultData();
+    },
+    //年级
+    initGradeData() {
+      this.gradeData = [
+        {
+          grade_id: undefined,
+          grade_name: "全部",
+        }
+      ];
+      grade_list().then((res) => {
+        if (res.code == 1) {
+          this.gradeData = this.gradeData.concat(res.data.page_data);
+        }
+      });
+    },
+    // 分册
+    initFasciculeData() {
+      this.fasciculeData = [
+        {
+          v: undefined,
+          n: "全部"
+        }
+      ];
+      wlzb_list().then((res) => {
+        if (res.code == 1) {
+          this.fasciculeData = this.fasciculeData.concat(res.data.table_structure.field.team_id.option);
+
+          this.wholeData = res.data.page_data;
+          this.initResultData();
+        }
+      });
+    },
+    initGrade(value) {
+      this.activeGrade = value.grade_id;
+
+      this.initData();
+    },
+    initFascicule(value) {
+      this.activeFascicule = value.v;
+
+      this.initData();
+    },
+    initData() {
+      let data = {
+        keyword: this.searchKey,
+        grade_id: this.activeGrade,
+        team_id: this.activeFascicule
+      };
+
+      wlzb_list(data).then((res) => {
+        if (res.code == 1) {
+          this.wholeData = res.data.page_data;
+          this.initResultData();
+        }
+      });
+    },
+    initResultData() {
+      let data = this.wholeData;
+      data.map((item) => {
+        this.gradeData.map((value) => {
+          if (item.grade_id == value.grade_id) {
+            item.grade_name = value.grade_name;
+          }
+        })
+      })
+
+      this.resultData = this.wholeData.filter(item => item.ks_status == this.activeName);
+      // this.resultData = this.wholeData;
+    },
+    lookDetail(data) {
+      this.$router.push({ name: "course-ssys-detail", params: { id: data.ks_id } });
+    },
+    handleCreate() {
+      this.$router.push({ name: "create-course" });
+    },
+    handleEdit(id) {
+      this.$router.push({ name: "create-course", query: { id: id } });
+    },
+    handleDelete(ks_id) {
+      ElMessageBox.confirm(
+        '是否确定删除当前课程？',
+        '提示',
+        {
+          distinguishCancelAndClose: true,
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+        }
+      )
+        .then(() => {
+          wlzb_delete({ ks_id }).then(res => {
+            if (res.code == 1) {
+              this.$message.success("删除成功！");
+              this.initData();
+            }
+          })
+        })
+        .catch(() => {
+
+        })
+    }
+  },
+  async created() {
+    await this.initGradeData();
+    this.initFasciculeData();
+  },
+  mounted() {
+    const _this = this;
+    document.onkeydown = function (e) {
+      e = window.event || e;
+      if (_this.$route.name == "course-ssys" && (e.code === 'Enter' || e.code === 'enter')) {
+        // 登录事件
+        _this.initData();
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.ssysContent {
+  .el-card {
+    margin-bottom: 15px;
+    background: #fff;
+  }
+
+  .pointer {
+    cursor: pointer;
+  }
+
+  .title {
+    font-size: 18px;
+    color: #050026;
+  }
+
+  .subTitle {
+    font-size: 14px;
+    color: #949494;
+    margin-left: 45px;
+  }
+
+  .searchDiv {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 80px;
+
+    .menuDiv {
+      display: flex;
+      margin-bottom: -10px;
+
+      .list {
+        margin: 0 20px;
+        padding: 0 10px;
+        color: #949494;
+        position: relative;
+        line-height: 40px;
+        font-size: 14px;
+
+        &::after {
+          content: "";
+          width: 0;
+          height: 2px;
+          background: rgba(0, 131, 197, 0.8);
+          position: absolute;
+          bottom: -10px;
+          left: 50%;
+          transform: translateX(-50%);
+          transition: width linear 0.1s;
+        }
+
+        &:hover {
+          color: rgba(0, 131, 197, 0.8);
+        }
+
+        &.active {
+          color: rgba(0, 131, 197, 0.8);
+          font-size: 16px;
+
+          &::after {
+            width: 100%;
+          }
+        }
+      }
+    }
+
+    .el-button {
+      width: 100px;
+      height: 40px;
+      margin-right: 40px;
+    }
+
+    .searchValue {
+      width: 350px;
+      height: 50px;
+      margin: 0 auto;
+      background: #ffffff;
+      border-radius: 8px;
+      overflow: hidden;
+      position: relative;
+
+      input {
+        width: 100%;
+        height: 100%;
+        outline: 0;
+        box-sizing: border-box;
+        padding-left: 10px;
+        background: #f6f8fa;
+      }
+
+      .searchBtn {
+        width: 26px;
+        height: 26px;
+        background: #00a3ff;
+        border-radius: 6px;
+        position: absolute;
+        right: 5px;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        text-align: center;
+        vertical-align: middle;
+        cursor: pointer;
+
+        img {
+          display: block;
+          text-align: center;
+          margin: 6px auto 0;
+        }
+      }
+    }
+  }
+
+  .line {
+    height: 1px;
+    background: #eaeaea;
+    width: calc(100% + 40px);
+    margin-left: -20px;
+    margin-top: 10px;
+  }
+
+  .contentDiv {
+    .searchBtn {
+      padding-top: 10px;
+
+      .search-list {
+        display: flex;
+        align-items: baseline;
+        font-size: 14px;
+        margin: 20px 0;
+
+        .label {
+          color: #000;
+          margin-right: 25px;
+        }
+
+        .valueDiv {
+          flex: 1;
+          display: flex;
+          color: #949494;
+          border-bottom: 1px dashed #e4e6e8;
+          padding-bottom: 15px;
+          font-weight: 400;
+
+          .item+.item {
+            margin-left: 20px;
+          }
+
+          .item {
+            padding: 3px 5px;
+
+            &.active {
+              color: #00a3ff;
+              border-radius: 6px;
+              background: rgba($color: #00a3ff, $alpha: 0.1);
+            }
+          }
+        }
+      }
+    }
+
+    .resultDiv {
+      .resultCard {
+        padding: 0 !important;
+
+        .leftImg {
+          width: 264px;
+          height: 155px;
+        }
+
+        .user {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          font-size: 14px;
+          position: absolute;
+          bottom: 8px;
+          width: calc(100% - 20px);
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+.ssysContent {
+  .resultCard .el-card__body {
+    padding: 0 !important;
+  }
+}
+</style>

src/pages/personal/components/MyCourse/wlzb/edit.vue

@@ -1,4 +1,6 @@
 <script setup>
+import { ElMessage } from 'element-plus';
+
 
 let form = $ref({
   kz_img: '',
@@ -15,7 +17,102 @@ let form = $ref({
   kz_best: '',
   is_shenhe: '',
   shenhe_user: '',
+
+  kz_time: undefined,
 })
+
+const rules = {
+  kz_img: [
+    { required: true, message: '请选择课程封面图', trigger: 'submit' },
+  ],
+  kz_master_teacher: [
+    { required: true, message: '请输入主讲账号', trigger: 'submit' },
+  ],
+  kz_master_user_name: [
+    { required: true, message: '请输入主讲老师', trigger: 'submit' },
+  ],
+  kz_title: [
+    { required: true, message: '请输入课程名称', trigger: 'submit' },
+  ],
+  kz_kcjj: [
+    { required: true, message: '请输入课程简介', trigger: 'submit' },
+  ],
+  kz_kss: [
+    { required: true, message: '请输入课时数', trigger: 'submit' },
+  ],
+  // kz_starttime: [
+  //   { required: true, message: '请选择开始时间', trigger: 'submit', type: 'date' },
+  // ],
+  // kz_endtime: [
+  //   { required: true, message: '请选择结束时间', trigger: 'submit', type: 'date' },
+  // ],
+  kz_time: [
+    { required: true, message: '请选择开始时间和结束时间', trigger: 'submit' },
+  ],
+  grade_id: [
+    { required: true, message: '请选择年级', trigger: 'submit' },
+  ],
+  subject_id: [
+    { required: true, message: '请选择学科', trigger: 'submit' },
+  ],
+  kz_recommend: [
+    { required: true, message: '请选择是否手机端推荐课程', trigger: 'submit' },
+  ],
+  kz_best: [
+    { required: true, message: '请选择是否精品', trigger: 'submit' },
+  ],
+  is_shenhe: [
+    { required: true, message: '请选择是否需要审核', trigger: 'submit' },
+  ],
+  shenhe_user: [
+    { required: true, message: '请选择审核对象', trigger: 'submit' },
+  ],
+}
+
+let isRead = $ref(false)
+let formRef = $ref()
+function handleSubmit() {
+  console.log('form :>> ', form);
+  if (isRead) {
+    formRef.validate().then((res) => {
+      console.log('res :>> ', res);
+      if (res === true) {
+        request({
+          url: '/kzkt/zbkc/add',
+          data: {
+            kzkt_zbkc: {
+              kz_img: form.kz_img,
+              kz_master_teacher: form.kz_master_teacher,
+              kz_master_user_name: form.kz_master_user_name,
+              kz_title: form.kz_title,
+              kz_kcjj: form.kz_kcjj,
+              kz_kss: form.kz_kss,
+              grade_id: form.grade_id,
+              subject_id: form.subject_id,
+              kz_starttime: form.kz_time[0],
+              kz_endtime: form.kz_time[1],
+              kz_recommend: form.kz_recommend,
+              kz_best: form.kz_best,
+              is_shenhe: form.is_shenhe,
+              shenhe_user: form.shenhe_user,
+            }
+          }
+        }).then(res => {
+          if (res.code === '1') {
+            ElMessage.success('创建课程成功')
+          }
+        })
+      }
+    })
+  } else {
+    ElMessage.warning('请先勾选协议')
+  }
+}
+
+const router = useRouter()
+function handleBack() {
+  router.back()
+}
 </script>
 
 <template>
@@ -33,10 +130,10 @@ let form = $ref({
   <div class="w-full flex flex-col items-center shadow bg-white rounded-md mt-4 p-4">
     <div class="text-lg text-hex-050026 w-full">创建</div>
 
-    <div class="w-400px text-hex-949494">
-      <el-form :model="form" label-position="top">
-        <el-form-item label="课程封面图" prop="kz_img" >
-          <file-upload v-model.part="form.kz_img" :limit="1" list-type="picture-card" accept=".jpg,.png,.jpeg"
+    <div class="w-420px text-hex-949494">
+      <el-form :model="form" label-position="top" ref="formRef" :rules="rules">
+        <el-form-item label="课程封面图" prop="kz_img">
+          <file-upload v-model:part="form.kz_img" :limit="1" list-type="picture-card" accept=".jpg,.png,.jpeg"
             :size-limit="200">
             <template #default>
               <i-akar-icons:plus class="text-4xl" />
@@ -46,46 +143,54 @@ let form = $ref({
             </template>
           </file-upload>
         </el-form-item>
-        <el-form-item label="主讲账号" prop="kz_master_teacher" >
+        <el-form-item label="主讲账号" prop="kz_master_teacher">
           <el-input v-model="form.kz_master_teacher" />
         </el-form-item>
-        <el-form-item label="主讲老师" prop="kz_master_user_name" >
+        <el-form-item label="主讲老师" prop="kz_master_user_name">
           <el-input v-model="form.kz_master_user_name" />
         </el-form-item>
-        <el-form-item label="课程名称" prop="kz_title" >
+        <el-form-item label="课程名称" prop="kz_title">
           <el-input v-model="form.kz_title" />
         </el-form-item>
-        <el-form-item label="课程简介" prop="kz_kcjj" >
+        <el-form-item label="课程简介" prop="kz_kcjj">
           <el-input v-model="form.kz_kcjj" type="textarea" :rows="4" />
         </el-form-item>
-        <el-form-item label="课时数" prop="kz_kss" >
-          <el-input v-model="form.kz_kss" />
+        <el-form-item label="课时数" prop="kz_kss">
+          <el-input v-model.number="form.kz_kss" />
         </el-form-item>
-        <el-form-item label="年级" prop="grade_id" >
-          <el-input v-model="form.grade_id" />
+        <el-form-item label="年级" prop="grade_id">
+          <!-- <el-input v-model="form.grade_id" /> -->
+          <remote-select v-model="form.grade_id" to="grade"></remote-select>
         </el-form-item>
-        <el-form-item label="学科" prop="subject_id" >
-          <el-input v-model="form.subject_id" />
+        <el-form-item label="学科" prop="subject_id">
+          <!-- <el-input v-model="form.subject_id" /> -->
+          <remote-select v-model="form.subject_id" to="subject"></remote-select>
         </el-form-item>
-        <el-form-item label="开始时间" prop="kz_starttime" >
+        <!-- <el-form-item label="开始时间" prop="kz_starttime">
           <el-date-picker v-model="form.kz_starttime" type="datetime" />
         </el-form-item>
-        <el-form-item label="结束时间" prop="kz_endtime" >
+        <el-form-item label="结束时间" prop="kz_endtime">
           <el-date-picker v-model="form.kz_endtime" type="datetime" />
+        </el-form-item> -->
+        <el-form-item label="开始时间 - 结束时间" prop="kz_time">
+          <el-date-picker v-model="form.kz_time" type="datetimerange" value-format="YYYY-MM-DD HH:mm:ss" />
         </el-form-item>
-        <el-form-item label="是否手机端推荐课程" prop="kz_recommend" >
-          <el-radio-group v-model="form.kz_recommend">
-            <el-radio label="1">推荐</el-radio>
-            <el-radio label="0">不推荐</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item label="是否精品" prop="kz_best" >
-          <el-radio-group v-model="form.kz_best">
-            <el-radio label="1">是</el-radio>
-            <el-radio label="0">否</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item label="是否需要审核" prop="is_shenhe" >
+        <div class="flex justify-between">
+          <el-form-item label="是否手机端推荐课程" prop="kz_recommend">
+            <el-radio-group v-model="form.kz_recommend">
+              <el-radio label="1">推荐</el-radio>
+              <el-radio label="0">不推荐</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="是否精品" prop="kz_best">
+            <el-radio-group v-model="form.kz_best">
+              <el-radio label="1">是</el-radio>
+              <el-radio label="0">否</el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </div>
+
+        <el-form-item label="是否需要审核" prop="is_shenhe">
           <el-radio-group v-model="form.is_shenhe">
             <el-radio label="1">需要审核</el-radio>
             <el-radio label="0">不需要审核</el-radio>
@@ -94,13 +199,18 @@ let form = $ref({
         <!-- <el-form-item label="审核状态" prop="" >
           <el-input v-model="form.name" />
         </el-form-item> -->
-        <el-form-item label="审核对象" prop="shenhe_user" >
+        <el-form-item label="审核对象" prop="shenhe_user">
           <el-input v-model="form.shenhe_user" />
         </el-form-item>
 
+
+        <el-checkbox v-model="isRead" label="已阅读并同意《课程上传协议》" size="large" />
+
         <div class="flex justify-around items-center text-sm">
-          <div class="w-166px h-50px flex_center rounded bg-hex-00A3FF text-white">提交</div>
-          <div class="w-166px h-50px flex_center rounded bg-hex-F4F4F4 text-hex-41387F">关闭</div>
+          <div class="w-166px h-50px flex_center rounded bg-hex-00A3FF text-white cursor-pointer" @click="handleSubmit">
+            提交</div>
+          <div class="w-166px h-50px flex_center rounded bg-hex-F4F4F4 text-hex-41387F cursor-pointer"
+            @click="handleBack">关闭</div>
         </div>
       </el-form>
     </div>

src/pages/personal/components/MyCourse/wlzb/index.vue

@@ -1,13 +1,22 @@
 <script setup>
 import { getFullUrl, getAvatarUrl } from '~/utils/helper';
+import { Search as IconSearch } from '@element-plus/icons-vue';
 
 let nj = $ref([])
-let fc = $ref([])
+
+request({
+  url: '/jcxx/grade/index',
+  data: {
+    limit: 99
+  }
+}).then(res => {
+  if (res.code === '1') {
+    nj = [{ n: '全部', v: undefined }].concat(res.data.page_data.map(({ grade_name, grade_id }) => ({ v: grade_id, n: grade_name })))
+  }
+})
 
 const queryForm = reactive({
-  ks_status: 2,
   grade_id: undefined,
-  team_id: undefined,
   page: 1
 })
 
@@ -15,25 +24,43 @@ const queryForm = reactive({
 let data_wcjd = $ref([])
 
 request({
-  url:'/kzkt/zbkc_kcdg/my_course'
-}).then(res=>{
-  if(res.code==='1'){
+  url: '/kzkt/zbkc_kcdg/my_course'
+}).then(res => {
+  if (res.code === '1') {
     data_wcjd = res.data
   }
 })
 
-</script>
 
+</script>
+  
 <template>
-  <div class="w-full shadow flex flex-col">
-    <div>
+  <div class="w-full shadow flex flex-col rounded-md">
+    <div class="flex justify-end px-8 py-2">
+      <div class="w-100px h-50px flex_center rounded bg-hex-00A3FF text-white cursor-pointer" @click="handleClickAdd">创建
+      </div>
+      <div class="w-500px h-50px ml-8">
+        <el-input class="w-500px h-full rounded-md" placeholder="搜索关键字" v-model="keyword">
+          <template #suffix>
+            <div class="w-26px h-26px bg-hex-00A3FF rounded-md flex justify-center items-center cursor-pointer"
+              @click="queryData()">
+              <el-icon size="13" color="#fff">
+                <IconSearch />
+              </el-icon>
+            </div>
+          </template>
+        </el-input>
+      </div>
+    </div>
+
+    <div class="px-4">
       <check-row v-model="queryForm.grade_id" label="年级" :items="nj"></check-row>
-      <check-row v-model="queryForm.subject_id" label="分册" :items="fc"></check-row>
+      <!-- <check-row v-model="queryForm.subject_id" label="分册" :items="fc"></check-row> -->
 
     </div>
 
     <div class="flex flex-wrap justify-between">
-      <div class="w-647px h-155px rounded-xl shadow-lg mb-7 flex" v-for="i in data_wcjd" >
+      <div class="w-647px h-155px rounded-xl shadow-lg mb-7 flex" v-for="i in data_wcjd">
         <div class="w-264px h-full flex-none">
           <img :src="getFullUrl(i.img)" alt="" class="w-full h-full" />
         </div>
@@ -41,8 +68,8 @@ request({
           <div class="flex justify-between w-full items-center py-1">
             <div class="font-bold">{{ i.name }}</div>
             <div class="text-hex-949494 text-sm flex justify-between items-center">
-              <i-bx:edit-alt />
-              <i-ep:delete />
+              <i-bx:edit-alt class="mr-2 cursor-pointer" />
+              <i-ep:delete class="cursor-pointer" />
             </div>
           </div>
 
@@ -58,8 +85,9 @@ request({
 
           <div class="flex text-sm justify-between items-center">
             <div class="cursor-pointer flex items-center">
-              <el-avatar :size="16" :src="i.tx" /><span class="ml-1">{{
-                  i.kz_master_teacher
+              <el-avatar :size="16" :src="i.tx" />
+              <span class="ml-1">{{
+              i.kz_master_teacher
               }}</span>
             </div>
           </div>
@@ -68,3 +96,4 @@ request({
     </div>
   </div>
 </template>
+  

src/pages/zbkt/ssys/index.vue

@@ -41,6 +41,9 @@ let fc = $ref()
 
 request({
   url: '/jcxx/grade/index',
+  data: {
+    limit: 99
+  }
 }).then(res => {
   if (res.code === '1') {
     nj = [{ n: '全部', v: undefined }].concat(res.data.page_data.map(({ grade_name, grade_id }) => ({ v: grade_id, n: grade_name })))
@@ -81,7 +84,7 @@ function handleRtcClick(row) {
 
 </script>
   
-  <template>
+<template>
   <common-header />
   <div class="w-full flex items-center justify-center shadow-sm h-60px bg-hex-fefefe">
     <div class="w-1400px flex items-center">
@@ -101,7 +104,7 @@ function handleRtcClick(row) {
       <el-input class="input w-500px h-50px rounded-md" placeholder="搜索关键字" v-model="keyword">
         <template #suffix>
           <div class="w-26px h-26px bg-hex-00A3FF rounded-md flex justify-center items-center cursor-pointer"
-            @click="queryData">
+            @click="queryData()" >
             <el-icon size="13" color="#fff">
               <IconSearch />
             </el-icon>
@@ -186,18 +189,18 @@ function handleRtcClick(row) {
   </div>
 </template>
   
-  <style scoped>
-  .border_b {
-    border-bottom: 1px solid #E4E6E8;
-  }
-  
-  :deep(.el-tabs__nav-wrap::after) {
-    background-color: transparent;
-  }
-  
-  .input {
-    height: 50px;
-    width: 500px;
-  }
-  </style>
+<style scoped>
+.border_b {
+  border-bottom: 1px solid #E4E6E8;
+}
+
+:deep(.el-tabs__nav-wrap::after) {
+  background-color: transparent;
+}
+
+.input {
+  height: 50px;
+  width: 500px;
+}
+</style>
   

src/router/index.js

@@ -301,7 +301,7 @@ export default createRouter({
 						{
 							path: 'edit/:id',
 							name: 'wlzb_edit',
-							component: () => import("~/pages/zbkt/personal/components/MyCourse/edit.vue"),
+							component: () => import("~/pages/personal/components/MyCourse/wlzb/edit.vue"),
 						},
 					]
 				},