Browse Source

页面优化

chenrui 4 years ago
parent
commit
05c2bfbf32
1 changed files with 189 additions and 170 deletions
  1. 189 170
      src/views/SetmealSales/SetmealDetailModal.vue

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

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