w
<template>
  <div class="app-container" v-loading="downloadLoading">
    <!--操作区-->
    <el-button
      type="primary"
      icon="el-icon-plus"
      @click="create"
      class="margin-left"
      >添加人员</el-button
    >
    <el-button
      type="primary"
      icon="el-icon-download"
      @click="download"
      class="margin-left"
      >下载模板</el-button
    >
    <a href="javascript:;" class="file"
      >批量导入<input
        type="file"
        name="file"
        ref="file"
        @change="upload($event)"
    /></a>
    <el-input
      v-model="page.data.name"
      placeholder="请输入姓名"
      class="margin-left input"
    ></el-input>
    <!-- <el-input
      v-model="page.data.eeeee"
      placeholder="请输入手机号"
      class="margin-left input"
    ></el-input> -->
    <el-input
      v-model="page.data.idNumber"
      placeholder="请输入身份证号"
      class="margin-left input"
    ></el-input>
    <el-select
      filterable
      clearable
      v-model="page.data.disinfectAreaId"
      placeholder="请选择区域"
      class="margin-left input"
    >
      <el-option
        v-for="item in xiaosha_area"
        :key="item.disinfectAreaId"
        :label="item.disinfectAreaName"
        :value="item.disinfectAreaId"
      >
      </el-option>
    </el-select>
    <el-select
      v-model="page.data.disinfectAuthId"
      clearable
      filterable
      placeholder="请选择权限"
      class="margin-left input"
    >
      <el-option
        v-for="item in permissions_list"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      >
      </el-option>
    </el-select>
    <el-button
      type="primary"
      icon="el-icon-search"
      @click="fetchData"
      class="margin-left"
      >搜索</el-button
    >
    <!--主表格-->
    <el-table
      class="table"
      ref="table_form"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="序号" align="center" width="80px">
        <template slot-scope="scope">
          {{ indexMethod(scope.$index) }}
        </template>
      </el-table-column>
      <el-table-column label="姓名" align="center">
        <template slot-scope="scope">
          {{ scope.row.name | matchNull }}
        </template>
      </el-table-column>
      <!-- <el-table-column label="手机号" align="center">
        <template slot-scope="scope">
          {{ scope.row.phone | matchNull }}
        </template>
      </el-table-column> -->
      <el-table-column label="身份证号" align="center">
        <template slot-scope="scope">
          {{ scope.row.idNumber | matchNull }}
        </template>
      </el-table-column>
      <el-table-column label="负责区域" align="center">
        <template slot-scope="scope">
          {{ scope.row.disinfectAreaNameStringList | matchNull }}
        </template>
      </el-table-column>
      <el-table-column label="权限" align="center">
        <template slot-scope="scope">
          <span
            v-for="(item, index) in scope.row.disinfectAuthList"
            :key="index"
          >
            <el-tag v-if="item == 1" effect="plain">巡查 </el-tag>
            <el-tag v-if="item == 2" effect="plain">检查 </el-tag>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.createTime | matchNull }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="" label="操作区" width="240">
        <template slot-scope="scope">
          <el-button
            type="danger"
            size="small"
            @click="deleteUser(scope.row.disinfectUserId)"
            >删除</el-button
          ><el-button type="primary" size="small" @click="update(scope.row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!--分页栏-->
    <pagination
      :total="total"
      :page.sync="page.pageNum"
      :limit.sync="page.pageSize"
      @pagination="fetchData"
    />
    <!--对话框-->
    <el-dialog
      :title="dialogTitle[dialogType]"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      width="800px"
    >
      <el-form
        :model="user_form"
        :rules="rules"
        ref="user_form"
        label-width="120px"
        label-position="left"
      >
        <div class="flex">
          <el-form-item label="姓名" prop="name" style="flex: 0.5">
            <el-input
              v-model="user_form.name"
              placeholder="请输入姓名"
            ></el-input>
          </el-form-item>

          <el-form-item label="身份证" prop="idNumber" style="flex: 0.5">
            <el-input
              v-model="user_form.idNumber"
              placeholder="请输入身份证"
            ></el-input>
          </el-form-item>
        </div>
        <div class="flex">
          <el-form-item
            label="人员权限"
            prop="disinfectAuthList"
            style="flex: 0.5"
          >
            <el-select
              v-model="user_form.disinfectAuthList"
              clearable
              filterable
              multiple
              placeholder="请选择人员权限"
              style="width: 100%"
            >
              <el-option
                v-for="item in permissions_list"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            style="flex: 0.5"
            label="绑定区域"
            prop="disinfectAreaIdList"
          >
            <el-select
              v-model="user_form.disinfectAreaIdList"
              clearable
              filterable
              multiple
              placeholder="请选择需要绑定的区域"
              style="width: 100%"
            >
              <el-option
                v-for="item in xiaosha_area"
                :key="item.disinfectAreaId"
                :label="item.disinfectAreaName"
                :value="item.disinfectAreaId"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false"> 取消 </el-button>
        <el-button type="primary" @click="doUpdateOrAdd"> 确定 </el-button>
      </div>
    </el-dialog>
    <!--错误返回-->
    <el-dialog
      title="提示"
      center
      :visible.sync="resultVisible"
      destroy-on-close
    >
      <el-table
        class="table"
        ref="table_form_result"
        v-loading="false"
        :data="result_list"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
        height="500"
      >
        <el-table-column label="错误序号" align="center" width="100px">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="错误描述" align="center">
          <template slot-scope="scope">
            {{ scope.row | matchNull }}
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="resultVisible = false">
          我已知晓
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import detailsDialog from "@/components/DialogDetails/index.vue";
import { uploadUserWhitelistExcel } from "@/api/ordinary_user";
import { checkRole } from "@/utils/checkRole";
import Pagination from "@/components/Pagination";
import BatchUpload from "@/components/BatchUpload";
import { doGetWhiteExcel } from "@/api/user_manage";
import {
  disinfectAreaGetList,
  disinfectUserDel,
  disinfectUserEdit,
  excelInput,
  disinfectUserList,
} from "@/api/xiaosha";

