烟花爆竹批发企业仓库安全风险监测前端
zhouwx
2025-04-15 f2593d3cf80998a831d07cc94ac49e4f51b04429
src/views/firework/warehouse/components/warehouseDialog.vue
@@ -2,7 +2,7 @@
  <div class="notice">
    <el-dialog
        v-model="dialogVisible"
        width="900px"
        width="750px"
        :before-close="handleClose"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
@@ -18,33 +18,37 @@
        </el-form-item>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="仓库名称:" prop="name" >
              <el-input v-model="state.form.name" placeholder="请输入仓库名称"></el-input>
            <el-form-item label="仓库名称:" prop="storeName" >
              <el-input v-model="state.form.storeName" placeholder="请输入仓库名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="仓库面积:" prop="name" >
              <el-input v-model="state.form.name" placeholder="请输入仓库面积"></el-input>
            <el-form-item label="仓库面积:" prop="acreage" >
              <el-input v-model="state.form.acreage" type="number" min="0" placeholder="请输入仓库面积">
                <template #append>㎡</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="仓库编号:" prop="name" >
              <el-input v-model="state.form.name" placeholder="请输入仓库编号"></el-input>
            <el-form-item label="仓库编号:" prop="storeNum" >
              <el-input v-model="state.form.storeNum" placeholder="请输入仓库编号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="核定药量:" prop="name" >
              <el-input v-model="state.form.name" placeholder="请输入核定药量"></el-input>
            <el-form-item label="核定药量:" prop="dosage" >
              <el-input v-model="state.form.dosage" type="number" min="0" placeholder="请输入核定药量">
                <template #append>kg</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="危险等级:" prop="name" >
            <el-form-item label="危险等级:" prop="dangerLevel" >
              <el-select
                  v-model="state.form.typeId"
                  v-model="state.form.dangerLevel"
                  placeholder="请选择"
                  style="width: 100%"
              >
@@ -58,91 +62,12 @@
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="核定人员数量:" prop="name" >
              <el-input v-model="state.form.name" placeholder="请输入核定人员数量"></el-input>
            <el-form-item label="核定人员数量:" prop="personLimit" >
              <el-input v-model="state.form.personLimit" placeholder="请输入核定人员数量" @input="state.form.personLimit= state.form.personLimit.replace(/[^\d]/g,'')"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div style="display: flex;align-items: center">
        <div style="font-size: 16px;font-weight: 600;margin: 10px">库房列表</div>
        <el-button style="margin-left: 10px" type="primary" @click="addRoom">新增库房</el-button>
      </div>
      <el-table :data="state.storeroomList" style="width: 100%;margin-top: 15px" border>
        <el-table-column label="序号" type="index" align="center" width="80" />
        <el-table-column prop="name" label="库房名称" align="center">
          <template #default="{ row }">
            <el-form :model="row" :rules="rules">
              <el-form-item prop="name">
                <el-input
                    v-model="row.name"
                />
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column prop="code" label="库房编号" align="center">
          <template #default="{ row }">
            <el-form :model="row" :rules="rules">
              <el-form-item prop="code">
                <el-input
                    v-model="row.code"
                />
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column prop="area" label="面积" align="center">
          <template #default="{ row }">
            <el-form :model="row" :rules="rules">
              <el-form-item prop="area">
                <el-input
                    v-model="row.area"
                />
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column prop="level" label="危险等级" align="center">
          <template #default="{ row }">
            <el-form :model="row" :rules="rules">
              <el-form-item prop="level">
                <el-input
                    v-model="row.level"
                />
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column prop="level" label="核定药量" align="center">
          <template #default="{ row }">
            <el-form :model="row" :rules="rules">
              <el-form-item prop="level">
                <el-input
                    v-model="row.level"
                />
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column prop="num" label="核定人员" align="center">
          <template #default="{ row }">
            <el-form :model="row" :rules="rules" >
              <el-form-item prop="num" >
                <el-input
                    v-model="row.num"
                />
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" >
          <template #default="scope">
            <el-button link type="danger" @click="delRoom(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <span class="dialog-footer">
            <el-button @click="handleClose" size="default">取 消</el-button>
