jztAdmin/src/pages/finance/ts/list.vue

<template>
	<!-- 订单-售后订单 -->
	<div>
		<Card :bordered="false" dis-hover class="ivu-mt" :padding="0">
			<div class="new_card_pd">
				<!-- 筛选条件 -->
				<Form ref="pagination" inline :model="pagination" :label-width="labelWidth"
					:label-position="labelPosition" @submit.native.prevent>

					<FormItem label="员工ID：" label-for="title">
						<div class='flex-search'>
							<Input v-model="pagination.member_id" icon="ios-search" @on-click='openmid' placeholder="请输入员工ID" class="input-add mr14" />
						</div>
					</FormItem>
				<!-- 	<FormItem label="时间范围：">
						<DatePicker :editable="false" @on-change="onchangeTime" :value="timeVal" format="yyyy/MM/dd"
							type="daterange" placement="bottom-start" placeholder="自定义时间" class="input-add"
							:options="options"></DatePicker>
					</FormItem>
					<FormItem label="业绩类型:">
						<Select v-model="pagination.type" class="input-add">
							<Option v-for="(item, index) in num" :value="item.value" :key="index">{{ item.name }}
							</Option>
						</Select>
					</FormItem> -->
					<Button type="primary" @click="orderSearch()">查询</Button>
					<!-- <FormItem label="订单搜索：" label-for="title">
						<Input v-model="pagination.order_id" placeholder="请输入订单号" class="input-add mr14" />
						
					</FormItem> -->
				</Form>
			</div>
		</Card>
		<!-- <cards-data :cardLists="cardLists"></cards-data> -->
		<Card :bordered="false" dis-hover>
			<!-- 售后订单表格 -->
			<Table :columns="thead" :data="tbody" ref="table" :loading="loading" highlight-row no-userFrom-text="暂无数据"
				no-filtered-userFrom-text="暂无筛选结果">
				<template slot-scope="{ row }" slot="order_id">
					<span v-text="row.order_id" style="display: block"></span>
					<span v-show="row.is_del === 1 && row.delete_time == null" class="span-del">用户已删除</span>
				</template>
				<template slot-scope="{ row }" slot="nickname">
					<div>用户名：{{ row.real_name }}</div>
					<div>手机号：{{ row.user_phone }}</div>
				</template>
				<template slot-scope="{ row, index }" slot="user">
					<span class="tabBox_pice">{{row.user && row.user.nickname ? row.user.nickname + '(UID:' +row.user.uid+')':''}}</span>
				</template>
				<template slot-scope="{ row, index }" slot="name">
					<span class="tabBox_pice">{{showName(row.member_id)}}</span>
				</template>
				<template slot-scope="{ row }" slot="info">
					<div class="tabBox" v-for="(val, i) in row.info" :key="i">
						<div class="tabBox_img" v-viewer>
							<img v-lazy="val.slider_image" />
						</div>
						<span class="tabBox_tit">{{ val.store_name }}</span>
						<span class="tabBox_pice">{{'￥' + val.pay_price}}</span>
					</div>
				</template>
				<template slot-scope="{ row, index }" slot="pay_price">
					<span class="tabBox_pice">{{'￥' + showPrice(row.info)}}</span>
				</template>
				<template slot-scope="{ row, index }" slot="reservation_time">
					<span class="tabBox_pice">{{showTime(row.reservation_time)}}</span>
				</template>
				<template slot-scope="{ row, index }" slot="store">
					<span class="tabBox_pice">{{row.store.name}}</span>
				</template>
				<template slot-scope="{ row, index }" slot="pay_time">
					<span class="tabBox_pice">{{row.create_time| formatDate}}</span>
				</template>
				<template slot-scope="{ row, index }" slot="action">
				  <a @click="black(row)" v-if="!row.content">回执</a>
				  <Divider type="vertical" v-if="!row.content"/>
				  <a @click="del(row)">删除</a>
				</template>
			</Table>
			<div class="acea-row row-right page">
				<Page :total="total" :current="pagination.page" show-elevator show-total @on-change="pageChange"
					:page-size="pagination.limit" />
			</div>
		</Card>
		<Modal v-model="modals" width='80' mask title="员工选择">
			<staffList :is_reservation='0' @getProductId='checkmember'></staffList>
			<template #footer>
				<Button @click="memberListShow=false">取消</Button>
			</template>
		</Modal>
		<Modal
		  v-model="tsmodals"
		  scrollable
		  closable
		  title="回执"
		  :mask-closable="false"
		>
		  <Input
		    v-model="msg"
		    type="textarea"
		    :rows="4"
		    placeholder="请输入回执内容"
		  />
		  <div slot="footer">
		    <Button
		      type="primary"
		      size="large"
		      long
		      :loading="mtsmodals_loading"
		      @click="oks"
		      >确定</Button
		    >
		  </div>
		</Modal>
	</div>
</template>

