zs-mes-before.git

<template>
  <div class="mod-config">
    <basic-container>
      <ttable
        :table="table"
        @handleSelectionChange="handleSelectionChange"
        :uploadInfo="uploadInfo"
        :prelang="prelang"
        :options="options"
        :ajaxFun="ajaxFun"
        ref="operationTable"
      >
        <template #toolbar></template>
      </ttable>
      <!--导入-->
      <el-dialog title="导入" :visible.sync="importDialogVisible" width="30%">
        <span>
          <div>
            <div>
              <el-upload
                style="margin-left:8px;display: inline;"
                class="upload-demo"
                drag
                :headers="headers"
                :action="qualityhw19codeBindUploadUrl"
                :beforeUpload="beforeAvatarUpload"
                :limit="1"
                :show-file-list="false"
                :file-list="fileList"
                :on-success="fileSuccessUploadScan"
                :on-error="handleError"
                accept=".xlsx,.xls,.csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
                :auto-upload="true"
                ref="qualityhw19codeBindUploadScan"
                multiple
              >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text"><em>点击导入数据</em></div>
                <div class="el-upload__tip" slot="tip">
                  只能上传xlsx/xls文件，且不超过10M<el-button
                    type="text"
                    style="font-size:12px;"
                    @click="downDataTemplate"
                    >下载模板</el-button
                  >
                </div>
              </el-upload>
            </div>
            <div></div>
          </div>
        </span>
        <span slot="footer" class="dialog-footer"> </span>
      </el-dialog>
    </basic-container>
    <print-form ref="printForm"></print-form>
  </div>
</template>
 
