index_template.vue

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="Excel文件名" prop="templateName" label-width="100px">
        <el-input
          v-model="queryParams.templateName"
          placeholder="请输入Excel文件名"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['SuppliesTemplate:SuppliesTemplate:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['SuppliesTemplate:SuppliesTemplate:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['SuppliesTemplate:SuppliesTemplate:remove']"
        >删除</el-button>
      </el-col>

      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="SuppliesTemplateList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column type="index" width="80" align="center" label="序号" :index="indexMethod" />
      <el-table-column label="Excel文件名" align="center" prop="templateName" />
      <el-table-column label="状态" align="center" prop="status" >
        <template slot-scope="scope">
          <div>
            <el-switch
              @change="toggleEnable(scope.row)"
              v-model="scope.row.status"
              :active-value="0"
              :inactive-value="1"
              active-color="#13ce66"
              inactive-color="#cccccc">
            </el-switch>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleSave(scope.row)"
            v-hasPermi="['SuppliesTemplate:SuppliesTemplate']"
          >详情</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['SuppliesTemplate:SuppliesTemplate:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['SuppliesTemplate:SuppliesTemplate:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改Excel模板对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="状态" prop="status">
          <el-select v-model="form.status" placeholder="请选择状态">
            <el-option label="启用" :value="0"></el-option>
            <el-option label="禁用" :value="1"></el-option>
          </el-select>
        </el-form-item>
<!--        <el-upload-->
<!--          ref="uploadRef"-->
<!--          class="upload-demo"-->
<!--          drag-->
<!--          show-file-list="true"-->
<!--          action="https://jsonplaceholder.typicode.com/posts/"-->
<!--          multiple-->
<!--          :before-upload="beforeUpload"-->
<!--        >-->
<!--          <i class="el-icon-upload"></i>-->
<!--          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>-->
<!--          <div class="el-upload__tip" slot="tip">只能上传xlsx文件</div>-->
<!--        </el-upload>-->

        <el-upload
          ref="uploadRef"
          class="upload-demo"
          drag
          action="https://jsonplaceholder.typicode.com/posts/"
          multiple
          :before-upload="beforeUpload"
          :on-change="handleChange"
          :show-file-list="fileListName.length > 0"
          :file-list="fileListName"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传xlsx文件</div>
        </el-upload>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <div id="luckysheet" :style="{ position: positionValue, top: '0', left: '0', right: '0', bottom: '0' }"></div>

  </div>
</template>

<style>
#luckysheet_info_detail_title {
  display: none;
}
#luckysheet_info_detail_update{
  display: none;
}
#luckysheet_info_detail_save{
  display: none;
}

.luckysheet-share-logo {
  display: none;
}
</style>

<script>
import {
  listSuppliesTemplate,
  getSuppliesTemplate,
  delSuppliesTemplate,
  addSuppliesTemplate,
  updateSuppliesTemplate,
  toggleEnable,toggleDisable,
  listSuppliesTemplateId, exportMyluckyexcel
} from "@/api/ruoyi-myLuckyexcel/myluckyexcel";
import $ from 'jquery';
import XLSX from 'xlsx';
import LuckyExcel from 'luckyexcel';
import luckysheet from 'luckysheet';
import {exportSuppliesrole} from "@/api/system/suppliesrole";

export default {
  name: "SuppliesTemplate",
  data() {
    return {
      positionValue: 'static',
      fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],

      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // Excel模板表格数据
      SuppliesTemplateList: [],
      //模板详情
      TemplateId:[],
      fileListName:[],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      open1: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        detId: null,
        templateName: null,
        templateContent: null,
        status: null,
      },
      form: {
      },
      rules: {
      },
    }
  },
  created() {
    this.getList();
    this.positionValue = "static";
  },
  mounted() {
    window.handleReturnButtonClick = this.handleReturnButtonClick;
  },
  methods: {


    /**启用 */
    toggleEnable(SuppliesTemplate){
      console.log('你点击了【' + SuppliesTemplate.s+'】的开关控件，当前开关值:' + SuppliesTemplate.status);
      let enableText=['启用','禁用'];
      if(SuppliesTemplate.status == 0) {
        toggleEnable(SuppliesTemplate.id).then((response) =>{
          if(response.code == 200){
            let message = '操作成功，已经将【' + SuppliesTemplate.templateName +'】的状态改为【'+ enableText[SuppliesTemplate.status] +'】 !';
            this.$message({
              message: message,
              type:'success'
            });
          }else {
            this.$message.error(response.message);
          }
        });
      }else {
        toggleDisable(SuppliesTemplate.id).then((response) =>{
          if(response.code == 200){
            let message = '操作成功，已经将【' + SuppliesTemplate.templateName +'】的状态改为【'+ enableText[SuppliesTemplate.status] +'】 !';
            this.$message({
              message: message,
              type:'success'
            });
          }else {
            this.$message.error(response.message);
          }

        });
      }
    },

    /**显示序号*/
    indexMethod(index){
      return index + 1;
    },

    /**清空上传文件列表*/
    handleChange(file, fileList){
      // 清空 fileList 中的旧文件
      this.fileListName = [];
      // 添加文件到 fileList 中
      this.fileListName.push(file);
    },

    /**上传事件 */
    beforeUpload(file){

      const isJpgOrPng = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';

      if (!isJpgOrPng) {
        this.$message.error('只能上传xlsx文件');
      }

      LuckyExcel.transformExcelToLucky(file ,(exportJson,lucksheetfile)=>{
        this.form.templateName = file.name;
        this.form.templateContent = JSON.stringify(exportJson.sheets);
      });

      return isJpgOrPng;
    },

    // handleFileChange(event){
    //   var file = event.target.files[0];
    //   var fileName = file.name;
    //   fileName = fileName + "";
    //   LuckyExcel.transformExcelToLucky(file ,(exportJson,lucksheetfile)=>{
    //     this.form.templateName = fileName;
    //     this.form.templateContent = JSON.stringify(exportJson.sheets);
    //   });
    // },

    /** 查询Excel模板列表 */
    getList() {
      this.indexMethod(0);
      this.loading = true;
      listSuppliesTemplate(this.queryParams).then(response => {
        this.SuppliesTemplateList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        detId: null,
        name: null,
        templateContent: null,
        status: 0,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.fileListName = [];
      this.reset();
      this.open = true;
      this.title = "添加Excel模板";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.fileListName = [];
      this.reset();
      const id = row.id || this.ids
      getSuppliesTemplate(id).then(response => {
        console.log(response.rows[0])
        this.form = response.rows[0];
        this.open = true;
        this.title = "修改Excel模板";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.fileListName = [];
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateSuppliesTemplate(this.form).then(response => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addSuppliesTemplate(this.form).then(response => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },

    /** 详情按钮操作 */
    handleSave(row) {

      listSuppliesTemplateId(row.id).then(response =>{

        this.TemplateId = response.rows;

        this.luckyLook();

      })

    },
    /**展示详情luckysheet */
    luckyLook(){

      this.positionValue = 'absolute';
      luckysheet.destroy();
      luckysheet.create({
        container: "luckysheet", // Luckysheet 的容器元素 ID
        title: this.TemplateId[0].templateName, // Excel 文件名
        data: JSON.parse(this.TemplateId[0].templateContent), // Excel 数据
        showtoolbar: false, //是否第二列显示工具栏
        showinfobar: true, //是否显示顶部名称栏
        showsheetbar: false, //是否显示底部表格名称区域
        pointEdit: false, //是否是编辑器插入表格模式
        pointEditUpdate: null, //编辑器表格更新函数
        allowEdit: false,//作用：是否允许前台编辑
        functionButton: '<button id="exportButton" class="btn btn-primary" style=" padding:3px 6px; font-size: 16px;width: 100px;height: 27px; margin-right: 85px;" onclick="handleReturnButtonClick()">返回</button>',

      });

    },
    /**详情返回按钮 */
    handleReturnButtonClick(){

      this.positionValue ='static';
      luckysheet.destroy();

    },

    /** 删除按钮操作*/
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$confirm('是否确认删除Excel模板编号为"' + ids + '"的数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
        return delSuppliesTemplate(ids);
      }).then((result) => {
        if (result.data==="操作失败"){
          this.getList();
          this.msgError("该模板下存在关联规则，请先删除关联规则！！！");
        }else {
          this.getList();
          this.msgSuccess("删除成功");
        }
      }).catch(()=>{
      })

    },

    // /** 导出按钮操作 */
    // handleExport() {
    //   const queryParams = this.queryParams;
    //   this.$confirm('是否确认导出所有导入规则数据项?', "警告", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning"
    //   }).then(function() {
    //     return exportMyluckyexcel(queryParams);
    //   }).then(response => {
    //     this.download(response.msg);
    //   })
    // }
  }
};
</script>









































<!--<template>-->
<!--  <div class="app-container">-->
<!--    <el-form  ref="queryForm" size="small" :inline="true"  label-width="68px">-->
<!--      <el-form-item label="模板" prop="name">-->
<!--        <el-select v-model="selectedOption" size="mini" @change="handleOptionChange" placeholder="请选择你要查看的模板" >-->
<!--          &lt;!&ndash;          <el-option label="自设的模板名" value="这里是Excel表内容"></el-option>&ndash;&gt;-->
<!--          <el-option-->
<!--            v-for="item in depss"-->
<!--            :key="item.id"-->
<!--            :label="item.name"-->
<!--            :value="item.id"-->
<!--          >-->
<!--          </el-option>-->
<!--        </el-select>-->
<!--      </el-form-item>-->
<!--      <el-form-item>-->
<!--        &lt;!&ndash;<el-button type="primary" icon="el-icon-search" size="mini" >搜索</el-button> &ndash;&gt;-->
<!--        &lt;!&ndash;<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>&ndash;&gt;-->
<!--        &lt;!&ndash;<el-button type="primary" icon="el-icon-search" size="mini" >搜索</el-button>&ndash;&gt;-->
<!--        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>-->
<!--      </el-form-item>-->
<!--    </el-form>-->

<!--    <el-row :gutter="10" class="mb8">-->
<!--      <el-col :span="1.5">-->
<!--        <el-button-->
<!--          type="success"-->
<!--          plain-->
<!--          icon="el-icon-download"-->
<!--          size="mini"-->
<!--          @click="dialogVisible = true"-->
<!--        >保存</el-button>-->
<!--      </el-col>-->
<!--      <el-col :span="1.5">-->
<!--        <el-button-->
<!--          type="warning"-->
<!--          plain-->
<!--          icon="el-icon-s-promotion"-->
<!--          size="mini"-->
<!--          @click="handleExport"-->
<!--          v-hasPermi="['ruoyi-myexcel:myexcel:export']"-->
<!--        >导出</el-button>-->
<!--      </el-col>-->
<!--      <el-col :span="1.5">-->
<!--        <el-upload-->
<!--          type="file"-->
<!--          name="file"-->
<!--          ref="upload"-->
<!--          :before-upload="handleFileChange"-->
<!--          action=''-->
<!--          :limit="1"-->
<!--          :file-list="fileList"-->
<!--        >-->
<!--          <el-button  plain size="mini" icon="el-icon-upload2" type="primary">导入</el-button>-->

<!--        </el-upload>-->
<!--      </el-col>-->
<!--      &lt;!&ndash;      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>&ndash;&gt;-->
<!--    </el-row>-->
<!--    &lt;!&ndash; luckysheet容器 &ndash;&gt;-->
<!--    &lt;!&ndash;    <div id="luckysheetContainer"></div>&ndash;&gt;-->
<!--    <div-->
<!--      id="luckysheet"-->
<!--      style="margin: 0px; padding: 0px; position: absolute; width: 100%;height: 800px; left: 0px; top: 110px; bottom: 0px; z-index: 0"-->
<!--    >-->
<!--    </div>-->
<!--    &lt;!&ndash; 用户添加或修改我的Excel表格的弹框 &ndash;&gt;-->
<!--    <el-dialog-->
<!--      title="是否确认保存?"-->
<!--      :visible.sync="dialogVisible"-->
<!--      width="30%"-->
<!--      style="z-index: 1; "-->
<!--      :before-close="handleClose">-->
<!--      <el-form  label-width="80px" @submit.native.prevent>-->
<!--        <el-form-item label="名称" >-->
<!--          &lt;!&ndash;  onkeypress="if (event.keyCode == 13) return false" //关闭enter的触发事件  &ndash;&gt;-->
<!--          <el-input v-model="from_name"-->
<!--                    @keyup.enter.native="handleEnter"-->
<!--                    placeholder="请输入名称" />-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--      <span slot="footer" class="dialog-footer">-->
<!--    <el-button @click="dialogVisible = false">取 消</el-button>-->
<!--    <el-button type="primary" @click="submit_from">确 定</el-button>-->
<!--  </span>-->
<!--    </el-dialog>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--  import $ from 'jquery'-->
<!--  /*安装插件 npm install xlsx，安装完成后引入 import XLSX from ‘xlsx’*/-->
<!--  import XLSX from 'xlsx'-->
<!--  import {addMyluckyexcel, getMyluckyexcel, listMyluckyexcel} from "@/api/ruoyi-myLuckyexcel/myluckyexcel";-->

<!--  import luckysheet from 'luckysheet'-->
<!--  import LuckyExcel from 'luckyexcel'-->
<!--  //导入库export.js 这个文件是es6的，不能在普通的HTML文件直接引入js文件（虽然都是js文件，但是有区别，具体请百度es6与es5）！需要把es6转es5才可以直接引入使用！-->
<!--  import { exportExcel } from '../../../../public/luckysheet/exportExcel'-->
<!--  export default {-->
<!--    name: "Mymodule",-->
<!--    data() {-->
<!--      return {-->
<!--        //弹出页面的表名-->
<!--        from_name : "",-->
<!--        // 是否显示弹出层-->
<!--        dialogVisible : false,-->
<!--        selectedOption:'',-->
<!--        luckysheetData: '',-->
<!--        fileList:[],-->
<!--        depss:[],-->
<!--        // 表单参数-->
<!--        form: {},-->
<!--        // 查询参数-->
<!--        queryParams: {-->
<!--          pageNum: 1,-->
<!--          pageSize: 10,-->
<!--          name: null,-->
<!--          content: null-->
<!--        },-->
<!--      };-->
<!--    },-->
<!--    created() {-->
<!--//刷新页面时进行的操作-->

<!--      this.getList();-->
<!--    },-->
<!--    mounted() {-->

<!--      this.init();-->
<!--    },-->
<!--    methods:{-->
<!--      /** 页面刷新时展示的数据*/-->
<!--      getList() {-->
<!--        listMyluckyexcel(this.queryParams).then(response => {-->
<!--          this.depss = response.rows;-->
<!--        });-->
<!--      },-->
<!--      /** 下拉选和页面luckysheet绑定 */-->
<!--      handleOptionChange() {-->
<!--        //根据选中的下拉选项值获取相应的信息-->
<!--        getMyluckyexcel(this.selectedOption).then(response => {-->

<!--          const sysSupplies = response.data;-->

<!--          this.luckysheetData = sysSupplies.jsons;-->
<!--          //将接收到的json存到json_data中-->
<!--          //const json_data = response.data;-->
<!--          let json_data = JSON.parse(sysSupplies.jsons);-->
<!--          let filename= sysSupplies.name;-->

<!--          luckysheet.create({-->
<!--            container: "luckysheet", // Luckysheet 的容器元素 ID-->
<!--            title: filename, // Excel 文件名-->
<!--            data: json_data, // Excel 数据-->
<!--            showinfobar: false, //是否显示顶部名称栏-->
<!--            lang:'zh',-->
<!--          });-->

<!--        }).catch(() => {-->
<!--          // 处理错误逻辑，这里是一个空的错误处理函数-->
<!--          this.$message.error('暂停失败,发生未知错误!');-->
<!--        });-->
<!--      },-->
<!--      /** 导出设置 */-->
<!--      handleExport(){-->
<!--        var date =new Date().getTime();-->
<!--        exportExcel(luckysheet.getAllSheets(), '导出'+date)-->
<!--      },-->
<!--      /** 弹出的确认框关闭 */-->
<!--      handleClose(done) {-->
<!--        this.$confirm('确认关闭？')-->
<!--          .then(_ => {-->
<!--            done();-->
<!--          })-->
<!--          .catch(_ => {});-->
<!--      },-->
<!--      /** 回车事件和保存提交绑定 */-->
<!--      handleEnter(event) {-->
<!--        if (event.keyCode === 13) {-->
<!--          event.preventDefault(); // 阻止默认的回车事件-->
<!--          // 触发确定操作-->
<!--          this.submit_from();-->
<!--        }-->
<!--      },-->
<!--      /** 保存到数据库*/-->
<!--      submit_from() {-->
<!--        const name = this.from_name-->
<!--        if(name!=""){-->
<!--          let objsheet = luckysheet.getAllSheets() // 得到表的数据-->
<!--          //LuckyExcel = objsheet // 将表的数据保存本地-->
<!--          let strsheet = JSON.stringify(objsheet)// 对象转化为字符串-->
<!--          const  data={name :name,jsons:strsheet};-->
<!--          addMyluckyexcel(data).then(response => {-->
<!--            if(response.code==200){-->
<!--              this.$message({-->
<!--                message: '保存成功', type: 'success'-->
<!--              });-->
<!--              this.dialogVisible=false;-->
<!--              //this.$router.replace({ path: '/' }); //刷新整个页面会出错-->
<!--              //window.location.reload();//也是全局刷新,不合适-->
<!--              this.$router.go(-1);-->
<!--            }else{-->
<!--              this.$message.error('保存失败');-->
<!--            }-->
<!--          });-->
<!--        }else{-->
<!--          this.$message.error('请输入表格名称后再进行保存!');-->
<!--        }-->

<!--      },-->
<!--      /* 重置按钮操作 */-->
<!--      resetQuery() {-->
<!--        luckysheet.destroy()-->
<!--        let options = {-->
<!--          container: 'luckysheet', //luckysheet为容器id-->
<!--          title:'',-->
<!--          lang:'zh',-->
<!--          showinfobar:false,-->
<!--          data:[-->
<!--            {-->
<!--              "name": "sheet1", //工作表名称-->
<!--              "color": "", //工作表颜色-->
<!--              "index": 0, //工作表索引-->
<!--              "status": 1, //激活状态-->
<!--              "order": 0, //工作表的下标-->
<!--              "hide": 0,//是否隐藏-->
<!--              "row": 20, //行数-->
<!--              "column": 15, //列数-->
<!--              "defaultRowHeight": 19, //自定义行高-->
<!--              "defaultColWidth": 73, //自定义列宽-->
<!--              "celldata": [-->


<!--              ], //初始化使用的单元格数据-->
<!--              "config": {-->
<!--                "merge": {-->
<!--                }, //合并单元格-->
<!--                "rowlen":{}, //表格行高-->
<!--                "columnlen":{}, //表格列宽-->
<!--                "rowhidden":{}, //隐藏行-->
<!--                "colhidden":{}, //隐藏列-->
<!--                "borderInfo":{-->

<!--                }, //边框-->
<!--                "authority":{}, //工作表保护-->

<!--              },-->
<!--            },-->
<!--            /*{-->
<!--              "name": "Sheet2",-->
<!--              "color": "",-->
<!--              "index": 1,-->
<!--              "status": 0,-->
<!--              "order": 1,-->
<!--              "celldata": [],-->
<!--              "config": {}-->
<!--            },-->
<!--            {-->
<!--              "name": "Sheet3",-->
<!--              "color": "",-->
<!--              "index": 2,-->
<!--              "status": 0,-->
<!--              "order": 2,-->
<!--              "celldata": [],-->
<!--              "config": {},-->
<!--            }*/-->
<!--          ]-->

<!--        }-->
<!--        luckysheet.create(options)-->
<!--      },-->
<!--      /*// 表单重置-->
<!--      reset() {-->
<!--        this.form = {-->
<!--          id: null,-->
<!--          name: null,-->
<!--          description: null-->
<!--        };-->
<!--        this.resetForm("form");-->
<!--      },-->
<!--      /!** 搜索按钮操作 *!/-->
<!--      handleQuery() {-->
<!--        this.queryParams.pageNum = 1;-->
<!--        this.getList();-->
<!--      },-->

<!--      // 多选框选中数据-->
<!--      handleSelectionChange(selection) {-->
<!--        this.ids = selection.map(item => item.id)-->
<!--        this.single = selection.length!==1-->
<!--        this.multiple = !selection.length-->
<!--      },-->
<!--      /!** 导出按钮操作 *!/-->
<!--      handleExport() {-->
<!--        this.download('ruoyi-mymodule/mymodule/export', {-->
<!--          ...this.queryParams-->
<!--        }, `mymodule_${new Date().getTime()}.xlsx`)-->
<!--      },*/-->
<!--      /** Luckyexcel文档 */-->
<!--      init() {-->
<!--        let options = {-->
<!--          container: 'luckysheet', //luckysheet为容器id-->
<!--          title:'',-->
<!--          lang:'zh',-->
<!--          showinfobar:false,-->
<!--          data:[-->
<!--            {-->
<!--              "name": "sheet1", //工作表名称-->
<!--              "color": "", //工作表颜色-->
<!--              "index": 0, //工作表索引-->
<!--              "status": 1, //激活状态-->
<!--              "order": 0, //工作表的下标-->
<!--              "hide": 0,//是否隐藏-->
<!--              "row": 20, //行数-->
<!--              "column": 15, //列数-->
<!--              "defaultRowHeight": 19, //自定义行高-->
<!--              "defaultColWidth": 73, //自定义列宽-->
<!--              "celldata": [-->


<!--              ], //初始化使用的单元格数据-->
<!--              "config": {-->
<!--                "merge": {-->
<!--                }, //合并单元格-->
<!--                "rowlen":{}, //表格行高-->
<!--                "columnlen":{}, //表格列宽-->
<!--                "rowhidden":{}, //隐藏行-->
<!--                "colhidden":{}, //隐藏列-->
<!--                "borderInfo":{-->

<!--                }, //边框-->
<!--                "authority":{}, //工作表保护-->

<!--              },-->
<!--            },-->
<!--            /*{-->
<!--              "name": "Sheet2",-->
<!--              "color": "",-->
<!--              "index": 1,-->
<!--              "status": 0,-->
<!--              "order": 1,-->
<!--              "celldata": [],-->
<!--              "config": {}-->
<!--            },-->
<!--            {-->
<!--              "name": "Sheet3",-->
<!--              "color": "",-->
<!--              "index": 2,-->
<!--              "status": 0,-->
<!--              "order": 2,-->
<!--              "celldata": [],-->
<!--              "config": {},-->
<!--            }*/-->
<!--          ]-->

<!--        }-->
<!--        luckysheet.create(options)-->

<!--      },-->
<!--      Excel(e) {-->
<!--        let that = this-->
<!--        // 错误情况判断-->
<!--        const files = e.target.files-->
<!--        if (files.length <= 0) {-->
<!--          return false;-->
<!--        } else if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {-->
<!--          this.$message({-->
<!--            message: "上传格式不正确，请上传xls或者xlsx格式",-->
<!--            type: "warning"-->
<!--          });-->
<!--          return false-->
<!--        } else {-->
<!--          that.upload_file = files[0].name-->
<!--        }-->
<!--        // 读取表格-->
<!--        const fileReader = new FileReader()-->
<!--        fileReader.onload = ev => {-->
<!--          try {-->
<!--            const data = ev.target.result;-->
<!--            const workbook = XLSX.read(data, {-->
<!--              type: "binary"-->
<!--            })-->
<!--            // 读取第一张表-->
<!--            const wsname = workbook.SheetNames[0]-->
<!--            const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname])-->
<!--            // 打印 ws 就可以看到读取出的表格数据-->
<!--            console.log(ws)-->
<!--            // 定义一个新数组，存放处理后的表格数据-->
<!--            that.lists = []-->
<!--            ws.forEach(item => {-->
<!--              that.lists.push({-->
<!--                // 对ws进行处理后放进lists内-->
<!--              })-->
<!--            })-->
<!--            // 调用方法将lists数组发送给后端-->
<!--            this.submit_form(that.lists)-->
<!--          } catch (e) {-->
<!--            return false-->
<!--          }-->
<!--        }-->
<!--        fileReader.readAsBinaryString(files[0])-->
<!--      },-->
<!--      /** 导入事件*/-->
<!--      handleFileChange(evt) {-->
<!--        let name = evt.name-->
<!--        let suffixArr = name.split('.'),-->
<!--          suffix = suffixArr[suffixArr.length - 1]-->
<!--        if (suffix != 'xlsx') {-->
<!--          alert('当前仅支持导入xlsx文件')-->
<!--          return-->
<!--        }-->
<!--        LuckyExcel.transformExcelToLucky(-->
<!--          evt,-->
<!--          function(exportJson, luckysheetfile) {-->


<!--            if (exportJson.sheets == null || exportJson.sheets.length == 0) {-->
<!--              alert(-->
<!--                '无法读取excel文件的内容，目前不支持xls文件!'-->
<!--              )-->
<!--              return-->
<!--            }-->

<!--            luckysheet.destroy()-->

<!--            luckysheet.create({-->
<!--              container: 'luckysheet', //luckysheet is the container id-->
<!--              title: exportJson.info.name,-->
<!--              lang: 'zh', // 设定表格语言-->
<!--              showinfobar: false,-->
<!--              data: exportJson.sheets,-->
<!--              userInfo: exportJson.info.name.creator-->
<!--            })-->
<!--          }-->
<!--        )-->
<!--      },-->
<!--    }-->
<!--// 配置项-->

<!--  };-->
<!--</script>-->