excel下载前端调用修改

heyujie

2021-07-02 85d5b48f6e225887bdfc460c20186962b213e304

excel下载前端调用修改

 src/api/shuohuang.ts

@@ -194,4 +194,5 @@
export const downloadFile = () => request({
  url: '/data/api-c/user/downloadExcel',
  method: 'get',
  responseType:"blob"
})

 src/pages/shuohuangMonitorAnalyze/components/memberManage.vue

@@ -1,7 +1,7 @@
<template>
  <div class="member-manage">
    <div class="left">
      <div style="margin-bottom:10px;">
      <div style="margin-bottom: 10px">
        <el-input placeholder="请输入" v-model="treeWord" size="small">
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
@@ -17,7 +17,11 @@
        @node-click="checkNode"
        @node-contextmenu="nodeContextMenu"
      ></el-tree>
      <div class="menuList" v-show="showMenu" :style="{top:menuTop+'px',left:menuLeft+'px'}">
      <div
        class="menuList"
        v-show="showMenu"
        :style="{ top: menuTop + 'px', left: menuLeft + 'px' }"
      >
        <ul>
          <li>创建同级节点</li>
          <li>删除节点</li>
@@ -28,28 +32,48 @@
    </div>
    <div class="right">
      <div class="filter-bar">
        <el-input class="keyword-input" placeholder="姓名/组织机构/手机号" v-model="keyword" size="small"></el-input>
        <el-select v-model="gender" size="small" placeholder="性别" style="margin: 0 10px;">
        <el-input
          class="keyword-input"
          placeholder="姓名/组织机构/手机号"
          v-model="keyword"
          size="small"
        ></el-input>
        <el-select
          v-model="gender"
          size="small"
          placeholder="性别"
          style="margin: 0 10px"
        >
          <el-option
            v-for="item in genders"
            :key="item.id"
            :value="item.name=='全部'?'':item.name"
            :value="item.name == '全部' ? '' : item.name"
            :label="item.name"
          >{{item.name}}</el-option>
            >{{ item.name }}</el-option
          >
        </el-select>
        <el-button type="primary" size="small" @click="renderMemberTable">查询</el-button>
        <el-button type="primary" size="small" @click="resetFilter">重置</el-button>
        <el-button type="primary" size="small" @click="renderMemberTable"
          >查询</el-button
        >
        <el-button type="primary" size="small" @click="resetFilter"
          >重置</el-button
        >
      </div>
      <div class="table-area">
        <div class="actions">
          <el-button type="primary" size="small" @click="addMember">添加人员</el-button>
          <el-button type="primary" size="small" @click="addMember"
            >添加人员</el-button
          >
          <el-button
            type="primary"
            :disabled="multipleTableSelection.length<1"
            :disabled="multipleTableSelection.length < 1"
            size="small"
            @click="toggleOrganize"
          >换组织</el-button>
          <el-button type="primary" size="small" @click="batchImport">批量导入</el-button>
            >换组织</el-button
          >
          <el-button type="primary" size="small" @click="batchImport"
            >批量导入</el-button
          >
          <!-- <el-button type="primary" size="small" @click="uploadPic">上传照片</el-button> -->
        </div>
        <el-table
@@ -62,7 +86,7 @@
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column label="姓名" prop="Name" sortable>
            <template slot-scope="scope">
              <div style="cursor:pointer;">{{scope.row.Name}}</div>
              <div style="cursor: pointer">{{ scope.row.Name }}</div>
            </template>
          </el-table-column>
          <el-table-column label="照片" prop="Surface">
@@ -79,14 +103,20 @@
          <el-table-column label="用户权限" prop="userpermission">
            <template slot-scope="scope">
              <div>
                <el-switch v-model="scope.row.UserPermissions" @change="memberUpdate(scope.row)"></el-switch>
                <el-switch
                  v-model="scope.row.UserPermissions"
                  @change="memberUpdate(scope.row)"
                ></el-switch>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="转储权限" prop="transferpermission">
            <template slot-scope="scope">
              <div>
                <el-switch v-model="scope.row.DumpPermissions" @change="memberUpdate(scope.row)"></el-switch>
                <el-switch
                  v-model="scope.row.DumpPermissions"
                  @change="memberUpdate(scope.row)"
                ></el-switch>
              </div>
            </template>
          </el-table-column>
