chenrui 4 anni fa
parent
commit
05c2bfbf32
1 ha cambiato i file con 189 aggiunte e 170 eliminazioni
  1. 189 170
      src/views/SetmealSales/SetmealDetailModal.vue

+ 189 - 170
src/views/SetmealSales/SetmealDetailModal.vue

@@ -1,177 +1,197 @@
 <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>
-						<!-- 使用数量 -->
-						<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>
+  <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-row>
+      <a-row :gutter="20" v-if="detailsData">
+        <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-row>
+      <a-row :gutter="20" v-if="detailsData">
+        <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-row>
+      <a-row :gutter="20" v-if="detailsData">
+        <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: '服务内容', 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);
-			}
-		}
-	}
-};
+  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">
@@ -182,7 +202,6 @@ export default {
 	.item-cont {
 		margin-bottom: 15px;
 		display: flex;
-		align-items: center;
 		.item-label {
 			width: 115px;
 			font-size: 14px;