yiliangyiyun-pc-jj/src/views/statisticalReport/stockSaleOutReportList.vue

//现货销售出库报表
<template>
	<div class="container">
		<el-scrollbar style="height: 100%">
			<el-row>
				<el-col style="padding-left: 15px" :span="16">
					<ws-button type="primary" v-hasPermission="`report.goodsSaleOutReport.view`" @click="adopt()">备注
					</ws-button>
					<ws-button type="primary" v-hasPermission="`report.goodsSaleOutReport.view`" @click="depositbutton()">定金
					</ws-button>
					<ws-button type="primary" v-hasPermission="`report.goodsSaleOutReport.payment`" @click="handlecollect()">收款
					</ws-button>
				</el-col>
				<el-col style="text-align: right; line-height: 60px; padding-right: 10px" :span="8">
					<el-select v-model="contractNo" placeholder="请选择合同" clearable filterable
						@change="contractchange" maxlength="500" type="input" class="findValue">
						<el-option v-if="item.reportStatus" v-for="item in options" :key="item.constKey"
							:label="item.contractNo + '(' + item.reportStatus + ')'" :value="item.contractNo" />
						<!-- <el-option v-if="!item.reportStatus" v-for="item in options" :key="item.constKey"
							:label="item.contractNo" :value="item.contractNo" /> -->
					</el-select>
				</el-col>
			</el-row>
			<div v-if="contractNo != ''">
				<span v-if="orderList.buyer">买方: {{ orderList.buyer }} </span>
				<span v-else>买方: </span>
			</div>
			<div v-if="contractNo != ''">
				<span v-if="orderList.goodsName">货名: {{ orderList.goodsName }} </span>
				<span v-else>货名: </span>
				<span v-if="orderList.weight">合同重量: {{ orderList.weight }} 吨</span>
				<span v-else>合同重量: 0 吨</span>
				<span v-if="outboundVolume">出库量: {{ outboundVolume }} 吨</span>
				<span v-else>出库量: 0 吨</span>
				<span v-if="orderList.unitContractPrice">合同单价: {{ orderList.unitContractPrice }} 元/吨</span>
				<span v-else>合同单价: 0 元/吨</span>
				<span v-if="amountReceivable">应收: {{ amountReceivable.toFixed(2) }} 元</span>
				<span v-else>应收: 0 元</span>
				<span v-if="amountReceived">已收: {{ amountReceived.toFixed(2) }} 元
					<img width="18" height="20" style="vertical-align: text-top; position: relative; top: -1px"
						src="../../../public/img/fujian.png" @click="fujian1()" alt="" />
				</span>
				<span v-else>已收: 0 元</span>
				<span v-if="uncollectedAmount">未收: {{ uncollectedAmount.toFixed(2) }} 元</span>
				<span v-else>未收: 0 元</span>
				<span v-if="orderList.deposit">定金: {{ orderList.deposit }} 元
					<img width="18" height="20" style="vertical-align: text-top; position: relative; top: -1px"
						src="../../../public/img/fujian.png" @click="fujian()" alt="" />
				</span>
				<span v-else>定金: 0 元</span>
			</div>

			<el-table class="wenzi" :data="saleList.records" style="width: 100%; margin-top: 20px" ref="saleList" border
				:summary-method="getSummaries" show-summary @selection-change="handleSelectionChange">
				<el-table-column type="index" label="序号" width="50"></el-table-column>
				<el-table-column class="table_td" prop="warehouseName" label="仓库"></el-table-column>
				<el-table-column class="table_td" prop="carNo" label="车牌号"></el-table-column>
				<el-table-column class="table_td" prop="deliveryDate" label="出库日期">
					<template slot-scope="scope">
						<span style="color: #ce4545;" v-if="scope.row.returnFlag == 1">{{scope.row.returnDate}}</span>
						<span v-if="scope.row.returnFlag == null">{{scope.row.deliveryDate }}</span>
					</template>
				</el-table-column>
				<el-table-column class="table_td" prop="grossWeight" label="毛重(吨)"></el-table-column>
				<el-table-column class="table_td" prop="tare" label="皮重(吨)"></el-table-column>
				<el-table-column class="table_td" prop="netWeight" label="净重(吨)">
					<template slot-scope="scope">
						<span style="color: #ce4545;" @click='fujian2(scope.row)'
							v-if="scope.row.returnFlag == 1">{{scope.row.netWeight}}(退)</span>
						<span @click='fujian2(scope.row)' v-if="scope.row.returnFlag == null">{{scope.row.netWeight }}</span>
					</template>
				</el-table-column>
				<el-table-column class="table_td" prop="settlementWeight" label="结算重量(吨)">
					<template slot-scope="scope">
						<div class="inputChenge">
							<el-input v-model="scope.row.settlementWeight" v-if="scope.row.identification == 'true'">
							</el-input>
							<div v-if="scope.row.identification == 'false'" class="inputs">
								<span style="color: #ce4545;"
									v-if="scope.row.returnFlag == 1">{{scope.row.settlementWeight}}</span>
								<span v-if="scope.row.returnFlag == null">{{scope.row.settlementWeight }}</span>
							</div>
						</div>
						<img  v-hasPermission="`report.goodsSaleOutReport.edit`" width="17" height="18" style="vertical-align: text-top; position: relative; top: -1px"
							src="../../../public/img/edit.png" @click="whether(scope.row)"
							v-if="scope.row.identification == 'false'" alt="" />
						<i class="el-icon-check" style="line-height: 29px; margin-left: 10px"
							v-if="scope.row.identification == 'true'" @click="weightClick(scope.row)"></i>
					</template>
				</el-table-column>
				<el-table-column class="table_td" prop="amountIngReceivable" label="应收金额(元)">
					<template slot-scope="scope">
						<span v-if="scope.row.returnFlag == null">{{scope.row.amountIngReceivable.toFixed(2) }}</span>
					</template>
				</el-table-column>
			</el-table>


			<!-- 页数 -->
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="currentPage" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
				:total="deptBudgetTotal"></el-pagination>
		</el-scrollbar>
		<!-- 定金弹窗 -->
		<WinseaContentModal v-model="accessoryTFs" :title="$t('system.noticeCircular.information')"
			@on-cancel="handleClose">
			<div v-for="(item,index) in addressUrlArray" :key="index">
				<img width="100" height="100" :src="item" alt="">
			</div>
		</WinseaContentModal>
		<!-- 已收弹窗 -->
		<WinseaContentModal v-model="accessoryTFs1" :title="$t('system.noticeCircular.information')"
			@on-cancel="handleClose1">
			<div style="display: flex;">
				<div v-for="(item,index) in addressUrlArray1" :key="index" style="display:flex;">
					<img width="100" height="100" :src="item" alt="">
					<!-- <img src="https://taohaoliang.oss-cn-beijing.aliyuncs.com/admin/f43f512136a544d3bbcef0fa4259d274.png" alt=""> -->
				</div>
			</div>
		</WinseaContentModal>
		<WinseaContentModal v-model="accessoryTFs2" :title="$t('system.noticeCircular.information')"
			@on-cancel="handleClose">
			<img width="100" height="100" :src="appendixIdss2" alt="">      
		</WinseaContentModal>
		<!-- 收款 -->
		<el-dialog width="25%" title="收款" :visible.sync="dialogFormVisible1" :append-to-body="true">
			<el-form :model="form">
				<el-form-item label="未收金额（元）" :label-width="formLabelWidth" prop="amountNotReceivable">
					<span>{{ uncollectedAmount }}</span>
				</el-form-item>
				<el-form-item label="本次收款金额（元）" :label-width="formLabelWidth">
					<el-input v-model="money" autocomplete="off" placeholder="请输入本次收款金额" class="deal"></el-input>
				</el-form-item>
				<el-form-item label="收款日期" prop="collectionDate" :label-width="formLabelWidth" class="deal">
					<ws-date-picker v-model="collectionDate" type="date" placeholder="请选择收款日期" value-format="yyyy-MM-dd"
						class="deal" />
				</el-form-item>
				<el-form-item label="上传收款截图" :label-width="formLabelWidth">
					<el-upload ref='upload' action="https://www.zthymaoyi.com/upload/admin" list-type="picture-card"
						:on-success="handlePictureCardPreview" :on-remove="handleRemove" class="photo2">
						<i class="el-icon-plus"></i>
					</el-upload>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible1 = false">取 消</el-button>
				<el-button  v-hasPermission="`report.goodsSaleOutReport.payment`" type="primary" @click="collectment()">提 交</el-button>
			</div>
		</el-dialog>
		<!-- 定金 -->
		<el-dialog width="25%" title="定金" :visible.sync="dialogFormVisible2" :append-to-body="true">
			<el-form :model="form">
				<el-form-item label="已收定金(元)" :label-width="formLabelWidth">
					<el-input v-model="orderList.deposit" autocomplete="off" placeholder="输入定金金额" class="deal"></el-input>
				</el-form-item>
				<el-form-item label="上传定金截图" :label-width="formLabelWidth">
					<el-upload action="https://www.zthymaoyi.com/upload/admin" :limit='1' list-type="picture-card"
						:on-success="handlePictureCardPreview1" :on-remove="handleRemove" class="photo2">
						<i class="el-icon-plus"></i>
					</el-upload>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible2 = false">取 消</el-button>
				<el-button type="primary" @click="depositSubmit()">提 交</el-button>
			</div>
		</el-dialog>
		<!--备注-->
		<el-dialog width="25%" title="备注" :visible.sync="collectForm1" :append-to-body="true">
			<el-form :model="form">
				<div class="beizhu">
					<el-input v-model="orderList.remark" autocomplete="off" placeholder="备注信息,不超过1000字" class="deal"></el-input>
				</div>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button  @click="collectForm1 = false">关闭</el-button>
				<el-button  v-hasPermission="`report.goodsSaleOutReport.carry`" type="primary" @click="adoptRemarks()">保存</el-button>
			</div>
		</el-dialog>
	</div>
	<!-- </div> -->
