zfire-newmall-admin/src/views/salesPurchasing/mixins/storage_codes.js

import { required } from '@/components/template/rules_verify.js'
import {
  goodsPurchaseItemAddCode,
  goodsPurchaseCodeList,
  goodsPurchaseItemDelCode
} from '@/api/goodsPurchasedStored.js'
export default {
  data() {
    return {}
  },
  computed: {
    storage_codes() {
      return [
        {
          columnAttributes: {
            label: '品牌',
            prop: 'brandId',
            propName: 'brandName',
            width: 160
          },
          render: (h, { row, column, index }) => {
            return this.isEditIndex == index ? (
              <div class="redbordererr">
                <el-form-item
                  label=""
                  lebel-width="0px"
                  prop={`items.${index}.${column.columnAttributes.prop}`}
                  rules={required}
                >
                  <el-select
                    value={row[column.columnAttributes.prop]}
                    onInput={val => {
                      row[column.columnAttributes.prop] = val
                    }}
                    onChange={val => {
                      this.shanchuCodejichu(row, 0)
                      if (val) {
                        row[column.columnAttributes.propName] = this.arrQC(this.formData.items, {
                          value: 'brandId',
                          label: 'brandName'
                        }).find(item => item.value == val).label
                      } else {
                        row[column.columnAttributes.propName] = ''
                      }
                    }}
                    placeholder="请选择"
                  >
                    {this.arrQC(this.formData.items, { value: 'brandId', label: 'brandName' }).map((item, index_) => (
                      <el-option key={index_} label={item.label} value={item.value}></el-option>
                    ))}
                  </el-select>
                </el-form-item>
              </div>
            ) : (
              <div style="padding:0 6px">{row[column.columnAttributes.propName]}</div>
            )
          }
        },
        {
          columnAttributes: {
            label: '商品大类',
            prop: 'mainId',
            propName: 'mainName',
            width: 160
          },
          render: (h, { row, column, index }) => {
            return this.isEditIndex == index ? (
              <div class="redbordererr">
                <el-form-item
                  label=""
                  lebel-width="0px"
                  prop={`items.${index}.${column.columnAttributes.prop}`}
                  rules={required}
                >
                  <el-select
                    value={row[column.columnAttributes.prop]}
                    onInput={val => {
                      row[column.columnAttributes.prop] = val
                    }}
                    onChange={val => {
                      this.shanchuCodejichu(row, 1)
                      if (val) {
                        row[column.columnAttributes.propName] = this.arrQC(
                          this.formData.items.filter(item => item.brandId === row.brandId),
                          { value: 'mainId', label: 'mainName' }
                        ).find(item => item.value == val).label
                      } else {
                        row[column.columnAttributes.propName] = ''
                      }
                    }}
                    placeholder="请选择"
                  >
                    {this.arrQC(
                      this.formData.items.filter(item => item.brandId === row.brandId),
                      { value: 'mainId', label: 'mainName' }
                    ).map((item, index_) => (
                      <el-option key={index_} label={item.label} value={item.value}></el-option>
                    ))}
                  </el-select>
                </el-form-item>
              </div>
            ) : (
              <div style="padding:0 6px">{row[column.columnAttributes.propName]}</div>
            )
          }
        },
        {
          columnAttributes: {
            label: '商品小类',
            prop: 'smallId',
            propName: 'smallName',
            width: 160
          },
          render: (h, { row, column, index }) => {
            return this.isEditIndex == index ? (
              <div class="redbordererr">
                <el-form-item
                  label=""
                  lebel-width="0px"
                  prop={`items.${index}.${column.columnAttributes.prop}`}
                  rules={required}
                >
                  <el-select
                    value={row[column.columnAttributes.prop]}
                    onInput={val => {
                      row[column.columnAttributes.prop] = val
                    }}
                    onChange={val => {
                      this.shanchuCodejichu(row, 2)
                      if (val) {
                        row[column.columnAttributes.propName] = this.arrQC(
                          this.formData.items.filter(
                            item => item.brandId === row.brandId && item.mainId === row.mainId
                          ),
                          { value: 'smallId', label: 'smallName' }
                        ).find(item => item.value == val).label
                      } else {
                        row[column.columnAttributes.propName] = ''
                      }
                    }}
                    placeholder="请选择"
                  >
                    {this.arrQC(
                      this.formData.items.filter(item => item.brandId === row.brandId && item.mainId === row.mainId),
                      { value: 'smallId', label: 'smallName' }
                    ).map((item, index_) => (
                      <el-option key={index_} label={item.label} value={item.value}></el-option>
                    ))}
                  </el-select>
                </el-form-item>
              </div>
            ) : (
              <div style="padding:0 6px">{row[column.columnAttributes.propName]}</div>
            )
          }
        },
        {
          columnAttributes: {
            label: '商品名称',
            prop: 'goodsMaterialId',
            propName: 'goodsMaterialName',
            width: 160
          },
          render: (h, { row, column, index }) => {
            return this.isEditIndex == index ? (
              <div class="redbordererr">
                <el-form-item
                  label=""
                  lebel-width="0px"
                  prop={`items.${index}.${column.columnAttributes.prop}`}
                  rules={required}
                >
                  <el-select
                    value={row[column.columnAttributes.prop]}
                    onInput={val => {
                      row[column.columnAttributes.prop] = val
                    }}
                    onChange={val => {
                      this.shanchuCodejichu(row, 3)
                      if (val) {
                        var data = this.arrQC(
                          this.formData.items.filter(
                            item =>
                              item.brandId === row.brandId && item.mainId === row.mainId && item.smallId === row.smallId
                          ),
                          { value: 'goodsMaterialId', label: 'goodsMaterialName' }
                        ).find(item => item.value == val)
                        this.getGoodsDetl(data?.data, res => {}, 'goodsMaterialId')
                        row[column.columnAttributes.propName] = data.label
                        row['specsName'] = data?.data?.specsName
                        row['goodsPurchaseItemId'] = data?.data?.id
                      } else {
                        row[column.columnAttributes.propName] = ''
                        row['specsName'] = ''
                        row['goodsPurchaseItemId'] = ''
                      }
                    }}
                    placeholder="请选择"
                  >
                    {this.arrQC(
                      this.formData.items.filter(
                        item =>
                          item.brandId === row.brandId && item.mainId === row.mainId && item.smallId === row.smallId
                      ),
                      { value: 'goodsMaterialId', label: 'goodsMaterialName' }
                    ).map((item, index_) => (
                      <el-option key={index_} label={item.label} value={item.value}></el-option>
                    ))}
                  </el-select>
                </el-form-item>
              </div>
            ) : (
              <div style="padding:0 6px">{row[column.columnAttributes.propName]}</div>
            )
          }
        },
        {
          columnAttributes: {
            label: '规格型号',
            prop: 'specsName',
            width: 120
          }
        },
        {
          columnAttributes: {
            label: '物料类型',
            prop: 'goodsMaterialItemType',
            width: 160
          },
          render: (h, { row, column, index }) => {
            return this.isEditIndex == index ? (
              <div class="redbordererr">
                <el-form-item
                  label=""
                  lebel-width="0px"
                  prop={`codeInfoList.${index}.${column.columnAttributes.prop}`}
                  rules={required}
                >
                  <el-select
                    value={row[column.columnAttributes.prop]}
                    onInput={val => {
                      row[column.columnAttributes.prop] = val
                    }}
                    onChange={val => {
                      this.shanchuCodejichu(row, 4)
                    }}
                    placeholder="请选择"
                  >
                    {[
                      { value: 'INSIDE', label: '内机' },
                      { value: 'OUT', label: '外机' },
                      { value: 'PARTS', label: '配件' }
                    ].map((item, index_) => (
                      <el-option key={index_} label={item.label} value={item.value}></el-option>
                    ))}
                  </el-select>
                </el-form-item>
              </div>
            ) : (
              <div style="padding:0 6px">
                {[
                  { value: 'INSIDE', label: '内机' },
                  { value: 'OUT', label: '外机' },
                  { value: 'PARTS', label: '配件' }
                ].find(item => item.value == row[column.columnAttributes.prop])?.label || ''}
              </div>
            )
          }
        },
        {
          columnAttributes: {
            label: '物料名称',
            prop: 'goodsMaterialItemId',
            propName: 'goodsMaterialItemName',
            width: 160
          },
          render: (h, { row, column, index }) => {
            return this.isEditIndex == index ? (
              <div class="redbordererr">
                <el-form-item
                  label=""
                  lebel-width="0px"
                  prop={`codeInfoList.${index}.${column.columnAttributes.prop}`}
                  rules={required}
                >
                  <el-select
                    value={row[column.columnAttributes.prop]}
                    onInput={val => {
                      row[column.columnAttributes.prop] = val
                    }}
                    onChange={val => {
                      this.shanchuCodejichu(row, 5)
                      if (val) {
                        var data = (
                          this.formData.items.find(
                            item =>
                              item.brandId === row.brandId &&
                              item.mainId === row.mainId &&
                              item.smallId === row.smallId &&
                              item.goodsMaterialId === row.goodsMaterialId
                          )?.details?.items || []
                        )
                          .filter(item => item.type == row.goodsMaterialItemType)
                          .find(item => item.id == val)
                        row[column.columnAttributes.propName] = data.name
                        row['uniqueCode'] = data.uniqueCode
                        row['codeQty'] = data.uniqueCode == 'YES' ? 1 : ''
                      } else {
                        row[column.columnAttributes.propName] = ''
                        row['uniqueCode'] = ''
                        row['codeQty'] = ''
                      }
                    }}
                    placeholder="请选择"
                  >
                    {(
                      this.formData.items.find(
                        item =>
                          item.brandId === row.brandId &&
                          item.mainId === row.mainId &&
                          item.smallId === row.smallId &&
                          item.goodsMaterialId === row.goodsMaterialId
                      )?.details?.items || []
                    )
                      .filter(item => item.type == row.goodsMaterialItemType)
                      .map((item, index_) => (
                        <el-option key={index_} label={item.name} value={item.id}></el-option>
                      ))}
                  </el-select>
                </el-form-item>
              </div>
            ) : (
              <div style="padding:0 6px">{row[column.columnAttributes.propName]}</div>
            )
          }
        },
        {
          columnAttributes: {
            label: '是否一物一码',
            prop: 'uniqueCode',
            width: 120
          },
          render: (h, { row, column, index }) => {
            return (
              <div style="padding:0 6px">
                {[
                  { value: 'YES', label: '是' },
                  { value: 'NO', label: '否' }
                ].find(item => item.value == row[column.columnAttributes.prop])?.label || ''}
              </div>
            )
          }
        },
        {
          columnAttributes: {
            label: '条码',
            prop: 'code',
            width: 160
          },
          render: (h, { row, column, index }) => {
            return this.isEditIndex == index ? (
              <div class="redbordererr">
                <el-form-item
                  label=""
                  lebel-width="0px"
                  prop={`codeInfoList.${index}.${column.columnAttributes.prop}`}
                  rules={required}
                >
                  <el-input
                    value={row[column.columnAttributes.prop]}
                    onInput={val => {
                      row[column.columnAttributes.prop] = val
                    }}
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
              </div>
            ) : (
              <div style="padding:0 6px">{row[column.columnAttributes.prop]}</div>
            )
          }
        },
        {
          columnAttributes: {
            label: '数量',
            prop: 'codeQty',
            width: 160
          },
          render: (h, { row, column, index }) => {
            return this.isEditIndex == index && row.uniqueCode == 'NO' ? (
              <div class="redbordererr">
                <el-form-item
                  label=""
                  lebel-width="0px"
                  prop={`codeInfoList.${index}.${column.columnAttributes.prop}`}
                  rules={required}
                >
                  <el-input
                    value={row[column.columnAttributes.prop]}
                    onInput={val => {
                      row[column.columnAttributes.prop] = val
                    }}
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
              </div>
            ) : (
              <div style="padding:0 6px">{row[column.columnAttributes.prop]}</div>
            )
          }
        },
        ...(() => {
          if (this.formDialogType < 2) {
            return [
              {
                columnAttributes: {
                  label: '操作',
                  fixed: 'right',
                  width: 140
                },
                render: (h, { row, column, index }) => {
                  return (
                    <div style="padding:0 6px" class="operation-btns">
                      {this.formDialogType == 0
                        ? null
                        : this.formDialogType == 1
                        ? [
                            this.isEditIndex == index ? (
                              <el-button
                                type="text"
                                onClick={() => {
                                  this.addCode(row)
                                }}
                              >
                                保存
                              </el-button>
                            ) : null,
                            this.isEditIndex == -1 ? (
                              <el-button
                                type="text"
                                onClick={() => {
                                  this.getGoodsDetl(
                                    this.formData.items.find(
                                      item =>
                                        item.brandId === row.brandId &&
                                        item.mainId === row.mainId &&
                                        item.smallId === row.smallId &&
                                        item.goodsMaterialId === row.goodsMaterialId
                                    ),
                                    res => {
                                      this.isEditIndex = index
                                    },
                                    'goodsMaterialId'
                                  )
                                }}
                              >
                                编辑
                              </el-button>
                            ) : null,
                            <el-button
                              type="text"
                              onClick={() => {
                                this.delCode(row, index)
                              }}
                            >
                              删除
                            </el-button>
                          ]
                        : null}
                    </div>
                  )
                }
              }
            ]
          }
          return []
        })()
      ]
    }
  },
  methods: {
    getGoodsPurchaseCodeList() {
      if (this.formData.id) {
        goodsPurchaseCodeList({
          pageNum: 1,
          pageSize: -1,
          params: [{ param: 'c.goods_purchase_id', compare: '=', value: this.formData.id }]
        }).then(res => {
          this.formData.codeInfoList = res.data.records
        })
      }
    },
    arrQC(list, qz = { label: '', value: '' }) {
      var obj = {}
      for (var item of list) {
        obj[item[qz?.value || 'value']] = item
      }
      return Object.keys(obj).map(key => {
        return {
          data: obj[key],
          value: key,
          label: obj[key][qz?.label || 'label']
        }
      })
    },
    shanchuCodejichu(row, num) {
      if (num <= 0) {
        row.mainId = ''
        row.mainName = ''
      }
      if (num <= 1) {
        row.smallId = ''
        row.smallName = ''
      }
      if (num <= 2) {
        row.goodsMaterialId = ''
        row.goodsMaterialName = ''
        row.goodsPurchaseItemId = ''
        row.specsName = ''
      }
      if (num <= 3) {
        row.goodsMaterialItemType = ''
      }
      if (num <= 4) {
        row.goodsMaterialItemId = ''
        row.goodsMaterialItemName = ''
        row.codeQty = ''
      }
      if (num <= 5) {
        row.uniqueCode = ''
        row.code = ''
      }
    },
    getCodeVfyKey() {
      return [
        `codeInfoList.${this.isEditIndex}.brandId`,
        `codeInfoList.${this.isEditIndex}.mainId`,
        `codeInfoList.${this.isEditIndex}.smallId`,
        `codeInfoList.${this.isEditIndex}.goodsMaterialId`,
        `codeInfoList.${this.isEditIndex}.goodsMaterialItemType`,
        `codeInfoList.${this.isEditIndex}.goodsMaterialItemId`,
        `codeInfoList.${this.isEditIndex}.code`,
        `codeInfoList.${this.isEditIndex}.codeQty`
      ]
    },
    eidtCodeItems() {
      // try {
      //   this.formData.codeInfoList.map((item, index) => {
      //     this.formData.codeInfoList.map((item2, index2) => {
      //       if (
      //         index !== index2 &&
      //         `${item.brandId}_${item.mainId}_${item.smallId}_${item.goodsMaterialId}_${item.goodsMaterialItemType}_${item.goodsMaterialItemId}` ==
      //           `${item2.brandId}_${item2.mainId}_${item2.smallId}_${item2.goodsMaterialId}_${item2.goodsMaterialItemType}_${item2.goodsMaterialItemId}`
      //       ) {
      //         throw new Error('')
      //       }
      //     })
      //   })
      // } catch (error) {
      //   this.$message.warning('重复')
      //   return false
      // }
      return true
    },
    // 添加条码信息
    addCodeInfo() {
      this.formData.codeInfoList.unshift({
        brandId: '',
        brandName: '',
        mainId: '',
        mainName: '',
        smallId: '',
        smallName: '',
        goodsMaterialId: '',
        goodsMaterialName: '',
        specsName: '',
        goodsMaterialItemType: '',
        goodsMaterialItemId: '',
        goodsMaterialItemName: '',
        uniqueCode: '',
        code: '',
        codeQty: '',
        goodsPurchaseItemId: '',
        goodsPurchaseId: this.formData.id
      })
      this.isEditIndex = 0
    },
    addCode(row) {
      if (this.isEditIndex > -1) {
        this.$refs.formRef.validateField(this.getCodeVfyKey(), (valid, invalidFields, errLabels) => {
          if (valid && this.eidtCodeItems()) {
            goodsPurchaseItemAddCode({
              codeList: [{ ...row }]
            }).then(res => {
              this.isEditIndex = -1
              this.getGoodsPurchaseCodeList()
            })
          }
        })
      }
    },
    delCode(row, index) {
      if (row.id) {
        goodsPurchaseItemDelCode({
          codeId: row.id,
          id: row.goodsPurchaseId
        }).then(res => {
          this.getGoodsPurchaseCodeList()
        })
      } else {
        this.formData?.codeInfoList?.splice(index, 1)
        if (index == this.isEditIndex) {
          this.isEditIndex = -1
        }
      }
    }
  }
}