boss/pages/main/index/cats.vue

<template>
  <section id="cert-check">
    <div class="table cats cats-boxs">
      <header>
        <el-form :inline="true" :model="queryForm" class="form-inline">
          <div>
            <el-form-item>
              <!-- 需要有全部 -->
              <el-cascader
                clearable
                filterable
                v-model="queryForm.devDir"
                placeholder="开发方向"
                :options="devDirList"
                change-on-select="true"
                @change="handleChangeDir"
              ></el-cascader>
            </el-form-item>
            <el-form-item>
              <el-cascader
                clearable
                filterable
                v-model="queryForm.area"
                placeholder="所在地区"
                :props="defaultProps"
                :options="areaList"
                change-on-select
                @change="handleChange"
              ></el-cascader>
            </el-form-item>
            <el-form-item>
              <el-cascader
                clearable
                filterable
                v-model="queryForm.industry"
                :props="defaultProp"
                placeholder="行业领域"
                :options="industryList"
                change-on-select
              ></el-cascader>
            </el-form-item>
            <el-form-item>
              <el-select v-model="queryForm.confirm" clearable placeholder="资质认证">
                <el-option
                  v-for="item in confirmOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-checkbox-group v-model="queryForm.filter">
                <el-checkbox label="1" name="type">已签约</el-checkbox>
                <el-checkbox label="2" name="type">空闲</el-checkbox>
                <el-checkbox label="3" name="type">负权重</el-checkbox>
                <el-checkbox label="4" name="type">黑名单</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </div>

          <div>
            <el-form-item label="昵称">
              <el-input
                v-model="queryForm.nick"
                @keyup.enter.native="searchDeveloper(1)"
                placeholder="用户UID/昵称/姓名"
              ></el-input>
            </el-form-item>
            <el-form-item label="公司">
              <el-input
                v-model="queryForm.company"
                @keyup.enter.native="searchDeveloper(1)"
                placeholder="公司名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="项目">
              <el-input
                v-model="queryForm.project"
                @keyup.enter.native="searchDeveloper(1)"
                placeholder="项目名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="技能">
              <el-input
                v-model="queryForm.skill"
                placeholder="技能名称"
                @keyup.enter.native="searchDeveloper(1)"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="searchDeveloper(1)">筛选</el-button>
            </el-form-item>
          </div>
        </el-form>
      </header>
      <div class="heightset">
        <div class="developer-box">
          <div class="dev-main clear" v-for="itm in searchList" :key="itm.id">
            <div class="dev-left">
              <div class="grid-content">
                <img class="dev-head point" @click="clickUserID(itm.uid)" :src="itm.icon_url" alt />
                <p class="blackc">{{itm.uid}}</p>
                <p class="lblack font13">¥{{itm.work_price}}</p>
                <p v-if="itm.realname_re=='2'">
                  <span class="state-of">已签约</span>
                </p>
              </div>
            </div>
            <div class="dev-center">
              <div class="grid-content">
                <div class="clear">
                  <div class="floatl">
                    <span class="lblue point blod" @click="clickUID(itm.uid)">{{itm.nickname}}</span>
                    <span v-if="itm.realname" class="lblack font13">({{itm.realname}})</span>

                    <span class="blod">{{itm.occupation_name}}</span>
                    <span v-if="itm.direction_name">/{{itm.direction_name}}</span>
                  </div>
                  <div class="floatr dev-mark clear">
                    <span v-if="itm.in_black_list==1" class="dev-dark">{{'黑名单'}}</span>
                    <span v-if="itm.city_op_name">{{itm.city_op_name}}</span>
                    <span v-if="itm.industry_name">{{itm.industry_name}}</span>
                    <span v-if="itm.work_year_name">{{itm.work_year_name}}</span>
                    <span>{{itm.on_project==0&&itm.on_job==0&&itm.on_hire==0 ?'空闲':'工作中'}}</span>
                    <!-- <span v-for="(itms,ind) in itm.certTags" :key="itms.uid">
                    {{itms.tag_name}}
                    <span v-if="ind!=itm.works.length-1">,</span>
                    </span>-->
                  </div>
                </div>
                <div class="dev-infor">
                  <p>
                    <span class="blod black">技能：</span>

                    <span>{{itm.skill_description}}</span>
                  </p>
                  <p>
                    <span class="blod black">项目：</span>

                    <span v-for="(itms,ind) in itm.works" :key="itms.uid">
                      {{itms.name}}
                      <span v-if="ind!=itm.works.length-1">,</span>
                    </span>
                  </p>
                  <p>
                    <span class="blod black">公司：</span>

                    <span>{{itm.company}}</span>
                    <span>{{itm.title}}</span>
                  </p>
                  <p style="padding-top:22px;">
                    <span class="blod black">认证：</span>

                    <span v-for="(itms,ind) in itm.certTags" :key="itms.uid">
                      {{itms.tag_name}}
                      <span v-if="ind!=itm.certTags.length-1">,</span>
                    </span>
                  </p>
                  <p class="clickable">
                    <a
                      class="clickable"
                      :href="`/main/persona?uid=${itm.uid}`"
                      target="_blank"
                    >程序员画像</a>
                  </p>
                </div>
              </div>
            </div>
            <div class="dev-right">
              <div class="grid-content">
                <div class="dev-detail">
                  <p>
                    <span class="blod black">意愿：</span>
                    <span>{{itm.willing}}</span>
                  </p>
                  <p>
                    <span class="blod black">接单：</span>
                    <span v-if="itm.work_status==1">
                      <span v-if="itm.work_option==0 ">接受所有派单及预约机会</span>
                      <span v-if="itm.work_option==3">只接受平台派单和认证企业预约</span>
                      <span v-if="itm.work_option==1">只接受平台派单</span>
                    </span>
                    <span v-else>
                      <span>不接单</span>
                    </span>
                  </p>
                  <p>
                    <span class="blod black">数量：</span>
                    <span v-if="itm.doing_project_num">项目：{{itm.doing_project_num}},</span>
                    <span v-if="itm.doing_job_num">云端：{{itm.doing_job_num}},</span>
                    <span v-if="itm.doing_hire_num">雇佣：{{itm.doing_hire_num}},</span>
                  </p>
                  <p>
                    <span class="blod black">权重：</span>
                    <span>{{itm.appoint_weight}}</span>
                  </p>
                  <p style="padding-top:22px;">
                    <span class="blod black">评价：</span>

                    <el-rate
                      disabled
                      class="inlineb"
                      style="    vertical-align: top;"
                      v-model="itm.rating"
                      :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
                    ></el-rate>
                    <span v-if="itm.rating_count" class="lblack">({{itm.rating_count}})</span>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div>
      <el-pagination
        background
        @current-change="changePagination"
        @size-change="changePageSize"
        :current-page.sync="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
      ></el-pagination>
    </div>
  </section>
