fanruan-edu-cas/src/views/class/admin/schedule_admin_class.vue

<template>
  <div>
    <el-table v-loading="loading" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange" row-key="id" default-expand-all lazy :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
      <el-table-column prop="title" label="目录大纲">
        <template #default="scope">
          <span v-if="scope.row.children" class="f18 fw600 col333">{{ scope.row.title }}</span>
          <a v-else :href="'/class/play/' + classid + '/' + scope.row.id" target="_blank" class="item-pl f15"> <i class="iconfont icon-bofang2 colb3c f14 mrt10"></i>{{ scope.row.title }} </a>
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="发布状态" width="100">
        <template #default="scope">
          <el-switch v-if="!scope.row.children" v-model="scope.row.display" :active-value="1" :inactive-value="0" active-color="#0082fc" inactive-color="#dadde5" @click="handleClose(scope.row)"> </el-switch>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { useRoute } from "vue-router";
import { scheduleList, noticeAdd, noticeEdit, scheduleUpdate, studyLog } from "@/api/study_admin";
import { ref, toRefs, reactive, getCurrentInstance, nextTick } from "vue";
import store from "@/store";
import { _debounce } from "@/utils/debounce";
export default {
  name: "class_homework",
  setup() {
    const { proxy } = getCurrentInstance();
    const route = useRoute();
    const classid = route.params.classid;
    const state = reactive({
      headers: {
        authentication: store.getters.get_authentication,
      },
      loading: true,
      tableData: [], // 数据列表
      multipleSelection: [], // 选中项
      total: 0, // 总条数
      page: 1, // 当前页
      perpage: 10, // 分页大小
      id: "",
      kw: "",
      dialogFormVisible: false,
      dialogEdit: false,
      dialogUidLog: false,
      numbereRef: {
        title: "",
        url: "",
      },
      rules: {
        title: [{ required: true, message: "请输入公告内容", trigger: "blur" }],
        url: [{ required: true, type: "url", message: "请输入正确的url", trigger: "blur" }],
      },
      rowStudent: {},
      modEdit: {
        id: "",
        xs_name: "",
        gongsi: "",
        gangwei: "",
        shouji: "",
        fenshu: "",
        beizhu: "",
      },
      uidLog: [],
      alltime: "",
      username: "",
    });

    // 获取学生列表
    const getnotice = async () => {
      state.loading = true;
      const res = await scheduleList(classid);
      if (res.code === 200) {
        state.tableData = res.data;
        state.total = res.data.total;
        state.page = res.data.current_page;
        state.loading = false;
      }
    };
    getnotice();

    // 观看记录
    const getUserLog = async (uid) => {
      state.loading = true;
      const res = await studyLog(classid, uid);
      if (res.code === 200) {
        state.uidLog = res.data.data;
        state.alltime = res.data.alltime;
        state.username = res.data.username;
        state.dialogUidLog = true;
        state.loading = false;
      }
    };

    // 设置当前查看的数据item
    const setItem = (item) => {
      state.item = item;
      state.isShowItem = true;
    };

    const handleOption = () => {
      state.page = 1;
      getnotice();
    };

    // 选择项
    const handleSelectionChange = (val) => {
      state.multipleSelection = val;
    };
    const changePage = (val) => {
      state.page = val;
      getnotice();
    };
    // 每页显示条数
    const handleSizeChange = (val) => {
      state.perpage = val;
      getnotice();
    };

    // 更新状态
    const handleClose = async (row) => {
      const params = {
        data: {
          id: row.id,
          display: row.display,
          title: row.title,
        },
      };
      const res = await scheduleUpdate(classid, params);
      if (res.message === "success") {
        if (res.data.display == 1) {
          proxy.$notify({
            title: "发布成功",
            type: "success",
            iconClass: "schedule-success",
            message: res.data.title + "【发布成功】",
          });
        } else {
          proxy.$notify.info({
            title: "取消发布成功",
            type: "info",
            iconClass: "schedule-info",
            message: res.data.title + "【已取消发布】",
          });
        }
      } else {
        proxy.$message({
          type: "error",
          message: "服务器错误",
          center: true,
        });
      }
    };

    // 添加公告
    const submitForm = _debounce(() => {
      _submitForm();
    }, 300);
    const numberValidateRef = ref(null);
    const _submitForm = () => {
      nextTick(() => {
        numberValidateRef.value.validate(async (valid) => {
          if (valid) {
            const params = {
              title: state.numbereRef.title,
              url: state.numbereRef.url,
            };
            const res = await noticeAdd(classid, params);
            if (res.message === "success") {
              state.dialogFormVisible = false;
              proxy.$message({
                type: "success",
                message: "添加成功",
                center: true,
              });
              setTimeout(function() {
                getnotice();
              }, 100);
            }
          }
        });
      });
    };

    const noticeValidateRef = ref(null);
    const resnoticeEdit = () => {
      noticeValidateRef.value.validate(async (valid) => {
        if (valid) {
          const params = {
            data: state.modEdit,
          };
          const res = await noticeEdit(classid, params);
          if (res.code === 200) {
            state.dialogEdit = false;
            proxy.$message({
              type: "success",
              message: "编辑成功",
              center: true,
            });
            getnotice();
          }
        }
      });
    };

    const openStudent = (row) => {
      state.modEdit = row;
      state.dialogEdit = true;
    };

    const eidtForm = () => {
      resnoticeEdit();
    };

    // const tableRowClassName = ({ row }) => {
    //     if (row.children) {
    //         return 'title-row';
    //     }
    //     return '';
    // }

    return {
      ...toRefs(state),
      classid,
      setItem,
      handleSelectionChange,
      getnotice,
      changePage,
      handleOption,
      handleClose,
      handleSizeChange,
      numberValidateRef,
      submitForm,
      openStudent,
      eidtForm,
      getUserLog,
      noticeValidateRef,
      //tableRowClassName
    };
  },
};
</script>

<style lang="scss" scoped>
.item-pl:hover {
  .icon-bofang2 {
    color: #0082fc;
  }
}
.item_log {
  width: 120px;
  display: inline-block;
  text-align: right;
}

.tab-header {
  padding: 24px 0 10px 0;
}

.ptlist {
  padding: 6px 0;
  overflow-y: auto;
  font-size: 14px;

  li {
    padding: 2px 0;
  }
}

.ifprt {
  padding-right: 10px !important;
}

.infobox {
  line-height: 24px;
  padding: 0 20px;
}

.scrollbar {
  height: 106px;
  overflow: hidden;
}

.min-pd {
  padding: 6px 10px;
}

::v-deep .el-scrollbar__wrap {
  max-height: 300px;
  overflow-x: hidden;
}

::v-deep .el-icon-close {
  display: none !important;
}

::v-deep .el-icon-close-tip {
  display: none !important;
}

::v-deep .el-button i {
  line-height: 0;
}
</style>

<style>
.el-dialog__body {
  padding: 20px 30px 30px 30px;
}
.schedule-success {
  color: #67c23a !important;
}
.schedule-info {
  color: #909399 !important;
}
/* .title-row td{
        background-color:#F3F8FF;
    } */
</style>