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.

845 lines
32 KiB
Vue

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<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.customerId"
filterable
clearable
remote
reserve-keyword
placeholder="所属客户"
:remote-method="getCustomerList"
:loading="loading">
<el-option
v-for="item in customerList"
:key="item.customerId"
:label="item.companyName"
:value="item.customerId">
</el-option>
</el-select>
</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="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()">新增模板</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="customerName" width="240"></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
>
<el-button
type="text"
size="small"
@click="previewPdf(scope.row)"
>预览
</el-button
>
</template>
</el-table-column>
</el-table>
<el-pagination
:current-page="query.page"
:page-size="query.limit"
@current-change="handleCurrentChange"
layout="prev, pager, next"
:total="total"
>
</el-pagination>
</el-card>
<!--表单-->
<el-dialog
v-if="formVisible"
:title="formMap[formName]"
:visible.sync="formVisible"
:close-on-click-modal="false"
:close-on-press-escape="false"
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>
</el-col>
<el-col :span="5">
<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="5">
<el-form-item prop="customerId">
<el-select
v-model="formData.customerId"
filterable
clearable
remote
reserve-keyword
placeholder="请输入关键词"
:remote-method="getCustomerList"
:loading="loading">
<el-option
v-for="item in customerList"
:key="item.customerId"
:label="item.companyName"
:value="item.customerId">
</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="module">
<el-select v-model="formData.module" placeholder="模板类型">
<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"
: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>
<div slot="tip" class="el-upload__tip" v-if="formData.path==''">只能上传 jasper 文件,且不超过 2
MB
</div>
<div slot="tip" class="el-upload__tip">{{ formData.path }}</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"
: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>
<div slot="tip" class="el-upload__tip" v-if="formData.jrxmlPath==null"> jrxml
2 MB
</div>
<div slot="tip" class="el-upload__tip">{{ formData.jrxmlPath }}</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"
v-if="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
:current-page="selectTemplateQuery.page"
: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} from "../../../config/app";
import {saveAs} from 'file-saver';
import {demoPrint} from "@/api/itextpdf/itextpdf";
import {isBlank} from "@/utils/strUtil";
import {getCompanyList} from "@/api/warehouse/company";
const formJson = {
id: "",
name: "",
type: "2",
module: null,
param: "",
path: "",
jrxmlPath: null,
rowCount: 10,
qrcodeCount: 1,
remark: "",
customerId: null
};
const moduleFormJson = {
id: "",
templateId: 0,
};
export default {
data() {
return {
query: {
name: "",
module: null,
customerId: null,
page: 1,
limit: 20
},
headers: {},
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: "单据"},
customerList: []
};
},
methods: {
onReset() {
this.$router.push({
path: ""
});
this.query = {
name: "",
page: 1,
limit: 20
};
this.getList();
},
onSubmit() {
this.query.page = 1;
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 || [];
if (this.list.length > 0) {
this.list.forEach(item =>{
if (isBlank(item.customerId)) {
item.customerName = '公共模板';
} else {
this.customerList.forEach(customer => {
if (item.customerId === customer.customerId){
item.customerName = customer.companyName;
}
});
}
});
}
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) {
this.handleDownload(BASE_URL + "/udiwms/donwload/file?fileName=" + row.jrxmlPath, row.name + ".jrxml");
},
previewPdf(row) {
let query = {id: row.id};
demoPrint(query).then((response) => {
//将pdf文件转换为url。
const binaryData = [];
binaryData.push(response);
//获取blob链接。
let url = window.URL.createObjectURL(
new Blob(binaryData, {type: "application/pdf"})
);
this.loading = false;
window.open(url);//打开新标签页预览pdf。
}).catch(() => {
this.loading = false;
});
},
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() {
// 清空验证信息表单
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() {
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) {
},
showFieldExpain(row) {
this.currentRow = row.fieldExplain.replace('\\\n', '<br>');
this.centerDialogVisible = true;
},
// 显示表单
handleForm(index, row) {
this.formVisible = true;
this.formData = JSON.parse(JSON.stringify(formJson));
this.fileList = [];
this.jrxmlFileList = [];
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 = JSON.parse(JSON.stringify(formJson));
this.formName = "add";
this.uploadDisabled = false;
},
templateConfig(row) {
},
submitUpload() {
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) {
if (response.code === 20000) {
this.formData.path = response.data.path;
} 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) {
if (response.code === 20000) {
this.formData.jrxmlPath = response.data.path;
} else {
this.$message.error("上传失败:" + response.message);
}
},
submitTemplate() {
this.$refs["dataForm"].validate(valid => {
if (valid) {
if (isBlank(this.formData.path) || isBlank(this.formData.jrxmlPath)) {
this.$message.error("请上传模板文件");
return;
}
if (isBlank(this.formData.customerId)) {
this.$confirm('所属客户未选择,此模板将添加为公共模板,是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.saveTemplate();
}).catch(() => {
this.$message({
type: 'info',
message: '已取消'
});
});
} else {
this.saveTemplate();
}
}
});
},
saveTemplate() {
this.formLoading = true;
let data = Object.assign({}, this.formData);
data.name = data.name.trim();
data.create_time = null;
data.update_time = null;
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;
this.getList();
})
.catch(() => {
this.formLoading = false;
});
},
deleteTemplate(row) {
this.$confirm("此操作将永久删除该模板, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(() => {
systemPDFTemplateDeleteById({id: row.id, path: row.path})
.then(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;
},
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;
})
.catch(() => {
});
},
getCustomerList(key) {
let query = {};
if (!isBlank(key)) {
query.companyName = key;
}
getCompanyList(query).then((res) => {
if (res.code === 20000) {
this.customerList = res.data || [];
}
});
},
},
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.getCustomerList();
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,
};
}
};
</script>
<style type="text/scss" lang="scss">
</style>