zj-mobile-oa/pages/information/information - 副本.vue

<template>
	<view class="topBtn">
		<u-subsection bg-color="rgb(215,224,233)" button-color="rgb(0,99,208)" active-color="white" :list="list"
			v-model="current" @change="subChange"></u-subsection>
		<view class="btn">
			<u-button size="medium" type="primary">已阅</u-button>
			<u-button size="medium" type="success">转交</u-button>
			<u-button size="medium" type="error">退件</u-button>
			<u-button size="medium" @click="onClose">关闭</u-button>
		</view>
	</view>
	<scroll-view scroll-y="true" class="content" v-show="current === 0">
		<image v-for="it in 48" src="../../static/666.png" mode="heightFix"></image>
	</scroll-view>

	<view class="handleFile" v-show="current === 1">

		<!-- 左侧视图 -->
		<view style="height: 100%;">
			<view style="border-bottom: 1rpx solid #cccccc;line-height: 100rpx;display: flex;">
				<mySelectTree class="mySelectTree" v-model="pdfValue" label="收文" :localdata="range" @change="change">
				</mySelectTree>
				<u-button style="float: right;line-height: 60rpx;height: 60rpx;margin-top: 10rpx;" size="medium"
					type="primary">重新加载</u-button>
				<uni-icons style="float: right;line-height: 40rpx;background-color: #bdc7d4;margin: 20rpx 20rpx;" type="left"
					size="20" color="#999" />
			</view>
			<scroll-view scroll-y="true">
				<image style="width: 100%;height: 12000rpx;" src="../../static/pdf.png"></image>


			</scroll-view>
		</view>

		<!-- 右侧视图 -->
		<scroll-view scroll-y="true">
			<u-form :model="form" ref="form1">
				<view style="text-align: start;font-size: 34rpx;font-weight: 700;">领导意见:</view>
				<u-form-item prop="suggest" :borderBottom="false"><u-input type="textarea" v-model="form.suggest" border
						height="400" /></u-form-item>
			</u-form>
			<view style="display: flex;">
				<view style="flex: 1;">

				</view>
				<u-button @click="confirm" style="margin-right: 40rpx;height: 70rpx;">保存</u-button>
				<u-button @click="confirm" style="height: 70rpx;">常用语</u-button>
			</view>
			<view style="text-align: start;font-size: 34rpx;font-weight: 700;line-height: 80rpx;">
				操作
			</view>
			<view class="selected">
				<view style="width: 500rpx;">
					<uni-segmented-control :current="czcurrent" :values="czlist" @clickItem="czsubChange" />
				</view>
				<view style="padding: 20rpx;background-color: #f2f2f2;" v-show="!show">
					<view style="display: flex;line-height: 80rpx;padding: 10rpx;">
						<span style="color: #2d68ea;">转处室，直属领导：</span>
						<u-button v-for="(item,index) in zcszsdwList" :type="zcszsdwIndex == index ?'primary' :''" class="lybut"
							size="mini" @click="zcszsdwClick(index)">{{item.value}}</u-button>
						<view style="flex: 1;">
							<u-button style="float: right;margin-top: 10rpx;" size="mini">更多</u-button>

						</view>
					</view>
					<view style="background-color: #fff;height: 100rpx;">

					</view>
				</view>
				<view class="" v-show="show">
					已阅后，本件转入已办件！
				</view>
				<view class="">
					<u-button type="primary" style="height: 70rpx;width: 400rpx;">提交</u-button>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		nextTick
	} from "vue"
	import {
		onLoad,
		onReady
	} from "@dcloudio/uni-app"

	const show = ref(true)
	const form1 = ref(null)
	const rules = ref({
		suggest: [{
			required: true,
			message: '请输入意见',
			trigger: ['change', 'blur']
		}]
	})

	const list = ref([{
			name: '文件浏览'
		},
		{
			name: '办理'
		},
		{
			name: '流程图'
		}
	])
	const zcszsdwIndex = ref(-1)
	const zcszsdwList = ref([{
			value: "处室正职",
			ry: ["张三", "李四", "王五"]
		},
		{
			value: "直属单位正职",
			ry: ["张三", "王五"]
		}
	])


	const czlist = ref(['转发', '已阅'])
	const current = ref(0)
	const czcurrent = ref(0)
	const pdfValue = ref(null)
	const range = ref([{
			value: 0,
			text: "文档目录",
			file: [{
				value: 10,
				text: "PDF1",
				pageNum: 5
			}, {
				value: 12,
				text: "PDF222",
				pageNum: 8
			}]
		},
		{
			value: 1,
			text: "附件",
			file: []
		},
	])

	const urlParams = ref({})
	const form = reactive({
		suggest: ''
	})

	function change(e) {
		console.log("e:", e);
	}

	function onClose() {
		uni.reLaunch({
			url: urlParams.value.url
		})
	}

	function confirm() {
		form1.value.validate((valid) => {
			if (valid) {
				uni.showToast({
					icon: "none",
					title: "表单验证通过"
				})
			}
		})
	}

	function zcszsdwClick(index) {
		zcszsdwIndex.value = index
	}

	function subChange() {}

	function czsubChange() {
		show.value = !show.value
	}
	onLoad((e) => {
		urlParams.value = e
		console.log(e);
		show.value = false
	})

	onReady(() => {
		form1.value.setRules(rules.value)
	})
</script>

<style lang="scss" scoped>
	body {
		padding: 100rpx 50rpx;
		box-sizing: border-box;
	}

	.topBtn {
		width: calc(100vw - 100rpx);
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		//margin-bottom: 20rpx;
		border-bottom: 1rpx solid #cccccc;

		.u-subsection {
			width: 600rpx;
		}

		.btn {
			display: flex;
			align-items: center;
			justify-content: center;

			uni-button {
				margin-left: 20rpx;
			}
		}
	}

	.content {
		background-color: #ebebeb;
		border-radius: 20rpx;
		width: calc(100vw - 100rpx);
		;
		height: calc(100vh - 300rpx);
		text-align: center;
	}

	.handleFile {
		width: calc(100vw - 100rpx);
		;
		height: calc(100vh - 300rpx);
		display: flex;
		justify-content: space-around;
		align-items: center;

		uni-scroll-view {
			width: 45vw;
			height: 100%;
			background-color: #fff;
			text-align: center;
			padding: 20rpx;
			box-sizing: border-box;
		}
	}

	.selected {
		height: 400rpx;
	}

	.mySelectTree {
		width: 400rpx;
	}

	.lybut {
		height: 50rpx;
		width: 200rpx;
		margin-top: 10rpx;
		margin-left: 20rpx;
	}
</style>