yos_web/src/HDrpManagement/salerPortrait/index.vue

<template>
  <div>
    <basicLayout 
    ref="list" 
    tableName="salerTable" 
    idName="sa_accountclassid" 
    :apiId="{query:20230717100204}" 
    :options="options"
    :isExport="false"
    @listCreate="listCreate"
    >
      <div slot="custom" style="display:flex">
        <div class="mt-10">
          <label  class="search__label" >部门:</label>
          <el-select class="inline-16" v-model="dep" size="small" placeholder="请选择部门" clearable @change="depChange">
            <el-option
                v-for="item in selectList.dep"
                :key="item.departmentid"
                :label="item.depname"
                :value="item.departmentid"
            ></el-option>
          </el-select>
        </div>

        <div class="mt-10">
          <label  class="search__label" >人员:</label>
          <el-select class="inline-16" v-model="people" size="small" placeholder="请选择部门" clearable @change="peopleChange">
            <el-option
                v-for="item in selectList.hr"
                :key="item.userid"
                :label="item.name"
                :value="item.userid"
            ></el-option>
          </el-select>
        </div>

        <div class="mt-10" style="margin-right:10px">
          <label  class="search__label" >范围:</label>
          <el-date-picker
              size="small"
              @change="timeChange"
              value-format="yyyy-MM-dd"
              v-model="dateSelect"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              clearable>
          </el-date-picker>
        </div>

        
      </div>
      <template v-slot:tbList="scope">
        <div v-if="scope.data.column.columnname === 'sys_tag'">
          <el-tag v-for="(item,index) in scope.data.column.data.sys_tag" size="mini" style="margin-right:10px" :key="index">{{ item }}</el-tag>
        </div>
        <div v-else-if="scope.data.column.columnname === 'industry'">
          <el-tag v-for="(item,index) in scope.data.column.data.industry" size="mini" style="margin-right:10px" :key="index">{{ item }}</el-tag>
        </div>
        <div v-else-if="scope.data.column.columnname === 'grade'">
          {{ grade(scope.data.column.data.grade) }}
        </div>
        <div v-else-if="scope.data.column.columnname === 'leader'">
          {{ scope.data.column.data.leader[0] && scope.data.column.data.leader[0].name }}
        </div>
        <div v-else>
          {{scope.data.column.data[[scope.data.column.columnname]]}}
        </div>
      </template>
      <template v-slot:tbOpreation="scope">
        <el-button type="text" size="small" @click="goDetail(scope.data.data)">详 情</el-button>
      </template>
    </basicLayout>

    <Detail ref="Detail" v-if="Object.keys(detail).length" :data="detail"></Detail>

  </div>
</template>

<script>
import Detail from './modules/detail'
export default {
  name: "index",
  components:{Detail},
  data() {
    return {
      options:[],
      list:[],
      detail:{},
      total:0,
      editableTabs:[
        {
          templetname:'我负责的',
          templetid:1
        },
        {
          templetname:'我参与的',
          templetid:2
        },
        {
          templetname:'我下属负责的',
          templetid:3
        },
        {
          templetname:'我下属参与的',
          templetid:4
        },
        {
          templetname:'我创建的',
          templetid:5
        }
      ],
      param:{
        "id":20221012164402,
        "content":{
          "pageNumber": 1,
          "pageSize": 20,
          "type":'',
          "deleted": 0,
          "isExport": false,
          "isend": 0,
          where:{
            a:''
          }
        }
      },
      dep:'',
      people:'',
      selectList:[],
      dateSelect:[]
    }
  },
  computed: {
    grade () {
      return (n) => {
        let result
        switch (n) {
          case 0:
            result = '无'
            break;
          case 1:
            result = '等级一'
            break;
          case 2:
            result = '等级二'
            break;
          case 3:
            result = '等级三'
            break;
          case 4:
            result = '等级四'
            break;
          case 5:
            result = '等级一五'
            break;
        }
        return result
      }
    }
  },
  methods:{
    listCreate (param) {
      console.log(param);
      param.content.type = ''
      param.content.dataid = ''
    },
    goDetail (data) {
      this.detail= {}
      this.$router.push({
        path:'salerportrait',
        query: {
          id:data.hrid
        }
      })
      setTimeout(() => {
        this.detail = data
        this.$nextTick(() => {
          this.$refs.Detail.dialogFormVisible=true
        })
      })
    },
    async getDepAndpeople () {
      let res = await this.$api.requested({
        "id": 20230620102004,
        "content": {
        }
      })
      this.selectList = res.data
      console.log(this.selectList,'范围选择数据');
    },
    timeChange () {
      this.$refs.list.param.content.where.begindate = this.dateSelect[0]
      this.$refs.list.param.content.where.enddate = this.dateSelect[1]
      this.$refs.list.listData()
    },
    depChange(){
      this.people = ''
      this.$refs.list.param.content.type = 1
      this.$refs.list.param.content.dataid = this.dep
      this.$refs.list.listData()
    },
    peopleChange(){
      this.dep = ''
      this.$refs.list.param.content.type = 0
      this.$refs.list.param.content.dataid = this.people
      this.$refs.list.listData()
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.param.content.pageSize = val
      this.listData()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.param.content.pageNumber = val
      this.listData()
    },
  },
  created () {
    this.getDepAndpeople()
    this.people = JSON.parse(sessionStorage.getItem('active_account')).name
  }
}
</script>

<style scoped>

</style>