test: 1

src/views/lps/bkq/Main/index.vue

@@ -0,0 +1,194 @@
+<template>
+  <MOSTY.PageTree pageTitle="布控球管理" :isShowLeftTree="false">
+    <template #serach>
+      <el-divider />
+      <MOSTY.Search :searchArr="searchArr" @submit="onSearch" />
+      <el-divider />
+      <div class="btnBox">
+        <el-button @click="addInfo">
+          <el-icon size="small">
+            <Plus />
+          </el-icon>
+          新增
+        </el-button>
+      </div>
+    </template>
+    <template #table>
+      <section class="eltab9">
+        <MOSTY.Table :table-columns="data.tableColumn" :tableData="data.tableData" :tableloading="tableloading"
+          :isSort="true">
+          <template #sbzt="{ row }">
+            <dict-tag v-if="row.sbzt" :options="D_BZ_DLSBZT" :value="row.sbzt" :tag="false" :color="row.sbzt == '01' ? 'green' : 'orange'" />
+            <span v-else>无</span>
+          </template>
+          <!--操作-->
+          <template #actions="{ row }">
+            <span class="operesee" @click="seeInfo(row)"><el-icon>
+                <Compass />
+              </el-icon>查看</span>
+            <span class="operedit" @click="editInfo(row)"><el-icon>
+                <EditPen />
+              </el-icon>修改</span>
+            <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
+              @confirm="handledelete(row)">
+              <template #reference>
+                <span class="operdel" size="small"><el-icon>
+                    <Delete />
+                  </el-icon>
+                  删除</span>
+              </template>
+            </el-popconfirm>
+          </template>
+        </MOSTY.Table>
+      </section>
+      <div class="fenye">
+        <MOSTY.Pages :pageConfiger="listQuery" @changeNo="changeNo" @changeSize="changeSize"></MOSTY.Pages>
+      </div>
+    </template>
+  </MOSTY.PageTree>
+</template>
+
+<script setup>
+import * as MOSTY from "@/components/MyComponents/index"
+import { getItem } from "@/utils/storage"
+import { getApi, postApi } from "@/api/tobAcco_api.js"
+import { exportXlsx } from "@/excel/Export2Excel.js"
+import { ElMessage } from "element-plus"
+import { reactive, onMounted, ref, getCurrentInstance } from "vue"
+const { proxy } = getCurrentInstance()
+const { D_BZ_DLSBZT } = proxy.$dict("D_BZ_DLSBZT")
+const emit = defineEmits("changePage")
+const tableloading = ref(false)
+const listQuery = reactive({
+  pageCurrent: 1,
+  pageSize: 10,
+  total: 0
+})
+const searchArr = reactive([
+  {
+    showType: "select",
+    prop: "sbzt",
+    options: D_BZ_DLSBZT,
+    width: "250px",
+    placeholder: "请选择设备状态"
+  },
+  {
+    showType: "input",
+    prop: "keywords",
+    width: "250px",
+    placeholder: "请输名称或国标编号"
+  }
+])
+const data = reactive({
+  searchObj: {},
+  tableData: [],
+  tableColumn: [
+    {
+      title: "设备名称",
+      prop: "sbmc"
+    },
+    {
+      title: "国标编号",
+      prop: "sbbh"
+    },
+    {
+      title: "IP地址",
+      prop: "hosts"
+    },
+    {
+      title: "端口号",
+      prop: "port"
+    },
+    {
+      title: "设备状态",
+      prop: "sbzt",
+      slot: true
+    },
+    {
+      title: "操作",
+      prop: "actions",
+      slot: true
+    }
+  ]
+})
+onMounted(() => {
+  getTableData()
+})
+//分页
+const changeNo = val => {
+  listQuery.pageCurrent = val
+  getTableData()
+}
+const changeSize = val => {
+  listQuery.pageSize = val
+  getTableData()
+}
+// 查询数据
+const onSearch = obj => {
+  listQuery.sbzt = obj.sbzt
+  listQuery.keywords = obj.keywords
+  getTableData()
+}
+// 查询表格数据
+function getTableData() {
+  tableloading.value = true
+  getApi(listQuery, `/mosty-lps/bkqInfo/getPageList`).then(res => {
+    if (res.records) {
+      data.tableData = res.records
+      tableloading.value = false
+      listQuery.total = res.total
+    } else {
+      data.tableData = []
+      tableloading.value = false
+    }
+  }).finally(() => {
+    tableloading.value = false
+  })
+}
+//新增布控球
+const addInfo = () => {
+  let arr = {
+    title: "新增布控球",
+    saveBtnShow: true,
+    type: "add"
+  }
+  emit("changePage", "AddOrEdite", arr)
+}
+//修订布控球
+const editInfo = row => {
+  let arr = {
+    title: "修订布控球",
+    saveBtnShow: true,
+    type: "edit",
+    id: row.id ? row.id : null
+  }
+  emit("changePage", "AddOrEdite", arr)
+}
+//查看
+const seeInfo = row => {
+  let arr = {
+    title: "查看布控球",
+    saveBtnShow: false,
+    id: row.id ? row.id : null
+  }
+  emit("changePage", "AddOrEdite", arr)
+}
+
+//删除
+const handledelete = row => {
+  postApi({}, "/mosty-lps/bkqInfo/del/" + row.id).then(res => {
+    ElMessage.success("删除成功")
+    getTableData()
+  })
+}
+
+</script>
+
+<style lang="scss" scoped>
+.btnBox {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin-bottom: 12px;
+}
+</style>