baozhida_erp/src/views/storehouse/inventory/InStorageForm.vue

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import InStorageSn from './InStorageSn.vue'
import { ref, reactive, nextTick } from 'vue'
import { GlobalStore } from '@/stores/index'
import Drawer from '@/components/Drawer/index.vue'
import { InStoreageFormType } from '@/hooks/useDepot'
import InStorageProduct from './InStorageProduct.vue'
import type { FormInstance, FormRules } from 'element-plus'
import { Delete, CirclePlus } from '@element-plus/icons-vue'
import { Storehouse_StockIn_Add, Storehouse_ProductClass_List } from '@/api/storehouse/index'
import ImageCom from '@/components/Image/index.vue'

const tableData = ref<any[]>([])
const globalStore = GlobalStore()
const formLabelWidth = ref('120px')
const ruleFormRef = ref<FormInstance>()
const drawerRef = ref<InstanceType<typeof Drawer> | null>(null)
const drawerSnRef = ref<InstanceType<typeof InStorageSn> | null>(null)
const drawerProductRef = ref<InstanceType<typeof InStorageProduct> | null>(null)
const classOptions = ref<any[]>([])

const form = reactive<InStoreageFormType>({
  T_number: '',
  T_depot_id: '',
  T_product: '',
  T_date: '',
  T_remark: ''
})

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: [{ validator: validate_T_product, trigger: 'blur' }],
  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_img', align: 'center ', name: 'T_img' },
  { label: '产品名称', prop: 'T_name', align: 'center ' },
  { label: '产品分类', prop: 'T_class_name', align: 'center ' },
  { label: '产品型号', prop: 'T_model', align: 'center ', ellipsis: true },
  { label: '产品规格', prop: 'T_spec', align: 'center ' },
  { label: '是否关联SN', prop: 'T_relation_sn', align: 'center ', width: 120, name: 'T_relation_sn' },
  { 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_relation_sn !== 1) return undefined
    return `${item.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_relation_sn === 1) {
      DeviceSnData?.forEach((value: any, key: number) => {
        if (item.Id === key) {
          let str = ''
          value.forEach(
            (snObj: any, index: number, arr: any[]) => (str += `${snObj.sn}${index === arr.length - 1 ? '' : ','}`)
          )
          product = `${item.Id}-${item.count}-${str}`
        }
      })
    } else {
      product = `${item.Id}-${item.count}-`
    }
    return product + '|'
  })
}
/**
 * 判断sn or 数量是否为空
 */
const determineSNorCount = (DeviceSnData: any) => {
  for (const item of tableData.value) {
    if (!item.count && item.T_relation_sn !== 1) return 'count'
    if (item.T_relation_sn === 1 && !DeviceSnData.get(item.Id) && !DeviceSnData.size) 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_StockIn_Add({
        User_tokey: globalStore.GET_User_tokey,
        ...form,
        T_product: form.T_product.join('')
      })
      if (res.Code === 200) {
        ElMessage.success('入库成功！')
        drawerProductRef.value?.clearSelection()
        nextTick(() => {
          emit('onUpdateList')
          resetForm(ruleFormRef.value)
          drawerRef.value?.closeDrawer()
        })
      }
    }
  })
}

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 callbackDrawer = (done: () => void) => {
  resetForm(ruleFormRef.value)
  done()
}
/**
 * 重置表单
 */
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  drawerProductRef.value?.clearSelection()
  drawerSnRef.value?.clearDeviceSn()
  tableData.value = []
  formEl.resetFields()
}

/**
 * 获取产品分类
 */
const getProductClassList = async () => {
  const res: any = await Storehouse_ProductClass_List({ page: 1, page_z: 999 })
  classOptions.value = res.Data.Data
}
/**
 * 添加产品
 */
const AddProductionDetailed = () => {
  !classOptions.value.length && getProductClassList()
  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, 2)
}
/**
 * 自动计算 count
 */
const autoGetCount = (length: number, id: number) => {
  tableData.value.forEach((item: any) => {
    if (item.Id === id) {
      item.count = length
    }
  })
}
/**
 * 关闭 取消
 */
const closeInStorage = () => {
  resetForm(ruleFormRef.value)
  drawerRef.value?.closeDrawer()
}
// 注册事件
const emit = defineEmits<{ (event: 'onUpdateList'): void }>()

// 接受props
interface ItemType {
  T_name: string
  Id: number
}
interface PropsType {
  options?: ItemType[]
}
const props = defineProps<PropsType>()
/**
 * 入库调用
 */
const openDrawer = () => drawerRef.value?.openDrawer()
defineExpose({
  openDrawer
})
</script>

<template>
  <div class="inStorage-form">
    <Drawer ref="drawerRef" :handleClose="callbackDrawer" size="80%">
      <template #header="{ params }">
        <h4 :id="params.titleId" :class="params.titleClass">入库</h4>
      </template>
      <el-form ref="ruleFormRef" :model="form" :rules="rules">
        <el-divider border-style="dashed" />
        <el-form-item label="入库单号：" :label-width="formLabelWidth" prop="T_number">
          <el-input v-model="form.T_number" type="text" :disabled="true" 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="请选择入库仓库~">
            <el-option v-for="item in props.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="width: 21.5rem"
            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_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_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_relation_sn === 1"
                      link
                      type="primary"
                      size="small"
                      :icon="CirclePlus"
                      @click="addDeviceSn(row.Id)"
                      >添加</el-button
                    >
                    <span v-else>-</span>
                  </div>
                  <span v-if="item.prop === 'T_relation_sn'">
                    <el-tag v-if="row.T_relation_sn === 1" effect="dark">是</el-tag>
                    <el-tag v-else type="success" effect="dark">否</el-tag>
                  </span>
                  <ImageCom v-if="item.prop === 'T_img'" :src="row.T_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="closeInStorage">取消</el-button>
            <el-button color="#626aef" @click="AddInStorage(ruleFormRef)">提交</el-button>
          </el-divider>
        </div>
        <InStorageSn ref="drawerSnRef" @onCount="autoGetCount" />
        <InStorageProduct
          ref="drawerProductRef"
          @ontableData="ProductselectionChange"
          @ontableDataAll="ProductSelectionAllChange"
        />
      </el-form>
    </Drawer>
  </div>
</template>
<style scoped lang="scss">
@import './index.scss';
</style>