微v导入用户

src/api/user.js

@@ -45,3 +45,11 @@ export function updateMember(data) {
     data
   })
 }
+// 分页获取万科企业所有组织人员
+export function getAllPersons(params) {
+  return request({
+    url: 'umsMember/getAllPersons',
+    method: 'get',
+    params
+  })
+}

src/utils/request.js

@@ -6,7 +6,7 @@ import { getToken } from '@/utils/auth'
 const service = axios.create({
   // baseURL: process.env.BASE_API,
   withCredentials: true,
-  baseURL: 'http://192.168.31.112:8201/mall-admin',
+  baseURL: 'http://192.168.31.113:8201/mall-admin',
   // baseURL: 'http://hhg.api.jsonpro.cn:8201/mall-admin',
   timeout: 60000 // 请求超时时间
 })

src/views/use/UserList.vue

@@ -38,6 +38,11 @@
                    type="primary"
                    @click="handleAdd">导入用户
         </el-button>
+        <el-button class="btn-add"
+                   size="small"
+                   type="primary"
+                   @click="addVMember">微V导入
+       </el-button>
       </el-form>
     </el-card>
     <!-- 表格栏 -->
@@ -107,6 +112,8 @@
                @ok="getList"></add-admin>
     <import-member-modal ref="importMember"
                          @ok="getList"></import-member-modal>
+    <import-v-member-modal ref="importVMember"
+                         @ok="getList"></import-v-member-modal>
     <!-- end -->
   </div>
 </template>
@@ -116,6 +123,7 @@ import { getMemberList, getAuditDetail, updateMcht,updateMember } from '@/api/us
 import { getDepartmentList } from '@/api/inventory'
 import AddAdmin from './modules/AddAdmin'
 import ImportMemberModal from './modules/importMemberModal'
