aiot-app/pages/salesServiceManagement/workOrder/components/schemeList.vue

<template>
	<view class="scheme">
		<u-list class="listContent">
			<view v-for="(item, index) in tableList" :key="index" style="position: relative;">
				<myCard :item="item" @del="del(index)" @edit="add('edit',item,index)" :index="index+1"
					:columns="columns" :btnList="btnData">
				</myCard>
			</view>
		</u-list>
		<view class="add" @click="add('add')" v-if="type != 'view'">
			<u-icon name="plus" color="#fff"></u-icon>
		</view>
	</view>
</template>

<script>
	import myCard from '@/pages/saleManage/components/myCard.vue'
	import {
		getWarehouseOutStock,
		getIdWarehouseList
	} from '@/api/salesServiceManagement/workOrder/index.js';
	import {
		getByCode
	} from '@/api/pda/common.js'
	export default {
		components: {
			myCard
		},
		props: {
			type: {
				type: String,
				default: 'edit'
			},
			itemList: {
				type: Array,
				default: () => []
			},
			pageName: ''
		},
		watch: {
			itemList: {
				handler(newVal) {
					let list = JSON.parse(JSON.stringify(newVal));
					this.tableList = list;
					this.setTabData()
				},
				deep: true,
				immediate: true
			}
		},
		data() {
			return {
				typeIdList: [],
				btnList: [{
						name: '修改',
						apiName: 'edit',
						btnType: 'primary',
						type: '2',
						pageUrl: '',
						judge: [{
							authorities: '',
						}, {
							fn: (row) => {
								return (this.type != 'view' &&
									row.isApply != 1
								);
							}

						}]
					},
					{
						name: '删除',
						apiName: 'del',
						btnType: 'primary',
						type: '2',
						pageUrl: '',
						judge: [{
							authorities: '',
						}, {
							fn: (row) => {
								return (this.type != 'view' &&
									row.isApply != 1
								);
							},
						}]
					},
				],
				tableList: []
			}
		},
		computed: {
			btnData() {
				if (this.type == 'view') {
					return [];
				}
				return this.btnList;
			},
			columns() {
				return [
					[{
						label: '名称：',
						prop: 'name',
						type: 'title',
						className: 'perce100',
					}],
					[{
						label: '项目：',
						prop: 'typeId',
						formatter: (row) => {
							let typeId = row.typeId;
							return this.typeIdList.find(item => item.value == typeId)?.text
						}
					}],
					[{
						label: '编码：',
						prop: 'code'
					}, ],
					[{
						label: '型号：',
						prop: 'categoryModel'
					}, {
						label: '规格：',
						prop: 'specification',
					}],
					[{
						label: '仓库：',
						prop: 'warehouseName'
					}],
					[{
						label: '库存：',
						prop: 'warehouseNum',
					}, {
						label: '单位：',
						prop: 'measureUnit'
					}],
					[{
						label: '数量：',
						prop: 'totalCount',
					}, {
						label: '单价：',
						prop: 'singlePrice'
					}],
					[{
						label: '合计：',
						prop: 'settlementPrice',
					}],
					[{
						label: '详细内容：',
						prop: 'content'
					}],
					[{
							prop: 'sparePartsApplyApprovalStatus',
							label: '审核状态：',
							isNone: this.pageName != 'workOrder',
							formatter: (row) => {
								if (row.typeId == 2) {
									const reviewStatus = {
										0: '未提交',
										1: '审核中',
										2: '已审核',
										3: '审核不通过'
									}
									return !row.sparePartsApplyApprovalStatus ?
										'未提交' :
										reviewStatus[row.sparePartsApplyApprovalStatus];
								}
							},
						},
						{
							prop: 'sparePartsApplyApprovalStatus',
							isNone: this.pageName != 'workOrder',
							label: '出库状态：',
							formatter: (row) => {
								if (row.typeId == 2) {
									return row.sparePartsApplyApprovalStatus == 2 ?
										'已出库' :
										'未出库';
								}
							},
						}
					],
					[{
						label: '操作：',
						prop: 'action',
						type: 'action',
						className: 'perce100',
					}],
				]
			}
		},
		created() {
			this.getLevelCode('after_sales_project')
			uni.$off('updateInfo');
			uni.$on('updateInfo', (data) => {
				if (data.index || data.index == 0) {
					let index = data.index;
					delete data.index;
					this.$set(this.tableList, index, data);
					return
				}
				this.tableList.push(data);
			})
		},
		onShow() {

		},
		methods: {
			getTotalPrice(){
				 return this.tableList.reduce((a,b)=>{
					 console.log(b,'b.settlementPrice')
					return a+(Number(b.settlementPrice)||0)
				 },0)
			},

			async getLevelCode(code) {
				try {
					const res = await getByCode(code);
					if (res) {
						let list = Object.values(res).map((el) => {
							let k = Object.keys(el)[0];
							let v = Object.values(el)[0];
							return {
								text: v,
								value: k
							};
						});

						this.typeIdList = list;
					}
				} catch (err) {

				}
			},
			add(type, item = {}, index) {
				if (type == 'edit') {
					item.index = index;
				}
				let data = JSON.stringify(item);
				uni.navigateTo({
					url: `/pages/salesServiceManagement/workOrder/components/schemeAdd?obtain=仓库&type=${type}&data=${data}`
				})
			},
			del(index) {
				uni.showModal({
					title: '确认删除',
					content: '确定要删除所选方案数据吗?',
					confirmText: '删除',
					confirmColor: '#FF4D4F',
					success: (res) => {
						if (res.confirm) {
							this.tableList.splice(index, 1)
						} else if (res.cancel) {
							// 用户点击了取消按钮
							console.log('用户取消删除');
						}
					}
				});
			},
			async setTabData() {
				this.tableList.forEach(async (item, index) => {
					if (item.typeId == 2) {
						this.$set(
							this.tableList[index],
							'warehouseList',
							await getIdWarehouseList({
								categoryId: item.categoryId
							})
						);
						if (item.warehouseId) {
							this.$set(
								this.tableList[index],
								'warehouseNum',
								await getWarehouseOutStock({
									warehouseId: item.warehouseId,
									code: item.code
								})
							);
						}
					}
				});
			},
			getTabData() {
				return this.tableList || []
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url('@/pages/salesServiceManagement/demandList/components/invoice.scss');

	.scheme {
		padding: 10rpx 20rpx 84rpx;
	}

	.add {
		width: 96rpx;
		height: 96rpx;
		border-radius: 48rpx;
		background: #3c9cff;
		position: fixed;
		bottom: 100rpx;
		right: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>