{"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/AccountManagement.vue?vue&type=style&index=0&id=01b7bc3f&lang=less&scoped=true&","dependencies":[{"path":"/Users/ryousaku/Desktop/ming/mingpay/src/components/pages/PaymentManagement/AccountManagement.vue","mtime":1560925161100},{"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\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: 15px;\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":["AccountManagement.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6aA;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":"AccountManagement.vue","sourceRoot":"src/components/pages/PaymentManagement","sourcesContent":["<template>\n <div class=\"AccountManagement\">\n <div class=\"searchBox\">\n <a-input placeholder=\"选择成员\" @click=\"choosePeople\" style=\"width: 120px\"/>\n <a-input placeholder=\"输入卡号\" v-model=\"searchSource.cardNum\" style=\"width: 120px\"/>\n <a-select defaultValue=\"卡片状态\" style=\"width: 120px;margin-right: 20px;\" @change=\"selectHandleChangeCard\">\n <a-select-option value=\"ACTIVE\">已绑卡</a-select-option>\n <a-select-option value=\"NOT_EXIST\">未绑卡</a-select-option>\n <a-select-option value=\"UNACTIVE\">冻结</a-select-option>\n </a-select>\n <a-select defaultValue=\"账户状态\" style=\"width: 120px;margin-right: 20px;\" @change=\"selectHandleChangeAccount\">\n <a-select-option value=\"ACTIVE\">使用中</a-select-option>\n <a-select-option value=\"LOG_OFF\">冻结并结现</a-select-option>\n </a-select>\n <a-button type=\"primary\" @click=\"queryAccountList()\">查询</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=\"accountList\" size=\"default\" rowKey=\"userId\" :pagination=\"pagination\" @change=\"handleTableChange\">\n <span slot=\"name\">姓名</span>\n <span slot=\"departmentNameList\" slot-scope=\"departmentNameList\">\n {{ departmentNameListToStr(departmentNameList) }}\n </span>\n <span slot=\"realityBalance\">余额</span>\n <span slot=\"cardNo\" slot-scope=\"cardNo, record\">\n {{ cardNo ? cardNo : '未绑卡' }}\n <br/>\n {{ cardNo ? record.cardStatus === 'UNACTIVE' ? '已冻结' : '使用中' : ''}}\n </span>\n <span slot=\"status\" slot-scope=\"status\">\n {{ status === MINGPAY_ACCOUNT_STATUS.ACTIVE ? '使用中' : '已注销并结现' }}\n </span>\n <span slot=\"action\" slot-scope=\"text, record, index\" class=\"operationTable\">\n <a href=\"javascript:;\" @click=\"ToViewAllowances(record)\">查看津贴</a>\n <a v-if=\"record.status = MINGPAY_ACCOUNT_STATUS.ACTIVE\" href=\"javascript:;\" @click=\"showModal(record.userId, record.name, index)\">充值</a>\n <a-dropdown v-if=\"record.status = MINGPAY_ACCOUNT_STATUS.ACTIVE\">\n <a class=\"ant-dropdown-link\" href=\"javascript:;\">\n 更多操作 <a-icon type=\"down\" />\n </a>\n <a-menu slot=\"overlay\">\n <a-menu-item v-if=\"record.cardStatus === MINGPAY_ACCOUNT_STATUS.ACTIVE && record.cardNo \">\n <a href=\"javascript:;\" @click=\"showConfirm(record.userId, 1, index)\">冻结实体卡</a>\n </a-menu-item>\n <a-menu-item v-if=\"record.cardStatus === MINGPAY_ACCOUNT_STATUS.UNACTIVE && record.cardNo\">\n <a href=\"javascript:;\" @click=\"showConfirm(record.userId, 2, index)\">解冻实体卡</a>\n </a-menu-item>\n <a-menu-item v-if=\"record.cardNo\">\n <a href=\"javascript:;\" @click=\"confimBindSure(record.userId, index)\">解绑实体卡</a>\n </a-menu-item>\n <a-menu-item v-else>\n <a href=\"javascript:;\" @click=\"changeVisible2(record.userId, index)\">绑定实体卡</a>\n </a-menu-item>\n <a-menu-item v-if=\"record.status != MINGPAY_ACCOUNT_STATUS.LOG_OFF\">\n <a href=\"javascript:;\" @click=\"showConfirm(record.userId, 3, index)\">注销并结现</a>\n </a-menu-item>\n </a-menu>\n </a-dropdown>\n </span>\n </a-table>\n <a-modal title=\"绑定实体卡\" v-model=\"visible2\" @ok=\"cardOperation(2)\">\n <a-form :form=\"updateBindCardStatusForm\">\n <a-form-item label=\"实体卡号\" :label-col=\"{ span: 5 }\" :wrapper-col=\"{ span: 12 }\" >\n <a-input v-decorator=\"['cardNo', {rules: [{ required: true, message: '请填写正确的实体卡号!' }, {validator: bindCardNum}]}]\"/>\n </a-form-item>\n </a-form>\n </a-modal>\n <a-modal title=\"现金充值\" v-model=\"visible\" @ok=\"internalRecharge()\">\n <a-form :form=\"form\">\n <a-form-item label=\"充值金额\" :label-col=\"{ span: 5 }\" :wrapper-col=\"{ span: 12 }\" >\n <a-input\n v-decorator=\"['orderPrice',{rules: [{required: true, message: '充值金额不能为空'}, {validator: rechargeNum}]}]\"\n />\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 <!-- 账户管理 -->\n <!-- <button @click=\"asd()\">鉴权</button> -->\n <!-- <button @click=\"asd2()\"> 免等</button> -->\n </div>\n</template>\n\n<script>\nimport { config } from './../../../api/config.js'\nimport { $http } from './../../../api/axios.js'\nimport { MINGPAY_ACCOUNT_STATUS } from './../../../api/constant'\n// import { avatarFn } from './../../../api/avatar'\nexport default {\n name: 'accountManagement',\n components: {},\n data () {\n return {\n visible: false,\n visible2: false,\n formLayout: 'horizontal',\n form: this.$form.createForm(this),\n updateBindCardStatusForm: this.$form.createForm(this),\n MINGPAY_ACCOUNT_STATUS: MINGPAY_ACCOUNT_STATUS,\n data: [],\n pagination: {\n current: 1,\n defaultCurrent: 10,\n defaultPageSize: 2,\n hideOnSinglePage: true,\n total: 0\n },\n columns: [{\n title: '成员',\n dataIndex: 'name',\n width: '90px'\n }, {\n title: '部门',\n dataIndex: 'departmentNameList',\n scopedSlots: { customRender: 'departmentNameList' },\n width: '140px'\n }, {\n title: '余额',\n dataIndex: 'realityBalance'\n }, {\n title: '实体卡状态',\n dataIndex: 'cardNo',\n scopedSlots: { customRender: 'cardNo' }\n }, {\n title: '账户状态',\n dataIndex: 'status',\n scopedSlots: { customRender: 'status' }\n }, {\n title: '操作',\n dataIndex: 'action',\n scopedSlots: { customRender: 'action' }\n }],\n accountList: [],\n rechargeData: {\n userId: '',\n userName: '',\n orderPrice: '',\n remark: ''\n },\n selsctUserId: '',\n selsctIndex: 0,\n searchSource: {\n ddchoosePeople: {\n userIdList: [],\n departmentIdList: []\n },\n UserMessage: {\n avatar: '',\n emplId: '',\n name: ''\n },\n cardNum: '',\n cardStatus: '',\n accountStatus: ''\n }\n }\n },\n watch: {},\n computed: {},\n created: function () {\n this.queryAccountList()\n },\n methods: {\n // 获取账户列表\n queryAccountList () {\n const _that = this\n let AccountData = this.$qs.stringify({\n pageNum: this.pagination.current,\n numPerPage: this.pagination.defaultPageSize,\n departmentIdList: this.searchSource.ddchoosePeople.departmentIdList,\n userIdList: this.searchSource.ddchoosePeople.userIdList,\n status: this.searchSource.accountStatus,\n cardNo: this.searchSource.cardNum,\n cardStatus: this.searchSource.cardStatus,\n orgId: sessionStorage.getItem('corpId')\n })\n $http.get(`/v1/account/queryAccountList?${AccountData}`).then((res) => {\n _that.accountList = res.data.data.recordList\n _that.pagination.total = parseInt(res.data.data.totalCount)\n console.log(_that)\n console.log(_that.accountList)\n })\n },\n // 搜索条件,卡片和账户状态\n selectHandleChangeCard (value) {\n console.log(value)\n this.searchSource.cardStatus = value\n },\n selectHandleChangeAccount (value) {\n this.searchSource.accountStatus = value\n },\n // 选人组件调用\n choosePeople () {\n config.ddready('ddchoose').then((res) => {\n console.log(res)\n let userIdListObj = []\n let departmentIdListObj = []\n res.departments.map((item, index) => {\n departmentIdListObj.push(item.id)\n })\n res.users.map((item, index) => {\n userIdListObj.push(item.emplId)\n })\n this.searchSource.ddchoosePeople.departmentIdList = departmentIdListObj\n this.searchSource.ddchoosePeople.userIdList = userIdListObj\n })\n },\n // 校验账户充值金额大小和纯数字\n rechargeNum (rule, value, callback) {\n const temp = /^\\d+\\.?\\d{0,2}$/\n if (!temp.test(value) || parseFloat(value) > 10000) {\n callback('请输入正确的金额，最多保留小数点后两位，充值金额最多为一万元')\n return\n }\n callback()\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 // 绑定实体卡号校验，仅字符串和数字\n bindCardNum (rule, value, callback) {\n var re = /^[0-9a-zA-Z]*$/\n if (!re.test(value)) {\n callback('实体卡卡号必须由数字和字母组成')\n return\n }\n callback()\n },\n // 绑定实体卡modal切换\n changeVisible2 (str, index) {\n this.visible2 = !this.visible2\n this.selsctUserId = str\n this.selsctIndex = index\n },\n // 分页\n handleTableChange (pagination, filters, sorter) {\n this.pagination.current = pagination.current\n this.queryAccountList()\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 ToViewAllowances (str) {\n console.log(str.userId)\n this.$router.push({ name: 'viewAllowances', params: { userId: str.userId } })\n },\n // 内部充值接口\n internalRecharge () {\n let _that = this\n this.rechargeData.orderPrice = this.form.getFieldsValue().orderPrice\n this.rechargeData.remark = this.form.getFieldsValue().remark\n this.rechargeData.orgId = sessionStorage.getItem('corpId')\n let rechargeData = this.$qs.stringify(this.rechargeData)\n $http.get(`/v1/charge/charge?${rechargeData}`).then((res) => {\n console.log(res.data.message)\n if (res.data.message === 'SUCCESS') {\n this.visible = false\n this.form.resetFields()\n this.$message.success('充值成功')\n } else {\n this.$message.success(res.data.message)\n }\n }).catch((err) => {\n console.log(err)\n this.$message.error('充值失败')\n })\n },\n // 充值modal\n showModal (userId, userName, index) {\n this.rechargeData.userId = userId\n this.rechargeData.userName = userName\n this.selsctIndex = index\n this.visible = true\n },\n // 账户操作和卡片操作\n accountOperation (type, userId, status, index) {\n let accountOperationData = this.$qs.stringify({\n userId: userId,\n status: status,\n orgId: sessionStorage.getItem('corpId')\n })\n $http.get(`/v1/account/update_account_status?${accountOperationData}`).then((res) => {\n if (res.data.message === 'SUCCESS') {\n let dataSource = [...this.accountList]\n if (type === 1 || type === 2) {\n dataSource[index].cardStatus = status\n } else if (type === 3) {\n dataSource[index].status = status\n }\n this.accountList = dataSource\n this.$message.success('操作成功')\n }\n }).catch(() => {\n this.$message.error('修改失败')\n })\n },\n // binding,unbinding二次确认\n confimBindSure (userId, index) {\n this.selsctUserId = userId\n this.selsctIndex = index\n const _that = this\n this.$confirm({\n title: '确认要对该账户实体卡解除绑定么？',\n content: '解除绑定后，该实体卡将不能付款',\n onOk () {\n _that.cardOperation(1)\n }\n })\n },\n // 冻结,解冻,注销结现二次确认\n showConfirm (userId, str, index) {\n let title = ''\n let content = ''\n let status = ''\n const _that = this\n // 1冻结，2解冻，3注销并结现\n switch (str) {\n case 1:\n title = '确认要对该账户实体卡进行冻结操作么？'\n content = '冻结后二维码可使用付款，实体卡片不能付款，若想再次使用实体卡请先解冻'\n status = MINGPAY_ACCOUNT_STATUS.UNACTIVE\n break\n case 2:\n title = '确认要对该账户实体卡进行解冻操作么？'\n content = '解冻后二维码与实体卡片均可正常使用'\n status = MINGPAY_ACCOUNT_STATUS.ACTIVE\n break\n case 3:\n title = '确认要对该账户进行注销并结现操作么？'\n content = '注销并结现后二维码与实体卡片均不能在使用'\n status = MINGPAY_ACCOUNT_STATUS.LOG_OFF\n }\n this.$confirm({\n title: title,\n content: content,\n onOk () {\n _that.accountOperation(str, userId, status, index)\n }\n })\n },\n // 绑卡解绑操作\n cardOperation (type) {\n let cardOperationData = ''\n const cardNo = this.updateBindCardStatusForm.getFieldsValue().cardNo\n if (type === 2) {\n cardOperationData = this.$qs.stringify({\n cardNo: this.updateBindCardStatusForm.getFieldsValue().cardNo,\n userId: this.selsctUserId,\n orgId: sessionStorage.getItem('corpId')\n })\n } else if (type === 1) {\n cardOperationData = this.$qs.stringify({\n cardNo: '',\n userId: this.selsctUserId,\n orgId: sessionStorage.getItem('corpId')\n })\n }\n $http.get(`/v1/account/update_bind_card_status?${cardOperationData}`).then((res) => {\n if (res.data.message === 'SUCCESS') {\n let dataSource = [...this.accountList]\n if (type === 2) {\n dataSource[this.selsctIndex].cardNo = cardNo\n } else if (type === 1) {\n dataSource[this.selsctIndex].cardNo = ''\n }\n this.accountList = dataSource\n this.visible2 = false\n this.$message.success('操作成功')\n } else {\n this.$message.error(res.data.message)\n }\n }).catch((err) => {\n console.log(err)\n })\n }\n },\n mounted () {}\n}\n</script>\n\n<style lang=\"less\" scoped>\n.searchBox{\n display: flex;\n margin-bottom: 15px;\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"]}]}
