jk-temporary-workers-portal/src/views/base/personInfo-list.vue

<template>
  <div>
    <el-breadcrumb separator=">">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>
        <a href="#">系统管理</a>
      </el-breadcrumb-item>
      <el-breadcrumb-item>
        <a href="/personInfo">人员管理</a>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>
    <!--
      要resetFields起作用，必须配置:model和prop
    -->
    <el-form ref="queryForm" :model="queryModel" inline class="demo-form-inline">
      <div>
        <el-form-item label="姓名" prop="name">
          <el-input type="text" size="mini" v-model="queryModel.name"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input type="text" size="mini" v-model="queryModel.phone"></el-input>
        </el-form-item>
        <el-form-item label="身份证" prop="idCard">
          <el-input type="text" size="mini" v-model="queryModel.idCard"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            size="mini"
            icon="ios-search"
            @click="changePage(1)"
            :loading="loading"
          >查询</el-button>&nbsp;
          <el-button
            type="info"
            size="mini"
            style="margin-left: 8px"
            @click="handleReset('queryForm')"
          >重置</el-button>&nbsp;
        </el-form-item>
      </div>
      <div>
        <el-form-item label="所属企业" prop="companyId">
          <el-select
            v-model="queryModel.companyId"
            size="mini"
            filterable
            placeholder="请选择"
            style="width:300px"
          >
            <el-option
              v-for="company in companyResult"
              :key="company.id"
              :label="company.name"
              :value="company.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </div>
    </el-form>
    <el-divider></el-divider>
    <el-row class="button-group">
      <el-button type="primary" size="small" plain icon="el-icon-circle-plus" @click="handleAdd">新增</el-button>
      <el-button
        type="primary"
        size="small"
        plain
        icon="el-icon-circle-plus"
        :disabled="multipleSelection.length==0"
        @click="handleBatchDelete"
      >删除选中项</el-button>
      <el-button
        type="primary"
        size="small"
        plain
        icon="el-icon-circle-plus"
        @click="batchImportVisible = true"
      >导入</el-button>
      <el-button
        type="primary"
        size="small"
        plain
        icon="el-icon-circle-plus"
        @click="downloadAll"
      >导出数据</el-button>
      <el-button
        type="primary"
        size="small"
        plain
        icon="el-icon-circle-plus"
        :disabled="multipleSelection.length==0"
        @click="dataSync"
      >数据同步</el-button>
      <el-button
        type="primary"
        size="small"
        plain
        icon="el-icon-circle-plus"
        :disabled="multipleSelection.length==0"
        @click="handleBatchEnabledFace"
      >人脸授权</el-button>
      <el-button
        type="primary"
        size="small"
        plain
        icon="el-icon-circle-plus"
        :disabled="multipleSelection.length==0"
        @click="batchBoundDevice = true"
      >绑定设备</el-button>
    </el-row>
    <el-table
      :data="tableData"
      style="min-height:400px;"
      v-loading="loading"
      stripe
      @sort-change="sortChange"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="序号" width="100"></el-table-column>
      <el-table-column prop="companyName" label="企业" width="180"></el-table-column>
      <el-table-column prop="faceImageUrl" label="人员照片" width="110" fixed="left">
        <template slot-scope="{row}">
          <a :href="row.faceImageUrl" target="_blank">
            <el-avatar
              :size="60"
              :src="row.faceImageUrl+'?x-oss-process=image/resize,m_lfit,h_100,w_100'"
              :key="row.id"
            ></el-avatar>
          </a>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="150" fixed="left"></el-table-column>
      <el-table-column prop="phone" label="手机号" width="180"></el-table-column>
      <el-table-column prop="idCard" label="身份证" width="200"></el-table-column>
      <el-table-column prop="openId" label="是否绑定公众号" width="180">
        <template slot-scope="{row}">{{row.openId == null ? "否" : "是"}}</template>
      </el-table-column>
      <el-table-column prop="faceBound" label="是否同步人脸信息" width="180">
        <template slot-scope="{row}">{{row.faceBound ? "是" : "否"}}</template>
      </el-table-column>
      <el-table-column label="人脸授权">
        <template slot-scope="{row}">
          <el-switch
            v-model="row.faceEnabled"
            @change="enabledTo(row,'face',row.faceEnabled)"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :disabled="disabled"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="刷卡授权">
        <template slot-scope="{row}">
          <el-switch
            v-model="row.cardEnabled"
            @change="enabledTo(row,'card','')"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :disabled="disabled"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="手机授权">
        <template slot-scope="{row}">
          <el-switch
            v-model="row.appEnabled"
            @change="enabledTo(row,'app','')"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :disabled="disabled"
          ></el-switch>
        </template>
      </el-table-column>
      <!-- <el-table-column label="密码">
        <template slot-scope="{row}">
          <el-switch v-model="row.passwordEnabled" @change="enabledTo(row.id,'face')" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
        </template>
      </el-table-column>-->
      <el-table-column label="访客授权">
        <template slot-scope="{row}">
          <el-switch
            v-model="row.guestEnabled"
            @change="enabledTo(row,'guest','')"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :disabled="disabled"
          ></el-switch>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="position1" :label="position1" width="180"></el-table-column>
      <el-table-column prop="position2" :label="position2" width="180"></el-table-column>
      <el-table-column prop="position3" :label="position3" width="180"></el-table-column>
      <el-table-column prop="position4" :label="position4" width="180"></el-table-column>
      <el-table-column prop="position5" :label="position5" width="180"></el-table-column>-->
      <el-table-column label="操作" width="290" fixed="right">
        <template slot-scope="{row}">
          <el-row>
            <el-col :span="24">
              <el-button size="mini" type="warning" @click="handleEdit(row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(row)">删除</el-button>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-button size="mini" type="success" @click="bindDevice(row)">绑定设备</el-button>
              <span v-if="row.faceBound != null && row.faceBound">
                &#8195;&#8195;&#8195;
                <el-button size="mini" type="success" :disabled="true" @click="uploadData(row)">上传数据</el-button>
              </span>
              <span v-if="row.faceBound != null && !row.faceBound">
                &#8195;&#8195;&#8195;
                <el-button size="mini" type="success" @click="uploadData(row)">上传数据</el-button>
              </span>
              &#8195;&#8195;&#8195;
              <el-button size="mini" type="info" @click="showBound(row)">已绑定设备</el-button>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page.sync="pageIndex"
      :total="totalElements"
      :page-sizes="pageSizeList"
      @current-change="changePage"
      @size-change="pageSizeChange"
      layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>
    <personInfo-detail
      v-if="showModal"
      :businessKey="businessKey"
      :title="modalTitle"
      :companyResult="companyResult"
      :companyPosition1="position1"
      :companyPosition2="position2"
      :companyPosition3="position3"
      :companyPosition4="position4"
      :companyPosition5="position5"
      @close="onDetailModalClose"
    ></personInfo-detail>
    <personDeviceRelation-list
      v-if="showDeviceModal"
      :personId="personId"
      @close="onDetailModalClose"
    ></personDeviceRelation-list>
    <personDeviceRelation-BoundList
      v-if="showBoundModal"
      :personId="personId"
      @close="onDetailModalClose"
    ></personDeviceRelation-BoundList>
    <!--批量导入S-->
    <el-dialog
      title="批量导入人员"
      :visible.sync="batchImportVisible"
      :modal-append-to-body="false"
      style="text-align: left;"
    >
      <el-form label-width="150px">
        <el-form-item label="模板下载">
          <el-link
            href="http://rccs.oss-cn-hangzhou.aliyuncs.com/smart/companyInfo/2020/3/16170226996.xls"
            type="primary"
            target="_blank"
          >点击下载模板</el-link>
        </el-form-item>
        <el-form-item label="企业">
          <el-select
            v-model="uploadCompanyId"
            filterable
            placeholder="请选择"
            @change="changeUploadCompayId"
          >
            <el-option
              v-for="company in companyResult"
              :key="company.id"
              :label="company.name"
              :value="company.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上传文件">
          <el-upload
            class="upload-demo"
            accept=".xls"
            :action="uploadUrlXls"
            :data="uploadXlsData"
            :headers="headers"
            :on-preview="handleBatchImportPreview"
            name="uploadFile"
            :multiple="true"
            :limit="1"
            :on-remove="handleBatchImportRemove"
            :before-remove="beforeBatchImportRemove"
            :on-exceed="handleBatchImportExceed"
            :on-success="handleBatchImportSuccess"
            :file-list="batchImportFileList"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传xls文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="batchImportVisible = false">关 闭</el-button>
      </div>
    </el-dialog>
    <!--批量导入E-->
    <!-- 批量绑定设备 -->
    <el-dialog
      title="绑定设备"
      :visible.sync="batchBoundDevice"
      :modal-append-to-body="false"
      style="text-align: left;"
    >
      <el-form label-width="150px">
        <el-form-item label="设备">
          <el-select v-model="boundDeviceId" filterable placeholder="请选择">
            <el-option
              v-for="devices in deviceResult"
              :key="devices.id"
              :label="devices.aliasName"
              :value="devices.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeBatchBoundDevice">关 闭</el-button>
        <el-button type="primary" @click="handleBatchBoundDevice">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 批量绑定设备end -->
  </div>
