lz_web_qwgl/src/views/backOfficeSystem/qwManagement/qwzt/index.vue

<template>
  <div class="main-box">
    <div class="treeBox">
      <MOSTY.DepartmentTree
        @changeSsbm="changeSsbm"
        width="300px"
        placeholder="管理部门ID"
        clearable
        filterable
        :isBmId="false"
        v-model="listQuery.ssbmdm"
      />
    </div>
    <div class="tableCnt">
      <div class="titleBox">
        <div class="title">已选机构 - {{ baseInfo.orgName }}</div>
      </div>
      <!-- <div ref="searchBox">
        <Search :searchArr="searchConfiger" @submit="onSearch" />
      </div> -->
      <div class="tabBox">
        <MyTable
          @chooseData="chooseData"
          :tableData="pageData.tableData"
          :tableColumn="pageData.tableColumn"
          :tableHeight="tableHeight"
          :key="pageData.keyCount"
          :tableConfiger="pageData.tableConfiger"
          :controlsWidth="pageData.controlsWidth"
        >
          <template #qwZt="{ row }">
            <dict-tag :options="D_BZ_QWZT" :value="row.qwZt" :tag="false" />
          </template>
          <template #qwDbzt="{ row }">
            <dict-tag :options="D_BZ_QWDBZT" :value="row.qwDbzt" :tag="false" />
            <span v-if="row.qwDbzt == null">未督办</span>
          </template>
          <template #controls="{ row }">
            <el-link type="primary" @click="addEdit('edit', row)"
              >修改勤务状态</el-link
            >
            <span class="linkGapLine">|</span>
            <el-link type="primary" @click="openTable(row, '勤务工作')"
              >勤务工作</el-link
            >
            <span class="linkGapLine">|</span>
            <el-link type="primary" @click="openTable(row, '勤务执行')"
              >勤务执行</el-link
            >
            <span class="linkGapLine">|</span>
            <el-link type="primary" @click="openTable(row, '勤务跟踪')"
              >勤务跟踪</el-link
            >
            <span class="linkGapLine">|</span>

            <el-popconfirm
              confirm-button-text="确定"
              cancel-button-text="取消"
              title="是否确认启动勤务督办？"
              @confirm="handleConfirm(row)"
            >
              <template #reference>
                <el-link
                  type="primary"
                  v-if="row.qwDbzt == null || row.qwDbzt == '01'"
                  >勤务督办</el-link
                >
              </template>
            </el-popconfirm>
            <span class="linkGapLine">|</span>
            <el-popconfirm
              confirm-button-text="确定"
              cancel-button-text="取消"
              title="是否确认关闭督办？"
              @confirm="handleConfirmJs(row)"
            >
              <template #reference>
                <el-link type="primary" v-if="row.qwDbzt == '02'"
                  >结束督办</el-link
                >
              </template>
            </el-popconfirm>
          </template>
        </MyTable>
        <Pages
          @changeNo="changeNo"
          @changeSize="changeSize"
          :tableHeight="tableHeight"
          :pageConfiger="{
            ...pageData.pageConfiger,
            total: pageData.total
          }"
        />
      </div>
    </div>
  </div>
  <!-- 新增 -->
  <EditAddForm
    ref="addEditDialog"
    :dic="{ D_BZ_QWDBZT, D_BZ_QWZT }"
    @updateDate="getList"
  />
  <!-- 表格 -->
  <DialogTable ref="tableDialog" :dic="{ D_QW_BBZL, D_QW_BBZT }" />
</template>

