HIA24016N_PipeLineDemo.git

import { 
  ref, 
  onMounted, 
  reactive, 
  computed, 
  Ref, 
  watch, 
  SetupContext, 
  h, 
} from 'vue' 
import { injectModel } from '@/libs/Provider/Provider' 
import { WmsMaterialDrawer } from '../Models/WmsMaterialDrawer' 
import { ElMessage } from 'element-plus' 
import isEqual from 'lodash/isEqual' 
import { ConfirmBox } from '@/components/ConfirmBox/ConfirmBox' 
import { cloneDeep } from 'lodash' 
 
export const useWmsMaterialDrawer = (props: any, ctx?: any) => { 
  const wmsMaterialDrawer = injectModel<WmsMaterialDrawer>('wmsMaterialDrawer') 
  /** 
   * 用来对比的初始化数据 
   */ 
  const initiateData: Ref<Record<string, any>> = ref({}) 
  const formData = ref<Record<string, any>>({}) 
  // ref 
  const formRef = ref() 
 
  const disabled = ref(false) 
 
  const current = computed(() => { 
    return props.row || null 
  }) 
 
   
  const datePicker = (attrs) => { 
    return ( 
      <el-date-picker 
        type="date" 
        format="YYYY-MM-DD HH:mm:ss" 
        formatValue="YYYY-MM-DD HH:mm:ss" 
        {...attrs} 
      ></el-date-picker> 
    ) 
  } 
  const inputNumber = (attrs) => { 
    return ( 
      <el-input-number 
        min="1" 
        step="1" 
        precision="0" 
        {...attrs} 
      ></el-input-number> 
    ) 
  } 
 
  const dateTimePicker = (attrs) => { 
    return ( 
      <el-date-picker 
        type="datetime" 
        format="YYYY-MM-DD HH:mm:ss" 
        formatValue="YYYY-MM-DD HH:mm:ss" 
        {...attrs} 
      ></el-date-picker> 
    ) 
  } 
 
  const visible = computed({ 
    get() { 
      return props.modelValue 
    }, 
    set(val) { 
      ctx.emit('update:modelValue', val) 
    }, 
  }) 
  /** 
   * 添加的form字段 
   */ 
  const formItems = reactive([ 
                    { 
                   label: '物料编码（唯一标识）', 
                   prop: 'materialCode', 
                   el: 'input', 
                   //disabled: disabled, 
                   placeholder: '请输入物料编码（唯一标识）', 
              rules: [{required: true, message: '物料编码（唯一标识）不能为空', trigger: 'blur' }], 
                }, 
                { 
                   label: '是否有效物料', 
                   prop: 'isValid', 
                   el: 'select', 
                   //disabled: disabled, 
                   placeholder: '请输入是否有效物料', 
              rules: [{required: true, message: '是否有效物料不能为空', trigger: 'blur' }], 
                 options: [{label: '是',value: true}, {label: '否',value: false}] 
                }, 
                { 
                   label: '是否自产', 
                   prop: 'isSelfMade', 
                   el: 'select', 
                   //disabled: disabled, 
                   placeholder: '请输入是否自产', 
                 options: [{label: '是',value: true}, {label: '否',value: false}] 
                }, 
                { 
                   label: '数量', 
                   prop: 'num', 
                   el: (props: any, { attrs }: SetupContext) => { 
                     return h(inputNumber, {  
                       ...props,  
                       clearable: true, 
                       ...attrs,  
                     })  
                   },
                   width: '100%',
                   step: 1,
                   precision: 0, 
                   //disabled: disabled, 
                   placeholder: '请输入数量', 
              rules: [{required: true, message: '数量不能为空', trigger: 'blur' }], 
                }, 
                { 
                   label: '自有数量', 
                   prop: 'selfNum', 
                   el: (props: any, { attrs }: SetupContext) => { 
                     return h(inputNumber, {  
                       ...props,  
                       clearable: true, 
                       ...attrs,  
                     })  
                   },
                   width: '100%',
                   step: 1,
                   precision: 0, 
                   //disabled: disabled, 
                   placeholder: '请输入自有数量', 
                }, 
                { 
                   label: '物料名称', 
                   prop: 'materialName', 
                   el: 'input', 
                   //disabled: disabled, 
                   placeholder: '请输入物料名称', 
              rules: [{required: true, message: '物料名称不能为空', trigger: 'blur' }], 
                }, 
                { 
                   label: '可空长度', 
                   prop: 'nullLength', 
                   el: (props: any, { attrs }: SetupContext) => { 
                     return h(inputNumber, {  
                       ...props,  
                       clearable: true,  
                       ...attrs,  
                     })  
                   },
                   width: '100%',
                   step: 0.01,
                   precision: 2, 
                   //disabled: disabled, 
                   placeholder: '请输入可空长度', 
                }, 
                { 
                   label: '采购类型（枚举值）', 
                   prop: 'purchaseType', 
                   el: 'select', 
                   options: [], 
                   //disabled: disabled, 
                   placeholder: '请输入采购类型（枚举值）', 
              rules: [{required: true, message: '采购类型（枚举值）不能为空', trigger: 'blur' }], 
                }, 
                { 
                   label: '物料类型（枚举值）', 
                   prop: 'materialType', 
                   el: 'select', 
                   options: [], 
                   //disabled: disabled, 
                   placeholder: '请输入物料类型（枚举值）', 
              rules: [{required: true, message: '物料类型（枚举值）不能为空', trigger: 'blur' }], 
                }, 
                { 
                   label: '主单位（如：kg、m、个）', 
                   prop: 'primaryUnit', 
                   el: 'input', 
                   //disabled: disabled, 
                   placeholder: '请输入主单位（如：kg、m、个）', 
                }, 
                { 
                   label: '规格/标准（如：GB/T 8163-2018）', 
                   prop: 'standard', 
                   el: 'input', 
                   //disabled: disabled, 
                   placeholder: '请输入规格/标准（如：GB/T 8163-2018）', 
                }, 
                { 
                   label: '外径（单位：mm）', 
                   prop: 'outerDiameter', 
                   el: (props: any, { attrs }: SetupContext) => { 
                     return h(inputNumber, {  
                       ...props,  
                       clearable: true,  
                       ...attrs,  
                     })  
                   },
                   width: '100%',
                   step: 0.01,
                   precision: 2, 
                   //disabled: disabled, 
                   placeholder: '请输入外径（单位：mm）', 
              rules: [{required: true, message: '外径（单位：mm）不能为空', trigger: 'blur' }], 
                }, 
                { 
                   label: '壁厚（单位：mm）', 
                   prop: 'wallThickness', 
                   el: (props: any, { attrs }: SetupContext) => { 
                     return h(inputNumber, {  
                       ...props,  
                       clearable: true,  
                       ...attrs,  
                     })  
                   },
                   width: '100%',
                   step: 0.01,
                   precision: 2, 
                   //disabled: disabled, 
                   placeholder: '请输入壁厚（单位：mm）', 
              rules: [{required: true, message: '壁厚（单位：mm）不能为空', trigger: 'blur' }], 
                }, 
                { 
                   label: '材质（如：304不锈钢）', 
                   prop: 'materialQuality', 
                   el: 'input', 
                   //disabled: disabled, 
                   placeholder: '请输入材质（如：304不锈钢）', 
                }, 
                { 
                   label: '长度（单位：m）', 
                   prop: 'length', 
                   el: (props: any, { attrs }: SetupContext) => { 
                     return h(inputNumber, {  
                       ...props,  
                       clearable: true,  
                       ...attrs,  
                     })  
                   },
                   width: '100%',
                   step: 0.01,
                   precision: 2, 
                   //disabled: disabled, 
                   placeholder: '请输入长度（单位：m）', 
              rules: [{required: true, message: '长度（单位：m）不能为空', trigger: 'blur' }], 
                }, 
                { 
                   label: '是否为主支管', 
                   prop: 'isMainBranch', 
                   el: 'select', 
                   options: [], 
                   //disabled: disabled, 
                   placeholder: '请输入是否为主支管', 
              rules: [{required: true, message: '是否为主支管不能为空', trigger: 'blur' }], 
                }, 
                { 
                   label: '生产工厂', 
                   prop: 'factory', 
                   el: 'input', 
                   //disabled: disabled, 
                   placeholder: '请输入生产工厂', 
                }, 
                { 
                   label: '证书编号', 
                   prop: 'certification', 
                   el: 'input', 
                   //disabled: disabled, 
                   placeholder: '请输入证书编号', 
                }, 
                { 
                   label: '冗余字段1 - 预留扩展用途', 
                   prop: 'redundantField1', 
                   el: 'input', 
                   //disabled: disabled, 
                   placeholder: '请输入冗余字段1 - 预留扩展用途', 
                }, 
                { 
                   label: '冗余字段2 - 预留扩展用途', 
                   prop: 'redundantField2', 
                   el: 'input', 
                   //disabled: disabled, 
                   placeholder: '请输入冗余字段2 - 预留扩展用途', 
                }, 
                { 
                   label: '冗余字段3 - 预留扩展用途', 
                   prop: 'redundantField3', 
                   el: 'input', 
                   //disabled: disabled, 
                   placeholder: '请输入冗余字段3 - 预留扩展用途', 
                }, 
                { 
                   label: '备注', 
                   prop: 'remark', 
                   el: 'input', 
                   //disabled: disabled, 
                   placeholder: '请输入备注', 
                }, 
                { 
                   label: '创建人', 
                   prop: 'creatorName', 
                   el: 'input', 
                   //disabled: disabled, 
                   placeholder: '请输入创建人', 
                }, 
                { 
                   label: '修改人', 
                   prop: 'lastModifierName', 
                   el: 'input', 
                   //disabled: disabled, 
                   placeholder: '请输入修改人', 
                }, 
                { 
                   label: '操作备注', 
                   prop: 'operationRemark', 
                   el: 'input', 
                   //disabled: disabled, 
                   placeholder: '请输入操作备注', 
                }, 
                { 
                   label: '删除备注', 
                   prop: 'deleteRemark', 
                   el: 'input', 
                   //disabled: disabled, 
                   placeholder: '请输入删除备注', 
                }, 
                { 
                   label: '扩展字段1', 
                   prop: 'extraField1', 
                   el: 'input', 
                   //disabled: disabled, 
                   placeholder: '请输入扩展字段1', 
                }, 
                { 
                   label: '扩展字段2', 
                   prop: 'extraField2', 
                   el: 'input', 
                   //disabled: disabled, 
                   placeholder: '请输入扩展字段2', 
                }, 
                { 
                   label: '扩展字段3', 
                   prop: 'extraField3', 
                   el: 'input', 
                   //disabled: disabled, 
                   placeholder: '请输入扩展字段3', 
                },  
  ]) 
  /** 
   * 校验是否有数据变化 
   */ 
  const checkIsEqualObject = () => { 
    const data = { 
      formData: formData.value, 
    } 
    const check = isEqual(initiateData.value, data) 
    return check 
  } 
 
  const onClose = (done: () => void) => { 
    if (visible.value) { 
      if (checkIsEqualObject()) { 
        visible.value = false 
        done && done() 
      } else { 
        ConfirmBox('是否保存设置？') 
          .then(() => { 
            onConfirm() 
          }) 
          .catch(() => { 
            visible.value = false 
            done && done() 
          }) 
      } 
    } 
  } 
  /** 
   * 保存 
   */ 
  const onConfirm = async () => { 
    await formRef.value?.validate() 
    const data = { 
      materialCode: formData.value.materialCode, 
isValid: formData.value.isValid, 
isSelfMade: formData.value.isSelfMade, 
num: formData.value.num, 
selfNum: formData.value.selfNum, 
materialName: formData.value.materialName, 
nullLength: formData.value.nullLength, 
purchaseType: formData.value.purchaseType, 
materialType: formData.value.materialType, 
primaryUnit: formData.value.primaryUnit, 
standard: formData.value.standard, 
outerDiameter: formData.value.outerDiameter, 
wallThickness: formData.value.wallThickness, 
materialQuality: formData.value.materialQuality, 
length: formData.value.length, 
isMainBranch: formData.value.isMainBranch, 
factory: formData.value.factory, 
certification: formData.value.certification, 
redundantField1: formData.value.redundantField1, 
redundantField2: formData.value.redundantField2, 
redundantField3: formData.value.redundantField3, 
remark: formData.value.remark, 
creatorName: formData.value.creatorName, 
lastModifierName: formData.value.lastModifierName, 
operationRemark: formData.value.operationRemark, 
deleteRemark: formData.value.deleteRemark, 
extraField1: formData.value.extraField1, 
extraField2: formData.value.extraField2, 
extraField3: formData.value.extraField3,  
    } 
    if (!current.value) { 
      await wmsMaterialDrawer.addWmsMaterial(data) 
    } else { 
      const id = current.value.id 
      await wmsMaterialDrawer.updateWmsMaterial(id, data) 
    } 
    ElMessage.success('保存成功') 
    ctx.emit('confirm') 
  } 
 
  const updateCheckData = () => { 
    initiateData.value = { 
      formData: { 
        ...formData.value, 
      }, 
    } 
  } 
  const updateFormItemOptions = (propName: string, enumData: any[]) => { 
    const item = formItems.find((item) => item.prop === propName) 
    if (item && enumData) { 
      item.options = enumData.map((item) => ({ 
        label: item.description, 
        value: item.value, 
      })) 
    } 
  } 
  /** 
   * 通用查询枚举 
   */ 
  const commonQueryEnumForFrom = async () => { 
    const purchaseTypeEnumEnum = await wmsMaterialDrawer.getWmsEnumData({ 
 EnumName: 'PurchaseTypeEnum', 
}) 
updateFormItemOptions('purchaseType', purchaseTypeEnumEnum) 
const materialTypeEnumEnum = await wmsMaterialDrawer.getWmsEnumData({ 
 EnumName: 'MaterialTypeEnum', 
}) 
updateFormItemOptions('materialType', materialTypeEnumEnum) 
const yesNoEnumEnum = await wmsMaterialDrawer.getWmsEnumData({ 
 EnumName: 'YesNoEnum', 
}) 
updateFormItemOptions('isMainBranch', yesNoEnumEnum) 
 
  } 
  commonQueryEnumForFrom() 
  /** 
   * 弹窗打开获取详情 
   */ 
  const onOpen = async () => { 
    if (current.value) { 
      const res = await wmsMaterialDrawer.getWmsMaterialDetail(current.value) 
 
      formData.value = { 
        materialCode: res.materialCode, 
isValid: res.isValid, 
isSelfMade: res.isSelfMade, 
num: res.num, 
selfNum: res.selfNum, 
materialName: res.materialName, 
nullLength: res.nullLength, 
purchaseType: res.purchaseType, 
materialType: res.materialType, 
primaryUnit: res.primaryUnit, 
standard: res.standard, 
outerDiameter: res.outerDiameter, 
wallThickness: res.wallThickness, 
materialQuality: res.materialQuality, 
length: res.length, 
isMainBranch: res.isMainBranch, 
factory: res.factory, 
certification: res.certification, 
redundantField1: res.redundantField1, 
redundantField2: res.redundantField2, 
redundantField3: res.redundantField3, 
remark: res.remark, 
creatorName: res.creatorName, 
lastModifierName: res.lastModifierName, 
operationRemark: res.operationRemark, 
deleteRemark: res.deleteRemark, 
extraField1: res.extraField1, 
extraField2: res.extraField2, 
extraField3: res.extraField3,  
        id: res.id, 
      } 
      disabled.value = true 
      updateCheckData() 
    } else { 
      formData.value = {} 
 
      disabled.value = false 
      updateCheckData() 
    } 
  } 
 
  watch(() => current.value, onOpen) 
 
  return { 
    formItems, 
    formData, 
    visible, 
    formRef, 
    onOpen, 
    onClose, 
    onConfirm, 
  } 
}