rtk-wms-uniapp/pages/workbranch/production/FQC/fqcCheckout.vue

<template>
	<gui-page :custom-header="true" :is-header-sized="false"
		:header-class="['gui-theme-background-color', isLandscapeScreen?'width: 100vmax;':'']"
		:style="[isLandscapeScreen?'width: 100vmax':'']">
		<template #gHeader>
			<view :style="[isLandscapeScreen?'height:44px;width: 100vmax':'height:44px;']"
				class="gui-flex gui-nowrap gui-rows gui-align-items-center">
				<!-- 使用组件实现返回按钮及返回首页按钮 -->
				<text style="font-size:44rpx;" class="gui-header-leader-btns gui-color-white font-icons"
					@tap="goBack">&#xe6c5;</text>
				<!-- 导航文本此处也可以是其他自定义内容 -->
				<text :style="[isPad?'font-size: 18px':'font-size: 14px']"
					class="gui-h4 gui-blod gui-flex1 gui-text-center gui-color-white gui-ellipsis gui-primary-text">FQC检验</text>
				<!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
				<!-- 实际宽度请根据自己情况设置 -->
				<view style="width:40px;" />
			</view>
		</template>
		<template #gBody>
			<view class="oqc-checkout">
				<view class="card-list-flexbox">
					<text class="card-list-title" :style="[isPad?'font-size: 18px':'font-size: 14px']">FQC检验信息</text>
					<view class="card-list-item">
						<text>日期</text>
						<text>{{ $parseTime(OQCParams.produceDateStr) }}</text>
					</view>
					<!-- <view class="card-list-item">
						<text>订单号</text>
						<text>{{ OQCParams.saleOutNo }}</text>
					</view>
					<view class="card-list-item">
						<text>客户名称</text>
						<text>{{ OQCParams.customerName }}</text>
					</view> -->
					<view class="card-list-item">
						<text>产品批号</text>
						<text>{{ OQCParams.materialLotsStr }}</text>
					</view>
					<view class="card-list-item">
						<text>产品名称</text>
						<text>{{ OQCParams.materialName }}</text>
					</view>
					<!-- <view class="card-list-item">
						<text>出货数量</text>
						<text>{{ OQCParams.deliveredQty }}</text>
					</view> -->
					<view class="card-list-item">
						<text>产品阶段</text>
						<text>{{ OQCParams.productPhase }}</text>
					</view>
					<view class="card-list-item">
						<text>班别</text>
						<text>{{ OQCParams.classFlag }}</text>
					</view>
					<!-- <view class="card-list-item">
						<text>有效期</text>
						<text>{{ OQCParams.expirationDate }}</text>
					</view> -->
				</view>
				<view class="custom-table">
					<uni-table border stripe empty-text="暂无更多数据">
						<!-- 表头行 -->
						<uni-tr class="custom-table-head">
							<uni-th align="center" width="60px">序号</uni-th>
							<uni-th align="center" width="140px">是否检验</uni-th>
							<uni-th align="center" width="240px">检验名称</uni-th>
							<uni-th align="center" width="140px">巡检频次</uni-th>
							<uni-th align="center" width="140px">检验工具</uni-th>
							<uni-th align="center" width="140px">标准值</uni-th>
							<uni-th align="center" width="140px">修饰符</uni-th>
						</uni-tr>
						<!-- 表格数据行 -->
						<uni-tr v-for="(item, key) in OQCItemList" :key="key" @click="handleShowModal(item)">
							<uni-td align="center" width="120px">{{ ++key }}</uni-td>

							<uni-td align="center">
								<view style="display: flex;justify-content: center;align-items: center;">
									<text v-if="item.completed" class="font-icons"
										:style="[isPad?'font-size: 24px':'font-size: 22px', 'color: #2dc252']">&#xe6dd;</text>
									<text v-else class="font-icons"
										:style="[isPad?'font-size: 24px':'font-size: 22px', 'color: #6a6a6a']">&#xe6e0;</text>
									<text v-if="item.voidOrNot *1 === 1" style="margin-left: 4px;">报废</text>
									<text v-else style="margin-left: 4px;">{{ item.completed? '已检': '未检' }}</text>
								</view>
							</uni-td>
							<uni-td align="center"
								:style="[item.voidOrNot *1 === 1?'text-decoration: line-through;':'']">{{ item.inspectionName }}</uni-td>
							<uni-td align="center"
								:style="[item.voidOrNot *1 === 1?'text-decoration: line-through;':'']">{{ item.checkQuantity }}</uni-td>
							<uni-td align="center"
								:style="[item.voidOrNot *1 === 1?'text-decoration: line-through;':'']">{{ item.tool }}</uni-td>
							<uni-td align="center"
								:style="[item.voidOrNot *1 === 1?'text-decoration: line-through;':'']">{{ item.standValue }}</uni-td>
							<uni-td align="center"
								:style="[item.voidOrNot *1 === 1?'text-decoration: line-through;':'']">{{ item.standard }}</uni-td>
						</uni-tr>
					</uni-table>
				</view>
			</view>
			<uni-popup ref="popup" background-color="#fff" :mask-click="false">
				<view class="popup-content">
					<view class="card-list-flexbox-popup">
						<view class="card-list-item">
							<text class="text-1 gui-color-gray">{{ submitOQCItem.inspectionName }}</text>
						</view>
						<view class="card-list-item">
							<text class="text-1 gui-color-gray">检验工具</text>
							<text class="text-2 gui-color-gray">{{ submitOQCItem.tool }}</text>
						</view>
						<view class="card-list-item">
							<text class="text-1 gui-color-gray">检验频次</text>
							<text class="text-2 gui-color-gray">{{ submitOQCItem.checkQuantity }}</text>
						</view>
						<view class="card-list-item">
							<text class="text-1 gui-color-gray">检验标准</text>
							<text class="text-2 gui-color-gray">{{ submitOQCItem.standard }}</text>
						</view>
						<view class="card-list-item">
							<text class="text-1 gui-color-gray">是否合格</text>
							<text class="text-2 gui-color-gray">
								<radio-group style="width: inherit;" @change="radioChange">
									<view
										style="display: grid;grid-template-rows: 1fr; grid-template-columns: 1fr 1fr;">
										<label>
											<view style="display: flex;justify-content: center;align-items: center;">
												<radio value="1"
													:checked="submitOQCItem.singleResult *1 === 1?true:false" />
												<view>合格</view>
											</view>
										</label>
										<label>
											<view style="display: flex;justify-content: center;align-items: center;">
												<radio value="0"
													:checked="submitOQCItem.singleResult *1 === 0?true:false" />
												<view>不合格</view>
											</view>
										</label>
									</view>
								</radio-group>
							</text>
						</view>

						<view v-if="submitOQCItem.inspectionModel === 0" class="card-list-item-input">
							<view v-for="(item, key) in submitOQCItem.actualCreateReqVOS" :key="key"
								style="margin: 4px 0;">
								<text v-if="item.qualified === 1" class="font-icons"
									style="font-size: 22px;height: auto;color: #2dc252;padding: 0 6px;">&#xe6dd;</text>
								<text v-else class="font-icons"
									style="font-size: 22px;height: auto;color: red;padding: 0 6px;">&#xe6e0;</text>
								<textarea v-model="submitOQCItem.actualCreateReqVOS[key].actual"
									class="text-3 gui-color-gray" inputmode="decimal" placeholder="请输入检验内容"
									style="border-radius: 4px;border: 1px dotted gray;" auto-height maxlength="14" />
								<view v-if="key === submitOQCItem.actualCreateReqVOS.length - 1" class="operation-icon"
									@click="appendRow(item)">
									<text class="font-icons"
										:style="[isPad?'font-size: 18px':'font-size: 14px']">&#xe664;</text>
								</view>
								<view v-else class="operation-icon-2" @click="deleteRow(item, key)">
									<text class="font-icons"
										:style="[isPad?'font-size: 18px':'font-size: 14px']">&#xe677;</text>
								</view>
							</view>
						</view>
						<view v-if="submitOQCItem.inspectionModel === 1" class="card-list-item-input">
							<textarea v-model="submitOQCItem.measuredResults" class="text-3 gui-color-gray"
								inputmode="text" placeholder="请输入检验内容"
								style="border-radius: 4px;border: 1px dotted gray;margin: 2px 4px;" auto-height
								maxlength="14" />
						</view>
						<view v-if="submitOQCItem.src?.length > 0" class="card-list-item">
							<text class="text-1">上传图片预览：</text>
						</view>
						<view v-if="submitOQCItem.src?.length > 0" class="card-list-item grid-image"
							style="margin: 12px 0">
							<image v-for="(item, key) in submitOQCItem.src" :key="key" :src="item" mode="scaleToFill"
								@click="handleRemoveImage(item, key)" />
						</view>
						<view v-if="OQCParams.auditStatus === -1" class="card-list-item">
							<button class="text-1 btn-mg" type="primary" @click="takePhoto">拍照</button>
						</view>
						<view class="card-list-item" style="margin: 12px 0">
							<button v-if="OQCParams.auditStatus === -1" class="text-1 btn-mg" type="primary"
								@click="handleSubmit">提交数据</button>
							<button class="text-1 btn-mg" type="default" @click="$refs['popup'].close()">关闭</button>
						</view>
					</view>
				</view>
			</uni-popup>
			<gui-right-menus>
				<!-- 扩展按钮 -->
				<template #menus-more>
					<view v-if="OQCParams.auditStatus === -1" hover-class="gui-tap"
						class="menu-items gui-bg-green gui-flex gui-columns gui-justify-content-center"
						@click="handleShowSubmitApprovalModal">
						<text class="menu-text gui-block gui-text-center gui-color-white">送审</text>
					</view>
					<view v-else hover-class="gui-tap"
						class="menu-items gui-flex gui-columns gui-justify-content-center"
						style="background-color: #717171;">
						<text class="menu-text gui-block gui-text-center gui-color-white">送审</text>
					</view>
				</template>
				<!-- 核心按钮 -->
				<template #menus-primary>
					<view class="menu-items gui-bg-primary gui-flex gui-columns gui-justify-content-center">
						<text class="menu-icon gui-color-white gui-block gui-text-center gui-icons">&#xe614;</text>
						<text class="menu-text gui-color-white gui-block gui-text-center">操作</text>
					</view>
				</template>
			</gui-right-menus>
			<gui-modal ref="modalForm" :custom-class="['gui-bg-white', 'gui-dark-bg-level-3', 'gui-border-radius']"
				title="提示">
				<template #content>
					<view class="gui-padding gui-bg-gray gui-dark-bg-level-2">
						<text class="gui-block gui-text-center gui-text gui-color-gray"
							style="line-height:100rpx; padding:10rpx;">您确定要立即送审吗？</text>
					</view>
				</template>

				<!-- 利用 flex 布局 可以放置多个自定义按钮哦  -->
				<template #btns>
					<view class="gui-flex gui-row gui-space-between operation-flex">
						<view hover-class="gui-tap" class="modal-btns gui-flex1" @tap="handleCancelApprovalModal">
							<text class="modal-btns gui-color-gray">取消</text>
						</view>
						<view class="line" />
						<view hover-class="gui-tap" class="modal-btns gui-flex1" @tap="handleSubmitApprovalModal">
							<text class="modal-btns gui-primary-color">确认</text>
						</view>
					</view>
				</template>
			</gui-modal>
			<uni-popup ref="errorTip" type="dialog">
				<uni-popup-dialog type="error" cancel-text="关闭" confirm-text="确认" title="提示" :content="errorTipMessage"
					@confirm="handleCloseErrorTipsModal" @close="handleCloseErrorTipsModal" />
			</uni-popup>
		</template>
	</gui-page>
