Tmr-Admin-BeefCattle/.svn/pristine/02/02350736423212e6c76bd0d1df874ae6ec7c15a2.svn-base

<template>
  <div class="app-container">
    <!-- 配方模板表 -->
    <div ref="template" class="template">
      <p class="recipeTemplate" />
      <div class="operation">
        <el-button class="success" @click="handleCreate">新生成</el-button>
        <el-button class="export" style="float: right;margin-right: 80px;" @click="handleHistoryRecord">历史记录</el-button>
        <el-button class="export" style="float: right;margin-right: 10px;" @click="handleMaterialPlan">撒料计划</el-button>
        <el-button class="export" style="float: right;margin-right: 10px;" @click="handlePremixedPlan">预混计划</el-button>
        <el-button class="export" style="float: right;margin-right: 10px;" @click="handleShedFormula">栏舍配方</el-button>
        <el-button class="export" style="float: right;margin-right: 10px;" @click="handleRecipeemplate">配方模板</el-button>
      </div>

      <div class="search">
        <el-date-picker v-model="table.getdataListParm.parammaps.date" type="date" placeholder="选择日期" style="width: 150px;" format="yyyy-MM-dd" value-format="yyyy-MM-dd" @change="changeDate" />
        <el-select v-model="table.getdataListParm.parammaps.enable" filterable placeholder="计划类型" class="filter-item" clearable style="width: 120px;">
          <el-option v-for="item in planTypeList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-select v-model="table.getdataListParm.parammaps.enable" filterable placeholder="打印类型" class="filter-item" clearable style="width: 120px;">
          <el-option v-for="item in printingTypeList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-select v-model="table.getdataListParm.parammaps.enable" filterable placeholder="班次" class="filter-item" style="width: 120px;" clearable>
          <el-option v-for="item in frequencyList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-select v-model="table.getdataListParm.parammaps.enable" filterable placeholder="计划维度" class="filter-item" style="width: 120px;" clearable>
          <el-option v-for="item in planningDimensionList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-select v-model="table.getdataListParm.parammaps.enable" filterable placeholder="导出类型" class="filter-item" style="width: 120px;" clearable>
          <el-option v-for="item in exportTypeList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-button class="export" @click="handleExport">导出</el-button>
      </div>
      <!-- 日执行计划 -->
      <div class="table">
        <el-table
          :key="table.tableKey"
          v-loading="table.listLoading"
          element-loading-text="给我一点时间"
          :data="table.list"
          border
          fit
          highlight-current-row
          style="width: 98%;"
          :row-style="rowStyle"
          :cell-style="cellStyle"
          class="elTable table-fixed"
          @row-click="tableRowClick"
        >
          <el-table-column label="序号" align="center" type="index" width="50px">
            <template slot-scope="scope">
              <span>{{ scope.$index + (table.pageNum-1) * table.pageSize + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="计划名称" min-width="130px" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.ccname }}</span>
            </template>
          </el-table-column>
          <el-table-column label="计划类型" prop="weight" min-width="130px" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.ccname }}</span>
            </template>
          </el-table-column>
          <el-table-column label="TMR编号" min-width="130px" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.ccname }}</span>
            </template>
          </el-table-column>
          <el-table-column label="驾驶员" min-width="130px" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.ccname }}</span>
            </template>
          </el-table-column>
          <el-table-column label="已执行" min-width="130px" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.ccname }}</span>
            </template>
          </el-table-column>
          <el-table-column label="班次" min-width="180px" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.ccname }}</span>
            </template>
          </el-table-column>
          <el-table-column label="理论量" min-width="180px" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.ccname }}</span>
            </template>
          </el-table-column>
          <el-table-column label="时间" min-width="180px" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.ccname }}</span>
            </template>
          </el-table-column>
          <el-table-column label="发料位" min-width="180px" align="left">
            <template slot-scope="scope">
              <span style="margin-right: 10px;">{{ scope.row.ccname }}</span>
              <span style="margin-right: 10px;">{{ scope.row.ccname }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 计划内容操作 -->
    <div class="content">
      <div class="table2">
        <p class="contentOperation" />
        <div class="content-table">
          <el-table
            :key="table2.tableKey"
            v-loading="table2.listLoading"
            element-loading-text="给我一点时间"
            :data="table2.list"
            fit
            highlight-current-row
            style="width: 100%;"
            height="450"
            :row-style="rowStyle"
            :cell-style="cellStyle"
            class="elTable table-fixed"
          >
            <el-table-column label="操作序号" min-width="130px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.number }}</span>
              </template>
            </el-table-column>
            <el-table-column label="饲料名称" prop="ccname" min-width="130px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.ccname }}</span>
              </template>
            </el-table-column>
            <el-table-column label="设计重量（KG）" prop="weight" min-width="130px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.weight }}</span>
              </template>
            </el-table-column>
            <el-table-column label="同序号设计重量合计" min-width="150px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.ccname }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>

      </div>
      <div class="table3">
        <p class="stallRetails" />
        <div class="content-table">
          <el-table
            :key="table3.tableKey"
            v-loading="table3.listLoading"
            element-loading-text="给我一点时间"
            :data="table3.list"
            height="450"
            fit
            highlight-current-row
            style="width: 100%;"
            :row-style="rowStyle"
            :cell-style="cellStyle"
            class="elTable table-fixed"
          >
            <el-table-column label=" 操作序号" min-width="130px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.ccname }}</span>
              </template>
            </el-table-column>
            <el-table-column label="计划类型" prop="weight" min-width="130px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.ccname }}</span>
              </template>
            </el-table-column>
            <el-table-column label="栏舍编号" min-width="130px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.ccname }}</span>
              </template>
            </el-table-column>
            <el-table-column label="设计重量（KG）" min-width="130px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.ccname }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>

    <!-- 新生成 -->
    <el-dialog :title="textMap[newGeneration.dialogStatus]" :destroy-on-close="true" :visible.sync="newGeneration.dialogFormVisible" :close-on-click-modal="false" width="50%">
      <div class="newGeneration">
        <el-form ref="temp" :rules="newGeneration.rules" :model="newGeneration.temp" label-position="right" label-width="155px" style="width: 100%;margin:0 auto 50px">
          <el-row>
            <el-col :span="16">
              <el-form-item label="时间范围：" prop="applyDate">
                <el-date-picker v-model="newGeneration.temp.inputDatetime" class="inputDatetime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100%;" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer" style="bottom:10px">
          <el-button class="cancel" @click="newGeneration.dialogFormVisible = false;getList()">取消</el-button>
          <el-button class="success" :disabled="isokDisable" @click="newGenerationData()">确认</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { GetDataByName, GetDataByNames } from '@/api/common'
import { MessageBox } from 'element-ui'
import Cookies from 'js-cookie'
export default {
  name: 'DailyExecutionPlan',
  data() {
    return {
      requestParams: [
        // { name: 'getDictByName', offset: 0, pagecount: 0, params: ['牲畜父类'] }
      ],
      planTypeList: [{ lable: '预混计划', value: '0' }, { lable: '发料计划', value: '1' }, { lable: '剩料计划', value: '2' }], // 计划类型
      printingTypeList: [{ lable: '所有', value: '0' }, { lable: '精料', value: '1' }, { lable: '铲车', value: '2' }], // 打印类型
      frequencyList: [{ value: '0', label: '第一班' }, { value: '1', label: '第二班' }, { value: '2', label: '第三班' }], // 班次
      planningDimensionList: [{ lable: '发料顺序', value: '0' }, { lable: 'TMR', value: '1' }], // 发料顺序
      exportTypeList: [{ lable: '投料简打', value: '0' }, { lable: '投料简打', value: '1' }], // 导出类型

      table: {
        getdataListParm: {
          name: 'getFTList',
          page: 1,
          offset: 1,
          pagecount: 10,
          returntype: 'Map',
          parammaps: {
            pastureid: Cookies.get('pastureid')
          }
        },
        tableKey: 0,
        list: [],
        total: 0,
        listLoading: false
      },

      // 计划内容操作详情
      table2: {
        getdataListParm: {
          name: 'getFTList',
          page: 1,
          offset: 1,
          pagecount: 5,
          returntype: 'Map',
          parammaps: {
            pastureid: Cookies.get('pastureid')
          }
        },
        tableKey: 0,
        list: [],
        total: 0,
        listLoading: false
      },

      // 计划内容 舍栏详情
      table3: {
        getdataListParm: {
          name: 'getFTList',
          page: 1,
          offset: 1,
          pagecount: 5,
          returntype: 'Map',
          parammaps: {
            pastureid: Cookies.get('pastureid')
          }
        },
        tableKey: 0,
        list: [],
        total: 0,
        listLoading: false
      },

      // 新生成
      newGeneration: {
        dialogFormVisible: false,
        dialogStatus: '',
        temp: {},
        rules: {}
      },
      textMap: {
        newGeneration: '新生成'
      },
      isokDisable: false,
      rowStyle: { maxHeight: 50 + 'px', height: 45 + 'px' },
      cellStyle: { padding: 0 + 'px' }
    }
  },
  mounted() {

  },
  created() {
    this.getList()
    this.getDownList()
  },
  methods: {
    getDownList() {
      GetDataByNames(this.requestParams).then(response => {
        // this.livestockTypeList = response.data.getDictByName.list
      })
    },
    // -------------------日执行计划-----------------------------
    getList() {
      this.table.listLoading = true
      GetDataByName(this.table.getdataListParm).then(response => {
        console.log('table数据', response.data.list)
        if (response.data.list !== null) {
          this.table.list = response.data.list
          this.table.pageNum = response.data.pageNum
          this.table.pageSize = response.data.pageSize
          this.table.total = response.data.total
          this.getList2()
          this.getList3()
        } else {
          this.table.list = []
        }
        setTimeout(() => {
          this.table.listLoading = false
        }, 100)
      })
    },
    changeDate(val) {
      console.log('选择了日期', val)
      this.getList()
    },

    // 新生成
    handleCreate() {
      console.log('点击了新生成')
      this.newGeneration.dialogStatus = 'newGeneration'
      this.newGeneration.dialogFormVisible = true
    },
    newGenerationData() {
      console.log('点击了新生成保存')
    },

    // 配方模板
    handleRecipeemplate() {
      console.log('点击了配方模板,页面待画')
    },
    handleShedFormula() {
      console.log('点击了栏舍配方,页面待画')
    },
    handlePremixedPlan() {
      console.log('点击了预混计划,页面待画')
    },
    handleMaterialPlan() {
      console.log('点击了撒料计划,页面待画')
    },
    handleHistoryRecord() {
      console.log('点击了历史记录,页面待画')
    },
    handleExport() {
      console.log('点击了导出')
    },

    // 日执行计划行点击
    tableRowClick(row, column, event) {
      console.log(row, column, event)
      this.getList2()
    },

    // 计划内容操作详情
    getList2() {
      this.table2.listLoading = true
      GetDataByName(this.table2.getdataListParm).then(response => {
        console.log('table数据', response.data.list)
        if (response.data.list !== null) {
          this.table2.list = response.data.list
          this.table2.list = [
            { 'number': 1, 'ccname': '泌乳牛', 'weight': 10, 'fttype': '预混配方', 'id': '3025176272438480391', 'pastureid': '3025176271438480383', 'tcolor': '55', 'tname': '预混1' },
            { 'number': 1, 'ccname': '泌乳牛', 'weight': 10, 'fttype': '预混配方', 'id': '3025176272438480390', 'pastureid': '3025176271438480383', 'tcolor': '55', 'tname': '配方2-1' },
            { 'number': 2, 'ccname': '泌乳牛', 'weight': 12, 'fttype': '预混配方', 'id': '3025176272438480385', 'pastureid': '3025176271438480383', 'tcolor': '55', 'tname': '配方2' },
            { 'number': 2, 'ccname': '水牛', 'weight': 10, 'fttype': '饲喂配方', 'id': '3025176271437480384', 'pastureid': '3025176271438480383', 'tcolor': '55', 'tname': '配方1' },
            { 'number': 2, 'ccname': '水牛', 'weight': 10, 'fttype': '饲喂配方', 'id': '3025176271437480384', 'pastureid': '3025176271438480383', 'tcolor': '55', 'tname': '配方1' }
          ]
          const arr = []
          let a = 0
          let b = this.table2.list[0].number
          let c = 0
          for (let i = 0; i < this.table2.list.length; i++) {
            if (b !== parseInt(this.table2.list[i].number)) {
              b = this.table2.list[i].number
              arr.push({ 'number': '小计', 'weight': a })
              a = 0
            }
            a = a + this.table2.list[i].weight
            c = c + this.table2.list[i].weight

            arr.push(this.table2.list[i])
          }
          arr.push({ 'number': '小计', 'weight': a })
          arr.push({ 'number': '总计', 'weight': c })
          this.table2.list = arr
          console.log(this.table2.list)
          this.table2.pageNum = response.data.pageNum
          this.table2.pageSize = response.data.pageSize
          this.table2.total = response.data.total
        } else {
          this.table2.list = []
        }
        setTimeout(() => {
          this.table2.listLoading = false
        }, 100)
      })
    },

    // 计划内容栏舍详情
    getList3() {
      this.table3.listLoading = true
      GetDataByName(this.table3.getdataListParm).then(response => {
        console.log('table数据', response.data.list)
        if (response.data.list !== null) {
          this.table3.list = response.data.list
          this.table3.pageNum = response.data.pageNum
          this.table3.pageSize = response.data.pageSize
          this.table3.total = response.data.total
        } else {
          this.table3.list = []
        }
        setTimeout(() => {
          this.table3.listLoading = false
        }, 100)
      })
    }

  }
}
</script>
<style lang="scss" scoped>
  .operation{margin-bottom:10px;}
  .search{margin-top:10px;}
  .table{margin-top:10px;}

  .template{
    background: #fff;
    position: relative;
    .recipeTemplate{
      width: 72px;
      height: 70px;
      position: absolute;
      background: url(../../../assets/images/bg3.jpg) no-repeat;
      right: 0;
      top: 0;
      margin: 0;
    }
  }

  .table2{
    float: left;width: 49%;margin-right: 1%;background: red;
    background: #fff;
    position: relative;
    .contentOperation{
      width: 72px;
      height: 70px;
      position: absolute;
      background: url(../../../assets/images/bg4.jpg) no-repeat;
      right: 0;
      top: 0;
      margin: 0;
    }
    .content-table{margin-top: 70px;}
  }
  .table3{
    float: left;
    width: 49%;
    background: #fff;
    position: relative;
    .stallRetails{
      width: 72px;
      height: 70px;
      position: absolute;
      background: url(../../../assets/images/bg5.jpg) no-repeat;
      right: 0;
      top: 0;
      margin: 0;
    }
    .content-table{margin-top: 70px;}
  }
 </style>