AllowancePayment.vue

<template>
  <div class="AllowancePayment">
    <div class="searchBox">
      <a-select placeholder="津贴类型" :allowClear="true" style="width: 120px;margin-right: 20px;" @change="selectHandType">
        <a-select-option value="TRAVEL">交通补助</a-select-option>
        <a-select-option value="MEAL">餐补</a-select-option>
      </a-select>
      <a-select placeholder="经办人" :allowClear="true" style="width: 120px;margin-right: 20px;" @change="selectAgent">
        <a-select-option v-for="(item, index) in agentList" :key="index" :value="item.ddUserId">{{ item.name }}</a-select-option>
      </a-select>
      <a-button type="primary" @click="search()">查询</a-button>
      <a-button type="primary" @click="changeModel()" style="margin-left: 20px;"><a-icon type="pay-circle" />发放津贴</a-button>
    </div>
    <!-- <div class="searchUserMessage" v-if="searchSource.UserMessage.emplId">
      <div class="positionDiv"></div>
      <div class="clearUserMessage"><a href="javascript:;" @click="clearUserMessage">清除</a></div>
      <div style="text-align: center">
        <img v-if="searchSource.UserMessage.avatar" :src="searchSource.UserMessage.avatar" :alt="searchSource.UserMessage.name"/>
        <img v-else :src="this.avatarCanvasFn(searchSource.UserMessage.name)" :alt="searchSource.UserMessage.name">
        <span>{{ searchSource.UserMessage.name }}</span>
      </div>
    </div> -->
     <a-table :columns="columns" :dataSource="recordsList" size="default" rowKey="grantNumber" :pagination="pagination" @change="handleTableChange">
        <span slot="recipient">成员</span>
        <span slot="money">金额</span>
        <span slot="type" slot-scope="type">{{ type === 'TRAVEL' ? '交通补助' : '餐补' }}</span>
        <span slot="grantNumber">单号</span>
        <span slot="agentId">经办人</span>
        <span slot="createTime" slot-scope="createTime">
          {{ createTimeToStr(createTime) }}
        </span>
        <span slot="remark">备注</span>
        <span slot="action" slot-scope="text, record, index" class="operationTable">
          <a href="javascript:;" @click="toAllowanceDetails(record, text, index)">查看详情</a>
        </span>
      </a-table>
      <a-spin :spinning="spinning" :delay="delayTime">
        <a-modal title="发放津贴"  v-model="visible" @ok="createSubsidy()">
          <a-form :form="form">
            <a-form-item
              v-bind="formItemLayout"
              label="发放类型"
              has-feedback
            >
              <a-select
                v-decorator="[
                  'select',
                  {rules: [{ required: true, message: ' 津贴类型' }]}
                ]"
                placeholder="请选择津贴类型"
              >
                <a-select-option value="TRAVEL">
                  交通补助
                </a-select-option>
                <a-select-option value="MEAL">
                  餐补
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="发放金额" v-bind="formItemLayout" >
              <a-input
                v-decorator="['orderPrice',{rules: [{required: true, message: '充值金额不能为空'}, {validator: rechargeNum}]}]"
              />
            </a-form-item>
            <a-form-item
              v-bind="formItemLayout"
              label="截止日期"
            >
              <a-date-picker
                placeholder="请选择截止日期"
                :disabledDate="disabledDate"
                :showToday="false"
                v-decorator="['date-picker', config]"
              />
            </a-form-item>
            <a-form-item label="选择成员" v-bind="formItemLayout">
              <div class="peopleBox" @click="choosePeople()">
                {{ peopleListStr() }}
              </div>
            </a-form-item>
            <a-form-item label="备注" v-bind="formItemLayout" >
              <a-textarea v-decorator="['remark', {rules: [{ required: true, message: '备注不能为空' }]}]"/>
            </a-form-item>
          </a-form>
        </a-modal>
      </a-spin>
  </div>
</template>

