sgxt_web/src/views/backOfficeSystem/IntelligentControl/myControl/index.vue

<template>
  <div>
    <div class="titleBox">
      <PageTitle title="我的布控" />
    </div>
    <!-- 搜索 -->
    <div ref="searchBox">
      <Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount" />
    </div>
    <!-- 按钮组 -->
    <div class="content">
      <div class="flexcb btns">
        <div>
          <el-button type="primary" @click="sendControl">发起布控</el-button>
          <el-button type="primary">导出</el-button>
          <el-button type="primary">发起布控</el-button>
          <el-button type="danger">批量删除</el-button>
          <el-button type="primary" icon="CirclePlus">添加标签模型</el-button>
          <el-button type="primary" icon="CirclePlus" @click="areaModel">添加范围模型</el-button>
          <el-button type="primary" icon="CirclePlus" @click="personNum">涉及人数</el-button>
        </div>
        <el-input v-model="input2" style="max-width: 300px" placeholder="请输入关键字">
          <template #append><el-button type="primary" icon="Search"></el-button></template>
        </el-input>
      </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 #controls="{ row }">
            <el-button size="small" @click="addEdit('detail', row)">详情</el-button>
          </template>
        </MyTable>
        <Pages
          @changeNo="changeNo"
          @changeSize="changeSize"
          :tableHeight="pageData.tableHeight"
          :pageConfiger="{
            ...pageData.pageConfiger,
            total: pageData.total
          }"
        ></Pages>
      </div>
    </div>

    <!-- 详情 -->
    <DetailForm ref="detailDiloag" />
    <!-- 发起布控 -->
    <SendControl ref="sendControlRef"></SendControl>
    <PersonNum ref="personNumRef"></PersonNum>
    <!-- 添加范围模型 -->
    <AreaModel ref="areaModelRef"></AreaModel>
  </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 DetailForm from "./components/detailForm.vue";
  import SendControl from "./components/sendControl.vue";
  import PersonNum from "./components/personNum.vue";
  import AreaModel from "./components/areaModel.vue";

  import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
  import { reactive, ref, onMounted, getCurrentInstance } from "vue";
  const { proxy } = getCurrentInstance();
  const detailDiloag = ref();
  const searchBox = ref(); //搜索框
  const sendControlRef = ref();
  const personNumRef = ref();
  const searchConfiger = ref([
    {
      label: "布控级别",
      prop: "jyzt",
      placeholder: "请选择经营状况",
      showType: "select",
      options: [{ label: "在业", value: "在业" }]
    },
    {
      label: "布控对象",
      prop: "jyzt",
      placeholder: "请选择经营状况",
      showType: "select",
      options: [{ label: "在业", value: "在业" }]
    },
    {
      label: "布控状态",
      prop: "jyzt",
      placeholder: "请选择经营状况",
      showType: "select",
      options: [{ label: "在业", value: "在业" }]
    },
    { label: "布控时间", prop: "checkDate", placeholder: "布控时间", showType: "date" },
    {
      label: "预计标签模型",
      prop: "jyzt",
      placeholder: "请选预计标签模型",
      showType: "select",
      options: [{ label: "在业", value: "在业" }]
    },
    { label: "最近预警时间", prop: "checkDate", placeholder: "最近预警时间", showType: "date" },
    {
      label: "布控对象信息",
      prop: "jyzt",
      placeholder: "请选择布控对象信息",
      showType: "select",
      options: [{ label: "在业", value: "在业" }]
    },
    {
      label: "处理接受部门",
      prop: "jyzt",
      placeholder: "请选择经营状况",
      showType: "select",
      options: [{ label: "在业", value: "在业" }]
    }
  ]);
  const areaModelRef = ref();
  const queryFrom = ref({});
  const pageData = reactive({
    tableData: [
      {
        name: "1",
        ssxq: "1",
        cyxm: "1",
        qqksrxm: "1",
        qqksrsfzh: "1",
        jzrxm: "1"
      }
    ], //表格数据
    keyCount: 0,
    tableConfiger: {
      rowHieght: 61,
      showSelectType: "null",
      loading: false
    },
    total: 0,
    pageConfiger: {
      pageSize: 20,
      pageCurrent: 1
    }, //分页
    controlsWidth: 120, //操作栏宽度

    tableColumn: [
      { label: "布控级别", prop: "bkjb" },
      { label: "布控标题", prop: "bkbt" },
      { label: "布控对象", prop: "bkdx" },
      { label: "布控对象信息", prop: "bkdx" },
      { label: "预警标签模型", prop: "yjbqmx" },
      { label: "布控范围", prop: "bkfw" },
      { label: "预警信息", prop: "yjxx" },
      { label: "处置接收单位", prop: "czjsdw" },
      { label: "处置要求", prop: "czyq" },
      { label: "开始时间", prop: "kssj" },
      { label: "结束时间", prop: "jssj" },
      { label: "最近预警时间", prop: "zjyjsj" },
      { label: "失效时间", prop: "sxsj" },
      { label: "布控发起人", prop: "bkfqr" },
      { label: "布控状态", prop: "bkzt" }
    ]
  });
  onMounted(() => {
    // getList()
    tabHeightFn();
  });

  //选择类型
  const handleType = val => {
    pageData.keyCount++;
    pageData.pageConfiger.pageCurrent = 1;
    getList();
  };
  // 搜索
  const onSearch = val => {
    queryFrom.value = { ...val };
    pageData.pageConfiger.pageCurrent = 1;
    getList();
  };

  const changeNo = val => {
    pageData.pageConfiger.pageNum = val;
    getList();
  };
  const changeSize = val => {
    pageData.pageConfiger.pageSize = val;
    getList();
  };

  // 获取列表
  const getList = val => {
    // pageData.tableConfiger.loading = true;
    // let data = { ...pageData.pageConfiger, ...queryFrom.value };
    // let url = '/mosty-lzcj/tbDwMbkf/queryList';
    // qcckPost(data,url).then(res=>{
    //   pageData.tableData = res.records || [];
    //   pageData.total = res.total;
    //   pageData.tableConfiger.loading = false;
    // }).catch(()=>{ pageData.tableConfiger.loading = false; })
  };

  // 详情
  const addEdit = (type, row) => {
    detailDiloag.value.init(type, row);
  };
  // 发起
  const sendControl = () => {
    sendControlRef.value.init();
  };
  // 涉及人数
  const personNum = () => {
    personNumRef.value.init();
  };
  // 添加范围模型

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

<style lang="scss" scoped>
  .el-loading-mask {
    background: rgba(0, 0, 0, 0.5) !important;
  }
  .content {
    background-color: #fff;
    border-radius: 4px;
    padding-top: 10px;
    .btns {
      padding: 0 10px;
    }
  }
</style>