BTDK-DMS/src/pages/deviceInfo/components/DeliveryInfo.vue

<template>
  <div class="device-delivery-from">
    <div class="from-input">
      <div class="group-box">
        <div class="from-row">
          <div class="label">出库流向:</div>
          <FormItemSelect
            v-model="params.customerId"
            :options="customerList"
            placeholder="请选择出库流向"
            keyTag="id"
            :disabled="action === 'view' || !isShowSaveButton"
            labelTag="name"
            valueTag="id"
            :isShowLabel="false"
          />
        </div>
        <div class="from-row">
          <div class="label">设备价格:</div>
          <number-input
            v-model="params.price"
            :disabled="action === 'view' || !isShowSaveButton"
            placeholder="请输入成本"
          />
        </div>
      </div>
      <div class="group-box">
        <div class="from-row">
          <div class="label">备注:</div>
          <el-input
            type="textarea"
            v-model="params.description"
            placeholder="请输入备注"
            :disabled="action === 'view' || !isShowSaveButton"
            :autosize="{ minRows: 3, maxRows: 4 }"
          />
        </div>
      </div>
      <EdfsButton
        inner-text="出库"
        type="primary"
        class="save-button"
        @click="onSave"
        v-if="isShowSaveButton"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import numberInput from '@/components/dashboard/Edfs-number-item-input.vue'
import EdfsButton from '@/components/dashboard/Edfs-button/index.vue'
import FormItemSelect from '@/components/dashboard/FormItemSelect.vue'
import { getSimpleCustomerList, type CustomerVO } from '@/api/module/eam/customer'
import { isResError } from '@/hooks/useMessage'
import type { IDevice } from '@/api/module/eam/device'
import {
  getStorageByDeviceId,
  storageOutDevice,
  type IStorageOutParam,
} from '@/api/module/eam/device/storage'
import { useRoute } from 'vue-router'
import type { OptAction } from '../utils'
const route = useRoute()
const action = route.query.action as OptAction
const props = defineProps<{
  disabled: boolean
  info: IDevice | undefined
  deviceId: number | undefined
}>()
const isShowSaveButton = computed(() => {
  if (action === 'view') return false
  return props.info?.status === undefined ? true : props.info.status < 3
})

const emit = defineEmits(['onSave'])
const params = ref<Omit<IStorageOutParam, 'deviceId'>>({
  customerId: '',
  price: '',
  name: '',
  description: '',
})
const customerList = ref<Array<Pick<CustomerVO, 'id' | 'name'>>>([])
async function loadCustomerList() {
  const res = await getSimpleCustomerList()
  if (isResError(res)) return
  customerList.value = res.data
}

async function onSave() {
  if (!props.deviceId) return
  const options: IStorageOutParam = {
    deviceId: props.deviceId,
    customerId: params.value.customerId,
    price: params.value.price,
    description: params.value.description,
    name: '',
  }
  const res = await storageOutDevice(options)

  if (isResError(res)) return
  emit('onSave')
}

watch(
  () => props.deviceId,
  newVal => {
    if (newVal) {
      loadDeviceStorageInfo()
    }
  }
)

async function loadDeviceStorageInfo() {
  if (!props.deviceId) return
  const res = await getStorageByDeviceId(props.deviceId)
  if (isResError(res) || !res.data) return
  for (const key of Object.keys(params.value)) {
    params.value[key] = res.data[key] ?? ''
  }
}

onMounted(() => {
  loadCustomerList()
})
</script>

<style scoped lang="scss">
.device-delivery-from {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 100%;
  width: 100%;
  .from-input {
    display: flex;
    width: 100%;
    column-gap: 30px;
    flex-wrap: wrap;
    .group-box {
      display: flex;
      flex-direction: column;
      row-gap: 10px;
    }
    .from-row {
      min-width: 270px;
      display: flex;
      min-height: 32px;
      align-items: center;
      .label {
        white-space: nowrap;
        width: 80px;
        text-align: right;
        color: var(--label-color);
        margin-right: 8px;
      }
    }
    .save-button {
      margin-top: auto;
    }
  }
}
</style>