This commit is contained in:
13684185576
2025-11-13 20:55:41 +08:00
parent da6c07de87
commit ce2cc79be3
8 changed files with 494 additions and 146 deletions

View File

@ -0,0 +1,186 @@
<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 { qcckPost, qcckGet } from "@/api/qcckApi.js";
const searchConfiger = reactive([
{
showType: "input",
prop: "dkrXm",
placeholder: "请输入打卡人姓名",
label: "打卡人姓名"
}
]);
const searchBox = ref(); //搜索框
const pageData = reactive({
visible: true,
tableData: [], //表格数据
keyCount: 0,
tableConfiger: {
rowHieght: 61,
loading: false
},
haveControls:false,
total: 0,
pageConfiger: {
pageSize: 10,
pageCurrent: 1
}, //分页
controlsWidth: 210, //操作栏宽度
tableColumn: [
{
label: "打卡人姓名",
prop: "dkrXm"
},
{
label: "必到点位置",
prop: "bddMc"
},
{
label: "开始时间",
prop: "dkKsSj"
},
{
label: "打卡开始附件",
prop: "dkKsSj",
showSolt: true
},
{
label: "结束时间",
prop: "dkJsSj"
},
{
label: "打卡结束附件",
prop: "dkKsSj",
showSolt: true
}
]
});
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;
qcckGet({...pageData.pageConfiger,...params}, "/mosty-yjzl/tbZdxlFgdwBddxlrwJl/getPageList")
.then((res) => {
pageData.tableData = res.records || [];
pageData.tableConfiger.loading = false;
pageData.total = res.total;
})
.catch(() => {
pageData.tableConfiger.loading = false;
});
};
const changeNo = (val) => {
pageData.pageConfiger.pageCurrent = val;
getListData();
};
const changeSize = (val) => {
pageData.pageConfiger.pageSize = val;
getListData();
};
onMounted(() => {
proxy.mittBus.on("mittFn", (data) => {
pageData.keyCount = data;
});
tabHeightFn();
getListData();
});
</script>
<template>
<div class="container">
<div class="titleBox">
<PageTitle title="打卡记录">
</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"
>
<template #dkKsFj="{ row }">
<el-image
:append-to-body="true"
:preview-src-list="[
`/mosty-api/mosty-base/minio/image/download/${row.dkKsFj}`
]"
style="width: 75px; height: 75px"
:src="`/mosty-api/mosty-base/minio/image/download/${row.dkKsFj}`"
fit="cover"
lazy
/>
</template>
<template #dkJsFj="{ row }">
<el-image
:append-to-body="true"
:preview-src-list="[
`/mosty-api/mosty-base/minio/image/download/${row.dkJsFj}`
]"
style="width: 75px; height: 75px"
:src="`/mosty-api/mosty-base/minio/image/download/${row.dkJsFj}`"
fit="cover"
lazy
/>
</template>
<!-- 操作 -->
<template #controls="{ row }">
</template>
</MyTable>
<Pages
@changeNo="changeNo"
@changeSize="changeSize"
:tableHeight="pageData.tableHeight"
:pageConfiger="{
...pageData.pageConfiger,
total: pageData.total
}"
/>
</div>
</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>

View File

