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

<template>
  <basic-container>
    <div class="avue-crud" v-loading="loading" element-loading-text="正在查询中...">
      <div class="content-search">
        <h3>请输入任务编号，进行签收明细查询</h3>
        <div class="content">
          <el-input v-model="query.searchCode" placeholder="请输入任务编号" />
          <el-button type="primary" @click="searchChange">查询</el-button>
        </div>
      </div>
      <el-row> </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"
          >
            <el-card>
              <p>操作人:{{ activity.operator }}</p>
              <p>描述:{{ activity.content }}</p>
              <p>操作时间:{{ activity.createTime }}</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
  </basic-container>
</template>

<script>
import { searchNode } from '@/api/distribution/distributionSignfor';
import { ElMessage } from 'element-plus'
export default {
  data() {
    return {
      search: false,
      reverse: true,
      query: {},
      searchType: '',
      activities: [],
      loading: false,
    };
  },
  mounted() {},
  computed: {},
  methods: {
    searchHide() {
      this.search = !this.search;
    },
    changetypesof(val) {
      console.log(val);
      this.title = this.searchTypeDate.find(res => res.value == val).label;
    },
    async searchChange() {
      try {
        if (!this.query.searchCode) {
          ElMessage({
            message: '请输入查询条件',
            type: 'warning',
          });
          return;
        }
        this.loading = true;
        await searchNode({
          searchCode: this.query.searchCode,
        }).then(res => {
          const data = res.data.data;
          this.activities = data.map(item => {
            return {
              content: item.content,
              operator: item.operator,
              color: '#0bbd87',
              createTime: item.createTime,
              nodeUserName: item.nodeUserName,
              nodeInfo: item.nodeInfo,
            };
          });
          this.activities = data;
          console.log('  this.activities-------->', this.activities);
        });
      } catch (e) {
        console.log(e, 'error');
      } finally {
        this.loading = false;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.content-search {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 37px;
}
.content {
  margin: auto;
  display: flex;
  height: 46px;

  .el-input {
    width: 400px;
    height: 100%;
  }
  .el-button {
    width: 100px;
    height: 100%;
    border: none;
  }
}
.el_row_top {
  margin-bottom: 29px;
  padding: 19px 0;
}
.block {
  .el-card {
    padding: 0 10px;
    :deep(.el-card__body) {
      color: #d38729;
      font-size: 16px;
    }
  }
}
:deep(.el-loading-parent--relative) {
  height: 100%;
}
</style>