0
点赞
收藏
分享

微信扫一扫

vue3中的生命周期有哪些和怎么使用?

曾宝月 03-07 17:00 阅读 2
   <div v-if="type=='detail'||type=='todo'">
                <sale-process ref="saleProcess" :rowData="row" :param="{ type: 'XS_INVOICE', biz_type: 'xs_invoice' ,id:dataForm.id}"></sale-process>
            </div>
       this.$nextTick(()=>{
            this.$refs.saleProcess.init({
               id: this.dataForm.id,
               // process_instance_id: this.detailRes.process_instance_id
             })
       })
<template>
  <div style="text-align: left;" v-if="flowData.length > 0">
    <el-steps :space="250" style="overflow-x: auto;">
      <el-step v-for="(n, i) in flowData" :key="i" style="min-width: 150px;max-width: 250px;">
        <span slot="icon"><i class="el-icon el-icon-success" :style="{ color: n.created_time ? '#67c23a' : '#999' }"></i></span>
        <span slot="title">
          <div style="color: #333;">
            {{ n.created_time ? n.statusName : '待审批' }}
            <span v-if="n.progress">{{ n.progress }}</span>
            <span style="font-size: 12px;">{{ n.created_time }}</span>
          </div>
        </span>
        <span slot="description">
         <div style="overflow: hidden;overflow-y: auto;max-height:60px">
          <div style="color: #333;">{{ n.str_name }}</div>
          <div style="color: #999;word-break: break-all;" class="" :title="n.remark">{{ n.remark }}</div>
           </div>
          <!-- <div style="color: #999;" v-if="n.created_time">{{ n.created_time }}</div> -->
        </span>
      </el-step>
    </el-steps>
  </div>
</template>
<script>
  export default {
    props: {
      param:{
        type:Object,
        default:function(){
          return {
            type: 'BIZ_SALE',
            biz_type: 'b_sale_workflow',
          }
        }
      },
      rowData:{
        type:Object,default:()=>{return {}}
      },
      url:{default:'/leaderQuery/listBillStatus',type:String}
    },
    data() {
      return {
        flowData: []
      }
    },
    methods: {
      init(row) {
        debugger
        console.log(row)
        this.flowData = [];
        this.getFlowData(row);
      },
      getFlowData(row) {
        this.$http({
          url: this.$http.adornUrl(this.url),
          method: 'post',
          data: this.$http.adornData({
            id: row.id,
            process_instance_id:row.process_instance_id,
            ...this.param
          })
        }).then(({
          data
        }) => {
          this.responseHandle(data,
            () => {
              let none={remark:'没有设置审批人',tell_name:[],list:[]},flowData=[];
              flowData = data.list.map(n => {
               if( n.opearte_type==30) n.statusName='分派'
                if (n.list && n.list.length > 0) {
                  n.progress = [
                    n.list.filter(m => {
                      return m.is_check == 1;
                    }).length.toString(),
                    n.list.length.toString()
                  ].join('/');
                }
                n.created_time = n.created_time ? n.created_time.substr(5, 11) : '';
              let ch=(n.ch_name||'').split(','), mobile=(n.mobile||'').split(',')
                n.str_name=ch.map((i,d)=>{return (i||'')+' '+(mobile[d]||'')}).join(',');
                return n;
              })
              if(flowData[0]&&1<flowData[0].opearte_type&&flowData[0].opearte_type<3) flowData.unshift(none)
              this.flowData=flowData.reverse();
            }, false);
        });
      },
    },
    mounted() {
      if(this.rowData&&this.rowData.id) this.init(this.rowData)
    }
  }
</script>
<style>
</style>

🍓结束语🏆

拿来即用,分享给需要的人

举报

相关推荐

0 条评论