gdy_pc_8/src/course/dealerManage/edit.vue

<template>
  <div class="page">
    <el-page-header @back="$router.go(-1)" :content='curName' style="margin-bottom: 20px;"></el-page-header>
    <el-container class="course_data">
      <el-table :data="courseList" border stripe highlight-current-row>
        <el-table-column prop="name" label="课程名称" align="center">
        </el-table-column>
        <el-table-column label="卖出" align="center">
          <template slot-scope="scope"> {{ scope.row.save }} </template>
        </el-table-column>
        <el-table-column label="剩余" align="center">
          <template slot-scope="scope"> {{ scope.row.surplus }} </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="250" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="courseAdd(scope.row, scope.$index)"
              >增加</el-button
            >
            <el-button
              size="mini"
              type="text"
              @click="courseSurplus(scope.row, scope.$index)"
              >减少</el-button
            >
            <el-button
              size="mini"
              type="text"
              @click="courseRecord(scope.row, scope.$index)"
              >变动明细</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="proness">
        <el-pagination
          background
          layout="prev, pager, next"
          @prev-click="prevPage()"
          @next-click="nextPage()"
          @current-change="curPageChange()"
          :current-page.sync="page.cur"
          :page-size="page.size"
          :total="page.total"
          :hide-on-single-page="false"
        >
        </el-pagination>
      </div>
    </el-container>
    <el-dialog
      :title="eldiType?'增加课程名额':'减少课程名额'"
      :visible.sync="changeLimit"
      width="30%"
      :close-on-click-modal="false"
      :close-on-press-escape='false'
      center
      @close="cancleDi">
      <el-form :model="eldiForm" ref="form" label-width="80px" :inline="false" size="normal">
        <el-form-item label="选择课程" size="normal">
          <el-select v-model="eldiForm.id" placeholder="请选择课程">
            <el-option
              v-for="item in courseOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数量">
          <el-input-number v-model="eldiForm.num" size="normal" :min="1" :step="1" :controls="true">
          </el-input-number>
        </el-form-item>
        <el-form-item label="备注" size="normal">
          <el-input type="textarea" :rows="2" v-model="eldiForm.beizhu" placeholder="请输入备注" 
            :maxlength="-1" :show-word-limit="false" :autosize="{ minRows: 2, maxRows: 5 }">
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="cancleDi">取消</el-button>
        <el-button type="primary" @click="confirmSave">保存</el-button>
      </span>
    </el-dialog>
    
  </div>
</template>

<script>
export default {
  name: "dealerManage",
  data() {
    return {
      curName: "",
      page: {
        total: 1000,
        size: 10,
        cur: 1,
      },
      teamValue: "",
      changeLimit:false,
      eldiType:0,
      eldiForm:{
        id:0,
        num:0,
        addOrreduce:false,
        beizhu:''
      },
      courseOptions:[
        {
          label:"经济讲堂1",
          value:1555
        },
        {
          label:"经济讲堂2",
          value:1552
        },
        {
          label:"经济讲堂3",
          value:1535
        },
        {
          label:"经济讲堂4",
          value:1255
        }
      ],
      courseList:[],
      courseList: [
        {
          id: 123455,
          name: "经济论坛001",
          save: 64,
          surplus:136,
        },
        {
          id: 123452,
          name: "经济论坛002",
          save: 33,
          surplus:16,
        },
        {
          id: 123451,
          name: "经济论坛003",
          save: 64,
          surplus:136,
        },
        {
          id: 123422,
          name: "经济论坛004",
          save: 62,
          surplus:116,
        },
      ],
    };
  },
  created() {
    this.init();
  },
  watch:{
    $route(){
      this.init()
    }
  },
  methods: {
    //增加名额
    courseAdd(row,index){
      this.eldiType = 1
      this.changeLimit = true
    },
    //减少名额
    courseSurplus(row,index){
      this.eldiType = 0
      this.changeLimit = true
    },
    //查看明细
    courseRecord(row,index){
      this.$router.push({
        path:`/course/courseRecord/${row.id}`,
        query:{
          name:row.name
        }
      })
    },
    // 提交名额交易
    confirmSave(){
      this.$confirm('确定要提交名额交易吗？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'info',
      }).then(action => {
        this.$message({
          message: '交易成功！',
          type: 'success',
          showClose: true,
          duration: 1500,
        });
        this.cancleDi()
      }).catch(() => {
        
      });
      
    },
    //取消弹窗
    cancleDi(){
      let form = {
        id:0,
        num:0,
        addOrreduce:false,
        beizhu:''
      }
      this.eldiType = 0
      this.eldiForm = form
      this.changeLimit = false
    },
    //初始化
    init() {
      // console.log(this.$route)
        this.curName = `${this.$route.query.tel}推广的课程`;
    },
    // 上一页
    prevPage() {
      console.log(this.page);
    },
    // 下一页
    nextPage() {
      console.log(this.page);
    },
    // 页面切换
    curPageChange() {
      console.log(this.page);
    },
  },
};
</script>
<style scoped lang="scss">
.page {
  padding: 15px;
  background-color: #fff;
  border-radius: 5px;
  .search {
    margin-left: 15px;
  }
  .course_data {
    margin-top: 25px;
    display: block;
    .proness {
      margin-top: 20px;
      display: flex;
      justify-content: center;
    }
  }
}
</style>