|
|
@@ -43,7 +43,92 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="print-model-bottom-right">
|
|
|
- <div>
|
|
|
+ <h3><svg-icon icon-class="print"></svg-icon>打印设置</h3>
|
|
|
+ <div class="config-box">
|
|
|
+ <div class="item-page">
|
|
|
+ <label>字体：</label>
|
|
|
+ <el-select v-model="printForm.fontFamily" placeholder="请选择">
|
|
|
+ <el-option
|
|
|
+ v-for="item in fontList"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="item-page">
|
|
|
+ <label>字号：</label>
|
|
|
+ <el-input-number v-model="printForm.fontSize" :step="2"></el-input-number>
|
|
|
+ </div>
|
|
|
+ <div class="item-page">
|
|
|
+ <label>颜色：</label>
|
|
|
+ <el-color-picker v-model="printForm.color" size="small"></el-color-picker>
|
|
|
+ </div>
|
|
|
+ <el-divider class="print-divider"></el-divider>
|
|
|
+ <div class="item-page">
|
|
|
+ <label>行距：</label>
|
|
|
+ <el-select v-model="printForm.lineHeight" placeholder="请选择">
|
|
|
+ <el-option
|
|
|
+ v-for="item in lineHeightList"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <el-divider class="print-divider"></el-divider>
|
|
|
+ <div class="item-page">
|
|
|
+ <label>打印范围：</label>
|
|
|
+ <el-checkbox-group v-model="printForm.range">
|
|
|
+ <el-checkbox v-for="(itemT,indexT) in rangeList" :key="indexT" :label="itemT.value">{{itemT.name}}</el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </div>
|
|
|
+ <div class="item-page">
|
|
|
+ <label>加粗显示：</label>
|
|
|
+ <el-checkbox-group v-model="printForm.bold">
|
|
|
+ <el-checkbox v-for="(itemT,indexT) in boldList" :key="indexT" :label="itemT.value">{{itemT.name}}</el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </div>
|
|
|
+ <el-divider class="print-divider"></el-divider>
|
|
|
+ <div class="item-page">
|
|
|
+ <label>附加信息：</label>
|
|
|
+ <b @click="handleClear"><svg-icon icon-class="clear"></svg-icon>清除</b>
|
|
|
+ </div>
|
|
|
+ <div class="item-page">
|
|
|
+ <label>姓名：</label>
|
|
|
+ <el-input v-model="printForm.name" autocomplete="off" placeholder="请输入" maxlength="20">
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ <div class="item-page">
|
|
|
+ <label>学校：</label>
|
|
|
+ <el-input v-model="printForm.school" autocomplete="off" placeholder="请输入" maxlength="20">
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ <div class="item-page">
|
|
|
+ <label>班级：</label>
|
|
|
+ <el-input v-model="printForm.className" autocomplete="off" placeholder="请输入" maxlength="20">
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ <div class="item-page">
|
|
|
+ <label>日期：</label>
|
|
|
+ <el-input v-model="printForm.dateStr" autocomplete="off" placeholder="请输入" maxlength="20">
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ <div class="item-page">
|
|
|
+ <label>备注：</label>
|
|
|
+ <el-input v-model="printForm.momo" autocomplete="off" placeholder="请输入" maxlength="20">
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ <el-divider class="print-divider"></el-divider>
|
|
|
+ <div class="item-page">
|
|
|
+ <label>统计信息：</label>
|
|
|
+ <el-checkbox-group v-model="printForm.info">
|
|
|
+ <el-checkbox v-for="(itemT,indexT) in infoList" :key="indexT" :label="itemT.value">{{itemT.name}}</el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </div>
|
|
|
+ <el-divider class="print-divider"></el-divider>
|
|
|
+ </div>
|
|
|
+ <div class="item-page" style="padding:24px 24px 0 24px">
|
|
|
<el-button @click="goBack" size="small">取消</el-button>
|
|
|
<el-button type="primary" @click="handlePrint" size="small">打印</el-button>
|
|
|
</div>
|
|
|
@@ -62,7 +147,95 @@ export default {
|
|
|
userMessage: getToken()?JSON.parse(getToken()):null,
|
|
|
resArr: [],
|
|
|
articleImg: {}, // 文章图片
|
|
|
- sentenceList: []
|
|
|
+ sentenceList: [],
|
|
|
+ fontList: [
|
|
|
+ {
|
|
|
+ value:'roman',
|
|
|
+ name:'Times New Roman'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'Arial',
|
|
|
+ name: 'Arial'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ lineHeightList: [
|
|
|
+ {
|
|
|
+ value:'0.8',
|
|
|
+ name:'0.8倍'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value:'1.0',
|
|
|
+ name:'1.0倍'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value:'1.5',
|
|
|
+ name:'1.5倍'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value:'2.0',
|
|
|
+ name:'2.0倍'
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ rangeList: [
|
|
|
+ {
|
|
|
+ value:'image',
|
|
|
+ name:'图片'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value:'vocab',
|
|
|
+ name:'词表'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value:'ciyun',
|
|
|
+ name:'词云'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value:'notes',
|
|
|
+ name:'笔记'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ boldList:[
|
|
|
+ {
|
|
|
+ value:'newWord',
|
|
|
+ name:'生词'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value:'phrase',
|
|
|
+ name:'短语'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value:'sentence',
|
|
|
+ name:'长句'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ infoList:[
|
|
|
+ {
|
|
|
+ value:'wordLength',
|
|
|
+ name:'长度'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value:'wordNumber',
|
|
|
+ name:'词数'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value:'difficulty',
|
|
|
+ name:'难度'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ printForm:{
|
|
|
+ fontFamily:'roman',
|
|
|
+ fontSize: 24,
|
|
|
+ color: '#2F3742',
|
|
|
+ lineHeight: '1.5',
|
|
|
+ range: [],
|
|
|
+ bold: ['newWord','phrase'],
|
|
|
+ info: [],
|
|
|
+ name: '',
|
|
|
+ school: '',
|
|
|
+ className: '',
|
|
|
+ dateStr: '',
|
|
|
+ momo: ''
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -112,6 +285,14 @@ export default {
|
|
|
},
|
|
|
});
|
|
|
});
|
|
|
+ },
|
|
|
+ // 清除
|
|
|
+ handleClear(){
|
|
|
+ this.printForm.name = ''
|
|
|
+ this.printForm.school = ''
|
|
|
+ this.printForm.className = ''
|
|
|
+ this.printForm.dateStr = ''
|
|
|
+ this.printForm.momo = ''
|
|
|
}
|
|
|
},
|
|
|
mounted(){
|
|
|
@@ -119,6 +300,9 @@ export default {
|
|
|
this.handleData();
|
|
|
}
|
|
|
waterMark.set(this.userMessage.user_name+' '+this.userMessage.phone,'')
|
|
|
+ this.$nextTick(() => {
|
|
|
+ document.onselectstart = new Function("event.returnValue=false");
|
|
|
+ })
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
@@ -166,7 +350,7 @@ export default {
|
|
|
justify-content: center;
|
|
|
padding-top: 46px;
|
|
|
&-left{
|
|
|
- width: 1090px;
|
|
|
+ width: 1070px;
|
|
|
margin: 8px 346px 8px 8px;
|
|
|
background: #fff;
|
|
|
flex-shrink: 0;
|
|
|
@@ -196,18 +380,86 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
&-right{
|
|
|
- width: 338px;
|
|
|
- padding: 24px;
|
|
|
+ width: 360px;
|
|
|
+ padding: 24px 0;
|
|
|
background: #FFF;
|
|
|
position: fixed;
|
|
|
z-index: 1;
|
|
|
top: 46px;
|
|
|
- right: calc((100% - 1440px)/2);
|
|
|
- height: 100%;
|
|
|
- overflow: auto;
|
|
|
+ right: calc((100% - 1450px)/2);
|
|
|
+ height: calc(100% - 48px);
|
|
|
+ .config-box{
|
|
|
+ height: calc(100% - 80px);
|
|
|
+ overflow: auto;
|
|
|
+ padding: 0 24px;
|
|
|
+ }
|
|
|
+ h3{
|
|
|
+ color: #2F3742;
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 32px;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0 24px;
|
|
|
+ .svg-icon{
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.item-page {
|
|
|
+ display: flex;
|
|
|
+ padding-top: 24px;
|
|
|
+ >label {
|
|
|
+ color: #2F3742;
|
|
|
+ text-align: right;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 30px;
|
|
|
+ width: 72px;
|
|
|
+ margin-right: 16px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+ .el-select{
|
|
|
+ height: 32px;
|
|
|
+ border-radius: 2px;
|
|
|
+ width: 202px;
|
|
|
+ }
|
|
|
+ .el-button{
|
|
|
+ width: 140px;
|
|
|
+ padding: 8px 32px;
|
|
|
+ color:rgba(0, 0, 0, 0.91);
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 22px;
|
|
|
+ border-radius: 4px;
|
|
|
+ background: #EBEBEB;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ .el-button--primary{
|
|
|
+ background:#3459D2;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ >b{
|
|
|
+ flex: 1;
|
|
|
+ text-align: right;
|
|
|
+ cursor: pointer;
|
|
|
+ line-height: 30px;
|
|
|
+ color: #175DFF;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ .svg-icon{
|
|
|
+ width: 12px;
|
|
|
+ margin-right: 4px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+.print-divider{
|
|
|
+ margin: 24px 0 0 0;
|
|
|
+ background-color: #F2F3F5;
|
|
|
+}
|
|
|
#showWaterMark{
|
|
|
overflow: hidden;
|
|
|
position: relative;
|
|
|
@@ -247,4 +499,36 @@ export default {
|
|
|
margin: 30px 30px 40px 30px;
|
|
|
}
|
|
|
}
|
|
|
+</style>
|
|
|
+<style lang="scss">
|
|
|
+.item-page {
|
|
|
+ .el-input__inner{
|
|
|
+ height: 32px;
|
|
|
+ line-height: 32px;
|
|
|
+ background: #F2F3F5;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ .el-input__icon{
|
|
|
+ line-height: 32px;
|
|
|
+ }
|
|
|
+ .el-input-number{
|
|
|
+ line-height: 30px;
|
|
|
+ width: 202px;
|
|
|
+ }
|
|
|
+ .el-input-number__decrease, .el-input-number__increase{
|
|
|
+ height: 30px;
|
|
|
+ width: 30px;
|
|
|
+ }
|
|
|
+ .el-checkbox{
|
|
|
+ margin-right: 12px;
|
|
|
+ line-height: 30px;
|
|
|
+ }
|
|
|
+ .el-checkbox__input.is-checked+.el-checkbox__label{
|
|
|
+ color: #2F3742;
|
|
|
+ }
|
|
|
+ .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
|
|
|
+ background-color: #3459D2;
|
|
|
+ border-color: #3459D2;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
natasha
