Skip to content

K
klck
Commit 49010bf8 authored by xiangjiaojunxp's avatar xiangjiaojunxp
Browse files
Options

物资详情模块导入按钮规则完善

parent e81b1fdf
Hide whitespace changes
Inline Side-by-side
Showing with 80 additions and 169 deletions
ruoyi-ui/package.json
View file @ 49010bf8
......@@ -5,9 +5,9 @@
"author": "若依",
"license": "MIT",
"scripts": {
"dev": "vue-cli-service serve",
"build:prod": "vue-cli-service build",
"build:stage": "vue-cli-service build --mode staging",
"dev": "set NODE_OPTIONS=--openssl-legacy-provider & vue-cli-service serve",
"build:prod": "set NODE_OPTIONS=--openssl-legacy-provider & vue-cli-service build",
"build:stage": "set NODE_OPTIONS=--openssl-legacy-provider & vue-cli-service build --mode staging",
"preview": "node build/index.js --preview",
"lint": "eslint --ext .js,.vue src"
},
......@@ -65,7 +65,7 @@
"vue-router": "3.4.9",
"vuedraggable": "2.24.3",
"vuex": "3.6.0",
"xlsx": "^0.17.2"
"xlsx": "^0.17.5"
},
"devDependencies": {
"@vue/cli-plugin-babel": "4.4.6",
......
ruoyi-ui/src/views/system/supplies/index.vue
View file @ 49010bf8
......@@ -5,14 +5,14 @@
<el-select v-model="selectedOption" ref="mySelect" size="mini" @change="handleOptionChange" placeholder="请选择您要查看的模板" >
<!-- <el-option label="自设的模板名" value="使用空白模板"></el-option>-->
<el-option
v-for="item in depss" :key="item.id" :label="item.name" :value="item.id">
v-for="item in depss" :key="item.id" :label="item.templateName" :value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="规则" prop="rule">
<el-select v-model="selectedRule" ref="mySelect" size="mini" @change="handleRuleChange" placeholder="请选择您要查看的规则" >
<el-option
v-for="iem in luckyrule" :key="iem.id" :label="iem.name" :value="iem.id">
v-for="iem in luckyrule" :key="iem.id" :label="iem.roleName" :value="iem.id">
</el-option>
</el-select>
</el-form-item>
......@@ -22,20 +22,11 @@
</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"
icon="el-icon-download2"
size="mini"
@click="handleExport"
v-hasPermi="['ruoyi-myexcel:myexcel:export']"
......@@ -52,36 +43,17 @@
:file-list="fileList"
:disabled="disableNextButton"
>
<el-button plain size="mini" icon="el-icon-upload2" type="primary" :disabled="disableNextButton" >导入</el-button>
<el-button plain size="mini" icon="el-icon-upload" type="primary" :disabled="disableNextButton" >导入</el-button>
</el-upload>
</el-col>
</el-row>
<!-- luckysheet容器 -->
<div
id="luckysheet"
style="margin: 0px; padding: 0px; position: absolute; width: 100%;height: 1000px; left: 0px; top: 110px; bottom: 0px; z-index: 0"
style="margin: 0px; padding: 0px; position: absolute; width: 100%;left: 0px; top: 110px; height: 1000px; z-index: 0"
>
</div>
<!-- 用户添加或修改我的Excel表格的弹框 -->
<el-dialog
title="是否确认保存?"
:visible.sync="dialogVisible"
width="30%"
style="z-index: 1; "
>
<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>
......@@ -90,16 +62,12 @@
import $ from 'jquery'
/*安装插件 npm install xlsx，安装完成后引入 import XLSX from ‘xlsx’*/
import XLSX from 'xlsx'
import {addMyluckyexcel, getMyluckyexcel, listMyluckyexcel,listRule,getRule,templateList,templateListid,roleListid,roleList} from "@/api/ruoyi-myLuckyexcel/myluckyexcel";
import { getSuppliesTemplate, listSuppliesTemplate,roleList,roleListid} 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'
var excelTemp;//模板json
var excelTempName;//模板name
var excelRule;//规则json
var fileName="新建XLSX工作表"; //定义表名
export default {
name: "Mymodule",
......@@ -119,17 +87,12 @@ export default {
// 表单参数
form: {},
// 查询参数
queryParams: {
/*pageNum: 1,
pageSize: 10,
name: null,
content: null*/
},
queryParams: {},
dialogRef: 'dialogImportRef',
};
},
created() {
//刷新页面时进行的操作
this.getList();
},
......@@ -140,26 +103,25 @@ export default {
methods:{
/** 页面刷新时展示的数据*/
getList() {
listMyluckyexcel(this.queryParams).then(response => {
listSuppliesTemplate(this.queryParams).then(response => {
this.depss = response.rows;
});
listRule(this.queryParams).then(response => {
this.luckyrule = response.rows;
});
},
/** 下拉选和页面luckysheet绑定 */
handleOptionChange() {
//根据选中的下拉选项值获取相应的信息
getMyluckyexcel(this.selectedOption).then(response => {
const sysSupplies = response.data;
this.luckysheetData = sysSupplies.jsons;
getSuppliesTemplate(this.selectedOption).then(response => {
const sysSupplies = response.rows;
this.luckysheetData = sysSupplies[0].templateContent;
//将接收到的json存到json_data中
//const json_data = response.data;
let json_data = JSON.parse(sysSupplies.jsons);
fileName= sysSupplies.name;
excelTemp = json_data;//模板json
excelTempName = fileName;//模板name
var json_data = JSON.parse(sysSupplies[0].templateContent);
roleList(this.selectedOption).then(response => {
this.luckyrule = response.rows;
});
fileName= sysSupplies.name;
//luckysheet.destroy()
luckysheet.create({
container: "luckysheet", // Luckysheet 的容器元素 ID
title: fileName, // Excel 文件名
......@@ -172,49 +134,15 @@ export default {
this.$message.error('查询失败,发生未知错误!');
});
},
/** 查询excel表中的坐标对应的数*/
ceshi(){
// 假设要获取第一个 sheet 中第2行、第3列（B3）单元格的坐标和数据
const sheetIndex = 0; // 第一个 sheet 的索引为0
const rowIndex = 4; // 由于索引从0开始，所以第2行的索引为1
const colIndex = 2; // 由于索引从0开始，所以第3列的索引为2
// 获取指定 sheet 的指定单元格的数据
debugger
const cellData = luckysheet.getCellValue(sheetIndex,colIndex,rowIndex);
console.log("单元格数据:", cellData);
// 获取指定 sheet 的指定单元格的坐标
const cellCoordinate = luckysheet.getExcelCell(sheetIndex,colIndex,rowIndex);
console.log("单元格坐标:", cellCoordinate);
},
//下拉选择规则
handleRuleChange(){
if (this.selectedOption==='') {
this.selectedRule='';
this.$message.warning("选择规则前请先选择模板!");
return ; // 如果按钮被禁用，提前返回，避免执行下一步操作
}
getRule(this.selectedRule).then(response => {
const sysRules = response.data;
this.disableNextButton = this.selectedOption === '';
//将接收到的json存到json_data中
let json_data = JSON.parse(sysRules.jsons);
let filename= sysRules.name;
excelRule = json_data;
this.disableNextButton = this.selectedRule === '';
}).catch(() => {
// 处理错误逻辑，这里是一个空的错误处理函数
this.$message.error('查询失败,发生未知错误!');
});
},
/** 弹出的确认框关闭 */
/*handleClose(done) {
this.$confirm('确认关闭？')
.then(_ => {
done();
})
.catch(_ => {});
},*/
/** 回车事件和保存提交绑定 */
handleEnter(event) {
if (event.keyCode === 13) {
......@@ -223,32 +151,6 @@ export default {
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() {
//刷新下拉选框内容
......@@ -320,66 +222,74 @@ export default {
luckysheet.create(options)
},
/** 导入事件*/
handleFileChange(evt) {
var id=this.selectedRule;
if (this.disableNextButton) {
this.$message.warning("请先选择模板再进行导入!");
return false; // 如果按钮被禁用，提前返回，避免执行下一步操作
}
let name = evt.name
let suffixArr = name.split('.'),
suffix = suffixArr[suffixArr.length - 1]
if (suffix != 'xlsx') {
this.$message({
message: "上传格式不正确，请上传xls或者xlsx格式",
type: "warning"
});
return
}
LuckyExcel.transformExcelToLucky(
evt,
function(exportJson, luckysheetfile) {
if (exportJson.sheets == null || exportJson.sheets.length == 0) {
this.$message({
message: "导入失败，请检查上传的文件是否正确",
type: "warning"
});
return
}
//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
let name = evt.name
let suffixArr = name.split('.'),
suffix = suffixArr[suffixArr.length - 1]
if (suffix != 'xlsx') {
this.$message({
message: "上传格式不正确，请上传xls或者xlsx格式",
type: "warning"});
return
}
LuckyExcel.transformExcelToLucky(
evt,
function(exportJson) {
console.log("---------------------------------------"+exportJson);
if (exportJson.sheets == null || exportJson.sheets.length == 0) {
this.$message({
message: "导入失败，请检查上传的文件是否正确",
type: "warning"
});
return
}
roleListid(id).then(response => {
var sysRules = JSON.parse(response.rows[0].detailContent);
for (var i = 0; i < sysRules.length; i++) {
let value;
var num = exportJson.sheets[sysRules[i].se].celldata.length;
for(var j=0;j<num;j++){
var c =exportJson.sheets[sysRules[i].se].celldata[j].c;
var r =exportJson.sheets[sysRules[i].se].celldata[j].r;
if(r == sysRules[i].re && c ==sysRules[i].ce ){
value=exportJson.sheets[sysRules[i].se].celldata[j].v.v;
console.log("value是"+value);
//切换到想要的sheet
luckysheet.setSheetActive(sysRules[i].st);
//将值放到指定位置
luckysheet.setCellValue(sysRules[i].rt, sysRules[i].ct,value);
}
}
}
//4、保存
exportJson.sheets = excelTemp;
luckysheet.destroy()
luckysheet.create({
container: 'luckysheet', //luckysheet is the container id
title: excelTempName,
lang: 'zh', // 设定表格语言
showinfobar: false,
data: exportJson.sheets,
userInfo: exportJson.info.name.creator
})
// 切换到原页面
luckysheet.setSheetActive(0);
})
})
}
)
},
/** 导出设置 */
handleExport(){
exportExcel(luckysheet.getAllSheets(), excelTempName)
},
handleExport: debounce(function() {
// 处理点击事件
exportExcel(luckysheet.getAllSheets(), fileName)
}, 500), // 设置延迟时间，单位为毫秒
}
// 配置项
// 配置项111
};
// debounce函数定义
function debounce(func, delay) {
......@@ -394,3 +304,4 @@ function debounce(func, delay) {
};
}
</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