<script>
	import {
		formatDate
	} from '@/utils/validate';
	import {
		getYgList
	} from '@/api/store'
	import {
		mapState
	} from "vuex";
	import {
		getKpi
	} from "@/api/agent"
	import {
		getDs,
		getTs,
		tsBack,
		delTs
	} from "@/api/finance"
	import timeOptions from "@/utils/timeOptions";
	import cardsData from "@/components/cards/cards";
	import staffList from "@/components/staffList/index";
	export default {
		components: {
			cardsData,
			staffList
		},
		filters: {
			formatDate(time) {
				if (time !== 0) {
					let date = new Date(time * 1000);
					return formatDate(date, 'yyyy-MM-dd hh:mm');
				}
			}
		},
		data() {
			return {
				blaclItem: {},
				msg: '',
				mtsmodals_loading: false,
				tsmodals: false,
				modals:false,
				cardLists: [],
				thead: [{
						title: "id",
						align: "id",
						key: "id",
						minWidth: 50,
					}, {
						title: "订单编号",
						align: "order_id",
						key: "order_id",
						minWidth: 150,
					},
					// subscribe_id
					
					{
						title: "用户",
						align: "user",
						slot: "user",
						minWidth: 80,
					},
					{
						title: "员工",
						align: "name",
						slot: "name",
						minWidth: 80,
					},
					{
						title: "投诉原因",
						key: "reason",
						minWidth: 70,
					},
					{
						title: "投诉时间",
						slot: "pay_time",
						minWidth: 130,
					},
					{
						title: "回执",
						key: "content",
						minWidth: 130,
					},
					{
					  title: "操作",
					  slot: "action",
					  // fixed: "right",
					  minWidth: 100,
					},
				],
				tbody: [],
				num: [{
						name: '全部',
						value: 0
					}, {
						name: '销售业绩',
						value: 1
					},
					{
						name: '手工业绩',
						value: 2
					},
				],
				loading: false,
				total: 0,
				pagination: {
					type: 0,
					member_id: '',
					page: 1,
					limit: 15,
					create_time: "",
					status: 0
				},
				options: timeOptions,
				timeVal: [],
				name: "",
				staffList: []
			};
		},
		computed: {
			...mapState("order", ["orderChartType"]),
			// ...mapState("admin/layout", ["isMobile"]),
			labelWidth() {
				return this.isMobile ? undefined : 96;
			},
			labelPosition() {
				return this.isMobile ? "top" : "right";
			},
		},
		created() {
			this.getYgList()
		},
		methods: {
			oks() {
				
				if(this.msg == '' ) {
					return this.$Message.error('请输入回执内容');
				}
				tsBack({
					id: this.blaclItem.id,
					content: this.msg
				}).then(res => {
					this.$Message.success(res.msg);
					this.blaclItem = {}
					this.tsmodals = false;
					this.getList();
				})
				
			},
			black(row) {
				this.blaclItem = row;
				this.tsmodals = true;
			},
			del(row) {
				let that = this;
				this.$Modal.confirm({
					title: "确认删除",
					content: '<p>确定删除吗？</p><p>删除后将无法恢复，请谨慎操作！</p>',
					loading: true,
					onOk: () => {
						this.$Modal.remove();
						delTs(row.id).then(res=> {
							that.$Message.success('删除完成');
							that.getList();
						})
					},
					onCancel: () => {
						// this.$Message.info('取消成功');
					}
				});
			},
			getYgList() {
				getYgList({
					page: 1,
					limit:100
				}).then(res => {
					this.staffList = res.data.list;
					this.getOrderList();
				})
			},
			showName(id) {
				let obj = {};
				obj = this.staffList.find(item => item.id == id)
				if(obj && obj.id) {
					return obj.name
				}else {
					return '--'
				}
			},
			// 打开弹窗
			openmid(e) {
				this.modals = true;
			},
			// 选中员工
			checkmember(res) {
				let data = res[0];
				this.modals = false;
				this.pagination.member_id = data.id;
			},
			showTime(time) {
				var date = new Date(time * 1000);
				var year = date.getFullYear(); // 获取年份
				var month = ("0" + (date.getMonth() + 1)).slice(-2); // 获取月份（注意月份从 0 开始，需要加 1）
				var day = ("0" + date.getDate()).slice(-2); // 获取日期
				var hours = ("0" + date.getHours()).slice(-2); // 获取小时
				var minutes = ("0" + date.getMinutes()).slice(-2); // 获取分钟
				var seconds = ("0" + date.getSeconds()).slice(-2); // 获取秒钟
				var dateString = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds; // 自定义时间格式
				return dateString
			},
			showPrice(list) {
				let price = 0;
				list.forEach(item => {
					price += item.pay_price * 1
				})
				return price.toFixed(2)
			},
			// 具体日期搜索()；
			onchangeTime(e) {
				console.log(e, 'eeeeeee')
				this.pagination.page = 1;
				this.timeVal = e;
				this.pagination.create_time = this.timeVal[0] ? this.timeVal.join("-") : "";
			},
			// 订单列表
			getOrderList() {
				this.loading = true;
				getTs(this.pagination)
					.then((res) => {
						this.loading = false;
						const {
							count,
							data,
							num
						} = res.data;
						this.total = count;
						this.tbody = data;
					})
					.catch((err) => {
						this.loading = false;
						this.$Message.error(err.msg);
					});
			},
			// 分页
			pageChange(index) {
				this.pagination.page = index;
				this.getOrderList();
			},
			// 订单搜索
			orderSearch() {
				this.pagination.page = 1;
				this.getOrderList();
			},
		},
	};
</script>

<style lang="stylus" scoped>
	.span-del {
		color: #ed4014;
		display: block
	}

	.code {
		position: relative;
	}

	.QRpic {
		width: 180px;
		height: 259px;

		img {
			width: 100%;
			height: 100%;
		}
	}

	.tabBox {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;

		.tabBox_img {
			width: 30px;
			height: 30px;

			img {
				width: 100%;
				height: 100%;
			}
		}

		.tabBox_tit {
			width: 245px;
			height: 30px;
			line-height: 30px;
			font-size: 12px !important;
			margin: 0 2px 0 10px;
			letter-spacing: 1px;
			box-sizing: border-box;
		}
	}

	.tabBox+.tabBox {
		margin-top: 5px;
	}

	.pictrue-box {
		display: flex;
		align-item: center;
	}

	.pictrue {
		width: 25px;
		height: 25px;
	}
</style>