office-tools-m/pages/index.vue

<template>
	<view>
		<view class="bg-white padding">

			<view class="flex justify-between ">

				<uni-easyinput prefixIcon="bottom" suffixIcon="search" v-model="queryfrom.styleNum" placeholder="搜索工厂款号"
					@iconClick="iconClick" @confirm="getData(1)">
				</uni-easyinput>
				<view style="padding: 4px;width: 50px;height: 40px;">
					<button @click="chooseFileClick" type="primary" size="mini" class="mini-btn"
						style="padding:0px;width: 100%;">导入</button>
				</view>
			</view>
			<view class="flex" v-if="searchShow">
				<view class="flex-sub padding-left-xs padding-top-xs">
					<uni-easyinput v-model="queryfrom.custName" placeholder="搜索客人名称" @confirm="getData(1)">
					</uni-easyinput>
				</view>
				<!-- 	<view class="flex-sub padding-left-xs padding-top-xs">

					<uni-easyinput v-model="queryfrom.styleNum" placeholder="搜索工厂款号">
					</uni-easyinput>
				</view> -->
			</view>
			<!-- <view class="flex" v-if="searchShow">
				<view class="flex-sub padding-left-xs padding-top-xs">
					<uni-easyinput v-model="queryfrom.custName" placeholder="搜索客人名称">
					</uni-easyinput>
				</view>
			 	<view class="flex-sub padding-left-xs padding-top-xs">
					<uni-easyinput v-model="queryfrom.color" placeholder="搜索颜色">
					</uni-easyinput>
				</view> 
			</view> -->
			<view class="flex justify-between padding-top-sm" v-if="searchShow">
				<button class="mini-btn" type="default" size="mini" @click="searchShow = !searchShow">
					<text class="cuIcon-fold" style="margin-right: 5px;"></text>收回
				</button>
				<button class="mini-btn" type="primary" size="mini" @click="getData(1)">搜索</button>
			</view>
		</view>
		<view class="bg-white ">
			<uni-table ref="table" :loading="loading" border stripe="true" emptyText="暂无更多数据">
				<uni-tr>
					<uni-th v-for="(item,index) in column" :key="index" :width="item.width" :align="item.align"
						style="padding:0px" :fixed="item.fixed">
						<template v-if="item.label=='帮面材料'||item.label=='大底材料'||item.label=='包装材料'">

							<view style="display:inline-block;width: 100%;">
								<view style="border-bottom:1px solid #eee;">
									{{item.label}}
								</view>
								<view style="width: 100%;">开始日期</view>
							</view>
						</template>
						<template v-else-if="item.label=='冲裁'||item.label=='针车'||item.label=='成型'">

							<view style="display:inline-block;width: 100%;">
								<view style="border-bottom:1px solid #eee;">
									{{item.label}}
								</view>
								<view style="width: 100%;">
									<view style="width: 25%;display: inline-block;">加工类型</view>
									<view style="width: 37.5%;display: inline-block;">开始日期</view>
									<view style="width: 37.5%;display: inline-block;">结束日期</view>
								</view>
							</view>
						</template>
						<template v-else-if="item.label=='配套'">
							<view style="display:inline-block;width: 100%;">
								<view style="border-bottom:1px solid #eee;">
									{{item.label}}
								</view>
								<view style="width: 100%;">
									<span style="width: 50%;display: inline-block;">开始日期</span>
									<span style="width: 50%;display: inline-block;">结束日期</span>
								</view>
							</view>
						</template>
						<template v-else>{{item.label}}</template>

					</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in tableData" :key="index">
					<uni-td v-for="(items,indexs) in column" :key="indexs" :width="items.width" :align="items.align">
						<!-- endTime type -->
						<template v-if="items.label=='主图'">
							<image class="slot-image" :src="item[items.name]" mode="aspectFit"
								style="max-width:75px;max-height:35px;">
						</template>
						<template v-else-if="items.label=='业务备注'">
							<uni-tooltip :content="item[items.name]" placement="top" v-if="item[items.name]">点击查看</uni-tooltip>
						</template>
						<template v-else-if="items.label=='备注'">
							<uni-tooltip :content="item.sched.remark" placement="top" v-if="item.sched.remark">点击查看</uni-tooltip>
						</template>
						<template v-else-if="items.label=='帮面材料'||items.label=='大底材料'||items.label=='包装材料'">
							{{item[items.name+'startTime']||''}}
						</template>
						<template v-else-if="items.label=='确认样提供'">
							<uni-tooltip :content="formatDate(item.shoeFactory.sampleTime)" placement="top"
								v-if="item.shoeFactory.sampleTime">{{item.shoeFactory.sampleFlag?'是':'否'}}</uni-tooltip>
						</template>
						<template v-else-if="items.label=='色卡提供'">
							<uni-tooltip :content="formatDate(item.shoeFactory.colorCardTime)" placement="top"
								v-if="item.shoeFactory.colorCardTime">{{item.shoeFactory.colorCardFlag?'是':'否'}}</uni-tooltip>
						</template>
						<template v-else-if="items.label=='是否技转'">
							{{item.shoeFactory.skillTransferFlag?'是':item.shoeFactory.skillTransferFlag===false?'否' :''}}
						</template>
						<template v-else-if="items.label=='款式标记'">
							{{item[items.name]==0?'新款':'旧款'}}
						</template>
						<template v-else-if="items.label=='延期'">
							<span style="color: #F56C6C;">{{judgePostpone(item)}}</span>
						</template>
						<template v-else-if="items.label=='是否审核'">
							<template v-if="!item.sched">
								<uni-tag type="default" :inverted="true" text="暂无排程"></uni-tag>
							</template>
							<template v-else-if="item.sched && item.sched.audit">
								<uni-tag type="success" :inverted="true" text="已审"></uni-tag>
							</template>
							<template v-else-if="item.sched && !item.sched.audit">
								<uni-tag type="warning" :inverted="true" text="待审"></uni-tag>
							</template>
						</template>

						<!-- 配套 -->
						<template v-else-if="items.label=='冲裁'||items.label=='针车'||items.label=='成型'">

							<view style="display:inline-block;height: 100%;width: 100%;">
								<view style="width: 25%;display: inline-block;">{{item[items.name+'type']||'　'}}</view>
								<view style="width: 37.5%;display: inline-block;">{{item[items.name+'startTime']||'　'}}</view>
								<view style="width: 37.5%;display: inline-block;">{{item[items.name+'endTime']||'　'}}</view>
							</view>
						</template>
						<template v-else-if="items.label=='配套'">
							<view style="display:inline-block;height: 100%;width: 100%;">
								<view style="width: 50%;display: inline-block;">{{item[items.name+'startTime']||'　'}}</view>
								<view style="width: 50%;display: inline-block;">{{item[items.name+'endTime']||'　'}}</view>
							</view>
						</template>
						<template v-else>{{item[items.name]||''}}</template>
					</uni-td>
				</uni-tr>
			</uni-table>

			<!-- <zb-table :show-header="true" :columns="column" :stripe="true" :fit="false" @cellClick="cellClick"
				:summary-method="getSummaries" @toggleRowSelection="toggleRowSelection" @toggleAllSelection="toggleAllSelection"
				:border="true" @edit="buttonEdit" @dele="dele" :data="tableData"></zb-table> -->
		</view>
		<view style="height: 40px;">

		</view>
		<view class="uni-pagination-box down-button"><uni-pagination show-icon :page-size="queryfrom.pageSize"
				:current="queryfrom.pageNum" :total="total" @change="change" /></view>
	</view>
