boss/pages/main/index/cats.vue

<template>
  <section id="cert-check">
    <div class="table cats cats-boxs">
      <header>
        <el-form :inline="true" :model="queryForm">
            <el-row>
              <el-form-item label="开发方向">
                <el-cascader
                  clearable
                  filterable
                  v-model="queryForm.devDir"
                  placeholder="全部"
                  :options="devDirList"
                  change-on-select
                  @change="handleChangeDir"
                  style="width:180px"
                ></el-cascader>
              </el-form-item>
              <el-form-item label="所在地区">
                <el-cascader
                  clearable
                  filterable
                  v-model="queryForm.area"
                  placeholder="全部"
                  :props="defaultProps"
                  :options="areaList"
                  change-on-select
                  @change="handleChange"
                  style="width:150px"
                ></el-cascader>
              </el-form-item>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="排序方式">
                  <el-radio-group v-model="queryForm.sort" size="mini">
                    <el-radio-button :label="0">智能排序</el-radio-button>
                    <el-radio-button :label="1">评价最多</el-radio-button>
                    <el-radio-button :label="7">最新签约</el-radio-button>
                    <el-radio-button :label="6">价格最低</el-radio-button>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="身份类型">
                  <el-radio-group v-model="queryForm.identity" size="mini">
                    <el-radio-button :label="0">全部</el-radio-button>
                    <el-radio-button :label="1">个人开发者（{{optionCount.company_vip0}}）</el-radio-button>
                    <el-radio-button :label="2">企业认证（{{optionCount.company_vip1}}）</el-radio-button>
                    <el-radio-button :label="3">技术服务商（{{optionCount.verified19}}）</el-radio-button>
                    <el-radio-button :label="4">人力外包服务商（{{optionCount.verified18}}）</el-radio-button>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="工作状态">
                  <el-radio-group v-model="queryForm.free" size="mini">
                    <el-radio-button :label="0">全部</el-radio-button>
                    <el-radio-button :label="1">空闲（{{optionCount.free}}）</el-radio-button>
                    <el-radio-button :label="2">项目中（{{optionCount.total - optionCount.free}}）</el-radio-button>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="标签内容">
                  <el-input
                    v-model="queryForm.tag"
                    placeholder="用户标签"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-form-item label="是否自由">
                <el-radio-group v-model="queryForm.verified" size="mini">
                  <el-radio-button :label="0">全部</el-radio-button>
                  <el-radio-button :label="1">自由工作者（{{optionCount.verified9}}）</el-radio-button>
                  <el-radio-button :label="2">兼职工作者（{{optionCount.total - optionCount.verified9}}）</el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="是否会员">
                <el-radio-group v-model="queryForm.is_vip" size="mini">
                  <el-radio-button :label="0">全部</el-radio-button>
                  <el-radio-button :label="1">会员开发者（{{optionCount.is_vip}}）</el-radio-button>
                  <el-radio-button :label="2">非会员开发者（{{optionCount.total - optionCount.is_vip}}）</el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="是否驻场">
                <el-radio-group v-model="queryForm.is_remote" size="small">
                  <el-radio-button :label="0">全部</el-radio-button>
                  <el-radio-button :label="1">可以驻场（{{optionCount.is_remote}}）</el-radio-button>
                  <el-radio-button :label="2">不能驻场（{{optionCount.total - optionCount.is_remote}}）</el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="资质认证">
                <el-radio-group v-model="queryForm.freework_level" size="small">
                  <el-radio-button :label="-1">全部</el-radio-button>
                  <el-radio-button :label="0">F0</el-radio-button>
                  <el-radio-button :label="1">F1</el-radio-button>
                  <el-radio-button :label="2">F2</el-radio-button>
                  <el-radio-button :label="3">F3</el-radio-button>
                  <el-radio-button :label="4">F4</el-radio-button>
                  <el-radio-button :label="5">F5</el-radio-button>
                  <el-radio-button :label="6">F6</el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="降权记录">
                <el-radio-group v-model="queryForm.negative_weight" size="mini">
                  <el-radio-button :label="0">全部</el-radio-button>
                  <el-radio-button :label="1">权重正常（{{optionCount.negative_weight}}）</el-radio-button>
                  <el-radio-button :label="2">降权用户（{{optionCount.total - optionCount.negative_weight}}）</el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-row>

            <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>

        </el-form>
        <div style="margin-bottom: 10px;font-size: 15px;">为您找到{{totalCount}}名开发者</div>
      </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.wid">
                      {{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.wid">
                      {{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 style="margin-top:10px">
      <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: "",
        area: [],
        nick: "",
        company: "",
        project: "",
        skill: "",
        sort: 0,
        free: 0,
        // type: 0,
        is_vip: 0,
        is_remote: 0,
        negative_weight: 0,
        verified: 0,
        freework_level: -1,
        identity: 0,
        tag: ''
      },
      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: "",
      number: 0,
      devDirList: [],
      areaList: [],
      optionCount: {
        free: 0,
        is_vip: 0,
        negative_weight: 0,
        // type: 0,
        total: 0,
        is_remote: 0,
        verified9: 0,
        verified18: 0,
        verified19: 0,
        company_vip0: 0,
        company_vip1: 0,
      }
    };
  },
  computed: {
    whole() {
      return this.listData.whole || {};
    }
  },
  mounted() {
    this.getTableData();
    this.getSkillMap();
    this.getDirectionMap();
    this.getAreaMap();
    this.searchDeveloper();
    this.developerCount();
  },
  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 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) {
      if (value == 1) {
        this.currentPage = 1;
      }

      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],
        free: this.queryForm.free,
        negative_weight: this.queryForm.negative_weight,
        nickname: this.queryForm.nick,
        company_name: this.queryForm.company,
        project_name: this.queryForm.project,
        skill_name: this.queryForm.skill,
        sort: this.queryForm.sort,
        // type: this.queryForm.type,
        is_vip: this.queryForm.is_vip,
        is_remote: this.queryForm.is_remote,
        verified: this.queryForm.verified,
        freework_level: this.queryForm.freework_level,
        identity: this.queryForm.identity,
        tag: this.queryForm.tag,
        page_size: this.pageSize,
        page: this.currentPage
      });

      this.searchList = res.data.list;
      // console.log(this.searchList);
      this.totalCount = res.data.total;
    },
    // 数据统计
    async developerCount(value) {
      const res = await this.$get("/api/admin/developer/developerCount");
      this.optionCount = res.data
    }
  },
  created() {}
};
</script>

<style scoped lang="scss">
.lblue {
  color: #419df7;
}
.lblack {
  color: #aeaeae;
}
.cats-boxs {
  height: calc(100% - 40px);
}
.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 {
}
.el-form-item{
  margin-bottom: 6px;
}
</style>