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

<template>
  <div>
    <div class="titleBox">
      <PageTitle :title=" route.meta.title ">
        <el-button type="primary" @click="handleAdd('add', null)">发起布控</el-button>
      </PageTitle>
    </div>
    <!-- 搜索 -->
    <div ref="searchBox">
      <Search :searchArr="searchConfiger" @submit="onSearch" />
    </div>
    <!-- 按钮组 -->
    <div class="content">
      <!-- 表格 -->
      <div class="tabBox">
        <MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
          :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth">

          <template #bkZt="{ row }">
            <DictTag :tag="false" :value="row.bkZt" :options="D_GS_BK_ZT" />
          </template>
          <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 #bkdxList="{ row }">
            <span v-if="row.bkdxList"><span class="nowrap" v-for="(it, idx) in row.bkdxList" :key="idx">
                {{ it.ryXm ? it.ryXm : it.imei ? it.imei : it.imsi ? it.imsi : '' }}
                <!-- :it.ryXm?it.mac:it.imsi?it.imsi:'xxxx' -->
                <span v-if="idx < row.bkdxList.length - 1">、</span></span></span>

            <span v-else>暂无</span>
          </template>
          <!-- <template #sjrs="{ row }">
          <span v-if="row.bkdxList"> {{ row.bkdxList.length }} </span>
           <span v-else>0</span>
        </template> -->
          <!-- <template #qyList="{ row }">
          <span v-for="(it,idx) in row.qyList" :key="idx"> {{ it.qymc }} <span v-if="idx < row.qyList.length-1">、</span></span>
        </template> -->
          <!-- <template #yjcs="{row}">
          <span @click="openWarning(row)" style="color: #00ffff;" class="mr5 pointer">{{ row.yjcs || 0}}</span>次
        </template> -->
          <!-- 操作 -->
          <template #controls="{ row }">
            <template v-if="!row.gzlid">
              <el-link type="primary" v-if="['01', '03', '06'].includes(row.bkZt)" size="small"
                @click="createProcess(row)">送审</el-link>
                  <el-link type="primary" size="small" @click="tbGsxtBkQuashList( row)" v-else>撤控</el-link>
              <el-link type="primary" v-if="['01', '03', '06'].includes(row.bkZt)" size="small"
                @click="handleAdd('edit', row)">编辑</el-link>
            </template>
            <!-- 审核通过后才有轨迹 -->

            <el-link type="primary" size="small" @click="handleAdd('detail', row)">详情</el-link>
            <el-link type="danger" size="small" @click="handleRow(row.id)"
              v-if="['01', '03', '06'].includes(row.bkZt)">删除</el-link>
          </template>
        </MyTable>
        <Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="pageData.tableHeight" :pageConfiger="{
          ...pageData.pageConfiger,
          total: pageData.total
        }"></Pages>
      </div>
    </div>
  </div>
  <!-- 布控类型 -->
  <AddBkdx ref="addBkdxForm" @change="getList" :dic="{
    D_GS_BK_DX, D_GS_BK_BKYS, D_BZ_XB, D_GS_BK_CZYQ,
    D_GS_BK_DJ, BD_BK_CLYJBQ, D_GS_BK_CZJSDWLX, D_GS_BK_TJFS, D_GS_ZDR_YJDJ
  }" />
  <!-- 预警弹窗 -->
  <YjDialog ref="warningkdxForm"></YjDialog>
  <SubmissionProcess v-model="showSp" :data="rowData" :userData="{ ajmc: '布控审批', flowType: 'BKSP', modelName: '布控' }"
    :path="fixedValue" @getList="getList" />
</template>

