Cold_erp_web/src/views/storehouse/outStock/ReceiveOutStock.vue

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { ref, reactive, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { GlobalStore } from '@/stores/index'
import type { FormInstance, FormRules } from 'element-plus'
import { Delete, CirclePlus, Picture } from '@element-plus/icons-vue'
import { Storehouse_StockOut_Add } from '@/api/storehouse/index'
import ReceiveUser from './receiveUser.vue'
import InStorageSn from '../inventory/InStorageSn.vue'
import OutStockProduct from './OutStockProduct.vue'
import { depotHooks, ReceiveFormType } from '@/hooks/useDepot'
import ImageCom from '@/components/Image/index.vue'

const router = useRouter()
const tableData = ref<any[]>([])
const globalStore = GlobalStore()
const formLabelWidth = ref('120px')
const ruleFormRef = ref<FormInstance>()
const receiveUserdialog = ref<InstanceType<typeof ReceiveUser> | null>(null)
const drawerSnRef = ref<InstanceType<typeof InStorageSn> | null>(null)
const drawerProductRef = ref<InstanceType<typeof OutStockProduct> | null>(null)

const form = reactive<ReceiveFormType>({
  T_type: 1,
  T_uuid: '',
  T_receive: '',
  T_number: '',
  T_depot_id: undefined,
  T_product: '',
  T_date: '',
  T_remark: '',
  T_contract_number: ''
})

const validate_T_product = (rule: any, value: any, callback: any) => {
  if (value.includes(undefined) || value === '') {
    callback(new Error('请填写产品数量,出库数量不能大于库存数量!'))
  } else if (value.includes(null)) {
    callback(new Error('请添加产品SN'))
  } else {
    callback()
  }
}

const rules = reactive<FormRules>({
  T_product: [{ required: true, validator: validate_T_product, trigger: 'blur' }],
  T_receive: [{ required: true, message: '请选择经办人', trigger: 'change' }],
  T_depot_id: [{ required: true, message: '请选择仓库', trigger: 'blur' }],
  T_date: [{ required: true, message: '请选择出库日期', trigger: 'blur' }]
})

const columns = [
  { type: 'index', label: '序号', width: 80, align: 'center ' },
  { label: '产品图片', prop: 'T_product_img', align: 'center ', name: 'T_product_img' },
  { label: '产品名称', prop: 'T_product_name', align: 'center ' },
  { label: '产品分类', prop: 'T_product_class_name', align: 'center ' },
  { label: '产品型号', prop: 'T_product_model', align: 'center ', ellipsis: true },
  { label: '产品规格', prop: 'T_product_spec', align: 'center ' },
  { label: '是否关联SN', prop: 'T_product_relation_sn', align: 'center ', width: 120, name: 'T_relation_sn' },
  { label: '库存数量', prop: 'T_total', align: 'center ' },
  { label: '*出库数量', prop: 'count', align: 'center ', name: 'count' },
  { label: '*关联设备', prop: 'sn', align: 'center ', name: 'sn' },
  { prop: 'operation', label: '操作', width: 80, fixed: 'right' }
]

const countBlurHandle = () => {
  form.T_product = tableData.value.map(item => {
    if (!item.count && item.T_product_relation_sn !== 1) return undefined
    if (item.count > item.T_total) return undefined
    return `${item.T_product_id},${item.count}|`
  })
}
const getDeviceSnToProduct = () => {
  const DeviceSnData: any = drawerSnRef.value?.getDeviceSn()
  const isEmpty = determineSNorCount(DeviceSnData)
  if (isEmpty && isEmpty === 'count') return [undefined]
  if (isEmpty && isEmpty === 'sn') return [null]

  return tableData.value.map((item: any) => {
    let product: any = ''
    if (item.T_product_relation_sn === 1) {
      DeviceSnData?.forEach((value: any, key: number) => {
        if (item.T_product_id === key) {
          let str = ''
          value.forEach(
            (snObj: any, index: number, arr: any[]) => (str += `${snObj.sn}${index === arr.length - 1 ? '' : ','}`)
          )
          product = `${item.T_product_id}-${item.count}-${str}`
        }
      })
    } else {
      product = `${item.T_product_id}-${item.count}-`
    }
    return product + '|'
  })
}
/**
 * 判断sn or 数量是否为空
 */
const determineSNorCount = (DeviceSnData: any) => {
  for (const item of tableData.value) {
    if ((!item.count && item.T_product_relation_sn !== 1) || item.count > item.T_total) return 'count'
    if (
      (item.T_product_relation_sn === 1 && !DeviceSnData.get(item.Id) && !DeviceSnData.size) ||
      item.count > item.T_total
    )
      return 'sn'
  }
  return false
}

const AddInStorage = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  form.T_product = getDeviceSnToProduct()
  formEl.validate(async valid => {
    if (valid) {
      const res: any = await Storehouse_StockOut_Add({
        User_tokey: globalStore.GET_User_tokey,
        ...form,
        T_product: form.T_product.join(''),
        T_receive: form.T_uuid
      })
      if (res.Code === 200) {
        ElMessage.success('出库成功！')
        nextTick(() => {
          resetForm(ruleFormRef.value)
          router.back()
        })
      }
    }
  })
}