<script>
import { config } from './../../../api/config.js'
import { $http } from './../../../api/axios.js'
import { MINGPAY_RECORDS_STATUS } from './../../../api/constant'
import moment from 'moment'
export default {
  name: 'AllowancePayment',
  data () {
    return {
      spinning: false,
      delayTime: 100,
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        }
      },
      columns: [{
        title: '成员',
        dataIndex: 'recipient',
        width: '20%'
      }, {
        title: '金额',
        dataIndex: 'money'
      }, {
        title: '津贴类型',
        dataIndex: 'type',
        scopedSlots: { customRender: 'type' }
      }, {
        title: '单号',
        dataIndex: 'grantNumber'
      }, {
        title: '经办人',
        dataIndex: 'agentId'
      }, {
        title: '备注',
        dataIndex: 'remark'
      }, {
        title: '时间',
        dataIndex: 'createTime',
        scopedSlots: { customRender: 'createTime' }
      }, {
        title: '操作',
        dataIndex: 'action',
        scopedSlots: { customRender: 'action' }
      }],
      form: this.$form.createForm(this),
      visible: false,
      searchSource: {
        UserMessage: {
          avatar: '',
          emplId: '',
          name: ''
        },
        type: '',
        agentId: ''
      },
      recordsList: [],
      pagination: {
        current: 1,
        defaultCurrent: 10,
        defaultPageSize: 10,
        hideOnSinglePage: true,
        total: 0
      },
      config: {
        rules: [{ type: 'object', required: true, message: '请选择时间' }]
      },
      userIdListObj: [],
      departmentIdListObj: [],
      agentList: []
    }
  },
  created: function () {
    this.queryRecordList()
    this.getAgentList()
  },
  methods: {
    // 获取收银员列表
    getAgentList () {
      let AgentData = this.$qs.stringify({
        orgId: localStorage.getItem('orgId')
      })
      $http.get(`/v1/account/query_user_admin_list?${AgentData}`).then((res) => {
        this.agentList = res.data.data.recordList
      })
    },
    toAllowanceDetails (record, text, index) {
      this.$router.push({ name: 'allowanceDetails', params: { allowanceDetails: record } })
    },
    selectAgent (value) {
      this.searchSource.agentId = value
    },
    disabledDate (current) {
      // Can not select days before today and today
      console.log(moment().endOf('day'))
      return current < moment(Date.now()).add(-1, 'day')
    },
    // 获取消费列表
    queryRecordList () {
      let RecordData = this.$qs.stringify({
        currentPage: this.pagination.current,
        pageNumber: this.pagination.defaultPageSize,
        type: this.searchSource.type,
        agentId: this.searchSource.agentId,
        orgId: localStorage.getItem('orgId')
      })
      $http.get(`/v1/account/list_couponRecord?${RecordData}`).then((res) => {
        let data = res.data.data
        this.recordsList = data.list
        this.pagination.total = parseInt(data.total)
      })
    },
    // 校验账户充值金额大小和纯数字
    rechargeNum (rule, value, callback) {
      const temp = /^\d+\.?\d{0,2}$/
      if (!temp.test(value) || parseFloat(value) > 10000) {
        callback('请输入正确的金额，最多保留小数点后两位，津贴金额最多为一万元')
        return
      }
      callback()
    },
    // 表格时间处理
    createTimeToStr (time) {
      let timeData = new Date(parseInt(time))
      let year = timeData.getFullYear()
      let month = timeData.getMonth() + 1
      let date = timeData.getDate()
      let hour = timeData.getHours()
      let minute = timeData.getMinutes()
      return `${year}年${month}月${date}日 ${hour}:${minute}`
    },
    // 清理选择帅选人list
    clearUserMessage () {
      this.searchSource.UserMessage = {
        avatar: '',
        emplId: '',
        name: ''
      }
    },
    // 用户头像处理
    avatarCanvasFn (name) {
      let canvas = document.createElement('canvas')
      let con = canvas.getContext('2d')
      let ratio = this.getPixelRatio(con)
      canvas.style.width = 40 + 'px'
      canvas.style.height = 40 + 'px'
      canvas.width = 40 * ratio
      canvas.height = 40 * ratio
      con.scale(ratio, ratio)
      con.fillStyle = '#1890ff'
      con.fillRect(0, 0, 40, 40)
      con.fillStyle = '#ffffff'
      con.font = '12px Arial'
      con.textAlign = 'center'
      con.fillText(name, 20, 25)
      return canvas.toDataURL()
    },
    // 头像模糊处理
    getPixelRatio (context) {
      var backingStore = context.backingStorePixelRatio ||
        context.webkitBackingStorePixelRatio ||
        context.mozBackingStorePixelRatio ||
        context.msBackingStorePixelRatio ||
        context.oBackingStorePixelRatio ||
        context.backingStorePixelRatio || 1
      return (window.devicePixelRatio || 1) / backingStore
    },
    handleTableChange (pagination, filters, sorter) {
      this.pagination.current = pagination.current
      this.queryRecordList()
    },
    // 搜索条件津贴类型
    selectHandType (value) {
      this.searchSource.type = value
    },
    peopleListStr () {
      let str = ''
      this.userIdListObj.map((item, index) => {
        str = str + item.name + ','
      })
      this.departmentIdListObj.map((item, index) => {
        str = str + item.name + ','
      })
      return str.substring(0, str.length - 1)
    },
    createSubsidy () {
      this.spinning = true
      this.form.validateFields((err, fieldsValue) => {
        if (err) {
          return
        }
        // Should format date value before submit.
        const values = {
          ...fieldsValue,
          'date-picker': fieldsValue['date-picker'].format('YYYY-MM-DD')
        }
        let userIdList = []
        let departmentIdList = []
        this.userIdListObj.map((item, index) => {
          userIdList.push(item.emplId)
        })
        this.departmentIdListObj.map((item, inde) => {
          departmentIdList.push(item.id)
        })
        let RecordData = this.$qs.stringify({
          userIds: userIdList,
          departmentIds: departmentIdList,
          money: values.orderPrice,
          endTime: `${values['date-picker']} 23:59:59`,
          remark: values.remark,
          type: values.select,
          orgId: localStorage.getItem('orgId')
        })
        $http.get(`/v1/account/batch_create_subsidy?${RecordData}`).then((res) => {
          if (res.data.resultCode === '0') {
            this.visible = false
            this.form.resetFields()
            this.userIdListObj = []
            this.departmentIdListObj = []
            this.$message.success(res.data.data)
            this.spinning = false
            this.queryRecordList()
          } else {
            this.$message.error(res.data.message)
          }
        })
      })
    },
    changeModel () {
      this.visible = !this.visible
    },
    choosePeople () {
      config.ddready('ddchoose').then((res) => {
        this.userIdListObj = res.users
        this.departmentIdListObj = res.departments
        this.form.getFieldsValue().peopleList = 'ok'
      })
    },
    search () {
      this.pagination.current = 1
      this.queryRecordList()
    }
  }
}
</script>

<style lang="less" scoped>
.searchBox{
  display: flex;
  margin-bottom: 20px;
}
.searchBox > input {
  margin-right: 20px;
  max-width: 180px;
}
.operationTable a{
  margin-right: 8px;
}
.searchUserMessage{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 12px;
  padding: 8px 8px;
  border: 1px solid #cccccc;
  margin-bottom: 15px;
  border-radius: 8px;
  position: relative;
}
.searchUserMessage img{
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-bottom: 8px;
}
.positionDiv{
  height: 12px;
  width: 12px;
  transform:rotate(45deg);
  border-left: 1px solid #cccccc;
  border-top: 1px solid #cccccc;
  position: absolute;
  top: -7px;
  left: 30px;
  background: white;
  z-index: 99;
}
.clearUserMessage{
  position: absolute;
  right: 10px;
}
.peopleBox{
  width: 100%;
  border: 1px solid #d9d9d9;
  min-height: 40px;
  border-radius: 4px;
  padding: 4px 11px;
  font-size: 14px;
  line-height: 1.5;
  cursor: pointer;
}
</style>