bsdgy-front/src/pages/recruit/CheckList.vue

<template>
  <div>
    <Tabs active-key="key1" @on-click="onTabClick">
      <Tab-pane label="待审核" key="key1">
        <Row class="search-row">
          <i-col span="24" class="search-col">
            <Row class="row-style">
              <i-input placeholder="请输入推广员姓名或手机号" class="search-select" v-model="searchShop" />
              <span class="search-span">选择日期</span>
              <DatePicker
                :value="selectDate"
                type="daterange"
                split-panels
                placeholder="请选择日期"
                @on-change="onChangeDateLister"
                class="date-picker"
              ></DatePicker>
              <span class="search-span">零售公司</span>
              <Select
                v-model="companyId"
                filterable
                class="search-select"
                @on-change="companySelect"
              >
                <Option
                  v-for="(item,index) in companyList"
                  :value="item.id"
                  :key="index + item.id"
                >{{ item.name }}</Option>
              </Select>
              <span class="search-span">店铺</span>
              <Select v-model="selectedStore" filterable class="search-select">
                <Option
                  v-for="(item,index) in shopList"
                  :value="item.id"
                  :key="index + item.id"
                >{{ item.name }}</Option>
              </Select>
              <Button type="primary" @click="searchCustomerDataBtnClick" class="search-btn">查询</Button>
            </Row>
          </i-col>
        </Row>
        <Table
          ref="table"
          :loading="loading"
          :columns="columns1"
          :data="data1"
          class="table-store"
          size="small"
          @on-row-dblclick="onDblClickRowLister"
        >
          <template slot="action" slot-scope="{row}">
            <i-col span="12">
              <Button type="success" class="router-btn" @click="() => {passShow(row)}">审核通过</Button>
            </i-col>
            <i-col span="12">
              <Button type="error" class="router-btn" @click="() => {refuseShow(row)}">审核不通过</Button>
            </i-col>
          </template>
        </Table>
      </Tab-pane>
      <Tab-pane label="通过审核" key="key2">
        <Row class="search-row">
          <i-col span="24" class="search-col">
            <Row class="row-style">
              <i-input placeholder="请输入推广员姓名或手机号" class="search-select" v-model="searchShop" />
              <span class="search-span">选择日期</span>
              <DatePicker
                v-model="date"
                class="left-15 date-picker"
                type="date"
                placement="bottom-start"
                split-panels
                placeholder="请选择日期"
              ></DatePicker>
              <span class="search-span">零售公司</span>
              <Select
                v-model="companyId"
                filterable
                class="search-select"
                @on-change="companySelect"
              >
                <Option
                  v-for="(item,index) in companyList"
                  :value="item.id"
                  :key="index + item.id"
                >{{ item.name }}</Option>
              </Select>
              <span class="search-span">店铺</span>
              <Select v-model="selectedStore" filterable class="search-select">
                <Option
                  v-for="(item,index) in shopList"
                  :value="item.id"
                  :key="index + item.id"
                >{{ item.name }}</Option>
              </Select>
              <Button type="primary" @click="searchCustomerDataBtnClick" class="search-btn">查询</Button>
            </Row>
          </i-col>
        </Row>
        <Table
          ref="table"
          :loading="loading"
          :columns="columns2"
          :data="data2"
          class="table-store"
          size="small"
          @on-row-dblclick="onDblClickRowLister"
        ></Table>
      </Tab-pane>
      <Tab-pane label="审核未通过" key="key3">
        <Row class="search-row">
          <i-col span="24" class="search-col">
            <Row class="row-style">
              <i-input placeholder="请输入推广员姓名或手机号" class="search-select" v-model="searchShop" />
              <span class="search-span">选择日期</span>
              <DatePicker
                v-model="date"
                class="left-15 date-picker"
                type="date"
                placement="bottom-start"
                split-panels
                placeholder="请选择日期"
              ></DatePicker>
              <span class="search-span">零售公司</span>
              <Select
                v-model="companyId"
                filterable
                class="search-select"
                @on-change="companySelect"
              >
                <Option
                  v-for="(item,index) in companyList"
                  :value="item.id"
                  :key="index + item.id"
                >{{ item.name }}</Option>
              </Select>
              <span class="search-span">店铺</span>
              <Select v-model="selectedStore" filterable class="search-select">
                <Option
                  v-for="(item,index) in shopList"
                  :value="item.id"
                  :key="index + item.id"
                >{{ item.name }}</Option>
              </Select>
              <Button type="primary" @click="searchCustomerDataBtnClick" class="search-btn">查询</Button>
            </Row>
          </i-col>
        </Row>
        <Table
          ref="table"
          :loading="loading"
          :columns="columns3"
          :data="data3"
          class="table-store"
          size="small"
          @on-row-dblclick="onDblClickRowLister"
        ></Table>
      </Tab-pane>
    </Tabs>

    <!-- 拒绝 -->
    <Modal
      v-model="refuseIsShow"
      :title="showStoreName"
      :footer-hide="true"
      width="600"
      class-name="vertical-center-modal"
      @on-ok="ok"
    >
      <div slot="header">
        <p>审核不通过原因</p>
      </div>
      <div>
        <i-input v-model="remark" type="textarea" :rows="4" placeholder="请填写审核不通过原因"></i-input>
      </div>
      <div style="margin-top:20px;text-align: center;">
        <Button ghost type="primary" @click="refuse(rowData)">确定</Button>
      </div>
    </Modal>

    <!-- 升级 -->
    <Modal
      v-model="passIsShow"
      :title="showStoreName"
      :footer-hide="true"
      width="600"
      class-name="vertical-center-modal"
      @on-ok="ok"
    >
      <div slot="header">
        <p style="text-align: center;">确认审核</p>
      </div>
      <div style="text-align:center;min-height:100px">
        <span style="line-height:100px">确认通过审核吗?</span>
      </div>
      <div style="margin-top:20px;text-align: center;">
        <Button @click="cancel(rowData)">取消</Button>
        <Button style="margin-left:20px" type="primary" @click="confirm(rowData)">确定</Button>
      </div>
    </Modal>

    <Page
      :total="total"
      :current="pageNum"
      :page-size="pageSize"
      show-elevator
      show-total
      placement="top"
      @on-change="handlePage"
      class-name="ks-page"
    ></Page>
  </div>