</template>
<script>
	import {
		getStockSaleReceiptList,
		getStockSaleContractNoList,
		stockSaleCollectMoney,
		disOrRemarks,
		saleEditSettlementWeight,
	} from '@/model/statisticalReport/index'
	import Pagination from '@/components/Pagination'
	import WsUpload from '@/components/WsUpload'
	import {
		EventBus
	} from 'base-core-lib'
	export default {
		name: 'viewSpareMoney',
		components: {
			WsUpload,
			Pagination,
		},
		watch: {
			vesselId(val) {
				this.getList()
			},
			isShow(val) {
				this.showType = val
			},
		},

		data() {
			return {
				dialogFormVisible1: false,
				dialogFormVisible2: false,
				amountEdReceivable: 0,
				amountNotReceivable: 0,
				deptBudgetList: {},
				//分页
				currentPage: 1,
				pageSize: 10,
				allmoney1: 0,
				deptCircularPage: {},
				deptBudgetTotal: 0,
				stockSaleReceiptReportList: [],
				stockSaleReceiptReport: {
					stockSaleReceiptReportList: [],
					money: '',
					amountEdReceivable: 0,
					amountNotReceivable: 0,
					collectionDate: '',
					id: '',
					invoiceType: '',
				},
				orderList: {},
				options: [],
				contractNoList: [],
				contractNo: '',
				dialogVisible: false,
				form: {},
				compId: sessionStorage.getItem('ws-pf_compId'),
				collectForm: false,
				collectForm1: false,
				managementType: 3,
				money: 0,
				//  id:'',
				collectmoney: 0,
				remark: '',
				remarkInformationList: {},
				remarkInformation: {
					remarkInformationList: [],
					id: '',
					remark: '',
					deposit: '0',
					depositUrl: '',
				},
				deposit: '0',
				depositUrl: [],
				saleList: [],
				amountReceivable: '',
				amountReceived: '',
				uncollectedAmount: '',
				outboundVolume: '',
				collectionDate: '',
				collectionScreenshot: '',
				amountEdCollectionable: '',
				actualCollectionment: '',
				// collectDate: '',
				calculationCollectable: '',
				searchType: '',
				searchTypeText: '',
				formLabelWidth: '120px',
				searchKeyWord: '',
				value1: '', //收款日期
				modification: [],
				accessoryTFs: false,
				appendixIdss: [],
				accessoryTFs1: false,
				appendixIdss1: [],
				appendixIdss2:'',
				accessoryTFs2: false,
				addressUrlArray: [],
				addressUrlArray1: [],
			}
		},
		activated() {
       var now = new Date();
       var year = now.getFullYear(); //得到年份
       var month = now.getMonth(); //得到月份
       var date = now.getDate(); //得到日期
       month = month + 1;
       month = month.toString().padStart(2, "0");
       date = date.toString().padStart(2, "0");
       this.collectionDate = `${year}-${month}-${date}`;
			this.getList()
			this.showType = this.isShow
		},
		methods: {
			//表头
			contractchange(e) {
				for (var i = 0; i < this.contractNoList.length; i++) {
					if (this.contractNoList[i].contractNo == e) {
						this.orderList = this.contractNoList[i]
						if (this.contractNoList[i].depositUrl) {
							this.addressUrlArray = this.contractNoList[i].depositUrl.split(',')
						} else {
							this.addressUrlArray = []
						}
					}
				}
				this.contractNo = e
				this.getList()
			},
			//选择合同
			dataFilter(val) {
				this.contractNo = val
				if (val) {
					//val存在
					this.options = this.contractNoList.filter(item => {
						if (
							!!~item.contractNo.indexOf(val) ||
							!!~item.contractNo.toUpperCase().indexOf(val.toUpperCase())
						) {
							return true
						}
					})
				} else {
					//val为空时，还原数组
					this.options = this.contractNoList
				}
			},
			//修改结算重量
			whether(row) {
				row.identification = 'true'
			},
			weightClick(row) {
				if (
					row.settlementWeight > 200 ||
					row.settlementWeight < 1 ||
					(String(row.settlementWeight).indexOf(
							'.'
						) != -1 &&
						String(row.settlementWeight).length -
						(String(row.settlementWeight).indexOf(
								'.'
							) +
							1) >
						3)
				) {
					this.$message({
						message: '结算重量输入错误',
						type: 'warning',
					})
					return
				}
				this.$confirm(`确定要修改结算重量？`, {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning',
					})
					.then(() => {
						saleEditSettlementWeight({
								settlementWeight: row.settlementWeight,
								id: row.id,
							})
							.toPromise()
							.then((response) => {
								this.$notify.success({
									title: '成功',
									message: '结算重量修改成功',
								})
								this.getList()
							})
							.catch(() => {
								return false
							})
					})
			},
			//备注信息
			adopt() {
				this.collectForm1 = true
			},
			adoptRemarks() {
				// this.remarkInformation.remark = this.orderList.remark
				this.$confirm(`确定要保存备注信息？`, {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning',
					})
					.then(() => {
						for (var i = 0; i < this.contractNoList.length; i++) {
							if (this.contractNoList[i].contractNo == this.contractNo) {
								this.remarkInformationList.id = this.contractNoList[i].id
							}
						}
						this.remarkInformationList.remark = this.orderList.remark
						disOrRemarks(this.remarkInformationList)
							.toPromise()
							.then(() => {
								this.collectForm1 = false
								this.$message.success('添加备注信息成功')
								this.remarkInformationList = {}
								this.getList()

							})
							.catch(() => {
								return false
							})
					})
			},
			selectInit(row) {
				//在这里一定要记得类型匹配的上。
				if (row.approveStatus == null) {
					return true
				} else if (row.approveStatus != null) {
					if (row.taskId == null) {
						return false
					} else {
						return true
					}
				}
			},
			handleSelectionChange(val) {
				this.modification = val
			},
			//合计
			getSummaries(param) {
				const {
					columns,
					data
				} = param
				const sums = []
				columns.forEach((column, index) => {
					if (index === 0) {
						sums[index] = '合计'
					} else if (
						index === 7 ||
						index === 8
					) {
						const values = data.map((item) => Number(item[column.property]))
						if (!values.every((value) => isNaN(value))) {
							sums[index] = values.reduce((prev, curr) => {
								const value = Number(curr)
								if (!isNaN(value)) {
									return prev + curr
								} else {
									return prev
								}
							}, 0)
						} else {
							sums[index] = '元'
						}
					} else {
						sums[index] = '--'
					}
				})
				sums[sums.length-1]=sums[sums.length-1].toFixed(2)
				sums[sums.length-2]=sums[sums.length-2].toFixed(2)
				return sums
			},
			//定金
			depositbutton() {
				this.dialogFormVisible2 = true
			},
			depositSubmit() {
				this.remarkInformation.deposit = this.orderList.deposit
				this.remarkInformation.depositUrl = this.depositUrl
				this.$confirm(`确定提交定金信息？`, {
					cancelButtonText: '取消',
					confirmButtonText: '确定',
					type: 'warning',
				}).then(() => {
					for (var i = 0; i < this.contractNoList.length; i++) {
						if (this.contractNoList[i].contractNo == this.contractNo) {
							this.remarkInformationList.id = this.contractNoList[i].id
						}
					}
					this.remarkInformationList.deposit = this.orderList.deposit
					this.remarkInformationList.depositUrl = this.depositUrl.toString()
					disOrRemarks(this.remarkInformationList)
						.toPromise()
						.then((response) => {
							this.$notify.success({
								title: '成功',
								message: '定金成功',
							})
							this.remarkInformationList = {}
							this.dialogFormVisible2 = false
							this.getList()
						})
						.catch((response) => {
							console.log(response)
							EventBus.$emit('error', response.message)
						})
				})
			},
			//定金附件
			fujian() {
				if (this.orderList.depositUrl === null || this.orderList.depositUrl === '') {
					EventBus.$emit(
						'warning',
						this.$t('system.noticeCircular.NoInformation')
					)
				}
				this.appendixIdss = this.orderList.depositUrl
				this.accessoryTFs = true
			},
			fujian2(item) {
				if (item.poundImg === null || item.poundImg === '') {
					EventBus.$emit(
						'warning',
						this.$t('system.noticeCircular.NoInformation')
					)
				}
				this.appendixIdss2 = item.poundImg
				this.accessoryTFs2 = true
			},
			handleClose() {
				this.accessoryTFs = false
			},
			//已收附件
			fujian1() {
				if (this.addressUrlArray1.length == 0) {
					EventBus.$emit(
						'warning',
						this.$t('system.noticeCircular.NoInformation')
					)
				} else {
					this.appendixIdss1 = this.collectionScreenshot
					this.accessoryTFs1 = true
				}
			},
			handleClose1() {
				this.accessoryTFs1 = false
			},
			//收款
			handlecollect() {
				this.amountEdReceivable = this.saleList.records[0].amountEdReceivable
				this.amountNotReceivable = this.saleList.records[0].amountNotReceivable
				this.stockSaleReceiptReportList = this.saleList.records
				this.dialogFormVisible1 = true
			},
			collectment() {
				this.stockSaleReceiptReport.money = this.money
				this.stockSaleReceiptReport.collectionDate = this.collectionDate
				if (
					this.money < 0 ||
					(String(this.money).indexOf('.') != -1 &&
						String(this.money).length - (String(this.money).indexOf('.') + 1) >
						2)
				) {
					this.$message({
						message: '收款金额输入错误',
						type: 'warning',
					})
					return
				}
				if (this.money) {
					if (isNaN(this.money)) {
						this.$message({
							message: '收款金额非数字!',
							type: 'warning',
						})
						return
					}
				}
				if (!this.money) {
					this.$message({
						message: '收款金额不能为空！',
						type: 'warning',
					})
					return
				}
				if (this.money > this.uncollectedAmount) {
					this.$message({
						message: '收款金额不能大于未收金额！',
						type: 'warning',
					})
					return
				}
				this.$confirm(`确定提交收款信息？`, {
					cancelButtonText: '取消',
					confirmButtonText: '确定',
					type: 'warning',
				}).then(() => {
					stockSaleCollectMoney({
							stockSaleReceiptReportList: this.stockSaleReceiptReportList,
							amountEdReceivable: this.amountEdReceivable,
							amountNotReceivable: this.amountNotReceivable,
							money: this.money,
							collectionDate: this.collectionDate,
							collectionScreenshot: this.collectionScreenshot,
						})
						.toPromise()
						.then((response) => {
							this.$notify.success({
								title: '成功',
								message: '收款成功',
							})
							this.stockSaleReceiptReportList = {}
							this.money = ''
							this.collectionDate = ''
							this.collectionScreenshot = ''
							this.$refs.upload.clearFiles()
							this.dialogFormVisible1 = false
							this.getList()
						})
						.catch((response) => {
							console.log(response)
							EventBus.$emit('error', response.message)
						})
				})
			},
			//列表
			getList() {
				getStockSaleReceiptList({
						compId: sessionStorage.getItem('ws-pf_compId'),
						currentPage: this.currentPage,
						pageSize: this.pageSize,
						searchType: this.searchType,
						contractNo: this.contractNo,
					})
					.toPromise()
					.then((response) => {
						this.amountReceivable = 0
						this.amountReceived = 0
						this.uncollectedAmount = 0
						this.outboundVolume = 0
						let num = []
						for (var i = 0; i < response.records.length; i++) {
							response.records[i].identification = 'false'
							this.amountReceivable += response.records[i].amountIngReceivable
							this.amountReceived += response.records[i].amountEdReceivable
							this.uncollectedAmount += response.records[i].amountNotReceivable
							this.outboundVolume += response.records[i].settlementWeight
							// this.addressUrlArray1.push(response.records[i].collectionScreenshot.split('$'))
							if(response.records[i].collectionScreenshot!=null){
							    num = response.records[i].collectionScreenshot.split('$')
								for (let j = 0; j < num.length; j++) {
									if (num[j] != '') {
										if (this.addressUrlArray1.indexOf(num[j]) == -1) {
											this.addressUrlArray1.push(num[j])
										}

									}
								}
							}
						}
						this.deptBudgetTotal = response.total
						this.saleList = response
					})
				getStockSaleContractNoList({
						compId: sessionStorage.getItem('ws-pf_compId'),
						currentPage: this.currentPage,
						pageSize: this.pageSize,
						roleFlag: this.roleFlag,
					})
					.toPromise()
					.then((response) => {
						this.contractNoList = response
						// this.contractNoList.unshift({})
						this.options = this.contractNoList
					})
			},
			//收款截图
			handleRemove(file) {
				console.log(file)
			},
			handlePictureCardPreview(file) {
				this.collectionScreenshot = file.url
			},
			handlePictureCardPreview1(file) {
				this.depositUrl = file.url
			},
			handleDownload(file) {
				console.log(file)
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`)
				this.pageSize = val
				this.getList()
			},
			handleCurrentChange(val) {
				this.currentPage = val
				console.log(`当前页: ${val}`)
				this.getList()
			},
		},
	}
</script>
<style lang="scss" scoped>
	.connert {
		width: 90%;
		margin: 0 auto;
	}

	.vertical-text-left {
		width: 62px;
		text-align: right;
	}

	//分页
	.el-pagination {
		padding: 10px 15px;
		margin-bottom: 0;
		text-align: center;
	}

	/deep/.el-pager li.active {
		color: #5878e8;
		cursor: default;
	}

	/deep/.el-pager li:hover {
		color: #5878e8;
		cursor: default;
	}

	.el-button--default {
		color: #8890b1;
		border-color: #e8eaf1;
	}

	/deep/.base_header_layout .grid-content.right .find.el-button--primary {
		width: 30px;
		margin-left: 0;
		border-top-left-radius: 0px;
		border-bottom-left-radius: 0px;
	}

	/deep/.findValue .el-input__inner {
		border-top-right-radius: 0px;
		border-bottom-right-radius: 0px;
		width: 385px;
	}

	.completed.el-button--default {
		border-color: #5878e8;
		background-color: #f6f7fc;
		color: #5878e8;
	}

	.putstorage.el-button--default,
	.deliverystorage.el-button--default {
		border-color: #8890b1;
		background-color: #fff;
		color: #8890b1;
	}

	/deep/.el-table td,
	/deep/.el-table th.is-leaf {
		border-right: 1px solid #e9ecf7;
		text-align: center;
	}

	/deep/.el-table tr td:first-child,
	/deep/.el-table tr th.is-leaf:first-child {
		border-left: 1px solid #e9ecf7;
	}

	.record,
	.adjustment {
		display: inline-block;
		color: #5878e8;
		padding: 0 4px !important;
		position: relative;
	}

	.record:after {
		position: absolute;
		content: '';
		display: block;
		top: 5px;
		right: -2px;
		width: 1px;
		height: 12px;
		background: #e9ecf7;
	}

	// .el-row{
	//     height: 150px;
	// }
	.base_header_layout .grid-content {
		margin-top: 80px;
	}

	.el-input--small .el-input__inner {
		margin-left: 20px;
	}

	.el-range-editor--small.el-input__inner {
		height: 32px;
		margin-left: -20%;
	}

	//执行样式
	.executory,
	.inExecution,
	.done {
		width: 6px;
		height: 6px;
		display: inline-block;
		border-radius: 50%;
		position: relative;
		top: -1px;
		font-size: 14px;
	}

	.executory {
		background: #ff9f24;
	}

	.inExecution {
		background: #5878e8;
	}

	.done {
		background: #50cad4;
	}

	.record,
	.adjustment {
		display: inline-block;
		color: #5878e8;
		padding: 0 4px !important;
		position: relative;
		font-size: 14px;
	}

	.container {
		overflow: scroll;
		height: 93vh;
	}

	.button-container {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		width: 100%;
		height: 50px;
		padding: 0 10px;

		&>div {
			margin-left: 10px;
			display: flex;
			flex-wrap: nowrap;
			flex-direction: row;

			&>span {
				line-height: 50px;
			}
		}

		/deep/.auditFlow-box {
			position: unset;
			margin-left: 10px;

			&/deep/.auditFlow-icon {
				width: auto;
				padding-right: 30px;
			}

			&/deep/.auditFlow-main {
				position: absolute;
			}
		}
	}

	.bg-left {
		padding-left: 30px;
	}

	.title {
		position: relative;
	}

	.title::before {
		content: '';
		display: inline-block;
		width: 5px;
		height: 30px;
		background: #5473e8;
		position: absolute;
		left: 0;
	}

	.el-button--primary {
		background-color: #5878e8;
		border-color: #5878e8;
		// margin-left: 85%;
		margin-top: 13px;
	}

	//导航条样式
	.el-col-12 {
		width: 50%;
		height: 60px;
		background: #f6f7fc;
		border-radius: 4px 4px 1px 1px;
	}

	.el-input--small .el-input__inner {
		height: 32px;
		line-height: 32px;
		width: 385px;
		margin-top: 10px;
	}

	.bg-bottom {
		margin-left: 85%;
	}

	.but {
		margin-left: 30%;
		/* margin-top: -32px; */
		overflow: auto;
		/* float: left; */
		/* margin-left: 1px; */
		margin-left: -10px;
	}

	.el-input--small {
		font-size: 13px;
		width: 390px;
		margin-left: 74%;
	}

	/deep/.el-table .el-table__header .cell,
	.el-table .el-table__body .cell {
		text-align: center;
	}

	.el-scrollbar__wrap {
		overflow-y: hidden;
	}

	/deep/.deal {
		margin-left: 0%;
		width: 64%;
	}

	.photo {
		padding: 0% 34%;
	}

	.photo1 {
		padding: 0 10%;
	}

	.photo2 {
		padding: 0 12%;
	}

	/deep/.el-form-item--small .el-form-item__label,
	.el-form-item--small .el-form-item__content {
		text-align: center;
	}

	hr {
		width: 91%;
	}

	/deep/.deaal {
		width: 66%;
		margin-left: 9%;
	}

	.el-date-editor.el-input,
	.el-date-editor.el-input__inner,
	.el-input-number--small {
	}

	/deep/.el-table td,
	.el-table th.is-leaf {
		border-right: 1px solid #e9ecf7;
		text-align: center;
		height: 40px;
	}

	/deep/.beizhu .el-input--small .el-input__inner {
		height: 220px;
		line-height: 28px;
		width: 146%;
		margin-left: 15px;
	}

	.inputs {
		margin: 0 auto;
		margin-right: 15%;
	}

	.inputChenge {
		width: 150%;
		display: inline-flex;
		margin-left: -80%;
	}
</style>