daofu-gov-pc/src/views/emergency/house/dialog/add-house-dialog.vue

<template>
  <BaseDialog
    :dialogVisible="props.visible"
    @close="onclone"
    :titleName="props.form.houseId ? '编辑应急仓库' : '新增应急仓库'"
    width="50%"
    @onSubmit="handleSubmit"
    :footerclosed="true"
    :diafooter="true"
    :footerkeepnaem="props.readonly ? false : true"
  >
    <div class="detailForm-content">
      <el-form
        ref="formRef"
        label-position="right"
        label-width="150px"
        :rules="ruleForm"
        :model="addPostFactorForm"
      >
        <el-form-item label="仓库名称：" prop="houseName">
          <el-input
            :readonly="props.readonly"
            placeholder="请输入仓库名称"
            v-model="addPostFactorForm.houseName"
          ></el-input>
        </el-form-item>
        <el-form-item label="管理员：" prop="name">
          <el-input
            :readonly="props.readonly"
            placeholder="请输入管理员"
            v-model="addPostFactorForm.name"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系方式：" prop="telephone">
          <el-input
            :readonly="props.readonly"
            placeholder="请输入联系电话"
            v-model="addPostFactorForm.telephone"
          ></el-input>
        </el-form-item>
        <el-form-item label="所属地区：" prop="orgCode">
          <el-cascader
            v-model="addPostFactorForm.orgCode"
            placeholder="请选择所属地区"
            @change="handleAreaChange"
            :options="orgList"
            :props="{
              checkStrictly: true,
              label: 'orgname',
              value: 'orgcode',
            }"
            clearable
          ></el-cascader>
        </el-form-item>
        <el-form-item label="经度：" prop="lon">
          <el-input
            :readonly="props.readonly"
            placeholder="请输入经度"
            v-model="addPostFactorForm.lon"
          ></el-input>
        </el-form-item>
        <el-form-item label="纬度：" prop="lat">
          <el-input
            :readonly="props.readonly"
            placeholder="请输入维度"
            v-model="addPostFactorForm.lat"
          ></el-input>
        </el-form-item>
        <el-form-item label="所属单位：" prop="possession" style="width: 100%">
          <el-input
            :readonly="props.readonly"
            placeholder="请输入所属单位"
            v-model="addPostFactorForm.possession"
          ></el-input>
        </el-form-item>

        <el-form-item label="地址：" prop="address" style="width: 100%">
          <el-input
            :readonly="props.readonly"
            placeholder="请输入详细地址"
            v-model="addPostFactorForm.address"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
  </BaseDialog>
</template>
<script setup lang="ts" >
import { reactive, ref, onMounted, watch } from "vue";
import useUserStore from "@/store/modules/user";
import { ElMessage, FormInstance, FormRules } from "element-plus";
import { getYears, getUUID, FileType } from "@/utils/common";
import {
  saveOtheWareHouse,
  getOtheWareHouseList,
  getHouseSysUser,
} from "@/api/Othteam";
import { areaTree } from "@/api/account";
const formRef = ref<FormInstance>();
const userStore = useUserStore();
const user = ref(JSON.parse(userStore.userInfo));
const userId = ref(user.value.userId);
const uuid = ref("");
const ruleForm = reactive<FormRules>({
  houseName: [{ required: true, message: "请输入仓库名称", trigger: "blur" }],
  telephone: [
    {
      required: true,
      message: "请输入仓库管理员联系方式",
      trigger: "blur",
    },
  ],
  orgCode: [
    { required: true, message: "请选择仓库所属地区", trigger: "change" },
  ],
  possession: [
    { required: true, message: "请输入仓库所属单位", trigger: "blur" },
  ],
  address: [{ required: true, message: "请输入仓库", trigger: "blur" }],
  name: [
    {
      required: true,
      message: "请输入仓库管理员",
      trigger: "change",
    },
  ],
});
const adminOptions = ref([]);
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  form: Object,
  readonly: {
    type: Boolean,
    default: false,
  },
  id: String,
});
const listperformid = ref(props.id);
const addPostFactorForm = ref(<any>{});
const emits = defineEmits(["close", "onSubmit"]);
//保存并退出
const handleSubmit = () => {
  formRef.value?.validate((valid) => {
    if (valid) {
      addPostFactorForm.value.houseId =
        addPostFactorForm.value.houseId || uuid.value;
      addPostFactorForm.value.userId = userId.value;
      saveOtheWareHouse(addPostFactorForm.value).then((res: any) => {
        if (res.code == 1) {
          ElMessage.success({
            message: "保存成功",
            type: "success",
          });
          onclone();
        } else
          ElMessage.error({
            message: res.message,
            type: "success",
          });
      });
    }
    return false;
  });
};
// 政府用户列表
const getGovUserList = () => {
  getHouseSysUser(userId.value).then((res: any) => {
    adminOptions.value = res.data;
  });
};
//获取地区
const orgList = ref([]);
const getareaTree = () => {
  areaTree(userId.value).then((res: any) => {
    orgList.value = res.data;
  });
};
const handleAreaChange = (val) => {
  addPostFactorForm.value.orgCode =
    addPostFactorForm.value.orgCode[addPostFactorForm.value.orgCode.length - 1];
  addPostFactorForm.value.streetCode = val[1] || "";
  addPostFactorForm.value.communityCode = val[2] || "";
};

//选择管理员数据处理
const condition = ref("");
const remoteMethod = (val) => {
  condition.value = val;
  getGovUserList();
};
//选择管理员数据处理
const adminId = ref("");
const adminOption = (val) => {
  adminId.value = val;
};
//关闭弹窗
const onclone = () => {
  emits("close");
};
onMounted(() => {
  getGovUserList();
  getareaTree();
});
watch(
  () => props.form,
  (val) => {
    uuid.value = getUUID();
    if (val) {
      if (!props.visible) return;
      addPostFactorForm.value = val;
    }
  }
);
</script>

<style lang="scss" scoped>
.detailForm-content {
  margin-right: 30px;
}
:deep(.el-form) {
  display: flex;
  flex-wrap: wrap;
  // justify-content: space-around;
  justify-content: space-between;
}
:deep(.el-form-item) {
  width: 47%;
}
</style>