zelian_wu
/
ckt-leble-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

2025.05.22 标签维护功能

master
jiayang yue 8 months ago
parent
d039673e49
commit
7135791d61
2 changed files with 489 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      src/api/label/labelMaintenance.js
  2. 484
      src/views/modules/label/labelMaintenance.vue

5
src/api/label/labelMaintenance.js
View File

@ -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)

484
src/views/modules/label/labelMaintenance.vue
View File

@ -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