modified: src/views/admin/user/index.vue

Fixiaobai

2023-12-16 f310cf581c1535e86df01a8bed809244c30b51ea

	modified:   src/views/admin/user/index.vue

 src/views/admin/user/index.vue

@@ -66,6 +66,15 @@
                @click="$refs.crud.rowAdd()"
                >添加
              </el-button>
              <!-- <el-button
                v-if="sys_user_add"
                class="filter-item"
                type="primary"
                size="small"
                icon="el-icon-upload"
                @click="importDialogVisible=true"
                >导入
              </el-button> -->
            </template>
            <template slot="username" slot-scope="scope">
              <span>{{ scope.row.username }}</span>
@@ -147,6 +156,45 @@
      :currshowlist.sync="showStaff"
      @listenToStaffEvent="selectStaff"
    />
    <el-dialog title="导入" :visible.sync="importDialogVisible" width="30%">
      <span>
        <div>
          <div>
            <el-upload
              style="margin-left:8px;display: inline;"
              class="upload-demo"
              drag
              :headers="headers"
              :action="uploadInfo.url"
              :beforeUpload="beforeAvatarUpload"
              :limit="1"
              :show-file-list="false"
              :file-list="fileList"
              :on-success="fileSuccessUploadScan"
              :on-error="handleError"
              accept=".xlsx,.xls,.csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
              :auto-upload="true"
              ref="uploadScan"
              multiple
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text"><em>点击导入数据</em></div>
              <div class="el-upload__tip" slot="tip" >
                只能上传xlsx/xls文件，且不超过10M<el-button
                  type="text"
                  style="font-size:12px;"
                  @click="downDataTemplate(uploadInfo.fileName)"   
                  v-if="uploadInfo.Download"
                  >下载模板</el-button
                >
              </div>
            </el-upload>
          </div>
          <div></div>
        </div>
      </span>
      <span slot="footer" class="dialog-footer"> </span>
    </el-dialog>
  </div>
</template>
<script>
@@ -158,12 +206,26 @@
import { mapGetters } from 'vuex'
import Template from '../../quality/parts/template'
import { getObj } from '@/api/basic/staff'

import { getStore } from '@/util/store.js'
import { uploadTemplate } from '@/api/basic/template'
export default {
  name: 'SysUser',
  components: { Template, staffDialog },
  data() {
    return {
      fileList: [], // 上传文件列表
      // 上传头信息
      headers: {
        Authorization: 'Bearer ' + getStore({ name: 'access_token' })
      },
      uploadInfo: {
        // 是否展示上传EXCEL以及对应的url
        isShow: true,
        url: '/mes/user/upload',
        Download: true,
        fileName: '用户模板'
      },
      importDialogVisible: false,
      showStaff: false,
      searchForm: {},
      treeOption: {
@@ -216,6 +278,77 @@
    this.init()
  },
  methods: {
    // 限制文件上传大小，目前限制为10M（另可以加类型限制）
    beforeAvatarUpload(file) {
      const fileName = file.name
      const fileType = fileName.substring(fileName.lastIndexOf('.') + 1)
      const isLt10M = file.size / 1024 / 1024 < 10
      if (fileType !== 'xlsx' && fileType !== 'xls') {
        this.$message.error('文件格式只能为xlsx或xls,请删除后重新上传')
      }
      if (!isLt10M) {
        this.$message({
          message: '文件大小',
          type: 'warning'
        })
      }
      return isLt10M
    },
    // 文件上传成功回调事件
    fileSuccessUploadScan(response, file, fileList) {
      if (response.code != '0') {
        this.$message.warning(response.msg)
      } else {
      if(response.data!=""&&response.data!=[]&&response.data!=null){
        this.$message({
          message: response.data,
          type: 'success',
          dangerouslyUseHTMLString: true,
        })
      }else{
        this.$message({
          message: '上传成功',
          type: 'success'
        })
      }
        this.importDialogVisible=false
        this.fileList=[]
        this.init()
        // this.getDataList()
      }
      this.$refs.uploadScan.clearFiles()
    },
    // 上传失败
    handleError(err, file, fileList) {
      const error = JSON.parse(err.message)
      if (error.msg) {
        this.$message.error(error.msg)
      } else {
        this.$message.error('上传失败')
      }
    },
    // 下载数据模板
    downDataTemplate() {
      uploadTemplate("user").then((response) => {
        const blob = new Blob([response.data], {
          type: 'application/force-download'
        })
        let fileName="模板文件";
        if(this.uploadInfo.fileName!=undefined&&this.uploadInfo.fileName!=''&&this.uploadInfo.fileName!=null){
            fileName=this.uploadInfo.fileName
        }
        const filename = decodeURI(fileName+'.xlsx')
        // 创建一个超链接，将文件流赋进去，然后实现这个超链接的单击事件
        const elink = document.createElement('a')
        elink.download = filename
        elink.style.display = 'none'
        elink.href = URL.createObjectURL(blob)
        document.body.appendChild(elink)
        elink.click()
        URL.revokeObjectURL(elink.href) // 释放URL 对象
        document.body.removeChild(elink)
      })
    },
    selectStaff(staff) {
      this.form.staffInfo = staff.staffName + '-' + staff.staffNo
      this.form.phone = staff.phone