</template>


<script>
const tableHeaders = [
  "用户ID",
  "昵称",
  "会员类型",
  "开始时间",
  "到期时间",
  "最新购买",
  "累计月数",
  "累计金额",
  "当前状态"
];
const tableProps = [
  "uid",
  "nickname",
  "type_name",
  "start_date",
  "end_date",
  "pay_date",
  "total_month",
  "total_price",
  "status_name"
];

// 现在环境是线上还是测试
let env = "test";

export default {
  data() {
    return {
      // query
      queryForm: {
        devDir: "",
        filter: ["1"],
        area: [],
        industry: [],
        confirm: "",

        nick: "",
        company: "",
        project: "",
        skill: ""
      },

      defaultProp: {
        label: "name",
        value: "id"
      },
      defaultProps: {
        children: "cities",
        label: "name",
        value: "id"
      },
      pageSize: 10,
      searchList: [],
      stars: 3,
      page: 1,
      pages: 0,
      // 原始数据
      listData: {},
      // 头部信息
      titleInfo: {},
      // 数据总条目
      totalCount: 0,
      // 当前页面
      currentPage: 1,
      // 列表头显示内容
      tableHeaders,
      // 列表头字段
      tableProps,
      // 列表数据
      tableData: [],
      checkeds: "",
      confirmOptions: [],
      number: 0,
      devDirList: [],
      areaList: [],
      industryList: []
    };
  },
  computed: {
    whole() {
      return this.listData.whole || {};
    }
  },
  mounted() {
    this.getTableData();
    this.getEnum();
    this.getSkillMap();
    this.getDirectionMap();
    this.getAreaMap();
    this.searchDeveloper();
    this.getIndustryMap();
  },
  filters: {
    toDate(val) {
      return new Date(val * 1000).toLocaleDateString();
    },
    projectLink(i) {
      const type = i.entity_type;
      let link = "javascript:void(0)";
      if (type === "1") link = `/rooter/outsourceitem/${i.entity_id}>`;
      else if (type === "3") link = `/rooter/wagedetails?job_id=${i.entity_id}`;
      return link;
    }
  },
  methods: {
    async getTableData() {
      let body = { page: this.currentPage, page_size: this.currentPageSize };
      const res = await this.$post("/api/admin/cert/getUserList", body);
      var data = res.data;
      env = data.current_env;
    },
    clickUID(uid) {
      console.log(uid);
      window.open(this.$store.state.domainConfig.siteUrl + `/wo/${uid}`);
    },
    clickUserID(uid) {
      console.log(uid);
      window.open(
        this.$store.state.domainConfig.siteUrl + `/rooter/user/${uid}`
      );
    },
    handleChange(value) {
      console.log(value);
    },
    handleChangeDir(value) {
      console.log(value);
    },

    /**
     * 点击 uid
     */

    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.searchDeveloper();
    },
    // 页码变动
    changePagination(page) {
      // console.log(pageSize);
      this.currentPage = page;

      this.searchDeveloper();
    },
    // 格式化列表数据
    formatTableData(data) {
      return data.map(i => {
        let projectName = "--";
        let prePay = "";
        let servicePay = "";
        let getPay = "";
        let realGet = "";
        return {
          ...i
        };
      });
    },

    // 认证资质
    async getEnum() {
      const res = await this.$get("/api/admin/cert/getEnum");
      this.confirmOptions = [];
      var data = res.data.cert_type_list;
      data.forEach(itm => {
        var obj = {};
        obj.value = itm.id;
        obj.label = itm.name;
        this.confirmOptions.push(obj);
      });
    },
    // 获取技能列表
    async getSkillMap() {
      const res = await this.$get("/api/admin/common/getSkillMap");
    },
    // 获取研发方向
    async getDirectionMap() {
      const res = await this.$get("/api/admin/common/getDirectionMap");
      var data = res.data;
      var arr = [];
      for (var i = 0; i < data.length; i++) {
        var obj = {};
        obj.label = data[i].occupation_name;
        obj.value = data[i].occupation_id;
        arr.push(obj);
        var arr1 = [];
        for (var j = 0; j < data[i].directions.length; j++) {
          var son = {};
          son.label = data[i].directions[j].direction_name;
          son.value = data[i].directions[j].direction_id;

          arr1.push(son);
        }
        arr[i].children = arr1;
      }

      arr.children = arr1;
      this.devDirList = arr;
    },
    // 获取城市列表
    async getAreaMap() {
      const res = await this.$get("/api/admin/common/getAreaMap");

      this.areaList = res.data;
    },
    // 获取用户列表
    async searchDeveloper(value) {
      console.log(111);
      if (value == 1) {
        this.currentPage = 1;
      }
      var developer_sign = 0;
      var free = 0;
      var negative_weight = 0;
      var black_list = 0;
      console.log(this.queryForm.filter);
      for (var i = 0; i < this.queryForm.filter.length; i++) {
        if (this.queryForm.filter[i] == "1") {
          developer_sign = 1;
        }
        if (this.queryForm.filter[i] == "2") {
          free = 1;
        }
        if (this.queryForm.filter[i] == "3") {
          negative_weight = 1;
        }
        if (this.queryForm.filter[i] == "4") {
          black_list = 1;
        }
      }
      // 行业是传一级还是二级的id
      var leng = this.queryForm.industry.length;
      var industry = this.queryForm.industry[leng - 1];
      // var confirm = this.queryForm.confirm.toString();
      const res = await this.$get("/api/admin/developer/searchDeveloper", {
        occupation_op: this.queryForm.devDir[0],
        direction_op: this.queryForm.devDir[1],
        province_op: this.queryForm.area[0],
        city_op: this.queryForm.area[1],
        industry_id: industry,
        verified: this.queryForm.confirm,
        developer_sign: developer_sign,
        free: free,
        negative_weight: negative_weight,
        black_list: black_list,
        nickname: this.queryForm.nick,
        company_name: this.queryForm.company,
        project_name: this.queryForm.project,
        skill_name: this.queryForm.skill,
        page_size: this.pageSize,
        page: this.currentPage
      });

      this.searchList = res.data.list;
      // console.log(this.searchList);
      this.totalCount = res.data.total;
    },
    // 获取行业列表
    async getIndustryMap() {
      const res = await this.$get("/api/admin/common/getIndustryMap");
      console.log(res.data);
      this.industryList = res.data;
    }
  },
  created() {}
};
</script>

