This commit is contained in:
parent
3e205b72cc
commit
c970eb9fff
|
|
@ -3,16 +3,16 @@
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="card-container">
|
<div class="printcard-container">
|
||||||
<div :class="item.isSelected ? 'card card-selected' : 'card'" v-for="(item, index) in InkjetPrinterData"
|
<div :class="item.isSelected ? 'printcard printcard-selected' : 'printcard'" v-for="(item, index) in InkjetPrinterData"
|
||||||
:key="index" @click="toggleCard(item)">
|
:key="index" @click="toggleCard(item)">
|
||||||
<!-- 卡片内容 -->
|
<!-- 卡片内容 -->
|
||||||
<div class="card-content">
|
<div class="printcard-content">
|
||||||
<div class="card-header">
|
<div class="printcard-header">
|
||||||
<div class="card-title">
|
<div class="printcard-title">
|
||||||
<h4> {{ item.name }}</h4>
|
<h4> {{ item.name }}</h4>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-buttons">
|
<div class="printcard-buttons">
|
||||||
<a-button type="primary" @click.stop="pageStart(item)">启动</a-button>
|
<a-button type="primary" @click.stop="pageStart(item)">启动</a-button>
|
||||||
<a-button type="danger" @click.stop="pageStop(item)" style=" margin-left: 5px; ">停止</a-button>
|
<a-button type="danger" @click.stop="pageStop(item)" style=" margin-left: 5px; ">停止</a-button>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -56,7 +56,11 @@
|
||||||
</vxe-column>
|
</vxe-column>
|
||||||
|
|
||||||
</vxe-table>
|
</vxe-table>
|
||||||
|
|
||||||
|
|
||||||
|
<div style="margin: 9px;width:300px;display: flex;">
|
||||||
|
<a-input v-model="addText" /> <a-button style="margin-left: 4px;" @click.stop="pageAdd()">增加条码</a-button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -82,7 +86,8 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
currentPrint: null,
|
currentPrint: null,
|
||||||
table1Height: 400,
|
table1Height: 300,
|
||||||
|
addText:'',
|
||||||
InkjetPrinterData: [
|
InkjetPrinterData: [
|
||||||
|
|
||||||
],
|
],
|
||||||
|
|
@ -131,6 +136,11 @@ export default {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
pageAdd(){
|
||||||
|
|
||||||
|
this.detailsData = [...this.detailsData ,{ fileName: this.addText || '', x: 0, y: 0, direction: 0, fontName: 'Arial', fontSize: 24, fontSpacing: 10 }]
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
printInit() {
|
printInit() {
|
||||||
this.$mk.post({
|
this.$mk.post({
|
||||||
|
|
@ -158,9 +168,9 @@ export default {
|
||||||
heightInit() {
|
heightInit() {
|
||||||
|
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
let h = this.$mk.getWindowSize().height - this.$mk.getOffsetTop(this.$refs.xTable.$el) - 300;
|
let h = this.$mk.getWindowSize().height - this.$mk.getOffsetTop(this.$refs.xTable.$el) - 360;
|
||||||
if (h < 300) {
|
if (h < 250) {
|
||||||
h = 300;
|
h = 250;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.table1Height = h;
|
this.table1Height = h;
|
||||||
|
|
@ -274,12 +284,12 @@ export default {
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<style>
|
<style>
|
||||||
.card-container {
|
.printcard-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card {
|
.printcard {
|
||||||
width: calc(33.33% - 20px);
|
width: calc(33.33% - 20px);
|
||||||
/* 调整卡片宽度,包括间距 */
|
/* 调整卡片宽度,包括间距 */
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
|
|
@ -294,34 +304,34 @@ export default {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card:hover {
|
.printcard:hover {
|
||||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||||
/* 鼠标悬停时增加阴影效果 */
|
/* 鼠标悬停时增加阴影效果 */
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-content {
|
.printcard-content {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color: #333;
|
color: #333;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-content .ant-input {
|
.printcard-content .ant-input {
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-header {
|
.printcard-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-title {
|
.printcard-title {
|
||||||
flex: 2;
|
flex: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-buttons {
|
.printcard-buttons {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-selected {
|
.printcard-selected {
|
||||||
background-color: #b2d9f1;
|
background-color: #b2d9f1;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -6,10 +6,10 @@
|
||||||
</vxe-form>
|
</vxe-form>
|
||||||
|
|
||||||
|
|
||||||
<div class="card-container">
|
<div class="settingcard-container">
|
||||||
<div class="card" v-for="(item, index) in settingData" :key="index">
|
<div class="settingcard" v-for="(item, index) in settingData" :key="index">
|
||||||
<!-- 卡片内容 -->
|
<!-- 卡片内容 -->
|
||||||
<div class="card-content">
|
<div class="settingcard-content">
|
||||||
<h4> {{ item.title }}</h4>
|
<h4> {{ item.title }}</h4>
|
||||||
<a-input v-if="item.type == 'integer'" v-model="item.value" />
|
<a-input v-if="item.type == 'integer'" v-model="item.value" />
|
||||||
<a-select style="width:100%;margin-bottom: 5px;" v-if="item.type == 'select'" v-model="item.value"
|
<a-select style="width:100%;margin-bottom: 5px;" v-if="item.type == 'select'" v-model="item.value"
|
||||||
|
|
@ -168,12 +168,12 @@ export default {
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<style>
|
<style>
|
||||||
.card-container {
|
.settingcard-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card {
|
.settingcard {
|
||||||
width: calc(33.33% - 20px);
|
width: calc(33.33% - 20px);
|
||||||
/* 调整卡片宽度,包括间距 */
|
/* 调整卡片宽度,包括间距 */
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
|
|
@ -186,18 +186,18 @@ export default {
|
||||||
/* 添加过渡效果 */
|
/* 添加过渡效果 */
|
||||||
}
|
}
|
||||||
|
|
||||||
.card:hover {
|
.settingcard:hover {
|
||||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||||
/* 鼠标悬停时增加阴影效果 */
|
/* 鼠标悬停时增加阴影效果 */
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-content {
|
.settingcard-content {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color: #333;
|
color: #333;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-content .ant-input {
|
.settingcard-content .ant-input {
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue