XXXX项目技术学习文档
1.项目依赖
"dependencies": {
"@antv/g6": "^4.3.6", //数据可视化图表
"@jiaminghi/bezier-curve": "^0.0.9", //这是一个提供如下几个方法的三次贝塞尔曲线插件。
"@jiaminghi/c-render": "^0.4.3", //它是一个基于canvas的矢量图形渲染插件。
"@jiaminghi/color": "^0.1.1", //这是一个颜色插件。
"async-validator": "^3.5.1", //element-ui的组件
"bpmn-js": "^7.2.0", //实现流程图设计器的一个库
"clipboard": "^2.0.4", //操作剪贴板实现点击复制地址等功能
"dom-to-image": "^2.6.0", //实现截图，图片转换的功能的一个插件
"el-tree-transfer": "^2.4.7", //element-ui树形组件
"element-resize-detector": "^1.2.3", //页面大小适应插件
"file-saver": "^2.0.1", //导出各种文件的插件，比如Excel
"font-awesome": "^4.7.0", //生成icon，还有加载效果
"fzui-vue": "^1.1.2", //
"html2canvas": "^1.4.1", //将Dom元素生成清晰的图片并分享
"js-md5": "^0.7.3", //加密插件
"moment": "^2.29.1", //日期处理插件，可方便快捷的对日期进行相应处理
"mui-player": "^1.6.0", //视频播放处理
"mui-player-desktop-plugin": "^1.4.2", //视频播放处理
"nprogress": "^0.2.0", //路由加载时进度条
"q": "^1.5.1", //promise的替代
"qrcodejs2": "^0.0.2", //生成二维码并实现实时刷新
"qs": "^6.7.0", //嵌套支持的查询字符串解析器
"resize-observer-polyfill": "^1.5.1", //实现DOM调整大小监听和移除监听
"sortablejs": "^1.15.0", //一个拖拽库，可以实现拖拽排序
"strophe.js": "^1.4.1", //能够实现即时通讯功能
"throttle-debounce": "^3.0.1", //防抖节流插件
"v-viewer": "^1.4.2", //实现图片预览，旋转，缩放，切换
"viewerjs": "^1.2.0", //强大的图片查看器，实现图片预览，旋转，缩放，切换
"vue-contextmenujs": "^1.3.12", //右键菜单插件
"vue-cookies": "^1.5.13", //前端cookie插件
"vue-cropper": "^0.4.9", //对图片实现图片裁剪
"vue-grid-layout": "2.1.12", //可以对页面进行拖拽的网格系统实现工具
"vue-runtime-helpers": "^1.1.2", //用于注入样式和规范化组件的可重用助手。
"vue-seamless-scroll": "^1.1.23", //实现无缝滚动的组件
"wl-core": "^1.1.9", //
"xmldom": "^0.6.0" //
}
2.Common对象
1.跳转
//MplManage.vue文件
//forward（当前的this对象，跳转路径，需要传递的参数对象，上方选项卡对应tab名称，res资源对象，跳转命令）
Common.forward(
this,
path,
{ id, dzmc, xtLrsj, xtLrrxm },
"装户图详情",
{
resUrl: path,//当前模块的ul
moduleType: 0,/模块的类型
hostLabel: that.hostPrefix,//资源域名别名
routerType: 0,//路由模式: 0 同级单开 1 同级多开 2 跨级单开 3 跨级多开
routerLevel: 1,//路由类型: 0 标签页/嵌套 1 独立窗口
cached: true,//页面缓存,默认true
});
//ZhtLdDetails.vue
//在这个页面中通过common.getActivePageStack（）的到当前路由对象，可以通过解构赋值的到路由跳转携带的参数和数据
//在拿到对应数据之后，可以通过拿到的数据（id,name等）发送查询请求，拿到页面初始化所需要的数据（比如listdata）
//拿到初始化数据之后，如果是不需要实时刷新的数据，可以将其存放在localstorage或sessionstroage中
//this的传递，在这个场景中函数内部的this指向其调用对象
mounted() {
const { params: { id, dzmc, flag, xtLrsj , xtLrrxm} = {} } = Common.getActivePageStack();
this.xtLrsj = xtLrsj;
this.xtLrrxm = xtLrrxm;
this.mldzid = id;
this.jdmc = dzmc;
this.flag = flag;
// 因地图未好，暂时屏蔽标点功能
// this.getMapCenter();
this.getZhtData(true);//获取庄户图数据
this.getHjdzInfo();
this.getBaseCensus();
}
2.请求
//此处以ZhtLdDetails.vue这个文件来举例
/*Common.httoRequest({
url:接口地址，
method:请求方式，默认为post,
params:post请求参数，
success：({data})=>{请求成功过后的操作},
fail:()=>{}请求失败的操作
})
*/
Common.httpRequest({
url: `/bzdzAddChdzdxb/getTree?mldzid=${mldzid}`,
method: "get",
success({ data }) {
const { code, rows } = data;
that.loading = false;
if (code == 200 && rows && rows.length > 0) {
that.buildList = that.dealWithBuildData(rows);
if(freshAll){
that.dealMplData(rows[0]);
}else{
let tempList = rows.filter(item => item.id == tempBuild);
that.dealMplData(tempList[0]);
}
that.getZhtUserData();
}
},
fail() {
that.loading = true;
}
});
3.页面通用流程
1.mounted（）
1.从登陆界面开始，通过Common.httpRequest（）发送请求，经过Common.forward()跳转传参，在mounted或者created生命周期中通过common.getActivePageStack()获取到跳转所传参数，这样就可以根据id或者其他唯一数据发送请求查询所需数据
4.常用通用组件
1.DialogInfo
1.用法
先引入组件
import DialogInfo from "../../components/DialogInfo/DialogInfo";
在components中注册组件
export default {
components: { DialogInfo}
}
最后就可以使用该组件了
<dialog-info
:visible="visible" //控制弹窗出现消失
:title="dialogTitle"//弹出框头部标题
width="800px" //弹出框宽度
align="center" //字体位置
onOkText="保存" //确定按钮的文字内容
:modalAppendToBody="false"//弹窗的遮罩层是否添加到body中，为false的话，遮罩层会添加到弹窗组件的父元素节点
:appendToBody="true"//弹窗是否添加到body中，当存在弹窗嵌套时，这个属性要为true
@onOk="handleInsert"//需要实现一个handleInsert方法，表示用户点击确定过后的代码
@onCancel="visible = false"//点击取消，弹窗消失
>
<template slot="content"></template> //具名插槽，可以选择插槽部分html结构出现在弹窗里的位置
</dialog-info>
2.实现原理
2.dialogexport
1.用法
<DialogExport
:dialogExport="dialogExport" //要导出数据的url，弹出框标题名等
:checkeOptions="checkeOptions" //弹窗显示的复选框框组
:checkedExport="checkedExport"//选择要导出的数据
@handleChange="exportClick"//复选框组绑定的数据发生变化时的回调
@onClose="exportClose"
@onConfirm="exportConfirm"
></DialogExport>
2.原理
在dialogexport内部，将传入的checkOptions进行遍历，然后将选中的复选框的lable放入checklst，在确认事件中再将checklist进行遍历，将key和text分别给textarr和keyarr,再通过判断当前dialogexport的tabkey来控制请求参数和请求的路径，然后发送请求，当请求回来之后，通过blob将返回回来的参数在实例化时传入new blob()，并将第二个参数设为application/vnd.ms-excel，然后生成一个dom，给其绑点下载事件并调用点击方法，最后下载后，移除该dom，关闭弹窗
html结构
<template>
<el-dialog
:visible="dialogExport.visible"
:width="dialogExport.width || '840px'"
class="info-dialog dialogExport"
:close-on-click-modal="false"
:append-to-body="true">
<div slot="title" class="info-dialog-title">
{{dialogExport.title}}
<i class="el-icon-close" style="float:right;cursor: pointer;" @click="onClose" />
</div>
<div class="dialog-file-wrapper">
<div class="checkBox">
<el-checkbox class="checkAll" :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAll">全选</el-checkbox>
<el-checkbox-group class="checkCont" v-model="checkedList" @change="handleChange">
<el-checkbox v-for="item in checkeOptions" :label="item" :key="item.key">{{item.text}}</el-checkbox>
</el-checkbox-group>
</div>
<div class="checkTip"><i class="el-icon-info" style="margin-right: 5px;"></i>请勾选需要导出的数据项</div>
</div>
<div style="text-align:center">
<el-button @click.prevent="onClose">取消</el-button>
<el-button type='primary' @click.prevent="onConfirm" :loading="loading">确定</el-button>
</div>
</el-dialog>
</template>
下载文件代码
Common.httpRequest({
url: that.dialogExport.host+lastUrl,
method: "POST",
responseType: "blob",
params: params,
success: function (res) {
if (res.status == 200) {
const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' });
const linkNode = document.createElement('a');
linkNode.style.display = 'none';
linkNode.href = URL.createObjectURL(blob);
linkNode.download = that.dialogExport.tabName+'信息表';
document.body.appendChild(linkNode);
linkNode.click();
URL.revokeObjectURL(linkNode.href);
document.body.removeChild(linkNode);
that.$emit('onConfirm')
that.onClose();
}
that.loading = false;
},
fail:function (data) {
that.loading = false;
},
})
3.AsyncSelect
使用方法：
在使用组件时，可以向组件内部动态传入以下值
<AsyncSelect
:value="unit.dwsfsw"//选项的值
dict="BD_D_SFDM"//字典名
:host="host"//基础地址
style="width:100%" //宽度
:disabled="!isEditing" //是否可编辑
@change="value => (unit.dwsfsw = value)" 选择过后的事件方法
/>
原理：
asyncselect的原理是，在组件内部，mounted生命周期内，通过传入组件的值的不同来选择不同方式获取optionlist，如果当前有传入url则直接发送请求到该地址，将请求回来的数据解构赋给opitionlist，如果当前传递的是dictionary、，则通过common.getdictdatabylable，传入字典名，this、回调方法，如果传入的是opitionlist，那么直接将传入的opitionlist赋给opitionlist
4.BzdzSolr
使用方法：
在使用组件时可以向其中传以下参数
<bzdz-solr
:data="addDwdzData"
textKey="dwdzDzmc"
solrType="sydw"//必传
menuUrl="/sydw/sydwManage"
style="width: 100%"
@change="changeAddDwdz"
/>
原理：
在组件内部给el-input绑定了一个input事件方法，querySolrData，在这个方法内部，首先判断当前输入框是否输入了值，如果有输入，通过判断传入的solrType的值，来给url和params赋相应的值，然后在发送请求，得到rows后把它赋给searchData，然后给div、列表绑定点击事件，将data.dzmc赋给val然后清空searchData、将data、传递给父组件。
5.FormHighSearch
使用方法：
在使用组件的时候可以向其中传入一下参数
<form-high-search
v-if="inited && highSearch"
:style="{ height: mapHeight + 'px' }"
:highFormConfig="getHighFormConfig()"//高级搜索的配置项，每一项必填type（input，cascader等）
@reset="handleReset"
@search="handleSearch"
@close="highSearch = false"
></form-high-search>
原理：
在该组件内部还有一个dataform组件，在这个组件内部是一个el-form，通过v-for，对传入的highformconfig进行遍历，在通过v-if判断highformconfig的每一项的子项的type值，如果为input、asyncselect，cascader等，最后将其遍历出来，然后点击搜索按钮就会通过this.$emit一层一层将表单数据formvalue传递出来，最后再将其作为参数，发送查询请求，得到返回的数据，更新table表单数据
6.FormMultiSearch
使用方法：
在组件传入以下参数
<form-multi-search
:formConfig="formConfig" //formconfig是控制selectFormItem的每个下拉框选项对应右边输入框的类型的
:highFormConfig="highFormConfig"//控制dataForm高级搜索的配置数据
@search="handleSearch"//搜索按钮的点击方法
@reset="handleReset"//重置方法
>
原理：
formMultiSearch的原理和highformsearch的原理有部分类似，再两者内部都使用了dataform来控制高级搜索部分，在formmultisearch中，还使用了selectformitem组件，在其内部是有一个下拉框，select-opition的值由formconfig遍历而来，然后将左边下拉框选中的数据设为当前数据，通过v-if判断当前数据的type来渲染不同的输入框组件
7.LimitInut
使用方法：
在组件内部传入以下参数
// 此组件主要目的是对正整数和小数的输入限制
// 当传入的inputType为int时表示只能输入正整数，默认可以输入小数
// 当传入的append为true时表示输入框有后缀，必须同时传入后缀单位appendStr
<limit-input
:value="newMplData.lds"//当前的输入框绑定的值
:maxlength="3"//输入框最大长度
:min="1"//输入数据最小长度
style="width: 98%"// css属性，设置宽度
@input="(value) => (newMplData.lds = value)"
/>
原理：
在组件内部通过传入的最小值，给el-input绑定input事件,当输入了值，并且当前传入了inputtype为int，此时会通过replace和正则表达式来将不满足条件的输入值变为‘’，如果传入了最小值，那么就会在input事件方法中，进行判断，当输入了值，并且输入的值是否小于最小值，如果小于最小值，那么久将最小值赋给this.val
8.LimitTimePicker
使用方法：
在组件内部传入以下参数
<limit-time-picker
:value="jnUserSyrk.csrq"
dateType="date"
style="width: 100%"
:disabled="!jnUserSyrk.zjhm || jnAdd.repeartSuc"
@change="(value) => (jnUserSyrk.csrq = value)"
/>
原理：
在组件内部实际上是使用了elementui的eldatepicker组件，在该组件内部，limitfuture的值默认为true，在data中定义pickeropition并动态绑定到eldatepicker的picker-opition属性上，在pickeropition内部，定义了selecttablerange方法，此方法会return一个返回值，上面是限制的时间，disabledate方法，会有一个参数，是当前选中的日期，然后会判断当前日期是否可选，判断逻辑如下,当limitture为true时，当当前选择时间大于现在的时间的时候该日期是禁用状态，当设置了limitbefore和limitafter时会禁用不满足条件的日期
disabledDate: (time) => {
if(that.limitBefore && that.limitAfter) {
return time.getTime() <= new Date(that.limitBefore).getTime() - 8.64e7 || time.getTime() >= new Date(that.limitAfter).getTime();
}else if(that.limitBefore && that.limitAfter == "") {
if(that.limitFuture){
return time.getTime() <= new Date(that.limitBefore).getTime() - 8.64e7 || time.getTime() >= Date.now();
}else{
return time.getTime() <= new Date(that.limitBefore).getTime() - 8.64e7;
}
}else if(that.limitBefore == "" && that.limitAfter) {
return time.getTime() >= new Date(that.limitAfter).getTime();
}else{
if(that.limitFuture){
return time.getTime() >= Date.now();
}else{
return false;
}
}
}
9.peopleprotect
使用方法：
在组件内部传入以下参数
10.DialogFile
使用方法：
先给DialogFile的dialogUpload传入一个对象，再在触发DialogFile组件的按钮上改变dialogUpload的visible，
<DialogFile
ref="dialogUpload"
:dialogUpload="dialogUpload"
@onClose="confirmDialogUpload"
@onConfirm="confirmDialogUpload"
></DialogFile>
<!-- dialogUpload: {
visible: false,
fileNum: 2,
fileTypeLabel: 'syrkZp',
fileTypeXxb: 'ry_ryjbxxb',
host: SeuSysDict.sys_host.syrkPath,
id:'',
isEcho: true,
isCanDelete: true
}, -->
源码与原理：
组件内部使用监听属性监听visible的状态，当visible的状态发生改变时，判断传入的dialogUpload.isEcho的值为真还是假，如果支持回显，则调用getFileList()方法发送请求，获取当前的文件列表，然后把拿到的rows赋给echoImage，如果不支持回显，则将文件的上传列表通过clearFiles（）清空，在初始化完成过后，由于是个，上传功能是通过el-upload这个组件来实现的，首先给el-upload的on-change事件绑定fileChange方法，在方法内部判断是否回显，如果支持回显，那么
<template>
<el-dialog
:visible="dialogUpload.visible"
:width="dialogUpload.width || '860px'"
class="info-dialog"
:close-on-click-modal="false"
:append-to-body="true"
>
<div slot="title" class="info-dialog-title">
上传图片
<i
class="el-icon-close"
style="float:right;cursor: pointer;"
@click="onClose"
/>
</div>
<div class="dialog-file-wrapper">
<div class="file-item" v-for="(item, index) in echoImages" :key="index">
<el-image
:src="item.fileUrl || item.url"
fit="cover"
style="width: 145px;height: 169px;"
/>
<div class="file-btns" v-if="item.fileId || item.url">
<span @click="preViewImage(item)">预览</span>
<span
@click="handleDelete(item, index)"
v-show="isDeleteShow(item.fileId) && dialogUpload.isCanDelete"
>删除</span
>
</div>
</div>
<el-upload
ref="fileUpload"
list-type="picture"
:on-change="fileChange"
:show-file-list="false"
:auto-upload="false"
action=""
accept=".JPG, .PNG, .JPEG,.jpg, .png, .jpeg"
>
<img
:src="require('../../assets/icon_upload.png')"
v-if="
echoImages.length < dialogUpload.fileNum && dialogUpload.isCanDelete
"
/>
</el-upload>
</div>
<div style="text-align:center">
<el-button @click.prevent="onConfirm">确定</el-button>
</div>
<dialog-info
:visible="viewImage.visible"
title="图片预览"
@onCancel="viewImage.visible = false"
width="60%"
:appendToBody="true"
>
<template v-slot:content>
<div class="prew-wrapper">
<img :src="viewImage.fileUrl || viewImage.url" />
</div>
</template>
<template v-slot:footer>
<div />
</template>
</dialog-info>
</el-dialog>
</template>
11.FlwsFlowCreator
使用方法：
<flow-creator ref="flowCreator" />
12.ProcessHandler
使用方法：
5.util公共方法
1.getPageDataAfterDict
使用方法：
getPageDataAfterDict.call(this, this.queryAlarmInfo, this.queryListCfData);
原理及代码：
在此方法内部，会将被call改变指向的this中的dict取出来，并通过Object.keys进行遍历，将dict的key值取出来并通过common.getDictDataByLabel发送请求，将请求回来的字典数据赋给dict，然后再将由回调函数构成的argument数组进行遍历，然后依次执行回调函数
export function getPageDataAfterDict(){
//获取字典数据后获取数据
const that = this;
let p = [];
Object.keys(this.dict).forEach(key => {
let p1 = new Promise((resolve,reject) => {
Common.getDictDataByLabel(
key,
rows => {
that.dict[key] = rows.map(item => ({
text: item.itemName,
value: item.itemValue
}));
resolve();
},
that
);
})
p.push(p1);
});
Promise.all(p).then(res => {
for(let i of arguments){
if(i instanceof Array){
let f = i.shift();
f(...i);
}else{
if(typeof i === 'function'){
i();
}
}
}
},res =>{
for(let i of arguments){
if(i instanceof Array){
let f = i.shift();
f(...i);
}else{
i();
}
}
})
}
2.scrollToErrorFormItem
使用方法:
that.$refs.alarm.validate((valid, errorObject) => {
console.log(errorObject)
const errorKeys = Object.keys(errorObject);
if (errorKeys.length) {
scrollToErrorFormItem(errorKeys[0]);
return;
}
原理及核心代码：
用于表单验证，常常搭配validate方法配合使用
/** 表单校验-页面滚动至表单错误处 */
export function scrollToErrorFormItem(key){
// 使用jQuery 通过label获取对应的formItem
const dom = $('label[for="'+ key +'"]');
if(dom){
dom[0].scrollIntoView({
block: 'start',
behavior: 'smooth'
})
}
}
3.flwsUtil.editFlws
使用方法：
flwsUtils.editFlws(
that,
"jcj",
{
title: data.rows[0].asjflwsmc,
asjbh: that.alarm.jqbh,
flwsBM: data.rows[0].flwsAsjflwsdm,
cqbgZj: data.rows[0].xxzjbh,
},
this.callback,
"请先完成文书"
);
原理及核心代码：
调用此方法传入当前this，系统名，params（json { title:(tab标题,必填), asjbh:(案事件编号,必填), flwsBM:(法律文书编号,必填), cqbgZj:(呈请报告主键,可选) } { title:(tab标题,必填), asjbh:(案事件编号,必填), cqbgBM:(呈请报告编号,必填), cqbgZj:(呈请报告主键,可选) }），回调方法，msg （当误切换父页面时的提示信息），传入参数过后在editFlws方法内部，会根据参数的传递情况，给url不同的值，然后调用openIframe方法，在此方法内部实质上就是一个common.forward
，将处理好的参数，传入此方法，就可以跳转到对应文书页面了。
function editFlws(that, system, params, callback, msg) {
params.system = system;
let pathConfig = getPathConfig();
let url;
if (params.url) {
if (params.url.endsWith('.static')) {
params.url = params.url.substr(0, params.url.lastIndexOf('.static'));
}
if (!params.url.startsWith('/')) {
params.url = '/' + params.url;
}
url = params.url;
} else {
url = '/html/flws/flwsMain.html';
}
if (params && params.title && params.asjbh && params.flwsBM) {
url = pathConfig.localhost + '/static/flws/' + system + url + makeParams(params, {
flwsBM: 'FLWS_BM'
});
} else if (params && params.title && params.asjbh && params.cqbgBM) {
url = pathConfig.localhost + '/static/flws/' + system + url + makeParams(params, {
cqbgBM: 'CQBG_BM'
});
} else {
console.log(params)
that.$message({message: "缺少必要参数", type: "error"});
return;
}
openIframe(that, url, params.title, callback, msg);
}
//这是openIframe函数的代码
/*
function openIframe(that, url, title, callback, msg) {
if (callback) {
Common.forward(that, url, {}, title, {
cached: true,
moduleType: "2",
routerLevel: "0"
}, 'fixedTo', callback, msg);
} else {
Common.forward(that, url, {}, title, {
cached: true,
moduleType: "2",
routerLevel: "0"
});
}
}
*/
4.openJzPage
使用方法：
openJzPage(this.asjbh, type, "xsaj")
原理及代码：
通过传入的案事件编号，操作类型，案件类型，打开对应的网址，如下所示
export const openJzPage = (asjbh, type, ajlx) => {
window.open(
`${SeuSysDict.sys_host.jzglPath}/dzzw/#/web/${type}?asjbh=${asjbh
}&ajlx=${ajlx}`
);
}
5.copyToClip
使用方法：
copyToClip(this.bh, this);
原理及代码：
首先创建一个input输入框，然后设置输入框的value为传入的content，将input添加到body中，然后利用input.select（）方法选中content，执行document.execCommand(“copy”)，复制到剪贴板，然后销毁刚刚创建的input，使用this.$message给出提示信息，复制成功。
export function copyToClip(content, that) {
var aux = document.createElement("input");
aux.setAttribute("value", content);
aux.style.position = "absolute";
document.body.appendChild(aux);
aux.select();
document.execCommand("copy");
document.body.removeChild(aux);
that.$message({
type: "info",
message: "复制成功"
});
}
一标三实模块
1.标准地址
地名管理
this.$root 获取根节点的实例
代码理解
这个页面中有一个地图组件，一个高级搜索组件，一个对话框组件，一个分页组件
实现功能：高级搜索，地名编辑，地名新增
计算各个组件所占宽高
computed: {
//获取当前页面的高度
pageHeight() {
return getViewContentHeight(this);
},
//计算地图组件的高度
mapHeight() {
return this.pageHeight + 30;
},
//计算列表组件的高度
tableListHeight() {
const newBtnHeight = 28;新增按钮的高度
const searchHeight = 42;查找组件的高度
const paddingHeight = 8;内边距
const paginationHeight = 58;分页部分的高度
return (
this.pageHeight -
newBtnHeight -
searchHeight -
paddingHeight -
paginationHeight
);
}
},
各个组件使用及原理
dialoginfo
在地名管理中的使用
<dialog-info
:visible="visible" //控制是否显示的标志符
:title="dialogTitle" //弹窗标题
width="800px" //宽度
align="center" //字体对齐方式
onOkText="保存" //确认按钮所显示的字体
@onOk="handleInsert" //当点击确定按钮时绑定的回调方法
@onCancel="visible = false"//点击取消时关闭弹窗
>
// 其他属性：
//:close-on-click-modal="false" 点击遮罩层是否可以关闭弹窗
//:modal-append-to-body="modalAppendToBody" 遮罩层是否插入body标签
//:append-to-body="appendToBody" 弹窗是否插入body
formHighSearch
<form-high-search
v-if="inited && highSearch"
:style="{ height: mapHeight + 'px'}"
:highFormConfig="getHighFormConfig()" //获取配置数据 数据格式如下
@reset="handleReset" //重置事件的回调方法
@search="handleSearch" //搜索事件的回调
@close="highSearch=false" //关闭搜索表单
></form-high-search>
highFormConfig数据格式
[
{
name: "xzqhdm",
label: "行政区划", //表单标题名字
type: "cascader", //表单类型，此处是多级次联菜单
options: this.xzqhOptions, //el-cascader的下拉选项菜单
colSpan: 24
},
{
name: "xtLrrxm",
label: "录入人姓名",
type: "input",
colSpan: 24
},
{
name: "xtZhxgsj",
label: "维护时间",
type: "rangeDatePicker",
keys: ["xtZhxgsj", "xtZhxgsjend"],
colSpan: 24
},
{
name: "xtZhxgrxm",
label: "维护人姓名",
type: "input",
colSpan: 24
},
// {
// name: "xtZhxgrbmid",
// label: "维护人部门",
// type: "departTree",
// colSpan: 24,
// deleteVisible: true
// },
{
name: "pcsdm",
label: "管辖单位",
type: "cascader",
options: this.gagxOption,
colSpan: 24,
}
]
原理
在highFormSearch组件内部，固定了表头样式以及标题，然后在内容部分插入了dataForm组件，向这个组件内部传入highFormConfig，然后在这个组件内部对highFormConfig进行遍历，遍历每一行，通过v-if判断当前配置项的type来显示不同的组件或内容
功能
新增街路巷
给按钮绑定点击事件，绑定方法openAddWin(),在此方法内部设置visable为true，dialogtitle为新增街路巷，将newJlxData除dzlx之外的数据初始化，然后在dialog里面填写表单，填写完毕后，点击保存，在给dialoginfo绑定的onOk事件中，会对当前的dialogtitle进行判断，如果当前的dialogtitle为新增街路巷的话，那么url就为新增街路巷的请求地址，然后将newJlxData作为参数，发送请求，
编辑街路巷
给el-table绑定data=‘tableData’，在初始化的时候将tableData请求回来，然后通过el-table-column的porp属性指明tableData的某一字段作为指定字段，然后通过在其内部绑定slot-scope=scope，将scope.row传入编辑按钮的点击方法中，在conducecase方法中，发送请求获取该街路巷的详情，并将其内部的字段解构，然后赋给newJlxData，然后设置dialogtitle为编辑街路巷，在dialoginfo绑定的onok方法中，将newJlxData作为参数，请求更新街路巷的接口，
搜索街路巷
搜索街路巷时，先给搜索的输入框通过v-model属性绑定searchText属性，然后在handlesearch方法中，首先会进行判断，判断是不是高级搜索，如果不是高级搜索的话再判断里面是否输入了街路巷名称，如果输入了，就将此时的this.params={dzmc:searchText},然后使用queryDataList（）方法重新获取列表数据，并在queryListData方法内部重置分页插件的数据和tableData
高级搜索街路巷
通过form-high-search这个组件实现高级搜索功能，点击高级搜索按钮时，highSearch的值变为true，此时高级搜索框出现在窗口右侧，通过绑定style属性设置高度
<form-high-search
v-if="inited && highSearch"
:style="{ height: mapHeight + 'px'}"
:highFormConfig="getHighFormConfig()"
@reset="handleReset"
@search="handleSearch"
@close="highSearch=false"
></form-high-search>
绑定确认取消和重置事件的方法，handleReset方法中将分页参数初始化，重新获取列表，handleSearch方法中，将子组件的参数value通过this.$emit传递给父组件，此时将this.params={…value}然后在调用queryListData方法，重新获取列表数据
门牌楼管理
代码理解
组件：
FormHighSearch
<form-high-search
v-if="inited && highSearch"
:style="{ height: mapHeight + 'px' }"
:highFormConfig="getHighFormConfig()"
@reset="handleReset"
@search="handleSearch"
@close="highSearch = false"
></form-high-search>
AsyncSelect
<el-row>
<el-form-item label="街路巷名称">
<AsyncSelect
:value="editMplData.jlxmc"
dict="GA_D_DWFLDM"
:host="host"
style="width: 98%"
disabled
/>
</el-form-item>
</el-row>
<el-row>
<el-form-item label="门牌号">
<el-input
v-model="editMplData.dzbh"
style="width: 60%"
disabled
/>
<AsyncSelect
:value="editMplData.dzhzlx"
:optionList="allHzOptionList"
style="width: 36%"
disabled
/>
</el-form-item>
</el-row>
BzdzSolr
在组件内部会通过v-model给el-input绑定val，当触发input事件时，调用querySolrData方法，在querySolrData方法内部，会先判断，当前的输入框是否有值，如果有，打开loading标识，进一步判断当前的solrType，然后给params和url赋不同的值来发送请求，获取到searchData，再根据v-for将searchData遍历到elinput下方的div中，给el-input绑定blur事件，当失去焦点的时候，searchData清空。
<el-row>
<el-form-item label="街路巷名称" prop="jlxid">
<bzdz-solr
:data="newMplData"
textKey="jlxmc"
dzjb="2"
:xzqhdm="newMplData.xzqhdm"
solrType="bzdz"
menuUrl="/bzdz/mplManage"
style="width: 98%"
@change="changeJlx"
/>
</el-form-item>
</el-row>
<div class="search-input">
<bzdz-solr
:data="queryParams"
textKey="dzmc"
solrType="mpl"
menuUrl="/bzdz/mplManage"
@change="changeQueryMldz"
style="width: 100%"
placeholder="请输入门牌楼名称"
/>
<el-button
icon="el-icon-search"
type="primary"
@click="handleSearch()"
></el-button>
<el-button @click="showHighSearch">高级搜索</el-button>
</div>
LimitInput
<el-row>
<el-form-item label="楼栋数" prop="lds">
<limit-input
:value="newMplData.lds"
:maxlength="3"
:min="1"
style="width: 98%"
@input="(value) => (newMplData.lds = value)"
/>
</el-form-item>
</el-row>
AreaCascader
<el-row>
<el-form-item label="行政区划">
<area-cascader
dict="GB_D_XZQHDM"
:host="host"
v-model="editMplData.xzqhdm"
style="width: 98%"
disabled
></area-cascader>
</el-form-item>
</el-row>
功能：
新增门牌号
当点击新增按钮时，curState的值变为1，此时新增表单就会显示（使用v-if判断curState的值来显示不同的组件），把newMplData和newMplRoules动态绑定到el-form的modle属性和roules属性中，在点击新增按钮过后，首先会通过this.$refs.newmpl.validate（）来验证当前填写的表单有没有通过newMplRoules的表单规则
this.$refs.newMpl.validate((valid) => {
if (!valid) {
return;
}
然后会判断地址别名那里有没有漏写，判断newMplData.dzbms的数组长度并且循环判空
let isNull = false;
if (this.newMplData.dzbms.length > 1) {
this.newMplData.dzbms.forEach((item) => {
if (item.dzsc === "") {
isNull = true;
}
});
}
if (isNull) {
this.$message({
message: "请完善地址别名",
type: "warning",
});
return;
}
然后判断当新增的地址是否有庄户图，当dslist和dxlist的长度不同时为0，或者它们的长度为3时，此时isNullZht为false，有庄户图信息就可以进行下一步，此时会将newMplData进行处理后作为请求参数发送请求，当请求成功时会，将返回回来的数据放在addInfo中，并通过common.forward传递到下次跳转到庄户图详情页面，到这一步就完成了门牌号新增功能
et isNullZht = false;
const { dsDys, dsLcs, dsZdhs, dxDys, dxLcs, dxZdhs } = this.newMplData;
let dsList = [dsDys, dsLcs, dsZdhs];
let dxList = [dxDys, dxLcs, dxZdhs];
dsList = dsList.filter((item) => item);
dxList = dxList.filter((item) => item);
if (dsList.length == 0 && dxList.length == 0) {
isNullZht = true;
} else {
if (dsList.length > 0 && dsList.length < 3) {
isNullZht = true;
}
if (dxList.length > 0 && dxList.length < 3) {
isNullZht = true;
}
}
if (isNullZht) {
this.$message({
message: "请正确填写装户信息",
type: "warning",
});
return;
}
编辑门牌号
由于门牌号编辑表单是由el-form组件绑定了editMplData，然后其每一行的输入框或者选择框分别使用v-model或者传入：value绑定了editMplData每一条数据里的一个属性，当点击编辑门牌号按钮过后，会通过传进来的scope.rows，得到mlddzid，然后通过这个id发送请求，查询此门牌号的详细信息，将其更新到editMplData上，由于编辑门牌楼表单要显示需满足curState=2的条件，所以让curState=2，，随后将请求回来的zbx和zby赋给当前的经纬度变量，通过changeZrqdm方法实现地图标点
that.tempLongitude = entity.zbx; //经度
that.tempLatitude = entity.zby; //纬度
that.curState = "2"; //控制切换的标识符
that.changeZrqdm(zrqdm, false); //在地图上重新标点当前位置
changeZrqdm(value, isAdd){
if(isAdd){
this.newMplData.zrqdm = value;
}
this.$refs.mapComponent.clearMphMarker();
this.$refs.mapComponent.clearAllPolygon();
this.$refs.mapComponent.markZoneBoundary(false, value);
if(!isAdd){
let position = new EzCoord(this.tempLongitude, this.tempLatitude);
this.$refs.mapComponent.moveCenterAndZoom(position, 15);
}
},
搜索门牌号
搜索门牌号使用了BzdzSolr组件，给组件传入data和textKey，当输入框改变的时候，在改变输入框值得过程中，组件内部会触发input事件，执行querySolrData方法，根据传入的menuUrl和solrType发送不同的请求，然后将返回的rows进行处理，放入searchData中，再通过v-for将每一条数据的item.textKey遍历到页面中去，然后将改变后的数据，通过this.$emit(‘change’,data)，传递到父组件，父组件中，当接收到子组件传过来的值后，会将改变后的值赋给this.queryParams,然后搜索的时候会用queryParams当做请求参数，发送请求得到目标数据，再将目标数据遍历到列表中，这样就实现了门牌号搜索
在搜索方法中，首先会判断是否有传参，在bzdzSlor中，由于是在组件内部通过emit传递改变后的参数change事件的回调方法中，再在这个方法中将当前的queryData给更新，最后点击搜索按钮时，是没有往handleSearch方法中传参数的
handleSearch(values) {
this.page = 1;
if (values) {
this.isHighSearch = true;
this.params = values;
this.queryDataList();
} else {
this.isHighSearch = false;
this.params = {};
if (this.queryParams.dzid) {
this.params = {
dzid: this.queryParams.dzid,
dzmc: this.queryParams.dzmc,
};
}
this.queryDataList();
}
},
注销门牌号
注销门牌号会首先进行判断，判断当前所传的type是否为watch，如果不为watch，会出现一个提示框，在提示框的确认按钮绑带点击事件的方法，然后会跳转到注销地址页面，在注销地址页面，会在mounted生命周期内判断当前路由所传参数，在门牌楼管理点击注销之后，在logoutProcess页面会做如下操作，通过传递过来的id和dzid和dzjb来发送请求获取到当前要注销的地址，并将dzmc渲染到页面上，然后当点击注销按钮时，会发送注销请求，将传过来的dzid和dzjb作为请求参数发送请求，在请求成功后，弹出提示信息，注销成功，并且调用common.callback(that,null)方法回到上一页面，并执行上一页面传入的回调函数，更新门牌楼管理的列表数据
注销按钮的点击事件的方法
logoutMpl(data, type) {
if (type == "watch") {
const that = this;
const path = "/bzdz/addressManage/logout";
let id = data.rwId;
let dzid = data.dzid;
Common.forward(
that,
path,
{ id, dzid },
"地址注销",
{
resUrl: path,
moduleType: 0,
resMode: 3,
hostLabel: that.hostPrefix,
routerType: 0,
routerLevel: 1,
cached: true,
},
"fixedTo",//控制页面跳转到下一个页面后需要等待回调方法执行才能点击
() => {
that.queryDataList();
}
);
} else {
this.curItem = data;
this.deleteVisible = true;
}
},
注销确认弹窗绑定的方法
confirmDeleteMpl() {
const that = this;
Common.httpRequest({
url: `/bzdzDeleteValidateTask/insert`,
params: {
dzid: this.curItem.dzid,
dzjb: "3",
},
success({ data }) {
const { code, rows } = data;
if (code == 200) {
that.queryDataList();
const { id, dzid } = rows ? rows[0] : {};
const path = "/bzdz/addressManage/logout";
Common.forward(
that,
path,
{ id, dzid },
"地址注销",
{
resUrl: path,
moduleType: 0,
resMode: 3,
hostLabel: that.hostPrefix,
routerType: 0,
routerLevel: 1,
cached: true,
},
"fixedTo",
() => {
that.queryDataList();
}
);
}
that.deleteVisible = false;
},
fail() {
that.deleteVisible = false;
},
});
},
高级搜索
高级搜索使用的是highformsearch这个组件，根据当前业务需求，给组件传递以下参数，
getHighFormConfig() {
return [
{
name: "xtLrsj",
label: "采集时间",
type: "rangeDatePicker",
keys: ["xtLrsj", "xtLrsjend"],
colSpan: 24,
},
{
name: "jzdDzxz",
label: "门牌楼名称",
type: "inputSolr",
solrType: "mpl",
menuUrl: "/bzdz/mplManage",
colSpan: 24,
},
{
name: "dzbm",
label: "地址别名",
type: "input",
colSpan: 24,
},
{
name: "orgcode",
label: "管辖单位",
type: "select",
optionList: this.gxdwList,
selectType: "object",
colSpan: 24,
},
{
name: "xtZxbz",
label: "注销状态",
type: "select",
dict: "BD_D_ZTZXBZ",
colSpan: 24,
},
];
},
传入各个属性如下：
<form-high-search
v-if="inited && highSearch"
:style="{ height: mapHeight + 'px' }"
:highFormConfig="getHighFormConfig()"
@reset="handleReset"
@search="handleSearch"
@close="highSearch = false"
></form-high-search>
实现reset和search事件方法
在reset事件中重置了当前的页数以及当前的搜索参数params，然后重新使用queryDataList（）方法发送请求，重新获取列表数据
在serch事件的回调方法中，接收到highformsearch组件内部传递的value并将其结构赋值给this.params。此时再通过queryDataList（）获取数据
查看别名变更记录表
在编辑表单中，给眼睛那个img设置一个点击方法，方法内部让变更记录表弹窗的可见标识符为true然后以当前editData.dzid和sie,page作为请求参数发送请求发送请求获取record，在拿到record后，将record.tabledata绑定到el-table的data中，在每一列的对应位置渲染出地址别名，变更时间和注销状态，
地址注销
标准地址中层户详情的业务逻辑理解以及代码难点
1.在mounted中通过跳转传参拿到门牌楼的id，根据id发送请求，得到ZhtData
mounted() {
const { params: { id, dzmc, flag, xtLrsj , xtLrrxm} = {} } = Common.getActivePageStack();
this.xtLrsj = xtLrsj;
this.xtLrrxm = xtLrrxm;
this.mldzid = id;
this.jdmc = dzmc;
this.flag = flag;
// 因地图未好，暂时屏蔽标点功能
// this.getMapCenter();
this.getZhtData(true);//获庄户图数据
this.getHjdzInfo();
this.getBaseCensus();
}
2.后端请求回来的数据格式为
{
code: 200
rows: [{…}]
time: "2022-12-07 09:06:45"
total: 1
}
3.rows里面的数据字段为
rows:[
{
dzbh: "1" //地址编号
dzjb: "4" //地址级别
dzmc: "1栋" //地址名称
dzqc: "辽宁省大连市西岗区李敏1222号1栋"
dzwz: "0"
id: "8dd3826ab94d4ed5917415c4cfacb3fb"
ldChildren: {bzdzUpList: Array(1)}
parentid: "f375f4fa57fc4440956d4460e5f91243"
xtLrrxm: "人民路一" 系统录入人姓名
xtLrsj: "2022-11-25 09:55:31"
xtZxbz: "0" //系统注销标志 为0表示注销
},
]
4.ldChildren里面的字段
bzdzUpList: [
{
children:[
{
children：[
{
children:[]
dzbh: "1"
dzjb: "7"
dzmc: "1-1-1"
dzqc: "辽宁省大连市西岗区李敏1222号1栋1-1-1"
dzwz: "0"
id: "73c2069d96314d82908cc68a0bae28fe"
ldChildren: {bzdzUpList: Array(1)}
parentid: "fff4ccd102ba49ddb3d19d87b2c953d1"
xtLrrxm: "人民路一"
xtLrsj:"2022-11-25 09:55:31"
xtZxbz: "0"
}
]
dzbh: "1"
dzjb: "6"
dzmc: "1楼"
dzqc: "辽宁省大连市西岗区李敏1222号1栋1单元1楼"
dzwz: "0"
id: "73c2069d96314d82908cc68a0bae28fe"
ldChildren: {bzdzUpList: Array(1)}
parentid: "f3bc82d58bd24134a209690713375893"
xtLrrxm: "人民路一"
xtLrsj: "2022-11-25 09:55:31"
xtZxbz: "0"
}
]
dzbh: "1" //地址编号
dzjb: "5" //地址级别
dzmc: "1单元" //地址名称
dzqc: "辽宁省大连市西岗区李敏1222号1栋1单元"
dzwz: "0"
id: "f3bc82d58bd24134a209690713375893"
ldChildren: {}
parentid: "8dd3826ab94d4ed5917415c4cfacb3fb"
xtLrrxm: "人民路一"
xtLrsj: "2022-11-25 09:55:31"
xtZxbz: 0 //系统注销标志
}
]
地址注销规则
在庄户图页面，当点击修改按钮，进入修改状态下，对地址进行注销时，遵守以下规则
条件1：要使该地址能够出现注销标识，首先要满足的一个点就是，这个地址是当前层数的最后一个地址（比如4楼有十户人，那么此时的地址就应该为4-10）
条件2：在满足条件1的情况下，如果此时的地址所处楼层是当前楼栋最高楼层，那么此时可以选择注销该层
条件3：在满足条件1的情况下，如果此时的单元数是当前楼栋的最大单元数，则当前单元的每一层的最后一户都会出现注销该单元选项
条件4：在满足条件1的情况下，每个小区或者院落的最后一栋楼的每一个单元的中的每一层的最后一户的地址会出现注销此楼栋选项
庄户图的新增，快速定位
在新增时，代码逻辑与注销逻辑相反，从前到后，且要判断当前地址，当前楼层，当前单元，当前楼栋有没有被注销，在这个前提下，再来进行对应的操作
在快速定位上时，由于每一个户地址都是通过zhtData遍历而来，那么在通过v-for遍历的同时，给对应的庄户地址单元绑定动态id，然后通过传入点击事件回调方法place，在该点击回调方法中，通过document.queryselector（·#${place.id}·）来获取该dom节点，然后给该节点加上一个ativempl类名，同时还会计算当前的地址在不在可视范围之内，然后获取到庄户图滑动的那个盒子，获得它的dom元素，并通过dom.scroll（{left：，top：，behavior：}）来控制当前庄户图页面滚动，通过计算当前需要定位户地址在屏幕上所在的width来与当前的scrollwidth进行比较，当前的scrollwidth和width哪个大就滑动哪个的距离，
执法办案模块
接处警
1.业务梳理
当指挥中心或者派出所民警接到报警电话或者其他方式的报警信息时，首先在询问基本的警情情况，然后指挥中心派发附近派出所民警出警，在出警途中，会全程对出警民警进行督促引导，同时获取对应信息，填写接警信息，在民警出警结束过后，填写处警信息，对警情进行判断案件类型，然后进行分流（移交送审），最后审核完毕，该警情就结束了，而会新增一条刑事案件信息或者行政案件信息，在刑事案件办理模块可以对案件进行办理（确定是否可立案）
对应页面上
在警情办理页面，接到电话应该有一个新增警情按钮，控制一个表单弹窗，在表单中应该要做正则验证，除此之外在新增完成后应该获取最新数据，到此新增警情完成，然后在新增完成过后可以在更新后的表单上找到刚刚新增的那条警情数据，然后可以对警情进行处警登记，填写对应的处警信息表单，然后可以再下方填写更多附加信息
如果110指挥中心接警过后
谁是接警人，谁就进行接处警登记，谁就对警情进行定性吗？
2.代码梳理
过程中遇到的问题
1.MultiFormSearch组件，在这个组件中固定了与屏幕右边的间隔，如果在弹框中使用该组件，那么该组件的定位参照元素仍然是屏幕，会显得不美观
解决方案1
给组件传入一个paddingRight属性，在组件内部如图
使得与右边的距离可调节
解决方案2
将high-search-wrapper的position从fixed改为absolute
DealAlarm页面
新增警情
给新增按钮绑定一个点击事件，在此点击事件的方法中，跳转到下一个新增警情页面，同时设置页面回调方法，在新增警情页面表单填完点击提交按钮过后，提交按钮的点击事件方法中，在发送请求成功的前提下会出现提示框，如果点击确定就给type传一个bc，不然就传qs，然后会执行警情办理页面的回调方法，重新获取警情办理页面的表单数据和字典数据，然后判断type，当type为bc时，跳转到dispatchingAlarm页面,当type不为bc时不进行跳转，此时警情新增功能已经实现
刷新功能
给刷新按钮绑定一个点击事件方法，在这个点击事件方法中，将this.param，this.page等初始化，然后调用queryListAllData（）查询最新数据，渲染到table中
导出功能
导出功能主要是依靠dialogExport这个组件，在这个组件当中传入dialogExport、checkOption，在组件内部，会对checkOpition进行遍历，将其渲染成复选框，再将给每个复选框绑定select事件，将选中的数据，push到checkOptionList中，然后当点击导出按钮是，其点击方法中，将checkOpitionlist用object.key遍历将key和value分别取出放入keyArr和valArr，然后作为params发送请求，请求回来的是一个blob对象，然后创建一个a标签，实例化一个blob对象，将请求回来的blob对象和下载文件的类型传入，然后使用createObjectUrl方法将刚刚实例化的对象转换成url，然后将创建的a标签的href指向刚刚的url，然后将此a标签append到body中，调用此标签的点击方法，然后销毁此a标签的href指向，remove这个a标签，到此导出功能就完成了
搜索功能
搜索功能主要是通过MultiFormSearch这个组件来完成
难点分析
这个页面的难点主要是列表的操作按钮部分，具体的实现方法如下，首先，在data中定义BUTTON_TYPES，然后再发送请求获取列表数据，在获取列表数据过后将数据作为参数传入dealWithListData进行处理，在这个方法内部，会将传入的数据进行遍历，再将BUTTON_TYPES进行遍历，如果满足condition（item）的子项就将其push进btnArray中，然后将btnArray的第一个取出赋给btnObject的first属性，将其他的赋给other属性，然后将btnObject赋给tableData，然后在列表中将按钮渲染
DispatchingAlarm页面
接警信息处警信息切换
给两个span标签绑定点击事件，通过控制active的值来控制是否给class加active类名，然后控制当前的component动态组件的is=currentTabComponent，完成动态组件的切换，到此完成接处警信息切换，
下方选项卡切换
选项卡切换是通过el-tabs，将每个 el-tab-pane放入对应的子组件，到此实现选项卡切换
查看操作日志
给按钮绑定点击事件，跳转到操作日志界面
送审功能
给送审按钮绑定 submitCensorship方法，在此方法内部使用flwsUtils.editFlws来跳转到受案编辑表页面，然后设置页面回调方法，代码如下
sendToReview() {
const that = this;
const loading = that.$loading();
Common.httpRequest({
url: "/tbJqJdCjjlb/querySingleByEntity",
data: { jqbg: that.alarm.jqbh, jqId: that.alarm.jqId, sfzzclqk: "1" },
success: ({ data }) => {
loading.close();
if (data && data.rows && data.rows[0] && data.rows[0].id) {
if (!that.alarm.jjdwGajgjgdm) {
that.$message({ type: "error", message: "未指定接警单位" });
return;
}
if (!that.alarm.jqcljg) {
that.$message({ type: "error", message: "未指定警情处理结果" });
return;
}
//if (that.markInfo.markValue != "2" && that.markInfo.markValue != "3") {
// that.$message({ type: "error", message: "未标注事发地址" });
// return;
//}
if (that.alarm.jqcljg === "01" || that.alarm.jqcljg === "02") {
flwsUtils.editFlws(
that,
"jcj",
{
asjbh: that.alarm.jqbh,
cqbgBM: "J010001",
title: "受案登记表",
},
(ok) => {
if (ok) {
Common.callback(that);
}
},
"请先完成文书"
);
} else {
that.$refs.flowCreator.create({
orgCode: that.alarm.jjdwGajgjgdm,
flwsDm: "J900000",
processName: "警情-" + that.alarm.jqmc,
processData: {
cqsj: Common.dateFormat(new Date()),
asjbh: that.alarm.jqbh,
ajmc: that.alarm.jqmc,
jqId: that.alarm.jqId,
jqbh: that.alarm.jqbh,
cqbgBM: "J900000",
xtLrrbm: localStorage.getItem("userOrg")
? JSON.parse(localStorage.getItem("userOrg")).orgname
: "",
},
callback: (ok) => {
if (ok) {
that.$message({
type: "success",
message: "警情移交送审成功，请联系审批人及时处理！",
});
Common.callback(that);
}
},
});
}
} else {
that.$message({
message: "未查询到最终处警结果信息，可在下方处警记录中进行操作",
type: "warning",
});
}
},
fail: () => {
loading.close();
},
});
}
制作笔录功能
通过flwsUtils.editFlws，填入相应的文书编号跳转到相应的文书界面（用jquery写的界面可以暂时不看）
makeNote() {
flwsUtils.editFlws(
this,
"jcj",
{
title: "询问笔录",
asjbh: this.alarm.jqbh,
flwsBM: "J041301",
url: "html/blgl/bl_manage.html.static",
ajmc: this.alarm.jqmc,
},
(ok) => {
if (ok) {
Common.callback(this);
}
}
);
},
现场调解功能
给按钮绑定点击方法，触发点击事件时，根据alarm.jqbh发送请求查询最新警情信息，然后判断回来的数据总数total是否为0，从而设置flwsUtils.editFlws跳转的不同参数，然后跳转到对应文书页面
const that = this;
const loading = that.$loading();
Common.httpRequest({
url: "/tbJqJdxxb/getXctjxys",
data: { jqbh: that.alarm.jqbh },
success: ({ data }) => {
console.log(data)
loading.close();
if (data.total != "0") {
flwsUtils.editFlws(
that,
"jcj",
{
title: data.rows[0].asjflwsmc,
asjbh: that.alarm.jqbh,
flwsBM: data.rows[0].flwsAsjflwsdm,
cqbgZj: data.rows[0].xxzjbh,
},
this.callback,
"请先完成文书"
);
} else {
flwsUtils.editFlws(
that,
"jcj",
{
title: "现场治安调解协议书",
asjbh: that.alarm.jqbh,
flwsBM: "J010005",
},
function () {
const { params: { id, jqbh, disabled } = {} } =
Common.getActivePageStack();
that.id = id;
that.jqbh = jqbh;
that.inited = false;
that.$nextTick(() => (this.inited = true));
that.disabled = disabled;
}
);
}
},
fail: () => {
loading.close();
},
});
},
接回执功能
给按钮绑定handleJbhz点击方法，通过flwsUtils.editFlws跳转对应文书页面
handleJbhz() {
flwsUtils.editFlws(
this,
"jcj",
{
title: "接（报）回执",
asjbh: this.alarm.jqbh,
flwsBM: "J010011",
},
function () {
const { params: { id, jqbh, disabled } = {} } =
Common.getActivePageStack();
this.id = id;
this.jqbh = jqbh;
this.inited = false;
this.$nextTick(() => (this.inited = true));
this.disabled = disabled;
}
);
},
设置无效警情
当点击无效警情时，将弹窗的可见标识符设置为true，弹窗此时状态为可见，然后点击弹窗的确认按钮，会通过vildate（）进行表单验证，当验证通过时，会发送请求，当请求成功时，利用this.$message弹出成功信息，并且使用common.callback（）回到DealAlarm页面执行回调方法
设置重复警情
当点击重复警情时，出现弹窗，dialogInfo组件的content插槽内插入了一个FormMultiSearch组件，一个el-table，一个分页组件，然后给确认按钮绑定点击事件，如果此时勾选了数据，出现弹窗，与设置无效警情流程相同
保存接警信息
点击保存接警信息时，触发点击方法saveAlarm（）在此方法中首先会通过validate（）方法进行整个表单的验证，然后根据validate方法的第二个参数errObject，将其进行遍历，然后用公共方法scrollToErrorFormItem滑动到表单验证未通过验证的地方，然后判断
RelativePeople组件
搜索相关人员功能
给搜索按钮绑定点击事件，在点击方法中，将rows，等分页参数，以及input输入框的姓名，asjbh作为参数传入方法，发送请求，在得到返回数据时，会根据返回值的asjxgryjsbh（案事件相关人员角色编号），更新人员列表。
新增相关人员功能
给新增按钮添加点击事件，事件被触发时，将jqbh，jqid等作为请求参数，然后通过判断dispatchingAlarm页面中给组件传入status的值进一步处理请求参数，处理完成后，使用common.forward跳转，并且添加回调方法，使页面回调触发时重新获取相关人员信息
修改相关人员功能
给修改按钮添加点击事件，并将people传入方法，然后将people，jqbh，jqid等作为请求参数，同时也添加回调方法刷新人员数据，跳转到newRelativePeople页面，然后此时可以在newRelativePeople页面修改人员信息，修改完成后点击保存，则将数据更新，同时调用common.callback（）回到dispatchingAlarm页面刷新相关人员数据
删除人员功能
点击删除按钮过后，控制弹窗出现，然后填入删除原因，给onOk事件绑定方法，在方法中使用vaildate（）方法进行表单验证，当验证通过，发送请求删除相关人员，最后刷新相关人员列表，获取更新后的数据。
NewRelativePeople页面
在mounted（）中，将路由跳转携带的参数取出，根据传入的status值判断当前是否可以操作表单和保存按钮是否显示，根据curUser可以控制表单的数据是否自动填入，在初始化工作完成过后，点击保存按钮时，会先使用vaildate方法进行表单校验，当校验通过时，再进一步判断当前的人员编号，如果是编辑状态，编号应该会自动填入，如果是新增状态，那么人员编号为空，此时可以根据是否存在人员编号，来确定发送请求的url，然后将请求参数进行处理过后，发送请求，通知执行common.callback方法执行回调，重新获取相关人员列表数据。
MatirealManage组件
在mounted（）中，拿到props参数，然后判断是否可编辑，然后传入jqbh和jqid以及分页参数，发送请求获取列表数据再遍历到页面上，点击新增按钮，弹窗显示，给onOK事件绑定方法，当确认事件触发后，发送新增请求，请求成功过后，跳转到Matireal页面，点击修改按钮，会将scope.row.id传入方法内部，然后在方法内部，判断status的值，然后跳转到Matireal页面，当点击注销按钮时，使用this.$confirm提示是否注销按钮，然后点击确定发送注销请求，完成注销，批量注销也是一样，先友好提示，然后把选中行的id作为请求参数，调用注销接口实现批量注销
MatirealManage页面
初始化
在初始化时，通过传递过来的id，请求得到材料信息和材料文件列表，
上传功能
点击上传按钮，使用的是el-upload，给该组件绑定http-request事件方法handleUplaodImage，然后在handleUplaodImage中发送请求，在新增成功过后，执行querylist方法，重新获取文件列表数据，
保存功能
点击保存按钮后，先对表单使用vaildate方法进行校验，校验通过后发送更新请求，然后执行common.callback（）回到dispatchingAlarm页面，
删除列表查看
点击已删除列表按钮，获取发送请求获取已删除材料列表，然后打开dialoginfo可见标识符，然后在dialog中将deleteFoleLIst遍历出来
预览功能
由于每个文件都是通过v-for遍历出来的，所以在方法中可以传一个file，然后在方法内部，将这个file作为跳转参数跳转到TabComponent页面，在TabComponent页面中，将跳转参数中的file拿出来给img、标签动态绑定属性:src=“data:image/png;base64,${file.nr}”
注销功能
点击注销，使用this.$confirm给予友好提示，在确认时，将file.id作为参数发送请求删除该材料
DispatchRecordManage组件
初始化
通过props拿到父组件传递的jqbh、jqid、status，在mounted中调用querylist方法获取列表数据，
新增处警记录
点击新增按钮把dialoginfo中的el-form表单绑定的数据初始化，然后打开弹窗可见标识，然后在弹窗的确认方法中，先做表单验证，验证通过之后将表单绑定的数据和jqid与jqbh作为参数发送请求，新增成功后，调用querylist方法重新获取最新数据，关闭弹窗标识。
修改处警记录
点击修改按钮，将scope.row传入方法，然后在方法内部将scope.row赋给表单绑定数据，打开弹窗标识，dialogtitle是定义在computed中的，根据数据是否有id来判断是应该显示哪个标题，其他与新增相似。
注销
点击注销按钮时，将scope.row传入方法内部，然后在方法内部判断sfzzclqk，如果为1则弹出提示框，如果不为最终结果，则给出友好提示，然后在then（）中发送注销请求。请求成功则调用querylist更新列表数据
刑事案件
1.业务梳理
当民警在接处警信息系统中将该案件定性为刑事案件，并填写受案登记表送审，待地级派出所领导审核完成后，该案件就会进入刑事案件系统，在刑事案件首页的列表中就可以看到刚才出现的新案件，然后可以办理该案件，填写受案登记表，接受案件材料证明等，在审核完成后，可以对该案件做以下操作（不予立案、立案、转行政案件，案件移送），如果立案，则进入侦查阶段，侦查终结过后可以移送法院进行起诉。
2.代码梳理
caseConduct页面
上半部分是使用了case这个组件
<case-detail
:key="detailKey"
:wcnr="sfwcnr"
:dataSource="curCase"
:simpleInfoMap="CASE_INFO_MAP"
:allInfoMap="CASE_ALL_MAP"
:bh="asjbh"
@edit="editCase"
:disabled="disabled"
@saveMap="saveCase"
:markInfo="markInfo"
caseType="xsaj"
></case-detail>
下半部分使用了动态组件
<el-tabs type="border-card" @tab-click="handleClick" v-if="asjbh">
<el-tab-pane
v-for="(item, index) in CRIMINAL_TABS_MAP"
:key="index"
:label="item.text"
>
</el-tab-pane>
<component
:disabled="disabled"
v-if="refreshComponent"
v-bind:is="currComponent.component"
@verify="verify"
:data="{
id,
asjbh,
ajmc: curCase.ajmc,
system: 'xsaj',
zaasjbh: asjbh,
flow,
key: currComponent.key,
curCase: curCase,
verify: true,
disabled,
}"
:disabledRemoveFlwsdms="[
'010001',
'J010001',
'X010006',
'030002',
'020002',
'040202',
'050002',
]"
:itemClick="itemClick"
:xgzxFlwsMap="{
CQBG_XG: '900006',
CQBG_ZX: '900007',
FLWS_XG: '900003',
FLWS_ZX: '900002',
}"
:height="tabListHeight"
:fileParams="fileParams"
:fileHost="host"
></component>
右侧的功能主要有以下几个
卷宗制作与智能阅卷都是跳转到卷宗管理系统，移送组卷功能则是跳转到移送组件界面文章来源地址https://www.toymoban.com/news/detail-833931.html
27lvhVev-1706867713917)]
2.代码梳理
caseConduct页面
上半部分是使用了case这个组件
<case-detail
:key="detailKey"
:wcnr="sfwcnr"
:dataSource="curCase"
:simpleInfoMap="CASE_INFO_MAP"
:allInfoMap="CASE_ALL_MAP"
:bh="asjbh"
@edit="editCase"
:disabled="disabled"
@saveMap="saveCase"
:markInfo="markInfo"
caseType="xsaj"
></case-detail>
下半部分使用了动态组件
<el-tabs type="border-card" @tab-click="handleClick" v-if="asjbh">
<el-tab-pane
v-for="(item, index) in CRIMINAL_TABS_MAP"
:key="index"
:label="item.text"
>
</el-tab-pane>
<component
:disabled="disabled"
v-if="refreshComponent"
v-bind:is="currComponent.component"
@verify="verify"
:data="{
id,
asjbh,
ajmc: curCase.ajmc,
system: 'xsaj',
zaasjbh: asjbh,
flow,
key: currComponent.key,
curCase: curCase,
verify: true,
disabled,
}"
:disabledRemoveFlwsdms="[
'010001',
'J010001',
'X010006',
'030002',
'020002',
'040202',
'050002',
]"
:itemClick="itemClick"
:xgzxFlwsMap="{
CQBG_XG: '900006',
CQBG_ZX: '900007',
FLWS_XG: '900003',
FLWS_ZX: '900002',
}"
:height="tabListHeight"
:fileParams="fileParams"
:fileHost="host"
></component>
右侧的功能主要有以下几个
[外链图片转存中…(img-BNNRXl9I-1706867713918)]文章来源：https://www.toymoban.com/news/detail-833931.html
卷宗制作与智能阅卷都是跳转到卷宗管理系统，移送组卷功能则是跳转到移送组件界面
到了这里，关于公司前端实习项目技术，可以借鉴一些组件设计思路及基本代码逻辑，应届生来！的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
