240 lines
8.6 KiB
Vue
240 lines
8.6 KiB
Vue
|
<template>
|
||
|
|
<div class="dialog" v-if="dialogForm">
|
||
|
|
<div class="head_box">
|
||
|
|
<span class="title">{{ title }}</span>
|
||
|
|
<div>
|
||
|
|
<el-button type="primary" size="small" :loading="loading" @click="submit" v-show="!disabledFoem">保存</el-button>
|
||
|
|
<el-button size="small" @click="close">关闭</el-button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<el-form ref="elform" :model="listQuery" :rules="rules" :inline="true" :disabled="disabledFoem" label-position="top">
|
||
|
|
<el-form-item label="所属部门">
|
||
|
|
<MOSTY.Department width="100%" clearable v-model="listQuery.ssbmdm"/>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item prop="jwzLx" label="检查站类型">
|
||
|
|
<el-select v-model="listQuery.jwzLx" placeholder="请选择检查站类型" style="width: 100%">
|
||
|
|
<el-option v-for="(item, index) in D_BZ_JWZLX" :key="index" :label="item.label" :value="item.value"></el-option>
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item prop="xjSj" label="建立时间">
|
||
|
|
<el-date-picker v-model="listQuery.xjSj" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" placeholder="请选择日期" style="width: 100%"/>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item prop="jwzMc" label="检查站名称">
|
||
|
|
<el-input v-model="listQuery.jwzMc" placeholder="请输入检查站名称" clearable style="width: 100%"/>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item prop="jwzjgdm" label="检查站机构代码">
|
||
|
|
<el-input v-model="listQuery.jwzjgdm" placeholder="请输入检查站机构代码" clearable style="width: 100%"/>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item prop="jwzDz" label="检查站详细地址">
|
||
|
|
<el-input v-model="listQuery.jwzDz" placeholder="请输入检查站详细地址" clearable style="width: 100%"/>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item prop="fzrXm" label="负责人">
|
||
|
|
<el-input @click="mjVisible = true" v-model="listQuery.fzrXm" placeholder="请选择负责人姓名" clearable style="width: 100%" />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item prop="fzrSfzh" label="负责人身份证号码">
|
||
|
|
<el-input v-model="listQuery.fzrSfzh" placeholder="请输入负责人身份证号码" clearable style="width: 100%"/>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item prop="snwsp" label="室内外视频">
|
||
|
|
<el-input v-model="listQuery.snwsp" placeholder="请输入" clearable style="width: 100%"/>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item style="width: 100%" prop="upload" label="图片上传">
|
||
|
|
<MOSTY.Upload width="100%" :limit="2" v-model="listQuery.upload" ></MOSTY.Upload>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item class="one" prop="jd" label="坐标位置">
|
||
|
|
<div class="latlng">
|
||
|
|
<el-input v-model="listQuery.jd" clearable style="width: 45%"/>
|
||
|
|
<el-input v-model="listQuery.wd" clearable style="width: 45%"/>
|
||
|
|
<el-button @click="chackLat">选取坐标</el-button>
|
||
|
|
</div>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item class="one">
|
||
|
|
<div class="map"><GdMap v-if="dialogFormVisible" /> </div>
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
<MjLoad :Single="true" v-model="mjVisible" titleValue="选择负责人" @choosedUsers="hanlderChooseMj"/>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import MjLoad from "@/components/MyComponents/ChooseJz/MjLoad.vue";
|
||
|
|
import GdMap from "@/components/GdMap/index.vue";
|
||
|
|
import { qcckGet, qcckPost ,qcckPut} from "@/api/qcckApi.js";
|
||
|
|
import * as MOSTY from "@/components/MyComponents/index";
|
||
|
|
import { IdCard } from "@/utils/validate.js";
|
||
|
|
import { ref,defineExpose, reactive,defineProps,getCurrentInstance ,defineEmits, onMounted} from 'vue';
|
||
|
|
const props = defineProps({
|
||
|
|
dic:{ type:Object, default:{} }
|
||
|
|
})
|
||
|
|
const emits = defineEmits(['updateDate'])
|
||
|
|
const { proxy } = getCurrentInstance();
|
||
|
|
const mjVisible = ref(false); //民警弹窗
|
||
|
|
const validateIdentity = () => {
|
||
|
|
return (rule, value, callback) => {
|
||
|
|
if (!value) {
|
||
|
|
return callback(new Error('身份证号不能为空'));
|
||
|
|
} else if (!/(^\d{15}$)|(^\d{17}(\d|X|x)$)/.test(value)) {
|
||
|
|
callback(new Error("输入的身份证长度或格式错误"));
|
||
|
|
}
|
||
|
|
//身份证城市
|
||
|
|
var aCity = {
|
||
|
|
11: "北京",
|
||
|
|
12: "天津",
|
||
|
|
13: "河北",
|
||
|
|
14: "山西",
|
||
|
|
15: "内蒙古",
|
||
|
|
21: "辽宁",
|
||
|
|
22: "吉林",
|
||
|
|
23: "黑龙江",
|
||
|
|
31: "上海",
|
||
|
|
32: "江苏",
|
||
|
|
33: "浙江",
|
||
|
|
34: "安徽",
|
||
|
|
35: "福建",
|
||
|
|
36: "江西",
|
||
|
|
37: "山东",
|
||
|
|
41: "河南",
|
||
|
|
42: "湖北",
|
||
|
|
43: "湖南",
|
||
|
|
44: "广东",
|
||
|
|
45: "广西",
|
||
|
|
46: "海南",
|
||
|
|
50: "重庆",
|
||
|
|
51: "四川",
|
||
|
|
52: "贵州",
|
||
|
|
53: "云南",
|
||
|
|
54: "西藏",
|
||
|
|
61: "陕西",
|
||
|
|
62: "甘肃",
|
||
|
|
63: "青海",
|
||
|
|
64: "宁夏",
|
||
|
|
65: "新疆",
|
||
|
|
71: "台湾",
|
||
|
|
81: "香港",
|
||
|
|
82: "澳门",
|
||
|
|
91: "国外"
|
||
|
|
};
|
||
|
|
if (!aCity[parseInt(value?.substr(0, 2))]) {
|
||
|
|
callback(new Error("身份证地区非法"));
|
||
|
|
}
|
||
|
|
// 出生日期验证
|
||
|
|
var sBirthday = ( value.substr(6, 4) + "-" + Number(value.substr(10, 2)) + "-" + Number(value.substr(12, 2))).replace(/-/g, "-"),
|
||
|
|
d = new Date(sBirthday);
|
||
|
|
let yyyy = d.getFullYear();
|
||
|
|
let mm = d.getMonth() + 1;
|
||
|
|
let dd = d.getDate();
|
||
|
|
if (sBirthday !== yyyy + "-" + mm + "-" + dd) {
|
||
|
|
listQuery.value.csrq= "";
|
||
|
|
callback(new Error("身份证上的出生日期非法"));
|
||
|
|
} else {
|
||
|
|
let month = mm < 10 ? "0" + mm : mm;
|
||
|
|
listQuery.value.csrq= yyyy + "-" + month + "-" + dd;
|
||
|
|
}
|
||
|
|
// 身份证号码校验
|
||
|
|
var sum = 0,
|
||
|
|
weights = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2],
|
||
|
|
codes = "10X98765432";
|
||
|
|
for (var i = 0; i < value.length - 1; i++) {
|
||
|
|
sum += value[i] * weights[i];
|
||
|
|
}
|
||
|
|
var last = codes[sum % 11]; //计算出来的最后一位身份证号码
|
||
|
|
if (value[value.length - 1] !== last) {
|
||
|
|
listQuery.value.xb = ''
|
||
|
|
callback(new Error("输入的身份证号非法"));
|
||
|
|
} else {
|
||
|
|
listQuery.value.csrq= IdCard(listQuery.value.sfzh,1)
|
||
|
|
if (parseInt(value.substr(16, 1)) % 2 === 1) {
|
||
|
|
listQuery.value.xb = "1";
|
||
|
|
} else {
|
||
|
|
listQuery.value.xb = "2";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
callback();
|
||
|
|
};
|
||
|
|
};
|
||
|
|
const title = ref('新增警务站管理');
|
||
|
|
const disabledFoem = ref(false) //表单禁用
|
||
|
|
const dialogForm = ref(false) //弹窗
|
||
|
|
const listQuery = ref({ fzrSfzh:''}) //表单
|
||
|
|
const loading = ref(false)
|
||
|
|
const elform = ref()
|
||
|
|
const rules = reactive({
|
||
|
|
fzrSfzh: [
|
||
|
|
{ required: true, message: "请输入身份证", trigger: "blur" },
|
||
|
|
{ trigger: "change", validator: validateIdentity()}
|
||
|
|
],
|
||
|
|
fzrXm: [{required: true, message: "请输入负责人姓名"}],
|
||
|
|
jwzLx: [{ required: true, message: "请选择检查站类型"}],
|
||
|
|
ssbmdm: [{required: true, message: "请选择所属部门" }],
|
||
|
|
xjSj: [{ required: true, message: "请选择建立时间" }],
|
||
|
|
jwzMc: [{ required: true, message: "请输入检查站名称"}]
|
||
|
|
})
|
||
|
|
|
||
|
|
onMounted(()=>{
|
||
|
|
emitter.on("coordString", (res) => {
|
||
|
|
if (res.type === "point") {
|
||
|
|
listQuery.value.jd = res.coord[0];
|
||
|
|
listQuery.value.wd = res.coord[1];
|
||
|
|
}
|
||
|
|
});
|
||
|
|
})
|
||
|
|
|
||
|
|
// 初始化数据
|
||
|
|
const init = (type,id)=> {
|
||
|
|
dialogForm.value = true
|
||
|
|
disabledFoem.value = type == 'detail' ? true :false
|
||
|
|
if(id){
|
||
|
|
title.value = type == 'edit'?'修改警务站管理':'警务站管理详情'
|
||
|
|
getDataById(id) //根据id查询详情
|
||
|
|
}else{
|
||
|
|
title.value = '新增警务站管理'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// 根据id查询详情
|
||
|
|
const getDataById = (id)=>{
|
||
|
|
qcckGet({},'/mosty-jmxf/tbJcglXfCyry/'+id).then(res=>{
|
||
|
|
listQuery.value = JSON.parse(JSON.stringify(res))
|
||
|
|
})
|
||
|
|
}
|
||
|
|
// 提交
|
||
|
|
const submit = ()=>{
|
||
|
|
elform.value.validate((valid) => {
|
||
|
|
if (!valid) return false;
|
||
|
|
loading.value = true;
|
||
|
|
if(title.value == '新增警务站管理'){
|
||
|
|
qcckPost(listQuery.value,'/mosty-jmxf/tbJcglXfCyry').then(res=>{
|
||
|
|
proxy.$message({type: "success", message: "新增成功"});
|
||
|
|
close()
|
||
|
|
emits('updateDate')
|
||
|
|
loading.value = false;
|
||
|
|
}).catch(()=>{ loading.value = false; })
|
||
|
|
}else{
|
||
|
|
qcckPut(listQuery.value,'/mosty-jmxf/tbJcglXfCyry').then(res=>{
|
||
|
|
proxy.$message({type: "success", message: "编辑成功"});
|
||
|
|
close()
|
||
|
|
loading.value = false;
|
||
|
|
emits('updateDate')
|
||
|
|
}).catch(()=>{ loading.value = false; })
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
// 关闭
|
||
|
|
const close = ()=>{
|
||
|
|
listQuery.value = { fzrSfzh :''}
|
||
|
|
dialogForm.value = false
|
||
|
|
}
|
||
|
|
|
||
|
|
//获取经纬度 - 圈层范围清空
|
||
|
|
function chackLat(type) {
|
||
|
|
listQuery.value.jd = "";
|
||
|
|
listQuery.value.wd = "";
|
||
|
|
emitter.emit("deletePointArea", "jcz_ht");
|
||
|
|
emitter.emit("drawShape", { type: "point", flag: "jcz_ht" ,isclear:true});
|
||
|
|
}
|
||
|
|
defineExpose({init});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang='scss' scoped>
|
||
|
|
@import "~@/assets/css/layout.scss";
|
||
|
|
@import "~@/assets/css/element-plus.scss";
|
||
|
|
|
||
|
|
</style>
|