test/src/views/lps/yjsb/AddOrEdite/index.vue

<template>
  <MOSTY.FromPage :title="props.formData.title" @closeDialog="closepost">
    <template #content>
      <MOSTY.Assort :title="'基础信息'" />
      <el-form :model="props.formData" ref="ruleFormRef" label-position="right" :rules="rules" label-width="150px"
        :disabled='!props.formData.saveBtnShow'>
        <el-form-item label="设备类型：" prop="sblx">
          <el-select v-model="props.formData.sblx" placeholder="请选择设备类型" clearable style="width: 337px">
            <el-option v-for="item in D_BZ_YJSBLX" :key="item.value" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="预警设备名称:" prop="sbmc">
          <el-input v-model="props.formData.sbmc" style="width: 337px" />
        </el-form-item>
        <el-form-item label="设备编号:" prop="sbbh">
          <el-input v-model="props.formData.sbbh" style="width: 337px" />
        </el-form-item>
        <el-form-item label="设备状态：" prop="sbzt">
          <el-select v-model="props.formData.sbzt" placeholder="请选择设备状态" clearable style="width: 337px">
            <el-option v-for="item in D_BZ_DLSBZT" :key="item.value" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="绑定设备:" prop="parentname">
          <el-input v-model="props.formData.parentname" style="width: 337px" readonly clearable>
            <template #append>
              <el-button class='cursor' @click="chooseSb()">选择</el-button>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="设备名称:" prop="name">
          <el-input v-model="props.formData.name" style="width: 337px" disabled />
        </el-form-item>
        <el-form-item label="所属场所:" prop="sitename">
          <el-input v-model="props.formData.sitename" style="width: 337px" disabled />
        </el-form-item>
        <el-form-item :label="props.formData.publicarea == '1' ? '所属场区:' : '所属建筑物:'" prop="buildingname">
          <el-input v-model="props.formData.buildingname" style="width: 337px" disabled />
        </el-form-item>
        <el-form-item label="所属楼层:" prop="floorname" v-if="props.formData.publicarea != '1'">
          <el-input v-model="props.formData.floorname" style="width: 337px" disabled />
        </el-form-item>
        <el-form-item label="部位名称:" prop="partname">
          <el-input v-model="props.formData.partname" style="width: 337px" disabled />
        </el-form-item>
        <el-form-item label="责任部门:" prop="deptname">
          <el-input v-model="props.formData.deptname" style="width: 337px" disabled />
        </el-form-item>
        <el-form-item label="责任人：" style="width: 100%; " prop="responsibilitypersonname">
          <el-input v-model="props.formData.responsibilitypersonname" :rows="3" type="textarea" style="width:1310px"
            disabled />
        </el-form-item>
        <el-form-item label="具体位置：" style="width: 100%; " prop="location">
          <el-input v-model="props.formData.location" :rows="3" type="textarea" style="width:1310px" />
        </el-form-item>
        <el-form-item label="备注：" style="width: 100%; ">
          <el-input v-model="props.formData.bz" :rows="3" type="textarea" style="width:1310px" />
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <el-button type="primary" @click="saveData(ruleFormRef)" v-loading="saveloading"
        v-if='props.formData.saveBtnShow'> <el-icon>
          <DocumentChecked />
        </el-icon>保存 </el-button>
      <el-button @click="closepost"><el-icon>
          <DocumentDelete />
        </el-icon>关闭</el-button>
    </template>
  </MOSTY.FromPage>
  <div>
    <Sbss v-model="showSbss" :data="props.formData.parentid" :sbid="leaderid" :sblx="sblx" @choosedSbss="choosedSbss"
      searchType="04"></Sbss>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance, defineAsyncComponent, onMounted, watch } from "vue";
