list.vue 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226
  1. <template>
  2. <a-card size="small" :bordered="false" class="approveStore-wrap">
  3. <a-spin :spinning="spinning" tip="Loading...">
  4. <!-- 提示 -->
  5. <a-alert type="info" style="margin-bottom: 10px">
  6. <div slot="message">我的邀请码:{{ dealerInviteCode }} <a-button type="link" v-copyText="dealerInviteCode">复制</a-button></div>
  7. </a-alert>
  8. <!-- 搜索条件 -->
  9. <div ref="tableSearch" class="table-page-search-wrapper">
  10. <a-form layout="inline" @keyup.enter.native="$refs.table.refresh(true)">
  11. <a-row :gutter="15">
  12. <a-col :md="4" :sm="24">
  13. <a-form-item label="联系人手机">
  14. <a-input allowClear placeholder="请输入联系人手机" v-model.tirm="queryParam.contactPhone"/>
  15. </a-form-item>
  16. </a-col>
  17. <a-col :md="4" :sm="24">
  18. <a-form-item label="联系人姓名">
  19. <a-input allowClear placeholder="请输入联系人姓名" v-model.tirm="queryParam.contactName"/>
  20. </a-form-item>
  21. </a-col>
  22. <a-col :md="6" :sm="24">
  23. <a-form-item label="门店名称">
  24. <a-input allowClear placeholder="请输入门店名称" v-model.tirm="queryParam.storeName"/>
  25. </a-form-item>
  26. </a-col>
  27. <a-col :md="4" :sm="24">
  28. <a-form-item label="审核状态">
  29. <v-select
  30. v-model="queryParam.auditStatus"
  31. ref="auditStatus"
  32. id="approveStore-auditStatus"
  33. code="XPRH_STORE_APPLY_STATUS"
  34. placeholder="请选择审核状态"
  35. allowClear></v-select>
  36. </a-form-item>
  37. </a-col>
  38. <a-col :md="6" :sm="24">
  39. <div>
  40. <a-button type="primary" @click="$refs.table.refresh(true)" :disabled="disabled" id="approveStore-refresh">查询</a-button>
  41. <a-button style="margin-left: 5px" @click="resetSearchForm" :disabled="disabled" id="approveStore-reset">重置</a-button>
  42. </div>
  43. </a-col>
  44. </a-row>
  45. </a-form>
  46. </div>
  47. <!-- 列表 -->
  48. <s-table
  49. class="sTable fixPagination"
  50. ref="table"
  51. :style="{ height: tableHeight+84.5+'px' }"
  52. size="small"
  53. :rowKey="(record) => record.id"
  54. :columns="columns"
  55. :data="loadData"
  56. :scroll="{ y: tableHeight }"
  57. :defaultLoadData="false"
  58. bordered>
  59. <!-- 图片 -->
  60. <template slot="imageUrl" slot-scope="text, record">
  61. <div v-if="text&&text.length">
  62. <img :src="text" width="30" height="30" class="imageUrl" @click="inited([text])" />
  63. </div>
  64. <span v-else>--</span>
  65. </template>
  66. <!-- 地址 -->
  67. <template slot="addr" slot-scope="text, record">
  68. <div style="word-break:break-all;" v-if="record.addrProvinceName||record.addrDetail">
  69. <div v-if="record.addrProvinceName">{{ record.addrProvinceName +'-'+ record.addrCityName +'-'+ record.addrDistrictName }}</div>
  70. <div v-if="record.addrDetail">{{ record.addrDetail }}</div>
  71. </div>
  72. <div v-else>--</div>
  73. </template>
  74. <!-- 操作 -->
  75. <template slot="action" slot-scope="text, record">
  76. <div v-if="record.auditStatus == 'WAIT'">
  77. <a-button size="small" type="link" class="button-primary" @click="handleAudit(record,1)">通过</a-button>
  78. <a-button size="small" type="link" class="button-primary" @click="handleAudit(record,0)">不通过</a-button>
  79. </div>
  80. <span v-else>--</span>
  81. </template>
  82. </s-table>
  83. </a-spin>
  84. </a-card>
  85. </template>
  86. <script>
  87. import { mapState } from 'vuex'
  88. import { commonMixin } from '@/utils/mixin'
  89. import { STable, VSelect } from '@/components'
  90. import { xprhStoreApplyQueryPage, xprhStoreApplyAudit } from '@/api/approveStore'
  91. export default {
  92. components: { STable, VSelect },
  93. mixins: [commonMixin],
  94. data () {
  95. return {
  96. spinning: false,
  97. tableHeight: 0,
  98. disabled: false, // 查询、重置按钮是否可操作
  99. queryParam: {
  100. contactName: '',
  101. contactPhone: '',
  102. storeName: '',
  103. auditStatus: undefined
  104. },
  105. columns: [
  106. { title: '序号', dataIndex: 'no', width: '5%', align: 'center' },
  107. { title: '提交时间', dataIndex: 'applyTime', width: '8%', align: 'center', customRender: function (text) { return text || '--' } },
  108. { title: '联系人手机', dataIndex: 'contactPhone', width: '8%', align: 'center', customRender: function (text) { return text || '--' } },
  109. { title: '联系人姓名', dataIndex: 'contactName', width: '6%', align: 'center', customRender: function (text) { return text || '--' } },
  110. { title: '门店名称', dataIndex: 'storeName', width: '15%', align: 'center', customRender: function (text) { return text || '--' } },
  111. { title: '门店地址', dataIndex: 'addrDetail', width: '22%', align: 'center', scopedSlots: { customRender: 'addr' } },
  112. { title: '门头照片', dataIndex: 'storeImage', width: '6%', align: 'center', scopedSlots: { customRender: 'imageUrl' } },
  113. { title: '营业执照', dataIndex: 'licenseImage', width: '6%', align: 'center', scopedSlots: { customRender: 'imageUrl' } },
  114. { title: '审核状态', dataIndex: 'auditStatusDictValue', width: '8%', align: 'center', customRender: function (text) { return text || '--' } },
  115. { title: '价格权限设置', dataIndex: 'storeName', width: '8%', align: 'center', customRender: function (text) { return text || '--' } },
  116. { title: '操作', scopedSlots: { customRender: 'action' }, width: '8%', align: 'center' }
  117. ],
  118. // 加载数据方法 必须为 Promise 对象
  119. loadData: parameter => {
  120. this.disabled = true
  121. this.spinning = true
  122. return xprhStoreApplyQueryPage(Object.assign(parameter, this.queryParam)).then(res => {
  123. let data
  124. if (res.status == 200) {
  125. data = res.data
  126. const no = (data.pageNo - 1) * data.pageSize
  127. for (var i = 0; i < data.list.length; i++) {
  128. data.list[i].no = no + i + 1
  129. }
  130. this.disabled = false
  131. }
  132. this.spinning = false
  133. return data
  134. })
  135. },
  136. openModal: false,
  137. nowData: null
  138. }
  139. },
  140. computed: {
  141. ...mapState({
  142. dealerInviteCode: state => state.user.info.extInfo.dealer.dealerInviteCode
  143. })
  144. },
  145. methods: {
  146. inited (viewer) {
  147. if (viewer.length) {
  148. this.$viewerApi({
  149. images: viewer
  150. })
  151. }
  152. },
  153. // 审核
  154. handleAudit (row, type) {
  155. // 审核通过
  156. if (type == 1) {
  157. this.$router.push({ name: 'approveStoreAuthPass', params: { sn: row.applySn } })
  158. } else {
  159. const _this = this
  160. this.$confirm({
  161. title: '提示',
  162. content: '确认审核不通过吗?',
  163. centered: true,
  164. closable: true,
  165. onOk () {
  166. _this.spinning = true
  167. xprhStoreApplyAudit({
  168. applySn: row.applySn,
  169. auditStatus: 'REFUSE'
  170. }).then(res => {
  171. if (res.status == 200) {
  172. _this.$message.success(res.message)
  173. _this.$refs.table.refresh()
  174. _this.spinning = false
  175. } else {
  176. _this.spinning = false
  177. }
  178. })
  179. }
  180. })
  181. }
  182. },
  183. // 重置
  184. resetSearchForm () {
  185. this.queryParam.contactName = ''
  186. this.queryParam.contactPhone = ''
  187. this.queryParam.storeName = ''
  188. this.queryParam.auditStatus = undefined
  189. this.$refs.table.refresh(true)
  190. },
  191. setTableH () {
  192. const tableSearchH = this.$refs.tableSearch.offsetHeight
  193. this.tableHeight = window.innerHeight - tableSearchH - 245
  194. },
  195. pageInit () {
  196. const _this = this
  197. this.$nextTick(() => { // 页面渲染完成后的回调
  198. _this.setTableH()
  199. _this.resetSearchForm()
  200. })
  201. }
  202. },
  203. mounted () {
  204. if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
  205. this.pageInit()
  206. }
  207. },
  208. watch: {
  209. '$store.state.app.winHeight' (newValue, oldValue) { // 窗口变更时,需同时更改表格高度
  210. this.setTableH()
  211. }
  212. },
  213. activated () {
  214. // 如果是新页签打开,则重置当前页面
  215. if (this.$store.state.app.isNewTab) {
  216. this.pageInit()
  217. }
  218. // 仅刷新列表,不重置页面
  219. if (this.$store.state.app.updateList) {
  220. this.setTableH()
  221. this.$refs.table.refresh()
  222. }
  223. }
  224. }
  225. </script>