This commit is contained in:
xielue 2023-09-11 15:41:46 +08:00
parent 3e205b72cc
commit c970eb9fff
2 changed files with 37 additions and 27 deletions

View File

@ -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>

View File

@ -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>