|
|
@@ -6,11 +6,11 @@
|
|
|
</div>
|
|
|
<div class="printer-list">
|
|
|
<div class="item" v-for="(v,i) in printerList" :key="i">
|
|
|
- <img class="img" :src="require(`../../../../static/image/printer-online-${v.onlineStatus}.png`)" alt="">
|
|
|
+ <img class="img" :src="require(`../../../../static/image/printer-online-1.png`)" alt="">
|
|
|
<div class="name">{{v.name}}</div>
|
|
|
<div class="shop-name">{{v.shopName}}</div>
|
|
|
<div class="btns">
|
|
|
- <img @click.stop="printTest(v)" src="../../../../static/image/print-icon.png" alt="">
|
|
|
+ <!-- <img @click.stop="printTest(v)" src="../../../../static/image/print-icon.png" alt=""> -->
|
|
|
<img @click.stop="addPrinter(v)" src="../../../../static/image/edit-icon.png" alt="">
|
|
|
<img @click.stop="deletePrinter(v)" src="../../../../static/image/delete-icon.png" alt="">
|
|
|
</div>
|
|
|
@@ -55,7 +55,8 @@
|
|
|
</div>
|
|
|
<div class="card-right">
|
|
|
<div class="setting-params">
|
|
|
- <div class="card-title">所属门店</div>
|
|
|
+ <div class="card-title">所属门店<div class="card-tip"> (设置门店专属贺卡样式)</div>
|
|
|
+ </div>
|
|
|
<el-select v-model="params.shopId" multiple @change="changeShop">
|
|
|
<el-option v-for="item in shopList" :key="item.id" :value="item.id" :label="item.name">
|
|
|
<div>{{ item.name }}</div>
|
|
|
@@ -118,7 +119,7 @@
|
|
|
</div>
|
|
|
<div class="btns">
|
|
|
<el-button size="small" type="warning">保存贺卡</el-button>
|
|
|
- <el-button size="small">打印测试页</el-button>
|
|
|
+ <el-button size="small" @click="printTest">打印测试页</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -129,40 +130,47 @@
|
|
|
<el-dialog title="云盒管理" :visible.sync="dialogVisible" width="600px">
|
|
|
<el-form ref="form" :model="form" label-width="120px">
|
|
|
<el-form-item label="云盒名称">
|
|
|
- <el-input v-model="form.name"></el-input>
|
|
|
+ <el-input v-model="form.name" clearable placeholder="请自定义云盒名称"></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="云盒序列号">
|
|
|
- <el-input v-model="form.deviceSn"></el-input>
|
|
|
+ <el-input v-model="form.deviceSn" clearable placeholder="请填写云盒序列号"></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="云盒秘钥">
|
|
|
- <el-input v-model="form.deviceSecret"></el-input>
|
|
|
+ <el-input v-model="form.deviceSecret" clearable placeholder="请填写云盒秘钥"></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="关联门店">
|
|
|
- <el-select v-model="form.shopId" multiple @change="changePrinterShop" :span="24">
|
|
|
+ <el-select style="width:300px;" clearable v-model="form.shopIdList" multiple @change="changePrinterShop" max-width="300px">
|
|
|
<el-option v-for="item in shopList" :key="item.id" :value="item.id" :label="item.name">
|
|
|
<div>{{ item.name }}</div>
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="选择打印机">
|
|
|
- <el-select v-model="form.deviceName" placeholder="请选择活动区域">
|
|
|
+ <el-select style="width:300px;" v-model="form.deviceName" placeholder="请选择打印机">
|
|
|
<el-option v-for="item in cloudList" :key="item.id" :value="`${ item.printerName }(USB${item.port})`">
|
|
|
<div>{{ item.printerName }}(USB{{item.port}})</div>
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
- <el-button type="success" @click="getCloudPrinterInfo">获取打印机信息</el-button>
|
|
|
+ <el-button type="success" @click="getCloudPrinterInfo">获取打印机信息</el-button>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
<span slot="footer" class="dialog-footer">
|
|
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
|
|
- <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
|
|
|
+ <el-button type="primary" @click="cloudPrinterManager">确 定</el-button>
|
|
|
</span>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { getNewShopList, getCloudDevice } from "../../../api/shop";
|
|
|
+import {
|
|
|
+ getNewShopList,
|
|
|
+ getCloudDevice,
|
|
|
+ deviceAdd,
|
|
|
+ cloudPrint,
|
|
|
+ shopDeviceList,
|
|
|
+ deviceDelete,
|
|
|
+} from "../../../api/shop";
|
|
|
export default {
|
|
|
name: "greetingCardPrinter",
|
|
|
components: {},
|
|
|
@@ -180,8 +188,10 @@ export default {
|
|
|
name: "",
|
|
|
deviceSn: "lk10gy13861829",
|
|
|
deviceSecret: "2Vy7D5sDDjUI2DZs",
|
|
|
- shopId: "",
|
|
|
+ shopIdList: [0],
|
|
|
deviceName: "",
|
|
|
+ deviceType: 28,
|
|
|
+ shopId: 0,
|
|
|
},
|
|
|
cloudList: [],
|
|
|
params: {
|
|
|
@@ -265,6 +275,43 @@ export default {
|
|
|
watch: {},
|
|
|
// 方法集合
|
|
|
methods: {
|
|
|
+ printTest() {
|
|
|
+ cloudPrint().then(() => {
|
|
|
+ console.log("添加云盒信息", res);
|
|
|
+ if (!res.code) {
|
|
|
+ this.cloudList = res.data;
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ type: "error",
|
|
|
+ message: res.msg,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ cloudPrinterManager() {
|
|
|
+ if (!this.form.name) {
|
|
|
+ return this.$message.warning(`请输入云盒名称！`);
|
|
|
+ }
|
|
|
+ if (!this.form.deviceSn) {
|
|
|
+ return this.$message.warning(`请输入云盒序列号！`);
|
|
|
+ }
|
|
|
+ if (!this.form.deviceSecret) {
|
|
|
+ return this.$message.warning(`请输入云盒秘钥！`);
|
|
|
+ }
|
|
|
+ deviceAdd(this.form).then((res) => {
|
|
|
+ console.log("添加云盒信息", res);
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.$message.success(`成功添加云盒！`);
|
|
|
+ this.dialogVisible = false;
|
|
|
+ this.getCloudPrinterList();
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ type: "error",
|
|
|
+ message: res.msg,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
getCloudPrinterInfo() {
|
|
|
let params = {
|
|
|
deviceId: this.form.deviceSn,
|
|
|
@@ -275,6 +322,9 @@ export default {
|
|
|
console.log("云盒信息", res);
|
|
|
if (!res.code) {
|
|
|
this.cloudList = res.data;
|
|
|
+ let cloud = this.cloudList[0];
|
|
|
+ if (!cloud) return;
|
|
|
+ this.form.deviceName = `${cloud.printerName}(USB${cloud.port})`;
|
|
|
} else {
|
|
|
this.$message({
|
|
|
type: "error",
|
|
|
@@ -283,8 +333,11 @@ export default {
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
- addPrinter() {
|
|
|
+ addPrinter(v) {
|
|
|
this.dialogVisible = true;
|
|
|
+ if (v) this.form = v;
|
|
|
+ if (this.form.id) return;
|
|
|
+ this.form.name = `贺卡打印云盒${new Date().getTime()}`;
|
|
|
},
|
|
|
changeShop(e) {
|
|
|
if (e.at(-1)) {
|
|
|
@@ -297,11 +350,11 @@ export default {
|
|
|
},
|
|
|
changePrinterShop(e) {
|
|
|
if (e.at(-1)) {
|
|
|
- this.form.shopId = e.filter((v) => {
|
|
|
+ this.form.shopIdList = e.filter((v) => {
|
|
|
return v;
|
|
|
});
|
|
|
} else {
|
|
|
- this.form.shopId = [0];
|
|
|
+ this.form.shopIdList = [0];
|
|
|
}
|
|
|
},
|
|
|
changeDmPaperSize(e) {
|
|
|
@@ -318,6 +371,36 @@ export default {
|
|
|
this.params.dmPaperLength = 145;
|
|
|
}
|
|
|
},
|
|
|
+ deletePrinter(v) {
|
|
|
+ this.$confirm("此操作将删除打印云盒, 是否继续?", "提示", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning",
|
|
|
+ center: true,
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ deviceDelete({ id: v.id }).then((res) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.$message({
|
|
|
+ type: "error",
|
|
|
+ message: "删除成功！",
|
|
|
+ });
|
|
|
+ this.refreshData();
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ type: "error",
|
|
|
+ message: res.msg,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.$message({
|
|
|
+ type: "info",
|
|
|
+ message: "已取消删除",
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
getNewShopList() {
|
|
|
getNewShopList().then((res) => {
|
|
|
if (res.code === 200) {
|
|
|
@@ -331,10 +414,23 @@ export default {
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
+ getCloudPrinterList() {
|
|
|
+ shopDeviceList({ deviceType: 28 }).then((res) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.printerList = res.data;
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ type: "error",
|
|
|
+ message: res.msg,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
},
|
|
|
// 生命周期 - 创建完成（可以访问当前this实例）
|
|
|
created() {
|
|
|
this.getNewShopList();
|
|
|
+ this.getCloudPrinterList();
|
|
|
},
|
|
|
// 生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
mounted() {},
|
|
|
@@ -477,10 +573,17 @@ export default {
|
|
|
display: flex;
|
|
|
margin-top: 10px;
|
|
|
.card-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
font-weight: bold;
|
|
|
font-size: 14px;
|
|
|
margin: 10px 0;
|
|
|
+ .card-tip {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #fc7200;
|
|
|
+ }
|
|
|
}
|
|
|
+
|
|
|
.card-right {
|
|
|
width: 230px;
|
|
|
flex-shrink: 0;
|
Funny