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="danger">批量删除</el-button>
          <el-button type="primary" icon="CirclePlus">添加标签模型</el-button>
          <el-button type="primary" icon="CirclePlus" @click="drawerModel"
            >添加范围模型</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 #bkDj="{ row }">
            <DictTag :tag="false" :value="row.bkDj" :options="D_GS_BK_DJ" />
          </template>
          <template #bkDx="{ row }">
            <DictTag :tag="false" :value="row.bkDx" :options="D_GS_BK_DX" />
          </template>
          <template #bkZt="{ row }">
            <DictTag :tag="false" :value="row.bkZt" :options="D_GS_BK_ZT" />
          </template>
          <template #czYq="{ row }">
            <DictTag :tag="false" :value="row.czYq" :options="D_GS_BK_CZYQ" />
          </template>
          <template #czJsdwdm="{ row }">
            <div>
              {{
                deptList.find((item) => item.id == row.czJsdwdm)?.label ||
                "未知单位"
              }}
            </div>
          </template>
          <!-- 操作 -->
          <template #controls="{ row }">
            <el-button
              v-if="row.bkZt == '01' || row.bkZt == '03' || row.bkZt == '06'"
              size="small"
              @click="editControl('edit', row)"
              >编辑</el-button
            >
            <el-button
              v-if="row.bkZt == '01' || row.bkZt == '03' || row.bkZt == '06'"
              size="small"
              @click="openDetail(row)"
              >送审</el-button
            >
            <el-button size="small" @click="info('detail', row)"
              >详情</el-button
            >
          </template>
        </MyTable>
        <Pages
          @changeNo="changeNo"
          @changeSize="changeSize"
          :tableHeight="pageData.tableHeight"
          :pageConfiger="{
            ...pageData.pageConfiger,
            total: pageData.total
          }"
        ></Pages>
      </div>
      <el-dialog
        v-model="dialogVisible"
        title="发起送审"
        width="500px"
        :before-close="handleClose"
      >
        <span>是否要发起送审</span>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="autoEdit()"> 确定 </el-button>
          </div>
        </template>
      </el-dialog>
    </div>

    <!-- 详情 -->
    <MyControlInfo ref="myControlInfoRef" />
    <!-- 发起布控 -->
    <SendControl ref="sendControlRef"></SendControl>
    <PersonNum ref="personNumRef"></PersonNum>
    <!-- 侧边栏 -->
    <DrawerAreaModel ref="drawerModelRef"></DrawerAreaModel>
  </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 MyControlInfo from "../MyControlInfo/components/sendControl.vue";
import SendControl from "./components/sendControl.vue";
import PersonNum from "./components/personNum.vue";
import DrawerAreaModel from "./components/drawerAreaModel.vue";

import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
import { ElMessage } from "element-plus";

import { selectUserDeptPage } from "@/api/user-manage";
const { proxy } = getCurrentInstance();
const {
  D_GS_BK_DJ,
  D_GS_BK_DX,
  D_GS_BK_ZT,
  D_GS_BK_SJLX,
  D_GS_BK_CZYQ,
  D_GS_BK_CZJSDWLX
} = proxy.$dict(
  "D_GS_BK_DJ",
  "D_GS_BK_DX",
  "D_GS_BK_ZT",
  "D_GS_BK_SJLX",
  "D_GS_BK_CZYQ",
  "D_GS_BK_CZJSDWLX"
); //获取字典数据
const deptList = ref([]); //部门列表
const detailDiloag = ref();
const dialogVisible = ref(false);
const searchBox = ref(); //搜索框
const sendControlRef = ref();
const personNumRef = ref();
const autoId = ref();
const myControlInfoRef = ref(null);
const searchConfiger = ref([
  {
    label: "布控等级",
    prop: "bqDj",
    placeholder: "请选择布控等级",
    showType: "select",
    options: D_GS_BK_DJ
  },
  {
    label: "布控对象",
    prop: "bkDx",
    placeholder: "请选择布控对象",
    showType: "select",
    options: D_GS_BK_DX
  },
  {
    label: "布控状态",
    prop: "bkZt",
    placeholder: "请选择布控状态",
    showType: "select",
    options: D_GS_BK_ZT
  },
  {
    label: "布控时间类型",
    prop: "bkSjLx",
    placeholder: "请选择布控时间",
    showType: "date",
    options: D_GS_BK_SJLX
  },
  {
    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 drawerModelRef = 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: "240", //操作栏宽度

  tableColumn: [
    { label: "布控级别", prop: "bkDj", showSolt: true },
    { label: "布控标题", prop: "bkBt" },
    // { label: "布控对象", prop: "bkDx", showSolt: true },
    // { label: "布控对象信息", prop: "bkDxxx" },
    // { label: "预警标签模型", prop: "yjbqmx" },
    // { label: "布控范围", prop: "bkfw" },
    // { label: "预警信息", prop: "yjxx" },
    { label: "处置接收单位", prop: "czJsdwdm", showSolt: true },
    { label: "处置要求", prop: "czYq", showSolt: true },
    { label: "开始时间", prop: "bkSjKs" },
    { label: "结束时间", prop: "bkSjJs" },
    // { label: "最近预警时间", prop: "zjyjsj" },
    { label: "失效时间", prop: "bkSjSx" },
    { label: "布控发起人", prop: "bkfqrXm" },
    { label: "布控状态", prop: "bkZt", showSolt: true }
  ]
});

onMounted(() => {
  getList();
  tabHeightFn();
  getdepartmentList();
});

// 获取部门列表
const getdepartmentList = () => {
  selectUserDeptPage().then((res) => {
    deptList.value = res?.records.map((item) => ({
      label: item.deptName,
      value: item.deptId
    }));
  });
};
const openDetail = (row) => {
  autoId.value = row.id;
  dialogVisible.value = true;
};
//选择类型
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-gsxt/tbGsxtBk/selectPage";
  qcckGet(data, url)
    .then((res) => {
      console.log(res, "4");
      pageData.tableData = res.records || [];
      pageData.total = res.total;
      pageData.tableConfiger.loading = false;
    })
    .catch(() => {
      pageData.tableConfiger.loading = false;
    });
};

// 详情
const info = (type, row) => {
  myControlInfoRef.value.init(type, row);
};

//送审
const autoEdit = () => {
  dialogVisible.value = false;
  let url = `/mosty-gsxt/tbGsxtBk/subExamine/${autoId.value}`;
  qcckPost({}, url)
    .then((res) => {
      ElMessage.success("提交成功");
      getList();
    })
    .catch(() => {
      ElMessage.error("提交失败");
    });
};
// 发起
const sendControl = () => {
  sendControlRef.value.init();
};
//编辑
// 发起
const editControl = (type, row) => {
  sendControlRef.value.init(type, row);
};

// 涉及人数
const personNum = () => {
  personNumRef.value.init();
};
// 添加范围模型

// 侧边栏
const drawerModel = () => {
  drawerModelRef.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>