Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
a889f2a9 by 田浩浩
Options

提交新建的工作流程框架

1 parent 06981cd9
Inline Side-by-side
Showing 11 changed files with 551 additions and 424 deletions
<template>
<div class="djxxTable">
<div class="tableBox">
<div class="title">
{{ title }}
<div class="checkbox">
<el-checkbox-group v-model="checkList" @change="checkChange">
<el-checkbox label="临时"></el-checkbox>
<el-checkbox label="现势"></el-checkbox>
<el-checkbox label="历史"></el-checkbox>
</el-checkbox-group>
</div>
</div>
<div class="xxTableBox">
<table class="xxTable">
<tr>
<th rowspan="3">业务类型</th>
</tr>
<!-- 第一行表头 -->
<tr class="one">
<th
v-for="(item, index) in ths"
:key="index"
:class="[item.class, item.type == '临时' ? 'linshiIcon' : '']"
>
<div class="icon" v-if="item.type == '临时'">正在办理</div>
{{ item.type }}
</th>
</tr>
<!-- 第二行表头 -->
<tr class="two">
<th v-for="(item, index) in ths" :key="index" :class="item.class">
<p>{{ item.qllxmc }}</p>
<p>{{ item.djlxmc }}</p>
</th>
</tr>
<!-- 数据 -->
<tr v-for="(item, index) in columns" :key="index">
<td>
{{ item.label }}
</td>
<td
v-for="(item1, index1) in showTableData"
:key="index1"
:class="[
item1.qszt == '2' ? 'lishi' : '',
item1.qszt == '0' ? 'linshi' : '',
]"
>
{{ item1[item.prop] }}
</td>
</tr>
</table>
</div>
</div>
</div>
</template>
<script>
import { datas } from "./jsydsyq";
import { getJsydsyqList } from "@/api/zhcx.js";
export default {
name: "jsydsyq",
data() {
return {
checkList: ["临时", "现势", "历史"],
tableData: [],
showTableData: [],
ths: [],
columns: [],
title: "建设用地使用权、宅基地使用权登记信息",
emptyData: {
ssywh: "",
dah: "",
ywh: "",
bdcdyh: "",
zl: "",
qlrlx: "",
qlrmc: "",
qlrzjzl: "",
qlrzjhm: "",
gyfs: "",
mj: null,
qlxz: "",
ytmc: "",
syqqzsj: null,
tdsyqx: null,
qdjg: null,
djyy: "",
bdcqzh: null,
djsj: "",
dbr: "",
fj: "",
qllxmc: "",
djlxmc: "",
qszt: "",
},
};
},
async created() {
var Sldy = this.$parent._data.unitData[0];
// 清空值
this.tableData = [];
this.ths = [];
this.columns = datas.columns();
let res = await getJsydsyqList({
bdcdyid: Sldy.bdcdyid,
qllx: Sldy.qllx,
qszt: [],
});
let resList = res.result.result ? res.result.result : [];
if (resList.length < 3) {
let num = 3 - resList.length;
for (let i = 0; i < num; i++) {
resList.push(this.emptyData);
}
}
let detail = resList;
detail.length > 0 &&
detail.forEach((item) => {
this.tableData.push(item);
if (item.qszt == "0") {
this.ths.push({
type: "临时",
qllxmc: item.qllxmc,
djlxmc: item.djlxmc,
prop: "linshi",
class: "linshi",
});
} else if (item.qszt == "1") {
this.ths.push({
type: "现势",
qllxmc: item.qllxmc,
djlxmc: item.djlxmc,
prop: "xianshi",
class: "xianshi",
});
} else if (item.qszt == "2") {
this.ths.push({
type: "历史",
qllxmc: item.qllxmc,
djlxmc: item.djlxmc,
prop: "lishi",
class: "lishi",
});
}
});
this.showTableData = this.tableData;
},
methods: {
checkChange() {},
},
};
</script>
<style lang="scss" scoped>
.djxxTable {
width: 100%;
height: 100%;
background: #fff;
overflow-y: scroll;
color: #333;
.tableBox {
margin: 0 auto;
display: flex;
flex-wrap: wrap;
.title {
width: 100%;
font-weight: 700;
font-size: 16px;
text-align: center;
background: #e9e9e9;
height: 62px;
line-height: 62px;
position: relative;
margin: 1px 0;
.checkbox {
position: absolute;
right: 20px;
bottom: -16px;
height: 62px;
}
}
.xxTableBox {
overflow-x: scroll;
width: 100%;
}
.xxTable > tr:first-child th {
width: 140px;
}
tr td {
border: 1px solid #ccc;
}
.xxTable {
// border-spacing: 0;
border-spacing: 1px;
width: 100%;
tr > th {
background: #464c5b;
color: #fff;
font-size: 16px;
height: 60px;
}
th.linshi,
th.xianshi {
background: #464c5b;
}
th.lishi {
background: rgba(70, 76, 91, 0.8);
}
.one th {
height: 25px;
font-size: 14px;
}
th.linshi {
color: #fe9400;
}
.two th {
height: 45px;
p:nth-child(2) {
font-size: 14px;
}
}
.linshiIcon {
position: relative;
}
.linshiIcon::after {
content: "";
display: block;
width: 0;
height: 0;
border-width: 0px 0px 55px 55px;
border-style: none solid solid;
border-color: transparent transparent #fe9400;
position: absolute;
top: 0;
right: 0;
transform: rotate(-90deg);
}
.icon {
position: absolute;
top: 13px;
right: -4px;
transform: rotate(45deg);
color: #fff;
font-size: 12px;
z-index: 10;
}
tr td {
text-align: center;
height: 40px;
padding: 4px;
font-size: 13px;
width: 140px;
}
> tr:nth-child(odd) td {
background: #f2f2f2;
}
> tr:nth-child(even) td {
background: #f9f9f9;
}
td.linshi {
color: #fe9400;
}
tr > td.lishi {
color: #7f7f7f;
}
}
}
}
</style>
......@@ -150,8 +150,8 @@ export default {
});
},
ywhClick (item) {
const { href } = this.$router.resolve('/fqsq?bsmSlsq=' + item.bsmSlsq + '&bestepid=' + item.bestepid + '&bsmBusiness=' + '&viewtype=1');
//const { href } = this.$router.resolve('/workFrame?bsmSlsq=' + item.bsmSlsq + '&bestepid=' + item.bestepid + '&bsmBusiness=' + '&viewtype=1');
//const { href } = this.$router.resolve('/fqsq?bsmSlsq=' + item.bsmSlsq + '&bestepid=' + item.bestepid + '&bsmBusiness=' + '&viewtype=1');
const { href } = this.$router.resolve('/workFrame?bsmSlsq=' + item.bsmSlsq + '&bestepid=' + item.bestepid + '&bsmBusiness=' + '&viewtype=1');
window.open(href, '_blank');
},
},
......
......@@ -290,9 +290,10 @@ import { Init, fristReg } from "@/api/jsydsyqFlow.js";
import { mapGetters } from "vuex";
export default {
async created() {
var bsmSldy = this.$parent._data.unitData[0].bsmSldy;
//var bsmSldy = this.$parent._data.unitData[0].bsmSldy;
this.propsParam = this.$attrs;
var formdata = new FormData();
formdata.append("bsmSldy", bsmSldy);
formdata.append("bsmSldy", this.propsParam.bsmSldy);
Init(formdata).then((res) => {
if (res.code === 200 && res.result) {
this.ruleForm = {
......@@ -347,6 +348,8 @@ export default {
// 持证人
czr: "",
},
//传递参数
propsParam: {},
rules: {},
};
},
......
......@@ -260,7 +260,7 @@ export default {
loadViewSlsq() {
return (r) =>
require.ensure([], () =>
r(require("../../components/jsydsyq/jsydsyq.vue"))
r(require("../../zhcx/djbcx/components/jsydsyq.vue"))
);
},
},
......
// 时间戳转化
// export default {
// timestampToTime(timestamp) {
// let strDate;
// var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
// var Y = date.getFullYear() + '-';
// var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
// var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
// var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
// var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
// strDate = Y + M + D + h + m;
// return strDate;
// },
// }
//流程环节操作按钮
export function operation(index, item) {
let that = this;
switch (item.value) {
case "zsyl":
this.zsylFlag = true;
break;
case "clfp":
this.key++;
this.issplitScreen = !this.issplitScreen;
this.flag = !this.flag;
if (this.issplitScreen) {
this.tabList.splice(1, 1);
} else {
this.tabList = [...this.tabList1];
}
break;
case "th":
this.thflag = true;
this.$nextTick(() => {
this.$refs.thdialogRef.tablelistFn();
});
break;
case "zc":
this.zcDialog = true;
this.$refs.zcDialogRef.tablelistFn();
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;
}
}
export function loadBdcdylist(that) {
var formdata = new FormData();
formdata.append("bsmSlsq", that.bsmSlsq);
formdata.append("bestepid", that.bestepid);
leftMenu(formdata).then((res) => {
if (res.code === 200) {
that.unitData = res.result;
that.currentSelectProps = res.result[0];
//debugger;
//this.$alert(res.result[0].bsmSldy);
// setTimeout(() => {
// that.$refs.slxx?.[0].list(that.unitData?.[0]?.bsmSldy);
// this.bsmBusiness = that.unitData?.[0]?.bsmBusiness;
// }, 300);
}
});
}
\ No newline at end of file
#ContainerFrame {
height: 100%;
width: 100%;
position: sticky;
top: 80px;
//background-color: #ffffff;
border: 1px solid #ebeef5;
z-index: 100;
@include flex;
}
#leftmenu {
width: 250px;
border-right: 1px solid #ebeef5;
position: relative;
box-sizing: border-box;
ul {
position: relative;
.xian {
background: #f2f2f2;
padding: 2px;
}
.title {
padding: 5px;
text-align: center;
}
li {
padding: 5px;
font-size: 14px;
color: #606266;
line-height: 20px;
}
li:hover {
color: #0f93f6;
cursor: pointer;
}
}
}
#rightContainer {
.tabDiv {
width: 100%;
height: 100%;
}
// .fenpin {
// min-width: 50%;
// border-right: 1px solid #ebeef5;
// }
background-color: #ffffffe7;
width: 100%;
height: 100%;
z-index: 100;
@include flex;
}
.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;
}
.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;
//color: $light-blue ;
.svg-icon {
//color: $light-blue ;
}
}
}
}
\ No newline at end of file
......@@ -29,21 +29,33 @@
<div id="ContainerFrame">
<!-- 左侧菜单栏 -->
<div id="leftmenu">
<ul>
<p class="title">申请单元列表({{ unitData.length }})</p>
<div class="title">申请单元列表({{ unitData.length }})</div>
<!-- <ul>
<div v-for="(item, index) in unitData" :key="index">
<li @click="unitClick(item)">
<p>{{ item.bdcdyh }}</p>
<p>{{ item.zl }}</p>
</li>
<!-- <div class="xian"></div> -->
</div>
</ul>
</ul> -->
<el-menu default-active="0" @select="selectItems">
<el-menu-item
:index="index"
v-for="(item, index) in unitData"
:key="index"
>
<i>
<p>{{ item.bdcdyh }}</p>
<p>{{ item.zl }}</p>
</i>
</el-menu-item>
</el-menu>
</div>
<!-- 表单内容区域 -->
<div id="rightContainer">
<div class="tabDiv">
<el-tabs v-model="activeName" @tab-click="tabClick">
<el-tabs v-model="tabName" @tab-click="tabClick">
<el-tab-pane
:label="item.name"
:name="item.value"
......@@ -52,7 +64,11 @@
>
</el-tab-pane>
</el-tabs>
<component :is="componentTag" v-bind="currentSelectProps" />
<component
:key="fresh"
:is="componentTag"
v-bind="currentSelectProps"
/>
</div>
<!-- <div style="width: 100%">
......@@ -64,142 +80,40 @@
<style scoped lang='scss'>
@import "~@/styles/mixin.scss";
#ContainerFrame {
// margin-left: 5px;
// border: 1px solid #ebeef5;
// position: relative;
// box-sizing: border-box;
// width: 100%;
// height: 100%;
// display: inline;
height: 100%;
width: 100%;
position: sticky;
top: 80px;
//background-color: #ffffff;
border: 1px solid #ebeef5;
z-index: 100;
@include flex;
}
#leftmenu {
width: 250px;
border-right: 1px solid #ebeef5;
position: relative;
box-sizing: border-box;
ul {
position: relative;
.xian {
background: #f2f2f2;
padding: 2px;
}
.title {
padding: 5px;
text-align: center;
}
li {
padding: 5px;
font-size: 14px;
color: #606266;
line-height: 20px;
}
li:hover {
color: #0f93f6;
cursor: pointer;
}
}
}
#rightContainer {
.tabDiv {
width: 100%;
height: 100%;
}
// .fenpin {
// min-width: 50%;
// border-right: 1px solid #ebeef5;
// }
background-color: #ffffffe7;
width: 100%;
height: 100%;
z-index: 100;
@include flex;
}
.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;
}
.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;
//color: $light-blue ;
.svg-icon {
//color: $light-blue ;
}
}
}
}
@import "./workFrame.scss";
</style>
<script>
import { leftMenu, stepExpandInfo, record } from "@/api/fqsq.js";
export default {
components: {
//注册表单组件，后期改为路由模式
slxx: () => import("./components/slxx.vue"),
spyj: () => import("./components/spyj.vue"),
zdjbxx: () => import("../../zhcx/djbcx/components/zdxx.vue"),
qlxx: () => import("../../components/jsydsyq/jsydsyq.vue"),
qlxx: () => import("../../zhcx/djbcx/components/jsydsyq.vue"),
},
data() {
return {
//受理申请标识码
bsmSlsq: "",
//当前流程所在环节
bestepid: "",
//顶部左侧按钮集合
leftButtonList: [],
//顶部右侧按钮集合
rightButtonList: [],
//左侧菜单数据集合
unitData: [],
activeName: "",
//设置那个表单选中
tabName: "",
//表单集合
tabList: [],
//选择加载哪一个组件
componentTag: "",
//设置表单组件是否刷选值
fresh: 0,
//设置表单传递数据
currentSelectProps: {},
};
},
......@@ -210,6 +124,18 @@ export default {
this.flowInitParam();
},
methods: {
selectItems(index) {
//this.$alert(index);
//this.$store.state.adminleftnavnum = index;
if (this.currentSelectProps.bsmSldy != this.unitData[index].bsmSldy) {
this.currentSelectProps = this.unitData[index];
this.fresh += 1;
}
//按钮选中之后设置当前的index为store里的值。
},
//加载流程初始参数
flowInitParam() {
var formdata = new FormData();
......@@ -221,7 +147,7 @@ export default {
this.rightButtonList = res.result.operation;
this.tabList = res.result.form;
//默认选择第一个选项卡内容
this.activeName = res.result.form[0].value;
this.tabName = res.result.form[0].value;
//默认加载第一个选项卡的组件内容
this.componentTag = res.result.form[0].value;
}
......@@ -285,6 +211,37 @@ export default {
leftMenu(formdata).then((res) => {
if (res.code === 200) {
this.unitData = res.result;
this.unitData.push({
bsmSldy: "edd5ffc12c8dcc237ad06447618dcddc",
bsmBusiness: "ee5187fa978c9002c3a2991ae5d70482",
bsmSsql: null,
ybdcqzsh: null,
bdcdyid: "dded1d6615be4fbf02de75c93bb5084e",
bdcdyh: "610102123666GB10165W00000000",
bdcdylx: null,
xmmc: null,
jzwmc: null,
fh: null,
zl: "陕西省新城区大庆路1号村",
bglx: "0",
wqhtid: null,
wqhtbh: null,
htlx: null,
wqsj: null,
ydybh: null,
djyy: "GYJSY2222D",
qllx: "A03",
djlx: "200",
sqzsbs: null,
gyfs: null,
sqfbcz: null,
sfxysczs: null,
sfxyffzs: null,
issave: null,
taskId: null,
});
// this.unitData.push(res.result[0]);
// this.unitData.push(res.result[0]);
this.currentSelectProps = res.result[0];
//debugger;
//this.$alert(res.result[0].bsmSldy);
......
......@@ -7,9 +7,20 @@ class data extends filter {
columns () {
return [
{
prop: "qszt",
label: "权属状态",
},
{
prop: "qllxmc",
label: "权利类型",
},
{
prop: "djlxmc",
label: "登记类型",
},
{
prop: "ssywh",
label: "上手业务号",
width: "120"
},
{
prop: "dah",
......
<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 in columns" :key="item">
<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;
this.columns = datas.columns();
this.loadData();
},
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>
.djxxTable {
width: 100%;
height: 100%;
background: #fff;
overflow-y: scroll;
color: #333;
.tableBox {
margin: 0 auto;
display: flex;
flex-wrap: wrap;
.title {
width: 100%;
font-weight: 700;
font-size: 16px;
text-align: center;
background: #e9e9e9;
height: 62px;
line-height: 62px;
position: relative;
margin: 1px 0;
.checkbox {
position: absolute;
right: 20px;
bottom: -16px;
height: 62px;
}
}
.xxTableBox {
overflow-x: scroll;
width: 100%;
}
.xxTable > tr:first-child th {
width: 140px;
}
// tr td {
// border: 1px solid #ccc;
// }
.xxTable {
// border-spacing: 0;
border-spacing: 1px;
width: 100%;
tr > th {
border: 1px solid #ccc;
background: #F2F2F2;
color: #333333;
font-size: 16px;
height: 40px;
}
th.linshi,
th.xianshi {
background: #464c5b;
}
th.lishi {
background: rgba(70, 76, 91, 0.8);
}
.one th {
height: 25px;
font-size: 14px;
}
th.linshi {
color: #fe9400;
}
.two th {
height: 45px;
p:nth-child(2) {
font-size: 14px;
}
}
.linshiIcon {
position: relative;
}
.linshiIcon::after {
content: "";
display: block;
width: 0;
height: 0;
border-width: 0px 0px 55px 55px;
border-style: none solid solid;
border-color: transparent transparent #fe9400;
position: absolute;
top: 0;
right: 0;
transform: rotate(-90deg);
}
.icon {
position: absolute;
top: 13px;
right: -4px;
transform: rotate(45deg);
color: #fff;
font-size: 12px;
z-index: 10;
}
tr td {
border: 1px solid #ccc;
text-align: center;
height: 40px;
padding: 4px;
font-size: 13px;
width: 140px;
}
> tr:nth-child(odd) td {
background: #f2f2f2;
}
> tr:nth-child(even) td {
background: #f9f9f9;
}
td.linshi {
color: #fe9400;
}
tr > td.lishi {
color: #7f7f7f;
}
}
}
}
......@@ -174,7 +174,7 @@ export default {
// computed: {
// ...mapGetters(["djbxx"]),
// },
mounted() {
created() {
this.propsParam = this.$attrs;
this.loadData();
//this.$alert(this.param.bdcdyh);
......