detailModal.vue 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393
  1. <template>
  2. <a-modal
  3. centered
  4. class="dealerPromotions-basicInfo-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. title="详情"
  8. v-model="isShow"
  9. @cancel="isShow=false"
  10. width="80%">
  11. <a-spin :spinning="spinning" tip="Loading...">
  12. <a-form-model
  13. id="dealerPromotions-basicInfo-form"
  14. ref="ruleForm"
  15. :model="form"
  16. :label-col="formItemLayout.labelCol"
  17. :wrapper-col="formItemLayout.wrapperCol" >
  18. <a-form-model-item label="规则简称" v-if="form.description">
  19. <a-input
  20. size="small"
  21. disabled="true"
  22. v-model.trim="form.description"></a-input>
  23. </a-form-model-item>
  24. <a-form-model-item label="规则门槛" v-if="form.gateFlag">
  25. <a-radio-group v-model="form.gateFlag" button-style="solid" size="small" disabled="true">
  26. <a-radio-button value="1">
  27. </a-radio-button>
  28. <a-radio-button value="0">
  29. </a-radio-button>
  30. </a-radio-group>
  31. <div v-if="form.gateFlag==='1'">
  32. <span v-if="form.gateType==='RATIO_AMOUNT'">购买门槛产品金额{{ form.gateAmount*100 }}%作为配额 </span>
  33. <span v-if="form.gateType==='MIN_AMOUNT'">购买门槛产品满最低金额{{ form.gateAmount }}元,不限制配额。</span>
  34. <span v-if="form.gateType==='FIXED_AMOUNT'">购买满{{ form.gateAmount }}元门槛产品,可使用{{ form.quotaAmount }}元配额,采购规则中的{{ form.promotionRuleType!='PROMO_PROD'?'正价':'特价' }}商品(配额算销售额)</span>
  35. </div>
  36. </a-form-model-item>
  37. <!-- 买产品送产品 -->
  38. <a-form-model-item label="满赠规则" prop="regularSameFlag" v-if="form.promotionRuleType ==='BUY_PROD_GIVE_PROD'">
  39. <span>{{ form.regularSameFlag==='1'?'同款':'不同款' }}产品购买满{{ form.regularQty }}个正价产品,送{{ form.promotionQty }}个促销产品</span>
  40. <span v-if="form.restrictFlag&&form.restrictFlag==1">,限制正价产品款数{{ form.restrictCategory }}</span>
  41. </a-form-model-item>
  42. <a-form-model-item label="满赠规则" prop="regularSameFlag" v-if="form.promotionRuleType ==='BUY_PROD_GIVE_MONEY'">
  43. 购买满{{ form.regularAmount }}元正价产品,送{{ form.giveAmount }}元({{ perCentNum }}%促销品采购额)
  44. </a-form-model-item>
  45. <a-form-model-item label="数量叠加" prop="accrualFlag" v-if="form.promotionRuleType ==='BUY_PROD_GIVE_PROD'&&form.accrualFlag">
  46. <a-radio-group v-model="form.accrualFlag" button-style="solid" size="small" disabled="true">
  47. <a-radio-button value="1">
  48. </a-radio-button>
  49. <a-radio-button value="0">
  50. </a-radio-button>
  51. </a-radio-group>
  52. </a-form-model-item>
  53. <a-form-model-item label="金额叠加" prop="accrualFlag" v-if="form.promotionRuleType ==='BUY_PROD_GIVE_MONEY'&&form.accrualFlag">
  54. <a-radio-group v-model="form.accrualFlag" button-style="solid" size="small" disabled="true">
  55. <a-radio-button value="1">
  56. </a-radio-button>
  57. <a-radio-button value="0">
  58. </a-radio-button>
  59. </a-radio-group>
  60. </a-form-model-item>
  61. <a-form-model-item prop="minOrderFlag" label="订单起订金额">
  62. <a-select v-model="form.minOrderFlag" style="width: 160px" size="small" disabled="true">
  63. <a-select-option value="0">
  64. 不限
  65. </a-select-option>
  66. <a-select-option value="1">
  67. 限制
  68. </a-select-option>
  69. </a-select>
  70. <a-input-number
  71. disabled="true"
  72. v-if="form.minOrderAmount"
  73. size="small"
  74. style="margin-left:10px;width:100px;"
  75. v-model="form.minOrderAmount"/>
  76. {{ form.minOrderAmount?'元':'' }}
  77. </a-form-model-item>
  78. <a-form-model-item prop="upperLimitFlag" label="活动经费上限">
  79. <a-select v-model="form.minOrderFlag" style="width: 160px" size="small" disabled="true">
  80. <a-select-option value="0">
  81. 不限
  82. </a-select-option>
  83. <a-select-option value="1">
  84. 限制
  85. </a-select-option>
  86. </a-select>
  87. <a-input-number
  88. disabled="true"
  89. v-if="form.upperLimitAmount"
  90. size="small"
  91. style="margin-left:10px;width:100px;"
  92. v-model="form.upperLimitAmount"/>
  93. {{ form.upperLimitAmount?'元':'' }}
  94. </a-form-model-item>
  95. <a-form-model-item label="促销品是否与正品一致" v-if="form.regularPromotionSameFlag" prop="regularPromotionSameFlag">
  96. <a-radio-group v-model="form.regularPromotionSameFlag" button-style="solid" size="small" disabled="true">
  97. <a-radio-button value="1">
  98. </a-radio-button>
  99. <a-radio-button value="0">
  100. </a-radio-button>
  101. </a-radio-group>
  102. </a-form-model-item>
  103. <a-form-model-item label="采购额适用范围" v-if="form.scopeFlag" prop="scopeFlag" >
  104. <a-radio-group v-model="form.scopeFlag" button-style="solid" size="small" disabled="true">
  105. <a-radio-button value="0">
  106. 部分产品
  107. </a-radio-button>
  108. <a-radio-button value="1">
  109. 全部产品
  110. </a-radio-button>
  111. </a-radio-group>
  112. </a-form-model-item></a-form-model>
  113. <a-card size="small" :bordered="false" class="pages-wrap">
  114. <a-radio-group v-model="chooseVal" button-style="solid">
  115. <a-radio-button value="a" v-show="form.gateFlag==='1'">
  116. 门槛产品
  117. </a-radio-button>
  118. <a-radio-button value="b" v-show="form.promotionRuleType!='PROMO_PROD'">
  119. 正价产品
  120. </a-radio-button>
  121. <a-radio-button value="c" v-show="form.regularPromotionSameFlag==='0'||form.scopeFlag==='0'">
  122. 促销产品
  123. </a-radio-button>
  124. <a-radio-button value="d" v-show="form.promotionRuleType=='PROMO_PROD'">
  125. 特价产品
  126. </a-radio-button>
  127. </a-radio-group>
  128. <!-- 列表 -->
  129. <div v-show="chooseVal!='d'">
  130. <a-table
  131. class="sTable"
  132. style="margin-top:10px;max-height:340px;"
  133. ref="table"
  134. size="small"
  135. :rowKey="(record) => record.productScopeSn"
  136. :columns="columns"
  137. :data-source="chooseVal==='a'?form.gateProductList:chooseVal==='b'?form.regularProductList:form.giftProductList"
  138. :scroll="{ y: 330 }"
  139. :pagination="false"
  140. bordered
  141. >
  142. <!-- 产品分类 -->
  143. <template slot="productType" slot-scope="text, record">
  144. <div class="tabBox" v-if="record.productTypeList && record.productTypeList.length>0">
  145. <a-tag style="margin-bottom:5px;" v-for="item in record.productTypeList" :key="item.id">{{ item.productTypeName3? item.productTypeName2+'/'+item.productTypeName3:(item.productTypeName2&&!item.productTypeName3)?item.productTypeName2:item.productTypeName1 }}</a-tag>
  146. </div>
  147. </template>
  148. <!-- 品牌 -->
  149. <template slot="productBrand" slot-scope="text, record">
  150. <div class="tabBox" v-if="record.productBrandList && record.productBrandList.length>0">
  151. <a-tag style="margin-bottom:5px;" v-for="item in record.productBrandList" :key="item.id">{{ item.productBrandName }}</a-tag>
  152. </div>
  153. </template>
  154. <!-- 产品 -->
  155. <template slot="product" slot-scope="text, record">
  156. <div class="tabBox" v-if="record.productThisList && record.productThisList.length>0">
  157. <a-tag style="margin-bottom:5px;" v-for="item in record.productThisList" :key="item.id">{{ item.productCode }}</a-tag>
  158. </div>
  159. </template>
  160. <!-- 设置起订量 -->
  161. <template slot="setNum" slot-scope="text, record">
  162. <a-tag style="width:60%;margin-bottom:5px;margin-right:0;">{{ record.unitTypeDictValue }}</a-tag>
  163. <a-tag style="width:60%;margin-right:0;">{{ record.unitQty }}</a-tag>
  164. </template>
  165. </a-table>
  166. </div>
  167. <!-- 特价产品 -->
  168. <div v-show="chooseVal=='d'">
  169. <a-table
  170. class="sTable"
  171. style="margin-top:10px;max-height:340px;"
  172. ref="table"
  173. size="small"
  174. :rowKey="(record) => record.productScopeSn"
  175. :columns="specialColumns"
  176. :data-source="form.specialProductList"
  177. :scroll="{ y: 330 }"
  178. :pagination="false"
  179. bordered
  180. >
  181. <!-- 产品分类 -->
  182. <template slot="productType" slot-scope="text, record">
  183. <div class="tabBox" v-if="record.productTypeList && record.productTypeList.length>0">
  184. <a-tag style="margin-bottom:5px;" v-for="item in record.productTypeList" :key="item.id">{{ item.productTypeName3? item.productTypeName2+'/'+item.productTypeName3:(item.productTypeName2&&!item.productTypeName3)?item.productTypeName2:item.productTypeName1 }}</a-tag>
  185. </div>
  186. </template>
  187. <!-- 品牌 -->
  188. <template slot="productBrand" slot-scope="text, record">
  189. <div class="tabBox" v-if="record.productBrandList && record.productBrandList.length>0">
  190. <a-tag style="margin-bottom:5px;" v-for="item in record.productBrandList" :key="item.id">{{ item.productBrandName }}</a-tag>
  191. </div>
  192. </template>
  193. <!-- 产品 -->
  194. <template slot="product" slot-scope="text, record">
  195. <div class="tabBox" v-if="record.productThisList && record.productThisList.length>0">
  196. <a-tag style="margin-bottom:5px;" v-for="item in record.productThisList" :key="item.id">{{ item.productCode }}</a-tag>
  197. </div>
  198. <span v-else>--</span>
  199. </template>
  200. <!-- 设置起订量 -->
  201. <template slot="setNum" slot-scope="text, record">
  202. <a-tag style="width:90%;margin-bottom:5px;margin-right:0;">{{ record.unitTypeDictValue }}</a-tag>
  203. <a-tag style="width:90%;margin-right:0;">{{ record.unitQty }}</a-tag>
  204. </template>
  205. </a-table>
  206. </div>
  207. </a-card>
  208. <div class="btn-cont">
  209. <a-button id="dealerPromotions-basicInfo-modal-back" @click="isShow = false">关闭</a-button>
  210. </div>
  211. </a-spin>
  212. </a-modal>
  213. </template>
  214. <script>
  215. import { commonMixin } from '@/utils/mixin'
  216. import { STable } from '@/components'
  217. import { getRuleDetail } from '@/api/promotion'
  218. export default {
  219. name: 'DetailModal',
  220. mixins: [commonMixin],
  221. components: { STable },
  222. props: {
  223. openModal: { // 弹框显示状态
  224. type: Boolean,
  225. default: false
  226. },
  227. itemSn: {
  228. type: String,
  229. default: ''
  230. }
  231. },
  232. data () {
  233. const _this = this
  234. return {
  235. isShow: this.openModal, // 是否打开弹框
  236. spinning: false,
  237. formItemLayout: {
  238. labelCol: { span: 4 },
  239. wrapperCol: { span: 20 }
  240. },
  241. form: {
  242. promotionRuleType: undefined,
  243. gateFlag: undefined, // 门槛
  244. gateAmount: undefined,
  245. quotaAmount: undefined,
  246. regularSameFlag: undefined, // 满赠规则 不同款商品
  247. regularQty: undefined,
  248. promotionQty: undefined,
  249. regularAmount: undefined,
  250. giveAmount: undefined,
  251. restrictFlag: undefined, // 限制正价产品款数
  252. restrictCategory: undefined,
  253. accrualFlag: undefined, // 数量叠加
  254. minOrderFlag: undefined, // 起订金额
  255. minOrderAmount: undefined,
  256. upperLimitFlag: undefined, // 活动经费上限
  257. upperLimitAmount: undefined,
  258. regularPromotionSameFlag: undefined,
  259. productTypeArr: [],
  260. productTypeList: [],
  261. productBrandArr: [],
  262. productBrandList: [],
  263. productThisList: []
  264. },
  265. chooseVal: 'a',
  266. specialColumns: [
  267. { title: '产品分类', width: '11%', scopedSlots: { customRender: 'productType' }, align: 'center' },
  268. { title: '品牌', width: '11%', scopedSlots: { customRender: 'productBrand' }, align: 'center' },
  269. { title: '产品', scopedSlots: { customRender: 'product' }, width: '11%', align: 'center' },
  270. { title: '省价原价', dataIndex: 'provincePrice', width: '6%', align: 'right', customRender: function (text) { return ((text || text == 0) ? _this.toThousands(text) : '--') } },
  271. { title: '省价特价', dataIndex: 'provinceDiscountPrice', width: '6%', align: 'right', customRender: function (text) { return ((text || text == 0) ? _this.toThousands(text) : '--') } },
  272. { title: '省价折扣', dataIndex: 'provinceDiscountRate', width: '6%', align: 'center', customRender: function (text) { return ((text || text == 0) ? (text + '%') : '--') } },
  273. { title: '市价原价', dataIndex: 'cityPrice', width: '6%', align: 'right', customRender: function (text) { return ((text || text == 0) ? _this.toThousands(text) : '--') } },
  274. { title: '市价特价', dataIndex: 'cityDiscountPrice', width: '6%', align: 'right', customRender: function (text) { return ((text || text == 0) ? _this.toThousands(text) : '--') } },
  275. { title: '市价折扣', dataIndex: 'cityDiscountRate', width: '6%', align: 'center', customRender: function (text) { return ((text || text == 0) ? (text + '%') : '--') } },
  276. { title: '特约原价', dataIndex: 'specialPrice', width: '6%', align: 'right', customRender: function (text) { return ((text || text == 0) ? _this.toThousands(text) : '--') } },
  277. { title: '特约特价', dataIndex: 'specialDiscountPrice', width: '6%', align: 'right', customRender: function (text) { return ((text || text == 0) ? _this.toThousands(text) : '--') } },
  278. { title: '特约折扣', dataIndex: 'specialDiscountRate', width: '6%', align: 'center', customRender: function (text) { return ((text || text == 0) ? (text + '%') : '--') } },
  279. { title: '设置起订量', width: '7%', scopedSlots: { customRender: 'setNum' }, align: 'center' }
  280. ]
  281. }
  282. },
  283. computed: {
  284. columns () {
  285. const _this = this
  286. const arr = [
  287. { title: '产品分类', width: '30%', scopedSlots: { customRender: 'productType' }, align: 'center' },
  288. { title: '品牌', width: '35%', scopedSlots: { customRender: 'productBrand' }, align: 'center' },
  289. { title: '产品', width: '35%', scopedSlots: { customRender: 'product' }, align: 'center' },
  290. { title: '设置起订量', width: '20%', scopedSlots: { customRender: 'setNum' }, align: 'center' }
  291. ]
  292. if (_this.chooseVal == 'c') {
  293. arr.pop()
  294. }
  295. return arr
  296. },
  297. perCentNum () {
  298. return Math.floor(((this.form.giveAmount / this.form.regularAmount) * 100).toFixed(2))
  299. }
  300. },
  301. methods: {
  302. // 重置
  303. resetSearchForm () {
  304. this.form = {
  305. promotionRuleType: undefined,
  306. gateFlag: undefined, // 门槛
  307. gateAmount: undefined,
  308. quotaAmount: undefined,
  309. regularSameFlag: undefined, // 满赠规则 不同款商品
  310. regularQty: undefined,
  311. promotionQty: undefined,
  312. regularAmount: undefined,
  313. giveAmount: undefined,
  314. restrictFlag: undefined, // 限制正价产品款数
  315. restrictCategory: undefined,
  316. accrualFlag: undefined, // 数量叠加
  317. minOrderFlag: undefined, // 起订金额
  318. minOrderAmount: undefined,
  319. upperLimitFlag: undefined, // 活动经费上限
  320. upperLimitAmount: undefined,
  321. regularPromotionSameFlag: undefined
  322. }
  323. },
  324. // 获取列表详情
  325. getDetail () {
  326. getRuleDetail({ sn: this.itemSn }).then(res => {
  327. if (res.status == 200) {
  328. const resultObj = res.data
  329. this.chooseVal = resultObj.gateFlag == '1' ? 'a' : resultObj.promotionRuleType == 'PROMO_PROD' ? 'd' : 'b'
  330. this.form = { ...this.form, ...resultObj }
  331. }
  332. })
  333. }
  334. },
  335. watch: {
  336. // 父页面传过来的弹框状态
  337. openModal (newValue, oldValue) {
  338. this.isShow = newValue
  339. },
  340. // 重定义的弹框状态
  341. isShow (newValue, oldValue) {
  342. if (!newValue) {
  343. this.$emit('close')
  344. this.resetSearchForm()
  345. } else {
  346. this.getDetail()
  347. }
  348. }
  349. }
  350. }
  351. </script>
  352. <style lang="less" scoped>
  353. .dealerPromotions-basicInfo-modal{
  354. .ant-modal-body {
  355. padding: 40px 40px 24px;
  356. }
  357. .dealerPromotions-basicInfo-con{
  358. margin-top:10px;
  359. }
  360. .ant-form-item{
  361. margin-bottom:0 !important;
  362. }
  363. .buyerBox{
  364. border:1px solid #d9d9d9;margin-top:10px;border-radius:4px;padding:4px 10px;background:#f2f2f2;max-height:130px;overflow-y:scroll;
  365. }
  366. .btn-cont {
  367. text-align: center;
  368. margin: 35px 0 10px;
  369. }
  370. .tabBox{
  371. max-height:100px;
  372. overflow-y:scroll;
  373. }
  374. .tabBox::-webkit-scrollbar {
  375. width: 0px;
  376. }
  377. // .ant-form-item-control .ant-input[disabled]{
  378. // color:#333333;
  379. // background:#ffffff;
  380. // }
  381. }
  382. </style>