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

<template>
  <div class="dialog" v-if="dialogVisble">
    <div class="head_box">
        <span class="title">{{title}}</span>
        <div class="btnBox">
          <el-button size="small" @click="dialogVisble = false">关闭</el-button>
        </div>
    </div>
    <div ref="searchBox">
        <Search :searchArr="searchConfiger" @submit="onSearch" >
          <template #defaultSlot>
            <el-select v-model="baseDate.bbzt" @change="getList">
              <el-option v-for="item in props.dic.D_QW_BBZL" :key="item.label" :label="item.label" :value="item.label" />
            </el-select>
          </template>
        </Search>
    </div>
    <div class="tabBox">
        <MyTable
        :tableData="pageData.tableData"
        :tableColumn="pageData.tableColumn"
        :tableHeight="tableHeight"
        :key="pageData.keyCount"
        :tableConfiger="pageData.tableConfiger"
        :controlsWidth="pageData.controlsWidth"
        >
        <template #bbZt="{ row }">
            <dict-tag :options="props.dic.D_QW_BBZT" :value="row.bbZt" :tag="true"></dict-tag>
        </template>
        </MyTable>
        <Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="tableHeight" :pageConfiger="{ ...pageData.pageConfiger, total: pageData.total}" />
    </div>
  </div>

</template>

<script setup>
import MyTable from "@/components/aboutTable/MyTable.vue";
import Pages from "@/components/aboutTable/Pages.vue";
import Search from "@/components/aboutTable/Search.vue";
import { servicePost, serviceGet, serviceDelete } from "@/api/serviceApi.js";
import { timeValidate, weekValidate } from "@/utils/tools.js";
import { ref, reactive, defineExpose,getCurrentInstance,defineProps } from "vue";
const props = defineProps({
    dic:Object
})
const listQuery  = ref({})
const tableHeight = ref(600)
const { proxy } = getCurrentInstance();
const baseDate = reactive({
  year:timeValidate(null, "ymd"),
  week:weekValidate(timeValidate(null, "ymd")),
  bbzt: "值班报备",
});
const dialogVisble = ref(false)
const searchConfiger = reactive([
  {
    showType: "defaultSlot",
    label: "报备类型",
  },
  {
    showType: "input",
    prop: "jzMc",
    placeholder: "请输入警组名称",
    label: "警组名称"
  },
]);
const pageData = reactive({
  tableData: [], //表格数据
  keyCount: 0,
  tableConfiger: {
    loading: false,
    rowHieght: 61,
    showSelectType: "null",
    haveControls:false
  },
  total: 0,
  pageConfiger: {
    pageSize: 10,
    pageCurrent: 1
  }, //分页
  controlsWidth: 120, //操作栏宽度
  tableColumn: [
    { label: "警组名称", prop: "jzMc" },
    { label: "报备开始时间", prop: "bbSjKssj" },
    { label: "报备结束时间", prop: "bbSjJssj" },
    { label: "所属部门 ", prop: "ssbm"},
    { label: "报备状态 ", prop: "bbZt",showSolt: true },
  ]
});
const idEntityCard = ref('')
const title = ref('')
// 初始化
const init = (sfzh,type) =>{
    title.value = type;
    idEntityCard.value = sfzh
    dialogVisble.value = true;
    getList()
}

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

// 获取列表
const getList = () => {
  pageData.tableConfiger.loading = true;
  let params = { ...listQuery.value, ...pageData.pageConfiger };
  let url = ''
  if(baseDate.bbzt == '值班报备') url='/mosty-qwzx/tbQwglZbbb/selectPage'
  else if(baseDate.bbzt == '街面勤务报备') url='/mosty-qwzx/tbQwglXfbb/selectPage'
  else url='/mosty-qwzx/tbQwglBb/selectPage'

  if(baseDate.bbzt != '值班报备' && baseDate.bbzt !='街面勤务报备'){
    let obj = props.dic.D_QW_BBZL.find(it=>{return it.label == baseDate.bbzt})
    params.qwBbzl = obj.dm
  }
  params.sfzh = idEntityCard.value;
  if(title.value == '勤务跟踪') params.bbZt = '03'

  serviceGet(params, url).then((res) => {
    pageData.tableConfiger.loading = false;
    pageData.tableData = res.records;
    pageData.total = res.total;
  }).catch(() => {
    pageData.tableConfiger.loading = false;
  });
};

// 改变分页
const changeNo = (val) => {
  pageData.pageConfiger.pageCurrent = val;
  getList();
};
//  页数
const changeSize = (val) => {
  pageData.pageConfiger.pageSize = val;
  getList();
};

defineExpose({init})
</script>

<style lang="scss" scoped>

</style>