批量注册用户

src/views/account/adminCenter/users/index.vue

@@ -10,15 +10,25 @@
             <company-1 :list="companyList" @detail="orgDetail"></company-1>
           </van-tab>
         </van-tabs> -->
-        <personal-1 :list="personalList" @detail="perDetail"></personal-1>
+        <van-col span="24" class="one">
+          <van-button type="info" size="small" @click="getTemplate()">数据模板下载</van-button>
+          <van-button type="info" size="small" @click="toImport()">批量注册用户</van-button>
+        </van-col>
+        <van-col span="24" class="two">
+          <personal-1 :list="personalList" @detail="perDetail"></personal-1>
+        </van-col>
       </template>
     </admin-frame>
+    <van-dialog class="dialog" v-model="dialog.show" :title="dialog.title" :show-confirm-button="false" show-cancel-button>
+      <importForm-1 :form="form" v-if="dialog.type == '1'" @onSubmit="onSubmit"></importForm-1>
+    </van-dialog>
   </div>
 </template>
 
 <script>
 import personal1 from './parts/personal-1.vue';
 import company1 from './parts/company-1.vue';
+import importForm1 from './parts/importForm-1.vue';
 import adminFrame from '@frame/src/components/mobile-frame/mobile-main.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions: personal } = createNamespacedHelpers('personal');
@@ -29,6 +39,7 @@ export default {
   components: {
     adminFrame,
     personal1,
+    importForm1,
   },
   data: function () {
     return {
@@ -37,13 +48,17 @@ export default {
       companyList: [],
       total: 0,
       limit: 5,
+      // 弹框
+      dialog: { show: false, title: '批量注册', type: '1' },
+      // 详细信息
+      form: {},
     };
   },
   async created() {
     await this.search();
   },
   methods: {
-    ...personal(['query']),
+    ...personal(['query', 'import']),
     ...organization({ orgQuery: 'query' }),
     // 查询列表
     async search({ skip = 0, limit = this.limit, ...info } = {}) {
@@ -77,6 +92,21 @@ export default {
       this.$set(this, `active`, type);
       this.search();
     },
+    // 批量注册用户
+    toImport() {
+      this.dialog = { show: true, title: '批量注册', type: '1' };
+    },
+    async onSubmit(data) {
+      var p1 = data.file.map((item) => ({ uri: item.url }))[0];
+      let res = await this.import(p1);
+      if (this.$checkRes(res)) {
+        console.log(res);
+      }
+    },
+    // 数据模板下载
+    getTemplate() {
+      window.location.href = `${process.env.VUE_APP_HOST}/${process.env.VUE_APP_ROUTER}/用户批量注册数据模板.xlsx`;
+    },
     // 返回
     back() {
       this.$router.push({ path: `/account/index` });
@@ -98,4 +128,19 @@ export default {
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.one {
+  background-color: #ffffff;
+  text-align: center;
+  padding: 10px 0;
+  .van-button {
+    margin: 0 10px;
+  }
+}
+.dialog {
+  /deep/.van-dialog__content {
+    max-height: 350px;
+    overflow-y: auto;
+  }
+}
+</style>

src/views/account/adminCenter/users/parts/importForm-1.vue

@@ -0,0 +1,74 @@
+<template>
+  <div id="importForm-1">
+    <el-row>
+      <el-col :span="24" class="main">
+        <van-col span="24" class="one">
+          <van-form @submit="onSubmit">
+            <van-field name="file" label="文件" :rules="[{ required: true, message: '上传文件' }]">
+              <template #input>
+                <van-uploader
+                  :fileList="form.file"
+                  :max-count="1"
+                  :after-read="(file) => toUpload(file, 'file')"
+                  @delete="(file) => toDelete(file, 'file')"
+                  accept="file"
+                />
+              </template>
+            </van-field>
+            <div style="margin: 16px">
+              <van-button round block type="info" native-type="submit">提交</van-button>
+            </div>
+          </van-form>
+        </van-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: upload } = createNamespacedHelpers('upload');
+export default {
+  name: 'importForm-1',
+  props: {
+    form: { type: Object },
+  },
+  components: {},
+  data: function () {
+    return {};
+  },
+  created() {},
+  methods: {
+    ...upload(['upload']),
+    onSubmit(value) {
+      this.$emit('onSubmit', value);
+    },
+    async toUpload({ file }, model) {
+      // 上传,赋值
+      const res = await this.upload({ file, dir: 'personal' });
+      if (this.$checkRes(res)) {
+        this.$set(this.form, model, [{ name: res.name, url: res.uri }]);
+      }
+    },
+    toDelete(file, model) {
+      const index = this.form[model].findIndex((f) => _.isEqual(f, file));
+      this.form[model].splice(index, 1);
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>