下发任务1
This commit is contained in:
给我
@ -76,7 +76,7 @@
|
||||
:align="getConfiger?.align"
|
||||
>
|
||||
<template #default="scope">
|
||||
<slot name="controls" v-bind="scope"></slot>
|
||||
<slot name="controls" v-bind="scope" :index="scope.$index"></slot>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
@ -603,6 +603,15 @@ export const privateRoutes = [{
|
||||
icon: "article-ranking"
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/taskPage/IssueTasks",
|
||||
component: () => import("@/views/backOfficeSystem/service/taskPage/IssueTasks/index"),
|
||||
name: "IssueTasks",
|
||||
meta: {
|
||||
title: '下发任务',
|
||||
icon: "article-ranking"
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/taskPage/clockRecord",
|
||||
component: () => import("@/views/backOfficeSystem/service/taskPage/clockRecord/index"),
|
||||
|
||||
@ -0,0 +1,179 @@
|
||||
<template>
|
||||
<el-dialog title="任务" width="80%" :model-value="modelValue" destroy-on-close :close-on-click-modal="false"
|
||||
@close="close">
|
||||
<el-form ref="elform" :model="listQuery" :rules="rules" :inline="true" label-position="top">
|
||||
<el-form-item prop="dwmc" label="点位名称" style="width: 100%">
|
||||
<el-input v-model="listQuery.dwmc" clearable style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item prop="jd" label="选择必巡点" style="width: 100%">
|
||||
<div class="latlng">
|
||||
<el-input v-model="listQuery.jd" clearable style="width: 45%" placeholder="经度" />
|
||||
<el-input v-model="listQuery.wd" clearable style="width: 45%" placeholder="纬度" />
|
||||
<el-button @click="chackLat">选取坐标</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 100%">
|
||||
<div class="map">
|
||||
<GdMap v-if="dialogFormVisible" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button type="primary" @click="submit">保存</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<FgLoad v-model="fgVisible" @choosedUsers="hanlderChoose" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import FgLoad from "./fgLoad.vue";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import GdMap from "@/components/Map/GdMap/index.vue";
|
||||
import { qcckGet, qcckPost, qcckPut } from "@/api/qcckApi.js";
|
||||
import * as rule from "@/utils/rules.js";
|
||||
import { IdCard } from "@/utils/validate.js";
|
||||
import {
|
||||
ref,
|
||||
defineExpose,
|
||||
reactive,
|
||||
defineProps,
|
||||
getCurrentInstance,
|
||||
defineEmits,
|
||||
nextTick,
|
||||
onMounted,
|
||||
onUnmounted,
|
||||
watch
|
||||
} from "vue";
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
dic: { type: Object, default: {} },
|
||||
formData: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
});
|
||||
const fgData = ref([]);
|
||||
const fgVisible = ref(false);
|
||||
const emits = defineEmits(["update:modelValue","submit"]);
|
||||
const { proxy } = getCurrentInstance();
|
||||
const dialogFormVisible = ref(false); //表单禁用
|
||||
const listQuery = ref({ gridType: 150 }); //表单
|
||||
const elform = ref();
|
||||
const rules = reactive({
|
||||
fgRwbt: [
|
||||
{ required: true, message: "请输入方格任务标题", trigger: "change" }
|
||||
],
|
||||
fgRwnr: [{ required: true, message: "请输入方格任务内容", trigger: "blur" }],
|
||||
rwRq: [{ required: true, message: "请选择任务日期", trigger: "change" }],
|
||||
gridType: [
|
||||
{ required: true, message: "请输入网格大小", trigger: ["change", "blur"] }
|
||||
]
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
emitter.on("coordString", (res) => {
|
||||
if (res.type === "point") {
|
||||
listQuery.value.jd = res.coord[0];
|
||||
listQuery.value.wd = res.coord[1];
|
||||
}
|
||||
});
|
||||
});
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(val) => {
|
||||
if (val) {
|
||||
setTimeout(() => {
|
||||
dialogFormVisible.value = true;
|
||||
}, 1000);
|
||||
} else {
|
||||
listQuery.value = {};
|
||||
fgData.value = [];
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
//选择方格
|
||||
function hanlderChoose(arr) {
|
||||
const jzryList = arr.map((item) => {
|
||||
return {
|
||||
id: item.id,
|
||||
fgmc: item.mc1
|
||||
};
|
||||
});
|
||||
fgData.value = jzryList;
|
||||
}
|
||||
function handleClose(idx) {
|
||||
fgData.value.splice(idx, 1);
|
||||
}
|
||||
//获取经纬度
|
||||
function chackLat() {
|
||||
listQuery.value.jd = "";
|
||||
listQuery.value.wd = "";
|
||||
emitter.emit("drawShape", { type: "point", flag: "dw", isclear: true });
|
||||
}
|
||||
|
||||
// 提交
|
||||
const submit = () => {
|
||||
emits("submit", listQuery.value);
|
||||
close("新增成功");
|
||||
};
|
||||
// 关闭
|
||||
const close = (val) => {
|
||||
emits("update:modelValue", false);
|
||||
};
|
||||
onUnmounted(() => {
|
||||
emitter.off("coordString");
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
|
||||
.map {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.latlng {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
::v-deep .el-cascader__search-input {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.depBox {
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
background-color: #062a48;
|
||||
border: 1px solid #114260;
|
||||
color: #fff;
|
||||
padding: 1px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.ipt {
|
||||
border: 1px solid rgb(7, 85, 188);
|
||||
width: 100%;
|
||||
line-height: 32px;
|
||||
min-height: 32px;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
background: #001238;
|
||||
}
|
||||
|
||||
.mj::after {
|
||||
content: "请选择方格";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 12px;
|
||||
color: #c0c4cc;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,247 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2024-01-25 16:21:46
|
||||
* @LastEditTime: 2024-01-26 10:10:33
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: \my_web_new\src\views\backOfficeSystem\patrolManagement\task\editAddForm.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ title }}</span>
|
||||
<div>
|
||||
<el-button type="primary" size="small" :loading="loading" @click="submit">保存</el-button>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-steps class="box_main" :active="stepActive" finish-status="success">
|
||||
<el-step title="步骤1" />
|
||||
<el-step title="步骤2" />
|
||||
</el-steps>
|
||||
<el-form ref="elform" :model="listQuery" :rules="rules" :inline="true" label-position="top" v-if="stepActive == 0">
|
||||
<el-form-item style="width: 48%" prop="rwmc" label="任务名称">
|
||||
<el-input v-model="listQuery.rwmc" placeholder="请输入任务名称" style="width: 100%" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 45%" label="方格" prop="">
|
||||
<div :class="fgData.length === 0 ? 'ipt mj' : 'ipt'" @click.stop="fgVisible = true">
|
||||
<el-tag v-for="(tag, idx) in fgData" :key="tag.id" class="mx-1" closable :type="tag.type"
|
||||
@close="handleClose(idx)">
|
||||
{{ tag.fgmc }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<div class="center-btn"><el-button style="margin-top: 12px" @click="next">下一步</el-button></div>
|
||||
</el-form>
|
||||
<div class="box_main" v-if="stepActive == 1">
|
||||
<el-button style="margin: 12px 0 10px 0;" @click="addDw">新增点位</el-button>
|
||||
<MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData">
|
||||
<template #sblx="{ row }">
|
||||
<dict-tag :value="row.sblx" :options="D_BZ_SBLX" :tag="false" />
|
||||
</template>
|
||||
<template #sblxdm="{ row }">
|
||||
<dict-tag :options="D_BZ_GZSBLX" :value="row.sblxdm" :tag="false" />
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row, index }">
|
||||
<el-button @click="deletList(index)" type="danger" size="small">删除</el-button>
|
||||
</template>
|
||||
</MyTable>
|
||||
<div class="center-btn">
|
||||
<el-button style="margin-top: 12px" @click="stepActive--; pageData.tableData = []">上一步</el-button>
|
||||
<el-button style="margin-top: 12px" @click="stepActive--">提交</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<FgLoad v-model="fgVisible" @choosedUsers="hanlderChoose" :Single="true" />
|
||||
<AddDw v-model="showDialog" :dic="{ D_ZDXL_FGXLRW_YJYS, D_ZDXL_FGXLRW_YJDJ, D_ZDXL_FGXLRW_RWZT }"
|
||||
@submit="dwSubmit" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import FgLoad from "./fgLoad.vue";
|
||||
import AddDw from "./addDw.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import { qcckGet, qcckPost, qcckPut } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import {
|
||||
ref,
|
||||
defineExpose,
|
||||
reactive,
|
||||
onMounted,
|
||||
defineEmits,
|
||||
getCurrentInstance
|
||||
} from "vue";
|
||||
const props = defineProps({
|
||||
dic: Object
|
||||
});
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_ZDXL_FGXLRW_YJYS, D_ZDXL_FGXLRW_YJDJ, D_ZDXL_FGXLRW_RWZT } = proxy.$dict("D_ZDXL_FGXLRW_YJYS", "D_ZDXL_FGXLRW_YJDJ", "D_ZDXL_FGXLRW_RWZT");
|
||||
const showDialog = ref(false);
|
||||
const stepActive = ref(0)
|
||||
const emit = defineEmits(["updateDate"]);
|
||||
const dialogForm = ref(false); //弹窗
|
||||
const fgData = ref([]);
|
||||
const listQuery = ref({ qcys: "#409eff" }); //表单
|
||||
const fgVisible = ref(false);
|
||||
const loading = ref(false);
|
||||
const elform = ref();
|
||||
const title = ref("");
|
||||
const rules = reactive({
|
||||
rwmc: [{ required: true, message: "请输入任务名称", trigger: "change" }],
|
||||
ssbmdm: [{ required: true, message: "请选择所属部门", trigger: "change" }],
|
||||
sblx: [{ required: true, message: "请选择任务类型", trigger: "change" }],
|
||||
jd: [{ required: true, message: "请选择坐标", trigger: ["change", "blur"] }]
|
||||
});
|
||||
const pageData = reactive({
|
||||
tableData: [], //表格数据
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
loading: false,
|
||||
rowHieght: 61,
|
||||
showSelectType: "checkBox"
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageNum: 1
|
||||
}, //分页
|
||||
controlsWidth: 210, //操作栏宽度
|
||||
tableColumn: [
|
||||
{ label: "点位名称", prop: "dwmc", showOverflowTooltip: true },
|
||||
{ label: "经度", prop: "jd", showOverflowTooltip: true },
|
||||
{ label: "维度", prop: "wd", showOverflowTooltip: true },
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
});
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
dialogForm.value = true;
|
||||
title.value = row ? "编辑任务" : "新增任务";
|
||||
if (row) getDataById(row);
|
||||
};
|
||||
// 根据id查询详情
|
||||
const getDataById = (row) => {
|
||||
qcckGet({}, "/mosty-yszx/tbYsSxt/" + row.id).then(async (res) => {
|
||||
listQuery.value = res;
|
||||
if (res.jd && res.wd)
|
||||
emitter.emit("addPointArea", {
|
||||
coords: [res],
|
||||
icon: require("@/assets/point/sp.png"),
|
||||
flag: "jczGzy"
|
||||
});
|
||||
});
|
||||
};
|
||||
const next = () => {
|
||||
elform.value.validate((valid) => {
|
||||
if (!valid) return false;
|
||||
stepActive.value++;
|
||||
});
|
||||
|
||||
}
|
||||
const addDw = () => {
|
||||
showDialog.value = true
|
||||
}
|
||||
//选择方格
|
||||
function hanlderChoose(arr) {
|
||||
const jzryList = arr.map((item) => {
|
||||
return {
|
||||
id: item.id,
|
||||
fgmc: item.mc1
|
||||
};
|
||||
});
|
||||
fgData.value = jzryList;
|
||||
}
|
||||
const dwSubmit = (val) => {
|
||||
pageData.tableData.push(val)
|
||||
}
|
||||
// 提交
|
||||
const submit = () => {
|
||||
elform.value.validate((valid) => {
|
||||
if (!valid) return false;
|
||||
loading.value = true;
|
||||
if (title.value == "新增任务") {
|
||||
qcckPost(listQuery.value, "/mosty-yszx/tbYsSxt/add")
|
||||
.then((res) => {
|
||||
proxy.$message({ type: "success", message: "新增成功" });
|
||||
close();
|
||||
emit("updateDate");
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
} else {
|
||||
qcckPut(listQuery.value, "/mosty-yszx/tbYsSxt/update")
|
||||
.then((res) => {
|
||||
proxy.$message({ type: "success", message: "修改成功" });
|
||||
close();
|
||||
emit("updateDate");
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
const deletList = (idx) => {
|
||||
console.log(idx, 'idx');
|
||||
pageData.tableData.splice(idx, 1)
|
||||
}
|
||||
// 关闭
|
||||
const close = () => {
|
||||
listQuery.value = { qcys: "#409eff" };
|
||||
dialogForm.value = false;
|
||||
loading.value = false;
|
||||
};
|
||||
|
||||
defineExpose({ init });
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
|
||||
.mapBox {
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
.latlng {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.ipt {
|
||||
border: 1px solid rgb(7, 85, 188);
|
||||
width: 100%;
|
||||
line-height: 32px;
|
||||
min-height: 32px;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
background: #001238;
|
||||
}
|
||||
|
||||
.mj::after {
|
||||
content: "请选择方格";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 12px;
|
||||
color: #c0c4cc;
|
||||
}
|
||||
|
||||
.box_main {
|
||||
padding: 2rem 12rem 0rem 12rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.center-btn {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,197 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog :title="titleValue" width="1400px" :model-value="modelValue" :destroy-on-close="true" @close="closed">
|
||||
<div v-if="modelValue">
|
||||
<el-form :model="listQuery" class="mosty-from-wrap" :inline="true">
|
||||
<el-form-item label="方格名称">
|
||||
<el-input v-model="listQuery.mc1" placeholder="请输入方格名称" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="success" @click="handleFilter">查询</el-button>
|
||||
<el-button type="info" @click="reset()"> 重置 </el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="tabBox" :class="props.Single?'tabBoxRadio':''" style="margin-top: 0px">
|
||||
<el-table ref="multipleUserRef" @selection-change="handleSelectionChange" :data="tableData" border style="width: 100%" :row-key="keyid" height="450">
|
||||
<el-table-column type="selection" width="55" :reserve-selection="true" />
|
||||
<el-table-column label="序号" type="index" align="center" sortable width="80" />
|
||||
<el-table-column sortable prop="mc1" show-overflow-tooltip align="center" label="方格名称">
|
||||
</el-table-column>
|
||||
<el-table-column sortable prop="ssbm" label="所属部门" align="center"></el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="fenye">
|
||||
<el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.pageCurrent" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="closed">取消</el-button>
|
||||
<el-button type="primary" @click="onComfirm">确认</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { getCountBqsl } from "@/api/xfll";
|
||||
import * as rule from "@/utils/rules.js";
|
||||
import { qcckGet, qcckPost, qcckPut } from "@/api/qcckApi.js";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { ElMessage } from "element-plus";
|
||||
import {
|
||||
defineProps,
|
||||
watch,
|
||||
ref,
|
||||
reactive,
|
||||
onMounted,
|
||||
nextTick,
|
||||
watchEffect
|
||||
} from "vue";
|
||||
import { getTbJcglXfll } from "@/api/xfll";
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
titleValue: {
|
||||
type: String,
|
||||
default: "选择民警"
|
||||
},
|
||||
//是否单选
|
||||
Single: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
roleIds: {
|
||||
type: Array,
|
||||
default: []
|
||||
} // 回显
|
||||
});
|
||||
const keyid = (row) => {
|
||||
return row.ryid;
|
||||
};
|
||||
const total = ref(0);
|
||||
const listQuery = ref({
|
||||
pageCurrent: 1,
|
||||
pageSize: 20,
|
||||
fl: "01"
|
||||
});
|
||||
const form = ref({});
|
||||
const tableData = ref([]);
|
||||
const multipleUserRef = ref(null);
|
||||
const multipleSelectionUser = ref([]);
|
||||
const emits = defineEmits(["update:modelValue", "choosedUsers"]);
|
||||
const closed = () => {
|
||||
emits("update:modelValue", false);
|
||||
};
|
||||
const lxList = reactive([]); //搜索框标签选择数据
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(val) => {
|
||||
if (val === true) handleFilter();
|
||||
}
|
||||
);
|
||||
onMounted(() => {
|
||||
getListData();
|
||||
//获取搜索栏标签选择数据
|
||||
getCountBqsl().then((res) => {
|
||||
res.forEach((item) => {
|
||||
lxList.push(item);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// 分页
|
||||
const handleFilter = () => {
|
||||
listQuery.value.pageCurrent = 1;
|
||||
getListData();
|
||||
};
|
||||
|
||||
// 获取列表
|
||||
const getListData = async () => {
|
||||
const params = listQuery.value;
|
||||
qcckGet(params, "/mosty-yjzl/tbZdxlFgdw/selectPage")
|
||||
.then((res) => {
|
||||
tableData.value = res.records || [];
|
||||
total.value = res.total;
|
||||
multipleUser();
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
//列表回显
|
||||
function multipleUser() {
|
||||
tableData.value.forEach((item) => {
|
||||
if (props.roleIds.some((id) => id == item.ryid)) {
|
||||
multipleUserRef.value.toggleRowSelection(item, true);
|
||||
}
|
||||
});
|
||||
}
|
||||
// 重置
|
||||
const reset = () => {
|
||||
listQuery.value = { pageCurrent: 1, pageSize: 20, fl: "01" };
|
||||
getListData();
|
||||
};
|
||||
|
||||
const handleSelectionChange = (val) => {
|
||||
if (props.Single) {
|
||||
if (val.length > 1) {
|
||||
let del_row = val.shift();
|
||||
multipleUserRef.value.toggleRowSelection(del_row, false);
|
||||
}
|
||||
multipleSelectionUser.value = val;
|
||||
} else {
|
||||
multipleSelectionUser.value = val;
|
||||
}
|
||||
};
|
||||
|
||||
// 为用户分配角色
|
||||
const onComfirm = () => {
|
||||
const userList = multipleSelectionUser.value;
|
||||
let list = [];
|
||||
let listId = [];
|
||||
userList.forEach((val) => {
|
||||
if (listId.indexOf(val.id) == -1) {
|
||||
list.push(val);
|
||||
listId.push(val.id);
|
||||
}
|
||||
});
|
||||
emits("choosedUsers", list);
|
||||
closed();
|
||||
};
|
||||
|
||||
// pageSize 改变触发
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.pageSize = currentSize;
|
||||
getListData();
|
||||
};
|
||||
|
||||
// 页码改变触发
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.pageCurrent = currentPage;
|
||||
getListData();
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/layout.scss";
|
||||
@import "@/assets/css/element-plus.scss";
|
||||
.tag {
|
||||
padding: 1px 4px;
|
||||
box-sizing: border-box;
|
||||
margin: 0 4px;
|
||||
border: 1px solid #24869b;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.tabBoxRadio .el-checkbox__inner {
|
||||
border-radius: 50% !important;
|
||||
}
|
||||
.tabBoxRadio .el-table__header-wrapper .el-checkbox {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
197
src/views/backOfficeSystem/service/taskPage/IssueTasks/index.vue
Normal file
197
src/views/backOfficeSystem/service/taskPage/IssueTasks/index.vue
Normal file
@ -0,0 +1,197 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<!-- 头部 -->
|
||||
<PageTitle title="下发任务">
|
||||
<el-button type="primary" @click="addEditForm('add','')">
|
||||
<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" />
|
||||
</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 #sblx="{ row }">
|
||||
<dict-tag :value="row.sblx" :options="D_BZ_SBLX" :tag="false" />
|
||||
</template>
|
||||
<template #sblxdm="{ row }">
|
||||
<dict-tag :options="D_BZ_GZSBLX" :value="row.sblxdm" :tag="false" />
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-button @click="addEditForm('eidt',row)" size="small">编辑</el-button>
|
||||
<el-button @click="deletList(row.id)" type="danger" size="small">删除</el-button>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="pageData.tableHeight" :pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"></Pages>
|
||||
</div>
|
||||
<!-- 编辑-新增 -->
|
||||
<EditAddForm ref="editInfo" @updateDate="getDataList" :dic="{D_BZ_SBLX,D_BZ_GZSBLX}"></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, nextTick } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_SBLX, D_BZ_GZSBLX } = proxy.$dict("D_BZ_SBLX", "D_BZ_GZSBLX");
|
||||
const ids = ref([]); //多选
|
||||
const searchBox = ref(); //搜索框
|
||||
const listQuery = ref({});
|
||||
const editInfo = ref();
|
||||
const searchConfiger = reactive([
|
||||
{
|
||||
showType: "input",
|
||||
prop: "sbmc",
|
||||
placeholder: "请输入任务名称",
|
||||
label: "任务名称"
|
||||
},
|
||||
{
|
||||
showType: "input",
|
||||
prop: "sbbh",
|
||||
placeholder: "请输入任务编号",
|
||||
label: "任务编号"
|
||||
}
|
||||
]);
|
||||
const pageData = reactive({
|
||||
tableData: [], //表格数据
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
loading: false,
|
||||
rowHieght: 61,
|
||||
showSelectType: "checkBox"
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageNum: 1
|
||||
}, //分页
|
||||
controlsWidth: 210, //操作栏宽度
|
||||
tableColumn: [
|
||||
{ label: "任务名称", prop: "sbmc", showOverflowTooltip: true },
|
||||
{ label: "编号", prop: "sbbh", showOverflowTooltip: true },
|
||||
{ label: "地址", prop: "dzmc", showOverflowTooltip: true },
|
||||
{
|
||||
label: "任务类型",
|
||||
prop: "sblx",
|
||||
showSolt: true,
|
||||
showOverflowTooltip: true
|
||||
},
|
||||
{
|
||||
label: "摄像机类型",
|
||||
prop: "sblxdm",
|
||||
showSolt: true,
|
||||
showOverflowTooltip: true
|
||||
},
|
||||
{ label: "所属部门", prop: "ssbm", showOverflowTooltip: true }
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
proxy.mittBus.on("mittFn", (data) => {
|
||||
pageData.keyCount = data;
|
||||
});
|
||||
tabHeightFn();
|
||||
// getDataList();
|
||||
});
|
||||
// 搜索
|
||||
const onSearch = (val) => {
|
||||
listQuery.value = { ...listQuery.value, ...val };
|
||||
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;
|
||||
qcckPost(pramas, "/mosty-yszx/tbYsSxt/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.pageNum = val;
|
||||
getDataList();
|
||||
};
|
||||
const changeSize = (val) => {
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getDataList();
|
||||
};
|
||||
|
||||
// 多选
|
||||
const chooseData = (val) => {
|
||||
if (!val) return false;
|
||||
if (val instanceof Array)
|
||||
ids.value = val.map((v) => {
|
||||
return v.id;
|
||||
});
|
||||
};
|
||||
//批量删除
|
||||
const deletList = (id) => {
|
||||
proxy
|
||||
.$confirm("确定要删除", "警告", { type: "warning" })
|
||||
.then(() => {
|
||||
qcckDelete({}, "/mosty-yszx/tbYsSxt/" + id).then(() => {
|
||||
proxy.$message({ type: "success", message: "删除成功" });
|
||||
getDataList();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
};
|
||||
|
||||
// 新增编辑表单
|
||||
const addEditForm = (type, row) => {
|
||||
nextTick(() => {
|
||||
editInfo.value.init(type, row);
|
||||
});
|
||||
};
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight =
|
||||
window.innerHeight - searchBox.value.offsetHeight - 240;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -30,7 +30,7 @@ const pageData = reactive({
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
loading:false
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
@ -160,10 +160,10 @@ onMounted(() => {
|
||||
<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>-->
|
||||
<!-- <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">
|
||||
@ -171,32 +171,21 @@ onMounted(() => {
|
||||
</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"
|
||||
>
|
||||
<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>-->
|
||||
<!-- <el-button size="small" @click="delDictItem([row.id])">删除</el-button>-->
|
||||
</template>
|
||||
</MyTable>
|
||||
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
<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" />
|
||||
@ -206,7 +195,9 @@ onMounted(() => {
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
::v-deep {
|
||||
.check, .el-upload-text {
|
||||
|
||||
.check,
|
||||
.el-upload-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -216,5 +207,4 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -268,6 +268,7 @@ const updateDisabledIds = () => {
|
||||
};
|
||||
|
||||
const selectable = (row) => {
|
||||
console.log(row,'row')
|
||||
return !disabledIds.value.has(row.bddId);
|
||||
};
|
||||
|
||||
|
||||
@ -138,9 +138,7 @@ const handleIssueAll = () => {
|
||||
const handleIssue = async (ids = []) => {
|
||||
try {
|
||||
await proxy.$confirm("是否进行下发操作", "警告", {type: "warning"})
|
||||
|
||||
const res = await fetchIssueData({ ids: ids?.join(',') })
|
||||
|
||||
if (res) {
|
||||
proxy.$message({type: "success", message: "下发成功" });
|
||||
handleFilter()
|
||||
|
||||
Reference in New Issue
Block a user