@@ -114,16 +144,22 @@
      :visible="memberEditDialogVisible"
      class="member-edit-dialog"
      :append-to-body="false"
      @close="memberEditDialogVisible=false"
      @close="memberEditDialogVisible = false"
    >
      <div slot="title">
        <div class="title">
          <div class="main-title">{{memberEditForm.ID?'编辑人员':'添加人员'}}</div>
          <div class="subtitle">组织结构:{{curLeftTreeNode.label}}</div>
          <div class="main-title">
            {{ memberEditForm.ID ? "编辑人员" : "添加人员" }}
          </div>
          <div class="subtitle">组织结构:{{ curLeftTreeNode.label }}</div>
        </div>
      </div>
      <div class="text-center">
        <el-form :model="memberEditForm" :rules="memberEditFormRule" ref="memberForm">
        <el-form
          :model="memberEditForm"
          :rules="memberEditFormRule"
          ref="memberForm"
        >
          <el-form-item>
            <el-upload
              class="avatar-uploader"
@@ -133,7 +169,7 @@
            >
              <img
                v-if="memberEditForm.Surface"
                :src="`/httpImage/`+memberEditForm.Surface"
                :src="`/httpImage/` + memberEditForm.Surface"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
@@ -162,8 +198,12 @@
            <el-input v-model="memberEditForm.Tel" size="mini"></el-input>
          </el-form-item>
          <div class="btns">
            <el-button size="small" @click="memberEditDialogVisible=false">取消</el-button>
            <el-button size="small" type="primary" @click="memberSave">保存</el-button>
            <el-button size="small" @click="memberEditDialogVisible = false"
              >取消</el-button
            >
            <el-button size="small" type="primary" @click="memberSave"
              >保存</el-button
            >
          </div>
        </el-form>
      </div>
@@ -173,11 +213,15 @@
      class="toggle-organize-dialog"
      :append-to-body="false"
      title="移动人员到其他组织"
      @close="toggleOrganizeDialogVisible=false"
      @close="toggleOrganizeDialogVisible = false"
    >
      <div class="text-left">
        <el-input v-model="organizeKeyword" size="small">
          <el-button slot="append" icon="el-icon-search" @clcik="getOrganizeTreeData"></el-button>
          <el-button
            slot="append"
            icon="el-icon-search"
            @clcik="getOrganizeTreeData"
          ></el-button>
        </el-input>
        <div>默认组织</div>
        <el-tree
@@ -190,8 +234,12 @@
          :highlight-current="true"
        ></el-tree>
        <div slot="footer" class="btns">
          <el-button size="small" @click="toggleOrganizeDialogVisible=false">取消</el-button>
          <el-button size="small" type="primary" @click="updateOrg">确定</el-button>
          <el-button size="small" @click="toggleOrganizeDialogVisible = false"
            >取消</el-button
          >
          <el-button size="small" type="primary" @click="updateOrg"
            >确定</el-button
          >
        </div>
      </div>
    </el-dialog>
@@ -200,7 +248,7 @@
      class="batch-import-dialog"
      :append-to-body="false"
      title="批量导入"
      @close="batchImportDialogVisible=false"
      @close="batchImportDialogVisible = false"
    >
      <div>
        <p class="tip">
@@ -208,16 +256,30 @@
          (
          <a
            href="javascript:;"
            @mouseover="showDemo=true"
            @mouseout="showDemo=false"
          >示例</a>),点击
            @mouseover="showDemo = true"
            @mouseout="showDemo = false"
            >示例</a
          >),点击
          <a href="javascript:;" @click="downloadExcel">下载模板.excel</a>
          <img class="tip-demo" v-if="showDemo" :src="`${publicPath}images/shuohuang/tip.jpg`" alt />
          <img
            class="tip-demo"
            v-if="showDemo"
            :src="`${publicPath}images/shuohuang/tip.jpg`"
            alt
          />
        </p>
        <div class="flex-box">
          <label>上传文件夹:</label>
          <el-button size="mini" type="primary" @click="uploadDirectoryTrigger">点击上传</el-button>
          <input ref="directoryInput" @change="importDirectory" hidden type="file" webkitdirectory />
          <el-button size="mini" type="primary" @click="uploadDirectoryTrigger"
            >点击上传</el-button
          >
          <input
            ref="directoryInput"
            @change="importDirectory"
            hidden
            type="file"
            webkitdirectory
          />
        </div>
        <el-table class="thbg" :data="batchImportTableData" fit>
          <el-table-column type="index" label="序号"></el-table-column>
