ckt-leble-vue/src/views/modules/part/external.vue

<script>
import {
  downLoadObjectFile, getProvisionalDataList, provisionalDataAlterHandle,
  queryFileId,
  removeExternalPart,
  saveExternalPart, savePartInfoByExcel,
  selectExternalPartList, selectExternalPartPage,
  selectUnitList,
  updateExternalPart
} from '../../../api/part/external'
import Chooselist from '@/views/modules/common/Chooselist_eam'
import dayjs from 'dayjs'
import PictureModule from './picture/picture.vue'
import LinkedCustomer from './customer/linkedCustomer.vue'
import {getExternalPartCustomerList} from '../../../api/part/externalPartCustomer'
import {getExternalPartPictureList} from '../../../api/part/externalPartPicture'
import LinkedManufacturer from './manufacturer/linkedManufacturer.vue'
import {getExternalPartManufacturerList} from '../../../api/part/externalPartManufacturer'
import {getTableDefaultListLanguage, getTableUserListLanguage} from '../../../api/table'
import {Decimal} from 'decimal.js'
import {getCategoryList} from '../../../api/category/category'
import {countryList} from '../../../api/dict/country'
import {getSiteDetail} from '../../../api/factory/site'
import LabelTemplate from './template/labelTemplate.vue'

let part = {
  site: '',
  partNo: '',
  partDesc: '',
  umId: '',
  freeInfo: '',
  freeInfo2: '',
  rev: '',
  active: '',
  tradingMark: 'N',
  packingWeight: undefined,
  weightUmId: undefined,
  moldCode: '',
  category: '',
  qtyPerCarton: 0,
  qtyPerRoll: 0,
  rollsPerCarton: 0,
  printStr1: '',
  printStr2: '',
  printStr3: '',
  rollLabelFlag: 'Y',
}
export default {
  name: 'ExternalPart',
  components: {LabelTemplate, LinkedManufacturer, LinkedCustomer, PictureModule,Chooselist},
  props: {
    height: {
      type: Number,
      default: 310
    },
    ofComponents: {
      type: Boolean,
      default: false
    }
  },
  data(){
    return{
      // 导出
      exportData: [],
      exportName: 'Part Info' + this.dayjs().format('YYYYMMDDHHmmss'),
      exportHeader: [],
      exportFooter: [],
      resultList: [],
      // 导入
      visible: false,
      fileList: [],
      provisionalDataVisible: false,
      provisionalDataList: [],
      isLoading: false,
      isLoading2: false,
      isLoading3: false,
      no: 1,
      size: 50,
      total: 0,
      part: {
        ...part
      },
      savePart: {
        ...part,
        active: 'Y',
      },
      tempData:{
        orderRef1: 'partInfo',
        orderRef2: 'partInfoFormat',
        site: this.$store.state.user.site,
      },
      partCategoryList: [],
      category: {},
      partRules: {
        partNo: [{required: true, message: 'Please input Part No', trigger: ['blur', 'change']}],
        partDesc: [{required: true, message: 'Please input Part Description', trigger: ['blur', 'change']}],
        umId: [{required: true, message: 'Please select UM', trigger: ['blur', 'change']}],
        rev: [{required: true, message: 'Please select Rev No', trigger: ['blur', 'change']}],
        moldCode: [{required: true, message: 'Please select Mold Code', trigger: ['blur', 'change']}],
        qtyPerCarton: [{required: true, message: 'Please input Qty Per Carton', trigger: ['blur', 'change']}],
        qtyPerRoll: [{required: true, message: 'Please input Qty Per Roll', trigger: ['blur', 'change']}],
        rollsPerCarton: [{required: true, message: 'Please input Rolls Per Carton', trigger: ['blur', 'change']}],
        freeInfo2: [{required: true, message: 'Please select OOC', trigger: ['blur', 'change']}],
      },
      savePartVisible: false,
      partTableLoading: false,
      partList: [],
      unitList: [],
      columnList: [
        {
          userId: this.$store.state.user.name,
          functionId: 10002,
          serialNumber: '10002TablePartNo',
          tableId: '10002Table',
          tableName: 'Part Table',
          columnProp: 'partNo',
          headerAlign: 'center',
          align: 'left',
          columnLabel: 'Part No',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 10,
          status: true,
          fixed: '',
          columnWidth: 80
        }, {
          userId: this.$store.state.user.name,
          functionId: 10002,
          serialNumber: '10002TablePartDesc',
          tableId: '10002Table',
          tableName: 'Part Table',
          columnProp: 'partDesc',
          headerAlign: 'center',
          align: 'left',
          columnLabel: 'Part Description',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 10,
          status: true,
          fixed: '',
          columnWidth: 140
        }, {
          userId: this.$store.state.user.name,
          functionId: 10002,
          serialNumber: '10002TableRev',
          tableId: '10002Table',
          tableName: 'Part Table',
          columnProp: 'rev',
          headerAlign: 'center',
          align: 'left',
          columnLabel: 'REV No',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 10,
          status: true,
          fixed: '',
          columnWidth: 80
        }, {
          userId: this.$store.state.user.name,
          functionId: 10002,
          serialNumber: '10002TableCategory',
          tableId: '10002Table',
          tableName: 'Part Table',
          columnProp: 'category',
          headerAlign: 'center',
          align: 'left',
          columnLabel: 'Part Category',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 10,
          status: true,
          fixed: '',
          columnWidth: 140
        },
        {
          userId: this.$store.state.user.name,
          functionId: 10002,
          serialNumber: '10002TableUmName',
          tableId: '10002Table',
          tableName: 'Part Table',
          columnProp: 'moldCode',
          headerAlign: 'center',
          align: 'left',
          columnLabel: 'Mold Code',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 10,
          status: true,
          fixed: '',
          columnWidth: 80
        }, {
          userId: this.$store.state.user.name,
          functionId: 10002,
          serialNumber: '10002TableUmName',
          tableId: '10002Table',
          tableName: 'Part Table',
          columnProp: 'manufacturer',
          headerAlign: 'center',
          align: 'left',
          columnLabel: 'Manufacturer',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 10,
          status: true,
          fixed: '',
          columnWidth: 120
        }, {
          userId: this.$store.state.user.name,
          functionId: 10002,
          serialNumber: '10002TableUmName',
          tableId: '10002Table',
          tableName: 'Part Table',
          columnProp: 'umName',
          headerAlign: 'center',
          align: 'left',
          columnLabel: 'UM',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 10,
          status: true,
          fixed: '',
          columnWidth: 60
        },
        {
          userId: this.$store.state.user.name,
          functionId: 10002,
          serialNumber: '10002TableQtyPerRoll',
          tableId: '10002Table',
          tableName: 'Part Table',
          columnProp: 'qtyPerRoll',
          headerAlign: 'center',
          align: 'left',
          columnLabel: 'Qty Per Roll',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 10,
          status: true,
          fixed: '',
          columnWidth: 120
        }, {
          userId: this.$store.state.user.name,
          functionId: 10002,
          serialNumber: '10002TableRollsPerCarton',
          tableId: '10002Table',
          tableName: 'Part Table',
          columnProp: 'rollsPerCarton',
          headerAlign: 'center',
          align: 'left',
          columnLabel: 'Rolls Per Carton',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 10,
          status: true,
          fixed: '',
          columnWidth: 120
        }, {
          userId: this.$store.state.user.name,
          functionId: 10002,
          serialNumber: '10002TableQtyPerCarton',
          tableId: '10002Table',
          tableName: 'Part Table',
          columnProp: 'qtyPerCarton',
          headerAlign: 'center',
          align: 'left',
          columnLabel: 'Qty Per Carton',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 10,
          status: true,
          fixed: '',
          columnWidth: 120
        },
        {
          userId: this.$store.state.user.name,
          functionId: 10002,
          serialNumber: '10002TableFreeInfo',
          tableId: '10002Table',
          tableName: 'Part Table',
          columnProp: 'freeInfo',
          headerAlign: 'center',
          align: 'left',
          columnLabel: 'Free Info',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 10,
          status: true,
          fixed: '',
          columnWidth: 120
        }, {
          userId: this.$store.state.user.name,
          functionId: 10002,
          serialNumber: '10002TableFreeInfo2',
          tableId: '10002Table',
          tableName: 'Part Table',
          columnProp: 'freeInfo2',
          headerAlign: 'center',
          align: 'left',
          columnLabel: 'Free Info2',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 10,
          status: true,
          fixed: '',
          columnWidth: 120
        }, {
          userId: this.$store.state.user.name,
          functionId: 10002,
          serialNumber: '10002TableTradingMark',
          tableId: '10002Table',
          tableName: 'Part Table',
          columnProp: 'tradingMark',
          headerAlign: 'center',
          align: 'left',
          columnLabel: 'Trading Mark',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 10,
          status: true,
          fixed: '',
          columnWidth: 120
        }, {
          userId: this.$store.state.user.name,
          functionId: 10002,
          serialNumber: '10002TablePackingWeight',
          tableId: '10002Table',
          tableName: 'Part Table',
          columnProp: 'packingWeight',
          headerAlign: 'center',
          align: 'left',
          columnLabel: 'Packing Weight',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 10,
          status: true,
          fixed: '',
          columnWidth: 120
        }, {
          userId: this.$store.state.user.name,
          functionId: 10002,
          serialNumber: '10002TableWeightUM',
          tableId: '10002Table',
          tableName: 'Part Table',
          columnProp: 'weightUmName',
          headerAlign: 'center',
          align: 'left',
          columnLabel: 'Weight UM',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 10,
          status: true,
          fixed: '',
          columnWidth: 120
        },
        {
          userId: this.$store.state.user.name,
          functionId: 10002,
          serialNumber: '10002TableActive',
          tableId: '10002Table',
          tableName: 'Part Table',
          columnProp: 'active',
          headerAlign: 'center',
          align: 'left',
          columnLabel: 'Active',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 10,
          status: true,
          fixed: '',
          columnWidth: 80
        }, {
          userId: this.$store.state.user.name,
          functionId: 10002,
          serialNumber: '10002TableCreateBy',
          tableId: '10002Table',
          tableName: 'Part Table',
          columnProp: 'createBy',
          headerAlign: 'center',
          align: 'left',
          columnLabel: 'Created By',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 10,
          status: true,
          fixed: '',
          columnWidth: 80
        }, {
          userId: this.$store.state.user.name,
          functionId: 10002,
          serialNumber: '10002TableCreateTime',
          tableId: '10002Table',
          tableName: 'Part Table',
          columnProp: 'createTime',
          headerAlign: 'center',
          align: 'left',
          columnLabel: 'Created Time',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 10,
          status: true,
          fixed: '',
          columnWidth: 140
        }, {
          userId: this.$store.state.user.name,
          functionId: 10002,
          serialNumber: '10002TableUpdateBy',
          tableId: '10002Table',
          tableName: 'Part Table',
          columnProp: 'updateBy',
          headerAlign: 'center',
          align: 'left',
          columnLabel: 'Updated By',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 10,
          status: true,
          fixed: '',
          columnWidth: 80
        }, {
          userId: this.$store.state.user.name,
          functionId: 10002,
          serialNumber: '10002TableUpdateTime',
          tableId: '10002Table',
          tableName: 'Part Table',
          columnProp: 'updateTime',
          headerAlign: 'center',
          align: 'left',
          columnLabel: 'Updated Time',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 10,
          status: true,
          fixed: '',
          columnWidth: 140
        },
      ],
      pictureColumnList: [
        {
          userId: this.$store.state.user.name,
          functionId: 10002,
          serialNumber: '10002Table22PictureNo',
          tableId: '10002Table2',
          tableName: '外部料号图片信息表',
          columnProp: 'certificationNo',
          headerAlign: 'center',
          align: 'left',
          columnLabel: 'Certification Code',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 10,
          status: true,
          fixed: '',
          columnWidth: 80
        }, {
          userId: this.$store.state.user.name,
          functionId: 10002,
          serialNumber: '10002Table22PictureDesc',
          tableId: '10002Table2',
          tableName: '外部料号图片信息表',
          columnProp: 'pictureDesc',
          headerAlign: 'center',
          align: 'left',
          columnLabel: 'Certification Desc',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 10,
          status: true,
          fixed: '',
          columnWidth: 180
        }, {
          userId: this.$store.state.user.name,
          functionId: 10002,
          serialNumber: '10002Table22CreateBy',
          tableId: '10002Table2',
          tableName: '外部料号图片信息表',
          columnProp: 'createBy',
          headerAlign: 'center',
          align: 'left',
          columnLabel: 'Created By',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 10,
          status: true,
          fixed: '',
          columnWidth: 80
        }, {
          userId: this.$store.state.user.name,
          functionId: 10002,
          serialNumber: '10002Table22CreateTime',
          tableId: '10002Table2',
          tableName: '外部料号图片信息表',
          columnProp: 'createTime',
          headerAlign: 'center',
          align: 'center',
          columnLabel: 'Created Time',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 10,
          status: true,
          fixed: '',
          columnWidth: 180
        }, {
          userId: this.$store.state.user.name,
          functionId: 10002,
          serialNumber: '10002Table22UpdateBy',
          tableId: '10002Table2',
          tableName: '外部料号图片信息表',
          columnProp: 'updateBy',
          headerAlign: 'center',
          align: 'left',
          columnLabel: 'Updated By',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 10,
          status: true,
          fixed: '',
          columnWidth: 80
        }, {
          userId: this.$store.state.user.name,
          functionId: 10002,
          serialNumber: '10002Table22UpdateTime',
          tableId: '10002Table2',
          tableName: '外部料号图片信息表',
          columnProp: 'updateTime',
          headerAlign: 'center',
          align: 'center',
          columnLabel: 'Updated Time',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 10,
          status: true,
          fixed: '',
          columnWidth: 180
        },
      ],
      customerColumnList: [
        {
          userId: this.$store.state.user.name,
          functionId: 10002,
          serialNumber: '10002Table3CustomerNo',
          tableId: '10002Table3',
          tableName: '外部料号客户信息表',
          columnProp: 'customerNo',
          headerAlign: 'center',
          align: 'left',
          columnLabel: 'Customer No',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 10,
          status: true,
          fixed: '',
          columnWidth: 80
        }, {
          userId: this.$store.state.user.name,
          functionId: 10002,
          serialNumber: '10002Table3CustomerName',
          tableId: '10002Table3',
          tableName: '外部料号客户信息表',
          columnProp: 'customerName',
          headerAlign: 'center',
          align: 'left',
          columnLabel: 'Customer Name',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 10,
          status: true,
          fixed: '',
          columnWidth: 120
        }, {
          userId: this.$store.state.user.name,
          functionId: 10002,
          serialNumber: '10002Table3CreateTime',
          tableId: '10002Table3',
          tableName: '外部料号客户信息表',
          columnProp: 'createTime',
          headerAlign: 'center',
          align: 'center',
          columnLabel: 'Created Time',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 10,
          status: true,
          fixed: '',
          columnWidth: 140
        }, {
          userId: this.$store.state.user.name,
          functionId: 10002,
          serialNumber: '10002Table3CreateBy',
          tableId: '10002Table3',
          tableName: '外部料号客户信息表',
          columnProp: 'createBy',
          headerAlign: 'center',
          align: 'left',
          columnLabel: 'Created By',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 10,
          status: true,
          fixed: '',
          columnWidth: 80
        }, {
          userId: this.$store.state.user.name,
          functionId: 10002,
          serialNumber: '10002Table3UpdateTime',
          tableId: '10002Table3',
          tableName: '外部料号客户信息表',
          columnProp: 'updateTime',
          headerAlign: 'center',
          align: 'center',
          columnLabel: 'Updated Time',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 10,
          status: true,
          fixed: '',
          columnWidth: 140
        }, {
          userId: this.$store.state.user.name,
          functionId: 10002,
          serialNumber: '10002Table3UpdateBy',
          tableId: '10002Table3',
          tableName: '外部料号客户信息表',
          columnProp: 'updateBy',
          headerAlign: 'center',
          align: 'left',
          columnLabel: 'Updated By',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 10,
          status: true,
          fixed: '',
          columnWidth: 80
        },
      ],
      manufacturerColumnList: [
        {
          userId: this.$store.state.user.name,
          functionId: 10002,
          serialNumber: '10002Table4ManufacturerNo',
          tableId: '10002Table4',
          tableName: '外部料号供应商信息表',
          columnProp: 'manufacturerNo',
          headerAlign: 'center',
          align: 'left',
          columnLabel: 'Manufacturer No',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 10,
          status: true,
          fixed: '',
          columnWidth: 80
        }, {
          userId: this.$store.state.user.name,
          functionId: 10002,
          serialNumber: '10002Table4ManufacturerName',
          tableId: '10002Table4',
          tableName: '外部料号供应商信息表',
          columnProp: 'manufacturerName',
          headerAlign: 'center',
          align: 'left',
          columnLabel: 'Manufacturer Name',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 10,
          status: true,
          fixed: '',
          columnWidth: 120
        }, {
          userId: this.$store.state.user.name,
          functionId: 10002,
          serialNumber: '10002Table4CreateTime',
          tableId: '10002Table4',
          tableName: '外部料号供应商信息表',
          columnProp: 'createTime',
          headerAlign: 'center',
          align: 'center',
          columnLabel: 'Created Time',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 10,
          status: true,
          fixed: '',
          columnWidth: 140
        }, {
          userId: this.$store.state.user.name,
          functionId: 10002,
          serialNumber: '10002Table4CreateBy',
          tableId: '10002Table4',
          tableName: '外部料号供应商信息表',
          columnProp: 'createBy',
          headerAlign: 'center',
          align: 'left',
          columnLabel: 'Created By',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 10,
          status: true,
          fixed: '',
          columnWidth: 80
        }, {
          userId: this.$store.state.user.name,
          functionId: 10002,
          serialNumber: '10002Table4UpdateTime',
          tableId: '10002Table4',
          tableName: '外部料号供应商信息表',
          columnProp: 'updateTime',
          headerAlign: 'center',
          align: 'center',
          columnLabel: 'Updated Time',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 10,
          status: true,
          fixed: '',
          columnWidth: 140
        }, {
          userId: this.$store.state.user.name,
          functionId: 10002,
          serialNumber: '10002Table4UpdateBy',
          tableId: '10002Table4',
          tableName: '外部料号供应商信息表',
          columnProp: 'updateBy',
          headerAlign: 'center',
          align: 'left',
          columnLabel: 'Updated By',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 10,
          status: true,
          fixed: '',
          columnWidth: 80
        },
      ],
      rules: {
        site: [
          {
            required: true,
            message: ' ',
            trigger: ['blur', 'change']
          }
        ],
      },
      activeName: 'partPicture',
      currentPart: {},
      externalPartCustomerList: [],
      pictureList: [],
      externalPartManufacturerList: [],
      base64List: [],
      countryList: [],
    }
  },
  watch: {
    currentPart (newVal, oldVal) {
      if (!this.ofComponents) {
        // 调用 子组件信息查询
        this.getExternalPartCustomerList()
        this.getExternalPartPictureList()
        this.getExternalPartManufacturerList()
      }
    },
    'savePart.partNo' (newVal, oldVal) {
      this.savePart.partNo = newVal.toUpperCase()
    },
    'savePart.category' (newVal, oldVal) {
      const category = this.partCategoryList.find((item) => item.categoryValue === newVal)
      if (category) {
        // this.savePart.manufacturerRequired = category.manufacturerRequired;
        // this.savePart.moldCodeRequired = category.moldCodeRequired;
        // this.savePart.serialNumberRequired = category.serialNumberRequired;
        // this.savePart.rollLabelRequired = category.rollLabelRequired;
        // if (this.savePart.serialNumberRequired === 'Y'){
        //   this.savePart.qtyPerRoll = 1;
        //   this.savePart.rollsPerCarton = 1;
        // }
        // if (category.showCartonQtyPerRoll === 'N'){
        //   this.savePart.qtyPerRoll = 1;
        // }
        // if (category.showCartonRollsPerCarton === 'N'){
        //   this.savePart.rollsPerCarton = 1;
        // }
        // this.partRules.rollsPerCarton[0].message = `Please input ${category.qtyPerRollPart}`
        // this.savePart.qtyPerCarton = this.qtyPerCarton();
        this.category = JSON.parse(JSON.stringify(category))
      }
    },
    'part.partNo' (newVal, oldVal) {
      this.part.partNo = newVal.toUpperCase()
    },
    'savePart.qtyPerRoll' (newVal, oldVal) {
      this.savePart.qtyPerCarton = this.qtyPerCarton()
    },
    'savePart.rollsPerCarton' (newVal, oldVal) {
      this.savePart.qtyPerCarton = this.qtyPerCarton()
    },
  },
  methods: {

    // 获取基础数据列表S
    getBaseList (val,type) {
      this.tagNo = val
      this.$nextTick(() => {
        let strVal = ''
        let conSql = ''
        if (val === 93 ) {
          strVal = this.tempData.site ? this.tempData.site : ''
        }
        this.$refs.baseList.init(val, strVal,conSql)
      })
    },

    /* 列表方法的回调 */
    getBaseData (val) {
      if (this.tagNo === 93) {
        this.tempData.site = val.SiteID
      }
    },

    getExternalPartPictureList (val) {
      let params = {
        partNo: this.currentPart.partNo,
        site: this.currentPart.site,
        pictureClassify: 'BoxPicture',
      }
      getExternalPartPictureList(params).then(({data}) => {
        if (data && data.code === 0) {
          this.pictureList = data.rows
          if (val === true) {
            this.$nextTick(() => {
              this.$refs.picture.handleBasePictureList()
            })
          }
        } else {
          this.$message.warning(data.msg)
        }
      }).catch((error) => {
        this.$message.error(error)
      })
    },
    rowPartStyle ({row}) {
      if (row.partNo === this.currentPart.partNo) {
        return {
          background: 'rgb(232,246,246)',
        }
      }
    },
    selectUnitList () {
      selectUnitList().then(({data}) => {
        if (data && data.code === 0) {
          this.unitList = data.rows
          if (this.unitList.length > 0) {
            this.savePart.umId = this.unitList[0].umId
          }
        } else {
          this.$message.warning(data.msg)
        }
      }).catch((error) => {
        this.$message.error(error)
      })
    },
    selectExternalPartList () {
      let params = {
        ...this.part,
        site: this.$store.state.user.site,
        provisionalData: 'N',
      }
      selectExternalPartList(params).then(({data}) => {
        if (data && data.code === 0) {
          this.partList = data.rows
          if (this.partList.length > 0 && !this.ofComponents) {
            this.currentPart = {...this.partList[0]}
          }
        } else {
          this.$message.warning(data.msg)
        }
      }).catch((error) => {
        this.$message.error(error)
      })
    },
    handleSave () {
      if (this.savePartVisible) {
        if ((this.savePart.packingWeight || this.savePart.packingWeight == 0) && !this.savePart.weightUmId) {
          this.$message.warning('Please select Weight UM')
          return
        }
        this.$refs.savePartForm.validate((valid, obj) => {
          if (valid) {
            if (this.savePart.qtyPerCarton === 0) {
              this.$message.warning('Qty Per Carton can not be 0')
              return
            }
            let params = {
              ...this.savePart,
              site: this.$store.state.user.site,
              createBy: this.$store.state.user.name,
              createTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
            }
            saveExternalPart(params).then(({data}) => {
              if (data && data.code === 0) {
                this.handleSelectExternalPartPage()
                this.savePartVisible = false
                this.$message.success(data.msg)
              } else {
                this.$message.warning(data.msg)
              }
            }).catch((error) => {
              this.$message.error(error)
            })
          } else {
            for (let i = 0; i < Object.keys(obj).length; i++) {
              this.$message.warning(obj[Object.keys(obj)[i]][0].message)
              break
            }
          }
        })
      } else {
        this.savePart = {
          ...part,
          active: 'Y',
          umId: this.unitList.length > 0 ? this.unitList[0].umId : '',
          category: '',
          manufacturerRequired: 'N',
          moldCodeRequired: 'N',
          serialNumberRequired: 'N',
        }
        this.getCountryList()
        this.savePart.freeInfo2 = this.defaultCountry
        this.savePart.category = this.partCategoryList.length > 0 ? this.partCategoryList[0].categoryValue : ''
        this.savePartVisible = true
      }
    },
    closeSavePart () {
      this.savePart = {
        ...part,
        active: 'Y',
      }
      if (this.unitList.length > 0) {
        this.savePart.umId = this.unitList[0].umId
      }
      this.$refs.savePartForm.resetFields()
    },
    removeExternalPart (row) {
      removeExternalPart(row).then(({data}) => {
        if (data && data.code === 0) {
          this.selectExternalPartList()
          this.$message.success(data.msg)
        } else {
          this.$message.warning(data.msg)
        }
      }).catch((error) => {
        this.$message.error(error)
      })
    },
    handleRowClick (row, column, event, type) {
      this.currentPart = {...row}
      if (type === 0) {
        this.getCountryList()
        this.savePart = {...row}
        this.savePartVisible = true
      }
    },
    handleDblRowClick (row, column, event, type) {
      if (this.ofComponents) {
        this.$emit('rowClick', row)
      } else {
        this.currentPart = {...row}
        if (type === 0) {
          this.savePart = {...row}
          this.savePartVisible = true
        }
      }
    },
    handleUpdate () {
      if ((this.savePart.packingWeight || this.savePart.packingWeight == 0) && !this.savePart.weightUmId) {
        this.$message.warning('Please select Weight UM')
        return
      }
      this.$refs.savePartForm.validate((valid, obj) => {
        if (valid) {
          if (this.savePart.qtyPerCarton === 0) {
            this.$message.warning('Qty Per Carton can not be 0')
            return
          }
          let params = {
            ...this.savePart,
            site: this.$store.state.user.site,
            createBy: undefined,
            createTime: undefined,
            updateBy: this.$store.state.user.name,
            updateTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
          }
          updateExternalPart(params).then(({data}) => {
            if (data && data.code === 0) {
              this.handleSelectExternalPartPage()
              this.savePartVisible = false
              this.$message.success(data.msg)
            } else {
              this.$message.warning(data.msg)
            }
          }).catch((error) => {
            this.$message.error(error)
          })
        } else {
          for (let i = 0; i < Object.keys(obj).length; i++) {
            this.$message.warning(obj[Object.keys(obj)[i]][0].message)
            break
          }
        }
      })
    },
    getExternalPartCustomerList () {
      let params = {
        partNo: this.currentPart.partNo,
        site: this.currentPart.site,
      }
      getExternalPartCustomerList(params).then(({data}) => {
        if (data && data.code === 0) {
          this.externalPartCustomerList = data.rows
        } else {
          this.$message.warning(data.msg)
        }
      }).catch((error) => {
        this.$message.error(error)
      })
    },
    getExternalPartManufacturerList () {
      let params = {
        partNo: this.currentPart.partNo,
        site: this.currentPart.site,
      }
      getExternalPartManufacturerList(params).then(({data}) => {
        if (data && data.code === 0) {
          this.externalPartManufacturerList = data.rows
        } else {
          this.$message.warning(data.msg)
        }
      }).catch((error) => {
        this.$message.error(error)
      })
    },
    async convertToBase64 (fileUrls) {
      this.base64List = []
      for (const fileUrl of fileUrls) {
        const base64Url = await this.getFileAsBase64(fileUrl)
        this.base64List.push(base64Url)
      }
    },
    getFileAsBase64 (fileUrl) {
      return new Promise((resolve, reject) => {
        const img = new Image()
        img.crossOrigin = 'Anonymous'
        img.src = fileUrl
        img.onload = () => {
          const canvas = document.createElement('canvas')
          const ctx = canvas.getContext('2d')
          canvas.width = img.width
          canvas.height = img.height
          ctx.drawImage(img, 0, 0)
          const base64data = canvas.toDataURL('image/jpeg')
          resolve(base64data)
        }
        img.onerror = (error) => {
          reject(error)
        }
      })
    },
    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) {
          this.caseTable(data.rows, columnId)
        } 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) {
          this.caseTable(data.rows, columnId)
        } else {

        }
      })
    },
    caseTable (list, columnId) {
      if (list.length > 0) {
        switch (columnId) {
          case 1:
            this.columnList = list
            break
          case 2:
            this.pictureColumnList = list
            break
          case 3:
            this.customerColumnList = list
            break
          case 4:
            this.manufacturerColumnList = list
            break
        }
      }
    },
    qtyPerCarton () {
      return new Decimal(this.savePart.qtyPerRoll).mul(this.savePart.rollsPerCarton).toNumber()
    },
    getCategoryList () {
      let params = {}
      getCategoryList(params).then(({data}) => {
        if (data && data.code === 0) {
          this.partCategoryList = data.rows
        } else {
          this.$message.warning(data.msg)
        }
      }).catch((error) => {
        this.$message.error(error)
      })
    },
    changeQtyRollCarton () {
      this.savePart.qtyPerRoll = this.savePart.qtyPerCarton
    },
    getCountryList () {
      let params = {}
      countryList(params).then(({data}) => {
        if (data && data.code === 0) {
          this.countryList = data.rows
        } else {
          this.$message.warning(data.msg)
        }
      }).catch((error) => {
        this.$message.error(error)
      })
    },
    getUserSiteDefaultCountry () {
      let params = this.$store.state.user.site
      getSiteDetail(params).then(({data}) => {
        if (data && data.code === 0) {
          if (data.row && data.row.defaultCountry) {
            this.defaultCountry = data.row.defaultCountry
          }
        } else {
          this.$message.warning(data.msg)
        }
      }).catch((error) => {
        this.$message.error(error)
      })
    },
    handleSelectExternalPartPage () {
      let params = {
        ...this.part,
        site: this.$store.state.user.site,
        no: this.no,
        size: this.size,
        provisionalData: 'N',
      }
      selectExternalPartPage(params).then(({data}) => {
        if (data && data.code === 0) {
          this.partList = data.rows
          if (this.partList.length > 0 && !this.ofComponents) {
            this.currentPart = {...this.partList[0]}
          }
          this.total = data.total
        } else {
          this.$message.warning(data.msg)
        }
      }).catch((error) => {
        this.$message.error(error)
      })
    },
    handleSizeChange (val) {
      this.size = val
      this.handleSelectExternalPartPage()
    },
    handleCurrentChange (val) {
      this.no = val
      this.handleSelectExternalPartPage()
    },
    changeCategory (val) {
      const category = this.partCategoryList.find((item) => item.categoryValue === val)
      if (category) {
        this.savePart.manufacturerRequired = category.manufacturerRequired
        this.savePart.moldCodeRequired = category.moldCodeRequired
        this.savePart.serialNumberRequired = category.serialNumberRequired
        this.savePart.rollLabelRequired = category.rollLabelRequired
        if (this.savePart.serialNumberRequired === 'Y') {
          this.savePart.qtyPerRoll = 1
          this.savePart.rollsPerCarton = 1
        }
        if (category.showCartonQtyPerRoll === 'N') {
          this.savePart.qtyPerRoll = 1
        }
        if (category.showCartonRollsPerCarton === 'N') {
          this.savePart.rollsPerCarton = 1
        }
        this.partRules.rollsPerCarton[0].message = `Please input ${category.qtyPerRollPart}`
        this.savePart.qtyPerCarton = this.qtyPerCarton()
        this.category = JSON.parse(JSON.stringify(category))
      }
    },
    // ======== 导出相关方法 ========
    /**
     * 导出excel
     */
    async createExportData () {
      let params = {
        ...this.part,
        site: this.$store.state.user.site,
        no:1,
        size:-1,
      }
      await selectExternalPartPage(params).then(({data}) => {
        this.resultList = data.rows
      })
      return this.resultList
    },

    startDownload () {},

    finishDownload () {},

    fields () {
      let json = '{'
      this.columnList.forEach((item, index) => {
        if (index == this.columnList.length - 1) {
          json += '"' + item.columnLabel + '"' + ':' + '"' + item.columnProp + '"'
        } else {
          json += '"' + item.columnLabel + '"' + ':' + '"' + item.columnProp + '"' + ','
        }
      })
      json += '}'
      let s = eval('(' + json + ')')
      return s
    },

    partUpload () {
      this.visible = true
    },

    // 关闭modal
    closeUploadDialog () {
      this.fileList = []
      // 清空文件上传记录
      this.$refs.uploadFile.clearFiles()
      // 关闭当前的页面
      this.visible = false
    },

    // 保修当前的数据
    saveUploadFile () {
      // 判断文件是否上传
      if (null == this.fileList || 0 === this.fileList.length) {
        this.$message.error("Please upload the file first!")
        return false
      }
        // 提示将删除之前的数据
        this.$confirm('Do you confirm the upload? If the Part Info already exists, we will delete it!', 'Warning', {
          confirmButtonText: 'OK',
          cancelButtonText: 'Cancel',
          type: 'warning'
        }).then(() => {
          // 判断文件是否上传
          if (null == this.fileList || 0 === this.fileList.length) {
            this.$message.error("请先上传文件!")
            return false
          }
          const formData = new FormData()
          formData.append("file", this.fileList[0].raw)
          formData.append("createBy", this.$store.state.user.name)
          formData.append("site", this.tempData.site.toString())
          this.isLoading = true
          savePartInfoByExcel(formData).then(({data}) => {
            if (data.code === 0) {
              // 关闭窗口并刷新页面
              this.provisionalDataDialogHandle()
            } else {
              this.isLoading = false
              this.$message.warning(data.msg)
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: 'Cancel upload'
          })
        });
    },

    provisionalDataDialogHandle () {
      getProvisionalDataList().then(({data}) => {
        if (data.code === 0) {
          this.provisionalDataList = data.rows
          this.isLoading = false
          this.provisionalDataVisible = true
        } else {
          this.isLoading = false
          this.$message.warning(data.msg)
        }
      })
    },

    // 上传之前
    beforeUploadHandle (file) {
      let extName = file[0].name.substring(file[0].name.lastIndexOf('.')).toLowerCase()
      if (!(extName === '.xlsx' || extName === '.xls')) {
        this.$message.error('数据导入失败，请选择正确的xlsx模板文件')
        return false
      }
    },

    // 选择上传文件时
    onRemove(file, fileList){
      this.fileList = fileList
    },
    onChange(file, fileList){
      this.fileList = fileList
    },

    // 下载
    async downloadFile () {
      let file = {
        id: 0,
        fileName: ''
      }
      let tempData = this.tempData
      await queryFileId(tempData).then(({data}) => {
        if (data && data.code === 0) {
          file.id = data.data.id
          file.fileName = data.data.fileName
        } else {
          this.$alert(data.msg, '错误', {
            confirmButtonText: '确定'
          })
        }
      })
      await downLoadObjectFile(file).then(({data}) => {
        // 不限制文件下载类型
        const blob = new Blob([data], {type: "application/octet-stream"})
        // 下载文件名称
        const fileName = file.fileName
        // a标签下载
        const linkNode = document.createElement('a')
        // a标签的download属性规定下载文件的名称
        linkNode.download = fileName
        linkNode.style.display = 'none'
        // 生成一个Blob URL
        linkNode.href = URL.createObjectURL(blob)
        document.body.appendChild(linkNode)
        // 模拟在按钮上的一次鼠标单击
        linkNode.click()
        // 释放URL 对象
        URL.revokeObjectURL(linkNode.href)
        document.body.removeChild(linkNode)
      })
    },

    provisionalDataAlterHandle (type) {
      if (type === 1){
        this.isLoading2 = true
      } else if (type === 2){
        this.isLoading3 = true
      }
      let inData={
        provisionalDataList: this.provisionalDataList,
        type: type
      }
      provisionalDataAlterHandle(inData).then(({data}) => {
        if (data.code === 0) {
          if (type === 1) {
            this.$message.success(data.msg)
            this.provisionalDataVisible = false
            this.visible = false
            this.handleSelectExternalPartPage()
            this.isLoading2 = false
          } else if (type === 2) {
            this.$message.warning('Import cancelled!')
            this.provisionalDataVisible = false
            this.isLoading3 = false
          }
        } else {
          this.$message.warning(data.msg)
          if (type === 1) {
            this.isLoading2 = false
          } else if (type === 2) {
            this.isLoading3 = false
          }
        }
      })
    },
  },
  computed: {},
  activated () {
    if (this.$route.query.site && this.$route.query.partNo) {
      this.part.site = this.$route.query.site
      this.part.partNo = this.$route.query.partNo
      this.handleSelectExternalPartPage()
    }
  },
  created () {
    this.provisionalDataAlterHandle(3)
    this.selectUnitList()
    this.getCategoryList()
    // this.getCountryList();
    // this.selectExternalPartList();
    this.handleSelectExternalPartPage()
    this.getUserSiteDefaultCountry()
    this.getTableUserColumn('10002Table', 1)
    this.getTableUserColumn('10002Table2', 2)
    this.getTableUserColumn('10002Table3', 3)
    this.getTableUserColumn('10002Table4', 4)
  }
}
</script>

