gdy_qywx_m/src/components/pk/add_log.vue

<template>
  <div>
    <van-nav-bar :title="title" left-text="返回" @click-left="$route_back" left-arrow></van-nav-bar>
    <div class="body_com has_header add_log_box">
      <scroller>
        <van-cell-group>
          <van-cell title="选择团队" required is-link @click="select_teams = true" :value="select_teams_item.name?select_teams_item.name:'请选择团队'"></van-cell>
          <van-cell title="选择人员" v-if="log_type == 'employee'" required is-link @click="openUser" :value="employee_btn">
            <template slot="default">
              <span class=""><Wxopendata type="userName" :openid="employee_btn"></Wxopendata></span>
            </template>
          </van-cell>
          <van-cell title="选择规则" required is-link @click="select_rule = true" :value="select_rule_item.name?select_rule_item.name:'请选择规则'"></van-cell>
          <van-cell title="事件时间" required is-link @click="showCalendar = true" :value="time"></van-cell>
          <van-field required v-model="point"  type="digit" label="积分" placeholder="请输入积分" />
          <van-field
            v-model="remark"
            rows="3"
            autosize
            label="留言"
            type="textarea"
            maxlength="30"
            placeholder="请输入留言"
            show-word-limit
            v-validate="'min:3'"
          />
        </van-cell-group>
        <van-cell-group>
          <van-button type="info" @click="sava" block>提交</van-button>
        </van-cell-group>
      </scroller>

      <!-- 团队选择 -->
      <van-popup v-model="select_teams" position="bottom">
        <van-picker
          show-toolbar
          title="选择团队"
          :columns="pk_detail"
          value-key="name"
          @cancel="onCancel"
          @confirm="onConfirm"
        />
      </van-popup>

      <!-- 规则选择 -->
      <van-popup v-model="select_rule" position="bottom">
        <van-picker
          show-toolbar
          title="选择规则"
          :columns="rules_list"
          value-key="name"
          @cancel="ruleCancel"
          @confirm="ruleConfirm"
        />
      </van-popup>

      <van-calendar v-model="showCalendar" color="#238dfa" @confirm="calendarConfirm" />

      <van-popup v-model="select_employee" class="employee_popup">
        <van-nav-bar title="选择员工" left-text="取消" @click-left="employee_cancel" right-text="完成" @click-right="employee_Confirm" ></van-nav-bar>
        <van-checkbox-group v-model="employee_result" ref="checkboxGroup" :max="10" :label-disabled="false">
          <van-cell-group>
            <div style="padding: 0.24rem 0.32rem;font-size: 0.32rem;" :key="index" class="userActive" v-for="(item, index) in employee_list">
                <van-checkbox :name="item"><Wxopendata type="userName" :openid="item.name"></Wxopendata></van-checkbox>
            </div>
          </van-cell-group>
        </van-checkbox-group>
      </van-popup>

    </div>
  </div>
</template>
<script>
import request from '@/utils/request'
import Vue from 'vue'
import moment from 'moment'
import {Picker, Calendar, Popup, Cell, CellGroup, Checkbox, CheckboxGroup} from 'vant'
Vue.use(Picker).use(Calendar).use(Popup).use(Cell).use(CellGroup).use(Checkbox).use(CheckboxGroup)
export default {
  // 数据
  data () {
    return {
      title: '录入PK积分',
      get_id: this.$route.query.pk_id,
      log_type: this.$route.query.log_type,
      page: 1,
      pk_detail: [],
      rules_list: [],
      // 选择团队
      select_teams: false,
      select_teams_item: {},
      // 选择规则
      select_rule: false,
      select_rule_item: {},
      // 时间选择器
      showCalendar: false,
      time: moment().format('YYYY-MM-DD'),
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2055, 0, 1),
      currentDate: new Date(),
      // 选择人员
      select_employee: false,
      employee_result: [],
      employee_list: [],
      employee_btn: '',
      employee_result_id: [],
      // 积分
      point: '',
      remark: ''
    }
  },
  methods: {
    openUser(){
      if(!this.select_teams_item.name){
        this.$toast('请先选择团队');
        return false
      }
      this.select_employee = true
    },
    // 保存
    sava () {
      let self = this
      let data = {
        pk_id: self.get_id,
        log_type: self.$route.query.log_type,
        team_id: self.select_teams_item.id,
        event_time: self.time,
        point: self.point,
        rule_id: self.select_rule_item.id,
        team_member: self.employee_result_id
      }
      if (self.remark) {
        data.remark = self.remark
      }
      self.showLoading()
      request('post', '/api/integral/pk/log', data).then((res) => {
        if (res.data.code == 1) {
          self.$toast.clear()
          // self.$toast(res.data.msg)
          self.$route_back()
        } else {
          self.$toast.clear()
          self.$toast(res.data.msg)
        }
      }).catch((e) => {
        self.$toast.clear()
      })
    },
    // 管理员选择
    employee_cancel () {
      this.select_employee = false
    },
    employee_Confirm () {
      let arr_name = []
      this.employee_result_id = []
      this.employee_btn = ''
      console.log(this.employee_result)
      for (let i = 0; i < this.employee_result.length; i++) {
        arr_name.push(this.employee_result[i].name)
        this.employee_result_id.push(this.employee_result[i].id)
      }
      this.employee_btn = arr_name.join(',')
      this.select_employee = false
    },
    // 确认选择时间
    calendarConfirm (date) {
      this.time = moment(date).format('YYYY-MM-DD')
      this.showCalendar = false
    },
    // 关闭弹窗
    onCancel () {
      this.select_teams = false
    },
    ruleCancel () {
      this.select_rule = false
    },
    // 选中规则确认
    ruleConfirm (data) {
      this.select_rule_item = data
      this.select_rule = false
    },
    // 选中团队确认
    onConfirm (data) {
      this.select_teams_item = data
      this.employee_list = data.members
      this.select_teams = false
    },
    // 加载
    showLoading () {
      this.$toast.loading({
        loadingType: 'spinner',
        message: '正在处理'
      })
    },
    // 查询PK 详情
    get_pk_detail () {
      let self = this
      self.showLoading()
      request('get', '/api/integral/pk/teams', {pk_id: self.get_id, page: self.page, page_size: '2000'}).then((res) => {
        if (res.data.code == '1') {
          self.pk_detail = res.data.data.list.list
        } else {
          self.$toast(res.data.msg)
        }
      })
    },
    // 查询规则列表
    get_rules_list () {
      let self = this
      self.showLoading()
      request('get', '/api/integral/pk/rules', {pk_id: self.get_id, page: self.page, page_size: 1000}).then((res) => {
        if (res.data.code == '1') {
          self.rules_list = res.data.data.list.list
        } else {
          self.$toast(res.data.msg)
        }
      })
    }
  },
  // 生命周期 --- 创建完成
  created () {
    this.get_pk_detail()
    this.get_rules_list()
  }
}
</script>
<style scoped>
  .userActive:active{
    background-color: #F2F3F5;
  }
  .body_com {
    height: calc(100% - 1rem);
    position: relative;
  }
  .employee_popup{
    width: 100vw;
    height: 100vh;
  }
  .employee_img{
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    margin-left: 0.2rem;
    float: left;
  }
  .employee_name{
    display: inline-block;
    height: 0.8rem;
    line-height: 0.8rem;
    margin-left: 0.2rem;
  }
</style>