Skip to content

W
weChatFlowApprove
Commit 0015db3b authored by chuan.liu's avatar chuan.liu
Browse files
Options

新增三个流程页面

parent 1d506804
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1105 additions and 6 deletions
src/assets/styles/reset.css
View file @ 0015db3b
......@@ -157,6 +157,10 @@ i{
display: inline-block;
}
span{
display: inline-block;
}
.border-bottom{
border-bottom: 1px solid #EAEAEA;
}
src/main.js
View file @ 0015db3b
......@@ -5,11 +5,34 @@ import router from './router'
import './assets/styles/reset.css'
import App from './App.vue'
import { Button, NavBar } from 'vant'
import {
Button,
NavBar,
Cell,
Step,
Steps,
Collapse,
CollapseItem,
Field,
CellGroup,
Picker,
Popup
} from 'vant'
const app = createApp(App)
app.use(store)
app.use(router)
app.use(Button).use(NavBar)
app
.use(Button)
.use(NavBar)
.use(Cell)
.use(Step)
.use(Steps)
.use(Collapse)
.use(CollapseItem)
.use(Field)
.use(CellGroup)
.use(Picker)
.use(Popup)
app.mount('#app')
src/router/index.js
View file @ 0015db3b
......@@ -10,6 +10,21 @@ export const globalRouter = [
path: '/month-flow',
name: 'MonthFlow',
component: () => import('@/views/month-flow/monthFlow.vue')
},
{
path: '/plan-change-flow',
name: 'PlanChangeFlow',
component: () => import('@/views/plan-change-flow/PlanChangeFlow.vue')
},
{
path: '/ship-approval',
name: 'ShipApproval',
component: () => import('@/views/ship-approval/ShipApproval.vue')
},
{
path: '/invoice-occupancy-detail',
name: 'InvoiceOccupancyDetail',
component: () => import('@/views/invoice-occupancy-detail/InvoiceOccupancyDetail.vue')
}
]
......
src/views/invoice-occupancy-detail/InvoiceOccupancyDetail.vue 0 → 100644
View file @ 0015db3b
<template>
<div class="lists">
<van-nav-bar class="status_bar" title="发票占用明细" left-arrow @click-left="onClickLeft" />
<div class="header-bg"><img class="header-bg-img" src="@/assets/images/nav_bg@3x.png" /></div>
<div class="main">
<div class="list-wrapper">
<div class="block">
<div class="top-block">
<van-cell title="开票客户" value="步步高有限公司" />
<van-cell title="发货计划类型" value="新品五粮液6X6X6 500ML" />
<van-cell title="发票号" value="0090000578(计划内）" />
<van-cell title="开票日期" value="步步高商贸有限公司" />
<van-cell title="开票量" value="配额酒制票通知单(计划内）" />
<van-cell title="本次占用量" value="专卖店渠道" />
<van-cell title="剩余量" value="2022" />
</div>
</div>
<div class="block">
<div class="top-block">
<van-cell title="开票客户" value="步步高有限公司" />
<van-cell title="发货计划类型" value="新品五粮液6X6X6 500ML" />
<van-cell title="发票号" value="0090000578(计划内）" />
<van-cell title="开票日期" value="步步高商贸有限公司" />
<van-cell title="开票量" value="配额酒制票通知单(计划内）" />
<van-cell title="本次占用量" value="专卖店渠道" />
<van-cell title="剩余量" value="2022" />
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {}
},
methods: {
onClickLeft() {
this.$router.go(-1)
}
}
}
</script>
<style scoped lang="scss">
.lists {
height: 100%;
display: flex;
position: relative;
flex-direction: column;
background: #f0f4f5;
overflow: hidden;
:deep(.status_bar) {
background: transparent;
.van-nav-bar__arrow {
color: #333;
}
}
.header-bg {
width: 100%;
margin-top: -48px;
.header-bg-img {
width: 100%;
}
}
.main {
display: flex;
position: absolute;
width: 100%;
height: calc(100vh - 50px);
top: 48px;
left: 0;
flex-direction: column;
padding: 0 8px;
overflow: hidden;
border-radius: 8px;
.list-wrapper {
display: flex;
flex-direction: column;
overflow-y: scroll;
.block {
background-color: #fff;
padding: 20px;
border-radius: 8px;
margin-bottom: 8px;
}
.form-block {
padding-bottom: 0;
padding-top: 0;
}
}
}
:deep(.top-block) {
.van-cell {
padding: 0;
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
&::after {
display: none;
}
.van-cell__title {
font-size: 14px;
color: #999;
}
.van-cell__value {
flex: 2.2;
font-size: 14px;
color: #333;
text-align: left;
}
}
}
}
</style>
src/views/month-flow/monthFlow.vue
View file @ 0015db3b
<template>
<div>
<van-nav-bar title="标题" left-text="返回" left-arrow @click-left="onClickLeft" />
<div class="lists">
<van-nav-bar class="status_bar" title="月度发货计划审批" left-arrow @click-left="onClickLeft" />
<div class="header-bg"><img class="header-bg-img" src="@/assets/images/nav_bg@3x.png" /></div>
<div class="main">
<div class="list-wrapper">
<div class="top-block">
<van-cell title="申请时间" value="2022.06.22 17:05:28" />
<van-cell title="录入人" value="苏州新川商贸公司" />
<van-cell title="计划年度" value="2022" />
<van-cell title="备注" value="共15家客户，应市场变化调整发货计划" />
</div>
<van-button class="download-btn" :icon="downloadIcon" type="primary">
发货计划下载
</van-button>
<van-collapse class="step-block" v-model="activeNames" :border="false">
<van-collapse-item title="审批" name="1" :border="false">
<van-steps
direction="vertical"
:active="1"
active-color="#FF1D32"
inactive-color="#999"
>
<van-step>
<template #active-icon>
<span class="active-dot">1</span>
</template>
<template #inactive-icon>
<span class="inactive-dot">1</span>
</template>
<template #finish-icon>
<span class="active-dot">1</span>
</template>
<p class="step-title">同意</p>
<p class="step-title2">战总 四川战区</p>
</van-step>
<van-step>
<template #active-icon>
<span class="active-dot">2</span>
</template>
<template #inactive-icon>
<span class="inactive-dot">2</span>
</template>
<template #finish-icon>
<span class="active-dot">2</span>
</template>
<p class="step-title">同意</p>
<p class="step-title2">战总 四川战区</p>
</van-step>
<van-step>
<template #active-icon>
<span class="active-dot"></span>
</template>
<template #inactive-icon>
<span class="inactive-dot"></span>
</template>
<template #finish-icon>
<span class="active-dot"></span>
</template>
</van-step>
</van-steps>
</van-collapse-item>
</van-collapse>
<div class="remark-block">
<span class="title">意见</span>
<textarea class="text" type="textarea" rows="2" />
</div>
</div>
</div>
<p class="bottom-block"></p>
<div class="bottom">
<van-button plain type="primary">驳回</van-button>
<van-button plain type="primary">通过</van-button>
</div>
</div>
</template>
<script>
export default {
data() {
return {}
return {
activeNames: ['1'],
downloadIcon: require('@/assets/images/download@3x.png')
}
},
methods: {
onClickLeft() {}
}
}
</script>
<style scoped lang="scss"></style>
<style scoped lang="scss">
.lists {
height: 100%;
display: flex;
position: relative;
flex-direction: column;
background: #f0f4f5;
overflow: hidden;
:deep(.status_bar) {
background: transparent;
.van-nav-bar__arrow {
color: #333;
}
}
.header-bg {
width: 100%;
// height: 142px;
margin-top: -48px;
// background: url(~@/assets/images/nav_bg@3x.png) no-repeat;
// background-size: cover;
.header-bg-img {
width: 100%;
}
}
.main {
display: flex;
position: absolute;
width: 100%;
top: 48px;
left: 0;
flex-direction: column;
padding: 0 8px;
overflow: hidden;
border-radius: 8px;
.list-wrapper {
background-color: #fff;
display: flex;
flex-direction: column;
padding: 20px;
}
}
:deep(.top-block) {
.van-cell {
padding: 0;
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
&::after {
display: none;
}
.van-cell__title {
font-size: 14px;
color: #999;
}
.van-cell__value {
flex: 2.5;
font-size: 14px;
color: #333;
text-align: left;
}
}
}
.download-btn {
width: 160px;
height: 30px;
font-size: 12px;
border-radius: 16px;
color: #ff1d32;
background-color: #fff;
border-color: #ff1d32;
margin: 24px 0;
}
:deep(.step-block) {
margin-bottom: 24px;
.van-collapse-item {
.van-cell {
padding: 0;
}
.van-collapse-item__wrapper {
.van-collapse-item__content {
padding: 0;
}
}
}
.van-steps {
padding-bottom: 10px;
.van-steps__items {
.van-step {
&::after {
display: none;
}
.van-step__title {
margin-left: 20px;
.step-title {
font-size: 17px;
color: #333;
margin-bottom: 6px;
}
.step-title2 {
font-size: 15px;
color: #999;
}
}
}
.van-step__circle-container {
.active-dot {
width: 20px;
height: 20px;
line-height: 22px;
text-align: center;
background: #ff1d32;
border-radius: 50%;
color: #fff;
font-size: 14px;
}
.inactive-dot {
width: 8px;
height: 8px;
background: #e5e5e5;
border-radius: 50%;
}
}
}
}
}
.remark-block {
display: flex;
flex-direction: column;
.title {
font-size: 14px;
color: #999;
margin-bottom: 12px;
}
.text {
width: 311px;
height: 91px;
background: #f5f6f7;
border-radius: 4px;
appearance: none;
border: none;
padding: 8px 14px;
}
}
.bottom-block {
width: 100%;
height: 71px;
}
.bottom {
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
bottom: 0;
width: 100%;
height: 71px;
background: #ffffff;
padding: 0 16px;
.van-button {
height: 42px;
border: 1px solid #ff1d32;
border-radius: 22px;
color: #fff;
font-size: 14px;
background-color: #ff1d32;
flex: 1;
&:first-child {
margin-right: 15px;
background-color: #fff;
color: #ff1d32;
}
}
}
}
</style>
src/views/plan-change-flow/planChangeFlow.vue
View file @ 0015db3b
<template>
<div class="lists">
<van-nav-bar class="status_bar" title="发货计划变更审批" left-arrow @click-left="onClickLeft" />
<div class="header-bg"><img class="header-bg-img" src="@/assets/images/nav_bg@3x.png" /></div>
<div class="main">
<div class="list-wrapper">
<div class="top-block">
<van-cell title="申请时间" value="2022.06.22 17:05:28" />
<van-cell title="录入人" value="苏州新川商贸公司" />
<van-cell title="备注" value="共15家客户，应市场变化调整发货计划" />
</div>
<van-button class="download-btn" :icon="downloadIcon" type="primary">
变更发货计划下载
</van-button>
<van-collapse class="step-block" v-model="activeNames" :border="false">
<van-collapse-item title="审批" name="1" :border="false">
<van-steps
direction="vertical"
:active="1"
active-color="#FF1D32"
inactive-color="#999"
>
<van-step>
<template #active-icon>
<span class="active-dot">1</span>
</template>
<template #inactive-icon>
<span class="inactive-dot">1</span>
</template>
<template #finish-icon>
<span class="active-dot">1</span>
</template>
<p class="step-title">同意</p>
<p class="step-title2">战总 四川战区</p>
</van-step>
<van-step>
<template #active-icon>
<span class="active-dot">2</span>
</template>
<template #inactive-icon>
<span class="inactive-dot">2</span>
</template>
<template #finish-icon>
<span class="active-dot">2</span>
</template>
<p class="step-title">同意</p>
<p class="step-title2">战总 四川战区</p>
</van-step>
<van-step>
<template #active-icon>
<span class="active-dot"></span>
</template>
<template #inactive-icon>
<span class="inactive-dot"></span>
</template>
<template #finish-icon>
<span class="active-dot"></span>
</template>
</van-step>
</van-steps>
</van-collapse-item>
</van-collapse>
<div class="remark-block">
<span class="title">意见</span>
<textarea class="text" type="textarea" rows="2" />
</div>
</div>
</div>
<p class="bottom-block"></p>
<div class="bottom">
<van-button plain type="primary">驳回</van-button>
<van-button plain type="primary">通过</van-button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
activeNames: ['1'],
downloadIcon: require('@/assets/images/download@3x.png')
}
},
methods: {
onClickLeft() {}
}
}
</script>
<style scoped lang="scss">
.lists {
height: 100%;
display: flex;
position: relative;
flex-direction: column;
background: #f0f4f5;
overflow: hidden;
:deep(.status_bar) {
background: transparent;
.van-nav-bar__arrow {
color: #333;
}
}
.header-bg {
width: 100%;
// height: 142px;
margin-top: -48px;
// background: url(~@/assets/images/nav_bg@3x.png) no-repeat;
// background-size: cover;
.header-bg-img {
width: 100%;
}
}
.main {
display: flex;
position: absolute;
width: 100%;
top: 48px;
left: 0;
flex-direction: column;
padding: 0 8px;
overflow: hidden;
border-radius: 8px;
.list-wrapper {
background-color: #fff;
display: flex;
flex-direction: column;
padding: 20px;
}
}
:deep(.top-block) {
.van-cell {
padding: 0;
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
&::after {
display: none;
}
.van-cell__title {
font-size: 14px;
color: #999;
}
.van-cell__value {
flex: 2.5;
font-size: 14px;
color: #333;
text-align: left;
}
}
}
.download-btn {
width: 160px;
height: 30px;
font-size: 12px;
border-radius: 16px;
color: #ff1d32;
background-color: #fff;
border-color: #ff1d32;
margin: 24px 0;
}
:deep(.step-block) {
margin-bottom: 24px;
.van-collapse-item {
.van-cell {
padding: 0;
}
.van-collapse-item__wrapper {
.van-collapse-item__content {
padding: 0;
}
}
}
.van-steps {
padding-bottom: 10px;
.van-steps__items {
.van-step {
&::after {
display: none;
}
.van-step__title {
margin-left: 20px;
.step-title {
font-size: 17px;
color: #333;
margin-bottom: 6px;
}
.step-title2 {
font-size: 15px;
color: #999;
}
}
}
.van-step__circle-container {
.active-dot {
width: 20px;
height: 20px;
line-height: 22px;
text-align: center;
background: #ff1d32;
border-radius: 50%;
color: #fff;
font-size: 14px;
}
.inactive-dot {
width: 8px;
height: 8px;
background: #e5e5e5;
border-radius: 50%;
}
}
}
}
}
.remark-block {
display: flex;
flex-direction: column;
.title {
font-size: 14px;
color: #999;
margin-bottom: 12px;
}
.text {
width: 311px;
height: 91px;
background: #f5f6f7;
border-radius: 4px;
appearance: none;
border: none;
padding: 8px 14px;
}
}
.bottom-block {
width: 100%;
height: 71px;
}
.bottom {
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
bottom: 0;
width: 100%;
height: 71px;
background: #ffffff;
padding: 0 16px;
.van-button {
height: 42px;
border: 1px solid #ff1d32;
border-radius: 22px;
color: #fff;
font-size: 14px;
background-color: #ff1d32;
flex: 1;
&:first-child {
margin-right: 15px;
background-color: #fff;
color: #ff1d32;
}
}
}
}
</style>
src/views/ship-approval/ShipApproval.vue 0 → 100644
View file @ 0015db3b
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment