boss/pages/main/index/cloud_developer.vue

<template>
  <section id="cloud-devaloper">
    <el-button @click="goAddVer">添加认证</el-button>
    <div class="table">
      <el-table v-if="tableData.length" height="100%" border style="width: 100%" :data="tableData" :row-class-name="tableRowClassName">
        <el-table-column v-for="(prop, index) of tableProps" :key="index" :prop="prop" :label="tableHeaders[index]">
          <template slot-scope="scope">
            <el-button type="text" v-if="prop === 'ctrl'" @click="clickDelete(scope.row['uid'])">{{scope.row[prop]}}</el-button>
            <el-button type="text" v-else-if="prop === 'nickname'" @click="clickDetail(scope.row['uid'])">{{scope.row[prop]}}</el-button>
            <span v-else>{{scope.row[prop]}}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules" ref='roleForm'>
        <el-form-item label="用户 UID" label-width="120px" prop="uid">
          <el-input v-model="form.uid"></el-input>
        </el-form-item>
        <el-form-item label="培训状态" label-width="120px" prop="train_state">
          <el-select v-model="form.train_state" placeholder="请选择培训状态">
            <el-option v-for="(state, index) of states" :key="index" :label="state" :value="index" />
          </el-select>
        </el-form-item>
        <el-form-item label="自由职业" label-width="120px" prop="freelancer">
          <el-select v-model="form.freelancer" placeholder="请选择自由职业状态">
            <el-option label="是" :value="1"></el-option>
            <el-option label="否" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" label-width="120px">
          <el-input v-model="form.note" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addVer('roleForm')">确 定</el-button>
      </div>
    </el-dialog>
    <el-pagination @current-change="changePagination" :current-page.sync="currentPage" :page-size="10" layout="total, prev, pager, next"
      :total="totalCount"></el-pagination>
  </section>
</template>

<script>
const tableHeaders = [
  "ID",
  "昵称",
  "自由职业",
  "最低时长",
  "当前状态",
  "职业方向",
  "技能",
  "城市",
  "工龄",
  "接单情况",
  "认证时间",
  "备注",
  "操作"
]

const tableProps = [
  "uid",
  "nickname",
  "freelancer",
  "cloud_job_min_work_time",
  "on_projectShow",
  "direction_name",
  "skillStr",
  "city_name",
  "work_year_op",
  "countDevelopProjectStr",
  "cloud_job_verify_timeStr",
  "cloud_job_verify_note",
  "ctrl"
]

const apis = {
  getTrainStates: `/api/admin/common/get_cloud_job_verify_train_state`,
  delete: `/api/admin/user/cancel_cloud_verify`,
  addVer: `/api/admin/user/add_cloud_verify`,
  dataList: `/api/admin/user/get_cloud_verify_list`,
}

// 获取当前状态
const getOnProjectShow = i => {
  let str = ''
  if(i.on_project === 0 && i.on_hire === 0 & i.on_job === 0 && i.work_status === 1) str = '空闲'
  else {
    if(i.on_project) str = '项目'
    else if(i.on_hire) str = '雇佣'
    else if(i.on_job) str = '云端'
    else if(!i.work_status) str = '不接单'
  }
  return str
}

export default {
  data() {
    return {
      // 培训状态
      states: [],
      // 表单验证
      rules: {
        uid: [
          { required: true, message: '请输入 UID', trigger: 'blur' },
        ],
        train_state: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ],
        freelancer: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ],
        // note: [
        //   { required: true, message: '请输入备注', trigger: 'blur' },
        // ],
      },
      // 表单
      form: {},
      // 显示 dislog
      dialogFormVisible: false,
      // 筛选状态
      statuses: [],
      // 数据总条目
      totalCount: 0,
      currentPage: 1,
      // 列表头显示内容
      tableHeaders,
      // 列表头字段
      tableProps,
      // 列表数据
      tableData: []
    }
  },
  mounted() {
    this.getTableData()
    this.getTrainStates()
  },
  methods: {
    // 点击认证提交
    addVer(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          await this.$post(apis.addVer, this.form)
          this.dialogFormVisible = false
          this.getTableData()
        } else {
          return false
        }
      })
    },
    // 点击删除
    clickDelete(uid) {
      this.$confirm(`确认删除 uid 为${uid}？`)
        .then(async _ => {
          await this.$post(apis.delete, {
            uid
          })
          this.getTableData()
        })
        .catch(_ => {})
    },
    // 添加认证
    goAddVer() {
      this.dialogFormVisible = true
    },
    // 点击详情
    clickDetail(uid) {
      window.open(`/rooter/user/${uid}`)
    },
    // 根据状态显示图表样式
    tableRowClassName({
      row,
      rowIndex
    }) {
      // console.log({row, rowIndex})
      let className = ""
      if (row.status === "1") className = "success-row"
      return className
    },
    // 格式化列表数据
    formatTableData(data, resData) {
      const userSkills = resData.userSkills
      return data.map(i => {
        const uid = i.uid
        const countDevelopProject = (resData.countDevelopProject[uid] || 0) + (resData.countManageProject[uid] || 0)
        const countHire = resData.countHire[uid] || 0
        const countJob = resData.countJob[uid] || 0
        const cloudJobVerifyTime = i.cloud_job_verify_time * 1000
        return {
          ...i,
          on_projectShow: getOnProjectShow(i),
          skillStr: userSkills[i.uid].join(','),
          countDevelopProjectStr: `项目:${countDevelopProject},雇佣:${countHire},云端:${countJob}`,
          cloud_job_verify_timeStr: cloudJobVerifyTime > 0 ? new Date(cloudJobVerifyTime).toLocaleDateString() : '--',
          ctrl: "删除"
        }
      })
    },
    // 页码变动
    changePagination(page) {
      this.getTableData()
    },
    // 获取培训状态列表
    async getTrainStates() {
      const res = await this.$post(apis.getTrainStates)
      if(res) {
        // console.log(res.data)
        this.states = res.data
      }
    },
    // 获取列表数据
    async getTableData(status = 0) {
      this.tableData = []
      const p = this.currentPage
      const res = await this.$post(apis.dataList, {
        p
      })
      // console.log(res.data.data)
      const data = res.data.data
      const list = data.list
      this.tableData = this.formatTableData(list, data)
      this.totalCount = Number(data.total)
      this.totalPage = data.totalPage
    }
  }
}
</script>

<style scoped>
.table {
  height: calc(100% - 80px);
}
</style>