ccl_plm-vue/src/views/modules/sampleManagement/technicalSpecificationDetail/changeLog.vue

<script>
import {queryChangeLogList} from "../../../../api/sampleManagement/technicalSpecificationList";

export default {
  name: "changeLog",
  props:{
    row:{
      type:Object,
      required:true
    },
    height:{
      type:[Number,String],
      default:200
    }
  },
  data(){
    return{
      queryLoading:false,
      dataList:[],
      columns:[
        {
          userId: this.$store.state.user.name,
          functionId: 108002,
          serialNumber: '108002Table1BuNo',
          tableId: '108002Table1',
          tableName: '工程变更记录表',
          columnProp: 'buNo',
          headerAlign: 'center',
          align: 'center',
          columnLabel: 'BU',
          columnHidden: false,
          columnImage: false,
          status: true,
          fixed: '',
          columnWidth: 80
        },
        {
          userId: this.$store.state.user.name,
          functionId: 108002,
          serialNumber: '108002Table1ChangeNo',
          tableId: '108002Table1',
          tableName: '工程变更记录表',
          columnProp: 'changeNo',
          headerAlign: 'center',
          align: 'left',
          columnLabel: '申请编号',
          columnHidden: false,
          columnImage: false,
          status: true,
          fixed: '',
          columnWidth: 120
        },
        {
          userId: this.$store.state.user.name,
          functionId: 108002,
          serialNumber: '108002Table1ApplicantName',
          tableId: '108002Table1',
          tableName: '工程变更记录表',
          columnProp: 'applicantName',
          headerAlign: 'center',
          align: 'left',
          columnLabel: '申请人',
          columnHidden: false,
          columnImage: false,
          status: true,
          fixed: '',
          columnWidth: 120
        },
        {
          userId: this.$store.state.user.name,
          functionId: 108002,
          serialNumber: '108002Table1DepartmentName',
          tableId: '108002Table1',
          tableName: '工程变更记录表',
          columnProp: 'applicationDepartmentName',
          headerAlign: 'center',
          align: 'left',
          columnLabel: '申请部门',
          columnHidden: false,
          columnImage: false,
          status: true,
          fixed: '',
          columnWidth: 120
        },
        {
          userId: this.$store.state.user.name,
          functionId: 108002,
          serialNumber: '108002Table1ChangeStatus',
          tableId: '108002Table1',
          tableName: '工程变更记录表',
          columnProp: 'changeStatus',
          headerAlign: 'center',
          align: 'left',
          columnLabel: '变更单状态',
          columnHidden: false,
          columnImage: false,
          status: true,
          fixed: '',
          columnWidth: 100
        },
        {
          userId: this.$store.state.user.name,
          functionId: 108002,
          serialNumber: '108002Table1EcnStage',
          tableId: '108002Table1',
          tableName: '工程变更记录表',
          columnProp: 'ecnStage',
          headerAlign: 'center',
          align: 'left',
          columnLabel: 'ECN阶段',
          columnHidden: false,
          columnImage: false,
          status: true,
          fixed: '',
          columnWidth: 100
        },
        {
          userId: this.$store.state.user.name,
          functionId: 108002,
          serialNumber: '108002Table1ChangeType',
          tableId: '108002Table1',
          tableName: '工程变更记录表',
          columnProp: 'changeType',
          headerAlign: 'center',
          align: 'left',
          columnLabel: '变更类别',
          columnHidden: false,
          columnImage: false,
          status: true,
          fixed: '',
          columnWidth: 100
        },
        {
          userId: this.$store.state.user.name,
          functionId: 108002,
          serialNumber: '108002Table1EcnType',
          tableId: '108002Table1',
          tableName: '工程变更记录表',
          columnProp: 'ecnType',
          headerAlign: 'center',
          align: 'left',
          columnLabel: 'ECN种类',
          columnHidden: false,
          columnImage: false,
          status: true,
          fixed: '',
          columnWidth: 100
        },
        {
          userId: this.$store.state.user.name,
          functionId: 108002,
          serialNumber: '108002Table1ApplyDate',
          tableId: '108002Table1',
          tableName: '工程变更记录表',
          columnProp: 'applyDate',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '申请日期',
          columnHidden: false,
          columnImage: false,
          status: true,
          fixed: '',
          columnWidth: 100
        },
        {
          userId: this.$store.state.user.name,
          functionId: 108002,
          serialNumber: '108002Table1ChangePhaseInDate',
          tableId: '108002Table1',
          tableName: '工程变更记录表',
          columnProp: 'changePhaseInDate',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '变更生效日期',
          columnHidden: false,
          columnImage: false,
          status: true,
          fixed: '',
          columnWidth: 100
        },
        {
          userId: this.$store.state.user.name,
          functionId: 108002,
          serialNumber: '108002Table1xxx',
          tableId: '108002Table1',
          tableName: '工程变更记录表',
          columnProp: 'xxx',
          headerAlign: 'center',
          align: 'center',
          columnLabel: 'ECN执行日期',
          columnHidden: false,
          columnImage: false,
          status: true,
          fixed: '',
          columnWidth: 100
        },
      ],
    }
  },
  watch:{
    row(newVal,oldVal){
      this.queryChangeLogList();
    },
    queryLoading(newVal,oldVal){
      if (!newVal){
        setTimeout(()=>{
          this.queryLoading = false;
        },10000)
      }
    }
  },
  methods:{
    queryChangeLogList(){
      let params = {
        site:this.row.site,
        codeNo:this.row.codeNo,
      }
      this.queryLoading = true;
      queryChangeLogList(params).then(({data})=>{
        if (data && data.code === 0){
          this.dataList = data.rows;
        }else {
          this.$message.warning(data.msg);
        }
        this.queryLoading = false;
      }).catch((error)=>{
        this.$message.error(error);
        this.queryLoading = false;
      })
    }
  },
}
</script>

<template>
<div>
  <el-table
    :data="dataList"
    border v-loading="queryLoading" :height="height">
    <el-table-column
      v-for="(item,index) in columns" :key="index"
      :sortable="item.columnSortable"
      :prop="item.columnProp"
      :header-align="item.headerAlign"
      :show-overflow-tooltip="item.showOverflowTooltip"
      :align="item.align"
      :fixed="item.fixed === ''?false:item.fixed"
      :min-width="item.columnWidth"
      :label="item.columnLabel">
      <template slot-scope="scope">
        <span v-if="!item.columnHidden">{{ scope.row[item.columnProp] }}</span>
        <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]" style="width: 100px; height: 80px"/></span>
      </template>
    </el-table-column>
  </el-table>
</div>
</template>

<style scoped>

</style>