tipModal.vue 6.9 KB

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