</template>
<script>
	import axios from 'axios'
	import {
		computed,
		defineComponent,
		ref,
		onMounted,
		onBeforeMount
	} from 'vue'
	export default defineComponent({
		onLoad() {
			// // #ifdef APP-PLUS
			// plus.screen.lockOrientation('default');
			// // #endif
		},
		onUnload() {
			// // #ifdef APP-PLUS
			// plus.screen.lockOrientation('portrait-primary');
			// // #endif
		},
		onResize() {
			if ([90, -90].includes(plus.navigator.getOrientation())) {
				this.isLandscapeScreen = true
			} else {
				this.isLandscapeScreen = false
			}
		},
		setup(options) {
			const popup = ref()
			const modalForm = ref()
			const isLandscapeScreen = ref(false)
			const parentRow = options?.params ?? {}
			// 绑定的检查人信息
			const OQCParams = ref({
				auditStatus: null,
				materialLots: '',
				materialLotsStr: '',
				customerName: '',
				deliveredQty: '',
				expirationDate: '',
				materialName: '',
				produceDateStr: '',
				saleOutNo: '',
				version: 0,
				productPhase: '',
				processNo: '',
				materialNo: '',
				classFlag: '', // 班别
				wmsSaleOutOrderId: ''
			})
			const OQCItemList = ref([])
			// 待巡检项信息
			const submitOQCItem = ref({
				src: [],
				singleResult: '',
				measuredResults: null,
				id: '',
				inspectionModel: null,
				actualCreateReqVOS: [{
					id: '',
					actual: 0
				}],
				fileIds: []
			})
			const errorState = ref(0)
			const errorTip = ref('')
			const errorTipMessage = ref('')

			onBeforeMount(() => {
				// OQCParams.value.saleOutNo = JSON.parse(parentRow)?.saleOutNo;
				// OQCParams.value.materialNo = JSON.parse(parentRow)?.materialNo;
				OQCParams.value.wmsSaleOutOrderId = JSON.parse(parentRow)?.id
			})

			onMounted(() => {
				handleBindOQCHeader()
			})

			const goBack = function() {
				uni.$goBack('/pages/workbranch/production/FQC/fqcList')
			}

			const appendRow = function(row) {
				submitOQCItem.value.actualCreateReqVOS.push({
					id: '',
					actual: ''
				})
			}

			const deleteRow = function(row, index) {
				submitOQCItem.value.actualCreateReqVOS.splice(index, 1)
			}

			// 绑定FQC检验表头
			const handleBindOQCHeader = async function() {
				// const params = {
				// 	"wmsSaleOutOrderId": OQCParams.value.wmsSaleOutOrderId,
				// 	"processNo": "FQC",
				// 	"saleOutNo": OQCParams.value.saleOutNo,
				// 	"materialLots": JSON.parse(parentRow)?.materialLots,
				// 	"materialNo": OQCParams.value.materialNo,
				// 	// "wmsMaterialItemMasterId": "1658763849743671297"
				// }
				// await uni.$reqPost("getFQCRule", params);
				await uni.$reqPost('getFQCItem', {
						'wmsIncomingReceiptInspectionId': OQCParams.value.wmsSaleOutOrderId
					})
					.then((data) => {
						OQCItemList.value = data?.list
						OQCParams.value.customerName = data
							?.customerName
						OQCParams.value.classFlag = data?.classFlag
						OQCParams.value.version = data?.version
						OQCParams.value.materialNo = data?.materialNo
						OQCParams.value.productPhase = data?.productPhase
						OQCParams.value.processNo = data?.processNo
						OQCParams.value.deliveredQty = data?.deliveredQty
						OQCParams.value.expirationDate = data?.expirationDate
						OQCParams.value.materialLotsStr = data?.materialLotsStr
						OQCParams.value.materialLots = data?.materialLots
						OQCParams.value.materialName = data?.materialName
						OQCParams.value.auditStatus = data?.auditStatus
						OQCParams.value.produceDateStr = data?.produceDateStr
						OQCParams.value.saleOutNo = data?.saleOutNo
					})
			}

			const scinumToFloat = function(num) {
				// 处理非数字
				if (isNaN(num)) {
					return num
				}
				// 处理不需要转换的数字
				var str = '' + num
				if (!/e/i.test(str)) {
					return num
				}
				return (num).toFixed(18).replace(/\.?0+$/, '')
			}

			// 开始检验
			const handleShowModal = function(opt) {
				if (opt?.voidOrNot * 1 !== 1) {
					Object.assign(submitOQCItem.value, opt)
					submitOQCItem.value.id = opt?.id
					submitOQCItem.value.inspectionModel = opt?.inspectionModel

					uni.$reqGet('getResult', {
							id: opt?.id
						})
						.then(({
							code,
							data,
							msg
						}) => {
							if (code === 0) {
								if (popup.value?.showPopup === false) {
									popup.value.open('bottom')
								}
								if (data.actualDOS !== null && Object.prototype.toString.call(data
										.actualDOS) ===
									'[object Array]' && data.actualDOS.length > 0) {
									submitOQCItem.value.actualCreateReqVOS.length = 0
									data?.actualDOS.forEach(item => {
										const actual = scinumToFloat(item?.actual)
										submitOQCItem.value.actualCreateReqVOS.push({
											...item,
											actual
										})
									})
								} else {
									submitOQCItem.value.actualCreateReqVOS = [{
										id: '',
										actual: ''
									}]
								}
								if (data.fileIds !== null) {
									submitOQCItem.value.fileIds = data?.fileIds ?? []
								}
								submitOQCItem.value.measuredResults = data?.measuredResults ?? ''
								if (data?.urlList !== null) {
									submitOQCItem.value.src = data?.urlList
								} else {
									submitOQCItem.value.src = []
								}
							} else {
								// #ifdef APP-PLUS
								plus.device.beep(2)
								// #endif
								errorTipMessage.value = msg
								errorTip.value.open()
								errorState.value = -1
							}

						})


				}
			}

			const handleSubmit = async function() {
				const actualCreateReqVOS = []
				if (submitOQCItem.value.inspectionModel === 0) {
					try {
						submitOQCItem.value
							.actualCreateReqVOS.forEach(item => {
								if (isNaN(Number(item.actual))) {
									throw new Error('请填写正确的数值！')
								} else {
									actualCreateReqVOS.push({
										id: '',
										...item,
										actual: item.actual
									})
								}
							})
					} catch (e) {
						uni.showToast({
							title: e.message,
							duration: 2000,
							icon: 'none'
						})
						return
					}
				}
				const params = {
					fileIds: submitOQCItem.value.fileIds,
					actualCreateReqVOS,
					singleResult: submitOQCItem.value.singleResult,
					measuredResults: submitOQCItem.value.measuredResults,
					id: submitOQCItem.value.id,
					materialLots: OQCParams.value.materialLots,
					inspectionModel: submitOQCItem.value.inspectionModel,
					processNo: OQCParams.value.processNo
				}
				if (params.singleResult === '□OK ■NG') {
					params.singleResult = '0'
				} else if (params.singleResult === '■OK □NG') {
					params.singleResult = '1'
				}
				const data = await uni.$reqPut('submitItem', params)
				if (data?.code === 0) {
					uni.showToast({
						title: '数据提交成功！',
						duration: 2000,
						icon: 'none'
					})
					popup.value.close()
					handleBindOQCHeader()
				} else {
					// #ifdef APP-PLUS
					plus.device.beep(2)
					// #endif
					errorTipMessage.value = data?.msg ?? ''
					errorTip.value.open()
					errorState.value = -1
				}
			}

			// 拍照
			const takePhoto = function() {
				uni.chooseImage({
					count: 6, // count: 6, //默认9
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 从相册选择
					success: function(res) {
						res.tempFilePaths.forEach(async item => {
							// #ifdef APP-PLUS
							// 移动端无法使用FormData类型
							// 使用uniapp官方提供的uploadFile函数替代实现文件上传
							await uni.uploadFile({
								url: uni.$baseUrl +
									'/admin-api/minio/files/uploadFiles',
								name: 'file',
								filePath: item,
								header: {
									'Authorization': 'Bearer ' + uni
										.getStorageSync('token')
								},
								success: function(uploadFileRes) {
									const resultJSON = JSON.parse(
										uploadFileRes.data)
									if (submitOQCItem.value.fileIds ===
										null) {
										submitOQCItem.value.fileIds = []
									}
									submitOQCItem.value.fileIds.push(
										resultJSON.data
										.fileId)
								}
							})
							// #endif
							submitOQCItem.value.src.push(item)
						})
						res.tempFiles.forEach(async (item) => {
							// #ifdef H5
							const formData = new FormData()
							formData.append('file', item)
							// 上传文件
							const {
								data
							} = await axios({
								url: uni.$baseUrl +
									'/admin-api/minio/files/uploadFiles',
								name: '上传文件',
								method: 'post',
								headers: {
									'Authorization': 'Bearer ' + uni
										.getStorageSync('token'),
									'Content-Type': 'multipart/form-data;'
								},
								data: formData
							})
							if (submitOQCItem.value.fileIds === null) {
								submitOQCItem.value.fileIds = []
							}
							submitOQCItem.value.fileIds.push(data.data.fileId)
							// #endif
						})
					}
				})
			}

			const radioChange = function(item) {
				submitOQCItem.value.singleResult = item?.detail?.value
			}

			const handleRemoveImage = function(opt, index) {
				submitOQCItem.value.fileIds.splice(index, 1)
				submitOQCItem.value.src.splice(index, 1)
			}

			const handleShowSubmitApprovalModal = function() {
				modalForm.value.open()
			}

			const handleCancelApprovalModal = function() {
				modalForm.value.close()
			}

			const handleSubmitApprovalModal = function() {
				const params = {
					version: OQCParams.value.version,
					materialLots: OQCParams.value.materialLots,
					processNo: OQCParams.value.processNo,
					materialNo: OQCParams.value.materialNo
				}
				uni.$reqPost('submitApproval', params)
					.then(({
						code,
						data,
						msg
					}) => {
						if (code === 0) {
							uni.showToast({
								title: '送审成功！',
								duration: 2000,
								icon: 'none'
							})
							handleBindOQCHeader()
						} else {
							uni.showToast({
								title: msg,
								duration: 2000,
								icon: 'none'
							})
						}
					})
					.finally(() => {
						modalForm.value.close()
					})
			}

			// 关闭错误信息弹窗
			const handleCloseErrorTipsModal = async function() {
				errorTip.value.close()
			}

			return {
				popup,
				goBack,
				modalForm,
				takePhoto,
				OQCItemList,
				errorState,
				errorTip,
				errorTipMessage,
				appendRow,
				deleteRow,
				isLandscapeScreen,
				OQCParams,
				radioChange,
				handleBindOQCHeader,
				handleShowModal,
				handleSubmit,
				submitOQCItem,
				handleRemoveImage,
				handleShowSubmitApprovalModal,
				handleCancelApprovalModal,
				handleSubmitApprovalModal,
				handleCloseErrorTipsModal
			}
		}
	})
