8 changed files with 322 additions and 3 deletions
-
6src/api/part/externalLabelTemplate.js
-
2src/api/part/externalPartPicture.js
-
4src/assets/scss/global.scss
-
48src/views/modules/label/printer.vue
-
1src/views/modules/label/record.vue
-
7src/views/modules/part/external.vue
-
3src/views/modules/part/picture/picture.vue
-
254src/views/modules/part/template/labelTemplate.vue
@ -0,0 +1,6 @@ |
|||||
|
import {createAPI} from '../../utils/httpRequest' |
||||
|
|
||||
|
export const queryExternalLabelTemplate = (data) => createAPI('/part/template', 'post', data) |
||||
|
|
||||
|
|
||||
|
export const queryExternalLabelTemplateByPosition = (data) => createAPI('/part/template/position', 'post', data) |
||||
@ -0,0 +1,254 @@ |
|||||
|
<script> |
||||
|
import ElImageViewer from 'element-ui/packages/image/src/image-viewer' |
||||
|
import { |
||||
|
queryExternalLabelTemplate, |
||||
|
queryExternalLabelTemplateByPosition |
||||
|
} from '../../../../api/part/externalLabelTemplate' |
||||
|
import {basePictureList} from '../../../../api/basics/basePicture' |
||||
|
import {removeExternalPartPicture, saveProductExternalPartPicturePart} from '../../../../api/part/externalPartPicture' |
||||
|
|
||||
|
export default { |
||||
|
components:{ |
||||
|
ElImageViewer |
||||
|
}, |
||||
|
name: 'labelTemplate', |
||||
|
props: { |
||||
|
part: { |
||||
|
type: Object, |
||||
|
required: true |
||||
|
}, |
||||
|
height: { |
||||
|
type: Number, |
||||
|
default: 370, |
||||
|
}, |
||||
|
}, |
||||
|
data () { |
||||
|
return { |
||||
|
queryLoading: false, |
||||
|
dataList: [], |
||||
|
saveVisible: false, |
||||
|
currentTemplate: {}, |
||||
|
srcList: [], |
||||
|
dataPositionList: [], |
||||
|
currentPosition: {}, |
||||
|
savePositionVisible: false, |
||||
|
queryPicture: { |
||||
|
pictureDesc: '', |
||||
|
pictureFileName: '', |
||||
|
}, |
||||
|
basePictureList: [], |
||||
|
previewVisible: false, |
||||
|
urlList: [], |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
handleQueryExternalLabelTemplate () { |
||||
|
let params = {} |
||||
|
this.queryLoading = true |
||||
|
this.dataPositionList = [] |
||||
|
queryExternalLabelTemplate(params).then(({data}) => { |
||||
|
if (data && data.code === 0) { |
||||
|
this.dataList = data.rows |
||||
|
} else { |
||||
|
this.$message.error(data.msg) |
||||
|
} |
||||
|
this.queryLoading = false |
||||
|
}).catch((error) => { |
||||
|
this.$message.error(error) |
||||
|
this.queryLoading = false |
||||
|
}) |
||||
|
}, |
||||
|
handleEdit (row) { |
||||
|
this.currentTemplate = {...row} |
||||
|
this.srcList = [] |
||||
|
this.srcList.push(row.templateUrl) |
||||
|
this.handleQueryPosition(); |
||||
|
}, |
||||
|
handleQueryPosition () { |
||||
|
let params = { |
||||
|
site: this.part.site, |
||||
|
partNo: this.part.partNo, |
||||
|
templateNo: this.currentTemplate.templateNo |
||||
|
} |
||||
|
queryExternalLabelTemplateByPosition(params).then(({data}) => { |
||||
|
if (data && data.code === 0) { |
||||
|
this.saveVisible = true |
||||
|
this.dataPositionList = data.rows |
||||
|
} else { |
||||
|
this.$message.warning(data.msg) |
||||
|
} |
||||
|
}).catch((error) => { |
||||
|
this.$message.error(error) |
||||
|
}) |
||||
|
}, |
||||
|
handleEditPosition (row) { |
||||
|
this.currentPosition = {...row} |
||||
|
this.handleQueryBasePicture(); |
||||
|
this.savePositionVisible = true |
||||
|
}, |
||||
|
handleQueryBasePicture () { |
||||
|
let params = { |
||||
|
pictureNos: this.currentPosition.pictureNo?[this.currentPosition.pictureNo]:[], |
||||
|
pictureDesc: this.queryPicture.pictureDesc, |
||||
|
pictureFileName: this.queryPicture.pictureFileName, |
||||
|
} |
||||
|
basePictureList(params).then(({data}) => { |
||||
|
if (data && data.code === 0) { |
||||
|
this.basePictureList = data.rows |
||||
|
}else { |
||||
|
this.$message.warning(data.msg) |
||||
|
} |
||||
|
}).catch((error)=>{ |
||||
|
this.$message.error(error) |
||||
|
}) |
||||
|
}, |
||||
|
handlePreviewImg(row){ |
||||
|
this.urlList = []; |
||||
|
this.urlList.push(row.pictureUrl); |
||||
|
this.previewVisible = true; |
||||
|
}, |
||||
|
handleDblClick(row){ |
||||
|
let params = { |
||||
|
site:this.part.site, |
||||
|
partNo:this.part.partNo, |
||||
|
templateNo:this.currentPosition.templateNo, |
||||
|
pictureClassify:'ProPicture', |
||||
|
picturePosition:this.currentPosition.picturePosition, |
||||
|
pictureNo:this.currentPosition.pictureNo, |
||||
|
pictureDesc:row.pictureDesc, |
||||
|
pictureFileName:row.pictureFileName, |
||||
|
pictureNewFileName:row.pictureNewFileName, |
||||
|
pictureUrl:row.pictureUrl, |
||||
|
basePictureNo:row.pictureNo, |
||||
|
createBy:this.$store.state.user.name, |
||||
|
} |
||||
|
this.savePositionVisible = false |
||||
|
saveProductExternalPartPicturePart(params).then(({data})=>{ |
||||
|
if (data && data.code === 0){ |
||||
|
this.$message.success(data.msg); |
||||
|
this.handleQueryPosition(); |
||||
|
}else { |
||||
|
this.$message.warning(data.msg) |
||||
|
} |
||||
|
}).catch((error)=>{ |
||||
|
this.$message.error(error) |
||||
|
}) |
||||
|
}, |
||||
|
handleClearPosition(row){ |
||||
|
let params = { |
||||
|
site:this.part.site, |
||||
|
partNo:this.part.partNo, |
||||
|
pictureNo:row.pictureNo, |
||||
|
pictureUrl:row.pictureUrl, |
||||
|
} |
||||
|
removeExternalPartPicture(params).then(({data})=>{ |
||||
|
if (data && data.code === 0){ |
||||
|
this.$message.success(data.msg); |
||||
|
this.handleQueryPosition(); |
||||
|
}else { |
||||
|
this.$message.warning(data.msg) |
||||
|
} |
||||
|
}).catch((error)=>{ |
||||
|
this.$message.error(error) |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
part (newVal, oldVal) { |
||||
|
if (newVal) { |
||||
|
this.handleQueryExternalLabelTemplate() |
||||
|
} |
||||
|
}, |
||||
|
savePositionVisible (newVal, oldVal) { |
||||
|
if (newVal === false) { |
||||
|
this.queryPicture = { |
||||
|
pictureDesc: '', |
||||
|
pictureFileName: '', |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<div> |
||||
|
<el-table :data="dataList" border v-loading="queryLoading" :height="height"> |
||||
|
<el-table-column label="Actions" width="80" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-link @click="handleEdit(scope.row)">Edit</el-link> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="Template No" prop="sortNo" width="100" align="center"></el-table-column> |
||||
|
<el-table-column label="Template Name" prop="templateName" min-width="130" header-align="center" |
||||
|
align="left"></el-table-column> |
||||
|
</el-table> |
||||
|
|
||||
|
<el-dialog title="Template Preview" v-drag :close-on-click-modal="false" :visible.sync="saveVisible" width="900px"> |
||||
|
<div style="display: flex; justify-content: center;margin-bottom: 10px"> |
||||
|
<el-image |
||||
|
style="width: 700px; height: 300px" |
||||
|
:src="currentTemplate.templateUrl" |
||||
|
:preview-src-list="srcList"> |
||||
|
</el-image> |
||||
|
</div> |
||||
|
|
||||
|
<el-table :data="dataPositionList" border height="300"> |
||||
|
<el-table-column label="Actions" align="center" width="140"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-link @click="handleEditPosition(scope.row)">Edit</el-link> |
||||
|
<el-link v-if="scope.row.pictureNo" @click="handleClearPosition(scope.row)">Clear</el-link> |
||||
|
<el-link v-if="scope.row.pictureNo" @click="handlePreviewImg(scope.row)">View</el-link> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="Template Name" prop="templateName" width="100" header-align="center" |
||||
|
align="left"></el-table-column> |
||||
|
<el-table-column label="Position" prop="picturePosition" width="100" header-align="center" |
||||
|
align="left"></el-table-column> |
||||
|
<el-table-column label="Certification Code" prop="certificationNo" min-width="120" header-align="center" |
||||
|
align="left"></el-table-column> |
||||
|
<el-table-column label="Certification Desc" prop="pictureDesc" min-width="160" header-align="center" |
||||
|
align="left"></el-table-column> |
||||
|
<el-table-column label="Created By" prop="createBy" min-width="100" header-align="center" |
||||
|
align="left"></el-table-column> |
||||
|
<el-table-column label="Created Time" prop="createTime" min-width="140" header-align="center" |
||||
|
align="center"></el-table-column> |
||||
|
</el-table> |
||||
|
<div slot="footer"> |
||||
|
<el-button type="primary" @click="saveVisible = false">Cancel</el-button> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
|
||||
|
<el-dialog title="Certification" v-drag :close-on-click-modal="false" :visible.sync="savePositionVisible" width="500px"> |
||||
|
<el-form label-position="top" :model="queryPicture"> |
||||
|
<el-row :gutter="10"> |
||||
|
<el-col :span="8"> |
||||
|
<el-form-item label="Certification Description" class="auto"> |
||||
|
<el-input v-model="queryPicture.pictureDesc"></el-input> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="8"> |
||||
|
<el-form-item label=" "> |
||||
|
<el-button type="primary" @click="handleQueryBasePicture">Query</el-button> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</el-form> |
||||
|
<el-table :data="basePictureList" @row-dblclick="handleDblClick" border :height="400" :style="`width: 100%;margin-top: 5px`"> |
||||
|
<el-table-column prop="certificationNo" label="Certification Code" min-width="60"/> |
||||
|
<el-table-column prop="pictureDesc" label="Certification Description" min-width="120"/> |
||||
|
<el-table-column label="Actions" width="60" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-link @click="handlePreviewImg(scope.row)">View</el-link> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</el-dialog> |
||||
|
|
||||
|
<el-image-viewer v-if="previewVisible" :z-index="9999" :on-close="()=>{this.previewVisible = false}" :url-list="urlList"></el-image-viewer> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<style scoped> |
||||
|
|
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue