Parcourir la source

已购套餐 详情-使用记录 去掉车牌号字段

chenrui il y a 4 ans
Parent
commit
8efddc30bc
1 fichiers modifiés avec 223 ajouts et 235 suppressions
  1. 223 235
      src/views/SetmealSales/SetmealDetailModal.vue

+ 223 - 235
src/views/SetmealSales/SetmealDetailModal.vue

@@ -1,244 +1,232 @@
 <template>
-  <div class="DetailsSetmeal">
-    <v-select v-show="false" ref="payType" code="PAY_PROCUCT_TYPE" placeholder="支付方式"></v-select>
-    <a-modal
-      class="DetailsSetmealModal"
-      title="套餐购买详情"
-      width="80%"
-      centered
-      :footer="null"
-      :maskClosable="false"
-      :destroyOnClose="true"
-      @cancel="isShow=false"
-      v-model="isShow">
-      <a-row :gutter="20" v-if="detailsData">
-        <a-col :span="8" class="item-cont">
-          <p class="item-label">购买日期:</p>
-          <p class="item-main">{{ detailsData.orderDate || '--' }}</p>
-        </a-col>
-        <a-col :span="8" class="item-cont">
-          <p class="item-label">工单号:</p>
-          <p class="item-main">{{ detailsData.orderBundle.number || '--' }}</p>
-        </a-col>
-        <a-col :span="8" class="item-cont">
-          <p class="item-label">客户名称:</p>
-          <p class="item-main">{{ detailsData.orderBundle.custName || '--' }}</p>
-        </a-col>
-        <a-col :span="8" class="item-cont">
-          <p class="item-label">手机号:</p>
-          <p class="item-main">{{ detailsData.orderBundle.custMobile || '--' }}</p>
-        </a-col>
-        <a-col :span="8" class="item-cont">
-          <p class="item-label">销售合作商:</p>
-          <p class="item-main">{{ detailsData.dataSourceName || '--' }}</p>
-        </a-col>
-        <a-col :span="8" class="item-cont">
-          <p class="item-label">套餐名称:</p>
-          <p class="item-main">{{ detailsData.orderBundle.bundleName || '--' }}</p>
-        </a-col>
-        <a-col :span="8" class="item-cont">
-          <p class="item-label">套餐价格:</p>
-          <p class="item-main">{{ detailsData.orderBundle.totalAmount ? detailsData.orderBundle.totalAmount + '元' :'--' }}</p>
-        </a-col>
-        <a-col :span="8" class="item-cont">
-          <p class="item-label">销售人员:</p>
-          <p class="item-main">{{ detailsData.sellerName || '--' }}</p>
-        </a-col>
-        <a-col :span="8" class="item-cont">
-          <p class="item-label">收款金额:</p>
-          <p class="item-main">{{ detailsData.orderBundle.payedAmount ? detailsData.orderBundle.payedAmount + '元' :'--' }}</p>
-        </a-col>
-        <a-col :span="8" class="item-cont">
-          <p class="item-label">支付方式:</p>
-          <p class="item-main">{{ $refs.payType.getNameByCode(detailsData.paymentDetailList[0].payType) }}</p>
-        </a-col>
-      </a-row>
-      <a-tabs type="card">
-        <a-tab-pane key="1" tab="套餐内容">
-          <!-- 套餐内容列表 -->
-          <a-table
-            ref="tcTable"
-            size="middle"
-            :rowKey="(record) => record.id"
-            :columns="setMealColumns"
-            :dataSource="setMealData"
-            :pagination="false"
-            bordered>
-          </a-table>
-        </a-tab-pane>
-        <a-tab-pane key="2" tab="使用记录">
-          <!-- 使用记录列表 -->
-          <a-table
-            ref="recordTable"
-            size="middle"
-            :rowKey="(record) => record.id"
-            :columns="recordColumns"
-            :dataSource="recordData"
-            :pagination="false"
-            bordered>
-            <!-- 车牌号 -->
-            <span slot="vehicleNum" slot-scope="text, record">{{ record.vehicleNum || '--' }}</span>
-            <!-- 服务门店 -->
-            <span slot="usedStoreName" slot-scope="text, record">{{ record.usedStoreName || '--' }}</span>
-          </a-table>
-        </a-tab-pane>
-      </a-tabs>
-      <div class="btn-cont">
-        <a-button id="detailsSetmealModal-back" @click="isShow=false">返回列表</a-button>
-      </div>
-    </a-modal>
-  </div>
+	<div class="DetailsSetmeal">
+		<v-select v-show="false" ref="payType" code="PAY_PROCUCT_TYPE" placeholder="支付方式"></v-select>
+		<a-modal
+			class="DetailsSetmealModal"
+			title="套餐购买详情"
+			width="80%"
+			centered
+			:footer="null"
+			:maskClosable="false"
+			:destroyOnClose="true"
+			@cancel="isShow = false"
+			v-model="isShow"
+		>
+			<a-row :gutter="20" v-if="detailsData">
+				<a-col :span="8" class="item-cont">
+					<p class="item-label">购买日期:</p>
+					<p class="item-main">{{ detailsData.orderDate || '--' }}</p>
+				</a-col>
+				<a-col :span="8" class="item-cont">
+					<p class="item-label">工单号:</p>
+					<p class="item-main">{{ detailsData.orderBundle.number || '--' }}</p>
+				</a-col>
+				<a-col :span="8" class="item-cont">
+					<p class="item-label">客户名称:</p>
+					<p class="item-main">{{ detailsData.orderBundle.custName || '--' }}</p>
+				</a-col>
+				<a-col :span="8" class="item-cont">
+					<p class="item-label">手机号:</p>
+					<p class="item-main">{{ detailsData.orderBundle.custMobile || '--' }}</p>
+				</a-col>
+				<a-col :span="8" class="item-cont">
+					<p class="item-label">销售合作商:</p>
+					<p class="item-main">{{ detailsData.dataSourceName || '--' }}</p>
+				</a-col>
+				<a-col :span="8" class="item-cont">
+					<p class="item-label">套餐名称:</p>
+					<p class="item-main">{{ detailsData.orderBundle.bundleName || '--' }}</p>
+				</a-col>
+				<a-col :span="8" class="item-cont">
+					<p class="item-label">套餐价格:</p>
+					<p class="item-main">{{ detailsData.orderBundle.totalAmount ? detailsData.orderBundle.totalAmount + '元' : '--' }}</p>
+				</a-col>
+				<a-col :span="8" class="item-cont">
+					<p class="item-label">销售人员:</p>
+					<p class="item-main">{{ detailsData.sellerName || '--' }}</p>
+				</a-col>
+				<a-col :span="8" class="item-cont">
+					<p class="item-label">收款金额:</p>
+					<p class="item-main">{{ detailsData.orderBundle.payedAmount ? detailsData.orderBundle.payedAmount + '元' : '--' }}</p>
+				</a-col>
+				<a-col :span="8" class="item-cont">
+					<p class="item-label">支付方式:</p>
+					<p class="item-main">{{ $refs.payType.getNameByCode(detailsData.paymentDetailList[0].payType) }}</p>
+				</a-col>
+			</a-row>
+			<a-tabs type="card">
+				<a-tab-pane key="1" tab="套餐内容">
+					<!-- 套餐内容列表 -->
+					<a-table ref="tcTable" size="middle" :rowKey="record => record.id" :columns="setMealColumns" :dataSource="setMealData" :pagination="false" bordered></a-table>
+				</a-tab-pane>
+				<a-tab-pane key="2" tab="使用记录">
+					<!-- 使用记录列表 -->
+					<a-table ref="recordTable" size="middle" :rowKey="record => record.id" :columns="recordColumns" :dataSource="recordData" :pagination="false" bordered>
+						<!-- 车牌号 -->
+						<span slot="vehicleNum" slot-scope="text, record">{{ record.vehicleNum || '--' }}</span>
+						<!-- 服务门店 -->
+						<span slot="usedStoreName" slot-scope="text, record">{{ record.usedStoreName || '--' }}</span>
+						<!-- 使用数量 -->
+						<span slot="customerBundleItemTimes" slot-scope="text, record">{{ record.customerBundleItemTimes || '--' }}</span>
+					</a-table>
+				</a-tab-pane>
+			</a-tabs>
+			<div class="btn-cont"><a-button id="detailsSetmealModal-back" @click="isShow = false">返回列表</a-button></div>
+		</a-modal>
+	</div>
 </template>
 
 <script>
