132 lines
6.1 KiB
HTML
132 lines
6.1 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>上传并打印文件</title>
|
||
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/ant-design-vue@1.7.8/dist/antd.min.js"></script>
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ant-design-vue@1.7.8/dist/antd.min.css">
|
||
</head>
|
||
<body>
|
||
<div id="app">
|
||
<a-config-provider>
|
||
<a-layout>
|
||
<a-layout-content>
|
||
<a-card title="上传并打印文件">
|
||
<p>打印机状态: {{ printerStatus }}</p>
|
||
<a-progress :percent="printProgress" v-if="printProgress > 0" />
|
||
<a-form :form="form" @submit="handleSubmit">
|
||
<a-form-item label="选择文件">
|
||
<a-upload
|
||
name="file"
|
||
:before-upload="beforeUpload"
|
||
:file-list="fileList"
|
||
>
|
||
<a-button>
|
||
<template #icon>
|
||
<UploadOutlined />
|
||
</template>
|
||
点击上传
|
||
</a-button>
|
||
</a-upload>
|
||
</a-form-item>
|
||
<a-form-item label="打印选项">
|
||
<a-select v-decorator="['printOption', { rules: [{ required: true, message: '请选择打印选项!' }] }]">
|
||
<a-select-option value="all">打印所有页面</a-select-option>
|
||
<a-select-option value="odd">打印奇数页</a-select-option>
|
||
<a-select-option value="even">打印偶数页</a-select-option>
|
||
<a-select-option value="specific">打印指定页面</a-select-option>
|
||
</a-select>
|
||
</a-form-item>
|
||
<a-form-item v-if="form.getFieldValue('printOption') === 'specific'" label="页面">
|
||
<a-input v-decorator="['pages', { rules: [{ required: true, message: '请指定页面!' }] }]" placeholder="例如，1,3,5-7" />
|
||
</a-form-item>
|
||
<a-form-item>
|
||
<a-button type="primary" html-type="submit">上传并打印</a-button>
|
||
</a-form-item>
|
||
</a-form>
|
||
</a-card>
|
||
</a-layout-content>
|
||
</a-layout>
|
||
</a-config-provider>
|
||
</div>
|
||
<script>
|
||
new Vue({
|
||
el: '#app',
|
||
data() {
|
||
return {
|
||
form: this.$form.createForm(this, { name: 'coordinated' }),
|
||
fileList: [],
|
||
printerStatus: '未配置',
|
||
printProgress: 0
|
||
};
|
||
},
|
||
mounted() {
|
||
this.fetchPrinterStatus();
|
||
},
|
||
methods: {
|
||
handleSubmit(e) {
|
||
e.preventDefault();
|
||
this.form.validateFields((err, values) => {
|
||
if (!err) {
|
||
const formData = new FormData();
|
||
formData.append('file', this.fileList[0]);
|
||
formData.append('printOption', values.printOption);
|
||
formData.append('pages', values.pages || '');
|
||
|
||
fetch('/upload', {
|
||
method: 'POST',
|
||
body: formData
|
||
})
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
if (data.progress) {
|
||
this.printProgress = data.progress;
|
||
this.pollPrintProgress();
|
||
} else {
|
||
this.$message.success(data.message);
|
||
}
|
||
})
|
||
.catch(error => {
|
||
console.error('Error:', error);
|
||
this.$message.error('上传并打印文件失败。');
|
||
});
|
||
}
|
||
});
|
||
},
|
||
beforeUpload(file) {
|
||
this.fileList = [...this.fileList, file];
|
||
return false;
|
||
},
|
||
fetchPrinterStatus() {
|
||
fetch('/get-printer-status')
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
this.printerStatus = data.status;
|
||
})
|
||
.catch(error => {
|
||
console.error('获取打印机状态失败:', error);
|
||
});
|
||
},
|
||
pollPrintProgress() {
|
||
const interval = setInterval(() => {
|
||
fetch('/get-print-progress')
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
this.printProgress = data.progress;
|
||
if (data.progress >= 100) {
|
||
clearInterval(interval);
|
||
this.$message.success('打印完成');
|
||
}
|
||
})
|
||
.catch(error => {
|
||
console.error('获取打印进度失败:', error);
|
||
});
|
||
}, 1000);
|
||
}
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |