必到点采集模块并且展示地图方格 新增任务进度展示所有方格和任务处理

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

@@ -0,0 +1,223 @@
+<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>