|
@@ -1,68 +1,30 @@
|
|
<template>
|
|
<template>
|
|
<a-modal
|
|
<a-modal
|
|
centered
|
|
centered
|
|
- class="productInfoDetail-modal"
|
|
|
|
|
|
+ class="salesRecord-modal"
|
|
:footer="null"
|
|
:footer="null"
|
|
:maskClosable="false"
|
|
:maskClosable="false"
|
|
:title="modalTit"
|
|
:title="modalTit"
|
|
v-model="isShow"
|
|
v-model="isShow"
|
|
@cancle="isShow=false"
|
|
@cancle="isShow=false"
|
|
width="80%">
|
|
width="80%">
|
|
- <!-- 产品详情 -->
|
|
|
|
<div>
|
|
<div>
|
|
- <!-- <div v-if="detailsData"> -->
|
|
|
|
- <a-row :gutter="35">
|
|
|
|
- <a-col :span="8" class="item-cont">
|
|
|
|
- <p class="item-label">产品名称:</p>
|
|
|
|
- <p class="item-main">名称思密达</p>
|
|
|
|
- <!-- <p class="item-main">{{ detailsData.name }}</p> -->
|
|
|
|
- </a-col>
|
|
|
|
- <a-col :span="8" class="item-cont">
|
|
|
|
- <p class="item-label">产品编码:</p>
|
|
|
|
- <p class="item-main">名称思密达</p>
|
|
|
|
- <!-- <p class="item-main">{{ detailsData.name }}</p> -->
|
|
|
|
- </a-col>
|
|
|
|
- <a-col :span="8" class="item-cont">
|
|
|
|
- <p class="item-label">原厂编码:</p>
|
|
|
|
- <p class="item-main">名称思密达</p>
|
|
|
|
- <!-- <p class="item-main">{{ detailsData.name }}</p> -->
|
|
|
|
- </a-col>
|
|
|
|
- </a-row>
|
|
|
|
- <a-row :gutter="35">
|
|
|
|
- <a-col :span="8" class="item-cont">
|
|
|
|
- <p class="item-label">基本单位:</p>
|
|
|
|
- <p class="item-main">陕西省西安市未央区凤城八路</p>
|
|
|
|
- <!-- <p class="item-main">{{ detailsData.provinceName }}{{ detailsData.cityName }}{{ detailsData.districtName }}{{ detailsData.address }}</p> -->
|
|
|
|
- </a-col>
|
|
|
|
- <a-col :span="8" class="item-cont">
|
|
|
|
- <p class="item-label">产品品牌:</p>
|
|
|
|
- <p class="item-main">名称思密达</p>
|
|
|
|
- <!-- <p class="item-main">{{ detailsData.name }}</p> -->
|
|
|
|
- </a-col>
|
|
|
|
- <a-col :span="8" class="item-cont">
|
|
|
|
- <p class="item-label">产品类别:</p>
|
|
|
|
- <p class="item-main">名称思密达</p>
|
|
|
|
- <!-- <p class="item-main">{{ detailsData.name }}</p> -->
|
|
|
|
- </a-col>
|
|
|
|
- </a-row>
|
|
|
|
- <a-row :gutter="35">
|
|
|
|
- <a-col :span="8" class="item-cont">
|
|
|
|
- <p class="item-label">经销批发价:</p>
|
|
|
|
- <p class="item-main">名称思密达</p>
|
|
|
|
- <!-- <p class="item-main">{{ detailsData.name }}</p> -->
|
|
|
|
- </a-col>
|
|
|
|
- <a-col :span="8" class="item-cont">
|
|
|
|
- <p class="item-label">终端价:</p>
|
|
|
|
- <p class="item-main">名称思密达</p>
|
|
|
|
- <!-- <p class="item-main">{{ detailsData.name }}</p> -->
|
|
|
|
- </a-col>
|
|
|
|
- <a-col :span="8" class="item-cont">
|
|
|
|
- <p class="item-label">车主价:</p>
|
|
|
|
- <p class="item-main">名称思密达</p>
|
|
|
|
- <!-- <p class="item-main">{{ detailsData.name }}</p> -->
|
|
|
|
- </a-col>
|
|
|
|
- </a-row>
|
|
|
|
- <div class="btn-cont"><a-button id="product-management-detail-modal-back" @click="isShow = false">返回列表</a-button></div>
|
|
|
|
|
|
+ <a-tabs type="card" default-active-key="1" @change="callback">
|
|
|
|
+ <a-tab-pane key="1" tab="当前客户">
|
|
|
|
+ </a-tab-pane>
|
|
|
|
+ <a-tab-pane key="2" tab="全部客户">
|
|
|
|
+ </a-tab-pane>
|
|
|
|
+ </a-tabs>
|
|
|
|
+ <!-- 表格 -->
|
|
|
|
+ <s-table
|
|
|
|
+ class="sTable"
|
|
|
|
+ ref="table"
|
|
|
|
+ size="default"
|
|
|
|
+ :rowKey="(record) => record.id"
|
|
|
|
+ :columns="columns"
|
|
|
|
+ :data="loadData"
|
|
|
|
+ bordered>
|
|
|
|
+ </s-table>
|
|
</div>
|
|
</div>
|
|
</a-modal>
|
|
</a-modal>
|
|
</template>
|
|
</template>
|
|
@@ -70,7 +32,7 @@
|
|
<script>
|
|
<script>
|
|
import { STable } from '@/components'
|
|
import { STable } from '@/components'
|
|
export default {
|
|
export default {
|
|
- name: 'productInfoDetailModal',
|
|
|
|
|
|
+ name: 'salesRecordModal',
|
|
components: { STable },
|
|
components: { STable },
|
|
props: {
|
|
props: {
|
|
openModal: { // 弹框显示状态
|
|
openModal: { // 弹框显示状态
|
|
@@ -84,19 +46,87 @@ export default {
|
|
},
|
|
},
|
|
computed: {
|
|
computed: {
|
|
modalTit () {
|
|
modalTit () {
|
|
- return '产品详情'
|
|
|
|
|
|
+ return '销售记录'
|
|
}
|
|
}
|
|
},
|
|
},
|
|
data () {
|
|
data () {
|
|
return {
|
|
return {
|
|
isShow: this.openModal, // 是否打开弹框
|
|
isShow: this.openModal, // 是否打开弹框
|
|
- detailsData: null, // 网点数据
|
|
|
|
|
|
+ // 表头
|
|
|
|
+ columns: [
|
|
|
|
+ {
|
|
|
|
+ title: '销售时间',
|
|
|
|
+ dataIndex: 'salesTime',
|
|
|
|
+ align: 'center',
|
|
|
|
+ width: 250
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '销售价(¥)',
|
|
|
|
+ dataIndex: 'price',
|
|
|
|
+ align: 'center',
|
|
|
|
+ width: 150
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '销售数量',
|
|
|
|
+ dataIndex: 'salesNums',
|
|
|
|
+ align: 'center',
|
|
|
|
+ width: 150
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '客户名称',
|
|
|
|
+ dataIndex: 'productBrand',
|
|
|
|
+ align: 'center'
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
|
|
+ // 加载数据方法 必须为 Promise 对象
|
|
|
|
+ loadData: parameter => {
|
|
|
|
+ this.disabled = true
|
|
|
|
+ // return customerBundleDelayList( Object.assign(parameter, this.queryParam) ).then(res => {
|
|
|
|
+ // const data = res.data
|
|
|
|
+ // return data
|
|
|
|
+ // })
|
|
|
|
+ const _this = this
|
|
|
|
+ return new Promise(function(resolve, reject){
|
|
|
|
+ const data = {
|
|
|
|
+ pageNo: 1,
|
|
|
|
+ pageSize: 10,
|
|
|
|
+ list: [
|
|
|
|
+ {
|
|
|
|
+ id: '1',
|
|
|
|
+ salesTime: '2020-12-23 15:23:15',
|
|
|
|
+ price: 56,
|
|
|
|
+ salesNums: 12,
|
|
|
|
+ productBrand: '箭冠品牌',
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ id: '23',
|
|
|
|
+ salesTime: '2020-12-23 15:23:15',
|
|
|
|
+ price: 56,
|
|
|
|
+ salesNums: 12,
|
|
|
|
+ productBrand: '箭冠品牌',
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ id: '44',
|
|
|
|
+ salesTime: '2020-12-23 15:23:15',
|
|
|
|
+ price: 56,
|
|
|
|
+ salesNums: 12,
|
|
|
|
+ productBrand: '箭冠品牌',
|
|
|
|
+ }
|
|
|
|
+ ],
|
|
|
|
+ count: 100
|
|
|
|
+ }
|
|
|
|
+ resolve(data)
|
|
|
|
+ })
|
|
|
|
+ },
|
|
}
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
// 获取详情
|
|
// 获取详情
|
|
getDetail(){
|
|
getDetail(){
|
|
|
|
|
|
|
|
+ },
|
|
|
|
+ callback(key){
|
|
|
|
+ console.log(key);
|
|
}
|
|
}
|
|
},
|
|
},
|
|
watch: {
|
|
watch: {
|
|
@@ -120,27 +150,9 @@ export default {
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style lang="less">
|
|
<style lang="less">
|
|
- .productInfoDetail-modal{
|
|
|
|
|
|
+ .salesRecord-modal{
|
|
.ant-modal-body {
|
|
.ant-modal-body {
|
|
- padding: 40px 40px 24px;
|
|
|
|
- }
|
|
|
|
- .item-cont {
|
|
|
|
- margin-bottom: 15px;
|
|
|
|
- display: flex;
|
|
|
|
- .item-label {
|
|
|
|
- width: 115px;
|
|
|
|
- font-size: 14px;
|
|
|
|
- color: rgba(0, 0, 0, 0.85);
|
|
|
|
- flex-shrink: 0;
|
|
|
|
- }
|
|
|
|
- .item-main {
|
|
|
|
- flex-grow: 1;
|
|
|
|
- word-break: break-all;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- .btn-cont {
|
|
|
|
- text-align: center;
|
|
|
|
- margin: 35px 0 10px;
|
|
|
|
|
|
+ padding: 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|