|
|
@@ -0,0 +1,378 @@
|
|
|
+<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>
|
|
|
+ <el-form :inline="true"
|
|
|
+ :model="searchForm">
|
|
|
+ <el-form-item label="分部">
|
|
|
+ <el-select v-model="searchForm.organId"
|
|
|
+ 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="收费类型">
|
|
|
+ <el-select v-model="searchForm.type"
|
|
|
+ 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-button type="danger"
|
|
|
+ @click="search">搜索</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="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"
|
|
|
+ width="650px">
|
|
|
+ <el-form :model='maskForm'
|
|
|
+ :rules="maskRules"
|
|
|
+ label-width="100px"
|
|
|
+ label-position="right"
|
|
|
+ :inline="true"
|
|
|
+ ref="zeroForm">
|
|
|
+ <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"
|
|
|
+ :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 :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 } from '@/api/zeroManager'
|
|
|
+import QRCode from 'qrcodejs2'
|
|
|
+export default {
|
|
|
+ components: { pagination },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ zeroVisible: false,
|
|
|
+ searchForm: {
|
|
|
+ organId: null,
|
|
|
+ type: 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
|
|
|
+ }
|
|
|
+ }, mounted () {
|
|
|
+ getEmployeeOrgan().then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.organList = res.data;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ search () {
|
|
|
+ this.pageInfo.page = 1;
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ getList () {
|
|
|
+ let chargeType, organId;
|
|
|
+ this.searchForm.type ? chargeType = this.searchForm.type : chargeType = null
|
|
|
+ this.searchForm.organId ? organId = this.searchForm.organId : organId = null
|
|
|
+ getZero({ page: this.pageInfo.page, rows: this.pageInfo.limit, chargeType, organId }).then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.tableList = res.data.rows
|
|
|
+ this.pageInfo.total = res.data.total
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ newVisible () {
|
|
|
+ this.isNew = true;
|
|
|
+ this.zeroVisible = true;
|
|
|
+ this.title = '新增收费'
|
|
|
+ },
|
|
|
+ lookVisible (row) {
|
|
|
+ this.isNew = false;
|
|
|
+ this.zeroVisible = true;
|
|
|
+ this.title = '查看收费'
|
|
|
+ this.activeRow = row
|
|
|
+ this.maskForm = {
|
|
|
+ code: vaildStudentUrl() + `/#/sporadicLogin?id=${this.activeRow.id}`,
|
|
|
+ type: parseInt(row.chargeType),
|
|
|
+ desc: row.detail,
|
|
|
+ title: row.title,
|
|
|
+ organId: row.organId,
|
|
|
+ money: row.amount
|
|
|
+ }
|
|
|
+ // chargeType: this.maskForm.type,
|
|
|
+ // detail: this.maskForm.desc,
|
|
|
+ // title: this.maskForm.title,
|
|
|
+ // organId: this.maskForm.organId,
|
|
|
+ // amount: this.maskForm.money
|
|
|
+ },
|
|
|
+ // look2Code () { },
|
|
|
+ onCreateQRCode () { // 生成报名二维码
|
|
|
+ this.qrcodeStatus = true
|
|
|
+ // let id = this.$route.query.id
|
|
|
+ // let teamName = this.$route.query.name
|
|
|
+
|
|
|
+ setTimeout(() => {
|
|
|
+ if (this.qrcodes) {
|
|
|
+ this.qrcodes = false
|
|
|
+ this.qrcode = new QRCode('qrcode', {
|
|
|
+ width: 250,
|
|
|
+ height: 250,
|
|
|
+ colorDark: '#000000',
|
|
|
+ colorLight: '#ffffff',
|
|
|
+ correctLevel: QRCode.CorrectLevel.H
|
|
|
+ })
|
|
|
+ }
|
|
|
+ // vaildStudentUrl() + `/#/sporadicLogin?id=${刷刷刷}`
|
|
|
+ this.qrcode.clear();
|
|
|
+ this.qrcode.makeCode(vaildStudentUrl() + `/#/sporadicLogin?id=${this.activeRow.id}`)
|
|
|
+ // this.codeUrl = vaildStudentUrl() + '/#/login?musicGroupId=' + id
|
|
|
+ }, 500)
|
|
|
+ },
|
|
|
+ addZero () {
|
|
|
+ this.$refs['zeroForm'].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()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ removeItem (row) {
|
|
|
+ this.$confirm('是否删除该收费', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ removeZero({ id: row.id }).then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.$message.error('删除成功')
|
|
|
+ this.zeroVisible = false;
|
|
|
+ this.getList()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }).catch(() => {
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ zeroVisible (val) {
|
|
|
+ if (!val) {
|
|
|
+ this.maskForm = {
|
|
|
+ organId: '',
|
|
|
+ type: '',
|
|
|
+ money: '',
|
|
|
+ desc: '',
|
|
|
+ title: '',
|
|
|
+ code: ''
|
|
|
+ }
|
|
|
+ // this.$refs['zeroForm'].resetFields()
|
|
|
+ // console.log(this.$refs['zeroForm'].resetFields)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ filters: {
|
|
|
+ chargeTypeFilter (val) {
|
|
|
+ let template = {
|
|
|
+ '1': '考级',
|
|
|
+ '2': '缴费',
|
|
|
+ '3': '声部更改',
|
|
|
+ '4': '乐器更换'
|
|
|
+ }
|
|
|
+ return template[val]
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="scss">
|
|
|
+.right-code {
|
|
|
+ // width: 50%;
|
|
|
+ // float: left;
|
|
|
+ .title {
|
|
|
+ font-size: 18px;
|
|
|
+ text-align: center;
|
|
|
+ padding-bottom: 8px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
