partnerManage.vue 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291
  1. <template>
  2. <a-card :bordered="false">
  3. <!-- 搜索框 -->
  4. <div class="table-page-search-wrapper" style="margin-bottom: 15px;">
  5. <a-form layout="inline" @keyup.enter.native="$refs.table.refresh(true)">
  6. <a-row :gutter="48">
  7. <a-col :md="6" :sm="24">
  8. <a-form-item label="结算时间:" :label-col="{ span: 3 }" :wrapper-col="{ span: 12 }">
  9. <a-range-picker
  10. style="width:100%"
  11. id="PaySettlementRecords-queryOrderDate"
  12. :disabledDate="disabledDate"
  13. v-model="queryOrderDate"
  14. format="YYYY-MM-DD"
  15. :placeholder="['开始时间', '结束时间']" />
  16. </a-form-item>
  17. </a-col>
  18. <a-col :md="6" :sm="24">
  19. <a-form-item label="供应商名称"><a-input allowClear v-model.trim="queryParam.name" :maxLength="30" placeholder="请输入" id="OperateJournal-name"/></a-form-item>
  20. </a-col>
  21. <a-col :md="6" :sm="24">
  22. <a-form-item label="负责人手机号码"><a-input allowClear v-model.trim="queryParam.contactPhone" :maxLength="30" placeholder="请输入" id="OperateJournal-name"/></a-form-item>
  23. </a-col>
  24. <a-col :md="6" :sm="24">
  25. <a-button style="margin-right: 10px;" type="primary" @click="$refs.table.refresh(true)" id="OperateJournal-refreshTable">查询</a-button>
  26. <a-button type="" @click="resetForm" id="OperateJournal-resetForm">重置</a-button>
  27. </a-col>
  28. </a-row>
  29. </a-form>
  30. </div>
  31. <div class="add"><a-button
  32. type="primary"
  33. icon="plus"
  34. class="addBtn"
  35. @click="showModal"
  36. id="bannerSetting-showModal"
  37. v-hasPermission="'B_partnerManage_add'">新增</a-button></div>
  38. <!-- table列表 -->
  39. <s-table
  40. ref="table"
  41. size="default"
  42. :rowKey="(record) => record.id"
  43. :columns="columns"
  44. :data="loadData"
  45. bordered>
  46. <span slot="action" slot-scope="text, record">
  47. <template>
  48. <a-icon
  49. v-if="$hasPermissions('B_partnerManage_edit') && record.state==0"
  50. type="edit"
  51. id="bannerSetting-handleEdit"
  52. title="编辑"
  53. class="actionBtn icon-blues"
  54. @click="handleEdit(record)" />
  55. <span v-if="record.state==1">--</span>
  56. </template>
  57. <a-icon type="qrcode" title="查看小程序码" @click="getQrCode(record)" :style="{ fontSize: '20px', color: '#e29e14', padding: '0 10px' }" v-hasPermission="'B_partnerManage_QRcode'" />
  58. </span>
  59. <span slot="state" slot-scope="text, record">
  60. <a-switch
  61. v-hasPermission="'B_partnerManage_enable'"
  62. checkedChildren="启用"
  63. unCheckedChildren="禁用"
  64. id="bannerSetting-changeFlagHandle"
  65. :checked="record.state == 1 ? true : false"
  66. @change="changeFlagHandle(text, record)"
  67. />
  68. </span>
  69. </s-table>
  70. <!-- 新增编辑弹窗 -->
  71. <add-partner-modal :itemId="itemId" :itemData="itemData" :openSupplierModal="openSupplierModal" @refresh="$refs.table.refresh(true)" @close="cancel"></add-partner-modal>
  72. <!-- 查看小程序码 -->
  73. <a-modal
  74. class="qrCodeModal"
  75. title="查看小程序码"
  76. :width="500"
  77. :footer="null"
  78. :destroyOnClose="true"
  79. @cancel="isQrCodeModal = false"
  80. v-model="isQrCodeModal">
  81. <img :src="qrCode" width="400" height="400" class="qrCode" />
  82. <a-button type="primary" class="downQrCode" @click="downloadCode">下载小程序码</a-button>
  83. </a-modal>
  84. </a-card>
  85. </template>
  86. <script>
  87. import moment from 'moment'
  88. import { Upload, STable, VSelect } from '@/components'
  89. import { getSellerList, changeSellerStatus, sellerQrCode } from '@/api/businessManage.js'
  90. import addPartnerModal from './addPartnerModal.vue'
  91. export default {
  92. components: {
  93. STable,
  94. Upload,
  95. VSelect,
  96. addPartnerModal
  97. },
  98. data () {
  99. return {
  100. queryParam: {
  101. name: '',
  102. beginDate: '',
  103. endDate: '',
  104. contactPhone: ''
  105. },
  106. queryOrderDate: undefined,
  107. openSupplierModal: false, // 默认关闭弹窗
  108. isQrCodeModal: false, // 查看小程序码 弹框展示状态
  109. qrCode: '',
  110. itemId: null, // 编辑行id
  111. itemData: {}, // 编辑行数据
  112. // 表头
  113. columns: [
  114. {
  115. title: '序号',
  116. dataIndex: 'no',
  117. width: 60,
  118. align: 'center'
  119. },
  120. {
  121. title: '创建时间',
  122. width: 200,
  123. dataIndex: 'createDate',
  124. align: 'center'
  125. },
  126. {
  127. title: '商户名称',
  128. width: 100,
  129. dataIndex: 'name',
  130. align: 'center'
  131. },
  132. {
  133. title: '负责人',
  134. width: 100,
  135. dataIndex: 'contactName',
  136. align: 'center'
  137. },
  138. {
  139. title: '手机号码',
  140. width: 100,
  141. dataIndex: 'contactPhone',
  142. align: 'center',
  143. scopedSlots: {
  144. customRender: 'position'
  145. }
  146. },
  147. {
  148. title: '状态',
  149. width: 100,
  150. dataIndex: 'state',
  151. align: 'center',
  152. scopedSlots: {
  153. customRender: 'state'
  154. }
  155. },
  156. {
  157. title: '操作',
  158. align: 'center',
  159. width: 100,
  160. scopedSlots: {
  161. customRender: 'action'
  162. }
  163. }
  164. ],
  165. // 加载数据方法 必须为 Promise 对象
  166. loadData: parameter => {
  167. const searchData = Object.assign(parameter, this.queryParam)
  168. console.log(this.queryOrderDate, 'this.queryOrderDate')
  169. if (this.queryOrderDate && this.queryOrderDate.length) {
  170. searchData.beginDate = moment(this.queryOrderDate[0]).format('YYYY-MM-DD')
  171. searchData.endDate = moment(this.queryOrderDate[1]).format('YYYY-MM-DD')
  172. } else {
  173. searchData.beginDate = ''
  174. searchData.endDate = ''
  175. }
  176. return getSellerList(
  177. searchData
  178. ).then(res => {
  179. const no = (res.data.pageNo - 1) * res.data.pageSize
  180. if (res.status == 200) {
  181. for (let i = 0; i < res.data.list.length; i++) {
  182. const _item = res.data.list[i]
  183. _item.no = no + i + 1
  184. }
  185. return res.data
  186. }
  187. })
  188. },
  189. formLayout: 'horizontal',
  190. hideRequiredMark: false, // 是否显示必填的* 默认显示
  191. form: this.$form.createForm(this),
  192. formItemLayout: {
  193. labelCol: {
  194. span: 6
  195. },
  196. wrapperCol: {
  197. span: 14
  198. }
  199. }
  200. }
  201. },
  202. methods: {
  203. // 禁止不可选日期
  204. disabledDate (current) {
  205. return current && current > moment().endOf('day')
  206. },
  207. showModal () {
  208. this.itemId = null
  209. this.itemData = {}
  210. this.openSupplierModal = true
  211. },
  212. // 编辑
  213. handleEdit (record) {
  214. this.itemId = record.id
  215. this.itemData = record
  216. console.log(this.itemId, '-------编辑')
  217. this.openSupplierModal = true
  218. },
  219. cancel () {
  220. this.itemId = null
  221. this.openSupplierModal = false
  222. },
  223. // 重置
  224. resetForm () {
  225. this.queryOrderDate = undefined
  226. this.queryParam.name = ''
  227. this.queryParam.beginDate = ''
  228. this.queryParam.endDate = ''
  229. this.queryParam.contactPhone = ''
  230. this.$refs.table.refresh(true)
  231. },
  232. // 更改启用禁用状态
  233. changeFlagHandle (text, record) {
  234. console.log(text)
  235. const _this = this
  236. const _data = {
  237. id: record.id,
  238. flag: record.state == 1 ? '0' : '1'
  239. }
  240. changeSellerStatus(_data).then(res => {
  241. if (res.status == 200) {
  242. _this.$message.success(res.message)
  243. _this.$refs.table.refresh()
  244. } else {
  245. record.state = !record.state
  246. }
  247. })
  248. },
  249. // 查看小程序码
  250. getQrCode (item) {
  251. sellerQrCode({ officialPartnerNo: item.officialPartnerNo }).then(res => {
  252. if (res.status == 200) {
  253. this.qrCode = 'data:image/png;base64,' + res.data
  254. this.isQrCodeModal = true
  255. } else {
  256. this.qrCode = ''
  257. this.$message.error(res.message)
  258. }
  259. })
  260. },
  261. // 下载小程序码
  262. downloadCode () {
  263. const link = document.createElement('a')
  264. link.href = this.qrCode
  265. link.download = 'qrCode.png'
  266. link.click()
  267. }
  268. }
  269. }
  270. </script>
  271. <style lang="less" scoped>
  272. .addBtn {
  273. margin-bottom: 20px;
  274. }
  275. // 查看小程序码 弹框
  276. .qrCodeModal {
  277. .qrCode {
  278. display: block;
  279. max-width: 100%;
  280. margin: 0 auto;
  281. }
  282. .downQrCode {
  283. display: block;
  284. margin: 40px auto 30px;
  285. }
  286. }
  287. </style>