jh-military-admin/src/views/area/_components/areaHouseForm.vue

<template>
  <el-dialog :title="form.id ? '编辑' : '新增'" v-model="visible" :close-on-click-modal="false" draggable>
    <el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="90px" v-loading="loading">
      <el-row :gutter="24">
        <el-col :span="24" class="mb20">
          <el-form-item label="空间" prop="areaId">
            <select-area v-model="form.areaId" placeholder="请选择空间" />
          </el-form-item>
        </el-col>
        <el-col :span="24" class="mb20">
          <el-form-item label="房屋名" prop="name">
            <el-input v-model="form.name" placeholder="请输入房屋名" />
          </el-form-item>
        </el-col>
        <el-col :span="24" class="mb20">
          <el-form-item label="房号" prop="houseCode">
            <el-input v-model="form.houseCode" placeholder="请输入房号" />
          </el-form-item>
        </el-col>
        <el-col :span="24" class="mb20">
          <el-form-item label="房屋楼层" prop="noFloor">
            <el-input v-model="form.noFloor" placeholder="请输入房屋楼层">
              <template #append>楼</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24" class="mb20">
          <el-form-item label="房屋类型" prop="bizType">
            <dict-select v-model="form.bizType" :options="dh_house_type" placeholder="请选择房屋类型" />
          </el-form-item>
        </el-col>
        <el-col v-if="false" :span="24" class="mb20">
          <el-form-item label="房屋状态" prop="houseState">
            <el-input v-model="form.houseState" placeholder="请输入房屋状态" />
          </el-form-item>
        </el-col>
        <el-col :span="24" class="mb20">
          <el-form-item label="排序" prop="sortOrder">
            <template #label>
              <span>排序</span>
              <tip content="越大越在前" />
            </template>
            <el-input-number :min="0" :step="1" v-model="form.sortOrder" placeholder="" />
          </el-form-item>
        </el-col>
        <el-col :span="24" class="mb20">
          <el-form-item label="房间备注" prop="memo">
            <el-input v-model="form.memo" placeholder="请输入房间备注" type="textarea" :autosize="{ minRows: 6 }" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="onSubmit" :disabled="loading">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="AreaHouseDialog">
import { useDict } from '/@/hooks/dict';
import { useMessage } from "/@/hooks/message";
import * as AreaHouseApi from '/@/api/area/areaHouse'
import { rule } from '/@/utils/validate';
const emit = defineEmits(['refresh']);

// 定义变量内容
const dataFormRef = ref();
const visible = ref(false)
const loading = ref(false)
// 定义字典
const { dh_house_type } = useDict('dh_house_type')
// 提交表单数据
const form = reactive({
  id: '',
  areaId: '',
  name: '',
  houseCode: '',
  noFloor: '',
  bizType: '',
  houseState: '',
  memo: '',
  sortOrder: '',
});

// 定义校验规则
const dataRules = ref({
  areaId: [{ required: true, message: '空间不能为空', trigger: 'change' }],
  name: [{ required: true, message: '房屋名不能为空', trigger: 'blur' }],
  houseCode: [{ required: true, message: '房号不能为空', trigger: 'blur' }],
  noFloor: [{ required: true, message: '房屋楼层不能为空', trigger: 'blur' }],
  bizType: [{ required: true, message: '房屋类型不能为空', trigger: 'change' }],
  houseState: [{ required: true, message: '房屋状态不能为空', trigger: 'blur' }],
  sortOrder: [{ required: true, message: '排序不能为空', trigger: 'blur' }],
})

// 打开弹窗
const openDialog = (id: string) => {
  visible.value = true
  form.id = ''
  // 重置表单数据
  nextTick(() => {
    dataFormRef.value?.resetFields();
  });
  // 获取areaHouse信息
  if (id) {
    form.id = id
    getareaHouseData(id)
  }
};

// 提交
const onSubmit = async () => {
  const valid = await dataFormRef.value.validate().catch(() => { });
  if (!valid) return false;

  try {
    loading.value = true;
    form.id ? await AreaHouseApi.putObj(form) : await AreaHouseApi.addObj(form);
    useMessage().success(form.id ? '修改成功' : '添加成功');
    visible.value = false;
    emit('refresh');
  } catch (err: any) {
    useMessage().error(err.msg);
  } finally {
    loading.value = false;
  }
};


// 初始化表单数据
const getareaHouseData = (id: string) => {
  // 获取数据
  loading.value = true
  AreaHouseApi.getObj(id).then((res: any) => {
    Object.assign(form, res.data)
  }).finally(() => {
    loading.value = false
  })
};

// 暴露变量
defineExpose({
  openDialog
});
</script>