@@ -162,6 +87,8 @@
import {getInfo} from "@/api/login";
import {getToken} from "@/utils/auth";
import {verifyPhone} from "@/utils/validate";
import Cookies from "js-cookie";
import {addWarehouse} from "@/api/company/warehouse";
const uploadFileUrl = ref(import.meta.env.VITE_APP_BASE_API + "/common/upload"); // 上传文件服务器地址
const { proxy } = getCurrentInstance();
@@ -171,66 +98,55 @@
const length = ref()
const emit = defineEmits(["getList"]);
const startPhone = ref('');
const validateUserPhone = (rule, value, callback)=>{
  if(value === ''){
    callback(new Error('请输入手机号'))
  }else if(state.title == '编辑' && value == startPhone.value){
    callback()
  } else{
    if(!verifyPhone(value)){
      callback(new Error('手机号格式有误'))
    }
  }
}
const state = reactive({
  form: {
    id: '',
    name: '',
    typeId:null,
    phone: '',
    acreage: '',
    dangerLevel:null,
    companyCode: '',
    storeNum: '',
    storeName: '',
    personLimit: null,
    dosage: null
  },
  typeList: [
    {
      id: 1,
      name: '法定代表人'
      name: '1.1级库房'
    },
    {
      id: 2,
      name: '主要负责人'
      name: '1.3级库房'
    },
    {
      id: 3,
      name: '安全负责人'
    },
    {
      id: 4,
      name: '保管员'
    },
    {
      id: 5,
      name: '守护员'
      name: '无药库房'
    },
  ],
  storeroomList: [],
  formRules:{
    name: [{ required: true, trigger: "blur", message:'请输入姓名' }],
    phone: [{ required: true, trigger: "blur", validator: validateUserPhone }],
    typeId: [{ required: true, trigger: "blur", message:'请选择人员类型' }],
    acreage: [{ required: true, trigger: "blur", message:'请输入面积' }],
    dangerLevel: [{ required: true, trigger: "blur",message:'请选择危险等级' }],
    dosage: [{ required: true, trigger: "blur", message:'请输入核定药量' }],
    personLimit: [{ required: true, trigger: "blur", message:'请输入核定人员数量' }],
    storeName: [{ required: true, trigger: "blur", message:'请输入仓库名称' }],
    storeNum: [{ required: true, trigger: "blur", message:'请输入仓库编号' }],
  },
})
const rules = {
  name: [
    { required: true, message: "姓名不能为空", trigger: "blur" },
  ],
};
const openDialog = async (type,value) => {
  title.value = type === 'add' ? '新增' : '编辑'
  const info = JSON.parse(Cookies.get('userInfo'))
  state.form.companyCode = info.companynumber
  if(type === 'edit') {
    state.form = JSON.parse(JSON.stringify(value))
    startPhone.value = value.phone
    const data = JSON.parse(JSON.stringify(value))
    Object.keys(state.form).forEach(key => {
      if(data[key]){
        state.form[key] = data[key]
      }
    })
    state.form.dangerLevel = Number(state.form.dangerLevel)
  }
  dialogVisible.value = true;
}
@@ -242,30 +158,30 @@
  if(valid){
    if(title.value === '新增'){
      const {id,fileList, ...data} = JSON.parse(JSON.stringify(state.form))
      // const res = await addTemplate(data)
      // if(res.code === 200){
      //   ElMessage({
      //     type: 'success',
      //     message: '新增成功'
      //   });
      // }else{
      //   ElMessage.warning(res.message)
      // }
      const res = await addWarehouse(data)
      if(res.code == 200){
        ElMessage({
          type: 'success',
          message: '新增成功'
        });
      }else{
        ElMessage.warning(res.message)
      }
      emit("getList")
      busRef.value.clearValidate();
      reset();
      dialogVisible.value = false;
    }else if(title.value === '编辑'){
      const {...data} = JSON.parse(JSON.stringify(state.form))
      const res = await editTemplate(data)
      // if(res.code === 200){
      //   ElMessage({
      //     type: 'success',
      //     message: '编辑成功'
      //   });
      // }else{
      //   ElMessage.warning(res.message)
      // }
      const res = await addWarehouse(data)
      if(res.code == 200){
        ElMessage({
          type: 'success',
          message: '编辑成功'
        });
      }else{
        ElMessage.warning(res.message)
      }
      emit("getList")
      busRef.value.clearValidate();
      reset();
@@ -304,9 +220,13 @@
const reset = () => {
  state.form = {
    id: '',
    name: '',
    typeId:null,
    phone: '',
    acreage: '',
    dangerLevel:null,
    companyCode: '',
    storeNum: '',
    storeName: '',
    personLimit: null,
    dosage: null
  }
  state.storeroomList = []
}