ba_web/src/views/backOfficeSystem/patrolManagement/war/index.vue

<template>
  <div>
    <div class="titleBox">
       <!-- 头部 -->
      <PageTitle title="巡防战果管理">
        <el-button type="primary" @click="exportDate">
          <el-icon style="vertical-align: middle"> <CirclePlus /> </el-icon>
          <span style="vertical-align: middle">导出报表</span>
        </el-button>
      </PageTitle>
    </div>
    <!-- 搜索 -->
    <div ref="searchBox">
      <Search :searchArr="searchConfiger" @submit="onSearch">
        <template #defaultSlot>
          <MOSTY.Department width="100%" clearable v-model="listQuery.ssbmdm" />
        </template>
      </Search>
    </div>
    <!-- 表格 -->
    <div class="tabBox">
      <MyTable
        :tableData="pageData.tableData"
        :tableColumn="pageData.tableColumn"
        :tableHeight="pageData.tableHeight"
        :key="pageData.keyCount"
        :tableConfiger="pageData.tableConfiger"
        :controlsWidth="pageData.controlsWidth"
      >
        <template #sbzt="{ row }">
          <span :class="row.sbzt == '03'? 'green':row.sbzt == '02'?'orange':'red'">
            <dict-tag :value="row.sbzt" :options="D_SB_SBZT" :tag="false"></dict-tag>
          </span>
        </template>
        <template #sblx="{ row }">
          <dict-tag :value="row.sblx" :options="D_SB_SBLX" :tag="false"></dict-tag>
        </template>
        <!-- 操作 -->
        <template #controls="{ row }">
          <el-popover placement="left" :width="400" trigger="click">
            <template #reference>
              <el-button size="small" @click="aggrenInfo('edit', row)">同意</el-button>
            </template>
            <el-form v-model="aggrenSubmt">
              <div style="fontSize:20px;margin-bottom:8px;">同意</div>
              <el-form-item prop="cnt" label="同意意见">
                <el-input v-model="aggrenSubmt.cnt" type="textarea" placeholder="请填同意意见"></el-input>
              </el-form-item>
              <div style="text-align: center;">
                <el-button>同意</el-button>
                <el-button>取消</el-button>
              </div>
            </el-form>
          </el-popover>

          <el-button size="small" @click="lookDetail('detail', row)">详情</el-button>

          <el-popover placement="left" :width="400" trigger="click">
            <template #reference>
              <el-button size="small" @click="deleteRow(row)">驳回</el-button>
            </template>
            <el-form v-model="aggrenSubmt">
              <div style="fontSize:20px;margin-bottom:8px;">驳回</div>
              <el-form-item prop="cnt" label="驳回原因">
                <el-input v-model="aggrenSubmt.cnt" type="textarea" placeholder="请填同意意见"></el-input>
              </el-form-item>
              <el-form-item label="附件上传" style="width: 100%" prop="fjmc">
                <el-input v-model="aggrenSubmt.fjmc" placeholder="请选择上传文件" style="width: 80%"/>
                <el-upload action="/bagl/mosty-base/minio/image/upload/id" :on-change="upImgFile" :on-success="upImg" :show-file-list="false">
                  <el-button type="primary" style="padding: 0 14px">上传</el-button>
                </el-upload>
              </el-form-item>

              <div style="text-align: center;">
                <el-button>同意</el-button>
                <el-button>取消</el-button>
              </div>
            </el-form>
          </el-popover>
        </template>
      </MyTable>
      <Pages
        @changeNo="changeNo"
        @changeSize="changeSize"
        :tableHeight="pageData.tableHeight"
        :pageConfiger="{
          ...pageData.pageConfiger,
          total: pageData.total
        }"
      ></Pages>
    </div>
    <!-- 详情 -->
    <EditAddForm ref="editInfo"></EditAddForm>
  </div>
</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import { qcckGet, qcckPost ,qcckDelete} from "@/api/qcckApi.js";
import EditAddForm from './components/editAddForm.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 { reactive, ref ,onMounted,getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance();
const { D_SB_SBLX,D_SB_SBZT } = proxy.$dict("D_SB_SBLX","D_SB_SBZT");
const ids = ref([]);//多选
const searchBox = ref() //搜索框
const listQuery = ref({})
const aggrenSubmt = ref({}) //同意表单
const editInfo = ref()
const queryForm = ref()
const searchConfiger = reactive([
   {
    showType: "defaultSlot",
    prop: "ssbmdm",
    options: [],
    placeholder: "请选择单位",
    label: "归属单位"
  },
  {
    showType: "select",
    prop: "sblx",
    placeholder: "请选择申报类型",
    label: "申报类型",
    options:D_SB_SBLX
  },
  {
    showType: "select",
    prop: "sbzt",
    placeholder: "请选择申报状态",
    label: "申报状态",
    options:D_SB_SBZT
  },
  {
    showType: "daterange",
    prop: "daterange",
    placeholder: "请选择申报时间",
    label: "申报时间",
  },
])
const pageData = reactive({
  tableData: [], //表格数据
  keyCount: 0,
  tableConfiger: {
    loading: false,
    rowHieght: 61
  },
  total: 0,
  pageConfiger: {
    pageSize: 10,
    pageNum: 1
  }, //分页
  controlsWidth: 210, //操作栏宽度
  tableColumn: [
    {
      label: "申报时间",
      prop: "sbsj"
    },
    {
      label: "申报单位",
      prop: "sbdw"
    },
    {
      label: "申请人",
      prop: "sqr"
    },
    {
      label: "申报类型",
      prop: "sblx",
      showSolt:true
    },
    {
      label: "申报状态",
      prop: "sbzt",
      showSolt:true
    },
    {
      label: "申报原因",
      prop: "sbyy"
    },
  ]
});
onMounted(() => {
  proxy.mittBus.on("mittFn", (data) => {
    pageData.keyCount = data;
  });
  tabHeightFn();
  getDataList()
});
// 搜索
const onSearch = (val)=>{
  delete val.ssbmdm
  listQuery.value = {...listQuery.value,...val}
  listQuery.value.kssj = val.daterange ? val.daterange[0] : '';
  listQuery.value.jssj = val.daterange ? val.daterange[1] : ''
  if(val.cz) listQuery.value.ssbmdm = '';
  delete listQuery.value.cz;
  getDataList()
}

// 获取数据
const getDataList = ()=>{
  let pramas = {
    pageSize:pageData.pageConfiger.pageSize,
    pageCurrent:pageData.pageConfiger.pageNum,
    ...listQuery.value
  }
  delete pramas.daterange
  pageData.tableConfiger.loading = true
  qcckGet(pramas,'/mosty-jmxf/tbJcglXfZg').then(res=>{
    pageData.tableData = res.records || []
    pageData.tableConfiger.loading = false
    pageData.total = res.total
  }).catch(()=> { pageData.tableConfiger.loading = false })
}

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

// 导出报表
const exportDate =  ()=>{}
// 详情
const lookDetail = (type,id)=>{
  editInfo.value.init(type,id)
}
// 同意
const aggrenInfo = ()=>{
}
// 驳回
const deleteRow = ()=>{
}

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

<style lang="scss" scoped>
.green{
  color: #00FF89;
}
.orange{
  color: orange;
}
.red{
color: red;
}
</style>
<style>
.el-loading-mask{
  background: rgba(0,0,0,0.3);
}
</style>