Commit 00fd657e authored by 张毅辰's avatar 张毅辰

工作流(班次提交)

parent 1a2942ac
import request from '@/utils/request'
// 获取单据详情
export function getDict(dictCode) {
return request({
url: `/system/dict/data/type/${dictCode}`,
method: 'get'
})
}
import request from '@/utils/request'
// 获取单据详情
export function getDocumentDetails(businessId) {
return request({
url: `/wx/sysprocessinstance/getDetail/${businessId}`,
method: 'get',
})
}
......@@ -25,9 +25,10 @@
"navigationBarTitleText": "单据"
}
}, {
"path": "pages/document/documentInfo",
"path": "pages/flow/work",
"style": {
"navigationBarTitleText": "详情"
"navigationBarTitleText": "",
"navigationStyle": "custom"
}
},{
"path": "pages/mine/index",
......
......@@ -31,7 +31,7 @@ export default{
}
},
created() {
// this.getQueryAeClassesInfos()
this.getQueryAeClassesInfos()
},
methods:{
getQueryAeClassesInfos() {
......@@ -67,7 +67,7 @@ export default{
}
</script>
<style lang="scss">
<style lang="scss" scoped>
.my_approval{
.my_approval_li{
margin-bottom: 20rpx;
......
<template>
<view class="container">
<uni-card :is-shadow="false" is-full>
<text class="uni-h6">{{ classesForm.classesName }}</text>
</uni-card>
<uni-section title="班次信息" type="line">
<view class="example" style="padding: 0 10px">
<!-- 展示不同的排列方式 -->
<uni-forms ref="baseForm" :modelValue="classesForm" label-position="left" label-width="120">
<uni-forms-item label="部门" required>
<uni-data-picker v-model="classesForm.deptId" :map="{value: 'deptId', text: 'deptName'}" :localdata="deptTree" popup-title="请选择部门" @change="onchange"></uni-data-picker>
<text class="beforeValue">部门2</text>
</uni-forms-item>
<uni-forms-item label="产线" required>
<uni-data-picker v-model="classesForm.productId" :map="{value: 'productId', text: 'productName'}" :localdata="productTree" popup-title="请选择产线" @change="onchange"></uni-data-picker>
<text class="beforeValue">产线2</text>
</uni-forms-item>
<uni-forms-item label="是否跨天" required>
<uni-data-checkbox v-model="classesForm.isTwodays" style="float: right;margin-top: 5px;" :localdata="towDayMap"></uni-data-checkbox>
</uni-forms-item>
<uni-forms-item label="开始时间" required>
<uni-datetime-picker type="date" :clear-icon="false" v-model="classesForm.startDate" placeholder="请选择开始时间" />
<text class="beforeValue">2024-03-01</text>
</uni-forms-item>
<uni-forms-item label="结束时间" required>
<uni-datetime-picker type="date" :clear-icon="false" v-model="classesForm.endDate" placeholder="请选择结束时间" />
<text class="beforeValue">2024-03-11</text>
</uni-forms-item>
<uni-forms-item label="权重" required>
<uni-easyinput type="number" disabled v-model="classesForm.weight" placeholder="请输入权重" />
<text class="beforeValue">3</text>
</uni-forms-item>
<uni-forms-item label="版本" required>
<uni-easyinput v-model="classesForm.version" disabled placeholder="请输入版本" />
<text class="beforeValue">2</text>
</uni-forms-item>
</uni-forms>
<button type="primary" @click="submit('baseForm')">提交</button>
</view>
</uni-section>
</view>
</template>
<script>
import {getDocumentDetails} from "../../api/system/document";
export default {
name: "ClassesInfo",
data() {
return {
businessId: '',
approveHistoryList: [], // 审批历史
createDeptName: [], // 部门名称
flowChatNodeList: [], // 所有节点
newBusinessData: [], // 新表单
oldBusinessData: [], // 旧表单
classesForm: {},
deptTree: [
{
deptName: '部门1',
deptId: 1
},
{
deptName: '部门2',
deptId: 2
}
],
productTree: [
{
productName: '产线1',
productId: 1
},
{
productName: '产线2',
productId: 2
}
],
towDayMap: [
{
text: '是',
value: '1',
},
{
text: '否',
value: '0',
}
]
}
},
onLoad(options) {
this.businessId = options.businessId
this.getDetails()
// 页面启动的生命周期,这里编写页面加载时的逻辑
},
methods: {
onchange() {
},
/** 获取详情*/
getDetails() {
getDocumentDetails(this.businessId).then(res => {
this.approveHistoryList = res.data.approveHistoryList // 审批历史
this.createDeptName = res.data.createDeptName // 部门名称
this.flowChatNodeList = res.data.flowChatNodeList // 所有节点
this.newBusinessData = res.data.newBusinessData // 新表单
this.oldBusinessData = res.data.oldBusinessData // 旧表单
})
},
switchChange(e) {
console.log(e)
this.classesForm.isTwodays = e
},
submit(ref) {
this.$refs[ref].validate(res => {
console.log(this.classesForm)
aeclassesinfoUpdate(this.classesForm).then(res => {
uni.showToast({
title: `编辑成功`
})
setTimeout(_ => {
uni.navigateBack()
}, 500)
})
}).catch(err => {
console.log('err', err);
})
},
}
}
</script>
<style scoped lang="scss">
.beforeValue{
padding-left: 10px;
color: red;
}
.example {
padding: 15px;
background-color: #fff;
}
.segmented-control {
margin-bottom: 15px;
}
.button-group {
margin-top: 15px;
display: flex;
justify-content: space-around;
}
.form-item {
display: flex;
align-items: center;
}
.button {
display: flex;
align-items: center;
height: 35px;
margin-left: 10px;
}
</style>
......@@ -29,8 +29,10 @@
<li v-for="(item,index) in myApprovalList" :key="index" class="my_approval_li">
<uni-swipe-action-item :right-options="options" @click="bindClick($event,item.eventId)" @change="swipeChange($event, index)">
<view class="my_approval_item" @click="toNav(item.businessId)">
<h3 class="my_approval_title"><text>[{{item.businessTypeName}}]--{{item.createUserName}}</text>
<text class="approval_info_type">{{item.status === '10' ? '待审批' :item.status === '2' ? '已审批':item.status === '5' ? '驳回' : ''}}</text></h3>
<h3 class="my_approval_title">
<text>[{{item.businessTypeName}}]--{{item.createUserName}}</text>
<text class="approval_title_right">{{item.status === '10' ? '待审批' :item.status === '2' ? '已审批':item.status === '5' ? '驳回' : ''}}</text>
</h3>
<view class="my_approval_info">
<text class="approval_info_right">{{item.createDate}}</text>
......@@ -90,7 +92,7 @@ export default{
/** 详情页跳转*/
toNav(id) {
uni.navigateTo({
url: `documentInfo?businessId=${id}`,
url: `/pages/flow/work?businessId=${id}&type=see`,
success:(res) =>{
},
fail:(err) =>{
......@@ -155,34 +157,32 @@ export default{
background: #ffffff;
padding:20rpx;
border-radius: 8rpx;
}
.my_approval_item{
.my_approval_title{
display: flex;
font-size: 14px;
.approval_title_right{
font-size: 13px;
font-weight: 400;
flex: 1;
text-align: right;
color: #007aff;
.my_approval_item{
.my_approval_title{
display: flex;
font-size: 14px;
.approval_title_right{
font-size: 13px;
font-weight: 400;
flex: 2;
text-align: right;
color: #007aff;
}
}
}
.approval_info_type{
padding-left: 130px;
}
.my_approval_info{
height: 60rpx;
line-height: 60rpx;
font-size: 12px;
display: flex;
color: #999;
.approval_info_right{
flex: 1;
text-align: right;
.my_approval_info{
height: 60rpx;
line-height: 60rpx;
font-size: 12px;
display: flex;
color: #999;
.approval_info_right{
flex: 1;
text-align: right;
}
}
}
}
}
</style>
......
<template>
<view style="padding: 10px;">
<uni-section title="纵向排列" type="line" padding>
<uni-steps :options="flowChatNodeList" :active-color="approveControl === '0' ? '#FF0000' : '#007AFF'" :active="approveControlActive" direction="column" />
</uni-section>
</view>
</template>
<script>
export default {
name: "ApprovalProcess",
props: {
flowChatNodeList: {
type: Array,
default: () => {
return []
}
},
approveControl: {
type: String,
default: '0'
},
approveControlActive: {
type: Number,
default: 1
}
},
data() {
return {
}
}
}
</script>
<style scoped lang="scss">
</style>
<template>
<view style="padding: 10px;">
<uni-forms :modelValue="basicDataForm" label-width="120" border label-align="left">
<uni-forms-item label="单据分组" name="processGroup">
<view class="show_form_info">
{{
basicDataForm.processGroup === '1' ? 'AE' :
basicDataForm.processGroup === '2' ? 'MC' :
basicDataForm.processGroup === '3' ? 'DC' :
'-'
}}
</view>
</uni-forms-item>
<uni-forms-item label="单据" name="processType">
<view class="show_form_info">
{{ tableUserFrom.find(item => item.dictValue === basicDataForm.processType).dictLabel || '-' }}
</view>
</uni-forms-item>
<uni-forms-item label="创建时间" name="createDate">
<view class="show_form_info">
{{ basicDataForm.createDate || '-' }}
</view>
</uni-forms-item>
<uni-forms-item label="创建人" name="createUserName">
<view class="show_form_info">
{{ basicDataForm.createUserName || '-' }}
</view>
</uni-forms-item>
<uni-forms-item label="审批人" name="approveUser">
<view class="show_form_info">
{{ basicDataForm.approveUser.map(item => { return item.userName }) }}
</view>
</uni-forms-item>
</uni-forms>
</view>
</template>
<script>
export default {
name: "BasicData",
props: {
basicDataForm: {
type: Object,
default: () => {
return {
processGroup: '',
processType: '',
createDate: '',
createUserId: '',
createUserName: '',
approveUser: [],
}
}
},
tableUserFrom: {
type: Array,
default: () => {
return []
}
}
},
data() {
return {
gender: '男',
age: 1,
name: '1'
}
}
}
</script>
<style scoped lang="scss">
</style>
<template>
<view style="padding: 10px;">
<ClassForm v-if="processType === '1001'" :newBusinessDocument="newBusinessDocument" :oldBusinessDocument="oldBusinessDocument"></ClassForm>
</view>
</template>
<script>
import ClassForm from './form/ClassForm.vue'
export default {
name: "BusinessDocument",
props: {
newBusinessDocument: {
type: Object,
default: () => {
return {}
}
},
oldBusinessDocument: {
type: Object,
default: () => {
return {}
}
},
processType: {
type: String,
default: '1001'
}
},
components: {
ClassForm
},
data() {
return {
}
}
}
</script>
<style scoped lang="scss">
</style>
<template>
<view style="padding: 10px 0;">
<uni-collapse ref="collapse">
<uni-collapse-item v-for="(item, index) in approveHistoryList" :key="index" :title="(index + 1) + '.' + item.userName" >
<view class="content" style="padding: 10px 10px; font-size: 8px;text-align: center">
<uni-row>
<uni-col :span="12">
审核人部门: {{ item.deptName || '-' }}
</uni-col>
<uni-col :span="12">
审核时间: {{ item.approveDate || '-'}}
</uni-col>
</uni-row>
<uni-row>
<uni-col :span="12">
审核结果: {{ item.approveControl === '0' ? '驳回' : item.approveControl === '1' ? '通过' : item.approveControl === '2' ? '跳过' : '-' }}
</uni-col>
<uni-col :span="12">
审核意见: {{ item.remarks || '-' }}
</uni-col>
</uni-row>
</view>
</uni-collapse-item>
</uni-collapse>
</view>
</template>
<script>
export default {
name: "ReviewHistory",
props: {
approveHistoryList: {
type: Array,
default: () => {
return []
}
}
},
data() {
return {
value: ['0'],
data: [
{
index: '1',
title: 'guanliyuan',
aaa: '审核人部门',
bbb: '2024-1-1',
ccc: '通过',
ddd: '审核意见'
}
]
}
},
methods: {
change(e) {
console.log(e);
}
}
}
</script>
<style scoped lang="scss">
</style>
<template>
<view>
<uni-forms :modelValue="{}" label-width="120" border label-align="left">
<view v-for="(item, index) in dataList" :key="index" class="show_form">
<view class="show_form_border">
<uni-forms-item :label="item.label" :name="item.key">
<view class="show_form_info">
<view>
{{ item.newData || '-' }}
</view>
<view v-show="item.showFlag" style="color: red;">
{{ item.oldData || '-' }}
</view>
</view>
</uni-forms-item>
<!-- <uni-forms-item :label="' '" :name="item.key" v-if="item.showFlag">-->
<!-- <view class="show_form_info" style="color: red;">-->
<!-- {{ item.oldData || '-' }}-->
<!-- </view>-->
<!-- </uni-forms-item>-->
</view>
</view>
</uni-forms>
</view>
</template>
<script>
export default {
name: "ClassForm",
props: {
newBusinessDocument: {
type: Object,
default: () => {
return {}
}
},
oldBusinessDocument: {
type: Object,
default: () => {
return {}
}
}
},
data() {
return {
dataList: []
}
},
created() {
this.initData()
},
methods: {
initData() {
const list = [
{
label: '备注',
key: 'remarks'
},
{
label: '班次名称',
key: 'classesName'
},
{
label: '部门id',
key: 'deptId'
},
{
label: '产品id',
key: 'productId'
},
{
label: '是否跨天',
key: 'isTwoDays'
},
{
label: '开始时间',
key: 'startDate'
},
{
label: '结束时间',
key: 'endDate'
},
{
label: '权重',
key: 'weight'
},
]
list.forEach(item => {
this.dataList.push({
showFlag: this.oldBusinessDocument[item.key] !== this.newBusinessDocument[item.key],
label: item.label,
key: item.key,
oldData: this.oldBusinessDocument[item.key],
newData: this.newBusinessDocument[item.key]
})
})
console.log(this.dataList)
},
}
}
</script>
<style scoped lang="scss">
</style>
<template>
<view class="container my-flow-work">
<uni-nav-bar dark :fixed="true" shadow background-color="#007AFF" status-bar left-icon="left" left-text="返回" :title="'自定义导航栏'" @clickLeft="goBack" />
<view>
<ul>
<li class="my_approval_li">
<uni-swipe-action-item>
<view class="my_approval_item" >
<h3 class="my_approval_title">
<text>[{{123}}]--{{312}}</text>
<text class="approval_title_right">{{1=== '10' ? '待审批' :1 === '2' ? '已审批':1 === '5' ? '驳回' : '测试'}}</text>
</h3>
<view class="my_approval_info">
<text class="approval_info_right">{{2111}}</text>
</view>
</view>
</uni-swipe-action-item>
</li>
</ul>
</view>
<view>
<uni-segmented-control style-type="text" :current="current" :values="items" @clickItem="onClickItem" activeColor="#007aff"></uni-segmented-control>
<view class="content">
<view v-show="current === 0">
<BasicData :basicDataForm="basicDataForm" :tableUserFrom="tableUserFrom"></BasicData>
</view>
<view v-show="current === 1">
<BusinessDocument :processType="basicDataForm.processType" :newBusinessDocument="newBusinessDocument" :oldBusinessDocument="oldBusinessDocument"></BusinessDocument>
</view>
<view v-show="current === 2">
<ReviewHistory :approveHistoryList="approveHistoryList"></ReviewHistory>
</view>
<view v-show="current === 3">
<ApprovalProcess :flowChatNodeList="flowChatNodeList" :approveControl="approveControl" :approveControlActive="approveControlActive"></ApprovalProcess>
</view>
</view>
</view>
</view>
</template>
<script>
import { getDocumentDetails } from '@/api/system/flowWork'
import { getDict } from '@/api/system/dict'
import BasicData from './components/BasicData.vue'
import BusinessDocument from './components/BusinessDocument.vue'
import ReviewHistory from './components/ReviewHistory.vue'
import ApprovalProcess from './components/ApprovalProcess.vue'
export default {
name: "work",
components: {
BasicData,
BusinessDocument,
ReviewHistory,
ApprovalProcess
},
props: {
},
data() {
return {
businessId: 0,
type: 'see',
items: ['基本信息', '业务单据', '审核历史', '审批流程'],
current: 0,
// 基础数据
basicDataForm: {
processGroup: '',
processType: '',
createDate: '',
createUserId: '',
createUserName: '',
approveUser: [],
},
// 新业务单据数据
newBusinessDocument: {},
// 旧业务单据数据
oldBusinessDocument: {},
// 审核历史数据
approveHistoryList: [],
// 审批流程数据
flowChatNodeList: [],
// 当前流程节点是否通过
approveControl: '0',
// 当前流程节点
approveControlActive: 1,
// 单据类型字典
tableUserFrom: [],
}
},
onLoad(option) {
const { businessId, type } = option
this.businessId = businessId
this.type = type
this.getFlowData()
},
created() {
this.getDict()
},
methods: {
onClickItem(e) {
if (this.current != e.currentIndex) {
this.current = e.currentIndex;
}
},
getDict() {
getDict('table_user_from').then(res => {
this.tableUserFrom = res.data
})
},
getFlowData() {
getDocumentDetails(this.businessId).then(res => {
// 基础数据
this.basicDataForm = {
processGroup: res.data.processGroup,
processType: res.data.processType,
createDate: res.data.createDate,
createUserId: res.data.createUserId,
createUserName: res.data.createUserName,
approveUser: res.data.flowChatNodeList.find(item => item.currentNode === 1).approveUser
}
// 业务单据
this.newBusinessDocument = JSON.parse(res.data.newBusinessData.jsonData)
this.oldBusinessDocument = JSON.parse(res.data.oldBusinessData.jsonData)
// 审核历史
this.approveHistoryList = res.data.approveHistoryList
// 审批流程
this.flowChatNodeList = res.data.flowChatNodeList.map((item, index) => {
if (item.currentNode === 1) {
this.approveControl = item.approveControl
this.approveControlActive = index
}
return {
title: item.approveName,
desc: item.approveUser.map(userItem => { return userItem.userName })
}
})
})
},
goBack() {
uni.navigateBack({ //uni.navigateTo跳转的返回,默认1为返回上一级
delta: 1
})
}
}
}
</script>
<style scoped lang="scss">
.my-flow-work {
background: #ffffff;
min-height: 100vh;
.my_approval_li{
height: 80px;
background: #eee;
padding:20rpx;
border-radius: 8rpx;
.my_approval_item{
.my_approval_title{
display: flex;
font-size: 14px;
.approval_title_right{
font-size: 13px;
font-weight: 400;
flex: 2;
text-align: right;
color: #007aff;
}
}
.my_approval_info{
height: 60rpx;
line-height: 60rpx;
font-size: 12px;
display: flex;
color: #999;
.approval_info_right{
flex: 1;
text-align: right;
}
}
}
}
}
</style>
......@@ -3,4 +3,15 @@
// color-ui
@import "@/static/scss/colorui.css";
// iconfont
@import "@/static/font/iconfont.css";
\ No newline at end of file
@import "@/static/font/iconfont.css";
.show_form >.show_form_border {
}
.show_form_info {
width: 100%;
height: 100%;
line-height: 36px;
text-align: right;
padding: 0 20px;
}
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