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

<template>
  <MOSTY.FromPage :title="props.editObj.title" @closeDialog="closepost">
    <template #content>
      <MOSTY.Assort :title="'基础信息'" />
      <el-form :model="data.config" ref="ruleFormRef" label-position="right" :rules="rules" label-width="150px"
        :disabled='!props.editObj.saveBtnShow'>
        <el-form-item label="设备类型：" prop="sblx">
          <el-select v-model="data.config.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="data.config.sbmc" style="width: 337px" />
        </el-form-item>
        <el-form-item label="设备编号:" prop="sbbh">
          <el-input v-model="data.config.sbbh" style="width: 337px" />
        </el-form-item>
        <el-form-item label="设备状态：" prop="sbzt">
          <el-select v-model="data.config.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="IP地址：" prop="ipaddr">
          <el-input v-model="data.config.ipaddr" placeholder="请输入IP地址" style="width: 337px"></el-input>
        </el-form-item>
        <el-form-item label="端口号：" prop="port">
          <el-input v-model="data.config.port" type="number" placeholder="请输入端口号" style="width: 337px"></el-input>
        </el-form-item>
        <el-form-item label="绑定设备:" prop="parentname">
          <el-input v-model="data.config.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="sitename">
          <el-input v-model="data.config.sitename" style="width: 337px" disabled />
        </el-form-item>
        <el-form-item :label="data.config.publicarea == '1' ? '所属场区:' : '所属建筑物:'" prop="buildingname">
          <el-input v-model="data.config.buildingname" style="width: 337px" disabled />
        </el-form-item>
        <el-form-item label="所属楼层:" prop="floorname" v-if="data.config.publicarea != '1'">
          <el-input v-model="data.config.floorname" style="width: 337px" disabled />
        </el-form-item>
        <el-form-item label="部位名称:" prop="partname">
          <el-input v-model="data.config.partname" style="width: 337px" disabled />
        </el-form-item>
        <el-form-item label="责任部门:" prop="deptname">
          <el-input v-model="data.config.deptname" style="width: 337px" disabled />
        </el-form-item>
        <el-form-item label="责任人：" style="width: 100%; " prop="responsibilitypersonname">
          <el-input v-model="data.config.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="data.config.location" :rows="3" type="textarea" style="width:1310px" />
        </el-form-item>
        <el-form-item label="备注：" style="width: 100%; ">
          <el-input v-model="data.config.bz" :rows="3" type="textarea" style="width:1310px" />
        </el-form-item>
      </el-form>
      <MOSTY.Assort v-if="data.config.id" :title="'关联信息(固定信息)'" />
      <div>
        <div v-if="data.config.id">
          <div class="table-lable">
            <span>动态信息</span>
            <img :src="getImgUrl('img/icon-jt.png')" style="cursor: pointer" @click="isShowdt = !isShowdt" />
          </div>
          <div v-if="data.config.id">
            <MOSTY.TabList :tablist="tablist2" :obj="data.config" :showCount="true" :sblx="sblx"
              :isEdit="props.editObj.saveBtnShow" @tableChange="tableChange" @resetChange="resetChange" />
          </div>
        </div>
      </div>
    </template>
    <template #footer>
      <el-button type="primary" @click="saveData(ruleFormRef)" v-loading="saveloading" v-if='props.editObj.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="data.config.parentid" :sbid="leaderid" :sblx="sblx" @choosedSbss="choosedSbss"
      searchType="04"></Sbss>
  </div>
</template>