<style scoped lang="scss">
.lblue {
  color: #419df7;
}
.lblack {
  color: #aeaeae;
}
.cats-boxs {
  height: calc(100% - 40px);
  overflow-y: auto;
}
.point {
  cursor: pointer;
}
.cats {
  // height: calc(100% - 80px);
}
.form-inline {
  display: flex;
  flex-wrap: wrap;
}
.developer-box {
  padding-top: 10px;
  background: #f7f7f7;
  font-size: 14px;
  padding-bottom: 20px;
}

.dev-main {
  margin: 0 auto;
  padding: 37px 9px 20px 23px;
  background: white;
  width: 1000px;

  // border: 1px solid gray;

  margin-bottom: 10px;
  box-sizing: border-box;
}
.dev-main > div {
  float: left;
}
.dev-left {
  width: 112px;
  text-align: center;
}
.state-of {
  display: inline-block;
  background: rgba(243, 243, 243, 1);
  font-size: 14px;
  color: #888888;
  padding: 3px 11px;
}
.dev-left p {
  padding: 3px 0;
}
.dev-center {
  width: 594px;
}
.dev-right {
  width: 260px;
}
.dev-detail {
  border-left: 1px solid #e0e0e0;
  padding: 3px 0 3px 19px;
}
.dev-detail > p {
  padding-top: 3px;
  padding-right: 10px;
  font-size: 13px;
  color: #505050;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dev-head {
  width: 74px;
  border-radius: 50%;
  overflow: hidden;
}
.dev-mark {
  margin-right: 22px;
}
.dev-mark > span {
  float: left;
  padding: 2px 9px;
  color: #888888;
  font-size: 14px;
  border: 1px solid #c0c0c0;
  border-radius: 2px;
  margin-right: 7px;
  height: 23px;
  line-height: 18px;
}
.dev-mark .dev-dark {
  float: left;
  padding: 2px 9px;
  color: white;
  font-size: 14px;
  background: #999999;
  border: 1px solid #999999;
  border-radius: 2px;
  margin-right: 7px;
}
.dev-infor {
  padding-top: 2px;
}
.dev-infor > p {
  padding-top: 3px;
  padding-right: 10px;
  font-size: 13px;
  color: #505050;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.heightset {
  // height: calc(100% - 200px);
  // overflow: auto;
}
.clear::after {
  display: block;
  clear: both;
  content: "";
}
.inlineb {
  display: inline-block;
}
.floatl {
  float: left;
}
.floatr {
  float: right;
}
.table {
  height: calc(100% - 40px);
}
#main {
}
</style>