| Autor | SHA1 | Wiadomość | Data |
|---|---|---|---|
|
|
c214cededd | upload | 1 rok temu |
|
|
d8492457ac | upload | 1 rok temu |
|
|
74c58e3bee | upload | 1 rok temu |
|
|
22abb9859a | upload | 1 rok temu |
|
|
b47e331c90 | upload | 1 rok temu |
|
|
34cb56f870 | upload | 1 rok temu |
|
|
1bfd30a5d5 | upload | 1 rok temu |
|
|
d5c5d2ff21 | upload | 1 rok temu |
|
|
133f3f3aee | 1 | 1 rok temu |
|
|
60a691e142 | upload | 1 rok temu |
|
|
a0ecc32ab2 | upload | 1 rok temu |
|
|
b397af19e5 | upload | 1 rok temu |
|
|
04d4e75dc1 | upload | 1 rok temu |
| @@ -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', | ||||
| }, | }, | ||||
| } | |||||
| }, | |||||
| } | } | ||||