AddEditSnapshotClusterDialog.vue

<template>
  <a-modal v-model:visible="visible" title="新增抓拍记录" :width="800" @ok="handleSubmitData">
    <a-form ref="formRef" :model="submitForm" :rules="formRules" labelAlign="right">
      <a-row>
        <a-col :span="12">
          <a-form-item label="集团" name="accountId">
            <strong>{{ filterMapName(submitForm.accountId, optionsMap['accountList']) }}</strong>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="广场" name="mallId">
            <strong>{{ filterMapName(submitForm.mallId, optionsMap['mallList']) }}</strong>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="出入口地点" name="gateId">
            <a-select
                v-model:value="submitForm.gateId"
                placeholder="请选择"
                optionFilterProp="label"
                show-search
                :options="optionsMap['gateList']"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="人员类型" name="personType">
            <a-select
                v-model:value="submitForm.personType"
                placeholder="请选择"
                optionFilterProp="label"
                show-search
                :options="optionsMap['personTypeList']"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="方向" name="direction">
            <a-select
                v-model:value="submitForm.direction"
                placeholder="请选择"
                optionFilterProp="label"
                show-search
                :options="optionsMap['directionList']"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12"></a-col>
        <a-col :span="12">
          <a-form-item label="性别" name="gender">
            <a-select
                v-model:value="submitForm.gender"
                placeholder="请选择"
                optionFilterProp="label"
                show-search
                :options="optionsMap['genderList']"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="年龄" name="age">
            <a-select
                v-model:value="submitForm.age"
                placeholder="请选择"
                optionFilterProp="label"
                show-search
                :options="optionsMap['ageList']"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="所属统计日期" name="countdate">
            <a-date-picker
                v-model:value="submitForm.countdate"
                format="YYYY-MM-DD"
                valueFormat="YYYY-MM-DD"
                :allowClear="false"
                style="width: 100%"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="抓拍时间" name="counttime">
            <a-date-picker
                v-model:value="submitForm.counttime"
                show-time
                format="YYYY-MM-DD HH:mm:ss"
                valueFormat="YYYY-MM-DD HH:mm:ss"
                :allowClear="false"
                style="width: 100%"
            />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="是否是新人">
            <a-radio-group v-model:value="isNewPerson">
              <a-radio :value="false">否</a-radio>
              <a-radio :value="true">是</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
        <a-col :span="24" v-if="!isNewPerson">
          <a-form-item label="人Id" name="personUnid">
            <a-input v-model:value="submitForm.personUnid" placeholder="请输入" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>

<script setup>
import { defineExpose, ref } from 'vue'
import { cloneDeep } from 'lodash'
import { message } from 'ant-design-vue'
import clusterResultApi from '../ClusterResultApi'

const submitForm = ref({})
const optionsMap = ref({})
const visible = ref(false)
const isNewPerson = ref(false)

/**
 * 表单校验相关
 */
const formRef = ref()
const formRules = {
  gateId: [{ required: true, message: '请选择出入口地点' }],
  personType: [{ required: true, message: '请选择人员类型' }],
  direction: [{ required: true, message: '请选择方向' }],
  age: [{ required: true, message: '请选择年龄'}],
  gender: [{ required: true, message: '请选择性别' }],
  countdate: [{ required: true, message: '请选择所属统计日期' }],
  counttime: [{ required: true, message: '请选择抓拍时间' }],
  personUnid: [{ required: true, message: '请输入人Id' }]
}
// 提交数据
const handleSubmitData = async () => {
  try{
    await formRef.value.validate()
    const params = {
      ...submitForm.value,
      countdate:`${submitForm.value.countdate} 00:00:00`,
      personUnid: isNewPerson.value ? '' : submitForm.value.personUnid,
    }
    const res = await clusterResultApi.addFaceRecognitionsApi(params)
    if(res.msg_code === 200) {
      message.success("提交成功，当前不会修正统计数据，需手动刷新")
      visible.value = false
    }else{
      message.error(res.msg_info || '请求异常')
    }
  }catch (e) {
    console.log(e)
  }
}

// 初始化弹窗
const initDialog = (form, selectOptionsMap) => {
  submitForm.value = cloneDeep(form)
  optionsMap.value = selectOptionsMap
  visible.value = true
}

// 筛选固定值字段
const filterMapName = (id, list) => {
  return list.find(item => item.value === id)?.label || '--'
}

defineExpose({
  initDialog
})
</script>

<style scoped lang="less">
:deep(.ant-col.ant-form-item-label) {
  width: 120px;
}
// 确保选择框宽度充满容器
.ant-select, .ant-picker {
  width: 100%;
}
</style>