Przeglądaj źródła

Merge branch 'deploy_ddyh1.0' of chelingzhu-web/zyyc_channe_html into master

liwenwen 4 lat temu
rodzic
commit
8f78afb470

+ 10 - 0
src/api/customerBundle.js

@@ -105,6 +105,16 @@ export const customerBundleItemDelay = params => {
     method: 'post'
   }).then(res => res)
 }
+
+// 批量延期
+export const allCustomerBundleItemDelay = params => {
+  return axios.request({
+    url: `customerBundleItem/batchDelay`,
+    data: params,
+    method: 'post'
+  }).then(res => res)
+}
+
 //  已购套餐 取消购买
 export const orderCancel = params => {
   return axios.request({

+ 433 - 291
src/views/SetmealSales/SetmealDetailModal.vue

@@ -1,307 +1,449 @@
 <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-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 + '元' : 0 }}</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 + '元' : 0 }}</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"
-            :loading="loading"
-            bordered>
-            <!-- 到期时间 -->
-            <span slot="expiryDate" slot-scope="text, record">
-              <span v-if="record.cycleFlag==0">{{ record.expiryDate }}</span>
-              <span v-else>--</span>
-            </span>
-            <!-- 操作 -->
-            <span slot="action" slot-scope="text, record">
-              <a-button v-if="record.isDelay" type="link" @click="openSetDelay(record)">延期</a-button>
-              <span v-else>--</span>
-            </span>
-          </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="usedStoreName" slot-scope="text, record">{{ record.usedStoreName || '--' }}</span>
-          </a-table>
-        </a-tab-pane>
-      </a-tabs>
-      <div class="btn-cont" v-if="detailsData">
-        <a-button id="detailsSetmealModal-back" @click="isShow = false">返回列表</a-button>
-        <a-button v-if="detailsData.orderBundle.orderFlag=='PAED'&&detailsData.salesChannelSettleStatus=='NOT_SETTLE'&&recordData.length==0" id="detailsSetmealModal-cancel" type="primary" @click="cancelBuy">取消购买</a-button>
-      </div>
-    </a-modal>
-    <!-- 延期 -->
-    <delay-modal :openModal="setDelay" :serverData="serverData" @close="closeSetDelay" />
-  </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 + '元' : 0 }}</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 + '元' : 0 }}</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-button type="primary" style="margin-bottom:15px" @click="allDelay">批量延期</a-button>
+					<!-- 套餐内容列表 -->
+					<a-table ref="tcTable" size="middle" :rowKey="record => record.id" :columns="setMealColumns" :dataSource="setMealData"
+					 :row-selection="rowSelection" :pagination="false" :loading="loading" bordered>
+						<!-- 到期时间 -->
+						<span slot="expiryDate" slot-scope="text, record">
+							<span v-if="record.cycleFlag==0">{{ record.expiryDate }}</span>
+							<span v-else>--</span>
+						</span>
+						<!-- 操作 -->
+						<span slot="action" slot-scope="text, record">
+							<span v-if="(record.remainTimes == 0 && record.expiryTimes == 0) || (record.expiryDate.substr(0, 10) == '2099-01-01') || (record.cycleFlag == 1)">--</span>
+							<a-button v-else type="link" @click="openSetDelay(record)">延期</a-button>
+
+						</span>
+					</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="usedStoreName" slot-scope="text, record">{{ record.usedStoreName || '--' }}</span>
+					</a-table>
+				</a-tab-pane>
+			</a-tabs>
+			<div class="btn-cont" v-if="detailsData">
+				<a-button id="detailsSetmealModal-back" @click="isShow = false">返回列表</a-button>
+				<a-button v-if="detailsData.orderBundle.orderFlag=='PAED'&&detailsData.salesChannelSettleStatus=='NOT_SETTLE'&&recordData.length==0"
+				 id="detailsSetmealModal-cancel" type="primary" @click="cancelBuy">取消购买</a-button>
+			</div>
+		</a-modal>
+		<!-- 延期 -->
+		<delay-modal :openModal="setDelay" :serverData="serverData" @close="closeSetDelay" />
+		<!-- 批量延期 -->
+		<allDelay-modal :openAllDelayModal="isOpenModal" :selectedRows="selectedRowsData" @resetSelected="resetSelected"
+		 @close="closeOpenModal"></allDelay-modal>
+	</div>
 </template>
 
 <script>
