瀏覽代碼

upload

release
HolyKnightIX 6 月之前
父節點
當前提交
b397af19e5
共有 4 個檔案被更改,包括 222 行新增87 行删除
  1. +1
    -1
      .env.production
  2. +67
    -15
      example/page/designer.vue
  3. +153
    -70
      example/page/index.vue
  4. +1
    -1
      package.json

+ 1
- 1
.env.production 查看文件

@@ -1,2 +1,2 @@
# .env.test
VUE_APP_BASE_API=https://api.test.com
VUE_APP_BASE_API=https://admin.malls.iformall.com/api

+ 67
- 15
example/page/designer.vue 查看文件

@@ -2,11 +2,12 @@
<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: '',
tenantId: '',
printData: [],
value: {
title: 'demo',
@@ -16,28 +17,79 @@ export default {
pageHeight: 550,
tempItems: [],
},
widgets: OutStockOptions,
widgets: [],
}
},

created() {
this.index = this.$route.query.index
this.printData = this.$route.query.printData
try {
this.value = this.printData
this.widgets = OutStockOptions
} catch (err) {
console.error(err)
}
},
methods: {
handleSave(data) {
console.log(data, 'data')
this.$router.back()
const obj = {
id: data.id,
tenantId: this.tenantId,
type: data.type,
title: data.title,
width: data.width,
height: data.height,
pageWidth: data.pageWidth,
pageHeight: data.pageHeight,
tempItems: data.tempItems,
}
console.log(obj, 'handleSave')
this.addNewModel(obj)
},

// 手动初始话模板数据
initTemp() {
this.$refs.printDesigner.initTemp(this.value, this.widgets)
},

addNewModel(data) {
this.$axios.post(baseUrl + "/print/saveTemplates", 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() {
const url = baseUrl + "/print/printDatas?type=2"
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);
});
}
},

created() {
this.printData = this.$route.query.printData
this.tenantId = this.$route.query.tenantId
try {
this.value = this.printData
this.getWidgets(this.value.type)
} catch (err) {
console.error(err)
}
},
}


+ 153
- 70
example/page/index.vue 查看文件

@@ -1,31 +1,41 @@
<template>
<div class="box">
<div class="title">打印模板设计器</div>
<div class="title">ID:{{ tenantId }}</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"></el-input>
<el-input v-model="searchForm.name" clearable></el-input>
</el-form-item>

<el-form-item label="模板类型" prop="type">
<el-select v-model="searchForm.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="模板类型">
<el-table-column label="模板类型">
<template slot-scope="scope">
<span>{{ getType(scope.row.type) }}</span>
</template>
</el-table-column>
<el-table-column label="模板状态">
<template slot-scope="scope">
<span>{{ scope.row.type == 1 ? '出库单' : '入库单' }}</span>
<span>{{ getIsDel(scope.row.isDel) }}</span>
</template>
</el-table-column> -->
</el-table-column>
<el-table-column label="模板宽高">
<template slot-scope="scope">
<span>{{ scope.row.width + ' * ' + scope.row.height }}</span>
@@ -41,10 +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 type="text" size="mini" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
@@ -53,13 +65,12 @@
<el-form-item label="模板名称" prop="title">
<el-input v-model="form.title"></el-input>
</el-form-item>
<!-- <el-form-item label="模板类型" prop="type">
<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>
<!-- <el-form-item label="模板宽度" prop="width">
<el-input v-model="form.width"></el-input>
</el-form-item>
<el-form-item label="模板高度" prop="height">
@@ -70,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>
@@ -135,19 +146,24 @@ export default {
typeArr: [],
searchForm: {
name: '',
type: 2,
type: '',
isDel: ''
},
isDelArr: [
{ name: "正常", id: 0 },
{ name: "已删除", id: 1 },
],
form: {
title: '',
type: '',
width: '',
height: '',
pageWidth: '',
pageHeight: '',
tempItems: [],
pageHeight: ''
},
rules: {
title: { required: true, message: '请输入模板名称' },
// type: { required: true, message: '请选择模板类型' },
type: { required: true, message: '请选择模板类型' },
width: { required: true, message: '请输入模板宽度' },
height: { required: true, message: '请输入模板高度' },
pageWidth: { required: true, message: '请输入纸张宽度' },
@@ -170,41 +186,119 @@ export default {

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) {
this.$lodop.print(row)
} else {
this.$message.error("空模板无法打印,请先点击设计添加模板数据!")
}
},

// 设计
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) {
console.log(this.$message)
if (row.default) {
this.$message.error('默认模板无法删除!')
} else {
this.$confirm('删除该模板?, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
handleDelete(row) {
console.log(row, 'row')
this.$confirm('删除该模板?, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.deleteOrRecover(row, 1)
}).catch(() => {

}).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(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) {
this.tempList.push(row)
const data = {
id: row.id
}
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("新增失败!")
});
},

// 新增
@@ -215,45 +309,32 @@ export default {
savaTemp() {
this.$refs.form.validate((valid) => {
if (valid) {
this.addNewModel(this.form)
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)
} else {
this.$confirm('确认直接打印吗?', '确认信息')
.then((isPass) => {
if (isPass) {
this.$lodop.print(this.tempList[this.printForm.tempIndex], printData)
}
})
.catch((err) => {
console.log(err)
})
const data = {
tenantId: this.tenantId,
title: this.form.title,
type: this.form.type
}
this.addNewModel(data)
this.visible = false
}
})
},

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.$message.error("新增失败!")
}
})
.catch(err => {
console.error(err);
this.$message.error("新增失败!")
});
},

getData() {
@@ -274,7 +355,8 @@ export default {

getList() {
const url = baseUrl +
"/print/printTemplates?isDel=0" +
"/print/printTemplates?isDel=" +
this.searchForm.isDel +
"&name=" +
this.searchForm.name +
"&type=" +
@@ -286,6 +368,7 @@ export default {
console.log(res, 'res')
const arr = []
res.data.data.forEach(item => {
item.contentJson.isDel = item.isDel
arr.push(item.contentJson)
});
this.tempList = arr


+ 1
- 1
package.json 查看文件

@@ -11,7 +11,7 @@
"author": "liuxia",
"scripts": {
"dev": "vue-cli-service serve",
"build:test": "vue-cli-service build --mode development",
"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"
},


Loading…
取消
儲存