pms-iot-vue/src/views/pms/maintain/material/MaintainMaterialDrawer.vue

<template>
  <el-drawer
    :title="t('workOrderMaterial.added')"
    :append-to-body="true"
    :model-value="modelValue"
    @update:model-value="$emit('update:modelValue', $event)"
    :show-close="false"
    direction="rtl"
    :size="computedSize"
    :before-close="handleClose"
  >
    <el-form
      ref="drawerRef"
      :model="drawerFormData"
      :rules="formRules"
      label-width="100px"
      v-loading="formLoading"
    >
      <el-form-item :label="t('stock.MaterialMaster')" prop="code1" style="margin-bottom: 30px">
        <el-select
          v-model="drawerFormData.code1"
          :model-value="materialLabel"
          :placeholder="t('stock.MaterialMaster')"
          @click="openForm"
        />
      </el-form-item>
      <el-form-item :label="t('workOrderMaterial.materialCode')" prop="code1" style="margin-bottom: 30px">
        <el-input v-model="drawerFormData.code1" disabled />
      </el-form-item>
      <el-form-item :label="t('workOrderMaterial.materialName')" prop="name1" style="margin-bottom: 30px">
        <el-input v-model="drawerFormData.name1" disabled />
      </el-form-item>
      <el-form-item :label="t('workOrderMaterial.unit')" prop="unit1" style="margin-bottom: 30px">
        <el-input v-model="drawerFormData.unit1" disabled :placeholder="t('workOrderMaterial.unit')" />
      </el-form-item>
      <el-form-item :label="t('workOrderMaterial.ConsumptionQuantity')" prop="depleteCount1" style="margin-bottom: 30px">
        <el-input-number
          v-model="drawerFormData.depleteCount1"
          :min="0"
          :precision="2"
          :step="0.1"
          style="width: 50%"
          class="w-100%"
          controls-position="right"
        />
      </el-form-item>
      <el-form-item :label="t('workOrderMaterial.unitPrice')" prop="price1" style="margin-bottom: 30px">
        <el-input-number
          v-model="drawerFormData.price1"
          :min="0"
          :precision="2"
          :step="0.1"
          style="width: 50%"
          controls-position="right"
        />
      </el-form-item>
      <el-form-item :label="t('deviceForm.remark')" prop="remark1" style="margin-bottom: 30px">
        <el-input v-model="drawerFormData.remark1" type="textarea" :placeholder="t('deviceForm.remarkHolder')" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">{{ t('common.ok') }}</el-button>
      <el-button @click="handleClose">{{ t('common.cancel') }}</el-button>
    </template>
  </el-drawer>
  <MaterialSelect ref="materialFormRef" @choose="materialChoose" />
</template>
<script setup lang="ts">
import { defineEmits, defineOptions, ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import * as PmsMaterialApi from '@/api/pms/material'
import { CommonStatusEnum } from '@/utils/constants'
import MaterialSelect from './MaterialSelect.vue'
const { t } = useI18n() // 国际化
const drawerVisible = ref<boolean>(false)
const emit = defineEmits(['update:modelValue', 'add'])
const materialLabel = ref('') // 表单的类型：create - 新增；update - 修改
defineOptions({
  name: 'MaintainMaterialDrawer'
})
const materialChoose = (row) => {
  drawerFormData.value.code1 = row.code
  drawerFormData.value.name1 = row.name
  drawerFormData.value.unit1 = row.unit
  materialLabel.value = row.name
}
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  createTime: [],
  bomId: '',
  name: '',
  code: ''
})
const drawerFormData = ref({
  id: undefined,
  code1: undefined,
  name1: undefined,
  unit1: undefined,
  price1: undefined,
  sourceType: undefined,
  depleteCount1: undefined,
  totalCount: undefined,
  sapCode: undefined,
  status1: undefined,
  remark1: undefined
})
const resetDrawerForm = () => {
  drawerFormData.value = {
    id: undefined,
    code1: undefined,
    name1: undefined,
    unit1: undefined,
    price1: undefined,
    sourceType: undefined,
    depleteCount: undefined,
    totalCount: undefined,
    sapCode: undefined,
    status: undefined,
    remark1: undefined
  }
  drawerRef.value?.resetFields()
}
const formRules = reactive({
  code1: [{ required: true, message: '物料编码不能为空', trigger: 'blur' }],
  name1: [{ required: true, message: '物料名称不能为空', trigger: 'blur' }],
  depleteCount1: [{ required: true, message: '消耗数量不能为空', trigger: 'blur' }],
  price1:[{ required: true, message: '单价不能为空', trigger: 'blur' }],
})
const materialFormRef = ref()
const openForm = () => {
  materialFormRef.value.open()
}
const windowWidth = ref(window.innerWidth)
// 动态计算百分比
const computedSize = computed(() => {
  return windowWidth.value > 800 ? '40%' : '60%'
})

const loading = ref(false)
const total = ref(0) // 列表的总页数
const materials = ref([])

const props = defineProps({
  modelValue: Boolean
})

// 打开抽屉
const openDrawer = () => {
  drawerVisible.value = true
  resetDrawerForm()
  materialLabel.value = undefined
}

// 关闭抽屉
const closeDrawer = () => {
  drawerVisible.value = false
}

// 关闭抽屉
const handleClose = () => {
  emit('update:modelValue', false)
}
const drawerRef = ref()
const submitForm = async () => {
  await drawerRef.value.validate()
  drawerFormData.value.sourceType = '手动添加'
  emit('add', drawerFormData.value)
  emit('update:modelValue', false)
}

defineExpose({ openDrawer, closeDrawer }) // 暴露方法给父组件
</script>

<style lang="scss" scoped></style>