logpm_page/src/views/distribution/signdetail/distributionSigndetail.vue

<template>
  <basic-container>
    <div class="avue-crud">
      <el-row v-if="!search" class="el_row_top">
        <!-- 查询模块 -->
        <el-form :inline="true" :model="query" class="fr-fm el_from_top" >
          <div class="fr-fo">

            <el-form-item label="类型:">
              <el-select  v-model="searchType" placeholder="请选择搜索类型" @change="changetypesof" style="width:200px">
                <el-option
                        v-for="item in searchTypeDate"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="title+':'">
              <el-input v-model="query.searchCode" :placeholder="'请输入'+title"></el-input>
            </el-form-item>
          </div>
          <!-- 查询按钮 -->
          <el-form-item class="el-btn">
            <el-button type="primary" icon="el-icon-search" @click="searchChange">搜 索</el-button>
            <el-button icon="el-icon-delete" @click="searchReset()">清 空</el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <el-row>
        <div class="avue-crud__header">
          <!-- 头部左侧按钮模块 -->
<!--          <div class="avue-crud__left">-->
<!--            <el-button type="danger" icon="el-icon-download" @click="handleExportInfo" plain-->
<!--            >导出-->
<!--            </el-button>-->
<!--            &lt;!&ndash;            v-loading.fullscreen.lock="fullscreenLoading"&ndash;&gt;-->
<!--            <el-button type="danger" icon="el-icon-picture" @click="handlePictureInfo" plain-->
<!--            >导出图片-->
<!--            </el-button>-->
<!--          </div>-->
          <!-- 头部右侧按钮模块 -->
          <div class="avue-crud__right">
            <el-button icon="el-icon-refresh" @click="searchChange" circle></el-button>
            <el-button icon="Operation" @click="showdrawer(true)" circle></el-button>
            <el-button icon="el-icon-search" @click="searchHide" circle></el-button>
          </div>
        </div>
      </el-row>
      <div class="block">
        <el-timeline>
          <el-timeline-item
                  v-for="(activity, index) in activities"
                  :key="index"
                  :icon="activity.icon"
                  :type="activity.type"
                  :color="activity.color"
                  :size="activity.size"
                  :timestamp="activity.timestamp">
            {{activity.content}}
            <el-card>
              <p>操作人:{{activity.nodeUserName}}</p>
              <p>描述:{{activity.nodeInfo}}</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
  </basic-container>
</template>

<script>
  import {
    searchNode
  } from '@/api/distribution/distributionSignfor';

  export default {
  data() {
    return {
      search:false,
      reverse: true,
      query:{},
      title:'请选择类型',
      searchType:'',
      searchTypeDate:[
        {
          value: '1',
          label: '配送单号'
        },
        {
          value: '2',
          label: '预约单号'
        },
        {
          value: '3',
          label: '自提单号'
        },
        {
          value: '4',
          label: '备货单号'
        },
      ],
      activities: []
    };
  },
  mounted() {},
  computed: {},
  methods: {

    searchHide() {
      this.search = !this.search;
    },
    changetypesof(val){
      console.log(val);
    this.title=  this.searchTypeDate.find(res=>res.value==val).label
    },
    searchChange() {
      if (this.searchType == '' || this.searchType === undefined){
        this.$message.warning("请选择搜索类型");
        return;
      }
      searchNode(this.searchType,this.query.searchCode).then(res=>{
        const data = res.data.data;
        let  bbb = data.map(item=>{
         return   {
            content : item.nodeName,
            content : item.nodeName,
            color: '#0bbd87',
            timestamp : item.time,
            nodeUserName : item.nodeUserName,
            nodeInfo : item.nodeInfo,
          }
        })
        console.log("bbb-------->",bbb);
        this.activities = bbb;
        console.log("res=>",res);
      })
    },
    searchReset() {
      this.query = {};
      this.searchType = '';
    },
  },
};
</script>

<style  scoped lang="scss">
  .el_row_top{
  .el-form{
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  .el-btn{
    margin-right: 0;
  }
  }
</style>