list.vue 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234
  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.trim="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.trim="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.trim="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="storeName" slot-scope="text, record">
  61. {{record.storeName}}
  62. <a-badge count="已注销" :number-style="{ zoom:'80%',marginLeft:'5px', color: '#fff',background:'#999' }" v-if="record.state=='WRITE_OFF'"></a-badge>
  63. <a-badge count="已停用" :number-style="{ zoom:'80%',marginLeft:'5px', color: '#fff',background:'#999' }" v-if="record.state=='DISABLED'"></a-badge>
  64. <a-badge count="已暂停" :number-style="{ zoom:'80%',marginLeft:'5px', color: '#fff',background:'#999' }" v-if="record.state=='SUSPEND'"></a-badge>
  65. </template>
  66. <!-- 图片 -->
  67. <template slot="imageUrl" slot-scope="text, record">
  68. <div v-if="text&&text.length">
  69. <img :src="text" width="30" height="30" class="imageUrl" @click="inited([text])" />
  70. </div>
  71. <span v-else>--</span>
  72. </template>
  73. <!-- 地址 -->
  74. <template slot="addr" slot-scope="text, record">
  75. <div style="word-break:break-all;" v-if="record.addrProvinceName||record.addrDetail">
  76. <div v-if="record.addrProvinceName">{{ record.addrProvinceName +'-'+ record.addrCityName +'-'+ record.addrDistrictName }}</div>
  77. <div v-if="record.addrDetail">{{ record.addrDetail }}</div>
  78. </div>
  79. <div v-else>--</div>
  80. </template>
  81. <!-- 操作 -->
  82. <template slot="action" slot-scope="text, record">
  83. <div v-if="record.auditStatus == 'WAIT'">
  84. <a-button size="small" type="link" class="button-primary" @click="handleAudit(record,1)">通过</a-button>
  85. <a-button size="small" type="link" class="button-primary" @click="handleAudit(record,0)">不通过</a-button>
  86. </div>
  87. <span v-else>--</span>
  88. </template>
  89. </s-table>
  90. </a-spin>
  91. </a-card>
  92. </template>
  93. <script>
  94. import { mapState } from 'vuex'
  95. import { commonMixin } from '@/utils/mixin'
  96. import { STable, VSelect } from '@/components'
  97. import { xprhStoreApplyQueryPage, xprhStoreApplyAudit } from '@/api/approveStore'
  98. export default {
  99. components: { STable, VSelect },
  100. mixins: [commonMixin],
  101. data () {
  102. return {
  103. spinning: false,
  104. tableHeight: 0,
  105. disabled: false, // 查询、重置按钮是否可操作
  106. queryParam: {
  107. contactName: '',
  108. contactPhone: '',
  109. storeName: '',
  110. auditStatus: undefined
  111. },
  112. columns: [
  113. { title: '序号', dataIndex: 'no', width: '5%', align: 'center' },
  114. { title: '提交时间', dataIndex: 'applyTime', width: '8%', align: 'center', customRender: function (text) { return text || '--' } },
  115. { title: '联系人手机', dataIndex: 'contactPhone', width: '8%', align: 'center', customRender: function (text) { return text || '--' } },
  116. { title: '联系人姓名', dataIndex: 'contactName', width: '6%', align: 'center', customRender: function (text) { return text || '--' } },
  117. { title: '门店名称', scopedSlots: { customRender: 'storeName' }, width: '15%', align: 'center' },
  118. { title: '门店地址', dataIndex: 'addrDetail', width: '20%', align: 'center', scopedSlots: { customRender: 'addr' } },
  119. { title: '门头照片', dataIndex: 'storeImage', width: '6%', align: 'center', scopedSlots: { customRender: 'imageUrl' } },
  120. { title: '营业执照', dataIndex: 'licenseImage', width: '6%', align: 'center', scopedSlots: { customRender: 'imageUrl' } },
  121. { title: '审核状态', dataIndex: 'auditStatusDictValue', width: '8%', align: 'center', customRender: function (text) { return text || '--' } },
  122. { title: '货架产品', dataIndex: 'priceShowName', width: '6%', align: 'center', customRender: function (text) { return text || '--' } },
  123. { title: '非货架产品', dataIndex: 'nonShelfPriceShowName', width: '6%', align: 'center', customRender: function (text) { return text || '--' } },
  124. { title: '操作', scopedSlots: { customRender: 'action' }, width: '6%', align: 'center' }
  125. ],
  126. // 加载数据方法 必须为 Promise 对象
  127. loadData: parameter => {
  128. this.disabled = true
  129. this.spinning = true
  130. return xprhStoreApplyQueryPage(Object.assign(parameter, this.queryParam)).then(res => {
  131. let data
  132. if (res.status == 200) {
  133. data = res.data
  134. const no = (data.pageNo - 1) * data.pageSize
  135. for (var i = 0; i < data.list.length; i++) {
  136. data.list[i].no = no + i + 1
  137. }
  138. this.disabled = false
  139. }
  140. this.spinning = false
  141. return data
  142. })
  143. },
  144. openModal: false,
  145. nowData: null
  146. }
  147. },
  148. computed: {
  149. ...mapState({
  150. dealerInviteCode: state => state.user.info.extInfo.dealer.dealerInviteCode
  151. })
  152. },
  153. methods: {
  154. inited (viewer) {
  155. if (viewer.length) {
  156. this.$viewerApi({
  157. images: viewer
  158. })
  159. }
  160. },
  161. // 审核
  162. handleAudit (row, type) {
  163. // 审核通过
  164. if (type == 1) {
  165. this.$router.push({ name: 'approveStoreAuthPass', params: { sn: row.applySn } })
  166. } else {
  167. const _this = this
  168. this.$confirm({
  169. title: '提示',
  170. content: '确认审核不通过吗?',
  171. centered: true,
  172. closable: true,
  173. onOk () {
  174. _this.spinning = true
  175. xprhStoreApplyAudit({
  176. applySn: row.applySn,
  177. auditStatus: 'REFUSE'
  178. }).then(res => {
  179. if (res.status == 200) {
  180. _this.$message.success(res.message)
  181. _this.$refs.table.refresh()
  182. _this.spinning = false
  183. } else {
  184. _this.spinning = false
  185. }
  186. })
  187. }
  188. })
  189. }
  190. },
  191. // 重置
  192. resetSearchForm () {
  193. this.queryParam.contactName = ''
  194. this.queryParam.contactPhone = ''
  195. this.queryParam.storeName = ''
  196. this.queryParam.auditStatus = undefined
  197. this.$refs.table.refresh(true)
  198. },
  199. setTableH () {
  200. const tableSearchH = this.$refs.tableSearch.offsetHeight
  201. this.tableHeight = window.innerHeight - tableSearchH - 245
  202. },
  203. pageInit () {
  204. const _this = this
  205. this.$nextTick(() => { // 页面渲染完成后的回调
  206. _this.setTableH()
  207. _this.resetSearchForm()
  208. })
  209. }
  210. },
  211. mounted () {
  212. if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
  213. this.pageInit()
  214. }
  215. },
  216. watch: {
  217. '$store.state.app.winHeight' (newValue, oldValue) { // 窗口变更时,需同时更改表格高度
  218. this.setTableH()
  219. }
  220. },
  221. activated () {
  222. // 如果是新页签打开,则重置当前页面
  223. if (this.$store.state.app.isNewTab) {
  224. this.pageInit()
  225. }
  226. // 仅刷新列表,不重置页面
  227. if (this.$store.state.app.updateList) {
  228. this.setTableH()
  229. this.$refs.table.refresh()
  230. }
  231. }
  232. }
  233. </script>