feat: update 工序完工、报工、质检、工单完工、操作按钮展示与隐藏

src/api/mes/workScheduling/index.ts

@@ -121,10 +121,24 @@ export function getNodePosition(params) {
     return http.get('/mes/workScheduling/getNodePosition', {params})
 }
 // 完工查询人员
-export function getCurrentWorkerList(params) {
+export function getWorkerList(params) {
     return http.get('/mes/workScheduling/getCurrentWorkerList', {params})
 }
 
 export function getRequestMainDetail(params) {
     return http.get('/mes/item-request-detail/page', {params})
 }
+
+//工序报工
+export function reportByProcess(data) {
+    return http.post('/mes/work-scheduling-detail/reportWorkByProcess', data)
+}
+//工序完工
+export function finishedByProcess(data) {
+    return http.post('/mes/work-scheduling-detail/processFinished', data)
+}
+//工序质检
+export function qualityByProcess(data) {
+    return http.post('/mes/work-scheduling-detail/processQualified', data)
+}
+

src/pages.json

@@ -2079,6 +2079,20 @@
 				"navigationBarTitleText": "配料详情",
 				"enablePullDownRefresh": true
 			}
+		},
+		{
+			"path": "pages/mes/workScheduling/waitQuality",
+			"style": {
+				"navigationBarTitleText": "待质检",
+				"enablePullDownRefresh": true
+			}
+		},
+		{
+			"path": "pages/mes/workScheduling/waitReport",
+			"style": {
+				"navigationBarTitleText": "待报工",
+				"enablePullDownRefresh": true
+			}
 		}
 		
 

src/pages/mes/productBackline/createProductBackline.vue

@@ -48,7 +48,8 @@
 			<view>
 				<u-form-item label="加工人员" prop="operCode">
 					<view>
-						<u-input v-model="form.operCode" />
+						<!-- <u-input v-model="form.operCode" /> -->
+						<u-input v-model="form.operCode" type="select" @click="showWorker = true"  placeholder="请选择人员"/>
 					</view>
 				</u-form-item>
 			</view>
@@ -62,10 +63,15 @@
 		<view style="height: constant(safe-area-inset-bottom); height: env(safe-area-inset-bottom);"></view>
 	</view>
 		<u-select v-model="showBackProduct" :list="backProductList" @confirm="selectProduct"></u-select>
+		<u-popup v-model="showWorker" mode="bottom" border-radius="14" length="30%">
+			<view>
+				<u-select v-model="showWorker" mode="mutil-column-auto"  :list="workerList" @confirm="confirmSelectWorker"></u-select>
+			</view>
+		</u-popup>
 </template>
 
 <script setup lang="ts">
-	import requestButton from '@/mycomponents/button/requestButton.vue'
+	// import requestButton from '@/mycomponents/button/requestButton.vue'
 	/*初始化*/
 	import {
 		onLoad,
@@ -97,6 +103,8 @@
 		operCode:'',
 		name:'',
 	})
+	const showWorker = ref(false)
+	const workerList = ref([])
 	/*分页参数*/
 	const params = ref({
 		pageNo: 1,
@@ -152,6 +160,12 @@
 			proxy.$modal.closeLoading()
 		})
 	}
