Tmr-Admin-BeefCattle/.svn/pristine/af/afa03fcd6c58e237ff91d4739c6e53d5297b8265.svn-base

<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="撒料" width="950px" align="center">
          <template slot-scope="scope">
            <draggable id="2" data-source="juju" :list="scope.row.arrList" class="list-group2" draggable=".item" group="a">
              <div v-for="element in scope.row.arrList" :key="element.name" :style="{'background':element.background}" class="list-group-item2 item" style="width: 100px;float: left;border-radius:5px;margin: 5px 5px;padding: 0;height: 60px;">
                <span :style="{'background':element.background}" style="display: block;height:20px;line-height: 20px;border-radius:5px;position: relative;color:#fff;">
                  {{ element.barname }}
                  <!-- <i class="el-icon-close" style="position: absolute;right: 0;" /> -->
                </span>
                <div style="margin-top: 7px;">
                  <el-tooltip placement="top">
                    <div slot="content">{{ element.tmrname }}</div>
                    <el-select v-model="element.tmrid" disabled placeholder="撒料设备" class="filter-item2" style="display: inline-block;width: 55px;">
                      <el-option v-for="item in equipmentList" :key="item.id" :label="item.tmrmix" :value="item.id" />
                    </el-select>
                  </el-tooltip>
                  <el-tooltip placement="top">
                    <div slot="content">{{ element.weight }}</div>
                    <el-input v-model="element.weight" disabled type="number" placeholder="重量" step="0.01" class="filter-item2" style="display: inline-block;width: 40px;" @blur="(value)=> {blurWeight(scope.row,element.fttype,element.id)}" />
                  </el-tooltip>
                </div>
              </div>
            </draggable>
          </template>
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>

<script>
import { GetDataByName, GetArrList } 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: 50 + 'px', height: 45 + '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
      GetArrList(this.table.getdataListParm).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;}
</style>