124
This commit is contained in:
620
src/views/home/layout/zbbb.vue
Normal file
620
src/views/home/layout/zbbb.vue
Normal file
@ -0,0 +1,620 @@
|
||||
<template>
|
||||
<div></div>
|
||||
|
||||
<div class="cntinfo">
|
||||
<div class="flex align-center just-between box">
|
||||
<div class="flex align-center">
|
||||
报备单位：
|
||||
<MOSTY.Department
|
||||
v-model="listQuery.ssbmdm"
|
||||
placeholder="请选择部门"
|
||||
@getDepValue="changeDep"
|
||||
/>
|
||||
</div>
|
||||
<!-- v-if="['add', 'edit'].includes(pageType)" -->
|
||||
<el-button size="small" type="primary" @click="_onSave">保存</el-button>
|
||||
</div>
|
||||
<el-form
|
||||
ref="formRef"
|
||||
class="info"
|
||||
:model="listQuery"
|
||||
:inline="true"
|
||||
:rules="rules"
|
||||
>
|
||||
<div class="bblxItem">
|
||||
<div class="btItem">检查站设置</div>
|
||||
<div class="info">
|
||||
<el-form-item>
|
||||
<ChooseTable
|
||||
:deptment="deptment"
|
||||
v-if="!isDetail"
|
||||
:configer="{
|
||||
width: 800,
|
||||
lx: 'jcz',
|
||||
isRadio: true
|
||||
}"
|
||||
v-model="listQuery.jczList"
|
||||
:dic="props.dic"
|
||||
/>
|
||||
|
||||
<div class="peolist" v-if="listQuery.jczList">
|
||||
<el-tag type="primary" :key="item">{{
|
||||
listQuery.jczList.jczmc
|
||||
}}</el-tag>
|
||||
</div>
|
||||
<div class="peolist" v-if="listQuery.jczmc && !listQuery.jczList">
|
||||
<el-tag type="primary" :key="item">{{ listQuery.jczmc }}</el-tag>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bblxItem">
|
||||
<div class="btItem">班次设置</div>
|
||||
<div class="info">
|
||||
<el-form-item prop="kssj">
|
||||
<el-time-picker
|
||||
v-model="listQuery.bcKssj"
|
||||
:disabled="isDetail"
|
||||
placeholder="开始时间"
|
||||
format="HH:mm:ss"
|
||||
value-format="HH:mm:ss"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="bcKts">
|
||||
<el-select
|
||||
clearable
|
||||
v-model="listQuery.bcKtsDict"
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in dic.D_QW_BC_KTS"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop="jssj">
|
||||
<el-time-picker
|
||||
v-model="listQuery.bcJssj"
|
||||
:disabled="isDetail"
|
||||
format="HH:mm:ss"
|
||||
placeholder="结束时间"
|
||||
value-format="HH:mm:ss"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bblxItem">
|
||||
<div class="btItem">负责人</div>
|
||||
<div class="info">
|
||||
<el-form-item>
|
||||
<ChooseTable
|
||||
:deptment="deptment"
|
||||
@change="handleFzr"
|
||||
v-if="!isDetail"
|
||||
:configer="{
|
||||
width: 700,
|
||||
lx: 'mj',
|
||||
rowKey: 'id',
|
||||
isRadio: true
|
||||
}"
|
||||
:dic="props.dic"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="fzrXm">
|
||||
<el-input
|
||||
readonly
|
||||
v-model="listQuery.fzrXm"
|
||||
placeholder="负责人"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="fzrSfzh">
|
||||
<el-input
|
||||
readonly
|
||||
v-model="listQuery.fzrSfzh"
|
||||
placeholder="身份证"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="fzrLxdh">
|
||||
<el-input
|
||||
readonly
|
||||
v-model="listQuery.fzrLxdh"
|
||||
placeholder="负责人电话"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bblxItem">
|
||||
<div class="btItem">当班人员</div>
|
||||
<div class="info">
|
||||
<div style="width: 100%">
|
||||
<el-form-item prop="mjData" label="当班民警">
|
||||
<div class="flex">
|
||||
<div class="num">
|
||||
{{ mjData ? mjData.length : 0 }}
|
||||
</div>
|
||||
<ChooseTable
|
||||
:deptment="deptment"
|
||||
v-if="!isDetail"
|
||||
:dic="props.dic"
|
||||
:configer="{
|
||||
lx: 'mj',
|
||||
rowKey: 'ryid',
|
||||
placement: 'top-start'
|
||||
}"
|
||||
v-model="mjData"
|
||||
/>
|
||||
<div class="peolist">
|
||||
<el-tag type="primary" v-for="item in mjData" :key="item">{{
|
||||
item.jlxm || item.xm
|
||||
}}</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div style="width: 100%">
|
||||
<el-form-item prop="fjData" label="当班辅警">
|
||||
<div class="flex">
|
||||
<div class="num">
|
||||
{{ fjData ? fjData.length : 0 }}
|
||||
</div>
|
||||
<!-- :deptment="props.dep"
|
||||
:dic="props.dic" -->
|
||||
<ChooseTable
|
||||
:deptment="deptment"
|
||||
:dic="props.dic"
|
||||
v-if="!isDetail"
|
||||
:configer="{ lx: 'fj', placement: 'top-start' }"
|
||||
v-model="fjData"
|
||||
/>
|
||||
<div class="peolist">
|
||||
<el-tag type="primary" v-for="item in fjData" :key="item">{{
|
||||
item.jlxm || item.xm
|
||||
}}</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bblxItem">
|
||||
<div class="btItem">装备</div>
|
||||
<div class="info">
|
||||
<div style="width: 100%">
|
||||
<el-form-item prop="zdList" label="智能装备">
|
||||
<div class="flex">
|
||||
<div class="num">
|
||||
{{ listQuery.zdList ? listQuery.zdList.length : 0 }}
|
||||
</div>
|
||||
<ChooseTable
|
||||
:dic="props.dic"
|
||||
v-if="!isDetail"
|
||||
:deptment="deptment"
|
||||
:configer="{
|
||||
lx: 'znzb',
|
||||
rowKey: 'id',
|
||||
placement: 'top-start'
|
||||
}"
|
||||
v-model="listQuery.zdList"
|
||||
/>
|
||||
<div class="peolist">
|
||||
<el-tag
|
||||
type="primary"
|
||||
v-for="item in listQuery.zdList"
|
||||
:key="item"
|
||||
>{{ item.sbmc }}</el-tag
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<!-- <div style="width: 100%">
|
||||
<el-form-item prop="jyqxList" label="警用器械">
|
||||
<div class="flex">
|
||||
<div class="num">
|
||||
{{ listQuery.jyqxList ? listQuery.jyqxList.length : 0 }}
|
||||
</div>
|
||||
|
||||
<ChooseTable
|
||||
:deptment="deptment"
|
||||
v-if="!isDetail"
|
||||
:dic="props.dic"
|
||||
:configer="{ lx: 'jyqx', placement: 'top-start' }"
|
||||
v-model="listQuery.jyqxList"
|
||||
/>
|
||||
<div class="peolist">
|
||||
<el-tag
|
||||
type="primary"
|
||||
v-for="item in listQuery.jyqxList"
|
||||
:key="item"
|
||||
>{{ item.qxMc }}</el-tag
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 100%">
|
||||
<el-form-item
|
||||
v-for="(item, idx) in listQuery.jyqxList"
|
||||
:key="idx"
|
||||
:label="item.qxMc"
|
||||
>
|
||||
<el-input-number
|
||||
:disabled="isDetail"
|
||||
style="width: 100%"
|
||||
v-model="item.qxsl"
|
||||
class="mx-4"
|
||||
:min="0"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div> -->
|
||||
<div style="width: 100%">
|
||||
<el-form-item prop="clList" label="巡防车辆">
|
||||
<div class="flex">
|
||||
<div class="num">
|
||||
{{ listQuery.clList ? listQuery.clList.length : 0 }}
|
||||
</div>
|
||||
<ChooseTable
|
||||
:deptment="deptment"
|
||||
v-if="!isDetail"
|
||||
:dic="props.dic"
|
||||
:configer="{
|
||||
lx: 'cl',
|
||||
rowKey: 'id',
|
||||
placement: 'top-start'
|
||||
}"
|
||||
v-model="listQuery.clList"
|
||||
/>
|
||||
<div class="peolist">
|
||||
<el-tag
|
||||
type="primary"
|
||||
v-for="item in listQuery.clList"
|
||||
:key="item"
|
||||
>{{ item.cph }}</el-tag
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bblxItem">
|
||||
<div class="btItem">警用器械</div>
|
||||
<div class="info">
|
||||
<el-form-item>
|
||||
<div
|
||||
v-for="(item, index) in listQuery.qxList"
|
||||
:key="index"
|
||||
style="width: 50%; margin-bottom: 10px"
|
||||
>
|
||||
<div class="flex">
|
||||
<div style="width: 30%">{{ item.qxmc }}：</div>
|
||||
<el-input-number v-model="item.qxsl" :step="1" />
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, getCurrentInstance, onMounted, watch } from "vue";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { jczsavel, Xfbbupdate } from "@/api/mosty-jcz.js";
|
||||
import { ElMessage } from "element-plus";
|
||||
import ChooseTable from "@/components/chooseList/chooseTable.vue";
|
||||
import { timeValidate } from "@/utils/tools.js";
|
||||
const { proxy } = getCurrentInstance();
|
||||
// const { D_BZ_JYQXFL } = proxy.$dict("D_BZ_JYQXFL");
|
||||
const props = defineProps({
|
||||
dic: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
isDetail: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
row: { type: Object, default: () => {} }
|
||||
});
|
||||
|
||||
const emit = defineEmits(["close"]);
|
||||
const formRef = ref(null);
|
||||
const dialogForm = ref(false);
|
||||
const listQuery = ref({});
|
||||
const pageInfo = {
|
||||
edit: {
|
||||
title: "编辑",
|
||||
url: ""
|
||||
},
|
||||
add: {
|
||||
title: "新增",
|
||||
url: ""
|
||||
},
|
||||
detail: {
|
||||
title: "详情"
|
||||
}
|
||||
};
|
||||
let pageType = ref("add");
|
||||
const mjData = ref([]);
|
||||
const fjData = ref([]);
|
||||
const ChegeMj = (val) => {
|
||||
const data = val.map((item) => {
|
||||
return {
|
||||
xfllld: item.id,
|
||||
ryXm: item.xm,
|
||||
rysfzh: item.sfzh,
|
||||
ryJzlx: item.fl,
|
||||
ryMfjilb: item.ryid,
|
||||
ryLxdh: item.lxdh
|
||||
};
|
||||
});
|
||||
return data;
|
||||
};
|
||||
const fz = (val) => {
|
||||
const data = val.map((item) => {
|
||||
return {
|
||||
id: item.xfllld,
|
||||
xm: item.ryXm,
|
||||
sfzh: item.rysfzh,
|
||||
fl: item.ryJzlx,
|
||||
ryid: item.ryMfjilb,
|
||||
lxdh: item.ryLxdh
|
||||
};
|
||||
});
|
||||
return data;
|
||||
};
|
||||
// 初始化数据
|
||||
const init = (type) => {
|
||||
pageType.value = type;
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
console.log(props.row, "=====================================");
|
||||
|
||||
if (props.row) {
|
||||
listQuery.value = { ...props.row };
|
||||
if (props.row.ryList.length > 0) {
|
||||
const data = fz(props.row.ryList);
|
||||
mjData.value = data.filter((item) => item.fl == "01");
|
||||
fjData.value = data.filter((item) => item.fl == "02");
|
||||
}
|
||||
if (listQuery.value.qxList.length == 0) {
|
||||
listQuery.value.qxList = props.dic.D_BZ_JYQXFL.map((item) => {
|
||||
return { qxmc: item.label, qxsl: 0 };
|
||||
});
|
||||
}
|
||||
} else {
|
||||
pageType.value = "add";
|
||||
|
||||
listQuery.value.qxList = props.dic.D_BZ_JYQXFL.map((item) => {
|
||||
return { qxmc: item.label, qxsl: 0 };
|
||||
});
|
||||
}
|
||||
};
|
||||
watch(
|
||||
() => props.row,
|
||||
() => {
|
||||
init();
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
);
|
||||
onMounted(() => {
|
||||
init();
|
||||
});
|
||||
// 验证规则
|
||||
const rules = ref({
|
||||
spbt: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入标题",
|
||||
trigger: "blur"
|
||||
}
|
||||
]
|
||||
});
|
||||
//保存
|
||||
|
||||
const _onSave = () => {
|
||||
const data = [...mjData.value, ...fjData.value];
|
||||
|
||||
listQuery.value.ryList = ChegeMj(data);
|
||||
const time = new Date();
|
||||
listQuery.value.bbSjBbrq = timeValidate(time);
|
||||
switch (listQuery.value.bcKtsDict) {
|
||||
case "01":
|
||||
listQuery.value.bcKts = 1;
|
||||
break;
|
||||
case "02":
|
||||
listQuery.value.bcKts = 2;
|
||||
case "03":
|
||||
listQuery.value.bcKts = 4;
|
||||
case "04":
|
||||
listQuery.value.bcKts = 5;
|
||||
case "05":
|
||||
listQuery.value.bcKts = 6;
|
||||
case "06":
|
||||
listQuery.value.bcKts = 7;
|
||||
case "07":
|
||||
listQuery.value.bcKts = 8;
|
||||
}
|
||||
if (listQuery.value.jczList) {
|
||||
listQuery.value.jczid = listQuery.value.jczList.id;
|
||||
listQuery.value.jczmc = listQuery.value.jczList.jczmc;
|
||||
}
|
||||
|
||||
if (pageType.value == "add") {
|
||||
jczsavel(listQuery.value).then((res) => {
|
||||
ElMessage({ message: "新增成功", type: "success" });
|
||||
emit("close");
|
||||
});
|
||||
} else {
|
||||
Xfbbupdate(listQuery.value).then((res) => {
|
||||
ElMessage({ message: "修改成功", type: "success" });
|
||||
emit("close");
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
//
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
listQuery.value = {};
|
||||
};
|
||||
|
||||
//获取数据
|
||||
const JczShow = ref(false);
|
||||
//负责人
|
||||
const handleFzr = (val) => {
|
||||
listQuery.value.fzrXm = val.xm;
|
||||
listQuery.value.fzrId = val.ryid;
|
||||
listQuery.value.fzrSfzh = val.sfzh;
|
||||
listQuery.value.fzrLxdh = val.lxdh;
|
||||
};
|
||||
const deptment = ref({});
|
||||
const changeDep = (val) => {
|
||||
deptment.value = val;
|
||||
};
|
||||
const changeJCZ = (val) => {
|
||||
console.log(val);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
|
||||
.file {
|
||||
height: 400px;
|
||||
border: 1px solid #e9e9e9;
|
||||
// border-radius: ;
|
||||
color: #777575;
|
||||
// border-left: 0;
|
||||
}
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
background-color: #f7fafb;
|
||||
padding: 0px 8px;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
border: 1px solid #e3e7ed;
|
||||
}
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo {
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
.bblxItem {
|
||||
width: 100%;
|
||||
line-height: 40px;
|
||||
min-height: 40px;
|
||||
display: flex;
|
||||
color: #000;
|
||||
.btItem {
|
||||
width: 180px;
|
||||
padding: 7px 0;
|
||||
background: #0000000a;
|
||||
margin-top: 1px;
|
||||
text-align: center;
|
||||
}
|
||||
.info {
|
||||
flex: 1;
|
||||
background: #0000000a;
|
||||
margin-top: 1px;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
.gapline {
|
||||
height: 1px;
|
||||
border-top: 1px dashed #66cbff;
|
||||
margin: 4px 0;
|
||||
}
|
||||
.dl-car {
|
||||
min-width: 200px;
|
||||
display: inline-block;
|
||||
border: solid 1px #66cbff;
|
||||
margin: 20px 30px 0 0;
|
||||
padding: 0;
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
dt {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: #0380c0;
|
||||
padding: 0 10px 0 40px;
|
||||
box-sizing: border-box;
|
||||
font-weight: 600;
|
||||
box-sizing: border-box;
|
||||
border-bottom: solid 1px #66cbff;
|
||||
background: #e3f5ff;
|
||||
height: 30px;
|
||||
border-radius: 5px 5px 0 0;
|
||||
}
|
||||
.peo {
|
||||
border-bottom: solid 1px #01d608;
|
||||
background: #dbf3cf;
|
||||
color: #339d00;
|
||||
}
|
||||
}
|
||||
.dl-car::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: -18px;
|
||||
left: -18px;
|
||||
width: 52px;
|
||||
height: 49px;
|
||||
background: url("~@/assets/images/peo.png");
|
||||
}
|
||||
}
|
||||
.num {
|
||||
width: 50px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
border: 1px solid #bebebe;
|
||||
// background-color: #1b294c;
|
||||
border-radius: 4px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.subBtn {
|
||||
padding-left: 100px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-form-item--default {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
::v-deep .el-form-item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
::v-deep .el-form--inline .el-form-item {
|
||||
margin-right: 20px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.deBtn {
|
||||
padding: 0px 10px;
|
||||
background: rgb(35, 176, 241);
|
||||
border-radius: 18px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
.box {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user