Skip to content

F
founder_vue
Commit ea8f9cff by zhao_shaonan
Options

代码规范化

parent 0057bc3e
Showing with 642 additions and 259 deletions
src/components/demoPrototype/queryPages/callQuery.vue
<template> <template>
<div id="QueryField"> <div id="QueryField">
<!--查询页面--> <!--查询页面-->
<EsAjzbQuery :PageTitle="PageTitle" :LeftMenu="LeftMenu" :QueryField="QueryField" :AllformThead="AllformThead" :defaultCheckedThead="defaultCheckedThead" :defaultFormThead="defaultFormThead"></EsAjzbQuery> <EsAjzbQuery
:PageTitle="PageTitle"
:LeftMenu="LeftMenu"
:QueryField="QueryField"
:AllformThead="AllformThead"
:defaultCheckedThead="defaultCheckedThead"
:defaultFormThead="defaultFormThead"
></EsAjzbQuery>
</div> </div>
</template> </template>
<script> <script>
import EsAjzbQuery from './queryCommonPage.vue'; import EsAjzbQuery from "./queryCommonPage.vue";
export default { export default {
name: "QueryField", name: "QueryField",
components: { components: {
EsAjzbQuery: EsAjzbQuery EsAjzbQuery: EsAjzbQuery
}, },
data() { data() {
return { return {
PageTitle:'案件侦办', PageTitle: "案件侦办",
LeftMenu:[ LeftMenu: [
{ {
id:'ajzbcx', id: "ajzbcx",
label:'案件侦办查询', label: "案件侦办查询",
index:'1', index: "1",
className:'fa fa-search' className: "fa fa-search"
} }
], ],
QueryField: [ QueryField: [
{name:'案件编号',id:'ajbh',type:'text',value:'',placeholder:'',col:'3'}, {
{name:'现勘编号',id:'xkbh',type:'text',value:'',placeholder:'',col:'3'}, name: "案件编号",
{name:'案件类别',id:'ajlb',type:'code',value:'',placeholder:'',codeOptions:[],codeTree:'CODE_AJLB',col:'3'}, id: "ajbh",
{name:'案情关键词',id:'aqgjc',type:'textarea',value:'',placeholder:'多个关键词输入请用逗号，隔开',col:'1'}, type: "text",
{name:'主案类别',id:'zalb',type:'code',value:'',placeholder:'',codeOptions:[],codeTree:'CODE_AJZLB',col:'3',hidden:true}, value: "",
{name:'次案类别',id:'calb',type:'code',value:'',placeholder:'',codeOptions:[],codeTree:'CODE_AJXZLB',col:'3',hidden:true}, placeholder: "",
{name:'次类案类别',id:'clalb',type:'code',value:'',placeholder:'',codeOptions:[],codeTree:'CODE_XALBDMBCMS',col:'3',hidden:true}, col: "3"
{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: "现勘编号",
{name:'立案时间',id:'lasj',type:'date',value:'',placeholder:'',col:'2',hidden:true}, id: "xkbh",
{name:'侦查终结单位',id:'zczjdw',type:'code',value:'',placeholder:'',codeOptions:[],codeTree:'CODE_UNIT',col:'3',hidden:true}, type: "text",
{name:'终结时间',id:'zjsj',type:'date',value:'',placeholder:'',col:'2',hidden:true}, value: "",
{name:'案发地区',id:'afdq',type:'code',value:'',placeholder:'',codeOptions:[],codeTree:'CODE_XZQH',col:'3',hidden:true}, placeholder: "",
{name:'涉案金额',id:'saje',type:'zdyText',value:'',placeholder:'',value2:'',placeholder2:'',col:'2',hidden:true}, col: "3"
{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: "案件类别",
{name:'级联',id:'jl',type:'radio',value:'是',placeholder:'',col:'1',radioData:['是', '否'], children:[ id: "ajlb",
{name:'立案单位',id:'ladw',type:'text',value:'',placeholder:'',col:'3',flag:'是'}, type: "code",
{name:'立案时间',id:'lasj',type:'text',value:'',placeholder:'',col:'2',flag:'是'}, 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:['案事件编号','案件类别','案件名称','简要警情'], defaultCheckedThead: ["案事件编号", "案件类别", "案件名称", "简要警情"],
defaultFormThead:[{ /*table默认得表头*/ defaultFormThead: [
label:'案事件编号', {
prop:'asjbh' /*table默认得表头*/
},{ label: "案事件编号",
label:'案件类别', prop: "asjbh"
prop:'ajlb' },
},{ {
label:'案件名称', label: "案件类别",
prop:'ajmc' prop: "ajlb"
},{ },
label:'简要警情', {
prop:'jyaq' label: "案件名称",
}], prop: "ajmc"
AllformThead: [{/*所有的字段*/ },
label:'案事件编号', {
prop:'asjbh' label: "简要警情",
},{ prop: "jyaq"
label:'案件类别',
prop:'ajlb'
},{
label:'案件名称',
prop:'ajmc'
},{
label:'案件时间',
prop:'ajsj'
},{
label:'立案单位',
prop:'ladw'
},{
label:'简要警情',
prop:'jyaq'
}],
} }
],
AllformThead: [
{
/*所有的字段*/
label: "案事件编号",
prop: "asjbh"
},
{
label: "案件类别",
prop: "ajlb"
},
{
label: "案件名称",
prop: "ajmc"
},
{
label: "案件时间",
prop: "ajsj"
},
{
label: "立案单位",
prop: "ladw"
},
{
label: "简要警情",
prop: "jyaq"
} }
]
};
} }
};
</script> </script>
src/components/demoPrototype/queryPages/queryCommonPage.vue
<template> <template>
<div id="newCases" class="main"> <div id="newCases" class="main">
<!--头部背景--> <!--头部背景-->
<div class="header">{{PageTitle}}</div> <div class="header">{{ PageTitle }}</div>
<div class="content"> <div class="content">
<!--左侧导航--> <!--左侧导航-->
<div class="leftMenu" :style="{'width':isCollapse == true?'65px':'200px'}"> <div
<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> class="leftMenu"
<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"> :style="{ width: isCollapse == true ? '65px' : '200px' }"
<el-menu-item v-for="item in propLeftMenu" :key="item.index" :index="item.index"> >
<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> <i :class="item.className"></i>
<span slot="title" >{{item.label}}</span> <span slot="title">{{ item.label }}</span>
</el-menu-item> </el-menu-item>
</el-menu> </el-menu>
<img src="./img/leftMenuCover.png" style="width:180px;margin-left: 10px;" v-show="isCollapse==false"> <img
src="./img/leftMenuCover.png"
style="width:180px;margin-left: 10px;"
v-show="isCollapse == false"
/>
</div> </div>
<div class="rightContainer"> <div class="rightContainer">
<!--查询条件--> <!--查询条件-->
...@@ -23,23 +49,33 @@ ...@@ -23,23 +49,33 @@
</el-col> </el-col>
</el-row> </el-row>
<div class="zdyLine"> <div class="zdyLine">
<div :class="'demo-input-suffix zdycol'+item.col" v-for="item in propQueryField" :key="item.id" v-show="!item.hidden"> <div
<div class="zdName">{{item.name}}：</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 <el-input
:placeholder="item.placeholder" :placeholder="item.placeholder"
v-model="item.value" v-if="item.type=='text'"> v-model="item.value"
v-if="item.type == 'text'"
>
</el-input> </el-input>
<!--输入框-最大值与最小值--> <!--输入框-最大值与最小值-->
<div class="zdyInputW zdyInputCol2" v-else-if="item.type=='zdyText'"> <div
<el-input class="zdyInputW zdyInputCol2"
:placeholder="item.placeholder" v-else-if="item.type == 'zdyText'"
v-model="item.value"> >
<el-input :placeholder="item.placeholder" v-model="item.value">
</el-input> </el-input>
— —
<el-input <el-input
:placeholder="item.placeholder2" :placeholder="item.placeholder2"
v-model="item.value2" style="width:calc((100% - 150)/2)"> v-model="item.value2"
style="width:calc((100% - 150)/2)"
>
</el-input> </el-input>
</div> </div>
<!--文本域--> <!--文本域-->
...@@ -47,7 +83,10 @@ ...@@ -47,7 +83,10 @@
type="textarea" type="textarea"
autosize autosize
:placeholder="item.placeholder" :placeholder="item.placeholder"
v-model="item.value" v-else-if="item.type=='textarea'"> </el-input> v-model="item.value"
v-else-if="item.type == 'textarea'"
>
</el-input>
<!--日期框--> <!--日期框-->
<el-date-picker <el-date-picker
v-model="item.value" v-model="item.value"
...@@ -56,45 +95,69 @@ ...@@ -56,45 +95,69 @@
unlink-panels unlink-panels
range-separator="至" range-separator="至"
start-placeholder="开始日期" start-placeholder="开始日期"
end-placeholder="结束日期" v-else-if="item.type=='date'"> end-placeholder="结束日期"
v-else-if="item.type == 'date'"
>
</el-date-picker> </el-date-picker>
<!--多选框--> <!--多选框-->
<div class="zdyInputW" v-else-if="item.type=='checkbox'"> <div class="zdyInputW" v-else-if="item.type == 'checkbox'">
<el-checkbox-group v-model="item.value" size="small"> <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
v-for="item2 in item.checkboxData"
:label="item2"
:key="item2"
>{{ item2 }}</el-checkbox
>
</el-checkbox-group> </el-checkbox-group>
</div> </div>
<!--单选框--> <!--单选框-->
<div class="zdyInputW" v-else-if="item.type=='radio'"> <div class="zdyInputW" v-else-if="item.type == 'radio'">
<el-radio-group v-model="item.value" size="small"> <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
:label="item2"
v-for="item2 in item.radioData"
:key="item2"
></el-radio>
</el-radio-group> </el-radio-group>
</div> </div>
<!--字典框--> <!--字典框-->
<div class="zdyInputW" v-else-if="item.type=='code'"> <div class="zdyInputW" v-else-if="item.type == 'code'">
<!--此处是字典框，暂定--> <!--此处是字典框，暂定-->
<!--<select-tree v-model="item.value" :placeholder="'请选择'+item.name" <!--<select-tree v-model="item.value" :placeholder="'请选择'+item.name"
:options="item.codeOptions"/>--> :options="item.codeOptions"/>-->
</div> </div>
<!--判断是否有子集--> <!--判断是否有子集-->
<div class="zdyInputW" v-if="item.children"> <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
<div class="zdName">{{item2.name}}：</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 <el-input
:placeholder="item2.placeholder" :placeholder="item2.placeholder"
v-model="item2.value" v-if="item2.type=='text'"> v-model="item2.value"
v-if="item2.type == 'text'"
>
</el-input> </el-input>
<!--输入框-最大值与最小值--> <!--输入框-最大值与最小值-->
<div class="zdyInputW zdyInputCol2" v-else-if="item2.type=='zdyText'"> <div
class="zdyInputW zdyInputCol2"
v-else-if="item2.type == 'zdyText'"
>
<el-input <el-input
:placeholder="item2.placeholder" :placeholder="item2.placeholder"
v-model="item2.value"> v-model="item2.value"
>
</el-input> </el-input>
— —
<el-input <el-input
:placeholder="item2.placeholder2" :placeholder="item2.placeholder2"
v-model="item2.value2" style="width:calc((100% - 150)/2)"> v-model="item2.value2"
style="width:calc((100% - 150)/2)"
>
</el-input> </el-input>
</div> </div>
<!--文本域--> <!--文本域-->
...@@ -102,7 +165,10 @@ ...@@ -102,7 +165,10 @@
type="textarea" type="textarea"
autosize autosize
:placeholder="item2.placeholder" :placeholder="item2.placeholder"
v-model="item2.value" v-else-if="item2.type=='textarea'"> </el-input> v-model="item2.value"
v-else-if="item2.type == 'textarea'"
>
</el-input>
<!--日期框--> <!--日期框-->
<el-date-picker <el-date-picker
v-model="item2.value" v-model="item2.value"
...@@ -111,22 +177,33 @@ ...@@ -111,22 +177,33 @@
unlink-panels unlink-panels
range-separator="至" range-separator="至"
start-placeholder="开始日期" start-placeholder="开始日期"
end-placeholder="结束日期" v-else-if="item2.type=='date'"> end-placeholder="结束日期"
v-else-if="item2.type == 'date'"
>
</el-date-picker> </el-date-picker>
<!--多选框--> <!--多选框-->
<div class="zdyInputW" v-else-if="item2.type=='checkbox'"> <div class="zdyInputW" v-else-if="item2.type == 'checkbox'">
<el-checkbox-group v-model="item2.value" size="small"> <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
v-for="item3 in item2.checkboxData"
:label="item3"
:key="item3"
>{{ item3 }}</el-checkbox
>
</el-checkbox-group> </el-checkbox-group>
</div> </div>
<!--单选框--> <!--单选框-->
<div class="zdyInputW" v-else-if="item2.type=='radio'"> <div class="zdyInputW" v-else-if="item2.type == 'radio'">
<el-radio-group v-model="item2.value" size="small"> <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
:label="item3"
v-for="item3 in item2.radioData"
:key="item3"
></el-radio>
</el-radio-group> </el-radio-group>
</div> </div>
<!--字典框--> <!--字典框-->
<div class="zdyInputW" v-else-if="item2.type=='code'"> <div class="zdyInputW" v-else-if="item2.type == 'code'">
<!--此处是字典框，暂定--> <!--此处是字典框，暂定-->
<!-- <select-tree v-model="item2.value" :placeholder="'请选择'+item2.name" <!-- <select-tree v-model="item2.value" :placeholder="'请选择'+item2.name"
:options="item2.codeOptions"/>--> :options="item2.codeOptions"/>-->
...@@ -137,9 +214,30 @@ ...@@ -137,9 +214,30 @@
</div> </div>
<!--按钮--> <!--按钮-->
<div class="ar cx-btn"> <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> <span @click="switchingConditions" class="color1 mg10"
<el-button type="primary" icon="el-icon-search" size="small" @click="doQuery">查询</el-button> ><i
<el-button plain icon="el-icon-delete" size="small" @click="clearData">清空</el-button> :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> </div>
<div class="paneDiv"> <div class="paneDiv">
...@@ -149,9 +247,21 @@ ...@@ -149,9 +247,21 @@
</el-col> </el-col>
</el-row> </el-row>
<!--可配置化图标--> <!--可配置化图标-->
<div style="height:30px;line-height: 30px;text-align: right;font-size:12px;position: relative;top: -13px;"> <div
<span class="setting" @click="centerDialogVisible = true"><i class="el-icon-setting pzhIcon" title="可配置化列表"></i>表头设置</span> style="height:30px;line-height: 30px;text-align: right;font-size:12px;position: relative;top: -13px;"
<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> >
<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> </div>
<!--表格--> <!--表格-->
<el-table <el-table
...@@ -163,18 +273,46 @@ ...@@ -163,18 +273,46 @@
style="width: 99%;margin:0 auto" style="width: 99%;margin:0 auto"
size="small" size="small"
border border
@selection-change="getRows"> @selection-change="getRows"
<el-table-column >
label="操作" <el-table-column label="操作" width="120">
width="120"> <template
<template slot-scope="scope"><el-button type="primary" size="mini">案件侦办</el-button></template> ><el-button type="primary" size="mini"
>案件侦办</el-button
></template
>
</el-table-column> </el-table-column>
<el-table-column v-for="columnTitle in propdefaultFormThead" :key="columnTitle.label" :label="columnTitle.label"> <el-table-column
v-for="columnTitle in propdefaultFormThead"
:key="columnTitle.label"
:label="columnTitle.label"
>
<template slot-scope="scope"> <template slot-scope="scope">
<div v-if="columnTitle.prop!='jyaq'"> <div v-if="columnTitle.prop != 'jyaq'">
{{ scope.row[columnTitle.prop] }} {{ scope.row[columnTitle.prop] }}
</div> </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> <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> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
...@@ -186,7 +324,9 @@ ...@@ -186,7 +324,9 @@
:page-size="page_size" :page-size="page_size"
layout="prev, pager, next" layout="prev, pager, next"
:small="true" :small="true"
:total="tableData.length" v-if="pageShow"> :total="tableData.length"
v-if="pageShow"
>
</el-pagination> </el-pagination>
</div> </div>
<!--配置化列表--> <!--配置化列表-->
...@@ -195,141 +335,165 @@ ...@@ -195,141 +335,165 @@
:visible.sync="centerDialogVisible" :visible.sync="centerDialogVisible"
width="480px" width="480px"
custom-class="zdyTheadDialog" custom-class="zdyTheadDialog"
center> center
>
<span> <span>
<!--可配置项--> <!--可配置项-->
<div class="filter-container"> <div class="filter-container">
<el-checkbox-group v-model="propdefaultCheckedThead"> <el-checkbox-group v-model="propdefaultCheckedThead">
<el-checkbox v-for="item in propAllformThead" :key="item.label" :label="item.label"> <el-checkbox
{{item.label}} v-for="item in propAllformThead"
:key="item.label"
:label="item.label"
>
{{ item.label }}
</el-checkbox> </el-checkbox>
</el-checkbox-group> </el-checkbox-group>
</div> </div>
</span> </span>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button @click="centerDialogVisible = false" size="mini">取 消</el-button> <el-button @click="centerDialogVisible = false" size="mini"
<el-button type="primary" size="mini" @click="handleCheckedChange">确 定</el-button> >取 消</el-button
>
<el-button type="primary" size="mini" @click="handleCheckedChange"
>确 定</el-button
>
</span> </span>
</el-dialog> </el-dialog>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import './styles/font-awesome.min.css' import "./styles/font-awesome.min.css";
export default { export default {
name: "newCases", name: "newCases",
components: { components: {},
props: {
}, PageTitle: String,
props:{ LeftMenu: {
PageTitle:String, type: Array,
LeftMenu:{
type:Array,
default: () => [] default: () => []
}, },
QueryField:{ QueryField: {
type:Array, type: Array,
default: () => [] default: () => []
}, },
AllformThead:{ AllformThead: {
type:Array, type: Array,
default: () => [] default: () => []
}, },
defaultCheckedThead:{ defaultCheckedThead: {
type:Array, type: Array,
default: () => []
},defaultFormThead:{
type:Array,
default: () => [] default: () => []
}, },
defaultFormThead: {
type: Array,
default: () => []
}
}, },
data(){ data() {
return{ return {
propLeftMenu:this.LeftMenu, propLeftMenu: this.LeftMenu,
propQueryField:this.QueryField, propQueryField: this.QueryField,
propAllformThead:this.AllformThead, propAllformThead: this.AllformThead,
propdefaultCheckedThead:this.defaultCheckedThead, propdefaultCheckedThead: this.defaultCheckedThead,
propdefaultFormThead:this.defaultFormThead, propdefaultFormThead: this.defaultFormThead,
toggleZd:false,/*默认收起条件*/ toggleZd: false /*默认收起条件*/,
isCollapse: true, isCollapse: true,
xalbSelected: '', xalbSelected: "",
xalbOptions: [], xalbOptions: [],
centerDialogVisible: false, centerDialogVisible: false,
key:1, key: 1,
tableData: [{/*表格数据*/ tableData: [
asjbh: 'A441985222215335222222', {
ajlb: '诈骗', /*表格数据*/
ajmc: '某某某被诈骗案', asjbh: "A441985222215335222222",
ajsj: '发案：2020-1-12', ajlb: "诈骗",
ladw: 'XXX分局', ajmc: "某某某被诈骗案",
jyaq: '简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情' ajsj: "发案：2020-1-12",
}, { ladw: "XXX分局",
asjbh: 'A441985222215335222223', jyaq:
ajlb: '诈骗', "简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情"
ajmc: '某某某被诈骗案', },
ajsj: '发案：2020-1-12', {
ladw: 'XXX分局', asjbh: "A441985222215335222223",
jyaq: '简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情' ajlb: "诈骗",
}, { ajmc: "某某某被诈骗案",
asjbh: 'A441985222215335222224', ajsj: "发案：2020-1-12",
ajlb: '诈骗', ladw: "XXX分局",
ajmc: '某某某被诈骗案', jyaq:
ajsj: '发案：2020-1-12', "简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情"
ladw: 'XXX分局', },
jyaq: '简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情' {
}, { asjbh: "A441985222215335222224",
asjbh: 'A441985222215335222225', ajlb: "诈骗",
ajlb: '诈骗', ajmc: "某某某被诈骗案",
ajmc: '某某某被诈骗案', ajsj: "发案：2020-1-12",
ajsj: '发案：2020-1-12', ladw: "XXX分局",
ladw: 'XXX分局', jyaq:
jyaq: '简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情' "简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情"
}, { },
asjbh: 'A441985222215335222226', {
ajlb: '诈骗', asjbh: "A441985222215335222225",
ajmc: '某某某被诈骗案', ajlb: "诈骗",
ajsj: '发案：2020-1-12', ajmc: "某某某被诈骗案",
ladw: 'XXX分局', ajsj: "发案：2020-1-12",
jyaq: '简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情' ladw: "XXX分局",
}, { jyaq:
asjbh: 'A441985222215335222227', "简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情"
ajlb: '诈骗', },
ajmc: '某某某被诈骗案', {
ajsj: '发案：2020-1-12', asjbh: "A441985222215335222226",
ladw: 'XXX分局', ajlb: "诈骗",
jyaq: '简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情' ajmc: "某某某被诈骗案",
}, { ajsj: "发案：2020-1-12",
asjbh: 'A441985222215335222228', ladw: "XXX分局",
ajlb: '诈骗', jyaq:
ajmc: '某某某被诈骗案', "简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情"
ajsj: '发案：2020-1-12', },
ladw: 'XXX分局', {
jyaq: '简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情' asjbh: "A441985222215335222227",
}], ajlb: "诈骗",
checkBoxData:[],/*勾选的案件*/ ajmc: "某某某被诈骗案",
startnum:0,//开始 ajsj: "发案：2020-1-12",
endnum:20,//结束 ladw: "XXX分局",
currentPage1:1, jyaq:
page_size:10, "简要案情简要案情简要案情简要案情简要案情简要案情简要案情简要案情"
pageShow:true, },
formData:{} {
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: { methods: {
switchingConditions(){/*展开收起条件*/ switchingConditions() {
this.toggleZd=!this.toggleZd; /*展开收起条件*/
console.log(this.toggleZd) this.toggleZd = !this.toggleZd;
this.propQueryField.forEach((val, index, arr) => { console.log(this.toggleZd);
if(val.hasOwnProperty("hidden")){ this.propQueryField.forEach(val => {
console.log(!this.toggleZd) if (Object.prototype.hasOwnProperty.call(val, "hidden")) {
console.log(this.propQueryField) console.log(!this.toggleZd);
this.$set(val,"hidden",!this.toggleZd);/*修改对象得值并触发视图*/ console.log(this.propQueryField);
this.$set(val, "hidden", !this.toggleZd); /*修改对象得值并触发视图*/
} }
}) });
console.log(this.propQueryField) console.log(this.propQueryField);
}, },
handleMenuOpen(key, keyPath) { handleMenuOpen(key, keyPath) {
console.log(key, keyPath); console.log(key, keyPath);
...@@ -337,46 +501,52 @@ ...@@ -337,46 +501,52 @@
handleMenuClose(key, keyPath) { handleMenuClose(key, keyPath) {
console.log(key, keyPath); console.log(key, keyPath);
}, },
doQuery(){ doQuery() {
this.propQueryField.forEach((val, index, arr) => { this.propQueryField.forEach(val => {
this.formData[val.id]=val.value; this.formData[val.id] = val.value;
}) });
console.log(this.formData) console.log(this.formData);
console.log(JSON.stringify(this.formData)) console.log(JSON.stringify(this.formData));
}, },
handleCurrentChange(val){ handleCurrentChange(val) {
this.startnum=(val-1)*this.page_size;//开始 this.startnum = (val - 1) * this.page_size; //开始
this.endnum=val*this.page_size;//结束 this.endnum = val * this.page_size; //结束
}, },
handleCheckedChange(){ handleCheckedChange() {
let _this=this,newObj=[]; let _this = this,
newObj = [];
_this.centerDialogVisible = false; _this.centerDialogVisible = false;
_this.propAllformThead.forEach((val,index)=>{ _this.propAllformThead.forEach(val => {
if(_this.propdefaultCheckedThead.includes(val.label)){ if (_this.propdefaultCheckedThead.includes(val.label)) {
_this.$set(newObj,newObj.length,val); _this.$set(newObj, newObj.length, val);
} }
}) });
_this.propdefaultFormThead=[]; _this.propdefaultFormThead = [];
_this.$set(_this.propdefaultFormThead,0,newObj); _this.$set(_this.propdefaultFormThead, 0, newObj);
_this.propdefaultFormThead = _this.propAllformThead.filter(i => _this.propdefaultCheckedThead.indexOf(i.label) >= 0) _this.propdefaultFormThead = _this.propAllformThead.filter(
_this.key = _this.key + 1// 为了保证table 每次都会重渲 In order to ensure the table will be re-rendered each time 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(){ clearData() {
this.propQueryField.forEach((val, index, arr)=>{ this.propQueryField.forEach(val => {
val.type=='checkbox'?val.value=[]:(val.type=='radio'?val.value=val.radioData[0]:val.value=''); val.type == "checkbox"
},window); ? (val.value = [])
: val.type == "radio"
? (val.value = val.radioData[0])
: (val.value = "");
}, window);
}, },
getRows(val){ getRows(val) {
this.checkBoxData = val; this.checkBoxData = val;
} }
}, },
watch: { watch: {},
}, mounted() {
mounted(){ var self = this;
var self=this; self.propQueryField.forEach(val => {
self.propQueryField.forEach((val, index, arr) => { if (val.type == "code") {
if(val.type=='code'){
//此处要写调用字典框得方法（此方法暂定） //此处要写调用字典框得方法（此方法暂定）
/*redis.getRedis(val.codeTree).then(response => { /*redis.getRedis(val.codeTree).then(response => {
if (response.success === true) { if (response.success === true) {
...@@ -386,8 +556,8 @@ ...@@ -386,8 +556,8 @@
} }
}); });
} }
} };
</script> </script>
<style lang="scss"> <style lang="scss">
@import "./styles/xcStyle"; @import "./styles/xcStyle";
</style> </style>
src/utils/rules.js
/* /*
验证规则 验证规则
*/ */
...@@ -12,7 +12,7 @@ function isSJH(value) { ...@@ -12,7 +12,7 @@ function isSJH(value) {
var isPhone = /^1[345789]\d{9}$/; var isPhone = /^1[345789]\d{9}$/;
return isPhone.test(value); return isPhone.test(value);
} }
//验证是否数字 //验证是否数字
function isNumber(value) { function isNumber(value) {
var isNum = /^[0-9]*$/; var isNum = /^[0-9]*$/;
return isNum.test(value); return isNum.test(value);
...@@ -24,15 +24,15 @@ function isAj(value) { ...@@ -24,15 +24,15 @@ function isAj(value) {
} }
// 验证是否车牌号 // 验证是否车牌号
function isYczc(value) { function isYczc(value) {
var isYczc =/^[A-Za-z0-9]{6}$/; var isYczc = /^[A-Za-z0-9]{6}$/;
return isYczc.test(value); return isYczc.test(value);
} }
// 验证是否密码6位数字字母组合 // 验证是否密码6位数字字母组合
function isPassword(value) { function isPassword(value) {
var isYczc =/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6}$/; var isYczc = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6}$/;
return isYczc.test(value); return isYczc.test(value);
} }
//验证是否小写字母 //验证是否小写字母
function validateLowerCase(val) { function validateLowerCase(val) {
const reg = /^[a-z]+$/; const reg = /^[a-z]+$/;
return reg.test(val); return reg.test(val);
...@@ -46,9 +46,10 @@ function validateUpperCase(val) { ...@@ -46,9 +46,10 @@ function validateUpperCase(val) {
function validatAlphabets(val) { function validatAlphabets(val) {
const reg = /^[A-Za-z]+$/; const reg = /^[A-Za-z]+$/;
return reg.test(val); return reg.test(val);
} }
//导出 //导出
export { //很关键 export {
//很关键
isSFZH, isSFZH,
isSJH, isSJH,
isNumber, isNumber,
...@@ -58,4 +59,4 @@ export { //很关键 ...@@ -58,4 +59,4 @@ export { //很关键
validateLowerCase, validateLowerCase,
validateUpperCase, validateUpperCase,
validatAlphabets 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