report-vue/src/views/basic/basicIndex/index.vue

<!-- 应急物资分类表 -->
<template>
  <basic-container>
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="仓库全称" prop="name">
            <el-input v-model="ruleForm.name" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="仓库简称" prop="abbreviationName">
            <el-input v-model="ruleForm.abbreviationName" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="仓库类型" prop="warehouseType">
            <el-select v-model="ruleForm.warehouseType" multiple clearable>
              <el-option v-for="item in warehouse_type" :key="item.id" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="管理机构" prop="gljg">
            <el-input v-model="ruleForm.gljg" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="地址" prop="name">
            <el-col :span="12">
              <el-cascader
                clearable
                size="small"
                v-model="ruleForm.name"
                placeholder="请选择"
                :options="addressOption"
                :props="{ value: 'code',label: 'name' }"
                style="width: 100%"
                @change="handleChange"></el-cascader>
              </el-col>
              <el-col :span="12">
                <el-input v-model="ruleForm.deptAddress" />
              </el-col>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="法人信息" prop="legalPerson">
            <el-input v-model="ruleForm.legalPerson" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系电话" prop="deptPhone">
            <el-input v-model="ruleForm.deptPhone" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="库区图" prop="reservoirImg">
            <el-upload
              class="avatar-uploader"
              :action="fileUrl"
              :data="paramsData"
              :headers="myHeader"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="operationbox">
        <el-button type="success" @click="submitForm(ruleFormRef)">保存</el-button>
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
      </div>
    </el-form>
  </basic-container>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { getAddress, deptDetail } from "@/api/basicInfo/index";
import type { UploadProps } from 'element-plus'
import { useDict } from '@/hooks/dict';
const { warehouse_type } = useDict('warehouse_type');

//附件部分
const myHeader = { Authorization: "Bearer " + sessionStorage.getItem("access_token") }
const fileUrl = "/admin/sysFile/uploadVoucher"
let paramsData = reactive({
  bucket: "bound"
});
const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = ref({})


const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}
const addressOption = ref([])
const createdMth = async () => {
  getAddress().then((res: any) => {
    if (res.code === 0) {
      addressOption.value = res.data
    }
  });
  const deptId = JSON.parse(sessionStorage.getItem("userInfo")).deptId
  let deptData = await deptDetail(deptId)
  ruleForm.value = deptData.data
  if(deptData.data.parentId != '0'){
    let parentDept = await deptDetail(deptData.data.parentId)
    ruleForm.value.gljg = parentDept.data.abbreviationName
  }


}
createdMth()
const handleChange = (value) => {
  console.log(JSON.stringify(value))
}
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}))

/*----------------------库区图-----------------*/
const imageUrl = ref('')

const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw!)
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('Avatar picture must be JPG format!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  return true
}

</script>

<style lang="scss" scoped>
.operationbox {
  text-align: center;
  margin-top: 30px;
}
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>