H5配置页面
parent
0a7e873c66
commit
8a88401c01
|
|
@ -13,6 +13,10 @@ export default {
|
|||
printTemplatePage(data) {
|
||||
return request('page', data, 'get')
|
||||
},
|
||||
// 获取打印模板列表
|
||||
printTemplateList(data) {
|
||||
return request('list', data, 'get')
|
||||
},
|
||||
// 提交打印模板表单 edit为true时为编辑，默认为新增
|
||||
printTemplateSubmitForm(data, edit = false) {
|
||||
return request(edit ? 'edit' : 'add', data)
|
||||
|
|
@ -24,5 +28,6 @@ export default {
|
|||
// 获取打印模板详情
|
||||
printTemplateDetail(data) {
|
||||
return request('detail', data, 'get')
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,36 @@
|
|||
import { baseRequest } from '@/utils/request'
|
||||
|
||||
const request = (url, ...arg) => baseRequest(`/print/records/` + url, ...arg)
|
||||
|
||||
/**
|
||||
* 标签打印记录Api接口管理器
|
||||
*
|
||||
* @author luojun
|
||||
* @date 2024/09/16 14:49
|
||||
**/
|
||||
export default {
|
||||
// 获取标签打印记录分页
|
||||
printRecordsPage(data) {
|
||||
return request('page', data, 'get')
|
||||
},
|
||||
// 提交标签打印记录表单 edit为true时为编辑，默认为新增
|
||||
printRecordsSubmitForm(data, edit = false) {
|
||||
return request(edit ? 'edit' : 'add', data)
|
||||
},
|
||||
// 删除标签打印记录
|
||||
printRecordsDelete(data) {
|
||||
return request('delete', data)
|
||||
},
|
||||
// 获取标签打印记录详情
|
||||
printRecordsDetail(data) {
|
||||
return request('detail', data, 'get')
|
||||
},
|
||||
// 打印标签并保存打印记录
|
||||
printRecordsPrint(data) {
|
||||
return request('print', data, 'post')
|
||||
},
|
||||
// 更具标签打印记录 id
|
||||
printTemplateGetProductCode(data) {
|
||||
return request('getProductCode', data, 'post')
|
||||
},
|
||||
}
|
||||
|
|
@ -13,6 +13,10 @@ export default {
|
|||
produceBarcodeHistoryPage(data) {
|
||||
return request('page', data, 'get')
|
||||
},
|
||||
// 获取产品条码历史记录列表
|
||||
produceBarcodeHistoryList(data) {
|
||||
return request('list', data, 'get')
|
||||
},
|
||||
// 提交产品条码历史记录表单 edit为true时为编辑，默认为新增
|
||||
produceBarcodeHistorySubmitForm(data, edit = false) {
|
||||
return request(edit ? 'edit' : 'add', data)
|
||||
|
|
|
|||
|
|
@ -89,6 +89,7 @@ export default function useFormHandler(formItems, api, backRouter) {
|
|||
|
||||
// 填充表单数据
|
||||
const populateFormData = (data) => {
|
||||
console.log(formData, 'formData')
|
||||
Object.keys(formData).forEach((key) => {
|
||||
if (data[key] !== undefined) formData[key] = data[key]
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,120 +1,188 @@
|
|||
<template>
|
||||
<div class="wrap flex">
|
||||
<div class="sider">
|
||||
<iphone></iphone>
|
||||
<iphone :info="viewinfo"></iphone>
|
||||
</div>
|
||||
<div class="content">
|
||||
<a-tabs v-model:activeKey="activeKey" type="card">
|
||||
<a-tab-pane key="1" tab="基本配置">Content of Tab Pane 1</a-tab-pane>
|
||||
<a-tab-pane key="2" tab="轮播图" force-render>
|
||||
<a-upload
|
||||
v-model:file-list="fileList"
|
||||
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
|
||||
list-type="picture-card"
|
||||
@preview="handlePreview"
|
||||
>
|
||||
<div v-if="fileList.length < 8">
|
||||
<plus-outlined />
|
||||
<div style="margin-top: 8px">Upload</div>
|
||||
</div>
|
||||
</a-upload>
|
||||
<a-modal :open="previewVisible" :title="previewTitle" :footer="null" @cancel="handleCancel">
|
||||
<img alt="example" style="width: 100%" :src="previewImage" />
|
||||
</a-modal>
|
||||
<a-tab-pane key="1" tab="基本配置">
|
||||
<a-card title="页面配置">
|
||||
<a-form>
|
||||
<a-row>
|
||||
<a-col :span="6">
|
||||
<a-form-item label="LOGO">
|
||||
<a-upload
|
||||
v-model:file-list="logoFileList"
|
||||
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
|
||||
list-type="picture"
|
||||
@preview="handlePreview"
|
||||
:max-count="1"
|
||||
>
|
||||
<a-button>
|
||||
<upload-outlined></upload-outlined>
|
||||
upload
|
||||
</a-button>
|
||||
</a-upload>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-form-item label="页面背景图">
|
||||
<a-upload
|
||||
v-model:file-list="bgFileList"
|
||||
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
|
||||
list-type="picture"
|
||||
@preview="handlePreview"
|
||||
:max-count="1"
|
||||
>
|
||||
<a-button>
|
||||
<upload-outlined></upload-outlined>
|
||||
upload
|
||||
</a-button>
|
||||
</a-upload>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="是否展示产品信息">
|
||||
<a-switch />
|
||||
</a-form-item>
|
||||
<a-form-item label="是否展示防伪码查询结果">
|
||||
<a-switch />
|
||||
</a-form-item>
|
||||
<a-form-item label="是否展示溯源记录">
|
||||
<a-switch />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</a-card>
|
||||
<a-card class="mt-4" title="底部导航">
|
||||
<a-form>
|
||||
<a-row>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="是否展示">
|
||||
<a-switch />
|
||||
</a-form-item>
|
||||
<a-form-item label="电话：">
|
||||
<a-input></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="官方网址：">
|
||||
<a-input></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="地址：">
|
||||
<a-input></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-form-item label="左侧LOGO图">
|
||||
<a-upload
|
||||
v-model:file-list="btLogoFileList"
|
||||
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
|
||||
list-type="picture"
|
||||
@preview="handlePreview"
|
||||
:max-count="1"
|
||||
>
|
||||
<a-button>
|
||||
<upload-outlined></upload-outlined>
|
||||
upload
|
||||
</a-button>
|
||||
</a-upload>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-form-item label="公众号二维码">
|
||||
<a-upload
|
||||
v-model:file-list="qrFileList"
|
||||
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
|
||||
list-type="picture"
|
||||
@preview="handlePreview"
|
||||
:max-count="1"
|
||||
>
|
||||
<a-button>
|
||||
<upload-outlined></upload-outlined>
|
||||
upload
|
||||
</a-button>
|
||||
</a-upload>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</a-card>
|
||||
<a-card class="mt-4" title="轮播图"
|
||||
><a-form>
|
||||
<a-row>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="是否展示">
|
||||
<a-switch />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-form-item label="轮播图">
|
||||
<a-upload
|
||||
v-model:file-list="arrFileList"
|
||||
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
|
||||
list-type="picture"
|
||||
@preview="handlePreview"
|
||||
:max-count="5"
|
||||
>
|
||||
<a-button>
|
||||
<upload-outlined></upload-outlined>
|
||||
upload
|
||||
</a-button>
|
||||
</a-upload>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</a-card>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="3" tab="产品信息">
|
||||
<a-row :gutter="20">
|
||||
<a-col :span="18">
|
||||
<XnEditor v-model="viewInfo.productInfo"></XnEditor>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<div class="fields">
|
||||
<p class="fields-item">${条码}</p>
|
||||
<p class="fields-item">${条码}</p>
|
||||
<p class="fields-item">${条码}</p>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="4" tab="防伪码查询配置">
|
||||
<a-row :gutter="20">
|
||||
<a-col :span="18">
|
||||
<XnEditor></XnEditor>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<div class="fields">
|
||||
<p class="fields-item">${条码}</p>
|
||||
<p class="fields-item">${条码}</p>
|
||||
<p class="fields-item">${条码}</p>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="3" tab="产品验证正防伪信息">Content of Tab Pane 3</a-tab-pane>
|
||||
<a-tab-pane key="4" tab="溯源流程">Content of Tab Pane 3</a-tab-pane>
|
||||
<a-tab-pane key="5" tab="产品介绍">
|
||||
<XnEditor></XnEditor>
|
||||
</a-tab-pane>
|
||||
|
||||
<a-tab-pane key="6" tab="超链接">Content of Tab Pane 3</a-tab-pane>
|
||||
</a-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// const props = defineProps({})
|
||||
|
||||
// const emit = defineEmits()
|
||||
|
||||
// 生命周期钩子
|
||||
import Iphone from '@/views/productionBusiness/basicData/brand/counterfeiting/iphone.vue'
|
||||
|
||||
const siderStyle = {
|
||||
color: '#fff',
|
||||
backgroundColor: '#fff',
|
||||
width: '350'
|
||||
}
|
||||
const logoFileList = ref([])
|
||||
const bgFileList = ref([])
|
||||
const btLogoFileList = ref([])
|
||||
const qrFileList = ref([])
|
||||
const arrFileList = ref([])
|
||||
|
||||
let activeKey = ref('5')
|
||||
|
||||
onMounted(() => {
|
||||
console.log('Component mounted')
|
||||
// TODO: Add your onMounted code here
|
||||
let viewInfo = ref({
|
||||
productInfo: ''
|
||||
})
|
||||
|
||||
onUpdated(() => {
|
||||
console.log('Component updated')
|
||||
// TODO: Add your onUpdated code here
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
console.log('Component unmounted')
|
||||
// TODO: Add your onUnmounted code here
|
||||
})
|
||||
|
||||
// watch(() => {}, () => {})
|
||||
function getBase64(file) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader()
|
||||
reader.readAsDataURL(file)
|
||||
reader.onload = () => resolve(reader.result)
|
||||
reader.onerror = (error) => reject(error)
|
||||
})
|
||||
}
|
||||
const previewVisible = ref(false)
|
||||
const previewImage = ref('')
|
||||
const previewTitle = ref('')
|
||||
const fileList = ref([
|
||||
{
|
||||
uid: '-1',
|
||||
name: 'image.png',
|
||||
status: 'done',
|
||||
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
|
||||
},
|
||||
{
|
||||
uid: '-2',
|
||||
name: 'image.png',
|
||||
status: 'done',
|
||||
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
|
||||
},
|
||||
{
|
||||
uid: '-3',
|
||||
name: 'image.png',
|
||||
status: 'done',
|
||||
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
|
||||
},
|
||||
{
|
||||
uid: '-4',
|
||||
name: 'image.png',
|
||||
status: 'done',
|
||||
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
|
||||
},
|
||||
])
|
||||
const handleCancel = () => {
|
||||
previewVisible.value = false
|
||||
previewTitle.value = ''
|
||||
}
|
||||
const handlePreview = async (file) => {
|
||||
if (!file.url && !file.preview) {
|
||||
file.preview = await getBase64(file.originFileObj)
|
||||
}
|
||||
previewImage.value = file.url || file.preview
|
||||
previewVisible.value = true
|
||||
previewTitle.value = file.name || file.url.substring(file.url.lastIndexOf('/') + 1)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
|
@ -133,4 +201,26 @@
|
|||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.fields {
|
||||
border: 1px solid #dcdee2;
|
||||
padding: 15px 0;
|
||||
border-radius: 5px;
|
||||
height: 40vh;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
|
||||
&-item {
|
||||
cursor: pointer;
|
||||
height: 50px;
|
||||
margin: 0;
|
||||
line-height: 50px;
|
||||
padding: 0 20px;
|
||||
font-size: 16px;
|
||||
|
||||
&:hover {
|
||||
background: #f5f7fa;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -11,9 +11,7 @@
|
|||
</div>
|
||||
<div class="container-box">
|
||||
<h3 class="container-box-title">产品信息</h3>
|
||||
<p class="container-box-desc">产品名称：莫个葡萄红酒</p>
|
||||
<p class="container-box-desc">产品名称：莫个葡萄红酒</p>
|
||||
<p class="container-box-desc">产品名称：莫个葡萄红酒</p>
|
||||
<p class="container-box-desc">产品名称：</p>
|
||||
</div>
|
||||
<div class="container-box">
|
||||
<h3 class="container-box-title">防伪查询结果</h3>
|
||||
|
|
@ -21,9 +19,6 @@
|
|||
</div>
|
||||
<div class="container-box">
|
||||
<h3 class="container-box-title">溯源记录</h3>
|
||||
<p class="container-box-desc">产品名称：莫个葡萄红酒</p>
|
||||
<p class="container-box-desc">产品名称：莫个葡萄红酒</p>
|
||||
<p class="container-box-desc">产品名称：莫个葡萄红酒</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -31,7 +26,12 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
// const props = defineProps({})
|
||||
const props = defineProps({
|
||||
info: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
})
|
||||
|
||||
// const emit = defineEmits()
|
||||
|
||||
|
|
|
|||
|
|
@ -101,19 +101,7 @@
|
|||
})
|
||||
}
|
||||
|
||||
const {
|
||||
searchFormState,
|
||||
tableRef,
|
||||
selectedRowKeys,
|
||||
columns,
|
||||
loadData,
|
||||
reset,
|
||||
deleteBatchRecords,
|
||||
options,
|
||||
searchFormRef,
|
||||
navigateTo,
|
||||
deleteRecord
|
||||
} = useTableManagement(
|
||||
const { searchFormState, tableRef, columns, loadData, reset, options, searchFormRef } = useTableManagement(
|
||||
{
|
||||
page: produceBarcodeHistoryApi.produceBarcodeHistoryPage
|
||||
},
|
||||
|
|
|
|||
|
|
@ -0,0 +1,182 @@
|
|||
<template>
|
||||
<a-modal title="打印标签" :width="900" :visible="visible" :destroy-on-close="true" @close="onClose">
|
||||
<DynamicForm :formItems="drawerForm" :model="formData" :rules="formRules" ref="formRef1" />
|
||||
<template #footer>
|
||||
<a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
|
||||
<a-button type="primary" @click="onSubmitForm">保存</a-button>
|
||||
</template>
|
||||
|
||||
<div>
|
||||
<div style="display: none" id="hiprint-printTemplate"></div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup name="productionOrganizationForm">
|
||||
import { cloneDeep } from 'lodash-es'
|
||||
import printApi from '@/api/print/printApi'
|
||||
import materialCategoryApi from '@/api/base/material/materialCategoryApi'
|
||||
import { drawerForm, formRules } from '@/views/productionBusiness/labelPrinting/materialPrint/formFields/drawerForm'
|
||||
import useFormHandler from '@/hook/useFormHandler'
|
||||
import materialApi from '@/api/base/material/materialApi'
|
||||
import unitApi from '@/api/base/unit/unitApi'
|
||||
import productCodePackageConfigApi from '@/api/production/productcode/productCodePackageConfigApi'
|
||||
import { newHiprintPrintTemplate } from '@/views/productionBusiness/labelPrinting/template/detail/utils/template-helper'
|
||||
import { getCurrentInstance } from 'vue'
|
||||
import printRecordsApi from '@/api/print/printRecordsApi'
|
||||
|
||||
// 抽屉状态
|
||||
const visible = ref(false)
|
||||
const emit = defineEmits({ successful: null })
|
||||
const formRef1 = ref(null)
|
||||
let recordData = reactive({})
|
||||
let hiprintTemplate
|
||||
const TEMPLATE_KEY = getCurrentInstance().type.name // 存储模板对象的 key
|
||||
let templateRef = ref('')
|
||||
|
||||
// 打开抽屉
|
||||
const onOpen = async (record) => {
|
||||
visible.value = true
|
||||
formRules.value = [formRef1.value]
|
||||
|
||||
if (record) {
|
||||
recordData = cloneDeep(record)
|
||||
fetchData().then(() => {
|
||||
populateFormData(recordData)
|
||||
})
|
||||
} else {
|
||||
fetchData()
|
||||
recordData = {}
|
||||
}
|
||||
|
||||
// 打印模版
|
||||
const printTemplateList = await printApi.printTemplateList()
|
||||
|
||||
// 包装关系
|
||||
const materialPackageData = await materialApi.materialPackageData({
|
||||
materialId: record.id
|
||||
})
|
||||
|
||||
// 基本单位
|
||||
const unitList = await unitApi.sysUnitList({
|
||||
groupId: record.unitGroupId
|
||||
})
|
||||
|
||||
// 码包配置
|
||||
const productCodePackageConfigListData = await productCodePackageConfigApi.productCodePackageConfigList()
|
||||
|
||||
drawerForm.forEach((item) => {
|
||||
if (item.name === 'templateId') {
|
||||
item.attrs.options = printTemplateList || []
|
||||
item.attrs.onChange = (value) => {
|
||||
templateRef.value = JSON.parse(printTemplateList.filter((item) => item.id === value)[0].templateData)
|
||||
}
|
||||
}
|
||||
|
||||
if (item.name === 'materialPackageId') {
|
||||
item.attrs.options = materialPackageData.filter((item) => item.enabledState === 'ENABLE')
|
||||
item.attrs.onChange = (value) => {
|
||||
// 获取当前选择的单位
|
||||
const materialPackage = materialPackageData.filter((item) => item.id === value)[0]
|
||||
const unit = unitList.filter((item) => item.id === formData.unitId)[0]
|
||||
formData.printNumber = (parseInt(materialPackage.unitRate) * formData.harvestNumber) / unit.rate
|
||||
}
|
||||
}
|
||||
|
||||
if (item.name === 'unitId') {
|
||||
item.attrs.options = unitList
|
||||
item.attrs.onChange = (value) => {
|
||||
// 获取当前选择的单位
|
||||
const unit = unitList.filter((item) => item.id === value)[0]
|
||||
formData.printNumber = unit.rate * formData.harvestNumber
|
||||
}
|
||||
}
|
||||
|
||||
if (item.name === 'packageConfigId') {
|
||||
item.attrs.options = productCodePackageConfigListData
|
||||
}
|
||||
|
||||
if (item.name === 'harvestNumber') {
|
||||
item.attrs.onChange = (value) => {
|
||||
formData.printNumber = formData.harvestNumber
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
materialCategoryApi.materialCategoryTree().then((res) => {
|
||||
drawerForm.forEach((item) => {
|
||||
if (item.name === 'templateId') {
|
||||
item.attrs.treeData = res
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
// 关闭抽屉
|
||||
const onClose = () => {
|
||||
visible.value = false
|
||||
}
|
||||
// 默认要校验的refresh
|
||||
// 验证并提交数据
|
||||
const onSubmitForm = () => {
|
||||
// 打印标签先生成打印模版
|
||||
/*onSubmit({
|
||||
isEnable: true,
|
||||
id: recordData.id
|
||||
}).then(() => {
|
||||
onClose()
|
||||
emit('successful')
|
||||
})*/
|
||||
/*buildDesigner()
|
||||
|
||||
// 参数: 打印时设置 左偏移量，上偏移量
|
||||
let options = { leftOffset: -1, topOffset: -1 }
|
||||
// 扩展
|
||||
let ext = {
|
||||
callback: () => {
|
||||
console.log('浏览器打印窗口已打开')
|
||||
}
|
||||
}
|
||||
// 调用浏览器打印
|
||||
hiprintTemplate.print(
|
||||
{
|
||||
name: '1231231',
|
||||
qrCode: '1231'
|
||||
},
|
||||
options,
|
||||
ext
|
||||
)*/
|
||||
printRecordsApi
|
||||
.printRecordsPrint({
|
||||
...formData,
|
||||
materialId: recordData.id
|
||||
})
|
||||
.then((res) => {
|
||||
console.log(res)
|
||||
})
|
||||
}
|
||||
|
||||
// 初始化模板
|
||||
const buildDesigner = () => {
|
||||
// eslint-disable-next-line no-undef
|
||||
$('#hiprint-printTemplate').empty() // 先清空, 避免重复构建
|
||||
// 注意事项: 模板json(object)
|
||||
// 如果使用 vue ref创建的模板json, 需要使用 .value 获取 (确保内部能够使用 object.key 拿到对应数据就行)
|
||||
hiprintTemplate = newHiprintPrintTemplate(TEMPLATE_KEY, {
|
||||
template: templateRef.value, // 模板json(object)
|
||||
settingContainer: '#PrintElementOptionSetting' // 元素参数容器
|
||||
})
|
||||
// hiprintTemplate.bindData(recordData)
|
||||
|
||||
// 构建 并填充到 容器中
|
||||
hiprintTemplate.design('#hiprint-printTemplate')
|
||||
console.log(hiprintTemplate)
|
||||
}
|
||||
|
||||
let { formData, onSubmit, populateFormData, fetchData } = useFormHandler([...drawerForm], {
|
||||
submitForm: materialCategoryApi.materialCategorySubmitForm
|
||||
})
|
||||
// 抛出函数
|
||||
defineExpose({
|
||||
onOpen
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,157 @@
|
|||
import tool from '@/utils/tool'
|
||||
import { required } from '@/utils/formRules'
|
||||
|
||||
export const drawerForm = reactive([
|
||||
{
|
||||
label: '打印模版：',
|
||||
name: 'templateId',
|
||||
type: 'a-select',
|
||||
span: 8,
|
||||
attrs: {
|
||||
placeholder: '请选择打印模版',
|
||||
allowClear: true,
|
||||
fieldNames: {
|
||||
children: 'children',
|
||||
label: 'name',
|
||||
value: 'id'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '收货数量：',
|
||||
name: 'harvestNumber',
|
||||
type: 'a-input',
|
||||
span: 8,
|
||||
attrs: {
|
||||
placeholder: '请输入收货数量',
|
||||
allowClear: true
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '单位：',
|
||||
name: 'unitId',
|
||||
type: 'a-select',
|
||||
span: 8,
|
||||
attrs: {
|
||||
placeholder: '请选择单位',
|
||||
fieldNames: {
|
||||
children: 'children',
|
||||
label: 'name',
|
||||
value: 'id'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '标签数（张）：',
|
||||
name: 'printNumber',
|
||||
type: 'a-input-number',
|
||||
span: 8,
|
||||
attrs: {
|
||||
placeholder: '请输入标签数',
|
||||
treeData: [],
|
||||
fieldNames: {
|
||||
children: 'children',
|
||||
label: 'name',
|
||||
value: 'id'
|
||||
},
|
||||
disabled: true
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '标准包装数量：',
|
||||
name: 'standardPackageNumber',
|
||||
type: 'a-input-number',
|
||||
span: 8,
|
||||
attrs: {
|
||||
placeholder: '请输入标准包装数量',
|
||||
treeData: [],
|
||||
fieldNames: {
|
||||
children: 'children',
|
||||
label: 'name',
|
||||
value: 'id'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '包装：',
|
||||
name: 'materialPackageId',
|
||||
type: 'a-select',
|
||||
span: 8,
|
||||
attrs: {
|
||||
placeholder: '请选择包装',
|
||||
treeData: [],
|
||||
fieldNames: {
|
||||
children: 'children',
|
||||
label: 'name',
|
||||
value: 'id'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '包装单位：',
|
||||
name: 'packageUnit',
|
||||
type: 'a-tree-select',
|
||||
span: 8,
|
||||
attrs: {
|
||||
placeholder: '请选择包装单位',
|
||||
treeData: [],
|
||||
fieldNames: {
|
||||
children: 'children',
|
||||
label: 'name',
|
||||
value: 'id'
|
||||
},
|
||||
disabled: true
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '二维码规则：',
|
||||
name: 'packageConfigId',
|
||||
type: 'a-select',
|
||||
span: 8,
|
||||
attrs: {
|
||||
placeholder: '请选择二维码规则',
|
||||
fieldNames: {
|
||||
children: 'children',
|
||||
label: 'name',
|
||||
value: 'id'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '生产日期：',
|
||||
name: 'productionTime',
|
||||
type: 'a-date-picker',
|
||||
span: 8,
|
||||
attrs: {
|
||||
placeholder: '请输入生产日期',
|
||||
allowClear: true,
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss'
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '失效日期：',
|
||||
name: 'failureTime',
|
||||
type: 'a-date-picker',
|
||||
span: 8,
|
||||
attrs: {
|
||||
placeholder: '请输入失效日期',
|
||||
allowClear: true,
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss'
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
label: '批次：',
|
||||
name: 'batch',
|
||||
type: 'a-input',
|
||||
span: 8,
|
||||
attrs: {
|
||||
placeholder: '请输入批次'
|
||||
}
|
||||
}
|
||||
])
|
||||
|
||||
export const formRules = {
|
||||
name: [required('请输入名称')],
|
||||
parentId: [required('请选择上级物料')]
|
||||
}
|
||||
|
|
@ -13,7 +13,6 @@
|
|||
ref="dynamicTreeRef"
|
||||
treeTitle="物料分类"
|
||||
:tableRef="tableRef"
|
||||
:openFormRef="materialCategoryFormRef"
|
||||
:apiModel="{
|
||||
getTree: materialCategoryApi.materialCategoryTree,
|
||||
delTree: materialCategoryApi.materialCategoryDelete
|
||||
|
|
@ -55,7 +54,7 @@
|
|||
</template>
|
||||
<template v-if="column.dataIndex === 'action'">
|
||||
<a-space>
|
||||
<a> 打印标签 </a>
|
||||
<a @click="handleOpen(record)"> 打印标签 </a>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
|
|
@ -64,33 +63,25 @@
|
|||
</a-row>
|
||||
</a-card>
|
||||
|
||||
<material-category-form ref="materialCategoryFormRef" @successful="successful"></material-category-form>
|
||||
<!-- <material-category-form ref="materialCategoryFormRef" @successful="successful"></material-category-form>-->
|
||||
<material-print-form ref="materialPrintFormRef"></material-print-form>
|
||||
</template>
|
||||
|
||||
<script setup name="materiel">
|
||||
import materialApi from '@/api/base/material/materialApi'
|
||||
import materialCategoryApi from '@/api/base/material/materialCategoryApi'
|
||||
|
||||
import MaterialCategoryForm from '@/views/productionBusiness/basicData/materiel/detail/materialCategoryForm.vue'
|
||||
// import MaterialCategoryForm from '@/views/productionBusiness/basicData/materiel/detail/materialCategoryForm.vue'
|
||||
import MaterialPrintForm from '@/views/productionBusiness/labelPrinting/materialPrint/detail/materialPrintForm.vue'
|
||||
|
||||
import { useTableManagement } from '@/hook/useTableManagement'
|
||||
import { materielColumn } from '@/views/productionBusiness/basicData/materiel/column/materiel-column'
|
||||
import { searchFields } from '@/views/productionBusiness/basicData/materiel/formFields/searchFields'
|
||||
|
||||
const materialCategoryFormRef = ref(null)
|
||||
const materialPrintFormRef = ref(null)
|
||||
const dynamicTreeRef = ref(null)
|
||||
|
||||
const {
|
||||
searchFormState,
|
||||
tableRef,
|
||||
selectedRowKeys,
|
||||
columns,
|
||||
loadData,
|
||||
deleteBatchRecords,
|
||||
options,
|
||||
navigateTo,
|
||||
deleteRecord
|
||||
} = useTableManagement(
|
||||
const { searchFormState, tableRef, columns, loadData, options } = useTableManagement(
|
||||
{
|
||||
page: materialApi.materialPage,
|
||||
delete: materialApi.materialDelete
|
||||
|
|
@ -114,11 +105,8 @@
|
|||
tableRef.value.refresh()
|
||||
}
|
||||
|
||||
const successful = () => {
|
||||
searchFormState.value.categoryId = null
|
||||
tableRef.value.refresh()
|
||||
|
||||
dynamicTreeRef.value.loadTreeData()
|
||||
const handleOpen = (record) => {
|
||||
materialPrintFormRef.value.onOpen(record)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,54 @@
|
|||
export const labelRecords = [
|
||||
{
|
||||
title: '物料名称',
|
||||
dataIndex: 'materialName'
|
||||
},
|
||||
{
|
||||
title: '打印数量',
|
||||
dataIndex: 'printNumber'
|
||||
},
|
||||
{
|
||||
title: '二维码生成规则',
|
||||
dataIndex: 'packageConfigName'
|
||||
},
|
||||
{
|
||||
title: '打印模版',
|
||||
dataIndex: 'templateName'
|
||||
},
|
||||
{
|
||||
title: '生效时间',
|
||||
dataIndex: 'productionTime'
|
||||
},
|
||||
{
|
||||
title: '失效时间',
|
||||
dataIndex: 'productionTime'
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime'
|
||||
}
|
||||
]
|
||||
|
||||
export const labelDetailColumns = [
|
||||
{
|
||||
title: '产码',
|
||||
dataIndex: 'productCode',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '产码类型',
|
||||
dataIndex: 'productCodeType',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
align: 'center',
|
||||
scopedSlots: { customRender: 'action' }
|
||||
}
|
||||
]
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
<template>
|
||||
<a-modal title="打印标签" :width="900" v-model:visible="visible" :destroy-on-close="true" @close="onClose">
|
||||
<DynamicForm :formItems="drawerForm" :model="formData" ref="formRef1" />
|
||||
<template #footer>
|
||||
<a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
|
||||
</template>
|
||||
<a-table :dataSource="dataSource" :columns="labelDetailColumns" :pagination="false">
|
||||
<template #bodyCell="{ record, column, index }">
|
||||
<template v-if="column.dataIndex === 'productCodeType'">
|
||||
{{ $TOOL.dictTypeData('DCGS', record.productCodeType) }}
|
||||
</template>
|
||||
|
||||
<template v-if="column.dataIndex === 'action'">
|
||||
<a @click="handlePrint(record)"> 打印标签 </a>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
|
||||
<div>
|
||||
<div style="display: none" id="hiprint-printTemplate"></div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup name="productionOrganizationForm">
|
||||
import { cloneDeep } from 'lodash-es'
|
||||
import materialCategoryApi from '@/api/base/material/materialCategoryApi'
|
||||
import { drawerForm } from '@/views/productionBusiness/labelPrinting/records/formFields/drawerForm'
|
||||
import useFormHandler from '@/hook/useFormHandler'
|
||||
import materialApi from '@/api/base/material/materialApi'
|
||||
import { labelDetailColumns } from '@/views/productionBusiness/labelPrinting/records/columns'
|
||||
import printRecordsApi from '@/api/print/printRecordsApi'
|
||||
import {getCurrentInstance} from "vue";
|
||||
|
||||
// 抽屉状态
|
||||
const visible = ref(false)
|
||||
const emit = defineEmits({ successful: null })
|
||||
const formRef1 = ref(null)
|
||||
let recordData = reactive({})
|
||||
let dataSource = ref([])
|
||||
let hiprintTemplate
|
||||
const TEMPLATE_KEY = getCurrentInstance().type.name // 存储模板对象的 key
|
||||
let templateRef = ref({})
|
||||
|
||||
// 打开抽屉
|
||||
const onOpen = async (record) => {
|
||||
visible.value = true
|
||||
|
||||
if (record) {
|
||||
recordData = cloneDeep(record)
|
||||
/// 获取打印详情
|
||||
const printRecordsData = await printRecordsApi.printRecordsDetail({
|
||||
id: record.id
|
||||
})
|
||||
// 获取物料的详情
|
||||
const materialData = await materialApi.materialDetail({
|
||||
id: record.materialId
|
||||
})
|
||||
|
||||
const productCodeList = await printRecordsApi.printTemplateGetProductCode({
|
||||
id: recordData.id
|
||||
})
|
||||
|
||||
templateRef.value = JSON.parse(printRecordsData.templateData)
|
||||
|
||||
dataSource.value = productCodeList
|
||||
fetchData().then(() => {
|
||||
populateFormData(materialData)
|
||||
})
|
||||
} else {
|
||||
fetchData()
|
||||
recordData = {}
|
||||
}
|
||||
}
|
||||
// 关闭抽屉
|
||||
const onClose = () => {
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
const handlePrint = (record) => {}
|
||||
|
||||
// 初始化模板
|
||||
const buildDesigner = () => {
|
||||
// eslint-disable-next-line no-undef
|
||||
$('#hiprint-printTemplate').empty() // 先清空, 避免重复构建
|
||||
// 注意事项: 模板json(object)
|
||||
// 如果使用 vue ref创建的模板json, 需要使用 .value 获取 (确保内部能够使用 object.key 拿到对应数据就行)
|
||||
hiprintTemplate = newHiprintPrintTemplate(TEMPLATE_KEY, {
|
||||
template: templateRef.value, // 模板json(object)
|
||||
settingContainer: '#PrintElementOptionSetting' // 元素参数容器
|
||||
})
|
||||
// hiprintTemplate.bindData(recordData)
|
||||
|
||||
// 构建 并填充到 容器中
|
||||
hiprintTemplate.design('#hiprint-printTemplate')
|
||||
console.log(hiprintTemplate)
|
||||
}
|
||||
|
||||
let { formData, onSubmit, populateFormData, fetchData } = useFormHandler([...drawerForm], {
|
||||
submitForm: materialCategoryApi.materialCategorySubmitForm
|
||||
})
|
||||
// 抛出函数
|
||||
defineExpose({
|
||||
onOpen
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import tool from '@/utils/tool'
|
||||
|
||||
export const drawerForm = [
|
||||
{
|
||||
label: '单据号：',
|
||||
name: 'number',
|
||||
type: 'a-input',
|
||||
attrs: {
|
||||
placeholder: '请输入单号',
|
||||
allowClear: true,
|
||||
disabled: true
|
||||
}
|
||||
}]
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<template>
|
||||
<AdvancedSearchForm
|
||||
:formState="searchFormState"
|
||||
:formFields="searchFields"
|
||||
@search="tableRef.refresh()"
|
||||
@reset="tableRef.refresh()"
|
||||
/>
|
||||
|
||||
<a-card :bordered="false" class="mt-4" style="height: 100%">
|
||||
<s-table
|
||||
ref="tableRef"
|
||||
:columns="columns"
|
||||
:data="loadData"
|
||||
bordered
|
||||
:row-key="(record) => record.id"
|
||||
:tool-config="options.toolConfig"
|
||||
:scroll="{
|
||||
x: 100
|
||||
}"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.dataIndex === 'number'">
|
||||
<span style="color: #0d84ff">{{ record.number }}</span>
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'enabledState'">
|
||||
<a-tag color="#87d068" v-if="record.enabledState === 'ENABLE'">启用</a-tag>
|
||||
<a-tag color="#f50" v-if="record.enabledState === 'DISABLED'">停用</a-tag>
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'action'">
|
||||
<a-space>
|
||||
<a
|
||||
@click="handleOpen(record)"
|
||||
>
|
||||
<EyeOutlined />
|
||||
查看
|
||||
</a>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</s-table>
|
||||
</a-card>
|
||||
|
||||
<RecordsDetail ref="RecordsDetailRef"></RecordsDetail>
|
||||
</template>
|
||||
|
||||
<script setup name="brand">
|
||||
import printRecordsApi from '@/api/print/printRecordsApi'
|
||||
import { useTableManagement } from '@/hook/useTableManagement'
|
||||
import { searchFields } from '@/views/productionBusiness/basicData/brand/formFields/searchFields'
|
||||
import { labelRecords } from '@/views/productionBusiness/labelPrinting/records/columns'
|
||||
import RecordsDetail from '@/views/productionBusiness/labelPrinting/records/detail/RecordsDetail.vue'
|
||||
|
||||
const RecordsDetailRef = ref(null)
|
||||
|
||||
const handleOpen = (record) => {
|
||||
RecordsDetailRef.value.onOpen(record)
|
||||
}
|
||||
|
||||
const {
|
||||
searchFormState,
|
||||
tableRef,
|
||||
columns,
|
||||
loadData,
|
||||
options,
|
||||
} = useTableManagement(
|
||||
{
|
||||
page: printRecordsApi.printRecordsPage
|
||||
},
|
||||
labelRecords,
|
||||
['sysBrandEdit', 'sysBrandDelete']
|
||||
)
|
||||
</script>
|
||||
Loading…
Reference in New Issue