<template>
  <div class="testdiv">
    <div class="divborder newSearchDiv">
      <div>
        <div class="filter">
          <label>{{ $t(100000) }}：</label>
          <Select
            v-model="sectionid"
            label-in-value
            @on-change="departmentchange"
            clearable
            class="searchSelect"
          >
            <Option
              v-for="item in department"
              :value="item.id"
              :key="item.id"
              >{{ item.title }}</Option
            >
          </Select>
        </div>
        <div class="filter">
          <label>{{ $t(100001) }}：</label>
          <Select
            class="searchSelect"
            v-model="usergroupid"
            label-in-value
            clearable
          >
            <Option v-for="item in usergroup" :value="item.id" :key="item.id">{{
              item.title
            }}</Option>
          </Select>
        </div>
        <div class="filter">
          <label>{{ $t(100002) }}：</label>
          <Input class="searchInput" v-model="truename" />
        </div>
        <div class="filter">
          <label>{{ $t(100003) }}：</label>
          <Select class="searchSelect" v-model="sex" label-in-value clearable>
            <Option value="1">{{ $t(100010) }}</Option>
            <Option value="2">{{ $t(100011) }}</Option>
          </Select>
        </div>
        <!-- 次级搜索条件--隐藏 -->
        <div v-show="!morecondition">
          <div class="filter">
            <label>{{ $t(900176) }}：</label>
            <Input class="searchInput" v-model="workcode" />
          </div>
        </div>
      </div>
      <div class="searchBtn">
        <Button
          type="primary"
          class="twoWord"
          icon="ios-search"
          @click="tosearch()"
          >{{ $t(1001) }}</Button
        >
        <Button
          type="success"
          class="twoWord"
          icon="md-add-circle"
          @click="add()"
          >{{ $t(1002) }}</Button
        >
        <Button
          type="warning"
          class="twoWord"
          icon="ios-create-outline"
          @click="edit()"
          >{{ $t(1003) }}</Button
        >
        <Button
          type="error"
          class="twoWord intervalRight"
          icon="md-close-circle"
          @click="dele()"
          >{{ $t(1004) }}</Button
        >
        <Button
          type="primary"
          class="fourWord"
          icon="md-download"
          @click="loadexcel()"
          >{{ $t(1005) }}</Button
        >
        <Upload
          style="display: inline-block"
          ref="upload"
          :action="action"
          name="excel-file"
          :headers="headers"
          :show-upload-list="false"
          :on-format-error="handleFormatError"
          :on-success="handleSuccess"
          :on-error="handleError"
          :format="['xlsx', 'xls']"
        >
          <Button type="primary" class="fourWord" icon="md-cloud-upload">{{
            $t(1006)
          }}</Button>
        </Upload>
        <Button
          type="primary"
          class="fourWord"
          icon="ios-cloud-download"
          @click="downexcel()"
          >{{ $t(1007) }}</Button
        >
        <Button
          type="primary"
          class="fourWord"
          icon="md-camera"
          @click="generate()"
        >
          人员二维码
        </Button>
      </div>
      <!-- 更多条件 按钮 -->
      <MoreConbtn
        @getCon="morecondition = !morecondition"
        :morecondition="morecondition"
      ></MoreConbtn>
    </div>
    <div class="divborder newTableDiv">
      <Table
        @on-current-change="handleRowChange"
        @on-selection-change="handleSelectRow"
        highlight-row
        :data="tableData"
        :columns="tableColumns"
        class="tableClass"
      ></Table>
      <div class="pageDiv">
        <div class="pageDirection">
          <Page
            :total="total"
            :current="page"
            @on-change="changePage"
            show-elevator
            show-sizer
            show-total
            @on-page-size-change="handlePageSize"
            :page-size-opts="[10, 20, 30, 40, 100]"
          ></Page>
        </div>
      </div>
    </div>
    <Modal class="newModalClass" v-model="addmodal" :width="730">
      <p slot="header">
        <span>{{ title1 }}</span>
      </p>
      <div class="modal_body">
        <div style="width: 155px; float: left; height: 100%">
          <div>{{ $t(100009) }}：</div>
          <div class="filter uploadMax">
            <img :src="loadimg" />
            <input
              type="file"
              name
              ref="fileInteditimg1"
              id="face1"
              @change="unloadimg"
              accept="image/png, image/gif, image/jpeg"
            />
          </div>
          <div style="margin-top: 10px">
            <Button type="primary" size="small" @click="delimag">{{
              $t(920179)
            }}</Button>
          </div>
        </div>
        <div style="width: 510px; float: left; height: 100%">
          <div class="filter">
            <label> <i>*</i>{{ $t("100002") }}： </label>
            <Input class="searchInput" id="add_Name" v-model="add_Name" />
          </div>
          <div class="filter">
            <label> <i>*</i>{{ $t("100003") }}： </label>
            <RadioGroup v-model="add_gender">
              <Radio label="1" style="width: 60px">
                <span v-text="$t('100010')">男</span>
              </Radio>
              <Radio label="2" style="width: 60px">
                <span v-text="$t('100011')">女</span>
              </Radio>
            </RadioGroup>
          </div>
          <div class="filter">
            <label> <i>*</i> {{ $t("100000") }}： </label>
            <Select
              v-model="add_sectionid"
              label-in-value
              @on-change="add_departmentchange"
              clearable
              class="searchSelect"
            >
              <Option
                v-for="item in department"
                :value="item.id"
                :key="item.id"
                >{{ item.title }}</Option
              >
            </Select>
          </div>
          <div class="filter">
            <label> <i>*</i> {{ $t("100001") }}： </label>
            <Select
              v-model="add_usergroupid"
              label-in-value
              clearable
              class="searchSelect"
            >
              <Option
                v-for="item in addusergroup"
                :value="item.id"
                :key="item.id"
                >{{ item.title }}</Option
              >
            </Select>
          </div>
          <div class="filter">
            <label> <i>*</i> {{ $t("900176") }}： </label>
            <Input
              class="searchInput"
              id="add_workcode"
              v-model="add_workcode"
            />
          </div>
          <div class="filter">
            <label> <i>*</i> {{ $t("1016") }}： </label>
            <Input
              class="searchInput"
              type="password"
              id="add_password"
              v-model="add_password"
            />
          </div>
          <div class="filter">
            <label>{{ $t("100007") }}：</label>
            <Input class="searchInput" id="add_email" v-model="add_email" />
          </div>
          <div class="filter">
            <label>{{ $t("100006") }}：</label>
            <Input class="searchInput" id="add_phone" v-model="add_phone" />
          </div>
          <div class="filter">
            <label>{{ $t("100014") }}：</label>
            <DatePicker
              type="datetime"
              v-model="add_create_time"
              confirm
              format="yyyy-MM-dd"
              class="searchInput"
            ></DatePicker>
          </div>
          <div class="filter">
            <label> <i>*</i> {{ $t("100005") }}： </label>
            <Input class="searchInput" id="add_mobile" v-model="add_mobile" />
          </div>
          <div class="filter">
            <label>{{ $t("950181") }}：</label>
            <Input class="searchInput" id="add_ic" v-model="add_ic" />
          </div>
        </div>
        <div style="text-align: center; display: inline-block">
          <span style="color: red">{{ $t("100015") }}</span>
        </div>
      </div>
      <div slot="footer">
        <Button size="large" @click="cancle">{{ $t("1033") }}</Button>
        <Button type="primary" size="large" @click="Adddata">{{
          $t("1002")
        }}</Button>
      </div>
    </Modal>
    <Modal class="newModalClass" v-model="editmodal" :width="730">
      <p slot="header">
        <span>{{ title1 }}</span>
      </p>
      <div class="modal_body">
        <div style="width: 155px; float: left; height: 100%">
          <div>{{ $t("100009") }}：</div>
          <div class="filter uploadMax">
            <img :src="editloadimg" />
            <input
              type="file"
              name
              ref="fileInteditimg"
              id="face"
              @change="editunloadimg"
              accept="image/png, image/gif, image/jpeg"
            />
          </div>
          <div style="margin-top: 10px">
            <Button type="primary" size="small" @click="delimag">{{
              $t("920179")
            }}</Button>
          </div>
        </div>
        <div style="width: 510px; float: left; height: 100%">
          <div class="filter">
            <label> <i>*</i>{{ $t("100002") }}： </label>
            <Input class="searchInput" id="name" v-model="editobj.name" />
          </div>
          <div class="filter">
            <label> <i>*</i>{{ $t("100003") }}： </label>
            <RadioGroup v-model="editobj.sex">
              <Radio label="1" style="width: 60px">
                <span v-text="$t('100010')">男</span>
              </Radio>
              <Radio label="2" style="width: 60px">
                <span v-text="$t('100011')">女</span>
              </Radio>
            </RadioGroup>
          </div>
          <div class="filter">
            <label> <i>*</i> {{ $t("100000") }}： </label>
            <Select
              v-model="editobj.sectionid"
              label-in-value
              @on-change="edit_departmentchange()"
              clearable
              class="searchSelect"
            >
              <Option
                v-for="item in department"
                :value="item.id"
                :key="item.id"
                >{{ item.title }}</Option
              >
            </Select>
          </div>
          <div class="filter">
            <label> <i>*</i>{{ $t("100001") }}： </label>
            <Select
              v-model="editobj.usergroupid"
              label-in-value
              clearable
              class="searchSelect"
            >
              <Option
                v-for="item in editusergroup"
                :value="item.id"
                :key="item.id"
                >{{ item.title }}</Option
              >
            </Select>
          </div>
          <div class="filter">
            <label> <i>*</i>{{ $t("900176") }}： </label>
            <Input
              class="searchInput"
              id="work_code"
              v-model="editobj.work_code"
            />
          </div>
          <div class="filter">
            <label> <i>*</i> {{ $t("1016") }}： </label>
            <Input
              class="searchInput"
              type="password"
              id="add_password"
              value
              v-model="editobj.password"
            />
          </div>
          <div class="filter">
            <label>{{ $t("100007") }}：</label>
            <Input
              class="searchInput"
              id="work_email"
              v-model="editobj.work_email"
            />
          </div>
          <div class="filter">
            <label>{{ $t("100006") }}：</label>
            <Input
              class="searchInput"
              id="fixed_line"
              v-model="editobj.fixed_line"
            />
          </div>
          <div class="filter">
            <label>{{ $t("100014") }}：</label>
            <DatePicker
              type="datetime"
              v-model="editobj.create_time"
              confirm
              placeholder="Select date"
              format="yyyy-MM-dd"
              class="searchInput"
            ></DatePicker>
          </div>
          <div class="filter">
            <label> <i>*</i>{{ $t("100005") }}： </label>
            <Input class="searchInput" id="mobile" v-model="editobj.mobile" />
          </div>
          <div class="filter">
            <label>{{ $t("950181") }}：</label>
            <Input class="searchInput" id="rank" v-model="editobj.rank" />
          </div>
        </div>
        <div style="text-align: center; display: inline-block">
          <span style="color: red">{{ $t("100015") }}</span>
        </div>
      </div>
      <div slot="footer">
        <Button type="text" size="large" @click="cancle">{{
          $t("1033")
        }}</Button>
        <Button type="primary" size="large" @click="Editdata">{{
          $t("1003")
        }}</Button>
      </div>
    </Modal>
    <Modal class="newModalClass" v-model="generateModal">
      <p slot="header">
        <span>人员二维码</span>
      </p>
      <div class="modal_body">
        <div class="filter">
          <label><i>*</i>密码：</label>
          <Input
            type="password"
            class="searchInput"
            v-model="generatePassword"
            placeholder="请输入登录密码"
          ></Input>
        </div>
        <div class="modal_body_row" v-show="base64Text">
          <label style="margin-right: 5px">人员二维码：</label>
          <div
            id="qrcode"
            style="display: inline-block; vertical-align: top"
          ></div>
        </div>
      </div>
      <div slot="footer">
        <Button size="large" @click="generateModal = false">取消</Button>
        <Button
          v-if="!base64Text"
          size="large"
          type="primary"
          @click="generatePreview()"
        >
          确定
        </Button>
        <Button
          v-if="base64Text"
          size="large"
          type="primary"
          @click="generateDownload()"
        >
          下载
        </Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import axios from "@/libs/api.request";
