njzscloud-dispose-web/src/pages/cst/project/ProjectForm.vue

<template>
  <AFormPanel
    ref="formPanel"
    v-bind="formPanelProps">
    <template #default="formData">
      <div class="form-items">
        <ElFormItem label="项目名称" prop="projectName">
          <ElInput
            v-model="formData.projectName"
            placeholder="项目名称"/>
        </ElFormItem>
        <ElFormItem label="运输方" prop="transCustomerId">
          <CustomerDropTable
            v-model="formData.transCustomerId"
            :placeholder="formData.transCustomerInfo?.customerName" identity-category="YunShu"/>
        </ElFormItem>
        <ElFormItem label="客户" prop="fringeCustomerId">
          <CustomerDropTable
            v-model="formData.fringeCustomerId"
            :placeholder="formData.fringeCustomerInfo?.customerName" identity-category="ChanFei"/>
        </ElFormItem>
        <ElFormItem label="合同图片" prop="picture">
          <Uploader
            ref="uploader"
            v-model:file="formData.contractPicture"
          />
        </ElFormItem>
        <ElFormItem label="有效期">
          <ADtPicker v-model="formData.contractDate" type="daterange"/>
        </ElFormItem>

        <ElFormItem label="地址" prop="address">
          <AMap
            ref="amap"
            v-model:address="formData.address"
            v-model:area="formData.area"
            v-model:areaName="formData.areaName"
            v-model:lat="formData.lat"
            v-model:lng="formData.lng"
            :map-config="{
            lat:appSettingStore.defaultAddress.lat,
            lng:appSettingStore.defaultAddress.lng,
            }"
            class="amap" height="250px" width="547px"/>
        </ElFormItem>
      </div>
    </template>
  </AFormPanel>
</template>

<script lang="ts" setup>
import ProjectApi from '@/pages/cst/project/project-api.ts'
import Strings from '@/common/utils/strings.ts'
import AFormPanel, {
  type AFormPanelInstance,
  buildFormPanelProps,
} from '@/components/a-form-panel/AFormPanel.tsx'
import Uploader from '@/components/uploader/Uploader.vue'
import ADtPicker from '@/components/a-dt-picker/ADtPicker.vue'
import AMap from '@/components/a-map/AMap.vue'
import { useAppSettingStore } from '@/common/app/app-setting-store.ts'
import CustomerDropTable from '@/pages/cst/customer/CustomerDropTable.vue'
import Times, { FMT } from '@/common/utils/times.ts'

const props = withDefaults(defineProps<{
  research?: () => void
}>(), {
  research: () => {
  },
})
const appSettingStore = useAppSettingStore()
const uploaderIns = useTemplateRef<InstanceType<typeof Uploader>>('uploader')

const formPanelIns = useTemplateRef<AFormPanelInstance>('formPanel')
const status = ref<'add' | 'modify'>('add')
const formPanelProps = buildFormPanelProps<ProjectTypes.SearchProjectResult>({
  title: '',
  detailsLoader(id?: string) {
    if (Strings.isBlank(id)) {
      status.value = 'add'
      return Promise.resolve()
    } else {
      status.value = 'modify'
      return ProjectApi
        .detail(id!)
        .then(res => {
          console.log(res.data.contractStartDate, res.data.contractEndDate, [ Times.toDate(Times.parse(res.data.contractStartDate ?? '', FMT.date)), Times.toDate(Times.parse(res.data.contractEndDate ?? '', FMT.date)) ])
          if (res.data.contractPicture != null) uploaderIns.value?.setDefaultFiles([ res.data.contractPicture ])
          return {
            ...res.data,
            contractDate: [ Times.toDate(Times.parse(res.data.contractStartDate ?? '', FMT.date)), Times.toDate(Times.parse(res.data.contractEndDate ?? '', FMT.date)) ],
          }
        })
    }
  },
  doSubmit(data) {
    if (status.value === 'add') {
      return ProjectApi.add(data)
        .then(props.research)
    } else {
      return ProjectApi.modify(data)
        .then(props.research)
    }
  },
  rules: {
    projectName: [ {required: true, message: '请填写项目名称', trigger: 'blur'} ],
    contractPicture: [ {required: true, message: '请填写合同图片', trigger: 'blur'} ],
    transCustomerId: [ {required: true, message: '请填写运输方客户', trigger: 'blur'} ],
    transOrgId: [ {required: true, message: '请填写运输方企业', trigger: 'blur'} ],
    fringeCustomerId: [ {required: true, message: '请填写产废方/购买方', trigger: 'blur'} ],
    fringeOrgId: [ {required: true, message: '请填写产废方/购买方企业', trigger: 'blur'} ],
    provinceName: [ {required: true, message: '请填写省；名称', trigger: 'blur'} ],
    cityName: [ {required: true, message: '请填写市；名称', trigger: 'blur'} ],
    areaName: [ {required: true, message: '请填写区县；名称', trigger: 'blur'} ],
    townName: [ {required: true, message: '请填写乡镇街道；名称', trigger: 'blur'} ],
    address: [ {required: true, message: '请填写详细地址', trigger: 'blur'} ],
    lng: [ {required: true, message: '请填写经度', trigger: 'blur'} ],
    lat: [ {required: true, message: '请填写纬度', trigger: 'blur'} ],
    contractStartDate: [ {required: true, message: '请填写合同有效期', trigger: 'blur'} ],
    contractEndDate: [ {required: true, message: '请填写合同有效期', trigger: 'blur'} ],
  },
})
watchEffect(() => {
  formPanelProps.title = status.value === 'add' ? '新建项目' : '修改项目'
})
defineExpose({
  open(data?: ProjectTypes.SearchProjectResult) {
    formPanelIns.value?.open(data?.id)
  },
})
</script>

<style lang="stylus" scoped>
.form-items {
  grid-template-areas: "a2 a1" \
  "a2 a3" \
  "a4 a5" \
  "a6 a6";

  :deep(.el-form-item) {
    &:nth-child(1) {
      grid-area a5
    }

    &:nth-child(2) {
      grid-area a3
    }

    &:nth-child(3) {
      grid-area a1
    }

    &:nth-child(4) {
      grid-area a2
    }

    &:nth-child(5) {
      grid-area a4
      width 340px;
    }

    &:nth-child(6) {
      grid-area a6
    }
  }

}
</style>