作者 | SHA1 | 備註 | 提交日期 |
---|---|---|---|
|
c214cededd | upload | 10 月之前 |
|
d8492457ac | upload | 10 月之前 |
|
74c58e3bee | upload | 10 月之前 |
|
22abb9859a | upload | 10 月之前 |
|
b47e331c90 | upload | 10 月之前 |
|
34cb56f870 | upload | 10 月之前 |
|
1bfd30a5d5 | upload | 10 月之前 |
|
d5c5d2ff21 | upload | 10 月之前 |
|
133f3f3aee | 1 | 10 月之前 |
|
60a691e142 | upload | 10 月之前 |
|
a0ecc32ab2 | upload | 10 月之前 |
|
b397af19e5 | upload | 10 月之前 |
|
04d4e75dc1 | upload | 10 月之前 |
@@ -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 | *.njsproj | ||||
*.sln | *.sln | ||||
*.sw? | *.sw? | ||||
*.rar |
@@ -163,7 +163,6 @@ export const OutStockOptions = [ | |||||
snCode: ' [SPP1Y79G1]', | snCode: ' [SPP1Y79G1]', | ||||
price: '12.00' | price: '12.00' | ||||
} | } | ||||
], | ], | ||||
tabelHtml: '', | tabelHtml: '', | ||||
columnsAttr: [ | columnsAttr: [ | ||||
@@ -5,21 +5,22 @@ import VueRouter from 'vue-router' | |||||
import Designer from './page/designer.vue' | import Designer from './page/designer.vue' | ||||
import Index from './page/index.vue' | import Index from './page/index.vue' | ||||
import { outStockTemp } from './data/defaultTemp' | 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(VueRouter) | ||||
Vue.use(vuePrintDesigner) | Vue.use(vuePrintDesigner) | ||||
const routes = [ | const routes = [ | ||||
@@ -2,43 +2,110 @@ | |||||
<kr-print-designer ref="printDesigner" :temp-value="value" :widget-options="widgets" @save="handleSave" /> | <kr-print-designer ref="printDesigner" :temp-value="value" :widget-options="widgets" @save="handleSave" /> | ||||
</template> | </template> | ||||
<script> | <script> | ||||
import { OutStockOptions, InStockOptions } from '../data/options' | |||||
// import { OutStockOptions, InStockOptions } from '../data/options' | |||||
const baseUrl = process.env.VUE_APP_BASE_API; | |||||
export default { | export default { | ||||
data() { | data() { | ||||
return { | 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: { | methods: { | ||||
handleSave(data) { | 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> | <template> | ||||
<div class="box"> | <div class="box"> | ||||
<div class="title">打印模板设计器</div> | <div class="title">打印模板设计器</div> | ||||
<div class="title">ID:{{ currentID }}</div> | |||||
<section> | <section> | ||||
<div class="section">模板管理</div> | <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 :data="tempList" style="width: 100%" size="mini" border> | ||||
<el-table-column label="模板名称" prop="title"></el-table-column> | <el-table-column label="模板名称" prop="title"></el-table-column> | ||||
<el-table-column label="模板类型"> | <el-table-column label="模板类型"> | ||||
<template slot-scope="scope"> | <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> | </template> | ||||
</el-table-column> | </el-table-column> | ||||
<el-table-column label="模板宽高"> | <el-table-column label="模板宽高"> | ||||
@@ -26,11 +51,12 @@ | |||||
<el-button size="mini" type="primary" @click="openCreate">创建模板</el-button> | <el-button size="mini" type="primary" @click="openCreate">创建模板</el-button> | ||||
</template> | </template> | ||||
<template slot-scope="scope"> | <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 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> | </template> | ||||
</el-table-column> | </el-table-column> | ||||
</el-table> | </el-table> | ||||
@@ -41,11 +67,10 @@ | |||||
</el-form-item> | </el-form-item> | ||||
<el-form-item label="模板类型" prop="type"> | <el-form-item label="模板类型" prop="type"> | ||||
<el-select v-model="form.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-select> | ||||
</el-form-item> | </el-form-item> | ||||
<el-form-item label="模板宽度" prop="width"> | |||||
<!-- <el-form-item label="模板宽度" prop="width"> | |||||
<el-input v-model="form.width"></el-input> | <el-input v-model="form.width"></el-input> | ||||
</el-form-item> | </el-form-item> | ||||
<el-form-item label="模板高度" prop="height"> | <el-form-item label="模板高度" prop="height"> | ||||
@@ -56,7 +81,7 @@ | |||||
</el-form-item> | </el-form-item> | ||||
<el-form-item label="纸张高度" prop="pageHeight"> | <el-form-item label="纸张高度" prop="pageHeight"> | ||||
<el-input v-model="form.pageHeight"></el-input> | <el-input v-model="form.pageHeight"></el-input> | ||||
</el-form-item> | |||||
</el-form-item> --> | |||||
</el-form> | </el-form> | ||||
<div slot="footer" class="dialog-footer"> | <div slot="footer" class="dialog-footer"> | ||||
<el-button size="mini" @click="visible = false">取 消</el-button> | <el-button size="mini" @click="visible = false">取 消</el-button> | ||||
@@ -64,7 +89,7 @@ | |||||
</div> | </div> | ||||
</el-dialog> | </el-dialog> | ||||
</section> | </section> | ||||
<section> | |||||
<!-- <section v-if="false"> | |||||
<div class="section">模板打印测试</div> | <div class="section">模板打印测试</div> | ||||
<el-form ref="printForm" :model="printForm" size="small" :rules="printRules" :inline="true"> | <el-form ref="printForm" :model="printForm" size="small" :rules="printRules" :inline="true"> | ||||
<el-form-item label="打印模板" prop="tempIndex"> | <el-form-item label="打印模板" prop="tempIndex"> | ||||
@@ -86,7 +111,7 @@ | |||||
</el-form-item> | </el-form-item> | ||||
</el-form> | </el-form> | ||||
</section> | </section> | ||||
<section> | |||||
<section v-if="false"> | |||||
<el-collapse> | <el-collapse> | ||||
<el-collapse-item title="测试数据" name="1"> | <el-collapse-item title="测试数据" name="1"> | ||||
<el-form ref="testData" :model="testData" size="small" :inline="true"> | <el-form ref="testData" :model="testData" size="small" :inline="true"> | ||||
@@ -101,31 +126,41 @@ | |||||
</el-form> | </el-form> | ||||
</el-collapse-item> | </el-collapse-item> | ||||
</el-collapse> | </el-collapse> | ||||
</section> | |||||
</section> --> | |||||
</div> | </div> | ||||
</template> | </template> | ||||
<script> | <script> | ||||
import { Table, TableColumn, Dialog, MessageBox } from 'element-ui' | |||||
import { Table, TableColumn, Dialog, MessageBox, Message } from 'element-ui' | |||||
import Vue from 'vue' | import Vue from 'vue' | ||||
Vue.prototype.$confirm = (...args) => MessageBox.confirm(...args) | 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' | import { OutStockData, InStockData } from '../data/test' | ||||
export default { | export default { | ||||
data() { | data() { | ||||
return { | return { | ||||
visible: false, | visible: false, | ||||
currentID: "", | |||||
tenantId: "", | |||||
value: {}, | value: {}, | ||||
tempList: [], | tempList: [], | ||||
form: defaultTemp(), | |||||
typeArr: [], | |||||
searchForm: { | |||||
name: '', | |||||
type: '', | |||||
isDel: '' | |||||
}, | |||||
isDelArr: [ | |||||
{ name: "正常", id: 0 }, | |||||
{ name: "已删除", id: 1 }, | |||||
], | |||||
form: { | |||||
title: '', | |||||
type: '', | |||||
width: '', | |||||
height: '', | |||||
pageWidth: '', | |||||
pageHeight: '' | |||||
}, | |||||
rules: { | rules: { | ||||
title: { required: true, message: '请输入模板名称' }, | title: { required: true, message: '请输入模板名称' }, | ||||
type: { 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: { | 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({ | this.$router.push({ | ||||
path: '/designer', | path: '/designer', | ||||
query: { | 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) { | 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() { | openCreate() { | ||||
this.form = defaultTemp() | |||||
this.visible = true | this.visible = true | ||||
}, | }, | ||||
// 保存新增 | // 保存新增 | ||||
savaTemp() { | savaTemp() { | ||||
this.$refs.form.validate((valid) => { | this.$refs.form.validate((valid) => { | ||||
if (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 | 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 { | } 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> | </script> | ||||
<style scoped> | |||||
<style lang="scss" scoped> | |||||
.box { | .box { | ||||
width: 1000px; | width: 1000px; | ||||
margin: auto; | margin: auto; | ||||
@@ -260,4 +433,8 @@ export default { | |||||
color: #333333; | color: #333333; | ||||
padding: 10px 0; | padding: 10px 0; | ||||
} | } | ||||
.el-message-box { | |||||
background-color: #1890ff; | |||||
} | |||||
</style> | </style> |
@@ -11,10 +11,12 @@ | |||||
"author": "liuxia", | "author": "liuxia", | ||||
"scripts": { | "scripts": { | ||||
"dev": "vue-cli-service serve", | "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" | "lib": "vue-cli-service build --target lib --name kr-print-designer --dest lib src/index.js" | ||||
}, | }, | ||||
"dependencies": { | "dependencies": { | ||||
"axios": "^1.7.3", | |||||
"nanoid": "^1.0.1" | "nanoid": "^1.0.1" | ||||
}, | }, | ||||
"devDependencies": { | "devDependencies": { | ||||
@@ -22,11 +24,11 @@ | |||||
"@vue/cli-service": "^4.0.0", | "@vue/cli-service": "^4.0.0", | ||||
"babel-eslint": "^10.0.3", | "babel-eslint": "^10.0.3", | ||||
"babel-plugin-component": "^1.1.1", | "babel-plugin-component": "^1.1.1", | ||||
"element-ui": "2.13.0", | |||||
"eslint": "^5.16.0", | "eslint": "^5.16.0", | ||||
"eslint-plugin-vue": "^5.0.0", | "eslint-plugin-vue": "^5.0.0", | ||||
"sass": "^1.26.5", | "sass": "^1.26.5", | ||||
"sass-loader": "^8.0.2", | "sass-loader": "^8.0.2", | ||||
"element-ui": "2.13.0", | |||||
"vue": "^2.6.11", | "vue": "^2.6.11", | ||||
"vue-router": "^3.4.8", | "vue-router": "^3.4.8", | ||||
"vue-template-compiler": "^2.6.10" | "vue-template-compiler": "^2.6.10" | ||||
@@ -36,4 +38,4 @@ | |||||
"last 2 versions", | "last 2 versions", | ||||
"not dead" | "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> | ||||
<el-collapse-item name="3"> | <el-collapse-item name="3"> | ||||
<template slot="title"> | <template slot="title"> | ||||
<span>组件</span> | |||||
<span>元素</span> | |||||
</template> | </template> | ||||
<options /> | <options /> | ||||
</el-collapse-item> | </el-collapse-item> | ||||
<el-collapse-item name="4"> | <el-collapse-item name="4"> | ||||
<template slot="title"> | <template slot="title"> | ||||
<span>已加组件</span> | |||||
<span>已加元素</span> | |||||
</template> | </template> | ||||
<layers /> | <layers /> | ||||
</el-collapse-item> | </el-collapse-item> | ||||
@@ -9,44 +9,28 @@ | |||||
<el-row> | <el-row> | ||||
<el-col :span="12"> | <el-col :span="12"> | ||||
<el-form-item label="模板宽度"> | <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-form-item> | ||||
</el-col> | </el-col> | ||||
<el-col :span="12"> | <el-col :span="12"> | ||||
<el-form-item label="模板高度"> | <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-form-item> | ||||
</el-col> | </el-col> | ||||
</el-row> | </el-row> | ||||
<el-row> | <el-row> | ||||
<el-form-item label="纸张宽度"> | <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> | <span class="unit-text">(mm)</span> | ||||
</el-form-item> | </el-form-item> | ||||
</el-row> | </el-row> | ||||
<el-row> | <el-row> | ||||
<el-form-item label="纸张高度"> | <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> | <span class="unit-text">(mm)</span> | ||||
</el-form-item> | </el-form-item> | ||||
</el-row> | </el-row> | ||||
@@ -60,7 +44,18 @@ export default { | |||||
pageInfo() { | pageInfo() { | ||||
return this.$vptd.state.page | 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> | </script> | ||||
@@ -5,44 +5,28 @@ | |||||
<el-row> | <el-row> | ||||
<el-col :span="12"> | <el-col :span="12"> | ||||
<el-form-item label="宽度"> | <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-form-item> | ||||
</el-col> | </el-col> | ||||
<el-col :span="12"> | <el-col :span="12"> | ||||
<el-form-item label="高度"> | <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-form-item> | ||||
</el-col> | </el-col> | ||||
</el-row> | </el-row> | ||||
<el-row> | <el-row> | ||||
<el-col :span="12"> | <el-col :span="12"> | ||||
<el-form-item label="横坐标"> | <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-form-item> | ||||
</el-col> | </el-col> | ||||
<el-col :span="12"> | <el-col :span="12"> | ||||
<el-form-item label="纵坐标"> | <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-form-item> | ||||
</el-col> | </el-col> | ||||
</el-row> | </el-row> | ||||
@@ -50,60 +34,40 @@ | |||||
<el-row> | <el-row> | ||||
<el-col :span="12"> | <el-col :span="12"> | ||||
<el-form-item label="字号"> | <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-form-item> | ||||
</el-col> | </el-col> | ||||
<el-col :span="12"> | <el-col :span="12"> | ||||
<el-form-item label="加粗"> | <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-form-item> | ||||
</el-col> | </el-col> | ||||
</el-row> | </el-row> | ||||
<el-row> | <el-row> | ||||
<el-col :span="8"> | <el-col :span="8"> | ||||
<el-form-item label="字体颜色"> | <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-form-item> | ||||
</el-col> | </el-col> | ||||
<el-col :span="8"> | <el-col :span="8"> | ||||
<el-form-item label="边框颜色"> | <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-form-item> | ||||
</el-col> | </el-col> | ||||
<el-col :span="8"> | <el-col :span="8"> | ||||
<el-form-item label="条码值"> | <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-form-item> | ||||
</el-col> | </el-col> | ||||
</el-row> | </el-row> | ||||
<el-row> | <el-row> | ||||
<el-form-item label="对齐方式"> | <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="'left'">左对齐</el-radio> | ||||
<el-radio :label="'center'">居中</el-radio> | <el-radio :label="'center'">居中</el-radio> | ||||
<el-radio :label="'right'">右对齐</el-radio> | <el-radio :label="'right'">右对齐</el-radio> | ||||
@@ -113,50 +77,31 @@ | |||||
<el-row> | <el-row> | ||||
<el-col :span="12"> | <el-col :span="12"> | ||||
<el-form-item label="条码类型"> | <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-option v-for="val in codeTypeArray" :key="val" :label="val" :value="val" /> | ||||
</el-select> | </el-select> | ||||
</el-form-item> | </el-form-item> | ||||
</el-col> | </el-col> | ||||
<el-col :span="12"> | <el-col :span="12"> | ||||
<el-form-item label="打印类型"> | <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-select> | ||||
</el-form-item> | </el-form-item> | ||||
</el-col> | </el-col> | ||||
<el-col :span="12"> | <el-col :span="12"> | ||||
<el-form-item label="高度自动"> | <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-form-item> | ||||
</el-col> | </el-col> | ||||
<el-col :span="12"> | <el-col :span="12"> | ||||
<el-form-item label="下边距"> | <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-form-item> | ||||
</el-col> | </el-col> | ||||
</el-row> | </el-row> | ||||
@@ -19,7 +19,7 @@ import { | |||||
Form, | Form, | ||||
FormItem, | FormItem, | ||||
Tag, | Tag, | ||||
ColorPicker, | |||||
ColorPicker | |||||
} from 'element-ui'; | } from 'element-ui'; | ||||
import './assets/style/index.scss' | import './assets/style/index.scss' | ||||
// LODOP打印服务 | // LODOP打印服务 | ||||
@@ -7,5 +7,5 @@ module.exports = { | |||||
// 模板来源 | // 模板来源 | ||||
template: 'example/index.html', | template: 'example/index.html', | ||||
}, | }, | ||||
} | |||||
}, | |||||
} | } |