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

<template>
  <BaseDialog
    :dialogVisible="props.visible"
    @close="onclone"
    :titleName="
      props.readonly
        ? '物资详情'
        : props.form.othequipmentid
        ? '编辑应急物资'
        : '新增应急物资'
    "
    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="addForm"
      >
        <el-form-item label="仓库名称：" prop="houseName">
          <el-input
            :readonly="props.readonly"
            placeholder="请输入仓库名称"
            v-model="addForm.houseName"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="装备名称：" prop="equname">
          <el-input
            :readonly="props.readonly"
            placeholder="请输入装备名称"
            v-model="addForm.equname"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="装备数量：" prop="equnum">
          <el-input-number
            :readonly="props.readonly"
            :min="0"
            :step="1"
            step-strictly
            v-model="addForm.equnum"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="存放场所：" prop="storageplace">
          <el-input
            :readonly="props.readonly"
            placeholder="请输入存放场所"
            v-model="addForm.storageplace"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="联系方式：" prop="equphone">
          <el-input
            :readonly="props.readonly"
            placeholder="请输入联系电话"
            v-model="addForm.equphone"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="所属单位：" prop="possession">
          <el-input
            :readonly="props.readonly"
            placeholder="请输入所属单位"
            v-model="addForm.possession"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="行业领域：" prop="industry">
          <el-input
            :readonly="props.readonly"
            placeholder="请输入行业领域"
            v-model="addForm.industry"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="类型：" prop="equtype">
          <el-select
            :disabled="props.readonly"
            placeholder="请选择类型"
            v-model="addForm.equtype"
          >
            <el-option
              v-for="(item, index) in equtypes"
              :value="item.value"
              :label="item.label"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="主要功能：" prop="equfunction" style="width: 100%;">
          <el-input
            :readonly="props.readonly"
            placeholder="请输入主要功能"
            v-model="addForm.equfunction"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="工作附件：">
          <el-upload
            class="avatar-uploader"
            ref="upload"
            action="#"
            accept="image/jpeg"
            list-type="picture-card"
            :show-file-list="false"
            :on-change="beforeAvatarUpload"
            :auto-upload="false"
            :http-request="handleUpload"
            :disabled="props.readonly"
          >
            <img
<<<<<<< HEAD:src/views/emergency/equip/inventory/AddWarehouse.vue
              v-if="addPostFactorForm.equipPhoto"
              :src="addPostFactorForm.equipPhoto"
              style="width: 100%; height: 100%;"
=======
              v-if="addForm.equipPhoto"
              :src="baseImgUrl + addForm.equipPhoto"
              style="width: 100%; height: 100%"
>>>>>>> e36af856493c21fdd846c5881a8f69d73962aad5:src/views/emergency/house/dialog/add-equip-dialog.vue
            />
            <el-icon v-else class="avatar-uploader-icon">
              <Plus />
            </el-icon>
          </el-upload>
        </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 { saveOthequipment, getOtheWareHouseList } from "@/api/Othteam";
import { uploadFile, getFile, delFile } from "@/api/file";

const baseImgUrl = ref(import.meta.env.VITE_UPLOAD_URL);

const formRef = ref<FormInstance>();
const userStore = useUserStore();
const user = ref(JSON.parse(userStore.userInfo));
const userId = ref(user.value.userId);
const uuid = ref("");
const equtypes = ref([
  {
    value: "个人防护装备",
    label: "个人防护装备",
  },
  {
    value: "消防装备",
    label: "消防装备",
  },
  {
    value: "通信装备",
    label: "通信装备",
  },
  {
    value: "报警装备",
    label: "报警装备",
  },
  {
    value: "特殊专业性应急装备",
    label: "特殊专业性应急装备",
  },
  {
    value: "医疗救护装备",
    label: "医疗救护装备",
  },
]);
const ruleForm = reactive<FormRules>({
  houseId: [
    {
      required: true,
      message: "请选择仓库名称",
      trigger: "blur",
    },
  ],
  equname: [
    {
      required: true,
      message: "请输入装备名称",
      trigger: "blur",
    },
  ],
  equnum: [
    {
      required: true,
      message: "请装备数量",
      trigger: "change",
    },
  ],
  storageplace: [
    {
      required: true,
      message: "请输入存放场所",
      trigger: "blur",
    },
  ],
  equphone: [
    {
      required: true,
      message: "请输入联系电话",
      trigger: "blur",
    },
  ],
  equtype: [
    {
      required: true,
      message: "请选择类型",
      trigger: "blur",
    },
  ],
});
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  form: Object,
  readonly: {
    type: Boolean,
    default: false,
  },
  id: String,
});
const listperformid = ref(props.id);
const addForm = ref(<any>{});
const emits = defineEmits(["close", "onSubmit"]);
//保存并退出
const handleSubmit = () => {
  formRef.value?.validate((valid) => {
    if (valid) {
      addForm.value.othequipmentid = addForm.value.othequipmentid || uuid.value;
      addForm.value.userId = userId.value;
      addForm.value.houseId = props.id;

      saveOthequipment(addForm.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 upload = ref();
const beforeAvatarUpload = () => {
  upload.value.submit();
  return true;
};
//图片上传
const handleUpload = (res) => {
  let file = res.file;
  const formData = new FormData();
  formData.append("file", file);
  let uuids = addForm.value.othequipmentid || uuid.value;
  uploadFile(userId.value, uuids, FileType.equipment, formData).then(
    (res: any) => {
      if (res) {
        ElMessage.success({
          message: "上传成功！",
          type: "success",
        });
        getFiles();
      }
    }
  );
};
//图片查询
const getFiles = () => {
  getFile(addForm.value.othequipmentid || uuid.value, FileType.equipment).then(
    (res: any) => {
      if (res.data.length > 0) {
        const path = res.data[res.data.length - 1];
        addForm.value.equipPhoto =
          import.meta.env.VITE_UPLOAD_URL + path.filepath;
      }
    }
  );
};
//关闭弹窗
const onclone = () => {
  emits("close");
};

onMounted(() => {});

watch(
  () => props.form,
  (val) => {
    uuid.value = getUUID();
    if (val) {
      if (!props.visible) return;
      addForm.value = val;
      getFiles();
    }
  }
);
</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>