+import ImportVMemberModal from './modules/importVMemberModal'
 // 列表查询参数默认值
 const defaultListQuery = {
   pageNum: 1,
@@ -127,7 +135,7 @@ const defaultListQuery = {
 
 export default {
   name: 'UserList',
-  components: { AddAdmin, ImportMemberModal },
+  components: { AddAdmin, ImportMemberModal,ImportVMemberModal },
   data() {
     return {
       departmentOptions: [],
@@ -193,6 +201,10 @@ export default {
     handleAdd() {
       this.$refs.importMember.add()
     },
+    // 从微V导入用户
+    addVMember() {
+      this.$refs.importVMember.add()
+    },
     // 设置为管理员
     handleSet(row) {
       this.$refs.addAdmin.add(row)

src/views/use/modules/importVMemberModal.vue

+<template>
+  <el-dialog :visible.sync="visible"
+             :title="title"
+             center
+             width="1000px"
+             :close-on-click-modal="false">
+    <el-form :inline="true"
+             :model="listQuery"
+             size="small">
+      <el-form-item label="起始数据下标：">
+        <el-input v-model="listQuery.pageNum"
+                  class="input-width"
+                  placeholder="起始数据下标"></el-input>
+      </el-form-item>
+      <el-form-item label="结束数据下标：">
+        <el-input v-model="listQuery.pageSize"
+                  class="input-width"
+                  placeholder="结束数据下标"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary"
+                   @click="handleSearchList"
+                   icon="el-icon-search"
+                   size="small">搜索
+        </el-button>
+        <el-button @click="handleResetSearch"
+                   icon="el-icon-refresh"
+                   size="small">重置
+        </el-button>
+      </el-form-item>
+    </el-form>
+    <div class="scroll-container no-bottom"
+         ref="scrollContainer">
+      <el-form :model="formData" ref="formData">
+        <el-table
+          :data="formData.tableData"
+          style="width: 100%"
+          :row-class-name="tableRowClassName">
+          <el-table-column label="头像">
+            <template slot-scope="scope">
+              <el-form-item size="mini" :prop="'tableData.' + scope.$index + '.photoUrl'">
+                <img style="width: 50px;height: 50px;" :src="scope.row.photoUrl" alt="">
+              </el-form-item>
+            </template>
+          </el-table-column>
+          <el-table-column label="账号">
+            <template slot-scope="scope">
+              <el-form-item size="mini" :prop="'tableData.' + scope.$index + '.account'"
+                            :rules="[{required: true,trigger: 'blur',message: '账号不能为空'}]">
+                <el-input v-if="scope.row.isOK" v-model="scope.row.account" class="input-width"
+                          placeholder="账号"></el-input>
+                <span v-else>{{scope.row.account}}</span>
+              </el-form-item>
+            </template>
+          </el-table-column>
+          <el-table-column label="用户名称">
+            <template slot-scope="scope">
+              <el-form-item size="mini" :prop="'tableData.' + scope.$index + '.username'"
+                            :rules="[{required: true,trigger: 'blur',message: '用户名称不能为空'}]">
+                <el-input v-if="scope.row.isOK" v-model="scope.row.username" class="input-width"
+                          placeholder="用户名称"></el-input>
+                <span v-else>{{scope.row.username}}</span>
+              </el-form-item>
+            </template>
+          </el-table-column>
+          <el-table-column label="员工编号">
+            <template slot-scope="scope">
+              <el-form-item size="mini" :prop="'tableData.' + scope.$index + '.jobNo'"
+                            :rules="[{required: true,trigger: 'blur',message: '员工编号不能为空'}]">
+                <el-input v-if="scope.row.isOK" v-model="scope.row.jobNo" class="input-width"
+                          placeholder="员工编号"></el-input>
+                <span v-else>{{scope.row.jobNo}}</span>
+              </el-form-item>
+            </template>
+          </el-table-column>
+          <el-table-column label="部门名称">
+            <template slot-scope="scope">
+              <el-form-item size="mini" :prop="'tableData.' + scope.$index + '.department'"
+                            :rules="[{required: true,trigger: 'blur',message: '部门名称不能为空'}]">
+                <el-input v-if="scope.row.isOK" v-model="scope.row.department" class="input-width"
+                          placeholder="部门名称"></el-input>
+                <span v-else>{{scope.row.department}}</span>
+              </el-form-item>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作"
+                           align="center"
+                           width="50">
+            <template slot-scope="scope">
+              <el-link type="danger" :underline="false" @click="handleDelete(scope.$index)">删除</el-link>
+              <!--            <el-button type="danger" size="small" @click="handleDelete(scope.$index)">删除</el-button>-->
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-form>
+    </div>
+    <div slot="footer">
+      <el-button type="primary"
+                 @click="submit('formData')">确认
+      </el-button>
+      <el-button
+        @click="close">返回
+      </el-button>
+    </div>
+    <!-- end -->
+  </el-dialog>
+</template>
+<script>
+import { importMember,getAllPersons } from '@/api/user'
+import XLSX from 'xlsx'
+
+// 列表查询参数默认值
+const defaultListQuery = {
+  pageNum: 0,
+  pageSize: 100
+}
+// 添加编辑属性
+export default {
+  name: 'importMemberModal',
+  data() {
+    return {
+      listQuery: Object.assign({}, defaultListQuery),
+      files: null, //文件列表
+      visible: false,
+      title: null,
+      loading: false,
+      formData: {
+        tableData: [],
+      },
+      categoryOptions: [],
+      supplierOptions: [],
+      depotOptions: [],
+      goodsList: []
+    }
+  },
+
+
+  beforeCreate() {
+    /**
+     * 读取Excel文件，转为{@link Object}对象（自定义函数）
+     * @return {@link Object}：workbook，整个文档对象；
+     */
+    FileReader.prototype.read2workbook = function () {
+      let redABS = false   //是否将文件读取为二进制字符串
+      let bytes = new Uint8Array(this.result)  //无符号整型数组
+      if (redABS) {
+        // let fix = new TextDecoder(encode || 'UTF-8').decode(bytes);
+        let fix = fixdata(bytes)
+        let b2a = btoa(fix)    //js原生方法：将字符转为base64编码。对应的atob(base64)方法，将base64转字符
+        var wb = XLSX.read(b2a, {
+          type: 'base64'
+        })
+      } else {
+        let len = bytes.byteLength
+        let binarys = new Array(len) //创建定长数组，存储文本
+        for (let i = 0; i < len; i++)
+          binarys[i] = String.fromCharCode(bytes[i])
+        let binary = binarys.join('')
+        var wb = XLSX.read(binary, {
+          type: 'binary'
+        })
+      }
+      return wb  //workbook
+    }
+    /**
+     * 解析为...格式
+     */
+    FileReader.prototype.read2 = function (format = 'json') {
+      let wb = this.read2workbook()
+      if (!wb)
+        return null
+
+      let r = {}
+      let formats = ['json', 'formulae', 'html', 'txt', 'csv', 'dif', 'slk', 'eth']  //可被解析的格式
+      format = formats.indexOf(format) == -1 ? 'json' : format
+      wb.SheetNames.forEach(name => {     //遍历每张纸数据
+        r[name] = XLSX.utils['sheet_to_' + format](wb.Sheets[name])
+      })
+      return r
+    }
+    /**
+     * 解析为JSON
+     * @description: 此解析方式，XLSX将使用表格首行的每列名称，当作sheet数组对象的Key。
+     * 故Excel每个工作表格的第一行必须有表头，且名称不可重复。
+     */
+    FileReader.prototype.read2JS = function () {
+      return this.read2()
+    }
+    /* 重写readAsBinaryString函数 */
+    FileReader.prototype.readAsBinaryString = function (f) {
+      if (!this.onload)       //如果this未重写onload函数，则创建一个公共处理方式
+        this.onload = e => {  //在this.onload函数中，完成公共处理
+          let rs = this.read2workbook()
+        }
+      this.readAsArrayBuffer(f)  //内部会回调this.onload方法
+    }
+
+    /**
+     * char值转String
+     * @param data {@link Array}：char值；
+     * @return {@link String}
+     */
+    function fixdata(data) {
+      let w = 1024 << 10 //每次读取1M字节
+      let len = Math.floor(data.byteLength / w)
+      let o = new Array(len)
+      for (var i = 0; i < len; i++)
+        o[i] = String.fromCharCode.apply(null, new Uint8Array(data.slice(i * w, (i + 1) * w)))
+      o[i] = String.fromCharCode.apply(null, new Uint8Array(data.slice(i * w)))
+      return o.join('')
+    }
+  },
+  methods: {
+    getList() {
+      //请求数据
+      getAllPersons(this.listQuery).then(res => {
+        res.data.forEach(item=>{
+          item.username =  item.name
+          item.account =  item.jobNo
+          item.isOK =  true
+        })
+      this.formData.tableData = res.data
+      }).catch(err => {
+      })
+    },
+    handleResetSearch() {
+      this.listQuery = Object.assign({}, defaultListQuery)
+      this.getList()
+    },
+    handleSearchList() {
+      // this.listQuery.pageNum = 0
+      this.getList()
+    },
+    init() {
+      this.formData.tableData = []
+      this.$nextTick(() => {
+        this.$refs.scrollContainer.scrollTop = 0
+      })
+
+    },
+    add() {
+      this.init()
+      this.title = '微V导入用户'
+      this.visible = true
+    },
+    close() {
+      this.visible = false
+    },
+    tableRowClassName ({row, rowIndex}) {
+      // 把每一行的索引放进row
+      row.index = rowIndex;
+    },
+    submit(formName) {
+      if(!this.formData.tableData.length){
+        this.$message.warning('请检查必填项')
+        return
+      }
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          importMember({ vimdList: this.formData.tableData }).then(res => {
+            this.$emit('ok')
+            this.visible = false
+          })
+        } else {
+          this.$message.warning('请检查必填项是否输入')
+        }
+      })
+
+    },
+    // 删除
+    handleDelete(index) {
+      this.formData.tableData.splice(index, 1)
+    },
+    //删除文件
+    remove() {
+      this.formData.tableData = []
+    }
+  }
+}
+</script>
+<style scoped>
+  .scroll-container {
+    max-height: 50vh;
+    overflow: hidden;
+    overflow-y: auto;
+  }
+
+  .input-width {
+    width: 120px;
+  }
+
+  .el-upload__tip {
+    color: #999;
+    font-size: 10px;
+  }
+  .operate{
+    display: flex;
+    align-items: baseline;
+  }
+  .operate .color-main{
+    text-decoration: underline;
+    cursor: pointer;
+  }
+</style>