tmr-admin/src/views/formulationPlan/materialIssuancePlan/historyRecord.vue

<template>
  <div class="app-history">
    <div class="search">
      <el-date-picker v-model="table.getdataListParm.parammaps.date" type="date" placeholder="请选择历史记录时间" :clearable="false" style="width: 230px;" format="yyyy-MM-dd" value-format="yyyy-MM-dd" @change="changeDate" />
    </div>

    <div class="table">
      <el-table
        id="table"
        :key="table.tableKey"
        ref="table"
        v-loading="table.listLoading"
        element-loading-text="给我一点时间"
        :data="table.list"
        border
        highlight-current-row
        style="width: 100%;"
        :height="height"
        :row-style="rowStyle"
        :cell-style="cellStyle"
        class="elTable table-fixed"
        row-key="id"
      >
        <el-table-column label="车次" width="85px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.sort }}</span>
          </template>
        </el-table-column>
        <el-table-column label="TMR编号" width="110px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.tmrname }}</span>
          </template>
        </el-table-column>
        <el-table-column label="描述" width="110px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.display }}</span>
          </template>
        </el-table-column>
        <el-table-column label="生效" width="100px" align="center">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.sel" disabled active-color="#13ce66" inactive-color="#ff4949" :active-value="1" :inactive-value="0" @change="handleTakeEffectChange(scope.$index, scope.row)" />
          </template>
        </el-table-column>
        <el-table-column label="班次" width="100px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.timesstr }}</span>
          </template>
        </el-table-column>
        <el-table-column label="时间" width="150px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.begintime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="最大重量" width="80px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.maxweight }}</span>
          </template>
        </el-table-column>
        <el-table-column label="合计重量" width="80px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.sumweight }}</span>
          </template>
        </el-table-column>
        <el-table-column label="模板配方" width="120px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.ftname }}</span>
          </template>
        </el-table-column>
        <el-table-column label="是否提前小料拆分" width="100px" align="center">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.issplit" :disabled="scope.row.NoEdit" active-color="#13ce66" inactive-color="#ff4949" :active-value="1" :inactive-value="0" disabled />
          </template>
        </el-table-column>
        <el-table-column label="撒料" min-width="250px" align="left" header-align="center">
          <template slot-scope="scope">
            <div v-for="element in scope.row.arrList" :key="element.name" class="list">
              <el-tooltip placement="top" :open-delay="1000">
                <div slot="content">
                  <div> 栏舍全称：{{ element.barname }} </div>
                  <div> 饲料重量：{{ element.weight }} </div>
                  <!-- <div> 撒料车：{{ element.tmrname }} </div> -->
                </div>
                <div :style="{'background':element.background}" class="tmrname">{{ element.barname }}</div>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>

<script>
import { GetDataByName, postJson } from '@/api/common'
import draggable from 'vuedraggable'
import Cookies from 'js-cookie'
import { parseTime } from '@/utils/index.js'
export default {
  name: 'MaterialIssuancePlan',
  display: 'Two list header slot',
  order: 14,
  components: { draggable },
  data() {
    return {
      table: {
        getdataListParm: {
          name: 'getLppListdate',
          name1: 'getLppdListdate',
          page: 1,
          offset: 1,
          returntype: 'Map',
          parammaps: {
            pastureid: Cookies.get('pastureid'),
            date: parseTime(new Date(), '{y}-{m}-{d}')
          }
        },
        list: [],
        total: 0,
        tableKey: 0,
        listLoading: false,
        temp: {},
        changeList: [],
        startObj: {}
      },
      requestParams2: {
        name: 'getTMRListEnable', offset: 0, parammaps: { pastureid: Cookies.get('pastureid'), eqtype: '1' }
      },
      equipmentList: [], // 撒料设备
      height: document.body.clientHeight - 255 - 50, // table高度
      rowStyle: { maxHeight: 30 + 'px', height: 30 + 'px' },
      cellStyle: { padding: 0 + 'px' }
    }
  },
  created() {
    this.getList()
    this.getDownList()
  },
  methods: {
    changeDate() {
      this.getList()
    },
    getDownList() {
      GetDataByName(this.requestParams2).then(response => {
        this.equipmentList = response.data.list
      })
    },
    getList() {
      this.table.listLoading = true
      const url = 'authdata/GetArrList'
      const data = this.table.getdataListParm
      postJson(url, data).then(response => {
        console.log('table数据', response.data.list)
        if (response.data.list !== null) {
          for (let i = 0; i < response.data.list.length; i++) {
            if (response.data.list[i].arrList == null) {
              this.$set(response.data.list[i], 'arrList', [])
            }
          }
          this.table.list = response.data.list
          this.table.changeList = []
          this.table.startObj = {}
          if (response.data.total) {
            this.table.total = response.data.total
          }
        } else {
          this.table.list = []
        }

        setTimeout(() => {
          this.table.listLoading = false
        }, 100)
      })
    }
  }
}
</script>

<style  lang="scss" scoped>
 .search{margin-bottom: 10px;}
 .list{width: 60px;display: inline-block;margin: 5px 5px;text-align: center;
    .tmrname{
      width:100%;padding: 5px 5px;overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
 }
</style>