yos_web/src/HDrpManagement/serviceImprovement/components/actionImplementation/index.vue

<template>
  <div>
    <div style="display:flex;justify-content: space-between;">
      <table-detail ref="tableRef" :layout="tablecols" :data="list" :opwidth="200" :custom="true" style="margin-top: 10px" @rowClick="rowClick" >
        <template v-slot:customcol="scope">
          <div v-if="scope.column.columnname == 'status'">
            <div :style="tool.getStatusColor(scope.column.data[scope.column.columnname])">{{scope.column.data[scope.column.columnname]}}</div>
          </div>
          <div v-else>{{scope.column.data[scope.column.columnname]}}</div>
        </template>
      </table-detail>
      <div style="width: 45%" id="gantt222">
        <ganttChart :data="list" style="margin-top: 10px" ref="chartRef" clickCan="可以点击" @taskDetail="taskDetail"></ganttChart>
      </div>
    </div>
    <div style="margin-top: 20px">
      <actionDetail v-if="detailShow" ref="actionRef" :data="selectData" :mainData="mainData" @recordSet="recordSet"></actionDetail>
    </div>
  </div>
</template>

<script>
import actionDetail from './actionDetail'
import ganttChart from '../improvementPlan/ganttChart'
export default {
  name: "index",
  components:{actionDetail,ganttChart},
  props:['mainData'],
  data(){
    return {
      param:{
        "id": 2026020210235502,
        "content": {
          "sa_service_improvementid": this.$route.query.id,
          "pageNumber": 1,
          "pageSize": 99
        },
      },
      tablecols:[],
      list:[],
      total:0,
      currentPage:0,
      userid:JSON.parse(sessionStorage.getItem('active_account')).userid,
      detailShow:false,
      selectData:'',
      nowIndex:''
    }
  },
  methods:{
    async listData(data){
      const res = await this.$api.requested(this.param)
      this.list = res.data
      console.log(res.data,'方案列表')
      this.$refs.chartRef.setList(this.list)
      if (data){
        this.list.forEach(item =>{
          if (item.sa_service_improvement_planid == data){
            this.selectData = item
          }
        })
        this.$refs.actionRef.listData()
      }

    },
    rowClick(data){
      this.selectData = data
      this.detailShow = true
      this.$nextTick(()=>{
        this.$refs.actionRef.listData()
      })
    },
    recordSet(data){
      this.listData(data)
    },
    taskDetail(data){

      this.detailShow = true
      this.list.forEach(item =>{
        if (item.sa_service_improvement_planid == data.id){
          this.selectData = item
        }
      })
      this.$nextTick(()=>{
        this.$refs.actionRef.listData()
      })
    }
  },
  created() {
    this.tablecols = this.tool.tabelCol(this.$route.name).improvementActionTable.tablecols
  }
}
</script>

<style scoped>
.el-table .success-row {
  background: #50c50f;
}
</style>