clearticket_ota/src/views/selfManage/thirdParty/index.vue

<template>
  <div class="app-container">
    <div class="form-wrap">
      <div class="searchBox">
        <el-form
          :inline="true"
          :model="form"
          ref="form"
          size="mini"
          label-width="70px">
          <el-form-item
            prop="name"
            label="名称">
            <el-input
              v-model="form.name"
              placeholder="名称（模糊）"
              clearable
              @keyup.enter.native="reload"></el-input>
          </el-form-item>
          <el-form-item
            prop="contactName"
            label="联系人">
            <el-input
              v-model="form.contactName"
              placeholder="联系人"
              clearable
              @keyup.enter.native="reload"></el-input>
          </el-form-item>
          <el-form-item
            prop="phone"
            label="电话">
            <el-input
              v-model="form.phone"
              placeholder="电话"
              clearable
              @keyup.enter.native="reload"></el-input>
          </el-form-item>
          <el-form-item
            prop="status"
            label="状态">
            <el-select
              v-model="form.status"
              placeholder="全部"
              clearable>
              <el-option
                label="正常"
                :value="1"></el-option>
              <el-option
                label="禁用"
                :value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="btn-wrap">
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="reload">搜索</el-button>
            <el-button
              icon="el-icon-refresh"
              @click="reset">重置</el-button>
            <el-button
              type="primary"
              icon="el-icon-plus"
              @click="openForm">新增分销商</el-button>
            <el-button
              type="primary"
              icon="el-icon-connection"
              :disabled="!selected.length"
              @click="batchBind">批量授权票种</el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              :disabled="!selected.length"
              @click="batchDelete">批量删除</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="tableBox">
        <el-table
          v-loading="loading"
          :data="tableData"
          border
          stripe
          row-class-name="is-center"
          @selection-change="selected = $event"
        >
          <el-table-column
            type="selection"
            width="45"></el-table-column>
          <el-table-column
            prop="name"
            label="名称"
            min-width="140"
            show-overflow-tooltip></el-table-column>
          <el-table-column
            prop="loginName"
            label="登录名"
            width="130"></el-table-column>
          <el-table-column
            prop="contactName"
            label="联系人"
            width="90"></el-table-column>
          <el-table-column
            prop="phone"
            label="电话"
            width="130"></el-table-column>
          <el-table-column
            label="余额(元)"
            width="100"
            align="right">
            <template slot-scope="{ row }">{{ fmtMoney(row.balance) }}</template>
          </el-table-column>
          <el-table-column
            label="状态"
            width="80"
            align="center">
            <template slot-scope="{ row }">
              <el-tag
                :type="row.status === 0 ? 'danger' : 'success'"
                size="small">{{ row.status === 0 ? '禁用' : '正常' }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="已授权票种"
            min-width="160"
            show-overflow-tooltip>
            <template slot-scope="{ row }">
              <span v-if="row.selfTicketTypeList && row.selfTicketTypeList.length">{{ row.selfTicketTypeList.map(i => i.name).join('、') }}</span>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="lastLoginTime"
            label="最近登录"
            width="150">
            <template slot-scope="{ row }">{{ row.lastLoginTime ? parseTime(row.lastLoginTime) : '-' }}</template>
          </el-table-column>
          <el-table-column
            prop="remark"
            label="备注"
            min-width="120"
            show-overflow-tooltip></el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            width="150">
            <template slot-scope="{ row }">{{ parseTime(row.createTime) }}</template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="230"
            fixed="right">
            <template slot-scope="{ row }">
              <el-button
                type="text"
                @click="openForm(row)">编辑</el-button>
              <el-button
                type="text"
                @click="openMoney(row, 'recharge')">充值</el-button>
              <el-button
                type="text"
                @click="openMoney(row, 'decrease')">扣款</el-button>
              <el-button
                type="text"
                @click="openBind(row)">票种授权</el-button>
              <el-button
                type="text"
                @click="openLog(row)">流水</el-button>
              <el-button
                type="text"
                class="btn-danger"
                @click="remove(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          layout="total, prev, pager, next"
          :current-page.sync="form.pageNum"
          :page-size="form.pageSize"
          :total="total"
          @current-change="reload"
        ></el-pagination>
      </div>
    </div>
    <form-dialog
      ref="formDialog"
      @update="reload"></form-dialog>
    <money-dialog
      ref="moneyDialog"
      @update="reload"></money-dialog>
    <bind-dialog
      ref="bindDialog"
      @update="reload"></bind-dialog>
    <balance-log-dialog ref="logDialog"></balance-log-dialog>
  </div>
</template>

<script>
import { getUserThirdPartyList, deleteUserThirdParty } from '@/api/selfManage'
import { parseTime } from '@/utils'
import FormDialog from './FormDialog'
import MoneyDialog from './MoneyDialog'
import BindDialog from './BindDialog'
import BalanceLogDialog from './BalanceLogDialog'

export default {
  name: 'SelfThirdParty',
  components: { FormDialog, MoneyDialog, BindDialog, BalanceLogDialog },
  data () {
    return {
      loading: false,
      form: {
        pageNum: 1,
        pageSize: 10,
        name: '',
        contactName: '',
        phone: '',
        status: ''
      },
      tableData: [],
      total: 0,
      selected: []
    }
  },
  methods: {
    parseTime,
    fmtMoney (v) {
      return v === 0 || v ? Number(v).toFixed(2) : '0.00'
    },
    reload () {
      this.loading = true
      getUserThirdPartyList({ ...this.form })
        .then(res => {
          const data = res.data || {}
          this.tableData = data.records || []
          this.total = data.total || 0
        })
        .finally(() => {
          this.loading = false
        })
    },
    reset () {
      this.form.pageNum = 1
      this.form.name = ''
      this.form.contactName = ''
      this.form.phone = ''
      this.form.status = ''
      this.reload()
    },
    openForm (row) {
      this.$refs.formDialog.show(row)
    },
    openMoney (row, mode) {
      this.$refs.moneyDialog.show(row, mode)
    },
    openBind (row) {
      this.$refs.bindDialog.show({ userThirdPartyIdList: [row.id] })
    },
    batchBind () {
      if (!this.selected.length) return
      this.$refs.bindDialog.show({ userThirdPartyIdList: this.selected.map(i => i.id) })
    },
    openLog (row) {
      this.$refs.logDialog.show(row)
    },
    remove (row) {
      if (Number(row.balance) > 0) {
        this.$message.warning('该分销商余额大于 0，请先扣款后再删除')
        return
      }
      this.$confirm('确定删除分销商「' + row.name + '」吗？', '提示', { type: 'warning' })
        .then(() => {
          deleteUserThirdParty({ idList: [row.id] }).then(() => {
            this.$message.success('删除成功')
            this.reload()
          })
        })
        .catch(() => {})
    },
    batchDelete () {
      if (!this.selected.length) return
      const blocked = this.selected.filter(i => Number(i.balance) > 0)
      if (blocked.length) {
        this.$message.warning('以下分销商余额大于 0，请先扣款：' + blocked.map(i => i.name).join('、'))
        return
      }
      this.$confirm('确定删除选中的 ' + this.selected.length + ' 个分销商吗？', '提示', { type: 'warning' })
        .then(() => {
          deleteUserThirdParty({ idList: this.selected.map(i => i.id) }).then(() => {
            this.$message.success('删除成功')
            this.selected = []
            this.reload()
          })
        })
        .catch(() => {})
    }
  },
  created () {
    this.reload()
  }
}
</script>