@@ -231,23 +293,37 @@
</template>

<script>

import { getShuohuangDepartTree, getOrganizeTree, getMemberList, updateMemberInfo, addMember, updateUnit, uploadMemberPic, uploadDirectory, uploadFile, downloadFile } from '@/api/shuohuang'
import {
  getShuohuangDepartTree,
  getOrganizeTree,
  getMemberList,
  updateMemberInfo,
  addMember,
  updateUnit,
  uploadMemberPic,
  uploadDirectory,
  uploadFile,
  downloadFile,
} from "@/api/shuohuang";
export default {
  data() {
    return {
      publicPath: process.env.BASE_URL,
      CLIP: 'http://192.168.20.113/',
      treeWord: '',
      CLIP: "http://192.168.20.113/",
      treeWord: "",
      treeData: [],
      curLeftTreeNode: {},
      showMenu: false,
      deptId: '',
      deptId: "",
      menuTop: 0,
      menuLeft: 0,
      keyword: '',
      gender: '',
      genders: [{ id: 'g3', name: '全部' }, { name: '男', id: 'g0' }, { name: '女', id: 'g1' }],
      keyword: "",
      gender: "",
      genders: [
        { id: "g3", name: "全部" },
        { name: "男", id: "g0" },
        { name: "女", id: "g1" },
      ],
      tableData: [],
      multipleTableSelection: [],
      PageIndex: 1,
@@ -255,46 +331,47 @@
      tableTotal: 0,
      PageSize: 8,
      organizeData: [],
      checkedOrgID: '',
      checkedOrgID: "",
      checkedOrgName: "",
      organizeKeyword: '',
      organizeKeyword: "",
      memberEditDialogVisible: false,
      toggleOrganizeDialogVisible: false,
      batchImportDialogVisible: false,
      fileList: [],
      memberEditForm: {},
      memberEditFormRule: {
        Name: [{ required: true, message: '请输入姓名', trigger: 'change' }],
        UserName: [{ required: true, message: '请输入姓名', trigger: 'change' }],
        Sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
        Tel: [{ validator: this.isPhone, trigger: 'change' }],
        Name: [{ required: true, message: "请输入姓名", trigger: "change" }],
        UserName: [
          { required: true, message: "请输入姓名", trigger: "change" },
        ],
        Sex: [{ required: true, message: "请选择性别", trigger: "change" }],
        Tel: [{ validator: this.isPhone, trigger: "change" }],
      },
      memberPicUrl: '',
      memberPicUrl: "",
      showDemo: false,
      batchImportTableData: [],
    }
    };
  },
  mounted() {
    this.searchLeftTreeData();
    this.getOrganizeTreeData();
    //this.renderMemberTable();

  },
  methods: {
    resetFilter() {
      this.keyword = '';
      this.gender = '';
      this.keyword = "";
      this.gender = "";
      this.renderMemberTable();
    },
    isPhone(rule, value, callback) {
      if (!value) {
        return callback()
        return callback();
      } else if (value.trim()) {
        var pattern = /^1[345789]\d{9}$/
        var pattern = /^1[345789]\d{9}$/;
        if (pattern.test(value)) {
          return callback()
          return callback();
        }
        return callback(new Error('输入的手机号错误'))
        return callback(new Error("输入的手机号错误"));
      }
      // if (value.trim()) {
      //   var pattern = /^1[345789]\d{9}$/
@@ -310,79 +387,90 @@
      this.menuLeft = e.pageX;
    },
    checkOrgNode(a, b, c) {
      this.checkedOrgID = a.id
      this.checkedOrgName = a.label
      this.checkedOrgID = a.id;
      this.checkedOrgName = a.label;
    },
    downloadExcel() {
      downloadFile().then(function (res) {
        debugger
        console.log(res);
      })
        let blobUrl = window.URL.createObjectURL(
          new Blob([res], {
            type: "application/vnd.ms-excel",
          })
        );
        const a = document.createElement("a");
        a.style.display = "none";
        a.download = "批量导入模板.xlsx";
        a.href = blobUrl;
        a.click();
        document.body.removeChild(a)
      });
    },
    updateOrg() {
      let ids = this.multipleTableSelection.map(row => {
        return row.ID
      let ids = this.multipleTableSelection.map((row) => {
        return row.ID;
      });
      let params = {
        DeptID: this.checkedOrgID,
        DeptName: this.checkedOrgName,
        Users: ids.join(',')
      }
      updateUnit(params).then(res => {
        Users: ids.join(","),
      };
      updateUnit(params).then((res) => {
        if (res.success) {
          this.$notify({
            type: 'success',
            message: res.msg
            type: "success",
            message: res.msg,
          });
          this.toggleOrganizeDialogVisible = false;
          this.renderMemberTable();
          this.searchLeftTreeData()
          this.searchLeftTreeData();
        }
      })

      });
    },
    tableSelection(val) {
      this.multipleTableSelection = val;
    },
    memberSave() {
      this.$refs['memberForm'].validate((valid) => {
      this.$refs["memberForm"].validate((valid) => {
        if (valid) {
          debugger;
          let params = Object.assign({ DeptID: this.curLeftTreeNode.id }, this.memberEditForm);
          let params = Object.assign(
            { DeptID: this.curLeftTreeNode.id },
            this.memberEditForm
          );
          if (this.memberEditForm.ID) {
            updateMemberInfo(params).then(res => {
            updateMemberInfo(params).then((res) => {
              if (res.success) {
                this.$notify({
                  type: 'success',
                  message: res.msg
                  type: "success",
                  message: res.msg,
                });
                this.memberEditDialogVisible = false;
                this.renderMemberTable();
                this.searchLeftTreeData();
                this.memberEditForm={}
                this.memberEditForm = {};
              }
            })
            });
          } else {
            addMember(params).then(res => {
            addMember(params).then((res) => {
              if (res.success) {
                this.$notify({
                  type: 'success',
                  message: res.msg
                })
                  type: "success",
                  message: res.msg,
                });
                this.renderMemberTable();
                this.memberEditDialogVisible = false;
                this.searchLeftTreeData();
                this.memberEditForm={}
                this.memberEditForm = {};
              }
            })
            });
          }
        } else {
          return false;
        }
      })
      });
    },
    delMember(member) {
      member.IsDel = '1';
      member.IsDel = "1";
      this.memberUpdate(member);
    },
    editMember(member) {
@@ -390,19 +478,19 @@
      this.memberEditForm = member;
    },
    memberUpdate(member) {
      updateMemberInfo(member).then(res => {
      updateMemberInfo(member).then((res) => {
        if (res.success) {
          this.$notify({
            type: 'success',
            message: res.msg
            type: "success",
            message: res.msg,
          });
          this.renderMemberTable();
          this.searchLeftTreeData();
        }
      })
      });
    },
    checkNode(a, b, c) {
      if (a.hasOwnProperty('children')) {
      if (a.hasOwnProperty("children")) {
        this.curLeftTreeNode = a;
        this.deptId = a.id;
        this.renderMemberTable();
@@ -419,40 +507,34 @@
        Keyword: this.keyword,
        Sex: this.gender,
        PageIndex: this.PageIndex,
        PageSize: this.PageSize
      }
      getMemberList(params).then(res => {
        PageSize: this.PageSize,
      };
      getMemberList(params).then((res) => {
        _this.tableData = res.data;
        _this.tableTotal = res.total;
      })
      });
    },
    uploadPic() {

    },
    uploadPic() {},
    uploadDirectoryTrigger() {
      this.$refs['directoryInput'].click();
      this.$refs["directoryInput"].click();
    },
    importDirectory() {
      let _this = this;
      //this.$refs['directoryInput'].files //文件夹map
      let formData = new FormData;
      for (var file in this.$refs['directoryInput'].files) {
        formData.append('files', this.$refs['directoryInput'].files[file])
      let formData = new FormData();
      for (var file in this.$refs["directoryInput"].files) {
        formData.append("files", this.$refs["directoryInput"].files[file]);
      }
      //formData.append('files', this.$refs['directoryInput'].files)

      uploadDirectory(formData).then(res => {
      uploadDirectory(formData).then((res) => {
        _this.batchImportTableData = res.data;
        _this.renderMemberTable();
      })
      });
    },

    handleRemove() {

    },
    handleExceed() {

    },
    handleRemove() {},
    handleExceed() {},
    batchImport() {
      this.batchImportDialogVisible = true;
    },
@@ -461,32 +543,32 @@
    },
    uploadMemberPicture(params) {
      let param = new FormData();
      param.append('file', params.file)
      uploadMemberPic(param).then(res => {
        this.$set(this.memberEditForm, 'Surface', res.data)
      })
      param.append("file", params.file);
      uploadMemberPic(param).then((res) => {
        this.$set(this.memberEditForm, "Surface", res.data);
      });
    },

    deepNodeChildren(node) {
      var arr1 = [];
      var arr2 = [];
      if (node.ChildDept && node.ChildDept.length > 0) {
        arr1 = node.ChildDept.map(child => {
        arr1 = node.ChildDept.map((child) => {
          let childObj = {};
          childObj.id = child.ID;
          childObj.label = child.Name;
          childObj.Status = child.Status;
          if (child.ChildDept) {
            childObj.children = this.deepNodeChildren(child)
            childObj.children = this.deepNodeChildren(child);
          }
          if (child.UserLst) {
            childObj.children = this.deepNodeChildren(child)
            childObj.children = this.deepNodeChildren(child);
          }
          return childObj;
        });
      }
      if (node.UserLst && node.UserLst.length > 0) {
        arr2 = node.UserLst.map(child => {
        arr2 = node.UserLst.map((child) => {
          let childObj = {};
          childObj.id = child.ID;
          childObj.label = child.Name;
@@ -494,54 +576,51 @@
          return childObj;
        });
      }
      return arr1.concat(arr2)
      return arr1.concat(arr2);
    },
    getOrganizeTreeData() {
      let _this = this;
      getOrganizeTree().then(res => {
        _this.organizeData = res.data.map(item => {
      getOrganizeTree().then((res) => {
        _this.organizeData = res.data.map((item) => {
          let obj = {};
          obj.id = item.ID;
          obj.label = item.Name;
          obj.Status = item.Status;
          obj.children = _this.deepNodeChildren(item);
          return obj
        })
      })
          return obj;
        });
      });
    },
    searchLeftTreeData() {
      let _this = this;
      getShuohuangDepartTree().then(res => {
        _this.treeData = res.data.map(item => {
      getShuohuangDepartTree().then((res) => {
        _this.treeData = res.data.map((item) => {
          let obj = {};
          obj.id = item.ID;
          obj.label = item.Name;
          obj.Status = item.Status;
          obj.children = _this.deepNodeChildren(item);
          return obj
          return obj;
        });
        this.$nextTick(() => {

          if (!Object.keys(_this.curLeftTreeNode).length) {
            if (_this.treeData.length) {
              _this.curLeftTreeNode = _this.treeData[0];
              _this.$refs['leftTreeNodes'].setCurrentNode(_this.treeData[0]);
              _this.$refs["leftTreeNodes"].setCurrentNode(_this.treeData[0]);
            }
          } else {
            _this.$refs['leftTreeNodes'].setCurrentNode(_this.curLeftTreeNode);
            _this.$refs["leftTreeNodes"].setCurrentNode(_this.curLeftTreeNode);
          }
          _this.checkNode(_this.curLeftTreeNode);
        })

      })
        });
      });
    },
    addMember() {
      this.memberEditDialogVisible = true;
      this.memberEditForm = {};
    },

  }
}
  },
};
</script>

<style lang="scss">