njzscloud-dispose-web/src/pages/wh/sales-order/SalesOrderForm.vue

<template>
  <AFormPanel
    ref="formPanel"
    :details-loader="detailsLoader"
    :do-submit="doSubmit"
    :rules="rules"
    :title="status === 'add' ? '新建项目' : '修改项目'"
  >
    <template #default="{formData}">
      <div class="form-items">
        <ElFormItem label="状态" prop="salesOrderStatus">
          <ElSelect v-model="formData.salesOrderStatus" placeholder="身份类型">
            <ElOption v-for="item in salesOrderStatus" :key="item.val" :label="item.txt" :value="item.val"/>
          </ElSelect>
          <!-- <ElInput v-model="formData.salesOrderStatus"  placeholder="状态" /> -->
        </ElFormItem>

        <ElFormItem label="购买方客户" prop="customerId">

          <!-- <ElInput v-model="formData.customerId"  placeholder="购买方客户 Id" /> -->
        </ElFormItem>
        <ElFormItem label="下单日期" prop="orderDate">
          <ElDatePicker v-model="formData.orderDate" format="YYYY-MM-DD" placeholder="请选择采购日期" type="date" value-format="YYYY-MM-DD"/>

          <!-- <ElInput v-model="formData.orderDate"  placeholder="下单日期" /> -->
        </ElFormItem>
        <ElFormItem label="发货日期" prop="shipmentDate">
          <!-- <ElDatePicker v-model="formData.shipmentDate"  format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" type="datetime" placeholder="请选择发货日期" /> -->
          <ElDatePicker v-model="formData.shipmentDate" format="YYYY-MM-DD" placeholder="请选择发货日期" type="date" value-format="YYYY-MM-DD"/>

          <!-- <ElInput v-model="formData.shipmentDate"  placeholder="发货日期" /> -->
        </ElFormItem>
        <!-- <ElFormItem  label="产品分类 Id" prop="goodsCategoryId">
          <ElInput v-model="formData.goodsCategoryId"  placeholder="产品分类 Id" />
        </ElFormItem> -->
        <!-- <ElFormItem  label="分类名称" prop="goodsCategoryName">
          <ElInput v-model="formData.goodsCategoryName"  placeholder="分类名称" />
        </ElFormItem> -->
        <ElFormItem label="产品" prop="goodsId">
          <!-- <ElInput v-model="formData.goodsId"  placeholder="产品 Id" /> -->
        </ElFormItem>
        <ElFormItem label="产品编码" prop="goodSn">
          <ElInput v-model="formData.goodSn" placeholder="产品编码"/>
        </ElFormItem>
        <ElFormItem label="数量" prop="quantity">
          <ElInput v-model="formData.quantity" placeholder="数量"/>
        </ElFormItem>
        <!-- <ElFormItem  label="计量单位" prop="unit">
          <ElInput v-model="formData.unit" readonly  placeholder="计量单位；字典代码：unit" />
        </ElFormItem> -->
        <ElFormItem label="总金额(元)" prop="totalMoney">
          <ElInput v-model="formData.totalMoney" placeholder="总金额；单位：元"/>
        </ElFormItem>
        <ElFormItem label="备注" prop="memo">
          <ElInput v-model="formData.memo" placeholder="备注"/>
        </ElFormItem>
        <!-- <ElFormItem  label="创建时间" prop="createTime">
          <ElInput v-model="formData.createTime"  placeholder="创建时间" />
        </ElFormItem>
        <ElFormItem  label="修改时间" prop="modifyTime">
          <ElInput v-model="formData.modifyTime"  placeholder="修改时间" />
        </ElFormItem> -->
      </div>
    </template>
  </AFormPanel>
</template>

<script lang="ts" setup>
import SalesOrderApi from '@/pages/wh/sales-order/sales-order-api.ts'
import Strings from '@/common/utils/strings.ts'
import { type FormRules } from 'element-plus'
import type { ComponentExposed } from 'vue-component-type-helpers'
import AFormPanel from '@/components/a-form-panel/AFormPanel.tsx'
import { salesOrderStatus } from '@/pages/wh/sales-order/constants.ts'

const props = withDefaults(defineProps<{
  research?: () => void
}>(), {
  research: () => {
  },
})
const rules = reactive<FormRules<SalesOrderTypes.SearchSalesOrderResult>>({
  id: [ {required: true, message: '请填写Id', trigger: 'blur'} ],
  sn: [ {required: true, message: '请填写编号', trigger: 'blur'} ],
  salesOrderStatus: [ {required: true, message: '请填写状态', trigger: 'blur'} ],
  customerId: [ {required: true, message: '请填写购买方客户 Id', trigger: 'blur'} ],
  orderDate: [ {required: true, message: '请填写下单日期', trigger: 'blur'} ],
  shipmentDate: [ {required: true, message: '请填写发货日期', trigger: 'blur'} ],
  goodsCategoryId: [ {required: true, message: '请填写产品分类 Id', trigger: 'blur'} ],
  goodsCategoryName: [ {required: true, message: '请填写分类名称', trigger: 'blur'} ],
  goodsId: [ {required: true, message: '请填写产品 Id', trigger: 'blur'} ],
  goodsName: [ {required: true, message: '请填写产品名称', trigger: 'blur'} ],
  goodSn: [ {required: true, message: '请填写产品编码', trigger: 'blur'} ],
  quantity: [ {required: true, message: '请填写数量', trigger: 'blur'} ],
  unit: [ {required: true, message: '请填写计量单位；字典代码：unit', trigger: 'blur'} ],
  totalMoney: [ {required: true, message: '请填写总金额；单位：元', trigger: 'blur'} ],
  memo: [ {required: true, message: '请填写备注', trigger: 'blur'} ],
  creatorId: [ {required: true, message: '请填写创建人 Id； sys_user.id', trigger: 'blur'} ],
  modifierId: [ {required: true, message: '请填写修改人 Id； sys_user.id', trigger: 'blur'} ],
  createTime: [ {required: true, message: '请填写创建时间', trigger: 'blur'} ],
  modifyTime: [ {required: true, message: '请填写修改时间', trigger: 'blur'} ],
  deleted: [ {required: true, message: '请填写是否删除； 0-->未删除、1-->已删除', trigger: 'blur'} ],
})
const formPanelIns = useTemplateRef<ComponentExposed<typeof AFormPanel>>('formPanel')
const status = ref<'add' | 'modify'>('add')

function detailsLoader(id?: string) {
  if (Strings.isBlank(id)) {
    status.value = 'add'
    return Promise.resolve()
  } else {
    status.value = 'modify'
    return SalesOrderApi
      .detail(id!)
      .then(res => res.data)
  }
}

function doSubmit(data: SalesOrderTypes.SearchSalesOrderResult) {
  if (status.value === 'add') {
    return SalesOrderApi.add(data)
      .then(props.research)
  } else {
    return SalesOrderApi.modify(data)
      .then(props.research)
  }
}

defineExpose({
  open(data?: SalesOrderTypes.SearchSalesOrderResult) {
    formPanelIns.value?.open(data?.id)
  },
})

</script>


<style lang="stylus" scoped>
.form-items {
  grid-template-columns: 1fr 1fr;

  :deep(.el-form-item) {
  }
}
</style>