<template>
 
  <div>
    <el-card class="box-card"> 
      <el-tabs v-model="activeName" @tab-click="change_tab">
        <el-tab-pane label="班次占比" name="first">
            <!-- 搜索区域 -->
            <div class="search-bx1">
                <el-button type="primary"   @click="form_add1">添加</el-button>
            </div>
            <!-- 表格 -->
            <el-table   key="0"  :data="tableList1"  v-loading="tableLoading1" 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.class_first }}</span>
                </template>
              </el-table-column>
              <el-table-column label="第二班占比(%)" min-width="150px" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.class_second }}</span>
                </template>
              </el-table-column>
              <el-table-column label="第三班占比(%)" min-width="150px" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.class_third }}</span>
                </template>
              </el-table-column>
              <el-table-column label="第四班占比(%)" min-width="150px" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.class_fourth }}</span>
                </template>
              </el-table-column>
              
      
              <el-table-column  label="设置为默认使用"  min-width="100px" align="center">
                <template slot-scope="scope">
                  <el-switch v-model="scope.row.is_default" active-color="#13ce66" inactive-color="#ff4949" :active-value="1" :inactive-value="2" @change="change_enable1(scope.row)"  />
                </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_edit1(scope.row)">修改</el-button>
                  <!-- 删除按钮 -->
                  <el-button type="danger"  v-if="isButtonEdit"  size="mini" icon="el-icon-delete" @click="form_delete1(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页区域 -->
            <el-pagination  @size-change="change_size_page1"  @current-change="change_current_page1"  :current-page="searchData1.page" :page-sizes="[1,5,10,20,30,50]"  :page-size="searchData1.page_size" layout="total, prev, pager, next" :total="searchData1.total"/>



        </el-tab-pane>
        <el-tab-pane label="饲料占比" name="second">
            <!-- 搜索区域 -->
            <div class="search-bx1">
                <el-button type="primary"   @click="form_add2">添加</el-button>
            </div>
            <!-- 表格 -->
            <el-table   key="0"  :data="tableList2"  v-loading="tableLoading2" 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="饲喂温度°C" min-width="150px" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.feed_temp }}</span>
                </template>
              </el-table-column>
              <el-table-column label="允许温差°C" min-width="150px" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.allow_temp_diff }}</span>
                </template>
              </el-table-column>
              
      
              <el-table-column  label="设置为默认使用"  min-width="100px" align="center">
                <template slot-scope="scope">
                  <el-switch v-model="scope.row.is_default" active-color="#13ce66" inactive-color="#ff4949" :active-value="1" :inactive-value="2" @change="change_enable2(scope.row)"  />
                </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_edit2(scope.row)">修改</el-button>
                  <!-- 删除按钮 -->
                  <el-button type="danger"  v-if="isButtonEdit"  size="mini" icon="el-icon-delete" @click="form_delete2(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页区域 -->
            <el-pagination  @size-change="change_size_page2"  @current-change="change_current_page2"  :current-page="searchData2.page" :page-sizes="[1,5,10,20,30,50]"  :page-size="searchData2.page_size" layout="total, prev, pager, next" :total="searchData2.total"/>

        </el-tab-pane>
      
      </el-tabs>


 

      <!-- 弹窗 新增or修改 -->
      <el-dialog  :title="addFormTxt1[addFormStatus1]" :visible.sync="addFormShow1" @close="add_dialog_close1" width="50%">
        <div class="">
          <el-form  ref="addFormRef1"  :rules="addFormRules1"  :model="addForm1"  label-position="right" label-width="170px"  style="width:50%;margin:0 auto 50px">
              <el-form-item label="班次占比模板名称：" prop="name">
                  <el-input   v-model="addForm1.name"  ></el-input>  
              </el-form-item>
              <el-form-item label="第一班占比(%)：" prop="class_first">
                  <el-input   v-model="addForm1.class_first"  ></el-input>  
              </el-form-item>
              <el-form-item label="第二班占比(%)：" prop="class_second">
                  <el-input   v-model="addForm1.class_second"  ></el-input>  
              </el-form-item>
              <el-form-item label="第三班占比(%)：" prop="class_third">
                  <el-input   v-model="addForm1.class_third"  ></el-input>  
              </el-form-item>
              <el-form-item label="第四班占比(%)：" prop="class_fourth">
                  <el-input   v-model="addForm1.class_fourth"  ></el-input>  
              </el-form-item>

              <el-form-item label="设置为默认使用:" prop="is_default">
                <el-switch v-model="addForm1.is_default" active-color="#13ce66" inactive-color="#ff4949" :active-value="1" :inactive-value="2" />
              </el-form-item>
 
            
              
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="addFormStatus1==='create'?add_dialog_save1():edit_dialog_save1()">确认</el-button>
            <el-button @click="addFormShow1 = false">关闭</el-button>
          </div>
        </div>
      </el-dialog>

      <!-- 弹窗 新增or修改 -->
      <el-dialog  :title="addFormTxt2[addFormStatus2]" :visible.sync="addFormShow2" @close="add_dialog_close2" width="50%">
        <div class="">
          <el-form  ref="addFormRef2"  :rules="addFormRules2"  :model="addForm2"  label-position="right" label-width="170px"  style="width:50%;margin:0 auto 50px">
              <el-form-item label="饲喂温度模板名称：" prop="name">
                  <el-input   v-model="addForm2.name"  ></el-input>  
              </el-form-item>
              <el-form-item label="饲喂温度°C：" prop="feed_temp">
                  <el-input   v-model="addForm2.feed_temp"  ></el-input>  
              </el-form-item>
              <el-form-item label="允许温差°C：" prop="allow_temp_diff">
                  <el-input   v-model="addForm2.allow_temp_diff"  ></el-input>  
              </el-form-item>
 
              <el-form-item label="设置为默认使用:" prop="is_default">
                <el-switch v-model="addForm2.is_default" active-color="#13ce66" inactive-color="#ff4949" :active-value="1" :inactive-value="2" />
              </el-form-item>
 
            
              
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="addFormStatus2==='create'?add_dialog_save2():edit_dialog_save2()">确认</el-button>
            <el-button @click="addFormShow2 = false">关闭</el-button>
          </div>
        </div>
      </el-dialog>
 
    </el-card>
  </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_table1:'/api/v1/ops/base_setting/class_template/list',
      //接口 - 新增 - 表格
      url_add_table1:'/api/v1/ops/base_setting/class_template/add',  
      //接口 - 修改 - 表格
      url_edit_table1:'/api/v1/ops/base_setting/class_template/update', 
      //接口 - 删除 - 表格
      url_delete_table1:'/api/v1/ops/base_setting/class_template/is_show', 
      //接口 - 设置 - 表格
      url_set_table1:'/api/v1/ops/base_setting/class_template/is_default', 

       //接口 - 获取 - 表格
      url_get_table2:'/api/v1/ops/base_setting/temp_template/list',
      //接口 - 新增 - 表格
      url_add_table2:'/api/v1/ops/base_setting/temp_template/add',  
      //接口 - 修改 - 表格
      url_edit_table2:'/api/v1/ops/base_setting/temp_template/update', 
      //接口 - 删除 - 表格
      url_delete_table2:'/api/v1/ops/base_setting/temp_template/is_show', 
      //接口 - 设置 - 表格
      url_set_table2:'/api/v1/ops/base_setting/temp_template/is_default', 


      
      //接口 - 下拉框 列表 
      url_get_select:'/role/getAll',

      //按钮权限
      isButtonEdit:false,


      activeName:'first',

      //获取 - 表格数据 - 参数
      searchData1:{
        name: "",
        page: 1,  //页码
        page_size: 10,   //每页数量
        total:0,  //总页数
        pastureId: ""
      },
      tableLoading1: false,
      //表格内容
      tableList1:[
        //  { username:"admin", id:100, date:'2023-12-01',email:'测试信息1123',roleList:[2,3] },
        // { username:"epans", id:200, date:'2023-12-01',email:'测试信息1123',roleList:[] },
      ],


      //获取 - 表格数据 - 参数
      searchData2:{
        name: "",
        page: 1,  //页码
        page_size: 10,   //每页数量
        total:0,  //总页数
        pastureId: ""
      },
      tableLoading2: false,
      //表格内容
      tableList2:[
        //  { username:"admin", id:100, date:'2023-12-01',email:'测试信息1123',roleList:[2,3] },
        // { username:"epans", id:200, date:'2023-12-01',email:'测试信息1123',roleList:[] },
      ],


      addFormShow1:false,
      addFormStatus1: '',
      addFormTxt1: {  edit: '修改',  create: '新增' },
      addForm1:{
        name:'',id:'' ,class_first:'' ,class_second:'' ,class_third:'' ,class_fourth:'' ,is_default:2 
      },
      addFormRules1:{
        name: [
          { required: true, message: '模板名称必填', trigger: 'blur' },
        ],
      },

      addFormShow2:false,
      addFormStatus2: '',
      addFormTxt2: {  edit: '修改',  create: '新增' },
      addForm2:{
        name:'',id:'' ,feed_temp:'' ,allow_temp_diff:'' ,is_default:2 
      },
      addFormRules2:{
        name: [
          { required: true, message: '模板名称必填', trigger: 'blur' },
        ],
      },

     
       
    }
  },
  created(){
      //获取按钮权限
      const isButtonEdit = checkButtons(this.$store.state.buttonsList, "预设饲喂模板编辑")
      this.isButtonEdit = isButtonEdit
      console.log('this.isButtonEdit==========',this.isButtonEdit)
     

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

      //表格 - 初始化 
      this.get_table_data1()

      //this.get_table_data2()

    
  },
  methods:{

    
    
    //获取 下拉框
    get_select_list1(){
        var me = this
        ajaxDataGet(me.url_get_select1, {"roleName": "",  "page": 1,   "page_size": 1000}).then(e => {
          console.log("下拉框1：",e)

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

         
  
        })


  

    
    },

    //切换Tab选项卡
    change_tab(){
        if(this.activeName == 'first'){
           this.get_table_data1()
        }else{
           this.get_table_data2()
        } 
    },
    
    //获取 表格
    get_table_data1() {
 
     var me = this

     me.tableLoading1 = true
     console.log("searchData1======>", me.searchData1)

      var send_url = me.url_get_table1 + '?page=' + me.searchData1.page +  '&page_size=' + me.searchData1.page_size

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

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

       
    },
    //监听 page_size 改变的事件
    change_size_page1(item){
      console.log(item)
     // this.searchData.page_size = item
      //  this.getUserList()
    },
    //监听 page 改变的事件
    change_current_page1(item){
      console.log(item)
       this.searchData1.page = item
       this.get_table_data1()
    },
    //清空弹窗表单信息
    reset_form1(){
      this.addForm1.name = ''
      this.addForm1.id = ''
      this.addForm1.class_first = ''
      this.addForm1.class_second = ''
      this.addForm1.class_third = ''
      this.addForm1.class_fourth = ''
      this.addForm1.is_default = 2

 
    },
    //新增
    form_add1() {
      this.reset_form1()
      this.addFormStatus1 = 'create'
      this.addFormShow1 = true
      this.$nextTick(() => {
        this.$refs['addFormRef1'].clearValidate()
      })
    },
    //编辑
    form_edit1(row) {
      console.log('行内容1row=========', row)
      //编辑行内容赋值
      this.addForm1 = Object.assign({}, row)  
      this.addFormStatus1 = 'edit'
      this.addFormShow1 = true
      this.$nextTick(() => {
        this.$refs['addFormRef1'].clearValidate()
      })
    },
    //新增关闭
    add_dialog_close1(){
       //内容重置
       this.$refs['addFormRef1'].resetFields()
    },
    //新增 保存
    add_dialog_save1() {
      var me = this
      this.$refs['addFormRef1'].validate(valid => {
        //验证成功
        if (valid) {
          //发起请求
          var send_data = {
              "name": me.addForm1.name,
              "class_first":parseFloat( me.addForm1.class_first),
              "class_second": parseFloat(me.addForm1.class_second),
              "class_third":parseFloat( me.addForm1.class_third),
              "class_fourth": parseFloat(me.addForm1.class_fourth),
              "is_default": me.addForm1.is_default,
          }
         
          console.log("弹窗参数：", send_data)

          //关闭弹窗
          // me.addFormShow = false
         //加载 - 发送新增保存
           ajaxDataPost(me.url_add_table1, send_data).then(e => {
                console.log("新增结果：",e)
                //打印请求成功结果
                if(e.code == 200  ){
                  me.$message({ type: 'success', message: '新增成功！'  , duration: 2000 })
                  //关闭弹窗
                  me.addFormShow1 = false
                  me.get_table_data1()
                } else {
                  me.$message({ type: 'error', message: '新增失败！' + e.msg, duration: 2000 })
                }
            })
         
        }
      })
    },
    //编辑 保存
    edit_dialog_save1(){
      var me = this
      this.$refs['addFormRef1'].validate(valid => {
        //验证成功
        if (valid) {
          //发起请求
          var send_data = {
             "name": me.addForm1.name,
              "class_first":parseFloat( me.addForm1.class_first),
              "class_second": parseFloat(me.addForm1.class_second),
              "class_third":parseFloat( me.addForm1.class_third),
              "class_fourth": parseFloat(me.addForm1.class_fourth),
              "is_default": me.addForm1.is_default,
              "id": me.addForm1.id,
          }
          
          console.log("弹窗参数：", send_data)

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

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


       
    },
    //设置 默认
    change_enable1(row){
      var me = this
      console.log(row)
      //加载 - 保存
      ajaxDataPut(me.url_set_table1 + '/' +row.id, {}).then(e => {
                console.log("更改结果：",e)
                //打印请求成功结果
                if(e.code == 200  ){
                  me.$message({ type: 'success',  message: '设置成功!'  });
                  me.get_table_data1()
                } else {
                  me.$message({ type: 'error', message: '设置失败！' + e.msg, duration: 2000 })
                }
      })
    },

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

      me.tableLoading2 = true
      console.log("searchData2======>", me.searchData2)

        var send_url = me.url_get_table2 + '?page=' + me.searchData2.page +  '&page_size=' + me.searchData2.page_size

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

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

          })

      
    },
    //监听 page_size 改变的事件
    change_size_page2(item){
      console.log(item)
    // this.searchData.page_size = item
      //  this.getUserList()
    },
    //监听 page 改变的事件
    change_current_page2(item){
      console.log(item)
      this.searchData2.page = item
      this.get_table_data2()
    },
    //清空弹窗表单信息
    reset_form2(){
      this.addForm2.name = ''
      this.addForm2.id = undefined
      this.addForm2.feed_temp = undefined
      this.addForm2.allow_temp_diff = undefined
 
      this.addForm2.is_default = 2

 
    },
    //新增
    form_add2() {
      this.reset_form2()
      this.addFormStatus2 = 'create'
      this.addFormShow2 = true
      this.$nextTick(() => {
        this.$refs['addFormRef2'].clearValidate()
      })
    },
    //编辑
    form_edit2(row) {
      console.log('行内容1row=========', row)
      //编辑行内容赋值
      this.addForm2 = Object.assign({}, row)  
      this.addFormStatus2 = 'edit'
      this.addFormShow2 = true
      this.$nextTick(() => {
        this.$refs['addFormRef2'].clearValidate()
      })
    },
    //新增关闭
    add_dialog_close2(){
      //内容重置
      this.$refs['addFormRef2'].resetFields()
    },
    //新增 保存
    add_dialog_save2() {
      var me = this
      this.$refs['addFormRef2'].validate(valid => {
        //验证成功
        if (valid) {
          //发起请求
          var send_data = {
              "name": me.addForm2.name,
              "feed_temp":parseFloat( me.addForm2.feed_temp),
              "allow_temp_diff": parseFloat(me.addForm2.allow_temp_diff),
   
              "is_default": me.addForm2.is_default,
          }
        
          console.log("弹窗参数：", send_data)

          //关闭弹窗
          // me.addFormShow = false
        //加载 - 发送新增保存
          ajaxDataPost(me.url_add_table2, send_data).then(e => {
                console.log("新增结果：",e)
                //打印请求成功结果
                if(e.code == 200  ){
                  me.$message({ type: 'success', message: '新增成功！'  , duration: 2000 })
                  //关闭弹窗
                  me.addFormShow2 = false
                  me.get_table_data2()
                } else {
                  me.$message({ type: 'error', message: '新增失败！' + e.msg, duration: 2000 })
                }
            })
        
        }
      })
    },
    //编辑 保存
    edit_dialog_save2(){
      var me = this
      this.$refs['addFormRef2'].validate(valid => {
        //验证成功
        if (valid) {
          //发起请求
          var send_data = {
            
            "name": me.addForm2.name,
              "feed_temp":parseFloat( me.addForm2.feed_temp),
              "allow_temp_diff": parseFloat(me.addForm2.allow_temp_diff),
              "is_default": me.addForm2.is_default,
              "id": me.addForm2.id,
          }
          
          console.log("弹窗参数：", send_data)

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

        

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


      
    },
    //设置 默认
    change_enable2(row){
      var me = this
      console.log(row)
      //加载 - 保存
      ajaxDataPut(me.url_set_table1 + '/' +row.id, {}).then(e => {
                console.log("更改结果：",e)
                //打印请求成功结果
                if(e.code == 200  ){
                  me.$message({ type: 'success',  message: '设置成功!'  });
                  me.get_table_data1()
                } else {
                  me.$message({ type: 'error', message: '设置失败！' + e.msg, duration: 2000 })
                }
      })
    },
    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>
