|
|
|
@ -1,77 +1,236 @@ |
|
|
|
<template> |
|
|
|
<div class="flex-col"> |
|
|
|
<div class="flex-row justify-center" style="margin-bottom: 10px"> |
|
|
|
<button class="secondary circle-10" @click.stop="print"> |
|
|
|
<i class="iconfont sv-printer" /> |
|
|
|
浏览器打印 |
|
|
|
</button> |
|
|
|
<!-- <button class="secondary circle-10 ml-10" @click.stop="getHtml"> |
|
|
|
<i class="iconfont sv-preview" /> |
|
|
|
预览 |
|
|
|
</button> --> |
|
|
|
<el-button type="primary" @click="PreviewData"> 导出 </el-button> |
|
|
|
<el-button type="primary" @click="addTable"> 保存 </el-button> |
|
|
|
<div> |
|
|
|
<el-radio-group v-model="radio1" @input="setPaper"> |
|
|
|
<el-radio-button |
|
|
|
v-for="(value,type) in paperTypes" |
|
|
|
:key="type" |
|
|
|
:label="type" |
|
|
|
name="name" |
|
|
|
/> |
|
|
|
</el-radio-group> |
|
|
|
|
|
|
|
<el-popover |
|
|
|
placement="right" |
|
|
|
width="400" |
|
|
|
title="置纸张宽高(mm)" |
|
|
|
trigger="click" |
|
|
|
> |
|
|
|
<el-input-number |
|
|
|
v-model="paperWidth" |
|
|
|
:controls="false" |
|
|
|
:min="1" |
|
|
|
:max="10000" |
|
|
|
label="描述文字" |
|
|
|
@change="otherPaper" |
|
|
|
/> |
|
|
|
<el-input-number |
|
|
|
v-model="paperHeight" |
|
|
|
:controls="false" |
|
|
|
:min="1" |
|
|
|
:max="10000" |
|
|
|
label="描述文字" |
|
|
|
@change="otherPaper" |
|
|
|
/> |
|
|
|
<el-button slot="reference">自定义纸张1</el-button> |
|
|
|
</el-popover> |
|
|
|
<!-- |
|
|
|
<el-select |
|
|
|
v-model="templateId" |
|
|
|
filterable |
|
|
|
remote |
|
|
|
reserve-keyword |
|
|
|
placeholder="模板名称" |
|
|
|
:remote-method="getTemplateList" |
|
|
|
@change="getTemplateById" |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="item in templateList" |
|
|
|
:key="item.templateId" |
|
|
|
:label="item.templateName" |
|
|
|
:value="item.templateId" |
|
|
|
/> |
|
|
|
</el-select> --> |
|
|
|
<el-select |
|
|
|
v-model="templateId" |
|
|
|
filterable |
|
|
|
placeholder="请选择模板" |
|
|
|
style="width: 150px;" |
|
|
|
@change="getTemplateById" |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="item in templateList" |
|
|
|
:key="item.template_name" |
|
|
|
:label="item.template_name" |
|
|
|
:value="item.template_id" |
|
|
|
/> |
|
|
|
</el-select> |
|
|
|
<el-select |
|
|
|
v-model="ticketId" |
|
|
|
filterable |
|
|
|
placeholder="请选择模板需要关联的工单" |
|
|
|
style="width: 200px;" |
|
|
|
@change="getTemplateList" |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="item in ticketList" |
|
|
|
:key="item.ticket_code" |
|
|
|
:label="item.ticket_code" |
|
|
|
:value="item.ticket_code" |
|
|
|
/> |
|
|
|
</el-select> |
|
|
|
</div> |
|
|
|
|
|
|
|
<el-button type="primary" icon="el-icon-printer" @click="print"> 浏览器打印</el-button> |
|
|
|
<el-button type="primary" @click="preview"> 预览</el-button> |
|
|
|
<el-button type="primary" @click="PreviewData"> 导出</el-button> |
|
|
|
<el-button type="primary" @click="addTable"> 保存</el-button> |
|
|
|
<el-button type="primary" @click="clear"> 清空</el-button> |
|
|
|
<!-- <button class="warning circle-10 ml-10" @click.stop="print2"> |
|
|
|
直接打印(需要连接客户端) |
|
|
|
<i class="iconfont sv-printer" /> |
|
|
|
</button> --> |
|
|
|
</div> |
|
|
|
<div class="flex-row" style="height: 87vh"> |
|
|
|
<div class="flex-2 left"> |
|
|
|
<div class="flex-row justify-center flex-wrap"> |
|
|
|
<div class="title">基础元素</div> |
|
|
|
<div class="ep-draggable-item item" tid="defaultModule.text"> |
|
|
|
<i class="iconfont sv-text" /> |
|
|
|
<span>文本</span> |
|
|
|
</div> |
|
|
|
<div class="ep-draggable-item item" tid="defaultModule.image"> |
|
|
|
<i class="iconfont sv-image" /> |
|
|
|
<span>图片</span> |
|
|
|
</div> |
|
|
|
<div class="ep-draggable-item item" tid="defaultModule.longText"> |
|
|
|
<i class="iconfont sv-longText" /> |
|
|
|
<span>长文</span> |
|
|
|
</div> |
|
|
|
<div class="ep-draggable-item item" tid="defaultModule.table"> |
|
|
|
<i class="iconfont sv-table" /> |
|
|
|
<span>表格</span> |
|
|
|
</div> |
|
|
|
<div class="ep-draggable-item item" tid="defaultModule.qrcode"> |
|
|
|
<i class="iconfont sv-qrcode" /> |
|
|
|
<span>html</span> |
|
|
|
</div> |
|
|
|
<div class="ep-draggable-item item" tid="defaultModule.barcode"> |
|
|
|
<i class="iconfont sv-barcode" /> |
|
|
|
<span>自定义</span> |
|
|
|
</div> |
|
|
|
<div class="title">辅助元素</div> |
|
|
|
<div class="ep-draggable-item item" tid="defaultModule.hline"> |
|
|
|
<i class="iconfont sv-hline" /> |
|
|
|
<span>横线</span> |
|
|
|
</div> |
|
|
|
<div class="ep-draggable-item item" tid="defaultModule.vline"> |
|
|
|
<i class="iconfont sv-vline" /> |
|
|
|
<span>竖线</span> |
|
|
|
</div> |
|
|
|
<div class="ep-draggable-item item" tid="defaultModule.rect"> |
|
|
|
<i class="iconfont sv-rect" /> |
|
|
|
<span>矩形</span> |
|
|
|
</div> |
|
|
|
<div class="ep-draggable-item item" tid="defaultModule.oval"> |
|
|
|
<i class="iconfont sv-oval" /> |
|
|
|
<span>圆形</span> |
|
|
|
</div> |
|
|
|
|
|
|
|
<el-row :gutter="5"> |
|
|
|
<el-col :span="4"> |
|
|
|
<div> |
|
|
|
<div class="title" style="font-weight: bold;">基础元素</div> |
|
|
|
<el-row> |
|
|
|
<el-col :span="12"> |
|
|
|
<div class="grid-content bg-purple"> |
|
|
|
<div class="ep-draggable-item item" tid="defaultModule.text"> |
|
|
|
<i class="iconfont sv-text" /> |
|
|
|
<span>文本</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-col> |
|
|
|
|
|
|
|
<el-col :span="12"> |
|
|
|
<div class="grid-content bg-purple"> |
|
|
|
<div class="ep-draggable-item item" tid="defaultModule.image"> |
|
|
|
<i class="iconfont sv-image" /> |
|
|
|
<span>图片</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
|
|
|
|
<el-row> |
|
|
|
<el-col :span="12"> |
|
|
|
<div class="grid-content bg-purple"> |
|
|
|
<div class="ep-draggable-item item" tid="defaultModule.longText"> |
|
|
|
<i class="iconfont sv-longText" /> |
|
|
|
<span>长文</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-col> |
|
|
|
|
|
|
|
<el-col :span="12"> |
|
|
|
<div class="grid-content bg-purple"> |
|
|
|
<div class="ep-draggable-item item" tid="defaultModule.table"> |
|
|
|
<i class="iconfont sv-table" /> |
|
|
|
<span>表格</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
|
|
|
|
<el-row> |
|
|
|
<el-col :span="12"> |
|
|
|
<div class="grid-content bg-purple"> |
|
|
|
<div class="ep-draggable-item item" tid="defaultModule.emptyTable"> |
|
|
|
<i class="iconfont sv-table" /> |
|
|
|
<span>空白表格</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-col> |
|
|
|
|
|
|
|
<el-col :span="12"> |
|
|
|
<div class="grid-content bg-purple"> |
|
|
|
<div class="ep-draggable-item item" tid="defaultModule.customText"> |
|
|
|
<i class="iconfont sv-text" /> |
|
|
|
<span>自定义</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
|
|
|
|
<div class="title" style="font-weight: bold;">辅助元素</div> |
|
|
|
<el-row> |
|
|
|
<el-col :span="12"> |
|
|
|
<div class="grid-content bg-purple"> |
|
|
|
<div class="ep-draggable-item item" tid="defaultModule.hline"> |
|
|
|
<i class="iconfont sv-hline" /> |
|
|
|
<span>横线</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-col> |
|
|
|
|
|
|
|
<el-col :span="12"> |
|
|
|
<div class="grid-content bg-purple"> |
|
|
|
<div class="ep-draggable-item item" tid="defaultModule.vline"> |
|
|
|
<i class="iconfont sv-vline" /> |
|
|
|
<span>竖线</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
|
|
|
|
<el-row> |
|
|
|
<el-col :span="12"> |
|
|
|
<div class="grid-content bg-purple"> |
|
|
|
<div class="ep-draggable-item item" tid="defaultModule.rect"> |
|
|
|
<i class="iconfont sv-rect" /> |
|
|
|
<span>矩形</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-col> |
|
|
|
|
|
|
|
<el-col :span="12"> |
|
|
|
<div class="grid-content bg-purple"> |
|
|
|
<div class="ep-draggable-item item" tid="defaultModule.oval"> |
|
|
|
<i class="iconfont sv-oval" /> |
|
|
|
<span>圆形</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
|
|
|
|
<el-row> |
|
|
|
<el-col :span="12"> |
|
|
|
<div class="grid-content bg-purple"> |
|
|
|
<div class="ep-draggable-item item" tid="defaultModule.barcode"> |
|
|
|
<i class="iconfont sv-barcode" /> |
|
|
|
<span>条形码</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-col> |
|
|
|
|
|
|
|
<el-col :span="12"> |
|
|
|
<div class="grid-content bg-purple"> |
|
|
|
<div class="ep-draggable-item item" tid="defaultModule.qrcode"> |
|
|
|
<i class="iconfont sv-qrcode" /> |
|
|
|
<span>二维码</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="flex-5 center"> |
|
|
|
</el-col> |
|
|
|
|
|
|
|
<el-col :span="16" style="margin-top: 15px;"> |
|
|
|
<!-- 设计器的 容器 --> |
|
|
|
<div id="hiprint-printTemplate" /> |
|
|
|
</div> |
|
|
|
<div class="flex-2 right"> |
|
|
|
</el-col> |
|
|
|
<el-col :span="4"> |
|
|
|
<!-- 元素参数的 容器 --> |
|
|
|
<div id="PrintElementOptionSetting" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
|
|
|
|
<div> |
|
|
|
<el-dialog :close-on-click-modal="false" :visible.sync="formDias" title="模板" width="550px"> |
|
|
|
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="110px"> |
|
|
|
@ -89,10 +248,13 @@ |
|
|
|
</el-form> |
|
|
|
<div slot="footer" class="dialog-footer"> |
|
|
|
<el-button type="primary" @click="formDias=false">{{ $t('task.select.Cancel') }}</el-button> |
|
|
|
<el-button :disabled="isDisabled" type="primary" @click="editBtn">{{ $t('task.select.Confirm') }}</el-button> |
|
|
|
<el-button :disabled="isDisabled" type="primary" @click="create">{{ $t('task.select.Confirm') }}</el-button> |
|
|
|
</div> |
|
|
|
</el-dialog> |
|
|
|
</div> |
|
|
|
|
|
|
|
<Preview ref="preView" :preview-show.sync="previewShow" /> |
|
|
|
|
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
@ -100,6 +262,7 @@ |
|
|
|
import $ from 'jquery' |
|
|
|
import { hiprint, defaultElementTypeProvider } from 'vue-plugin-hiprint' |
|
|
|
import template from '@/api/acs/order/template' |
|
|
|
import Preview from '@/views/acs/order/preview.vue' |
|
|
|
|
|
|
|
// 初始化 provider |
|
|
|
hiprint.init({ |
|
|
|
@ -107,12 +270,56 @@ hiprint.init({ |
|
|
|
}) |
|
|
|
export default { |
|
|
|
name: 'Hrprint', |
|
|
|
components: { Preview }, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
previewShow: false, |
|
|
|
radio1:null, |
|
|
|
ticketList: [], |
|
|
|
templateList: [], |
|
|
|
ticketId: null, |
|
|
|
templateId: null, |
|
|
|
templateLoading: false, |
|
|
|
curPaper: { |
|
|
|
type: 'A4', |
|
|
|
width: 210, |
|
|
|
height: 296.6 |
|
|
|
}, |
|
|
|
|
|
|
|
paperTypes: { |
|
|
|
'A3': { |
|
|
|
width: 420, |
|
|
|
height: 296.6 |
|
|
|
}, |
|
|
|
'A4': { |
|
|
|
width: 210, |
|
|
|
height: 296.6 |
|
|
|
}, |
|
|
|
'A5': { |
|
|
|
width: 210, |
|
|
|
height: 147.6 |
|
|
|
}, |
|
|
|
'B3': { |
|
|
|
width: 500, |
|
|
|
height: 352.6 |
|
|
|
}, |
|
|
|
'B4': { |
|
|
|
width: 250, |
|
|
|
height: 352.6 |
|
|
|
}, |
|
|
|
'B5': { |
|
|
|
width: 250, |
|
|
|
height: 175.6 |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
formDias: false, |
|
|
|
hiprintTemplate: null, // 声明 hiprintTemplate 以便在 buildDesigner 中使用 |
|
|
|
printResults: [], |
|
|
|
isDisabled: false, |
|
|
|
paperWidth: 220, |
|
|
|
paperHeight: 80, |
|
|
|
|
|
|
|
form: { |
|
|
|
template_name: '', |
|
|
|
template_status: '', |
|
|
|
@ -133,11 +340,35 @@ export default { |
|
|
|
this.buildDesigner() |
|
|
|
}) |
|
|
|
}, |
|
|
|
created() { |
|
|
|
template.getTemplateList().then(data => { |
|
|
|
this.templateList = data |
|
|
|
}) |
|
|
|
template.getTicketList().then(data => { |
|
|
|
this.ticketList = data |
|
|
|
}) |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
addTable() { |
|
|
|
this.formDias = true |
|
|
|
this.isDisabled = false |
|
|
|
}, |
|
|
|
clear() { |
|
|
|
this.hiprintTemplate.clear() |
|
|
|
}, |
|
|
|
preview() { |
|
|
|
this.previewShow = true |
|
|
|
/* const str = '{ "panels": [{ "index": 0, "height": 30, "width": 50, "paperHeader": 0, "paperFooter": 82.5, "printElements": [{ "options": { "left": 7.5, "top": 9, "height": 15, "width": 127.5, "field": "product", "testData": "加多老吉茶 100889", "hideTitle": true }, "printElementType": { "title": "文本", "type": "text" } }, { "options": { "left": 120, "top": 27, "height": 33, "width": 13.5, "field": "ptype", "testData": "酒水222", "hideTitle": true }, "printElementType": { "title": "文本", "type": "text" } }, { "options": { "left": 7.5, "top": 28.5, "height": 30, "width": 105, "field": "code", "testData": "100889", "textAlign": "center", "textType": "barcode" }, "printElementType": { "title": "文本", "type": "text" } }], "paperNumberLeft": 111, "paperNumberTop": 63, "paperNumberDisabled": true }] }' |
|
|
|
|
|
|
|
const hiprintTemplate = new hiprint.PrintTemplate({ |
|
|
|
template: JSON.parse(str) |
|
|
|
}) |
|
|
|
hiprintTemplate.design('#hiprint-printTemplate') |
|
|
|
|
|
|
|
const printData = { product: '测试数量', ptype: '测试酒水', code: '100889' }*/ |
|
|
|
const printData = { dd: '测试数量' } |
|
|
|
this.$refs.preView.show(this.hiprintTemplate, printData) |
|
|
|
}, |
|
|
|
/** |
|
|
|
* 构建左侧可拖拽元素 |
|
|
|
* 注意: 可拖拽元素必须在 hiprint.init() 之后调用 |
|
|
|
@ -161,13 +392,48 @@ export default { |
|
|
|
this.hiprintTemplate = new hiprint.PrintTemplate({ |
|
|
|
settingContainer: '#PrintElementOptionSetting' // 元素参数容器 |
|
|
|
}) |
|
|
|
this.hiprintTemplate.addPrintPanel({ width: 200, height: 300, paperFooter: 340, paperHeader: 10 }); |
|
|
|
// 构建 并填充到 容器中 |
|
|
|
this.hiprintTemplate.design('#hiprint-printTemplate') |
|
|
|
// |
|
|
|
this.hiprintTemplate_.add |
|
|
|
} |
|
|
|
}, |
|
|
|
// 根据搜索获取模板列表 |
|
|
|
getTemplateById() { |
|
|
|
// if (hiprintTemplate) { |
|
|
|
template.see(this.templateId).then(res => { |
|
|
|
try { |
|
|
|
this.hiprintTemplate.update(JSON.parse(res.template)) |
|
|
|
} catch (e) { |
|
|
|
this.$message.error(`更新失败: ${e}`) |
|
|
|
} |
|
|
|
}) |
|
|
|
// } |
|
|
|
}, |
|
|
|
|
|
|
|
otherPaper() { |
|
|
|
this.hiprintTemplate.setPaper(this.paperWidth, this.paperHeight) |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
* 设置纸张大小 |
|
|
|
* @param type [A3, A4, A5, B3, B4, B5, other] |
|
|
|
* @param value {width,height} mm |
|
|
|
*/ |
|
|
|
setPaper(type) { |
|
|
|
try { |
|
|
|
// debugger |
|
|
|
if (Object.keys(this.paperTypes).includes(type)) { |
|
|
|
// this.curPaper = {type: type, width: value.width, height: value.height} |
|
|
|
const value = this.paperTypes[type] |
|
|
|
this.hiprintTemplate.setPaper(value.width, value.height) |
|
|
|
} else { |
|
|
|
this.curPaper = { type: 'other', width: value.width, height: value.height } |
|
|
|
this.hiprintTemplate.setPaper(value.width, value.height) |
|
|
|
} |
|
|
|
} catch (error) { |
|
|
|
this.$message.error(`操作失败: ${error}`) |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
* 浏览器打印 |
|
|
|
*/ |
|
|
|
@ -189,6 +455,7 @@ export default { |
|
|
|
// 调用浏览器打印 |
|
|
|
if (this.hiprintTemplate) { |
|
|
|
console.log('准备打印，参数：', { printData, options, ext }) |
|
|
|
debugger |
|
|
|
this.hiprintTemplate.print(printData, options, ext) |
|
|
|
} |
|
|
|
}, |
|
|
|
@ -228,14 +495,15 @@ export default { |
|
|
|
console.error('PDF 生成失败:', error) |
|
|
|
}) |
|
|
|
}, |
|
|
|
editBtn() { |
|
|
|
create() { |
|
|
|
// console.log('保存数据', this.hiprintTemplate.getJson()) |
|
|
|
this.isDisabled = true |
|
|
|
// debugger |
|
|
|
this.form = { |
|
|
|
...this.form, // 保留原有属性 |
|
|
|
...this.hiprintTemplate.getJson() // 赋值新属性 |
|
|
|
} |
|
|
|
template.savePdf(this.form).then((data) => { |
|
|
|
template.create(JSON.stringify(this.form)).then((data) => { |
|
|
|
this.formDias = false |
|
|
|
// 设置定时器，等待一定时间后再次允许请求 |
|
|
|
setTimeout(() => { |
|
|
|
@ -247,39 +515,36 @@ export default { |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped> |
|
|
|
<style rel="stylesheet/scss" lang="scss" scoped> |
|
|
|
/* 字体样式 */ |
|
|
|
@import "../../../assets/css/iconfont.css"; |
|
|
|
|
|
|
|
/* 定义全局样式 */ |
|
|
|
/* 在 main.js 入库文件引入 */ |
|
|
|
body { |
|
|
|
margin: 0; |
|
|
|
} |
|
|
|
|
|
|
|
/* scrollbar */ |
|
|
|
::-webkit-scrollbar { |
|
|
|
height: 4px; |
|
|
|
width: 4px; |
|
|
|
} |
|
|
|
|
|
|
|
::-webkit-scrollbar-corner { |
|
|
|
height: 4px; |
|
|
|
width: 4px; |
|
|
|
} |
|
|
|
::-webkit-scrollbar-thumb { |
|
|
|
|
|
|
|
/*::-webkit-scrollbar-thumb { |
|
|
|
background: purple; |
|
|
|
border-radius: 2px; |
|
|
|
background-image: -webkit-linear-gradient( |
|
|
|
45deg, |
|
|
|
rgba(255, 255, 255, 0.2) 25%, |
|
|
|
transparent 25%, |
|
|
|
transparent 50%, |
|
|
|
rgba(255, 255, 255, 0.2) 50%, |
|
|
|
rgba(255, 255, 255, 0.2) 75%, |
|
|
|
transparent 75%, |
|
|
|
transparent |
|
|
|
45deg, |
|
|
|
rgba(255, 255, 255, 0.2) 25%, |
|
|
|
transparent 25%, |
|
|
|
transparent 50%, |
|
|
|
rgba(255, 255, 255, 0.2) 50%, |
|
|
|
rgba(255, 255, 255, 0.2) 75%, |
|
|
|
transparent 75%, |
|
|
|
transparent |
|
|
|
); |
|
|
|
} |
|
|
|
}*/ |
|
|
|
|
|
|
|
::-webkit-scrollbar-thumb:hover { |
|
|
|
background: purple; |
|
|
|
} |
|
|
|
@ -288,146 +553,25 @@ body { |
|
|
|
.flex-row { |
|
|
|
display: flex; |
|
|
|
} |
|
|
|
|
|
|
|
.flex-col { |
|
|
|
display: flex; |
|
|
|
-ms-flex-direction: column; /* 旧版 IE */ |
|
|
|
flex-direction: column; |
|
|
|
} |
|
|
|
|
|
|
|
.flex-wrap { |
|
|
|
flex-wrap: wrap; |
|
|
|
} |
|
|
|
|
|
|
|
.align-center { |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
.justify-center { |
|
|
|
justify-content: center; |
|
|
|
} |
|
|
|
|
|
|
|
.flex-1 { |
|
|
|
-ms-flex: 1; |
|
|
|
flex: 1; |
|
|
|
} |
|
|
|
.flex-2 { |
|
|
|
-ms-flex: 2; |
|
|
|
flex: 2; |
|
|
|
} |
|
|
|
.flex-3 { |
|
|
|
-ms-flex: 3; |
|
|
|
flex: 3; |
|
|
|
} |
|
|
|
.flex-4 { |
|
|
|
-ms-flex: 4; |
|
|
|
flex: 4; |
|
|
|
} |
|
|
|
.flex-5 { |
|
|
|
-ms-flex: 5; |
|
|
|
flex: 5; |
|
|
|
} |
|
|
|
|
|
|
|
.ml-10 { |
|
|
|
margin-left: 10px; |
|
|
|
} |
|
|
|
.mr-10 { |
|
|
|
margin-right: 10px; |
|
|
|
} |
|
|
|
.mt-10 { |
|
|
|
margin-top: 10px; |
|
|
|
} |
|
|
|
.mb-10 { |
|
|
|
margin-bottom: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
/* button 样式 为了好看点 */ |
|
|
|
button { |
|
|
|
padding: 10px; |
|
|
|
min-width: 40px; |
|
|
|
color: white; |
|
|
|
opacity: 0.9; |
|
|
|
cursor: pointer; |
|
|
|
border-width: 0; |
|
|
|
border: 1px solid #d9d9d9; |
|
|
|
} |
|
|
|
button:hover { |
|
|
|
opacity: 1; |
|
|
|
} |
|
|
|
button i { |
|
|
|
font-size: 16px !important; |
|
|
|
} |
|
|
|
.circle, |
|
|
|
.circle-4 { |
|
|
|
border-radius: 4px !important; |
|
|
|
} |
|
|
|
.circle-10 { |
|
|
|
border-radius: 10px !important; |
|
|
|
} |
|
|
|
/* 按钮颜色 */ |
|
|
|
.primary { |
|
|
|
background: purple; |
|
|
|
} |
|
|
|
.info { |
|
|
|
color: #000; |
|
|
|
background: none; |
|
|
|
} |
|
|
|
.info:hover { |
|
|
|
color: purple; |
|
|
|
border-color: purple; |
|
|
|
} |
|
|
|
.secondary { |
|
|
|
background: #1976d2; |
|
|
|
} |
|
|
|
.warning { |
|
|
|
background: #d32f2f; |
|
|
|
} |
|
|
|
|
|
|
|
/* modal */ |
|
|
|
.modal { |
|
|
|
padding: 0; |
|
|
|
margin: 0; |
|
|
|
} |
|
|
|
.modal .mask { |
|
|
|
position: fixed; |
|
|
|
top: 0; |
|
|
|
right: 0; |
|
|
|
bottom: 0; |
|
|
|
left: 0; |
|
|
|
z-index: 1000; |
|
|
|
height: 100%; |
|
|
|
background-color: #00000073; |
|
|
|
} |
|
|
|
.modal .wrap { |
|
|
|
position: fixed; |
|
|
|
top: 0; |
|
|
|
right: 0; |
|
|
|
bottom: 0; |
|
|
|
left: 0; |
|
|
|
z-index: 1000; |
|
|
|
overflow: auto; |
|
|
|
background-color: #00000073; |
|
|
|
outline: 0; |
|
|
|
} |
|
|
|
.modal .wrap .box { |
|
|
|
position: relative; |
|
|
|
margin: 10% auto; |
|
|
|
width: 40%; |
|
|
|
background: #fff; |
|
|
|
border-radius: 4px; |
|
|
|
z-index: 1001; |
|
|
|
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); |
|
|
|
transition: all 0.3s ease; |
|
|
|
} |
|
|
|
.modal-box__header { |
|
|
|
padding: 10px 14px; |
|
|
|
border-bottom: 1px solid #e9e9e9; |
|
|
|
} |
|
|
|
.modal-box__footer { |
|
|
|
text-align: end; |
|
|
|
} |
|
|
|
.modal-box__footer button { |
|
|
|
min-width: 100px; |
|
|
|
} |
|
|
|
.modal-box__footer button:not(:last-child) { |
|
|
|
margin-right: 10px; |
|
|
|
} |
|
|
|
/* 重写全局 hiprint 样式 */ |
|
|
|
.hiprint-headerLine, |
|
|
|
.hiprint-footerLine { |
|
|
|
@ -458,32 +602,7 @@ button i { |
|
|
|
top: -14px; |
|
|
|
font-size: 12px; |
|
|
|
} |
|
|
|
/* 区域 */ |
|
|
|
.left { |
|
|
|
background: white; |
|
|
|
border-radius: 4px; |
|
|
|
border: 1px solid #d9d9d9; |
|
|
|
padding: 10px 0; |
|
|
|
box-shadow: 2px 2px 2px 0px rgba(181, 16, 181, 0.2); |
|
|
|
overflow: auto; |
|
|
|
} |
|
|
|
.center { |
|
|
|
margin: 0 10px; |
|
|
|
background: white; |
|
|
|
border-radius: 4px; |
|
|
|
border: 1px solid #d9d9d9; |
|
|
|
padding: 20px; |
|
|
|
box-shadow: 2px 2px 2px 0px rgb(128 0 128 / 20%); |
|
|
|
overflow: auto; |
|
|
|
} |
|
|
|
.right { |
|
|
|
background: white; |
|
|
|
border-radius: 4px; |
|
|
|
border: 1px solid #d9d9d9; |
|
|
|
padding: 10px 0; |
|
|
|
box-shadow: 2px 2px 2px 0px rgb(128 0 128 / 20%); |
|
|
|
overflow: auto; |
|
|
|
} |
|
|
|
|
|
|
|
/* 左侧拖拽元素样式 */ |
|
|
|
.title { |
|
|
|
font-size: 16px; |
|
|
|
@ -491,6 +610,7 @@ button i { |
|
|
|
width: 100%; |
|
|
|
margin: 10px 0 0 24px; |
|
|
|
} |
|
|
|
|
|
|
|
.item { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
@ -498,15 +618,18 @@ button i { |
|
|
|
background: white; |
|
|
|
padding: 4px 10px; |
|
|
|
margin: 10px 8px 4px 8px; |
|
|
|
width: 38%; |
|
|
|
/*width: 38%;*/ |
|
|
|
min-height: 60px; |
|
|
|
border-radius: 4px; |
|
|
|
box-shadow: 2px 2px 2px 2px rgba(171, 171, 171, 0.2); |
|
|
|
} |
|
|
|
|
|
|
|
.item .iconfont { |
|
|
|
font-size: 1.5rem; |
|
|
|
} |
|
|
|
|
|
|
|
.item span { |
|
|
|
font-size: 14px; |
|
|
|
} |
|
|
|
|
|
|
|
</style> |
|
|
|
|
周俊杰
1 month ago