daofu-gov-pc/src/views/emergency/danger-points/dialog/add-edit.vue

<template>
  <BaseDialog
    :dialogVisible="props.visible"
    @close="onclone"
    :titleName="titleName + '风险点'"
    width="50%"
    @onSubmit="handleSubmit"
    :footerclosed="true"
    :diafooter="true"
  >
    <div class="detailForm-content">
      <el-form
        ref="formRef"
        label-width="120"
        :rules="ruleForm"
        :model="formData"
        class="center-form"
      >
        <el-form-item label="风险名" prop="name">
          <el-input
            placeholder="请输入风险名"
            type="input"
            v-model="formData.name"
          />
        </el-form-item>
        <el-form-item label="风险类型" prop="typeId">
          <el-select
            v-model="formData.typeId"
            clearable
            placeholder="请选择风险类型"
          >
            <el-option
              v-for="item in types"
              :key="item.typeId"
              :label="item.typeName"
              :value="item.typeId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="详细地址" prop="address">
          <el-input
            placeholder="请输入"
            type="input"
            v-model="formData.address"
          />
        </el-form-item>
        <el-form-item prop="areaCode" label="所属区域">
          <el-cascader
            ref="cascader"
            v-model="formData.areaCode"
            placeholder="请选择地区"
            :options="orgList"
            :props="{
              checkStrictly: true,
              label: 'orgname',
              value: 'orgcode',
            }"
            clearable
          ></el-cascader>
        </el-form-item>
        <el-form-item label="经度" prop="lon">
          <el-input placeholder="请输入" type="input" v-model="formData.lon" />
        </el-form-item>
        <el-form-item label="纬度" prop="lat">
          <el-input placeholder="请输入" type="input" v-model="formData.lat" />
        </el-form-item>
        <el-form-item label="风险描述" prop="poolDesc" style="width: 94%;">
          <el-input
            placeholder="请输入风险描述"
            :rows="4"
            type="textarea"
            v-model="formData.poolDesc"
        /></el-form-item>
      </el-form>
    </div>
  </BaseDialog>
</template>
<script setup lang='ts'>
import { reactive, ref, onMounted, watch } from "vue";
import { ElMessage, FormInstance, FormRules } from "element-plus";
import { riskTypeList, riskPoolAdd } from "@/api/emergency";
import { areaTree } from "@/api/account";
import useUserStore from "@/store/modules/user";
const userStore = useUserStore();
const user = ref(JSON.parse(userStore.userInfo));
const userId = ref(user.value.userId);
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  form: Object,
});

const emits = defineEmits(["close"]);
const titleName = ref("新增");
// 表单
const formRef = ref<FormInstance>();
const ruleForm = reactive<FormRules>({
  name: [{ required: true, message: "请输入风险名", trigger: "blur" }],
  typeId: [{ required: true, message: "请选择风险类型", trigger: "blur" }],
  address: [{ required: true, message: "请输入详细地址", trigger: "blur" }],
  poolDesc: [{ required: true, message: "请输入风险描述", trigger: "blur" }],
  areaCode: [{ required: true, message: "请选择所属地区", trigger: "blur" }],
  lon: [{ required: true, message: "请输入经度", trigger: "blur" }],
  lat: [{ required: true, message: "请输入纬度", trigger: "blur" }],
});
const formData = ref<any>({});

const types = ref([]);

//保存并退出
const handleSubmit = () => {
  formRef.value?.validate((valid) => {
    if (valid) {
      let params = {
        ...formData.value,
        areaCode: "",
        poolId:formData.value.poolId?formData.value.poolId:'',
      };
      if (formData.value.areaCode instanceof Array) {
        params.areaCode =
          formData.value.areaCode[formData.value.areaCode.length - 1];
      } else {
        params.areaCode = formData.value.areaCode;
      };
      riskPoolAdd(params).then((res: any) => {
        if (res.code == 1) {
          ElMessage.success({
            message: "操作成功",
          });
          onclone();
        } else {
          ElMessage.error({
            message: res.message,
          });
        }
      });
    }
    return false;
  });
};

//关闭弹窗
const onclone = () => {
  formRef.value?.clearValidate();
  formData.value = {};
  emits("close");
};
//点位类型
const getRiskTypeList = () => {
  riskTypeList().then((res: any) => {
    types.value = res.data;
  });
};
//获取地区
const orgList = ref([]);
const getareaTree = () => {
  areaTree(userId.value).then((res: any) => {
    orgList.value = res.data;
  });
};
onMounted(() => {
  getRiskTypeList();
  getareaTree();
});

watch(
  () => props.form,
  (val: any) => {
    titleName.value = val.poolId ? "编辑" : "新增";
    formData.value = JSON.parse(JSON.stringify(val));
  }
);
</script>
<style scoped lang="scss">
</style>