4dkankan_back/src/page/userList/userList.vue

<template>
  <div id="order-check">
    <div class="order-check-body" v-loading.fullscreen.lock="fullscreenLoading">
      <div class="order-management-body">
        <div class="order-management-inner">
          <!-- <span>时间段：</span>
          <el-date-picker size="large" v-model="searchDate" type="daterange" unlink-panels range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions2" value-format="yyyy-MM-dd" align="center">
          </el-date-picker> -->
          <span>关键字：</span>
          <el-input  ref="searchOrderNumber" v-model="searchOrderNumber" value="" placeholder="用户名称"></el-input>
          <el-button type="primary" @click="_searchOrderData(1)" color='red'>搜索</el-button>

          <!-- <el-button type="success" @click="active = {file: ''}" color='red' style="float: right">上传</el-button> -->
        </div>
        <div class="order-check_bottom">
          <div class="order-management-table">
            <el-table ref="order_table" class='e-table' :data="orders" style="width: 100%">
              <el-table-column prop="id" label="用户id">
              </el-table-column>
              <!-- <el-table-column prop="name" label="名称">
              </el-table-column> -->
              <el-table-column prop="userName" label="用户名称">
              </el-table-column>
              <el-table-column prop="incrementNum" label="会员权益">
              </el-table-column>
              <el-table-column prop="remainDownLoadNum" label="剩余下载次数">
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button type="text" @click="addVipNum(scope.row)" class="new_edit_btn">新增权益</el-button>
                  <el-button type="text" class="edit_btn" @click="addDownLoadNum(scope.row)">新增下载</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="order-management-pagination">
            <el-pagination  @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="10" layout="total, prev, pager, next, jumper" :total="total">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>

    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" @close="closeAdd" width="30%">
      <el-form :model="vipForm" :rules="rules" ref="ruleForm">
        <el-form-item prop="num" :label="`${dialogTitle}数：`" :label-width="formLabelWidth">
          <el-input style="width: 80%;" @input="limitNum" v-model="vipForm.num"></el-input>
        </el-form-item>
        <el-form-item prop="incrementEndTime" v-if="addType==1" label="到期时间：" :label-width="formLabelWidth">
          <el-date-picker style="width: 80%;" v-model="vipForm.incrementEndTime" value-format="yyyy-MM-dd HH:mm:ss" type="date" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeAdd">取 消</el-button>
        <el-button type="primary" @click="addNum">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'order-check',

  data () {
    return {
      //   type: 9,
      orders: [],
      currentPage: 1,
      fullscreenLoading: false,
      total: 0,
      searchDate: [],
      searchOrderNumber: '',
      hasClickSearch: false,
      pickerOptions2: {
        shortcuts: [
          {
            text: '最近一周',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      dialogFormVisible: false,
      formLabelWidth: '180px',
      vipForm: {
        num: 1,
        incrementEndTime: ''
      },
      dialogTitle: '新增权益',
      addType: 1,
      rules: {
        num: [{ required: true, message: '请输入数量', trigger: 'blur' }],
        incrementEndTime: [
          { required: true, message: '请选择结束时间', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    limitNum () {
    //   if (this.vipForm.num - 0 == 0 && this.vipForm.num.length == 1) {
    //     this.vipForm.num = 1
    //   } else {
    //     // this.vipForm.num = this.vipForm.num.replace(/[^1-9]/g, '')
    //   }

      if (this.vipForm.num - 0 == 0 && this.vipForm.num.length == 1) {
        this.vipForm.num = 1
      } else {
        this.vipForm.num = this.vipForm.num.replace(/\D/g, '')
      }
    },
    addDownLoadNum (row) {
      this.vipForm.userName = row.userName
      this.addType = 2
      this.dialogFormVisible = true
      this.dialogTitle = '新增下载'
    },
    addVipNum (row) {
      this.vipForm.userName = row.userName
      this.addType = 1
      this.dialogTitle = '新增权益'
      this.dialogFormVisible = true
    },
    closeAdd () {
      this.dialogFormVisible = false
      this.vipForm.num = 1
      this.vipForm.incrementEndTime = ''
      this.$refs['ruleForm'].resetFields()
    },
    addNum () {
      let params
      if (this.addType == 1) {
        // params = this.vipForm
        params = {
          userName: this.vipForm.userName,
          incrementEndTime: this.vipForm.incrementEndTime,
          incrementNum: this.vipForm.num
        }
      } else {
        params = {
          downloadNum: this.vipForm.num,
          userName: this.vipForm.userName
        }
      }

      this.$refs['ruleForm'].validate(async (valid) => {
        if (valid) {
          this.$http
            .post('/manager/user/insertIncrementls', params)
            .then((res) => {
              this.closeAdd()
              this._searchOrderData(1)
            })
        } else {
          console.log('请补全信息')
        }
      })
    },
    handleCurrentChange (val) {
      let page = val
      if (this.total > 0 && !this.hasClickSearch) {
        this._searchOrderData(page)
      } else {
        this._searchOrderData(page)
      }
    },

    async _searchOrderData (page) {
      this.hasClickSearch = true

      this.fullscreenLoading = true

      let para = {
        pageNum: page,
        searchKey: this.searchOrderNumber,

        pageSize: 10
      }

      let url = '/manager/user/list'

      let data = (await this.$http['post'](url, para)).data
      console.log(data)
      this.fullscreenLoading = false
      let temp = data.list
      for (var i = 0; i < temp.length; i++) {
        // temp[i]['expressNum_input'] = "";
        temp[i].items = []
        temp[i].remainDownLoadNum =
          temp[i].downloadNumTotal - temp[i].downloadNum
        if (!temp[i].incrementNum) {
          temp[i].incrementNum = 0
        }
      }
      this.orders = temp
      this.currentPage = page
      this.total = data.total
    }
  },
  mounted () {
    this._searchOrderData(1)
  }
}
</script>

<style scoped>
@import url("./style.css");
</style>

<style type="text/css">
.el-table__expand-icon > i {
  display: none !important;
}
</style>