HM21St_Page_Manager/src/views/organize_manage/PersonList.vue

<template>
  <div class="manage-root organize-manage person-list conversion-code">
    <Header />
    <div class="manage-root-contain">
      <nav-menu
        class="manage-root-contain-left"
        :activeMenuIndex="activeMenuIndex"
      ></nav-menu>
      <div class="manage-root-contain-right personnel-manage-right">
        <breadcrumb
          :breadcrumbList="breadcrumbList"
          class="breadcrumb-box"
        ></breadcrumb>
        <div class="personal-inner" v-if="info">
          <div class="common-title-box">
            <h3>
              {{ info.name
              }}<span class="total-number"
                >共{{ info.person_count_audited }}人</span
              >
            </h3>
            <div class="btn-box">
              <el-button
                type="primary"
                size="small"
                @click="handleExportFile"
                :loading="exportFileLoading"
                >导出用户数据</el-button
              >
              <el-button
                type="primary"
                size="small"
                @click="handleBatchImport('white')"
                >上传白名单</el-button
              >
              <el-button
                type="primary"
                size="small"
                @click="handleBatchImport('')"
                >批量导入</el-button
              >
            </div>
          </div>
          <div class="tabs">
            <a
              :class="[tabsIndex === 0 ? 'active' : '']"
              @click="handleChangeTabs(0)"
              >人员列表</a
            >
            <a
              :class="[tabsIndex === 1 ? 'active' : '']"
              @click="handleChangeTabs(1)"
              >人员审核 {{ info.person_count_wait_audit }}</a
            >
            <a
              :class="[tabsIndex === 2 ? 'active' : '']"
              @click="handleChangeTabs(2)"
              >兑换码
            </a>
            <a
              :class="[tabsIndex === 3 ? 'active' : '']"
              @click="handleChangeTabs(3)"
              >白名单</a
            >
          </div>
          <div class="search">
            <div class="search-box" v-if="tabsIndex !== 2">
              <div class="search-item">
                <label>搜索</label>
                <el-input
                  placeholder="输入搜索内容"
                  v-model="searchInput"
                  maxlength="200"
                >
                  <i
                    slot="suffix"
                    class="el-input__icon el-icon-search"
                    @click="getList(1)"
                    style="cursor: pointer"
                  ></i>
                </el-input>
              </div>
              <div
                class="search-item"
                v-if="tabsIndex === 0 || tabsIndex === 1"
              >
                <label>权限</label>
                <el-select
                  v-model="searchType"
                  @change="getList(1)"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in typeList"
                    :key="item.account_type"
                    :label="item.account_type_name"
                    :value="item.account_type"
                  >
                  </el-option>
                </el-select>
              </div>
              <div class="search-item" v-if="tabsIndex === 0">
                <label>状态</label>
                <el-select
                  v-model="searchStatus"
                  @change="getList(1)"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in $searchStatusList"
                    :key="item.status"
                    :label="item.status_name"
                    :value="item.status"
                  >
                  </el-option>
                </el-select>
              </div>
              <div class="search-item" v-if="tabsIndex === 1">
                <label>状态</label>
                <el-select
                  v-model="searchAuditStatus"
                  @change="getList(1)"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in searchAuditStatusList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
            <div class="search-right" v-if="tabsIndex === 0">
              <el-button
                class="gray-btn"
                size="small"
                @click="handleUp('', 'up', multipleSelection)"
                >开启选中用户</el-button
              >
              <el-button
                class="pink-btn"
                size="small"
                @click="handleUp('', 'down', multipleSelection)"
                >停用选中用户</el-button
              >
              <el-button
                class="red-btn"
                size="small"
                @click="handleDelete('', multipleSelection)"
                >删除选中用户</el-button
              >
            </div>
            <div class="search-right" v-if="tabsIndex === 1">
              <el-button
                class="gray-btn"
                size="small"
                @click="handleAudit('', 'up', multipleSelection)"
                >同意选中用户</el-button
              >
              <el-button
                class="pink-btn"
                size="small"
                @click="handleAudit('', 'down', multipleSelection)"
                >拒绝选中用户</el-button
              >
            </div>
            <div class="search-right" v-if="tabsIndex === 2">
              <el-input
                placeholder="输入兑换码"
                v-model="inputValue"
                class="input-with-btn"
                maxlength="20"
              >
                <el-button
                  slot="append"
                  @click="handleExchange"
                  :loading="loading"
                  >兑换</el-button
                >
              </el-input>
            </div>
          </div>
          <template v-if="tabsIndex === 0">
            <el-table
              class="search-table"
              :data="tableData"
              style="width: 100%"
              key="table"
              @sort-change="handleSort"
              :default-sort="dataSort"
              :max-height="tableHeight"
              @selection-change="handleSelectionChange"
              v-loading="tableLoading"
            >
              <el-table-column type="selection" width="40" fixed>
              </el-table-column>
              <el-table-column
                prop="user_name"
                label="用户名"
                sortable="custom"
                min-width="132"
                class-name="user-info"
              >
                <template slot-scope="scope">
                  <el-image
                    class="touxiang"
                    :src="
                      scope.row.image_url
                        ? scope.row.image_url
                        : require('../../assets/avatar.png')
                    "
                    fit="cover"
                    style="width: 24px; height: 24px; margin-right: 8px"
                  >
                  </el-image>
                  <!-- <img class="touxiang" :src="scope.row.image_url?scope.row.image_url:require('../../assets/avatar.png')" /> -->
                  <span class="name">{{ scope.row.user_name }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="real_name" label="真实姓名" width="103">
              </el-table-column>
              <el-table-column prop="sex_name" label="性别" width="56">
              </el-table-column>
              <el-table-column prop="type" label="权限" width="88">
                <template slot-scope="scope">
                  {{ scope.row.is_manager === "true" ? "管理员" : "普通用户" }}
                </template>
              </el-table-column>
              <el-table-column
                prop="email"
                label="邮箱"
                sortable="custom"
                min-width="180"
              >
              </el-table-column>
              <el-table-column
                prop="phone"
                label="手机号"
                sortable="custom"
                width="160"
              >
              </el-table-column>
              <el-table-column
                prop="register_time"
                label="注册时间"
                sortable="custom"
                width="144"
              >
                <template slot-scope="scope">
                  {{
                    scope.row.register_time
                      ? scope.row.register_time.substring(0, 16)
                      : "-"
                  }}
                </template>
              </el-table-column>
              <el-table-column prop="status" label="状态" width="116">
                <template slot-scope="scope">
                  <div class="status-box">
                    <span
                      :style="{ background: statusList[scope.row.status].bg }"
                    ></span>
                    <b :style="{ color: statusList[scope.row.status].color }">{{
                      statusList[scope.row.status].text
                    }}</b>
                  </div>
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="140">
                <template slot-scope="scope">
                  <el-button
                    @click.native.prevent="handleEdit(scope.row)"
                    type="text"
                    size="small"
                    class="primary-btn"
                  >
                    编辑
                  </el-button>
                  <el-button
                    @click.native.prevent="handleUp(scope.row, 'up')"
                    type="text"
                    size="small"
                    class="primary-btn"
                    v-if="scope.row.status === 0"
                  >
                    开启
                  </el-button>
                  <el-button
                    @click.native.prevent="handleUp(scope.row, 'down')"
                    type="text"
                    size="small"
                    class="red-btn"
                    v-else-if="scope.row.status === 1"
                  >
                    停用
                  </el-button>
                  <el-button
                    @click.native.prevent="handleDelete(scope.row)"
                    type="text"
                    size="small"
                    class="red-btn"
                    v-if="scope.row.status === 0"
                  >
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              key="pagination"
              background
              @size-change="
                (val) => handleSizeChange(val, 'pageSize', 'pageNumber')
              "
              @current-change="(val) => handleCurrentChange(val, 'pageNumber')"
              :current-page="pageNumber"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize"
              layout="total, prev, pager, next, sizes, jumper"
              :total="total_count"
            >
            </el-pagination>
          </template>
          <template v-if="tabsIndex === 1">
            <el-table
              class="search-table"
              :data="tableData"
              style="width: 100%"
              :max-height="tableHeight"
              key="auditTable"
              @sort-change="handleSort"
              :default-sort="dataSorts"
              @selection-change="handleSelectionChange"
              v-loading="tableLoading"
            >
              <el-table-column type="selection" width="40" fixed>
              </el-table-column>
              <el-table-column
                prop="user_name"
                label="用户名"
                sortable="custom"
                min-width="132"
                class-name="user-info"
              >
                <template slot-scope="scope">
                  <el-image
                    class="touxiang"
                    :src="
                      scope.row.image_url
                        ? scope.row.image_url
                        : require('../../assets/avatar.png')
                    "
                    fit="cover"
                    style="width: 24px; height: 24px; margin-right: 8px"
                  >
                  </el-image>
                  <!-- <img class="touxiang" :src="scope.row.image_url?scope.row.image_url:require('../../assets/avatar.png')" /> -->
                  <span class="name">{{ scope.row.user_name }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="real_name" label="真实姓名" width="103">
              </el-table-column>
              <el-table-column prop="sex_name" label="性别" width="56">
              </el-table-column>
              <el-table-column
                prop="email"
                label="邮箱"
                sortable="custom"
                min-width="180"
              >
              </el-table-column>
              <el-table-column
                prop="phone"
                label="手机号"
                sortable="custom"
                width="160"
              >
              </el-table-column>
              <el-table-column
                prop="apply_time"
                label="申请时间"
                sortable="custom"
                width="144"
              >
                <template slot-scope="scope">
                  {{
                    scope.row.apply_time
                      ? scope.row.apply_time.substring(0, 16)
                      : "-"
                  }}
                </template>
              </el-table-column>
              <el-table-column
                prop="audit_time"
                label="审核时间"
                sortable="custom"
                width="144"
              >
                <template slot-scope="scope">
                  {{
                    scope.row.audit_time
                      ? scope.row.audit_time.substring(0, 16)
                      : "-"
                  }}
                </template>
              </el-table-column>
              <el-table-column prop="status" label="状态" width="116">
                <template slot-scope="scope">
                  <div
                    class="status-box"
                    v-if="auditStatusList[scope.row.audit_status]"
                  >
                    <span
                      :style="{
                        background: auditStatusList[scope.row.audit_status].bg,
                      }"
                    ></span>
                    <b
                      :style="{
                        color: auditStatusList[scope.row.audit_status].color,
                      }"
                      >{{ auditStatusList[scope.row.audit_status].text }}</b
                    >
                  </div>
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="140">
                <template slot-scope="scope">
                  <el-button
                    @click.native.prevent="handleLook(scope.row)"
                    type="text"
                    size="small"
                    class="primary-btn"
                  >
                    查看
                  </el-button>
                  <el-button
                    @click.native.prevent="handleAudit(scope.row, 'up')"
                    type="text"
                    size="small"
                    class="primary-btn"
                  >
                    同意
                  </el-button>
                  <el-button
                    @click.native.prevent="handleAudit(scope.row, 'down')"
                    type="text"
                    size="small"
                    class="red-btn"
                    v-if="scope.row.audit_status === 0"
                  >
                    拒绝
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              background
              key="auditpagination"
              @size-change="
                (val) => handleSizeChange(val, 'pageSizes', 'pageNumbers')
              "
              @current-change="(val) => handleCurrentChange(val, 'pageNumbers')"
              :current-page="pageNumbers"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSizes"
              layout="total, prev, pager, next, sizes, jumper"
              :total="total_count"
            >
            </el-pagination>
          </template>
          <template v-if="tabsIndex === 2">
            <el-table
              :data="tableData"
              v-loading="tableLoading"
              :max-height="tableHeight"
              style="width: 100%"
              key="2"
            >
              <el-table-column type="expand">
                <template slot-scope="props">
                  <el-form
                    label-position="left"
                    inline
                    class="demo-table-expand"
                  >
                    <el-form-item>
                      <h3 class="content-title">兑换内容</h3>
                      <div
                        class="content-list"
                        v-for="(itemC, indexC) in props.row.goods_list"
                        :key="indexC"
                      >
                        <span>{{ indexC + 1 + "." }}</span>
                        <b>{{ itemC.goods_name }}</b>
                      </div>
                    </el-form-item>
                  </el-form>
                </template>
              </el-table-column>
              <el-table-column
                type="index"
                label="#"
                sortable
                width="54"
                :index="(pageNumber - 1) * pageSize + 1"
              >
              </el-table-column>
              <el-table-column
                label="名称"
                prop="discount_code_name"
                width="300"
              >
              </el-table-column>
              <el-table-column label="兑换码" prop="discount_code" width="300">
              </el-table-column>
              <el-table-column label="绑定时间" prop="bind_time">
              </el-table-column>
              <el-table-column prop="use_status" label="状态" width="116">
                <template slot-scope="scope">
                  <div
                    class="status-box"
                    v-if="codeStatusList[scope.row.use_status]"
                  >
                    <span
                      :style="{
                        background: codeStatusList[scope.row.use_status].color,
                      }"
                    ></span>
                    <b
                      :style="{
                        color: codeStatusList[scope.row.use_status].color,
                      }"
                      >{{ codeStatusList[scope.row.use_status].text }}</b
                    >
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              background
              key="2"
              @size-change="
                (val) => handleSizeChange(val, 'pageSizeD', 'pageNumberD')
              "
              @current-change="(val) => handleCurrentChange(val, 'pageNumberD')"
              :current-page="pageNumberD"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSizes"
              layout="total, prev, pager, next, sizes, jumper"
              :total="total_count"
            >
            </el-pagination>
          </template>
          <template v-if="tabsIndex === 3">
            <el-table
              class="search-table"
              :data="tableData"
              style="width: 100%"
              :max-height="tableHeight"
              key="3"
              @sort-change="handleSort"
              :default-sort="dataSorts"
              v-loading="tableLoading"
            >
              <el-table-column
                prop="real_name"
                label="真实姓名"
                sortable="custom"
              >
              </el-table-column>
              <el-table-column prop="phone" label="手机号"> </el-table-column>
            </el-table>
            <el-pagination
              background
              key="3"
              @size-change="
                (val) => handleSizeChange(val, 'pageSizeW', 'pageNumberW')
              "
              @current-change="(val) => handleCurrentChange(val, 'pageNumberW')"
              :current-page="pageNumberW"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSizes"
              layout="total, prev, pager, next, sizes, jumper"
              :total="total_count"
            >
            </el-pagination>
          </template>
        </div>
      </div>
    </div>
    <el-dialog
      :visible.sync="importFlag"
      :show-close="false"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      width="398px"
      class="login-dialog person-dialog"
      v-if="importFlag"
    >
      <batch-import
        @closeDialog="closeDialog"
        :exportUrl="exportUrl"
        :type="type"
      ></batch-import>
    </el-dialog>
  </div>
