crm_uiapp/src/pages-erp/warehouse/form/index.vue

<template>
  <view class="yd-page-container">
    <!-- 顶部导航栏 -->
    <wd-navbar
      :title="getTitle"
      left-arrow placeholder safe-area-inset-top fixed
      @click-left="handleBack"
    />

    <!-- 表单区域 -->
    <view class="pb-180rpx">
      <wd-form ref="formRef" :model="formData" :rules="formRules">
        <wd-cell-group title="基础信息" border>
          <wd-input
            v-model="formData.name"
            label="仓库名称"
            label-width="180rpx"
            placeholder="请输入仓库名称"
            prop="name"
            clearable
          />
          <wd-input
            v-model="formData.address"
            label="仓库地址"
            label-width="180rpx"
            placeholder="请输入仓库地址"
            clearable
          />
          <wd-input
            v-model="formData.principal"
            label="负责人"
            label-width="180rpx"
            placeholder="请输入负责人"
            clearable
          />
          <wd-input
            v-model="formData.warehousePrice"
            label="仓储费"
            label-width="180rpx"
            placeholder="请输入仓储费"
            type="number"
            clearable
          />
          <wd-input
            v-model="formData.truckagePrice"
            label="搬运费"
            label-width="180rpx"
            placeholder="请输入搬运费"
            type="number"
            clearable
          />
        </wd-cell-group>

        <wd-cell-group title="状态信息" border>
          <wd-cell title="仓库状态" title-width="180rpx" center>
            <wd-switch v-model="statusEnabled" />
          </wd-cell>
          <wd-input
            v-model="formData.sort"
            label="排序"
            label-width="180rpx"
            placeholder="请输入排序"
            type="number"
            prop="sort"
            clearable
          />
          <wd-textarea
            v-model="formData.remark"
            label="备注"
            label-width="180rpx"
            placeholder="请输入备注"
            :maxlength="200"
            show-word-limit
            clearable
          />
        </wd-cell-group>
      </wd-form>
    </view>

    <!-- 底部保存按钮 -->
    <view class="yd-detail-footer">
      <wd-button
        type="primary"
        block
        :loading="formLoading"
        @click="handleSubmit"
      >
        保存
      </wd-button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import type { FormInstance } from 'wot-design-uni/components/wd-form/types'
import type { Warehouse } from '@/api/erp/warehouse'
import { computed, onMounted, ref, watch } from 'vue'
import { useToast } from 'wot-design-uni'
import { createWarehouse, getWarehouse, updateWarehouse } from '@/api/erp/warehouse'
import { navigateBackPlus } from '@/utils'

const props = defineProps<{
  id?: number | any
}>()

definePage({
  style: {
    navigationBarTitleText: '',
    navigationStyle: 'custom',
  },
})

const toast = useToast()
const getTitle = computed(() => props.id ? '编辑仓库' : '新增仓库')
const formLoading = ref(false)
const formData = ref<Warehouse>({
  id: undefined,
  name: undefined,
  address: undefined,
  principal: undefined,
  warehousePrice: undefined,
  truckagePrice: undefined,
  remark: undefined,
  status: 0,
  sort: 0,
})
const formRules = {
  name: [{ required: true, message: '仓库名称不能为空' }],
  sort: [{ required: true, message: '排序不能为空' }],
}
const formRef = ref<FormInstance>()

// 状态开关
const statusEnabled = ref(true)
watch(statusEnabled, (val) => {
  formData.value.status = val ? 0 : 1
})
watch(() => formData.value.status, (val) => {
  statusEnabled.value = val === 0
})

/** 返回上一页 */
function handleBack() {
  navigateBackPlus('/pages-erp/warehouse/index')
}

/** 加载详情 */
async function getDetail() {
  if (!props.id) return
  try {
    toast.loading('加载中...')
    formData.value = await getWarehouse(props.id)
  } finally {
    toast.close()
  }
}

/** 提交表单 */
async function handleSubmit() {
  const { valid } = await formRef.value!.validate()
  if (!valid) return

  formLoading.value = true
  try {
    if (props.id) {
      await updateWarehouse(formData.value)
      toast.success('修改成功')
    } else {
      await createWarehouse(formData.value)
      toast.success('新增成功')
    }
    setTimeout(() => {
      handleBack()
    }, 500)
  } finally {
    formLoading.value = false
  }
}

/** 初始化 */
onMounted(() => {
  getDetail()
})
</script>

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