-import { STable, VSelect } from '@/components'
-import { customerBundleDetail, customerBundleUseHistory, orderCancel } from '@/api/customerBundle.js'
-import DelayModal from './delayModal.vue'
-export default {
-  name: 'SetmealDetailModal',
-  components: { STable, VSelect, DelayModal },
-  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: '到期时间', scopedSlots: { customRender: 'expiryDate' }, width: 100, align: 'center' },
-        { title: '总次数', dataIndex: 'times', width: 100, align: 'center' },
-        { title: '剩余次数', dataIndex: 'remainTimes', width: 100, align: 'center' },
-        { title: '已用次数', dataIndex: 'usedTimes', width: 100, align: 'center' },
-        { title: '过期次数', dataIndex: 'expiryTimes', width: 100, align: 'center' },
-        { title: '退款次数', dataIndex: 'refundTimes', width: 100, align: 'center' },
-        { title: '操作', scopedSlots: { customRender: 'action' }, width: 100, align: 'center' }
-      ],
-      recordColumns: [
-        { title: '序号', dataIndex: 'no', width: 60, align: 'center' },
-        { title: '使用时间', dataIndex: 'usedTime', width: 100, align: 'center' },
-        { title: '服务内容', dataIndex: 'itemName', width: 100, align: 'center', customRender: function (text) { return (text || '--') } },
-        { title: '服务门店', scopedSlots: { customRender: 'usedStoreName' }, width: 100, align: 'center' },
-        { title: '核销单号', dataIndex: 'bizNum', width: 100, align: 'center' }
-      ],
-      setMealData: [], //  套餐内容
-      recordData: [], //  使用记录
-      detailsData: null, //  套餐数据
-      setDelay: false, //  延期设置
-      serverData: null, //  套餐包含服务 数据
-      loading: false
-    }
-  },
-  methods: {
-    // 套餐详情
-    getSetmealInfo () {
-      this.loading = true
-      //  套餐详情
-      customerBundleDetail({ id: this.setmealId }).then(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
-              item.isDelay = (item.expiryDate ? item.expiryDate.substr(0, 10) != '2099-01-01' : false) && (item.cycleFlag == 0)
-            })
-            this.setMealData = res.data.customerBundleItemList
-          } else {
-            this.setMealData = []
-          }
-        } else {
-          this.detailsData = null
-          this.setMealData = []
-        }
-        this.loading = false
-      })
-      //  使用记录
-      customerBundleUseHistory({ id: this.setmealId }).then(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 = []
-        }
-      })
-    },
-    //  取消购买
-    cancelBuy () {
-      const _this = this
-      this.$confirm({
-        title: '取消购买',
-        content: '取消购买后,套餐内所有服务的剩余次数变为0,用户无法再使用套餐。确认取消购买吗?',
-        onOk: () => {
-          orderCancel({ id: _this.setmealId }).then(res => {
-            if (res.status == 200) {
-              _this.$emit('refrresh')
-            }
-          })
-        },
-        onCancel () {}
-      })
-    },
-    //  延期
-    openSetDelay (row) {
-      this.serverData = row
-      this.setDelay = true
-    },
-    //  关闭延期
-    closeSetDelay () {
-      this.getSetmealInfo()
-      this.serverData = null
-      this.setDelay = false
-    }
-  },
-  watch: {
-    //  父页面传过来的弹框状态
-    openModal (newValue, oldValue) {
-      this.isShow = newValue
-    },
-    //  重定义的弹框状态
-    isShow (val) {
-      if (!val) {
-        this.$emit('close')
-        this.setMealData = []
-        this.recordData = []
-        this.detailsData = null
-      }
-    },
-    setmealId (newValue, oldValue) {
-      if (newValue && this.isShow) {
-        this.getSetmealInfo()
-      }
-    }
-  }
-}
+	import {
+		STable,
+		VSelect
+	} from '@/components'
+	import {
+		customerBundleDetail,
+		customerBundleUseHistory,
+		orderCancel
+	} from '@/api/customerBundle.js'
+	import DelayModal from './delayModal.vue'
+	import allDelayModal from './allDelayModal.vue'
+	export default {
+		name: 'SetmealDetailModal',
+		components: {
+			STable,
+			VSelect,
+			DelayModal,
+			allDelayModal
+		},
+		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: '到期时间',
+						scopedSlots: {
+							customRender: 'expiryDate'
+						},
+						width: 100,
+						align: 'center'
+					},
+					{
+						title: '总次数',
+						dataIndex: 'times',
+						width: 100,
+						align: 'center'
+					},
+					{
+						title: '剩余次数',
+						dataIndex: 'remainTimes',
+						width: 100,
+						align: 'center'
+					},
+					{
+						title: '已用次数',
+						dataIndex: 'usedTimes',
+						width: 100,
+						align: 'center'
+					},
+					{
+						title: '过期次数',
+						dataIndex: 'expiryTimes',
+						width: 100,
+						align: 'center'
+					},
+					{
+						title: '退款次数',
+						dataIndex: 'refundTimes',
+						width: 100,
+						align: 'center'
+					},
+					{
+						title: '操作',
+						scopedSlots: {
+							customRender: 'action'
+						},
+						width: 100,
+						align: 'center'
+					}
+				],
+				recordColumns: [{
+						title: '序号',
+						dataIndex: 'no',
+						width: 60,
+						align: 'center'
+					},
+					{
+						title: '使用时间',
+						dataIndex: 'usedTime',
+						width: 100,
+						align: 'center'
+					},
+					{
+						title: '服务内容',
+						dataIndex: 'itemName',
+						width: 100,
+						align: 'center',
+						customRender: function(text) {
+							return (text || '--')
+						}
+					},
+					{
+						title: '服务门店',
+						scopedSlots: {
+							customRender: 'usedStoreName'
+						},
+						width: 100,
+						align: 'center'
+					},
+					{
+						title: '核销单号',
+						dataIndex: 'bizNum',
+						width: 100,
+						align: 'center'
+					}
+				],
+				setMealData: [], //  套餐内容
+				recordData: [], //  使用记录
+				detailsData: null, //  套餐数据
+				setDelay: false, //  延期设置
+				serverData: null, //  套餐包含服务 数据
+				loading: false,
+				isOpenModal: false, // 批量延期弹窗初始状态
+				selectedRowsData: [], // 批量选择所有套餐数据集合
+				selectedRowsDataList: []
+			}
+		},
+		computed: {
+			rowSelection() {
+				return {
+					selectedRowKeys: this.selectedRowKeys, // 指定选中项的 key 数组
+					onChange: (selectedRowKeys, selectedRows) => {
+						this.selectedRowsDataList = selectedRows
+					},
+					getCheckboxProps: record => ({
+						props: {
+							disabled: (record.remainTimes == 0 && record.expiryTimes == 0) || (record.expiryDate.substr(0, 10) ==
+								'2099-01-01') || (record.cycleFlag == 1)
+						}
+					})
+				}
+			},
+			// 已选择的复选框
+			selectedRowKeys() {
+				const arr = []
+				this.selectedRowsDataList.map(item => {
+					arr.push(item.id)
+				})
+				return arr
+			},
+		},
+		methods: {
+			// 套餐详情
+			getSetmealInfo() {
+				this.loading = true
+				//  套餐详情
+				customerBundleDetail({
+					id: this.setmealId
+				}).then(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
+								item.isDelay = (item.expiryDate ? item.expiryDate.substr(0, 10) != '2099-01-01' : false) && (item.cycleFlag ==
+									0)
+							})
+							this.setMealData = res.data.customerBundleItemList
+						} else {
+							this.setMealData = []
+						}
+					} else {
+						this.detailsData = null
+						this.setMealData = []
+					}
+					this.loading = false
+				})
+				//  使用记录
+				customerBundleUseHistory({
+					id: this.setmealId
+				}).then(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 = []
+					}
+				})
+			},
+			// 批量延期
+			allDelay() {
+				if (this.selectedRowsDataList && this.selectedRowsDataList.length) {
+					this.isOpenModal = true
+					this.selectedRowsData = this.selectedRowsDataList
+					console.log(this.selectedRowsData, '-----------选中数据')
+				} else {
+					this.$message.error('请先选择服务项目')
+				}
+			},
+			// 重置复选框选中项
+			resetSelected() {
+				this.selectedRowsDataList = []
+			},
+			// 关闭批量延期弹窗
+			closeOpenModal() {
+				this.getSetmealInfo()
+				this.selectedRowsData = []
+				this.isOpenModal = false
+			},
+			//  取消购买
+			cancelBuy() {
+				const _this = this
+				this.$confirm({
+					title: '取消购买',
+					content: '取消购买后,套餐内所有服务的剩余次数变为0,用户无法再使用套餐。确认取消购买吗?',
+					onOk: () => {
+						orderCancel({
+							id: _this.setmealId
+						}).then(res => {
+							if (res.status == 200) {
+								_this.$emit('refrresh')
+							}
+						})
+					},
+					onCancel() {}
+				})
+			},
+			//  延期
+			openSetDelay(row) {
+				this.serverData = row
+				this.setDelay = true
+			},
+			//  关闭延期
+			closeSetDelay() {
+				this.getSetmealInfo()
+				this.serverData = null
+				this.setDelay = false
+			}
+		},
+		watch: {
+			//  父页面传过来的弹框状态
+			openModal(newValue, oldValue) {
+				this.isShow = newValue
+			},
+			//  重定义的弹框状态
+			isShow(val) {
+				if (!val) {
+					this.$emit('close')
+					this.setMealData = []
+					this.recordData = []
+					this.detailsData = null
+					this.selectedRowsDataList = []
+				}
+			},
+			setmealId(newValue, oldValue) {
+				if (newValue && this.isShow) {
+					this.getSetmealInfo()
+				}
+			}
+		}
+	}
 </script>
 
 <style lang="less">
