| 作成者 | SHA1 | メッセージ | 日付 |
|---|---|---|---|
|
|
c214cededd | upload | 1年前 |
|
|
d8492457ac | upload | 1年前 |
|
|
74c58e3bee | upload | 1年前 |
|
|
22abb9859a | upload | 1年前 |
|
|
b47e331c90 | upload | 1年前 |
|
|
34cb56f870 | upload | 1年前 |
|
|
1bfd30a5d5 | upload | 1年前 |
|
|
d5c5d2ff21 | upload | 1年前 |
|
|
133f3f3aee | 1 | 1年前 |
|
|
60a691e142 | upload | 1年前 |
|
|
a0ecc32ab2 | upload | 1年前 |
|
|
b397af19e5 | upload | 1年前 |
|
|
04d4e75dc1 | upload | 1年前 |
| @@ -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', | |||
| }, | |||
| } | |||
| }, | |||
| } | |||