代码初始化

doum

7 天以前 b574291c99bba5819fe2d69405ffa10e9d47d994

 admin/src/views/system/user.vue

@@ -32,12 +32,12 @@
        @sort-change="handleSortChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="avatar" label="头像" width="80px" class-name="table-column-avatar" fixed="left">
        <el-table-column prop="avatar" label="收款码" width="100px" class-name="table-column-avatar"  >
          <template slot-scope="{row}">
            <img :src="row.avatar == null ? '/avatar/man.png' : row.avatar">
              <div class="qrcodediv" :id="`qrcode${row.id}`" :ref="`qrcode${row.id}`"></div>
          </template>
        </el-table-column>
        <el-table-column prop="realname" label="姓名" min-width="100px" fixed="left"></el-table-column>
        <el-table-column prop="realname" label="姓名" min-width="100px" ></el-table-column>
        <el-table-column prop="username" label="用户名" min-width="120px"></el-table-column>
        <el-table-column prop="empNo" label="工号" sortable="custom" sort-by="EMP_NO" min-width="80px"></el-table-column>
        <el-table-column prop="sex" label="性别" sortable="custom" sort-by="SEX" min-width="80px">
@@ -72,7 +72,8 @@
          <template v-if="isAdmin || (row.id !== userInfo.id && row.roles.findIndex(r => r.code === adminCode) === -1)" slot-scope="{row}">
            <el-button type="text" icon="el-icon-edit" @click="$refs.operaUserWindow.open('编辑用户', row)" v-permissions="['system:user:update']">编辑</el-button>
            <el-button type="text" icon="el-icon-s-custom" @click="$refs.roleConfigWindow.open(row)" v-permissions="['system:user:createUserRole']">配置角色</el-button>
            <el-button type="text" @click="$refs.resetPwdWindow.open(row)" v-permissions="['system:user:resetPwd']">重置密码</el-button>
            <el-button type="text" icon="el-icon-download"  @click="download(row)"  >下载收款码</el-button>
            <el-button type="text" @click="$refs.resetPwdWindow.open(row)"  icon="el-icon-edit" v-permissions="['system:user:resetPwd']">重置密码</el-button>
            <el-button v-if="!row.fixed" type="text" icon="el-icon-delete" @click="deleteById(row)" v-permissions="['system:user:delete']">删除</el-button>
          </template>
        </el-table-column>
@@ -100,6 +101,7 @@
import RoleConfigWindow from '@/components/system/user/RoleConfigWindow'
import ResetPwdWindow from '@/components/system/user/ResetPwdWindow'

import QRCode from 'qrcodejs2'
export default {
  name: 'SystemUser',
  extends: BaseTable,
@@ -125,16 +127,85 @@
      }]
    })
    this.search()
  },
  methods: {
    handlePageChange (pageIndex) {
      var that = this
      this.__checkApi()
      this.tableData.pagination.pageIndex = pageIndex || this.tableData.pagination.pageIndex
      this.isWorking.search = true
      this.api.fetchList({
        page: this.tableData.pagination.pageIndex,
        capacity: this.tableData.pagination.pageSize,
        model: this.searchForm,
        sorts: this.tableData.sorts
      })
        .then(data => {
          // that.removeElementsWithClass("qrcodediv")
          that.tableData.list = data.records
          that.tableData.pagination.total = data.total
          this.$nextTick(() => {
            that.tableData.list.forEach((row) => {
              document.getElementById('qrcode' + row.id).innerHTML = ''
              row.qrcodeImg = that.crateQrcodeShow('qrcode' + row.id, row.payUrl)
            })
          })
        })
        .catch(e => {
          this.$tip.apiFailed(e)
        })
        .finally(() => {
          this.isWorking.search = false
        })
    },
    download (row) {
      const nodeList = Array.prototype.slice.call(row.qrcodeImg._el.children)
      const img = nodeList.find((item) => item.nodeName.toUpperCase() === 'IMG')// 选出图片类型
      // 构建画布
      const canvas = document.createElement('canvas')
      canvas.width = 220
      canvas.height = 220
      const ctx = canvas.getContext('2d')
      ctx.fillStyle = 'white'
      ctx.fillRect(0, 0, canvas.width, canvas.height) // 填充整个画布区域，确保背景色覆盖整个画布
      ctx.drawImage(img, 10, 10, 200, 200)
      // 构造url
      const url = canvas.toDataURL('image/png')

      const a = document.createElement('a')
      a.href = url
      a.download = `${row.realname}-收款码.png`
      a.click()
      a.remove()
    },
    removeElementsWithClass (className) {
      const elements = document.querySelectorAll(`.${className}`)
      elements.forEach(element => {
        element.parentNode.removeChild(element)
      })
    },
    crateQrcodeShow (div, qrcode1) {
      if (!div || !div.length || qrcode1 == null || qrcode1 == '') {
        return
      }
      return new QRCode(div, {
        width: 80,
        height: 80,
        text: qrcode1,
        correctLevel: QRCode.CorrectLevel.H,
        useSVG: true
      })
    }
  }
}
</script>

<style scoped lang="scss">
@import "@/assets/style/variables.scss";
// 列表头像处理
/*// 列表头像处理
.table-column-avatar {
  img {
    width: 48px;
  }
}
}*/
</style>