Tekijä | SHA1 | Viesti | Päivämäärä |
---|---|---|---|
|
c214cededd | upload | 9 kuukautta sitten |
|
d8492457ac | upload | 9 kuukautta sitten |
|
74c58e3bee | upload | 9 kuukautta sitten |
|
22abb9859a | upload | 9 kuukautta sitten |
|
b47e331c90 | upload | 9 kuukautta sitten |
|
34cb56f870 | upload | 9 kuukautta sitten |
|
1bfd30a5d5 | upload | 9 kuukautta sitten |
|
d5c5d2ff21 | upload | 10 kuukautta sitten |
|
133f3f3aee | 1 | 10 kuukautta sitten |
|
60a691e142 | upload | 10 kuukautta sitten |
|
a0ecc32ab2 | upload | 10 kuukautta sitten |
|
b397af19e5 | upload | 10 kuukautta sitten |
|
04d4e75dc1 | upload | 10 kuukautta sitten |
@@ -0,0 +1,2 @@ | |||
# .env.development | |||
VUE_APP_BASE_API=https://admintest.malls.iformall.com/api |
@@ -0,0 +1,2 @@ | |||
# .env.test | |||
VUE_APP_BASE_API=https://admin.malls.iformall.com/api |
@@ -21,3 +21,4 @@ pnpm-debug.log* | |||
*.njsproj | |||
*.sln | |||
*.sw? | |||
*.rar |
@@ -163,7 +163,6 @@ export const OutStockOptions = [ | |||
snCode: ' [SPP1Y79G1]', | |||
price: '12.00' | |||
} | |||
], | |||
tabelHtml: '', | |||
columnsAttr: [ | |||
@@ -5,21 +5,22 @@ import VueRouter from 'vue-router' | |||
import Designer from './page/designer.vue' | |||
import Index from './page/index.vue' | |||
import { outStockTemp } from './data/defaultTemp' | |||
import axios from 'axios'; | |||
import 'element-ui/lib/theme-chalk/index.css'; | |||
// 默认设置一条模板示例 | |||
let tempList | |||
try { | |||
tempList = JSON.parse(localStorage.getItem('tempList')) || [] | |||
} catch (error) { | |||
tempList = [] | |||
} | |||
if (tempList.length == 0) { | |||
localStorage.setItem('tempList', outStockTemp) | |||
} | |||
// let tempList | |||
// try { | |||
// tempList = JSON.parse(localStorage.getItem('tempList')) || [] | |||
// } catch (error) { | |||
// tempList = [] | |||
// } | |||
// if (tempList.length == 0) { | |||
// localStorage.setItem('tempList', outStockTemp) | |||
// } | |||
Vue.prototype.$axios = axios; | |||
Vue.use(VueRouter) | |||
Vue.use(vuePrintDesigner) | |||
const routes = [ | |||
@@ -2,43 +2,110 @@ | |||
<kr-print-designer ref="printDesigner" :temp-value="value" :widget-options="widgets" @save="handleSave" /> | |||
</template> | |||
<script> | |||
import { OutStockOptions, InStockOptions } from '../data/options' | |||
// import { OutStockOptions, InStockOptions } from '../data/options' | |||
const baseUrl = process.env.VUE_APP_BASE_API; | |||
export default { | |||
data() { | |||
return { | |||
index: '', | |||
value: { | |||
title: 'demo', | |||
width: 750, | |||
height: 550, | |||
pageWidth: 750, | |||
pageHeight: 550, | |||
tempItems: [], | |||
}, | |||
widgets: OutStockOptions, | |||
tenantId: '', | |||
templateId: '', | |||
// printData: [], | |||
value: {}, | |||
widgets: [], | |||
} | |||
}, | |||
created() { | |||
this.index = this.$route.query.index | |||
try { | |||
let tempList = JSON.parse(localStorage.getItem('tempList')) || [] | |||
this.value = tempList[this.index] | |||
this.widgets = this.value.type == 1 ? OutStockOptions : InStockOptions | |||
} catch (err) { | |||
console.error(err) | |||
} | |||
}, | |||
methods: { | |||
handleSave(data) { | |||
let tempList = JSON.parse(localStorage.getItem('tempList')) || [] | |||
tempList[this.index] = data | |||
localStorage.setItem('tempList', JSON.stringify(tempList)) | |||
this.$router.back() | |||
const obj = { | |||
contentJsonUpdate: { | |||
id: data.id, | |||
type: data.type, | |||
title: data.title, | |||
width: data.width, | |||
height: data.height, | |||
pageWidth: data.pageWidth, | |||
pageHeight: data.pageHeight, | |||
tempItems: data.tempItems, | |||
}, | |||
id: data.id, | |||
tenantId: this.tenantId, | |||
title: data.title, | |||
} | |||
console.log(obj, 'handleSave') | |||
this.addNewModel(obj) | |||
}, | |||
// 手动初始话模板数据 | |||
initTemp(){ | |||
this.$refs.printDesigner.initTemp(this.value,this.widgets) | |||
initTemp() { | |||
this.$refs.printDesigner.initTemp(this.value, this.widgets) | |||
}, | |||
addNewModel(data) { | |||
this.$axios.post(baseUrl + "/print/updateTemplates", data) | |||
.then(res => { | |||
console.log(res, 'res') | |||
if (res.data.code == 200) { | |||
this.$message.success("保存成功!") | |||
// this.$router.back() | |||
} else { | |||
this.$message.error("保存失败!") | |||
} | |||
}) | |||
.catch(err => { | |||
console.error(err); | |||
this.$message.error("保存失败!") | |||
}); | |||
}, | |||
getWidgets(type) { | |||
const url = baseUrl + `/print/printDatas?type=${type}` | |||
this.$axios.get(url) | |||
.then(res => { | |||
console.log(res, 'res') | |||
const arr = [] | |||
res.data.data.forEach(item => { | |||
delete item.printComponents.defaultValue | |||
arr.push(item.printComponents) | |||
}); | |||
this.widgets = arr | |||
console.log(this.widgets, 'this.widgets ') | |||
//传入值变化后,需要手动初始化模板数据,否则不会同步 | |||
this.initTemp() | |||
}) | |||
.catch(err => { | |||
console.error(err); | |||
}); | |||
}, | |||
getPrintData(tenantId, templateId) { | |||
const url = baseUrl + `/print/getTemplate?tenantId=${tenantId}&templateId=${templateId}` | |||
this.$axios.get(url) | |||
.then(res => { | |||
console.log(res, 'res') | |||
this.value = res.data.data.contentJson | |||
if (!this.value.tempItems || !this.value.tempItems.length) { | |||
this.value.tempItems = [] | |||
} | |||
this.getWidgets(this.value.type) | |||
}) | |||
.catch(err => { | |||
console.error(err); | |||
}); | |||
}, | |||
}, | |||
created() { | |||
// this.printData = this.$route.query.printData | |||
this.tenantId = this.$route.query.tenantId | |||
this.templateId = this.$route.query.templateId | |||
try { | |||
// this.value = this.printData | |||
// this.getWidgets(this.value.type) | |||
this.getPrintData(this.tenantId, this.templateId) | |||
} catch (err) { | |||
console.error(err) | |||
} | |||
}, | |||
} | |||
@@ -1,14 +1,39 @@ | |||
<template> | |||
<div class="box"> | |||
<div class="title">打印模板设计器</div> | |||
<div class="title">ID:{{ currentID }}</div> | |||
<section> | |||
<div class="section">模板管理</div> | |||
<el-form :inline="true" :model="searchForm" size="small" label-width="80px" label-position="right"> | |||
<el-form-item label="模板名称" prop="name"> | |||
<el-input v-model="searchForm.name" clearable></el-input> | |||
</el-form-item> | |||
<el-form-item label="模板类型" prop="type"> | |||
<el-select v-model="searchForm.type" clearable> | |||
<el-option v-for="(item, index) in typeArr" :key="index" :label="item.name" :value="item.id"></el-option> | |||
</el-select> | |||
</el-form-item> | |||
<el-form-item label="状态" prop="isDel"> | |||
<el-select v-model="searchForm.isDel" clearable> | |||
<el-option v-for="(item, index) in isDelArr" :key="index" :label="item.name" :value="item.id"></el-option> | |||
</el-select> | |||
</el-form-item> | |||
<el-form-item> | |||
<el-button size="mini" type="primary" @click="getList">查询模板</el-button> | |||
</el-form-item> | |||
</el-form> | |||
<el-table :data="tempList" style="width: 100%" size="mini" border> | |||
<el-table-column label="模板名称" prop="title"></el-table-column> | |||
<el-table-column label="模板类型"> | |||
<template slot-scope="scope"> | |||
<span>{{ scope.row.type == 1 ? '出库单' : '入库单' }}</span> | |||
<span>{{ getType(scope.row.type) }}</span> | |||
</template> | |||
</el-table-column> | |||
<el-table-column label="模板状态"> | |||
<template slot-scope="scope"> | |||
<span>{{ getIsDel(scope.row.isDel) }}</span> | |||
</template> | |||
</el-table-column> | |||
<el-table-column label="模板宽高"> | |||
@@ -26,11 +51,12 @@ | |||
<el-button size="mini" type="primary" @click="openCreate">创建模板</el-button> | |||
</template> | |||
<template slot-scope="scope"> | |||
<el-button type="text" size="mini" @click="handleEdit(scope.$index, scope.row)">设计</el-button> | |||
<el-button type="text" size="mini" @click="handlePreview(scope.$index, scope.row)">预览</el-button> | |||
<el-button type="text" size="mini" @click="handleEdit(scope.row)">设计</el-button> | |||
<el-button type="text" size="mini" @click="handlePreview(scope.row)">预览</el-button> | |||
<el-button type="text" size="mini" @click="handlePrint(scope.row)">打印</el-button> | |||
<el-button v-if="scope.row.isDel" type="text" size="mini" @click="handleRecover(scope.row)">恢复</el-button> | |||
<el-button v-if="!scope.row.isDel" type="text" size="mini" @click="handleDelete(scope.row)">删除</el-button> | |||
<el-button type="text" size="mini" @click="handleCopy(scope.row)">复制新增</el-button> | |||
<el-button v-if="!scope.row.default" type="text" size="mini" | |||
@click="handleDelete(scope.$index, scope.row)">删除</el-button> | |||
</template> | |||
</el-table-column> | |||
</el-table> | |||
@@ -41,11 +67,10 @@ | |||
</el-form-item> | |||
<el-form-item label="模板类型" prop="type"> | |||
<el-select v-model="form.type"> | |||
<el-option label="出库单" :value="1"></el-option> | |||
<el-option label="入库单" :value="2"></el-option> | |||
<el-option v-for="(item, index) in typeArr" :key="index" :label="item.name" :value="item.id"></el-option> | |||
</el-select> | |||
</el-form-item> | |||
<el-form-item label="模板宽度" prop="width"> | |||
<!-- <el-form-item label="模板宽度" prop="width"> | |||
<el-input v-model="form.width"></el-input> | |||
</el-form-item> | |||
<el-form-item label="模板高度" prop="height"> | |||
@@ -56,7 +81,7 @@ | |||
</el-form-item> | |||
<el-form-item label="纸张高度" prop="pageHeight"> | |||
<el-input v-model="form.pageHeight"></el-input> | |||
</el-form-item> | |||
</el-form-item> --> | |||
</el-form> | |||
<div slot="footer" class="dialog-footer"> | |||
<el-button size="mini" @click="visible = false">取 消</el-button> | |||
@@ -64,7 +89,7 @@ | |||
</div> | |||
</el-dialog> | |||
</section> | |||
<section> | |||
<!-- <section v-if="false"> | |||
<div class="section">模板打印测试</div> | |||
<el-form ref="printForm" :model="printForm" size="small" :rules="printRules" :inline="true"> | |||
<el-form-item label="打印模板" prop="tempIndex"> | |||
@@ -86,7 +111,7 @@ | |||
</el-form-item> | |||
</el-form> | |||
</section> | |||
<section> | |||
<section v-if="false"> | |||
<el-collapse> | |||
<el-collapse-item title="测试数据" name="1"> | |||
<el-form ref="testData" :model="testData" size="small" :inline="true"> | |||
@@ -101,31 +126,41 @@ | |||
</el-form> | |||
</el-collapse-item> | |||
</el-collapse> | |||
</section> | |||
</section> --> | |||
</div> | |||
</template> | |||
<script> | |||
import { Table, TableColumn, Dialog, MessageBox } from 'element-ui' | |||
import { Table, TableColumn, Dialog, MessageBox, Message } from 'element-ui' | |||
import Vue from 'vue' | |||
Vue.prototype.$confirm = (...args) => MessageBox.confirm(...args) | |||
const defaultTemp = () => ({ | |||
title: '', | |||
type: 1, // 模板类型 1:出库单;2:入库单 | |||
width: '', | |||
height: '', | |||
pageWidth: '', | |||
pageHeight: '', | |||
tempItems: [], | |||
}) | |||
Vue.prototype.$message = Message | |||
const baseUrl = process.env.VUE_APP_BASE_API; | |||
import { OutStockData, InStockData } from '../data/test' | |||
export default { | |||
data() { | |||
return { | |||
visible: false, | |||
currentID: "", | |||
tenantId: "", | |||
value: {}, | |||
tempList: [], | |||
form: defaultTemp(), | |||
typeArr: [], | |||
searchForm: { | |||
name: '', | |||
type: '', | |||
isDel: '' | |||
}, | |||
isDelArr: [ | |||
{ name: "正常", id: 0 }, | |||
{ name: "已删除", id: 1 }, | |||
], | |||
form: { | |||
title: '', | |||
type: '', | |||
width: '', | |||
height: '', | |||
pageWidth: '', | |||
pageHeight: '' | |||
}, | |||
rules: { | |||
title: { required: true, message: '请输入模板名称' }, | |||
type: { required: true, message: '请选择模板类型' }, | |||
@@ -148,98 +183,236 @@ export default { | |||
}, | |||
} | |||
}, | |||
created() { | |||
Vue.use(Table) | |||
Vue.use(TableColumn) | |||
Vue.use(Dialog) | |||
this.tempList = JSON.parse(localStorage.getItem('tempList')) || [] | |||
const id = this.$route.query.id | |||
if (id) this.currentID = id | |||
}, | |||
methods: { | |||
// 预览 | |||
handlePreview(index, row) { | |||
this.$lodop.previewTemp(row) | |||
handlePreview(row) { | |||
console.log(row, 'row') | |||
if (row.tempItems) { | |||
this.$lodop.previewTemp(row) | |||
} else { | |||
this.$message.error("空模板无法预览,请先点击设计添加模板数据!") | |||
} | |||
}, | |||
// 打印 | |||
handlePrint(row) { | |||
console.log(row, 'row') | |||
if (row.tempItems) { | |||
const TaskID = this.$lodop.print(row) | |||
console.log(TaskID, 'TaskID') | |||
LODOP.On_Return = (TaskID, Value) => { | |||
console.log(TaskID, Value) | |||
if (Value) { | |||
this.$message.success("成功创建打印任务!") | |||
} | |||
} | |||
} else { | |||
this.$message.error("空模板无法打印,请先点击设计添加模板数据!") | |||
} | |||
}, | |||
handlePrintSuccess() { | |||
console.log(1111111111) | |||
}, | |||
// 设计 | |||
handleEdit(index, row) { | |||
handleEdit(row) { | |||
console.log(row, 'row') | |||
// 初次新增时,没有tempItems(Arry)字段,需要手动添加 | |||
if (!row.tempItems || !row.tempItems.length) { | |||
row.tempItems = [] | |||
} | |||
this.$router.push({ | |||
path: '/designer', | |||
query: { | |||
index: index, | |||
tenantId: this.tenantId, | |||
printData: row | |||
}, | |||
}) | |||
}, | |||
// 恢复 | |||
handleRecover(row) { | |||
console.log(row, 'row') | |||
this.deleteOrRecover(row, 0) | |||
}, | |||
// 删除 | |||
handleDelete(index, row) { | |||
this.$confirm('确认删除该条数据吗?', '确认信息') | |||
.then((isPass) => { | |||
if (isPass) { | |||
this.tempList.splice(index, 1) | |||
localStorage.setItem('tempList', JSON.stringify(this.tempList)) | |||
handleDelete(row) { | |||
console.log(row, 'row') | |||
this.$confirm('删除该模板?, 是否继续?', '提示', { | |||
confirmButtonText: '确定', | |||
cancelButtonText: '取消', | |||
type: 'warning' | |||
}).then(() => { | |||
this.deleteOrRecover(row, 1) | |||
}).catch(() => { | |||
}); | |||
}, | |||
deleteOrRecover(item, flag) { | |||
const data = { | |||
id: item.id, | |||
tenantId: this.tenantId, | |||
isDel: flag, | |||
} | |||
this.$axios.post(baseUrl + "/print/setTemplatesDel", data) | |||
.then(res => { | |||
console.log(res, 'res') | |||
if (res.data.code == 200) { | |||
this.$message.success(flag ? "删除成功!" : "恢复成功!") | |||
this.getData() | |||
} else { | |||
this.$message.error(flag ? "删除失败!" : "恢复失败!") | |||
} | |||
}) | |||
.catch() | |||
.catch(err => { | |||
console.error(err); | |||
this.$message.error(flag ? "删除失败!" : "恢复失败!") | |||
}); | |||
}, | |||
getType(num) { | |||
let name | |||
this.typeArr.forEach(item => { | |||
if (item.id == num) | |||
name = item.name | |||
}) | |||
return name | |||
}, | |||
getIsDel(num) { | |||
let name | |||
this.isDelArr.forEach(item => { | |||
if (item.id == num) | |||
name = item.name | |||
}) | |||
return name | |||
}, | |||
//复制新增 | |||
handleCopy(row) { | |||
let copyTemp = JSON.parse(JSON.stringify(row)) | |||
copyTemp.title = copyTemp.title + '_copy' | |||
copyTemp.default = false | |||
this.tempList.push(copyTemp) | |||
localStorage.setItem('tempList', JSON.stringify(this.tempList)) | |||
const data = { | |||
id: row.id, | |||
tenantId: this.tenantId, | |||
} | |||
this.$axios.post(baseUrl + "/print/copyTemplates", data) | |||
.then(res => { | |||
if (res.data.code == 200) { | |||
this.$message.success("新增成功!") | |||
this.getData() | |||
} else { | |||
this.$message.error("新增失败!") | |||
} | |||
}) | |||
.catch(err => { | |||
console.error(err); | |||
this.$message.error("新增失败!") | |||
}); | |||
}, | |||
// 新增 | |||
openCreate() { | |||
this.form = defaultTemp() | |||
this.visible = true | |||
}, | |||
// 保存新增 | |||
savaTemp() { | |||
this.$refs.form.validate((valid) => { | |||
if (valid) { | |||
this.tempList.push(this.form) | |||
localStorage.setItem('tempList', JSON.stringify(this.tempList)) | |||
const data = { | |||
tenantId: this.tenantId, | |||
title: this.form.title, | |||
type: this.form.type | |||
} | |||
this.addNewModel(data) | |||
this.visible = false | |||
} | |||
}) | |||
}, | |||
/** | |||
* 测试打印预览/直接打印 | |||
* flag 1:打印预览,2:直接打印 | |||
*/ | |||
printPreview(flag) { | |||
this.$refs.printForm.validate((valid) => { | |||
if (valid) { | |||
let printData | |||
try { | |||
printData = JSON.parse(this.printForm.data) | |||
} catch (err) { | |||
return this.$message('请输入正确格式的打印数据') | |||
} | |||
if (flag == 1) { | |||
console.log(this.tempList[this.printForm.tempIndex]) | |||
console.log(printData) | |||
this.$lodop.preview(this.tempList[this.printForm.tempIndex], printData) | |||
addNewModel(data) { | |||
this.$axios.post(baseUrl + "/print/saveTemplates", data) | |||
.then(res => { | |||
console.log(res, 'res') | |||
if (res.data.code == 200) { | |||
this.$message.success("新增成功!") | |||
this.getData() | |||
} else { | |||
this.$confirm('确认直接打印吗?', '确认信息') | |||
.then((isPass) => { | |||
if (isPass) { | |||
this.$lodop.print(this.tempList[this.printForm.tempIndex], printData) | |||
} | |||
}) | |||
.catch((err) => { | |||
console.log(err) | |||
}) | |||
this.$message.error("新增失败!") | |||
} | |||
} | |||
}) | |||
}) | |||
.catch(err => { | |||
console.error(err); | |||
this.$message.error("新增失败!") | |||
}); | |||
}, | |||
getData() { | |||
this.getPrintTypes() | |||
this.getList() | |||
}, | |||
getPrintTypes() { | |||
this.$axios.get(baseUrl + "/print/types") | |||
.then(res => { | |||
console.log(res, 'res') | |||
this.typeArr = res.data.data | |||
}) | |||
.catch(err => { | |||
console.error(err); | |||
}); | |||
}, | |||
getList() { | |||
const url = baseUrl + | |||
"/print/printTemplates?isDel=" + | |||
this.searchForm.isDel + | |||
"&name=" + | |||
this.searchForm.name + | |||
"&type=" + | |||
this.searchForm.type + | |||
"&tenantId=" + | |||
this.tenantId | |||
this.$axios.get(url) | |||
.then(res => { | |||
console.log(res, 'res') | |||
const arr = [] | |||
res.data.data.forEach(item => { | |||
item.contentJson.isDel = item.isDel | |||
arr.push(item.contentJson) | |||
}); | |||
this.tempList = arr | |||
}) | |||
.catch(err => { | |||
console.error(err); | |||
}); | |||
} | |||
}, | |||
created() { | |||
Vue.use(Table) | |||
Vue.use(TableColumn) | |||
Vue.use(Dialog) | |||
this.tempList = [] | |||
const tenantId = this.$route.query.tenantId | |||
if (tenantId) this.tenantId = tenantId | |||
this.getData() | |||
}, | |||
beforeCreate() { | |||
const tenantId = this.$route.query.tenantId | |||
const templateId = this.$route.query.templateId | |||
if (templateId) { | |||
this.$router.push({ | |||
path: "/designer", | |||
query: { | |||
tenantId, | |||
templateId | |||
} | |||
}) | |||
} | |||
} | |||
} | |||
</script> | |||
<style scoped> | |||
<style lang="scss" scoped> | |||
.box { | |||
width: 1000px; | |||
margin: auto; | |||
@@ -260,4 +433,8 @@ export default { | |||
color: #333333; | |||
padding: 10px 0; | |||
} | |||
.el-message-box { | |||
background-color: #1890ff; | |||
} | |||
</style> |
@@ -11,10 +11,12 @@ | |||
"author": "liuxia", | |||
"scripts": { | |||
"dev": "vue-cli-service serve", | |||
"build": "vue-cli-service build", | |||
"build:dev": "vue-cli-service build --mode development", | |||
"build:pro": "vue-cli-service build --mode production", | |||
"lib": "vue-cli-service build --target lib --name kr-print-designer --dest lib src/index.js" | |||
}, | |||
"dependencies": { | |||
"axios": "^1.7.3", | |||
"nanoid": "^1.0.1" | |||
}, | |||
"devDependencies": { | |||
@@ -22,11 +24,11 @@ | |||
"@vue/cli-service": "^4.0.0", | |||
"babel-eslint": "^10.0.3", | |||
"babel-plugin-component": "^1.1.1", | |||
"element-ui": "2.13.0", | |||
"eslint": "^5.16.0", | |||
"eslint-plugin-vue": "^5.0.0", | |||
"sass": "^1.26.5", | |||
"sass-loader": "^8.0.2", | |||
"element-ui": "2.13.0", | |||
"vue": "^2.6.11", | |||
"vue-router": "^3.4.8", | |||
"vue-template-compiler": "^2.6.10" | |||
@@ -36,4 +38,4 @@ | |||
"last 2 versions", | |||
"not dead" | |||
] | |||
} | |||
} |
@@ -1,18 +0,0 @@ | |||
<?xml version="1.0" encoding="UTF-8"?> | |||
<configuration> | |||
<system.webServer> | |||
<rewrite> | |||
<rules> | |||
<rule name="Vue History Rule" stopProcessing="true"> | |||
<match url="(.*)" /> | |||
<conditions logicalGrouping="MatchAll"> | |||
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> | |||
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> | |||
</conditions> | |||
<action type="Rewrite" url="/" /> | |||
</rule> | |||
</rules> | |||
</rewrite> | |||
</system.webServer> | |||
</configuration> |
@@ -15,13 +15,13 @@ | |||
</el-collapse-item> | |||
<el-collapse-item name="3"> | |||
<template slot="title"> | |||
<span>组件</span> | |||
<span>元素</span> | |||
</template> | |||
<options /> | |||
</el-collapse-item> | |||
<el-collapse-item name="4"> | |||
<template slot="title"> | |||
<span>已加组件</span> | |||
<span>已加元素</span> | |||
</template> | |||
<layers /> | |||
</el-collapse-item> | |||
@@ -9,44 +9,28 @@ | |||
<el-row> | |||
<el-col :span="12"> | |||
<el-form-item label="模板宽度"> | |||
<el-input-number | |||
v-model="pageInfo.width" | |||
controls-position="right" | |||
:min="0" | |||
class="min-input" | |||
></el-input-number> | |||
<el-input-number v-model="pageInfo.width" controls-position="right" :min="0" class="min-input" | |||
disabled></el-input-number> | |||
</el-form-item> | |||
</el-col> | |||
<el-col :span="12"> | |||
<el-form-item label="模板高度"> | |||
<el-input-number | |||
v-model="pageInfo.height" | |||
controls-position="right" | |||
:min="0" | |||
class="min-input" | |||
></el-input-number> | |||
<el-input-number v-model="pageInfo.height" controls-position="right" :min="0" class="min-input" | |||
disabled></el-input-number> | |||
</el-form-item> | |||
</el-col> | |||
</el-row> | |||
<el-row> | |||
<el-form-item label="纸张宽度"> | |||
<el-input-number | |||
v-model="pageInfo.pageWidth" | |||
controls-position="right" | |||
:min="0" | |||
class="min-input" | |||
></el-input-number> | |||
<el-input-number v-model="pageInfo.pageWidth" controls-position="right" :min="0" class="min-input" | |||
@input="shapeChanged('pageWidth')"></el-input-number> | |||
<span class="unit-text">(mm)</span> | |||
</el-form-item> | |||
</el-row> | |||
<el-row> | |||
<el-form-item label="纸张高度"> | |||
<el-input-number | |||
v-model="pageInfo.pageHeight" | |||
controls-position="right" | |||
:min="0" | |||
class="min-input" | |||
></el-input-number> | |||
<el-input-number v-model="pageInfo.pageHeight" controls-position="right" :min="0" class="min-input" | |||
@input="shapeChanged('pageHeight')"></el-input-number> | |||
<span class="unit-text">(mm)</span> | |||
</el-form-item> | |||
</el-row> | |||
@@ -60,7 +44,18 @@ export default { | |||
pageInfo() { | |||
return this.$vptd.state.page | |||
}, | |||
}, | |||
methods: { | |||
// 宽度与高度的比例必须约等于纸张宽度与纸张高度的比例,否则拖拽组件将错位 | |||
shapeChanged(element) { | |||
if (element === "pageWidth") { | |||
this.pageInfo.width = this.pageInfo.pageWidth * 2 | |||
} else if (element === "pageHeight") { | |||
this.pageInfo.height = this.pageInfo.pageHeight * 2 | |||
} | |||
} | |||
} | |||
} | |||
</script> | |||
@@ -5,44 +5,28 @@ | |||
<el-row> | |||
<el-col :span="12"> | |||
<el-form-item label="宽度"> | |||
<el-input-number | |||
v-model="activeElement.width" | |||
controls-position="right" | |||
:min="1" | |||
class="min-input" | |||
></el-input-number> | |||
<el-input-number v-model="activeElement.width" controls-position="right" :min="1" | |||
class="min-input"></el-input-number> | |||
</el-form-item> | |||
</el-col> | |||
<el-col :span="12"> | |||
<el-form-item label="高度"> | |||
<el-input-number | |||
v-model="activeElement.height" | |||
controls-position="right" | |||
:min="1" | |||
class="min-input" | |||
></el-input-number> | |||
<el-input-number v-model="activeElement.height" controls-position="right" :min="1" | |||
class="min-input"></el-input-number> | |||
</el-form-item> | |||
</el-col> | |||
</el-row> | |||
<el-row> | |||
<el-col :span="12"> | |||
<el-form-item label="横坐标"> | |||
<el-input-number | |||
v-model="activeElement.left" | |||
controls-position="right" | |||
:min="0" | |||
class="min-input" | |||
></el-input-number> | |||
<el-input-number v-model="activeElement.left" controls-position="right" :min="0" | |||
class="min-input"></el-input-number> | |||
</el-form-item> | |||
</el-col> | |||
<el-col :span="12"> | |||
<el-form-item label="纵坐标"> | |||
<el-input-number | |||
v-model="activeElement.top" | |||
controls-position="right" | |||
:min="0" | |||
class="min-input" | |||
></el-input-number> | |||
<el-input-number v-model="activeElement.top" controls-position="right" :min="0" | |||
class="min-input"></el-input-number> | |||
</el-form-item> | |||
</el-col> | |||
</el-row> | |||
@@ -50,60 +34,40 @@ | |||
<el-row> | |||
<el-col :span="12"> | |||
<el-form-item label="字号"> | |||
<el-input-number | |||
:disabled="activeElement.style.FontSize===undefined" | |||
v-model="activeElement.style.FontSize" | |||
controls-position="right" | |||
:min="0" | |||
class="min-input" | |||
></el-input-number> | |||
<el-input-number :disabled="activeElement.style.FontSize === undefined" v-model="activeElement.style.FontSize" | |||
controls-position="right" :min="0" class="min-input"></el-input-number> | |||
</el-form-item> | |||
</el-col> | |||
<el-col :span="12"> | |||
<el-form-item label="加粗"> | |||
<el-switch | |||
:disabled="activeElement.style.Bold===undefined" | |||
v-model="activeElement.style.Bold" | |||
:active-value="true" | |||
:inactive-value="false" | |||
></el-switch> | |||
<el-switch :disabled="activeElement.style.Bold === undefined" v-model="activeElement.style.Bold" | |||
:active-value="true" :inactive-value="false"></el-switch> | |||
</el-form-item> | |||
</el-col> | |||
</el-row> | |||
<el-row> | |||
<el-col :span="8"> | |||
<el-form-item label="字体颜色"> | |||
<el-color-picker | |||
:disabled="activeElement.style.FontColor===undefined" | |||
v-model="activeElement.style.FontColor" | |||
></el-color-picker> | |||
<el-color-picker :disabled="activeElement.style.FontColor === undefined" | |||
v-model="activeElement.style.FontColor"></el-color-picker> | |||
</el-form-item> | |||
</el-col> | |||
<el-col :span="8"> | |||
<el-form-item label="边框颜色"> | |||
<el-color-picker | |||
:disabled="activeElement.style.BorderColor===undefined" | |||
v-model="activeElement.style.BorderColor" | |||
></el-color-picker> | |||
<el-color-picker :disabled="activeElement.style.BorderColor === undefined" | |||
v-model="activeElement.style.BorderColor"></el-color-picker> | |||
</el-form-item> | |||
</el-col> | |||
<el-col :span="8"> | |||
<el-form-item label="条码值"> | |||
<el-switch | |||
:disabled="activeElement.style.ShowBarText===undefined" | |||
v-model="activeElement.style.ShowBarText" | |||
:active-value="true" | |||
:inactive-value="false" | |||
></el-switch> | |||
<el-switch :disabled="activeElement.style.ShowBarText === undefined" v-model="activeElement.style.ShowBarText" | |||
:active-value="true" :inactive-value="false"></el-switch> | |||
</el-form-item> | |||
</el-col> | |||
</el-row> | |||
<el-row> | |||
<el-form-item label="对齐方式"> | |||
<el-radio-group | |||
:disabled="activeElement.style.Alignment===undefined" | |||
v-model="activeElement.style.Alignment" | |||
> | |||
<el-radio-group :disabled="activeElement.style.Alignment === undefined" v-model="activeElement.style.Alignment"> | |||
<el-radio :label="'left'">左对齐</el-radio> | |||
<el-radio :label="'center'">居中</el-radio> | |||
<el-radio :label="'right'">右对齐</el-radio> | |||
@@ -113,50 +77,31 @@ | |||
<el-row> | |||
<el-col :span="12"> | |||
<el-form-item label="条码类型"> | |||
<el-select | |||
:disabled="activeElement.style.codeType===undefined" | |||
v-model="activeElement.style.codeType" | |||
class="min-input" | |||
> | |||
<el-select :disabled="activeElement.style.codeType === undefined" v-model="activeElement.style.codeType" | |||
class="min-input"> | |||
<el-option v-for="val in codeTypeArray" :key="val" :label="val" :value="val" /> | |||
</el-select> | |||
</el-form-item> | |||
</el-col> | |||
<el-col :span="12"> | |||
<el-form-item label="打印类型"> | |||
<el-select | |||
:disabled="activeElement.style.ItemType===undefined" | |||
v-model="activeElement.style.ItemType" | |||
class="min-input" | |||
> | |||
<el-option | |||
v-for="val in itemTypeArray" | |||
:key="val.value" | |||
:label="val.label" | |||
:value="val.value" | |||
/> | |||
<el-select :disabled="activeElement.style.ItemType === undefined" v-model="activeElement.style.ItemType" | |||
class="min-input"> | |||
<el-option v-for="val in itemTypeArray" :key="val.value" :label="val.label" :value="val.value" /> | |||
</el-select> | |||
</el-form-item> | |||
</el-col> | |||
<el-col :span="12"> | |||
<el-form-item label="高度自动"> | |||
<el-switch | |||
:disabled="activeElement.style.AutoHeight===undefined" | |||
v-model="activeElement.style.AutoHeight" | |||
:active-value="true" | |||
:inactive-value="false" | |||
></el-switch> | |||
<el-switch :disabled="activeElement.style.AutoHeight === undefined" v-model="activeElement.style.AutoHeight" | |||
:active-value="true" :inactive-value="false"></el-switch> | |||
</el-form-item> | |||
</el-col> | |||
<el-col :span="12"> | |||
<el-form-item label="下边距"> | |||
<el-input-number | |||
:disabled="activeElement.style.BottomMargin===undefined || !activeElement.style.AutoHeight" | |||
v-model="activeElement.style.BottomMargin" | |||
controls-position="right" | |||
:min="0" | |||
class="min-input" | |||
></el-input-number> | |||
<el-input-number :disabled="activeElement.style.BottomMargin === undefined || !activeElement.style.AutoHeight" | |||
v-model="activeElement.style.BottomMargin" controls-position="right" :min="0" | |||
class="min-input"></el-input-number> | |||
</el-form-item> | |||
</el-col> | |||
</el-row> | |||
@@ -19,7 +19,7 @@ import { | |||
Form, | |||
FormItem, | |||
Tag, | |||
ColorPicker, | |||
ColorPicker | |||
} from 'element-ui'; | |||
import './assets/style/index.scss' | |||
// LODOP打印服务 | |||
@@ -7,5 +7,5 @@ module.exports = { | |||
// 模板来源 | |||
template: 'example/index.html', | |||
}, | |||
} | |||
}, | |||
} |