导出会员信息

peng

1 天以前 5c5292c6b267e09a5e1f6056b06c5ac99f0088db

 manager/src/views/member/list/index.vue

@@ -14,11 +14,18 @@
          <Form-item label="联系方式" prop="mobile">
            <Input type="text" v-model="searchForm.mobile" placeholder="请输入会员联系方式" clearable style="width: 200px" />
          </Form-item>
          <Form-item label="用户标签" prop="tags">
            <Select v-model="searchForm.tagIds" multiple filterable :loading="selectLoading" style="width:200px;">
              <Option v-for="item in options" :key="item.id" :label="item.tagName" :value="item.id"></Option>
            </Select>
          </Form-item>

          <Button @click="handleSearch" class="search-btn" type="primary" icon="ios-search">搜索</Button>
        </Form>
      </Row>
      <Row class="operation padding-row" v-if="!selectedMember">
        <Button @click="addMember" type="primary">添加会员</Button>
      <Row class="operation padding-row" >
        <Button @click="addMember" v-if="!selectedMember" type="primary">添加会员</Button>
        <Button @click="exportExcel" type="primary">导出excel</Button>
      </Row>

      <Table :loading="loading" border :columns="columns" class="mt_10" :data="data" ref="table"></Table>
@@ -73,6 +80,9 @@
            <Option v-for="item in options" :key="item.id" :label="item.tagName" :value="item.id"></Option>
          </Select>
        </FormItem>
        <FormItem label="用户自定义标签" prop="customerTags">
          <span class="inf0o" v-for="(item,index) in memberTags" :key="index">{{item.tagName}}<span v-if="index < memberTags.length - 1">, </span></span>
        </FormItem>
        <FormItem label="性别" prop="sex">
          <RadioGroup type="button" button-style="solid" v-model="form.sex">
            <Radio :label="1">
@@ -83,18 +93,15 @@
            </Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="修改密码" prop="password">
          <Input type="password" style="width: 220px" password v-model="form.newPassword" />
        </FormItem>
<!--        <FormItem label="修改密码" prop="password">-->
<!--          <Input type="password" style="width: 220px" password v-model="form.newPassword" />-->
<!--        </FormItem>-->
        <FormItem label="生日" prop="birthday">
          <DatePicker type="date" format="yyyy-MM-dd" v-model="form.birthday" style="width: 220px"></DatePicker>
        </FormItem>
        <FormItem label="所在地" prop="mail">
          {{ form.region || '暂无地址' }}


          <Button style="margin-left: 10px;" @click="$refs.map.open()">选择</Button>

        </FormItem>
      </Form>
    </Modal>
@@ -111,6 +118,8 @@
import ossManage from "@/views/sys/oss-manage/ossManage";
import * as RegExp from "@/libs/RegExp.js";
import { getTags } from "@/api/tag.js";
import { detailById } from "@/api/memberCustomerTag.js"
import {exportMemberListData} from "@/api/member.js";

export default {
  name: "member",
@@ -120,6 +129,7 @@
  },
  data() {
    return {
      memberTags:[],
      defaultPic: require('@/assets/default.png'),
      descTitle: "", // modal标题
      descFlag: false, //编辑查看框
@@ -143,6 +153,7 @@
        username: "",
        mobile: "",
        disabled: "OPEN",
        tagIds:[],
      },
      picModelFlag: false, // 选择图片
      form: {}, // 表单数据
@@ -330,6 +341,13 @@
    },
  },
  methods: {
    getMemberTags(id){
      detailById(id).then(res =>{
        if (res.code === 200){
          this.memberTags = res.data;
        }
      });
    },
    // 回调给父级
    callback(val, index) {
      this.selectMember.forEach(item => { item.___selected = false })
@@ -384,12 +402,35 @@
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      this.getData();
    },    // 搜索
    exportExcel() {
      API_Member.exportMemberListData(this.searchForm).then(res =>{
        const blob = new Blob([res], {
          type: "application/vnd.ms-excel;charset=utf-8",
        });
        //对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
        //IE10以上支持blob但是依然不支持download
        if ("download" in document.createElement("a")) {
          //支持a标签download的浏览器
          const link = document.createElement("a"); //创建a标签
          link.download = "会员列表.xlsx"; //a标签添加属性
          link.style.display = "none";
          link.href = URL.createObjectURL(blob);
          document.body.appendChild(link);
          link.click(); //执行下载
          URL.revokeObjectURL(link.href); //释放url
          document.body.removeChild(link); //释放标签
        } else {
          navigator.msSaveBlob(blob, fileName);
        }
      })
    },
    //查看详情修改
    editPerm(val) {
      this.form = {};
      this.descTitle = `查看用户 ${val.username}`;
      this.descFlag = true;

      this.getMemberTags(val.id);
      this.getMemberInfo(val.id);
    },
    addMember() {
@@ -427,6 +468,7 @@
    },
    // 选中的图片
    callbackSelected(val) {
      console.log(val)
      this.picModelFlag = false;
      this.form.face = val.url;
    },