<template>
  <div>
    <el-form :inline="true" label-position="top" :model="part" label-width="100px">
      <el-form-item label="Part No">
        <el-input v-model="part.partNo"></el-input>
      </el-form-item>
      <el-form-item label="Part Description">
        <el-input v-model="part.partDesc"></el-input>
      </el-form-item>
      <el-form-item label="Part Category">
        <el-select v-model="part.category" placeholder="">
          <el-option label="All" value=""></el-option>
          <el-option :label="item.categoryName" :value="item.categoryValue" :key="item.id"
                     v-for="item in partCategoryList"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="Active">
        <el-select v-model="part.active" placeholder="">
          <el-option label="All" value=""></el-option>
          <el-option label="Active" value="Y"></el-option>
          <el-option label="Not Active" value="N"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label=" ">
        <el-button type="primary" @click="handleSave" v-if="!ofComponents">New</el-button>
        <!--     <el-button type="primary" @click="selectExternalPartList">Query</el-button>-->
        <el-button type="primary" @click="handleSelectExternalPartPage">Query</el-button>
        <el-button type="primary" icon="el-icon-upload" v-if="this.$store.state.user.userType !== 'Common Users'" @click="partUpload()">Import Part Info</el-button>
        <download-excel
          :fields="fields()"
          :data="exportData"
          type="xls"
          :name="exportName"
          :header="exportHeader"
          :footer="exportFooter"
          :fetch="createExportData"
          :before-generate="startDownload"
          :before-finish="finishDownload"
          worksheet="Export Information"
          class="el-button el-button--primary el-button--medium">
          {{ "Export" }}
        </download-excel>
      </el-form-item>
    </el-form>

    <el-table :data="partList" :height="height" :row-style="rowPartStyle" @row-click="handleRowClick"
              @row-dblclick="handleDblRowClick" :loading="partTableLoading" border style="width: 100%;margin-top: 5px">
      <el-table-column v-if="!ofComponents"
                       header-align="center"
                       align="center"
                       width="100"
                       fixed="left"
                       label="Actions">
        <template slot-scope="scope">
          <el-link style="cursor:pointer;" @click="handleRowClick(scope.row,null,null,0)">Edit</el-link>
          <el-link style="cursor:pointer;" @click="removeExternalPart(scope.row)">Delete</el-link>
        </template>
      </el-table-column>
      <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.columnHidden"> {{ scope.row[item.columnProp] }}</span>
          <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]"
                                             style="width: 100px; height: 80px"/></span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="no"
      :page-sizes="[50,100, 200, 300, 400]"
      :page-size="size"
      layout="sizes, prev, pager, next,total"
      :total="total">
    </el-pagination>
    <el-tabs v-model="activeName" v-if="!ofComponents">
      <el-tab-pane label="Part Certification" name="partPicture">
        <picture-module ref="picture" :column-list="pictureColumnList" :part="currentPart" :data-list="pictureList"
                        @refresh="getExternalPartPictureList"></picture-module>
      </el-tab-pane>
      <el-tab-pane label="Linked Customer" name="linkedCustomer">
        <linked-customer :column-list="customerColumnList" :part="currentPart" :data-list="externalPartCustomerList"
                         @refresh="getExternalPartCustomerList" :visible="true"></linked-customer>
      </el-tab-pane>
      <el-tab-pane label="Linked Manufacturer" name="linkedManufacturer">
        <linked-manufacturer :column-list="manufacturerColumnList" :part="currentPart"
                             :data-list="externalPartManufacturerList" @refresh="getExternalPartManufacturerList"
                             :visible="true"></linked-manufacturer>
      </el-tab-pane>
      <el-tab-pane label="Product Label" name="productLabel" v-if="this.$store.state.user.autoSerialNumber === 'Y'">
        <label-template :part="currentPart"></label-template>
      </el-tab-pane>
    </el-tabs>

    <el-dialog v-drag :title="`Part`" :close-on-click-modal="false" @close="closeSavePart" width="550px"
               :visible.sync="savePartVisible">
      <el-form :model="savePart" label-position="top" ref="savePartForm" :rules="partRules">
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="Part No" prop="partNo" :show-message="false">
              <el-input :readonly="savePart.site !== ''" :disabled="savePart.site !== ''"
                        v-model="savePart.partNo"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="15">
            <el-form-item label="Part Description" prop="partDesc" :show-message="false">
              <el-input v-model="savePart.partDesc"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="$store.state.user.autoSerialNumber === 'Y'">
            <el-form-item label="Print Str1" :show-message="false">
              <el-input v-model="savePart.printStr1"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7" v-if="$store.state.user.autoSerialNumber === 'Y'">
            <el-form-item label="Print Str2" :show-message="false">
              <el-input v-model="savePart.printStr2"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="$store.state.user.autoSerialNumber === 'Y'">
            <el-form-item label="Print Str3" :show-message="false">
              <el-input v-model="savePart.printStr3"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="Part Category" prop="category" :show-message="false">
              <el-select v-model="savePart.category" placeholder="" @change="changeCategory" style="width: 100%">
                <el-option :label="item.categoryName" :value="item.categoryValue" :key="item.id"
                           v-for="item in partCategoryList"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="UM" prop="umId" :show-message="false">
              <el-select v-model="savePart.umId" placeholder="" :show-message="false" style="width: 100%">
                <el-option v-for="item in unitList" :key="item.umId" :label="item.umName"
                           :value="item.umId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item v-if="savePart.moldCodeRequired === 'Y'" key="moldCode" label="Mold Code" prop="moldCode"
                          :show-message="false">
              <el-input v-model="savePart.moldCode"></el-input>
            </el-form-item>
            <el-form-item v-else label="Mold Code">
              <el-input v-model="savePart.moldCode" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8" v-if="category.rollLabelRequired === 'Y'">
            <el-form-item label="Qty Per Roll" prop="qtyPerRoll" :show-message="false">
              <el-input-number :step="0" :min="0" :controls="false"
                               :disabled="this.savePart.serialNumberRequired === 'Y'"
                               v-model="savePart.qtyPerRoll"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="7" v-if="category.rollLabelRequired === 'Y'">
            <el-form-item label="Rolls Per Carton" prop="rollsPerCarton" :show-message="false">
              <el-input-number :step="0" :min="0" :controls="false"
                               :disabled="this.savePart.serialNumberRequired === 'Y'"
                               v-model="savePart.rollsPerCarton"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="category.qtyPerRollPart" prop="qtyPerCarton" :show-message="false">
              <el-input-number :step="0" :min="0" :controls="false" @change="changeQtyRollCarton"
                               :disabled="category.editQtyPerCarton === 'N'"
                               v-model="savePart.qtyPerCarton"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="OOC" :show-message="false" prop="freeInfo2">
              <el-select v-model="savePart.freeInfo2" placeholder="" style="width: 100%">
                <el-option v-for="item in countryList" :label="item.countryNo" :value="item.countryNo"
                           :key="item.countryNo"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="Rev No" prop="rev" :show-message="false">
              <el-input v-model="savePart.rev"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="Free Info" :show-message="false">
              <el-input v-model="savePart.freeInfo"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="3">
            <el-form-item label=" " :show-message="false">
              <el-checkbox v-model="savePart.active" true-label="Y" false-label="N">Active</el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label=" " :show-message="false">
              <el-checkbox v-model="savePart.tradingMark" true-label="Y" false-label="N">Trading Mark</el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="Packing Weight" prop="packingWeight">
              <el-input-number :min="0" :controls="false" v-model="savePart.packingWeight"
                               :precision="6"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="Weight UM" prop="weightUmId" :show-message="false">
              <el-select v-model="savePart.weightUmId" placeholder="" :show-message="false" clearable
                         style="width: 100%">
                <el-option v-for="item in unitList" :key="item.weightUmId" :label="item.umName"
                           :value="item.umId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label=" " :show-message="false">
              <el-checkbox v-model="savePart.rollLabelFlag" true-label="Y" false-label="N">45*20 Label</el-checkbox>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" v-if="savePart.site !== ''" @click="handleUpdate">Save</el-button>
        <el-button type="primary" v-else @click="handleSave">Save</el-button>
        <el-button @click="savePartVisible = false">Cancel</el-button>
      </div>
    </el-dialog>

    <el-dialog title="File Import" :z-index="1999" @close="closeUploadDialog" :close-on-click-modal="false" :visible.sync="visible" width="390px" style="height: 520px;">
      <el-form :inline="true" label-position="top" label-width="80px">
        <el-form-item prop="site" :rules="rules.site">
          <span slot="label" style="" class="big-label">
            <a herf="#" @click="getBaseList(93)">Site</a>
          </span>
          <el-input v-model="tempData.site" style="width: 130px"></el-input>
        </el-form-item>
        <el-form-item label=" ">
          <el-button type="primary" @click="downloadFile()">Download file template</el-button>
        </el-form-item>
        <el-row>
          <el-col :span="24">
            <el-upload class="customer-upload" drag action="javascript:void(0);" ref="uploadFile" :limit="1" accept=".xlsx,.xls"
                       :before-upload="beforeUploadHandle" :on-remove="onRemove" :on-change="onChange" :auto-upload="false" style="text-align: left;">
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">Drag the file here，or<em> click to upload</em></div>
            </el-upload>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" :disabled="isLoading" @click="saveUploadFile">{{ isLoading ? 'Saving...' : 'Save' }} </el-button>
        <el-button type="primary" @click="closeUploadDialog">Cancel</el-button>
      </span>
    </el-dialog>

    <el-dialog title="Import Info View" @close="provisionalDataAlterHandle(3)" :close-on-click-modal="false" :visible.sync="provisionalDataVisible" width="1100px">
      <el-table :data="provisionalDataList" :height="height + 200" 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.columnHidden"> {{ scope.row[item.columnProp] }}</span>
            <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]"
                                               style="width: 100px; height: 80px"/></span>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="provisionalDataAlterHandle(1)">{{ isLoading2 ? 'Saving...' : 'Confirm Import'}}</el-button>
        <el-button type="primary" @click="provisionalDataAlterHandle(2)">{{ isLoading3 ? 'Canceling...' : 'Cancel'}}</el-button>
      </span>
    </el-dialog>

    <Chooselist ref="baseList"  @getBaseData="getBaseData"></Chooselist>

    <div v-show="false">
      <img :src="item" v-for="(item,index) in base64List" :key="index" style="display: none">
    </div>
</div>
</template>

<style scoped>
.big-label {
  font-size: medium; /* 调整字号 */
}
</style>