</template>

<script>
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》from ‘《组件路径》';
import Header from "../../components/Header.vue";
import NavMenu from "../../components/NavMenu.vue";
import Breadcrumb from "../../components/Breadcrumb.vue";
import BatchImport from "./BatchImport.vue";
import { getLogin } from "@/api/ajax";
import { mapState } from "vuex";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: { Header, NavMenu, Breadcrumb, BatchImport },
  props: {},
  data() {
    //这里存放数据
    return {
      activeMenuIndex: "organize_manage",
      breadcrumbList: [
        {
          icon: "school-line",
          url: "",
          text: "",
        },
        {
          icon: "",
          url: "",
          text: "机构管理",
        },
      ],
      searchInput: "",
      searchType: -1,
      searchStatus: -1,
      searchAuditStatus: -1,
      typeList: [
        {
          account_type: -1,
          account_type_name: "全部",
        },
        {
          account_type: 1,
          account_type_name: "管理员",
        },
        {
          account_type: 0,
          account_type_name: "普通用户",
        },
      ],
      searchAuditStatusList: [
        {
          value: -1,
          label: "全部",
        },
        {
          value: 0,
          label: "待审核",
        },
        {
          value: 2,
          label: "已拒绝",
        },
      ],
      statusList: {
        1: {
          text: "正常",
          bg: "#165DFF",
          color: "",
        },
        0: {
          text: "停用",
          bg: "#F53F3F",
          color: "#F53F3F",
        },
      },
      auditStatusList: {
        0: {
          text: "待审核",
          bg: "#165DFF",
          color: "",
        },
        2: {
          text: "已拒绝",
          bg: "#F53F3F",
          color: "#F53F3F",
        },
      },
      codeStatusList: {
        0: {
          text: "未使用",
          color: "#FF7D00",
        },
        1: {
          text: "已使用",
          color: "#165DFF",
        },
        2: {
          text: "已撤回",
          color: "rgb(245, 63, 63)",
        },
      },
      tableData: [],
      pageSize: window.localStorage.getItem("pageSizec")
        ? Number(window.localStorage.getItem("pageSize-people"))
        : 10,
      pageNumber: window.localStorage.getItem("pageNumber-people")
        ? Number(window.localStorage.getItem("pageNumber-people"))
        : 1,
      tableHeight: "", // 表格高度
      orgName: "", // 机构名称
      id: this.$route.query.id ? this.$route.query.id : "",
      multipleSelection: [],
      tabsIndex: 0,
      pageSizes: window.localStorage.getItem("pageSize-check")
        ? Number(window.localStorage.getItem("pageSize-check"))
        : 10,
      pageNumbers: window.localStorage.getItem("pageNumber-check")
        ? Number(window.localStorage.getItem("pageNumber-check"))
        : 1,
      pageSizeW: 10,
      pageNumberW: 1,
      pageSizeD: 10,
      pageNumberD: 1,
      importFlag: false, // 批量导入flag
      info: null,
      total_count: 0,
      dataSort: {},
      dataSorts: {},
      exportUrl: "", // 下载模板链接
      tableLoading: false,
      exportFileLoading: false,
      timer: null,
      type: "",
      inputValue: "",
      loading: false,
    };
  },
  //计算属性 类似于data概念
  computed: {
    ...mapState(["$searchStatusList"]),
  },
  //监控data中数据变化
  watch: {},
  //方法集合
  methods: {
    handleSort(value) {
      let dataSort = {
        prop: value.prop,
        order: value.order,
      };
      if (this.tabsIndex === 0) {
        this.dataSort = dataSort;
      } else {
        this.dataSorts = dataSort;
      }
      this.getList();
    },
    // 查询列表
    getList(page) {
      this.tableLoading = true;
      if (page) {
        if (this.tabsIndex === 0) {
          this.pageNumber = page;
        } else if (this.tabsIndex === 1) {
          this.pageNumbers = page;
        } else if (this.tabsIndex === 2) {
          this.pageNumberD = page;
        } else if (this.tabsIndex === 3) {
          this.pageNumberW = page;
        }
      }
      this.getInfo();
      if (this.tabsIndex === 2) {
        this.getListDis(page);
        return;
      }
      let MethodName = "/OrgServer/Manager/PageQuery/PageQueryPersonList";
      let order_column_list = [];
      if (this.tabsIndex === 0) {
        if (this.dataSort != {}) {
          if (this.dataSort.order == "descending") {
            order_column_list = [this.dataSort.prop + ":desc"];
          } else if (this.dataSort.order == "ascending") {
            // 升序不传值
            order_column_list = [this.dataSort.prop];
          } else {
            order_column_list = ["register_time:desc"];
          }
        } else {
          order_column_list = ["register_time:desc"];
        }
      } else {
        if (this.dataSorts != {}) {
          if (this.dataSorts.order == "descending") {
            order_column_list = [this.dataSorts.prop + ":desc"];
          } else if (this.dataSorts.order == "ascending") {
            // 升序不传值
            order_column_list = [this.dataSorts.prop];
          } else {
            order_column_list = ["apply_time:desc"];
          }
        } else {
          order_column_list = ["apply_time:desc"];
        }
      }

      let data = {
        org_id: this.id,
        search_content: this.searchInput.trim(),
        role_type: this.searchType,
        status: this.tabsIndex === 0 ? this.searchStatus : -1,
        audit_status: this.tabsIndex === 1 ? this.searchAuditStatus : -1,
        page_capacity: this.tabsIndex === 0 ? this.pageSize : this.pageSizes,
        cur_page: this.tabsIndex === 0 ? this.pageNumber : this.pageNumbers,
        list_type: this.tabsIndex * 1,
        order_column_list: order_column_list,
      };
      if (this.tabsIndex === 3) {
        MethodName = "/OrgServer/Manager/PageQuery/PageQueryPersonWhiteList";
        data = {
          org_id: this.id,
          search_content: this.searchInput.trim(),
          page_capacity: this.pageSizeW,
          cur_page: this.pageNumberW,
          order_column_list: order_column_list,
        };
      }
      getLogin(MethodName, data)
        .then((res) => {
          this.tableLoading = false;
          if (res.status === 1) {
            this.tableData = res.person_list;
            this.total_count = res.total_count;
          }
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },
    // 创建机构或者编辑信息
    handleEdit(row) {
      // 根据登录用户判断当前用户是不是超管 在table里加上disabled

      // 点击时记录页码和每页条数
      window.localStorage.setItem("pageSize-people", this.pageSize);
      window.localStorage.setItem("pageNumber-people", this.pageNumber);
      this.$router.push({
        path: "/editOrgPerson",
        query: {
          id: row ? row.id : "",
        },
      });
    },
    // 人员管理
    handleLook(row) {
      window.localStorage.setItem("pageSize-check", this.pageSizes);
      window.localStorage.setItem("pageNumber-check", this.pageNumbers);
      this.$router.push({
        path: "/editOrgPerson",
        query: {
          id: row ? row.id : "",
          page: "personCheck",
        },
      });
    },
    // 停用 启用
    handleUp(row, type, arr) {
      if (!row && arr.length === 0) {
        return false;
      }
      let Mname = "/OrgServer/Manager/PersonManager/EnablePerson";
      let data = {
        id_list: arr ? arr : [row.id],
      };
      if (type === "up") {
        // 下架状态
        data.is_enable = "true";
      } else if (type === "down") {
        data.is_enable = "false";
      }
      getLogin(Mname, data).then((res) => {
        this.getList();
        this.$message({
          message: "操作成功",
          type: "success",
          duration: 3000,
        });
      });
    },
    // 通过 拒绝
    handleAudit(row, type, arr) {
      if (!row && arr.length === 0) {
        return false;
      }
      let Mname = "/OrgServer/Manager/PersonManager/AuditPerson";
      let data = {
        id_list: arr ? arr : [row.id],
      };
      if (type === "up") {
        // 下架状态
        data.is_pass = "true";
      } else if (type === "down") {
        data.is_pass = "false";
      }
      getLogin(Mname, data).then((res) => {
        this.getList();
        this.$message({
          message: "操作成功",
          type: "success",
          duration: 3000,
        });
      });
    },
    handleSizeChange(val, type, page) {
      this[type] = val;
      this[page] = 1;
      this.getList();
    },
    handleCurrentChange(val, type) {
      this[type] = val;
      this.getList();
    },
    //计算table高度(动态设置table高度)
    getTableHeight() {
      let tableH = 434; //距离页面下方的高度
      let tableHeightDetil = window.innerHeight - tableH;
      if (tableHeightDetil <= 300) {
        this.tableHeight = 300;
      } else {
        this.tableHeight = window.innerHeight - tableH;
      }
    },
    // 删除
    handleDelete(row, arr) {
      if (!row && arr.length === 0) {
        return false;
      }
      this.$confirm("确定删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let Mname = "/OrgServer/Manager/PersonManager/BatchDeleteOrgPerson";
          let data = {
            org_id: this.id,
            person_id_list: arr ? arr : [row.id],
          };
          getLogin(Mname, data).then((res) => {
            this.$message.success("删除成功");
            this.getList();
          });
        })
        .catch(() => {});
    },
    // 复选框
    handleSelectionChange(val) {
      this.multipleSelection = [];
      val.forEach((item) => {
        this.multipleSelection.push(item.id);
      });
    },
    handleChangeTabs(value) {
      this.tabsIndex = value;
      // this.pageNumber = 1
      this.getList();
    },
    // 批量导入
    handleBatchImport(type) {
      this.type = type;
      this.importFlag = true;
    },
    // 关闭批量导入
    closeDialog() {
      this.importFlag = false;
      this.getList();
    },
    // 获取机构信息
    getInfo() {
      let MethodName = "/OrgServer/Manager/OrgManager/GetOrgTitleInfo";
      let data = {
        id: this.id,
      };
      getLogin(MethodName, data)
        .then((res) => {
          if (res.status === 1) {
            this.info = res;
            let obj = {
              icon: "",
              url: "",
              text: res.name,
            };
            this.breadcrumbList = [
              {
                icon: "school-line",
                url: "",
                text: "",
              },
              {
                icon: "",
                url: "",
                text: "机构管理",
              },
            ];
            this.breadcrumbList.push(obj);
            let _this = this;
            setTimeout(() => {
              let input = document.querySelector("input");
              input.addEventListener("keyup", function (event) {
                // 判断是否按下回车键
                if (event.keyCode === 13) {
                  // 回车键被按下，执行你想要的操作
                  _this.getList(1);
                }
              });
            }, 500);
          }
        })
        .catch(() => {});
      getLogin(
        "/OrgServer/Manager/SysConfigManager/GetSysConfig_DataImport",
        {}
      )
        .then((res) => {
          if (res.status === 1) {
            this.exportUrl = res.person_data_import_template_file_url;
          }
        })
        .catch((res) => {});
    },
    // 导出用户数据
    handleExportFile() {
      this.exportFileLoading = true;
      let MethodName =
        "/ShopServer/Manager/FileExport/StartCreatePersonStatDataExportFile";
      let order_column_list = [];
      if (this.tabsIndex === 1) {
        if (this.dataSorts != {}) {
          if (this.dataSorts.order == "descending") {
            order_column_list = [this.dataSorts.prop + ":desc"];
          } else if (this.dataSorts.order == "ascending") {
            // 升序不传值
            order_column_list = [this.dataSorts.prop];
          } else {
            order_column_list = ["apply_time:desc"];
          }
        } else {
          order_column_list = ["apply_time:desc"];
        }
      } else {
        if (this.dataSort != {}) {
          if (this.dataSort.order == "descending") {
            order_column_list = [this.dataSort.prop + ":desc"];
          } else if (this.dataSort.order == "ascending") {
            // 升序不传值
            order_column_list = [this.dataSort.prop];
          } else {
            order_column_list = ["register_time:desc"];
          }
        } else {
          order_column_list = ["register_time:desc"];
        }
      }

      let data = {
        org_id: this.id,
        search_content: this.searchInput.trim(),
        status: this.tabsIndex === 0 ? this.searchStatus : -1,
        audit_status: this.tabsIndex === 1 ? this.searchAuditStatus : -1,
        page_capacity: this.tabsIndex === 0 ? this.pageSize : this.pageSizes,
        cur_page: this.tabsIndex === 0 ? this.pageNumber : this.pageNumbers,
        list_type: this.tabsIndex * 1,
        order_column_list: order_column_list,
      };
      getLogin(MethodName, data)
        .then((res) => {
          if (res.status === 1) {
            this.timer = setInterval(() => {
              getLogin(
                "/ShopServer/Manager/FileExport/GetPersonStatDataExportFileTaskProgress",
                {
                  export_file_task_id: res.export_file_task_id,
                }
              ).then((res) => {
                if (res.status === 1) {
                  if (
                    res.is_exist_task === "true" &&
                    res.is_interrupt === "false"
                  ) {
                    if (res.is_finish === "true") {
                      this.exportFileLoading = false;
                      clearInterval(this.timer);
                      window.open(res.export_file_url);
                    }
                  } else {
                    this.exportFileLoading = false;
                    clearInterval(this.timer);
                    this.$message.warning("导出任务不存在，请重新导出");
                  }
                }
              });
            }, 2000);
          }
        })
        .catch(() => {});
    },
    // 兑换
    handleExchange() {
      this.loading = true;
      let MethodName =
        "/ShopServer/Manager/DiscountCodeManager/BindDiscountCodeToOrg";
      let data = {
        discount_code: this.inputValue.trim(),
        org_id: this.id,
      };
      getLogin(MethodName, data)
        .then((res) => {
          this.loading = false;
          if (res.status === 1) {
            this.$message.success("兑换成功");
            this.getList(1);
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    getListDis(val) {
      this.tableLoading = true;
      if (val) {
        this.pageNumberD = val;
      }
      let MethodName =
        "/ShopServer/Manager/DiscountCodeManager/PageQueryOrgBindDiscountCodeList";
      let data = {
        page_capacity: this.pageSizeD,
        cur_page: this.pageNumberD,
        org_id: this.id,
      };
      getLogin(MethodName, data)
        .then((res) => {
          this.tableLoading = false;
          if (res.status === 1) {
            this.tableData = res.order_list;
            this.total_count = res.total_count;
          }
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getTableHeight();
    if (this.id) {
      this.getList();
    }
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //生命周期-创建之前
  beforeCreated() {},
  //生命周期-挂载之前
  beforeMount() {},
  //生命周期-更新之前
  beforUpdate() {},
  //生命周期-更新之后
  updated() {},
  //生命周期-销毁之前
  beforeDestory() {},
  //生命周期-销毁完成
  destoryed() {},
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */

.total-number {
  color: #86909c;
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  margin-left: 4px;
}
.tabs {
  display: flex;
  padding: 16px 0;
  a {
    font-size: 14px;
    line-height: 22px;
    color: #4e5969;
    border-radius: 100px;
    padding: 5px 16px;
    margin-right: 12px;
    &:hover {
      background: #f2f3f5;
    }
    &.active {
      background: #f2f3f5;
      font-weight: 500;
      color: #165dff;
    }
  }
}
.search {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.search-box {
  padding-top: 0;
}
.search-right {
  height: 34px;
  button {
    font-size: 14px;
  }
  .gray-btn {
    cursor: pointer;
  }
  .pink-btn {
    background: #ffece8;
    color: #f53f3f;
    border-color: #ffece8;
    &:hover {
      background: #fde0da;
      border-color: #fde0da;
    }
    &:focus {
      background: #f8cfc6;
      border-color: #f8cfc6;
    }
  }
  .red-btn {
    background: #f53f3f;
    color: #fff;
    border-color: #f53f3f;
    &:hover {
      background: #ed3b3b;
    }
    &:focus {
      background: #ec1111;
    }
  }
}
.conversion-code {
  background: #ffffff;
  border-radius: 4px;
  // padding: 24px;
  h2 {
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;
    color: #1d2129;
    margin: 0;
  }
  .el-table {
    margin: 24px 0;
  }
  .el-pagination {
    text-align: right;
  }
  .input-with-btn {
    margin-top: 16px;
    width: 290px;
  }
  .content-title {
    font-weight: 500;
    font-size: 14px;
    line-height: 22px;
    color: #000000;
    margin: 4px 24px;
  }
  .content-list {
    padding: 4px 24px;
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    color: #2f3742;
    display: flex;
    span {
      width: 22px;
      display: block;
      flex-shrink: 0;
    }
    b {
      flex: 1;
      font-weight: 400;
    }
  }
}
</style>
<style lang="scss">
.organize-manage {
  .el-cascader {
    width: 160px;
    height: 32px;
    line-height: 32px;
    .el-input {
      width: 100%;
      height: 32px;
    }
  }
}
.person-dialog {
  .el-dialog {
    border-radius: 8px;
  }
}
.person-list {
  .user-info {
    .cell {
      display: flex;
      align-items: center;
      .touxiang {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        margin-right: 8px;
      }
    }
  }
}
.conversion-code {
  .el-table__expanded-cell:hover {
    background: #f7f8fa !important;
  }
  .el-form-item {
    margin-bottom: 0;
  }
  .el-table__expand-column {
    .el-icon-arrow-right:before {
      content: "";
      background: url("../../assets/icon-right.png") center no-repeat;
      background-size: cover;
      width: 16px;
      height: 16px;
      display: block;
    }
    .el-table__expand-icon > .el-icon {
      margin-left: -4px;
      margin-top: -7px;
    }
  }
  .el-table__expand-icon--expanded {
    transform: none;
    .el-icon-arrow-right:before {
      content: "";
      background: url("../../assets/icon-down.png") center no-repeat;
      background-size: cover;
      width: 16px;
      height: 16px;
      display: block;
    }
  }
  .input-with-btn {
    .el-input__inner {
      height: 32px;
      color: #1d2129;
      background: #f2f3f5;
      border: none;
    }
    .el-input-group__append {
      border: none;
      width: 52px;
      background: #f2f3f5;
      border-left: 1px solid #e5e6eb;
      padding: 0;
      text-align: center;
    }
  }
  .el-table th.el-table__cell {
    background: #f2f3f5;
    color: #1d2129;
  }
}
</style>