<script setup>
import AddBkdx from "./components/addBkdx.vue";
import YjDialog from "./components/yjDialog.vue";
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 { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
import SubmissionProcess from '@/components/flowPath/submissionProcess.vue'
import {tbGsxtBkQuash} from '@/api/zdr.js'
import { useRouter, useRoute } from 'vue-router'
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
const router = useRouter()
const route = useRoute()
const { proxy } = getCurrentInstance();
const { D_GS_BK_BKYS, D_BZ_XB, D_GS_BK_SJLX, D_GS_BK_DJ, BD_BK_CLYJBQ, D_GS_ZDR_YJDJ,
  D_GS_BK_DX, D_GS_BK_ZT, D_GS_BK_CZYQ, D_GS_BK_CZJSDWLX, D_GS_BK_TJFS } = proxy.$dict("D_GS_ZDR_YJDJ", "D_GS_BK_BKYS", "D_BZ_XB", "D_GS_BK_SJLX", "D_GS_BK_DJ", "D_GS_BK_DX", "D_GS_BK_ZT", "D_GS_BK_CZYQ", "D_GS_BK_CZJSDWLX", "D_GS_BK_TJFS", 'BD_BK_CLYJBQ'); //获取字典数据
const addBkdxForm = ref(null); //布控对象组件
const warningkdxForm = ref(); //布控对象组件
const searchBox = ref(); //搜索框
const searchConfiger = ref([
  {
    label: "布控等级",
    prop: "bkDj",
    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
  },
]);
const queryFrom = ref({});
const pageData = reactive({
  tableData: [], //表格数据
  keyCount: 0,
  tableConfiger: {
    rowHieght: 61,
    showSelectType: "null", //选择类型
    loading: false
  },
  total: 0,
  pageConfiger: {
    pageSize: 20,
    pageCurrent: 1
  }, //分页
  controlsWidth: 250, //操作栏宽度

  tableColumn: [
    { label: "布控对象", prop: "bkdxList", showSolt: true, showOverflowTooltip: true },
    { label: "布控类型", prop: "bkDx", showSolt: true, showOverflowTooltip: true },
    { label: "布控等级", prop: "bkDj", showSolt: true },
    { label: "开始时间", prop: "bkSjKs", showOverflowTooltip: true },
    { label: "结束时间", prop: "bkSjJs", showOverflowTooltip: true },
    { label: "申请人", prop: "bkfqrXm" },
    { label: "布控状态", prop: "bkZt", showSolt: true },
  ]
});
// 固定值
const fixedValue = {
  clueVerification: 'deploymentApproval',
  byMeansOf: 'tbGsxtBk/gsbkCallback',
  nobyMeansOf: 'tbGsxtBk/gsbkCallback',
  recycle: 'tbGsxtBk/gsbkCallback',
}
const showSp = ref(false);
const rowData = ref()
const createProcess = (row) => {
  showSp.value = true;
  rowData.value = row
}
onMounted(() => {
  getList();
  tabHeightFn();
});

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

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

// 获取列表
const getList = () => {
  pageData.tableConfiger.loading = true;
  let bklx = ''
  console.log();

  if (route.name == 'myControl') {
    bklx = '01'
  } else {
    bklx = '02'
  }
  let data = {
    ...pageData.pageConfiger,
    ...queryFrom.value,
    bkcxlx: '01',
    bklx: bklx
  };
  qcckGet(data, "/mosty-gsxt/tbGsxtBk/selectPage").then((res) => {
    pageData.tableData = res.records || [];
    pageData.total = res.total;
    pageData.tableConfiger.loading = false;
  }).catch(() => {
    pageData.tableConfiger.loading = false;
  });
};

const handleAdd = (type, row) => {
  addBkdxForm.value.init(type, row);
};

// 删除
const handleRow = (id) => {
  proxy.$confirm("确定要删除？", "警告", { type: "warning" }).then(() => {
    qcckDelete({}, "/mosty-gsxt/tbGsxtBk/" + id).then(() => {
      proxy.$message({ type: "success", message: "删除成功" });
      getList();
    });
  })
};

// 表格高度计算
const tabHeightFn = () => {
  pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 270;
  window.onresize = function () {
    tabHeightFn();
  };
};
const tbGsxtBkQuashList = (item) => {
  tbGsxtBkQuash({id:item.id}).then(res=>{
    proxy.$message({ type: "success", message: "操作成功" });
    getList();
  })
}
</script>

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