import QRCode from "qrcodejs2";
import { Encrypt } from "../../terminal/cryptoJs";
import md5 from "js-md5";

export default {
  data() {
    return {
      headers: {
        token: localStorage.getItem("token"),
        timestamp: localStorage.getItem("timestamp"),
        nonce: localStorage.getItem("nonce"),
        sign: localStorage.getItem("sign"),
      },
      truename: "",
      workcode: "",
      tableData: [],
      morecondition: false, // 条件
      page: 1,
      pagesize: 10,
      action:
        this.axios.publicPath + "config/upload/submit?templateName=userlist",
      total: 0,
      tableColumns: [
        {
          type: "selection",
          width: 80,
        },
        {
          type: "index2",
          title: this.$t("1008"),
          key: "xuhao",
          render: (h, params) => {
            return h(
              "span",
              params.index + (this.page - 1) * this.pagesize + 1
            );
          },
          width: 80,
        },
        {
          title: this.$t("100002"),
          key: "name",
          width: 100,
        },
        {
          title: this.$t("100003"),
          key: "sex",
          width: 80,
        },
        {
          title: this.$t("900176"),
          key: "work_code",
        },
        {
          title: this.$t("100000"),
          key: "sectiontitle",
        },
        {
          title: this.$t("100001"),
          key: "usergrouptitle",
        },
        {
          title: this.$t("100005"),
          key: "mobile",
        },
        {
          title: this.$t("100006"),
          key: "fixed_line",
        },
        {
          title: this.$t("100007"),
          key: "work_email",
        },
        {
          title: this.$t("950181"),
          key: "rank",
        },
      ],
      sectionid: 0,
      usergroupid: 0,
      department: [],
      usergroup: [],
      add_sectionid: 0,
      add_usergroupid: 0,
      addusergroup: [],
      editusergroup: [],
      sex: 0,
      addmodal: false,
      editmodal: false,
      loadimg: require("../../../static/images/xiangjitwo.png"),
      editloadimg: require("../../../static/images/xiangjitwo.png"),
      editobj: {},
      add_code: "",
      add_gender: 0,
      add_departid: "",
      add_Name: "",
      groupid: 0,
      add_workcode: "",
      add_password: "",
      add_email: "",
      add_phone: "",
      add_mobile: "",
      add_ic: "",
      addSex: 0,
      face: "",
      obj: {},
      name: "",
      add_create_time: "",
      selectids: [],
      title1: "",
      generateModal: false,
      generatePassword: "",
      base64Text: "",
    };
  },
  created() {
    this.search();
    this.initdepartment();
    // 格式化表格样式
    this.tableColumns = this.$time.initTableTitle(this.tableColumns);
  },
  methods: {
    delimag() {
      this.loadimg = require("../../../static/images/xiangjitwo.png");
      this.editloadimg = require("../../../static/images/xiangjitwo.png");
    },
    cancle() {
      this.addmodal = false;
      this.editmodal = false;
      this.addmodal = false;
      this.add_Name = "";
      this.add_Sex = 0;
      this.add_workcode = "";
      this.sectionid = 0;
      this.add_mobile = "";
      this.add_password = "";
      this.add_phone = "";
      this.add_email = "";
      this.add_ic = "";
      this.add_hiredate = "";
      this.face = "";
      this.add_sectionid = 0;
      this.add_usergroupid = 0;
      this.add_create_time = "";
      this.editloadimg = require("../../../static/images/xiangjitwo.png");
      this.loadimg = require("../../../static/images/xiangjitwo.png");
      this.editobj = {};
      this.search();
      this.title1 = "";
    },
    unloadimg() {
      // 上传照片
      const file = this.$refs.fileInteditimg1.files[0];
      const data = new FormData();
      data.append("file", file);
      axios
        .request({
          url: "/config/upload/UploadImage",
          data,
          method: "post",
        })
        .then((res) => {
          if (res.data.ret === 1) {
            this.$Message.success(this.$t("100378"));
            this.loadimg = axios.publicPath + res.data.data;
          } else {
            this.$Message.error(this.$t(res.data.msg));
          }
        })
        .catch((err) => {
          alert(this.$t(err.msg));
        });
    },
    editunloadimg() {
      // 上传照片
      const file = this.$refs.fileInteditimg.files[0];
      const data = new FormData();
      data.append("file", file);
      axios
        .request({
          url: "/config/upload/UploadImage",
          data,
          method: "post",
        })
        .then((res) => {
          if (res.data.ret === 1) {
            this.$Message.success(this.$t("100378"));
            this.editloadimg = axios.publicPath + res.data.data;
          } else {
            this.$Message.error(this.$t(res.data.msg));
          }
        })
        .catch((err) => {
          alert(this.$t(err.msg));
        });
    },
    handleFormatError(file) {
      this.$Message.error(
        this.$t("920162") + " " + file.name + " " + this.$t("2010005")
      );
    },
    handleSuccess(res, file) {
      if (res.ret == 1) {
        this.search();
        this.$Message.success(this.$t("950398"));
      } else {
        if (("" + res.msg).indexOf(",") != -1) {
          inittip(res.msg);
        } else {
          this.$Message.error(this.$t("" + res.msg));
        }
      }
    },
    handleError() {
      this.$Message.error(this.$t("2010006") + "!");
    },
    add() {
      this.addmodal = true;
      this.add_gender = 1;
      this.loadimg = require("../../../static/images/xiangjitwo.png");
      this.add_sectionid = 0;
      this.add_usergroupid = 0;
      this.title1 = this.$t("1002");
    },
    edit() {
      if (
        JSON.stringify(this.obj) === "{}" ||
        this.obj === undefined ||
        this.obj === null
      ) {
        this.$Message.error(this.$t("1043"));
        return false;
      }
      this.editloadimg = require("../../../static/images/xiangjitwo.png");
      this.editobj = {};
      this.editmodal = true;
      this.getuser();
      this.title1 = this.$t("1003");
    },
    getuser() {
      axios
        .request({
          url: "/config/ProjectUser/GetProjectUserItem?id=" + this.obj.id,
          method: "get",
        })
        .then((res) => {
          this.editobj = res.data.data;
          this.editobj.password = "******";
          if (res.data.data.face !== "") {
            this.editloadimg = res.data.data.face;
          }
          axios
            .request({
              url:
                "/config/projectuser/GetUserUserGroup?sectionid=" +
                res.data.data.sectionid,
              method: "get",
            })
            .then((res) => {
              this.editusergroup = res.data.data;
            });
        });
    },
    Adddata() {
      var face = "";
      if (
        this.loadimg === require("../../../static/images/xiangjitwo.png") ||
        this.loadimg === ""
      ) {
        face = "";
      } else {
        face = this.loadimg;
      }
      if (this.add_Name === "") {
        this.$Message.error(this.$t("9100030"));
        return false;
      }
      if (this.add_sectionid === 0) {
        this.$Message.error(this.$t("9100000"));
        return false;
      }
      if (this.add_usergroupid === 0) {
        this.$Message.error(this.$t("9100001"));
        return false;
      }
      if (this.add_workcode === "") {
        this.$Message.error(this.$t("9000006"));
        return false;
      }
      if (this.add_password === "") {
        this.$Message.error(this.$t("9000007"));
        return false;
      }
      if (this.add_mobile === "") {
        this.$Message.error(this.$t("9000005"));
        return false;
      }
      var data = {
        name: this.add_Name,
        sex: this.add_gender,
        work_code: this.add_workcode,
        usergroupid: this.add_usergroupid,
        sectionid: this.add_sectionid,
        mobile: this.add_mobile,
        password: this.add_password,
        fixed_line: this.add_phone,
        email: this.add_email,
        rank: this.add_ic,
        create_time: this.add_create_time,
        face: face,
      };
      axios
        .request({
          url: "/config/ProjectUser/AddProjectUser",
          data,
          method: "post",
        })
        .then((res) => {
          if (res.data.ret === 1) {
            this.addmodal = false;
            this.add_Name = "";
            this.add_Sex = 0;
            this.add_workcode = "";
            this.sectionid = 0;
            this.add_mobile = "";
            this.add_password = "";
            this.add_phone = "";
            this.add_email = "";
            this.add_ic = "";
            this.add_hiredate = "";
            this.face = "";
            this.add_sectionid = 0;
            this.add_usergroupid = 0;
            this.add_create_time = "";
            this.$Message.success(this.$t("1055"));
            this.search();
          } else {
            this.$Message.error(this.$t(res.data.msg));
          }
        });
    },
    Editdata() {
      let data = this.editobj;
      if (data.name === "") {
        this.$Message.error(this.$t("9100030"));
        return false;
      }
      if (data.sectionid === 0) {
        this.$Message.error(this.$t("9100000"));
        return false;
      }
      if (data.usergroupid === 0) {
        this.$Message.error(this.$t("9100001"));
        return false;
      }
      if (data.work_code === "") {
        this.$Message.error(this.$t("9000006"));
        return false;
      }
      if (data.password === "") {
        this.$Message.error(this.$t("9000007"));
        return false;
      }
      if (data.mobile === "") {
        this.$Message.error(this.$t("9000005"));
        return false;
      }
      if (
        this.editloadimg === require("../../../static/images/xiangjitwo.png") ||
        this.editloadimg === ""
      ) {
        data.face = "";
      } else {
        data.face = this.editloadimg;
      }
      data.id = this.obj.id;
      data.email = this.editobj.work_email;
      axios
        .request({
          url: "/config/ProjectUser/EditProjectUser",
          data,
          method: "post",
        })
        .then((res) => {
          if (res.data.ret === 1) {
            this.editmodal = false;
            this.$Message.success(this.$t("1060"));
            this.search();
          } else {
            this.$Message.error(this.$t(res.data.msg));
          }
        });
    },
    dele() {
      if (
        this.selectids === undefined ||
        this.selectids.length <= 0 ||
        this.selectids === null
      ) {
        this.$Message.error(this.$t("1017"));
        return false;
      } else {
        var data = {
          ids: this.selectids,
        };
        this.$Modal.confirm({
          title: this.$t("1018"),
          content: "",
          width: "290px",
          closable: true,
          okText: this.$t("1004"),
          onOk: () => {
            axios
              .request({
                url: "/config/ProjectUser/DeleteProjectUsers",
                data,
                method: "post",
              })
              .then((res) => {
                if (res.data.ret === 1) {
                  // this.search()
                  this.selectids = [];
                  this.$Message.success(this.$t("1058"));
                  this.search();
                } else {
                  this.$Message.error(this.$t(res.data.msg));
                }
              });
          },
        });
      }
    },
    initdepartment() {
      axios
        .request({
          url: "/config/ProjectUser/getUserDepartment",
          method: "get",
        })
        .then((res) => {
          this.department = res.data.data;
        });
    },
    departmentchange() {
      axios
        .request({
          url:
            "/config/projectuser/GetUserUserGroup?sectionid=" + this.sectionid,
          method: "get",
        })
        .then((res) => {
          this.usergroup = res.data.data;
        });
    },
    add_departmentchange() {
      axios
        .request({
          url:
            "/config/projectuser/GetUserUserGroup?sectionid=" +
            this.add_sectionid,
          method: "get",
        })
        .then((res) => {
          this.addusergroup = res.data.data;
        });
    },
    edit_departmentchange() {
      axios
        .request({
          url:
            "/config/projectuser/GetUserUserGroup?sectionid=" +
            this.editobj.sectionid,
          method: "get",
        })
        .then((res) => {
          this.editusergroup = res.data.data;
        });
    },
    tosearch() {
      this.page = 1;
      // this.pagesize = 10
      this.search();
    },
    search() {
      var params = {
        page: this.page,
        pagesize: this.pagesize,
        name: this.truename,
        work_code: this.workcode,
        sectionid: this.sectionid,
        usergroupid: this.usergroupid,
        sex: this.sex,
      };
      axios
        .request({
          url: "/config/user/GetUsers",
          params,
          method: "get",
        })
        .then((res) => {
          this.total = res.data.total;
          this.mockTableData1(res.data.data);
        });
      this.obj = {};
    },
    mockTableData1(tablelist) {
      let data = [];
      tablelist.forEach((item) => {
        if (item) {
          data.push({
            id: item.id,
            name: item.name,
            sex: item.sex,
            work_code: item.work_code,
            sectiontitle: item.sectiontitle,
            usergrouptitle: item.usergrouptitle,
            mobile: item.mobile,
            fixed_line: item.fixed_line,
            work_email: item.work_email,
            rank: item.rank,
          });
        }
      });
      this.tableData = data;
    },
    loadexcel() {
      axios
        .request({
          url: "/config/download/GetTemplate?name=userlist",
          method: "get",
        })
        .then((res) => {
          if (res.data.ret === 1) {
            window.location.href = axios.publicPath + "" + res.data.data;
          } else {
            this.$Message.error(this.$t(res.data.msg));
          }
        });
    },
    downexcel() {
      var params = {
        category: "userlist",
        name: this.truename,
        work_code: this.workcode,
        sectionid: this.sectionid,
        usergroupid: this.usergroupid,
        sex: this.sex,
      };
      axios
        .request({
          url: "/config/user/ExportUsers",
          params,
          method: "get",
        })
        .then((res) => {
          if (res.data.ret === 1) {
            window.location.href = axios.publicPath + "" + res.data.data;
          } else {
            this.$Message.error(this.$t(res.data.msg));
          }
        });
    },
    handlePageSize(value) {
      this.pagesize = value;
      this.tableData = this.search();
    },
    changePage(value) {
      this.page = value;
      // The simulated data is changed directly here, and the actual usage scenario should fetch the data from the server
      this.tableData = this.search();
    },
    handleRowChange(currentRow, oldCurrentRow) {
      this.obj = currentRow;
    },
    handleSelectRow(data) {
      this.selectids = [];
      for (var i in data) {
        if (this.selectids.indexOf(data[i].id) < 0) {
          this.selectids.push(data[i].id);
        }
      }
    },
    generate() {
      const _this = this;
      let { obj } = this;
      if (JSON.stringify(obj) == "{}") {
        _this.$Message.error("请选择人员！");
        return false;
      }
      _this.generatePassword = "";
      _this.base64Text = "";
      _this.generateModal = true;
    },
    generatePreview() {
      const _this = this;
      let { generatePassword } = this;
      if (!generatePassword) {
        _this.$Message.error("请输入登录密码！");
        return false;
      }
      let params = {
        id: _this.obj.id,
      };
      _this.axios
        .request({
          url: "/config/ProjectUser/GetProjectUserItem",
          params,
          method: "get",
        })
        .then((res) => {
          let result = res.data;
          if (result.ret == 1) {
            let data = result.data;
            if (md5(_this.generatePassword) == data.password) {
              let text = {
                userName: String(_this.obj.mobile),
                password: String(_this.generatePassword),
              };
              text = Encrypt(JSON.stringify(text));
              _this.generateORCode("qrcode", text, 140, 140);
            } else {
              _this.$Message.error("抱歉，您的登录密码错误！");
            }
          }
        });
    },
    generateDownload() {
      const _this = this;
      let blob = getBlob(_this.base64Text); //将base64转换成blob对象
      if (navigator.msSaveBlob) {
        // IE的Blob保存方法
        navigator.msSaveBlob(blob, "人员二维码.png");
      } else {
        var link = document.createElement("a");
        var href = window.URL.createObjectURL(blob);
        link.href = href;
        link.download = "人员二维码.png"; //a标签的下载属性
        document.body.appendChild(link); // firefox需要把a添加到dom才能正确执行click
        link.click();
        // 延时保证下载成功执行，否则可能下载未找到文件的问题
        setTimeout(function () {
          window.URL.revokeObjectURL(href); // 释放Url对象
          document.body.removeChild(link);
        }, 100);
      }
      function getBlob(base64) {
        var mimeString = base64.split(",")[0].split(":")[1].split(";")[0]; // mime类型
        var byteString = atob(base64.split(",")[1]); //base64 解码
        var arrayBuffer = new ArrayBuffer(byteString.length); //创建缓冲数组
        var intArray = new Uint8Array(arrayBuffer); //创建视图
        for (var i = 0; i < byteString.length; i += 1) {
          intArray[i] = byteString.charCodeAt(i);
        }
        return new Blob([intArray], {
          type: mimeString,
        });
      }
    },
    // 生成二维码
    generateORCode(id, text, w, h) {
      // 清空区域内容
      document.getElementById(id).innerHTML = "";
      // 生成二维码
      let qrcode = new QRCode(id, {
        width: w,
        height: h,
        // 二维码内容
        text: text,
        // 前景色
        colorDark: "#000",
        // 背景色
        colorLight: "#fff",
        // 容错等级
        correctLevel: QRCode.CorrectLevel.L,
      });
      let canvas = qrcode._el.querySelector("canvas"); //获取生成二维码中的canvas，并将canvas转换成base64
      let base64Text = canvas.toDataURL("image/png");
      this.base64Text = base64Text;
    },
  },
};
</script>
