xps-web-csat-v5/src/views/hos/doctor/index.vue

<template>
  <div class="content-container">
    <el-row class="tool-bar">
      <el-col :span="12" class="left">
        <div class="content-title">
          医生管理
        </div>
      </el-col>

      <el-col :span="12" class="right">
        <el-input v-model="conditions.keywords" class="search-input m-right-15" size="mini" placeholder="请输入内容">
          <el-button slot="append" icon="el-icon-search" size="mini" @click="getData()" />
        </el-input>
        <el-button type="primary" size="mini" icon="el-icon-plus" @click="handleAdd">添加</el-button>
        <el-button type="primary" size="mini" :disabled="!(exportItems&&exportItems.length>0)" @click="downloadQrcode">下载二维码</el-button>
      </el-col>
    </el-row>

    <el-row class="content-body">
      <el-table v-loading="listLoading" class="page-table" border :data="dataList" height="calc(100vh - 240px)" @selection-change="changeSelection">
        <el-table-column type="selection" />

        <el-table-column type="index" label="序号" align="center" header-align="center" width="80" />

        <el-table-column width="60" align="center" label="头像">
          <template v-slot="{row}">
            <el-avatar :size="30" :src="row.doctorAvatar" />
          </template>
        </el-table-column>

        <el-table-column label="姓名" align="center" header-align="center" min-width="120">
          <template v-slot="{row}">
            <span>{{ row.doctorName }}</span>
          </template>
        </el-table-column>

        <el-table-column label="职称" align="center" header-align="center" min-width="120">
          <template v-slot="{row}">
            <span>{{ row.doctorProfessionalId | doctorProfessionalIdFilter }}</span>
          </template>
        </el-table-column>

        <el-table-column label="所属部门" align="center" header-align="center" min-width="160">
          <template v-slot="{row}">
            <span>{{ row.groupName }}</span>
          </template>
        </el-table-column>

        <el-table-column label="岗位" align="center" header-align="center" min-width="120">
          <template v-slot="{row}">
            <span>{{ row.positionName }}</span>
          </template>
        </el-table-column>

        <el-table-column label="其它" align="left" header-align="left">
          <template v-slot="{row}">
            <span>{{ row.doctorDesc }}</span>
          </template>
        </el-table-column>

        <el-table-column label="二维码" header-align="center" align="center" width="100">
          <template v-slot="{row}">
            <span class="icon iconfont icon-erweima" @click="showQrcode(row)" />
          </template>
        </el-table-column>

        <el-table-column label="小程序" align="center" header-align="center" width="120">
          <template v-slot="{row}">
            <el-link>
              <span v-if="row.miniNum> 0" @click="handleMini(row)"><i class="el-icon-apple" /></span>
              <span v-else @click="handleMini(row)">绑定</span>
            </el-link>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center" width="180" class-name="small-padding fixed-width">
          <template v-slot="{row}">
            <el-button size="mini" type="primary" @click="handleEdit(row)">修改</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-container">
        <pagination v-show="total>0" :total="total" :page.sync="conditions.page" :limit.sync="conditions.limit" @pagination="getData" />
      </div>
    </el-row>
    <Doctor ref="AddDoctor" title="添加" @formSuccess="getData" />
    <Doctor ref="EditDoctor" title="编辑" @formSuccess="getData" />
    <qrcode ref="qrcode" />
    <div id="qrcode" ref="qrcodeModal" style="position:fixed;top:-9999px;" />
    <MiniProgramTargetConfig ref="MiniTargetConfig" :target-type="targetType" @formSuccess="getData" />
  </div>
</template>

<script>
import QRCode from 'qrcodejs2'
import html2canvas from 'html2canvas'
import JSZip from 'jszip'
import saveAs from 'file-saver'

import Doctor from './components/Doctor'
import Pagination from '@/components/Pagination'
import qrcodeComponents from '@/views/hos/components/qrcode.vue'
import MiniProgramTargetConfig from '@/components/MiniProgramTargetConfig/index.vue'
import { getDoctorByPage, deleteDoctorById } from '@/api/hos/doctorApi'

import { getSettingById } from '@/api/system/settingApi'
import { getUserData } from '@/utils/auth'