const deleteProduct = (row: any) => {
  tableData.value = tableData.value.filter(item => item.Id !== row.Id)

  // 设置产品的选中
  drawerProductRef.value?.selectTableChange(row)
  // 删除设备得sn
  drawerSnRef.value?.deleteDeviceSn(row.Id)
}

const closeReceive = () => {
  resetForm(ruleFormRef.value)
  router.back()
}
/**
 * 重置表单
 */
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  tableData.value = []
  drawerSnRef.value?.clearDeviceSn()
  drawerProductRef.value?.clearSelection()
  formEl.resetFields()
}
/**
 * 添加产品
 */
const AddProductionDetailed = () => drawerProductRef.value?.openDrawer()
/**
 * 产品选择 是否
 */
const ProductselectionChange = (row: any) => {
  const index = tableData.value.findIndex((item: any) => item.Id === row.Id)
  if (index === -1) {
    row.count = ''
    tableData.value.push(row)
  } else {
    tableData.value.splice(index, 1)
  }
}
/**
 * 全选
 */
const ProductSelectionAllChange = (selection: any[]) => {
  tableData.value = selection
}

/**
 * 添加sn 号
 */
const addDeviceSn = (id: number) => {
  drawerSnRef.value?.addDeviceSn(id, 1)
}
/**
 * 自动计算 count
 */
const autoGetCount = (length: number, id: number) => {
  tableData.value.forEach((item: any) => {
    if (item.T_product_id === id) {
      item.count = length
    }
  })
}

/**
 * 选择经办人
 */
const selectApprover = () => receiveUserdialog.value?.openDrawer()
const getReceiveInfo = ({ T_uuid, T_name }: { T_uuid: string; T_name: string }) => {
  form.T_receive = T_name
  form.T_uuid = T_uuid
}

// 拿到仓库列表
const { options } = depotHooks()
const changeDepot = () => drawerProductRef.value?.clearProdctData()
</script>

