cnlive_project / cnlive-community-web-vue · Files

<script setup lang="ts">
import {
  reactive,
  ref,
  onMounted,
  getCurrentInstance,
  defineExpose,
} from "vue";
import { addOrUpdate } from "@/api/community/housekeeper.ts";
import { getTableList } from "@/api/community/residence.ts";

const ruleFormRef = ref<InstanceType<typeof ElForm>>();
let instance: ComponentInternalInstance | null = getCurrentInstance(); //获取app实例

// 声明props
const props = defineProps({
  formObj: {
    type: Object,
    default: {
      neighborhoodId: null,
      buildingName: null,
      unitCount: null,
      createTime: null,
      grossArea: null,
      houseCount: null,
      employArea: null,
      note: null,
    },
  },
});

let loading = ref(false);
let data = reactive({
  options: [],
});
/**
 * 获取下拉数据
 */
const getSelectList = (): void => {
  getTableList({ page: 1, pageSize: 1000, type: 0 })
    .then((res) => {
      data.options = res.data.data.list;
    })
    .catch((err) => {
      console.log(err);
    });
};
onMounted(() => {
  getSelectList();
});
// 表单验证
const rules = reactive({
  neighborhoodId: [
    {
      required: true,
      message: "请选择所属小区",
      trigger: "change",
    },
  ],
  buildingName: [
    {
      required: true,
      message: "请输入楼宇名称",
      trigger: "blur",
    },
  ],
  unitCount: [
    {
      required: true,
      message: "请输入单元数",
      trigger: "blur",
    },
  ],
  createTime: [
    {
      required: true,
      message: "请选择创建时间",
      trigger: "change",
    },
  ],
  grossArea: [
    {
      required: true,
      message: "请输入建筑面积",
      trigger: "blur",
    },
  ],
  houseCount: [
    {
      required: true,
      message: "请输入总房屋数量",
      trigger: "blur",
    },
  ],
  employArea: [
    {
      required: true,
      message: "请输入使用面积",
      trigger: "blur",
    },
  ],
});

const emit = defineEmits<{
  (e: "cancel"): void;
  (e: "success"): void;
}>();

/**
 * 重置
 */
let resetForm = () => {
  ruleFormRef.value.resetFields();
};
/**
 * 表单提交
 * @param {ElForm | undefined} formEl 表单对象
 */
let submitForm = (formEl: InstanceType<typeof ElForm> | undefined) => {
  loading.value = true;
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      addOrUpdate(props.formObj)
        .then((res) => {
          loading.value = false;
          emit("success");
        })
        .catch((err) => {
          loading.value = false;
          console.log(err);
        });
    } else {
      instance?.proxy?.$message.error("请完善信息"); //调用
      loading.value = false;
      return false;
    }
  });
};

/**
 * 取消提交
 */
const cancel: void = () => {
  emit("cancel");
};

defineExpose({
  resetForm,
});
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="props.formObj"
    :rules="rules"
    label-width="120px"
    :inline="true"
  >
    <el-form-item label="所属小区:" prop="neighborhoodId">
      <el-select
        v-model="props.formObj.neighborhoodId"
        placeholder="请选择"
        style="width: 200px"
        :disabled="!!props.formObj.id"
      >
        <el-option
          v-for="item in data.options"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="楼宇名称:" prop="buildingName">
      <el-input
        v-model="props.formObj.buildingName"
        maxlength="30"
        :disabled="!!props.formObj.id"
        placeholder="请输入楼宇名称"
      ></el-input>
    </el-form-item>
    <el-form-item label="单元:" prop="unitCount">
      <el-input
        maxlength="15"
        v-model="props.formObj.unitCount"
        placeholder="请输入单元"
        onkeyup="value=value.replace(/[^\d]/g,'')"
      ></el-input>
    </el-form-item>
    <el-form-item label="建成日期:" prop="createTime">
      <el-date-picker
        v-model="props.formObj.createTime"
        type="date"
        placeholder="请选择"
        style="width: 200px"
      ></el-date-picker>
    </el-form-item>
    <el-form-item label="建筑面积:" prop="grossArea">
      <el-input
        maxlength="8"
        v-model="props.formObj.grossArea"
        onkeyup="value=value.replace(/[^\d.]/g,'')"
        placeholder="请输入建筑面积"
      ></el-input>
    </el-form-item>
    <el-form-item label="总房屋数量:" prop="houseCount">
      <el-input
        maxlength="4"
        v-model="props.formObj.houseCount"
        onkeyup="value=value.replace(/[^\d]/g,'')"
        placeholder="请输入总房屋数量"
      ></el-input>
    </el-form-item>
    <el-form-item label="使用面积:" prop="employArea">
      <el-input
        maxlength="8"
        v-model="props.formObj.employArea"
        onkeyup="value=value.replace(/[^\d.]/g,'')"
        placeholder="请输入使用面积"
      ></el-input>
    </el-form-item>
    <el-row>
      <el-form-item label="备注信息:" prop="note" style="width: 60%">
        <el-input
          type="textarea"
          :autosize="{ minRows: 3, maxRows: 4 }"
          v-model="props.formObj.note"
          placeholder="请输入备注信息"
          maxlength="20"
          show-word-limit
        ></el-input>
      </el-form-item>
    </el-row>

    <el-row>
      <el-form-item>
        <el-button
          type="primary"
          @click="submitForm(ruleFormRef)"
          :loading="loading"
          >保存</el-button
        >
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-row>
  </el-form>
</template>