@ -4,71 +4,33 @@
<div class="head_box">
<span class="title">{{ title }}</span>
<div>
<el-button
v-if="!infoActive"
type="primary"
size="small"
@click="submit"
:loading="btnLoading"
>保存</el-button
>
<el-button v-if="!infoActive" type="primary" size="small" @click="submit" :loading="btnLoading">保存</el-button>
<el-button size="small" @click="close">关闭</el-button>
</div>
</div>
<div class="dialogWrapper">
<el-form
ref="formRef"
:model="form"
:rules="rules"
:inline="true"
:disabled="infoActive"
>
<el-form ref="formRef" :model="form" :rules="rules" :inline="true" :disabled="infoActive">
<el-form-item prop="bddMc" label="必到点名称:">
<el-input
style="width: 80%;"
min="0"
placeholder="请填写必到点名称"
v-model="form.bddMc"
></el-input>
<el-input style="width: 80%" min="0" placeholder="请填写必到点名称" v-model="form.bddMc"></el-input>
</el-form-item>
<el-form-item prop="fgdwId" label="所属方格:">
<el-select
:disabled="typeStatus === 'del'"
placeholder="请选择所属方格"
filterable
clearable
v-model="form.fgdwId"
@change="handleChange"
>
<el-option
v-for="item in fgList"
:key="item?.id"
:label="item?.mc"
:value="item?.id"
/>
<el-select :disabled="typeStatus === 'del'" placeholder="请选择所属方格" filterable clearable v-model="form.fgdwId"
@change="handleChange">
<el-option v-for="item in fgList" :key="item?.id" :label="item?.mc" :value="item?.id" />
</el-select>
</el-form-item>
<el-form-item prop="bddDz" label="必到点地址:">
<el-input
placeholder="请填必到点地址"
clearable
v-model="form.bddDz"
></el-input>
<el-input placeholder="请填必到点地址" clearable v-model="form.bddDz"></el-input>
</el-form-item>
<el-form-item prop="dkjgsj" label="必到点间隔时间/分钟为单位:">
<el-input placeholder="请填写必到点间隔时间/分钟为单位" v-model="form.dkjgsj"></el-input>
</el-form-item>
<el-form-item prop="jd" label="经度:">
<el-input
disabled
placeholder="请填写经度"
v-model="form.jd"
></el-input>
<el-input disabled placeholder="请填写经度" v-model="form.jd"></el-input>
</el-form-item>
<el-form-item prop="wd" label="纬度:">
<el-input
disabled
placeholder="请填写纬度"
v-model="form.jd"
></el-input>
<el-input disabled placeholder="请填写纬度" v-model="form.jd"></el-input>
</el-form-item>
</el-form>
@ -77,23 +39,27 @@
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, reactive, getCurrentInstance, computed, onMounted } from "vue";
import { fetchTbZdxlFgdwSelectList, fetchTbZdxlFgdwBddSave, fetchTbZdxlFgdwBddUpdate, fetchTbZdxlFgdwId } from "@/api/service/taskProgress";
import {
fetchTbZdxlFgdwSelectList,
fetchTbZdxlFgdwBddSave,
fetchTbZdxlFgdwBddUpdate,
fetchTbZdxlFgdwId
} from "@/api/service/taskProgress";
const { proxy } = getCurrentInstance();
import GdMap from "@/components/Map/GdMap/index.vue"
import GdMap from "@/components/Map/GdMap/index.vue";
import emitter from "@/utils/eventBus";
const btnLoading = ref(false); //按钮截流
const title = ref("新增必到点采集");
const formRef = ref(null);
const infoActive = ref(true);
const visible = ref(false);
const fgList = ref([])
const typeStatus = ref("")
const fgList = ref([]);
const typeStatus = ref("");
//级联选择器配置
const props = defineProps({
@ -103,41 +69,41 @@ const props = defineProps({
}
});
const emits = defineEmits(['update:modelValue', 'ok']);
const emits = defineEmits(["update:modelValue", "ok"]);
const dialogFormVisible = computed({
get() {
return props.modelValue;
},
set(val) {
if (!infoActive.value && typeStatus?.value !== 'del') {
// 获取经纬度
setTimeout(() => {
emitter.emit("getMapClickCoordinates");
if (!infoActive.value && typeStatus?.value !== "del") {
// 获取经纬度
setTimeout(() => {
emitter.emit("getMapClickCoordinates");
// 更新地图标注位置
emitter.on("mapClickCoordinates", async (res) => {
emitter.emit("deletePointArea")
form.value.jd = res.lng
form.value.wd = res.lat
// 更新地图标注位置
emitter.on("mapClickCoordinates", async (res) => {
emitter.emit("deletePointArea");
emitter.emit("addPointArea", {
coords: [{ jd: res.lng, wd: res.lat }],
coordinates: res?.coordinates,
icon: require("@/assets/lz/dw.png"),
sizeX: 30,
sizeY: 35
form.value.jd = res.lng;
form.value.wd = res.lat;
emitter.emit("addPointArea", {
coords: [{ jd: res.lng, wd: res.lat }],
coordinates: res?.coordinates,
icon: require("@/assets/lz/dw.png"),
sizeX: 30,
sizeY: 35
});
});
})
}, 500);
}, 500);
} else {
emitter.off('getMapClickCoordinates')
emitter.off("getMapClickCoordinates");
}
emits("update:modelValue", val);
}
})
});
//表单数据
const form = ref({
@ -180,41 +146,40 @@ const rules = reactive({
message: "请填写纬度",
trigger: "change"
}
],
]
});
// 获取方格
const getFgList = async () => {
const res = await fetchTbZdxlFgdwSelectList()
const res = await fetchTbZdxlFgdwSelectList();
if (res && res?.length > 0) {
fgList.value = res
fgList.value = res;
}
}
};
// 获取方格详情
const getFgDetails = async (id, type) => {
const res = await fetchTbZdxlFgdwId(id)
const res = await fetchTbZdxlFgdwId(id);
if (res) {
setMap(res, type)
setMap(res, type);
}
}
};
//新增
function open(row = {}, type) {
typeStatus.value = type
infoActive.value = type === 'view';
typeStatus.value = type;
infoActive.value = type === "view";
form.value = { ...row, xfbbName: row?.xfxz };
if (type === 'view') {
title.value = "查看信息"
} else if (type === 'del') {
title.value = "编辑必到点采集"
if (type === "view") {
title.value = "查看信息";
} else if (type === "del") {
title.value = "编辑必到点采集";
} else {
title.value = "新增必到点采集"
title.value = "新增必到点采集";
}
if (type === 'view' || type === 'del') {
getFgDetails(form?.value?.fgdwId , !(type === 'view' || type === 'del'))
if (type === "view" || type === "del") {
getFgDetails(form?.value?.fgdwId, !(type === "view" || type === "del"));
}
dialogFormVisible.value = true;
}
@ -225,28 +190,45 @@ function close() {
dialogFormVisible.value = false;
}
const handleChange = (val) => {
const data = fgList?.value?.find(i => i?.id === val)
setMap(data)
}
const data = fgList?.value?.find((i) => i?.id === val);
setMap(data);
};
const setMap = (data, type = true) => {
emitter.emit("deletePointArea", "addfg")
const { x1 = "", y1 = "", x2 = "", y2 = "", id = "", zxX = "", zxY = "", mc = "" } = data
const centerPoint = [zxX, zxY]
const position = [[Number(x1),Number(y1)],[Number(x2),Number(y2)]]
const text = mc
const obj = [{ position: position, text, id, userData: data}]
emitter.emit("deletePointArea", "addfg");
const {
x1 = "",
y1 = "",
x2 = "",
y2 = "",
id = "",
zxX = "",
zxY = "",
mc = ""
} = data;
const centerPoint = [zxX, zxY];
const position = [
[Number(x1), Number(y1)],
[Number(x2), Number(y2)]
];
const text = mc;
const obj = [{ position: position, text, id, userData: data }];
emitter.emit("echoPlane", { fontColor:'#12fdb8',coords: obj, type:'rectangle', flag:'addfg', color:'rgba(2,20,51,0.5)', linecolor:'#1C97FF'})
emitter.emit("echoPlane", {
fontColor: "#12fdb8",
coords: obj,
type: "rectangle",
flag: "addfg",
color: "rgba(2,20,51,0.5)",
linecolor: "#1C97FF"
});
emitter.emit("setMapCenter", { location: centerPoint, zoomLevel: 14 });
// 更新地图标注位置
if (type) return
emitter.emit("deletePointArea")
if (type) return;
emitter.emit("deletePointArea");
emitter.emit("addPointArea", {
coords: [{ jd: form.value?.jd, wd: form.value?.wd }],
coordinates: [form.value?.jd, form.value?.wd],
@ -254,36 +236,33 @@ const setMap = (data, type = true) => {
sizeX: 30,
sizeY: 35
});
}
};
//提交
const submit = async () => {
try {
await formRef.value.validate()
await formRef.value.validate();
if (!form.value?.id) {
await fetchTbZdxlFgdwBddSave(form.value)
await fetchTbZdxlFgdwBddSave(form.value);
} else {
await fetchTbZdxlFgdwBddUpdate(form.value)
await fetchTbZdxlFgdwBddUpdate(form.value);
}
proxy.$message({
type: "success",
message: "修改成功"
});
dialogFormVisible.value = false;
emits("ok")
emits("ok");
} catch (error) {
console.log(error);
}
}
};
onMounted(() => {
getFgList()
})
getFgList();
});
defineExpose({ open })
defineExpose({ open });
</script>
<style lang="scss" scoped>