621 lines
16 KiB
Vue
621 lines
16 KiB
Vue
<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>
|