import * as MOSTY from "@/components/MyComponents/index";
import Sbss from "@/components/MyComponents/ChooseUser/sbss.vue";
import { ElMessage } from "element-plus";
import * as rule from "@/utils/rules.js";
import { getItem } from "@/utils/storage";
import { getApi, postApi } from "@/api/tobAcco_api.js";
const { proxy } = getCurrentInstance();
const { D_BZ_DLSBZT, D_BZ_YJSBLX } = proxy.$dict("D_BZ_DLSBZT", "D_BZ_YJSBLX")
const rules = {
  sitename: [{ required: true, message: "请输入场所名称" }],
  partname: [{ required: true, message: "请输入部位名称" }],
  buildingname: [{ required: true, message: "请输入所属建筑物" }],
  floorname: [{ required: true, message: "请输入所属楼层" }],
  sbmc: [{ required: true, message: "请输入预警设备名称" }],
  sbbh: [{ required: true, message: "请输入设备编号" }],
  sbzt: [{ required: true, message: "请选择设备状态" }],
  parentname: [{ required: true, message: "请选择绑定设备" }],
  name: [{ required: true, message: "设备名称不能为空" }],
  deptname: [{ required: true, message: "责任部门不能为空" }],
  responsibilitypersonname: [{ required: true, message: "责任人不能为空" }],
  location: [{ required: true, message: "请输入具体位置" }]
};
const saveloading = ref(false)
const showSbss = ref(false);
const ruleFormRef = ref();
const sblx = ref(null)
const emits = defineEmits(["saveSuccess", '"update:modelValue"']);
// 接收子组件传来的
const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true
  },
  formData: {
    type: Object,
    default: {}
  }
});
watch(
  () => props.formData.sblx,
  (val) => {
    let arr = [['01', '200101030500'], ['02', '200101020200'], ['03', '200101020100'], ['04', '200101020300'],
    ['05', '200101030100']];
    for (let i = 0; i < arr.length; i++) {
      const item = arr[i];
      let zddm = item[0];
      let sblxdm = item[1];
      if (zddm == val) {
        sblx.value = sblxdm;
        break
      }
    }
  },
  {
    immediate: true,
    deep: true
  }
);
onMounted(() => {
  props.formData.publicarea = '1'
  //获取建筑物详情
  if (props.formData.buildingid) {
    getApi({}, `/mosty-jcgl/building/getBuildingById/${props.formData.buildingid}`).then(res => {
      props.formData.publicarea = res.publicarea ? res.publicarea : "2"
    })
  }
})
// 选择设备设施
function choosedSbss(data) {
  props.formData.parentid = data.id
  props.formData.parentname = data.name
  props.formData.location = data.location
  // 查询主设备信息
  getApi({}, "/mosty-jcgl/sbglAqsbss/queryTbSbglAqsbssById?id=" + data.zbid).then((res) => {
    if (res) {
      props.formData.siteid = res.siteid
      props.formData.sitename = res.sitename
      props.formData.buildingid = res.buildingid
      props.formData.buildingname = res.buildingname
      // 查询建筑物
      //获取建筑物详情
      getApi({}, `/mosty-jcgl/building/getBuildingById/${res.buildingid}`).then(res => {
        props.formData.publicarea = res.publicarea ? res.publicarea : "2"
      })
      props.formData.floorid = res.floorid
      props.formData.floorname = res.floorname
      props.formData.partid = res.partid
      props.formData.partname = res.partname
      props.formData.sbid = res.id
      props.formData.name = res.name
      props.formData.deptcode = res.responsibilitydeptid
      props.formData.deptname = res.responsibilitydeptname
      props.formData.responsibilitypersonname = res.responsibilitypersonname
      props.formData.responsibilityperson = res.responsibilityperson
    } else {
      ElMessage.error("未找到设备信息");
    }
  })
}
// 打开选择设备弹窗
function chooseSb() {
  if (!sblx.value) {
    ElMessage.success("请先选择设备类型");
    return;
  }
  showSbss.value = true
}
function closepost() {
  if (props.formData.saveBtnShow) {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？').then(() => {
      emits("saveSuccess");
    })
  } else {
    emits("saveSuccess");
  }
}
// 保存数据
const saveData = async (ruleFormRef) => {
  saveloading.value = true
  if (!ruleFormRef) return
  ruleFormRef.validate((valid) => {
    if (valid) {
      if (!props.formData.id) {
        postApi(props.formData, "/mosty-lps/yjsbInfo/add").then((res) => {
          ElMessage.success("新增成功");
          emits("saveSuccess");
        }).finally(() => {
          saveloading.value = false
        })
      } else {
        postApi(props.formData, "/mosty-lps/yjsbInfo/edit").then((res) => {
          ElMessage.success("修改成功");
          emits("saveSuccess");
        }).finally(() => {
          saveloading.value = false
        })
      }
    } else {
      saveloading.value = false
      ElMessage.warning('请输入必填项！！！')
    }
  })
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  --el-dialog-margin-top: 10vh !important;
}

::v-deep .el-form {
  width: 90%;
  margin: 10px 20px;
  padding: 10px;
  flex-wrap: wrap;
  justify-content: start;
}

::v-deep .el-tabs--border-card>.el-tabs__header .el-tabs__item {
  color: #fff;
}

::v-deep .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
  color: var(--el-color-primary);
}

.table-lable {
  margin: 10px;
  color: var(--el-color-primary);
}

::v-deep ::-webkit-scrollbar {
  display: none !important;
}

::v-deep .el-pagination {
  justify-content: center !important;
}

::v-deep .el-form-item__content {
  margin-left: 0px !important;
}
</style>