Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
88200887 by jiaozeping@pashanhoo.com
Options

Merge branch 'master' of http://yun.pashanhoo.com:9090/bdc/bdcdj-web

2 parents 3039b874 f41be3ee
Inline Side-by-side
Showing 2 changed files with 462 additions and 66 deletions
<template>
<div class="clxx">
<div class="clxx-box">
<div class="header">
<div class="title">{{ title }}</div>
<div class="left">
<div
v-for="item in menuList"
:key="item.id"
:class="['item', checkedId == item.id ? 'checked' : '']"
@click="menuClick(item)"
>
{{ item.label }}
</div>
<div class="img-box">
<img :src="showImg.imgUrl" alt="" />
</div>
<div class="right">
<!-- 材料目录明细 -->
<div class="clmlmx-box" v-if="checkedId == '1'">
<div class="title">申请材料目录</div>
<lb-table
:column="column"
border
:key="key"
heightNumSetting
:pagination="false"
:data="tableData"
>
</lb-table>
</div>
<div class="img-list">
<div class="item" v-for="(item, index) in imgList" :key="index">
<img
:class="showImg.id == item.id ? 'active' : ''"
:src="item.imgUrl"
alt=""
@click="imgClick(item)"
/>
<!-- 材料预览 -->
<div class="clyl-box" v-if="checkedId == '2'">
<div class="menu-tree">
<div class="item" v-for="item in treedata" :key="item.id">
{{ item.label }}
<i :class="iclass" @click="iconClick()"></i>
<el-collapse-transition>
<div v-show="menuOpen">
<div
v-for="item2 in item.children"
:key="item2.id"
:class="['child', treeCheckId == item2.id ? 'checked' : '']"
@click="treeClick(item2)"
>
{{ item2.label }}
</div>
</div>
</el-collapse-transition>
</div>
</div>
<div class="clyl-img">
<div class="header">
<div class="title">{{ title }}</div>
<div class="i-group">
<i class="el-icon-zoom-in"></i>
<i class="el-icon-zoom-out"></i>
<i class="el-icon-refresh-right"></i>
<i class="el-icon-refresh-left"></i>
<i class="el-icon-document"></i>
</div>
</div>
<div class="img-box">
<img :src="showImg.imgUrl" alt="" />
</div>
<div class="img-list">
<div class="item" v-for="(item, index) in imgList" :key="index">
<img
:class="showImg.id == item.id ? 'active' : ''"
:src="item.imgUrl"
alt=""
@click="imgClick(item)"
/>
</div>
</div>
<div class="btn-group">
<el-button>扫描</el-button>
<el-button icon="el-icon-upload2">上传文件</el-button>
<el-button icon="el-icon-delete">删除</el-button>
</div>
</div>
</div>
<div class="btn-group">
<el-button>扫描</el-button>
<el-button>上传文件</el-button>
<el-button icon="el-icon-delete">删除</el-button>
</div>
</div>
<clxxAddDialog v-model="isDialog"/>
</div>
</template>
<script>
import clxxAddDialog from "./clxxAddDialog.vue"
export default {
/**注册组件*/
components: {},
components: {clxxAddDialog},
data() {
return {
isDialog:false,
menuList: [
{
id: "1",
label: "材料目录明细",
},
{
id: "2",
label: "材料预览",
},
],
checkedId: "1",
column: [
{
width: "60",
renderHeader: (h, scope) => {
return (
<i
class="el-icon-plus pointer"
onClick={() => {
this.handleAdd();
}}
style="color:#409EFF"
></i>
);
},
render: (h, scope) => {
if (scope.row.isAdd) {
return (
<i
class="el-icon-minus pointer"
onClick={() => {
this.handleMinus(scope.$index, scope.row);
}}
></i>
);
}
},
},
{
width: "60",
label: "序号",
type: "index",
},
{
prop: "sfbx",
label: "是否必选",
width: "100",
},
{
prop: "clmc",
label: "材料名称",
},
{
prop: "cllx",
label: "材料类型",
},
{
prop: "fs",
label: "份数",
},
{
prop: "smzt",
label: "扫描状态",
},
{
prop: "smys",
label: "扫描页数",
},
{
label: "操作",
width: "90",
render: (h, scope) => {
return (
<div>
<el-button
type="text"
disabled={scope.$index == 0}
onClick={() => {
this.moveUpward(scope.$index, scope.row);
}}
>
上移
</el-button>
<el-button
type="text"
disabled={scope.$index + 1 == this.tableData.length}
onClick={() => {
this.moveDown(scope.$index, scope.row);
}}
>
下移
</el-button>
</div>
);
},
},
],
tableData: [
{
sfbx: "必选",
clmc: "不动产登记申请书",
cllx: "原件正本",
fs: 2,
smzt: "已扫描",
smys: 4,
},
{
sfbx: "必选",
clmc: "申请人身份证明",
cllx: "正本复印件",
fs: 1,
smzt: "已扫描",
smys: 6,
},
{
sfbx: "必选",
clmc: "土地权属来源材",
cllx: "副本复印件",
fs: 1,
smzt: "未扫描",
smys: 0,
},
{
sfbx: "必选",
clmc: "不动产权籍调查表",
cllx: "副本复印件",
fs: 1,
smzt: "未扫描",
smys: 0,
},
{
sfbx: "必选",
clmc: "完税凭证",
cllx: "副本复印件",
fs: 1,
smzt: "未扫描",
smys: 0,
},
],
treedata: [
{
id: "clml",
label: "材料目录",
children: [
{
id: "bdcdjsqs",
label: "不动产登记申请书",
},
{
id: "sqrsfzm",
label: "申请人身份证明",
},
{
id: "tdqslycl",
label: "土地权属来源材料",
},
{
id: "bdcqjdcb",
label: "不动产权籍调查表",
},
{
id: "wspz",
label: "完税凭证",
},
],
},
],
menuOpen: true,
treeCheckId: "bdcdjsqs",
defaultProps: {
children: "children",
label: "label",
},
defaultKey: "bdcdjsqs",
title: "不动产登记申请书 (1/2)",
imgList: [
{
......@@ -50,9 +281,30 @@ export default {
id: "1",
imgUrl: require("../images/1.png"),
},
iclass: "itemIcon el-icon-caret-bottom",
};
},
methods: {
// 左侧菜单点击
menuClick(item) {
this.checkedId = item.id;
},
// 添加材料目录
handleAdd() {},
// 材料目录关闭收起
iconClick() {
this.menuOpen = !this.menuOpen;
if (this.menuOpen) {
this.iclass = "itemIcon el-icon-caret-bottom close";
} else {
this.iclass = "itemIcon el-icon-caret-bottom open";
}
},
// 材料目录点击选中
treeClick(item) {
this.treeCheckId = item.id;
},
// 小图片点击
imgClick(item) {
this.showImg = item;
},
......@@ -63,61 +315,185 @@ export default {
.clxx {
width: 100%;
height: 100%;
&-box {
width: 800px;
height: 800px;
background: #e4e4e4;
margin: 0 auto;
.header {
height: 30px;
background: #fff;
text-align: center;
.title {
height: 28px;
line-height: 28px;
font-size: 13px;
padding: 0 8px;
border: 1px solid #aaa;
display: inline-block;
}
display: flex;
padding-left: 15px;
.left {
width: 52px;
height: 780px;
background: #f3f4f7;
border-radius: 1px;
.item {
width: 42px;
height: 50%;
margin: 0 0 auto auto;
writing-mode: tb;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
font-family: PingFangSC-Medium, PingFang SC;
color: #7a7a7a;
cursor: pointer;
border-right: 1px solid #d9d9d9;
}
.item.checked {
background: #ffffff;
border-top: 1px solid #d9d9d9;
border-bottom: 1px solid #d9d9d9;
border-left: 2px solid #2b7ff1;
border-right: none;
font-size: 18px;
color: #4a4a4a;
}
.img-box {
width: 800px;
height: 610px;
line-height: 610px;
padding: 5px;
text-align: center;
img {
max-height: 600px;
max-width: 790px;
}
.right {
width: calc(100% - 80px);
height: 780px;
padding: 0 30px;
.clmlmx-box {
width: 100%;
height: 530px;
margin: 0 auto;
border: 1px solid #d9d9d9;
background: #f3f4f7;
padding: 20px;
.title {
text-align: center;
height: 60px;
line-height: 60px;
border: 1px solid #dfe6ec;
font-size: 20px;
background: #81d3f81a;
margin-bottom: -1px;
}
}
.img-list {
.clyl-box {
width: 100%;
height: 80px;
line-height: 80px;
background: #ccc;
text-align: center;
.item {
display: inline-block;
margin: 10px 5px;
img {
width: 60px;
height: 100%;
display: flex;
.menu-tree {
width: 20%;
height: 100%;
margin-right: 30px;
border-right: 1px dotted #d9d9d9;
padding: 0 24px;
.item {
height: 60px;
cursor: pointer;
line-height: 60px;
border-bottom: 1px solid #e8e8e8;
font-size: 16px;
color: #4a4a4a;
.itemIcon {
float: right;
line-height: 60px;
cursor: pointer;
}
@keyframes open {
100% {
transform: rotate(180deg);
}
}
@keyframes close {
0% {
transform: rotate(180deg);
}
100% {
transform: rotate(-0deg);
}
}
.open {
animation: open 0.5s;
animation-fill-mode: both;
}
.close {
animation: close 0.5s;
animation-fill-mode: both;
}
.child {
height: 60px;
line-height: 60px;
border-bottom: 1px solid #e8e8e8;
padding-left: 18px;
color: #6b6b6b;
cursor: pointer;
}
.checked {
border-radius: 6px;
border: 1px solid #4083f9;
}
}
}
.clyl-img {
width: 75%;
height: 800px;
background: #f3f4f7;
margin: 0 auto;
.header {
height: 54px;
line-height: 52px;
background: #eceef2;
border: 1px solid #ededed;
padding: 0 0 0 30px;
.title {
font-size: 13px;
display: inline-block;
}
.i-group {
float: right;
height: 100%;
i {
width: 50px;
height: 52px;
cursor: pointer;
}
}
}
.img-box {
width: 800px;
height: calc(100% - 214px);
padding: 5px;
text-align: center;
margin: 0 auto;
img {
max-height: 100%;
max-width: 100%;
}
}
.active {
border: 1px solid #fff;
.img-list {
width: 100%;
height: 80px;
line-height: 80px;
background: #eceef2;
text-align: center;
.item {
display: inline-block;
margin: 10px 5px;
img {
width: 60px;
height: 60px;
cursor: pointer;
}
.active {
border: 1px solid #fff;
}
}
}
.btn-group {
width: 100%;
height: 80px;
line-height: 80px;
background: #fff;
text-align: center;
}
}
}
.btn-group {
width: 100%;
height: 80px;
line-height: 80px;
background: #fff;
text-align: center;
}
}
}
</style>
\ No newline at end of file
......
<template>
<dialogBox title="新建材料信息" width="60%">
</dialogBox>
</template>
<script>
export default {
props: {
},
data () {
return {}
},
methods: {}
}
</script>
<style scoped lang="scss">
</style>