let zip = new JSZip()
export default {
  name: 'DoctorIndex',
  components: {
    Pagination,
    Doctor,
    MiniProgramTargetConfig,
    qrcode: qrcodeComponents
  },
  filters: {
    doctorProfessionalIdFilter(val) {
      const professionalMap = ['主任医师', '副主任医师', '主治医师', '医师', '医士']
      return professionalMap[val]
    }
  },
  data() {
    return {
      dataList: null,
      listLoading: false,
      total: 0,
      targetType: 3,
      conditions: {
        page: 1,
        limit: 10,
        keywords: ''
      },
      ocId: undefined,
      miniUrl: '',
      exportItems: []
    }
  },

  mounted() {
    const userData = getUserData()
    this.ocId = userData.ocId
    this.getMiniUrl()
    this.getData()
  },

  methods: {

    // 获取小程序地址
    getMiniUrl() {
      const settingId = 1
      this.listLoading = true
      getSettingById(settingId).then((resp) => {
        const { code, msg, data } = resp
        this.listLoading = false
        if (code === 200) {
          this.miniUrl = data.settingValue
        } else {
          this.$message.error(msg)
        }
      }).catch((error) => {
        console.log(error)
      })
    },

    // 初始化数据
    getData() {
      this.listLoading = true
      getDoctorByPage(this.conditions).then((resp) => {
        const { data, total } = resp
        this.listLoading = false
        this.total = total
        this.dataList = data
      }).catch((error) => {
        console.log(error)
      })
    },

    // 添加
    handleAdd() {
      this.$refs['AddDoctor'].showAddModel()
    },

    // 修改
    handleEdit(data) {
      const { doctorId } = data
      this.$refs['EditDoctor'].showEditModel(doctorId)
    },

    // 删除
    handleDelete(data) {
      const { doctorId, doctorName } = data
      this.$confirm(`此操作将删除该数据${doctorName}, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteDoctorById(doctorId).then((resp) => {
          const { msg } = resp
          this.getData()
          this.$message.success(msg)
        }).catch((error) => {
          console.log(error)
        })
      }).catch(() => {
        this.$message({ type: 'info', message: '已取消删除' })
      })
    },
    changeSelection(selection) {
      const len = selection.length
      this.hanleModal = (len > 0)
      this.exportItems = selection
    },
    showQrcode(row) {
      const code = this.miniUrl + '?ocId=' + this.ocId + '&code=' + row.doctorCode
      this.$refs.qrcode.draw(code)
    },
    downloadQrcode() {
      if (this.exportItems && this.exportItems.length > 0) {
        var content = JSON.parse(JSON.stringify(this.exportItems))
        this.downloadMaterial(content)
      } else { this.$message.error('没有可下载的数据！') }
    },
    downloadMaterial(content) { // 下载物料
      this.batch(content, '医生管理')
    },
    async batch(arr, fileName) {
      var self = this
      window.loading = this.$loading({
        lock: true,
        text: '制作二维码中!',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })

      zip = new JSZip()
      for (var i = 0; i < arr.length; i++) {
        var item = arr[i]
        const code = this.miniUrl + '?ocId=' + this.ocId + '&code=' + item.doctorCode
        await self.drawQrcode(code).catch(() => {
          window.loading.close()
          this.$message.error('导出失败')
        })
        await self.packMaterial(item.doctorName).catch(() => {
          window.loading.close()
          this.$message.error('导出失败')
        })
      }
      zip.generateAsync({
        type: 'blob'
      }).then((blob) => {
        saveAs(blob, fileName + '二维码物料.zip')
        window.loading.close()
      })
    },
    drawQrcode(url, sleep = 300) { // 绘制二维码
      this.$refs.qrcodeModal.innerHTML = ''
      return new Promise((resolve, reject) => {
        new QRCode('qrcode', {
          width: 400,
          height: 400,
          text: url.toString()
        })
        setTimeout(function() {
          resolve()
        }, sleep)
      })
    },

    packMaterial(name) { // 打包处理
      if (!name) name = 'xxx'
      return new Promise((resolve, reject) => {
        html2canvas(document.getElementById('qrcode'), {
          backgroundColor: null,
          useCORS: true,
          dpi: 500,
          scale: 5
        }).then((canvas) => {
          let dataURL = canvas.toDataURL('photo/png')
          dataURL = dataURL.replace(/^data:image\/(png|jpg);base64,/, '')
          zip.file(name + '.jpg', dataURL, { base64: true })
          resolve()
        }).catch((e) => {
          reject(e)
        })
      })
    },

    // 显示App绑定配置
    handleMini(data) {
      const { gridId } = data
      this.$refs['MiniTargetConfig'].showModel(gridId)
    }
  }
}
</script>
<style scoped>
.content-container {
  height: calc(100vh - 90px);
}

</style>