Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
8aed46f3 by 任超
Options

style;分屏

1 parent 6aa973ce
Inline Side-by-side
Showing 3 changed files with 184 additions and 151 deletions
......@@ -6,66 +6,31 @@
<el-row>
<el-col :span="5">
<el-form-item label="业务来源">
<el-select
v-model="queryForm.ywly"
filterable
clearable
placeholder="请选择业务来源"
>
<el-option
v-for="item in ywlys"
:key="item.value"
:label="item.label"
:value="item.value"
>
<el-select v-model="queryForm.ywly" filterable clearable placeholder="请选择业务来源">
<el-option v-for="item in ywlys" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="权利类型">
<el-select
v-model="queryForm.qllx"
filterable
clearable
placeholder="请选择权利类型"
>
<el-option
v-for="item in qllxs"
:key="item.value"
:label="item.label"
:value="item.value"
>
<el-select v-model="queryForm.qllx" filterable clearable placeholder="请选择权利类型">
<el-option v-for="item in qllxs" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="登记类型">
<el-select
v-model="queryForm.djlx"
filterable
clearable
placeholder="请选择登记类型"
>
<el-option
v-for="item in djlxs"
:key="item.value"
:label="item.label"
:value="item.value"
>
<el-select v-model="queryForm.djlx" filterable clearable placeholder="请选择登记类型">
<el-option v-for="item in djlxs" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="业务号">
<el-input
placeholder="请输入业务号"
v-model="queryForm.ywh"
clearable
class="width200px"
>
<el-input placeholder="请输入业务号" v-model="queryForm.ywh" clearable class="width200px">
</el-input>
</el-form-item>
</el-col>
......@@ -80,30 +45,30 @@
</el-form>
</div>
<!-- 表格 -->
<!-- 表格 -->
<div class="from-clues-content">
<lb-table :page-size="pageData.size" heightNumSetting :current-page.sync="pageData.current"
:total="pageData.total" @size-change="handleSizeChange" @p-current-change="handleCurrentChange"
:column="tableData.columns" :data="tableData.data">
</lb-table>
</div>
<!-- 表格 -->
<div class="from-clues-content">
<lb-table :page-size="pageData.size" :current-page.sync="pageData.current" :total="pageData.total"
@size-change="handleSizeChange" @p-current-change="handleCurrentChange" :column="tableData.columns"
:data="tableData.data">
</lb-table>
</div>
</div>
</template>
<script>
import table from "@/utils/mixin/table";
import { datas, sendThis } from "./dbxdata";
import {searchTaskToDo} from "@/api/ywbl.js"
import { searchTaskToDo } from "@/api/ywbl.js"
export default {
name: "dbx",
components: {},
mixins: [table],
mounted() {
mounted () {
sendThis(this);
},
data() {
data () {
return {
qllxs:[],
djlxs:[],
qllxs: [],
djlxs: [],
queryForm: {
ywly: "",
qllx: "",
......@@ -117,7 +82,7 @@ export default {
},
ywlys: datas.ywlys(),
tableData: {
columns: datas.columns(),
data: [],
......@@ -127,8 +92,8 @@ export default {
created () { },
methods: {
// 列表渲染接口
fetchData(){
searchTaskToDo({...this.queryForm,...this.pageData}).then(res=>{
fetchData () {
searchTaskToDo({ ...this.queryForm, ...this.pageData }).then(res => {
if (res.code === 200) {
let { total, records } = res.result
this.pageData.total = total;
......@@ -136,18 +101,18 @@ export default {
}
})
},
queryClick(){
queryClick () {
this.fetchData()
},
handleSort(name, sort) {
handleSort (name, sort) {
console.log(name, sort);
},
openDialog() {
openDialog () {
console.log(999999999999999);
},
ywhClick(bsmSlsq){
ywhClick (bsmSlsq) {
const { href } = this.$router.resolve('/fqsq?bsmSlsq=' + bsmSlsq)
window.open(href, '_blank');
window.open(href, '_blank');
},
},
};
......
<template>
<div class='slxx'>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" :label-position="flagTop" :inline="flag" label-width="180px">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" :label-position="flagTop" :inline="flag"
label-width="140px">
<div class="slxx_title">受理信息</div>
<el-row>
<el-col :span="8">
<el-form-item label="业务号：" prop="ywh">
<el-input :class="{'width200px':flag}" v-model="ruleForm.ywh"></el-input>
<el-input :class="{ 'width200px': flag }" v-model="ruleForm.ywh"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="受理人员：" prop="slry">
<el-input :class="{'width200px':flag}" v-model="ruleForm.slry"></el-input>
<el-input :class="{ 'width200px': flag }" v-model="ruleForm.slry"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="使用权结束时间：" prop="slsj">
<el-date-picker :class="[flag?'width200px':'Inputclass']" v-model="ruleForm.slsj" type="datetime" placeholder="选择结束时间"
value-format="yyyy-MM-dd" >
</el-date-picker>
<el-date-picker :class="[flag ? 'width200px' : 'Inputclass']" v-model="ruleForm.slsj" type="datetime"
placeholder="选择结束时间" value-format="yyyy-MM-dd">
</el-date-picker>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="权利类型：" prop="qllx">
<el-select :class="[flag?'width200px':'Inputclass']" v-model="ruleForm.qllx" filterable clearable placeholder="请选择权利类型">
<el-select :class="[flag ? 'width200px' : 'Inputclass']" v-model="ruleForm.qllx" filterable clearable
placeholder="请选择权利类型">
<el-option v-for="item in qllxOption" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
......@@ -32,7 +34,8 @@
</el-col>
<el-col :span="8">
<el-form-item label="登记类型：" prop="djlx">
<el-select :class="[flag?'width200px':'Inputclass']" v-model="ruleForm.djlx" filterable clearable placeholder="请选择登记类型">
<el-select :class="[flag ? 'width200px' : 'Inputclass']" v-model="ruleForm.djlx" filterable clearable
placeholder="请选择登记类型">
<el-option v-for="item in djlxOption" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
......@@ -40,7 +43,8 @@
</el-col>
<el-col :span="8">
<el-form-item label="登记情形：" prop="djqx">
<el-select :class="[flag?'width200px':'Inputclass']" v-model="ruleForm.djqx" filterable clearable placeholder="请选择登记情形">
<el-select :class="[flag ? 'width200px' : 'Inputclass']" v-model="ruleForm.djqx" filterable clearable
placeholder="请选择登记情形">
<el-option v-for="item in djqxOption" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
......@@ -51,17 +55,18 @@
<el-row>
<el-col :span="8">
<el-form-item label="宗地代码：" prop="zddm">
<el-input :class="{'width200px':flag}" v-model="ruleForm.zddm"></el-input>
<el-input :class="{ 'width200px': flag }" v-model="ruleForm.zddm"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="不动产单元号：" prop="bdcdyh">
<el-input :class="{'width200px':flag}" v-model="ruleForm.bdcdyh"></el-input>
<el-input :class="{ 'width200px': flag }" v-model="ruleForm.bdcdyh"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="权利性质：" prop="qlxz">
<el-select :class="[flag?'width200px':'Inputclass']" v-model="ruleForm.qlxz" filterable clearable placeholder="请选择登记情形">
<el-select :class="[flag ? 'width200px' : 'Inputclass']" v-model="ruleForm.qlxz" filterable clearable
placeholder="请选择登记情形">
<el-option v-for="item in qlxzOption" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
......@@ -71,19 +76,20 @@
<el-row>
<el-col :span="8">
<el-form-item label="宗地面积：" prop="zdmj">
<el-input :class="{'width200px':flag}" v-model="ruleForm.zdmj"></el-input>
<el-input :class="{ 'width200px': flag }" v-model="ruleForm.zdmj"></el-input>
</el-form-item>
</el-col>
<el-col :span="16">
<el-form-item label="坐落：" prop="zl">
<el-input style="width: 100%" v-model="ruleForm.zl"></el-input>
<el-input style="width: 100%" v-model="ruleForm.zl"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="土地用途：" prop="tdyt">
<el-select :class="[flag?'width200px':'Inputclass']" v-model="ruleForm.tdyt" filterable clearable placeholder="请选择登记情形">
<el-select :class="[flag ? 'width200px' : 'Inputclass']" v-model="ruleForm.tdyt" filterable clearable
placeholder="请选择登记情形">
<el-option v-for="item in tdytOption" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
......@@ -91,7 +97,8 @@
</el-col>
<el-col :span="8">
<el-form-item label="权利设定方式：" prop="qlsdfs">
<el-select :class="[flag?'width200px':'Inputclass']" v-model="ruleForm.qlsdfs" filterable clearable placeholder="请选择登记情形">
<el-select :class="[flag ? 'width200px' : 'Inputclass']" v-model="ruleForm.qlsdfs" filterable clearable
placeholder="请选择登记情形">
<el-option v-for="item in qlsdfsOption" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
......@@ -99,37 +106,37 @@
</el-col>
<el-col :span="8">
<el-form-item label="取得价格：" prop="qdjg">
<el-input :class="{'width200px':flag}" v-model="ruleForm.qdjg"></el-input>
<el-input :class="{ 'width200px': flag }" v-model="ruleForm.qdjg"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="使用权起始时间：" prop="syqqssj">
<el-date-picker :class="[flag?'width200px':'Inputclass']" v-model="ruleForm.syqqssj" type="datetime" placeholder="选择起始时间"
value-format="yyyy-MM-dd" >
</el-date-picker>
<el-date-picker :class="[flag ? 'width200px' : 'Inputclass']" v-model="ruleForm.syqqssj" type="datetime"
placeholder="选择起始时间" value-format="yyyy-MM-dd">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="使用权结束时间：" prop="syqjssj">
<el-date-picker :class="[flag?'width200px':'Inputclass']" v-model="ruleForm.syqjssj" type="datetime" placeholder="选择结束时间"
value-format="yyyy-MM-dd" >
</el-date-picker>
<el-date-picker :class="[flag ? 'width200px' : 'Inputclass']" v-model="ruleForm.syqjssj" type="datetime"
placeholder="选择结束时间" value-format="yyyy-MM-dd">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="使用期限：" prop="syqx">
<el-date-picker :class="[flag?'width200px':'Inputclass']" v-model="ruleForm.syqx" type="datetime" placeholder="选择使用期限"
value-format="yyyy-MM-dd" >
</el-date-picker>
<el-date-picker :class="[flag ? 'width200px' : 'Inputclass']" v-model="ruleForm.syqx" type="datetime"
placeholder="选择使用期限" value-format="yyyy-MM-dd">
</el-date-picker>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col>
<el-form-item label="附记：" prop="fj">
<el-input type="textarea" v-model="ruleForm.fj"></el-input>
<el-input type="textarea" v-model="ruleForm.fj"></el-input>
</el-form-item>
</el-col>
</el-row>
......@@ -145,7 +152,7 @@
</el-form-item>
</el-col>
<el-col>
<InformationTable />
<InformationTable />
</el-col>
</el-row>
<div class="slxx_title">登记原因</div>
......@@ -167,42 +174,42 @@
</div>
</template>
<script>
let flag = false //控制分屏样式的开关按钮
let flag = false //控制分屏样式的开关按钮
import InformationTable from './InformationTable'
export default {
/**注册组件*/
components: {InformationTable},
components: { InformationTable },
data () {
return {
flag:flag,
flagTop:flag?'top':'',
qllxOption:[],
djlxOption:[],
djqxOption:[],
qlxzOption:[],
tdytOption:[],
qlsdfsOption:[],
flag: flag,
flagTop: flag ? 'top' : '',
qllxOption: [],
djlxOption: [],
djqxOption: [],
qlxzOption: [],
tdytOption: [],
qlsdfsOption: [],
ruleForm: {
ywh: '',
slry:"",
slsj:"",
qllx:"",
djlx:"",
djqx:"",
zddm:"",
bdcdyh:"",
qlxz:"",
zdmj:"",
zl:"",
tdyt:"",
qlsdfs:"",
qdjg:"",
syqqssj:"",
syqjssj:"",
syqx:"",
fj:"",
djyy:"",
gyfs:"",
slry: "",
slsj: "",
qllx: "",
djlx: "",
djqx: "",
zddm: "",
bdcdyh: "",
qlxz: "",
zdmj: "",
zl: "",
tdyt: "",
qlsdfs: "",
qdjg: "",
syqqssj: "",
syqjssj: "",
syqx: "",
fj: "",
djyy: "",
gyfs: "",
},
rules: {
// ywh: [
......@@ -213,33 +220,37 @@ export default {
},
methods: {
onSubmit(){},
onSubmit () { },
},
}
</script>
<style scoped lang='scss'>
@import "~@/styles/public.scss";
@import "~@/styles/public.scss";
.slxx_title {
border-bottom: 1px solid $borderColor;
padding-left: 10px;
padding-bottom: 20px;
margin-bottom: 15px;
margin-top: 30px;
font-size: 18px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #4A4A4A;
border-bottom: 1px solid $borderColor;
padding-left: 10px;
padding-bottom: 20px;
margin-bottom: 15px;
margin-top: 30px;
font-size: 18px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #4A4A4A;
}
.btn{
.btn {
text-align: center;
}
.textArea{
/deep/.el-textarea__inner{
min-height: 90px!important;
.textArea {
/deep/.el-textarea__inner {
min-height: 90px !important;
}
}
.Inputclass{
.Inputclass {
width: 100%;
}
</style>
\ No newline at end of file
......
......@@ -2,7 +2,7 @@
<div class='fqsq'>
<div class="fqsq-header">
<ul>
<li @click="operation(index)" v-for="(item, index) in headerleftList.slice(0, headerleftList.length - 4)"
<li @click="operation(index, item)" v-for="(item, index) in headerleftList.slice(0, headerleftList.length - 4)"
:key="index">
<svg-icon :icon-class="item.icon" />
<span class="iconName">{{ item.name }}</span>
......@@ -15,11 +15,18 @@
</li>
</ul>
</div>
<el-tabs v-model="activeName">
<el-tab-pane :label="item.name" :name="index + 1 + ''" v-for="(item, index) in tabList" :key="index">
</el-tab-pane>
</el-tabs>
<component :is="editItem" />
<div class="tabsList">
<p v-show="issplitScreen" class="splitScreen tabsList-title">材料信息</p>
<el-tabs v-model="activeName">
<el-tab-pane :label="item.name" :name="index + 1 + ''" v-for="(item, index) in tabList" :key="index">
</el-tab-pane>
</el-tabs>
</div>
<div class="splitScreen-con">
<div class="splitScreen" v-show="issplitScreen"></div>
<component :is="editItem" :key="key" />
</div>
</div>
</template>
<script>
......@@ -29,6 +36,7 @@ export default {
components: {},
data () {
return {
key: 0,
headerleftList: [
{
name: '图形定位',
......@@ -76,7 +84,7 @@ export default {
}
],
activeName: '1',
tabList: [
tabList1: [
{
name: '受理申请',
},
......@@ -93,7 +101,9 @@ export default {
name: '权利信息',
},
],
editItem: ''
tabList: [],
editItem: '',
issplitScreen: false
};
},
watch: {
......@@ -105,11 +115,23 @@ export default {
immediate: true
}
},
created () {
this.tabList = [...this.tabList1]
},
methods: {
operation (index) {
if (index == 3) {
window.close()
operation (index, item) {
if (item.icon == 'fqsq5') {
this.key++
this.issplitScreen = !this.issplitScreen
if (this.issplitScreen) {
this.tabList.splice(1, 1)
} else {
this.tabList = [...this.tabList1]
}
}
// if (index == 3) {
// window.close()
// }
},
loadView (view) {
return r => require.ensure([], () => r(require(`./components/${view}.vue`)))
......@@ -119,10 +141,12 @@ export default {
</script>
<style scoped lang='scss'>
@import "~@/styles/mixin.scss";
/deep/.svg-icon{
/deep/.svg-icon {
width: 1.5em;
height: 1.5em;
height: 1.5em;
}
/deep/.el-tabs__nav-wrap {
padding: 5px 0 0 15px;
}
......@@ -130,24 +154,39 @@ export default {
/deep/.el-tabs__nav-wrap::after {
height: 1px;
}
.iconName{
.iconName {
line-height: 30px;
}
.fqsq {
width: 100%;
height: 100%;
padding: 0 10%;
padding: 0 3%;
box-sizing: border-box;
background-color: #ffffff;
.splitScreen-con {
display: flex;
}
.splitScreen {
min-width: 500px;
width: 550px;
border-right: 1px solid $borderColor;
}
&-header {
@include flex;
width: 100%;
height: 64px;
height: 80px;
background-color: #10CCB8;
color: #ffffff;
justify-content: space-between;
padding-left: 15px;
position: sticky;
top: 0;
z-index: 100;
ul {
@include flex;
......@@ -160,5 +199,23 @@ export default {
}
}
}
.tabsList {
width: 100%;
position: sticky;
top: 80px;
background-color: #ffffff;
z-index: 100;
@include flex;
}
.tabsList-title {
display: block;
line-height: 59px;
}
/deep/.el-tabs {
width: 100%;
}
}
</style>
\ No newline at end of file
......