</template>

<script>
	import { listManuOrder, } from '@/api/order/schedule.js'
	import { formatDate, formatDateMinute } from '@/utils/date.js'
	import config from '@/config'
	import { toast, showConfirm, tansParams } from '@/utils/common'
	import { getToken } from '@/utils/auth'
	import jweixin from 'weixin-js-sdk'
	const baseUrl = config.baseUrl
	export default {
		data() {
			return {
				getDataApi: listManuOrder,
				tableData: [],
				// 数据总量
				total: 0,
				loading: false,
				queryfrom: {
					pageSize: 15,
					// 每页数据量
					pageNum: 1,
					// 当前页
					facId: '',
					styleNum: '',
					color: '',
					version: ''
				},
				procOption: [],
				searchShow: false,
				picker: [],
				column: [
					// { type: 'selection', fixed: true, width: 50 },
					// { name: 'id', type: 'index', label: '序号', width: 53, align: 'center' },
					{ name: 'picture', label: '主图', width: 75, align: 'center' },
					{ name: 'styleNum', label: '工厂款号', width: 90, align: 'center' },
					{ name: 'version', label: '版本号', width: 55, align: 'center' },
					{ name: 'color', label: '中文颜色', width: 70, align: 'center' },
					{ name: 'custNum', label: '客户款号', width: 110, align: 'center' },
					{ name: 'qtyTotal', label: '订单数量', width: 65, align: 'center' },
					{ name: 'id', label: 'ID', width: 30, align: 'center' },
					{ name: 'entryDate', label: '下单日期', width: 90, sorter: true, emptyString: '', align: 'center' },
					{ name: 'factoryName', label: '生产工厂', width: 60, align: 'center', emptyString: '' },
					{ name: 'facHandDate', label: '工厂交期', width: 90, sorter: true, emptyString: '', align: 'center' },
					{ name: 'custName', label: '客户名称', fixed: false, width: 65, emptyString: '--', align: 'center' },
					{ name: 'manuNum', label: '指令号', sorter: false, align: 'center', width: 100, },
					{ name: 'styleFlag', label: '款式标记', width: 60, align: 'center', filters: { 0: '旧款', 1: '新款' } },
					{ name: 'shoeLastNum', label: '楦头编号', width: 110, align: 'center', emptyString: '' },
					{ name: 'outsoleModelNum', label: '大底编号', width: 95, align: 'center', emptyString: '' },
					{ name: 'outsoleModelFac', label: '大底厂家', width: 60, align: 'center', emptyString: '' },
					{ name: 'remark', label: '业务备注', width: 60, align: 'center', emptyString: '' },
					{ name: '确认样提供', label: '确认样提供', width: 75, align: 'center' },
					{ name: '色卡提供', label: '色卡提供', width: 70, align: 'center' },
					{ name: '是否技转', label: '是否技转', width: 60, align: 'center' },
					{ name: '帮面', label: '帮面材料', width: 90, align: 'center', },
					{ name: '大底', label: '大底材料', width: 90, align: 'center' },
					{ name: '包装', label: '包装材料', width: 90, align: 'center' },
					{ name: '冲裁', label: '冲裁', width: 240, align: 'center' },
					{ name: '配套', label: '配套', width: 180, align: 'center' },
					{ name: '针车', label: '针车', width: 240, align: 'center' },
					{ name: '成型', label: '成型', width: 240, align: 'center' },
					{ name: 'remark', label: '备注', width: 60, align: 'center' },
					{ name: 'postpone', label: '延期', width: 60, align: 'center' },
					{ name: 'audit', label: '是否审核', width: 60, align: 'center' },
					// {
					// 	name: 'operation',
					// 	type: 'operation',
					// 	label: '操作',
					// 	renders: [{
					// 			name: '编辑',
					// 			func: 'edit' // func 代表子元素点击的事件 父元素接收的事件 父元素 @edit
					// 		},
					// 		{
					// 			name: '删除',
					// 			type: 'warn',
					// 			func: 'dele'
					// 		},
					// 	]
					// },
				],
			}
		},
		onLoad() {
			this.picker = this.$store.state.user.factoryOption
			this.procOption = this.$store.state.user.procOption
			console.log(this.procOption)
			this.selectedIndexs = []
			this.getData(1)
		},
		methods: {
			// 微信聊天选择文件
			chooseFileClick() {
				wx.chooseMessageFile({
					count: 10,
					type: 'all', //all,video,image,file
					success: res => {
						// /manu/sched/imp
						let header = { 'Authorization': 'Bearer ' + getToken() }
						uni.uploadFile({
							url: baseUrl + '/manu/sched/imp', //仅为示例，非真实的接口地址
							filePath: res.tempFiles[0].path,
							header: header,
							name: 'file',
							formData: {},
							complete: function(uploadFileRes) {
								let result = JSON.parse(uploadFileRes.data)
								console.log(result)
								if (result.code === 500) {
									toast(result.msg)
								}
								if (result.code === 200) {
									toast('上传成功')
								}
							}
						})
					},
				})
			},
			cellClick(row, index, column) {
				if (column.name === 'remark' || column.name === '')
					uni.showToast({
						icon: 'none',
						duration: 3000,
						title: '点击' + column.label
					})
				console.log('点击单元格', row, index, column)
			},
			rowClick(row, index) {
				uni.showToast({
					icon: 'none',
					duration: 3000,
					title: '单击某行'
				})
				console.log('单击某行', row, index)
			},
			PickerChange(e) {

				console.log('e', e.detail)
				this.queryfrom.facId = e.detail.value[0].value
			},
			iconClick(type) {
				if (type === 'prefix') {
					this.searchShow = !this.searchShow
				} else { this.getData(1) }
				// uni.showToast({
				// 	title: `点击了${type==='prefix'?'左侧':'右侧'}的图标`,
				// 	icon: 'none'
				// })
			},
			// 分页触发
			change(e) {
				// this.$refs.table.clearSelection()
				this.selectedIndexs.length = 0
				console.log(e.current)
				this.getData(e.current)
			},
			formatDate(time) {
				return formatDate(time)
			},
			judgePostpone(item) {
				return formatDate(item.facHandDate) < (item['成型endTime'] ? formatDate(item['成型endTime']) : formatDate(
					new Date())) ? '延期' : ''
			},
			// 获取数据
			getData(pageCurrent, value = '') {
				// this.loading = true;
				// this.pageCurrent = pageCurrent
				// this.request({
				// 	pageSize: this.pageSize,
				// 	pageCurrent: pageCurrent,
				// 	value: value,
				// 	success: res => {
				// 		// console.log('data', res);
				// 		this.tableData = res.data
				// 		this.total = res.total
				// 		this.loading = false
				// 	}
				// })
				this.queryfrom.pageNum = pageCurrent

				// uni.showLoading({ title: '加载中' })
				this.getDataApi(this.queryfrom).then(res => {
					uni.hideLoading()
					this.loading = false
					console.log(res.rows)
					if (res.code === 200) {
						this.tableData = res.rows.map(item => {
							item.picture = item.shoeStyle.mainPicture ? item.shoeStyle.mainPicture.filePath : ''
							item.entryDate = formatDate(item.entryDate)
							item.factoryName = item.factory.name
							item.facHandDate = formatDate(item.facHandDate)
							item.custName = item.custName
							item.styleFlag = item.shoeStyle.styleFlag
							item.styleNum = item.shoeStyle.styleNum
							item.version = item.shoeStyle.version
							item.color = item.shoeStyle.color
							item.shoeLastNum = item.shoeStyle.shoeLastNum
							item.outsoleModelNum = item.shoeStyle.outsoleModelNum
							item.outsoleModelFac = item.shoeStyle.outsoleModelFac
							// item.shoeremark = item.shoeStyle.remark
							item.sched && item.sched.detList.map(detItem => {
								this.procOption.map(procItem => {
									if (detItem.procId === procItem.id) {
										item[procItem.procName + 'startTime'] = formatDate(detItem.startTime)
										item[procItem.procName + 'endTime'] = formatDate(detItem.endTime)
										item[procItem.procName + 'type'] = detItem.procType
									}
								})
							})
							// console.log(item)
							return item
						})
						this.total = res.total
						console.log(this.tableData)
					}
				}).catch(err => {})
			},
		}
	}
</script>

<style>
	.table-thead {
		background-color: #FFFAF2 !important;
		position: sticky;
		left: 0;
		top: 0;
		z-index: 20;
	}

	/deep/ .uni-table-tr {
		overflow: visible;
		background-color: #fff;
	}

	//固定表头第一列
	/deep/ .uni-table-tr .uni-table-th:first-child {
		position: sticky;
		left: 0;
		top: 0;
		background-color: #fff;
		z-index: 10;
	}

	//固定表头第一列（需计算第一列宽度，我这里是200rpx）
	/deep/ .uni-table-tr .uni-table-th:nth-child(2) {
		position: sticky;
		left: 75px;
		top: 0;
		background-color: #fff;
		z-index: 10;
	}

	//冻结thead第一列
	/deep/ .uni-table-tr .uni-table-td:first-child {
		position: sticky;
		left: 0;
		top: 0;
		background-color: #fff;
		z-index: 10;
	}

	//冻结thead第二列（需计算第一列宽度）
	/deep/ .uni-table-tr .uni-table-td:nth-child(2) {
		position: sticky;
		left: 75px;
		top: 0;
		background-color: #fff;
		z-index: 10;
	}

	.uni-group {
		display: flex;
		align-items: center;
	}
</style>