<script setup>
import { getImgUrl } from "@/utils/tools.js"
import { ref, getCurrentInstance, onMounted, watch, reactive, defineAsyncComponent } from "vue";
import * as MOSTY from "@/components/MyComponents/index";
import Sbss from "@/components/MyComponents/ChooseUser/sbss.vue";
import { ElMessage } from "element-plus";
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: "请选择设备状态" }],
  sblx: [{ required: true, message: "请选择设备类型" }],
  parentname: [{ required: true, message: "请选择绑定设备" }],
  ipaddr: [{ required: true, message: "请输入IP地址" }],
  port: [{ required: true, message: "请输入端口号" }],
  deptname: [{ required: true, message: "责任部门不能为空" }],
  responsibilitypersonname: [{ required: true, message: "责任人不能为空" }],
  location: [{ required: true, message: "请输入具体位置" }]
};
const tablist2 = ref([])
const saveloading = ref(false)
const showSbss = ref(false);
const ruleFormRef = ref();
const sblx = ref(null)
const emit = defineEmits(["saveSuccess", '"update:modelValue"']);
// 接收子组件传来的
const props = defineProps({
  editObj: {
    type: Object,
    default: () => { }
  }
});
const data = reactive({
  fromObj: {},
  config: {
    title: "",
    saveBtnShow: true,
    type: ""
  }
})
watch(
  () => data.config.sblx,
  (val) => {
    let arr = [['01', '200101030500'], ['02', '200101020200'], ['03', '200101020100'], ['04', '200101020300'],
    ['05', '200101030100'], ['06', '200102010000']];
    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;
        if (["200101060100", '200101060200', '200101030500', '200101020200',
          '200101020100', '200101020300', '200102010000', "200101030100"].includes(sblx.value)) {
          let title = '附属设备'
          if (['200101020200', '200101020100'].includes(sblx.value)) {
            title = '液位仪';
          } else if ('200101020300' == sblx.value) {
            title = '压力传感器'
          } else if ('200102010000' == sblx.value) {
            title = '视频摄像头'
          }
          tablist2.value.push({
            title: title,
            num: 0,
            icon: "sbss2",
            sblx: sblx.value,
            actives: true,
            components: defineAsyncComponent(() => import("@/components/MyComponents/TabList/Fssblb.vue"))
          })
        }
        break
      }
    }
  },
  {
    immediate: true,
    deep: true
  }
);
onMounted(() => {
  data.config.publicarea = '1'
  if (props.editObj) {
    data.config = props.editObj
  }
  getMain(data.config.id)
})
//子表总数
function gettabcount() {
  getApi({ id: data.config.parentid }, "/mosty-jcgl/aqsbssZb/countAll").then(res => {
    tablist2.value.forEach(item => {
      if (["附属设备", "液位仪", "压力传感器", "视频摄像头"].includes(item.title)) {
        item.num = res ? res : 0
      }
    })
  })
}
// 获取详情
function getMain(id) {
  if (id) {
    getApi({ id: id }, "/mosty-lps/yjsbInfo/getInfo").then(res => {
      if (res) {
        data.config = res
        //获取建筑物详情
        if (data.fromObj.buildingid) {
          getApi({}, `/mosty-jcgl/building/getBuildingById/${data.fromObj.buildingid}`).then(res => {
            data.config.publicarea = res.publicarea ? res.publicarea : "2"
          })
        }
        //统计各类总数
        gettabcount()
      }
    })
  }
}
//获取子表数据
function tableChange(val) {
  gettabcount()
}
// 选择设备设施
function choosedSbss(res) {
  data.config.parentid = res.id
  data.config.parentname = res.name
  data.config.location = res.location
  data.config.siteid = res.siteid
  data.config.sitename = res.sitename
  data.config.buildingid = res.buildingid
  data.config.buildingname = res.buildingname
  //获取建筑物详情
  getApi({}, `/mosty-jcgl/building/getBuildingById/${res.buildingid}`).then(resp => {
    data.config.publicarea = resp.publicarea ? resp.publicarea : "2"
  })
  data.config.floorid = res.floorid
  data.config.floorname = res.floorname
  data.config.partid = res.partid
  data.config.partname = res.partname
  data.config.sbid = res.id
  data.config.name = res.name
  data.config.deptcode = res.responsibilitydeptid
  data.config.deptname = res.responsibilitydeptname
  data.config.responsibilitypersonname = res.responsibilitypersonname
  data.config.responsibilityperson = res.responsibilityperson
}
// 打开选择设备弹窗
function chooseSb() {
  if (!sblx.value) {
    ElMessage.success("请先选择设备类型");
    return;
  }
  showSbss.value = true
}
function closepost() {
  if (props.editObj.saveBtnShow) {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？').then(() => {
      emit("changePage", "Main")
    })
  } else {
    emit("changePage", "Main")
  }
}
// 保存数据
const saveData = async (ruleFormRef) => {
  saveloading.value = true
  if (!ruleFormRef) return
  ruleFormRef.validate((valid) => {
    if (valid) {
      if (!props.editObj.id) {
        postApi(data.config, "/mosty-lps/yjsbInfo/add").then((res) => {
          ElMessage.success("新增成功");
          emit("changePage", "Main")
        }).finally(() => {
          saveloading.value = false
        })
      } else {
        postApi(data.config, "/mosty-lps/yjsbInfo/edit").then((res) => {
          ElMessage.success("修改成功");
          emit("changePage", "Main")
        }).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>