421 lines
10 KiB
Vue
421 lines
10 KiB
Vue
<template>
|
|
<div class="dialog" v-if="dialogForm">
|
|
<div class="head_box">
|
|
<span class="title">{{ pageInfo[pageType].title }}</span>
|
|
<div>
|
|
<el-button
|
|
size="small"
|
|
type="primary"
|
|
v-if="['add', 'edit'].includes(pageType)"
|
|
@click="_onSave"
|
|
>保存</el-button
|
|
>
|
|
<el-button size="small" @click="close">关闭</el-button>
|
|
</div>
|
|
</div>
|
|
<div class="cntinfo">
|
|
<el-form
|
|
ref="formRef"
|
|
:model="listQuery"
|
|
:inline="true"
|
|
label-position="top"
|
|
:rules="rules"
|
|
>
|
|
<div
|
|
style="
|
|
width: 25%;
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-bottom: 10px;
|
|
"
|
|
>
|
|
<div style="position: relative; width: 90px; height: 100px">
|
|
<el-upload
|
|
action="/mosty-api/mosty-base/minio/image/upload/id"
|
|
:on-change="upImgFile"
|
|
:on-success="upImg"
|
|
:show-file-list="false"
|
|
>
|
|
<el-image v-if="imgUrl" :src="imgUrl" fit="cover" />
|
|
<el-icon v-else>
|
|
<Plus></Plus>
|
|
</el-icon>
|
|
<span
|
|
v-if="imgUrl"
|
|
style="position: absolute; top: -52px; right: -20px"
|
|
>
|
|
<el-icon size="20" @click.stop="deletImg">
|
|
<Close />
|
|
</el-icon>
|
|
</span>
|
|
</el-upload>
|
|
</div>
|
|
</div>
|
|
<el-form-item style="width: 20%" prop="ssbmdm" label="所属部门">
|
|
<MOSTY.Department
|
|
width="100%"
|
|
clearable
|
|
v-model="listQuery.ssbmdm"
|
|
:placeholder="listQuery.ssbm ? listQuery.ssbm : '请选择所属部门'"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item style="width: 40%" prop="bklb" label="布控类别">
|
|
<el-select v-model="listQuery.bklb" placeholder="请选择布控类别">
|
|
<el-option
|
|
v-for="dict in dict.D_BZ_CLBKLX"
|
|
:key="dict.value"
|
|
:value="dict.value"
|
|
:label="dict.label"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item style="width: 40%" prop="bkcph" label="车牌号">
|
|
<el-input
|
|
v-model="listQuery.bkcph"
|
|
placeholder="请输入布控车辆车牌号"
|
|
style="width: 100%"
|
|
clearable
|
|
/>
|
|
</el-form-item>
|
|
|
|
<el-form-item style="width: 40%" prop="bkkssj" label="开始时间">
|
|
<el-date-picker
|
|
v-model="listQuery.bkkssj"
|
|
type="datetime"
|
|
placeholder="请选中开始时间"
|
|
format="YYYY-MM-DD hh:mm:ss"
|
|
value-format="YYYY-MM-DD hh:mm:ss"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item style="width: 40%" prop="bkjssj" label="结束时间">
|
|
<el-date-picker
|
|
v-model="listQuery.bkjssj"
|
|
type="datetime"
|
|
placeholder="请选中结束时间"
|
|
format="YYYY-MM-DD hh:mm:ss"
|
|
value-format="YYYY-MM-DD hh:mm:ss"
|
|
/>
|
|
</el-form-item>
|
|
|
|
<el-form-item style="width: 40%" prop="bkqy" label="布控区域">
|
|
<el-input
|
|
v-model="listQuery.bkqy"
|
|
placeholder="请输入布控区域"
|
|
style="width: 100%"
|
|
clearable
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item style="width: 40%" prop="bkzt" label="布控状态">
|
|
<el-select v-model="listQuery.bkzt" placeholder="请选择布控状态">
|
|
<el-option
|
|
v-for="dict in dict.D_BZ_RCBKZT"
|
|
:key="dict.value"
|
|
:value="dict.value"
|
|
:label="dict.label"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item style="width: 40%" prop="bkfw" label="布控范围">
|
|
<el-select v-model="listQuery.bkfw" placeholder="请选择布控状态">
|
|
<el-option
|
|
v-for="dict in dict.D_BZ_RCBKFW"
|
|
:key="dict.value"
|
|
:value="dict.value"
|
|
:label="dict.label"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item style="width: 40%" prop="bkczlx" label="布控操作类型">
|
|
<el-input
|
|
v-model="listQuery.bkczlx"
|
|
placeholder="请输入布控区域"
|
|
style="width: 100%"
|
|
clearable
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item style="width: 40%" prop="bkdxtzm" label="布控对象特征码">
|
|
<el-input
|
|
v-model="listQuery.bkdxtzm"
|
|
placeholder="请输入布控区域"
|
|
style="width: 100%"
|
|
clearable
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item style="width: 40%" prop="bkkk" label="布控卡口">
|
|
<div class="diviput" @click="showJcz = true">
|
|
<span v-if="listQuery.bkkk">{{ listQuery.bkkk }}</span>
|
|
<span class="placeholder" v-else> 请选择布控卡口</span>
|
|
</div>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
<Jczloder v-model="showJcz" :Single="true" @choosedJcz="JczMsg" :data="[]" />
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive, onMounted } from "vue";
|
|
import { BkrwinsertEntity, BkrweditEntity } from "@/api/mosty-jcz.js";
|
|
import * as MOSTY from "@/components/MyComponents/index";
|
|
import emitter from "@/utils/eventBus.js";
|
|
import Jczloder from "@/components/loder/Jczloder.vue";
|
|
import GdMap from "@/components/GdMap/index.vue";
|
|
import { ElMessage } from "element-plus";
|
|
const props = defineProps({
|
|
dict: {
|
|
type: Object,
|
|
default: () => {}
|
|
}
|
|
});
|
|
const rules = reactive({
|
|
bkdxtzm: [
|
|
{
|
|
required: true,
|
|
message: "请输入布控对象特征码"
|
|
}
|
|
],
|
|
bkbsm: [
|
|
{
|
|
required: true,
|
|
message: "请输入布控标识码"
|
|
}
|
|
],
|
|
bkkk: [
|
|
{
|
|
required: true,
|
|
message: "请选择布控卡口"
|
|
}
|
|
],
|
|
bkjssj: [
|
|
{
|
|
required: true,
|
|
message: "请选择布控结束时间"
|
|
}
|
|
],
|
|
bkkssj: [
|
|
{
|
|
required: true,
|
|
message: "请选择布控开始时间"
|
|
}
|
|
],
|
|
bkzt: [
|
|
{
|
|
required: true,
|
|
message: "请选择布控状态"
|
|
}
|
|
],
|
|
bkcph: [
|
|
{
|
|
required: true,
|
|
message: "请输入布控车辆车牌号"
|
|
}
|
|
],
|
|
bkqy: [
|
|
{
|
|
required: true,
|
|
message: "请输入布控区域",
|
|
trigger: "change"
|
|
}
|
|
],
|
|
bklb: [
|
|
{
|
|
required: true,
|
|
message: "请输入布控类别",
|
|
trigger: "change"
|
|
}
|
|
],
|
|
bkmc: [
|
|
{
|
|
required: true,
|
|
message: "请输入布控名称"
|
|
}
|
|
]
|
|
});
|
|
const formRef = ref(null);
|
|
const emit = defineEmits(["getjczgetXfllList"]);
|
|
const dialogForm = ref(false);
|
|
const listQuery = ref({});
|
|
const pageInfo = {
|
|
edit: {
|
|
title: "编辑",
|
|
url: ""
|
|
},
|
|
add: {
|
|
title: "新增",
|
|
url: ""
|
|
},
|
|
detail: {
|
|
title: "详情"
|
|
}
|
|
};
|
|
|
|
let pageType = ref("add");
|
|
|
|
// 初始化数据
|
|
const init = (type, row) => {
|
|
pageType.value = type;
|
|
dialogForm.value = true;
|
|
// 根据type和row初始化表单数据
|
|
tabHeightFn();
|
|
if (type == "edit") {
|
|
listQuery.value = { ...row };
|
|
} else {
|
|
listQuery.value = {};
|
|
}
|
|
};
|
|
//保存
|
|
const _onSave = () => {
|
|
if (!formRef) return;
|
|
formRef.value.validate((valid, fields) => {
|
|
if (valid) {
|
|
const promes = { ...listQuery.value, bklx: "02" };
|
|
if (pageType.value == "add") {
|
|
BkrwinsertEntity(promes).then((res) => {
|
|
ElMessage({ message: "新增成功", type: "success" });
|
|
emit("getjczgetXfllList");
|
|
close();
|
|
});
|
|
} else {
|
|
BkrweditEntity(promes).then((res) => {
|
|
ElMessage({ message: "修改成功", type: "success" });
|
|
emit("getjczgetXfllList");
|
|
close();
|
|
});
|
|
}
|
|
} else {
|
|
console.log("error submit!", fields);
|
|
}
|
|
});
|
|
console.log();
|
|
};
|
|
// 图片上传
|
|
const imgUrl = ref();
|
|
const urlImg = "/mosty-api/mosty-base/minio/image/download/";
|
|
const upImg = (row) => {
|
|
listQuery.value.bkzp = row.data;
|
|
imgUrl.value = urlImg.value + row.data;
|
|
};
|
|
|
|
//打开弹窗
|
|
const showJcz = ref(false);
|
|
|
|
const JczMsg = (val) => {
|
|
listQuery.value.bkkk = val.jczmc;
|
|
listQuery.value.kkId = val.id;
|
|
};
|
|
//页面关闭
|
|
const close = () => {
|
|
dialogForm.value = false;
|
|
listQuery.value = {};
|
|
};
|
|
// 表格高度计算
|
|
const tableHeight1 = ref();
|
|
const tabHeightFn = () => {
|
|
tableHeight1.value = window.innerHeight - 450;
|
|
};
|
|
|
|
defineExpose({ init });
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.dialog {
|
|
padding: 20px;
|
|
.head_box {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
.cntinfo {
|
|
height: calc(100% - 70px);
|
|
overflow: hidden;
|
|
overflow-y: auto;
|
|
}
|
|
}
|
|
.my_transfer {
|
|
height: calc(100% - 50px);
|
|
display: flex;
|
|
.btn {
|
|
width: 50px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 10px;
|
|
}
|
|
.left {
|
|
margin: 12px;
|
|
flex: 1;
|
|
position: relative;
|
|
.tableBox {
|
|
position: absolute;
|
|
width: 100%;
|
|
}
|
|
.serch {
|
|
position: relative;
|
|
width: 100%;
|
|
// height: 96px;
|
|
> .el-form--inline {
|
|
display: block;
|
|
width: 100%;
|
|
padding: 0;
|
|
> .el-form-item--default {
|
|
width: 31%;
|
|
}
|
|
}
|
|
}
|
|
.tableBox {
|
|
width: 100%;
|
|
}
|
|
}
|
|
.right {
|
|
width: 380px;
|
|
margin: 12px;
|
|
}
|
|
}
|
|
.phone {
|
|
width: 95px;
|
|
height: 120px;
|
|
.el-image {
|
|
width: 95px;
|
|
max-height: 120px;
|
|
}
|
|
}
|
|
::v-deep .el-upload {
|
|
width: 90px;
|
|
height: 100px;
|
|
border: 1px dashed #000000;
|
|
margin-bottom: 14px;
|
|
.el-icon {
|
|
margin-top: 34px;
|
|
font-size: 26px;
|
|
}
|
|
.el-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.mapbox {
|
|
width: 1000px;
|
|
padding: 0 10px;
|
|
height: 400px;
|
|
box-sizing: border-box;
|
|
background: #000;
|
|
}
|
|
.diviput {
|
|
width: 100%;
|
|
background-color: #ffffff;
|
|
border: 1px solid #c0c4cc;
|
|
color: #000;
|
|
height: 32px;
|
|
line-height: 32px;
|
|
padding: 0 10px;
|
|
border-radius: 5px;
|
|
.placeholder {
|
|
color: #b5b5b5;
|
|
}
|
|
}
|
|
::v-deep .el-icon svg {
|
|
color: #000000 !important;
|
|
}
|
|
</style>
|