HM21St_Page_Manager/src/views/cdkey_manage/index.vue

<template>
  <div class="manage-root personnel-manage">
    <Header />
    <div class="manage-root-contain">
        <nav-menu class="manage-root-contain-left" :activeMenuIndex="activeMenuIndex"></nav-menu>
        <div class="manage-root-contain-right personnel-manage-right">
            <breadcrumb :breadcrumbList="breadcrumbList" class="breadcrumb-box"></breadcrumb>
            <div class="personal-inner">
                <div class="common-title-box">
                    <h3>兑换码列表</h3>
                    <div class="btn-box">
                        <el-button type="primary" size="small" @click="createCdkey(1)">批量创建</el-button>
                        <el-button type="primary" size="small" @click="createCdkey(0)">创建兑换码</el-button>
                    </div>
                </div>
                <div class="search-box">
                    <div class="search-item">
                        <label>搜索</label>
                        <el-input
                            placeholder="输入搜索内容"
                            v-model="searchInput" maxlength="200">
                            <i slot="suffix" class="el-input__icon el-icon-search" @click="getList(1)" style="cursor: pointer;"></i>
                        </el-input>
                    </div>
                    <div class="search-item">
                        <label>状态</label>
                        <el-select v-model="searchStatus" @change="getList(1)" placeholder="请选择">
                            <el-option
                                v-for="item in statusList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="search-item">
                        <label>类型</label>
                        <el-select v-model="searchType" @change="getList(1)" placeholder="请选择">
                            <el-option
                                v-for="item in typeList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <el-table
                    class="search-table"
                    :data="tableData"
                    style="width: 100%"
                    @sort-change="handleSort"
                    :default-sort = dataSort
                    :max-height="tableHeight"
                    v-loading="tableLoading">
                    <el-table-column
                        type="index"
                        label="#"
                        sortable
                        width="54"
                        :index="(pageNumber-1)*pageSize+1">
                    </el-table-column>
                    <el-table-column
                        prop="name"
                        label="兑换码名称"
                        sortable="custom"
                        width="163">
                    </el-table-column>
                    <el-table-column
                        prop="code"
                        label="兑换码"
                        sortable="custom"
                        width="170">
                        <template slot-scope="scope">
                            {{scope.row.type===0?scope.row.code:'多个'}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="type"
                        label="类型"
                        sortable="custom"
                        width="92" >
                        <template slot-scope="scope">
                            {{scope.row.type===0?'普通兑换码':'批量兑换码'}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="goods_count"
                        label="内容数"
                        min-width="80">
                    </el-table-column>
                    <el-table-column
                        prop="phone"
                        label="使用情况"
                        width="96">
                        <template slot-scope="scope">
                            {{scope.row.person_count_use+'/'+scope.row.person_count_max}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="creator_name"
                        label="创建人"
                        width="88">
                    </el-table-column>
                    <el-table-column
                        prop="create_time"
                        label="创建时间"
                        sortable="custom"
                        width="164">
                    </el-table-column>
                    <el-table-column
                        prop="end_date"
                        label="到期日期"
                        sortable="custom"
                        width="126" >
                    </el-table-column>
                    <el-table-column
                        prop="valid_status"
                        label="状态"
                        width="88" >
                        <template slot-scope="scope">
                            <div class="status-box">
                                <span :style="{background:statusListCss[scope.row.valid_status].bg}"></span>
                                <b :style="{color:statusListCss[scope.row.valid_status].color}">{{statusListCss[scope.row.valid_status].text}}</b>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="memo"
                        label="备注"
                        width="120">
                    </el-table-column>
                    <el-table-column
                        fixed="right"
                        label="操作"
                        width="180">
                        <template slot-scope="scope">
                            <el-button
                                @click.native.prevent="handleEdit(scope.row)"
                                type="text"
                                size="small"
                                class="primary-btn">
                                查看
                            </el-button>
                            <el-button
                                @click.native.prevent="handleUp(scope.row, scope.$index)"
                                type="text"
                                size="small"
                                class="primary-btn"
                                v-if="scope.row.valid_status===0">
                                启用
                            </el-button>
                            <el-button
                                @click.native.prevent="handleUp(scope.row, scope.$index)"
                                type="text"
                                size="small"
                                class="red-btn"
                                v-else-if="scope.row.valid_status===1">
                                停用
                            </el-button>
                            <el-button
                                @click.native.prevent="handleRevoca(scope.row)"
                                type="text"
                                size="small"
                                class="primary-btn">
                                撤回
                            </el-button>
                            <el-button
                                @click.native.prevent="handleDelete(scope.row, scope.$index)"
                                type="text"
                                size="small"
                                class="red-btn">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNumber"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="pageSize"
                    layout="total, prev, pager, next, sizes, jumper"
                    :total="total_count">
                </el-pagination>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》from ‘《组件路径》';
import Header from "../../components/Header.vue";
import NavMenu from "../../components/NavMenu.vue"
import Breadcrumb from '../../components/Breadcrumb.vue';
import { getLogin } from "@/api/ajax";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: { Header, NavMenu, Breadcrumb },
  props: {},
  data() {
    //这里存放数据
    return {
        activeMenuIndex: "cdkey_manage",
        breadcrumbList:[
            {
                icon:'barcode-line',
                url:'',
                text:''
            },
            {
                icon:'',
                url:'',
                text:'兑换码管理'
            }
        ],
        searchInput: '',
        searchType: -1,
        searchStatus: -1,
        typeList:[
            {
                value:-1,
                label:'全部'
            },
            {
                value:0,
                label:'普通兑换码'
            },
            {
                value:1,
                label:'批量兑换码'
            }
        ],
        statusList:[
            {
                label: '全部',
                value: -1
            },
            {
                label: '使用中',
                value: 1
            },
            {
                label: '已停用',
                value: 0
            },
            {
                label: '已到期',
                value: 2
            }
        ],
        statusListCss:{
            1:{
                text:'使用中',
                bg:'#165DFF',
                color:''
            },
            0:{
                text:'已停用',
                bg:'#F53F3F',
                color:''
            },
            2:{
                text:'已过期',
                bg:'#FF7D00',
                color:''
            }
        },
        tableData:[
            // {
            //     id:'1',
            //     userName:'admin',
            //     realName:'超级管理员',
            //     sex:'0',
            //     type:'0', // 0 管理员 1 平台管理员 2 内容管理员 3 财务管理员 4 兑换码管理员
            //     email:'d.dkemi@kqtdgbo.tj',
            //     phone:'13082684216',
            //     status:'1',
            //     data:'2018-02-03',
            //     img:''
            // }
        ],
        pageSize: window.localStorage.getItem('pageSize')?Number(window.localStorage.getItem('pageSize')):10, 
        pageNumber: window.localStorage.getItem('pageNumber')?Number(window.localStorage.getItem('pageNumber')):1,
        tableHeight: "", // 表格高度
        total_count: 0,
        dataSort: {},
        tableLoading: false,
    }
  },
  //计算属性 类似于data概念
  computed: {
  },
  //监控data中数据变化
  watch: {},
  //方法集合
  methods: {
    createCdkey(type){
        window.localStorage.removeItem('cdKeyId')
        this.$router.push({
            path: '/createCdkey',
            query: {
                type: type
            }
        })
    },
    handleSort(value){
        let dataSort = {
            prop: value.prop,
            order: value.order
        }
        this.dataSort = dataSort
        this.getList()
    },
    // 撤回
    handleRevoca(row){
        this.$confirm('确定撤回吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

        }).catch(() => {
               
        });
    },
    // 删除
    handleDelete(row){
        this.$confirm('确定删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            let Mname = "/CourseServer/Manager/ZBCourseManager/DeleteZBCourse";
            let data = {
                id: row.id
            };
            getLogin(Mname, data).then(res => {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                this.getList()
            });
        }).catch(() => {
               
        });
    },
    // 查询列表
    getList(page){
        this.tableLoading = true
        if(page){
            this.pageNumber = page
        }
        let MethodName = "/ShopServer/Manager/DiscountCodeManager/PageQueryDiscountCodeList";
        let order_column_list = []
        if(this.dataSort != {}){
            if(this.dataSort.order=='descending'){
                order_column_list = [this.dataSort.prop + ':desc']
            }else if(this.dataSort.order=='ascending'){
                // 升序不传值
                order_column_list = [this.dataSort.prop]
            }else{
                order_column_list = ['create_time:desc']
            }
        }else{
            order_column_list = ['create_time:desc']
        }
        let data = {
            content:this.searchInput.trim(),
            type:this.searchType,
            valid_status:this.searchStatus,
            page_capacity:this.pageSize,
            cur_page:this.pageNumber,
            order_column_list: order_column_list
        }
        getLogin(MethodName, data)
        .then((res) => {
            this.tableLoading = false
            if(res.status===1){
               this.tableData = res.discount_code_list
               this.total_count = res.total_count
            }
        })
        .catch(() => {
            this.tableLoading = false
        });
    },
    // 编辑账号
    handleEdit(row){
        // 根据登录用户判断当前用户是不是超管 在table里加上disabled

        // 点击时记录页码和每页条数
        window.localStorage.setItem('pageSize',this.pageSize)
        window.localStorage.setItem('pageNumber',this.pageNumber)
        if(row&&row.id){
            this.$router.push({
                path: "/checkGoods",
                query: {
                    id: row?row.id:'',
                    type: row.type
                },
            });
        }
    },
    // 停用 启用
    handleUp(row, index) {
      let Mname = "/OrgServer/Manager/SysUserManager/EnableSysUser";
      let updataData = JSON.parse(JSON.stringify(row));
      let data = {
        id: row.id
      };
      if (row.status === 0) {
        // 下架状态
        data.is_enable = "true";
        updataData.status = 1;
      } else if (row.status === 1) {
        data.is_enable = "false";
        updataData.status = 0;
      }
      getLogin(Mname, data).then(res => {
        this.$message.success("操作成功");
        this.$set(this.tableData, index, updataData);
        this.getList()
      });
    },
    handleSizeChange(val) {
        this.pageSize = val
        this.pageNumber = 1
        this.getList()
    },
    handleCurrentChange(val) {
        this.pageNumber = val
        this.getList()
    },
    //计算table高度(动态设置table高度)
    getTableHeight() {
      let tableH = 370; //距离页面下方的高度
      let tableHeightDetil = window.innerHeight - tableH;
      if (tableHeightDetil <= 300) {
        this.tableHeight = 300;
      } else {
        this.tableHeight = window.innerHeight - tableH;
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getTableHeight();
    this.getList()
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    let _this = this
    let input = document.querySelector('input');
    input.addEventListener('keyup', function(event) {
        // 判断是否按下回车键
        if (event.keyCode === 13) {
            // 回车键被按下，执行你想要的操作
            _this.getList(1)
        }
    });
  },
  //生命周期-创建之前
  beforeCreated() { },
  //生命周期-挂载之前
  beforeMount() { },
  //生命周期-更新之前
  beforUpdate() { },
  //生命周期-更新之后
  updated() { },
  //生命周期-销毁之前
  beforeDestory() { },
  //生命周期-销毁完成
  destoryed() { },
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() { }
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
</style>
<style lang="scss">
.personal-inner{
    .user-info{
        .cell{
            display: flex;
            align-items: center;
            .touxiang{
                width: 24px;
                height: 24px;
                border-radius: 50%;
                margin-right: 8px;
            }
        }
    }
    .type-info{
        background: #F2F3F5;
        border-radius: 2px;
        color: #1D2129;
        padding: 2px 8px 3px 8px;
        font-weight: 500;
        font-size: 14px;
        line-height: 22px;
        height: auto;
        border: none;
    }
}
</style>