</script>

<style lang="scss" scoped>
	.gui-header-leader-btns {
		color: black;
		font-size: 24px !important;
		margin-left: 24rpx;
	}

	.gui-sbody {
		background-color: rgba(234, 239, 242, 1);
	}

	.gui-relative {
		overflow: visible;
		height: 100vh;

		.oqc-checkout {
			width: 100vw;
			height: calc(100vh - 75px);
			position: absolute;
			top: 95px;
			overflow: hidden;
		}
	}

	.card-list-flexbox {
		width: calc(100vw - 24px);
		// height: 325px;
		height: 215px;
		margin: 0 12px;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		overflow-y: scroll;

		.card-list-title {
			width: 100%;
			height: 35px;
			line-height: 35px;
			margin: 0 4px 0 4px;
			border-radius: 4px 4px 0 0;
			text-align: center;
			color: white;
			background-color: rgba(0, 160, 233, 1.0);
		}

		.card-list-item,
		.card-list-item-operation {
			width: 100%;
			height: 35px;
			margin: 0 4px 3rpx 4px;
			border-radius: 4px;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			background-color: #fff;

			uni-text {
				font-size: 14px;
				height: 50rpx;
				text-align: left;
				padding: 0 8px;
				display: flex;
				flex-direction: row;
				align-items: center;
			}

			.text-1 {
				flex: 1;
				height: 35px;
				justify-content: flex-start;
			}

			.text-2 {
				flex: 3;
				height: 35px;
				justify-content: flex-end;
				margin-right: 4px;
				padding: 2px 6px;
			}

		}

	}

	.popup-content {
		width: 100vw;
		height: 55vh;
		overflow-y: scroll;
	}

	.card-list-flexbox-popup {
		width: 100vw;
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;

		.card-list-item,
		.card-list-item-input {
			width: 100vw;
			height: 100%;
			min-height: 40px;
			display: flex;
			flex-direction: row;
			align-items: center;
			background-color: #fff;

			uni-text {
				font-size: 14px;
				height: 50rpx;
				text-align: left;
				padding: 0 12px;
				display: flex;
				flex-direction: row;
				align-items: center;
			}

			uni-image {
				width: calc(100vw / 2 - 4px);
				height: calc(100vw / 3.2 - 2px);
				pointer-events: none;
			}

			uni-image::after {
				content: "×";
				width: 22px;
				height: 22px;
				position: absolute;
				top: 5px;
				right: 5px;
				display: flex;
				justify-content: center;
				align-items: center;
				color: rgba(255, 255, 255, 0.9);
				background-color: rgba(0, 0, 0, 0.5);
				border-radius: 50%;
				font-size: 24px;
				/*给伪元素开启鼠标事件，将事件冒泡到父元素的点击事件中*/
				pointer-events: auto;
			}

			.text-1 {
				flex: 1;
				height: 40px;
				justify-content: flex-start;
			}

			.text-2 {
				flex: 3;
				height: 40px;
				justify-content: flex-end;
				margin-right: 4px;
				padding: 2px 6px;
			}

			.text-3 {
				width: calc(100% - 15%);
				min-height: 35px;
				justify-content: flex-end;
				padding: 2px 6px;
			}

			.text-3::before {}

			.btn-mg {
				margin: 0 5px;
			}
		}

		.card-list-item {
			justify-content: center;
		}

		.card-list-item-input {
			margin: 10px 0 10px 2%;
			display: flex;
			flex-direction: column;

			uni-view {
				width: 100%;
				height: 100%;
				display: flex;

				uni-textarea {
					flex: 8;
				}

				uni-view {
					flex: 1;
				}

				.operation-icon,
				.operation-icon-2 {
					height: auto;

					uni-text {
						width: 22px;
						height: 100%;
						padding: 0 !important;
						text-align: center;
						display: flex;
						justify-content: center;
						align-items: center;
						border-top-right-radius: 4px;
						border-bottom-right-radius: 4px;
						color: white;
						background-color: #80b7ff;
					}
				}

				.operation-icon-2 {
					uni-text {
						background-color: #ff5962;
					}
				}

			}
		}

		.grid-image {
			/* 设置容器布局为grid布局 */
			display: grid;
			/* 指定每一行的宽度 每个宽度中间用空格隔开 */
			grid-template-rows: repeat(auto-fill, 1fr);
			/* 指定每一列的宽度 每个宽度中间用空格隔开 */
			grid-template-columns: repeat(2, 1fr);
			padding: 0 4px;
		}

		.card-list-item:nth-of-type(1) {

			.text-1 {
				flex: 9;
				font-weight: bold;
				color: black !important;
			}

			.text-1::before {
				content: "";
				width: 4px;
				height: 20px;
				border-radius: 4px;
				margin-right: 4px;
				background-color: skyblue;
			}

			.text-2 {
				flex: 4;
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
				align-items: center;
				color: limegreen !important;
			}
		}

	}

	.custom-table {
		// height: calc(100vh - 355px);
		height: calc(100vh - 300px);
		margin: 5px 0;
		overflow-y: scroll;
	}

	.uni-list-cell {
		width: 100vw;
		height: 35px;
		margin: 4px 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		border-bottom: 2px solid #eaeff2;
		background-color: #fff;

		view {
			font-size: 14px;
			height: 50rpx;
			text-align: left;
			padding: 0 8px;
			display: flex;
			flex-direction: row;
			align-items: center;
		}

		.uni-list-cell-left {
			flex: 1;
			height: 35px;
			justify-content: flex-start;
		}

		.uni-list-cell-db {
			flex: 3;
			height: 35px;
			justify-content: flex-end;
			margin-right: 4px;
			padding: 2px 6px;

			uni-picker {
				width: 100%;
				display: flex;
				flex-direction: row;
				justify-content: center;
			}
		}
	}

	.modal-btns {
		height: 100rpx;
		line-height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.line {
		margin-top: 10rpx;
		height: 80rpx;
		width: 1rpx;
		background-color: #dcdcdc;
	}
</style>