tipModal.vue 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235
  1. <template>
  2. <a-modal
  3. centered
  4. :footer="null"
  5. :maskClosable="false"
  6. :closable="false"
  7. class="sales-print-type-modal"
  8. v-model="isShow"
  9. @cancel="isShow=false"
  10. :width="900">
  11. <solt name="title" v-if="detailInfo"><div>提示:(销售单号:{{ detailInfo.salesBillNo }} 客户名称:{{ detailInfo.buyerName }})</div></solt>
  12. <solt name="title" v-else>提示</solt>
  13. <a-spin :spinning="spinning" tip="Loading...">
  14. <div class="tipModal-content">
  15. <strong class="tipModal-tit">销售单以下产品价格发生变更,请确认</strong>
  16. <a-table
  17. class="sTable"
  18. ref="table"
  19. size="small"
  20. :rowKey="(record) => record.allocateSn"
  21. :columns="columns"
  22. :dataSource="dataList"
  23. :scroll="{ y: 300 }"
  24. :pagination="false"
  25. bordered>
  26. <!-- 产品编码 -->
  27. <template slot="productCode" slot-scope="text, record">
  28. <span>{{ record.productCode||'--' }}</span>
  29. <a-badge count="促" v-if="record.promotionFlag==='GIFT'" :number-style="{ backgroundColor: '#52c41a', zoom:'80%' }"></a-badge>
  30. </template>
  31. <!-- 初始价 价格级别 省 市 特约-->
  32. <template slot="priceLevelOrig" slot-scope="text, record">
  33. <span v-if="record.priceLevelOrig">
  34. <span :class="record.priceLevelOrig!=record.priceLevel?'redWord':''">{{ record.priceLevelOrigDictValue }}</span>
  35. </span>
  36. <span v-else>--</span>
  37. </template>
  38. <template slot="provincePriceOrig" slot-scope="text, record">
  39. <span v-if="record.provincePriceOrig||record.provincePriceOrig==0">
  40. <span :class="record.provincePriceOrig!=record.provincePrice?'redWord':''">{{ toThousands(record.provincePriceOrig) }}</span>
  41. </span>
  42. <span v-else>--</span>
  43. </template>
  44. <template slot="cityPriceOrig" slot-scope="text, record">
  45. <span v-if="record.cityPriceOrig||record.cityPriceOrig==0">
  46. <span :class="record.cityPriceOrig!=record.cityPrice?'redWord':''">{{ toThousands(record.cityPriceOrig) }}</span>
  47. </span>
  48. <span v-else>--</span>
  49. </template>
  50. <template slot="specialPriceOrig" slot-scope="text, record">
  51. <span v-if="record.specialPriceOrig||record.specialPriceOrig==0">
  52. <span :class="record.specialPriceOrig!=record.specialPrice?'redWord':''">{{ toThousands(record.specialPriceOrig) }}</span>
  53. </span>
  54. <span v-else>--</span>
  55. </template>
  56. <!-- 最新价 价格级别 省 市 特约 -->
  57. <template slot="priceLevel" slot-scope="text, record">
  58. <span v-if="record.priceLevel">
  59. <span :class="record.priceLevel!=record.priceLevelOrig?'redWord':''">{{ record.priceLevelDictValue }}</span>
  60. </span>
  61. <span v-else>--</span>
  62. </template>
  63. <template slot="provincePrice" slot-scope="text, record">
  64. <span v-if="record.provincePrice||record.provincePrice==0">
  65. <span :class="record.provincePrice!=record.provincePriceOrig?'redWord':''">{{ toThousands(record.provincePrice) }}</span>
  66. </span>
  67. <span v-else>--</span>
  68. </template>
  69. <template slot="cityPrice" slot-scope="text, record">
  70. <span v-if="record.cityPrice||record.cityPrice==0">
  71. <span :class="record.cityPrice!=record.cityPriceOrig?'redWord':''">{{ toThousands(record.cityPrice) }}</span>
  72. </span>
  73. <span v-else>--</span>
  74. </template>
  75. <template slot="specialPrice" slot-scope="text, record">
  76. <span v-if="record.specialPrice||record.specialPrice==0">
  77. <span :class="record.specialPrice!=record.specialPriceOrig?'redWord':''">{{ toThousands(record.specialPrice) }}</span>
  78. </span>
  79. <span v-else>--</span>
  80. </template>
  81. </a-table>
  82. <div>
  83. <a-radio-group v-model="priceVal">
  84. <a-radio :value="item.id" v-for="item in priceSelectList" :key="item.id">
  85. {{ item.nameWord }}
  86. </a-radio>
  87. </a-radio-group>
  88. </div>
  89. <div style="margin-top:36px;text-align:center;">
  90. <a-button @click="handleCancel" style="margin-right: 15px" id="chooseCustom-btn-back">取消</a-button>
  91. <a-button type="primary" @click="handleSubmit" id="chooseCustom-btn-submit">确定</a-button>
  92. </div>
  93. </div>
  94. </a-spin>
  95. </a-modal>
  96. </template>
  97. <script>
  98. import { commonMixin } from '@/utils/mixin'
  99. export default {
  100. name: 'TipModal',
  101. mixins: [commonMixin],
  102. props: {
  103. openModal: { // 弹框显示状态
  104. type: Boolean,
  105. default: false
  106. },
  107. dataList: {
  108. type: Array,
  109. default: () => {
  110. return []
  111. }
  112. }
  113. },
  114. data () {
  115. return {
  116. isShow: this.openModal,
  117. spinning: false,
  118. detailInfo: null,
  119. sourceData: [],
  120. priceVal: undefined,
  121. columns: [
  122. { title: '产品编码', dataIndex: 'productCode', scopedSlots: { customRender: 'productCode' }, width: '15%', align: 'center' },
  123. { title: '价格变更前',
  124. children: [
  125. { title: '价格级别', dataIndex: 'priceLevelOrigDictValue', scopedSlots: { customRender: 'priceLevelOrig' }, align: 'center' },
  126. {
  127. title: '省级价',
  128. align: 'right',
  129. dataIndex: 'provincePriceOrig',
  130. scopedSlots: { customRender: 'provincePriceOrig' }
  131. },
  132. {
  133. title: '市级价',
  134. align: 'right',
  135. dataIndex: 'cityPriceOrig',
  136. scopedSlots: { customRender: 'cityPriceOrig' }
  137. },
  138. {
  139. title: '特约价',
  140. dataIndex: 'specialPriceOrig',
  141. align: 'right',
  142. scopedSlots: { customRender: 'specialPriceOrig' }
  143. }
  144. ],
  145. width: '40%' },
  146. { title: '价格变更后',
  147. children: [
  148. { title: '价格级别', dataIndex: 'priceLevelDictValue', scopedSlots: { customRender: 'priceLevel' }, align: 'center' },
  149. {
  150. title: '省级价',
  151. dataIndex: 'provincePrice',
  152. align: 'right',
  153. scopedSlots: { customRender: 'provincePrice' }
  154. },
  155. {
  156. title: '市级价',
  157. dataIndex: 'cityPrice',
  158. align: 'right',
  159. scopedSlots: { customRender: 'cityPrice' }
  160. },
  161. {
  162. title: '特约价',
  163. dataIndex: 'specialPrice',
  164. align: 'right',
  165. scopedSlots: { customRender: 'specialPrice' }
  166. }
  167. ],
  168. width: '40%' }
  169. ],
  170. priceSelectList: [{
  171. id: 0,
  172. nameWord: '以【价格变更前】为准'
  173. }, {
  174. id: 1,
  175. nameWord: '以【价格变更后】为准'
  176. }]
  177. }
  178. },
  179. methods: {
  180. // 获取弹窗显示信息
  181. getShowInfo (obj) {
  182. this.detailInfo = obj
  183. },
  184. // 保存
  185. handleSubmit () {
  186. const _this = this
  187. if (_this.priceVal === undefined) {
  188. this.$message.warning('请选择价格变更标准!')
  189. return
  190. }
  191. const objInfo = {
  192. productPriceChangeFlag: _this.priceVal
  193. }
  194. _this.$emit('ok', objInfo)
  195. },
  196. // 关闭弹窗
  197. handleCancel () {
  198. this.isShow = false
  199. this.$emit('close')
  200. }
  201. },
  202. watch: {
  203. // 父页面传过来的弹框状态
  204. openModal (newValue, oldValue) {
  205. this.isShow = newValue
  206. },
  207. isShow (newValue, oldValue) {
  208. if (!newValue) {
  209. this.$emit('close')
  210. this.priceVal = undefined
  211. }
  212. }
  213. }
  214. }
  215. </script>
  216. <style lang="less" scoped>
  217. .tipModal-content{
  218. width:87%;
  219. margin:30px auto 0;
  220. text-align:center;
  221. .tipModal-tit{
  222. font-size: 20px;
  223. }
  224. .sTable{
  225. margin:15px 0 25px;
  226. }
  227. .ant-radio-wrapper:first-child{
  228. margin-right:70px !important;
  229. }
  230. .redWord{
  231. color:#ed1c24;
  232. }
  233. }
  234. </style>