count-pass-app/pages/report/report.vue

<template>
<view>
	<view  v-if="!isAuditUser" class="report">
		<u-cell :border="false" :customStyle="{'background':'#f5f7fa','font-weight':'bold','padding':'10rpx 10rpx'}"
			:title="$t('base.common.condition')"></u-cell>
		<view class="condition">
			<u-form labelPosition="left" :model="condition" ref="form1" labelWidth='100'>
				<!-- 		<u-form-item label="开始时间" borderBottom>
					<uni-datetime-picker type="date" :clear-icon="false" v-model="condition.startDate"
						:end="condition.endDate" />
				</u-form-item> -->
				<u-form-item :label="$t('base.common.date')" borderBottom>
					<uni-datetime-picker :end='maxDate' :clear-icon="false" :value="condition.range" type="daterange"
						@change="onDatetimePickerConfirm" />
				</u-form-item>


				<!-- 客商报表筛选 -->
				<template>
					<u-form-item :label="$t('base.common.tenant')" @click="showPopup('popupTenant')" borderBottom>
						<u-input v-model="condition.tenantName" disabled disabledColor="#ffffff"
							:placeholder="$t('report.selectTenant')" border="none"></u-input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item :label="$t('order.vehicle')" borderBottom prop="vehicle"
						@click="showPopup('popupVehicle')" v-if="userType == '4'">
						<u-input readonly v-model="condition.vehicle" border="none"
							:placeholder="$t('base.common.placeholderS')+$t('order.vehicle')" />
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item :label="$t('order.vehicleType')" borderBottom v-if="userType == '3'">
						<!-- <u-radio-group v-model="condition.vehicleType" @change="onVehicleTypeChange" placement="row"
							class="p-input">
							<u-radio :customStyle="{marginRight: '10px'}" v-for="item in vehicleTypeOption"
								:key="item.value" :label="item.text" :name="item.value">
							</u-radio>
						</u-radio-group> -->
						<view class="uni-list">
									<radio-group v-model="condition.vehicleType" @change="onVehicleTypeChange" placement="row">
										<label class="uni-list-cell uni-list-cell-pd" v-for="item in vehicleTypeOption" :key="item.value" >
											<view style="flex-direction:row;align-items: center;">
												<radio style="transform:scale(0.8)" :value="item.value" :checked="item.value === condition.vehicleType"/>
												<span>{{item.text}}</span>
											</view>
										</label>
									</radio-group>
						</view>
					</u-form-item>
					<u-form-item :label="$t('order.companyName')" borderBottom prop="companyId"
						@click="showPopup('popupCompanyId')" v-if="userType == '3'">
						<!-- <u-input readonly v-model="condition.companyName" border="none"
							:placeholder="$t('base.common.placeholderS')+$t('order.companyName')" />
						<u-icon slot="right" name="arrow-right"></u-icon> -->
						<span>{{condition.companyName}}</span>
					</u-form-item>

					<u-form-item :label="$t('order.materialName')" borderBottom prop="materialId" @click="showPopup('popupProduct')"
						v-if="userType == '3'">
						<!-- <u-input  v-model="condition.materialName" border="none"
							:placeholder="$t('base.common.placeholderS')+$t('order.materialName')" />
						<u-icon slot="right" name="arrow-right"></u-icon> -->
						<span>{{condition.materialName}}</span>
					</u-form-item>
				</template>

			</u-form>
		</view>
		<u-cell :border="false" :customStyle="{'background':'#f5f7fa','font-weight':'bold','padding':'10rpx 10rpx'}"
			:title="$t('report.reportType')"></u-cell>
		<view class="condition report-list">
			<view class="item" v-for="(report,reportIndex) in currentReport.reportList" :key="reportIndex"
				@click="toReportInfo(report)">
				<img :src="report.icon" alt="" class="item-img">
				<rich-text style="text-align:center;" :nodes="language=='zh-Hans'?report.name:report.languageName"></rich-text>
			</view>
		</view>
		<!-- 选择企业 -->
		<PopupSelect ref="popupTenant" :option="tenantOption" :hasSearch='false' @onConfirm="onTenantConfirm" />
		<!-- 选择供应商/客户 -->
		<PopupSelect ref="popupCompanyId" :option="companyOption" :hasSearch='false' @onConfirm="onCompanyConfirm" />
		<!-- 订单类型 -->
		<PopupSelect ref="popupVehicleType" :option="vehicleTypeOption" :hasSearch='false'
			@onConfirm="onVehicleTypeConfirm" />
		<!-- 选择物料/产品 -->
		<PopupSelect ref="popupProduct" :option="materialOption" :hasSearch='false' @onConfirm="onMaterialConfirm" />
		<!-- 车牌号 -->
		<PopupSelect ref="popupVehicle" :option="vehicleOption" :hasSearch='false' @onConfirm="onVehicleConfirm" />
		
	</view>
	 <view v-else class="message-wrap" style="padding:32rpx">
       <span class="label">报表信息</span>
      <view class="report-list">
        <view class="item"  @click="toAuditReportInfo('saleSummary')">
          <img src="/static/czzn-img/info/info-msg.png" alt="" class="item-img">
          <text class="item-text">销售汇总表</text>
        </view>
        <view class="item"  @click="toAuditReportInfo('saleDetail')">
          <img src="/static/czzn-img/info/info-msg.png" alt="" class="item-img">
          <text class="item-text">销售明细表</text>
        </view>
        <view class="item"  @click="toAuditReportInfo('purchaseSummary')">
          <img src="/static/czzn-img/info/info-msg.png" alt="" class="item-img">
          <text class="item-text">采购汇总表</text>
        </view>
        <view class="item"  @click="toAuditReportInfo('purchaseDetail')">
          <img src="/static/czzn-img/info/info-msg.png" alt="" class="item-img">
          <text class="item-text">采购明细表</text>
        </view>
		</view>
    </view>
	<Bars></Bars>