-import { STable, VSelect } from '@/components'
-import { customerBundleDetail, customerBundleUseHistory } from '@/api/customerBundle.js'
+import { STable, VSelect } from '@/components';
+import { customerBundleDetail, customerBundleUseHistory } from '@/api/customerBundle.js';
 export default {
-  name: 'SetmealDetailModal',
-  components: { STable, VSelect },
-  props: {
-    openModal: { //  弹框是否展示
-      type: Boolean,
-      default: false
-    },
-    setmealId: { //  套餐id
-      type: String,
-      default: ''
-    }
-  },
-  data () {
-    return {
-      isShow: this.openModal, //  弹框是否展示
-      setMealColumns: [
-        { title: '序号', dataIndex: 'no', width: 60, align: 'center' },
-        { title: '内容', dataIndex: 'itemName', width: 200, align: 'center' },
-        { title: '剩余数量', dataIndex: 'remainTimes', width: 100, align: 'center' }
-      ],
-      recordColumns: [
-        { title: '序号', dataIndex: 'no', width: 60, align: 'center' },
-        { title: '使用时间', dataIndex: 'usedTime', width: 100, align: 'center' },
-        { title: '车牌号', scopedSlots: { customRender: 'vehicleNum' }, width: 100, align: 'center' },
-        { title: '服务内容', dataIndex: 'bundItemName', width: 100, align: 'center' },
-        { title: '服务门店', scopedSlots: { customRender: 'usedStoreName' }, width: 100, align: 'center' },
-        { title: '使用数量', dataIndex: 'customerBundleItemTimes', width: 100, align: 'center' },
-        { title: '工单', dataIndex: 'orderNo', width: 100, align: 'center' }
-      ],
-      setMealData: [], //  套餐内容
-      recordData: [], //  使用记录
-      detailsData: null //  套餐数据
-    }
-  },
-  methods: {
-    // 套餐详情
-    getSetmealInfo (id) {
-      //  套餐详情
-      customerBundleDetail({ id: id }).then(res => {
-        console.log(res)
-        if (res.status == 200) {
-          this.detailsData = res.data
-          if (res.data && res.data.customerBundleItemList && res.data.customerBundleItemList.length > 0) {
-            res.data.customerBundleItemList.map((item, index) => {
-              item.no = index + 1
-            })
-            this.setMealData = res.data.customerBundleItemList
-          } else {
-            this.setMealData = []
-          }
-        } else {
-          this.detailsData = null
-          this.setMealData = []
-        }
-      })
-      //  使用记录
-      customerBundleUseHistory({ id: id }).then(res => {
-        console.log(res)
-        if (res.status == 200) {
-          if (res.data && res.data.length > 0) {
-            res.data.map((item, index) => {
-              item.no = index + 1
-            })
-            this.recordData = res.data
-          } else {
-            this.recordData = []
-          }
-        } else {
-          this.recordData = []
-        }
-      })
-    }
-  },
-  watch: {
-    //  父页面传过来的弹框状态
-    openModal (newValue, oldValue) {
-      this.isShow = newValue
-    },
-    //  重定义的弹框状态
-    isShow (val) {
-      if (!val) {
-        this.$emit('close')
-      }
-    },
-    setmealId (newValue, oldValue) {
-      if (newValue && this.isShow) {
-        this.getSetmealInfo(newValue)
-      }
-    }
-  }
-}
+	name: 'SetmealDetailModal',
+	components: { STable, VSelect },
+	props: {
+		openModal: {
+			//  弹框是否展示
+			type: Boolean,
+			default: false
+		},
+		setmealId: {
+			//  套餐id
+			type: String,
+			default: ''
+		}
+	},
+	data() {
+		return {
+			isShow: this.openModal, //  弹框是否展示
+			setMealColumns: [
+				{ title: '序号', dataIndex: 'no', width: 60, align: 'center' },
+				{ title: '内容', dataIndex: 'itemName', width: 200, align: 'center' },
+				{ title: '剩余数量', dataIndex: 'remainTimes', width: 100, align: 'center' }
+			],
+			recordColumns: [
+				{ title: '序号', dataIndex: 'no', width: 60, align: 'center' },
+				{ title: '使用时间', dataIndex: 'usedTime', width: 100, align: 'center' },
+				{ title: '服务内容', dataIndex: 'bundItemName', width: 100, align: 'center' },
+				{ title: '服务门店', scopedSlots: { customRender: 'usedStoreName' }, width: 100, align: 'center' },
+				{ title: '使用数量', scopedSlots: { customRender: 'customerBundleItemTimes' }, width: 100, align: 'center' },
+				{ title: '工单', dataIndex: 'orderNo', width: 100, align: 'center' }
+			],
+			setMealData: [], //  套餐内容
+			recordData: [], //  使用记录
+			detailsData: null //  套餐数据
+		};
+	},
+	methods: {
+		// 套餐详情
+		getSetmealInfo(id) {
+			//  套餐详情
+			customerBundleDetail({ id: id }).then(res => {
+				console.log(res);
+				if (res.status == 200) {
+					this.detailsData = res.data;
+					if (res.data && res.data.customerBundleItemList && res.data.customerBundleItemList.length > 0) {
+						res.data.customerBundleItemList.map((item, index) => {
+							item.no = index + 1;
+						});
+						this.setMealData = res.data.customerBundleItemList;
+					} else {
+						this.setMealData = [];
+					}
+				} else {
+					this.detailsData = null;
+					this.setMealData = [];
+				}
+			});
+			//  使用记录
+			customerBundleUseHistory({ id: id }).then(res => {
+				console.log(res);
+				if (res.status == 200) {
+					if (res.data && res.data.length > 0) {
+						res.data.map((item, index) => {
+							item.no = index + 1;
+						});
+						this.recordData = res.data;
+					} else {
+						this.recordData = [];
+					}
+				} else {
+					this.recordData = [];
+				}
+			});
+		}
+	},
+	watch: {
+		//  父页面传过来的弹框状态
+		openModal(newValue, oldValue) {
+			this.isShow = newValue;
+		},
+		//  重定义的弹框状态
+		isShow(val) {
+			if (!val) {
+				this.$emit('close');
+			}
+		},
+		setmealId(newValue, oldValue) {
+			if (newValue && this.isShow) {
+				this.getSetmealInfo(newValue);
+			}
+		}
+	}
+};
 </script>
 
 <style lang="less">