<script>
import {
  code19bindfetchList,
  delCode19bind,
  addCode19bind,
  getPrintInfo,
  exportCode19bind,
  uploadBatchTemplate
} from '@/api/huawei/code19bind'
import ttable from '@/views/common/ztt-table.vue'
import { mapGetters } from 'vuex'
import { transform } from '@/util/fileTransform'
import PrintForm from '@/views/huawei/code19bind/printForm'
import { getStore } from '@/util/store.js'
export default {
  data() {
    return {
      ajaxFun: code19bindfetchList,
      multipleSelection: [],
      importDialogVisible: false,
      headers: {
        Authorization: 'Bearer ' + getStore({ name: 'access_token' })
      },
      fileList: [],
      qualityhw19codeBindUploadUrl: '/mes/qualityhw19codebing/upload',
      uploadInfo: {
        // 是否展示上传EXCEL以及对应的url
        isShow: false,
        url: '/mes/operation/excel/upload'
      },
      prelang: 'operation',
      options: {
        height: 300, // 默认高度-为了表头固定
        stripe: true, // 是否为斑马纹 table
        highlightCurrentRow: false, // 是否要高亮当前行
        border: true, // 是否有纵向边框
        lazy: false, // 是否需要懒加载
        fit: true, // 列的宽度是否自撑开
        multiSelect: true, //
        seqNo: true,
        isRefresh: true, // 是否显示刷新按钮
        isShowHide: true, // 是否显示显影按钮
        isSearch: false, // 高级查询按钮
        defaultOrderBy: { column: 'id', direction: 'desc' }
      },
      table: {
        total: 0,
        currentPage: 1,
        pageSize: 20,
        data: [],
        // 标题
        column: [
          {
            minWidth: '140',
            prop: 'serialNum',
            label: '流水号',
            sort: true,
            isTrue: true,
            isSearch: true,
            searchInfoType: 'text'
          },
          {
            minWidth: '140',
            prop: 'barCode',
            label: '19条码',
            sort: true,
            isTrue: true,
            isSearch: true,
            searchInfoType: 'text'
          },
          {
            minWidth: '120',
            prop: 'codeBox',
            label: '箱码',
            sort: true,
            isTrue: true,
            isSearch: true,
            searchInfoType: 'text'
          },
          {
            minWidth: '120',
            prop: 'materialCode',
            label: '物料代码',
            sort: true,
            isTrue: true,
            isSearch: true,
            searchInfoType: 'text'
          },
          {
            minWidth: '120',
            prop: 'length',
            label: '长度',
            sort: true,
            isTrue: true,
            isSearch: true,
            searchInfoType: 'text'
          },
          {
            minWidth: '120',
            prop: 'isQualified',
            label: '是否合格',
            sort: true,
            isTrue: true,
            isSearch: true,
            searchInfoType: 'select',
            formatter: this.formatIsQualified,
            optList: () => {
              return this.isQualifiedOptions
            }
          },
          {
            minWidth: '120',
            prop: 'reason',
            label: '不合格原因',
            sort: true,
            isTrue: true,
            isSearch: true,
            searchInfoType: 'text'
          },
          {
            minWidth: '120',
            prop: 'isRelease',
            label: '是否放行',
            sort: true,
            isTrue: true,
            isSearch: true,
            searchInfoType: 'select',
            formatter: this.formatIsRelease,
            optList: () => {
              return this.isReleaseOptions
            }
          },
          {
            minWidth: '120',
            prop: 'isBind',
            label: '是否绑定',
            sort: true,
            isTrue: true,
            isSearch: true,
            searchInfoType: 'select',
            formatter: this.formatIsBind,
            optList: () => {
              return this.isBindOptions
            }
          },
          {
            minWidth: '120',
            prop: 'printNum',
            label: '打印次数',
            sort: true,
            isTrue: true,
            isSearch: true,
            searchInfoType: 'text'
          },
          {
            minWidth: '120',
            prop: 'updateUser',
            label: '编辑人',
            sort: true,
            isTrue: true,
            isSearch: true,
            searchInfoType: 'text'
          },
          {
            minWidth: '160',
            prop: 'updateTime',
            label: '编辑时间',
            sort: true,
            isTrue: true,
            isSearch: true,
            searchInfoType: 'datetimerange'
          },
          {
            minWidth: '120',
            prop: 'createUser',
            label: '创建人',
            sort: true,
            isTrue: true,
            isSearch: true,
            searchInfoType: 'text'
          },
          {
            minWidth: '160',
            prop: 'createTime',
            label: '创建时间',
            sort: true,
            isTrue: true,
            isSearch: true,
            searchInfoType: 'datetimerange'
          }
        ],
        toolbar: [
          {
            text: '导出',
            type: 'primary',
            fun: this.exportData
          },
          {
            text: '导入',
            type: 'primary',
            fun: this.importData
          }
        ],
        operator: [
          {
            text: '打印',
            type: 'text',
            size: 'small',
            fun: this.print
          },
          {
            text: '删除',
            type: 'text',
            size: 'small',
            fun: this.deleteHandle
          }
        ],
        operatorConfig: {
          fixed: 'right',
          label: '操作',
          width: 100,
          minWidth: 100
        }
      },
      standardLenOptions: [
        {
          value: 0,
          label: '非标'
        },
        {
          value: 1,
          label: '标长'
        }
      ],
      isQualifiedOptions: [
        {
          value: 0,
          label: '不合格'
        },
        {
          value: 1,
          label: '合格'
        }
      ],
      isReleaseOptions: [
        {
          value: 0,
          label: '不放行'
        },
        {
          value: 1,
          label: '放行'
        }
      ],
      isBindOptions: [
        {
          value: 0,
          label: '不绑定'
        },
        {
          value: 1,
          label: '绑定'
        }
      ]
    }
  },
  components: {
    PrintForm,
    ttable
  },
  computed: {
    ...mapGetters(['permissions'])
  },
  created() {},
  methods: {
    // 获取数据列表
    getData() {
      if (this.$refs.operationTable !== undefined) {
        this.$refs.operationTable.getDataList()
      }
    },
    // 新增 / 修改
    addOrUpdateHandle(row) {
      this.$router.push({
        name: 'operationForm',
        params: { id: row == null ? null : row.id }
      })
    },
    print(row) {
      console.log(row)
      getPrintInfo(row ? row.id : row).then((res) => {
        console.log(res)
        this.$refs.printForm.printData(res.data.data)
        this.getData()
      })
    },
    // 删除
    deleteHandle(row) {
      this.$confirm('是否确认删除', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        closeOnClickModal: false,
        type: 'warning'
      })
        .then(() => {
          delCode19bind(row ? row.id : row).then(() => {
            this.$message.success('删除成功')
            this.getData()
          })
        })
        .then((data) => {
          // this.$message.success('删除成功')
          // this.getData()
        })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    formatStandardLen(row, column, cellValue) {
      this.standardLenOptions.forEach((obj) => {
        if (obj.value === cellValue) {
          cellValue = obj.label
        }
      })
      return cellValue
    },
    formatIsQualified(row, column, cellValue) {
      this.isQualifiedOptions.forEach((obj) => {
        if (obj.value === cellValue) {
          cellValue = obj.label
        }
      })
      return cellValue
    },
    formatIsBind(row, column, cellValue) {
      this.isBindOptions.forEach((obj) => {
        if (obj.value === cellValue) {
          cellValue = obj.label
        }
      })
      return cellValue
    },
    formatIsRelease(row, column, cellValue) {
      this.isReleaseOptions.forEach((obj) => {
        if (obj.value === cellValue) {
          cellValue = obj.label
        }
      })
      return cellValue
    },
    exportData() {
      exportCode19bind(this.$refs.operationTable.getQueryParam())
        .then((response) => {
          transform(response)
        })
        .catch(() => {})
    },
    importData() {
      this.importDialogVisible = true
    },
    beforeAvatarUpload(file) {
      const fileName = file.name
      const fileType = fileName.substring(fileName.lastIndexOf('.') + 1)
      const isLt10M = file.size / 1024 / 1024 < 10
      if (fileType !== 'xlsx' && fileType !== 'xls') {
        this.$message.error('文件格式只能为xlsx或xls,请删除后重新上传')
      }
      if (!isLt10M) {
        this.$message({
          message: '文件大小',
          type: 'warning'
        })
      }
      return isLt10M
    },
    // 文件上传成功回调事件
    fileSuccessUploadScan(response, file, fileList) {
      if (response.code != '0') {
        this.$message.warning(response.msg)
      } else {
        this.$message({
          message: '上传成功',
          type: 'success'
        })
        this.getData()
      }
      this.$refs.qualityhw19codeBindUploadScan.clearFiles()
    },
    // 上传失败
    handleError(err, file, fileList) {
      const error = JSON.parse(err.message)
      if (error.msg) {
        this.$message.error(error.msg)
      } else {
        this.$message.error('上传失败')
      }
    },
    downDataTemplate() {
      uploadBatchTemplate().then((response) => {
        const blob = new Blob([response.data], {
          type: 'application/force-download'
        })
        const filename = decodeURI('19条码绑定模板文件.xlsx')
        // 创建一个超链接，将文件流赋进去，然后实现这个超链接的单击事件
        const elink = document.createElement('a')
        elink.download = filename
        elink.style.display = 'none'
        elink.href = URL.createObjectURL(blob)
        document.body.appendChild(elink)
        elink.click()
        URL.revokeObjectURL(elink.href) // 释放URL 对象
        document.body.removeChild(elink)
      })
    }
  }
}
</script>