calf-feed-pc/src/views/formulaPlan/FormulaTemplate.vue

<template>
 
  <div>


    <el-card class="box-card">
      <!-- 搜索区域 -->
      <div class="search-bx1">
          <el-input v-model="searchData.name" placeholder="配方名称"  style="width: 180px;" class="g-mr20 g-mb20" clearable />

          <el-select v-model="searchData.calf_category_id" filterable placeholder="犊牛类型" class="g-mr20" style="width: 180px;" clearable>
            <el-option v-for="item in calfTypeList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
 
          <el-input-number v-model="searchData.min_daily_age" style="width:120px;" :controls="false" placeholder="日龄" />
          <span style="margin:0px 8px;">至</span>
          <el-input-number v-model="searchData.max_daily_age" style="width:120px;" class="g-mr20" :controls="false" placeholder="日龄" />

      


          <el-button type="primary"   @click="form_search">搜索</el-button>
          <el-button type="primary"   @click="form_clear">重置</el-button>
          <el-button type="primary"   v-if="isButtonEdit"  @click="form_add">添加</el-button>
           <!-- <el-button type="primary"   @click="form_export">导出</el-button> -->
      </div>

 
      <!-- 表格 -->
      <el-table   key="0"  :data="tableList"  v-loading="tableLoading" element-loading-text="给我一点时间"    border fit>
        <el-table-column label="序号"  width="50px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="配方名称" min-width="150px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="犊牛类型" min-width="150px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.calf_category_name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="适用日龄" min-width="150px" align="center">
          <template slot-scope="scope">
            <span>{{   }}</span>
          </template>
        </el-table-column>
        <el-table-column label="配方阶段数" min-width="150px" align="center">
          <template slot-scope="scope">
            <span>{{   }}</span>
          </template>
        </el-table-column>
        <el-table-column label="公犊增重指标（KG/日）" min-width="150px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.male_calf_daily_weight }}</span>
          </template>
        </el-table-column>
        <el-table-column label="母犊增重指标（KG/日）" min-width="150px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.female_calf_daily_weight }}</span>
          </template>
        </el-table-column>
        

        <el-table-column label="操作" align="center" width="300" class-name="small-padding fixed-width" fixed="right">
          <template slot-scope="scope">
             <!-- 修改按钮 -->
             <el-button type="primary"  v-if="isButtonEdit"  size="mini" icon="el-icon-edit" @click="form_edit(scope.row)">修改</el-button>
             <!-- 删除按钮 -->
             <el-button type="danger"  v-if="isButtonEdit"  size="mini" icon="el-icon-delete" @click="form_delete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination  @size-change="change_size_page"  @current-change="change_current_page"  :current-page="searchData.page" :page-sizes="[1,5,10,20,30,50]"  :page-size="searchData.page_size" layout="total, prev, pager, next" :total="searchData.total"/>
    </el-card>


    <!-- 弹窗 新增or修改 -->
    <el-dialog  :title="addFormTxt[addFormStatus]" :visible.sync="addFormShow" @close="add_dialog_close" width="80%">
      <div class="">
        <el-form  ref="addFormRef"  :rules="addFormRules"  :model="addForm"  label-position="right" label-width="160px"  style="width:80%;margin:0 auto 50px">

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="配方名称：" prop="name">
                <el-input v-model="addForm.name"      />
              </el-form-item>  
            </el-col> 
            <el-col :span="12">
              <el-form-item label="犊牛类型：" prop="calf_category_id">
                <el-select  v-model="addForm.calf_category_id" filterable placeholder="请选择" class="filter-item" style="width: 100%;" >
                  <el-option v-for="item in calfTypeList" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item> 
            </el-col> 
         </el-row>  

         <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="公犊增重指标(KG/日)：" prop="male_calf_daily_weight">
                <el-input v-model="addForm.male_calf_daily_weight"    placeholder="建议填写，用以统计牛只成长达标率"   />
              </el-form-item>  
               
            </el-col> 
            <el-col :span="12">
              <el-form-item label="母犊增重指标(KG/日)：" prop="female_calf_daily_weight">
                <el-input v-model="addForm.female_calf_daily_weight"    placeholder="建议填写，用以统计牛只成长达标率"   />
              </el-form-item> 
            </el-col> 
         </el-row>  

         
 
         <el-row :gutter="20"  >
            <el-button type="primary"   @click="add_step">增加一个阶段</el-button>
         </el-row>  


         <el-row>
            <!-- 表格 -->
            <el-table   key="0"  ref="tableStep" :data="tableListStep"  v-loading="tableLoadingStep" element-loading-text="给我一点时间"    border fit>
              <el-table-column label="阶段"  width="50px" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.id }}</span>
                </template>
              </el-table-column>
              <el-table-column label="开始日龄" min-width="150px" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.start_daily_age }}</span>
                </template>
              </el-table-column>
              <el-table-column label="结束日龄" min-width="150px" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.end_daily_age }}</span>
                </template>
              </el-table-column>
              <el-table-column label="饲料类型" min-width="150px" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.forage_name }}</span>
                </template>
              </el-table-column>
              <el-table-column label="日饲喂量(kg)" min-width="150px" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.daily_feed_number }}</span>
                </template>
              </el-table-column>
              <el-table-column label="第一班占比(%)" min-width="150px" align="center" >
                <template slot-scope="scope">
                  <span>{{ scope.row.first_class_ratio }}</span>
                </template>
              </el-table-column>
              <el-table-column label="第二班占比(%)" min-width="150px" align="center" v-if="class_num == 2 || class_num == 3 || class_num == 4">
                <template slot-scope="scope">
                  <span>{{ scope.row.second_class_ratio }}</span>
                </template>
              </el-table-column>
              <el-table-column label="第三班占比(%)" min-width="150px" align="center" v-if=" class_num == 3 || class_num == 4">
                <template slot-scope="scope">
                  <span>{{ scope.row.third_class_ratio }}</span>
                </template>
              </el-table-column>
              <el-table-column label="第四班占比(%)" min-width="150px" align="center" v-if="  class_num == 4">
                <template slot-scope="scope">
                  <span>{{ scope.row.fourth_class_ratio }}</span>
                </template>
              </el-table-column>
              <el-table-column label="班次允许误差(kg)" min-width="150px" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.allow_class_error }}</span>
                </template>
              </el-table-column>
              <el-table-column label="饲喂温度℃" min-width="150px" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.feed_temp }}</span>
                </template>
              </el-table-column>
              <el-table-column label="允许温差℃" min-width="150px" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.allow_temp_error }}</span>
                </template>
              </el-table-column>
              

              <el-table-column label="操作" align="center" width="300" class-name="small-padding fixed-width" fixed="right">
                <template slot-scope="scope">
                  <!-- 修改按钮 -->
                  <el-button type="primary"  v-if="isButtonEdit"  size="mini" icon="el-icon-edit" @click="edit_step(scope.$index, scope.row)">修改</el-button>
                  <!-- 删除按钮 -->
                  <el-button type="danger"  v-if="isButtonEdit" size="mini" icon="el-icon-delete" @click="delete_step(scope.$index, scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
         </el-row>  
         
 
            
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="addFormStatus==='create'?add_dialog_save():edit_dialog_save()">确认</el-button>
          <el-button @click="addFormShow = false">关闭</el-button>
        </div>
      </div>
    </el-dialog>

     <!-- 弹窗 新增or修改 -->
     <el-dialog  :title="addFormTxtStep[addFormStatusStep]" :visible.sync="addFormShowStep" @close="add_step_close" width="80%">
      <div class="">
        <el-form  ref="addFormRefStep"  :rules="addFormRulesStep"  :model="addFormStep"  label-position="right" label-width="150px"  style="width:80%;margin:0 auto 50px">

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="阶段："  >
                <el-input v-model="addFormStep.id"    placeholder=""  disabled />
              </el-form-item>  
            </el-col>  
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="开始日龄：" prop="start_daily_age">
                <el-input v-model="addFormStep.start_daily_age"    placeholder=""   />
              </el-form-item>  
               
            </el-col> 
            <el-col :span="12">
              <el-form-item label="结束日龄：" prop="end_daily_age">
                <el-input v-model="addFormStep.end_daily_age"    placeholder=""   />
              </el-form-item> 
            </el-col> 
         </el-row>  
         <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="饲料类型：" prop="forage_id">
                <el-select  v-model="addFormStep.forage_id" filterable placeholder="请选择"  style="width: 100%;" >
                  <el-option v-for="item in forageList" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item> 
            </el-col> 
            <el-col :span="12">
              <el-form-item label="日饲喂量(kg)：" prop="daily_feed_number">
                <el-input v-model="addFormStep.daily_feed_number"    placeholder=""   />
              </el-form-item> 
            </el-col> 
         </el-row>  
         <el-row :gutter="20">
          <el-col :span="12">
              <el-form-item label="第一班占比(%)：" prop="first_class_ratio">
                <el-input v-model="addFormStep.first_class_ratio"    placeholder=""   />
              </el-form-item> 
            </el-col> 
            <el-col :span="12">
              <el-form-item label="第二班占比(%)：" prop="second_class_ratio" v-if="class_num == 2 || class_num == 3 || class_num == 4">
                <el-input v-model="addFormStep.second_class_ratio"    placeholder=""   />
              </el-form-item> 
            </el-col> 
         </el-row>  
         <el-row :gutter="20">
          <el-col :span="12">
              <el-form-item label="第三班占比(%)：" prop="third_class_ratio" v-if=" class_num == 3 || class_num == 4">
                <el-input v-model="addFormStep.third_class_ratio"    placeholder=""   />
              </el-form-item> 
            </el-col> 
            <el-col :span="12">
              <el-form-item label="第四班占比(%)：" prop="fourth_class_ratio" v-if=" class_num == 4">
                <el-input v-model="addFormStep.fourth_class_ratio"    placeholder=""   />
              </el-form-item> 
            </el-col> 
         </el-row>  
         
         <el-row :gutter="20">
          <el-col :span="12">
              <el-form-item label="饲喂温度℃：" prop="feed_temp">
                <el-input v-model="addFormStep.feed_temp"    placeholder=""   />
              </el-form-item> 
            </el-col> 
            <el-col :span="12">
              <el-form-item label="允许温差℃：" prop="allow_temp_error">
                <el-input v-model="addFormStep.allow_temp_error"    placeholder=""   />
              </el-form-item> 
            </el-col> 
         </el-row>  
         <el-row :gutter="20">
          <el-col :span="12">
              <el-form-item label="班次允许误差(kg)：" prop="allow_class_error">
                <el-input v-model="addFormStep.allow_class_error"    placeholder=""   />
              </el-form-item> 
            </el-col> 
            <el-col :span="12">
             
            </el-col> 
         </el-row>  

            
           
            
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="addFormStatusStep==='create'?add_step_save():edit_step_save()">确认</el-button>
          <el-button @click="addFormShowStep = false">关闭</el-button>
        </div>
      </div>
    </el-dialog>

    
  </div>