-  .DetailsSetmealModal{
-    .ant-modal-body{
-      padding: 24px 40px;
-    }
-    .item-cont{
-      margin-bottom: 15px;
-      display: flex;
-      align-items: center;
-      .item-label{
-        width: 115px;
-        font-size: 14px;
-        color: rgba(0, 0, 0, 0.85);
-        flex-shrink: 0;
-      }
-      .item-main{
-        flex-grow: 1;
-        .wd-icon{
-          display: block;
-        }
-      }
-      .guidance-con{
-        border: 1px dashed #e8e8e8;
-        border-radius: 6px;
-        padding: 20px;
-        img {
-          max-width: 100%;
-        }
-      }
-      .period-price-con{
-        border-bottom: 1px solid #e8e8e8;
-      }
-      .item-period{
-        display: flex;
-        align-items: center;
-        justify-content: space-evenly;
-        flex-grow: 1;
-        border: 1px solid #e8e8e8;
-        border-width: 1px 1px 0;
-        text-align: center;
-        .period, .period-price{
-          padding: 5px 0;
-          border-right: 1px solid #e8e8e8;
-        }
-        .period-price:last-child{
-          border-right: none;
-        }
-      }
-    }
-    .btn-cont{
-      text-align: center;
-      margin: 35px 0 10px;
-    }
-  }
+.DetailsSetmealModal {
+	.ant-modal-body {
+		padding: 24px 40px;
+	}
+	.item-cont {
+		margin-bottom: 15px;
+		display: flex;
+		align-items: center;
+		.item-label {
+			width: 115px;
+			font-size: 14px;
+			color: rgba(0, 0, 0, 0.85);
+			flex-shrink: 0;
+		}
+		.item-main {
+			flex-grow: 1;
+			.wd-icon {
+				display: block;
+			}
+		}
+		.guidance-con {
+			border: 1px dashed #e8e8e8;
+			border-radius: 6px;
+			padding: 20px;
+			img {
+				max-width: 100%;
+			}
+		}
+		.period-price-con {
+			border-bottom: 1px solid #e8e8e8;
+		}
+		.item-period {
+			display: flex;
+			align-items: center;
+			justify-content: space-evenly;
+			flex-grow: 1;
+			border: 1px solid #e8e8e8;
+			border-width: 1px 1px 0;
+			text-align: center;
+			.period,
+			.period-price {
+				padding: 5px 0;
+				border-right: 1px solid #e8e8e8;
+			}
+			.period-price:last-child {
+				border-right: none;
+			}
+		}
+	}
+	.btn-cont {
+		text-align: center;
+		margin: 35px 0 10px;
+	}
+}
 </style>