dy_web/src/views/backOfficeSystem/service/taskPage/collectPage/index.vue

<script setup>
import { computed, getCurrentInstance, onMounted, reactive, ref } from "vue";
const { proxy } = getCurrentInstance();
import PageTitle from "@/components/aboutTable/PageTitle.vue";
import Search from "@/components/aboutTable/Search.vue";
import MyTable from "@/components/aboutTable/MyTable.vue";
import Pages from "@/components/aboutTable/Pages.vue";
import AddFgFormDialog from "./AddFgFormDialog.vue"
import { fetchTbZdxlFgdwBddSelectPage } from "@/api/service/taskProgress";
const searchConfiger = reactive([
  {
    showType: "input",
    prop: "bddMc",
    placeholder: "请输入必到点名称",
    label: "必到点名称"
  },
   {
    showType: "input",
    prop: "bddDz",
    placeholder: "请输入必到点地址",
    label: "必到点地址"
  }
])
const searchBox = ref() //搜索框
const deleteIds = ref([]) // 删除id
const dialogFormVisible = ref(false);
const pageData = reactive({
  visible: true,
  tableData: [], //表格数据
  keyCount: 0,
  tableConfiger: {
    rowHieght: 61,
    loading:false
  },
  total: 0,
  pageConfiger: {
    pageSize: 10,
    pageCurrent: 1
  }, //分页
  controlsWidth: 210, //操作栏宽度
  tableColumn: [
    {
      label: "必到点名称",
      prop: "bddMc"
    },
    {
      label: "所属方格",
      prop: "fgdwMc",
    },
    {
      label: "必到点地址",
      prop: "bddDz",
    },
  ]
})

const addFgFormRef = ref(null);
const addEdit = (row = {}, type = "") => {
  addFgFormRef.value?.open(row, type)
}

// 删除
const delDictItem = (id) => {
  batchDelete(id)
}

const chooseData = (val) => {
  if (val?.length > 0) {
    deleteIds.value = val?.map((item) => item.id);
  } else {
    deleteIds.value = []
  }
}
const onSearch = (val) => {
  const { cz, ...ret } = val
  pageData.pageConfiger.pageCurrent = 1;
  getListData(ret);
}

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

const getListData = async (params = {}) => {
  pageData.tableConfiger.loading = true
  try {
    const res = await fetchTbZdxlFgdwBddSelectPage({
      ...pageData.pageConfiger,
      ...params
    })
    pageData.tableData = res?.records || []
    pageData.total = res.total;
    pageData.tableConfiger.loading = false;
  } catch (err) {
    pageData.tableConfiger.loading = false;
  }
}

const changeNo = (val) => {
  pageData.pageConfiger.pageCurrent = val;
  getListData();
}

const changeSize = (val) => {
  pageData.pageConfiger.pageSize = val;
  getListData();
}

const handleFilter = () => {
  pageData.pageConfiger.pageCurrent = 1;
  getListData();
}

// 删除的方法
//批量删除数据
const batchDelete = async (id) => {
  await proxy.$confirm("确定要删除", "警告", { type: "warning" })

  try {
    // await zbPbDelete(id)

    proxy.$message({
      message: "删除成功",
      type: "success"
    });
    getListData();
  } catch (error) {
    console.log(error);
  }
};

// 批量删除
const handleDel = () => {
  if (deleteIds.value.length === 0) {
    proxy.$message({
      message: "请选择勾选要删除的数据",
      type: "warning"
    });

    return
  }

  batchDelete(deleteIds)
}

onMounted(() => {
  proxy.mittBus.on("mittFn", (data) => { pageData.keyCount = data; });
  tabHeightFn()

  getListData()
})
</script>

<template>
  <div class="container">
    <div class="titleBox">
      <PageTitle title="必到点采集">
        <el-button type="primary" @click="addEdit({}, 'add')">
          <span style="vertical-align: middle">新增</span>
        </el-button>
<!--        <el-button typeof="danger" :disabled="deleteIds.length === 0" @click="handleDel">-->
<!--          <el-icon style="vertical-align: middle"><Delete /> </el-icon>-->
<!--          <span style="vertical-align: middle">批量删除</span>-->
<!--        </el-button>-->
      </PageTitle>
    </div>
    <div ref="searchBox">
      <Search :searchArr="searchConfiger" @submit="onSearch" />
    </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 #controls="{ row }">
          <el-button size="small" @click="addEdit(row, 'del')">编辑</el-button>
          <el-button size="small" @click="addEdit(row, 'view')">查看详情</el-button>
<!--          <el-button size="small" @click="delDictItem([row.id])">删除</el-button>-->
        </template>
      </MyTable>

      <Pages
        @changeNo="changeNo"
        @changeSize="changeSize"
        :tableHeight="pageData.tableHeight"
        :pageConfiger="{
          ...pageData.pageConfiger,
          total: pageData.total
        }"
      />
    </div>

    <add-fg-form-dialog ref="addFgFormRef" v-model="dialogFormVisible" @ok="handleFilter" />
  </div>
</template>

<style scoped lang="scss">
.container {
  ::v-deep {
    .check, .el-upload-text {
      display: none;
    }

    .el-descriptions__body {
      background-color: transparent !important;
      color: #fff;
    }
  }
}

</style>