erp-el-element/Dialog/getoff.vue

<!--
 * @Author: your name
 * @Date: 2021-01-30 11:18:29
 * @LastEditTime: 2021-03-03 10:24:42
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \aiguo_erp_vue\src\components\Dialog\addbrand.vue
-->
<template>
  <el-dialog
    :visible.sync="visible"
    width="620px"
    class="modal"
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
  <div style="display:flex;align-items: center;">
  <el-image src="https://aiguovip2020.oss-cn-shenzhen.aliyuncs.com/erp/img/zhuanzhuan.png"></el-image>
  <span>已自动过滤不可下架的机器</span>
  </div>
  <!-- <div class="cass">
    <span style="margin-left:5px">5s内将确认最新状态</span>
    <span style="margin-right:5px">正在确认</span>
  </div> -->
  <div style="display:flex;justify-content:space-between">
        <!-- <div>
          <h3>客户 {{getoffform.text.name}}</h3>
          <h3>操作订单号 {{getoffform.text.order}}</h3>
        </div>
        <div style="height:50px;display:flex;align-items:center;justify-content:center;">
          <el-tag style="margin-right:10px">上架中</el-tag>
          <span style="color:#909399; display:flex;flex-direction:column;align-items:center">
            <span>{{getoffform.text.cz}}</span>
            <i style="font-size:10px;margin-top: -12px;" class="iconfont iconguocheng"></i>
          </span>
          <el-tag style="margin-left:10px">{{getoffform.text.zt}}</el-tag>
        </div> -->
      <!-- <span style="color:#9AAFC0;cursor: pointer;float: right;">
          <i class="el-icon-refresh"></i>
          刷新获取最新结果</span> -->
  </div>
  <!-- 下架中 -->
  <div v-if="activeName=='1'">
    <div style="display:flex;align-items:center;justify-content:space-between">
      <span style="display:flex;align-items:center;">
      <el-image style="widith:50px;height:50px" src="https://aiguovip2020.oss-cn-shenzhen.aliyuncs.com/erp/img/sample.gif"></el-image>
      正在下架中  
      </span> 
      <span style="margin-right:60px;font-size:16px">预计下架时间  {{getoffform.time}}</span>
    </div>
    <div class="phoneclass">
      <div  v-for="(item,index) in getoffform.data" :key="index" style="display:flex;align-items:center;justify-content:space-between">
        <div style="display:flex;align-items:center;">
          <el-image v-if="!!item.color_img" style="width:100px;height:100px" :src="item.color_img"></el-image>
          <el-image v-else  style="width:120px;height:120px" src="https://aiguovip2020.oss-cn-shenzhen.aliyuncs.com/aiguo2022/errimg.png"></el-image>
          <div class="items" style="margin-left:10px">
              <!-- <h3 style="font-weight:bold">{{item.sku_name}}</h3> -->
              <span style="font-weight:bold">IMEI/SN {{item.imei}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 下架完成 -->
  <div v-else >
    <div v-loading="loading">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane :label="'下架失败('+getoffform.fail_datas.length+')'" name="error">
          <div class="phoneclass">
            <div  v-for="(item,index) in getoffform.fail_datas" :key="index" style="display:flex;align-items:center;justify-content:space-between">
              <div style="display:flex;align-items:center;">
                <el-image v-if="!!item.color_img" style="width:100px;height:100px" :src="item.color_img"></el-image>
                <el-image v-else  style="width:120px;height:120px" src="https://aiguovip2020.oss-cn-shenzhen.aliyuncs.com/aiguo2022/errimg.png"></el-image>                          
                <div class="items" style="margin-left:10px">
                <h3 style="font-weight:bold">{{item.sku_name}}</h3>
                <span style="font-weight:bold">IMEI/SN {{item.imei}}</span>
                </div>
              </div>
                <div style="margin-right:10px">
                  失败原因：{{item.msg}}
                </div>   
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane :label="'下架成功('+getoffform.success_datas.length+')'" name="success">
        <div class="phoneclass">
          <div  v-for="(item,index) in  getoffform.success_datas" :key="index" style="display:flex;align-items:center;justify-content:space-between">
            <div style="display:flex;align-items:center;">
                <el-image v-if="!!item.color_img" style="width:100px;height:100px" :src="item.color_img"></el-image>   
                <el-image v-else  style="width:120px;height:120px" src="https://aiguovip2020.oss-cn-shenzhen.aliyuncs.com/aiguo2022/errimg.png"></el-image>
              <div class="items" style="margin-left:10px">
                <h3 style="font-weight:bold">{{item.sku_name}}</h3>
                <span style="font-weight:bold">IMEI/SN {{item.imei}}</span>
              </div>
            </div>
            <div style="margin-right:10px">
              <p v-if="item.state_name">
                转转状态:
                <el-tag>{{item.state_name}}</el-tag>
              </p>
            </div>             
          </div>
        </div>        
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="resetForm()">关 闭</el-button>
      <el-button v-if="getoffform.fail_datas.length>0" size="small" type="primary" @click="off()">重新下架</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import {grpc_off_shelf} from "@/api/Jiqidetails"; //select Api
export default {
  name: "addbrand",
  data() {
    return {
      activeName:'1',
      percentage:50,
      loading:true,
    };
  },
  props: {
    visible: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
    modaloptions: {
      type: Object,
      default: () => {
        return {};
      },
    },
    Obj: {
      type: Object,
      default: () => {
        return {};
      },
    },
    Input: {
      type: Array,
      default: () => {
        return [];
      },
    },
    getoffform: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  methods: {
    searchKeyBlur(e, formName, type) {
      // 代表触发 formName 表单所对应 type 属性的规则 
      this.$refs[formName].validateField(type) 
    },
    handleClick(){

    },
    handleClose() {
      this.$emit("handleClose");
    },
    resetForm() {
      this.$emit("handleClose");
    },
    input(e){
      this.$forceUpdate();
    },
    change(enName, e, DialogTitle) {
      this.$emit("hide", { enName: enName, e: e, DialogTitle: DialogTitle });
    },
    focus(row, item) {
      this.$emit("Selectfocus", { row: row, item: item });
    },
    addbrands(){
      this.$emit('addbrands')
    },
    off() {
      if (this.getoffform.fail_datas) {
        this.getoffform.time = this.getoffform.fail_datas.length * 3  + `秒`
        this.getoff.activeName == '1'
        let that = this        
        grpc_off_shelf({list:this.getoffform.fail_datas}).then(res=>{
            that.getoff.activeName = 'error'
            that.getoffform.data.map(e=>{
            that.getoffform.fail_datas =  res.datas.fail_datas.map(k=>{
              if (e.qc_code == k.datas.qc_code) {
                return {...e,...k}
              }
            })
            }) 
            that.getoffform.data.map(e=>{
            that.getoffform.success_datas =res.datas.success_datas.map(k=>{
              if (e.qc_code == k.datas.qc_code) {
                return {...e,...k}
              }
            })
            })  
        })
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.modal ::v-deep .el-dialog__body{
  padding: 0px 20px;
}
.items{
  display: flex;
  flex-direction: column;

}
.cass{
  display: flex;
  justify-content: space-between;
  background: #eee;
  height: 20px;
  margin-bottom: 5px;
}
.phoneclass{
  height: 400px;
  overflow: auto;
}
.image-slot{
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.dialog-footer{
  display: flex;
  justify-content: space-between;
}
</style>