2025.05.22 标签维护功能

8 months ago · 7135791d61
2 changed files with 489 additions and 0 deletions
--- a/src/api/label/labelMaintenance.js
+++ b/src/api/label/labelMaintenance.js
@ -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)
--- a/src/views/modules/label/labelMaintenance.vue
+++ b/src/views/modules/label/labelMaintenance.vue
@ -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>