You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
spms-vue/src/views/userManage/param/systemPDFTemplate.vue

825 lines
32 KiB
Vue

3 years ago
<template>
<div>
<el-card class="el-card">
<el-form
:inline="true"
:model="query"
class="query-form"
size="mini"
>
<el-row>
<el-form-item class="query-form-item">
<el-input v-model="query.name" placeholder="模板名称"></el-input>
</el-form-item>
<el-form-item class="query-form-item">
<el-select v-model="query.module" placeholder="模板类型">
<el-option label="全部" value=""></el-option>
<el-option label="标签" value="0"></el-option>
<el-option label="报表" value="1"></el-option>
<el-option label="单据" value="2"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button-group>
<el-button type="primary" icon="el-icon-refresh" @click="onReset"></el-button>
<el-button type="primary" icon="search" @click="onSubmit"></el-button>
<el-button type="primary" icon="search" @click="handleAddForm(null)"></el-button>
</el-button-group>
</el-form-item>
</el-row>
</el-form>
<el-table :data="list" style="width: 100%">
<el-table-column type="index" label="序号" width="50"></el-table-column>
<el-table-column label="模板名称" prop="name" width="260"></el-table-column>
<el-table-column label="模板类型" width="150">
<template slot-scope="scope">
{{ moduleNameMap[scope.row.module] }}
</template>
</el-table-column>
<el-table-column label="更新时间" prop="update_time" width="180"></el-table-column>
<!-- <el-table-column label="表格行数" prop="rowCount" width="100"></el-table-column>-->
<!-- <el-table-column label="二维码数量" prop="qrcodeCount" width="125"></el-table-column>-->
<el-table-column label="备注" prop="remark"></el-table-column>
<el-table-column label="操作" fixed="right" width="250">
<template slot-scope="scope">
<el-button
type="text"
size="small"
@click.native="handleForm(scope.$index, scope.row)"
>设置
</el-button
>
<el-button
type="text"
size="small"
@click.native="deleteTemplate(scope.row)"
>删除
</el-button
>
<el-button
type="text"
size="small"
@click="jumpDl(scope.row)"
>模板下载
</el-button
>
</template>
</el-table-column>
</el-table>
<el-pagination
:page-size="query.limit"
@current-change="handleCurrentChange"
layout="prev, pager, next"
:total="total"
>
</el-pagination>
</el-card>
<!--表单-->
<el-dialog
:title="formMap[formName]"
:visible.sync="formVisible"
:close-on-click-modal="false"
:close-on-press-escape="false"
:before-close="hideForm"
width="75%"
top="5vh"
>
<el-form :model="formData" :rules="formRules" ref="dataForm">
<!-- <el-row :gutter="20">-->
<!-- <el-col :span="2">-->
<!-- <div class="ao-text">-->
<!-- <span>模板名称</span>-->
<!-- </div>-->
<!-- <div class="ao-text">-->
<!-- <span>模板名称</span>-->
<!-- </div>-->
<!-- </el-col>-->
<!-- <el-col :span="8">-->
<!-- <el-form-item prop="name">-->
<!-- <el-input v-model="formData.name" auto-complete="off" :disabled="false"></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="所属模块" prop="type">-->
<!-- <el-select v-model="formData.type" placeholder="所属模块">-->
<!-- <el-option label="订单详情" value="1"></el-option>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<!-- <el-col :span="2">-->
<!-- <div class="ao-text">-->
<!-- <span>备注</span>-->
<!-- </div>-->
<!-- </el-col>-->
<!-- <el-col :span="8">-->
<!-- <el-form-item prop="type">-->
<!-- <el-input type="textarea" v-model="formData.remark" rows=6></el-input>-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<!-- </el-row>-->
<el-row :gutter="20">
<el-col :span="2">
<div class="ao-text">
<span>模板名称</span>
</div>
</el-col>
<el-col :span="10">
<el-form-item prop="name">
<el-input v-model="formData.name" auto-complete="off" :disabled="false"></el-input>
</el-form-item>
</el-col>
<el-col :span="2">
<div class="ao-text">
<span>备注</span>
</div>
</el-col>
<el-col :span="8">
<el-form-item prop="module">
<!-- <el-select v-model="formData.module" placeholder="所属模块">-->
<!-- <el-option-->
<!-- v-for="item in moduleNameList"-->
<!-- :key="item.idStr"-->
<!-- :label="item.name"-->
<!-- :value="item.idStr"-->
<!-- ></el-option>-->
<!-- </el-select>-->
<el-select v-model="formData.module" placeholder="模板类型">
<el-option label="标签" value="0"></el-option>
<el-option label="报表" value="1"></el-option>
<el-option label="单据" value="2"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="2">
<div class="ao-text">
<span>备注</span>
</div>
</el-col>
<el-col :span="20">
<el-form-item>
<el-input type="textarea" v-model="formData.remark" rows=6></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="3">
<div class="ao-text">
<span>选择jasper模板</span>
</div>
</el-col>
<el-col :span="5">
<el-form-item label="">
<el-upload
class="upload-demo"
ref="uploadJasper"
:action="this.uploadUrl"
:limit="1"
:headers="headers"
3 years ago
:on-exceed="uploadHandleExceed"
accept=".jasper"
:on-change="uploadOnchange"
:on-success="uploadHandleSuccess"
:auto-upload="true"
:file-list="fileList"
>
<el-button slot="trigger" size="small" type="primary" :disabled="uploadDisabled">选取文件
</el-button>
<!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload"></el-button>-->
<div slot="tip" class="el-upload__tip">只能上传 jasper 文件且不超过 2 MB</div>
</el-upload>
</el-form-item>
</el-col>
<el-col :span="3">
<div class="ao-text">
<span>选择jrxml模板</span>
</div>
</el-col>
<el-col :span="5">
<el-form-item label="">
<el-upload
class="upload-demo"
ref="uploadJrxml"
:action="this.uploadJrxmlUrl"
:headers="headers"
3 years ago
:limit="1"
:on-exceed="uploadJrxmlHandleExceed"
accept=".jrxml"
:on-change="uploadJrxmlOnchange"
:on-success="uploadJrxmlHandleSuccess"
:file-list="jrxmlFileList"
:auto-upload="true">
<el-button slot="trigger" size="small" type="primary" :disabled="uploadDisabled">选取文件
</el-button>
<!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload"></el-button>-->
<div slot="tip" class="el-upload__tip">只能上传 jrxml 文件且不超过 2 MB</div>
</el-upload>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click.native="hideForm">取消</el-button>
<el-button
type="primary"
@click.native="submitUpload()"
:loading="formLoading"
>提交
</el-button
>
</div>
<div style="margin-top: 18px ; color: #F71616;">
<span>提示模板字体支持宋体华文宋体微软雅黑&nbsp;</span>
</div>
</el-dialog>
<!-- 模块选择模板 -->
<el-dialog
title="选择模板"
:close-on-click-modal="false"
:close-on-press-escape="false"
:visible.sync="moduleFormVisible"
:before-close="moduleHideForm"
width="45%"
top="5vh"
>
<el-form ref="singleTable">
<el-table v-loading="selectTemplateLoading" :data="selectTemplateList" style="width: 100%"
highlight-current-row
@current-change="moduleSelectHandleCurrentChange">
<el-table-column type="index" label="序号" width="50"></el-table-column>
<el-table-column label="模板名称" prop="name" width="200"></el-table-column>
<el-table-column label="备注" prop="remark"></el-table-column>
</el-table>
<el-pagination
:page-size="selectTemplateQuery.limit"
@current-change="moduleHandleCurrentChange"
layout="prev, pager, next"
:total="selectTemplateTotal"
>
</el-pagination>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click.native="moduleHideForm">取消</el-button>
<el-button
type="primary"
@click.native="moduleSubmitSelectTemplate()"
:loading="moduleFormLoading"
>确定
</el-button
>
</div>
</el-dialog>
<el-dialog
title="字段说明"
:visible.sync="centerDialogVisible"
width="80%"
center>
<span style="white-space: pre-wrap;">{{ currentRow }}</span>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="centerDialogVisible = false"> </el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import {
systemPDFTemplateList,
systemPDFTemplateSave,
systemPDFTemplateDeleteById,
systemPDFModuleList,
systemPDFModuleSave,
getSystemPDFModules
} from "../../../api/param/systemPDFTemplate";
import {BASE_URL, SERVER_IP} from "../../../config/app";
import {authRoleAuthList} from "../../../api/auth/authRole";
import {saveAs} from 'file-saver';
const formJson = {
id: "",
name: "",
type: "2",
module: null,
param: "",
path: "",
jrxmlPath: null,
rowCount: 10,
qrcodeCount: 1,
remark: "",
};
const moduleFormJson = {
id: "",
templateId: 0,
};
export default {
data() {
return {
query: {
name: "",
module: null,
page: 1,
limit: 20
},
headers: {},
3 years ago
list: [],
total: 0,
moduleQuery: {
name: "",
page: 1,
limit: 20
},
currentRow: null,
moduleList: [],
moduleNameList: [],
moduleTotal: 0,
selectTemplateQuery: {
name: "",
module: null,
page: 1,
limit: 20
},
centerDialogVisible: false,
selectTemplateList: [],
selectTemplateTotal: 0,
selectTemplateLoading: false,
moduleSelectQuery: {
name: "",
page: 1,
limit: 20
},
moduleSelectList: [],
moduleSelectTotal: 0,
loading: true,
index: null,
formName: null,
moduleFormName: null,
formMap: {
add: "新增",
update: "设置"
},
formLoading: false,
formVisible: false,
moduleFormLoading: false,
moduleFormVisible: false,
formData: formJson,
moduleFormData: moduleFormJson,
formRules: {
name: [
{required: true, message: "请输入模板名称", trigger: "blur"}
],
module: [
{required: true, message: "请选择模板类型", trigger: "blur"}
]
},
deleteLoading: false,
uploadUrl: "",
uploadJrxmlUrl: "",
fileList: [],
jrxmlFileList: [],
uploadDisabled: false,
moduleLoading: false,
moduleNameMap: {0: "标签", 1: "报表", 2: "单据"},
};
},
methods: {
onReset() {
this.$router.push({
path: ""
});
this.query = {
name: "",
page: 1,
limit: 20
};
this.getList();
},
onSubmit() {
this.getList();
},
handleCurrentChange(val) {
this.query.page = val;
this.getList();
},
moduleHandleCurrentChange(val) {
this.moduleQuery.page = val;
this.getModuleList();
},
getList() {
this.loading = true;
systemPDFTemplateList(this.query)
.then(response => {
this.loading = false;
this.list = response.data.list || [];
this.total = response.data.total || 0;
})
.catch(() => {
this.loading = false;
this.list = [];
this.total = 0;
});
},
moduleClick(row) {
this.query = {
module: row.id,
page: 1,
limit: 20
};
this.getList();
},
jumpDl(row) {
console.log(BASE_URL);
console.log(row.templateDlUrl + "----");
this.handleDownload(BASE_URL + "/udiwms/donwload/file?fileName=" + row.jrxmlPath, row.name + ".jrxml");
},
handleDownload(url, name) {
this.getBlob(url).then(blob => {
saveAs(blob, name);
})
return false;
},
getBlob(url) {
return new Promise(resolve => {
const xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.onload = () => {
if (xhr.status === 200) {
resolve(xhr.response);
}
};
xhr.send();
})
},
getModuleList() {
this.moduleLoading = true;
systemPDFModuleList(this.moduleQuery)
.then(response => {
this.moduleLoading = false;
this.moduleList = response.data.list || [];
this.moduleTotal = response.data.total || 0;
})
.catch(() => {
this.moduleLoading = false;
this.moduleList = [];
this.moduleTotal = 0;
});
},
// 刷新表单
resetForm() {
if (this.$refs["dataForm"]) {
// 清空验证信息表单
this.$refs["dataForm"].clearValidate();
// 刷新表单
this.$refs["dataForm"].resetFields();
this.fileList = null;
this.jrxmlFileList = null;
this.getList();
}
},
// 隐藏表单
hideForm() {
// 更改值
this.formVisible = !this.formVisible;
return true;
},
moduleHideForm() {
this.moduleFormVisible = !this.moduleFormVisible;
this.selectTemplateQuery.module = null;
return true;
},
moduleSelectTemplate(row) {
this.moduleFormData = {
id: row.id,
templateId: row.templateId,
};
this.moduleFormVisible = true;
this.selectTemplateQuery = {
name: "",
module: row.id,
page: 1,
limit: 20
};
this.selectTemplateGetList();
},
selectTemplateGetList() {
console.log(this.selectTemplateQuery)
this.selectTemplateLoading = true;
systemPDFTemplateList(this.selectTemplateQuery)
.then(response => {
this.selectTemplateLoading = false;
this.selectTemplateList = response.data.list || [];
this.selectTemplateTotal = response.data.total || 0;
})
.catch(() => {
this.selectTemplateLoading = false;
this.selectTemplateList = [];
this.selectTemplateTotal = 0;
});
},
previewTemplate(row) {
console.log(row)
},
showFieldExpain(row) {
this.currentRow = row.fieldExplain.replace('\\\n', '<br>');
this.centerDialogVisible = true;
// const {href} = this.$router.resolve({//打开新窗口页面
// path: '/showText',
// query: {
// content: row.fieldExplain
// }
// })
// window.open(href, '_blank')
},
// 显示表单
handleForm(index, row) {
this.formVisible = true;
this.formData = JSON.parse(JSON.stringify(formJson));
this.fileList = [];
if (row !== null) {
this.formData = Object.assign({}, row);
this.formData.module = row.module + "";
}
this.index = index;
this.formName = "update";
this.uploadDisabled = true;
},
handleAddForm(row) {
this.formVisible = true;
// this.formData = {module: row.id + ""};
this.fileList = [];
this.formName = "add";
this.uploadDisabled = false;
},
templateConfig(row) {
},
submitUpload() {
if (this.$refs.uploadJasper.uploadFiles.length < 1 && !this.uploadDisabled) {
this.$message.warning(`请选择jasper文件`);
}
if (this.$refs.uploadJrxml.uploadFiles.length < 1 && !this.uploadDisabled) {
this.$message.warning(`请选择jasper文件`);
}
console.log(this.formName)
this.$refs["dataForm"].validate(valid => {
if (valid) {
this.submitTemplate();
// if (!this.uploadDisabled) {
// this.$refs.uploadJasper.submit();
// this.$refs.uploadJrxml.submit();
// } else {
// this.submitTemplate();
// }
}
});
},
uploadHandleExceed(files, fileList) {
this.$message.warning(`当前限制选择 1 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`);
},
uploadOnchange(file, fileList) {
let fileName = file.name;
let uid = file.uid
let pos = fileName.lastIndexOf(".");
let lastName = fileName.substring(pos, fileName.length);
if (lastName.toLowerCase() !== ".jasper") {
this.$message.error("上传文件只能是 jasper 格式");
for (let i = 0; i < fileList.length; i++) {//从list删除
if (fileList[i].uid === uid) {
fileList.splice(i, 1)
}
}
return;
}
// 限制上传文件的大小
const isLt = file.size / 1024 / 1024 / 2 <= 1;
if (!isLt) {
this.$message.error("上传文件大小不能超过 2MB");
for (let i = 0; i < fileList.length; i++) {
if (fileList[i].uid === uid) {
fileList.splice(i, 1)
}
}
}
return isLt;
},
uploadHandleSuccess(response, file, fileList) {
console.log(response)
if (response.code === 20000) {
this.formData.path = response.data.path;
// this.submitTemplate();
} else {
this.$message.error("上传失败:" + response.message);
}
},
uploadJrxmlHandleExceed(files, fileList) {
this.$message.warning(`当前限制选择 1 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`);
},
uploadJrxmlOnchange(file, fileList) {
let fileName = file.name;
let uid = file.uid
let pos = fileName.lastIndexOf(".");
let lastName = fileName.substring(pos, fileName.length);
if (lastName.toLowerCase() !== ".jrxml") {
this.$message.error("上传文件只能是 jrxml 格式");
for (let i = 0; i < fileList.length; i++) {//从list删除
if (fileList[i].uid === uid) {
fileList.splice(i, 1)
}
}
return;
}
// 限制上传文件的大小
const isLt = file.size / 1024 / 1024 / 2 <= 1;
if (!isLt) {
this.$message.error("上传文件大小不能超过 2MB");
for (let i = 0; i < fileList.length; i++) {
if (fileList[i].uid === uid) {
fileList.splice(i, 1)
}
}
}
return isLt;
},
uploadJrxmlHandleSuccess(response, file, fileList) {
console.log(response)
if (response.code === 20000) {
this.formData.jrxmlPath = response.data.path;
// this.submitTemplate();
} else {
this.$message.error("上传失败:" + response.message);
}
},
submitTemplate() {
console.log(this.formData)
this.$refs["dataForm"].validate(valid => {
if (valid) {
this.formLoading = true;
let data = Object.assign({}, this.formData);
data.name = data.name.trim();
systemPDFTemplateSave(data, this.formName)
.then(response => {
this.formLoading = false;
if (response.code !== 20000) {
this.$message.error(response.message);
return false;
}
this.$message.success("操作成功");
this.formVisible = false;
if (this.formName === "add") {
// 向头部添加数据
if (response.data && response.data.id) {
data.id = response.data.id;
this.list.unshift(data);
}
} else {
this.list.splice(this.index, 1, data);
}
// 刷新表单
this.resetForm();
this.getList();
this.getModuleList();
})
.catch(() => {
this.formLoading = false;
});
}
});
},
deleteTemplate(row) {
this.$confirm("此操作将永久删除该模板, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(() => {
systemPDFTemplateDeleteById({id: row.id, path: row.path})
.then(response => {
console.log(response)
if (response.code === 20000) {
this.$message.success(response.data);
// 刷新表单
this.resetForm();
this.getList();
} else {
this.$message.error(response.message);
}
})
.catch(() => {
})
}).catch(() => {
});
},
moduleSelectSetCurrent(row) {
this.$refs.singleTable.setCurrentRow(row);
},
moduleSelectHandleCurrentChange(val) {
this.moduleFormData.templateId = val.id;
console.log(val)
console.log(this.moduleFormData)
},
moduleSubmitSelectTemplate() {
this.moduleFormLoading = true;
let data = Object.assign({}, this.moduleFormData);
this.moduleFormName = 'update';
systemPDFModuleSave(data, this.moduleFormName)
.then(response => {
this.moduleFormLoading = false;
if (response.code !== 20000) {
this.$message.error(response.message);
return false;
}
this.$message.success("操作成功");
this.moduleFormVisible = false;
if (this.moduleFormName === "add") {
// 向头部添加数据
if (response.data && response.data.id) {
data.id = response.data.id;
this.moduleList.unshift(data);
}
} else {
this.moduleList.splice(this.index, 1, data);
}
this.getModuleList();
})
.catch(() => {
this.moduleFormLoading = false;
});
},
getPDFModuleNameList() {
getSystemPDFModules()
.then((response) => {
this.moduleNameList = response.data.list;
// this.moduleNameMap = {};
// this.moduleNameList.forEach((obj, index) => {
// console.log(obj)
// this.moduleNameMap[obj.id] = obj.name;
// });
console.log(this.moduleNameMap)
})
.catch(() => {
});
},
},
filters: {
paramStatusFilterType(paramStatus) {
const paramStatusTypeMap = {
0: "gray",
1: "success"
};
return paramStatusTypeMap[paramStatus];
},
paramStatusFilterName(paramStatus) {
const paramStatusNameMap = {
1: "订单详情",
2: "配货管理-打印订单"
};
return paramStatusNameMap[paramStatus];
}
},
mounted() {
},
created() {
this.getList();
this.getPDFModuleNameList();
this.getModuleList();
this.uploadUrl = BASE_URL + "/udiwms/upload/pdf/template/jasper";
this.uploadJrxmlUrl = BASE_URL + "/udiwms/upload/pdf/template/jrxml";
this.headers = {
ADMIN_ID: store.getters.adminId,
ADMIN_TOKEN: store.getters.token,
};
3 years ago
}
};
</script>
<style type="text/scss" lang="scss">
</style>