luoshan_web/pages/command/application.vue

<template>
	<view class="container">
		<view class="mim-view">
			<view class="mim-font-16 bold mim-flex-wrap-left">
				<text class="mim-font-16 bold">申请理由</text>
				<text class="mim-font-16 bold mimRed">*</text>
			</view>
			<u-input type="textarea" v-model="form.reason" placeholder='填写申请理由' placeholder-style="color: #BDBDBD;"
				height="160" :auto-height='true' :clearable='false' :custom-style="customTestStyle" maxlength="-1"
				cursor-spacing="12" />
		</view>
		<view class="mim-view" v-for="(_, index) in list" :key="index" :class="{margin24 : index > 0 }">
			<view class="mim-font-16 bold mim-flex-wrap-space-between">
				<view class="mim-font-16 bold mim-flex-wrap-left">
					<text class="mim-font-16 bold">协作部门</text>
					<text class="mim-font-16 bold mimRed">*</text>
				</view>
				<view class="mim-flex-wrap-right">
					<text class="mim-button mim-font-14" @click="addDepartment">添加</text>
					<text v-if="index > 0" class="mim-button mim-button-del mim-font-14" style="margin-left: 24rpx;"
						@click="deleteDepartment(index)">删除</text>
				</view>
			</view>
			<view v-if="index == 0" class="mim-font-14 mimRed marginTop">协作部门必须包含本部门</view>
			<view class="select">
				<u-input type="select" v-model="list[index].deal_department_name" placeholder='请选择协作部门'
					placeholder-style="color: #BDBDBD;" height="96" cursor-spacing="12" :clearable='false'
					:custom-style="customStyle" @click="selectDepartment(index)" />
				<u-image src='@/static/icon/jt.png' class="select_img" width="64rpx" height="64rpx"></u-image>
				<u-select v-if="selectVisible[index]" v-model="show" :list="select_list" @confirm="confirmSelect"
					:default-value='defaultValue[index]'></u-select>
			</view>
			<view class="marginTop">
				<view class="mim-font-16 bold mim-flex-wrap-left">
					<text class="mim-font-16 bold">处理期限（天）</text>
					<text class="mim-font-16 bold mimRed">*</text>
				</view>
				<u-input type="number" v-model="list[index].limit_day" placeholder='请填写处理期限'
					placeholder-style="color: #BDBDBD;" height="96" cursor-spacing="12" :clearable='false'
					:custom-style="customStyle" @input="validateInput(index)" />
			</view>
			<view class="marginTop">
				<view class="mim-font-16 bold mim-flex-wrap-left">
					<text class="mim-font-16 bold">协助内容</text>
					<text class="mim-font-16 bold mimRed">*</text>
				</view>
				<u-input type="textarea" v-model="list[index].body" placeholder='请填写协助内容'
					placeholder-style="color: #BDBDBD;" height="160" :auto-height='true' :clearable='false'
					:custom-style="customTestStyle" maxlength="-1" cursor-spacing="12" />
			</view>
			<view class="marginTop" v-if="type == 2">
				<view class="mim-font-16 bold mim-flex-wrap-left">
					<text class="mim-font-16 bold">处理要求</text>
					<text class="mim-font-16 bold mimRed">*</text>
				</view>
				<u-input type="textarea" v-model="list[index].claim" placeholder='请填写处理要求'
					placeholder-style="color: #BDBDBD;" height="160" :auto-height='true' :clearable='false'
					:custom-style="customTestStyle" maxlength="-1" cursor-spacing="12" />
			</view>
		</view>

		<view class="mim-view-list"></view>
		<view class="mim-view-last"></view>
		<view class="mim-foot">
			<view class="mim-foot-button mim-flex-wrap" @click="save">
				{{saveTitle}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				customStyle: {
					marginTop: '24rpx',
					fontSize: '32rpx',
					paddingLeft: '24rpx',
					background: '#f7f7f7',
					borderRadius: '8rpx'
				},
				customTestStyle: {
					"box-sizing": 'border-box',
					marginTop: '24rpx',
					fontSize: '32rpx',
					padding: '32rpx 24rpx',
					background: '#f7f7f7',
					borderRadius: '8rpx',
				},
				form: {
					id: '',
					reason: '',
					multiData: []
				},
				list: [{
					deal_department_name: '', //部门名称
					department_id: '', //部门id
					limit_day: '', //限期
					body: '', //处理详情
					claim: '' //处理要求
				}],
				show: false,
				selectVisible: [], // 存储每个 u-select 的显示状态
				select_list: [],
				index: 0,
				type: '1', // 1 申请协助 2 审核协助
				title: '申请协助',
				saveTitle: '确定',
				defaultValue: [
					[0]
				]
			};
		},
		onLoad(e) {
			this.form.id = e.id
			this.type = e.type
			this.getdepartmentFn()
			if (this.type == '1') {
				this.title = '申请协助'
				this.saveTitle = '确定'
			} else {
				this.title = '审核协助'
				this.saveTitle = '确定审核'
				this.commandDetailsFn()
			}
		},
		methods: {
			//添加部门
			addDepartment() {
				this.list.push({
					deal_department_name: '',
					department_id: '',
					limit_day: '',
					body: '',
					claim: ''
				})
				this.$u.toast('添加成功！')
			},
			//删除部门
			deleteDepartment(index) {
				this.list = this.list.filter((_, index1) => {
					return index1 !== index
				})
				this.$u.toast('删除成功！')
			},
			//获取部门列表
			async getdepartmentFn() {
				const res = await this.$u.api.getdepartment({
					status: 1,
				})
				const newArray = res.data.map(item => ({
					value: item.id,
					label: item.name
				}))
				this.select_list = newArray
			},
			//获取详情
			async commandDetailsFn() {
				const res = await this.$u.api.commandDetails({
					id: this.form.id
				})
				const multiData = res.data.extra.multiData
				// this.list = res.data.extra.multiData
				multiData.forEach(item => {
					const matchingObject = this.select_list.find(obj => obj.value == parseInt(item
						.department_id));
					if (matchingObject) {
						item.deal_department_name = matchingObject.label;
					} else {
						item.deal_department_name = '';
					}
				});
				this.list = multiData
				let index = multiData.map(item => {
					let matchingIndex = this.select_list.findIndex(obj => obj.value == parseInt(item
						.department_id));
					return matchingIndex
				});
				this.defaultValue = index.map(item => [item]);
				if (res.data.extra.reason) {
					this.form.reason = res.data.extra.reason
				}
			},
			//确保用户输入非0正整数
			validateInput(index) {
				const value = this.list[index].limit_day;
				const regex = /^[1-9]\d*$/; // 非零正整数的正则表达式
				if (!regex.test(value)) {
					// 如果输入不符合要求，可以根据需要进行处理，比如清空输入或者修改输入值
					// this.list[index].limit_day = ''; // 清空输入
					// 或者将输入修改为符合要求的值
					this.list[index].limit_day = Math.max(parseInt(value), 1);
				}
			},
			//选择部门
			selectDepartment(index) {
				this.selectVisible = this.select_list.map((_, i) => i === index);
				this.show = true
				this.index = index
			},
			//确定选择 
			confirmSelect(e) {
				this.list[Number(this.index)].department_id = e[0].value
				this.list[Number(this.index)].deal_department_name = e[0].label
				this.show = false
			},
			//确定
			save() {
				if (!this.form.reason) {
					this.$u.toast('请填写申请理由！')
					return false
				}
				let arr = []
				arr = this.list.filter((item) => {
					if (this.type == "2") {
						return !item.department_id || !item.body || !item.limit_day || !item.claim
					} else {
						return !item.department_id || !item.body || !item.limit_day
					}
				})
				if (arr.length > 0) {
					this.$u.toast('请将协作部门信息填写完整！')
					return false
				}

				this.form.multiData = this.list
				console.log(this.form)
				if (this.type == 1) {
					this.doHelpFn()
				} else {
					this.doAuditFn()
				}

			},
			//申请协助
			async doHelpFn() {
				const res = await this.$u.api.doHelp(this.form)
				if (res.status === "success") {
					this.$u.toast(res.message)
					setTimeout(() => {
						this.$u.route({
							type: 'navigateBack',
							url: '/pages/throughTrain/throughTrainDetails'
						});
					}, 1500)
				}
			},
			//立即审核
			async doAuditFn() {
				const res = await this.$u.api.doAudit(this.form)
				if (res.status === "success") {
					this.$u.toast(res.message)
					setTimeout(() => {
						this.$u.route({
							type: 'navigateBack',
							url: '/pages/throughTrain/throughTrainDetails'
						});
					}, 1500)
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;

		.container {
			.mim-view {
				margin: 0;
				border-radius: 0;

				u-input {
					/deep/ .u-input__right-icon {
						display: none !important;
					}
				}

				.marginTop {
					margin-top: 24rpx;
				}

				.mim-button {
					background: rgba(20, 195, 195, 0.15);
					border: 2rpx solid #14C3C3;
					height: 56rpx;
					width: 120rpx;
					color: #14C3C3;
				}

				.mim-button-del {
					height: 56rpx;
					width: 120rpx;
					color: #DE2E27;
					background: rgba(222, 46, 39, 0.15);
					border: 2rpx solid #DE2E27;
				}

				.select {
					position: relative;

					.select_img {
						position: absolute;
						right: 0;
						top: 38rpx;
					}
				}
			}

			.margin24 {
				margin-top: 24rpx;
			}

			.mim-view-last {
				padding: 56rpx;
				background: transparent;
			}

			.mim-foot {
				width: 100%;
				height: 136rpx;
				position: fixed;
				bottom: 0;
				left: 0;
				background-color: #ffffff;
				padding: 20rpx 24rpx;
				box-sizing: border-box;
				z-index: 9;

				&-button {
					border-radius: 48rpx;
					opacity: 1;
					background: #DE2E27;
					font-size: 32rpx;
					font-weight: normal;
					line-height: 32rpx;
					letter-spacing: 0px;
					color: #FFFFFF;
					height: 96rpx;
					cursor: pointer;
				}
			}
		}

	}
</style>