yos_web/src/HManagement/task/modules/detail.vue

<template>
  <div>
    <basicDetails
        ref="details"
        :titleText="`${mainData.title}`"
        :oldFormPath="{edit:'HManagement/task/modules'}"
        :editData="mainData"
        :mainAreaData="mainAreaData"
        turnPageId="20220901162901"
        idname="sys_taskid"
        ownertable="sys_task"
        tags=""
        :tabs="['任务信息']"
        @pageChange="pageChange"
        @onEditSuccess="queryMainData($route.query.id)">
      <div slot="customOperation" >
        <complete-task :data="mainData" style="display:inline" @onSuccess="queryMainData()"></complete-task>
        <el-button class="inline-16" type="default" size="mini" @click="deleteTask">删 除</el-button>
      </div>
      <div slot="slot0" class="task__content">
        <p class="mt-10">标题:{{mainData.title}}</p>
        <p>内容:{{mainData.remarks}}</p>
        
      </div>
      <div slot="slot1" >
      </div>
    </basicDetails>
  </div>
</template>

<script>
import completeTask from './completeTask.vue'
export default {
  name: "detail",
  data() {
    return {
      mainData:{},
      mainAreaData:{}
    }
  },
  components:{
    completeTask
  },
  methods:{
    async queryMainData(id) {
      const res = await this.$api.requested({
        "id":20221211111901,
        "content": {
          "sys_taskid": this.$route.query.id
        }
      })
      this.mainData = res.data
      this.changeDataStructure()
    },
    changeDataStructure() {
      let that = this
      this.mainAreaData = [
        {
          label:'创建人',
          value:this.mainData.createby
        },
        {
          label:'创建时间',
          value:this.mainData.createdate
        },
        {
          label:'开始时间',
          value:this.mainData.starttime
        },
        {
          label:'结束时间',
          value:this.mainData.endtime?this.mainData.endtime:'无限'
        },
        {
          label:'提醒时间',
          value:this.mainData.remindday?`${this.mainData.remindday}天`:'无需提醒'
        },
        {
          label:'状态',
          value:this.mainData.status,
          style:()=>{
            let color = ''
            switch (this.mainData.status) {
              case '待执行':
                color = '#3874f6'
                break;
              case '进行中':
                color = '#52c41a'
                break;
              case '已完成':
                color = '#333333'
                break;
              default:
                break;
            }
            return{color:color}
          }
        }
      ]
    },
    // 监听切换数据,上一页,下一页
    pageChange (id,rowindex,tabIndex) {

      this.$refs['details'].param.content.type = this.$route.query.type

      tabIndex = this.$route.query.tabIndex

      this.$router.replace({path:'/taskDetails',query:{id:id,rowindex:rowindex,tabIndex:tabIndex,type:this.$route.query.type}})
      this.queryMainData(id)
    },
    onSuccess(){
      this.queryMainData(this.$route.query.id)
      this.$emit('onSuccess')
    },
    deleteTask () {
      this.$confirm('是否要删除当前任务?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          const res = await this.$api.requested({
            "id":20221211112601,
            "content": {
              "sys_taskid":this.mainData.sys_taskid
            }
          })
          this.tool.showMessage(res,()=>{
            this.$store.dispatch('changeDetailDrawer',false)
          })
        }).catch((err) => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    }
  },
  mounted () {
    this.queryMainData(this.$route.query.id)
  },
  created() {
  }
}
</script>

<style scoped>
.task__content{
  line-height: 30px;
}
</style>