'保安项目提交'
This commit is contained in:
esacpe
@ -0,0 +1,247 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">固定勤务{{ title }}</span>
|
||||
<div>
|
||||
<el-button size="small" @click="save" type="primary" :loading="loading">保存</el-button>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<FormMessage ref="FormRef" v-model="listQuery" :rules="rules" :formList="formList" @change="handleChange">
|
||||
<div class="listBox">
|
||||
<el-row class="el-row-title">
|
||||
<el-col class="tc border1" :span="4">班次</el-col>
|
||||
<el-col class="tc" :span="4">时间</el-col>
|
||||
<el-col class="tc border" :span="8">带队民警</el-col>
|
||||
<el-col class="tc" :span="8">巡逻保安</el-col>
|
||||
</el-row>
|
||||
<el-row v-for="(item, index) in listQuery.qwglRyDtos" :key="index">
|
||||
<el-col class="tc border1" :span="4"> {{ item.bcmc }} </el-col>
|
||||
<el-col class="tc" :span="4">{{ item.qwsj }}</el-col>
|
||||
<el-col class="tc border" :span="8">
|
||||
<el-tag closable v-for="(it, idx) in item.mjList" :key="idx" @close="item.mjList.splice(idx, 1)">
|
||||
{{ it.xm }}
|
||||
</el-tag>
|
||||
<span class="btns" @click="addUser('mj', index, item.mjList)">新增</span>
|
||||
</el-col>
|
||||
<el-col class="tc" :span="8">
|
||||
<el-tag closable v-for="(it, idx) in item.baList" :key="idx" @close="item.baList.splice(idx, 1)">
|
||||
{{ it.xm }}
|
||||
</el-tag>
|
||||
<span class="btns" @click="addUser('ab', index, item.baList)">新增</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</FormMessage>
|
||||
</div>
|
||||
<!-- 选择民警 -->
|
||||
<ChooseUser :roleIds="roleIds" v-model="chooseUserVisible" :Single="false" @choosedUsers="saveUsers"></ChooseUser>
|
||||
<!-- 选择保安 -->
|
||||
<AbIndex :roleIds="roleIds" v-model="chooseAbVisible" @choosedUsers="saveUsers"></AbIndex>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import FormMessage from "@/components/aboutTable/FormMessage.vue";
|
||||
import ChooseUser from "@/components/MyComponents/ChooseUser";
|
||||
import AbIndex from "@/components/MyComponents/ChooseUser/AbIndex.vue";
|
||||
import { getTime } from "@/utils/time.js";
|
||||
import { timeValidate } from "@/utils/tools.js";
|
||||
import { ref, defineProps, reactive, defineEmits, getCurrentInstance } from 'vue';
|
||||
const emit = defineEmits(["refresh"]);
|
||||
const { proxy } = getCurrentInstance();
|
||||
const props = defineProps({
|
||||
dic: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
});
|
||||
const roleIds = ref([]);
|
||||
const chooseType = ref('');
|
||||
const chooseIndex = ref()
|
||||
const chooseAbVisible = ref(false)
|
||||
const chooseUserVisible = ref(false);
|
||||
const dialogForm = ref(false);
|
||||
const title = ref('');
|
||||
const FormRef = ref();
|
||||
const loading = ref(false);
|
||||
const listQuery = ref({
|
||||
xhzq: 0,
|
||||
kssj: timeValidate(new Date(), 'ymd'),
|
||||
qwglRyDtos: []
|
||||
});
|
||||
const rules = reactive({
|
||||
qwmc: [{ required: true, message: "请输入勤务名称", trigger: "blur" }],
|
||||
bxxid: [{ required: true, message: "请选择巡逻路线", trigger: "change" }],
|
||||
kssj: [{ required: true, message: "请选择开始时间", trigger: "change" }],
|
||||
});
|
||||
const formList = reactive([
|
||||
[
|
||||
{ label: "勤务名称", prop: "qwmc", type: "input" },
|
||||
{ label: "巡逻路线", prop: "bxxid", type: "select", options: props.dic.bxxlist },
|
||||
],
|
||||
[
|
||||
{ label: "开始时间", prop: "kssj", type: "date" },
|
||||
{ label: "所属辖区", prop: "ssbmdm", type: "department" },
|
||||
],
|
||||
{ label: "勤务循环周期", prop: "xhzq", type: "number", width: '50%', placeholder: "请输入勤务循环周期" },
|
||||
{ label: "", prop: "", type: "slot" }
|
||||
])
|
||||
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, id) => {
|
||||
dialogForm.value = true;
|
||||
title.value = type == "add" ? "新增" : "编辑";
|
||||
if (id) getDateById(id);
|
||||
};
|
||||
|
||||
// 更根据id获取数据
|
||||
const getDateById = (id) => {
|
||||
qcckGet({ id }, `/mosty-jbld/gdqwgl/selectByid`).then((res) => {
|
||||
let arr1 = handleZz(res.baList, 'baList')
|
||||
let arr2 = handleZz(res.mjList, 'mjList')
|
||||
let list = [...arr1, ...arr2];
|
||||
res.qwglRyDtos = list.reduce((result, obj) => {
|
||||
var target = result.find((item) => item.bcmc === obj.bcmc);
|
||||
target ? Object.assign(target, obj) : result.push(obj);
|
||||
return result;
|
||||
}, []);
|
||||
listQuery.value = res || {};
|
||||
})
|
||||
}
|
||||
// 去重组装数据
|
||||
const handleZz = (val, type) => {
|
||||
let newData = [];
|
||||
val.forEach(item => {
|
||||
let index = newData.findIndex(obj => obj.bcmc === item.bcmc);
|
||||
if (index !== -1) {
|
||||
newData[index][type].push({ id: item.ryid, xm: item.xm });
|
||||
} else {
|
||||
let obj = { bcmc: item.bcmc, qwsj: item.qwsj }
|
||||
obj[type] = [{ id: item.ryid, xm: item.xm }];
|
||||
newData.push(obj);
|
||||
}
|
||||
});
|
||||
return newData;
|
||||
}
|
||||
|
||||
// 选择的用户
|
||||
const addUser = (type, index, arr) => {
|
||||
chooseType.value = type;
|
||||
chooseIndex.value = index;
|
||||
roleIds.value = arr ? arr.map(item => item.id) : [];
|
||||
type == 'mj' ? chooseUserVisible.value = true : chooseAbVisible.value = true;
|
||||
};
|
||||
|
||||
//批量添加用户
|
||||
const saveUsers = (users) => {
|
||||
switch (chooseType.value) {
|
||||
case 'mj':
|
||||
listQuery.value.qwglRyDtos[chooseIndex.value].mjList = users.map(item => {
|
||||
return { id: item.id, xm: item.userName }
|
||||
});
|
||||
break;
|
||||
case 'ab':
|
||||
listQuery.value.qwglRyDtos[chooseIndex.value].baList = users.map(item => {
|
||||
return { id: item.id, xm: item.xm }
|
||||
});
|
||||
break;
|
||||
}
|
||||
};
|
||||
// 处理表单数据变化
|
||||
const handleChange = (data) => {
|
||||
listQuery.value.qwglRyDtos = []
|
||||
if (data.xhzq > 0) {
|
||||
if (!listQuery.value.kssj) return proxy.$message.warning("请选择开始时间");
|
||||
for (let i = 0; i < data.xhzq; i++) {
|
||||
listQuery.value.qwglRyDtos.push({ bcmc: `第${i + 1}班`, qwsj: getTime(i, listQuery.value.kssj), mjList: [], xlba: [] })
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 保存
|
||||
const save = () => {
|
||||
FormRef.value.submit(() => {
|
||||
loading.value = true;
|
||||
let data = { ...listQuery.value }
|
||||
data.qwglRyDtos = data.qwglRyDtos.map(item => {
|
||||
return {
|
||||
bcmc: item.bcmc,
|
||||
qwsj: item.qwsj,
|
||||
mjIds: item.mjList.map(mj => mj.id),
|
||||
baIds: item.baList.map(ba => ba.id)
|
||||
}
|
||||
});
|
||||
let url = title.value == '新增' ? `/mosty-jbld/gdqwgl/add` : `/mosty-jbld/gdqwgl/update`;
|
||||
qcckPost(data, url).then(() => {
|
||||
loading.value = false;
|
||||
proxy.$message.success("保存成功");
|
||||
emit("refresh");
|
||||
close();
|
||||
}).catch(() => {
|
||||
loading.value = false;
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
listQuery.value.qwglRyDtos = [];
|
||||
FormRef.value.reset()
|
||||
};;
|
||||
|
||||
defineExpose({ init })
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/layout.scss";
|
||||
|
||||
.listBox {
|
||||
width: 100%;
|
||||
height: 536px;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
padding: 20px 0 0 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
.el-row {
|
||||
border: 1px solid #e3e7ed;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
::v-deep .el-row-title {
|
||||
border-top: 1px solid #e3e7ed;
|
||||
background: #e3eeff;
|
||||
}
|
||||
|
||||
::v-deep .border {
|
||||
border-left: 1px solid #e3e7ed;
|
||||
border-right: 1px solid #e3e7ed;
|
||||
}
|
||||
|
||||
::v-deep .border1 {
|
||||
border-right: 1px solid #e3e7ed;
|
||||
}
|
||||
|
||||
::v-deep .el-col {
|
||||
padding: 5px 0;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-row {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btns {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
background: #0072ff;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
170
src/views/backOfficeSystem/AlarmLinkage/FixedDuty/index.vue
Normal file
170
src/views/backOfficeSystem/AlarmLinkage/FixedDuty/index.vue
Normal file
@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="固定勤务管理" />
|
||||
<el-button type="primary" @click="addEdit('add', row)">新增</el-button>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount"></Search>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link type="primary" @click="addEdit('edit', row.id)">编辑</el-link>
|
||||
<el-link type="danger" @click="deleteItem(row.id)">删除</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" v-if="show" :dic="{bxxlist}" @refresh="getList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
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 DetailForm from "./components/detailForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance, nextTick } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
const bxxlist = ref([])
|
||||
const show = ref(false);
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
label: "勤务名称",
|
||||
prop: "qwmc",
|
||||
placeholder: "勤务名称",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "所属辖区",
|
||||
prop: "ssbmdm",
|
||||
placeholder: "请选择所属辖区",
|
||||
showType: "department",
|
||||
}
|
||||
]);
|
||||
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 5,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 160,
|
||||
tableColumn: [
|
||||
{ label: "勤务名称", prop: "qwmc" },
|
||||
{ label: "所属辖区", prop: "ssbm" },
|
||||
{ label: "巡逻路线名称", prop: "bxxmc" }
|
||||
]
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
getBxxList()
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
// 搜索
|
||||
const onSearch = (val) => {
|
||||
queryFrom.value = { ...val };
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList();
|
||||
};
|
||||
|
||||
const changeNo = (val) => {
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getList();
|
||||
};
|
||||
const changeSize = (val) => {
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList();
|
||||
};
|
||||
|
||||
// 获取列表
|
||||
const getList = () => {
|
||||
pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
qcckGet(data, "/mosty-jbld/gdqwgl/selectPage").then((res) => {
|
||||
pageData.tableData = res.records || [];
|
||||
pageData.total = res.total;
|
||||
pageData.tableConfiger.loading = false;
|
||||
}).catch(() => {
|
||||
pageData.tableConfiger.loading = false;
|
||||
});
|
||||
};
|
||||
|
||||
// 详情
|
||||
const addEdit = (type, id) => {
|
||||
show.value = true;
|
||||
nextTick(() => {
|
||||
detailDiloag.value.init(type, id);
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
const getBxxList = () => {
|
||||
// 获取巡逻路线列表
|
||||
qcckGet({}, `/mosty-jbld/jbldBxx/selecList`).then((res) => {
|
||||
bxxlist.value = res.map(item => ({ label: item.bxxMc, value: item.id }));
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// 删除
|
||||
const deleteItem = (id) => {
|
||||
proxy.$confirm("确认删除该记录吗?", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning"}).then(() => {
|
||||
qcckPost({id}, "/mosty-jbld/gdqwgl/delete").then((res) => {
|
||||
proxy.$message({ type: "success", message: "删除成功!" });
|
||||
getList();
|
||||
}).catch(() => {
|
||||
pageData.tableConfiger.loading = false;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight =
|
||||
window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user