<template>
  <div class="receive-outStock">
    <div>
      <h4 class="title">领料出库</h4>
      <el-divider border-style="dashed" />
    </div>
    <el-form ref="ruleFormRef" :model="form" :rules="rules">
      <el-form-item label="出库单号：" :label-width="formLabelWidth" prop="T_number">
        <el-input v-model="form.T_number" disabled type="text" placeholder="系统自动生成" class="w-50" />
      </el-form-item>
      <el-form-item label="出库仓库：" :label-width="formLabelWidth" prop="T_depot_id">
        <el-select v-model="form.T_depot_id" class="w-50" clearable placeholder="请选择出库仓库~" @change="changeDepot">
          <el-option v-for="item in options" :key="item.Id" :label="item.T_name" :value="item.Id" />
        </el-select>
      </el-form-item>
      <el-form-item label="出库日期：" :label-width="formLabelWidth" prop="T_date">
        <el-date-picker
          class="my-date-picker"
          style="flex: 0 0 33.33%"
          v-model="form.T_date"
          type="date"
          placeholder="选择日期"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item label="经办人：" :label-width="formLabelWidth" prop="T_receive">
        <el-input v-model="form.T_receive" placeholder="请选择经办人" class="w-50" @focus="selectApprover" />
      </el-form-item>
      <el-form-item label="出库明细：" :label-width="formLabelWidth" prop="T_product">
        <el-table
          :data="tableData"
          style="width: 100%"
          border
          stripe
          :header-cell-style="{
            background: '#dedfe0',
            height: '50px'
          }"
        >
          <template v-for="item in columns" :key="item.prop">
            <el-table-column v-bind="item" v-if="item.fixed !== 'right' && !item.ellipsis">
              <template #header v-if="item.prop === 'count' || item.prop === 'sn'">
                <span style="color: red">{{ item.label }}</span>
              </template>
              <template #default="{ row }" v-if="item.prop === item.name">
                <el-input
                  v-if="item.prop === 'count' && row.T_product_relation_sn !== 1"
                  v-model.number="row.count"
                  type="text"
                  autocomplete="off"
                  @blur="countBlurHandle"
                />
                <div v-if="item.prop === 'sn'">
                  <el-button
                    v-if="row.T_product_relation_sn === 1"
                    link
                    type="primary"
                    size="small"
                    :icon="CirclePlus"
                    @click="addDeviceSn(row.T_product_id)"
                    >添加</el-button
                  >
                  <span v-else>-</span>
                </div>
                <span v-if="item.prop === 'T_product_relation_sn'">
                  <el-tag v-if="row.T_product_relation_sn === 1" effect="dark">是</el-tag>
                  <el-tag v-else type="success" effect="dark">否</el-tag>
                </span>
                <ImageCom v-if="item.prop === 'T_product_img'" :src="row.T_product_img" />
              </template>
            </el-table-column>
            <el-table-column v-if="item.ellipsis && item.prop === 'T_model'" v-bind="item">
              <template #default="{ row }">
                <el-tooltip effect="dark" :content="row.T_model" placement="bottom">
                  {{ row.T_model }}
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column v-bind="item" v-if="item.fixed === 'right'">
              <template #default="{ row }">
                <el-button link type="danger" size="small" :icon="Delete" @click="deleteProduct(row)">删除</el-button>
              </template>
            </el-table-column>
          </template>
          <template #append>
            <el-button type="primary" @click="AddProductionDetailed">
              <el-icon><Plus /></el-icon><span style="margin-left: 6px">添加产品</span>
            </el-button>
          </template>
        </el-table>
      </el-form-item>
      <el-form-item label="备注：" :label-width="formLabelWidth" prop="T_remark">
        <el-input
          v-model="form.T_remark"
          :autosize="{ minRows: 4, maxRows: 6 }"
          type="textarea"
          placeholder="请输入备注信息"
        />
      </el-form-item>
      <div class="btn">
        <el-divider>
          <el-button @click="closeReceive">取消</el-button>
          <el-button color="#626aef" @click="AddInStorage(ruleFormRef)">提交</el-button>
        </el-divider>
      </div>
    </el-form>
    <InStorageSn ref="drawerSnRef" @onCount="autoGetCount" />
    <ReceiveUser ref="receiveUserdialog" @onUserInfo="getReceiveInfo" title="选择经办人" />
    <OutStockProduct
      ref="drawerProductRef"
      :depotId="form.T_depot_id"
      @ontableData="ProductselectionChange"
      @ontableDataAll="ProductSelectionAllChange"
    />
  </div>
</template>
<style scoped lang="scss">
@import './index.scss';
</style>