</template> 

<script>
import {  ajaxDataGet, ajaxDataPost, ajaxDataPut, ajaxDataDelete, checkButtons} from '@/api/common'
import { parseTime, json2excel } from '@/utils/index.js'
export default {
  data() {


    
 
  
    return {

 

      //接口 - 获取 - 表格
      url_get_table:'/api/v1/ops/formula_plan/formula/list',
      //接口 - 新增 - 表格
      url_add_table:'/api/v1/ops/formula_plan/formula/add',  
      //接口 - 修改 - 表格
      url_edit_table:'/api/v1/ops/formula_plan/formula/update', 
      //接口 - 删除 - 表格
      url_delete_table:'/api/v1/ops/formula_plan/formula', 
      
      //接口 - 下拉框 列表 
      url_get_select1:'/api/v1/ops/calf_feed/enum/list',

      //接口 - 下拉框 列表 栏舍组
      url_get_select2:'/api/v1/ops/barn_group/list?page=1&page_size=1000',

      //按钮权限
      isButtonEdit:false,

      //获取 - 表格数据 - 参数
      searchData:{
        calf_code: "",
        barn_name: "",
        mother_code: "",
        calf_category_id:undefined,
        genders: undefined,
        status: undefined,
        min_daily_weight_gain: undefined,
        max_daily_weight_gain: undefined,
        min_daily_age: undefined,
        max_daily_age: undefined,
        page: 1,  //页码
        page_size: 10,   //每页数量
        total:0,  //总页数
        pastureId: ""
      },
      tableLoading: false,
      //表格内容
      tableList:[
        //  { username:"admin", id:100, date:'2023-12-01',email:'测试信息1123',roleList:[2,3] },
        // { username:"epans", id:200, date:'2023-12-01',email:'测试信息1123',roleList:[] },
        // { username:"derek", id:300, date:'2023-12-01',email:'测试信息1123' },
        // { username:"admin", id:100, date:'2023-12-01',email:'测试信息1123' },
        // { username:"epans", id:200, date:'2023-12-01',email:'测试信息1123' },
        // { username:"derek", id:300, date:'2023-12-01',email:'测试信息1123' },
        // { username:"admin", id:100, date:'2023-12-01',email:'测试信息1123' },
        // { username:"epans", id:200, date:'2023-12-01',email:'测试信息1123' },
        // { username:"derek", id:300, date:'2023-12-01',email:'测试信息1123' },
        // { username:"admin", id:100, date:'2023-12-01',email:'测试信息1123' },
        // { username:"epans", id:200, date:'2023-12-01',email:'测试信息1123' },
        // { username:"derek", id:300, date:'2023-12-01',email:'测试信息1123' },
      ],



     
      



      //栏舍状态
      statusList:[
        {id: 1, value: '正常'},
        {id: 2, value: '空栏'},
        {id: 3, value: '损坏'},
      ],

    

      //犊牛类型
      calfTypeList:[
         
      ],

    //栏舍
      cowsheList:[
         
      ],
       //饲料
      forageList:[

      ],

      sexList:[
        {id: 1, value: '公'},
        {id: 2, value: '母'},
      ],

  

 

      addFormShow:false,
      addFormStatus: '',
      addFormTxt: {  edit: '修改',  create: '新增' },
      addForm:{
        name:'',id:'' ,calf_category_id:undefined, male_calf_daily_weight:undefined, female_calf_daily_weight:undefined, 
      },
      addFormRules:{
        name: [ { required: true, message: '配方名称必填', trigger: 'blur' },  ],
        calf_category_id: [ { required: true, message: '犊牛类型必填', trigger: 'blur' },  ],
      },


      stepIndex:undefined,

      tableLoadingStep: false,
      //表格内容
      tableListStep:[
     
      ],

      addFormShowStep:false,
      addFormStatusStep: '',
      addFormTxtStep: {  edit: '修改',  create: '新增' },
      addFormStep:{
        name:'',id:'' , start_daily_age:undefined,end_daily_age:undefined,forage_id:undefined,forage_name:'',daily_feed_number:undefined,first_class_ratio:undefined,second_class_ratio:undefined,third_class_ratio:undefined,fourth_class_ratio:undefined,allow_class_error:undefined,feed_temp:undefined,feed_temp:undefined,allow_temp_error:undefined,
      },
 
      addFormRulesStep:{
        // name: [
        //   { required: true, message: '类型必填', trigger: 'blur' },
        // ],
      },

 
      class_num:4
       
    }
  },
  created(){
     
     //获取按钮权限
     const isButtonEdit = checkButtons(this.$store.state.buttonsList, "配方模板编辑")
      this.isButtonEdit = isButtonEdit
      console.log('this.isButtonEdit==========',this.isButtonEdit)
     

     var me = this

     //获取下拉框
     this.get_select_list1()

     //表格 - 初始化 
     setTimeout(function () {
       me.get_table_data()
			}, 1000);

     
//  this.get_table_data()
    
  },
  methods:{

    
    
    //获取 下拉框
    get_select_list1(){
        var me = this
         


        ajaxDataPost('/api/v1/ops/base_setting/calf_type/list?page=1&page_size=1000', {name:"" }).then(e => {
            console.log("穿梭框1：",e)

            //打印请求成功结果
            if(e.data.list == null || e.data.list == undefined ||e.data.list.length == 0   ){
              me.calfTypeList = []
            } else {
              me.calfTypeList = e.data.list
            }

        })




        ajaxDataPost('/api/v1/ops/barn/list?page=1&page_size=1000', {name:"",barn_group_name:"",status:undefined}).then(e => {
            console.log("穿梭框1：",e)

            //打印请求成功结果
            if(e.data.list == null || e.data.list == undefined ||e.data.list.length == 0   ){
              me.cowsheList = []
            } else {
              me.cowsheList = e.data.list
            }

        })



        


        ajaxDataGet('/api/v1/ops/base_setting/forage/list?page=1&page_size=1000', {  }).then(e => {
          console.log("饲料下拉框1：",e)

          //打印请求成功结果
          if(e.data.list == null || e.data.list == undefined ||e.data.list.length == 0   ){
            me.forageList = []
          } else {
            me.forageList = e.data.list
          }
  
        })
        // 班次数量下拉框
        ajaxDataGet('/api/v1/ops/calf_feed/enum/list').then(e => {
          console.log(e)
          if(e.code === 200){
            var class_num = e.data.class_list.length
          } else {
            var class_num = 4
          }
          console.log("class_num========",class_num)
          me.class_num = class_num
        })


    
    },

    
    //获取 表格
    get_table_data() {
 
     var me = this

     me.tableLoading = true
     console.log("searchData======>", me.searchData)


     

     if( me.searchData.calf_category_id == ""){
        me.searchData.calf_category_id = undefined
      }


      var send_url = me.url_get_table + '?page=' + me.searchData.page +  '&page_size=' + me.searchData.page_size

      ajaxDataPost(send_url,  me.searchData).then(e => {
        console.log("表格请求结果：",e)
          //打印请求成功结果
          if(e.code == 200 ){
            me.tableList = e.data.list
            me.searchData.total = e.data.total;	// 总数
            me.searchData.page = e.data.page;	//页码
            me.searchData.page_size = e.data.page_size;	//每页数量
           
          } else {
            me.$message({ type: 'error', message: '请求表格列表失败！' + e.msg, duration: 2000 })
          }

          setTimeout(() => {
            me.tableLoading = false
          }, 100)
  
        })

       
    },
    //搜索 查询表格
    form_search(){
      var me = this
      console.log('请求表格列表searchData',me.searchData)
      me.get_table_data()

    },

    //重置 表格
    form_clear(){
      var me = this
      me.searchData.calf_code = ""
      me.searchData.barn_name = ""
      me.searchData.mother_code = ""
      me.searchData.calf_category_id = undefined
      me.searchData.genders = undefined
      me.searchData.status = undefined
      me.searchData.min_daily_weight_gain = undefined
      me.searchData.max_daily_weight_gain = undefined
      me.searchData.min_daily_age = undefined
      me.searchData.max_daily_age = undefined
 


      me.get_table_data()
    },

    //监听 page_size 改变的事件
    change_size_page(item){
      console.log(item)
     // this.searchData.page_size = item
      //  this.getUserList()
    },

    //监听 page 改变的事件
    change_current_page(item){
      console.log(item)
       this.searchData.page = item
       this.get_table_data()
    },

    //清空弹窗表单信息
    reset_form(){
      this.addForm.name = ''
      this.addForm.id = undefined
      this.addForm.barn_group_id = undefined
      this.addForm.number = ''
       
    },

    //新增
    form_add() {
      this.reset_form()
      this.addFormStatus = 'create'
      this.addFormShow = true
      this.$nextTick(() => {
        this.$refs['addFormRef'].clearValidate()
      })
    },

    //编辑
    form_edit(row) {
      this.reset_form()
      var me = this
      console.log('行内容row=========', row)
      //编辑行内容赋值
      this.addForm = Object.assign({}, row)  

      if(row.genders == 0){
        this.addForm.genders = undefined
      }
      me.tableListStep = row.formula_stage
    
      this.addFormStatus = 'edit'
      this.addFormShow = true
      this.$nextTick(() => {
        this.$refs['addFormRef'].clearValidate()
      })
    },


    //新增关闭
    add_dialog_close(){
       //内容重置
       this.$refs['addFormRef'].resetFields()
    },

    //新增 保存
    add_dialog_save() {
      var me = this
      this.$refs['addFormRef'].validate(valid => {
        //验证成功
        if (valid) {
          //发起请求
          var send_data = {
              "name": me.addForm.name,
              "calf_category_id": me.addForm.calf_category_id,
              "calf_category_name":'11',
              "male_calf_daily_weight": parseFloat(me.addForm.male_calf_daily_weight),
              "female_calf_daily_weight": parseFloat(me.addForm.female_calf_daily_weight),
              "formula_stage": me.tableListStep
          }
          

 
 


          console.log("弹窗参数：", send_data)

          //关闭弹窗
          // me.addFormShow = false
         //加载 - 发送新增保存
           ajaxDataPost(me.url_add_table, send_data).then(e => {
                console.log("新增结果：",e)
                //打印请求成功结果
                if(e.code == 200  ){
                  me.$message({ type: 'success', message: '新增成功！'  , duration: 2000 })
                  //关闭弹窗
                  me.addFormShow = false
                  me.get_table_data()
                } else {
                  me.$message({ type: 'error', message: '新增失败！' + e.msg, duration: 2000 })
                }
            })
         
        }
      })
    },
    //编辑 保存
    edit_dialog_save(){
      var me = this
      this.$refs['addFormRef'].validate(valid => {
        //验证成功
        if (valid) {
          //发起请求
          var send_data = {
             "id": me.addForm.id,
              "name": me.addForm.name,
              "calf_category_id": me.addForm.calf_category_id,
              "calf_category_name":'11',
              "male_calf_daily_weight": parseFloat(me.addForm.male_calf_daily_weight),
              "female_calf_daily_weight": parseFloat(me.addForm.female_calf_daily_weight),
              "formula_stage": me.tableListStep
          }

          // var name = this.barnGroupList.find(obj => obj.id == me.addForm.barn_group_id).name
          // console.log(name)

           // 编辑保存
          console.log("弹窗参数：", send_data)

          //关闭弹窗
          // me.addFormShow = false
         //加载 - 发送新增保存
         ajaxDataPut(me.url_edit_table, send_data).then(e => {
                console.log("编辑结果：",e)
                //打印请求成功结果
                if(e.code == 200  ){
                  me.$message({ type: 'success', message: '编辑成功！'  , duration: 2000 })
                  //关闭弹窗
                  me.addFormShow = false
                  me.get_table_data()
                } else {
                  me.$message({ type: 'error', message: '编辑失败！' + e.msg, duration: 2000 })
                }
            })
         
        }
      })
    },


    form_delete(row) {
      var me = this

       me.$confirm('是否删除此条内容?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            console.log("删除的ID参数：", row.id)
            //加载 - 发送新增保存
            ajaxDataDelete(me.url_delete_table + '/' +row.id, {}).then(e => {
                console.log("编辑结果：",e)
                //打印请求成功结果
                if(e.code == 200  ){
                  me.$message({ type: 'success',  message: '删除成功!'  });
                  me.get_table_data()
                } else {
                  me.$message({ type: 'error', message: '删除失败！' + e.msg, duration: 2000 })
                }
            })

        
 
          
        }).catch(() => {
          me.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });


       
    },






    //清空弹窗表单信息
    reset_step(){
       
      this.addFormStep.name = ''
      this.addFormStep.start_daily_age = undefined
      this.addFormStep.end_daily_age = undefined
      this.addFormStep.forage_id = undefined
      this.addFormStep.forage_name=""
      this.addFormStep.daily_feed_number = undefined
      this.addFormStep.first_class_ratio = undefined
      this.addFormStep.second_class_ratio = undefined
      this.addFormStep.third_class_ratio = undefined
      this.addFormStep.fourth_class_ratio = undefined
      this.addFormStep.allow_class_error = undefined
      this.addFormStep.feed_temp = undefined
      this.addFormStep.allow_temp_error = undefined
 
 
    },

    //新增
    add_step() {
      this.reset_step()
      this.addFormStatusStep = 'create'
      this.addFormStep.id = this.tableListStep.length + 1
      
      this.addFormShowStep = true
      this.$nextTick(() => {
        this.$refs['addFormRefStep'].clearValidate()
      })
    },

    //编辑
    edit_step(index, row) {
      this.stepIndex = index
      console.log('行内容row=========', row)
      //编辑行内容赋值
      this.addFormStep = Object.assign({}, row)  

      if(row.forage_id == 0){
        this.addFormStep.forage_id = undefined
      }
      this.addFormStatusStep = 'edit'
      this.addFormShowStep = true
      this.$nextTick(() => {
        this.$refs['addFormRefStep'].clearValidate()
      })
    },


    //新增关闭
    add_step_close(){
       //内容重置
       this.$refs['addFormRefStep'].resetFields()
       this.reset_step()
       this.addFormShowStep = false

    },

    //新增 保存
    add_step_save() {
      var me = this
      this.$refs['addFormRefStep'].validate(valid => {
        //验证成功
        if (valid) {
          //发起请求
          var forage_name = me.forageList.find(obj => obj.id == me.addFormStep.forage_id).name
          var send_data =   {
            "id":  me.addFormStep.id,
            "name":  me.addFormStep.name,
            "start_daily_age":me.addFormStep.start_daily_age,
            "end_daily_age":me.addFormStep.end_daily_age,
            "forage_id": me.addFormStep.forage_id,
            "forage_name":  forage_name ,
            "daily_feed_number":me.addFormStep.daily_feed_number,
            "first_class_ratio": me.addFormStep.first_class_ratio,
            "second_class_ratio":me.addFormStep.second_class_ratio,
            "third_class_ratio": me.addFormStep.third_class_ratio,
            "fourth_class_ratio": me.addFormStep.fourth_class_ratio,
            "allow_class_error": me.addFormStep.allow_class_error,
            "feed_temp": me.addFormStep.feed_temp,
            "allow_temp_error": me.addFormStep.allow_temp_error,
        }
          
 
 


          console.log("弹窗参数：", send_data)

          //关闭弹窗
          me.addFormShowStep = false
          me.tableListStep.push(send_data)
        
         
        }
      })
    },
    //编辑 保存
    edit_step_save(){
      var me = this
      this.$refs['addFormRefStep'].validate(valid => {
        //验证成功
        if (valid) {
          var forage_name = me.forageList.find(obj => obj.id == me.addFormStep.forage_id).name
          //发起请求
          var send_data = {
    
            "id":  me.addFormStep.id,
            "name":  me.addFormStep.name,
            "start_daily_age":me.addFormStep.start_daily_age,
            "end_daily_age":me.addFormStep.end_daily_age,
            "forage_id": me.addFormStep.forage_id,
            "forage_name":  forage_name ,
            "daily_feed_number":me.addFormStep.daily_feed_number,
            "first_class_ratio": me.addFormStep.first_class_ratio,
            "second_class_ratio":me.addFormStep.second_class_ratio,
            "third_class_ratio": me.addFormStep.third_class_ratio,
            "fourth_class_ratio": me.addFormStep.fourth_class_ratio,
            "allow_class_error": me.addFormStep.allow_class_error,
            "feed_temp": me.addFormStep.feed_temp,
            "allow_temp_error": me.addFormStep.allow_temp_error,
          }

  

           // 编辑保存
          console.log("弹窗参数：", send_data)
          me.addFormShowStep = false
          var stepIndex = me.stepIndex
          this.$set(me.tableListStep, stepIndex, send_data)
          console.log('me.tableListStep============',me.tableListStep)
         
          
        }
      })
    },


    delete_step(index, row) {
      var me = this

       me.$confirm('是否删除此条内容?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          console.log('点击了 - 删除一个阶段index===',index,'row===',row)  
          me.tableListStep.splice(index, 1)
        
            //加载 - 发送新增保存
            // ajaxDataDelete(me.url_delete_table + '/' +row.id, {}).then(e => {
            //     console.log("编辑结果：",e)
            //     //打印请求成功结果
            //     if(e.code == 200  ){
            //       me.$message({ type: 'success',  message: '删除成功!'  });
            //       me.get_table_data()
            //     } else {
            //       me.$message({ type: 'error', message: '删除失败！' + e.msg, duration: 2000 })
            //     }
            // })

        
 
          
        }).catch(() => {
          me.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });


       
    },


 
    form_export() {
    //获取请求表格数据的参数
    //this.download.getdataListParm.parammaps = this.tableObj.getdataListParm.parammaps
    //请求表格
    // GetDataByName(this.download.getdataListParm).then(response => {
    //     if (response.data.list !== null) {
    //       this.download.list = response.data.list
    //     } else {
    //       this.download.list = []
    //     }
    //     var excelDatas = [
    //       {
    //         tHeader: ['表头1', '表头2', '表头3', '表头4',],
    //         filterVal: ['title1', 'title2', 'title3', 'title4'],
    //         tableDatas: this.download.list,
    //         sheetName: 'Sheet1'
    //       }
    //     ]
    //     json2excel(excelDatas, '表格大标题', true, 'xlsx')
    // })

    var excelDatas = [
        {
            tHeader: ['表头1', '表头2', '表头3', '表头4',],
            filterVal: ['title1', 'title2', 'title3', 'title4'],
            tableDatas: [ 
                {title1: "内容1",title2: "内容2",title3: "内容3",title4: "内容4"},
                {title1: "内容11",title2: "内容22",title3: "内容32",title4: "内容44"},
                {title1: "内容111",title2: "内容222",title3: "内容333",title4: "内容444"},
            ],
            sheetName: 'Sheet1'
        }
    ]
    json2excel(excelDatas, '表格大标题', true, 'xlsx')
}

     

  }
}
</script>
<!-- 加了scoped，则是仅在此组件里生效 -->
<style scoped>

</style>