工序弹框的 列表和详情的更新同步

haoxuan

2023-10-11 a1a6630f2eabfc78a379b5808b1bf7231a084d0b

 src/components/ProcessModel.vue

@@ -31,23 +31,26 @@
                   <div class="item-l-bng">
                      <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-b">当前工艺编号：{{ item.number }}</div>
                   <div class="item-r" @click="processDetailsClick(item,index)">
                      <div class="item-r-t font_weight">{{ item.number }}</div>
                      <div class="item-r-b">产品：{{ item.product }}</div>
                      <div class="item-r-b">工序：{{ item.procedure }}</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>
@@ -57,22 +60,24 @@
      </div>
      <div slot="footer" class="dialog-footer tac" style="overflow: hidden">
        
            <el-button
            <el-button v-if="isPage"
                      type="primary"
                      size="mini"
                      :disabled="top"
                      class="color_blue margin_right_20px"
                      @click="onSubmit()"
                      v-prevent-re-click="3000"
                      @click="onSubmitTop()"
                    >
                      上一页</el-button
                    >
          
          <el-button
          <el-button v-if="isPage"
                      type="primary"
                      size="mini"
                      disabled
                      :disabled="bottom"
                      class="color_blue"
                      v-prevent-re-click="3000"
                      @click="onSubmit()"
                      @click="onSubmitBottom()"
                    >
                      下一页</el-button
                    >
@@ -81,6 +86,9 @@
      <ProcessModelDetails
        ref="processDetails"
        :processObj="processObj"
        :listData="listData"
        :activeIndex='activeIndex'
        @updateProcess="updateProcess"
      />
    </div>
    
@@ -89,25 +97,37 @@

<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,
      index:null,
      isPage:false,
      isRenew:false,
      activeIndex:'',
    };
  },
  mounted() {
@@ -115,11 +135,14 @@
  },
  watch: {
    islook(){
      this.pageObj.page=1
      this.getProcessModelList()
    },
  },
  methods: {
    processDetailsClick(item){
    processDetailsClick(item,index){
      this.processObj=item;
      this.index=index;
      this.$refs.processDetails.islook=true;
    },
    closeClick() {
@@ -127,34 +150,103 @@
    },
    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.pageObj.page=1
          this.getProcessModelList()
          this.islook = true;
      } else {
        this.islook = false;
      }
    },
    onSubmit() {
        if(this.isLoading){
          return true;
    getProcessModelList(number){
      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:number?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.isPage=false;
              this.top=true;
              this.bottom=true;
            }else{
              this.isPage=true;
              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)
      }
    },
    renew(){
      this.processObj.paramsMap=this.processObj.newParamsMap
      this.processObj.number=this.processObj.newNumber
      this.processObj.isUpdate=false
      this.isRenew=true;
      this.$emit('updateGet',this.processObj.newNumber)
      this.getProcessModelList(this.processObj.newNumber)
    },
    updateProcess(item,index){
      this.processObj=item;
      this.activeIndex=index;
      if (this.isLoading[index]) {
        return true;
      }
      this.isLoading[index]=true;
      this.$refs.processDetails.isLoading=true;
      updateProcessParams({procedureId:this.listData.Procedure.ID}).then(res=>{
        if(res.code==200){
          this.isLoading[index]=false;
          this.$refs.processDetails.isLoading=false;
          this.$message.success('更新成功！')
          this.renew();
        }else{
          this.isLoading[index]=false;
          this.$refs.processDetails.isLoading=false;
          this.$refs.processDetails.isUpdate=1;
        }
      })
      setTimeout(()=>{
        this.isLoading[index]=false;
        this.$refs.processDetails.isLoading=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;
      if(this.isRenew){
        this.$emit('updateGet',this.processObj.newNumber,true)
      }
    },
  },
};
@@ -195,13 +287,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 +440,8 @@
      overflow:hidden;
      width:calc(100% - 20px);
      .title-item{
        width:calc(50%  - 35px);
        height:70px;
        width:calc(50%  - 30px);
        height:92px;
        padding:23px 10px 10px;
        background:#31478f;
        border-radius: 8px;
@@ -353,9 +449,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;
@@ -368,15 +464,15 @@
        .item-r{
          width:calc(100% - 60px);
          float:left;
          line-height:25px;
          line-height:22px;
          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 +499,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;
          }
        }
      }
    }