-.DetailsSetmealModal {
-	.ant-modal-body {
-		padding: 24px 40px;
-	}
-	.item-cont {
-		margin-bottom: 15px;
-		display: flex;
-		.item-label {
-			width: 115px;
-			font-size: 14px;
-			color: rgba(0, 0, 0, 0.85);
-			flex-shrink: 0;
+	.DetailsSetmealModal {
+		.ant-modal-body {
+			padding: 24px 40px;
 		}
-		.item-main {
-			flex-grow: 1;
-			.wd-icon {
-				display: block;
+
+		.item-cont {
+			margin-bottom: 15px;
+			display: flex;
+
+			.item-label {
+				width: 115px;
+				font-size: 14px;
+				color: rgba(0, 0, 0, 0.85);
+				flex-shrink: 0;
 			}
-		}
-		.guidance-con {
-			border: 1px dashed #e8e8e8;
-			border-radius: 6px;
-			padding: 20px;
-			img {
-				max-width: 100%;
+
+			.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;
+				}
 			}
 		}
-		.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;
+
+		.btn-cont {
 			text-align: center;
-			.period,
-			.period-price {
-				padding: 5px 0;
-				border-right: 1px solid #e8e8e8;
-			}
-			.period-price:last-child {
-				border-right: none;
+			margin: 50px 0 10px;
+
+			button {
+				margin: 0 20px;
 			}
 		}
 	}
-	.btn-cont {
-		text-align: center;
-		margin: 50px 0 10px;
-    button{
-      margin: 0 20px;
-    }
-	}
-}
 </style>

+ 142 - 0
src/views/SetmealSales/allDelayModal.vue

@@ -0,0 +1,142 @@
+<template>
+	<a-modal class="delayModal" title="套餐服务延期" width="60%" centered :footer="null" :maskClosable="false" :destroyOnClose="true"
+	 @cancel="cancel" v-model="isShow">
+		<!-- 表单 -->
+		<a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
+			<!-- 服务名称 -->
+			<a-form-model-item label="服务名称" class="item-con"><span class="item-main" style="margin-right: 8px;" v-for="item in listNameData"
+				 :key="item.index">{{ '【' +item.itemName +'】' }}</span></a-form-model-item>
+			<!-- 新的到期时间 -->
+			<a-form-model-item label="新的到期时间" prop="expiryDate">
+				<a-date-picker type="date" v-model="form.expiryDate" id="delay-expiryDate" placeholder="请选择到期时间,超过该时间,用户将无法再使用套餐"
+				 :disabled-date="disabledDate" style="width: 80%;" />
+			</a-form-model-item>
+			<a-form-model-item label="" class="btn-cont" :label-col="{ span: 0 }" :wrapper-col="{ span: 24 }">
+				<a-button id="delay-cancel" class="delay-cancel" @click="cancel">取消</a-button>
+				<a-button type="primary" id="delay-submit" @click="onSubmit">提交</a-button>
+			</a-form-model-item>
+		</a-form-model>
+	</a-modal>
+</template>
+
+<script>
+	import moment from 'moment'
+	import {
+		allCustomerBundleItemDelay
+	} from '@/api/customerBundle.js'
+	export default {
+		name: 'AllDelayModal',
+		props: {
+			openAllDelayModal: {
+				//  弹框是否展示
+				type: Boolean,
+				default: false
+			},
+			selectedRows: {
+				//  服务数据
+				type: Array,
+				default: () => {
+					return {}
+				}
+			}
+		},
+		data() {
+			return {
+				isShow: this.openAllDelayModal, //  弹框是否展示
+				listNameData: [], // 服务名称
+				form: {
+					expiryDate: null //  新的到期时间
+				},
+				rules: {
+					expiryDate: [{
+						required: true,
+						message: '请选择新的到期时间',
+						trigger: 'change'
+					}]
+				}
+			}
+		},
+		methods: {
+			disabledDate(current) {
+				//  到期时间范围为:当前日期 <= date < 2038-01-01
+				const minDate = current.valueOf() < moment().subtract(1, 'days').valueOf() //  包含当天
+				const maxDate = current.valueOf() > moment('2038-01-01').valueOf()
+				return minDate || maxDate
+			},
+			//  取消
+			cancel() {
+				this.resetForm() //  重置表单数据
+				this.isShow = false
+			},
+			// 重置表单
+			resetForm() {
+				this.form.expiryDate = null
+			},
+			//  提交
+			onSubmit() {
+				this.$refs.ruleForm.validate(valid => {
+					if (valid) {
+						var listData = []
+						this.selectedRows.map(item => {
+							var a = {
+								id: item.id,
+								returnTimes: item.expiryTimes
+							}
+							listData.push(a)
+						})
+						listData.map(item => {
+							item.expiryDate = moment(this.form.expiryDate).format('YYYY-MM-DD')
+						})
+						this.$confirm({
+							title: '确定延期',
+							content: '所选服务将全部延期,返还次数为过期次数,确定延期吗?',
+							onOk: () => {
+								allCustomerBundleItemDelay(listData).then(res => {
+									if (res.status == 200) {
+										this.$emit('resetSelected')
+										this.cancel()
+									}
+								})
+							},
+							onCancel() {}
+						})
+					} else {
+						return false
+					}
+				})
+			}
+		},
+		watch: {
+			//  父页面传过来的弹框状态
+			openAllDelayModal(newValue, oldValue) {
+				this.isShow = newValue
+			},
+			//  重定义的弹框状态
+			isShow(val) {
+				if (!val) {
+					this.$emit('close')
+				} else {
+					this.resetForm() //  重置表单数据
+				}
+			},
+			selectedRows(val) {
+				if (val) {
+					this.listNameData = val
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="less">
+	.delayModal {
+		.btn-cont {
+			text-align: center;
+			margin: 50px 0 10px;
+
+			button {
+				margin: 0 20px;
+			}
+		}
+	}
+</style>

+ 1 - 1
src/views/power/user/userList.vue

@@ -49,7 +49,7 @@
         <span v-else>{{ $refs.loginFlag.getNameByCode(record.loginFlag) }}</span>
       </span>
       <div slot="roleNames" slot-scope="text, record" :title="record.roleNames">
-        <span v-if="record.roleNames">{{ record.roleNames.substr(0,12) + '...' }}</span>
+        <span v-if="record.roleNames">{{ record.roleNames }}</span>
         <span v-else>无</span>
       </div>
       <span slot="action" slot-scope="text, record">

+ 2 - 2
vue.config.js

@@ -108,8 +108,8 @@ const vueConfig = {
     // If you want to turn on the proxy, please remove the mockjs /src/main.jsL11
     proxy: {
       '/api': {
-        target: 'https://channel.test.zyucgj.com/zyyc-channel/',
-        // target: 'http://192.168.16.103:7103/zyyc-channel/',
+        // target: 'https://channel.test.zyucgj.com/zyyc-channel/',
+        target: 'http://192.168.16.103:7103/zyyc-channel/',
         // target: 'https://channel.qiubcar.com/zyyc-channel/',
         ws: false,
         changeOrigin: true,