</template>
<script>
import Constant from "@/constant";
import PersonInfoDetail from "./personInfo-detail";
import PersonDeviceRelationList from "./personDeviceRelation-list";
import PersonDeviceRelationBoundList from "./personDeviceRelation-BoundList";

import personInfoApi from "@/api/base/personInfo";
import companyInfoApi from "@/api/base/companyInfo";
import companyPositionApi from "@/api/base/companyPosition";
import deviceInfoApi from "@/api/base/deviceInfo";
import personDeviceRelationApi from "@/api/base/personDeviceRelation";

import { getToken } from "@/utils/auth"; // get token from cookie
import NProgress from "nprogress"; // progress bar
import "nprogress/nprogress.css"; // progress bar style

export default {
  data() {
    var self = this;

    return {
      queryModel: {
        companyId: "",
        name: "",
        phone: "",
        idCard: ""
      },
      loading: false,
      tableData: [],
      pageIndex: 1,
      pageSize: 10,
      totalPages: 0,
      totalElements: 0,
      field: "",
      direction: "",
      pageSizeList: [10, 20, 30],
      multipleSelection: [],
      showModal: false,
      modalTitle: "",
      businessKey: "",
      companyResult: "",
      uploadCompanyId: "",
      batchImportVisible: false,
      batchImportFileList: [],
      uploadUrlXls: Constant.serverUrl + "/base/personInfo/importXls",
      uploadXlsData: {
        subFolder: "company",
        companyId: ""
      },
      headers: {
        Authorization: getToken()
      },
      disabled: false,
      position1: "",
      position2: "",
      position3: "",
      position4: "",
      position5: "",
      showDeviceModal: false,
      showBoundModal: false,
      personId: "",
      uploadSync: [],
      batchBoundDevice: false,
      deviceResult: "",
      boundDeviceId: ""
    };
  },
  created() {
    var self = this;

    companyPositionApi.detailForCompany().then(function(response) {
      var jsonData = response.data.data;
      self.position1 = jsonData.position1Name;
      self.position2 = jsonData.position2Name;
      self.position3 = jsonData.position3Name;
      self.position4 = jsonData.position4Name;
      self.position5 = jsonData.position5Name;
    });
  },
  methods: {
    changePage(pageIndex) {
      var self = this;

      self.loading = true;

      self.pageIndex = pageIndex;
      var formData = new FormData();

      formData.append("pageIndex", self.pageIndex);
      formData.append("pageSize", self.pageSize);

      formData.append("companyId", self.queryModel.companyId);
      formData.append("name", self.queryModel.name);
      formData.append("phone", self.queryModel.phone);
      formData.append("idCard", self.queryModel.idCard);

      if (this.field != null) {
        formData.append("field", this.field);
      }

      if (this.direction != null) {
        formData.append("direction", this.direction);
      }

      personInfoApi
        .pageList(formData)
        .then(function(response) {
          self.loading = false;

          var jsonData = response.data.data;

          self.tableData = jsonData.data;
          self.totalPages = jsonData.totalPages;
          self.totalElements = jsonData.recordsTotal;
        })
        .catch(error => {
          self.loading = false;
          // self.$message.error(error + "");
        });
    },
    pageSizeChange(pageSize) {
      this.pageSize = pageSize;
    },
    sortChange(data) {
      this.field = data.column.field;
      this.direction = data.order;

      this.changePage(this.pageIndex);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleReset(name) {
      this.$refs[name].resetFields();
    },
    handleAdd() {
      this.modalTitle = "新增";
      this.businessKey = "";
      this.showModal = true;
    },
    handleEdit(record) {
      this.modalTitle = "编辑";
      this.businessKey = record.id;
      this.showModal = true;
    },
    handleDelete(record) {
      var self = this;
      self.loading = true;
      self
        .$confirm("是否确认删除?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
        .then(() => {
          personInfoApi.remove(record.id).then(function(response) {
            var jsonData = response.data;
            self.loading = false;
            if (jsonData.result) {
              // var index = self.tableData.indexOf(record);
              // self.tableData.splice(index, 1);
              self.changePage(self.pageIndex);

              self.$message({
                type: "success",
                message: "删除成功!"
              });
            }
          });
        })
        .catch(() => {
          self.loading = false;
        });
    },
    handleBatchDelete() {
      var self = this;
      self.loading = true;
      var idList = this.multipleSelection.map(record => {
        return record.id;
      });

      this.$confirm("是否确认删除选中项？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        personInfoApi
          .batchRemove(idList)
          .then(function(response) {
            var jsonData = response.data;
            self.loading = false;
            if (jsonData.result) {
              self.changePage(self.pageIndex);

              self.$message({
                type: "success",
                message: "删除成功!"
              });
            }
          })
          .catch(() => {
            self.loading = false;
          });
      });
    },
    onDetailModalClose(refreshed) {
      //保存成功后回调
      this.showModal = false;
      this.showDeviceModal = false;
      this.showBoundModal = false;

      if (refreshed) {
        this.changePage(this.pageIndex);
      }
    },
    changeUploadCompayId(value) {
      var self = this;
      self.uploadXlsData.companyId = value;
    },
    bindDevice(record) {
      //绑定设备
      this.personId = record.id;
      this.showDeviceModal = true;
    },
    showBound(record) {
      //展示绑定设备
      //人员信息ID
      this.personId = record.id;
      this.showBoundModal = true;
    },
    //批量导入-上传成功
    handleBatchImportSuccess(response, file, fileList) {
      console.log(response);
      if (response.result) {
        this.$message.success(response.message);
        this.batchImportFileList = [];
        this.changePage(1);
        this.uploadCompanyId = "";
        this.uploadXlsData.companyId = "";
        this.batchImportVisible = false;
      } else {
        //this.$message.error(response.message);
        this.batchImportFileList = [];
        this.changePage(1);
        this.uploadCompanyId = "";
        this.uploadXlsData.companyId = "";

        if (response.data != null) {
          //下载有错误信息提示的报表
          //window.open(response.data);
          this.$message({
            showClose: true,
            dangerouslyUseHTMLString: true,
            message:
              response.message +
              `,<a href="${response.data}" target="_blank">点击下载未导入的数据报表</a>&nbsp;`,
            duration: 30000
          });
        }
      }
    },
    //批量导入-预览
    handleBatchImportPreview(file) {
      console.log(file.url);
    },
    //批量导入-移除
    handleBatchImportRemove(file, fileList) {
      console.log(file, fileList);
    },
    //批量导入-移除前操作
    beforeBatchImportRemove(file, fileList) {
      console.log(file, fileList);
    },
    //批量导入-文件超出个数限制时的钩子
    handleBatchImportExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    downloadAll() {
      //导出
      var self = this;
      var formData = new FormData();
      formData.append("companyId", self.queryModel.companyId);
      formData.append("name", self.queryModel.name);
      formData.append("phone", self.queryModel.phone);
      formData.append("idCard", self.queryModel.idCard);

      this.changePage(1);

      personInfoApi.exportXls(formData).then(function(response) {
        var jsonData = response.data;
        if (jsonData.result) {
          if (jsonData.data != null) {
            //下载有错误信息提示的报表
            self.$message({
              showClose: true,
              dangerouslyUseHTMLString: true,
              message: `<a href="${jsonData.data}" target="_blank">点击下载报表</a>&nbsp;`,
              duration: 30000
            });
          }
        }
      });
    },
    enabledTo(row, type, value) {
      var self = this;
      if (!self.disabled) {
        var formData = new FormData();
        formData.append("id", row.id);
        if ("face" == type) {
          personInfoApi.enabledFace(formData);
        } else if ("card" == type) {
          personInfoApi.enabledCard(formData);
        } else if ("app" == type) {
          personInfoApi.enabledApp(formData);
        } else if ("guest" == type) {
          personInfoApi.enabledGuest(formData);
        }
        self.disabled = true;

        setTimeout(function() {
          self.disabled = false;
        }, 1000); //一秒内不能重复点击
      } else {
        self.$message({
          type: "success",
          message: "操作过快!"
        });
      }
    },
    uploadData(record) {
      //同步人脸数据
      var self = this;
      self.loading = true;
      this.uploadSync.push(record.id);
      var idList = this.uploadSync;

      personInfoApi.dataSync(idList).then(function(response) {
        var jsonData = response.data;
        self.loading = false;
        if (jsonData.result) {
          self.changePage(self.pageIndex);
          self.$message({
            type: "success",
            message: "同步成功!"
          });
        } else {
          self.$message({
            type: "warning",
            message: jsonData.message
          });
        }
      });
    },
    dataSync() {
      //批量同步人脸
      var self = this;
      self.loading = true;
      var idList = this.multipleSelection.map(record => {
        return record.id;
      });

      this.$confirm("是否确认同步选中项？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          personInfoApi.dataSync(idList).then(function(response) {
            var jsonData = response.data;
            self.loading = false;
            if (jsonData.result) {
              self.changePage(self.pageIndex);

              self.$message({
                type: "success",
                message: "同步成功!"
              });
            } else {
              self.$message({
                type: "warning",
                message: jsonData.message
              });
            }
          });
        })
        .catch(() => {
          self.loading = false;
        });
    },
    handleBatchBoundDevice() {
      //批量同步人脸
      var self = this;
      self.loading = true;

      let boundDeviceId = self.boundDeviceId;

      var idList = this.multipleSelection.map(record => {
        return record.id;
      });
      var formData = new FormData();

      formData.append("persons", idList);
      formData.append("deviceId", boundDeviceId);
      personDeviceRelationApi
        .batchBindPerson(formData)
        .then(function(response) {
          var jsonData = response.data;
          self.loading = false;
          if (jsonData.result) {
            self.changePage(self.pageIndex);
            self.batchBoundDevice = false;
            self.boundDeviceId = "";
            self.$message({
              type: "success",
              message: "绑定成功!"
            });
          } else {
            self.$message({
              type: "warning",
              message: jsonData.message
            });
          }
        });
    },
    closeBatchBoundDevice() {
      var self = this;
      self.batchBoundDevice = false;
      self.boundDeviceId = "";
    },
    handleBatchEnabledFace() {
      //批量人脸授权
      var self = this;
      self.loading = true;

      let boundDeviceId = self.boundDeviceId;

      var idList = this.multipleSelection.map(record => {
        return record.id;
      });
      var formData = new FormData();

      formData.append("ids", idList);

      personInfoApi.enabledFaceList(idList).then(function(response) {
        var jsonData = response.data;
        self.loading = false;
        if (jsonData.result) {
          self.changePage(self.pageIndex);
          self.$message({
            type: "success",
            message: "授权成功!"
          });
        } else {
          self.$message({
            type: "warning",
            message: jsonData.message
          });
        }
      });
    }
  },
  async mounted() {
    var self = this;
    this.changePage(1);

    companyInfoApi.list().then(function(response) {
      var jsonData = response.data;
      if (jsonData.result) {
        self.companyResult = jsonData.data;
      }
    });

    deviceInfoApi.list().then(function(response) {
      var jsonData = response.data;
      if (jsonData.result) {
        self.deviceResult = jsonData.data;
      }
    });
  },
  components: {
    "personInfo-detail": PersonInfoDetail,
    "personDeviceRelation-list": PersonDeviceRelationList,
    "personDeviceRelation-BoundList": PersonDeviceRelationBoundList
  }
};
</script>
<style lang="scss" scoped>
.el-breadcrumb {
  margin: 10px;
  line-height: 20px;
}

.el-divider {
  margin: 5px 0;
}

.demo-form-inline {
  margin-left: 10px;
  text-align: left;
}

.button-group {
  margin-left: 10px;
  text-align: left;
}
</style>