日常任务包新增打卡追加逻辑、验证打卡次数 必须只能在当天时间内才能追加、编辑、下发处理
This commit is contained in:
maojiacai
@ -28,3 +28,18 @@ export function fetchIssueData(data) {
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export function fetchTbZdxlFgdwBddSelectList(fgxlrwId) {
|
||||
return request({
|
||||
url: api + `/tbZdxlFgdwBddxlrw/selectUnSelectedVoListByFgxlrwId/${fgxlrwId}`,
|
||||
})
|
||||
}
|
||||
|
||||
// 追加列表
|
||||
export function fetchTbAppendList(data) {
|
||||
return request({
|
||||
url: api + '/tbZdxlFgdwBddxlrw/appendList',
|
||||
method: 'POST',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
@ -261,7 +261,7 @@ const submit = async () => {
|
||||
try {
|
||||
await formRef.value.validate()
|
||||
|
||||
if (form.value?.id) {
|
||||
if (!form.value?.id) {
|
||||
await fetchTbZdxlFgdwBddSave(form.value)
|
||||
} else {
|
||||
await fetchTbZdxlFgdwBddUpdate(form.value)
|
||||
|
||||
@ -0,0 +1,313 @@
|
||||
<script setup>
|
||||
import { computed, getCurrentInstance, reactive, ref, nextTick } from "vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import { fetchTbAppendList, fetchTbZdxlFgdwBddSelectList } from "@/api/service/dailyTaskPackage";
|
||||
|
||||
const { proxy } = getCurrentInstance();
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
disabledIds: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
bddList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
})
|
||||
|
||||
const formRef = ref(null)
|
||||
const emits = defineEmits(["update:modelValue", "change"]);
|
||||
const visible = computed({
|
||||
get() {
|
||||
return props.modelValue;
|
||||
},
|
||||
set(val) {
|
||||
emits("update:modelValue", val);
|
||||
}
|
||||
})
|
||||
|
||||
const selectList = ref([])
|
||||
const pageData = reactive({
|
||||
tableConfiger: {
|
||||
rowKey: 'bddId',
|
||||
rowHieght: 61,
|
||||
haveControls: false,
|
||||
showSelectType: 'checkBox',
|
||||
defaultSelectKeys: [],
|
||||
loading: false
|
||||
},
|
||||
data: {},
|
||||
tableData: [],
|
||||
total: 0,
|
||||
tableColumn: [
|
||||
{
|
||||
label: "必到点",
|
||||
prop: "bddMc"
|
||||
},
|
||||
{
|
||||
label: "打卡次数",
|
||||
prop: "xlghDkcs",
|
||||
showSolt:true
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
// 打卡点验证规则
|
||||
const checkPointRules = [
|
||||
{ required: true, message: '请输入打卡次数', trigger: 'change' },
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value < 1) {
|
||||
callback(new Error('打卡次数必须大于0'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: 'change'
|
||||
}
|
||||
];
|
||||
|
||||
const handleClickClose = () => {
|
||||
visible.value = false;
|
||||
}
|
||||
|
||||
const handleChooseDataChange = (event) => {
|
||||
if (!Array.isArray(event)) return
|
||||
selectList.value = [...event]
|
||||
|
||||
// 重新初始化验证
|
||||
nextTick(() => {
|
||||
if (formRef.value) {
|
||||
formRef.value.clearValidate()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const selectable = (row) => {
|
||||
return !props.disabledIds.has(row.bddId)
|
||||
}
|
||||
|
||||
// 自定义验证
|
||||
const fieldErrors = ref({})
|
||||
|
||||
// 判断行是否被选中
|
||||
const isRowSelected = (row) => {
|
||||
return selectList.value.some(selected => selected.bddId === row.bddId)
|
||||
}
|
||||
|
||||
// 检查指定索引是否有错误
|
||||
const hasError = (index) => {
|
||||
const propPath = `tableData[${index}].xlghDkcs`
|
||||
return !!fieldErrors.value[propPath]
|
||||
}
|
||||
|
||||
// 获取指定索引的错误信息
|
||||
const getError = (index) => {
|
||||
const propPath = `tableData[${index}].xlghDkcs`
|
||||
return fieldErrors.value[propPath] || ''
|
||||
}
|
||||
|
||||
// 验证单个字段（只为选中的行验证）
|
||||
const validateField = async (index) => {
|
||||
const row = pageData.tableData[index]
|
||||
if (!isRowSelected(row)) return true // 未选中的行不验证
|
||||
|
||||
const propPath = `tableData[${index}].xlghDkcs`
|
||||
return new Promise((resolve) => {
|
||||
formRef.value.validateField(propPath, (errorMessage) => {
|
||||
fieldErrors.value[propPath] = errorMessage
|
||||
console.log(errorMessage);
|
||||
resolve(!errorMessage)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// 只为选中的行验证
|
||||
const validateSelectedCheckpoints = async () => {
|
||||
if (!pageData.tableData) return true
|
||||
|
||||
const validations = pageData.tableData
|
||||
.map((item, index) => isRowSelected(item) ? validateField(index) : Promise.resolve(true))
|
||||
|
||||
const results = await Promise.all(validations)
|
||||
return results.every(result => result)
|
||||
}
|
||||
|
||||
// // 防抖验证，避免频繁触发
|
||||
// const debouncedValidate = debounce((index) => {
|
||||
// validateField(index)
|
||||
// }, 300)
|
||||
//
|
||||
// const handleInputChange = (index) => {
|
||||
// debouncedValidate(index)
|
||||
// }
|
||||
//
|
||||
// // 监听数据变化，自动验证选中的行
|
||||
// watch(() => pageData.tableData,
|
||||
// (newData) => {
|
||||
// newData.forEach((row, index) => {
|
||||
// if (isRowSelected(row)) {
|
||||
// validateField(index)
|
||||
// }
|
||||
// })
|
||||
// },
|
||||
// { deep: true }
|
||||
// )
|
||||
|
||||
const open = async (data) => {
|
||||
selectList.value = [];
|
||||
fieldErrors.value = {}
|
||||
const res = await fetchTbZdxlFgdwBddSelectList(data?.id)
|
||||
|
||||
if (res && res.length > 0) {
|
||||
pageData.tableData = res
|
||||
pageData.tableConfiger.defaultSelectKeys = props.bddList?.map(i => {
|
||||
if (i?.selected) return i?.bddId
|
||||
})
|
||||
|
||||
pageData.data = data
|
||||
visible.value = true;
|
||||
} else {
|
||||
proxy.$message({
|
||||
type: "warning",
|
||||
message: "所有必到点已全部下发任务"
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const onSubmit = async () => {
|
||||
if (selectList.value.length === 0) {
|
||||
proxy.$message({
|
||||
type: "warning",
|
||||
message: "请选择打卡数据"
|
||||
});
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
try {
|
||||
const allValid = await validateSelectedCheckpoints()
|
||||
if (!allValid) {
|
||||
throw new Error('请完善选中的打卡点信息')
|
||||
}
|
||||
await formRef.value.validate()
|
||||
|
||||
await fetchTbAppendList({
|
||||
bddList: selectList.value || [],
|
||||
fgxlrwId: pageData.data?.id
|
||||
})
|
||||
|
||||
emits("change", selectList.value)
|
||||
visible.value = false;
|
||||
} catch(error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-form ref="formRef" :model="pageData">
|
||||
<el-dialog v-model="visible" @close="handleClickClose">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
@chooseData="handleChooseDataChange"
|
||||
:selectable="selectable"
|
||||
>
|
||||
<template #xlghDkcs="{ row, $index }">
|
||||
<div class="validation-container">
|
||||
<el-input-number
|
||||
style="width: 30%;"
|
||||
:placeholder="`输入打卡点${$index + 1}需打卡次数`"
|
||||
clearable
|
||||
min="0"
|
||||
:disabled="!selectable(row)"
|
||||
v-model="row.xlghDkcs"
|
||||
:class="{ 'is-error': hasError($index) }"
|
||||
@blur="validateField($index)"
|
||||
/>
|
||||
|
||||
<!-- 展示错误信息 -->
|
||||
<span
|
||||
v-if="hasError($index)"
|
||||
class="error-message"
|
||||
>
|
||||
{{ getError($index) }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</MyTable>
|
||||
|
||||
<!-- 用于处理验证-->
|
||||
<div style="display: none">
|
||||
<template v-for="(item, index) in pageData.tableData" :key="index">
|
||||
<el-form-item v-if="isRowSelected(item)" :prop="`tableData[${index}].xlghDkcs`" :label="item?.bddMc" :rules="checkPointRules">
|
||||
<el-input-number
|
||||
style="width: 100%;"
|
||||
:placeholder="`输入打卡点${index + 1}需打卡次数`"
|
||||
clearable
|
||||
v-model="item.xlghDkcs"
|
||||
/>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<el-button @click="handleClickClose">取消</el-button>
|
||||
<el-button type="primary" @click="onSubmit">确定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
::v-deep {
|
||||
.el-checkbox__input.is-disabled .el-checkbox__inner,
|
||||
.el-checkbox__input.is-checked .el-checkbox__inner {
|
||||
background-color: var(--el-checkbox-checked-bg-color);
|
||||
border-color: var(--el-checkbox-checked-input-border-color);
|
||||
}
|
||||
|
||||
.el-checkbox__input.is-disabled .el-checkbox__inner,
|
||||
.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
|
||||
border: 1px solid var(--el-checkbox-checked-icon-color);
|
||||
border-left: 0;
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.validation-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 4px;
|
||||
min-height: 60px; /* 预留错误信息空间 */
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: #f56c6c;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
padding: 2px 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.is-error .el-input-number__inner {
|
||||
border-color: #f56c6c;
|
||||
}
|
||||
|
||||
/* 确保表格行高度适应错误信息 */
|
||||
.el-table .cell {
|
||||
min-height: 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
@ -55,12 +55,12 @@
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:inline="true"
|
||||
:disabled="infoActive"
|
||||
>
|
||||
<el-form-item prop="xlghSc" label="巡逻时长:">
|
||||
<el-input-number
|
||||
style="width: 80%;"
|
||||
min="0"
|
||||
:disabled="disabled"
|
||||
placeholder="请填写巡逻时长"
|
||||
v-model="form.xlghSc"
|
||||
></el-input-number>
|
||||
@ -70,6 +70,7 @@
|
||||
<el-input
|
||||
placeholder="请填写盘查人员"
|
||||
clearable
|
||||
:disabled="disabled"
|
||||
v-model="form.xlghPcRy"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
@ -77,6 +78,7 @@
|
||||
<el-input
|
||||
placeholder="请填写盘查车辆"
|
||||
clearable
|
||||
:disabled="disabled"
|
||||
v-model="form.xlghPcCl"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
@ -84,27 +86,35 @@
|
||||
<el-input-number
|
||||
style="width: 80%;"
|
||||
min="0"
|
||||
:disabled="disabled"
|
||||
placeholder="请填写巡逻里程"
|
||||
v-model="form.xlghXllc"
|
||||
></el-input-number>
|
||||
<el-tag size="small" type="warning">公里</el-tag>
|
||||
</el-form-item>
|
||||
<el-form-item prop="xfbbName" label="下发巡组:">
|
||||
<el-form-item label="下发巡组:">
|
||||
<el-input
|
||||
placeholder="请填写下发巡组"
|
||||
clearable
|
||||
:disabled="disabled"
|
||||
v-model="form.xfbbName"
|
||||
@click="visible = true"
|
||||
readonly
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<div v-if="form?.rwZt !== '01'" style="flex: 1; display: flex; justify-content: flex-end;">
|
||||
<el-button :disabled="isButtonDisabled" @click="checkInCardOpen">追加打卡</el-button>
|
||||
</div>
|
||||
|
||||
<el-row style="width:100%;">
|
||||
<el-col>
|
||||
<MyTable
|
||||
:tableData="form?.bddList"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
@chooseData="handleChooseDataChange"
|
||||
:selectable="selectable"
|
||||
>
|
||||
<template #xlghDkcs="{ row, $index }">
|
||||
<div class="validation-container">
|
||||
@ -113,14 +123,15 @@
|
||||
:placeholder="`输入打卡点${$index + 1}需打卡次数`"
|
||||
clearable
|
||||
min="0"
|
||||
:disabled="!selectable(row)"
|
||||
v-model="row.xlghDkcs"
|
||||
:class="{ 'is-error': hasError($index) }"
|
||||
@blur="validateField($index)"
|
||||
/>
|
||||
|
||||
|
||||
<!-- 展示错误信息 -->
|
||||
<span
|
||||
v-if="hasError($index)"
|
||||
<span
|
||||
v-if="hasError($index)"
|
||||
class="error-message"
|
||||
>
|
||||
{{ getError($index) }}
|
||||
@ -147,32 +158,39 @@
|
||||
</div>
|
||||
|
||||
<distribute-patrol-team-dialog v-model="visible" @selection-change="handleChange" />
|
||||
<add-check-in-card ref="addCheckInCardRef" :disabledIds="disabledIds" :bddList="form?.bddList" v-model="checkInCardVisible" @change="handleSelectChange" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, getCurrentInstance, computed } from "vue";
|
||||
import { ref, reactive, getCurrentInstance, computed, watch } from "vue";
|
||||
import { updateData } from "@/api/service/dailyTaskPackage";
|
||||
import DictTag from "@/components/DictTag/index.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import DistributePatrolTeamDialog
|
||||
from "@/views/backOfficeSystem/service/taskPage/dailyTaskPackage/components/DistributePatrolTeamDialog.vue";
|
||||
import AddCheckInCard from "@/views/backOfficeSystem/service/taskPage/dailyTaskPackage/components/addCheckInCard.vue"
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_ZDXL_FGXLRW_YJDJ } = proxy.$dict("D_ZDXL_FGXLRW_YJDJ");
|
||||
const btnLoading = ref(false); //按钮截流
|
||||
const title = ref("修改");
|
||||
const formRef = ref(null);
|
||||
const addCheckInCardRef = ref(null)
|
||||
const infoActive = ref(true);
|
||||
const visible = ref(false);
|
||||
const checkInCardVisible = ref(false)
|
||||
|
||||
const pageData = reactive({
|
||||
tableConfiger: {
|
||||
rowKey: 'bddId',
|
||||
rowHieght: 61,
|
||||
haveControls: false,
|
||||
showSelectType: 'checkBox',
|
||||
defaultSelectKeys: [],
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
selectCheckList: [],
|
||||
tableColumn: [
|
||||
{
|
||||
label: "必到点",
|
||||
@ -181,7 +199,7 @@ const pageData = reactive({
|
||||
{
|
||||
label: "打卡次数",
|
||||
prop: "xlghDkcs",
|
||||
showSolt:true
|
||||
showSolt: true
|
||||
},
|
||||
]
|
||||
})
|
||||
@ -210,6 +228,21 @@ const form = ref({
|
||||
bddList: [{ xlghDkcs: 1 }, { xlghDkcs: "" }]
|
||||
});
|
||||
|
||||
const isButtonDisabled = computed(() => {
|
||||
// const target = new Date('2025-09-18')
|
||||
const target = new Date(form.value?.rwRq)
|
||||
const now = new Date()
|
||||
|
||||
// 只比较日期，忽略时间
|
||||
return target.setHours(0, 0, 0, 0) < now.setHours(0, 0, 0, 0)
|
||||
})
|
||||
|
||||
const disabled = computed(() => {
|
||||
// const targetDate = new Date(form.value?.rwRq);
|
||||
// const today = new Date();
|
||||
return (form.value?.rwZt === '03' || isButtonDisabled.value);
|
||||
})
|
||||
|
||||
// 打卡点验证规则
|
||||
const checkPointRules = [
|
||||
{ required: true, message: '请输入打卡次数', trigger: 'change' },
|
||||
@ -255,13 +288,6 @@ const rules = reactive({
|
||||
trigger: "change"
|
||||
}
|
||||
],
|
||||
xfbbName: [
|
||||
{
|
||||
required: true,
|
||||
message: "请填写下发巡组",
|
||||
trigger: "change"
|
||||
}
|
||||
],
|
||||
});
|
||||
|
||||
//新增
|
||||
@ -271,8 +297,12 @@ function open(row = {}, type) {
|
||||
form.value?.bddList?.forEach((item, index) => {
|
||||
item.index = index // 直接添加index属性
|
||||
})
|
||||
|
||||
title.value = "编辑信息";
|
||||
|
||||
pageData.tableConfiger.defaultSelectKeys = form.value?.bddList?.map(i => {
|
||||
if (i?.selected) return i?.bddId
|
||||
})
|
||||
|
||||
title.value = type === 'view' ? '查看详情' : "编辑信息";
|
||||
dialogFormVisible.value = true;
|
||||
}
|
||||
|
||||
@ -288,6 +318,43 @@ const handleChange = (val) => {
|
||||
form.value.xfbbName = val?.xfbbName;
|
||||
}
|
||||
|
||||
const selectList = ref([])
|
||||
const handleChooseDataChange = (event) => {
|
||||
selectList.value = [...event]
|
||||
}
|
||||
|
||||
// 保存原始bddList的ID用于对比
|
||||
const disabledIds = ref(new Set())
|
||||
|
||||
const updateDisabledIds = () => {
|
||||
disabledIds.value = new Set(form.value?.bddList?.map(i => i.bddId))
|
||||
}
|
||||
|
||||
const selectable = (row) => {
|
||||
return !disabledIds.value.has(row.bddId)
|
||||
}
|
||||
|
||||
const handleSelectChange = (selection) => {
|
||||
pageData.selectCheckList = selection
|
||||
|
||||
// 添加新项目
|
||||
const newItems = selection.filter(item => !disabledIds.value.has(item.bddId))
|
||||
form.value.bddList = [...form.value.bddList, ...newItems]
|
||||
|
||||
// 更新禁用ID集合
|
||||
updateDisabledIds()
|
||||
emits("ok", false)
|
||||
}
|
||||
|
||||
// 监听form.bddList的变化，确保禁用集合同步更新
|
||||
watch(() => form.value.bddList, () => {
|
||||
updateDisabledIds()
|
||||
}, { deep: true })
|
||||
|
||||
const checkInCardOpen = () => {
|
||||
addCheckInCardRef.value?.open(form.value)
|
||||
}
|
||||
|
||||
const fieldErrors = ref({})
|
||||
|
||||
// 检查指定索引是否有错误
|
||||
@ -313,24 +380,22 @@ const validateField = async (propPath) => {
|
||||
}
|
||||
|
||||
const validateAllCheckpoints = async () => {
|
||||
// if (!form.value.bddList) return true
|
||||
|
||||
const validations = form.value.bddList.map((_, index) =>
|
||||
if (!form.value.bddList) return true
|
||||
const validations = form.value?.bddList?.map((_, index) =>
|
||||
validateField(`bddList[${index}].xlghDkcs`)
|
||||
)
|
||||
|
||||
) || []
|
||||
|
||||
const results = await Promise.all(validations)
|
||||
return results.every(result => result)
|
||||
}
|
||||
|
||||
//提交
|
||||
const submit = async () => {
|
||||
console.log(await validateAllCheckpoints())
|
||||
console.log(fieldErrors.value)
|
||||
try {
|
||||
await validateAllCheckpoints()
|
||||
await formRef.value.validate()
|
||||
|
||||
await updateData(form.value)
|
||||
await updateData({ ...form.value, bddList: selectList.value || [] })
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "修改成功"
|
||||
@ -352,6 +417,25 @@ defineExpose({ open })
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
|
||||
.dialog {
|
||||
::v-deep {
|
||||
.el-table__header-wrapper .el-checkbox {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.el-checkbox__input.is-disabled .el-checkbox__inner,
|
||||
.el-checkbox__input.is-checked .el-checkbox__inner {
|
||||
background-color: var(--el-checkbox-checked-bg-color);
|
||||
border-color: var(--el-checkbox-checked-input-border-color);
|
||||
}
|
||||
|
||||
.el-checkbox__input.is-disabled .el-checkbox__inner,
|
||||
.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
|
||||
border: 1px solid var(--el-checkbox-checked-icon-color);
|
||||
border-left: 0;
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.dialogWrapper {
|
||||
margin: 20px 20px 0 20px;
|
||||
|
||||
|
||||
@ -111,7 +111,12 @@ const pageData = reactive({
|
||||
]
|
||||
})
|
||||
|
||||
const selectable = (row) => row?.rwZt === '01' || row?.rwZt === '02'
|
||||
const selectable = (row) => {
|
||||
const targetDate = new Date(row?.rwRq);
|
||||
const today = new Date();
|
||||
return targetDate.toDateString() === today.toDateString() && (row?.rwZt === '01' || row?.rwZt === '02');
|
||||
// return row?.rwZt === "01" || row?.rwZt === "02";
|
||||
}
|
||||
|
||||
const editAddFormRef = ref(null);
|
||||
const addEdit = (row, type) => {
|
||||
@ -206,16 +211,15 @@ const getListData = async (params = {}) => {
|
||||
...pageData.pageConfiger,
|
||||
...params
|
||||
})
|
||||
|
||||
pageData.tableData = res?.records?.map((item) => ({
|
||||
...item,
|
||||
xfxz: item?.xfbb?.fzrXm ? `${item?.xfbb?.fzrXm}警组` : '-',
|
||||
bddListLabel: item?.bddList?.map((i, idx) => (`卡点${idx + 1}-${i?.xlghDkcs}次`))?.join(',') || '-',
|
||||
fgJqtjXsLabel: JSON.parse(item?.fgJqtjXs)?.filter(i => (i?.count !== 0))?.map(i => (`${i?.hour}小时-${i?.count}起`))?.join('、') || '-',
|
||||
xfxz: item?.xfbb?.fzrXm ? `${item?.xfbb?.fzrXm}警组` : '',
|
||||
bddListLabel: item?.bddList?.map((i, idx) => (`卡点${idx + 1}-${i?.xlghDkcs}次`))?.join(',') || '',
|
||||
fgJqtjXsLabel: JSON.parse(item?.fgJqtjXs)?.filter(i => (i?.count !== 0))?.map(i => (`${i?.hour}小时-${i?.count}起`))?.join('、') || '',
|
||||
fgJqtjLx: parseAndJoinLx(item?.fgJqtjLx, 'lx')
|
||||
})) || []
|
||||
// pageData.tableData[0].rwZt = '03'
|
||||
console.log(pageData.tableData);
|
||||
// pageData.tableData[2].rwRq = '2025-09-18'
|
||||
// pageData.tableData[0].rwZt = '01'
|
||||
pageData.total = res.total;
|
||||
pageData.tableConfiger.loading = false;
|
||||
} catch (err) {
|
||||
@ -233,11 +237,18 @@ const changeSize = (val) => {
|
||||
getListData();
|
||||
}
|
||||
|
||||
const handleFilter = () => {
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
const handleFilter = (reset = true) => {
|
||||
// reset 是否重置 pageCurrent = 1
|
||||
if (reset) pageData.pageConfiger.pageCurrent = 1;
|
||||
getListData();
|
||||
}
|
||||
|
||||
const isVisibleDel = (row = {}) => {
|
||||
const targetDate = new Date(row?.rwRq);
|
||||
const today = new Date();
|
||||
return targetDate.toDateString() === today.toDateString() && (row?.rwZt === '01' || row?.rwZt === '02');
|
||||
}
|
||||
|
||||
// 删除的方法
|
||||
//批量删除数据
|
||||
const batchDelete = async (id) => {
|
||||
@ -323,9 +334,9 @@ onMounted(() => {
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-button size="small" @click="addEdit(row, 'del')">编辑</el-button>
|
||||
<el-button size="small" v-if="isVisibleDel(row)" @click="addEdit(row, 'del')">编辑</el-button>
|
||||
<el-button size="small" @click="addEdit(row, 'view')">查看详情</el-button>
|
||||
<el-button size="small" v-if="row?.rwZt === '01' || row?.rwZt === '02'" @click="handleIssue([row.id])">下发</el-button>
|
||||
<el-button size="small" v-if="isVisibleDel(row)" @click="handleIssue([row.id])">下发</el-button>
|
||||
<!-- <el-button size="small" @click="delDictItem([row.id])">删除</el-button>-->
|
||||
</template>
|
||||
</MyTable>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import GdMap from "@/components/Map/GdMap/index.vue"
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
import { onMounted, reactive, ref, watchEffect, defineAsyncComponent } from "vue";
|
||||
import { fetchTbZdxlFgdwSelectList, fetchTbZdxlFgxlrwSelectList } from "@/api/service/taskProgress";
|
||||
import emitter from "@/utils/eventBus";
|
||||
import TaskDetailsDialog from "@/views/backOfficeSystem/service/taskPage/taskProgress/taskDetailsDialog.vue";
|
||||
@ -16,12 +16,11 @@ const data = reactive({
|
||||
const fetchTaskList = async () => {
|
||||
if (!data.currentDate) return
|
||||
// const res = await fetchTbZdxlFgxlrwSelectList({ rwRq: data.currentDate });
|
||||
const res = await fetchTbZdxlFgxlrwSelectList();
|
||||
const res = await fetchTbZdxlFgxlrwSelectList({ rwRq: data.currentDate });
|
||||
emitter.emit("deletePointArea", "zdxl_fzyc")
|
||||
if (res && res?.length > 0) {
|
||||
data.list = res;
|
||||
|
||||
emitter.emit("deletePointArea", "zdxl_fzyc")
|
||||
|
||||
let cc = []
|
||||
const list = data.list?.map((el, index) => {
|
||||
let centerPoint = [el.zxX,el.zxY]
|
||||
@ -34,9 +33,12 @@ const fetchTaskList = async () => {
|
||||
|
||||
emitter.emit("echoPlane", { fontColor:'red',coords: list, type:'rectangle', flag:'zdxl_fzyc', color:'rgba(2,20,51,0.5)', linecolor:'#ee0629'})
|
||||
emitter.emit("setMapCenter", { location: cc, zoomLevel: 14 });
|
||||
} else {
|
||||
data.list = [];
|
||||
}
|
||||
}
|
||||
|
||||
const info = ref([])
|
||||
const getData = async () => {
|
||||
const res = await fetchTbZdxlFgdwSelectList()
|
||||
if (res && res?.length > 0) {
|
||||
@ -52,9 +54,12 @@ const getData = async () => {
|
||||
return obj;
|
||||
})
|
||||
|
||||
info.value = list
|
||||
emitter.emit("echoPlane", { fontColor:'#12fdb8',coords: list, type:'rectangle', flag:'tbZdxlFgdw', color:'rgba(2,20,51,0.5)', linecolor:'#1C97FF'})
|
||||
emitter.emit("setMapCenter", { location: cc, zoomLevel: 14 });
|
||||
}
|
||||
|
||||
await fetchTaskList()
|
||||
}
|
||||
|
||||
const handleChange = (val) => {
|
||||
@ -66,13 +71,16 @@ const handleItem = (item) => {
|
||||
emitter.emit("setMapCenter", { location: [zxX, zxY], zoomLevel: 14 });
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const handleUpdate = () => {
|
||||
emitter.emit("echoPlane", { fontColor:'#12fdb8',coords: info.value, type:'rectangle', flag:'tbZdxlFgdw', color:'rgba(2,20,51,0.5)', linecolor:'#1C97FF'})
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
// 设置当前日期
|
||||
const today = new Date();
|
||||
data.currentDate = today.toISOString().split('T')[0]; // 格式化为 YYYY-MM-DD
|
||||
|
||||
getData()
|
||||
fetchTaskList()
|
||||
await getData()
|
||||
|
||||
emitter.on("showFzycInfo", (data) => {
|
||||
taskDetailsRef.value?.open(data?.info)
|
||||
@ -93,12 +101,12 @@ onMounted(() => {
|
||||
<div class="search">
|
||||
<el-date-picker
|
||||
v-model="data.currentDate"
|
||||
placeholder="搜索"
|
||||
placeholder="请选择日期"
|
||||
type="date"
|
||||
@change="handleChange"
|
||||
value-format="YYYY-MM-DD"
|
||||
/>
|
||||
<el-button @click="handleChange">查询</el-button>
|
||||
<!-- <el-button @click="handleChange">查询</el-button>-->
|
||||
</div>
|
||||
|
||||
<div class="listWrapper">
|
||||
@ -106,13 +114,13 @@ onMounted(() => {
|
||||
<div class="item" @click="handleItem(item)">
|
||||
<div>方格名称：{{ item?.fgMc }}</div>
|
||||
<!-- <div>必到点名称：</div>-->
|
||||
<div style="display: flex;align-items: center;">
|
||||
<div>
|
||||
<div>打卡进度：</div>
|
||||
<el-progress type="circle" width="50" :percentage="item?.bddAllProgress || 0" />
|
||||
<el-progress width="50" :percentage="item?.bddAllProgress || 0" />
|
||||
</div>
|
||||
<div style="display: flex;align-items: center;">
|
||||
<div>
|
||||
<div>巡逻里程进度：</div>
|
||||
<el-progress type="circle" width="50" color="#e6a23c" :percentage="item?.xllcProgress || 0" />
|
||||
<el-progress width="50" color="#e6a23c" :percentage="item?.bddAllProgress || 0" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -120,7 +128,7 @@ onMounted(() => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<task-details-dialog ref="taskDetailsRef" v-model="visible" />
|
||||
<task-details-dialog ref="taskDetailsRef" v-model="visible" @update="handleUpdate" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -146,7 +154,7 @@ onMounted(() => {
|
||||
padding: 10px;
|
||||
border: 1px solid #24b6dd;
|
||||
width: 100%;
|
||||
//height: 120px;
|
||||
height: auto;
|
||||
margin-bottom: 10px;
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
@ -8,7 +8,6 @@
|
||||
v-if="!infoActive"
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="submit"
|
||||
:loading="btnLoading"
|
||||
>保存</el-button
|
||||
>
|
||||
@ -22,11 +21,7 @@
|
||||
<div :class="['item', { 'active': current === index }]" @click="handleItem(index)">{{ item?.bddMc }}</div>
|
||||
</template>
|
||||
</div>
|
||||
<Suspense>
|
||||
<template #default>
|
||||
<GbMap mapid="mapDetail" />
|
||||
</template>
|
||||
</Suspense>
|
||||
<div id="viewer" ref="viewerRef" style="width: 100%; height: 100%;background-color: aliceblue;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -34,9 +29,10 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, getCurrentInstance, computed, defineAsyncComponent, onUnmounted } from "vue";
|
||||
import { ref, getCurrentInstance, computed, onMounted, onUnmounted, nextTick, watch } from "vue";
|
||||
import { fetchSelectListByBddxlrwId } from "@/api/service/taskProgress";
|
||||
import emitter from "@/utils/eventBus";
|
||||
import { MapUtil } from "@/components/Map/GdMap/mapUtil";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const btnLoading = ref(false); //按钮截流
|
||||
const title = ref("修改");
|
||||
@ -44,7 +40,6 @@ const formRef = ref(null);
|
||||
const infoActive = ref(true);
|
||||
const current = ref(0)
|
||||
|
||||
const GbMap = ref(null);
|
||||
//级联选择器配置
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
@ -53,7 +48,7 @@ const props = defineProps({
|
||||
}
|
||||
});
|
||||
|
||||
const emits = defineEmits(['update:modelValue', 'ok']);
|
||||
const emits = defineEmits(['update:modelValue', 'ok', 'update']);
|
||||
|
||||
const formData = computed(() => form.value?.bddList[current.value])
|
||||
const dialogFormVisible = computed({
|
||||
@ -61,9 +56,6 @@ const dialogFormVisible = computed({
|
||||
return props.modelValue;
|
||||
},
|
||||
set(val) {
|
||||
if (!val) {
|
||||
location.reload();
|
||||
}
|
||||
emits("update:modelValue", val);
|
||||
}
|
||||
})
|
||||
@ -73,29 +65,116 @@ const form = ref({
|
||||
bddList: []
|
||||
});
|
||||
|
||||
|
||||
let viewerMap = null
|
||||
const viewerRef = ref(null); // 添加 ref
|
||||
const mapUtil = ref(null)
|
||||
const initMap = () => {
|
||||
nextTick(() => {
|
||||
viewerMap = new EliMap({
|
||||
id: viewerRef.value.id,
|
||||
crs: "EPSG:3857",
|
||||
style: {
|
||||
glyphs: "./fonts/{fontstack}/{range}.pbf",
|
||||
center: [104.41361653448905, 31.127827898122767],
|
||||
zoom: 10
|
||||
},
|
||||
transformRequest: (url) => {
|
||||
if (url.indexOf("TileMatrix=") != -1) {
|
||||
const arr = url.split("TileMatrix=");
|
||||
const arr1 = arr[1].split("&");
|
||||
const nurl = `${arr[0]}&TileMatrix=${Number(arr1[0])}&${arr1[1]}&${arr1[2]
|
||||
}`;
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
viewerMap.mapboxGLMap.on("load", () => {
|
||||
viewerMap.addGaudLayer({
|
||||
url: 'http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
|
||||
})
|
||||
});
|
||||
console.log(viewerMap)
|
||||
// mapUtil.value = new MapUtil(viewerMap);
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 监听对话框显示状态
|
||||
watch(dialogFormVisible, (newVal) => {
|
||||
if (newVal) {
|
||||
nextTick(() => {
|
||||
initMap();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const setMapCenter = (location, zoomLevel) => {
|
||||
viewerMap.mapboxGLMap.setCenter(location);
|
||||
viewerMap.mapboxGLMap.setZoom(zoomLevel);
|
||||
};
|
||||
|
||||
const echoPlane = (res) => {
|
||||
let { type , coords ,fontColor, text = '' ,radius = 0, isclear ,flag ,id = 1 , color , linecolor} = res;
|
||||
if(!coords) return;
|
||||
// if(isclear) _that.removeElement(flag)
|
||||
// if(!_that._self[flag]) _that._self[flag] = [];
|
||||
let color1 = color ? color : 'rgba(29,237,245,0.6)'
|
||||
let linecolor1 = linecolor ? linecolor : 'rgba(29,237,245,0.6)'
|
||||
let style = {
|
||||
color:color1,
|
||||
outLineColor:linecolor1,
|
||||
outLineWidth:2,
|
||||
highlightColor:'rgba(255,0,0,0.5)',
|
||||
labelOption:{
|
||||
pixelOffset:[0,0],
|
||||
allShow:true,
|
||||
fontColor:fontColor ? fontColor:'#ffffff',
|
||||
fontSize:'12px'
|
||||
}
|
||||
}
|
||||
let maker ;
|
||||
// 矩形
|
||||
if(type == 'rectangle') maker = map.createRectangle(coords,style);
|
||||
|
||||
}
|
||||
|
||||
const makerSki = (res) => {
|
||||
const { coords, icon } = res
|
||||
if (!coords) return;
|
||||
coords.forEach(item => {
|
||||
|
||||
const el = document.createElement("img");
|
||||
el.src = icon;
|
||||
el.style.width = "25px";
|
||||
const marker = viewerMap.Marker(el,[item.jd,item.wd],{anchor:'bottom', offset:[0,0]})
|
||||
});
|
||||
};
|
||||
|
||||
const getData = async () => {
|
||||
const { id = "" } = formData.value
|
||||
const res = await fetchSelectListByBddxlrwId({ bddxlrwId: id })
|
||||
if (res && res?.length > 0) {
|
||||
console.log(res);
|
||||
emitter.emit("deletePointArea", "fgxlrw")
|
||||
|
||||
const { zxX, zxY, x1, x2, y1, y2, id, fgMc } = form.value
|
||||
let centerPoint = [zxX, zxY]
|
||||
let position = [[Number(x1),Number(y1)],[Number(x2),Number(y2)]]
|
||||
let text = fgMc
|
||||
let obj = [{ position: position, text, id: id ,userData: form.value}]
|
||||
// const list = data.list?.map((el, index) => {
|
||||
// let centerPoint = [el.zxX,el.zxY]
|
||||
// if(index == 0) cc = centerPoint;
|
||||
// let position = [[Number(el.x1),Number(el.y1)],[Number(el.x2),Number(el.y2)]]
|
||||
// let text = el.mc
|
||||
// let obj = { position: position, text, id: el.id ,userData: el}
|
||||
// return obj;
|
||||
// })
|
||||
|
||||
emitter.emit("echoPlane", { fontColor:'#12fdb8',coords: obj, type:'rectangle', flag:'fgxlrw', color:'rgba(2,20,51,0.5)', linecolor:'#1C97FF'})
|
||||
emitter.emit("setMapCenter", { location: centerPoint, zoomLevel: 14 });
|
||||
// 方格
|
||||
echoPlane({ fontColor:'#12fdb8',coords: obj, type:'rectangle', flag:'fgxlrw', color:'rgba(2,20,51,0.5)', linecolor:'#1C97FF'})
|
||||
setMapCenter(centerPoint, 14);
|
||||
|
||||
const dkJs = res?.map(i => ({ jd: i?.dkJsJd + 0.04, wd: i?.dkJsWd + 0.08 }))
|
||||
const dkKs = res?.map((i, k) => ({ jd: i?.dkKsJd * k, wd: i?.dkKsWd * k }))
|
||||
|
||||
// 标注
|
||||
makerSki({
|
||||
coords: [...dkKs, ...dkJs],
|
||||
icon: require("@/assets/lz/dw.png"),
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@ -106,12 +185,13 @@ const handleItem = (index) => {
|
||||
|
||||
//新增
|
||||
function open(row = {}, type) {
|
||||
GbMap.value = defineAsyncComponent(() => import("@/components/Map/GdMap/index.vue"))
|
||||
infoActive.value = !type;
|
||||
form.value = { ...row, bddList: row?.bddList ? JSON.parse(row?.bddList) : [] };
|
||||
title.value = "任务详情";
|
||||
getData()
|
||||
dialogFormVisible.value = true;
|
||||
nextTick(() => {
|
||||
infoActive.value = !type;
|
||||
form.value = { ...row, bddList: row?.bddList ? JSON.parse(row?.bddList) : [] };
|
||||
title.value = "任务详情";
|
||||
getData()
|
||||
dialogFormVisible.value = true;
|
||||
})
|
||||
}
|
||||
|
||||
//关闭弹窗
|
||||
@ -120,23 +200,23 @@ function close() {
|
||||
dialogFormVisible.value = false;
|
||||
}
|
||||
|
||||
//提交
|
||||
const submit = async () => {
|
||||
try {
|
||||
await formRef.value.validate()
|
||||
// //提交
|
||||
// const submit = async () => {
|
||||
// try {
|
||||
// await formRef.value.validate()
|
||||
|
||||
await updateData(form.value)
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "修改成功"
|
||||
});
|
||||
dialogFormVisible.value = false;
|
||||
emits("ok")
|
||||
// await updateData(form.value)
|
||||
// proxy.$message({
|
||||
// type: "success",
|
||||
// message: "修改成功"
|
||||
// });
|
||||
// dialogFormVisible.value = false;
|
||||
// emits("ok")
|
||||
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
// } catch (error) {
|
||||
// console.log(error);
|
||||
// }
|
||||
// }
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
@ -146,6 +226,11 @@ defineExpose({ open })
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
|
||||
.dialog {
|
||||
#viewer {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.dialogWrapper {
|
||||
height: calc(100vh - 256px);
|
||||
margin: 20px 20px 0 20px;
|
||||
|
||||
Reference in New Issue
Block a user