Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
4bcf4ea0 by 田浩浩
Options

提交文件分类

1 parent c89b862f
Expand all
Inline Side-by-side
Showing 8 changed files with 778 additions and 0 deletions
import filter from '@/utils/filter.js'
class data extends filter {
constructor() {
super()
}
columns () {
return [
{
prop: "qszt",
label: "权属状态",
},
{
prop: "qllxmc",
label: "权利类型",
},
{
prop: "djlxmc",
label: "登记类型",
},
{
prop: "ssywh",
label: "上手业务号",
},
{
prop: "dah",
label: "档案号",
},
{
prop: "ywh",
label: "业务号",
},
{
prop: "bdcdyh",
label: "不动产单元号",
},
{
prop: "zl",
label: "坐落",
},
{
prop: "qlrlx",
label: "权利人类型",
},
{
prop: "qlrmc",
label: "权利人",
},
{
prop: "qlrzjzl",
label: "证件种类",
},
{
prop: "qlrzjhm",
label: "证件号",
},
{
prop: "gyfs",
label: "共有情况",
},
{
prop: "mj",
label: "使用权面积(m²)",
},
{
prop: "qlxz",
label: "权利性质",
},
{
prop: "ytmc",
label: "土地用途",
},
{
prop: "syqqzsj",
label: "使用权起止时间",
},
{
prop: "tdsyqx",
label: "土地使用期限",
},
{
prop: "qdjg",
label: "取得价格(万元)",
},
{
prop: "djyy",
label: "登记原因",
},
{
prop: "bdcqzh",
label: "不动产权证号",
},
{
prop: "djsj",
label: "登记时间",
},
{
prop: "dbr",
label: "登簿人",
},
{
prop: "fj",
label: "附记",
},
]
}
}
let datas = new data()
export {
datas
}
\ No newline at end of file
<template>
<div class="djxxTable">
<div class="tableBox">
<div class="title">
{{ title }}
<div class="checkbox">
<el-checkbox-group v-model="checkList" @change="checkChange">
<el-checkbox v-for="item in qsztList" :key="item.value" :label="item.value">{{ item.label }}</el-checkbox>
</el-checkbox-group>
</div>
</div>
<div class="xxTableBox">
<table class="xxTable">
<tr v-for="(item, colindex) in columns" :key="colindex">
<td>
{{ item.label }}
</td>
<td v-for="(row, index) in tableData" :key="index" :class="[
row.qszt == '2' ? 'lishi' : '',
row.qszt == '0' ? 'linshi' : '',
item.prop == 'qszt' && row.qszt == '0' ? 'linshiIcon' : '',
]">
<div class="icon" v-if="item.prop == 'qszt' && row.qszt == '0'">
正在办理
</div>
<span v-if="item.prop == 'qszt'">
{{ getQsztName(row[item.prop]) }}
</span>
<span v-else> {{ row[item.prop] }}</span>
</td>
<td v-for="count in emptycolNum" :key="~count"></td>
</tr>
</table>
</div>
</div>
</div>
</template>
<script>
import { datas } from "./jsydsyq.js";
import { getJsydsyqList } from "@/api/zhcx.js";
export default {
data () {
return {
qsztList: [
{
value: "0",
label: "临时",
},
{
value: "1",
label: "现势",
},
{
value: "2",
label: "历史",
},
],
checkList: ["0", "1", "2"],
//传递参数
propsParam: {},
//列表数据
tableData: [],
//空列值个数
emptycolNum: 0,
//列名称对象
columns: [],
title: "建设用地使用权、宅基地使用权登记信息",
};
},
created () {
this.propsParam = this.$attrs;
console.log(this.$attrs, 'this.$attrs;');
this.columns = datas.columns();
this.loadData();
// this.$alert(datas.columns());
},
methods: {
loadData () {
//this.$alert(this.propsParam.bdcdyh);
getJsydsyqList({
bdcdyid: this.propsParam.bdcdyid,
qllx: this.propsParam.qllx,
qszt: this.checkList,
}).then((res) => {
if (res.code === 200) {
this.tableData = res.result;
this.emptycolNum = 3 - this.tableData.length;
}
});
},
checkChange () {
this.loadData();
},
getQsztName (code) {
let name = "";
for (let item of this.qsztList) {
if (item.value == code) {
name = item.label;
break;
}
}
return name;
},
},
};
</script>
<style lang="scss" scoped>
@import "./qlxxCommon.scss";
</style>
//流程环节操作按钮
export function getForm(tabName) {
let form;
switch (tabName) {
case "slxx":
form = require("@/views/ywbl/fqsq/components/slxx.vue");
break;
case "slxxCfdj":
form = require("@/views/ywbl/fqsq/components/slxxCfdj.vue");
break;
case "clxx":
form = require("@/views/ywbl/fqsq/components/clxx.vue");
break;
case "spyj":
form = require("@/views/ywbl/fqsq/components/spyj.vue");
break;
case "zdjbxx":
form = require("@/views/zhcx/djbcx/components/zdxx.vue");
break;
case "qlxx":
form = require("@/views/zhcx/djbcx/components/jsydsyq.vue");
break;
case "szxx":
form = require("@/views/ywbl/fqsq/components/szxx.vue");
break;
case "fzxx":
form = require("@/views/ywbl/fqsq/components/fzxx.vue");
break;
}
return (r) => require.ensure([], () => r(form));
}
.containerFrame {
height: 100%;
width: 100%;
position: sticky;
top: 80px;
border: 1px solid #ebeef5;
z-index: 100;
@include flex;
}
.leftmenu {
width: 0;
transition: all 0.3s;
border-right: 1px solid #ebeef5;
position: relative;
box-sizing: border-box;
padding-right: 5px;
.title {
line-height: 36px;
text-align: center;
}
.title-detail {
display: flex;
flex-wrap: wrap;
width: 100%;
}
ul {
position: relative;
.xian {
background: #f2f2f2;
padding: 2px;
}
.title {
padding: 5px;
text-align: center;
}
li {
padding: 5px;
font-size: 14px;
line-height: 20px;
cursor: pointer;
}
li:hover {
color: #0f93f6;
cursor: pointer;
}
}
}
.animation-map-drawer {
width: 260px;
}
/deep/.el-menu-item {
padding-left: 5px !important;
}
/deep/.el-tabs__header {
margin-bottom: 0 !important;
}
/deep/.el-menu-item.is-active {
background-color: #e7f4fe;
}
.leftCon {
flex: 1;
width: calc(100% - 260px);
display: flex;
}
.splitScreen-con {
flex: 1;
width: 0;
}
.rightContainer {
flex: 1;
width: 0;
height: calc(100vh - 80px);
}
/deep/.el-tabs {
box-sizing: border-box;
padding: 0 5px;
width: 100%;
}
.svg-icon {
width: 2.5em;
height: 2.5em;
}
.iconName {
line-height: 24px;
font-size: 12px;
}
.container {
width: 100%;
height: 100%;
padding: 0;
box-sizing: border-box;
background-color: #ffffff;
overflow: hidden;
}
.map-drawer {
width: 20px;
height: 79px;
position: absolute;
top: 30%;
z-index: 99;
cursor: pointer;
}
.map-drawer-expand {
background: url("../../../image/right.png");
background-size: cover;
right: 0%;
}
.map-drawer-click {
background: url("../../../image/left.png");
background-size: cover;
left: 0%;
}
.topButton {
@include flex;
width: 100%;
height: 80px;
background-color: #3498db;
color: #ffffff;
justify-content: space-between;
padding-left: 15px;
position: sticky;
top: 0;
z-index: 100;
ul {
@include flex;
li {
@include flex-center;
cursor: pointer;
flex-direction: column;
margin-right: 15px;
box-sizing: border-box;
width: 70px;
margin: 0 5px;
}
li:hover {
border: 1px solid #ffffff;
border-radius: 5px;
}
}
}
\ No newline at end of file
<template>
<div class="container">
<!-- 顶部内容框 -->
<div class="topButton">
<!-- 左侧业务功能按钮 -->
<ul>
<li @click="operation(index, item)" v-for="(item, index) in leftButtonList" :key="index">
<svg-icon :icon-class="item.icon" />
<span class="iconName">{{ item.name }}</span>
</li>
</ul>
<!-- 右侧流程按钮 -->
<ul>
<li @click="operation(index, item)" v-for="(item, index) in rightButtonList" :key="index">
<svg-icon class="icon" :icon-class="item.icon" />
<span class="iconName">{{ item.name }}</span>
</li>
</ul>
</div>
<!-- 内容框架 -->
<div class="containerFrame">
<!-- 左侧菜单栏 -->
<div class="leftmenu" :class="{ 'animation-map-drawer': isShowdrawer }">
<div v-if="this.isShowdrawer">
<div class="title">申请单元列表({{ unitData.length }})</div>
<el-menu :default-active="activeIndex" @select="unitClick">
<el-menu-item v-for="(item, index) in unitData" :index="index.toString()" :key="index">
<p>{{ item.bdcdyh }}</p>
<p class="title-detail">{{ item.zl }}</p>
</el-menu-item>
</el-menu>
</div>
<div class="map-drawer-click map-drawer" v-if="!isShowdrawer" @click="
() => {
this.isShowdrawer = !this.isShowdrawer;
}
"></div>
<div class="map-drawer-expand map-drawer" v-else @click="
() => {
this.isShowdrawer = !this.isShowdrawer;
}
"></div>
</div>
<div class="leftCon">
<!-- 分屏左侧预览 -->
<div v-if="splitScreen" class="splitScreen-con">
<component :is="clxxForm" v-bind="currentSelectProps" :key="fresh" />
</div>
<!-- 表单内容区域 -->
<div class="rightContainer">
<el-tabs v-model="tabName" @tab-click="tabClick">
<el-tab-pane :label="item.name" :name="item.value" v-for="(item, index) in tabList" :key="index">
</el-tab-pane>
</el-tabs>
<component :key="fresh" :is="componentTag" v-bind="currentSelectProps" />
</div>
</div>
</div>
<dialogBox title="流程图" width="70%" isMain v-model="myValue" :isFullscreen="false" :isButton="false">
<img :src="imgSrc" style="margin: 20px 0" />
</dialogBox>
</div>
</template>
<style scoped lang='scss'>
@import "~@/styles/mixin.scss";
@import "./workFrame.scss";
</style>
<script>
import {
leftMenu,
stepExpandInfo,
record,
getNextLinkInfo,
completeTask,
} from "@/api/fqsq.js";
import { getWorkFlowImage } from "@/api/jsydsyqFlow.js"
import { getForm } from "./flowform.js";
export default {
data () {
return {
// 流程图
imgSrc: '',
myValue: false,
// 折叠
isShowdrawer: true,
// 默认选中
activeIndex: '0',
//受理申请标识码
bsmSlsq: this.$route.query.bsmSlsq,
//当前流程所在环节
bestepid: this.$route.query.bestepid,
//顶部左侧按钮集合
leftButtonList: [],
//顶部右侧按钮集合
rightButtonList: [],
//左侧菜单数据集合
unitData: [],
//设置那个表单选中
tabName: "",
//表单集合
tabList: [],
//选择加载哪一个组件
componentTag: "",
//设置表单组件是否刷选值
fresh: 10,
//设置表单传递数据
currentSelectProps: {},
//是否开启材料分屏
splitScreen: false,
//材料分屏表单
clxxForm: "",
//材料信息选择卡索引
clxxIndex: "",
//材料信息选项卡对象
clxxTab: {},
};
},
mounted () {
this.loadBdcdylist();
this.flowInitParam();
},
methods: {
//加载流程初始参数
flowInitParam () {
var formdata = new FormData();
formdata.append("bsmSlsq", this.bsmSlsq);
formdata.append("bestepid", this.bestepid);
stepExpandInfo(formdata).then((res) => {
if (res.code === 200) {
this.leftButtonList = res.result.button;
this.rightButtonList = res.result.operation;
this.tabList = res.result.form;
//默认选择第一个选项卡内容
this.tabName = res.result.form[0].value;
let that = this;
this.tabList.forEach(function (item, index) {
if (item.value == "clxx") {
that.clxxIndex = index;
that.clxxForm = getForm(item.value);
that.clxxTab = item;
}
});
//默认加载第一个选项卡的组件内容
this.getFromRouter(res.result.form[0].value);
}
});
},
//流程环节操作按钮
operation (index, item) {
let that = this;
switch (item.value) {
case "B1":
getWorkFlowImage(this.bsmSlsq).then(res => {
this.imgSrc = URL.createObjectURL(res)
this.myValue = true
})
break;
case "zsyl":
this.zsylFlag = true;
break;
case "clfp": //材料分屏按钮
this.splitScreen = this.splitScreen ? false : true;
this.$store.dispatch('app/settScreen', this.splitScreen)
if (this.splitScreen) {
//如果当前选项卡为材料信息内容，递减到上一个选项卡内容
if (this.tabName == this.clxxTab.value) {
this.tabName = this.tabList[this.clxxIndex - 1].value;
this.getFromRouter(this.tabList[this.clxxIndex - 1].value);
}
this.tabList.splice(this.clxxIndex, 1);
} else {
this.tabList.splice(this.clxxIndex, 1, this.clxxTab);
}
break;
case "th": //退回按钮
break;
case "zc": //转件按钮
getNextLinkInfo({
bsmSlsq: this.bsmSlsq,
bestepid: this.bestepid,
}).then((res) => {
if (res.code === 200) {
this.send(res.result);
}
});
// this.$alert(res.result);
break;
case "tc":
window.close();
break;
case "db":
var formdata = new FormData();
formdata.append("bsmSlsq", this.bsmSlsq);
formdata.append("bestepid", this.bestepid);
// comMsg;
this.$confirm("请确认是否登簿", "提示", {
iconClass: "el-icon-question", //自定义图标样式
confirmButtonText: "确认", //确认按钮文字更换
cancelButtonText: "取消", //取消按钮文字更换
showClose: true, //是否显示右上角关闭按钮
type: "warning", //提示类型 success/info/warning/error
}).then(function () {
record(formdata).then((res) => {
if (res.code === 200 || res.code === 2002) {
that.$alert(res.message);
}
});
});
break;
}
},
//读取申请单元信息
loadBdcdylist () {
var formdata = new FormData();
formdata.append("bsmSlsq", this.bsmSlsq);
formdata.append("bestepid", this.bestepid);
leftMenu(formdata).then((res) => {
if (res.code === 200) {
this.unitData = res.result;
this.currentSelectProps = res.result[0];
}
})
},
//申请单元点击事件
unitClick (index) {
if (this.currentSelectProps.bsmSldy != this.unitData[index].bsmSldy) {
this.currentSelectProps = this.unitData[index];
this.fresh += 1;
}
},
//表单选项卡事件
tabClick (tab, event) {
this.getFromRouter(tab.name);
},
//切换选项卡内容组件
getFromRouter (tabname) {
this.componentTag = getForm(tabname);
},
//发送下一个环节
send (obj) {
const h = this.$createElement;
this.$msgbox({
title: "您确定转出吗？",
message: h("div", { style: "margin: auto" }, [
h("span", null, "下个环节名称："),
h("i", { style: "color: teal" }, obj.taskName),
h("div", null, ""),
h("span", null, "下个环节经办人： "),
h("i", { style: "color: teal" }, obj.usernames.join("，")),
]),
showCancelButton: true,
beforeClose: (action, instance, done) => {
if (action === "confirm") {
instance.confirmButtonLoading = true;
instance.confirmButtonText = "执行中...";
completeTask({
bsmSlsq: this.bsmSlsq,
shyj: "this.bestepid",
}).then((res) => {
if (res.code === 200) {
instance.confirmButtonLoading = false;
this.$message.success("转件成功");
setTimeout(() => {
window.opener = null;
window.open("about:blank", "_self");
window.close();
this.$emit("input", false);
}, 1000);
}
});
} else {
done();
}
},
}).then((action) => {
this.$message({
type: "info",
message: "action: " + action
})
})
}
}
}
</script>
\ No newline at end of file
<template>
<dialogBox title="新建材料信息" width="20%" isMain v-model="myValue" @closeDialog="closeDialog" @submitForm="handleSubmit"
:isFullscreen="false">
<el-form :model="ruleForm" ref="ruleForm" label-width="70px">
<el-row>
<el-col :span="24">
<el-form-item label="材料类型">
<el-select v-model="ruleForm.cllx" class="width100" placeholder="请选择">
<el-option v-for="item in dictData['A40']" :key="item.dcode" :label="item.dname" :value="item.dcode">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="材料名称">
<el-input v-model="ruleForm.clmc"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</dialogBox>
</template>
<script>
import { mapGetters } from "vuex";
export default {
props: {
value: { type: Boolean, default: false },
},
data () {
return {
myValue: this.value,
ruleForm: {
cllx: "",
clmc: "",
},
};
},
computed: {
...mapGetters(["dictData"]),
},
watch: {
value (val) {
this.myValue = val;
},
},
methods: {
closeDialog () {
this.$emit("input", false);
},
handleSubmit () {
this.$parent.addSave(this.ruleForm);
this.$emit("input", false);
},
},
};
</script>
<style scoped lang="scss">
.submit-button {
text-align: center;
height: 52px;
padding-top: 10px;
background-color: #fff;
}
</style>