100 lines
4.2 KiB
HTML
100 lines
4.2 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="打印机配置">
|
|
<a-form :form="form" @submit="handleSubmit">
|
|
<a-form-item label="打印机名称">
|
|
<a-select v-decorator="['printerName', { rules: [{ required: true, message: '请选择一个打印机!' }] }]">
|
|
<a-select-option v-for="printer in printers" :key="printer" :value="printer">{{ printer }}</a-select-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
<a-form-item>
|
|
<a-button type="primary" html-type="submit">保存配置</a-button>
|
|
</a-form-item>
|
|
</a-form>
|
|
<h2>当前配置</h2>
|
|
<p v-if="currentPrinter">当前打印机: {{ currentPrinter }}</p>
|
|
<p v-else>未找到配置。</p>
|
|
</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' }),
|
|
printers: [],
|
|
currentPrinter: ''
|
|
};
|
|
},
|
|
mounted() {
|
|
this.fetchConfig();
|
|
this.fetchPrinters();
|
|
},
|
|
methods: {
|
|
handleSubmit(e) {
|
|
e.preventDefault();
|
|
this.form.validateFields((err, values) => {
|
|
if (!err) {
|
|
fetch('/configure-printer', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(values)
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
this.$message.success(data.message);
|
|
this.currentPrinter = values.printerName;
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
this.$message.error('保存配置失败。');
|
|
});
|
|
}
|
|
});
|
|
},
|
|
fetchConfig() {
|
|
fetch('/get-config')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.printerName) {
|
|
this.currentPrinter = data.printerName;
|
|
this.form.setFieldsValue({ printerName: data.printerName });
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('获取配置失败:', error);
|
|
});
|
|
},
|
|
fetchPrinters() {
|
|
fetch('/get-printers')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
this.printers = data;
|
|
})
|
|
.catch(error => {
|
|
console.error('获取打印机失败:', error);
|
|
});
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |