demo编写

src/assets/css/index.scss

@@ -1,22 +1,35 @@
 // css初始化
-html,body{
+html,
+body {
     margin: 0;
     padding: 0;
     font-size: 14px;
     width: 100vw;
     min-height: 100vh;
     background-color: #f2f2f2;
-} 
-ul,li{
+}
+
+ul,
+li {
     list-style: none;
     padding: 0;
     margin: 0;
 }
 
-#app {
-    
+.cl-blue{
+    color: #0084ff;
 }
 
+.cl-green{
+    color: #34C724;
+}
+
+.cl-red {
+    color: #FF655B;
+}
+
+#app {}
+
 .commons-title {
     height: 52px;
     line-height: 52px;
@@ -26,6 +39,7 @@ ul,li{
     position: relative;
     padding: 0 16px;
 }
+
 .commons-title::before {
     content: '';
     display: inline-block;
@@ -39,9 +53,111 @@ ul,li{
     border-radius: 2px 2px 2px 2px;
 }
 
-.van-toast{
-    background-color: rgba(0, 0, 0, .7)!important;
-    width:120px!important;
-    height: 120px!important;
-    box-sizing: border-box!important;
+.van-toast {
+    background-color: rgba(0, 0, 0, .7) !important;
+    width: 120px !important;
+    height: 120px !important;
+    box-sizing: border-box !important;
+}
+
+.common-title {
+    height: 52px;
+    line-height: 52px;
+    color: #333;
+    font-size: 16px;
+    font-weight: bold;
+    position: relative;
+    padding: 0 16px;
+}
+
+.common-title::before {
+    content: "";
+    display: inline-block;
+    width: 4px;
+    height: 12px;
+    background: #409eff;
+    position: absolute;
+    left: 0;
+    top: 20px;
+    background: #0084ff;
+    border-radius: 2px 2px 2px 2px;
+}
+
+.common-form-text {
+    line-height: 28px;
+    color: #999;
+    font-size: 14px;
+    border-bottom: 1px solid #e5e5e5;
+    padding: 10px 0;
+    margin-bottom: 6px;
+    .common-form-text-item{
+        
+    }
+    .common-form-text-item-value{
+        color: #333333;
+        font-size: 16px;
+        font-weight: 500;
+    }
+}
+
+.border-btm{
+    border-bottom: 1px solid #ddd;
+}
+
+
+.common-mobile-table{
+    width: 100%;
+    border-collapse: collapse;
+    border-spacing: 0;
+    
+    table{
+        width: 100%;
+        border-collapse: collapse;
+        border-spacing: 0;
+        text-align: center;
+        th{
+            background-color: #F1F1F1;
+            color: #666666;
+            padding: 15px 0;
+        }
+
+        td{
+            border-bottom: 1px solid #ddd;
+            padding: 15px 0;
+            color: #333333;
+        }
+    }
+}
+
+
+.common-steps{
+    .label{
+        height: 28px;
+        line-height: 28px;
+        font-size: 14px;
+        .name{
+            color: #333333;
+            font-weight: bold;
+        }
+        .tip{
+            color: #999999;
+            font-size: 12px;
+            margin-left: 8px;
+        }
+        .state{
+            float: right;
+            font-weight: 500;
+        }
+        
+    }
+    .content{
+        padding: 14px 12px;
+        background: #F1F1F1;
+        color: #666;
+        border-radius: 4px;
+    }
+    p{
+        font-size: 12px;
+        color: #999;
+    }
 }

src/router/index.js

@@ -34,7 +34,11 @@ const routes = [{
 				name: '经编机',
 				component: () => import('../views/equipment/warpKnitting.vue')
 			},
-
+			{
+				path: 'process',
+				name: '采购单',
+				component: () => import('../views/process/index.vue')
+			},
 			//仓库模块
 			{
 				path: 'warehouseConfig',

src/utils/axios.js

@@ -3,7 +3,7 @@ import axios from 'axios'
 import errorCode from '@/utils/errorCode'
 import { tansParams, blobValidate } from '@/utils/ruoyi'
 import cache from '@/utils/cache'
-import { showLoadingToast, closeToast } from 'vant';
+import { showLoadingToast, closeToast,showNotify  } from 'vant';
 import { getToken } from '@/utils/auth'
 // 是否显示重新登录
 export let isRelogin = { show: false };
@@ -84,6 +84,7 @@ service.interceptors.response.use(res => {
     }
     return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
   } else if (code === 500) {
+    showNotify({ type: 'danger', message: msg });
     //ElMessage({ message: msg, type: 'error' })
     return Promise.reject(new Error(msg))
   } else if (code === 601) {

src/views/process/index.vue

@@ -6,12 +6,199 @@
             left-arrow
             @click-left="onClickLeft"
         >
-
+            
         </van-nav-bar>
+        <div class="card">
+            <div class="common-title border-btm">
+                申购信息
+            </div>
+            <div class="common-form-text">
+                <div class="common-form-text-item">
+                    <div class="common-form-text-item-label">
+                        申购单号
+                    </div>
+                    <div class="common-form-text-item-value">
+                        PR-221101-170404-296
+                    </div>
+                </div>
+                <div class="common-form-text-item">
+                    <div class="common-form-text-item-label">
+                        申购时间
+                    </div>
+                    <div class="common-form-text-item-value">
+                        2022-11-01 17:04:04
+                    </div>
+                </div>
+                <div class="common-form-text-item">
+                    <div class="common-form-text-item-label">
+                        申购部门
+                    </div>
+                    <div class="common-form-text-item-value">
+                        仓库
+                    </div>
+                </div>
+                <div class="common-form-text-item">
+                    <div class="common-form-text-item-label">
+                        申购人
+                    </div>
+                    <div class="common-form-text-item-value">
+                        阮平芳
+                    </div>
+                </div>
+                <div class="common-form-text-item">
+                    <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>
+                        </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="more-btn">
+                查看更多
+            </div>
+        </div>
+        <div class="card">
+            <div class="common-title">
+                审批流程
+            </div>
+            <van-steps direction="vertical" :active="0" class="common-steps">
+                <van-step>
+                    <div class="label">
+                        <span class="name">阮平芳</span>
+                        <span class="tip">发起审批</span>
+                        <span class="state cl-blue">已发起</span>
+                    </div>
+                    <div class="content">
+                        审批意见：同意同意同意同意同意同意
+                    </div>
+                    <p>2016-07-10 09:30</p>
+                </van-step>
+                <van-step>
+                    <div class="label">
+                        <span class="name">阮平芳</span>
+                        <span class="tip">发起审批</span>
+                        <span class="state cl-red">已发起</span>
+                    </div>
+                    <div class="content">
+                        审批意见：同意同意同意同意同意同意
+                    </div>
+                    <p>2016-07-10 09:30</p>
+                </van-step>
+                <van-step>
+                    <div class="label">
+                        <span class="name">阮平芳</span>
+                        <span class="tip">发起审批</span>
+                        <span class="state">已发起</span>
+                    </div>
+                    <div class="content">
+                        审批意见：同意同意同意同意同意同意
+                    </div>
+                    <p>2016-07-10 09:30</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 plain hairline type="primary">驳回</van-button>
+                    <van-button type="primary">同意</van-button>
+                </div>
+            </div>
+        </div>
     </div>
 </template>
 <script setup>
 import { ref, getCurrentInstance, onMounted } from 'vue'
 const proxy = getCurrentInstance().proxy
 const onClickLeft = () => proxy.$router.push('/main/working')
+const message = ref('')
 </script>
+<style lang="scss">
+.process{
+    padding-bottom: 60px;
+    .btn-warp{
+        display: flex;
+        justify-content: space-between;
+        
+        margin: 20px 0 10px;
+        button{
+            width: 48%;
+        }
+    }
+    .card{
+        background: #fff;
+        padding: 0 12px;
+        margin-top: 10px;
+       
+    }
+    .textarea{
+        .van-field{
+            border: none;
+            background: #f1f1f1;
+            border-radius: 5px;
+            padding: 5px 10px;
+        }
+    }
+    .more-btn{
+        height: 60px;
+        line-height: 60px;
+        font-size: 14px;
+        color:#0084FF;
+        text-align: center;
+    }
+}
+</style>