detailModal.vue 10.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208
  1. <template>
  2. <a-modal
  3. centered
  4. class="merchantInfoManagement-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. :title="title"
  8. v-model="isShow"
  9. @cancel="isShow=false"
  10. :width="960">
  11. <a-spin :spinning="spinning" tip="Loading...">
  12. <div style="max-height: 400px;overflow: auto;" ref="merchantInfoDetail">
  13. <!-- 基础信息 -->
  14. <a-card title="基础信息" size="small" style="margin-bottom: 15px;">
  15. <a-descriptions :column="2" bordered size="small">
  16. <a-descriptions-item label="经销商名称">{{ form&&form.dealerName ? form.dealerName : '--' }}</a-descriptions-item>
  17. <a-descriptions-item label="经销商别名">{{ form&&form.dealerAlias ? form.dealerAlias : '--' }}</a-descriptions-item>
  18. <a-descriptions-item label="商户类型">{{ form&&form.dealerTypeName1 ? form.dealerTypeName1+'>'+form.dealerTypeName2 : '--' }}</a-descriptions-item>
  19. <a-descriptions-item label="联系人1">{{ form&&form.contact ? form.contact : '--' }}</a-descriptions-item>
  20. <a-descriptions-item label="联系手机1">{{ form&&form.contactMobile ? form.contactMobile : '--' }}</a-descriptions-item>
  21. <a-descriptions-item label="联系角色1">{{ form&&form.contactRole ? form.contactRole : '--' }}</a-descriptions-item>
  22. <a-descriptions-item label="联系电话">{{ form&&form.dealerTelephone ? form.dealerTelephone : '--' }}</a-descriptions-item>
  23. <a-descriptions-item label="地址">
  24. <span v-if="form&&(form.provinceName || form.cityName || form.districtName || form.address)">
  25. {{ form&&form.provinceName ? form.provinceName : '' }}
  26. {{ form&&form.cityName ? form.cityName : '' }}
  27. {{ form&&form.districtName ? form.districtName : '' }}
  28. {{ form&&form.address ? form.address : '' }}
  29. </span>
  30. <span v-else>--</span>
  31. </a-descriptions-item>
  32. <a-descriptions-item v-if="!isAudit&&form&&form.auditState != 'WAIT'" label="授权类型">{{ form&&form.menuMouldIdDictValue ? form.menuMouldIdDictValue : '--' }}</a-descriptions-item>
  33. <a-descriptions-item label="财务编码">{{ form&&form.kdMidCustomerFnumber ? form.kdMidCustomerFnumber : '--' }}</a-descriptions-item>
  34. <a-descriptions-item label="默认仓库">{{ form&&form.defaultWarehouseName ? form.defaultWarehouseName : '--' }}</a-descriptions-item>
  35. <!-- <a-descriptions-item label="轮胎省仓">{{ form&&form.tireStorage ? form.tireStorage : '--' }}</a-descriptions-item> --> -->
  36. </a-descriptions>
  37. </a-card>
  38. <a-card title="公司信息" size="small" style="margin-bottom: 15px;">
  39. <a-descriptions :column="2" bordered size="small">
  40. <a-descriptions-item label="经营方式">{{ form&&form.busniessMode ? form.busniessMode : '--' }}</a-descriptions-item>
  41. <a-descriptions-item label="经营项目">{{ form&&form.busniessItmes ? form.busniessItmes : '--' }}</a-descriptions-item>
  42. <a-descriptions-item label="营业执照名称">{{ form&&form.licenseName ? form.licenseName : '--' }}</a-descriptions-item>
  43. <a-descriptions-item label="公司规模">{{ form&&form.busniessScope ? form.busniessScope : '--' }}</a-descriptions-item>
  44. <a-descriptions-item label="成立时间">{{ form&&form.buildDate ? form.buildDate : '--' }}</a-descriptions-item>
  45. <a-descriptions-item label="一般纳税人">
  46. <span v-if="form&&form.isTaxpayer">{{ form&&form.isTaxpayer == 1 ? '是':'否' }}</span>
  47. <span v-else>--</span>
  48. </a-descriptions-item>
  49. <a-descriptions-item label="身份证号码">{{ form&&form.indentityCard ? form.indentityCard : '--' }}</a-descriptions-item>
  50. <a-descriptions-item label="生日">{{ form&&form.brithday ? form.brithday : '--' }}</a-descriptions-item>
  51. <a-descriptions-item label="籍贯">{{ form&&form.nativePlace ? form.nativePlace : '--' }}</a-descriptions-item>
  52. <a-descriptions-item label="邮箱">{{ form&&form.mail ? form.mail : '--' }}</a-descriptions-item>
  53. <a-descriptions-item label="联系人2">{{ form&&form.contact2 ? form.contact2 : '--' }}</a-descriptions-item>
  54. <a-descriptions-item label="联系角色2">{{ form&&form.contractRole2 ? form.contractRole2 : '--' }}</a-descriptions-item>
  55. <a-descriptions-item label="联系手机2">{{ form&&form.contactMobile2 ? form.contactMobile2 : '--' }}</a-descriptions-item>
  56. <a-descriptions-item label="邮政编码">{{ form&&form.zipCode ? form.zipCode : '--' }}</a-descriptions-item>
  57. <a-descriptions-item label="收货人">{{ form&&form.receiveContact ? form.receiveContact : '--' }}</a-descriptions-item>
  58. <a-descriptions-item label="收货人电话">{{ form&&form.receiveMobile ? form.receiveMobile : '--' }}</a-descriptions-item>
  59. <a-descriptions-item label="收货地址">
  60. <span v-if="form&&(form.receiveProvinceName || form.receiveCityName || form.receiveDistrictName || form.receiveAddress)">
  61. {{ form&&form.receiveProvinceName ? form.receiveProvinceName : '' }}
  62. {{ form&&form.receiveCityName ? form.receiveCityName : '' }}
  63. {{ form&&form.receiveDistrictName ? form.receiveDistrictName : '' }}
  64. {{ form&&form.receiveAddress ? form.receiveAddress : '' }}
  65. </span>
  66. <span v-else>--</span>
  67. </a-descriptions-item>
  68. <a-descriptions-item label="银行账户">{{ form&&form.tradeAccountName ? form.tradeAccountName : '--' }}</a-descriptions-item>
  69. <a-descriptions-item label="开户行">{{ form&&form.tradeBankName ? form.tradeBankName : '--' }}</a-descriptions-item>
  70. <a-descriptions-item label="银行账号">{{ form&&form.tradeBankAccount ? form.tradeBankAccount : '--' }}</a-descriptions-item>
  71. </a-descriptions>
  72. </a-card>
  73. <a-card title="总部信息" size="small">
  74. <a-descriptions :column="2" bordered size="small">
  75. <a-descriptions-item label="箭冠汽配代码">{{ form&&form.jgAutoPartsCode ? form.jgAutoPartsCode : '--' }}</a-descriptions-item>
  76. <a-descriptions-item label="门头更换日期">{{ form&&form.jgDoorHeaderChangeTime ? form.jgDoorHeaderChangeTime : '--' }}</a-descriptions-item>
  77. <a-descriptions-item label="特约价是否可见">
  78. <span v-if="form&&form.isShowSpecialPrice">{{ form&&form.isShowSpecialPrice == 1 ? '是':'否' }}</span>
  79. <span v-else>--</span>
  80. </a-descriptions-item>
  81. <a-descriptions-item label="备注">{{ form&&form.remark ? form.remark : '--' }}</a-descriptions-item>
  82. </a-descriptions>
  83. </a-card>
  84. </div>
  85. <div class="btn-cont">
  86. <a-button
  87. id="merchantInfoManagement-audit"
  88. size="large"
  89. v-if="isAudit"
  90. type="primary"
  91. class="button-primary"
  92. style="margin-right: 50px;"
  93. @click="visibleAudit=true">审核</a-button>
  94. <a-button id="merchantInfoManagement-back" size="large" @click="isShow = false" style="font-size: 12px;">返回列表</a-button>
  95. </div>
  96. </a-spin>
  97. <!-- 审核 -->
  98. <auditModal :openModal="visibleAudit" :spinning="spinningAudit" @close="visibleAudit=false" @ok="auditOrder('PASS')" @fail="auditOrder('REJECT')" />
  99. </a-modal>
  100. </template>
  101. <script>
  102. // 组件
  103. import auditModal from '@/views/common/auditModal.vue'
  104. // 接口
  105. import { dealerAudit, dealerDetailBySn, dealerFindUpdateInfoBySn } from '@/api/dealer'
  106. export default {
  107. name: 'MerchantInfoManagementModal',
  108. components: { auditModal },
  109. props: {
  110. openModal: { // 弹框显示状态
  111. type: Boolean,
  112. default: false
  113. },
  114. itemId: { // 单据id
  115. type: [Number, String],
  116. default: ''
  117. },
  118. isAudit: Boolean // 是否显示审核按钮
  119. },
  120. data () {
  121. return {
  122. spinning: false,
  123. isShow: this.openModal, // 是否打开弹框
  124. form: null, // 详情内容数据
  125. title: '', // 弹窗标题
  126. visibleAudit: false, // 是否打开审核弹窗
  127. spinningAudit: false// 审核按钮加载状态
  128. }
  129. },
  130. methods: {
  131. // 审核
  132. auditOrder (auditState) {
  133. this.spinningAudit = true
  134. dealerAudit({
  135. dealerAuditSn: this.form.dealerAuditSn,
  136. auditState: auditState
  137. }).then(res => {
  138. if (res.status == 200) {
  139. this.visibleAudit = false
  140. this.$message.success(res.message)
  141. this.$emit('ok')
  142. this.spinningAudit = false
  143. } else {
  144. this.visibleAudit = false
  145. this.spinningAudit = false
  146. }
  147. })
  148. },
  149. // 详情编辑
  150. getDetail () {
  151. this.spinning = true
  152. // 根据是否审核状态选择不同的接口
  153. const funs = this.isAudit ? dealerFindUpdateInfoBySn : dealerDetailBySn
  154. funs({ sn: this.itemId }).then(res => {
  155. if (res.status == 200) {
  156. this.form = res.data
  157. }
  158. this.spinning = false
  159. })
  160. }
  161. },
  162. watch: {
  163. // 父页面传过来的弹框状态
  164. openModal (newValue, oldValue) {
  165. this.isShow = newValue
  166. },
  167. // 重定义的弹框状态
  168. isShow (newValue, oldValue) {
  169. if (!newValue) {
  170. this.$emit('close')
  171. this.form = null
  172. } else {
  173. this.title = this.isAudit ? '审核资料' : '查看详细'
  174. this.$nextTick(() => {
  175. this.$refs.merchantInfoDetail.scrollTop = 0
  176. })
  177. }
  178. },
  179. itemId (newValue, oldValue) {
  180. if (this.isShow && newValue) {
  181. this.getDetail()
  182. }
  183. }
  184. }
  185. }
  186. </script>
  187. <style lang="less">
  188. .merchantInfoManagement-modal{
  189. .ant-modal-body {
  190. padding: 24px!important;
  191. }
  192. .ant-descriptions-item-label.ant-descriptions-item-colon{
  193. width: 130px;
  194. }
  195. .merchantInfoManagement-cont-m{
  196. margin-bottom: 10px;
  197. }
  198. .btn-cont {
  199. text-align: center;
  200. margin: 15px 0 10px;
  201. button{
  202. width: 150px;
  203. }
  204. }
  205. }
  206. </style>