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>
      <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="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"
                    :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}`
      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
      // 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
      // }
    },
    // 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['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()
            }
          })
        }
      })
    },
    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">
.right-code {
  // width: 50%;
  // float: left;
  .title {
    font-size: 18px;
    text-align: center;
    padding-bottom: 8px;
  }
}
</style>