351 lines
9.2 KiB
Vue
351 lines
9.2 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" :rules="rules" :inline="true" label-position="top">
|
|
<el-form-item style="width: 40%" prop="ssbmdm" label="所属部门">
|
|
<MOSTY.Department width="100%" clearable :disabled="forbidden" v-model="listQuery.ssbmdm"
|
|
:placeholder="listQuery.ssbm ? listQuery.ssbm : '请选择所属部门'" />
|
|
</el-form-item>
|
|
<el-form-item style="width: 40%" prop="jczmc" label="环林卡口名称">
|
|
<el-input :disabled="forbidden" v-model="listQuery.jczmc" placeholder="请输入环林卡口名称" style="width: 100%"
|
|
clearable />
|
|
</el-form-item>
|
|
|
|
<el-form-item style="width: 40%" prop="zqlx" label="执勤类型">
|
|
<el-select :disabled="forbidden" v-model="listQuery.zqlx" placeholder="请选择执勤类型">
|
|
<el-option v-for="dict in dict.D_BZ_ZQLX" :key="dict.value" :value="dict.value"
|
|
:label="dict.label"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item style="width: 40%" prop="jczlx" label="环林卡口类型">
|
|
<el-select :disabled="forbidden" v-model="listQuery.jczlx" placeholder="请选择环林卡口类型">
|
|
<el-option v-for="dict in dict.D_BZ_JCZLX" :key="dict.value" :value="dict.value"
|
|
:label="dict.label"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item style="width: 40%" prop="jczjb" label="环林卡口级别">
|
|
<el-select :disabled="forbidden" v-model="listQuery.jczjb" placeholder="请选择环林卡口级别">
|
|
<el-option v-for="dict in dict.D_BZ_JCZJB" :key="dict.value" :value="dict.value"
|
|
:label="dict.label"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item style="width: 40%" prop="fzr" label="负责人">
|
|
<el-input :disabled="forbidden" v-model="listQuery.fzr" placeholder="请输入负责人" style="width: 100%" clearable />
|
|
</el-form-item>
|
|
<el-form-item style="width: 40%" prop="lxdh" label="联系电话">
|
|
<el-input :disabled="forbidden" v-model="listQuery.lxdh" placeholder="请输入联系电话" style="width: 100%"
|
|
clearable />
|
|
</el-form-item>
|
|
<el-form-item style="width: 40%" prop="dllx" label="道路类型">
|
|
<el-select :disabled="forbidden" v-model="listQuery.dllx" placeholder="请选择道路类型">
|
|
<el-option v-for="dict in dict.D_BZ_DLLX" :key="dict.value" :value="dict.value"
|
|
:label="dict.label"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item style="width: 40%" prop="xxdz" label="环林卡口地址">
|
|
<el-input :disabled="forbidden" v-model="listQuery.xxdz" placeholder="请输入环林卡口地址" style="width: 100%"
|
|
clearable />
|
|
</el-form-item>
|
|
<el-form-item label="示意图(最多3张)" prop="fjid" style="width: 40%">
|
|
<MOSTY.Upload :disableds="forbidden" :isImg="true" width="100%" :limit="3" v-model="listQuery.fjid">
|
|
</MOSTY.Upload>
|
|
</el-form-item>
|
|
<el-form-item label="全景图(正面、侧面、俯视共3张)" prop="qjfjid" style="width: 48%">
|
|
<MOSTY.Upload :disableds="forbidden" width="100%" :isImg="true" :limit="3" v-model="listQuery.qjfjid">
|
|
</MOSTY.Upload>
|
|
</el-form-item>
|
|
<el-form-item style="width: 85%" prop="jd" label="坐标位置">
|
|
<div class="latlng flex">
|
|
<el-input :disabled="true" v-model="listQuery.jd" clearable placeholder="请选择坐标"
|
|
style="width: 42%"></el-input>
|
|
<el-input :disabled="true" v-model="listQuery.wd" clearable placeholder="请选择坐标"
|
|
style="width: 42%; margin-left: 1%"></el-input>
|
|
|
|
<el-button @click="selectLocation" :disabled="forbidden">选择定位</el-button>
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item style="width: 100%">
|
|
<div class="mapbox">
|
|
<GdMap />
|
|
</div>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive, onMounted } from "vue";
|
|
import { JczaddJcz, JczupdateJcz } from "@/api/mosty-jcz.js";
|
|
import * as MOSTY from "@/components/MyComponents/index";
|
|
import emitter from "@/utils/eventBus.js";
|
|
import GdMap from "@/components/GdMap/index.vue";
|
|
import { ElMessage } from "element-plus";
|
|
const props = defineProps({
|
|
dict: {
|
|
type: Object,
|
|
default: () => { }
|
|
}
|
|
});
|
|
const rules = reactive({
|
|
jczmc: [
|
|
{
|
|
required: true,
|
|
message: "请输入检查站名称"
|
|
}
|
|
],
|
|
zqlx: [
|
|
{
|
|
required: true,
|
|
message: "请选择执勤类型",
|
|
trigger: "change"
|
|
}
|
|
],
|
|
jczlx: [
|
|
{
|
|
required: true,
|
|
message: "请选择环林卡口类型",
|
|
trigger: "change"
|
|
}
|
|
], jczjb: [
|
|
{
|
|
required: true,
|
|
message: "请选择环林卡口级别",
|
|
trigger: "change"
|
|
}
|
|
],
|
|
wd: [
|
|
{
|
|
required: true,
|
|
message: "请输入维度"
|
|
}
|
|
],
|
|
jd: [
|
|
{
|
|
required: true,
|
|
message: "请输入经度"
|
|
}
|
|
]
|
|
});
|
|
const formRef = ref(null);
|
|
const emit = defineEmits(["getjczgetXfllList"]);
|
|
const dialogForm = ref(false);
|
|
const listQuery = ref({ fl: "02" });
|
|
const pageInfo = {
|
|
edit: {
|
|
title: "编辑",
|
|
url: ""
|
|
},
|
|
add: {
|
|
title: "新增",
|
|
url: ""
|
|
},
|
|
detail: {
|
|
title: "详情"
|
|
}
|
|
};
|
|
onMounted(() => {
|
|
emitter.on("coordString", (res) => {
|
|
if (res.type === "point") {
|
|
listQuery.value.jd = res.coord[0];
|
|
listQuery.value.wd = res.coord[1];
|
|
chackLat();
|
|
}
|
|
});
|
|
});
|
|
let pageType = ref("add");
|
|
const forbidden = ref(false)
|
|
// 初始化数据
|
|
const init = (type, row) => {
|
|
pageType.value = type;
|
|
dialogForm.value = true;
|
|
// 根据type和row初始化表单数据
|
|
tabHeightFn();
|
|
if (type == "edit" || type == "detail") {
|
|
listQuery.value = { ...row };
|
|
if (type == "detail") {
|
|
forbidden.value = true
|
|
}
|
|
chackLat();
|
|
} else {
|
|
listQuery.value = {};
|
|
}
|
|
};
|
|
//保存
|
|
const _onSave = () => {
|
|
if (!formRef) return;
|
|
formRef.value.validate((valid, fields) => {
|
|
if (valid) {
|
|
if (pageType.value == "add") {
|
|
JczaddJcz(listQuery.value).then((res) => {
|
|
ElMessage({ message: "新增成功", type: "success" });
|
|
emit("getjczgetXfllList");
|
|
close();
|
|
});
|
|
} else {
|
|
JczupdateJcz(listQuery.value).then((res) => {
|
|
ElMessage({ message: "修改成功", type: "success" });
|
|
emit("getjczgetXfllList");
|
|
close();
|
|
});
|
|
}
|
|
} else {
|
|
console.log("error submit!", fields);
|
|
}
|
|
});
|
|
console.log();
|
|
};
|
|
//选择定位地图
|
|
const selectLocation = () => {
|
|
emitter.emit("drawShape", {
|
|
flag: "select_point",
|
|
type: "point",
|
|
isclear: true
|
|
});
|
|
};
|
|
//获取经纬度
|
|
const chackLat = () => {
|
|
const { jd, wd } = listQuery.value;
|
|
console.log(jd, wd);
|
|
|
|
emitter.emit("deletePointArea", "jczMap_Gzy");
|
|
if (jd && wd) {
|
|
setTimeout(() => {
|
|
emitter.emit("addPointArea", {
|
|
coords: [{ jd, wd }],
|
|
icon: require("@/assets/images/bi/gzy.png"),
|
|
flag: "jczMap_Gzy"
|
|
});
|
|
}, 1000);
|
|
}
|
|
};
|
|
// 初始化时展示地图图标
|
|
const mapIcon = (val) => {
|
|
console.log(val);
|
|
|
|
}
|
|
//页面关闭
|
|
const close = () => {
|
|
dialogForm.value = false;
|
|
forbidden.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;
|
|
}
|
|
</style>
|