sgxt_web/src/views/backOfficeManage/ControlManage/myControl/index.vue

<template>
  <div>
    <div class="titleBox">
      <PageTitle title="我的布控">
        <el-button type="primary" @click="addEdit('add', '')">
          发起布控
        </el-button>
        <el-button type="primary" @click="addEdit('add', '')">导出</el-button>
        <el-button type="danger" @click="addEdit('add', '')"
          >批量删除</el-button
        >
        <el-button type="primary" @click="openAddMxFn">
          <el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
          <span style="vertical-align: middle">添加标签模型</span>
        </el-button>
        <el-button type="primary" @click="openAddMxFn">
          <el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
          <span style="vertical-align: middle">添加范围模型</span>
        </el-button>
      </PageTitle>
    </div>
    <!-- 搜索 -->
    <div ref="searchBox">
      <Search
        :searchArr="searchConfiger"
        @submit="onSearch"
        :key="pageData.keyCount"
      >
      </Search>
    </div>
    <!-- 表格 -->
    <div class="tabBox">
      <MyTable
        :tableData="pageData.tableData"
        :tableColumn="pageData.tableColumn"
        :tableHeight="pageData.tableHeight"
        :key="pageData.keyCount"
        :tableConfiger="pageData.tableConfiger"
        :controlsWidth="pageData.controlsWidth"
        @chooseData="chooseData"
      >
        <template #sfjs="{ row }">
          <DictTag :value="row.sfjs" :options="list.sf" />
        </template>
        <template #xxlx="{ row }">
          <DictTag :value="row.xxlx" :options="list.xxlx" />
        </template>
        <!-- 操作 -->
        <template #controls="{ row }">
          <el-button size="small" @click="addEdit('edit', row)">编辑</el-button>
          <el-button size="small" @click="delDictItem([row.id])" type="danger">删除</el-button>
        </template>
      </MyTable>
      <Pages
        @changeNo="changeNo"
        @changeSize="changeSize"
        :tableHeight="pageData.tableHeight"
        :pageConfiger="{
          ...pageData.pageConfiger,
          total: pageData.total
        }"
      ></Pages>
    </div>
    <!-- 编辑详情 -->
    <EditAddForm
      ref="detailDiloag"
      :dic="{ xxlx: list.xxlx, sf: list.sf }"
      @updateDate="getList"
    />
    <Drawer ref="drawerDiloag" />
    <AddMx ref="addmxDiloag" />
  </div>
</template>

<script setup>
import PageTitle from "@/components/aboutTable/PageTitle.vue";
import MyTable from "@/components/aboutTable/MyTable.vue";
import Pages from "@/components/aboutTable/Pages.vue";
import Search from "@/components/aboutTable/Search.vue";
import EditAddForm from "./components/editAddForm.vue";
import Drawer from "./components/drawer.vue";
import AddMx from "./components/AddMx.vue";
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
const qypzDialog = ref();
const detailDiloag = ref();
const searchBox = ref(); //搜索框
const chooseType = ref("学校"); //选择的类型
const list = reactive({
  chooseList: ["学校", "医院", "娱乐场所", "民爆库房"],
  xxlx: [
    { label: "职业学校", value: "01" },
    { label: "大专", value: "02" },
    { label: "本科", value: "03" },
    { label: "研究生", value: "04" },
    { label: "博士", value: "05" }
  ],
  sf: [
    { label: "是", value: "1" },
    { label: "否", value: "0" }
  ]
});
const addmxDiloag=ref()
const drawerDiloag=ref()
const searchConfiger = ref([
  {
    label: "布控级别",
    prop: "sfbqdl",
    placeholder: "请选择布控级别",
    showType: "select",
    options: list.xxlx
  },
  {
    label: "布控对象",
    prop: "sfbqdl",
    placeholder: "请选择布控对象",
    showType: "select",
    options: list.xxlx
  },
  {
    label: "布控状态",
    prop: "sfbqdl",
    placeholder: "请选择布控状态",
    showType: "select",
    options: list.xxlx
  },
  {
    label: "布控时间",
    prop: "sfbqdl",
    placeholder: "请选择布控时间",
    showType: "datetimerange",
    options: list.xxlx
  },
  {
    label: "预警标签模型",
    prop: "sfbqdl",
    placeholder: "请选择预警标签模型",
    showType: "select",
    options: list.xxlx
  },
  {
    label: "最近预警时间",
    prop: "sfbqdl",
    placeholder: "请选择最近预警时间",
    showType: "date",
    options: list.xxlx
  },
  {
    label: "布控对象信息",
    prop: "sfbqdl",
    placeholder: "请选择布控对象信息",
    showType: "select",
    options: list.xxlx
  },
  {
    label: "处置接收部门",
    prop: "sfbqdl",
    placeholder: "请选择处置接收部门",
    showType: "select",
    options: list.xxlx
  }
]);
const queryFrom = ref({});
const pageData = reactive({
  tableData: [], //表格数据
  keyCount: 0,
  tableConfiger: {
    rowHieght: 61,
    showSelectType: "null",
    loading: false
  },
  total: 0,
  pageConfiger: {
    pageSize: 20,
    pageCurrent: 1
  }, //分页
  controlsWidth: 160, //操作栏宽度
  // 布控级别 布控标题 布控对象 布控对象信息 预警标签模型 布控范围 预警信息 处置接收单位 处置要求 开始时间 结束时间 最近预警时间 失效时间 布控发起人 布控状态
  tableColumn: [
    { label: "布控级别", prop: "name" },
    { label: "布控标题", prop: "xxrs" },
    { label: "布控对象", prop: "sfjs", showSolt: true },
    { label: "布控对象信息", prop: "dxxx", showSolt: true },
    { label: "预警标签模型", prop: "xzxm" },
    { label: "布控范围", prop: "bkfw" },
    { label: "预警信息", prop: "yjxx", showSolt: true },
    { label: "处置接收单位", prop: "jsdw", showSolt: true },
    { label: " 处置要求", prop: "czyq", showSolt: true },
    { label: " 开始时间", prop: "kssj", showSolt: true },
    { label: " 结束时间", prop: "jssj", showSolt: true },
    { label: " 最近预警时间", prop: "yjsj", showSolt: true },
    { label: " 失效时间", prop: "sxsj", showSolt: true },
    { label: " 布控发起人", prop: "fqr", showSolt: true },
    { label: " 布控状态", prop: "bkzt", showSolt: true }
  ]
});
onMounted(() => {
  getList(chooseType.value);
  tabHeightFn();
});

// 搜索
const onSearch = (val) => {
  queryFrom.value = { ...val };
  pageData.pageConfiger.pageCurrent = 1;
  getList(chooseType.value);
};

const changeNo = (val) => {
  pageData.pageConfiger.pageNum = val;
  getList(chooseType.value);
};
const changeSize = (val) => {
  pageData.pageConfiger.pageSize = val;
  getList(chooseType.value);
};
const openAddMxFn=()=>{
  addmxDiloag.value.init();
  // drawerDiloag.value.init();打开侧边组件
}
// 获取列表
const getList = (val) => {
  let url = "";
  switch (val) {
    case "学校":
      url = "/mosty-lzcj/tbDwXx/queryList";
      break;
    case "医院":
      url = "/mosty-lzcj/tbDwYy/queryList";
      break;
    case "娱乐场所":
      url = "/mosty-lzcj/TbDwYlth/queryList";
      break;
    case "民爆库房":
      url = "/mosty-lzcj/tbDwMbkf/queryList";
      break;
  }
  pageData.tableConfiger.loading = true;
  let data = { ...pageData.pageConfiger, ...queryFrom.value };
  qcckPost(data, url)
    .then((res) => {
      pageData.tableData = res.records || [];
      pageData.total = res.total;
      pageData.tableConfiger.loading = false;
    })
    .catch(() => {
      pageData.tableConfiger.loading = false;
    });
};
// 删除
const delDictItem = (ids) => {
  let url = "";
  switch (chooseType.value) {
    case "学校":
      url = "/mosty-lzcj/tbDwXx/delete";
      break;
    case "医院":
      url = "/mosty-lzcj/tbDwYy/delete";
      break;
    case "娱乐场所":
      url = "/mosty-lzcj/TbDwYlth/delete";
      break;
    case "民爆库房":
      url = "/mosty-lzcj/tbDwMbkf/delete";
      break;
  }
  // proxy.$confirm("确定要删除", "警告", {type: "warning"}).then(() => {
  //   qcckPost(ids,url).then(()=>{
  //     proxy.$message({ type: "success",  message: "删除成功" });
  //     getList(chooseType.value);
  //   })
  // }).catch(() => {});
};

// 新增
const addEdit = (type, row) => {
  detailDiloag.value.init(type, row, chooseType.value);
};

// 表格高度计算
const tabHeightFn = () => {
  pageData.tableHeight =
    window.innerHeight - searchBox.value.offsetHeight - 250;
  window.onresize = function () {
    tabHeightFn();
  };
};
</script>

<style>
.el-loading-mask {
  background: rgba(0, 0, 0, 0.5) !important;
}
</style>