byte-sailing-mobile/src/views/production/technology/add.vue

<template>
	<div class="form">
		<van-nav-bar
			title="工序管理"
			left-text="返回"
			left-arrow
			@click-left="onClickLeft"
		>
		</van-nav-bar>

		<testForm
			v-model="formData.data"
			:formOption="formOption"
			:formConfig="formConfig"
			:rules="rules"
			@onSubmit="onSubmit"
			ref="formDom"
		>
			<template #processRouteList>
				<div class="row">
					<div class="col" style="width: 50%">
						<van-checkbox-group
							v-model="formData.data.processRouteList"
						>
							<van-checkbox
								:name="i.id"
								v-for="i in processRouteListData"
								:key="i.id"
								>{{ i.name }}</van-checkbox
							>
						</van-checkbox-group>
					</div>
					<div class="col" style="width: 50%">
						<div v-for="(i, index) in formData.data.processRouteList" draggable="true">
							<van-icon name="arrow-up" @click="sortUp(i)" />
							<van-icon name="arrow-down" @click="sortdown(i)" />
							<span style="margin-right: 10px">{{
								index + 1
							}}</span>
							{{ getName2(i) }}
						</div>
					</div>
				</div>
			</template>
			<template #applicableProductsList>
				<div
					style="color: #999; width: calc(100vw - 32px)"
					@click="show = true"
				>
					请选择
				</div>
				<div class="selectd" @click="show = true">
					<div>
						<van-tag
							v-for="i in formData.data.applicableProductsList"
							:key="i"
							closeable
							size="medium"
							type="primary"
							@close="deleteTag(i.id)"
							style="margin-right: 10px"
						>
							{{ getName(i) }}
						</van-tag>
					</div>
				</div>
			</template>
		</testForm>
		<van-popup
			v-model:show="show"
			closeable
			position="bottom"
			:style="{ height: '60%' }"
		>
			<div style="height: 50px; width: 100px"></div>
			<van-checkbox-group v-model="formData.data.applicableProductsList">
				<van-cell-group inset v-for="i in productInfoData" :key="i.id">
					<van-cell clickable :title="i.name">
						<template #right-icon>
							<van-checkbox :name="i.id"></van-checkbox>
						</template>
					</van-cell>
				</van-cell-group>
			</van-checkbox-group>
		</van-popup>
	</div>
</template>

<script setup>
import { ref, getCurrentInstance, onMounted, reactive } from 'vue'
import { showSuccessToast, showToast } from 'vant'
import { useRoute } from 'vue-router'
import { getUserInfo } from '@/utils/auth'
import testForm from '@/components/testForm/index.vue'

const proxy = getCurrentInstance().proxy
const route = useRoute()
const show = ref(false)
const typeModal = ref(false)
const unitModal = ref(false)
const classification = ref([])
const formData = reactive({
	data: {
		checked: [],
	},
})
const formDom = ref(null)
const formOption = reactive({
	readonly: false, //用于控制整个表单是否只读
	disabled: false,
	labelAlign: 'top',
	scroll: true,
	labelWidth: '62pk',
	// hiddenSubmitBtn: true,
})
let selected = ref([])

const sortUp = (id) => {
	let index = formData.data.processRouteList.findIndex((i) => i === id)
	if (index === 0) {
		return
	}
	let temp = formData.data.processRouteList[index]
	formData.data.processRouteList[index] = formData.data.processRouteList[index - 1]
	formData.data.processRouteList[index - 1] = temp
}

const sortdown = (id) => {
	let index = formData.data.processRouteList.findIndex((i) => i === id)
	if (index === formData.data.processRouteList.length - 1) {
		return
	}
	let temp = formData.data.processRouteList[index]
	formData.data.processRouteList[index] = formData.data.processRouteList[index + 1]
	formData.data.processRouteList[index + 1] = temp
}



const deleteTag = (id) => {
	let index = formData.data.applicableProductsList.findIndex((i) => i.id === id)
	formData.data.applicableProductsList.splice(index, 1)
}

const getName = (id) => {
	let name = ''
	productInfoData.value.forEach((i) => {
		if (i.id === id) {
			name = i.name
		}
	})
	return name
}

const getName2 = (id) => {
	let name = ''
	processRouteListData.value.forEach((i) => {
		if (i.id === id) {
			name = i.name
		}
	})
	return name
}

const formConfig = reactive([
	{
		type: 'input',
		itemType: 'text',
		label: '车间名称',
		prop: 'name',
		clearable: true,
	},
	{
		type: 'slot',
		label: '工艺线路',
		slotName: 'processRouteList',
	},
	{
		type: 'slot',
		label: '适用产品',
		slotName: 'applicableProductsList',
	},
])
const rules = {
	name: [{ required: true, message: '车间类型不能为空' }],
	fileList: [{ required: true, message: '请上传工序文件' }],
}
const unitList = ref([])
let processRouteListData = ref([])
const getUserList = () => {
	proxy.get('/system/user/list?pageNum=1&pageSize=10000', {}).then((res) => {
		formConfig[2].data = res.rows
	})
}
getUserList()
const fileList = ref([])
const onOversize = () => {
	showToast('文件大小不能超过 5MB')
}
const onClickLeft = () => history.back()
const onSubmit = () => {
	console.log(formData)
	formData.data.productList = formData.data.applicableProductsList.map(item=>{
		return {
			productId:item
		}
	})
	proxy
		.post('/technology/' + route.query.type, formData.data)
		.then(() => {
			showSuccessToast(
				route.query.type === 'add' ? '添加成功' : '修改成功'
			)
			setTimeout(() => {
				history.back()
			}, 500)
		})
}
const treeToList = (arr) => {
	let res = [] // 用于存储递归结果（扁平数据）
	// 递归函数
	let fn = (source) => {
		source.forEach((el) => {
			res.push(el)
			el.children && el.children.length > 0 ? fn(el.children) : '' // 子级递归
		})
	}
	fn(arr)
	return res
}
const getDtl = (id) => {
	proxy
		.post('/productionProcesses/page', { id: route.query.id })
		.then((resDetail) => {
			processRouteListData.value = resDetail.data.rows
			console.log(processRouteListData.value)
		})
	proxy
		.post('/productInfo/page', { pageNum: 1, pageSize: 10000 })
		.then((resDetail) => {
			productInfoData.value = resDetail.data.rows
		})
}
let productInfoData = ref([])
onMounted(() => {
	if (route.query.id) {
		proxy
			.post('/technology/detail', { id: route.query.id })
			.then((resDetail) => {
				formData.data = {
					...resDetail.data,
					processRouteList: resDetail.data.processRouteList.map(
						(item) => item.id
					),
					applicableProductsList: resDetail.data.applicableProductsList.map(
						(item) => item.id
					),

				}
				getDtl()
			})
	}else{
		getDtl()
	}
	
})
</script>
<style scoped lang="scss">
.row {
	overflow: hidden;
	width: calc(100vw - 32px);
	.col {
		width: 50%;
		float: left;
		box-sizing: border-box;
		padding: 0 10px;
		overflow: hidden;
		.van-icon-arrow-down,
		.van-icon-arrow-up {
			display: inline-block;
			height: 18px;
			margin: 1px 3px;
			line-height: 18px;
			background: #1989fa;
			width: 18px;
			color: #fff;
			border-radius: 9px;
			text-align: center;
		}
	}
}
</style>