+	function confirmSelectWorker(val){
+		console.log(val)
+		form.value.operCode = val[1].value
+		// 提交数据，暂时先注释
+		// handleBackline()
+	}
 	// 数据转换
 	function transList(data) {
 	    const backProductList = data.map(item => {
@@ -171,6 +185,18 @@
 		form.value.processCode = productItem.value.processCode
 		form.value.stationCode = productItem.value.stationCode
 	}
+	
+	function getPageChildren(){
+		productOfflineApi.getPageChildren(params.value).then((res) => {
+			console.log(res)
+			if (res.data) {
+				console.log(res.data)
+				workerList.value = res.data
+			} else {
+			}
+		}).catch(() => {
+		})
+	}
 
 	/*通用方法*/
 	onLoad((option) => {
@@ -188,6 +214,7 @@
 	
 	onShow(() => {
 		getproductOfflinePage()
+		getPageChildren()
 	})
 	onReachBottom(() => {
 	})

src/pages/mes/productOffline/createProductOffline.vue

@@ -185,7 +185,7 @@
 			form.value.planCode = paramData.value.planMasterCode
 			form.value.processCode = paramData.value.workingNode
 			form.value.stationCode = paramData.value.currentWorkstation
-			form.value.productCode = paramData.value.currentWorkstation
+			form.value.productCode = paramData.value.productCode
 		}
 	})
 	

src/pages/mes/productOffline/index.vue

@@ -15,7 +15,7 @@
 					</view>
 				</view>
 				<view class="dec">
-					<view>登记状态：</view>
+					<view>当前状态：</view>
 					<view>
 						<u-tag text="待处理"  type="warning" mode="light" shape="circle" v-if="item.status==1" :style="{ width: '62px' }" />
 						<u-tag text="已处理" type="success" mode="light" shape="circle" v-if="item.status==2" :style="{ width: '62px' }" />
@@ -135,7 +135,13 @@
 		backlineItem.value.processCode = index.processCode
 		backlineItem.value.stationCode = index.stationCode
 		backlineItem.value.productCode = index.productCode
-		showWorker.value = true
+		// showWorker.value = true
+		const objString = JSON.stringify(index);
+		proxy.$tab.navigateTo(`/pages/mes/productBackline/createProductBackline?obj=${encodeURIComponent(objString)}`)
+		proxy.$modal.loading('加载中')
+		setTimeout(function() {
+		    proxy.$modal.closeLoading();
+		}, 500);
 	}
 	// 切换tabs事件
 	function tabsChange(curr){

src/pages/mes/workScheduling/inspectionItems.vue

@@ -56,7 +56,7 @@
 		<u-button type="primary" size="default" style="background-color: #5599FF" @click="submit(number)">提交</u-button>
 	</view>
 	
-	<view class="dec-item">
+<!-- 	<view class="dec-item">
 	  <view>质检模板号：{{ quaifyFormNo}}</view>
 	</view>
 	<view class="dec-item">
@@ -70,7 +70,7 @@
 	</view>
 	<view class="dec-item">
 	  <view>质检模板号：{{ equipmentRadioValue}}</view>
-	</view>
+	</view> -->
 	<view>
 			<u-popup v-model="show" mode="bottom" width="500rpx" height="200px" border-radius="20" mask-close-able="false">
 				<view><u-input v-model="reasons" placeholder="请输入未通过原因" /></view>

src/pages/mes/workScheduling/waitQuality.vue

@@ -0,0 +1,334 @@
+<template>
+	<!-- 详情 -->
+	<view class="detail-container">
+		<view class="info">
+			<view class="title">
+				<view>当前工序：{{saveData.processCode}}</view>
+			</view>
+			<!-- 主数据 -->
+			<view class="dec">
+				<view class="dec-item">
+					<view>生产人员：</view>
+					<view><u-input v-model="saveData.personSelectedItem" type="select" @click="showWorker = true"  placeholder="请选择生产人员"/></view>
+				</view>
+				<view class="dec-item">
+					<view>质检人员：</view>
+					<view><u-input v-model="saveData.checkPerson" type="text"  placeholder="请输入质检人员"/></view>
+				</view>
+				<view class="dec-item">
+					<view>合格数量：</view>
+					<view><u-input  v-model="saveData.qualified" type="number" placeholder="请输入合格数量" /></view>
+				</view>
+				<view class="dec-item">
+					<view>不合格数量：</view>
+					<view><u-input v-model="saveData.unqualified" type="number" placeholder="请输入不合格数量" /></view>
+				</view>
+				<view class="dec-item">
+					<view>不合格原因：</view>
+					<view><u-input v-model="saveData.remark" type="text" placeholder="请输入原因" /></view>
+				</view>
+			</view>
+		</view>
+		<view class="footer">
+			<view class="btns">
+				<button class="sure" @click="handleSubmit" :loading='loading' :disabled='loading'>提交处理</button>
+			</view>
+			<view style="height: constant(safe-area-inset-bottom); height: env(safe-area-inset-bottom);"></view>
+		</view>
+		<view style="height: constant(safe-area-inset-bottom); height: env(safe-area-inset-bottom);"></view>
+	</view>
+	<u-popup v-model="showWorker" mode="bottom" border-radius="14" length="30%">
+			<view>
+				<u-select v-model="showWorker" mode="mutil-column-auto"  :list="workerList" @confirm="confirmSelectWorker"></u-select>
+			</view>
+		</u-popup>
+	<u-popup v-model="showType" mode="bottom" border-radius="14" length="30%">
+			<view>
+				<u-select v-model="showType" :list="typeList" @confirm="confirmSelectType"></u-select>
+			</view>
+		</u-popup>
+</template>
+
+<script setup lang="ts">
+	import {
+		onLoad,
+		onShow
+	} from '@dcloudio/uni-app'
+	import {
+		ref,
+		getCurrentInstance
+	} from 'vue'
+	import * as workSchedulingListApi from '@/api/mes/workScheduling/index.ts'
+	const { proxy } = getCurrentInstance()
+	const paramData = ref()
+	const showWorker = ref(false)
+	const showType = ref(false)
+	const workerList = ref([])
+	const typeList = ref([{label:'是',value: '1'},{label:'否',value: '2'}])
+	const nodeInfo = ref({
+		planDayCode:'PO20240430-0011',
+		processCode:'QD_CY_01'
+	})
+	const saveData = ref({
+		id:'0',
+		planDayCode:'',
+		processCode:'',
+		qualified:'',
+		unqualified:'',
+		personSelected:[],
+		personSelectedItem:'',
+		remark:"",
+		checkPerson:""
+	})
+	
+	//提交接口
+	function submitData(){
+		proxy.$modal.loading('加载中')
+		console.log(saveData.value)
+		workSchedulingListApi.qualityByProcess(saveData.value).then((res) => {
+			proxy.$modal.closeLoading()
+			if (res.data) {
+				proxy.$modal.showToast('成功')
+				setTimeout(() => {
+					proxy.$tab.navigateBack()
+				}, 1000)
+			} else {
+				proxy.$modal.showToast('失败')
+			}
+		}).catch(() => {
+			proxy.$modal.closeLoading()
+		})
+	}
+	
+	// 选择人员回调函数
+	function confirmSelectWorker(val){
+		if(!saveData.value.personSelected.includes(val[0].value)){
+			saveData.value.personSelected.push(val[0].value) 
+			if(saveData.value.personSelectedItem == ''){
+				saveData.value.personSelectedItem = val[0].label
+			}
+			else{
+				saveData.value.personSelectedItem = saveData.value.personSelectedItem  + ',' + val[0].label
+			}
+		}
+		
+	}
+	
+	// 提交处理请求函数
+	function handleSubmit(){
+		proxy.$modal.confirm('确定提交处理吗').then(() => {
+			submitData()
+		})
+	}
+	onLoad((option) => {
+		if (option.obj) {
+		    paramData.value = JSON.parse(decodeURIComponent(option.obj)); // 将字符串转换为对象并存入paramData
+			nodeInfo.value.planDayCode = paramData.value.planNoDay
+			nodeInfo.value.processCode = paramData.value.nodeCode
+			saveData.value.processCode = paramData.value.nodeCode
+			saveData.value.planDayCode = paramData.value.planNoDay
+		}
+	})
+	onShow(() => {
+		getPageChildren()
+	})
+	// 获取选择人员函数
+	function getPageChildren(){
+		workSchedulingListApi.getWorkerList(nodeInfo.value).then((res) => {
+			if (res.data) {
+				workerList.value = transList(res.data)
+			} else {
+			}
+		}).catch(() => {
+		})
+	}
+	//数据转换
+	function transList(data) {
+		console.log(data)
+	    const list = data.map(item => {
+	        return {
+	            "label": item.workerName,
+	            "value": item.workerCode
+	        };
+	    });
+	    return list;
+	}
+	
+</script>
+
+<style lang="scss" scoped>
+	.detail-container {
+		min-height: 100vh;
+		background: white;
+	}
+
+	.line {
+		background: #f5f5f5;
+		height: 20rpx;
+	}
+
+	.info {
+		background: white;
+	}
+
+
+	.tab {
+		border-bottom: 1px solid #e4e4e4;
+
+	}
+
+	.title {
+		display: flex;
+		align-items: center;
+		padding: 20rpx 30rpx;
+		border-bottom: 1px solid #e4e4e4;
+
+		view {
+			&:nth-child(1) {
+				flex: 1;
+				border-left: 10rpx solid #409eff;
+				padding-left: 20rpx;
+				font-weight: bold;
+			}
+		}
+	}
+
+	.dec {
+		padding: 30rpx;
+
+		.dec-item {
+			padding-bottom: 30rpx;
+			display: flex;
+
+			view {
+				&:nth-child(1) {
+					width: 180rpx;
+				}
+
+				&:nth-child(2) {
+					color: #888888;
+					flex: 1;
+					width: 0px;
+					word-wrap: break-word;
+				}
+			}
+		}
+	}
+
+	.dec2 {
+		padding: 10rpx 30rpx;
+		display: flex;
+
+		view {
+			&:nth-child(1) {
+				width: 180rpx;
+			}
+
+			&:nth-child(2) {
+				color: #888888;
+				flex: 1;
+				width: 0px;
+				word-wrap: break-word;
+			}
+		}
+
+
+	}
+
+	.items {
+		border-radius: 12rpx;
+		background: #F5F5F5;
+		padding-bottom: 20rpx;
+
+		.items-name {
+			padding: 20rpx;
+			border-bottom: 1px solid #dedede;
+		}
+
+		.items-dec {
+			padding: 0px 20rpx;
+			margin-top: 20rpx;
+		}
+	}
+
+
+	.list {
+		padding: 20rpx;
+
+		.item {
+			display: flex;
+			margin-bottom: 20rpx;
+
+			.item-box {
+				border-radius: 12rpx;
+				border: 1px solid #dedede;
+				border-radius: 12rpx;
+
+				flex: 1;
+				width: 0rpx;
+			}
+
+			.spare-title {
+				padding: 20rpx 30rpx;
+				border-bottom: 1px solid #e4e4e4;
+				display: flex;
+
+				.title-txt {
+					color: #409eff;
+					font-size: 30rpx;
+					font-weight: bold;
+					flex: 1;
+				}
+			}
+
+			.dec {
+				color: #9c9c9c;
+				padding: 0rpx 30rpx 20rpx;
+			}
+
+		}
+	}
+
+	.add-btn {
+		display: flex;
+		justify-content: flex-start;
+		align-items: center;
+	}
+
+	.footer {
+		position: fixed;
+		bottom: 0px;
+		left: 0px;
+		width: 100%;
+		z-index: 22;
+	}
+
+	.btns {
+		display: flex;
+
+
+		button {
+			flex: 1;
+		}
+
+		.sure {
+			background: #409eff;
+			color: white;
+			border-radius: 0px;
+
+			&::after {
+				border: 1px solid #409eff;
+				border-radius: 0px;
+			}
+		}
+
+		.reset {
+			background: #ff7a45;
+			border-radius: 0px;
+
+			&::after {
+				border-radius: 0px;
+			}
+		}
+	}
+</style>

src/pages/mes/workScheduling/waitReport.vue

@@ -0,0 +1,384 @@
+<template>
+	<!-- 详情 -->
+	<view class="detail-container">
+		<view class="info">
+			<view class="title">
+				<view>当前工序：{{saveData.processCode}}</view>
+			</view>
+			<!-- 主数据 -->
+			<view class="dec">
+				<view class="dec-item">
+					<view>报工人员：</view>
+					<view><u-input v-model="formData.reportPersonName" type="select" @click="showWorker = true"  placeholder="请选择人员"/></view>
+				</view>
+				<view class="dec-item">
+					<view>报工数量：</view>
+					<view><u-input v-model="formData.reportCount" type="number" @update:modelValue="calculatePass()" placeholder="请输入数量" /></view>
+				</view>
+				<view class="dec-item">
+					<view>报工工时：</view>
+					<view><u-input v-model="formData.workTerm" type="number" placeholder="请输入工时" /></view>
+				</view>
+				<view class="dec-item">
+					<view>是否质检：</view>
+					<view>
+						<u-switch v-model="formData.checkFlag" style="width:47px" @change="changeStatus()"></u-switch>
+						</view>
+				</view>
+				<view class="dec-item">
+					<view>合格数量：</view>
+					<view><u-input :disabled="!formData.checkFlag" v-model="formData.qualified" type="number" placeholder="请输入合格数量"   @update:modelValue="calculatePass()"   /></view>
+				</view>
+				<view class="dec-item">
+					<view>不合格数量：</view>
+					<view><u-input v-model="formData.unqualified" type="number" disabled="true"/></view>
+				</view>
+			</view>
+		</view>
+		<view class="footer">
+			<view class="btns">
+				<button class="sure" @click="handleSubmit" :loading='loading' :disabled='loading'>提交处理</button>
+			</view>
+			<view style="height: constant(safe-area-inset-bottom); height: env(safe-area-inset-bottom);"></view>
+		</view>
+		<view style="height: constant(safe-area-inset-bottom); height: env(safe-area-inset-bottom);"></view>
+	</view>
+	<u-popup v-model="showWorker" mode="bottom" border-radius="14" length="30%">
+			<view>
+				<u-select v-model="showWorker" mode="mutil-column-auto"  :list="workerList" @confirm="confirmSelectWorker"></u-select>
+			</view>
+		</u-popup>
+	<u-popup v-model="showType" mode="bottom" border-radius="14" length="30%">
+			<view>
+				<u-select v-model="showType" :list="typeList" @confirm="confirmSelectType"></u-select>
+			</view>
+		</u-popup>
+</template>
+
+<script setup lang="ts">
+	import {
+		onLoad,
+		onShow
+	} from '@dcloudio/uni-app'
+	import {
+		ref,
+		getCurrentInstance
+	} from 'vue'
+	import * as workSchedulingListApi from '@/api/mes/workScheduling/index.ts'
+	const { proxy } = getCurrentInstance()
+	const paramData = ref()
+	const showWorker = ref(false)
+	const showType = ref(false)
+	const workerList = ref([])
+	const typeList = ref([{label:'是',value: '1'},{label:'否',value: '2'}])
+	const nodeInfo = ref({
+		planDayCode:'PO20240430-0011',
+		processCode:'QD_CY_01'
+	})
+	const reportPersonList = ref([])
+	const formData = ref({
+		checkFlag:false,
+		reportCount:'',
+		qualified:'',
+		unqualified:'',
+		reportPerson:'',
+		reportPersonName:'',
+		workTerm:''
+	})
+	const saveData = ref({
+		processCode:'',
+		reportDate:'',
+		schedulingCode:'',
+		list:[]
+	})
+	
+	function changeStatus(){
+		if(formData.value.checkFlag){
+		}
+		else
+		{
+			formData.value.qualified = ''
+			formData.value.unqualified = ''
+		}
+	}
+	function calculatePass(){
+		if(formData.value.checkFlag){
+			formData.value.unqualified = formData.value.reportCount - formData.value.qualified
+		}
+	}
+	
+	//提交接口
+	function submitData(){
+		handleData()
+		workSchedulingListApi.reportByProcess(saveData.value).then((res) => {
+			proxy.$modal.closeLoading()
+			if (res.code == 0) {
+				proxy.$modal.showToast('成功')
+				setTimeout(() => {
+					proxy.$tab.navigateBack()
+				}, 1500)
+			} else {
+				proxy.$modal.showToast('失败')
+			}
+		}).catch(() => {
+			proxy.$modal.closeLoading()
+		})
+	}
+	
+	function handleData(){
+		saveData.value.list = []
+		reportPersonList.value.forEach(person => {
+			const save = {
+				checkFlag:formData.value.checkFlag,
+				reportCount:formData.value.reportCount,
+				qualified:formData.value.qualified,
+				unqualified:formData.value.unqualified,
+				reportPerson:person.reportPerson,
+				workTerm:formData.value.workTerm
+			}
+			saveData.value.list.push(save)
+		});
+		// 获取当前日期和时间并格式化
+		const currentDate = new Date();
+		const formattedDate = currentDate.toISOString().split('T')[0]; // YYYY-MM-DD
+		const formattedTime = currentDate.toTimeString().split(' ')[0]; // HH:mm:ss
+		// 设置 reportDate 为当前日期和时间
+		saveData.value.reportDate = `${formattedDate} ${formattedTime}`;
+		console.log(saveData.value)
+	}
+	
+	
+	// 选择人员回调函数
+	function confirmSelectWorker(val){
+		const data = {
+			reportPerson:val[0].value
+		}
+		const exists = reportPersonList.value.some(person => person.reportPerson === data.reportPerson);
+		if (!exists){
+			reportPersonList.value.push(data);
+			if(formData.value.reportPersonName == ''){
+				formData.value.reportPersonName =  val[0].label
+			}else{
+				formData.value.reportPersonName = formData.value.reportPersonName + ","+ val[0].label
+			}
+		}
+	}
+	
+	// 提交处理请求函数
+	function handleSubmit(){
+		proxy.$modal.confirm('确定提交处理吗').then(() => {
+			submitData()
+		})
+	}
+	onLoad((option) => {
+		if (option.obj) {
+		    paramData.value = JSON.parse(decodeURIComponent(option.obj)); // 将字符串转换为对象并存入paramData
+			nodeInfo.value.planDayCode = paramData.value.planNoDay
+			nodeInfo.value.processCode = paramData.value.nodeCode
+			saveData.value.processCode = paramData.value.nodeCode
+			saveData.value.schedulingCode = paramData.value.schedulingCode
+		}
+	})
+	onShow(() => {
+		getPageChildren()
+	})
+	// 获取选择人员函数
+	function getPageChildren(){
+		workSchedulingListApi.getWorkerList(nodeInfo.value).then((res) => {
+			if (res.data) {
+				workerList.value = transList(res.data)
+			} else {
+			}
+		}).catch(() => {
+		})
+	}
+	//数据转换
+	function transList(data) {
+		console.log(data)
+	    const list = data.map(item => {
+	        return {
+	            "label": item.workerName,
+	            "value": item.workerCode
+	        };
+	    });
+	    return list;
+	}
+	
+</script>
+
+<style lang="scss" scoped>
+	.detail-container {
+		min-height: 100vh;
+		background: white;
+	}
+
+	.line {
+		background: #f5f5f5;
+		height: 20rpx;
+	}
+
+	.info {
+		background: white;
+	}
+
+
+	.tab {
+		border-bottom: 1px solid #e4e4e4;
+
+	}
+
+	.title {
+		display: flex;
+		align-items: center;
+		padding: 20rpx 30rpx;
+		border-bottom: 1px solid #e4e4e4;
+
+		view {
+			&:nth-child(1) {
+				flex: 1;
+				border-left: 10rpx solid #409eff;
+				padding-left: 20rpx;
+				font-weight: bold;
+			}
+		}
+	}
+
+	.dec {
+		padding: 30rpx;
+
+		.dec-item {
+			padding-bottom: 30rpx;
+			display: flex;
+
+			view {
+				&:nth-child(1) {
+					width: 180rpx;
+				}
+
+				&:nth-child(2) {
+					color: #888888;
+					flex: 1;
+					width: 0px;
+					word-wrap: break-word;
+				}
+			}
+		}
+	}
+
+	.dec2 {
+		padding: 10rpx 30rpx;
+		display: flex;
+
+		view {
+			&:nth-child(1) {
+				width: 180rpx;
+			}
+
+			&:nth-child(2) {
+				color: #888888;
+				flex: 1;
+				width: 0px;
+				word-wrap: break-word;
+			}
+		}
+
+
+	}
+
+	.items {
+		border-radius: 12rpx;
+		background: #F5F5F5;
+		padding-bottom: 20rpx;
+
+		.items-name {
+			padding: 20rpx;
+			border-bottom: 1px solid #dedede;
+		}
+
+		.items-dec {
+			padding: 0px 20rpx;
+			margin-top: 20rpx;
+		}
+	}
+
+
+	.list {
+		padding: 20rpx;
+
+		.item {
+			display: flex;
+			margin-bottom: 20rpx;
+
+			.item-box {
+				border-radius: 12rpx;
+				border: 1px solid #dedede;
+				border-radius: 12rpx;
+
+				flex: 1;
+				width: 0rpx;
+			}
+
+			.spare-title {
+				padding: 20rpx 30rpx;
+				border-bottom: 1px solid #e4e4e4;
+				display: flex;
+
+				.title-txt {
+					color: #409eff;
+					font-size: 30rpx;
+					font-weight: bold;
+					flex: 1;
+				}
+			}
+
+			.dec {
+				color: #9c9c9c;
+				padding: 0rpx 30rpx 20rpx;
+			}
+
+		}
+	}
+
+	.add-btn {
+		display: flex;
+		justify-content: flex-start;
+		align-items: center;
+	}
+
+	.footer {
+		position: fixed;
+		bottom: 0px;
+		left: 0px;
+		width: 100%;
+		z-index: 22;
+	}
+
+	.btns {
+		display: flex;
+
+
+		button {
+			flex: 1;
+		}
+
+		.sure {
+			background: #409eff;
+			color: white;
+			border-radius: 0px;
+
+			&::after {
+				border: 1px solid #409eff;
+				border-radius: 0px;
+			}
+		}
+
+		.reset {
+			background: #ff7a45;
+			border-radius: 0px;
+
+			&::after {
+				border-radius: 0px;
+			}
+		}
+	}
+</style>