</view>
</template>

<script>
	import PopupSelect from '../../components/popup-select/index'
	import dayjs from 'dayjs'
	import Bars from '../../components/tabBar/tabBar.vue';
	import {
		saveOrder,
		getOption,
		getMaterialsByCompany
	} from '../../api/order'
	import {
		getTenantCacheList
	} from '../../utils/util.js'
	import {
		getVehicleListByCondition,
		getDriverList
	} from '../../api/driver'
	import {
		getReportInfo
	} from "../../api/report"
	import value from '../../uni_modules/uview-ui/components/u-text/value'
	export default {
		components: {
			PopupSelect,
			Bars
		},
		data() {
			return {
				isAuditUser:false,
				showSex: false,
				userType: "0",
				maxDate: dayjs().format('YYYY-MM-DD'),
				condition: {
					range: [dayjs().add(-30, 'day').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')],
					tenantId: "",
					tenantName: "",
					companyId: "", //客商
					companyName: "", //客商
					materialId: "", //物料
					materialName: "", //物料
					vehicleType: '', //订单类型
					vehicleTypeName: '', //订单类型
					vehicle: '', //车牌号
					reportType: '1',
				},
				vehicleTypeOption: [{
					text: this.$t('base.common.noData'),
					value: null
				}, ],
				typeOption: [{
						text: '临时订单',
						value: '1'
					},
					{
						text: '固定订单',
						value: '2'
					},
				],
				tenantOption: [{
					text: this.$t('base.common.noData'),
					value: null
				}], //企业选项
				companyOption: [{
					text: this.$t('base.common.noData'),
					value: null
				}], //客户选项
				materialOption: [{
					text: this.$t('base.common.noData'),
					value: null
				}], //物料选项
				blockOption: [{
					text: this.$t('base.common.noData'),
					value: null
				}], //区域选项
				vehicleOption: [{
					text: this.$t('base.common.noData'),
					value: null
				}], //车牌选项
				//业务对应的客户信息
				vehicleTypeCompanyList: [],
				//客户对应的物料信息
				companyMaterialList: [],
				appAllMaterial: [],
				appReport: [],
				currentReport: [],
				language:'zh-Hans'
			};
		},
		onLoad(options) {
			this.language = uni.getStorageSync('CURRENT_LANG')
			this.isAuditUser = uni.getStorageSync('isAuditUser')
			this.userType = uni.getStorageSync('userType')
			if(!this.isAuditUser){
				this.bindTenant()
			}
			uni.hideTabBar()
		},
		methods: {
			bindTenant() {
				console.log("aaaaaaaaaaa");
				this.tenantOption = getTenantCacheList();
				if (this.tenantOption.length > 0) {
					this.condition.tenantId = this.tenantOption[0].value
					this.condition.tenantName = this.tenantOption[0].text
				}
				console.log("当前用户类型为，", this.userType);
				if (this.userType == "3") {
					this.bindOption(); //客商
				} else if (this.userType == "4") {
					this.bindDriverReport();
					this.bindVehicle(); //司机
				}
			},
			toAuditReportInfo(item){
				let obj = ''
				switch(item){
					case "saleSummary":
					obj={
						obj:"viewlet=zgnj/销售汇总表_mobile.frm"
					}
					break;
					case "saleDetail":
					obj={
						obj:"viewlet=zgnj/本月品种日销量明细表_mobile.cpt"
					}
					break;
					case "purchaseDetail": 
					obj={
						obj:"viewlet=zgnj/本月品种日采购明细表_mobile.cpt"
					}
					break;
					case "purchaseSummary":
					obj={
						obj:"viewlet=zgnj/采购汇总表.frm"
					}
					break;
				}
					uni.navigateTo({
					url: `/pages/webview/webview?url=https://saas.createtobest.com/webroot/decision/view/report&obj=${encodeURIComponent(JSON.stringify(obj))}`// page.json定义的路径 传url到webview界面去接收-实现跳转
				})
				},
			bindVehicle() {
				let data={}
				getVehicleListByCondition(data).then(res => {
					console.log("查询车号数据返回、", res);
					if (res.statusCode == 200) {
						if (res.data.data) {
							this.vehicleOption = [{
								text: this.$t('order.notSelected'),
								value: null
							}]
							res.data.data.forEach(item => {
								this.vehicleOption.push({
									text: item.vehicle,
									value: item.id
								})
							})
						}
					}
				})
			},
			bindDriverReport() {
				let data = {
					tenantId: this.condition.tenantId || '',
				};
				var that = this;
				getReportInfo(data).then(res => {
					console.log("获取到的报表信息，", res.data.data);
					if (res.statusCode == 200) {
						that.appReport = res.data.data.appReport

						this.currentReport = that.appReport[0];
						console.log("最终报表信息、", this.currentReport);
					}
				})
			},
			bindOption() {
				this.clear(true);
				console.log("订单租户信息、", this.condition.tenantId);
				if (!this.condition.tenantId) {
					console.log("订单业务租户信息");
					return;
				}
				var that = this;
				console.log("当前租户ID、", that.condition.tenantId);
				if (that.condition.tenantId) {
					let data = JSON.parse(JSON.stringify(that.condition))
					getOption(data).then(res => {
						console.log("查询基础数据返回、", res);
						if (res.statusCode === 200) {
							console.log("用户业务类型、", res.data.data.appVehicleType)
							console.log("用户客户信息、", res.data.data.appCompany)
							console.log("用户品种信息、", res.data.data.appMaterial)
							console.log("企业报表信息、", res.data.data.appReport)
							if(that.language == 'zh-Hans'){
								that.vehicleTypeOption = res.data.data.appVehicleType;
							}else{
								that.vehicleTypeOption = res.data.data.appVehicleType.map(item=>{
									return{
										text:item.language,
										value:item.value
									}
								});
							}
							that.appReport = res.data.data.appReport
							if (that.vehicleTypeOption && that.vehicleTypeOption.length > 0) {
								console.log("bbbbb");
								that.condition.vehicleType = that.vehicleTypeOption[0].value
								that.condition.vehicleTypeName = that.vehicleTypeOption[0].text

								that.vehicleTypeCompanyList = res.data.data.appCompany
								that.appAllMaterial = res.data.data.appAllMaterial;
								that.bindCompany();
								that.companyMaterialList = res.data.data.appMaterial;
								that.bindMaterial();
								that.bindReport();
							}
						}
					})
				}
			},
			//选择企业和订单类型后
			onVehicleTypeChange(value) {
				console.log("this.condition.vehicleType:",this.condition.vehicleType);
				this.condition.vehicleType = value.detail.value
				console.log("this.value:",value);
				this.clear(false);
				if (this.condition.tenantId && this.condition.vehicleType) {
					console.log('开始根据业务类型选择数据信息,租户和业务为、', this.condition.tenantId, this.condition.vehicleType);
					this.bindCompany();
					this.bindMaterial();
					this.bindReport();
				}
			},
			bindCompany() {
				var vehicleType = this.condition.vehicleType;
				if (vehicleType && this.vehicleTypeCompanyList) {
					this.companyOption = [{
						text: this.$t('order.notSelected'),
						value: null
					}] //物料选项
					var companyInfos = this.vehicleTypeCompanyList.filter(function(company) {
						return company.vehicleType == vehicleType;
					});
					if (companyInfos && companyInfos.length > 0) {
						companyInfos[0].companyList.forEach(item => {
							this.companyOption.push({
								text: item.companyName,
								value: item.companyId
							})
						})
					}
					console.log("客户信息、", this.companyOption);
				}
			},
			bindMaterial() {
				var companyId = this.condition.companyId;
				this.materialOption = []
				this.condition.materialId = ''
				this.condition.materialName = ''
				if (companyId) {
					getMaterialsByCompany(this.condition).then(res => {
						if (res.data.code == 0) {
							this.paymentOption = res.data.hardInfo
							// if (res.data.companyList) {
							// 	res.data.companyList.forEach(item => {
							// 		this.transporterOption.push({
							// 			text: item.name,
							// 			value: item.id
							// 		})
							// 	})
							// }
							// this.materialOption = [{
							// 	text: this.$t('order.notSelected'),
							// 	value: null
							// }] //物料选项
							var materialInfos = res.data.data;
							console.log("1111213213", materialInfos);
							if (materialInfos && materialInfos.length > 0) {
								materialInfos.forEach(item => {
									this.materialOption.push({
										text: item.name,
										value: item.id,
										type: item.materTypeName ? item.materTypeName : '暂无分类',
										kind: item.kind,
										measureUnit: item.measureUnit
									})
								})
				
								if (this.materialOption[1] && this.materialOption.length == 2) {
									this.condition.materialId = this.materialOption[1].value
									this.condition.materialName = this.materialOption[1].text
									this.condition.kind = this.materialOption[1].kind
									this.condition.measureUnit = this.materialOption[1].measureUnit
				
				
								}
							}
							console.log("品种信息、", this.materialOption);
						}
					})
				}
			
				console.log("品种信息、", this.materialOption);
			},
			bindReport() {
				var vehicleType = this.condition.vehicleType;
				this.currentReport = [];
				if (vehicleType && this.appReport) {
					var reports = this.appReport.find(function(report) {
						return report.vehicleType == vehicleType;
					});
					this.currentReport = reports;
				}
				console.log("报表信息、", this.currentReport);

			},
			clear(isVehicleType) {
				if (isVehicleType == true) {
					this.vehicleTypeOption = [{
						text: this.$t('base.common.noData'),
						value: null
					}]
					this.condition.vehicleType = ''
					this.condition.vehicleTypeText = ''
				}
				this.companyOption = [{
					text: this.$t('base.common.noData'),
					value: null
				}] //客户选项
				this.materialOption = [{
					text: this.$t('base.common.noData'),
					value: null
				}] //物料选项

				this.condition.companyId = ''
				this.condition.materialId = ''
				this.condition.companyName = ''
				this.condition.materialName = ''
				this.condition.orderNumber = '0';
				this.condition.driver = '';
				this.condition.vehicle = '';

			},
			toReportInfo(item) {
				if (!this.condition.tenantId) {
					uni.showToast({
						title: this.$t('report.selectTenant'),
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (this.userType == 4) {
					if (!this.condition.vehicle) {
						uni.showToast({
							title: this.$t('report.selectVehicle'),
							icon: 'none',
							duration: 2000
						})
						return;
					}
				}
				let data = {
					reportType: item.reportType,
					orderStatus: this.condition.orderStatus,
					startDate: this.condition.range[0] || '',
					endDate: this.condition.range[1] || '',
					vehicleType: this.condition.vehicleType,
					orderType: this.condition.orderType || '',
					tenantId: this.condition.tenantId || '',
					companyId: this.condition.companyId || '',
					materialId: this.condition.materialId || '',
					vehicle: this.condition.vehicle || '',
				};
				console.log("获取到的报表条件信息、", data);
				uni.navigateTo({
					url: `/subpages/report/reportInfo?data=${JSON.stringify(data)}`
				})
			},
			//选择企业后
			onTenantConfirm(value) {
				this.condition.tenantId = ''
				this.condition.tenantText = ''
				if (value.value) {
					this.condition.tenantId = value.value
					this.condition.tenantName = value.text
				}
				if (this.userType == "3") {
					this.bindOption(); //客商
				} else if (this.userType == "4") {
					this.bindDriverReport();
					this.bindVehicle(); //司机
				}
			},
			//选择客户
			onCompanyConfirm(value) {
				this.condition.companyId = ''
				this.condition.companyName = ''
				if (value.value) {
					this.condition.companyId = value.value
					this.condition.companyName = value.text
				}
				this.bindMaterial();
			},
			//确定选择日期
			onDatetimePickerConfirm(item) {
				this.condition.range = item
			},
			//选择物料
			onMaterialConfirm(value) {
				this.condition.materialId = ''
				this.condition.materialName = ''
				if (value.value) {
					this.condition.materialId = value.value
					this.condition.materialName = value.text
				}
			},
			//选择车号
			onVehicleConfirm(value) {
				this.condition.vehicle = ''
				if (value.value) {
					this.condition.vehicle = value.text
				}
			},
			//显示选择
			showPopup(refs) {
				console.log("lllllllll",this.condition)
				this.$refs[refs].showPicker = true
			},
			formatOption(data) {
				let arr = []
				data.forEach(item => {
					arr.push({
						text: item.name || item.label,
						value: item.value || item.id
					})
				})
				if (arr.length) {
					arr.unshift({
						text: this.$t('order.notSelected'),
						value: null
					})
				} else {
					arr.unshift({
						text: this.$t('base.common.noData'),
						value: null
					})
				}
				return arr
			},
		},
	};
</script>

<style lang="scss" scoped>
	/* #ifndef APP-NVUE */
	view {
		box-sizing: border-box;
	}

	page {
		background-color: #f5f7fa;
	}

	/* #endif */
	.report {
		// padding: 0 32rpx;
		min-height: 100vh;
		background-color: #f5f7fa;

		.condition {
			padding: 0 40rpx;
			background-color: #fff;
		}

		.grid-text {
			font-size: 28rpx;
			color: #999;
			line-height: 80rpx;
		}

		.report-list {
			display: flex;
			flex-wrap: wrap;
			background: #f5f7fa;
			padding: 0 16rpx 16rpx;

			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				background: #fff;
				width: calc(50% - 40rpx);
				margin: 0 20rpx 32rpx;
				padding: 32rpx;

				.item-img {
					width: 76rpx;
					height: 68rpx;
				}

				.item-text {
					font-size: 24rpx;
					line-height: 2;
					color: #222;
				}
			}
		}
	}

	/deep/ .uni-date-x {
		padding: 0;
	}


	/* #ifndef APP-NVUE */
view {
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
}
.report-list {
			display: flex;
			flex-wrap: wrap;
      flex-direction: row;
			padding: 0 16rpx 16rpx;

			.item {
				display: flex;
				align-items: center;
				background: #fff;
				width: calc(50% - 40rpx);
				margin: 16rpx 20rpx;
				padding: 32rpx;

				.item-img {
					width: 76rpx;
					height: 68rpx;
				}

				.item-text {
					font-size: 24rpx;
					line-height: 2;
					color: #222;
				}
			}
		}

page {
  background-color: #f5f7fa;
}
/* #endif*/
.approval {
  /* #ifndef APP-NVUE */
		display: flex;
		width: 750rpx;
		min-height: 100%;
		/* #endif */
		flex-direction: column;
		flex: 1;
		background-color: #f5f7fa;
    .top-banner{
      padding: 32rpx 32rpx 0;
    }
  .grid{
    padding: 36rpx 48rpx;
    margin: 40rpx 32rpx 0;
    background-color: #fff;
    border-radius: 10rpx;
    color: #000;
    .grid-img{
      width: 64rpx;
      height: 64rpx;
    }
    .grid-text{
      font-size: 24rpx;
      margin-top: 12rpx;
    }
  }
  .list-wrap{
    @extend .grid;
    padding: 0;
    .cell-wrap{
      padding-left: 40rpx;
      display: flex;
      flex-direction: row;
      justify-content: left;
      flex-wrap: wrap;
      .cell-item{
        text-align: center;
        width: 100rpx;
        margin-right: 61rpx;
        font-size: 20rpx;
        margin-bottom: 40rpx;
        .cell-icon{
          width: 100rpx;
          height: 100rpx;
          background-color: #E1EBFF;
          border-radius: 10rpx;
          display: flex;
          justify-content: space-around;
          align-items: center;
          margin-bottom: 10rpx;
        }
      }
    }
    
    .grid-text{
      font-size: 24rpx;
      margin-top: 12rpx;
      color: #999;
    }
  }
  .message-wrap{
    margin: 40rpx 32rpx;
    background-color: #fff;
    padding: 40rpx;
		border-radius: 10rpx;
    .message-title{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        line-height: 32rpx;
        .label{
          color: #222;
          font-size: 28rpx;
          font-weight: bold;
        }
        .message{
          display: flex;
          flex-direction: row;
          color: #999;
          font-size: 24rpx;
        }
      }
      .message-item{
        margin-top: 32rpx;
        background-color: #f9f9f9;
        border-radius: 10rpx;
        padding: 28rpx 32rpx;
        .title{
          justify-content: space-between;
          display: flex;
          flex-direction: row;
          // width: 176rpx;
          color: #999;
          font-size: 24rpx;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 32rpx;
        }
        .info{
          flex-direction: row;
          .cell-icon{
            width: 50rpx;
            height: 50rpx;
            background-color: #E1EBFF;
            border-radius: 10rpx;
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin-right: 32rpx;
          }
          .info-text{
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 22rpx;
            color: #666;
          }
        }
      }
  }
}
	
</style>