jiayang yue
8 months ago
2 changed files with 489 additions and 0 deletions
@ -0,0 +1,5 @@ |
|||||
|
import {createAPI} from '../../utils/httpRequest' |
||||
|
|
||||
|
export const labelMaintenanceInfoSearch = (data) => createAPI(`/label/maintenance`,'post',data) |
||||
|
|
||||
|
export const uploadLabelMaintenancePicture = (data) => createAPI(`/label/maintenance/upload`,'post',data) |
||||
@ -0,0 +1,484 @@ |
|||||
|
<script> |
||||
|
import {labelMaintenanceInfoSearch, uploadLabelMaintenancePicture} from "../../../api/label/labelMaintenance"; |
||||
|
|
||||
|
export default { |
||||
|
name: 'Manufacturer', |
||||
|
data () { |
||||
|
return { |
||||
|
// 导出 |
||||
|
exportData: [], |
||||
|
exportName: '图片维护' + this.dayjs().format('YYYYMMDDHHmmss'), |
||||
|
exportHeader: ['图片维护'], |
||||
|
exportFooter: [], |
||||
|
resultList: [], |
||||
|
userBuList: [], |
||||
|
// ======== 行高 ======== |
||||
|
height: 200, |
||||
|
// ======== 分页 ======== |
||||
|
pageIndex: 1, |
||||
|
pageSize: 50, |
||||
|
totalPage: 0, |
||||
|
// 条件查询 |
||||
|
searchData: { |
||||
|
site: this.$store.state.user.site, |
||||
|
userName: this.$store.state.user.name, |
||||
|
pictureDesc: '', |
||||
|
certificationNo: 'AA', |
||||
|
page: 1, |
||||
|
limit: 20 |
||||
|
}, |
||||
|
modalVisible: false, |
||||
|
modalData: { |
||||
|
pictureDesc: "", |
||||
|
certificationNo: "BB", |
||||
|
file: null, |
||||
|
fileName: "", |
||||
|
preview: "" |
||||
|
}, |
||||
|
// ======== 数据列表 ======== |
||||
|
dataList: [], |
||||
|
// 展示列集 |
||||
|
columnList: [ |
||||
|
{ |
||||
|
userId: this.$store.state.user.name, |
||||
|
functionId: 30008, |
||||
|
serialNumber: '30008Table1PictureDesc', |
||||
|
tableId: '30008Table1', |
||||
|
tableName: 'labelMaintenanceTable', |
||||
|
columnProp: 'pictureDesc', |
||||
|
headerAlign: 'center', |
||||
|
align: 'left', |
||||
|
columnLabel: 'Picture Name', |
||||
|
columnHidden: false, |
||||
|
columnImage: false, |
||||
|
columnSortable: false, |
||||
|
sortLv: 0, |
||||
|
status: true, |
||||
|
fixed: '', |
||||
|
columnWidth: 80 |
||||
|
}, |
||||
|
{ |
||||
|
userId: this.$store.state.user.name, |
||||
|
functionId: 30008, |
||||
|
serialNumber: '30008Table1CertificationNo', |
||||
|
tableId: '30008Table1', |
||||
|
tableName: 'labelMaintenanceTable', |
||||
|
columnProp: 'certificationNo', |
||||
|
headerAlign: 'center', |
||||
|
align: 'left', |
||||
|
columnLabel: 'Box Classify', |
||||
|
columnHidden: false, |
||||
|
columnImage: false, |
||||
|
columnSortable: false, |
||||
|
sortLv: 0, |
||||
|
status: true, |
||||
|
fixed: '', |
||||
|
columnWidth: 80 |
||||
|
}, |
||||
|
{ |
||||
|
userId: this.$store.state.user.name, |
||||
|
functionId: 30008, |
||||
|
serialNumber: '30008Table1PictureBase64', |
||||
|
tableId: '30008Table1', |
||||
|
tableName: 'labelMaintenanceTable', |
||||
|
columnProp: 'pictureBase64', |
||||
|
headerAlign: 'center', |
||||
|
align: 'center', |
||||
|
columnLabel: '缩略图', |
||||
|
columnHidden: false, |
||||
|
columnImage: true, // 关键 |
||||
|
columnSortable: false, |
||||
|
sortLv: 0, |
||||
|
status: true, |
||||
|
fixed: '', |
||||
|
columnWidth: 120 |
||||
|
}, |
||||
|
{ |
||||
|
userId: this.$store.state.user.name, |
||||
|
functionId: 30008, |
||||
|
serialNumber: '30008Table1CreateBy', |
||||
|
tableId: '30008Table1', |
||||
|
tableName: 'labelMaintenanceTable', |
||||
|
columnProp: 'createBy', |
||||
|
headerAlign: 'center', |
||||
|
align: 'left', |
||||
|
columnLabel: 'Create By', |
||||
|
columnHidden: false, |
||||
|
columnImage: false, |
||||
|
columnSortable: false, |
||||
|
sortLv: 0, |
||||
|
status: true, |
||||
|
fixed: '', |
||||
|
columnWidth: 80 |
||||
|
}, |
||||
|
{ |
||||
|
userId: this.$store.state.user.name, |
||||
|
functionId: 30008, |
||||
|
serialNumber: '30008Table1CreateTime', |
||||
|
tableId: '30008Table1', |
||||
|
tableName: 'labelMaintenanceTable', |
||||
|
columnProp: 'createTime', |
||||
|
headerAlign: 'center', |
||||
|
align: 'left', |
||||
|
columnLabel: 'Create Time', |
||||
|
columnHidden: false, |
||||
|
columnImage: false, |
||||
|
columnSortable: false, |
||||
|
sortLv: 0, |
||||
|
status: true, |
||||
|
fixed: '', |
||||
|
columnWidth: 80 |
||||
|
} |
||||
|
], |
||||
|
rules: { |
||||
|
pictureDesc: [ |
||||
|
{required: true, message: ' ', trigger: 'blur'} |
||||
|
], |
||||
|
certificationNo: [ |
||||
|
{required: true, message: ' ', trigger: 'blur'} |
||||
|
], |
||||
|
file: [{ required: true, message: ' ', trigger: 'blur' }], |
||||
|
}, |
||||
|
// ======== 模态框开关控制 ======== |
||||
|
authSearch: false, |
||||
|
authSave: false, |
||||
|
authUpdate: false, |
||||
|
authDelete: false, |
||||
|
modalFlag: false, |
||||
|
modalDisableFlag: false, |
||||
|
menuId: this.$route.meta.menuId, |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
mounted () { |
||||
|
this.$nextTick(() => { |
||||
|
this.height = window.innerHeight - 180 |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
created () { |
||||
|
// 动态列 |
||||
|
if (!this.isComponent) { |
||||
|
this.getTableUserColumn(this.$route.meta.menuId + 'table1', 1) |
||||
|
} |
||||
|
// 获取数据列表 |
||||
|
this.getDataList() |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
|
||||
|
// 每页数 |
||||
|
sizeChangeHandle (val) { |
||||
|
this.pageSize = val |
||||
|
this.pageIndex = 1 |
||||
|
this.getDataList() |
||||
|
}, |
||||
|
|
||||
|
// 当前页 |
||||
|
currentChangeHandle (val) { |
||||
|
this.pageIndex = val |
||||
|
this.getDataList() |
||||
|
}, |
||||
|
|
||||
|
// 获取数据列表 |
||||
|
getDataList () { |
||||
|
this.searchData.limit = this.pageSize |
||||
|
this.searchData.page = this.pageIndex |
||||
|
labelMaintenanceInfoSearch(this.searchData).then(({data}) => { |
||||
|
if (data.code === 0) { |
||||
|
this.dataList = data.page.list |
||||
|
this.pageIndex = data.page.currPage |
||||
|
this.pageSize = data.page.pageSize |
||||
|
this.totalPage = data.page.totalCount |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
addModal() { |
||||
|
this.modalVisible = true; |
||||
|
this.resetForm(); |
||||
|
}, |
||||
|
beforeUpload() { |
||||
|
// 禁用自动上传 |
||||
|
return false; |
||||
|
}, |
||||
|
onFileChange(file) { |
||||
|
// 记录文件 |
||||
|
this.modalData.file = file.raw; |
||||
|
this.modalData.fileName = file.name; |
||||
|
// 预览图片 |
||||
|
let reader = new FileReader(); |
||||
|
reader.onload = e => { |
||||
|
this.modalData.preview = e.target.result; |
||||
|
}; |
||||
|
reader.readAsDataURL(file.raw); |
||||
|
}, |
||||
|
onFileRemove() { |
||||
|
// 清空文件 |
||||
|
this.modalData.file = null; |
||||
|
this.modalData.fileName = ""; |
||||
|
this.modalData.preview = ""; |
||||
|
}, |
||||
|
handleSubmit() { |
||||
|
// 判断文件是否上传 |
||||
|
if (!this.modalData.file) { |
||||
|
this.$message.error("请上传图片文件"); |
||||
|
return; |
||||
|
} |
||||
|
this.$refs.formRef.validate(valid => { |
||||
|
if (!valid) return; |
||||
|
let formData = new FormData(); |
||||
|
formData.append("pictureDesc", this.modalData.pictureDesc); |
||||
|
formData.append("certificationNo", this.modalData.certificationNo); |
||||
|
formData.append("createBy", this.$store.state.user.name); |
||||
|
formData.append("file", this.modalData.file); |
||||
|
uploadLabelMaintenancePicture(formData).then(({data}) => { |
||||
|
if (data.code === 0) { |
||||
|
this.$message.success("图片上传成功"); |
||||
|
this.getDataList(); |
||||
|
} else { |
||||
|
this.$message.error(data.msg); |
||||
|
} |
||||
|
this.modalVisible = false; |
||||
|
this.resetForm(); |
||||
|
}) |
||||
|
}) |
||||
|
}, |
||||
|
resetForm() { |
||||
|
this.modalData = { |
||||
|
pictureDesc: "", |
||||
|
certificationNo: "BB", |
||||
|
file: null, |
||||
|
fileName: "", |
||||
|
preview: "" |
||||
|
}; |
||||
|
if(this.$refs.formRef) this.$refs.formRef.clearValidate(); |
||||
|
}, |
||||
|
removeFile() { |
||||
|
this.modalData.file = null; |
||||
|
this.modalData.fileName = ''; |
||||
|
this.modalData.preview = ''; |
||||
|
// 重置上传控件的 input 文件框，否则再次选同一个文件时不会触发 change |
||||
|
this.$nextTick(() => { |
||||
|
let upload = this.$refs.uploadRef; |
||||
|
if (upload && upload.$refs.input) { |
||||
|
upload.$refs.input.value = null; |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 动态列开始 获取 用户保存的 格式列 |
||||
|
async getTableUserColumn (tableId, columnId) { |
||||
|
let queryTableUser = { |
||||
|
userId: this.$store.state.user.name, |
||||
|
functionId: this.$route.meta.menuId, |
||||
|
tableId: tableId, |
||||
|
status: true, |
||||
|
languageCode: this.$i18n.locale |
||||
|
} |
||||
|
await getTableUserListLanguage(queryTableUser).then(({data}) => { |
||||
|
if (data.rows.length > 0) { |
||||
|
switch (columnId) { |
||||
|
case 1: |
||||
|
this.columnList = data.rows |
||||
|
break |
||||
|
} |
||||
|
} else { |
||||
|
this.getColumnList(tableId, columnId) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
// 获取 tableDefault 列 |
||||
|
async getColumnList (tableId, columnId) { |
||||
|
let queryTable = { |
||||
|
functionId: this.$route.meta.menuId, |
||||
|
tableId: tableId, |
||||
|
languageCode: this.$i18n.locale |
||||
|
} |
||||
|
await getTableDefaultListLanguage(queryTable).then(({data}) => { |
||||
|
if (data.rows.length > 0) { |
||||
|
switch (columnId) { |
||||
|
case 1: |
||||
|
this.columnList = data.rows |
||||
|
break |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
//获取按钮的权限数据 |
||||
|
getButtonAuthData () { |
||||
|
let searchFlag = this.isAuth(this.menuId + ':search') |
||||
|
let saveFlag = this.isAuth(this.menuId + ':save') |
||||
|
let updateFlag = this.isAuth(this.menuId + ':update') |
||||
|
let deleteFlag = this.isAuth(this.menuId + ':delete') |
||||
|
//处理页面的权限数据 |
||||
|
this.authSearch = !searchFlag |
||||
|
this.authSave = !saveFlag |
||||
|
this.authUpdate = !updateFlag |
||||
|
this.authDelete = !deleteFlag |
||||
|
}, |
||||
|
handleRowClick (row) { |
||||
|
if (this.isComponent) { |
||||
|
this.$emit('rowClick', row) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<div> |
||||
|
<el-form :inline="true" label-position="top" :model="searchData" @keyup.enter.native="getDataList"> |
||||
|
<el-form-item :label="'Picture Name'"> |
||||
|
<el-input v-model="searchData.pictureDesc" clearable style="width: 120px"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item :label="'Box Classify'"> |
||||
|
<el-select clearable v-model="searchData.certificationNo" style="width: 120px"> |
||||
|
<el-option label="All" value="AA"></el-option> |
||||
|
<el-option label="Inside" value="BB"></el-option> |
||||
|
<el-option label="External" value="CC"></el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item :label="' '"> |
||||
|
<el-button type="primary" @click="getDataList">Query</el-button> |
||||
|
<el-button type="primary" @click="addModal">New</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<el-table |
||||
|
:height="height" |
||||
|
:data="dataList" |
||||
|
border |
||||
|
style="width: 100%;margin-top: 5px"> |
||||
|
<el-table-column |
||||
|
v-for="(item,index) in columnList" :key="index" |
||||
|
:sortable="item.columnSortable" |
||||
|
:prop="item.columnProp" |
||||
|
:header-align="item.headerAlign" |
||||
|
:show-overflow-tooltip="item.showOverflowTooltip" |
||||
|
:align="item.align" |
||||
|
:fixed="item.fixed==''?false:item.fixed" |
||||
|
:min-width="item.columnWidth" |
||||
|
:label="item.columnLabel"> |
||||
|
<template slot-scope="scope"> |
||||
|
<!-- 如果是图片列，就渲染图片，否则渲染文本 --> |
||||
|
<span v-if="item.columnImage && scope.row[item.columnProp] !== null && scope.row[item.columnProp] !== ''"> |
||||
|
<img :src="scope.row[item.columnProp]" |
||||
|
style="width: 100px; height: 80px; object-fit:contain;"/> |
||||
|
</span> |
||||
|
<span v-else> |
||||
|
{{ scope.row[item.columnProp] }} |
||||
|
</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
|
||||
|
<!-- 分页栏 --> |
||||
|
<el-pagination |
||||
|
@size-change="sizeChangeHandle" |
||||
|
@current-change="currentChangeHandle" |
||||
|
:current-page="pageIndex" |
||||
|
:page-sizes="[20, 50, 100, 200, 500]" |
||||
|
:page-size="pageSize" |
||||
|
:total="totalPage" |
||||
|
layout="total, sizes, prev, pager, next, jumper"> |
||||
|
</el-pagination> |
||||
|
|
||||
|
<!-- 新增模态框 --> |
||||
|
<el-dialog |
||||
|
title="新增图片" |
||||
|
:visible.sync="modalVisible" |
||||
|
width="420px" |
||||
|
:close-on-click-modal="false" |
||||
|
v-drag |
||||
|
@close="resetForm" |
||||
|
:custom-class="'custom-dialog-body'" |
||||
|
style="height: 500px" |
||||
|
> |
||||
|
<el-form :inline="true" label-position="top" :model="modalData" :rules="rules" |
||||
|
style="margin-left: 7px;margin-top: -5px;" ref="formRef"> |
||||
|
<el-form-item label="Picture Name" prop="pictureDesc" :rules="rules.pictureDesc"> |
||||
|
<el-input v-model="modalData.pictureDesc" style="width:240px"/> |
||||
|
</el-form-item> |
||||
|
<el-form-item :label="'Box Classify'" prop="certificationNo" :rules="rules.certificationNo"> |
||||
|
<el-select clearable v-model="modalData.certificationNo" style="width: 120px"> |
||||
|
<el-option label="Inside" value="BB"></el-option> |
||||
|
<el-option label="External" value="CC"></el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="图片文件" prop="file" :rules="rules.file"> |
||||
|
<el-upload |
||||
|
class="upload-demo" |
||||
|
:show-file-list="false" |
||||
|
:before-upload="beforeUpload" |
||||
|
:on-change="onFileChange" |
||||
|
:on-remove="onFileRemove" |
||||
|
:auto-upload="false" |
||||
|
accept="image/*" |
||||
|
> |
||||
|
<div style="display: flex; align-items: center;"> |
||||
|
<el-input |
||||
|
v-model="modalData.fileName" |
||||
|
style="width: 240px;" |
||||
|
disabled |
||||
|
placeholder="未选择文件" |
||||
|
/> |
||||
|
<el-button type="primary" :disabled="modalData.fileName !== ''" style="margin-left: 15px">选择文件</el-button> |
||||
|
<el-button |
||||
|
type="danger" |
||||
|
style="margin-left: 10px" |
||||
|
v-if="modalData.fileName" |
||||
|
@click.stop="removeFile" |
||||
|
icon="el-icon-delete" |
||||
|
>清除</el-button> |
||||
|
</div> |
||||
|
</el-upload> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="图片预览" style="height: 170px"> |
||||
|
|
||||
|
</el-form-item> |
||||
|
<el-form-item :label="''" style="height: 170px"> |
||||
|
<img |
||||
|
v-if="modalData.preview" |
||||
|
:src="modalData.preview" |
||||
|
alt="图片预览" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<span slot="footer" class="dialog-footer"> |
||||
|
<el-button @click="modalVisible = false">取消</el-button> |
||||
|
<el-button type="primary" @click="handleSubmit">保存</el-button> |
||||
|
</span> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<style scoped> |
||||
|
.el-table /deep/ .cell{ |
||||
|
height: auto; |
||||
|
line-height: 1.5; |
||||
|
} |
||||
|
.custom-dialog-body .el-dialog__body { |
||||
|
max-height: 60vh; |
||||
|
overflow-y: auto; |
||||
|
padding-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
.custom-dialog-body .el-form-item__content { |
||||
|
overflow: hidden; /* 保证图片不会突破内容区 */ |
||||
|
} |
||||
|
|
||||
|
.custom-dialog-body img { |
||||
|
max-width: 200px; |
||||
|
max-height: 150px; |
||||
|
width: auto; |
||||
|
height: auto; |
||||
|
display: block; |
||||
|
margin: 10px 0 20px 0; |
||||
|
border: 1px solid #eee; |
||||
|
box-sizing: border-box; |
||||
|
object-fit: contain; |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue