123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287 |
- <template>
- <div class="promotionRulesDetail-wrap">
- <a-spin :spinning="spinning" tip="Loading...">
- <a-page-header :ghost="false" :backIcon="false" class="promotionRulesDetail-back" >
- <!-- 自定义的二级文字标题 -->
- <template slot="subTitle">
- <a id="promotionRulesDetail-back-btn" href="javascript:;" @click="handleBack"><a-icon type="left" /> 返回列表</a>
- </template>
- </a-page-header>
- <a-card size="small" :bordered="false" class="promotionRulesDetail-cont">
- <a-descriptions bordered :column="2" size="small" v-if="detailsData">
- <a-descriptions-item label="活动名称:">{{ detailsData.name || '--' }}</a-descriptions-item>
- <a-descriptions-item label="活动时间:">
- <span v-if="detailsData.activeDateEnable=='0'">不限</span>
- <span v-else>{{ detailsData.activeDateStart }} ~ {{ detailsData.activeDateEnd }}</span>
- </a-descriptions-item>
- <a-descriptions-item label="参与客户:">
- <span v-if="detailsData.buyerLimitEnable=='0'">全部客户</span>
- <p v-else style="margin: 0;">部分客户,共{{ detailsData.promoBuyerList.length }}个 <a-button id="promotionRules-rule-normalGoodsList" type="primary" size="small" class="button-success" @click="handleLook(detailsData.promoBuyerList)">查看</a-button></p>
- </a-descriptions-item>
- <a-descriptions-item label="活动经费上限:">
- <span v-if="detailsData.activeAmountEnable=='0'">不限</span>
- <span v-else>{{ detailsData.activeAmount }} 万元</span>
- </a-descriptions-item>
- <a-descriptions-item label="订单起订金额:">
- <span v-if="detailsData.orderAmountEnable=='0'">不限</span>
- <span v-else>{{ detailsData.orderAmount }} 万元</span>
- </a-descriptions-item>
- <a-descriptions-item label="备注:">{{ detailsData.remark || '--' }}</a-descriptions-item>
- </a-descriptions>
- <a-divider />
- <!-- 列表 -->
- <p style="font-weight: bold;">促销规则:</p>
- <a-table
- class="sTable"
- ref="table"
- size="small"
- :rowKey="(record) => record.id"
- :columns="columns"
- :data-source="promoRuleList"
- :scroll="{ y: tableHeight }"
- :loading="loading"
- :pagination="false"
- bordered>
- <!-- 操作 -->
- <template slot="action" slot-scope="text, record">
- <a-button
- v-if="record.promoRuleType!='PROMO_PROD'"
- size="small"
- type="link"
- class="button-info"
- @click="handleLookP(record.normalGoodsList, record.promoRuleType, 'normal')"
- id="promotionRulesDetail-edit-btn">查看正价品</a-button>
- <a-button
- size="small"
- type="link"
- class="button-warning"
- @click="handleLookP(record.promoGoodsList, record.promoRuleType, 'promo')"
- id="promotionRulesDetail-del-btn">查看{{ record.promoRuleType=='PROMO_PROD' ? '特价品' : record.promoRuleType=='ADD_PRICE_PURCH' ? '换购品' : '促销品' }}</a-button>
- </template>
- </a-table>
- </a-card>
- </a-spin>
- <!-- 查看客户/正价品/促销品 -->
- <a-modal
- centered
- class="promotionRulesDetail-look-modal"
- :footer="null"
- :maskClosable="false"
- title="查看"
- v-model="openModal"
- @cancle="openModal = false"
- width="80%">
- <a-table
- ref="lookTable"
- size="small"
- :rowKey="(record) => record.id"
- :columns="nowColumns"
- :data-source="lookLoadData"
- :pagination="false"
- :scroll="{ y: 500 }"
- bordered>
- <!-- 序号 -->
- <template slot="no" slot-scope="text, record, index">{{ index+1 }}</template>
- <!-- 起订量限制 -->
- <template slot="orderGoodsUnit" slot-scope="text, record">
- {{ record.orderGoodsUnit=='PROD_UNIT' ? '按设置数量':record.orderGoodsUnit=='FULL_BOX' ? '按整箱':'--' }}
- <span v-if="record.orderGoodsUnit=='PROD_UNIT'"> -- {{ record.orderGoodsQty }}</span>
- </template>
- <template slot="goodsPrice" slot-scope="text, record">
- <span>{{ (record.goodsPrice || record.goodsPrice==0) ? record.goodsPrice : '--' }}</span>
- </template>
- </a-table>
- </a-modal>
- </div>
- </template>
- <script>
- import { promoActiveDetailD } from '@/api/promoActive'
- export default {
- data () {
- return {
- spinning: false,
- tableHeight: 0,
- detailsData: null,
- columns: [
- { title: '序号', dataIndex: 'no', width: '5%', align: 'center' },
- { title: '创建时间', dataIndex: 'createDate', width: '15%', align: 'center', customRender: function (text) { return text || '--' } },
- { title: '促销类型', dataIndex: 'promoRuleTypeDictValue', width: '25%', align: 'center', customRender: function (text) { return text || '--' } },
- { title: '促销规则', dataIndex: 'promoRule', align: 'center', width: '37%', customRender: function (text) { return text || '--' }, ellipsis: true },
- { title: '操作', scopedSlots: { customRender: 'action' }, width: '18%', align: 'center' }
- ],
- loadData: [],
- openModal: false,
- custColumns: [
- { title: '序号', scopedSlots: { customRender: 'no' }, width: '5%', align: 'center' },
- { title: '客户名称', dataIndex: 'buyerName', align: 'center', width: '95%', customRender: function (text) { return text || '--' } }
- ],
- pColumns: [ // 正品
- { title: '序号', scopedSlots: { customRender: 'no' }, width: '4%', align: 'center' },
- { title: '类型', dataIndex: 'goodsTypeName', width: '10%', align: 'center', customRender: function (text) { return text || '--' } },
- { title: '类型名称', dataIndex: 'goodsName', align: 'center', width: '25%', customRender: function (text) { return text || '--' }, ellipsis: true },
- { title: '产品名称', dataIndex: 'name', align: 'center', width: '25%', customRender: function (text) { return text || '--' }, ellipsis: true },
- { title: '产品编码', dataIndex: 'goodsCode', width: '12%', align: 'center', customRender: function (text) { return text || '--' } },
- { title: '起订量限制', scopedSlots: { customRender: 'orderGoodsUnit' }, width: '14%', align: 'center' }
- ],
- promoColumns: [ // 促销品
- { title: '序号', scopedSlots: { customRender: 'no' }, width: '5%', align: 'center' },
- { title: '类型', dataIndex: 'goodsTypeName', width: '15%', align: 'center', customRender: function (text) { return text || '--' } },
- { title: '类型名称', dataIndex: 'goodsName', width: '35%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
- { title: '产品名称', dataIndex: 'name', align: 'center', width: '35%', customRender: function (text) { return text || '--' }, ellipsis: true },
- { title: '产品编码', dataIndex: 'goodsCode', width: '10%', align: 'center', customRender: function (text) { return text || '--' } }
- ],
- promoSpecialColumns: [ // 特价产品/加价促销品
- { title: '序号', scopedSlots: { customRender: 'no' }, width: '5%', align: 'center' },
- { title: '产品名称', dataIndex: 'name', align: 'center', width: '50%', customRender: function (text) { return text || '--' }, ellipsis: true },
- { title: '产品编码', dataIndex: 'goodsCode', width: '30%', align: 'center', customRender: function (text) { return text || '--' } },
- { title: this.promoRuleType == 'PROMO_PROD' ? '特惠单价(¥)' : '换购单价(¥)', width: '15%', scopedSlots: { customRender: 'goodsPrice' }, width: 200, align: 'center' }
- ],
- lookLoadData: [],
- promoRuleList: [],
- nowColumns: [],
- promoRuleType: '', // 当前查看类型 买产品送产品...
- loading: false
- }
- },
- methods: {
- // 详情
- getDetail () {
- const _this = this
- this.spinning = true
- this.loading = true
- promoActiveDetailD({ sn: this.$route.params.sn }).then(res => {
- this.loading = false
- this.spinning = false
- if (res.status == 200) {
- _this.detailsData = res.data
- if (_this.detailsData.promoRuleList) {
- _this.detailsData.promoRuleList.map((item, index) => {
- item.no = index + 1
- if (item.promoRuleType == 'BUY_PROD_GIVE_PROD') { // 买产品送产品
- item.promoRule = '购买满' + item.orderGoodsQty + '个正价产品,送' + item.promoQty + '个促销品'
- } else if (item.promoRuleType == 'BUY_PROD_GIVE_MONEY') { // 买产品送采购额
- if (item.promoType == 'promo_amount') {
- item.promoRule = '购买满' + item.orderAmount + '元正价产品,送' + item.promoAmount + '元采购额可用于购买促销品'
- } else if (item.promoType == 'promo_amount_per') {
- item.promoRule = '购买满' + item.orderAmount + '元正价产品可以返正价产品采购额的' + item.promoAmountPer * 100 + '%用于购买促销品'
- }
- } else if (item.promoRuleType == 'ADD_PRICE_PURCH') { // 加价换购
- item.promoRule = '购买满' + item.orderGoodsQty + '个正价产品,可以以换购价购买任意1个换购产品'
- }
- })
- } else {
- _this.detailsData.promoRuleList = []
- }
- // 活动经费上限 单位为万元
- if (_this.detailsData.activeAmountEnable && _this.detailsData.activeAmountEnable == '1' && _this.detailsData.activeAmount && _this.detailsData.activeAmount != 0) {
- _this.detailsData.activeAmount = Number(_this.detailsData.activeAmount) / 10000
- }
- // 订单起订金额 单位为万元
- if (_this.detailsData.orderAmountEnable && _this.detailsData.orderAmountEnable == '1' && _this.detailsData.orderAmount && _this.detailsData.orderAmount != 0) {
- _this.detailsData.orderAmount = Number(_this.detailsData.orderAmount) / 10000
- }
- }
- })
- },
- // 查看客户
- handleLook (record) {
- this.nowColumns = this.custColumns
- this.lookLoadData = record || []
- this.openModal = true
- },
- // 查看正价品/促销品
- handleLookP (record, promoRuleType, goodsType) {
- let columns = this.pColumns
- this.promoRuleType = promoRuleType
- if ((promoRuleType == 'BUY_PROD_GIVE_PROD') || (promoRuleType == 'BUY_PROD_GIVE_MONEY')) { // 买产品送产品/买产品送采购额
- if (goodsType == 'normal') { // 正品
- columns = this.pColumns
- } else if (goodsType == 'promo') { // 促销
- columns = this.promoColumns
- }
- } else if (promoRuleType == 'PROMO_PROD') { // 特价产品
- if (goodsType == 'promo') { // 促销
- columns = this.promoSpecialColumns
- }
- } else if (promoRuleType == 'ADD_PRICE_PURCH') { // 加价换购
- if (goodsType == 'normal') { // 正品
- columns = this.pColumns
- } else if (goodsType == 'promo') { // 促销
- columns = this.promoSpecialColumns
- }
- }
- record.map(item => {
- item.name = item.goodsName
- })
- this.nowColumns = columns
- this.lookLoadData = record || []
- this.openModal = true
- },
- // 返回列表
- handleBack () {
- this.$router.push({ path: '/promotionRulesManagement/promotionRules/list', query: { closeLastOldTab: true } })
- },
- pageInit () {
- const _this = this
- this.$nextTick(() => { // 页面渲染完成后的回调
- _this.setTableH()
- })
- },
- setTableH () {
- this.tableHeight = window.innerHeight - 400
- }
- },
- watch: {
- detailsData: {
- handler (newValue, oldValue) {
- if (newValue.promoRuleList) {
- this.promoRuleList = newValue.promoRuleList
- }
- },
- deep: true
- }
- },
- mounted () {
- if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
- this.pageInit()
- this.getDetail()
- }
- },
- activated () {
- // 如果是新页签打开或者进入新的子页(例:存在列表第2条数据编辑页页签时再打开第4条数据的编辑页),则重置当前页面
- if (this.$store.state.app.isNewTab || !this.$store.state.app.isNewSubTab) {
- this.pageInit()
- this.getDetail()
- }
- },
- beforeRouteEnter (to, from, next) {
- next(vm => {})
- }
- }
- </script>
- <style lang="less">
- .promotionRulesDetail-wrap{
- position: relative;
- height: 100%;
- >.ant-spin-nested-loading{
- height: 100%;
- .ant-spin-container{
- height: 100%;
- .promotionRulesDetail-cont{
- min-height: 90%;
- }
- }
- }
- .promotionRulesDetail-back{
- margin-bottom: 10px;
- }
- .ant-descriptions-item-label.ant-descriptions-item-colon{
- width: 150px;
- }
- .ant-descriptions-item-content{
- max-width: 500px;
- }
- }
- </style>
|