Skip to content

F
founder_vue
Commit 21affb2d by 西瓜
Options

标识号信息

parent 761a1332
Showing with 285 additions and 138 deletions
src/views/cbyp/bshxx.vue
<template>
<div class="Content">
<div class="rightContent">
<div class="rightContent">
<!-- 搜索输入框 -->
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
<el-tab-pane label="用户管理" name="first">
<div class="Content paneDiv paneDiv2">
<div class="cxtjWrap">
<el-form
label-position="right"
label-width="140px"
ref="bztj"
:model="formData"
>
<div class="zdyLine">
<el-form-item
:label="item.name + ':'"
v-for="item in BztjCxtj"
:key="item.id"
:prop="item.id"
:class="'demo-input-suffix zdycol' + item.col"
>
<div class="zdyInputW zdyInputCol2">
<el-date-picker
v-model="formData[item.id]"
type="date"
align="right"
:picker-options="item.pickerOptions"
unlink-panels
value-format="yyyy-MM-dd HH:mm:ss"
>
</el-date-picker>
至
<el-date-picker
v-model="formData[item.id2]"
type="date"
align="right"
:picker-options="item.pickerOptions2"
unlink-panels
value-format="yyyy-MM-dd HH:mm:ss"
>
</el-date-picker>
<div style="margin: 10px 20px;">
<el-tabs v-model="activeName" @tab-click="handleClick">
<!-- 标识号 -->
<el-tab-pane label="标识号管理" name="first">
<div class="Content paneDiv paneDiv2">
<div class="cxtjWrap">
<el-form
label-position="right"
label-width="140px"
ref="bztj"
:model="formData"
>
<div class="zdyLine">
<el-form-item
:label="item.name + ':'"
v-for="item in BztjCxtj"
:key="item.id"
:prop="item.id"
:class="'demo-input-suffix zdycol' + item.col"
>
<!--输入框-->
<el-input
clearable
:placeholder="item.placeholder"
v-model="formData[item.id]"
v-if="item.type == 'text'"
>
</el-input>
<!--下拉框-->
<el-select
v-model="formData[item.id]"
clearable
:placeholder="item.placeholder"
v-else-if="item.type == 'select'"
>
<el-option
v-for="item3 in item.selectData"
:key="item3.value"
:label="item3.name"
:value="item3.value"
>
</el-option>
</el-select>
</el-form-item>
</div>
</el-form>
<!--按钮-->
<div class="btm-btns">
<el-button type="primary" size="small" style="width: 100px"
>查询
</el-button>
<el-button
size="small"
@click="clearData"
style="width: 100px"
>清空
</el-button>
</div>
</el-form-item>
</div>
</el-form>
<!--按钮-->
<div class="btm-btns">
<el-button type="primary" size="small" style="width: 100px"
>查询
</el-button>
<el-button size="small" @click="clearData" style="width: 100px"
>清空
</el-button>
</div>
</div>
</div>
<!-- 表格内容 -->
<div class="Content paneDiv paneDiv2">
<div class="">
<el-row style="width: 99%; margin: 0 auto">
<el-col :span="24">
<span class="flTtitle">案件信息</span>
<!--可配置化图标-->
<div class="total">
<span> {{ tableDataLength }} </span>
</div>
<span class="export-btn">
<el-button
plain
</div>
<!-- 表格内容 -->
<div class="Content paneDiv paneDiv2">
<div class="">
<el-row style="width: 99%; margin: 0 auto">
<el-col :span="24">
<span class="flTtitle">标识号信息</span>
<!--可配置化图标-->
<div class="total">
<span> {{ tableDataLength }} </span>
</div>
<span class="export-btn">
<el-button
plain
size="small"
@click="export2Excel"
class="export"
><i
class="iconfont iconshangchuan"
style="margin-right: 2px"
></i
>导出
</el-button>
</span>
</el-col>
</el-row>
<!--表格-->
<el-table
v-loading="tableLoading"
element-loading-text="拼命加载中"
ref="itsmDataTable"
tooltip-effect="dark"
max-height="600"
style="width: 99%; margin: 0 auto"
width="100%"
size="small"
@click="export2Excel"
class="export"
><i
class="iconfont iconshangchuan"
style="margin-right: 2px"
></i
>导出
</el-button>
</span>
</el-col>
</el-row>
:row-class-name="tableRowClassName"
>
<el-table-column
align="center"
v-for="columnTitle in bztjFormThead"
:prop="columnTitle.prop"
:key="columnTitle.label"
:label="columnTitle.label"
:width="columnTitle.width"
>
</el-table-column>
</el-table>
<!--分页-->
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage1"
:page-sizes="[10, 20, 50, 100]"
:page-size="page_size"
layout="sizes,prev, pager, next"
:total="tableDataLength"
>
</el-pagination>
</div>
</div>
</el-tab-pane>
<!-- 白名单 -->
<el-tab-pane label="白名单管理" name="second">
<div class="Content paneDiv paneDiv2">
<div class="cxtjWrap">
<el-form
label-position="right"
label-width="140px"
ref="bztj"
:model="formData"
>
<div class="zdyLine">
<el-form-item
:label="item.name + ':'"
v-for="item in BztjCxtj"
:key="item.id"
:prop="item.id"
:class="'demo-input-suffix zdycol' + item.col"
>
<!--输入框-->
<el-input
clearable
:placeholder="item.placeholder"
v-model="formData[item.id]"
v-if="item.type == 'text'"
>
</el-input>
<!--下拉框-->
<el-select
v-model="formData[item.id]"
clearable
:placeholder="item.placeholder"
v-else-if="item.type == 'select'"
>
<el-option
v-for="item3 in item.selectData"
:key="item3.value"
:label="item3.name"
:value="item3.value"
>
</el-option>
</el-select>
</el-form-item>
</div>
</el-form>
<!--按钮-->
<div class="btm-btns">
<el-button type="primary" size="small" style="width: 100px"
>查询
</el-button>
<el-button
size="small"
@click="clearData"
style="width: 100px"
>清空
</el-button>
</div>
</div>
</div>
<!-- 表格内容 -->
<div class="Content paneDiv paneDiv2">
<div class="">
<el-row style="width: 99%; margin: 0 auto">
<el-col :span="24">
<span class="flTtitle">白名单信息</span>
<!--可配置化图标-->
<div class="total">
<span> {{ tableDataLength }} </span>
</div>
<span class="export-btn">
<el-button
plain
size="small"
@click="export2Excel"
class="export"
><i
class="iconfont iconshangchuan"
style="margin-right: 2px"
></i
>导出
</el-button>
</span>
</el-col>
</el-row>
<!--表格-->
<el-table
v-loading="tableLoading"
element-loading-text="拼命加载中"
ref="itsmDataTable"
tooltip-effect="dark"
max-height="600"
style="width: 99%; margin: 0 auto"
width="100%"
size="small"
:row-class-name="tableRowClassName"
>
<el-table-column
align="center"
v-for="columnTitle in bztjFormThead"
:prop="columnTitle.prop"
:key="columnTitle.label"
:label="columnTitle.label"
:width="columnTitle.width"
>
</el-table-column>
</el-table>
<!--分页-->
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage1"
:page-sizes="[10, 20, 50, 100]"
:page-size="page_size"
layout="sizes,prev, pager, next"
:total="tableDataLength"
>
</el-pagination>
</div>
<!--表格-->
<el-table
v-loading="tableLoading"
element-loading-text="拼命加载中"
ref="itsmDataTable"
tooltip-effect="dark"
max-height="600"
style="width: 99%; margin: 0 auto"
width="100%"
size="small"
:row-class-name="tableRowClassName"
>
<el-table-column
align="center"
v-for="columnTitle in bztjFormThead"
:prop="columnTitle.prop"
:key="columnTitle.label"
:label="columnTitle.label"
:width="columnTitle.width"
>
</el-table-column>
</el-table>
<!--分页-->
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage1"
:page-sizes="[10, 20, 50, 100]"
:page-size="page_size"
layout="sizes,prev, pager, next"
:total="tableDataLength"
>
</el-pagination>
</div>
</div>
</el-tab-pane>
</el-tabs>
</div>
</el-tab-pane>
<el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
</el-tabs>
</div>
</div>
</template>
......@@ -139,26 +266,30 @@ export default {
tableDataLength: 30,
// 查询条件
formData: {
lasjRqsjKssj: '',
lasjRqsjJssj: '',
asjfssjKssj: '',
asjfssjJssj: ''
jdc: '',
id: ''
},
// 输入框
BztjCxtj: [
{
name: '立案时间',
id: 'lasjRqsjKssj',
id2: 'lasjRqsjJssj',
type: 'zdyDate',
name: '标识号',
id: 'jdc',
type: 'text',
value: '',
placeholder: '请输入',
col: '3'
},
{
name: '发案事件',
id: 'asjfssjKssj',
id2: 'asjfssjJssj',
type: 'zdyDate',
name: '标识号类型',
id: 'bshlx',
type: 'select',
selectData: [
{ value: '', name: '全部' },
{ value: 'mobile', name: '手机号' },
{ value: 'yhkh', name: '银行卡号' },
{ value: 'personid', name: '身份证号' },
{ value: 'carid', name: '车牌号' }
],
value: '',
col: '3'
}
......@@ -166,11 +297,21 @@ export default {
// 表格表头
bztjFormThead: [
{
label: '立案单位',
prop: 'dwmc',
width: '280'
label: '操作',
prop: 'cz'
// width: '280'
},
],
{
label: '标识号类型',
prop: 'bshlx'
// width: '280'
},
{
label: '标识号',
prop: 'bsh'
// width: '280'
}
]
}
},
methods: {
......@@ -178,7 +319,7 @@ export default {
handleClick (tab, event) {
console.log(tab, event)
},
// 清空按钮
// 清空按钮
clearData () {
this.formData = {}
},
......@@ -203,11 +344,17 @@ export default {
<style scoped lang="scss">
@import '../../assets/styles/rightContent.scss';
.rightContent .paneDiv2[data-v-f9e97310] {
background: #FFFFFF;
border: 1px solid #EAEAEA;
box-shadow: none;
opacity: 1;
border-radius: 8px;
margin: 10px 20px;
background: #ffffff;
border: 1px solid #eaeaea;
box-shadow: none;
opacity: 1;
border-radius: 8px;
margin: 10px 0px;
}
div#pane-first {
margin-top: -10px;
}
div#pane-second {
margin-top: -10px;
}
</style>
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