Skip to content

K
klck
Commit f7cff4f8 authored by lenovo's avatar lenovo
Browse files
Options

Merge remote-tracking branch 'origin/master'

parents f53c2323 6169394c
Show whitespace changes
Inline Side-by-side
Showing with 441 additions and 1153 deletions
ruoyi-ui/src/views/system/supplies/index.vue
View file @ f7cff4f8
......@@ -96,7 +96,11 @@ import luckysheet from 'luckysheet'
import LuckyExcel from 'luckyexcel'
//导入库export.js 这个文件是es6的，不能在普通的HTML文件直接引入js文件（虽然都是js文件，但是有区别，具体请百度es6与es5）！需要把es6转es5才可以直接引入使用！
import { exportExcel } from '../../../../public/luckysheet/exportExcel'
var fileName; //定义表名
var excelTemp;//模板json
var excelTempName;//模板name
var excelRule;//规则json
var fileName="新建XLSX工作表"; //定义表名
export default {
name: "Mymodule",
data() {
......@@ -154,7 +158,8 @@ export default {
//const json_data = response.data;
let json_data = JSON.parse(sysSupplies.jsons);
fileName= sysSupplies.name;
excelTemp = json_data;//模板json
excelTempName = fileName;//模板name
luckysheet.create({
container: "luckysheet", // Luckysheet 的容器元素 ID
title: fileName, // Excel 文件名
......@@ -181,6 +186,7 @@ export default {
const cellCoordinate = luckysheet.getExcelCell(sheetIndex,colIndex,rowIndex);
console.log("单元格坐标:", cellCoordinate);
},
//下拉选择规则
handleRuleChange(){
if (this.selectedOption==='') {
this.selectedRule='';
......@@ -189,10 +195,12 @@ export default {
}
getRule(this.selectedRule).then(response => {
const sysRules = response.data;
this.disableNextButton = this.selectedRule === '';
//将接收到的json存到rule_json中
let rule_json = JSON.parse(sysRules.jsons);
let ruleName= sysRules.name;
this.disableNextButton = this.selectedOption === '';
//将接收到的json存到json_data中
let json_data = JSON.parse(sysRules.jsons);
let filename= sysRules.name;
excelRule = json_data;
}).catch(() => {
// 处理错误逻辑，这里是一个空的错误处理函数
......@@ -247,6 +255,7 @@ export default {
this.selectedOption='';
this.disableNextButton='';
this.selectedRule='';
fileName="新建XLSX工作表";
//刷新luckysheet表格
this.init();
},
......@@ -337,29 +346,51 @@ export default {
});
return
}
exportJson.sheets[0].celldata
//1、循环规则
for (var i = 0; i < excelRule.length; i++) {
//2、取出导入的数据
for (var j = 0; j < exportJson.sheets[excelRule[i].se].celldata.length; j++) {
var c =exportJson.sheets[excelRule[i].se].celldata[j].c;
var r =exportJson.sheets[excelRule[i].se].celldata[j].r;
if(r == excelRule[i].re && c == excelRule[i].ce){
//3、对数据赋值
excelTemp[excelRule[i].st].data[excelRule[i].rt][excelRule[i].ct].v=exportJson.sheets[excelRule[i].se].celldata[j].v.v
}
}
}
//4、保存
exportJson.sheets = excelTemp;
luckysheet.destroy()
luckysheet.create({
container: 'luckysheet', //luckysheet is the container id
title: exportJson.info.name,
title: excelTempName,
lang: 'zh', // 设定表格语言
showinfobar: false,
data: exportJson.sheets,
userInfo: exportJson.info.name.creator
})
}
)
},
/** 导出设置 */
handleExport(){
exportExcel(luckysheet.getAllSheets(), fileName)
exportExcel(luckysheet.getAllSheets(), excelTempName)
},
}
// 配置项
};
// debounce函数定义
function debounce(func, delay) {
let timer;
return function () {
const context = this;
const args = arguments;
clearTimeout(timer);
timer = setTimeout(function () {
func.apply(context, args);
}, delay);
};
}
</script>
ruoyi-ui/src/views/system/supplies/index_back.vue deleted 100644 → 0
View file @ f53c2323
<template>
<div class="app-container">
<div style="position: absolute; top: 0">
<!--保存-->
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="saveExcel"
v-hasPermi="['system:supplies:save']"
>新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="editExcel"
v-hasPermi="['system:supplies:edit']"
>修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="deleteExcel"
v-hasPermi="['system:supplies:remove']"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
:loading="exportLoading"
@click="deriveExcel"
v-hasPermi="['system:supplies:export']"
>导出</el-button>
</el-col>
</el-row>
<!--导出-->
<el-button type="primary" @click="deriveExcel">导出</el-button>
<!--导入-->
<input style="font-size: 16px;left: 10px;" type="file" @change="uploadExcel"/>
<!--<el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
<el-upload
ref="upload"
:limit="1"
accept=".xlsx, .xls"
:headers="upload.headers"
:action="upload.url + '?updateSupport=' + upload.updateSupport+'&reportCode='+upload.reportCode"
:disabled="upload.isUploading"
:on-progress="handleFileUploadProgress"
:on-success="handleFileSuccess"
:auto-upload="false"
drag
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将文件拖到此处，或
<em>点击上传</em>
</div>
<div class="el-upload__tip" slot="tip" style="font-size: 14px;">
<span style="color: red;">&nbsp注：导入数据之前会将现有数据清空，请谨慎操作！</span>
</div>
<div class="el-upload__tip" slot="tip" style="margin-top: 10px;margin-bottom: 10px;">
&lt;!&ndash;<el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据&ndash;&gt;
<el-link type="info" style="font-size: 14px;color: #00afff;" @click="importTemplate">下载模板</el-link>
</div>
<div class="el-upload__tip" style="color:#ff0000" slot="tip">提示：仅允许导入“xls”或“xlsx”格式文件！</div>
</el-upload>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitFileForm">确 定</el-button>
<el-button @click="upload.open = false">取 消</el-button>
</div>
</el-dialog>-->
<!--导入-->
<input style="font-size: 16px" type="file" @change="uploadExcel2"/>
<!--隐藏id-->
<input style="font-size: 16px" id="id" type="text" value=""/>
<span>模板: </span>
<el-select v-model="selectDatas" size="mini" placeholder="请选择" @change="selectExcel" v-has-permi="['system:supplies:list']">
<el-option
v-for="s in selectData"
:key="s.id"
:label="s.name"
:value="s.id"
>
</el-option>
</el-select>
</div>
<div id="luckysheet" style="margin: 0px;padding: 0px;position: absolute;width: 100%;height: 1000px;left: 0px;top: 150px;bottom: 0px;"></div>
<div v-show="isMaskShow" style="position: absolute;z-index: 1000000;left: 0px;top: 0px;bottom: 0px;right: 0px;background: rgba(255, 255, 255, 0.8);text-align: center;font-size: 40px;align-items: center;ustify-content: center;display: flex;">Downloading</div>
</div>
</template>
<script>
import $ from 'jquery'
import luckysheet from 'luckysheet'
import LuckyExcel from 'luckyexcel'
import axios from 'axios';
//导入库export.js 这个文件是es6的，不能在普通的HTML文件直接引入js文件（虽然都是js文件，但是有区别，具体请百度es6与es5）！需要把es6转es5才可以直接引入使用！
import { exportExcel } from '../../../../public/luckysheet/exportExcel'
import { getToken } from '../../../utils/auth'
var uploadExcel1;
var uploadExcel2;
export default {
name: 'wzgl',
/*props: {
msg: String
},*/
data() {
return {
selectData:[],
selectDatas:'',
name:'',
isMaskShow:false,
}
},
created() {
axios({
method: 'post',
url: process.env.VUE_APP_BASE_API + '/system/supplies/list',
headers:{
Authorization : "Bearer " + getToken(),
},
}).then(response=>{
//返回数据
this.selectData= response.data;
});
},
mounted() {
// In some cases, you need to use $nextTick
// this.$nextTick(() => {
//
// })
luckysheet.create({
container: 'luckysheet', // 设定DOM容器的id
title: 'Luckysheet Demo', // 设定表格名称
lang: 'zh', // 设定表格语言
//plugins:['chart'],
showinfobar:false,
showtoolbar: true, //是否第二列显示工具栏
data:[
{
"name": "Cell", //工作表名称
"color": "", //工作表颜色
"index": 0, //工作表索引
"status": 1, //激活状态
"order": 0, //工作表的下标
"hide": 0,//是否隐藏
"row": 36, //行数
"column": 18, //列数
"defaultRowHeight": 19, //自定义行高
"defaultColWidth": 73, //自定义列宽
"celldata": [], //初始化使用的单元格数据
"config": {
"merge":{}, //合并单元格
"rowlen":{}, //表格行高
"columnlen":{}, //表格列宽
"rowhidden":{}, //隐藏行
"colhidden":{}, //隐藏列
"borderInfo":{}, //边框
"authority":{}, //工作表保护
},
"scrollLeft": 0, //左右滚动条位置
"scrollTop": 315, //上下滚动条位置
"luckysheet_select_save": [], //选中的区域
"calcChain": [],//公式链
"isPivotTable":false,//是否数据透视表
"pivotTable":{},//数据透视表设置
"filter_select": {},//筛选范围
"filter": null,//筛选配置
"luckysheet_alternateformat_save": [], //交替颜色
"luckysheet_alternateformat_save_modelCustom": [], //自定义交替颜色
"luckysheet_conditionformat_save": {},//条件格式
"frozen": {}, //冻结行列配置
"chart": [], //图表配置
"zoomRatio":1, // 缩放比例
"image":[], //图片
"showGridLines": 1, //是否显示网格线
"dataVerification":{} //数据验证配置
}
]
});
},
methods: {
uploadExcel(evt) {
const files = evt.target.files
if (files == null || files.length == 0) {
alert('没有文件等待导入')
return
}
let name = files[0].name
let suffixArr = name.split('.'),
suffix = suffixArr[suffixArr.length - 1]
if (suffix != 'xlsx') {
alert('当前仅支持导入xlsx文件')
return
}
LuckyExcel.transformExcelToLucky(
files[0],
function(exportJson, luckysheetfile) {
uploadExcel1=exportJson;
if (exportJson.sheets == null || exportJson.sheets.length == 0) {
alert(
'无法读取excel文件的内容，目前不支持xls文件!'
)
return
}
//赋值
var ss= exportJson.sheets[0].celldata[0].v.v;
uploadExcel2.sheets[0].celldata[0].v.v = ss;
exportJson = uploadExcel2;
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
})
}
)
},
uploadExcel2(evt) {
const files = evt.target.files
if (files == null || files.length == 0) {
alert('没有文件等待导入')
return
}
let name = files[0].name
let suffixArr = name.split('.'),
suffix = suffixArr[suffixArr.length - 1]
if (suffix != 'xlsx') {
alert('当前仅支持导入xlsx文件')
return
}
LuckyExcel.transformExcelToLucky(
files[0],
function(exportJson, luckysheetfile) {
uploadExcel2=exportJson;
/*var obj=$.parseJSON(ss);*/
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
})
}
)
},
//查询模板
selectExcel(evt) {
axios({
method: 'post',
url: process.env.VUE_APP_BASE_API + '/system/supplies/list',
headers:{
Authorization : "Bearer " + getToken(),
},
data: {"id":evt}
}).then(response=>{
//返回数据
//$("#id").val(response.data);
});
const value = this.selected
const name = evt.target.options[evt.target.selectedIndex].innerText
if (value == '') {
return
}
this.isMaskShow = true
LuckyExcel.transformExcelToLuckyByUrl(
value,
name,
(exportJson, luckysheetfile) => {
if (exportJson.sheets == null || exportJson.sheets.length == 0) {
alert(
'无法读取excel文件的内容，目前不支持xls文件！'
)
return
}
this.isMaskShow = false
window.luckysheet.destroy()
window.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
})
}
)
},
//导出
deriveExcel() {
var date =new Date().getTime();
debugger
var e =window.luckysheet.getAllSheets();
var w =luckysheet.getAllSheets();
exportExcel(w, date+ '导出');
window.luckysheet.destroy();
},
//保存
saveExcel(){
var luckysheetfile = window.luckysheet.getLuckysheetfile();
var s =JSON.stringify(luckysheetfile);
// 发ajax请求，用以获取数据
// 发送 POST 请求
axios({
method: 'post',
url: process.env.VUE_APP_BASE_API + '/system/supplies/save',
headers:{
Authorization : "Bearer " + getToken(),
},
data: {"jsons":s}
}).then(response=>{
//返回数据
alert(response.data);
});
},
//取消
resetExcel(){
this.dialogVisible = false
},
//修改
editExcel(){
var luckysheetfile = window.luckysheet.getLuckysheetfile();
var s =JSON.stringify(luckysheetfile);
// 发ajax请求，用以获取数据
// 发送 POST 请求
axios({
method: 'post',
url: process.env.VUE_APP_BASE_API + '/system/supplies/edit',
headers:{
Authorization : "Bearer " + getToken(),
},
data: {"id":$("#id").val()}
}).then(response=>{
//返回数据
alert(response.data);
});
}
}
}
</script>
ruoyi-ui/src/views/system/supplies/index_back2.vue deleted 100644 → 0
View file @ f53c2323
<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="请选择你要查看的模板" >
<!-- <el-option label="自设的模板名" value="这里是Excel表内容"></el-option>-->
<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>
<!--<el-button type="primary" icon="el-icon-search" size="mini" >搜索</el-button> -->
<!--<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>-->
<!--<el-button type="primary" icon="el-icon-search" size="mini" >搜索</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="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>
<!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>-->
</el-row>
<!-- luckysheet容器 -->
<!-- <div id="luckysheetContainer"></div>-->
<div
id="luckysheet"
style="margin: 0px; padding: 0px; position: absolute; width: 100%;height: 800px; left: 0px; top: 110px; bottom: 0px; z-index: 0"
>
</div>
<!-- 用户添加或修改我的Excel表格的弹框 -->
<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="名称" >
<!-- onkeypress="if (event.keyCode == 13) return false" //关闭enter的触发事件 -->
<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(){
exportExcel(luckysheet.getAllSheets(), '导出')
},
/** 弹出的确认框关闭 */
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>
ruoyi-ui/src/views/system/supplies/index_template_back.vue deleted 100644 → 0
View file @ f53c2323
<template>
<div class="hello">
<div style="position: absolute; top: 0">
<!--保存-->
<el-button type="primary" @click="saveExcel" v-has-permi="['system:supplies:save']">保存</el-button>
<!--修改-->
<el-button type="primary" @click="editExcel" v-has-permi="['system:supplies:edit']">修改</el-button>
<!--删除-->
<el-button type="primary" @click="deleteExcel" v-has-permi="['system:supplies:delete']">删除</el-button>
<!--导出-->
<el-button type="primary" @click="deriveExcel">导出</el-button>
<!--导入-->
<input style="font-size: 16px" type="file" @change="uploadExcel"/>
<!--导入-->
<input style="font-size: 16px" type="file" @change="uploadExcel2"/>
<!--隐藏id-->
<input style="font-size: 16px" id="id" type="text" value=''/>
<a href="javascript:void(0)" @click="downloadExcel">下载选择的模板</a>
</div>
<div id="luckysheet" style="margin: 0px;padding: 0px;position: absolute;width: 100%;height: 1000px;left: 0px;top: 150px;bottom: 0px;"></div>
<div v-show="isMaskShow" style="position: absolute;z-index: 1000000;left: 0px;top: 0px;bottom: 0px;right: 0px;background: rgba(255, 255, 255, 0.8);text-align: center;font-size: 40px;align-items: center;ustify-content: center;display: flex;">Downloading</div>
</div>
</template>
<script>
import $ from 'jquery'
import luckysheet from 'luckysheet'
import LuckyExcel from 'luckyexcel'
import axios from 'axios';
//导入库export.js 这个文件是es6的，不能在普通的HTML文件直接引入js文件（虽然都是js文件，但是有区别，具体请百度es6与es5）！需要把es6转es5才可以直接引入使用！
import { exportExcel } from '../../../../public/luckysheet/exportExcel'
import { getToken } from '../../../utils/auth'
var uploadExcel1;
var uploadExcel2;
export default {
name: 'wzgl',
props: {
msg: String
},
data() {
},
mounted() {
// In some cases, you need to use $nextTick
// this.$nextTick(() => {
//
// })
luckysheet.create({
container: 'luckysheet', // 设定DOM容器的id
title: 'Luckysheet Demo', // 设定表格名称
lang: 'zh', // 设定表格语言
plugins:['chart'],
showinfobar:false,
data:[
{
"name": "Cell", //工作表名称
"color": "", //工作表颜色
"index": 0, //工作表索引
"status": 1, //激活状态
"order": 0, //工作表的下标
"hide": 0,//是否隐藏
"row": 36, //行数
"column": 18, //列数
"defaultRowHeight": 19, //自定义行高
"defaultColWidth": 73, //自定义列宽
"celldata": [], //初始化使用的单元格数据
"config": {
"merge":{}, //合并单元格
"rowlen":{}, //表格行高
"columnlen":{}, //表格列宽
"rowhidden":{}, //隐藏行
"colhidden":{}, //隐藏列
"borderInfo":{}, //边框
"authority":{}, //工作表保护
},
"scrollLeft": 0, //左右滚动条位置
"scrollTop": 315, //上下滚动条位置
"luckysheet_select_save": [], //选中的区域
"calcChain": [],//公式链
"isPivotTable":false,//是否数据透视表
"pivotTable":{},//数据透视表设置
"filter_select": {},//筛选范围
"filter": null,//筛选配置
"luckysheet_alternateformat_save": [], //交替颜色
"luckysheet_alternateformat_save_modelCustom": [], //自定义交替颜色
"luckysheet_conditionformat_save": {},//条件格式
"frozen": {}, //冻结行列配置
"chart": [], //图表配置
"zoomRatio":1, // 缩放比例
"image":[], //图片
"showGridLines": 1, //是否显示网格线
"dataVerification":{} //数据验证配置
}
]
});
},
methods: {
uploadExcel(evt) {
const files = evt.target.files
if (files == null || files.length == 0) {
alert('没有文件等待导入')
return
}
let name = files[0].name
let suffixArr = name.split('.'),
suffix = suffixArr[suffixArr.length - 1]
if (suffix != 'xlsx') {
alert('当前仅支持导入xlsx文件')
return
}
LuckyExcel.transformExcelToLucky(
files[0],
function(exportJson, luckysheetfile) {
uploadExcel1=exportJson;
if (exportJson.sheets == null || exportJson.sheets.length == 0) {
alert(
'无法读取excel文件的内容，目前不支持xls文件!'
)
return
}
//赋值
var ss= exportJson.sheets[0].celldata[0].v.v;
uploadExcel2.sheets[0].celldata[0].v.v = ss;
exportJson = uploadExcel2;
window.luckysheet.destroy()
window.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
})
}
)
},
uploadExcel2(evt) {
const files = evt.target.files
if (files == null || files.length == 0) {
alert('没有文件等待导入')
return
}
let name = files[0].name
let suffixArr = name.split('.'),
suffix = suffixArr[suffixArr.length - 1]
if (suffix != 'xlsx') {
alert('当前仅支持导入xlsx文件')
return
}
LuckyExcel.transformExcelToLucky(
files[0],
function(exportJson, luckysheetfile) {
uploadExcel2=exportJson;
/*var obj=$.parseJSON(ss);*/
if (exportJson.sheets == null || exportJson.sheets.length == 0) {
alert(
'无法读取excel文件的内容，目前不支持xls文件!'
)
return
}
window.luckysheet.destroy()
window.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
})
}
)
},
//查询模板
selectExcel(evt) {
const value = this.selected
const name = evt.target.options[evt.target.selectedIndex].innerText
if (value == '') {
return
}
this.isMaskShow = true
LuckyExcel.transformExcelToLuckyByUrl(
value,
name,
(exportJson, luckysheetfile) => {
if (exportJson.sheets == null || exportJson.sheets.length == 0) {
alert(
'无法读取excel文件的内容，目前不支持xls文件！'
)
return
}
this.isMaskShow = false
window.luckysheet.destroy()
window.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
})
}
)
},
//下载模板
downloadExcel() {
const value = this.selected
if (value.length == 0) {
alert('请选择一个模板！')
return
}
var elemIF = document.getElementById('Lucky-download-frame')
if (elemIF == null) {
elemIF = document.createElement('iframe')
elemIF.style.display = 'none'
elemIF.id = 'Lucky-download-frame'
document.body.appendChild(elemIF)
}
elemIF.src = value
},
//导出
deriveExcel() {
exportExcel(window.luckysheet.getAllSheets(), '导出')
},
//保存
saveExcel(){
var luckysheetfile = window.luckysheet.getLuckysheetfile();
var s =JSON.stringify(luckysheetfile);
// 发ajax请求，用以获取数据
// 发送 POST 请求
axios({
method: 'post',
url: process.env.VUE_APP_BASE_API + '/system/supplies/save',
headers:{
Authorization : "Bearer " + getToken(),
},
data: {"jsons":s}
}).then(response=>{
//返回数据
alert(response.data);
});
},
//修改
editExcel(){
var luckysheetfile = window.luckysheet.getLuckysheetfile();
var s =JSON.stringify(luckysheetfile);
// 发ajax请求，用以获取数据
// 发送 POST 请求
axios({
method: 'post',
url: process.env.VUE_APP_BASE_API + '/system/supplies/edit',
headers:{
Authorization : "Bearer " + getToken(),
},
data: {"jsons":s}
}).then(response=>{
//返回数据
alert(response.data);
});
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
ruoyi-ui/src/views/system/supplies/rule.vue 0 → 100644
View file @ f7cff4f8
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
<el-form-item label="组织机构" prop="deptName">
<el-input
v-model="queryParams.deptName"
placeholder="请输入组织机构名称"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="机构状态" prop="status">
<el-select v-model="queryParams.status" placeholder="机构状态" clearable size="small">
<el-option
v-for="dict in statusOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
/>
</el-select>
</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" v-if="0">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['system:dept:add']"
>新增</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table
v-loading="loading"
:data="deptList"
row-key="deptId"
default-expand-all
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
>
<el-table-column label="序号" type="index" :index="indexFormat"></el-table-column>
<el-table-column prop="deptName" label="组织机构" width="400"></el-table-column>
<el-table-column prop="deptShortName" label="机构简称"></el-table-column>
<el-table-column prop="deptType" label="机构类型" :formatter="deptTypeFormat"></el-table-column>
<el-table-column prop="status" label="状态" :formatter="statusFormat"></el-table-column>
<el-table-column prop="businessSector" label="业务板块" :formatter="businessSectorFormat"></el-table-column>
<el-table-column prop="orderNum" label="排序"></el-table-column>
<el-table-column label="创建时间" align="center" prop="createTime" width="200">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</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="handleUpdate(scope.row)"
v-hasPermi="['system:dept:edit']"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-plus"
@click="handleAdd(scope.row)"
v-hasPermi="['system:dept:add']"
>新增</el-button>
<el-button
v-if="scope.row.parentId != 0"
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['system:dept:remove']"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 添加或修改部门对话框 -->
<el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-row>
<el-col :span="24" v-if="form.parentId !== 0">
<el-form-item label="上级机构" prop="parentId">
<treeselect v-model="form.parentId" :options="deptOptions" :normalizer="normalizer" placeholder="选择上级机构" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="组织机构" prop="deptName">
<el-input v-model="form.deptName" placeholder="请输入组织机构名称" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="机构简称" prop="deptShortName">
<el-input v-model="form.deptShortName" placeholder="请输入机构简称" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="机构类型" prop="deptType">
<el-select v-model="form.deptType" placeholder="机构类型" clearable size="small">
<el-option
v-for="dict in deptTypeOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="业务板块" prop="businessSector">
<el-select v-model="form.businessSector" placeholder="业务板块" clearable size="small">
<el-option
v-for="dict in businessSectorOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="负责人" prop="leader">
<el-input v-model="form.leader" placeholder="请输入负责人" maxlength="20" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="联系电话" prop="phone">
<el-input v-model="form.phone" placeholder="请输入联系电话" maxlength="11" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="联系邮箱" prop="email">
<el-input v-model="form.email" placeholder="请输入联系邮箱" maxlength="50" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="联系地址" prop="address">
<el-input v-model="form.address" placeholder="请输入联系地址" maxlength="50" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="机构状态">
<el-radio-group v-model="form.status">
<el-radio
v-for="dict in statusOptions"
:key="dict.dictValue"
:label="dict.dictValue"
>{{dict.dictLabel}}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="显示排序" prop="orderNum">
<el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
</el-form-item>
</el-col>
</el-row>
</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>
</template>
<script>
import {addDept, delDept, getDept, listDept, listDeptExcludeChild, updateDept} from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
name: "Dept",
components: { Treeselect },
data() {
return {
// 遮罩层
loading: true,
// 显示搜索条件
showSearch: true,
// 表格树数据
deptList: [],
// 部门树选项
deptOptions: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 状态数据字典
statusOptions: [],
// 业务板块数据字典
businessSectorOptions: [],
// 机构类型数据字典
deptTypeOptions: [],
// 查询参数
queryParams: {
deptName: undefined,
deptShortName: undefined,
deptType: undefined,
businessSector: undefined,
status: undefined
},
// 表单参数
form: {},
// 表单校验
rules: {
parentId: [
{ required: true, message: "上级机构不能为空", trigger: "blur" }
],
deptName: [
{ required: true, message: "组织机构不能为空", trigger: "blur" }
],
deptShortName: [
{ required: true, message: "机构简称不能为空", trigger: "blur" }
],
orderNum: [
{ required: true, message: "显示排序不能为空", trigger: "blur" }
],
email: [
{
type: "email",
message: "'请输入正确的邮箱地址",
trigger: ["blur", "change"]
}
],
phone: [
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: "请输入正确的手机号码",
trigger: "blur"
}
]
}
};
},
created() {
this.getList();
this.getDicts("sys_normal_disable").then(response => {
this.statusOptions = response.data;
});
this.getDicts("sys_dept_business_type").then(response => {
this.businessSectorOptions = response.data;
});
this.getDicts("sys_dept_type").then(response => {
this.deptTypeOptions = response.data;
});
},
methods: {
/** 查询部门列表 */
getList() {
this.loading = true;
listDept(this.queryParams).then(response => {
this.deptList = this.handleTree(response.data, "deptId");
this.loading = false;
});
},
/** 转换部门数据结构 */
normalizer(node) {
if (node.children && !node.children.length) {
delete node.children;
}
return {
id: node.deptId,
label: node.deptName,
children: node.children
};
},
indexFormat(index){
return index +1
},
// 机构类型字典翻译
deptTypeFormat(row, column) {
return this.selectDictLabel(this.deptTypeOptions, row.deptType);
},
// 字典状态字典翻译
statusFormat(row, column) {
return this.selectDictLabel(this.statusOptions, row.status);
},
// 字典业务板块字典翻译
businessSectorFormat(row, column) {
return this.selectDictLabel(this.businessSectorOptions, row.businessSector);
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
deptId: undefined,
parentId: undefined,
deptName: undefined,
deptShortName: undefined,
businessSector: undefined,
deptType: undefined,
orderNum: undefined,
leader: undefined,
phone: undefined,
email: undefined,
address: undefined,
status: "0"
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
/** 新增按钮操作 */
handleAdd(row) {
this.reset();
if (row != undefined) {
this.form.parentId = row.deptId;
}
this.open = true;
this.title = "添加机构";
listDept().then(response => {
this.deptOptions = this.handleTree(response.data, "deptId");
});
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
getDept(row.deptId).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改机构";
});
listDeptExcludeChild(row.deptId).then(response => {
this.deptOptions = this.handleTree(response.data, "deptId");
});
},
/** 提交按钮 */
submitForm: function() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.deptId != undefined) {
updateDept(this.form).then(response => {
this.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addDept(this.form).then(response => {
this.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
this.$confirm('是否确认删除名称为"' + row.deptName + '"的数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function() {
return delDept(row.deptId);
}).then(() => {
this.getList();
this.msgSuccess("删除成功");
})
}
}
};
</script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment