web版流程组件

src/assets/css/index.scss

@@ -116,6 +116,8 @@ li {
     border-collapse: collapse;
     border-spacing: 0;
     overflow-x: auto;
+    padding: 0 12px;
+    box-sizing: border-box;
     table {
         width: 100%;
         border-collapse: collapse;
@@ -245,4 +247,11 @@ li {
     width: 100%;
     height: 50px;
     background: #fff;
+    border-radius: 8px;
 }
+
+.common-process-card{
+    margin: 16px 12px;
+    background: #fff;
+
+}

src/components/common-list.vue

@@ -20,7 +20,7 @@
 					style="line-height: 24px"
 					@click="listCk(i)"
 				>
-					<div v-for="j in config" :key="j.prop">
+					<div v-for="j in config" :key="j.prop">                                   
 						<span>{{ j.label }}：</span>{{ i[j.prop] }}
 					</div>
 				</div>

src/lang/cn.js

@@ -179,7 +179,7 @@ export const lang = {
 		
 	},
 	inventoryQuery:{
-		//库存查询,查看库位,物品分类,物品名称,库存数量,全部,产品,物料,库位，仓库名称，仓管员，物品分类，物品名称
+		//库存查询,查看库位,物品分类,物品名称,库存数量,全部,产品,物料,库位，仓库名称，仓管员，物品分类，物品名称，出入库流水
 		name:'库存查询',
 		viewLocation:'查看库位',
 		itemName:'物品名称',
@@ -191,6 +191,12 @@ export const lang = {
 		warehouseName:'仓库名称',
 		warehouseKeeper:'仓管员',
 		itemClassification:'物品分类',
+		itemName:'物品名称',
+		inOutWarehouseFlow:'出入库流水',
+		warehousing:'入库',
+		outbound:'出库',
+		operationType:'操作类型',
+		operationQuantity:'操作数量',
 
 	},
 	afterSales:{

src/views/main.vue

@@ -3,7 +3,7 @@
 		<router-view />
 		<div class="footer"></div>
 	</div>
-	<van-tabbar v-model="tabType">
+	<van-tabbar v-model="tabType" v-if="routerName != '/main/processDtl'">
 		<van-tabbar-item icon="home-o" to="/main/message">{{$t('common.message')}}</van-tabbar-item>
 		<van-tabbar-item icon="search" to="/main/working"
 			>{{$t('common.workbench')}}</van-tabbar-item
@@ -47,9 +47,14 @@ if (isDev) {
 	}
 }
 const corpId = window.localStorage.getItem('corpId')
+let routerName = ref(null)
 //监听路由变化
 const router = useRouter()
+//获取当前path
+routerName.value = router.currentRoute.value.path
 watch(router.currentRoute, (to, from) => {
+	routerName.value = to.path
+	console.log('routerName', routerName.value)
 	//滚动条回到顶部
 	document.documentElement.scrollTop = 0
 	if (!corpId) return

src/views/processApproval/components/SendSubscribe.vue

@@ -1,5 +1,370 @@
 <template>
-    <div>
-        12312312
-    </div>
-</template>
+	<div class="form">
+		<van-tabs v-model:active="active">
+			<van-tab title="申购信息">
+				<div class="common-process-card">
+					<div class="common-title">申购信息</div>
+					<van-form @submit="onSubmit" label-align="top" style="margin-top: 20px">
+						<van-cell-group inset>
+							<van-field
+								v-model="formData.deptName"
+								is-link
+								readonly
+								:label="$t('purchased.procurementDepartment')"
+								:placeholder="$t('purchased.selectProcurementDepartment')"
+								:rules="[{ required: true, message: $t('purchased.procurementDepartmentCanNotBeEmpty') }]"
+								@click="submitType === 'edit' ? typeModal = false : typeModal = true"
+								:readonly="submitType === 'edit'"
+								required
+							/>
+							<van-popup v-model:show="typeModal" round position="bottom">
+								<van-picker
+									:columns="columns"
+									@cancel="typeModal = false"
+									@confirm="onConfirm"
+								/>
+							</van-popup>
+							<van-field
+								v-model="formData.subcribeName"
+								type="text"
+								:name="$t('purchased.procurementPersonName')"
+								:label="$t('purchased.procurementPersonName')"
+								:placeholder="$t('purchased.pleaseFillInTheProcurementPersonName')"
+								:rules="[{ required: true, message: $t('purchased.procurementPersonNameCanNotBeEmpty') }]"
+								required
+								:readonly="submitType === 'edit'"
+							/>
+							<van-field
+								v-model="formData.subcribeTime"
+								is-link
+								readonly
+								name="datePicker"
+								:label="$t('purchased.procurementTime')"
+								:placeholder="$t('purchased.clickToSelectTime')"
+								:rules="[{ required: true, message: $t('purchased.procurementTimeCanNotBeEmpty') }]"
+								@click="submitType === 'edit' ? timePicker = false : timePicker = true"
+								required
+								:readonly="submitType === 'edit'"
+							/>
+							<van-popup v-model:show="timePicker" position="bottom">
+								<van-date-picker
+									@confirm="timeOnConfirm"
+									@cancel="timePicker = false"
+								/>
+							</van-popup>
+							<van-field
+								v-model="formData.subcribeContent"
+								type="textarea"
+								:name="$t('purchased.procurementDescription')"
+								:label="$t('purchased.procurementDescription')"
+								:placeholder="$t('purchased.pleaseFillInTheProcurementDescription')"
+								:rules="[{ required: true, message: $t('purchased.procurementDescriptionCanNotBeEmpty') }]"
+								required
+								:readonly="submitType === 'edit'"
+								rows="3"
+							/>
+						</van-cell-group>
+
+						
+					</van-form>
+				</div>
+			</van-tab>
+			<van-tab title="明细">
+				<div class="common-process-card">
+					<div class="common-title">明细</div>
+					<!-- 明细列表 -->
+					<div
+						v-for="(item, index) in formData.subscribeDetailList"
+						:key="index"
+					>
+						<div class="commons-delete">
+							<div class="title">{{$t('common.details')}}{{ index + 1 }}</div>
+							<div
+								class="delete"
+								@click.native="handleDel(index)"
+								v-if="!route.query.id"
+							>
+								<van-icon name="cross" />
+							</div>
+						</div>
+						<van-cell-group inset>
+							<van-field
+								v-model="formData.subscribeDetailList[index].bussinessName"
+								is-link
+								readonly
+								:label="$t('purchased.procurementProduct')"
+								:placeholder="$t('purchased.selectProcurementProduct')"
+								:readonly="submitType === 'edit'"
+								@click="handleSelect(index)"
+								:rules="[
+									{ required: true, message: $t('purchased.procurementProductCanNotBeEmpty') },
+								]"
+								required
+							/>
+							<van-field
+								v-model="formData.subscribeDetailList[index].count"
+								:label="$t('subscribe.quantity')"
+								:placeholder="$t('subscribe.pleaseEnterTheQuantity')"
+								:rules="[{ required: true, message: $t('subscribe.quantityCanNotBeEmpty') }]"
+								required
+								type="number"
+								:readonly="submitType === 'edit'"
+							/>
+
+							<van-field
+								v-model="formData.subscribeDetailList[index].content"
+								:label="$t('subscribe.cause')"
+								:placeholder="$t('subscribe.pleaseEnterTheCause')"
+								:rules="[
+									{ required: true, message: $t('subscribe.causeCanNotBeEmpty') },
+								]"
+								:readonly="submitType === 'edit'"
+								rows="3"
+								type="textarea"
+								required
+							/>
+						</van-cell-group>
+					</div>
+					<van-popup v-model:show="typeModalOne" round position="bottom">
+						<van-picker
+							:columns="columnsOne"
+							@cancel="typeModalOne = false"
+							@confirm="(data) => onConfirmOne(data)"
+						/>
+					</van-popup>
+					<div class="commons-add-btn"  v-if="!route.query.id">
+						<van-button
+						icon="plus"
+						type="default"
+						size="small"
+						style="margin-top: 10px"
+						block
+						@click="handleAddRow"
+						>{{$t('common.addDetails')}}</van-button
+						>
+					</div>
+					<div style="margin: 16px" v-if="!route.query.id">
+						<van-button round block type="primary" native-type="submit">
+							{{$t('common.submit')}}
+						</van-button>
+					</div>
+					<div class="common-mobile-table">
+						<table>
+							<thead>
+								<tr>
+									<th>物料编码</th>
+									<th>物料名称</th>
+									<th>规格型号</th>
+									<th>规格型号</th>
+									<th>规格型号</th>
+									<th>规格型号</th>
+									<th>规格型号</th>
+								</tr>
+							</thead>
+							<tbody>
+								<tr>
+									<td>1000000001</td>
+									<td>电脑</td>
+									<td>台</td>
+								</tr>
+								<tr>
+									<td>1000000002</td>
+									<td>显示器</td>
+									<td>台</td>
+								</tr>
+							</tbody>
+						</table>
+					</div>
+				</div>
+				
+			</van-tab>
+			<van-tab title="标签 3">内容 3</van-tab>
+			<van-tab title="标签 4">内容 4</van-tab>
+			<van-tab title="标签 4">内容 4</van-tab>
+			<van-tab title="标签 4">内容 4</van-tab>
+		</van-tabs>
+		
+	</div>
+</template>
+
+<script setup>
+import { ref, getCurrentInstance, onMounted,defineProps,defineExpose,watch } from 'vue'
+import { showSuccessToast, showFailToast } from 'vant'
+import { useRoute } from 'vue-router'
+// 接收父组件的传值
+const props = defineProps({
+  queryData: String,
+});
+
+const proxy = getCurrentInstance().proxy
+const route = useRoute()
+const typeModal = ref(false)
+const typeModalOne = ref(false)
+let selectIndex = ref(null)
+const timePicker = ref(false)
+const formData = ref({
+	productionTaskId: '',
+	code: '',
+	productName: '',
+	quantity: '',
+	personLiableName: '',
+	dueDate: '',
+	subscribeDetailList: [],
+})
+const handleAddRow = () => {
+	formData.value.subscribeDetailList.push({
+		bussinessId: '',
+		bussinessName: '',
+		name: '',
+		quantity: '',
+        content:"",
+        count:"",
+	})
+}
+watch(
+  props.queryData,
+  () => {
+    if (props.queryData && ["10", "20", "30"].includes(route.query.processType)) {
+      for (const key in props.queryData) {
+        formData.data[key] = props.queryData[key];
+      }
+    }
+  },
+  {
+    deep: true,
+  }
+);
+const timeOnConfirm = ({ selectedValues }) => {
+	formData.value.subcribeTime = selectedValues.join('-')
+	timePicker.value = false
+}
+
+const getDict = () => {
+	proxy
+		.get('/tenantDept/list', { pageNum: 1, pageSize: 9999 })
+		.then((res) => {
+			columns.value = res.data.map((item) => {
+				return {
+					...item,
+					text: item.deptName,
+					value: item.deptId,
+				}
+			})
+		})
+	setInterval(() => {
+		//停止循环
+		if (proxy.queryData) {
+			formData.value = proxy.queryData
+			clearInterval()
+		}
+	}, 1000)
+	proxy
+		.post('/productInfo/page', { pageNum: 1, pageSize: 9999 })
+		.then((res) => {
+			columnsOne.value = res.data.rows.map((item) => {
+				return {
+					...item,
+					text: item.name,
+					value: item.id,
+				}
+			})
+		})
+}
+
+const getDetails = (id) => {
+	proxy.post('/subscribe/detail', { id:id }).then((res) => {
+		res.data.subscribeDetailList.map((item) => {
+			columnsOne.value.map((itemOne) => {
+				if(itemOne.value === item.bussinessId) {
+					item.bussinessName = itemOne.name
+				}
+			})
+			
+		})
+		formData.value = res.data
+
+		
+		console.log(formData.value)
+	})
+}
+
+const columns = ref([])
+const columnsOne = ref([])
+const submitType = ref('add')
+
+const onConfirm = ({ selectedOptions }) => {
+	formData.value.deptName = selectedOptions[0].text
+	formData.value.productionTaskId = selectedOptions[0].value
+	formData.value.productName = selectedOptions[0].productName
+	formData.value.quantity = selectedOptions[0].quantity
+	formData.value.personLiableName = selectedOptions[0].personLiableName
+	formData.value.dueDate = selectedOptions[0].dueDate
+	typeModal.value = false
+}
+
+const onConfirmOne = ({ selectedOptions }) => {
+	formData.value.subscribeDetailList[selectIndex.value].bussinessId =
+		selectedOptions[0].value
+	formData.value.subscribeDetailList[selectIndex.value].bussinessName =
+		selectedOptions[0].text
+	typeModalOne.value = false
+}
+
+const handleSelect = (index) => {
+	if(submitType.value === 'edit') return
+	selectIndex.value = index
+	typeModalOne.value = true
+}
+
+const handleDel = (index) => {
+	formData.value.subscribeDetailList.splice(index, 1)
+}
+
+const onClickLeft = () => history.back()
+const handleSubmit = async () => {
+  return formData.value;
+};
+const onSubmit = () => {
+	if (!formData.value.subscribeDetailList.length > 0)
+		return showFailToast(proxy.t('common.pleaseAddDetails'))
+	proxy.post('/flowProcess/initiate', {
+		flowKey: 'subscribe_flow',
+		data:formData.value,
+		remark:null,
+	}).then(
+		(res) => {
+			setTimeout(() => {
+				showSuccessToast(proxy.t('common.procurementSuccess'))
+				proxy.$router.push('/main/subscribe')
+			}, 500)
+		},
+		(err) => {
+			return showFailToast(err.message)
+		}
+	)
+}
+defineExpose({
+  handleSubmit,
+});
+onMounted(() => {
+    
+	getDict()
+})
+</script>
+<style lang="scss" scoped>
+.row {
+	display: flex;
+	padding: 5px 15px;
+	justify-content: space-between;
+	align-items: center;
+	color: #999999;
+	.title {
+		flex: 1;
+	}
+	.delete {
+		width: 20px;
+		cursor: pointer;
+		text-align: center;
+	}
+}
+</style>

src/views/processApproval/index.vue

@@ -93,8 +93,8 @@ const toDtl = (row) => {
 		return
 	}
 	proxy.post('flowExample/getApprovalRecord', { id: row.id }).then((res) => {
-		if (res.recordList.length > 0) {
-			let data = res.recordList.filter((item) => item.status === 2)
+		if (res.data.recordList.length > 0) {
+			let data = res.data.recordList.filter((item) => item.status === 2)
 			let nodeType = 0
 			if (data && data.length > 0) {
 				nodeType = data[0].nodeType

src/views/processApproval/processDtl.vue

@@ -1,14 +1,16 @@
 <template>
 	<div class="process">
-		<van-nav-bar
-			title="流程审批"
-			left-text=""
-			left-arrow
-			@click-left="onClickLeft"
-		>
+		<van-nav-bar title="流程审批" left-text="" left-arrow @click-left="onClickLeft">
 		</van-nav-bar>
-        <component ref="makeDom" :is='componentObj[route.query.flowKey].component'></component>
-		<div class="card">
+		<div>
+			<component ref="makeDom" :queryData="queryData.data" :is="
+					componentObj[route.query.flowKey]
+						? componentObj[route.query.flowKey].component
+						: SendSubscribe
+				"></component>
+		</div>
+
+		<!-- <div class="card">
 			<div class="common-title border-btm">申购信息</div>
 			<div class="common-form-text">
 				<div class="common-form-text-item">
@@ -35,113 +37,63 @@
 					<div class="common-form-text-item-label">申购类型</div>
 					<div class="common-form-text-item-value">物料</div>
 				</div>
-				<div class="common-form-text-item textarea">
-					<div class="common-form-text-item-label">申购说明</div>
-					<van-field
-						v-model="message"
-						rows="3"
-						autosize
-						type="textarea"
-						maxlength="400"
-						placeholder="请输入申购说明"
-						show-word-limit
-					/>
-				</div>
+				
 			</div>
-		</div>
-		<div class="card">
-			<div class="common-title">申购明细</div>
-			<div class="common-mobile-table">
-				<table>
-					<thead>
-						<tr>
-							<th>物料编码</th>
-							<th>物料名称</th>
-							<th>规格型号</th>
-							<th>规格型号</th>
-							<th>规格型号</th>
-							<th>规格型号</th>
-							<th>规格型号</th>
-						</tr>
-					</thead>
-					<tbody>
-						<tr>
-							<td>1000000001</td>
-							<td>电脑</td>
-							<td>台</td>
-						</tr>
-						<tr>
-							<td>1000000002</td>
-							<td>显示器</td>
-							<td>台</td>
-						</tr>
-					</tbody>
-				</table>
+		</div> -->
+
+		<div class="btn-warp" :class="footerMoreType ? 'open-more' : ''">
+			<div class="more-btn" @click="footerMoreType = true">
+				更多 <van-icon name="arrow-up" />
+			</div>
+			<div class="foot-btn-warp">
+				<div class="agree-btn"  @click="handleSubmit(1)">同意</div>
+				<div class="next-btn" @click="nextFn">下一步</div>
 			</div>
-			<div class="more-btn">查看更多</div>
 		</div>
-		<div class="card">
-			<div class="common-title">审批流程</div>
-			<van-steps
-				direction="vertical"
-				:active="stepsNum"
-				class="common-steps"
-			>
-				<van-step v-for="(i, index) in recordList" :key="i.nodeId">
-					<div class="label">
-						<span class="name">{{ i.processedUser }}</span>
-						<span class="tip">{{ i.nodeName }}</span>
-						<span
-							class="state"
-							:class="
-								index == stepsNum
-									? 'cl-yl'
-									: index < stepsNum
+		<van-action-sheet v-model:show="footerMoreType" title="审批记录" class="more-modal">
+			<div class="card">
+				<van-steps direction="vertical" :active="stepsNum" class="common-steps">
+					<van-step v-for="(i, index) in recordList" :key="i.nodeId">
+						<div class="label">
+							<span class="name">{{ i.processedUser }}</span>
+							<span class="tip">{{ i.nodeName }}</span>
+							<span class="state" :class="index == stepsNum
+								? 'cl-yl'
+								: index < stepsNum
 									? 'cl-blue'
 									: ''
-							"
-						>
-							{{ i.nodeName }}
-						</span>
-					</div>
-					<div class="content">审批意见：{{ i.remark }}</div>
-					<p>{{ i.processedDate }}</p>
-				</van-step>
-			</van-steps>
-			<div class="common-form-text">
-				<div class="common-form-text-item textarea">
-					<van-field
-						v-model="message"
-						rows="3"
-						autosize
-						type="textarea"
-						maxlength="400"
-						placeholder="请输入审批意见"
-						show-word-limit
-					/>
-				</div>
-				<div class="btn-warp">
-					<van-button
-						type="primary"
-						v-if="approvalRecordData.buttonInfoList.length == 0"
-						>同意</van-button
-					>
-					<van-button
-						type="primary"
-						v-else
-						v-for="i in approvalRecordData.buttonInfoList"
-						:key="i.type"
-						>{{ i.name }}</van-button
-					>
+								">
+								{{ i.nodeName }}
+							</span>
+						</div>
+						<div class="content">审批意见：{{ i.remark }}</div>
+						<p>{{ i.processedDate }}</p>
+					</van-step>
+				</van-steps>
+			</div>
+			<div style="padding: 0 12px">
+				<van-field v-model="flowForm.remark" rows="3" autosize type="textarea" maxlength="400" placeholder="请输入审批意见"
+					show-word-limit style="backround: #f1f1f1" />
+			</div>
+			<div class="load-btn-box">
+				<van-button size="small" type="primary" plain round v-for="i in approvalRecordData.buttonInfoList"
+					:key="i.type" v-show="i.type != 1" @click="handleSubmit(i.type)">{{ i.name }}
+				</van-button>
+			</div>
+			<div class="content">
+				<div class="foot-btn-warp">
+					<div class="agree-btn" @click="handleSubmit(1)">同意</div>
+					<div class="next-btn" @click="nextFn">下一步</div>
 				</div>
 			</div>
-		</div>
+		</van-action-sheet>
 	</div>
 </template>
 <script setup>
 import { ref, getCurrentInstance, onMounted, reactive } from 'vue'
 import { useRoute } from 'vue-router'
 import SendSubscribe from './components/SendSubscribe'
+import { showSuccessToast, showFailToast } from 'vant'
 const route = useRoute()
 const proxy = getCurrentInstance().proxy
 const onClickLeft = () => proxy.$router.push('/main/working')
@@ -149,10 +101,12 @@ const message = ref('')
 const onClickRight = () => {
 	proxy.$router.push('/main/working')
 }
+const makeDom = ref(null)
 let stepsNum = ref(0)
 let queryData = reactive({
 	data: {},
 })
+let footerMoreType = ref(false)
 const flowForm = reactive({
 	flowKey: '',
 	tenantType: '',
@@ -165,8 +119,8 @@ const approvalRecordData = ref({
 	buttonInfoList: [],
 })
 
-const getAuxiliaryData = (data)=>{
-  auxiliaryData.value=data
+const getAuxiliaryData = (data) => {
+	auxiliaryData.value = data
 }
 
 let componentObj = ref({
@@ -177,21 +131,24 @@ let componentObj = ref({
 	},
 })
 
-let dialogVisible = ref(false);
+let dialogVisible = ref(false)
 //判断是否有下一节点处理人
 const handleResult = (res) => {
-  if (res !== null && res.success) {
-    skipPage();
-  } else {
-    dialogVisible.value = true;
-    nextHandleUser.value = res.userList;
-  }
-};
+	if (res !== null && res.success) {
+		skipPage()
+	} else {
+		dialogVisible.value = true
+		nextHandleUser.value = res.userList
+	}
+}
 const skipPage = () => {
-    router.replace({
-      path: route.query.processType === 10 ?  "/main/processApproval" : componentObj[route.query.flowKey].backUrl,
-    });
-};
+	router.replace({
+		path:
+			route.query.processType === 10
+				? '/main/processApproval'
+				: componentObj[route.query.flowKey].backUrl,
+	})
+}
 
 const handleSelectUser = () => {
 	if (!flowForm.handleUserId) {
@@ -203,44 +160,41 @@ const handleSelectUser = () => {
 	handleSubmit()
 }
 const handleSubmit = async (_type) => {
-	const flag = await makeDom.value.handleSubmit()
-	if (flag) {
-		flowFormDom.value.validate((valid) => {
-			if (
-				route.query.processType == 10 ||
-				route.query.processType == 30
-			) {
-				proxy
-					.post('/flowProcess/jump', {
-						...flowForm,
-						data,
-						handleType: _type,
-						version: route.query.version,
-						flowId: route.query.id,
-					})
-					.then((res) => {
-						handleResult(res)
-					})
-				if (_type && _type == 1) {
-					proxy
-						.post('/flowExample/setStartData', {
-							exampleId: route.query.id,
-							startDate: data,
-						})
-						.then()
-				}
-				return
-			} else {
+	console.log(makeDom)
+	const childrenData = await makeDom.value.handleSubmit()
+	console.log(childrenData, '子组件回来的数据')
+	if (childrenData) {
+		if (route.query.processType == 10 || route.query.processType == 30) {
+			proxy
+				.post('/flowProcess/jump', {
+					...flowForm,
+					childrenData,
+					handleType: _type,
+					version: route.query.version,
+					flowId: route.query.id,
+				})
+				.then((res) => {
+					handleResult(res)
+				})
+			if (_type && _type == 1) {
 				proxy
-					.post('/flowProcess/initiate', {
-						...flowForm,
-						data,
-					})
-					.then((res) => {
-						handleResult(res)
+					.post('/flowExample/setStartData', {
+						exampleId: route.query.id,
+						startDate: childrenData,
 					})
+					.then()
 			}
-		})
+			return
+		} else {
+			proxy
+				.post('/flowProcess/initiate', {
+					...flowForm,
+					childrenData,
+				})
+				.then((res) => {
+					handleResult(res)
+				})
+		}
 	}
 }
 
@@ -275,6 +229,9 @@ const getRecords = (_id) => {
 }
 onMounted(async () => {
 	//processType 10 为修改 20为查看 30回退发起 无为发起
+	if (!componentObj.value[route.query.flowKey]) {
+		return showSuccessToast('代码未配置此流程！')
+	}
 	if (
 		route.query.processType == 10 ||
 		route.query.processType == 20 ||
@@ -283,7 +240,7 @@ onMounted(async () => {
 		await proxy
 			.post('/flowProcess/getStartData', { flowId: route.query.id })
 			.then((res) => {
-				queryData.data = { ...res }
+				queryData.data = { ...res.data }
 			})
 	} else {
 		queryData.data = { ...route.query }
@@ -292,23 +249,99 @@ onMounted(async () => {
 	getRecords(route.query.id)
 })
 </script>
+<style>
+.van-step--vertical .van-step__circle-container {
+	top: 25px;
+}
+
+.van-step--vertical .van-step__line {
+	top: 23px;
+}
+</style>
 <style lang="scss">
 .process {
-	padding-bottom: 60px;
-	.btn-warp {
+	.more-modal {
+		.van-field {
+			border: none;
+			background: #f1f1f1;
+			border-radius: 5px;
+			padding: 5px 10px;
+		}
+	}
+
+	.load-btn-box {
+		height: 50px;
+		text-align: center;
+		padding: 9px;
+		box-sizing: border-box;
+	}
+
+	.foot-btn-warp {
+		height: 50px;
+		line-height: 50px;
+		text-align: center;
 		display: flex;
-		justify-content: space-between;
+		width: 100vw;
+		font-size: 16px;
+
+		.agree-btn {
+			flex: 1;
+			background: #eaf0ff;
+			color: #0084ff;
+		}
+
+		.next-btn {
+			flex: 1;
+			background: #0084ff;
+			color: #fff;
+		}
+	}
+
+	.btn-warp {
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		margin: 0;
+		z-index: 2;
 
-		margin: 20px 0 10px;
 		button {
 			width: 48%;
 		}
+
+		.content {
+			height: 0;
+			overflow: hidden;
+			transition: all 0.3s ease;
+			background: #fff;
+			padding: 0 12px;
+		}
+
+		.more-btn {
+			width: 100%;
+			background: #fff;
+			color: #999999;
+			font-size: 14px;
+			text-align: center;
+			height: 50px;
+			line-height: 50px;
+		}
 	}
+
+	.open-more {
+		.content {
+			height: 170px;
+		}
+	}
+
+	padding-bottom: 60px;
+
 	.card {
 		background: #fff;
 		padding: 0 12px;
 		margin-top: 10px;
 	}
+
 	.textarea {
 		.van-field {
 			border: none;
@@ -317,6 +350,7 @@ onMounted(async () => {
 			padding: 5px 10px;
 		}
 	}
+
 	.more-btn {
 		height: 60px;
 		line-height: 60px;

src/views/purchase-sales/inventory-management/outInList/index.vue

@@ -1,6 +1,6 @@
 <template>
   <van-nav-bar
-    :title="$t('inventoryQuery.inOutFlow')"
+    :title="$t('inventoryQuery.inOutWarehouseFlow')"
     left-text=""
     left-arrow
     @click-left="onClickLeft"