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>
|