uniapp-dp/dp-workshop-manage/pages/plan/list.vue

<template>
	<view>
		<scroll-view :scroll-y="true">
			<view class="cu-bar bg-white solid-bottom">
				<view class="action">
					<text class="cuIcon-title text-orange "></text>
					排产计划列表
				</view>
				<view class="action">
					<button class="cu-btn bg-blue shadow" @click="addClick">新增</button>
					<button style="margin-left: 5px;" class="cu-btn bg-green shadow" @click="showCount">统计</button>
				</view>
			</view>
			<scroll-view scroll-x class="bg-white nav">
				<view class="flex text-center">
					<view class="cu-item flex-sub" :class="index == TabCur ? 'text-orange cur' : ''" v-for="(item, index) in tabs" :key="index" @tap="tabSelect" :data-id="index">
						{{ item.name }}
					</view>
				</view>
			</scroll-view>
			<view class="cu-list menu">
				<view
					class="cu-item"
					:class="modalName == 'move-box-' + index ? 'move-cur' : ''"
					v-for="(item, index) in planList"
					:key="index"
					@touchstart="ListTouchStart"
					@touchmove="ListTouchMove"
					@touchend="ListTouchEnd"
					:data-target="'move-box-' + index"
				>
					<!-- <view class="content"> -->
					<view class="text-gray" style="width: 45%;">{{ item.orderNo }}({{ item.filing.workshop.zyProductWorkshop }}-{{ item.filing.team.zyTeam }})</view>
					<view class="text-gray" style="width: 5%;">{{ item.qty }}</view>
					<view class="text-gray" style="width: 5%;">{{ item.workShift }}</view>
					<view class="text-gray" style="width: 20%;">{{ item.createDate }}</view>
					<!-- </view> -->

					<view class="move">
						<!-- <view class="bg-grey" @click="editPlanInfo(item)">修改</view> -->
						<view  v-if="TabCur == 0" class="bg-green" @click="finish(item)">完成</view>
						<view class="bg-red" @click="deletePlanInfo(item)">删除</view>
					</view>
				</view>
			</view>
			<!-- 		<view class="warp">
				<view class="box">
					<t-table @change="change">
						<t-tr font-size="14">
							<t-th>订单号</t-th>
							<t-th>数量</t-th>
							<t-th>班制</t-th>
							<t-th>操作</t-th>
						</t-tr>
						<t-tr v-for="(item, index) in planList" :key="index" font-size="12">
							<t-td>{{ item.orderNo }}</t-td>
							<t-td>{{ item.qty }}</t-td>
							<t-td>{{ item.workShift }}</t-td>
							<t-td class="move" align="left">
								<button size="mini" @click="editPlanInfo(item)">编辑</button>
								<button size="mini" @click="deletePlanInfo(item)">删除</button>
							</t-td>
						</t-tr>
					</t-table>
				</view>
			</view> -->
		</scroll-view>
	</view>
</template>

<script>
// import tTable from '@/components/t-table/t-table.vue';
// import tTh from '@/components/t-table/t-th.vue';
// import tTr from '@/components/t-table/t-tr.vue';
// import tTd from '@/components/t-table/t-td.vue';
import { deletePlan, list, finishPlan } from '@/api/biz/plan.js';
export default {
	// components: {
	// 	tTable,
	// 	tTh,
	// 	tTr,
	// 	tTd
	// },
	data() {
		return {
			planList: [],
			modalName: null,
			tabs: [
				{
					key: 0,
					name: '未完成'
				},
				{
					key: 1,
					name: '已完成'
				}
			],
			TabCur: 0
		};
	},
	methods: {
		addClick() {
			uni.navigateTo({
				url: '/pages/plan/index'
			});
		},
		showCount(item) {
			uni.navigateTo({
				url: '/pages/plan/count'
			});
		},
		// ListTouch触摸开始
		ListTouchStart(e) {
			this.listTouchStart = e.touches[0].pageX;
		},

		// ListTouch计算方向
		ListTouchMove(e) {
			this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left';
		},

		// ListTouch计算滚动
		ListTouchEnd(e) {
			if (this.listTouchDirection == 'left') {
				this.modalName = e.currentTarget.dataset.target;
			} else {
				this.modalName = null;
			}
			this.listTouchDirection = null;
		},
		editPlanInfo(item) {
			uni.navigateTo({
				url: '/pages/plan/edit?planInfo=' + encodeURIComponent(JSON.stringify(item))
			});
		},
		finish(item) {
			uni.showModal({
				title: '提示',
				content: '确定计划完成吗',
				success: res => {
					if (res.confirm) {
						console.log('确定');
						finishPlan(item).then(res => {
							if (res.success) {
								this.removePlanInfo(item);
							} else {
							}
						});
					} else if (res.cancel) {
						console.log('取消');
					}
				}
			});
		},
		deletePlanInfo(item) {
			deletePlan(item).then(res => {
				if (res.success) {
					this.removePlanInfo(item);
				} else {
				}
			});
		},
		removePlanInfo(item) {
			const index = this.planList.findIndex(ele => {
				return ele.id == item.id;
			});
			this.planList.splice(index, 1);
		},
		// loadData() {
		// 	list().then(res => {
		// 		if (res.success) {
		// 			this.planList = res.data;
		// 		} else {
		// 		}
		// 	});
		// },
		loadData(tabIndex) {
			list(tabIndex).then(res => {
				if (res.success) {
					this.planList = res.data;
				} else {
				}
			});
		},
		tabSelect(e) {
			this.TabCur = e.currentTarget.dataset.id;
			this.loadData(this.TabCur);
		}
	},
	onLoad() {
		this.loadData(0);
		uni.$on('loadData', data => {
			this.TabCur = 0;
			// console.log('xiugai' + data);
			this.loadData(0);
		});
	}
};
</script>

<style></style>