<script setup>
import { getItem } from "@/utils/storage";
import MyTable from "@/components/aboutTable/MyTable.vue";
import Pages from "@/components/aboutTable/Pages.vue";
import Search from "@/components/aboutTable/Search.vue";
import EditAddForm from "./editAddForm.vue";
import DialogTable from "./dialogTable.vue";
import { servicePost, serviceGet, serviceDelete } from "@/api/serviceApi.js";
import * as rule from "@/utils/rules.js";
import * as MOSTY from "@/components/MyComponents/index";
import { ElMessage } from "element-plus";
import {
  ref,
  reactive,
  computed,
  watch,
  onMounted,
  getCurrentInstance,
  onUnmounted
} from "vue";
const { proxy } = getCurrentInstance();
const { D_BZ_QWDBZT, D_BZ_QWZT, D_QW_BBZL, D_QW_BBZT } = proxy.$dict(
  "D_BZ_QWDBZT",
  "D_BZ_QWZT",
  "D_QW_BBZL",
  "D_QW_BBZT"
);
const addEditDialog = ref();
const multipleTable = ref([]);
const tableDialog = ref();
const searchConfiger = reactive([
  // {
  //   showType: "daterange",
  //   prop: "daterange",
  //   placeholder: "请选择日期",
  //   label: "日期"
  // },
]);
const pageData = reactive({
  tableData: [], //表格数据
  keyCount: 0,
  tableConfiger: {
    loading: false,
    rowHieght: 61,
    showSelectType: "checkBox"
  },
  total: 0,
  pageConfiger: {
    pageSize: 10,
    pageCurrent: 1
  }, //分页
  controlsWidth: 250, //操作栏宽度
  tableColumn: [
    { label: "姓名", prop: "xm" },
    { label: "勤务状态", prop: "qwZt", showSolt: true },
    { label: "督办状态", prop: "qwDbzt", showSolt: true },
    { label: "勤务时长", prop: "qwsc" },
    { label: "久坐时长", prop: "jzsc" },
    { label: "巡逻越界次数", prop: "xlyjcs" }
  ]
});

const searchBox = ref(null); // 搜索盒子
const keyCount = ref(0); //tabel组件刷新值
const tableHeight = ref(); // 表格高度
const treeHeight = ref(""); // 树高度
const baseInfo = ref({
  orgName: "四川省林芝市公安局",
  gldwdm: "51160000000"
});
const listQuery = ref({});
onMounted(() => {
  tabHeightFn();
  getList();
  proxy.mittBus.on("mittFn", (data) => {
    keyCount.value = data;
  });
});

// 搜索
const onSearch = (val) => {
  pageData.pageConfiger.pageCurrent = 1;
  listQuery.value.startTime = val.daterange[0];
  listQuery.value.endTime = val.daterange[1];
  delete val.daterange;
  listQuery.value = { ...listQuery.value, ...val };
  getList();
};

// 新增和修改
const addEdit = (type, row) => {
  addEditDialog.value.init(type, row);
};
// 切换部门
const changeSsbm = (val) => {
  baseInfo.value.orgName = val.orgJc;
  getList();
};
// 改变分页
const changeNo = (val) => {
  pageData.pageConfiger.pageCurrent = val;
  getList();
};
//  页数
const changeSize = (val) => {
  pageData.pageConfiger.pageSize = val;
  getList();
};
// 获取列表
const getList = () => {
  let params = { ...listQuery.value, ...pageData.pageConfiger };
  pageData.tableConfiger.loading = true;
  serviceGet(params, "/mosty-base/sysUserExtend/selectXfllQwVOPage")
    .then((res) => {
      pageData.tableConfiger.loading = false;
      pageData.tableData = res.records;
      pageData.total = res.total;
    })
    .catch(() => {
      pageData.tableConfiger.loading = false;
    });
};

// 列表多选
const chooseData = (val) => {
  if (Array.isArray(val))
    multipleTable.value = val.map((v) => {
      return v.id;
    });
};

// 确定启动督办
const handleConfirm = (row) => {
  let data = { xfllId: row.id, idEntityCard: row.sfzh };
  servicePost(data, "/mosty-base/sysUserExtend/startQwDbzt").then((res) => {
    proxy.$message.success("启动成功");
    getList({});
  });
};
// 确定启动督办
const handleConfirmJs = (row) => {
  let data = { xfllId: row.id, idEntityCard: row.sfzh };
  servicePost(data, "/mosty-base/sysUserExtend/finishQwDbzt").then((res) => {
    proxy.$message.success("关闭成功");
    getList({});
  });
};

// 打开表格弹窗
const openTable = (row, type) => {
  tableDialog.value.init(row.sfzh, type);
};

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

onUnmounted(() => {
  proxy.mittBus.off("mittFn");
});
</script>

<style lang="scss" scoped>
@import "~@/assets/css/layout.scss";
@import "~@/assets/css/element-plus.scss";
.main-box {
  display: flex;
  .tableCnt {
    flex: 1;
    margin-left: 10px;
  }
}
</style>