</template>

<script>
import zeroExtend from "../../services/customer/zeroExtend";
import staff from "../../services/staff/staff";
import { formatDate } from "../../utils/Common";
import bulletinService from "../../services/recruit/Bulletin";

export default {
  name: "",
  data() {
    return {
      tabIndex: 0,
      userId: JSON.parse(sessionStorage.getItem("loginInfo")).userId,
      searchShop: null,
      date: "",
      companyId: null,
      refuseIsShow: false,
      passIsShow: false,
      showStoreName: "",
      rowData: {},
      //零售公司list
      companyList: [],
      //所有组织list
      organizationalList: [],
      selectedStore: null,
      shopList: [],
      loading: false,
      total: 0,
      pageSize: 10,
      pageNum: 1,
      columns1: [
        {
          title: "序号",
          key: "number",
          width: 60,
          render: (h, params) => {
            return h(
              "span",
              params.index + (this.pageNum - 1) * this.pageSize + 1
            );
          }
        },
        {
          title: "推广员姓名",
          width: 120,
          render: (h, params) => {
            return h("span", params.row.promoterInfo.name);
          }
        },
        {
          title: "推广员手机号",
          width: 120,
          render: (h, params) => {
            return h("span", params.row.promoterInfo.phone);
          }
        },
        {
          title: "零售公司",
          width: 150,
          render: (h, params) => {
            return h("span", params.row.organizational.name);
          }
        },
        {
          title: "零售公司编号",
          width: 80,
          render: (h, params) => {
            return h("span", params.row.organizational.code);
          }
        },
        {
          title: "店铺",
          width: 160,
          render: (h, params) => {
            return h("span", params.row.store.name);
          }
        },
        {
          title: "店铺编号",
          width: 80,
          render: (h, params) => {
            return h("span", params.row.store.code);
          }
        },
        {
          title: "发展人",
          width: 80,
          render: (h, params) => {
            return h("span", params.row.fissionUser.name);
          }
        },
        {
          title: "加入时间",
          width: 120,
          render: (h, params) => {
            return h("span", formatDate(params.row.joinTime));
          }
        },
        {
          title: "操作",
          slot: "action",
          width: 250
        }
      ],
      data1: [],
      columns2: [
        {
          title: "序号",
          key: "number",
          width: 60,
          render: (h, params) => {
            return h(
              "span",
              params.index + (this.pageNum - 1) * this.pageSize + 1
            );
          }
        },
        {
          title: "推广员姓名",
          width: 120,
          render: (h, params) => {
            return h("span", params.row.promoterInfo.name);
          }
        },
        {
          title: "推广员手机号",
          width: 120,
          render: (h, params) => {
            return h("span", params.row.promoterInfo.phone);
          }
        },
        {
          title: "零售公司",
          width: 150,
          render: (h, params) => {
            return h("span", params.row.organizational.name);
          }
        },
        {
          title: "零售公司编号",
          width: 80,
          render: (h, params) => {
            return h("span", params.row.organizational.code);
          }
        },
        {
          title: "店铺",
          width: 160,
          render: (h, params) => {
            return h("span", params.row.store.name);
          }
        },
        {
          title: "店铺编号",
          width: 80,
          render: (h, params) => {
            return h("span", params.row.store.code);
          }
        },
        {
          title: "导购",
          width: 80,
          render: (h, params) => {
            return h("span", params.row.fissionUser.name);
          }
        },
         {
          title: "加入时间",
          width: 120,
          render: (h, params) => {
            return h("span", formatDate(params.row.joinTime));
          }
        },
        {
          title: "审核时间",
          width: 120,
          render: (h, params) => {
            return h("span", formatDate(params.row.updateTime));
          }
        }
      ],
      data2: [
      ],
      columns3: [
        {
          title: "序号",
          key: "number",
          width: 60,
          render: (h, params) => {
            return h(
              "span",
              params.index + (this.pageNum - 1) * this.pageSize + 1
            );
          }
        },
        {
          title: "推广员姓名",
          width: 120,
          render: (h, params) => {
            return h("span", params.row.promoterInfo.name);
          }
        },
        {
          title: "推广员手机号",
          width: 120,
          render: (h, params) => {
            return h("span", params.row.promoterInfo.phone);
          }
        },
        {
          title: "零售公司",
          width: 150,
          render: (h, params) => {
            return h("span", params.row.organizational.name);
          }
        },
        {
          title: "零售公司编号",
          width: 80,
          render: (h, params) => {
            return h("span", params.row.organizational.code);
          }
        },
        {
          title: "店铺",
          width: 160,
          render: (h, params) => {
            return h("span", params.row.store.name);
          }
        },
        {
          title: "店铺编号",
          width: 80,
          render: (h, params) => {
            return h("span", params.row.store.code);
          }
        },
        {
          title: "导购",
          width: 80,
          render: (h, params) => {
            return h("span", params.row.fissionUser.name);
          }
        },
         {
          title: "加入时间",
          width: 120,
          render: (h, params) => {
            return h("span", formatDate(params.row.joinTime));
          }
        },
        {
          title: "审核时间",
          width: 120,
          render: (h, params) => {
            return h("span", formatDate(params.row.updateTime));
          }
        },
        {
          title: "审核不通过原因",
          width: 120,
          render: (h, params) => {
            return h("span", formatDate(params.row.remark));
          }
        }
      ],
      data3: [
      ],
      selectDate: [],
      store: null,
      remark: null
    };
  },
  mounted: function() {
    // let startDate = this.$moment().format("YYYY-MM-DD");
    // let endDate = this.$moment().format("YYYY-MM-DD");
    // this.selectDate.push(startDate);
    // this.selectDate.push(endDate);
    this.getSelectList();
    this.downShopData();
    this.getRecruitList();
  },
  methods: {
    onChangeDateLister(date) {
      console.log(date);
      this.selectDate = date;
    },
    /**基础数据：区域list、零售公司list、客户list*/
    getSelectList: function() {
      let that = this;
      let request = {
        userId: this.userId
      };
      zeroExtend.getSelectListRequest(request, function(data) {
        if (data.data.code !== "0000") {
          that.$Message.error("系统异常");
        }
        data = data.data.results;
        if (data) {
          that.organizationalList = data;
          that.companyList = that.organizationalList.filter(
            item => item.level === 2
          );
        }
        //插入全部选项
        that.insertAllOption();
      });
    },
    //插入全部选项
    insertAllOption: function() {
      if (this.companyList.length === 0 || this.companyList[0].id !== 0) {
        this.companyList.splice(0, 0, { id: 0, name: "全部" });
      }
      if (this.shopList.length === 0 || this.shopList[0].id !== 0) {
        this.shopList.splice(0, 0, { id: 0, name: "全部" });
      }
    },
    //店铺
    downShopData: function(selected) {
      let that = this;
      let companyId = selected;
      if (!selected) {
        companyId = that.companyId;
      }
      let customerIds = [];
      this.customerList = [];
      if (companyId === 0) {
        //
      } else {
        this.customerList = this.organizationalList.filter(
          item => item.parentId === companyId && item.level === 3
        );
        this.insertAllOption();
      }
      customerIds = this.customerList.map(item => item.id);

      let request = {
        userId: that.userId,
        customerIds: JSON.stringify(customerIds)
      };
      staff.downShopData(request, function(data) {
        data = data.data.results;
        if (data) {
          that.shopList = [{ id: 0, name: "全部" }];
          for (let i = 0; i < data.length; i++) {
            let entity = data[i];
            if (entity) {
              that.shopList.push(entity);
            }
          }
        }
      });
    },
    //零售公司选择
    companySelect: function() {
      //加载店铺
      this.downShopData(this.companyId);
      this.selectedStore = 0;
    },
    downCompanyChange: function(formValidate) {
      this.downShopData(formValidate.departIds);
    },
    searchCustomerDataBtnClick: function() {
      this.pageNum = 1;
      this.getRecruitList();
    },
    // 双击row跳转详情页面
    onDblClickRowLister: function(row) {
      this.$router.push({
        path: "/shop/increase/manager/staff",
        query: { storeId: row.id }
      });
    },
    //切页处理
    handlePage: function(value) {
      this.pageNum = value;
      this.getRecruitList();
    },
    getRecruitList() {
      let that = this;
      this.loading = true;
      let request = {
        status: that.tabIndex + 2,
        pageNum: that.pageNum,
        storeId: that.selectedStore,
        companyId: that.companyId,
        store: that.searchShop,
        start:
          that.selectDate[0] === "" || that.selectDate.length == 0
            ? null
            : that.selectDate[0],
        end:
          that.selectDate[1] === "" || that.selectDate.length == 0
            ? null
            : that.selectDate[1]
      };
      bulletinService.getRecruitList(
        request,
        function(data) {
          that.loading = false;
          if (data.data.code == "0000") {
            that.data1 = [];
            let datas = data.data.results;
            //总页数
            if (datas.total == null) {
              that.total = 0;
            } else {
              that.total = datas.total;
            }
            if (datas.list == null) {
              datas.list = [];
            }
            if(that.tabIndex == 0){
              that.data1 = datas.records;
            }else if(that.tabIndex == 1){
              that.data2 = datas.records;
            }else{
              that.data3 = datas.records;
            }
          }
        },
        function(error) {
          that.loading = false;
        }
      );
    },
    onTabClick(e) {
      this.tabIndex = e;
      this.pageNum = 1;
      this.storeId = null;
      this.companyId = null;
      this.searchShop = null;
      this.selectDate = [];
      this.getRecruitList();
    },
    ok() {
      this.refuseIsShow = false;
    },
    // 拒绝审核
    refuse(rData) {
      let param = {
        fissionPromoterId: rData.id,
        status: 4,
        remark: this.remark
      };
      this.doRecruitSave(param);
      this.refuseIsShow = false;
    },
    refuseShow(index) {
      this.refuseIsShow = true;
      this.rowData = index;
    },
    passShow(index) {
      this.passIsShow = true;
      this.rowData = index;
    },
    cancel() {
      this.passIsShow = false;
    },
    //确认通过审核
    confirm(rData) {
      let param = {
        fissionPromoterId: rData.id,
        status: 3
      };
      this.doRecruitSave(param);
      this.passIsShow = false;
    },
    // 审核
    doRecruitSave(request) {
      let that = this;
      bulletinService.recruitSave(
        request,
        function(data) {
          that.loading = false;
          if (data.data.code == "0000") {
            that.$Message.info(data.data.results);
            that.getRecruitList();
          } else {
            that.$Message.error("系统异常");
          }
        },
        function(error) {
          that.loading = false;
        }
      );
    }
  }
};
</script>

<style scoped>
.table-store {
  margin-top: 20px;
}
.search-btn {
  margin-left: 40px;
}
.ivu-tabs {
  overflow: inherit;
}
</style>