From 880d8b2a6440405b022e4eb2111ba4d7cfdc0400 Mon Sep 17 00:00:00 2001
From: haoxuan <haoxuan>
Date: 星期日, 08 十月 2023 16:29:22 +0800
Subject: [PATCH] 工序列表+工序详情的 前端开发+联调
---
src/components/ProcessModel.vue | 167 +++++++++++++++++++++++++++++++++++++++----------------
1 files changed, 119 insertions(+), 48 deletions(-)
diff --git a/src/components/ProcessModel.vue b/src/components/ProcessModel.vue
index e90339e..8a0f93a 100644
--- a/src/components/ProcessModel.vue
+++ b/src/components/ProcessModel.vue
@@ -32,22 +32,24 @@
<img src="../../public/process-model.png" />
</div>
<div class="item-r" @click="processDetailsClick(item)">
- <div class="item-r-t font_weight">{{ item.name }}</div>
+ <div class="item-r-t font_weight">{{ item.procedure }}</div>
<div class="item-r-b">褰撳墠宸ヨ壓缂栧彿锛歿{ item.number }}</div>
</div>
- <div class="tip-r">
+ <div class="tip-r" v-if="item.isUpdate">
<img src="../../public/process-tip.png" />
</div>
- <div class="tip-current">褰撳墠浣跨敤</div>
+ <div class="tip-current" v-if="item.number==listData.number">褰撳墠浣跨敤</div>
<div class="btn">
<el-button
type="primary"
size="mini"
class="color_organge"
- @click="finishClick(index, taskData)"
+ :disabled="item.isUpdate?false:true"
+ @click="updateProcess(item,index)"
>
- 鏇存柊宸ヨ壓</el-button
- >
+ <i class="el-icon-loading icon-loading" v-if="isLoading[index]"></i>
+ <span v-else>鏇存柊宸ヨ壓 </span>
+ </el-button>
</div>
</div>
</div>
@@ -60,8 +62,10 @@
<el-button
type="primary"
size="mini"
+ :disabled="top"
class="color_blue margin_right_20px"
- @click="onSubmit()"
+ v-prevent-re-click="3000"
+ @click="onSubmitTop()"
>
涓婁竴椤�</el-button
>
@@ -69,10 +73,10 @@
<el-button
type="primary"
size="mini"
- disabled
+ :disabled="bottom"
class="color_blue"
v-prevent-re-click="3000"
- @click="onSubmit()"
+ @click="onSubmitBottom()"
>
涓嬩竴椤�</el-button
>
@@ -81,6 +85,8 @@
<ProcessModelDetails
ref="processDetails"
:processObj="processObj"
+ :listData="listData"
+ @renew="getProcessModelList"
/>
</div>
@@ -89,25 +95,33 @@
<script>
import {
- startTask,
- sendProcessParams,
+ processModelList,
+ updateProcessParams,
} from "@/api/home/index"; // 浜х嚎
import ProcessModelDetails from "@/components/ProcessModelDetails";
export default {
components: {ProcessModelDetails},
props: {
- processList: {
- type: [Array],
+ listData: {
+ type: [Array,Object],
default: () => {
- return [];
+ return {};
},
},
},
data() {
return {
islook: false,
- isLoading:false,
- processObj:{}
+ isLoading:{},
+ processObj:{},
+ processList:[],
+ pageObj:{
+ page:1,
+ pageSize:6,
+ },
+ total:0,
+ top:false,
+ bottom:false,
};
},
mounted() {
@@ -115,6 +129,7 @@
},
watch: {
islook(){
+ this.getProcessModelList()
},
},
methods: {
@@ -127,31 +142,76 @@
},
getInfo() {
// 1 鏈敓浜� 2鐢熶骇涓� 3鐢熶骇瀹屾垚
- // if (
- // Object.keys(this.processList).length > 0
- // ) {
- // this.islook = true;
- // } else {
- // this.islook = false;
- // }
+ if (
+ Object.keys(this.listData).length > 0
+ ) {
+ this.islook = true;
+ this.getProcessModelList()
+ } else {
+ this.islook = false;
+ }
},
- onSubmit() {
- if(this.isLoading){
- return true;
+ getProcessModelList(){
+ if( Object.keys(this.listData).length > 0){
+ if(this.listData.Procedure.ID&&this.listData.number){
+ processModelList({
+ procedureId: this.listData.Procedure.ID,
+ page: this.pageObj.page,
+ pageSize:this.pageObj.pageSize,
+ number:this.listData.number
+ }).then(res=>{
+ if(res.data){
+ this.processList=res.data?res.data:[];
+ for(let i in this.processList){
+ this.isLoading[i]=false;
+ }
+ this.$forceUpdate()
+ }
+ this.total=res.total?res.total:0;
+ if(this.total<=6){
+ this.top=true;
+ this.bottom=true;
+ }else{
+ let pageTotal=Math.ceil(Number(this.total)/6)
+ if(this.pageObj.page<pageTotal){
+
+ this.bottom=false;
+ }else if(this.pageObj.page==pageTotal){
+ this.bottom=true;
+ }
+ if(this.pageObj.page==1){
+ this.top=true;
+ }else{
+ this.top=false;
+ }
+ }
+
+ })
}
- this.isLoading=true;
- // sendProcessParams({ procedureId: this.processList.Procedure.ID,position: Number(this.taskData.Position), }).then((res) => {
- // if (res.code == 200) {
- // this.resParams = res;
- // this.isLoading=false;
- // } else {
- // this.isLoading=false;
- // this.resParams = res;
- // }
- // });
- setTimeout(()=>{
- this.isLoading=false;
- },30000)
+ }
+ },
+ updateProcess(item,index){
+ this.isLoading[index]=true;
+ updateProcessParams({procedureId:this.listData.Procedure.ID}).then(res=>{
+ if(res.code==200){
+ this.isLoading[index]=false;
+ this.$message.success('鏇存柊鎴愬姛锛�')
+ this.getProcessModelList()
+ }else{
+ this.isLoading[index]=false;
+ }
+ })
+ setTimeout(()=>{
+ this.isLoading[index]=false;
+ },50000)
+ },
+ onSubmitTop() {
+ this.pageObj.page= this.pageObj.page-1;
+ this.getProcessModelList()
+ },
+ onSubmitBottom(){
+ this.pageObj.page= this.pageObj.page+1;
+ this.getProcessModelList()
},
shutdown() {
this.islook = false;
@@ -195,13 +255,17 @@
color:#fff;
border:0!important;
font-size:14px;
- padding:10px 15px!important;
+ padding:9px 15px!important;
}
.color_blue{
background:#4343f5!important;
border:0!important;
font-size:16px;
padding:10px 25px!important;
+}
+.el-button.is-disabled{
+ color: #fff!important;
+ background:#7b95d3 !important;
}
.color_4efefa {
color: #4efefa !important;
@@ -344,8 +408,8 @@
overflow:hidden;
width:calc(100% - 20px);
.title-item{
- width:calc(50% - 35px);
- height:70px;
+ width:calc(50% - 30px);
+ height:77px;
padding:23px 10px 10px;
background:#31478f;
border-radius: 8px;
@@ -353,9 +417,9 @@
overflow:hidden;
font-size:15px;
position:relative;
- margin-bottom:30px;
+ margin-bottom:20px;
&:nth-of-type(odd){
- margin-right:30px;
+ margin-right:20px;
}
.item-l-bng{
width:40px;
@@ -370,13 +434,13 @@
float:left;
line-height:25px;
color:#fff;
- font-size:16px;
+ font-size:15px;
cursor:pointer;
.item-r-t{
- font-size:16px;
+ font-size:15px;
}
.item-r-b{
- font-size:14px;
+ font-size:13px;
}
}
.tip-r{
@@ -403,7 +467,14 @@
width:100px;
position:absolute;
right:0px;
- bottom:10px;
+ bottom:5px;
+ .el-button{
+ width:calc(100% - 15px);
+ }
+ .icon-loading{
+ font-size:22px;
+ text-align:center;
+ }
}
}
}
--
Gitblit v1.8.0