dy-admin-manager/src/views/sporadicManager/sporadicList.vue

<template>
  <div class="m-container">
    <h2>
      <div class="squrt"></div>
      零星收费
    </h2>
    <div class="m-core">
      <!-- v-permission="'sporadicChargeInfo/add'" -->
      <div class="newBand"
           v-permission="'sporadicChargeInfo/add'"
           @click="newVisible">新增公用收费</div>
      <div class="newBand"
           v-permission="'sporadicChargeInfo/add'"
           @click="newVisible1">新增个人收费</div>
      <el-form :inline="true"
               :model="searchForm">
        <el-form-item>
          <el-input placeholder="标题或学生姓名" v-model="searchForm.search"></el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model="searchForm.organId"
                     placeholder='请选择分部'
                     clearable
                     filterable>
            <el-option v-for='(item,index) in organList'
                       :key="index"
                       :value="item.id"
                       :label="item.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="searchForm.chargeType"
                     placeholder='请选择收费类型'
                     clearable>
            <el-option label="考级"
                       :value="1"></el-option>
            <el-option label="缴费"
                       :value="2"></el-option>
            <el-option label="声部更改"
                       :value="3"></el-option>
            <el-option label="乐器更换"
                       :value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="searchForm.type"
                     placeholder='请选择订单类型'
                     clearable>
            <el-option label="个人"
                       value="personal"></el-option>
            <el-option label="公用"
                       value="common"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="danger"
                   @click="search">搜索</el-button>
          <el-button @click="onReSet"
                     type="primary">重置</el-button>
        </el-form-item>
      </el-form>
      <div class="tableWrap">
        <el-table :data='tableList'
                  :header-cell-style="{background:'#EDEEF0',color:'#444'}">
          <el-table-column align='center'
                           label="分部"
                           prop="organName">
          </el-table-column>
          <el-table-column align='center'
                           label="收费类型">
            <template slot-scope="scope">
              <div>
                {{ scope.row.chargeType | chargeTypeFilter }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align='center'
                           label="标题"
                           prop="title">
          </el-table-column>
          <el-table-column align='center'
                           label="金额"
                           prop="amount">
          </el-table-column>
          <el-table-column align='center'
                           label="时间">
            <template slot-scope="scope">
              <div>
                {{ scope.row.createTime | formatTimer }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align='center'
                           label="学生姓名"
                           prop="userName">
            <template slot-scope="scope">
              {{ scope.row.userName || '-' }}
            </template>
          </el-table-column>
          <el-table-column align='center'
                           label="订单类型">
            <template slot-scope="scope">
              {{ scope.row.userId ? '人个' : '公用' }}
            </template>
          </el-table-column>
          <el-table-column align='center'
                           label="创建人"
                           prop="operatorName">
          </el-table-column>
          <el-table-column align='center'
                           label="操作">
            <template slot-scope="scope">
              <div>
                <el-button type="text"
                           @click="lookVisible(scope.row)">查看</el-button>
                <el-button type="text"
                           v-permission="'sporadicChargeInfo/delete'"
                           @click="removeItem(scope.row)">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <pagination :total="pageInfo.total"
                    :page.sync="pageInfo.page"
                    :limit.sync="pageInfo.limit"
                    :page-sizes="pageInfo.page_size"
                    @pagination="getList" />
      </div>
    </div>
    <el-dialog :title="title"
               :visible.sync="zeroVisible"
               @close="onFormClose('maskForm')"
               width="650px">
      <el-form :model='maskForm'
               :rules="maskRules"
               label-width="100px"
               label-position="right"
               :inline="true"
               ref="maskForm">
        <el-form-item label="标题"
                      prop="title">
          <el-input v-model="maskForm.title"
                    :disabled='!isNew'></el-input>
        </el-form-item>
        <el-form-item label="收费类型"
                      prop="type">
          <el-select v-model="maskForm.type"
                     :disabled='!isNew'
                     clearable
                     filterable>
            <el-option label="考级"
                       :value="1"></el-option>
            <el-option label="缴费"
                       :value="2"></el-option>
            <el-option label="声部更改"
                       :value="3"></el-option>
            <el-option label="乐器更换"
                       :value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="金额"
                      prop='money'>
          <el-input v-model="maskForm.money"
                    type="number"
                    @mousewheel.native.prevent
                    :disabled='!isNew'></el-input>
        </el-form-item>
        <el-form-item label="分部"
                      prop="organId">
          <el-select v-model="maskForm.organId"
                     :disabled='!isNew'
                     clearable
                     filterable>
            <el-option v-for='(item,index) in organList'
                       :key="index"
                       :value="item.id"
                       :label="item.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="查看链接"
                      v-if="!isNew">
          <el-input style='width:400px'
                    :disabled='!isNew'
                    v-model="maskForm.code"></el-input>
          <el-button type='danger'
                     @click="onCreateQRCode">二维码</el-button>
        </el-form-item>
        <el-form-item label="收费详情"
                      prop="desc">
          <el-input type='textarea'
                    :disabled='!isNew'
                    v-model="maskForm.desc"
                    style="width:490px"
                    :autosize="{minRows: 5}"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="zeroVisible = false">取 消</el-button>
        <el-button type="primary"
                   v-if="isNew"
                   @click="addZero">确 定</el-button>
        <el-button v-if="!isNew"
                   type="primary"
                   @click="zeroVisible = false">确定</el-button>
      </span>
    </el-dialog>

    <el-dialog :title="title1"
               :visible.sync="zeroVisible1"
               @close="onFormClose('maskForm1')"
               width="650px">
      <el-form :model='maskForm1'
               :rules="maskRules1"
               label-width="100px"
               label-position="right"
               :inline="true"
               ref="maskForm1">
        <el-form-item label="标题"
                      prop="title">
          <el-input v-model="maskForm1.title"
                    :disabled='!isNew1'></el-input>
        </el-form-item>
        <el-form-item label="收费类型"
                      prop="type">
          <el-select v-model="maskForm1.type"
                     :disabled='!isNew1'
                     clearable
                     filterable>
            <el-option label="考级"
                       :value="1"></el-option>
            <el-option label="缴费"
                       :value="2"></el-option>
            <el-option label="声部更改"
                       :value="3"></el-option>
            <el-option label="乐器更换"
                       :value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学员编号"
                      prop='studentId'>
          <el-input v-model="maskForm1.studentId"
                    @blur="onStudentChange"
                    type="number"
                    @mousewheel.native.prevent
                    :disabled='!isNew1'></el-input>
        </el-form-item>
        <el-form-item label="金额"
                      prop='money'>
          <el-input v-model="maskForm1.money"
                    type="number"
                    @mousewheel.native.prevent
                    :disabled='!isNew1'></el-input>
        </el-form-item>
        <el-form-item label="学员姓名"
                      prop='studentName'>
          <el-input v-model="maskForm1.studentName"
                    :disabled='true'></el-input>
        </el-form-item>
        <el-form-item label="查看链接"
                      v-if="!isNew1">
          <el-input style='width:400px'
                    :disabled='!isNew1'
                    v-model="maskForm1.code"></el-input>
          <el-button type='danger'
                     @click="onCreateQRCode">二维码</el-button>
        </el-form-item>
        <el-form-item label="收费详情"
                      prop="desc">
          <el-input type='textarea'
                    :disabled='!isNew1'
                    v-model="maskForm1.desc"
                    style="width:490px"
                    :autosize="{minRows: 5}"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="zeroVisible1 = false">取 消</el-button>
        <el-button type="primary"
                   v-if="isNew1"
                   @click="addZero1">确 定</el-button>
        <el-button v-if="!isNew1"
                   type="primary"
                   @click="zeroVisible1 = false">确定</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="qrcodeStatus"
               center
               width="300px">
      <div class="right-code">
        <h2 class="title">缴费链接</h2>
        <div id="qrcode"
             class="qrcode code"
             ref="qrCodeUrl"></div>
        <!-- <p class="code-url"
           v-if="codeUrl2">{{ codeUrl2 }}</p> -->
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getEmployeeOrgan } from '@/api/buildTeam'
import pagination from '@/components/Pagination/index'
import { vaildStudentUrl } from '@/utils/validate'
import { addZero, getZero, removeZero, getBasic } from '@/api/zeroManager'
import QRCode from 'qrcodejs2'
export default {
  components: { pagination },
  data () {
    return {
      zeroVisible: false,
      searchForm: {
        organId: null,
        chargeType: null,
        type: null,
        search: null
      },
      tableList: [{}],
      organList: [],
      maskForm: {
        organId: '',
        type: '',
        money: '',
        desc: '',
        title: '',
        code: ''
      },
      maskRules: {
        organId: [{ required: true, message: '请选择分部', trigger: 'change' }],
        type: [{ required: true, message: '请选择收费类型', trigger: 'change' }],
        money: [{ required: true, message: '请输入收费金额', trigger: 'change' }],
        title: [{ required: true, message: '请输入标题名称', trigger: 'change' }],
      },
      pageInfo: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      },
      isNew: false,
      title: '新增收费',
      qrcodeStatus: false,
      qrcodes: true,
      activeRow: null,


      title1: '新增收费',
      activeRow1: null,
      zeroVisible1: false,
      maskForm1: {
        type: null,
        money: null,
        desc: null,
        title: null,
        code: null,
        studentId: null,
        studentName: null,
      },
      isNew1: false,
      maskRules1: {
        organId: [{ required: true, message: '请选择分部', trigger: 'change' }],
        type: [{ required: true, message: '请选择收费类型', trigger: 'change' }],
        money: [{ required: true, message: '请输入收费金额', trigger: 'change' }],
        title: [{ required: true, message: '请输入标题名称', trigger: 'change' }],
        studentId: [{ required: true, message: '请输入学员编号', trigger: 'blur' }],
      },
    }
  }, mounted () {
    getEmployeeOrgan().then(res => {
      if (res.code == 200) {
        this.organList = res.data;
      }
    })
    this.getList();
  },
  methods: {
    search () {
      this.pageInfo.page = 1;
      this.getList()
    },
    onReSet () {
      this.searchForm = {
        organId: null,
        chargeType: null,
        type: null,
        search: null
      }
    },
    getList () {
      let searchForm = this.searchForm
      let params = {
        organId: searchForm.organId ? searchForm.organId : null,
        chargeType: searchForm.chargeType ? searchForm.chargeType : null,
        type: searchForm.type ? searchForm.type : null,
        search: searchForm.search ? searchForm.search : null,
        page: this.pageInfo.page,
        rows: this.pageInfo.limit
      }
      
      getZero(params).then(res => {
        if (res.code == 200) {
          this.tableList = res.data.rows
          this.pageInfo.total = res.data.total
        }
      })
    },
    onFormClose (formName) { // 关闭弹窗重置验证
      if(formName == 'maskForm') {
        this.maskForm = {
          organId: null,
          type: null,
          money: null,
          desc: null,
          title: null,
          code: null
        }
      } else if(formName == 'maskForm1') {
        this.maskForm1 = {
          type: null,
          money: null,
          desc: null,
          title: null,
          code: null,
          studentId: null,
          studentName: null,
        }
      }
      this.$refs[formName].resetFields()
    },
    newVisible () {
      this.isNew = true;
      this.zeroVisible = true;
      this.title = '新增公用收费'
    },
    newVisible1 () {
      this.isNew1 = true;
      this.zeroVisible1 = true;
      this.title1 = '新增个人收费'
    },
    lookVisible (row) {
      if(row.userId) {
        this.isNew1 = false;
        this.zeroVisible1 = true;
        this.title1 = '查看个人收费'
        this.activeRow = row
        this.maskForm1.code = vaildStudentUrl() + `/#/sporadicPay?id=${this.activeRow.id}&userId=${this.activeRow.userId}`
        this.maskForm1.type = parseInt(row.chargeType)
        this.maskForm1.desc = row.detail
        this.maskForm1.title = row.title
        this.maskForm1.money = row.amount
        this.maskForm1.studentId = row.userId
        this.maskForm1.studentName = row.userName
      } else {
        this.isNew = false;
        this.zeroVisible = true;
        this.title = '查看公用收费'
        this.activeRow = row
        this.maskForm.code = vaildStudentUrl() + `/#/sporadicLogin?id=${this.activeRow.id}`
        this.maskForm.type = parseInt(row.chargeType)
        this.maskForm.desc = row.detail
        this.maskForm.title = row.title
        this.maskForm.organId = row.organId
        this.maskForm.money = row.amount
      }
    },
    onCreateQRCode () { // 生成报名二维码
      this.qrcodeStatus = true
      setTimeout(() => {
        if (this.qrcodes) {
          this.qrcodes = false
          this.qrcode = new QRCode('qrcode', {
            width: 250,
            height: 250,
            colorDark: '#000000',
            colorLight: '#ffffff',
            correctLevel: QRCode.CorrectLevel.H
          })
        }
        this.qrcode.clear();
        if(this.activeRow.userId) {
          this.qrcode.makeCode(vaildStudentUrl() + `/#/sporadicPay?id=${this.activeRow.id}&userId=${this.activeRow.userId}`)
        } else {
          this.qrcode.makeCode(vaildStudentUrl() + `/#/sporadicLogin?id=${this.activeRow.id}`)
        }
      }, 500)
    },
    addZero () {
      this.$refs['maskForm'].validate(item => {
        if (item) {
          let obj = {
            chargeType: this.maskForm.type,
            detail: this.maskForm.desc,
            title: this.maskForm.title,
            organId: this.maskForm.organId,
            amount: this.maskForm.money
          }
          addZero(obj).then(res => {
            if (res.code == 200) {
              this.$message.success('新增成功')
              this.zeroVisible = false;
              this.getList()
            }
          })
        }
      })
    },
    addZero1 () {
      this.$refs['maskForm1'].validate(item => {
        if (item) {
          let maskForm1 = this.maskForm1
          if(!maskForm1.studentName) {
            this.$message.error('学员信息不存在')
            return
          }
          let obj = {
            chargeType: maskForm1.type,
            detail: maskForm1.desc,
            title: maskForm1.title,
            userId: maskForm1.studentId,
            amount: maskForm1.money
          }
          addZero(obj).then(res => {
            if (res.code == 200) {
              this.$message.success('新增成功')
              this.zeroVisible1 = false;
              this.getList()
            }
          })
        }
      })
    },
    onStudentChange() {
      let studentId = this.maskForm1.studentId
      // 判断学生编号是否存在
      if(!studentId) {
        return
      }

      getBasic({ userId: studentId }).then(res => {
        if(res.code == 200) {
          if(res.data) {
            this.maskForm1.studentName = res.data.name
          } else {
            this.maskForm1.studentName = null
          }
        }
      })
    },
    removeItem (row) {
      this.$confirm('是否删除该收费', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeZero({ id: row.id }).then(res => {
          if (res.code == 200) {
            this.$message.success('删除成功')
            this.zeroVisible = false;
            this.getList()
          }
        })
      }).catch(() => {
      });
    }
  },
  watch: {
    zeroVisible (val) {
      if (!val) {
        this.maskForm = {
          organId: '',
          type: '',
          money: '',
          desc: '',
          title: '',
          code: ''
        }
        // this.$refs['maskForm'].resetFields()
        // console.log(this.$refs['zeroForm'].resetFields)
      }
    },
  },
  filters: {
    chargeTypeFilter (val) {
      let template = {
        '1': '考级',
        '2': '缴费',
        '3': '声部更改',
        '4': '乐器更换'
      }
      return template[val]
    }
  }
}
</script>
<style lang="scss" scoped>
.right-code {
  // width: 50%;
  // float: left;
  .title {
    font-size: 18px;
    text-align: center;
    padding-bottom: 8px;
  }
}
.newBand {
  display: inline-block;
}
</style>