baozhida_erp/src/views/storehouse/inventory/inStockApply/InStorageEdit.vue

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import InStorageEditSn from '@/views/storehouse/inventory/InStorageEditSn.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_Apply_Edit,Storehouse_StockIn_Get } from '@/api/storehouse/index'
import ImageCom from '@/components/Image/index.vue'
import ReceiveUser from "@/views/storehouse/outStock/receiveUser.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 drawerSnEditRef = ref<InstanceType<typeof InStorageEditSn> | null>(null)
const drawerProductRef = ref<InstanceType<typeof InStorageProduct> | null>(null)

const form = reactive<InStoreageFormType>({
  T_number: '',
  T_depot_id: '',
  T_type: '',
  T_product: '',
  T_date: '',
  T_remark: '',
  T_project: '',
  T_return_user: '',
  T_return_user_name: '',
  T_batch_number: ''
})

const validate_T_product = (rule: any, value: any, callback: any) => {
    // console.log('验证',value)
  if (value==undefined || value == '') {
    callback(new Error('请填写产品数量'))
  } else if (value.includes(null)) {
    callback(new Error('请添加产品SN'))
  } else {
    callback()
  }
}

const validate_T_return_user = (rule: any, value: any, callback: any) => {
	// 只有从仓库页面进入时才验证退库人
	if (showReturnUserField.value && !form.T_return_user) {
		callback(new Error('请选择退库人'))
	} 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' }],
  T_project: [{ required: true, message: '请选择退库项目', trigger: 'blur' }],
  T_return_user: [{validator: validate_T_return_user, trigger: 'change'}]
})

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_number', 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' },
  { 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 = drawerSnEditRef.value?.getDeviceSn()
    const isEmpty = determineSNorCount(DeviceSnData)
    if (isEmpty && isEmpty === 'count') return [undefined]
    let arr = [...tableData.value]
    let mapArr:any = []
    let flag = false
    for (const item of arr) {
        if(item.count==0){
            flag = true
            break;
        }
        mapArr.push(item.T_product_id + '-' + item.count + '-' +  (item.T_device_list?item.T_device_list.join(','):''))
    }
    return flag?undefined:mapArr.join('|')+'|'
}
/**
 * 判断sn or 数量是否为空
 */
const determineSNorCount = (DeviceSnData: any) => {
  for (const item of tableData.value) {
    if (item.count<1 && item.T_relation_sn !== 1) return 'count'  //数量必大于0
    // 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) {
        console.log('提交',tableData.value,{
        User_tokey: globalStore.GET_User_tokey,
        ...form
      })
      const res: any = await Storehouse_StockIn_Apply_Edit({
        User_tokey: globalStore.GET_User_tokey,
        ...form
      })
      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
  drawerSnEditRef.value?.deleteDeviceSn(row.Id)
}

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

/**
 * 添加产品
 */
const AddProductionDetailed = () => drawerProductRef.value?.openDrawer()
/**
 * 单选
 */
const ProductselectionChange = (row: any) => {
    row.T_product_id = row.Id
  const index = tableData.value.findIndex((item: any) => item.T_product_id === row.T_product_id)
  if (index === -1) {
    row.count = 0
    tableData.value.push(row)
  } else {
    tableData.value.splice(index, 1)
  }
}
/**
 * 全选
 */
const ProductSelectionAllChange = (selection: any[]) => {
  console.log('全选',selection)
  let arr = [...selection]
  arr.forEach((item:any)=>{
    item.T_product_id = item.Id
  })
  tableData.value = selection
}

const getStorehouseContractGet = async (Id:any) => {
  const res: any = await Storehouse_StockIn_Get({ User_tokey: globalStore.GET_User_tokey, T_number:Id })
  if (res.Code === 200) {
    let arr = res.Data.T_Product
    arr.forEach((item:any)=>{
        tableData.value.push({
            Id: item.Id,
            T_class_name:item.T_product_class_name,
            T_img:item.T_product_img,
            T_model:item.T_number,
            T_name: item.T_product_name,
            count: item.T_num,
            T_relation_sn:item.T_product_relation_sn,
            T_spec: item.T_product_spec,
            T_device_list:item.T_device_list,
            T_product_id:item.T_product_id
        })
    })
  }
}

/**
 * 添加sn 号
 */
 
const addDeviceSn = (obj: any) => {
  if (!form.T_date) {
		ElMessage.warning('请先填写退库日期')
		return
	}
    drawerSnEditRef.value?.addDeviceSn(obj.Id,2,obj.T_product_id,form.T_date)
    drawerSnEditRef.value!.drawerSnRef?.openDrawer()
    if(obj.T_device_list)drawerSnEditRef.value!.tableSnData = [...obj.T_device_list].map(item => ({ sn: item }));
}
/**
 * 自动计算 count
 */
const autoGetCount = (length: number, id: number,arr:any) => {
  tableData.value.forEach((item: any) => {
    if (item.Id === id) {
        item.T_device_list = arr
      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 disabledDate = (time:any)=> {  
    const today = new Date();  
    const isYear = today.getFullYear()//当前年
    const isMonth = today.getMonth()+1//当前月
    
    const splitsYear = Number(form.T_date.split('-')[0])//已选年
    const splitsMonth = Number(form.T_date.split('-')[1])//已选月
    

    if(isYear!==splitsYear || isMonth !==splitsMonth){
        return true
    }else{
        const timeYear = time.getFullYear();  
        const timeMonth = time.getMonth()+1; 
        return timeYear !== isYear || timeMonth !== isMonth;   
    }
}

const receiveUserdialog = ref<InstanceType<typeof ReceiveUser> | null>(null)
const showReturnUserField = ref(false)

/**
 * 选择退库人
 */
const selectReturnUser = () => receiveUserdialog.value?.openDrawer()
const getReturnUserInfo = ({T_uuid, T_name}: { T_uuid: string; T_name: string }) => {
	form.T_return_user_name = T_name
	form.T_return_user = T_uuid
}

/**
 * 修改 openDrawer 接收参数
 */
const openDrawer = (fromWarehouse = false) => {
	showReturnUserField.value = fromWarehouse
	drawerRef.value?.openDrawer()
}

defineExpose({
  openDrawer,getStorehouseContractGet,form
})
</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-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" :disabled="true" 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_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 show-overflow-tooltip 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' "
                    v-model="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)"
                      >添加</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 show-overflow-tooltip 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_project">
			  <el-input
				  v-model="form.T_project"
				  type="text"
				  class="w-50"
				  placeholder="请输入退库项目"
			  />
		  </el-form-item>
		  <el-form-item v-if="showReturnUserField" label="退库人：" :label-width="formLabelWidth" prop="T_return_user">
			  <el-input v-model="form.T_return_user_name" placeholder="请选择退库人" class="w-50"
						@focus="selectReturnUser"/>
		  </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>
		  <ReceiveUser ref="receiveUserdialog" :dept_leader="0" @onUserInfo="getReturnUserInfo" title="选择退库人"/>
		  <InStorageEditSn ref="drawerSnEditRef" @onCount="autoGetCount" />
        <InStorageProduct
          ref="drawerProductRef"
          @ontableData="ProductselectionChange"
          @ontableDataAll="ProductSelectionAllChange"
        />
      </el-form>
    </Drawer>
  </div>
</template>
<style scoped lang="scss">
@import '@/views/storehouse/inventory/index.scss';
</style>