lz_web_qwgl/src/views/backOfficeSystem/equipment/tcsb/editAddForm.vue

<template>
  <div class="dialog" v-if="dialogForm">
    <div class="head_box">
      <span class="title">{{ title }}</span>
      <div>
        <el-button type="primary" size="small" :loading="loading" @click="submit" v-show="!disabledFoem">保存</el-button>
        <el-button size="small" @click="close">关闭</el-button>
      </div>
    </div>
    <div class="formCnt">
      <el-form ref="elform" :model="formData" :label-width="110" :rules="rules" :inline="true">
        <div class="label">基础信息</div>
        <div class="infoItem">
          <el-form-item label="设备编号" prop="sbbh">
            <el-input v-model="formData.sbbh" placeholder="请输入设备编号"></el-input>
          </el-form-item>
          <el-form-item label="设备名称" prop="sbmc">
            <el-input v-model="formData.sbmc" placeholder="请输入设备名称"></el-input>
          </el-form-item>
          <el-form-item label="设备类型" prop="sblx">
            <MOSTY.Select :dictEnum="props.dic.D_JCGL_TCSB_SBLX" placeholder="请选择设备类型" v-model="formData.sblx" />
          </el-form-item>
          <el-form-item label="设备网络类型" prop="sbwllx">
            <MOSTY.Select :dictEnum="props.dic.D_JCGL_TCSB_WLLX" placeholder="请选择设备网络类型" v-model="formData.sbwllx" />
          </el-form-item>
          <el-form-item label="SIM卡号" prop="sbsim">
            <el-input v-model="formData.sbsim" placeholder="请输入SIM卡号"></el-input>
          </el-form-item>
          <br />
          <el-form-item label="单位管理" prop="gldwdm">
            <MOSTY.Department width="100%" clearable @getDepValue="getDepValue" v-model="formData.gldwdm" :placeholder="formData.gldwmc" />
          </el-form-item>
          <el-form-item label="使用单位" prop="sydwdm">
            <MOSTY.Department width="100%" clearable @getDepValue="getDepValue1" v-model="formData.sydwdm" :placeholder="formData.sydwmc" />
          </el-form-item>
          <el-form-item label="备注" style="width: 100%">
            <el-input placeholder="请输入备注" v-model="formData.bz" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea"></el-input>
          </el-form-item>
        </div>
        <div class="label">关联信息</div>
        <div class="infoItem">
          <el-form-item label="关联人员" prop="glryxm">
            <el-input v-model="formData.glryxm" placeholder="请输入关联人员"></el-input>
          </el-form-item>
          <el-form-item label="关联GPSID" prop="glgpsid">
            <el-input v-model="formData.glgpsid" placeholder="请输入关联GPSID"></el-input>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import{tcsbSave,tcsbsSetBbzt} from "@/api/lzqwzx/index.js"
import { serviceGet, servicePost, servicePut } from "@/api/serviceApi.js";
import { getDifferTime } from "@/utils/tools.js";
import * as rule from "@/utils/rules.js";
import { ref, defineExpose, reactive, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
const { D_BZ_SF, D_JC_XFJY_JYLX } = proxy.$dict("D_BZ_SF", "D_JC_XFJY_JYLX");
const emits = defineEmits(["updateDate"]);
const props = defineProps({
  dic: { type: Object, default: {} }
});
const title = ref("新增");
const elform = ref();
const disabledFoem = ref(false); //表单禁用
const dialogForm = ref(false); //弹窗显示隐藏
const loading = ref(false);
const formData = ref({});
const rules = reactive({
  sbbh: [{ required: true, message: "请输入设备编号", trigger: "blur" }],
  sbmc: [{ required: true, message: "请输入设备名称", trigger: "blur" }],
  gldwdm: [{ required: true, message: "请选择单位管理", trigger: "change" }],
  sblx: [{ required: true, message: "请选择设备类型", trigger: "change" }],
  sbwllx: [
    { required: true, message: "请选择设备网络类型", trigger: "change" }
  ],
  sydwdm: [{ required: true, message: "请选择使用单位", trigger: "change" }],
  sbsim: [{ required: true, message: "请输入SIM卡号", trigger: "blur" }],
  glryxm: [{ required: true, message: "请输入关联人员", trigger: "blur" }],
  glgpsid: [{ required: true, message: "请输入关联GPSID", trigger: "blur" }]
});
// 初始化数据
const init = (type, row) => {
  dialogForm.value = true;
  title.value = row ? "修改" : "新增";
  if (row) formData.value = JSON.parse(JSON.stringify(row)); //根据id查询详情
};
const getDepValue = (val) => {
  formData.value.gldwmc = val ? val.orgJc : "";
};
const getDepValue1 = (val) => {
  formData.value.sydwmc = val ? val.orgJc : "";
};
// 关闭
const close = () => {
  formData.value = {};
  dialogForm.value = false;
  loading.value = false;
};
// 提交
const submit = () => {
  elform.value.validate((valid) => {
    if (!valid) return false;
    loading.value = true;
    if (title.value == "新增") {
      tcsbSave(formData.value)
        .then((res) => {
          proxy.$message({ type: "success", message: "新增成功" });
          close();
          emits("updateDate");
        })
        .catch(() => {
          loading.value = false;
        });
    } else {
      tcsbsSetBbzt(formData.value)
        .then((res) => {
          proxy.$message({ type: "success", message: "修改成功" });
          close();
          emits("updateDate");
        })
        .catch(() => {
          loading.value = false;
        });
    }
  });
};

defineExpose({ init });
</script>

<style lang='scss' scoped>
@import "~@/assets/css/layout.scss";
@import "~@/assets/css/element-plus.scss";
.formCnt {
  height: calc(100% - 60px);
  padding: 10px;
  box-sizing: border-box;
  overflow: hidden;
  overflow-y: auto;
  .label {
    font-weight: 600;
    margin-bottom: 10px;
    width: 100%;
  }
  .infoItem {
    width: 100%;
  }
  .el-form--inline .el-form-item {
    width: 47%;
  }
}
</style>