{"remainingRequest":"/Users/ryousaku/Desktop/ming/mingpay/node_modules/vue-loader/lib/index.js??vue-loader-options!/Users/ryousaku/Desktop/ming/mingpay/src/components/pages/PaymentManagement/RecordsOfConsumption.vue?vue&type=style&index=0&id=f79195fa&lang=less&scoped=true&","dependencies":[{"path":"/Users/ryousaku/Desktop/ming/mingpay/src/components/pages/PaymentManagement/RecordsOfConsumption.vue","mtime":1560931369991},{"path":"/Users/ryousaku/Desktop/ming/mingpay/node_modules/css-loader/index.js","mtime":1557826125722},{"path":"/Users/ryousaku/Desktop/ming/mingpay/node_modules/vue-loader/lib/loaders/stylePostLoader.js","mtime":1557826125950},{"path":"/Users/ryousaku/Desktop/ming/mingpay/node_modules/postcss-loader/src/index.js","mtime":1557826125898},{"path":"/Users/ryousaku/Desktop/ming/mingpay/node_modules/less-loader/dist/cjs.js","mtime":1557889176706},{"path":"/Users/ryousaku/Desktop/ming/mingpay/node_modules/cache-loader/dist/cjs.js","mtime":1557826125621},{"path":"/Users/ryousaku/Desktop/ming/mingpay/node_modules/vue-loader/lib/index.js","mtime":1557826125950}],"contextDependencies":[],"result":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.searchBox{\n  display: flex;\n  margin-bottom: 20px;\n}\n.searchBox > input {\n  margin-right: 20px;\n  max-width: 180px;\n}\n.operationTable a{\n  margin-right: 8px;\n}\n.searchUserMessage{\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  font-size: 12px;\n  padding: 8px 8px;\n  border: 1px solid #cccccc;\n  margin-bottom: 15px;\n  border-radius: 8px;\n  position: relative;\n}\n.searchUserMessage img{\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  margin-bottom: 8px;\n}\n.positionDiv{\n  height: 12px;\n  width: 12px;\n  transform:rotate(45deg);\n  border-left: 1px solid #cccccc;\n  border-top: 1px solid #cccccc;\n  position: absolute;\n  top: -7px;\n  left: 30px;\n  background: white;\n  z-index: 99;\n}\n.clearUserMessage{\n  position: absolute;\n  right: 10px;\n}\n",{"version":3,"sources":["RecordsOfConsumption.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2OA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"RecordsOfConsumption.vue","sourceRoot":"src/components/pages/PaymentManagement","sourcesContent":["<template>\n  <div class=\"RecordsOfConsumption\">\n    <div class=\"searchBox\">\n      <a-input placeholder=\"消费人\" @click=\"choosePeople\" style=\"width: 120px\"/>\n      <a-select defaultValue=\"状态\" style=\"width: 120px;margin-right: 20px;\" @change=\"selectHandRecords\">\n        <a-select-option value=\"SUCCESS\">已消费</a-select-option>\n        <a-select-option value=\"WAITING_PERMIT\">退款审核中</a-select-option>\n        <a-select-option value=\"REFUND_SUCCESS\">已退款</a-select-option>\n      </a-select>\n      <a-button type=\"primary\" @click=\"queryRecordList()\">查询</a-button>\n    </div>\n    <div class=\"searchUserMessage\" v-if=\"searchSource.UserMessage.emplId\">\n      <div class=\"positionDiv\"></div>\n      <div class=\"clearUserMessage\"><a href=\"javascript:;\" @click=\"clearUserMessage\">清除</a></div>\n      <img v-if=\"searchSource.UserMessage.avatar\" :src=\"searchSource.UserMessage.avatar\" :alt=\"searchSource.UserMessage.name\"/>\n      <img v-else :src=\"this.avatarCanvasFn(searchSource.UserMessage.name)\" :alt=\"searchSource.UserMessage.name\">\n      <span>{{ searchSource.UserMessage.name }}</span>\n    </div>\n     <a-table :columns=\"columns\" :dataSource=\"recordsList\" size=\"default\" rowKey=\"orderNo\" :pagination=\"pagination\" @change=\"handleTableChange\">\n        <span slot=\"userName\">消费人</span>\n        <span slot=\"departmentNameList\" slot-scope=\"departmentNameList\">\n          {{ departmentNameListToStr(departmentNameList) }}\n        </span>\n        <span slot=\"chargeAmount\">消费金额</span>\n        <span slot=\"orderNo\">单号</span>\n        <span slot=\"status\" slot-scope=\"status\">\n          {{ status === MINGPAY_RECORDS_STATUS.SUCCESS ? '已消费' : status === MINGPAY_RECORDS_STATUS.WAITING_PERMIT ? 'WAITING_PERMIT' : '退款成功'}}\n        </span>\n        <span slot=\"remark\">备注</span>\n        <span slot=\"createTime\" slot-scope=\"createTime\">\n          {{ createTimeToStr(createTime) }}\n        </span>\n        <span slot=\"action\" slot-scope=\"text, record, index\" class=\"operationTable\">\n          <a href=\"javascript:;\" @click=\"refundModal(record, text, index)\">退款</a>\n        </span>\n      </a-table>\n      <a-modal title=\"发起退款\" v-model=\"visible\" @ok=\"refund()\">\n        <a-form :form=\"form\">\n          <a-form-item label=\"退款金额\" :label-col=\"{ span: 5 }\" :wrapper-col=\"{ span: 12 }\" >\n            <a href=\"javascript:;\">{{ refundSelect.chargeAmount }}</a>\n          </a-form-item>\n          <a-form-item label=\"备注\" :label-col=\"{ span: 5 }\" :wrapper-col=\"{ span: 12 }\" >\n            <a-textarea v-decorator=\"['remark', {rules: [{ required: true, message: '备注不能为空' }]}]\"/>\n          </a-form-item>\n        </a-form>\n      </a-modal>\n  </div>\n</template>\n\n<script>\nimport { config } from './../../../api/config.js'\nimport { $http } from './../../../api/axios.js'\nimport { MINGPAY_RECORDS_STATUS } from './../../../api/constant'\nexport default {\n  name: 'recordsOfConsumption',\n  data () {\n    return {\n      visible: false,\n      columns: [{\n        title: '消费人',\n        dataIndex: 'userName'\n      }, {\n        title: '部门',\n        dataIndex: 'departmentNameList',\n        scopedSlots: { customRender: 'departmentNameList' }\n      }, {\n        title: '消费金额',\n        dataIndex: 'chargeAmount'\n      },\n      // {\n      //   title: '消费类型',\n      //   dataIndex: 'cardNo',\n      //   scopedSlots: { customRender: 'cardNo' }\n      // },\n      {\n        title: '单号',\n        dataIndex: 'orderNo'\n      }, {\n        title: '状态',\n        dataIndex: 'orderStatus',\n        scopedSlots: { customRender: 'orderStatus' }\n      }, {\n        title: '备注',\n        dataIndex: 'remark'\n      }, {\n        title: '时间',\n        dataIndex: 'createTime',\n        scopedSlots: { customRender: 'createTime' }\n      }, {\n        title: '操作',\n        dataIndex: 'action',\n        scopedSlots: { customRender: 'action' }\n      }],\n      searchSource: {\n        UserMessage: {\n          avatar: '',\n          emplId: '',\n          name: ''\n        },\n        status: '',\n        agentId: ''\n      },\n      recordsList: [],\n      pagination: {\n        current: 1,\n        defaultCurrent: 10,\n        defaultPageSize: 2,\n        hideOnSinglePage: true,\n        total: 0\n      },\n      refundSelect: '',\n      form: this.$form.createForm(this)\n    }\n  },\n  created: function () {\n    this.queryRecordList()\n  },\n  methods: {\n    refundModal (record, text, index) {\n      this.visible = !this.visible\n      this.refundSelect = record\n    },\n    // 退款\n    refund () {\n      let refundData = this.$qs.stringify({\n        orderNo: this.refundSelect.orderNo,\n        sum: this.refundSelect.chargeAmount,\n        remark: this.form.getFieldsValue().remark,\n        orgId: sessionStorage.getItem('corpId')\n      })\n      $http.get(`/v1/consume/refund?${refundData}`).then((res) => {\n        if (res.data.message === 'SUCCESS') {\n          this.$message.success('退款成功')\n        } else {\n          this.$message.success(res.data.message)\n        }\n        console.log(res)\n      }).catch(() => {\n        this.$message.error('退款失败')\n      })\n    },\n    // table部门表格字符串处理\n    departmentNameListToStr (str) {\n      let departmentNameListStr = ''\n      if (str.length !== 0) {\n        str.map((data) => {\n          departmentNameListStr = `${departmentNameListStr}${data}，`\n        })\n      }\n      departmentNameListStr = departmentNameListStr.substring(0, departmentNameListStr.length - 1)\n      return departmentNameListStr\n    },\n    // 获取消费列表\n    queryRecordList () {\n      let RecordListData = this.$qs.stringify({\n        currentPage: this.pagination.current,\n        pageNumber: this.pagination.defaultPageSize,\n        status: this.searchSource.status,\n        userId: this.searchSource.UserMessage.emplId,\n        agentId: this.searchSource.agentId,\n        orgId: sessionStorage.getItem('corpId')\n      })\n      $http.get(`/v1/charge/list_expense_record?${RecordListData}`).then((res) => {\n        let data = res.data.data\n        this.recordsList = data.recordList\n        this.pagination.total = parseInt(data.totalCount)\n        console.log(res.data.data)\n      })\n    },\n    // 选人组件调用\n    choosePeople () {\n      config.ddready('ddchooseOne').then((res) => {\n        this.searchSource.UserMessage = res[0]\n      })\n    },\n    // 表格时间处理\n    createTimeToStr (time) {\n      let timeData = new Date(parseInt(time))\n      let year = timeData.getFullYear()\n      let month = timeData.getMonth() + 1\n      let date = timeData.getDate()\n      let hour = timeData.getHours()\n      let minute = timeData.getMinutes()\n      return `${year}年${month}月${date}日 ${hour}:${minute}`\n    },\n    // 清理选择帅选人list\n    clearUserMessage () {\n      this.searchSource.UserMessage = {\n        avatar: '',\n        emplId: '',\n        name: ''\n      }\n    },\n    // 用户头像处理\n    avatarCanvasFn (name) {\n      let canvas = document.createElement('canvas')\n      let con = canvas.getContext('2d')\n      let ratio = this.getPixelRatio(con)\n      canvas.style.width = 40 + 'px'\n      canvas.style.height = 40 + 'px'\n      canvas.width = 40 * ratio\n      canvas.height = 40 * ratio\n      con.scale(ratio, ratio)\n      con.fillStyle = '#1890ff'\n      con.fillRect(0, 0, 40, 40)\n      con.fillStyle = '#ffffff'\n      con.font = '12px Arial'\n      con.textAlign = 'center'\n      con.fillText(name, 20, 25)\n      return canvas.toDataURL()\n    },\n    // 头像模糊处理\n    getPixelRatio (context) {\n      var backingStore = context.backingStorePixelRatio ||\n        context.webkitBackingStorePixelRatio ||\n        context.mozBackingStorePixelRatio ||\n        context.msBackingStorePixelRatio ||\n        context.oBackingStorePixelRatio ||\n        context.backingStorePixelRatio || 1\n      return (window.devicePixelRatio || 1) / backingStore\n    },\n    handleTableChange (pagination, filters, sorter) {\n      this.pagination.current = pagination.current\n      this.queryRecordList()\n    },\n    // 搜索条件消费单状态\n    selectHandRecords (value) {\n      console.log(value)\n      this.searchSource.cardStatus = value\n    }\n  }\n}\n</script>\n\n<style lang=\"less\" scoped>\n.searchBox{\n  display: flex;\n  margin-bottom: 20px;\n}\n.searchBox > input {\n  margin-right: 20px;\n  max-width: 180px;\n}\n.operationTable a{\n  margin-right: 8px;\n}\n.searchUserMessage{\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  font-size: 12px;\n  padding: 8px 8px;\n  border: 1px solid #cccccc;\n  margin-bottom: 15px;\n  border-radius: 8px;\n  position: relative;\n}\n.searchUserMessage img{\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  margin-bottom: 8px;\n}\n.positionDiv{\n  height: 12px;\n  width: 12px;\n  transform:rotate(45deg);\n  border-left: 1px solid #cccccc;\n  border-top: 1px solid #cccccc;\n  position: absolute;\n  top: -7px;\n  left: 30px;\n  background: white;\n  z-index: 99;\n}\n.clearUserMessage{\n  position: absolute;\n  right: 10px;\n}\n</style>\n"]}]}