export default {
  components: { Pagination, detailsDialog, BatchUpload },
  filters: {
    matchNull(str) {
      if (!str) {
        return "未填写";
      } else {
        return str;
      }
    },
  },
  watch: {},
  data() {
    return {
      // 主表格&主表格加载状态
      list: null,
      listLoading: true,
      downloadLoading: false, //导出加载
      isOut: this.$store.getters.isOut, // 是否可以导出
      // 分页参数
      page: {
        data: {
          username: null,
          name: "",
          idNumber: "",
        },
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      xiaosha_area: [], //区域
      permissions_list: [
        //巡查权限
        {
          id: 1,
          name: "巡查",
        },
        {
          id: 2,
          name: "检查",
        },
      ], // 权限
      // 是否显示对话框
      dialogVisible: false,
      // 对话框标题
      dialogTitle: {
        add: "添加人员",
        update: "编辑人员",
      },
      dialogType: "add",
      // 添加账号参数
      user_form: {
        name: "",
        idNumber: "",
        disinfectAuthList: [],
        disinfectAreaIdList: [],
      },
      user_form_copy: {},
      // 验证规则
      rules: {
        name: [{ required: true, message: "请输入", trigger: "blur" }],
        idNumber: [{ required: true, message: "请输入", trigger: "blur" }],
        disinfectAuthList: [
          { required: true, message: "请选择", trigger: "blur" },
        ],
        disinfectAreaIdList: [
          { required: true, message: "请选择", trigger: "blur" },
        ],
      },
      // 是否显示提示
      showTooltip: false,
      // 批量导入结果返回
      resultVisible: false,
      result_list: [],
      doUpload: "",
    };
  },
  created() {
    this.fetchData();
    this.disinfectAreaGetList();
  },
  methods: {
    // 查询权限
    checkRole,
    // 获取列表数据
    fetchData() {
      this.listLoading = true;
      disinfectUserList(this.page).then((res) => {
        this.list = res.data.list;
        this.total = res.data.total;
        this.listLoading = false;
      });
    },
    // 巡查区域
    disinfectAreaGetList() {
      disinfectAreaGetList().then((res) => {
        this.xiaosha_area = res.data;
      });
    },
    // 打开添加对话框
    create() {
      this.dialogType = "add";
      this.user_form = JSON.parse(JSON.stringify(this.user_form_copy));
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs["user_form"].clearValidate();
      });
    },
    // 打开编辑
    update(row) {
      this.user_form = JSON.parse(JSON.stringify(row));
      this.dialogType = "update";
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs["user_form"].clearValidate();
      });
    },
    // 确定新增/编辑
    doUpdateOrAdd() {
      this.$refs["user_form"].validate((valid) => {
        if (valid) {
          disinfectUserEdit(this.user_form).then((res) => {
            this.dialogVisible = false;
            this.fetchData();
            this.$message({
              type: "success",
              message: "操作成功!",
            });
          });
        }
      });
    },
    // 删除账号
    deleteUser(id) {
      this.$confirm("确定要删除此人员吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      }).then(() => {
        disinfectUserDel(id).then((res) => {
          this.fetchData();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        });
      });
    },
    // 下载模板
    download() {
      window.location.href =
        process.env.VUE_APP_BASE_API + "/excel/disinfectUser.xlsx";
    },
    // 批量导入
    upload(e) {
      var files = e.currentTarget.files;
      if (!files.length) {
        return;
      }
      const loading = this.$loading({
        lock: true,
        text: "拼命导入中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      var formData = new FormData(); // 必需声明一个FormData对象
      formData.append("file", files[0]);
      excelInput(formData)
        .then((res) => {
          loading.close();
          this.fetchData();
          if (res.data.length > 0) {
            this.resultVisible = true;
            this.result_list = res.data;
          } else {
            this.$message({
              type: "success",
              message: "导入成功!",
            });
          }
        })
        .catch((err) => {
          loading.close();
          this.fetchData();
        });
    },
    // 返回列表序号
    indexMethod(index) {
      return (this.page.pageNum - 1) * this.page.pageSize + index + 1;
    },
  },
};
</script>

