Skip to content

F
founder_vue
Commit ea8f9cff by zhao_shaonan
Options

代码规范化

parent 0057bc3e
Showing with 856 additions and 473 deletions
src/components/demoPrototype/queryPages/callQuery.vue
<template>
<div id="QueryField">
<!--查询页面-->
<EsAjzbQuery :PageTitle="PageTitle" :LeftMenu="LeftMenu" :QueryField="QueryField" :AllformThead="AllformThead" :defaultCheckedThead="defaultCheckedThead" :defaultFormThead="defaultFormThead"></EsAjzbQuery>
</div>
<div id="QueryField">
<!--查询页面-->
<EsAjzbQuery
:PageTitle="PageTitle"
:LeftMenu="LeftMenu"
:QueryField="QueryField"
:AllformThead="AllformThead"
:defaultCheckedThead="defaultCheckedThead"
:defaultFormThead="defaultFormThead"
></EsAjzbQuery>
</div>
</template>
<script>
import EsAjzbQuery from './queryCommonPage.vue';
export default {
name: "QueryField",
components: {
EsAjzbQuery: EsAjzbQuery
},
data() {
return {
PageTitle:'案件侦办',
LeftMenu:[
{
id:'ajzbcx',
label:'案件侦办查询',
index:'1',
className:'fa fa-search'
}
],
QueryField: [
{name:'案件编号',id:'ajbh',type:'text',value:'',placeholder:'',col:'3'},
{name:'现勘编号',id:'xkbh',type:'text',value:'',placeholder:'',col:'3'},
{name:'案件类别',id:'ajlb',type:'code',value:'',placeholder:'',codeOptions:[],codeTree:'CODE_AJLB',col:'3'},
{name:'案情关键词',id:'aqgjc',type:'textarea',value:'',placeholder:'多个关键词输入请用逗号，隔开',col:'1'},
{name:'主案类别',id:'zalb',type:'code',value:'',placeholder:'',codeOptions:[],codeTree:'CODE_AJZLB',col:'3',hidden:true},
{name:'次案类别',id:'calb',type:'code',value:'',placeholder:'',codeOptions:[],codeTree:'CODE_AJXZLB',col:'3',hidden:true},
{name:'次类案类别',id:'clalb',type:'code',value:'',placeholder:'',codeOptions:[],codeTree:'CODE_XALBDMBCMS',col:'3',hidden:true},
{name:'受理单位',id:'sldw',type:'code',value:'',placeholder:'',codeOptions:[],codeTree:'CODE_UNIT',col:'3',hidden:true},
{name:'受理时间',id:'slsj',type:'date',value:'',placeholder:'',col:'2',hidden:true},
{name:'立案单位',id:'ladw',type:'code',value:'',placeholder:'',codeOptions:[],codeTree:'CODE_UNIT',col:'3',hidden:true},
{name:'立案时间',id:'lasj',type:'date',value:'',placeholder:'',col:'2',hidden:true},
{name:'侦查终结单位',id:'zczjdw',type:'code',value:'',placeholder:'',codeOptions:[],codeTree:'CODE_UNIT',col:'3',hidden:true},
{name:'终结时间',id:'zjsj',type:'date',value:'',placeholder:'',col:'2',hidden:true},
{name:'案发地区',id:'afdq',type:'code',value:'',placeholder:'',codeOptions:[],codeTree:'CODE_XZQH',col:'3',hidden:true},
{name:'涉案金额',id:'saje',type:'zdyText',value:'',placeholder:'',value2:'',placeholder2:'',col:'2',hidden:true},
{name:'侦查状态',id:'zczt',type:'radio',value:'全部',placeholder:'',col:'1',radioData:['全部', '接受案事实', '立案审查', '不予立案', '受案', '立案', '撤销立案', '侦查终结']},
{name:'侦办过程',id:'zbgc',type:'radio',value:'全部',placeholder:'',col:'1',radioData:['全部', '已认领', '未认领']},
{name:'案件区分',id:'ajqf',type:'radio',value:'我辖区的',placeholder:'',col:'1',radioData:['我辖区的', '我侦办的', '全省', '全国']},
{name:'级联',id:'jl',type:'radio',value:'是',placeholder:'',col:'1',radioData:['是', '否'], children:[
{name:'立案单位',id:'ladw',type:'text',value:'',placeholder:'',col:'3',flag:'是'},
{name:'立案时间',id:'lasj',type:'text',value:'',placeholder:'',col:'2',flag:'是'},
]}
],
defaultCheckedThead:['案事件编号','案件类别','案件名称','简要警情'],
defaultFormThead:[{ /*table默认得表头*/
label:'案事件编号',
prop:'asjbh'
},{
label:'案件类别',
prop:'ajlb'
},{
label:'案件名称',
prop:'ajmc'
},{
label:'简要警情',
prop:'jyaq'
}],
AllformThead: [{/*所有的字段*/
label:'案事件编号',
prop:'asjbh'
},{
label:'案件类别',
prop:'ajlb'
},{
label:'案件名称',
prop:'ajmc'
},{
label:'案件时间',
prop:'ajsj'
},{
label:'立案单位',
prop:'ladw'
},{
label:'简要警情',
prop:'jyaq'
}],
import EsAjzbQuery from "./queryCommonPage.vue";
export default {
name: "QueryField",
components: {
EsAjzbQuery: EsAjzbQuery
},
data() {
return {
PageTitle: "案件侦办",
LeftMenu: [
{
id: "ajzbcx",
label: "案件侦办查询",
index: "1",
className: "fa fa-search"
}
],
QueryField: [
{
name: "案件编号",
id: "ajbh",
type: "text",
value: "",
placeholder: "",
col: "3"
},
{
name: "现勘编号",
id: "xkbh",
type: "text",
value: "",
placeholder: "",
col: "3"
},
{
name: "案件类别",
id: "ajlb",
type: "code",
value: "",
placeholder: "",
codeOptions: [],
codeTree: "CODE_AJLB",
col: "3"
},
{
name: "案情关键词",
id: "aqgjc",
type: "textarea",
value: "",
placeholder: "多个关键词输入请用逗号，隔开",
col: "1"
},
{
name: "主案类别",
id: "zalb",
type: "code",
value: "",
placeholder: "",
codeOptions: [],
codeTree: "CODE_AJZLB",
col: "3",
hidden: true
},
{
name: "次案类别",
id: "calb",
type: "code",
value: "",
placeholder: "",
codeOptions: [],
codeTree: "CODE_AJXZLB",
col: "3",
hidden: true
},
{
name: "次类案类别",
id: "clalb",
type: "code",
value: "",
placeholder: "",
codeOptions: [],
codeTree: "CODE_XALBDMBCMS",
col: "3",
hidden: true
},
{
name: "受理单位",
id: "sldw",
type: "code",
value: "",
placeholder: "",
codeOptions: [],
codeTree: "CODE_UNIT",
col: "3",
hidden: true
},
{
name: "受理时间",
id: "slsj",
type: "date",
value: "",
placeholder: "",
col: "2",
hidden: true
},
{
name: "立案单位",
id: "ladw",
type: "code",
value: "",
placeholder: "",
codeOptions: [],
codeTree: "CODE_UNIT",
col: "3",
hidden: true
},
{
name: "立案时间",
id: "lasj",
type: "date",
value: "",
placeholder: "",
col: "2",
hidden: true
},
{
name: "侦查终结单位",
id: "zczjdw",
type: "code",
value: "",
placeholder: "",
codeOptions: [],
codeTree: "CODE_UNIT",
col: "3",
hidden: true
},
{
name: "终结时间",
id: "zjsj",
type: "date",
value: "",
placeholder: "",
col: "2",
hidden: true
},
{
name: "案发地区",
id: "afdq",
type: "code",
value: "",
placeholder: "",
codeOptions: [],
codeTree: "CODE_XZQH",
col: "3",
hidden: true
},
{
name: "涉案金额",
id: "saje",
type: "zdyText",
value: "",
placeholder: "",
value2: "",
placeholder2: "",
col: "2",
hidden: true
},
{
name: "侦查状态",
id: "zczt",
type: "radio",
value: "全部",
placeholder: "",
col: "1",
radioData: [
"全部",
"接受案事实",
"立案审查",
"不予立案",
"受案",
"立案",
"撤销立案",
"侦查终结"
]
},
{
name: "侦办过程",
id: "zbgc",
type: "radio",
value: "全部",
placeholder: "",
col: "1",
radioData: ["全部", "已认领", "未认领"]
},
{
name: "案件区分",
id: "ajqf",
type: "radio",
value: "我辖区的",
placeholder: "",
col: "1",
radioData: ["我辖区的", "我侦办的", "全省", "全国"]
},
{
name: "级联",
id: "jl",
type: "radio",
value: "是",
placeholder: "",
col: "1",
radioData: ["是", "否"],
children: [
{
name: "立案单位",
id: "ladw",
type: "text",
value: "",
placeholder: "",
col: "3",
flag: "是"
},
{
name: "立案时间",
id: "lasj",
type: "text",
value: "",
placeholder: "",
col: "2",
flag: "是"
}
]
}
],
defaultCheckedThead: ["案事件编号", "案件类别", "案件名称", "简要警情"],
defaultFormThead: [
{
/*table默认得表头*/
label: "案事件编号",
prop: "asjbh"
},
{
label: "案件类别",
prop: "ajlb"
},
{
label: "案件名称",
prop: "ajmc"
},
{
label: "简要警情",
prop: "jyaq"
}
],
AllformThead: [
{
/*所有的字段*/
label: "案事件编号",
prop: "asjbh"
},
{
label: "案件类别",
prop: "ajlb"
},
{
label: "案件名称",
prop: "ajmc"
},
{
label: "案件时间",
prop: "ajsj"
},
{
label: "立案单位",
prop: "ladw"
},
{
label: "简要警情",
prop: "jyaq"
}
}
]
};
}
};
</script>
src/components/demoPrototype/queryPages/queryCommonPage.vue
<template>
<div id="newCases" class="main">
<!--头部背景-->
<div class="header">{{PageTitle}}</div>
<div class="content">
<!--左侧导航-->
<div class="leftMenu" :style="{'width':isCollapse == true?'65px':'200px'}">
<div @click="isCollapse=!isCollapse" style="width:51px;text-align:center;color:#409EFF;cursor: pointer;line-height:36px;" :title="isCollapse == true?'展开':'收缩'"><i class="fa fa-bars"></i></div>
<el-menu default-active="1" class="el-menu-vertical-demo" @open="handleMenuOpen" @close="handleMenuClose" :collapse="isCollapse" active-text-color="#409EFF" background-color="#fff" text-color="#545c64">
<el-menu-item v-for="item in propLeftMenu" :key="item.index" :index="item.index">
<i :class="item.className"></i>
<span slot="title" >{{item.label}}</span>
</el-menu-item>
</el-menu>
<img src="./img/leftMenuCover.png" style="width:180px;margin-left: 10px;" v-show="isCollapse==false">
</div>
<div class="rightContainer">
<!--查询条件-->
<div class="cxtjWrap paneDiv">
<el-row>
<el-col :span="24">
<span class="flTtitle">查询条件</span>
</el-col>
</el-row>
<div class="zdyLine">
<div :class="'demo-input-suffix zdycol'+item.col" v-for="item in propQueryField" :key="item.id" v-show="!item.hidden">
<div class="zdName">{{item.name}}：</div>
<!--输入框-->
<el-input
:placeholder="item.placeholder"
v-model="item.value" v-if="item.type=='text'">
</el-input>
<!--输入框-最大值与最小值-->
<div class="zdyInputW zdyInputCol2" v-else-if="item.type=='zdyText'">
<el-input
:placeholder="item.placeholder"
v-model="item.value">
</el-input>
—
<el-input
:placeholder="item.placeholder2"
v-model="item.value2" style="width:calc((100% - 150)/2)">
</el-input>
</div>
<!--文本域-->
<el-input
type="textarea"
autosize
:placeholder="item.placeholder"
v-model="item.value" v-else-if="item.type=='textarea'"> </el-input>
<!--日期框-->
<el-date-picker
v-model="item.value"
type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期" v-else-if="item.type=='date'">
</el-date-picker>
<!--多选框-->
<div class="zdyInputW" v-else-if="item.type=='checkbox'">
<el-checkbox-group v-model="item.value" size="small">
<el-checkbox v-for="item2 in item.checkboxData" :label="item2" :key="item2">{{item2}}</el-checkbox>
</el-checkbox-group>
</div>
<!--单选框-->
<div class="zdyInputW" v-else-if="item.type=='radio'">
<el-radio-group v-model="item.value" size="small">
<el-radio :label="item2" v-for="item2 in item.radioData" :key="item2"></el-radio>
</el-radio-group>
</div>
<!--字典框-->
<div class="zdyInputW" v-else-if="item.type=='code'">
<!--此处是字典框，暂定-->
<!--<select-tree v-model="item.value" :placeholder="'请选择'+item.name"
<div id="newCases" class="main">
<!--头部背景-->
<div class="header">{{ PageTitle }}</div>
<div class="content">
<!--左侧导航-->
<div
class="leftMenu"
:style="{ width: isCollapse == true ? '65px' : '200px' }"
>
<div
@click="isCollapse = !isCollapse"
style="width:51px;text-align:center;color:#409EFF;cursor: pointer;line-height:36px;"
:title="isCollapse == true ? '展开' : '收缩'"
>
<i class="fa fa-bars"></i>
</div>
<el-menu
default-active="1"
class="el-menu-vertical-demo"
@open="handleMenuOpen"
@close="handleMenuClose"
:collapse="isCollapse"
active-text-color="#409EFF"
background-color="#fff"
text-color="#545c64"
>
<el-menu-item
v-for="item in propLeftMenu"
:key="item.index"
:index="item.index"
>
<i :class="item.className"></i>
<span slot="title">{{ item.label }}</span>
</el-menu-item>
</el-menu>
<img
src="./img/leftMenuCover.png"
style="width:180px;margin-left: 10px;"
v-show="isCollapse == false"
/>
</div>
<div class="rightContainer">
<!--查询条件-->
<div class="cxtjWrap paneDiv">
<el-row>
<el-col :span="24">
<span class="flTtitle">查询条件</span>
</el-col>
</el-row>
<div class="zdyLine">
<div
:class="'demo-input-suffix zdycol' + item.col"
v-for="item in propQueryField"
:key="item.id"
v-show="!item.hidden"
>
<div class="zdName">{{ item.name }}：</div>
<!--输入框-->
<el-input
:placeholder="item.placeholder"
v-model="item.value"
v-if="item.type == 'text'"
>
</el-input>
<!--输入框-最大值与最小值-->
<div
class="zdyInputW zdyInputCol2"
v-else-if="item.type == 'zdyText'"
>
<el-input :placeholder="item.placeholder" v-model="item.value">
</el-input>
—
<el-input
:placeholder="item.placeholder2"
v-model="item.value2"
style="width:calc((100% - 150)/2)"
>
</el-input>
</div>
<!--文本域-->
<el-input
type="textarea"
autosize
:placeholder="item.placeholder"
v-model="item.value"
v-else-if="item.type == 'textarea'"
>
</el-input>
<!--日期框-->
<el-date-picker
v-model="item.value"
type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
v-else-if="item.type == 'date'"
>
</el-date-picker>
<!--多选框-->
<div class="zdyInputW" v-else-if="item.type == 'checkbox'">
<el-checkbox-group v-model="item.value" size="small">
<el-checkbox
v-for="item2 in item.checkboxData"
:label="item2"
:key="item2"
>{{ item2 }}</el-checkbox
>
</el-checkbox-group>
</div>
<!--单选框-->
<div class="zdyInputW" v-else-if="item.type == 'radio'">
<el-radio-group v-model="item.value" size="small">
<el-radio
:label="item2"
v-for="item2 in item.radioData"
:key="item2"
></el-radio>
</el-radio-group>
</div>
<!--字典框-->
<div class="zdyInputW" v-else-if="item.type == 'code'">
<!--此处是字典框，暂定-->
<!--<select-tree v-model="item.value" :placeholder="'请选择'+item.name"
:options="item.codeOptions"/>-->
</div>
<!--判断是否有子集-->
<div class="zdyInputW" v-if="item.children">
<div :class="'demo-input-suffix zdycol'+item2.col" v-for="item2 in item.children" :key="item2.id" v-show="item2.flag==item.value">
<div class="zdName">{{item2.name}}：</div>
<!--输入框-->
<el-input
:placeholder="item2.placeholder"
v-model="item2.value" v-if="item2.type=='text'">
</el-input>
<!--输入框-最大值与最小值-->
<div class="zdyInputW zdyInputCol2" v-else-if="item2.type=='zdyText'">
<el-input
:placeholder="item2.placeholder"
v-model="item2.value">
</el-input>
—
<el-input
:placeholder="item2.placeholder2"
v-model="item2.value2" style="width:calc((100% - 150)/2)">
</el-input>
</div>
<!--文本域-->
<el-input
type="textarea"
autosize
:placeholder="item2.placeholder"
v-model="item2.value" v-else-if="item2.type=='textarea'"> </el-input>
<!--日期框-->
<el-date-picker
v-model="item2.value"
type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期" v-else-if="item2.type=='date'">
</el-date-picker>
<!--多选框-->
<div class="zdyInputW" v-else-if="item2.type=='checkbox'">
<el-checkbox-group v-model="item2.value" size="small">
<el-checkbox v-for="item3 in item2.checkboxData" :label="item3" :key="item3">{{item3}}</el-checkbox>
</el-checkbox-group>
</div>
<!--单选框-->
<div class="zdyInputW" v-else-if="item2.type=='radio'">
<el-radio-group v-model="item2.value" size="small">
<el-radio :label="item3" v-for="item3 in item2.radioData" :key="item3"></el-radio>
</el-radio-group>
</div>
<!--字典框-->
<div class="zdyInputW" v-else-if="item2.type=='code'">
<!--此处是字典框，暂定-->
<!-- <select-tree v-model="item2.value" :placeholder="'请选择'+item2.name"
</div>
<!--判断是否有子集-->
<div class="zdyInputW" v-if="item.children">
<div
:class="'demo-input-suffix zdycol' + item2.col"
v-for="item2 in item.children"
:key="item2.id"
v-show="item2.flag == item.value"
>
<div class="zdName">{{ item2.name }}：</div>
<!--输入框-->
<el-input
:placeholder="item2.placeholder"
v-model="item2.value"
v-if="item2.type == 'text'"
>
</el-input>
<!--输入框-最大值与最小值-->
<div
class="zdyInputW zdyInputCol2"
v-else-if="item2.type == 'zdyText'"
>
<el-input
:placeholder="item2.placeholder"
v-model="item2.value"
>
</el-input>
—
<el-input
:placeholder="item2.placeholder2"
v-model="item2.value2"
style="width:calc((100% - 150)/2)"
>
</el-input>
</div>
<!--文本域-->
<el-input
type="textarea"
autosize
:placeholder="item2.placeholder"
v-model="item2.value"
v-else-if="item2.type == 'textarea'"
>
</el-input>
<!--日期框-->
<el-date-picker
v-model="item2.value"
type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
v-else-if="item2.type == 'date'"
>
</el-date-picker>
<!--多选框-->
<div class="zdyInputW" v-else-if="item2.type == 'checkbox'">
<el-checkbox-group v-model="item2.value" size="small">
<el-checkbox
v-for="item3 in item2.checkboxData"
:label="item3"
:key="item3"
>{{ item3 }}</el-checkbox
>
</el-checkbox-group>
</div>
<!--单选框-->
<div class="zdyInputW" v-else-if="item2.type == 'radio'">
<el-radio-group v-model="item2.value" size="small">
<el-radio
:label="item3"
v-for="item3 in item2.radioData"
:key="item3"
></el-radio>
</el-radio-group>
</div>
<!--字典框-->
<div class="zdyInputW" v-else-if="item2.type == 'code'">
<!--此处是字典框，暂定-->
<!-- <select-tree v-model="item2.value" :placeholder="'请选择'+item2.name"
:options="item2.codeOptions"/>-->
</div>
</div>
</div>
</div>
</div>
<!--按钮-->
<div class="ar cx-btn">
<span @click="switchingConditions" class="color1 mg10"><i :class="toggleZd ? 'fa fa-angle-up fa-zdy20':'fa fa-angle-down fa-zdy20'"></i>{{toggleZd ? '收起条件':'更多条件'}}</span>
<el-button type="primary" icon="el-icon-search" size="small" @click="doQuery">查询</el-button>
<el-button plain icon="el-icon-delete" size="small" @click="clearData">清空</el-button>
</div>
</div>
<div class="paneDiv">
<el-row>
<el-col :span="24">
<span class="flTtitle">查询结果</span>
</el-col>
</el-row>
<!--可配置化图标-->
<div style="height:30px;line-height: 30px;text-align: right;font-size:12px;position: relative;top: -13px;">
<span class="setting" @click="centerDialogVisible = true"><i class="el-icon-setting pzhIcon" title="可配置化列表"></i>表头设置</span>
<el-button plain size="small" @click="" style="margin-right: 0.5%;"><i class="fa fa-external-link" aria-hidden="true" style="margin-right:5px;"></i>导出</el-button>
</div>
<!--表格-->
<el-table
id="ajzbQuery"
:key="key"
ref="itsmDataTable"
:data="tableData"
tooltip-effect="dark"
style="width: 99%;margin:0 auto"
size="small"
border
@selection-change="getRows">
<el-table-column
label="操作"
width="120">
<template slot-scope="scope"><el-button type="primary" size="mini">案件侦办</el-button></template>
</el-table-column>
<el-table-column v-for="columnTitle in propdefaultFormThead" :key="columnTitle.label" :label="columnTitle.label">
<template slot-scope="scope">
<div v-if="columnTitle.prop!='jyaq'">
{{ scope.row[columnTitle.prop] }}
</div>
<div class='ajxq_s' v-if="columnTitle.prop=='jyaq'"><span class = 'none'>{{ scope.row[columnTitle.prop] }}</span><a href='javascript:void(0);' onclick = 'javascript:this.parentNode.style.display="none";this.parentNode.nextSibling.style.display="block"' style='display: inline-block;width: 100%;text-align: right;color: #3692c6;font-weight:600;' id='open'>展开</a></div><div class='ajxq_n' style='display:none;'><span style="display: inline-block;">{{ scope.row.jyaq}}</span><a href='javascript:void(0);' onclick = 'javascript:this.parentNode.style.display="none";this.parentNode.previousSibling.style.display="block"' style='float:right;color: #3692c6;font-weight:600;' id='stop'>收起</a></div>
</template>
</el-table-column>
</el-table>
<!--分页-->
<el-pagination
background
@current-change="handleCurrentChange"
:current-page.sync="currentPage1"
:page-size="page_size"
layout="prev, pager, next"
:small="true"
:total="tableData.length" v-if="pageShow">
</el-pagination>
</div>
</div>
<!--配置化列表-->
<el-dialog
title="配置表格表头字段"
:visible.sync="centerDialogVisible"
width="480px"
custom-class="zdyTheadDialog"
center>
<span>
<!--可配置项-->
<div class="filter-container">
<el-checkbox-group v-model="propdefaultCheckedThead">
<el-checkbox v-for="item in propAllformThead" :key="item.label" :label="item.label">
{{item.label}}
</el-checkbox>
</el-checkbox-group>
</div>
</span>
<span slot="footer" class="dialog-footer">
<el-button @click="centerDialogVisible = false" size="mini">取 消</el-button>
<el-button type="primary" size="mini" @click="handleCheckedChange">确 定</el-button>
</span>
</el-dialog>
</div>
</div>
</div>
<!--按钮-->
<div class="ar cx-btn">
<span @click="switchingConditions" class="color1 mg10"
><i
:class="
toggleZd
? 'fa fa-angle-up fa-zdy20'
: 'fa fa-angle-down fa-zdy20'
"
></i
>{{ toggleZd ? "收起条件" : "更多条件" }}</span
>
<el-button
type="primary"
icon="el-icon-search"
size="small"
@click="doQuery"
>查询</el-button
>
<el-button
plain
icon="el-icon-delete"
size="small"
@click="clearData"
>清空</el-button
>
</div>
</div>
<div class="paneDiv">
<el-row>
<el-col :span="24">
<span class="flTtitle">查询结果</span>
</el-col>
</el-row>
<!--可配置化图标-->
<div
style="height:30px;line-height: 30px;text-align: right;font-size:12px;position: relative;top: -13px;"
>
<span class="setting" @click="centerDialogVisible = true"
><i class="el-icon-setting pzhIcon" title="可配置化列表"></i
>表头设置</span
>
<el-button plain size="small" style="margin-right: 0.5%;"
><i
class="fa fa-external-link"
aria-hidden="true"
style="margin-right:5px;"
></i
>导出</el-button
>
</div>
<!--表格-->
<el-table
id="ajzbQuery"
:key="key"
ref="itsmDataTable"
:data="tableData"
tooltip-effect="dark"
style="width: 99%;margin:0 auto"
size="small"
border
@selection-change="getRows"
>
<el-table-column label="操作" width="120">
<template
><el-button type="primary" size="mini"
>案件侦办</el-button
></template
>
</el-table-column>
<el-table-column
v-for="columnTitle in propdefaultFormThead"
:key="columnTitle.label"
:label="columnTitle.label"
>
<template slot-scope="scope">
<div v-if="columnTitle.prop != 'jyaq'">
{{ scope.row[columnTitle.prop] }}
</div>
<div class="ajxq_s" v-if="columnTitle.prop == 'jyaq'">
<span class="none">{{ scope.row[columnTitle.prop] }}</span
><a
href="javascript:void(0);"
onclick='javascript:this.parentNode.style.display="none";this.parentNode.nextSibling.style.display="block"'
style="display: inline-block;width: 100%;text-align: right;color: #3692c6;font-weight:600;"
id="open"
>展开</a
>
</div>
<div class="ajxq_n" style="display:none;">
<span style="display: inline-block;">{{
scope.row.jyaq
}}</span
><a
href="javascript:void(0);"
onclick='javascript:this.parentNode.style.display="none";this.parentNode.previousSibling.style.display="block"'
style="float:right;color: #3692c6;font-weight:600;"
id="stop"
>收起</a
>
</div>
</template>
</el-table-column>
</el-table>
<!--分页-->
<el-pagination
background
@current-change="handleCurrentChange"
:current-page.sync="currentPage1"
:page-size="page_size"
layout="prev, pager, next"
:small="true"
:total="tableData.length"
v-if="pageShow"
>
</el-pagination>
</div>
<!--配置化列表-->
<el-dialog
title="配置表格表头字段"
:visible.sync="centerDialogVisible"
width="480px"
custom-class="zdyTheadDialog"
center
>
<span>
<!--可配置项-->
<div class="filter-container">
<el-checkbox-group v-model="propdefaultCheckedThead">
<el-checkbox
v-for="item in propAllformThead"
:key="item.label"
:label="item.label"
>
{{ item.label }}
</el-checkbox>
</el-checkbox-group>
</div>
</span>
<span slot="footer" class="dialog-footer">
<el-button @click="centerDialogVisible = false" size="mini"
>取 消</el-button
>
<el-button type="primary" size="mini" @click="handleCheckedChange"
>确 定</el-button
>
</span>
</el-dialog>
</div>
</div>
</div>
</template>
<script>
import './styles/font-awesome.min.css'
export default {
name: "newCases",
components: {
import "./styles/font-awesome.min.css";
export default {
name: "newCases",
components: {},
props: {
PageTitle: String,
LeftMenu: {
type: Array,
default: () => []
},
QueryField: {
type: Array,
default: () => []
},
AllformThead: {
type: Array,
default: () => []
},
defaultCheckedThead: {
type: Array,
default: () => []
},
defaultFormThead: {
type: Array,
default: () => []
}
},
data() {
return {
propLeftMenu: this.LeftMenu,
propQueryField: this.QueryField,
propAllformThead: this.AllformThead,
propdefaultCheckedThead: this.defaultCheckedThead,
propdefaultFormThead: this.defaultFormThead,
toggleZd: false /*默认收起条件*/,
isCollapse: true,
xalbSelected: "",
xalbOptions: [],
centerDialogVisible: false,
key: 1,
tableData: [
{
/*表格数据*/
asjbh: "A441985222215335222222",
ajlb: "诈骗",
ajmc: "某某某被诈骗案",
ajsj: "发案：2020-1-12",
ladw: "XXX分局",
jyaq:
"简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情"
},
{
asjbh: "A441985222215335222223",
ajlb: "诈骗",
ajmc: "某某某被诈骗案",
ajsj: "发案：2020-1-12",
ladw: "XXX分局",
jyaq:
"简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情"
},
props:{
PageTitle:String,
LeftMenu:{
type:Array,
default: () => []
},
QueryField:{
type:Array,
default: () => []
},
AllformThead:{
type:Array,
default: () => []
},
defaultCheckedThead:{
type:Array,
default: () => []
},defaultFormThead:{
type:Array,
default: () => []
},
{
asjbh: "A441985222215335222224",
ajlb: "诈骗",
ajmc: "某某某被诈骗案",
ajsj: "发案：2020-1-12",
ladw: "XXX分局",
jyaq:
"简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情"
},
data(){
return{
propLeftMenu:this.LeftMenu,
propQueryField:this.QueryField,
propAllformThead:this.AllformThead,
propdefaultCheckedThead:this.defaultCheckedThead,
propdefaultFormThead:this.defaultFormThead,
toggleZd:false,/*默认收起条件*/
isCollapse: true,
xalbSelected: '',
xalbOptions: [],
centerDialogVisible: false,
key:1,
tableData: [{/*表格数据*/
asjbh: 'A441985222215335222222',
ajlb: '诈骗',
ajmc: '某某某被诈骗案',
ajsj: '发案：2020-1-12',
ladw: 'XXX分局',
jyaq: '简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情'
}, {
asjbh: 'A441985222215335222223',
ajlb: '诈骗',
ajmc: '某某某被诈骗案',
ajsj: '发案：2020-1-12',
ladw: 'XXX分局',
jyaq: '简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情'
}, {
asjbh: 'A441985222215335222224',
ajlb: '诈骗',
ajmc: '某某某被诈骗案',
ajsj: '发案：2020-1-12',
ladw: 'XXX分局',
jyaq: '简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情'
}, {
asjbh: 'A441985222215335222225',
ajlb: '诈骗',
ajmc: '某某某被诈骗案',
ajsj: '发案：2020-1-12',
ladw: 'XXX分局',
jyaq: '简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情'
}, {
asjbh: 'A441985222215335222226',
ajlb: '诈骗',
ajmc: '某某某被诈骗案',
ajsj: '发案：2020-1-12',
ladw: 'XXX分局',
jyaq: '简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情'
}, {
asjbh: 'A441985222215335222227',
ajlb: '诈骗',
ajmc: '某某某被诈骗案',
ajsj: '发案：2020-1-12',
ladw: 'XXX分局',
jyaq: '简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情'
}, {
asjbh: 'A441985222215335222228',
ajlb: '诈骗',
ajmc: '某某某被诈骗案',
ajsj: '发案：2020-1-12',
ladw: 'XXX分局',
jyaq: '简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情'
}],
checkBoxData:[],/*勾选的案件*/
startnum:0,//开始
endnum:20,//结束
currentPage1:1,
page_size:10,
pageShow:true,
formData:{}
}
{
asjbh: "A441985222215335222225",
ajlb: "诈骗",
ajmc: "某某某被诈骗案",
ajsj: "发案：2020-1-12",
ladw: "XXX分局",
jyaq:
"简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情"
},
methods: {
switchingConditions(){/*展开收起条件*/
this.toggleZd=!this.toggleZd;
console.log(this.toggleZd)
this.propQueryField.forEach((val, index, arr) => {
if(val.hasOwnProperty("hidden")){
console.log(!this.toggleZd)
console.log(this.propQueryField)
this.$set(val,"hidden",!this.toggleZd);/*修改对象得值并触发视图*/
}
})
console.log(this.propQueryField)
},
handleMenuOpen(key, keyPath) {
console.log(key, keyPath);
},
handleMenuClose(key, keyPath) {
console.log(key, keyPath);
},
doQuery(){
this.propQueryField.forEach((val, index, arr) => {
this.formData[val.id]=val.value;
})
console.log(this.formData)
console.log(JSON.stringify(this.formData))
},
handleCurrentChange(val){
this.startnum=(val-1)*this.page_size;//开始
this.endnum=val*this.page_size;//结束
},
handleCheckedChange(){
let _this=this,newObj=[];
_this.centerDialogVisible = false;
_this.propAllformThead.forEach((val,index)=>{
if(_this.propdefaultCheckedThead.includes(val.label)){
_this.$set(newObj,newObj.length,val);
}
})
_this.propdefaultFormThead=[];
_this.$set(_this.propdefaultFormThead,0,newObj);
_this.propdefaultFormThead = _this.propAllformThead.filter(i => _this.propdefaultCheckedThead.indexOf(i.label) >= 0)
_this.key = _this.key + 1// 为了保证table 每次都会重渲 In order to ensure the table will be re-rendered each time
},
/*清空*/
clearData(){
this.propQueryField.forEach((val, index, arr)=>{
val.type=='checkbox'?val.value=[]:(val.type=='radio'?val.value=val.radioData[0]:val.value='');
},window);
},
getRows(val){
this.checkBoxData = val;
}
{
asjbh: "A441985222215335222226",
ajlb: "诈骗",
ajmc: "某某某被诈骗案",
ajsj: "发案：2020-1-12",
ladw: "XXX分局",
jyaq:
"简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情"
},
watch: {
{
asjbh: "A441985222215335222227",
ajlb: "诈骗",
ajmc: "某某某被诈骗案",
ajsj: "发案：2020-1-12",
ladw: "XXX分局",
jyaq:
"简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情"
},
mounted(){
var self=this;
self.propQueryField.forEach((val, index, arr) => {
if(val.type=='code'){
//此处要写调用字典框得方法（此方法暂定）
/*redis.getRedis(val.codeTree).then(response => {
{
asjbh: "A441985222215335222228",
ajlb: "诈骗",
ajmc: "某某某被诈骗案",
ajsj: "发案：2020-1-12",
ladw: "XXX分局",
jyaq:
"简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情"
}
],
checkBoxData: [] /*勾选的案件*/,
startnum: 0, //开始
endnum: 20, //结束
currentPage1: 1,
page_size: 10,
pageShow: true,
formData: {}
};
},
methods: {
switchingConditions() {
/*展开收起条件*/
this.toggleZd = !this.toggleZd;
console.log(this.toggleZd);
this.propQueryField.forEach(val => {
if (Object.prototype.hasOwnProperty.call(val, "hidden")) {
console.log(!this.toggleZd);
console.log(this.propQueryField);
this.$set(val, "hidden", !this.toggleZd); /*修改对象得值并触发视图*/
}
});
console.log(this.propQueryField);
},
handleMenuOpen(key, keyPath) {
console.log(key, keyPath);
},
handleMenuClose(key, keyPath) {
console.log(key, keyPath);
},
doQuery() {
this.propQueryField.forEach(val => {
this.formData[val.id] = val.value;
});
console.log(this.formData);
console.log(JSON.stringify(this.formData));
},
handleCurrentChange(val) {
this.startnum = (val - 1) * this.page_size; //开始
this.endnum = val * this.page_size; //结束
},
handleCheckedChange() {
let _this = this,
newObj = [];
_this.centerDialogVisible = false;
_this.propAllformThead.forEach(val => {
if (_this.propdefaultCheckedThead.includes(val.label)) {
_this.$set(newObj, newObj.length, val);
}
});
_this.propdefaultFormThead = [];
_this.$set(_this.propdefaultFormThead, 0, newObj);
_this.propdefaultFormThead = _this.propAllformThead.filter(
i => _this.propdefaultCheckedThead.indexOf(i.label) >= 0
);
_this.key = _this.key + 1; // 为了保证table 每次都会重渲 In order to ensure the table will be re-rendered each time
},
/*清空*/
clearData() {
this.propQueryField.forEach(val => {
val.type == "checkbox"
? (val.value = [])
: val.type == "radio"
? (val.value = val.radioData[0])
: (val.value = "");
}, window);
},
getRows(val) {
this.checkBoxData = val;
}
},
watch: {},
mounted() {
var self = this;
self.propQueryField.forEach(val => {
if (val.type == "code") {
//此处要写调用字典框得方法（此方法暂定）
/*redis.getRedis(val.codeTree).then(response => {
if (response.success === true) {
val.codeOptions = response.data.list;
}
})*/
}
});
}
}
}
});
}
};
</script>
<style lang="scss">
@import "./styles/xcStyle";
@import "./styles/xcStyle";
</style>
src/utils/rules.js
/*
/*
验证规则
*/
......@@ -9,13 +9,13 @@ function isSFZH(value) {
}
//验证是否手机号
function isSJH(value) {
var isPhone = /^1[345789]\d{9}$/;
return isPhone.test(value);
var isPhone = /^1[345789]\d{9}$/;
return isPhone.test(value);
}
//验证是否数字
//验证是否数字
function isNumber(value) {
var isNum = /^[0-9]*$/;
return isNum.test(value);
var isNum = /^[0-9]*$/;
return isNum.test(value);
}
// 验证是否案件编号
function isAj(value) {
......@@ -24,31 +24,32 @@ function isAj(value) {
}
// 验证是否车牌号
function isYczc(value) {
var isYczc =/^[A-Za-z0-9]{6}$/;
var isYczc = /^[A-Za-z0-9]{6}$/;
return isYczc.test(value);
}
// 验证是否密码6位数字字母组合
function isPassword(value) {
var isYczc =/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6}$/;
return isYczc.test(value);
}
//验证是否小写字母
// 验证是否密码6位数字字母组合
function isPassword(value) {
var isYczc = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6}$/;
return isYczc.test(value);
}
//验证是否小写字母
function validateLowerCase(val) {
const reg = /^[a-z]+$/;
return reg.test(val);
const reg = /^[a-z]+$/;
return reg.test(val);
}
//验证是否大写字母
function validateUpperCase(val) {
const reg = /^[A-Z]+$/;
return reg.test(val);
const reg = /^[A-Z]+$/;
return reg.test(val);
}
//验证是否大小写字母
function validatAlphabets(val) {
const reg = /^[A-Za-z]+$/;
return reg.test(val);
}
const reg = /^[A-Za-z]+$/;
return reg.test(val);
}
//导出
export { //很关键
export {
//很关键
isSFZH,
isSJH,
isNumber,
......@@ -58,4 +59,4 @@ export { //很关键
validateLowerCase,
validateUpperCase,
validatAlphabets
}
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment