|
@@ -44,77 +44,126 @@
|
|
|
|
|
|
</div>
|
|
</div>
|
|
<div class="card-setting">
|
|
<div class="card-setting">
|
|
|
|
+ <div class="card-left" :style="`max-height: ${params.dmPaperLength}mm;max-width: ${params.dmPaperWidth}mm;`">
|
|
|
|
+ <i class="el-icon-arrow-down icon1" :style="`top:${params.paddingTop}mm;left:${params.paddingLeft}mm;`"></i>
|
|
|
|
+ <i class="el-icon-arrow-down icon2" :style="`top:${params.paddingTop}mm;right:${params.paddingRight}mm;`"></i>
|
|
|
|
+ <i class="el-icon-arrow-down icon3" :style="`bottom:${params.paddingBottom}mm;left:${params.paddingLeft}mm;`"></i>
|
|
|
|
+ <i class="el-icon-arrow-down icon4" :style="`bottom:${params.paddingBottom}mm;right:${params.paddingRight}mm;`"></i>
|
|
|
|
+ <div class="card-con" :style="`font-family: ${params.fontFamily};padding:${params.paddingTop}mm ${params.paddingRight}mm ${params.paddingBottom}mm ${params.paddingLeft}mm;`">
|
|
|
|
+ <font size="6">亲爱的,生日快乐!希望你开心快乐每一天!</font>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
<div class="card-right">
|
|
<div class="card-right">
|
|
<div class="setting-params">
|
|
<div class="setting-params">
|
|
|
|
+ <div class="card-title">所属门店</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>
|
|
|
|
+ </el-option>
|
|
|
|
+ </el-select>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="setting-params">
|
|
<div class="card-title">贺卡字体</div>
|
|
<div class="card-title">贺卡字体</div>
|
|
- <el-select v-model="parmas.fontFamily" placeholder="请选择">
|
|
|
|
|
|
+ <el-select v-model="params.fontFamily">
|
|
<el-option v-for="item in fonts" :key="item.value" :value="item.value" :label="item.name">
|
|
<el-option v-for="item in fonts" :key="item.value" :value="item.value" :label="item.name">
|
|
<div :style="`font-family: ${item.value};font-size:20px;`">{{ item.name }}</div>
|
|
<div :style="`font-family: ${item.value};font-size:20px;`">{{ item.name }}</div>
|
|
</el-option>
|
|
</el-option>
|
|
</el-select>
|
|
</el-select>
|
|
</div>
|
|
</div>
|
|
<div class="setting-params">
|
|
<div class="setting-params">
|
|
|
|
+ <div class="card-title">打印方向</div>
|
|
|
|
+ <el-select v-model="params.dmOrientation">
|
|
|
|
+ <el-option v-for="item in directonList" :key="item.value" :value="item.value" :label="item.name">
|
|
|
|
+ <div>{{ item.name }}</div>
|
|
|
|
+ </el-option>
|
|
|
|
+ </el-select>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="setting-params">
|
|
|
|
+ <div class="card-title">贺卡尺寸类型</div>
|
|
|
|
+ <el-select v-model="params.dmPaperSize" @change="changeDmPaperSize">
|
|
|
|
+ <el-option v-for="item in paperSize" :key="item.value" :value="item.value" :label="item.name">
|
|
|
|
+ <div>{{ item.name }}</div>
|
|
|
|
+ </el-option>
|
|
|
|
+ </el-select>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="setting-params">
|
|
<div class="card-title">贺卡尺寸</div>
|
|
<div class="card-title">贺卡尺寸</div>
|
|
- <el-input placeholder="请输入贺卡宽度" v-model="parmas.width">
|
|
|
|
|
|
+ <el-input :disabled="[9,11].includes(params.dmPaperSize)" v-model="params.dmPaperWidth">
|
|
<template slot="prepend">宽</template>
|
|
<template slot="prepend">宽</template>
|
|
- <template slot="append">mm</template>
|
|
|
|
|
|
+ <template slot="append">毫米</template>
|
|
</el-input>
|
|
</el-input>
|
|
- <el-input placeholder="请输入贺卡高度" v-model="parmas.height">
|
|
|
|
|
|
+ <el-input :disabled="[9,11].includes(params.dmPaperSize)" v-model="params.dmPaperLength">
|
|
<template slot="prepend">高</template>
|
|
<template slot="prepend">高</template>
|
|
- <template slot="append">mm</template>
|
|
|
|
|
|
+ <template slot="append">毫米</template>
|
|
</el-input>
|
|
</el-input>
|
|
</div>
|
|
</div>
|
|
<div class="setting-params">
|
|
<div class="setting-params">
|
|
<div class="card-title">贺卡内容间距</div>
|
|
<div class="card-title">贺卡内容间距</div>
|
|
- <el-input v-model="parmas.paddingTop">
|
|
|
|
|
|
+ <el-input v-model="params.paddingTop">
|
|
<template slot="prepend">上</template>
|
|
<template slot="prepend">上</template>
|
|
- <template slot="append">mm</template>
|
|
|
|
|
|
+ <template slot="append">毫米</template>
|
|
</el-input>
|
|
</el-input>
|
|
- <el-input v-model="parmas.paddingBottom">
|
|
|
|
|
|
+ <el-input v-model="params.paddingBottom">
|
|
<template slot="prepend">下</template>
|
|
<template slot="prepend">下</template>
|
|
- <template slot="append">mm</template>
|
|
|
|
|
|
+ <template slot="append">毫米</template>
|
|
</el-input>
|
|
</el-input>
|
|
- <el-input v-model="parmas.paddingLeft">
|
|
|
|
|
|
+ <el-input v-model="params.paddingLeft">
|
|
<template slot="prepend">左</template>
|
|
<template slot="prepend">左</template>
|
|
- <template slot="append">mm</template>
|
|
|
|
|
|
+ <template slot="append">毫米</template>
|
|
</el-input>
|
|
</el-input>
|
|
- <el-input v-model="parmas.paddingRight">
|
|
|
|
|
|
+ <el-input v-model="params.paddingRight">
|
|
<template slot="prepend">右</template>
|
|
<template slot="prepend">右</template>
|
|
- <template slot="append">mm</template>
|
|
|
|
|
|
+ <template slot="append">毫米</template>
|
|
</el-input>
|
|
</el-input>
|
|
</div>
|
|
</div>
|
|
- </div>
|
|
|
|
- <div class="card-left" :style="`max-height: ${parmas.height}mm;max-width: ${parmas.width};`">
|
|
|
|
- <div class="card-con" :style="`font-family: ${parmas.fontFamily};`">
|
|
|
|
- <font size="6">祝您生意兴隆!财源广进!</font>
|
|
|
|
|
|
+ <div class="btns">
|
|
|
|
+ <el-button size="small" type="warning">保存贺卡</el-button>
|
|
|
|
+ <el-button size="small">打印测试页</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <printer-add :shopList="shopList" @shopDeviceList="refreshData" ref="printerAdd" :devices="deviceList"></printer-add>
|
|
|
|
|
|
+ <!-- 新增、编辑云盒 -->
|
|
|
|
+ <el-dialog title="云盒管理" :visible.sync="dialogVisible" width="30%">
|
|
|
|
+ <el-form ref="form" :model="form" label-width="80px">
|
|
|
|
+ <el-form-item label="云盒名称">
|
|
|
|
+ <el-input v-model="form.name"></el-input>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="云盒序列号">
|
|
|
|
+ <el-input v-model="form.name"></el-input>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="云盒秘钥">
|
|
|
|
+ <el-input v-model="form.name"></el-input>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-select v-model="form.shopId" multiple @change="changePrinterShop">
|
|
|
|
+ <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 label="选择打印机">
|
|
|
|
+ <el-select v-model="form.name" placeholder="请选择活动区域">
|
|
|
|
+ <el-option v-for="item in cloudList" :key="item.id" :value="item.id" :label="item.name">
|
|
|
|
+ <div>{{ item.name }}</div>
|
|
|
|
+ </el-option>
|
|
|
|
+ </el-select>
|
|
|
|
+ <el-tag @click="getCloudPrinterInfo">获取打印机信息</el-tag>
|
|
|
|
+ </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>
|
|
|
|
+ </span>
|
|
|
|
+ </el-dialog>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
-import printerAdd from "./printerAdd";
|
|
|
|
-import {
|
|
|
|
- getShopList,
|
|
|
|
- shopDeviceList,
|
|
|
|
- deviceDetail,
|
|
|
|
- deviceList,
|
|
|
|
- deviceAdd,
|
|
|
|
- deviceDelete,
|
|
|
|
- deviceStatus,
|
|
|
|
- printTest,
|
|
|
|
- shopListNew,
|
|
|
|
-} from "../../../api/shop";
|
|
|
|
|
|
+import { getNewShopList } from "../../../api/shop";
|
|
export default {
|
|
export default {
|
|
name: "greetingCardPrinter",
|
|
name: "greetingCardPrinter",
|
|
- components: {
|
|
|
|
- printerAdd,
|
|
|
|
- },
|
|
|
|
|
|
+ components: {},
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
list: [
|
|
list: [
|
|
@@ -125,17 +174,19 @@ export default {
|
|
tips: "开启后订单一键打印贺卡,暂不支持自动打印",
|
|
tips: "开启后订单一键打印贺卡,暂不支持自动打印",
|
|
},
|
|
},
|
|
],
|
|
],
|
|
- parmas: {
|
|
|
|
- width: 210,
|
|
|
|
- height: 297,
|
|
|
|
|
|
+ params: {
|
|
|
|
+ dmPaperWidth: 210,
|
|
|
|
+ dmPaperLength: 297,
|
|
paddingTop: 10,
|
|
paddingTop: 10,
|
|
paddingBottom: 10,
|
|
paddingBottom: 10,
|
|
paddingLeft: 10,
|
|
paddingLeft: 10,
|
|
paddingRight: 10,
|
|
paddingRight: 10,
|
|
- printDirection: 0, // 0 竖向 1 横向(左) 2 横向(右)
|
|
|
|
- printSizeStyle: 0, // 0 A4 1 其他
|
|
|
|
|
|
+ dmOrientation: 1, // 1:竖向 2:横向
|
|
fontFamily: "FangZhengKaiTi",
|
|
fontFamily: "FangZhengKaiTi",
|
|
|
|
+ shopId: [0],
|
|
|
|
+ dmPaperSize: 9, // 纸张尺寸
|
|
},
|
|
},
|
|
|
|
+ printerList: [],
|
|
shopList: [],
|
|
shopList: [],
|
|
fonts: [
|
|
fonts: [
|
|
{
|
|
{
|
|
@@ -171,6 +222,31 @@ export default {
|
|
value: "slideyouran",
|
|
value: "slideyouran",
|
|
},
|
|
},
|
|
],
|
|
],
|
|
|
|
+ paperSize: [
|
|
|
|
+ {
|
|
|
|
+ name: "A4",
|
|
|
|
+ value: 9,
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: "A5",
|
|
|
|
+ value: 11,
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: "自定义",
|
|
|
|
+ value: 0,
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
|
|
+ directonList: [
|
|
|
|
+ {
|
|
|
|
+ name: "竖向",
|
|
|
|
+ value: 1,
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: "横向",
|
|
|
|
+ value: 2,
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
|
|
+ dialogVisible: false,
|
|
};
|
|
};
|
|
},
|
|
},
|
|
// 监听属性 类似于data概念
|
|
// 监听属性 类似于data概念
|
|
@@ -179,102 +255,48 @@ export default {
|
|
watch: {},
|
|
watch: {},
|
|
// 方法集合
|
|
// 方法集合
|
|
methods: {
|
|
methods: {
|
|
- printTest(v) {
|
|
|
|
- printTest({ deviceSn: v.deviceSn }).then((res) => {
|
|
|
|
- if (res.code === 200) {
|
|
|
|
- this.$message({
|
|
|
|
- type: "success",
|
|
|
|
- message: "操作成功!",
|
|
|
|
- });
|
|
|
|
- } else {
|
|
|
|
- this.$message({
|
|
|
|
- type: "error",
|
|
|
|
- message: res.msg,
|
|
|
|
- });
|
|
|
|
- }
|
|
|
|
- });
|
|
|
|
- },
|
|
|
|
- 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: "已取消删除",
|
|
|
|
- });
|
|
|
|
- });
|
|
|
|
|
|
+ getCloudPrinterInfo(){
|
|
|
|
+
|
|
},
|
|
},
|
|
- refreshData() {
|
|
|
|
- this.getPrinterNum();
|
|
|
|
- this.getPrinterList();
|
|
|
|
|
|
+ addPrinter() {
|
|
|
|
+ this.dialogVisible = true;
|
|
},
|
|
},
|
|
- addPrinter(e) {
|
|
|
|
- console.log(e);
|
|
|
|
- if (!e) {
|
|
|
|
- this.$refs.printerAdd.init();
|
|
|
|
|
|
+ changeShop(e) {
|
|
|
|
+ if (e.at(-1)) {
|
|
|
|
+ this.params.shopId = e.filter((v) => {
|
|
|
|
+ return v;
|
|
|
|
+ });
|
|
} else {
|
|
} else {
|
|
- this.$refs.printerAdd.init(JSON.parse(JSON.stringify(e)));
|
|
|
|
|
|
+ this.params.shopId = [0];
|
|
}
|
|
}
|
|
},
|
|
},
|
|
- getPrinterList() {
|
|
|
|
- shopDeviceList({ deviceType: 2 }).then((res) => {
|
|
|
|
- if (res.code === 200) {
|
|
|
|
- this.printerList = res.data;
|
|
|
|
- } else {
|
|
|
|
- this.$message({
|
|
|
|
- type: "error",
|
|
|
|
- message: res.msg,
|
|
|
|
- });
|
|
|
|
- }
|
|
|
|
- });
|
|
|
|
- },
|
|
|
|
- getPrinterNum() {
|
|
|
|
- deviceStatus().then((res) => {
|
|
|
|
- if (res.code === 200) {
|
|
|
|
- this.pinter = res.data;
|
|
|
|
- } else {
|
|
|
|
- this.$message({
|
|
|
|
- type: "error",
|
|
|
|
- message: res.msg,
|
|
|
|
- });
|
|
|
|
- }
|
|
|
|
- });
|
|
|
|
|
|
+ changePrinterShop(e) {
|
|
|
|
+ if (e.at(-1)) {
|
|
|
|
+ this.form.shopId = e.filter((v) => {
|
|
|
|
+ return v;
|
|
|
|
+ });
|
|
|
|
+ } else {
|
|
|
|
+ this.form.shopId = [0];
|
|
|
|
+ }
|
|
},
|
|
},
|
|
- getDeviceList() {
|
|
|
|
- deviceList({ type: 2 }).then((res) => {
|
|
|
|
- if (res.code === 200) {
|
|
|
|
- this.deviceList = res.data;
|
|
|
|
- } else {
|
|
|
|
- this.$message({
|
|
|
|
- type: "error",
|
|
|
|
- message: res.msg,
|
|
|
|
- });
|
|
|
|
- }
|
|
|
|
- });
|
|
|
|
|
|
+ changeDmPaperSize(e) {
|
|
|
|
+ if (e === 9) {
|
|
|
|
+ this.params.dmPaperWidth = 210;
|
|
|
|
+ this.params.dmPaperLength = 297;
|
|
|
|
+ }
|
|
|
|
+ if (e === 11) {
|
|
|
|
+ this.params.dmPaperWidth = 148;
|
|
|
|
+ this.params.dmPaperLength = 210;
|
|
|
|
+ }
|
|
|
|
+ if (e === 0) {
|
|
|
|
+ this.params.dmPaperWidth = 195;
|
|
|
|
+ this.params.dmPaperLength = 145;
|
|
|
|
+ }
|
|
},
|
|
},
|
|
- getShopList() {
|
|
|
|
- shopListNew().then((res) => {
|
|
|
|
|
|
+ getNewShopList() {
|
|
|
|
+ getNewShopList().then((res) => {
|
|
if (res.code === 200) {
|
|
if (res.code === 200) {
|
|
|
|
+ res.data.unshift({ id: 0, name: "全部门店" });
|
|
this.shopList = res.data;
|
|
this.shopList = res.data;
|
|
} else {
|
|
} else {
|
|
this.$message({
|
|
this.$message({
|
|
@@ -287,10 +309,7 @@ export default {
|
|
},
|
|
},
|
|
// 生命周期 - 创建完成(可以访问当前this实例)
|
|
// 生命周期 - 创建完成(可以访问当前this实例)
|
|
created() {
|
|
created() {
|
|
- this.getPrinterNum();
|
|
|
|
- this.getPrinterList();
|
|
|
|
- this.getDeviceList();
|
|
|
|
- this.getShopList();
|
|
|
|
|
|
+ this.getNewShopList();
|
|
},
|
|
},
|
|
// 生命周期 - 挂载完成(可以访问DOM元素)
|
|
// 生命周期 - 挂载完成(可以访问DOM元素)
|
|
mounted() {},
|
|
mounted() {},
|
|
@@ -438,26 +457,55 @@ export default {
|
|
margin: 10px 0;
|
|
margin: 10px 0;
|
|
}
|
|
}
|
|
.card-right {
|
|
.card-right {
|
|
- width: 300px;
|
|
|
|
|
|
+ width: 230px;
|
|
flex-shrink: 0;
|
|
flex-shrink: 0;
|
|
.setting-params {
|
|
.setting-params {
|
|
width: 217px;
|
|
width: 217px;
|
|
}
|
|
}
|
|
|
|
+ .btns {
|
|
|
|
+ margin-top: 20px;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
.card-left {
|
|
.card-left {
|
|
position: relative;
|
|
position: relative;
|
|
margin-right: 24px;
|
|
margin-right: 24px;
|
|
background-color: #fbfbfb;
|
|
background-color: #fbfbfb;
|
|
flex-shrink: 0;
|
|
flex-shrink: 0;
|
|
|
|
+ flex: 1;
|
|
height: 297mm;
|
|
height: 297mm;
|
|
width: 210mm;
|
|
width: 210mm;
|
|
.card-con {
|
|
.card-con {
|
|
position: relative;
|
|
position: relative;
|
|
top: 50%;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
transform: translateY(-50%);
|
|
- padding: 10mm;
|
|
|
|
text-align: center;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
+ /deep/ .el-icon-arrow-down {
|
|
|
|
+ position: absolute;
|
|
|
|
+ font-size: 30px;
|
|
|
|
+ }
|
|
|
|
+ .icon1 {
|
|
|
|
+ top: 10mm;
|
|
|
|
+ left: 10mm;
|
|
|
|
+ transform: rotate(-45deg);
|
|
|
|
+ }
|
|
|
|
+ .icon2 {
|
|
|
|
+ top: 10mm;
|
|
|
|
+ right: 10mm;
|
|
|
|
+ transform: rotate(45deg);
|
|
|
|
+ }
|
|
|
|
+ .icon3 {
|
|
|
|
+ bottom: 10mm;
|
|
|
|
+ left: 10mm;
|
|
|
|
+ transform: rotate(-135deg);
|
|
|
|
+ }
|
|
|
|
+ .icon4 {
|
|
|
|
+ bottom: 10mm;
|
|
|
|
+ right: 10mm;
|
|
|
|
+ transform: rotate(135deg);
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|