<style scoped lang="scss">
.table {
  margin-top: 15px;
}
.flex {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.margin-left {
  margin: 10px 0 0 10px;
}
.margin-left-s {
  margin-left: 15px;
}
.input {
  width: 200px;
}
/*批量导入按钮*/
.file {
  margin: 10px 0 0 10px;
  position: relative;
  background: #d0eeff;
  border: 1px solid #99d3f5;
  border-radius: 4px;
  padding: 10px 20px;
  box-sizing: border-box;
  overflow: hidden;
  color: #1e88c7;
  text-decoration: none;
  text-indent: 0;
}
.file input {
  position: absolute;
  font-size: 14px;
  width: 106px;
  height: 40px;
  left: 0;
  top: 0;
  opacity: 0;
  cursor: pointer;
}
.file:hover {
  background: #aadffd;
  border-color: #78c3f3;
  color: #004974;
  text-decoration: none;
}
.avatar {
  /* width: 100px; */
  height: 100px;
}
.button-last {
  z-index: 9999;
}
.text-color {
  color: #000;
}
.batchVisible {
  ::v-deep .el-dialog__body {
    padding-top: 0;
  }
}
.text-color {
  color: #b9becb;
  font-size: 13px;
  line-height: 20px;
}
.pictre-rules {
  cursor: pointer;
  display: inline-block;
  padding: 0px 12px;
  background: #edf3ff;
  border-radius: 3px;
  margin: 0 4.5px 22px;
}
.color-gray {
  color: #b9becb;
}
.color-red {
  color: #ff7b7b;
  display: inline-block;
  background: rgba(237, 243, 255, 0.92);
  border-radius: 3px;
  padding: 5px 15px;
  line-height: 33px;
  text-align: center;
  cursor: pointer;
}
// 批量注册人员按钮
.file1 {
  margin: 0 0 0 5px;
}
.el-tag {
  margin-left: 12px;
}
</style>

