flyLong/pc/src/views/lessonManage.vue

<template>
  <div class="context">
    <div class="panel">
      <h5>课程表管理</h5>
    </div>
    <div class="change">
      <el-button type="primary" @click="addLessonTable" v-if="userLevel != 4">新增课程表</el-button>
      <el-button type="" @click="copy" v-if="userLevel != 4">复制</el-button>
      <el-button type="" @click="delList" v-if="userLevel != 4">删除</el-button>
      <el-button type="" @click="query" :disabled="serachBtnStatus">刷新</el-button>
    </div>
    <div class="table">
      <el-table
          :data="tableData"
          border
          is-horizontal-resize
          :default-sort="{prop: 'date', order: 'descending'}"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          class=""
          @selection-change="handleSelectionChange" @current-change="clickChange"
      >
        >
        <el-table-column label="选择" width="55">
          <template slot-scope="scope">
            <el-radio v-model="tableRadio" :label="scope.row"><i></i></el-radio>
          </template>
        </el-table-column>
        <el-table-column
            type="index"
            label="序号"
            align="center"

            width="50">
        </el-table-column>
        <el-table-column
            prop="Name"
            label="日期"
        >
          <template slot-scope="scope">
            <div class="rowHeight">
              <!--                            已过期-->
              <span class="readyTime" v-if="scope.row.Diffweek < 0">
                               {{ scope.row.BeginDate }} - {{ scope.row.EndDate }}
                        </span>
              <!--                            已上线-->
              <span class="CurTime" v-if="scope.row.Diffweek >= 0">
                             {{ scope.row.BeginDate }} - {{ scope.row.EndDate }}
                        </span>
              <!--                            当前进行-->
              <i class="curIcon" v-if="scope.row.Status == 1 && scope.row.Diffweek == 0"></i>
              <span class="runTime" v-if="scope.row.Status == 2 ">
                              {{ scope.row.BeginDate }} - {{ scope.row.EndDate }}
                        </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
            prop="Name"
            label="课程表名称"
            sortable
        >
        </el-table-column>
        <el-table-column
            prop="CreateColumn.CreatedAt"
            label="最后编辑时间"
            :formatter="filterFmtDate"
            sortable
        >
        </el-table-column>
        <el-table-column
            prop="Online"
            label="是否上线"
            v-if="userLevel != 4"
        >
          <!--                    上线状态	0：不上线 1:下线-->
          <template slot-scope="scope">
            <el-switch
                v-model="scope.row.Online"
                :active-value="1"
                :inactive-value="0"
                active-color="#409EFF"
                inactive-color="#D9D9D9"
                @change=changeWechat($event,scope.row)
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
            prop="Status"
            label="操作"
        >
          <template slot-scope="scope">
            <el-button type="text" v-if="scope.row.Diffweek >= 0 && userLevel != 4" @click="editName(scope.row)">编辑名称
            </el-button>
            <el-button type="text" v-if="scope.row.Diffweek >= 0  && userLevel != 4" @click="goEdit(scope.row)">修改课程
            </el-button>
            <el-button type="text" @click="seeWeek(scope.row)">预览本周</el-button>
          </template>
        </el-table-column>

      </el-table>
      <br>
      <el-pagination
          background
          :total="pageination.total"
          :page-size="pageination.pageItem"
          @current-change="pageChange"
      ></el-pagination>
    </div>

    <el-dialog title="发布课程表" :visible.sync="dialogVisible" width="650px">
      <div class="dialogTitle">
        <span>{{ form.name }}</span>
      </div>
      <div>
        <span class="demonstration">选择发布日期(按周选取)</span>
        <br>
        <br>
        <el-date-picker
            v-model="form.week"
            type="week"
            :picker-options="{'firstDayOfWeek': 1}"
            format="yyyy 第 WW 周"
            placeholder="选择周">
        </el-date-picker>
        <br>
        <br>
        <span>
                    微信可见
                </span>
        <el-switch
            v-model="form.wechat"
            :active-value="1"
            :inactive-value="0"
            active-color="#409EFF"
            inactive-color="#D9D9D9">
        </el-switch>
        <span>
                    微信可预约
                </span>
        <el-switch
            v-model="form.appoint"
            :active-value="1"
            :inactive-value="0"
            active-color="#409EFF"
            inactive-color="#D9D9D9">
        </el-switch>
      </div>
      <div class="dialogFooter">
        <el-button type="primary" size="small" @click="public">确定</el-button>
        <el-button @click="dialogVisible = false" size="small">取消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="复制课程表" :visible.sync="dialogCopyVisible" width="650px">
      <div>
        <span class="demonstration">选择发布日期(按周选取)</span>
        <br>
        <br>
        <!--                todo 禁用当前周以前的选项  disabledDate(date) {
           return date.getTime() <= Date.now()-86400000;
         }
        -->
        <el-date-picker
            v-model="copyForm.week"
            type="week"
            :picker-options="{'firstDayOfWeek': 1}"
            format="yyyy 第 WW 周"
            placeholder="选择周">
        </el-date-picker>
      </div>
      <div class="dialogFooter">
        <el-button type="primary" size="small" @click="confirmCopy">确定</el-button>
        <el-button @click="dialogCopyVisible = false" size="small">取消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="编辑名称" :visible.sync="dialogNameVisible" width="650px">
      <el-form ref="form" :model="form" label-width="160px">
        <el-form-item label="课程表名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
      </el-form>
      <div class="dialogFooter">
        <el-button type="primary" size="small" @click="confirmName">确定</el-button>
        <el-button @click="dialogNameVisible = false" size="small">取消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="" :visible.sync="previewShow" width="1200px">
      <preview :preview-date="previewDate" :big-title="BigTitle" :small-title="smallTitle"></preview>
      <div class="dialogFooter">
        <el-button @click="previewShow = false" size="small">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Global from '../Global.js'
import preview from '../components/preview'
import {
  STTBasicListQuery,
  STTBasicOfflineEdit,
  STTBasicStatusEdit,
  SchoolTimeTableCopy,
  STTBasicEdit,
  testSelect,
  SttPlanPreview,
  SchoolTimetablePreview,
} from "../api/getApiRes";

let qs = require('qs');
export default {
  data() {
    return {
      serachBtnStatus: false,
      previewShow: false,
      previewDate: {},
      BigTitle: '',
      smallTitle: '',
      dialogVisible: false,
      dialogCopyVisible: false,
      dialogNameVisible: false,
      dialogdata: [],
      dialogValue: [],
      // panel 配置项目
      multipleSelection: [],
      pageination: {
        pageItem: 100,
        pageoptions: pageOptions(),
        total: 100,
        pageIndex: 1,
      },
      form: {
        Id: '',
        name: '',
        week: '',
        wechat: 1,
        appoint: 1,
      },
      copyForm: {
        stbId: '',
        Id: '',
        name: '',
        week: '',
        wechat: 1,
        appoint: 1,
      },
      tableData: [],
      tableRadio: [],
      userLevel: localStorage.userLevel
    }
  },
  mounted() {
    this.getTableQuery();
  },
  methods: {
    clickChange(item) {
      this.tableRadio = item
    },
    // 编辑名称
    editName(row) {
      this.form.name = row.Name;
      this.form.stbId = row.StbId;
      this.dialogNameVisible = true;
    },
    // 预览本周
    seeWeek(row) {
      let that = this;
      console.log(row);
      let param = {
        token: localStorage.token,
        stbId: row.StbId,
      };
      let postdata = qs.stringify(param);
      SchoolTimetablePreview(postdata).then(res => {
        let json = res;
        if (json.Code == 0) {
          that.BigTitle = row.Name;
          that.smallTitle = row.BeginDate + '至' + row.EndDate;
          that.previewDate = json.Rs;
          // 前台排序
          that.previewDate.SttPreviewClassList.sort((a, b) => a.ClassIndex - b.ClassIndex);//升序
          that.previewShow = true;
        } else {
          that.$message.error(json.Memo);
        }
      })
    },
    addLessonTable() {
      this.$router.push({
        path: '/editLessonManage', query: {
          id: 0
        }
      });
    },
    // 删除
    delList() {
      let that = this;
      if (this.tableRadio.length == 0) {
        this.$message.error("请先选中一条记录");
        return false
      }
      let row = that.tableRadio;

      if (row.Diffweek < 0) {
        that.$message({
          showClose: true,
          message: '已过期的课程表不可删除',
          type: 'error'
        });
        return false
      }

      let param = {
        token: localStorage.token,
        stbId: row.StbId,
        status: 9,//0禁用1启用9删除
      };
      let postdata = qs.stringify(param);

      this.$confirm('此操作将永久删除该课程表, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        STTBasicStatusEdit(postdata).then(res => {
          let json = res;
          if (json.Code == 0) {
            that.$message({
              showClose: true,
              message: '选中的课程表已删除！',
              type: 'success'
            });
            // 重载列表
            that.getTableQuery();
          } else {
            that.$message.error(json.Memo);
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 提交名称修改
    confirmName() {
      let that = this;
      if (!this.form.name) {
        this.$message.error('名称不能为空');
        return false
      }
      if (this.form.name.length < 3) {
        this.$message.error('名称不能小于3个字符');
        return false
      }
      if (this.form.name.length > 20) {
        this.$message.error('名称不能大于20个字符');
        return false
      }
      let param = {
        token: localStorage.token,
        stbId: this.form.stbId,
        name: this.form.name,
      };
      let postdata = qs.stringify(param);
      STTBasicEdit(postdata).then(res => {
        let json = res;
        if (json.Code == 0) {
          that.$message({
            showClose: true,
            message: '名称修改成功！',
            type: 'success'
          });
          this.getTableQuery();
          this.dialogNameVisible = false;
        } else {
          that.$message.error(json.Memo);
        }
      })
    },
    confirmCopy() {
      let that = this;
      let row = this.copyForm;

      if (!row.week) {
        that.$message.error('没有选择发布周期');
        return false
      }
      let param = {
        token: localStorage.token,
        stbId: row.StbId,
        incomingDate: nonTfmtDatetoLength(row.week, 10),//对应日期 字符串 年-月-日 格式,
      };
      let postdata = qs.stringify(param);
      SchoolTimeTableCopy(postdata).then(res => {
        let json = res;
        if (json.Code == 0) {
          that.$message({
            showClose: true,
            message: '课程复制成功！',
            type: 'success'
          });
          this.dialogCopyVisible = false;
          this.getTableQuery();
        } else {
          that.$message.error(json.Memo);
        }
      })
    },
    copy() {
      let that = this;
      this.dialogCopyVisible = true;
      if (this.tableRadio.length == 0) {
        this.$message.error("请先选中一条记录");
        return false
      }
      this.copyForm = that.tableRadio;
    },
    // 发布课程表
    openLessonTable(row) {
      this.dialogVisible = true;
      this.form.name = row.name;
      this.form.Id = row.Id;
      this.form.week = '';
    },
    // 发布
    public() {
      let that = this;
      if (!this.form.week) {
        this.$message({
          showClose: true,
          message: '错了哦，发布周期不能空',
          type: 'error'
        });
        return false
      }

      let param = {
        token: localStorage.token,
        detectorid: this.form.Id,
        week: this.form.week,
        wechat: this.form.wechat,
        appoint: this.form.appoint,
      };
      let postdata = qs.stringify(param);
      testSelect(postdata).then(res => {
        let json = res;
        if (json.Code == 0) {
          that.$message({
            showClose: true,
            message: this.form.name + '已发布！',
            type: 'success'
          });
          // 重载列表
          that.getTableQuery();
          this.dialogVisible = false;
        } else {
          that.$message.error(json.Memo);
        }
      });
    },
    // 取消发布
    unpubilc(row) {
      let that = this;
      let param = {
        token: localStorage.token,
        detectorid: row.Id,
        status: 4,//0禁用1启用9删除
      };
      let postdata = qs.stringify(param);
      testSelect(postdata).then(res => {
        let json = res;
        if (json.Code == 0) {
          that.$message({
            showClose: true,
            message: '选中的课程表已复制！',
            type: 'success'
          });
          // 重载列表
          that.getTableQuery();
        } else {
          that.$message.error(json.Memo);
        }
      });
    },
    // 编辑课程表
    goEdit(row) {
      // 参数???
      this.$router.push({
        path: '/editLessonManage', query: {
          id: row.StbId,
          name: row.Name
        }
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 查询按钮
    query() {
      let that = this;
      that.serachBtnStatus = true;
      let totalTime = 2
      let clock = window.setInterval(() => {
        totalTime--
        if (totalTime < 0) {
          totalTime = 2;
          that.serachBtnStatus = false;
        }
      }, 1000)
      this.getTableQuery();
      this.$message.success('查询完毕');
    },
    // 页面数据查询
    getTableQuery() {
      let that = this;
      that.loading = true;
      let param = {
        token: localStorage.token,
        start: 1,//
        tableMax: 9999,//
      };
      let postdata = qs.stringify(param);
      STTBasicListQuery(postdata).then(res => {
        let json = res;
        if (json.Code == 0) {
          that.loading = false;
          if (json.Rs) {
            that.allTableData = json.Rs;
            that.recordsTotal = json.Rs.length;
          } else {
            that.allTableData = [];
            that.recordsTotal = 0;
          }

          // 设置分页数据
          that.setPaginations();
        } else {
          that.$message.error(json.Memo);
        }
      })
    },
    // 设置分页数据
    setPaginations() {
      // 分页属性
      let that = this;
      that.pageination.total = that.recordsTotal;
      // 默认分页
      that.tableData = that.allTableData.filter((item, index) => {
        return index < that.pageination.pageItem;
      });
    },
    // 每页显示数量
    handleSizeChange() {
      let that = this;
      that.tableData = that.allTableData.filter((item, index) => {
        return index < that.pageination.pageItem;
      });
      that.draw = that.pageination.pageItem;
      that.getTableQuery();
    },
    // 翻页
    pageChange(pageIndex) {
      let that = this;
      // 获取当前页
      let index = that.pageination.pageItem * (pageIndex - 1);
      // 数据总数
      let nums = that.pageination.pageItem * pageIndex;
      // 容器
      let tables = [];
      for (var i = index; i < nums; i++) {
        if (that.allTableData[i]) {
          tables.push(that.allTableData[i])
        }
        this.tableData = tables;
      }
      that.start = index * that.draw;
      // that.getTableQuery();
    },
    // 自动排序
    sortChange(params) {
      console.log(params)
    },
    // 过滤时间
    filterFmtDate(value, row, column) {
      let that = this;
      return nonTfmtDate(column, 11);
    },
    // 过滤金额
    filterMoney(value, row, column) {
      let that = this;
      return parseFloat(column).toFixed(2);
    },
    // 课程表上下线状态修改
    changeWechat(e, row) {
      let that = this;
      let param = {
        token: localStorage.token,
        stbId: row.StbId,//
        online: e,//
      };
      let postdata = qs.stringify(param);
      STTBasicOfflineEdit(postdata).then(res => {
        let json = res;
        if (json.Code == 0) {
          let text = parseInt(e) == 1 ? '上线' : '下线';
          that.$message({
            showClose: true,
            message: '当前课程表已' + text,
            type: 'success'
          });
          // 重载列表
          that.getTableQuery();
        } else {
          that.$message.error(json.Memo);
          row.Online = 0;
        }
      })
    },
  },
  watch: {
    $route(to) {
      if (to.name == 'lessonManage') {
        this.getTableQuery();
      }
    },
  },
  components: {
    preview
  }
}
</script>

<style scoped>
@import "../assets/css/panel.css";

.context {
  height: 770px;
  overflow-y: scroll;
  display: block;
  margin: 0 auto;
  background-color: #fff !important;
  padding: 30px;
  padding-bottom: 60px;
}

.panel-body {
  padding: 20px;
  background: #F0F2F5;
}

.change {
  width: 100%;
  overflow: hidden;
  display: block;
  margin: 0 auto;
  padding-top: 10px;
  padding-bottom: 10px;
}

.change button {
  float: left;
}

.change button.pull-right {
  float: right;
}

.dialogTitle {
  width: 100%;
  overflow: hidden;
  display: block;
  margin: 0 auto;
  color: #000000;
  font-size: 18px;
  text-align: center;
}

.dialogTitle span {
  width: 169px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #fff;
  background: #3799FF;
  border-radius: 250px;
  font-size: 18px;
  overflow: hidden;
  display: block;
  margin: 0 auto;
  margin-bottom: 30px;
}

.dialogTitle em {
  float: none;
  font-style: normal;
  color: #3799FF;
  margin: 0;
}

/deep/ .el-transfer-panel__item .el-checkbox__input {
  left: 40px;
}

.dialogFooter {
  width: 90%;
  overflow: hidden;
  display: block;
  margin: 0 auto;
  margin-top: 10px;
}

.dialogFooter button {
  float: right;
  margin-left: 10px;
}

.link {
  color: #03B1FF;
  text-decoration: underline;
}

.readyTime {
  width: 90%;
  height: 30px;
  line-height: 30px;
  overflow: hidden;
  display: block;
  margin: 0 auto;
  border: 1px solid #FFC769;
  border-radius: 4px;
  background: #FFF0D6;
  text-indent: 14px;
}

.CurTime {
  width: 90%;
  height: 27px;
  line-height: 30px;
  overflow: hidden;
  display: block;
  margin: 0 auto;
  border: 1px solid #3799FF;
  border-radius: 4px;
  background: #D9ECFF;
  padding: 3px 6px;
  text-indent: 14px;
}

.runTime {
  width: 90%;
  height: 30px;
  line-height: 30px;
  overflow: hidden;
  display: block;
  margin: 0 auto;
  border: 1px solid #3799FF;
  border-radius: 4px;
  background: #D9ECFF;
  padding: 3px 6px;
  text-indent: 14px;
}

.curIcon {
  position: relative;
  left: 4px;
  top: -34px;
  width: 24px;
  height: 24px;
  float: left;
  background: url("../assets/img/lessonTable/star.png") top center no-repeat;
  background-size: 100% 100%;
}

.rowHeight {
  width: 220px;
  overflow: hidden;
  display: block;
  height: 35px;
  float: left;
  margin: 0;
}

/*ipad only*/
@media only screen and (max-width: 1366px) {
  .CurTime {
    width: 98%;
    font-size: 12px;
    text-align: left;
    text-indent:3px;
    padding-left: 0;
    padding-right: 0;
  }
  .rowHeight {
    width: 100%;
  }
  .readyTime {
    width: 98%;
    font-size: 12px;
    text-align: left;
    text-indent:3px;
  }
  .curIcon {
    left:0
  }
}
</style>