yos_web/src/components/normal-basic-layout/details/modules/task/index.vue

<template>
    <div class="normal-panel mt-10">
      <div class="flex-align-center flex-between " style="border-bottom:1px solid #f1f2f3;padding:0 10px">
        <div>
          <slot name="collapse"></slot>
          任务事项
        </div>
        <addTask :ownertable="ownertable" @onSuccess="listData" :status="status" :typeTask="typeTask"></addTask>
      </div>
      <div v-if="list.length === 0">
        <el-empty description="暂无记录" :image-size="40"></el-empty>
      </div>
      <div class="task_list__panel" v-for="item in list" :key="item.sys_taskid">
        <div class="flex-align-center flex-between">
          <el-tooltip class="item" effect="dark" :content="item.title" placement="top-start">
            <p class="task_title" @click="taskDetail(item)"><b>{{item.title}}</b></p>
          </el-tooltip>
          <small>{{item.status}}</small>
          <small>{{item.starttime.split(' ')[0]}}</small>
        </div>
      </div>
    </div>
</template>

  <script>

  import addTask from './addTask.vue'
  export default {
    props:['ownertable','status','typeTask'],
    components:{
      addTask
    },
    data () {
      return {
        list:[],
        oldRoute:{}
      }
    },
    methods:{
      async listData () {
        const res = await this.$api.requested({
          "id":20220902085001,
          "content": {
            "ownertable":this.ownertable,
            "ownerid":this.$route.query.id
          }
        })
        this.list = res.data
      },
      taskDetail (item) {
        let route = this.$route
        if (route.path !== '/taskDetails') {
          this.oldRoute = {path:route.path,query:route.query}
          this.$store.dispatch('setHistoryRouter',this.oldRoute)
        }
        this.$router.replace({path:'/taskDetails',query:{id:item.sys_taskid,rowindex:item.rowindex}})
      }
    },
    mounted () {
      this.listData()
    }
  }

  </script>
  <style>
  </style>
  <style scoped>
  .normal-panel{
    border-radius: 5px;
    padding-bottom: 10px;
  }
  .task_list__panel{
    padding:0 10px;
    margin:10px 0;
  }
  .task_list__panel:last-child{
    margin-bottom: 0 !important;
  }
  .task_title{
    width: 160px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    color:#3874F6;
    text-decoration: underline;
    cursor: pointer;
  }
  .task_title + small{
    color:#999
  }
  </style>