Files
foton-laws-system-front/src/pages/processCenter/pages/creatProcess/bzjd/step1.vue
T
2021-07-22 14:23:23 +08:00

854 lines
38 KiB
Vue

<template>
<div class="bzjdStep1">
<!-- 标准征求意见流程-->
<ProcessHeader toggle>
<template slot="proName">标准解读流程</template>
<template slot="proNode">申请人发起流程</template>
</ProcessHeader>
<div class="headerTabs">
<div class="headerTabsItem" :class="active === '1' ? 'active' : ''" @click="handleTabs('1')">基础信息</div>
<div class="headerTabsItem" :class="active === '2' ? 'active' : ''" @click="handleTabs('2')">人员信息</div>
</div>
<div class="content" v-show="active === '1'">
<div style="overflow: auto;">
<el-form
ref="bzzqyjForm"
:model="form"
class="label-input-form"
label-width="210px"
>
<ProcessTitle>
<template slot="title">基础信息</template>
</ProcessTitle>
<div class="prc-content-border">
<el-row :gutter="24">
<el-col :span="24">
<el-form-item label="标准拆分数据" class="add-form-item form-item-disabled">
<div class="addButton">
<el-button size="small" type="primary" @click="addZqyjList">带入</el-button>
</div>
</el-form-item>
<el-form-item label="标准号/政策号" prop="itemsNum" class="add-form-item form-item-disabled">
<el-input
disabled
v-model="form.itemsNum"
placeholder="请输入标准编号"
clearable
></el-input>
</el-form-item>
<el-form-item label="标准名称/政策名称" prop="itemsName" class="add-form-item form-item-disabled">
<el-input
disabled
v-model="form.itemsName"
placeholder="请输入标准名称"
clearable
></el-input>
</el-form-item>
<el-form-item label="上一版本标准号/政策号" class="add-form-item form-item-disabled" v-if="sarType === 'INLAND'">
<el-input
disabled
v-model="form.itemsNum1"
clearable
></el-input>
</el-form-item>
<el-form-item label="相对标准号/政策号" class="add-form-item form-item-disabled" v-if="sarType === 'FOREIGN'">
<el-input
disabled
v-model="form.itemsNum1"
clearable
></el-input>
</el-form-item>
<el-form-item label="上一版本标准名称/政策名称" class="add-form-item form-item-disabled" v-if="sarType === 'INLAND'">
<el-input
disabled
v-model="form.itemsName1"
clearable
></el-input>
</el-form-item>
<el-form-item label="相对标准名称/政策名称" class="add-form-item form-item-disabled" v-if="sarType === 'FOREIGN'">
<el-input
disabled
v-model="form.itemsName1"
clearable
></el-input>
</el-form-item>
</el-col>
</el-row>
</div>
</el-form>
</div>
<ProcessTitle>
<template slot="title">拆分信息</template>
</ProcessTitle>
<div class="action-bar">
<el-button type="primary" class="common-button-primary add-button" size="mini" @click="choiceZRRS('', 2, '')">批量编辑</el-button>
</div>
<el-table border
ref="selection"
:data="itemList"
tooltip-effect="dark"
style="width: 100%;"
height="100%"
:header-cell-style="{background: '#e8e8e8', color: '#333333', fontSize: '16px',
fontWeight: 'bold', height: '48px'}"
@selection-change="handleSelectionChange"
row-key="id">
<el-table-column type="selection" width="55" align="center"/>
<el-table-column
prop="itemsNum"
label="条款号"
width="170"
align="center">
</el-table-column>
<el-table-column
prop="itemsName"
label="条款名称"
width="170"
align="center">
</el-table-column>
<el-table-column
prop="itermsConditions"
label="条款内容"
show-overflow-tooltip
align="center">
</el-table-column>
<el-table-column
label="责任人"
width="170"
align="center">
<template slot-scope="scope">
<el-input v-model="scope.row.zrUserId" style="display: none;"/>
<el-input v-model="scope.row.zrUserIdName" placeholder="请选择责任人" @click.native="choiceZRRS(scope.row.zrUserId, 1, scope.$index)"/>
</template>
</el-table-column>
</el-table>
<loading :loading="loading">数据获取中</loading>
<el-collapse accordion>
<el-collapse-item title="意见填写">
<div style="margin: 10px 0;">
<el-input
type="textarea"
:rows="3"
resize="none"
placeholder="请输入意见"
v-model="commentText">
</el-input>
</div>
</el-collapse-item>
</el-collapse>
</div>
<div class="content" v-show="active === '2'">
<div class="block" style="padding-top: 20px;">
<el-timeline>
<el-form
ref="Form"
:model="roleForm"
:rules="roleFormRules"
class="label-input-form">
<el-timeline-item timestamp="发起流程" placement="top" :color="roleForm.applyUserId ? '#66b1ff' : ''">
<el-card>
<el-form-item prop="applyUserId" style="margin-bottom: 0">
<h4>流程发起人</h4>
<div style="margin-top: 10px;width: 300px;">
<el-input v-model="roleForm.applyUserId" style="display: none;"/>
<el-input v-model="roleForm.applyUserIdName" placeholder="流程发起人" disabled/>
</div>
</el-form-item>
</el-card>
</el-timeline-item>
<el-timeline-item timestamp="批准解读流程" placement="top" :color="roleForm.deptUserId ? '#66b1ff' : ''">
<el-card>
<el-form-item prop="deptUserId" style="margin-bottom: 0">
<h4>标准法规部部长</h4>
<div style="margin-top: 10px;width: 300px;">
<el-input v-model="roleForm.deptUserId" style="display: none;"/>
<el-input
v-model="roleForm.deptUserIdName"
placeholder="选择标准法规部部长"
@click.native="choiceZRR('deptUserId', '选择标准法规部部长', roleForm.deptUserId)"
/>
</div>
</el-form-item>
</el-card>
</el-timeline-item>
</el-form>
</el-timeline>
</div>
</div>
<ProcessFooter
show-save
show-submit
:submitLoading="isSubmit"
:saveLoading="saveLoading"
@save="handleSave"
@submit="handleSubmit"
>
</ProcessFooter>
<el-drawer
title="标准拆分数据库"
:visible.sync="listModel"
size="900px"
custom-class="demo-drawer"
>
<div class="standardForComments">
<div class="content">
<!-- 顶部工具栏 -->
<table-tools-bar>
<div slot="left">
<div class="search-area">
<el-form :model="standCommonlySearch" inline class="label-input-form">
<el-formItem label="标准号/名称" class="search-item">
<el-input v-model="standCommonlySearch.numOrName" class="s-c-input" placeholder="请输入标准号/名称" clearable :maxlength="100"></el-input>
</el-formItem>
<el-formItem class="search-item btn-box">
<el-button
type="primary"
size="mini"
class="common-button-primary"
@click="sarStandCompareHisInfo">查询</el-button>
<el-button
class="common-button-default"
size="mini"
@click="clearSearchStand">清空</el-button>
</el-formItem>
</el-form>
</div>
</div>
</table-tools-bar>
<div class="table-wrap">
<div style="position: absolute;height: calc(100% - 10px);width: 100%;">
<el-table
ref="selection"
:data="standInfoList"
tooltip-effect="dark"
style="width: 100%;padding:0 0 20px 0;"
height="100%"
border
@selection-change="handleSelection"
:header-cell-style="{background: '#f8f8f9', color: '#515a6e'}">
<el-table-column type="selection" width="55" align="center"/>
<el-table-column
prop="showNumber"
label="标准号/政策号"
width="170"
align="center">
<template slot-scope="scope">
<div v-if=" scope.row.splitStatus === '0'">{{ scope.row.standNumSplit }}</div>
<div v-else>{{ scope.row.showNumber }}</div>
</template>
</el-table-column>
<el-table-column
prop="standName"
label="标准名称/政策名称"
show-overflow-tooltip
align="center">
<template slot-scope="scope">
<span v-if=" scope.row.splitStatus === '0'">{{ scope.row.standNameSplit }}</span>
<span v-else>{{ scope.row.standName }}</span>
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
<pagination :page="standCommonlySearch.page" :total="total" @pageChange="pageChange" @pageSizeChange="pageSizeChange"></pagination>
<loading :loading="spinShow">数据加载中……</loading>
<div class="demo-drawer-footer">
<el-button size="mini" @click="closeDrawer">取消</el-button>
<el-button type="primary" size="mini" @click="enterDrawer">带入</el-button>
</div>
</div>
</el-drawer>
<el-drawer
title="标准拆分数据库"
:visible.sync="listModel2"
size="900px"
custom-class="demo-drawer"
>
<div class="standardForComments">
<div class="content">
<!-- 顶部工具栏 -->
<div class="table-wrap">
<div style="position: absolute;height: calc(100% - 10px);width: 100%;">
<el-table
v-if="listModel2"
ref="selection"
:data="standInfoList2"
tooltip-effect="dark"
style="width: 100%;padding:0 0 20px 0;"
height="100%"
border
@selection-change="handleSelection2"
:header-cell-style="{background: '#f8f8f9', color: '#515a6e'}">
<el-table-column type="selection" width="55" align="center"/>
<el-table-column
prop="showNumber"
label="标准号/政策号"
width="170"
align="center">
<template slot-scope="scope">
<div v-if=" scope.row.splitStatus === '0'">{{ scope.row.standNumSplit }}</div>
<div v-else>{{ scope.row.showNumber }}</div>
</template>
</el-table-column>
<el-table-column
prop="standName"
label="标准名称/政策名称"
show-overflow-tooltip
align="center">
<template slot-scope="scope">
<span v-if=" scope.row.splitStatus === '0'">{{ scope.row.standNameSplit }}</span>
<span v-else>{{ scope.row.standName }}</span>
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
<pagination :page="standCommonlySearch2.page" :total="total2" @pageChange="pageChange2" @pageSizeChange="pageSizeChange2"></pagination>
<div class="demo-drawer-footer">
<el-button size="mini" @click="closeDrawer2">取消</el-button>
<el-button type="primary" size="mini" @click="enterDrawer2">确定</el-button>
</div>
</div>
</el-drawer>
<el-drawer
:title="drawerTitle"
:visible.sync="modalshowflag"
:wrapperClosable="false"
size="800px">
<el-tree
v-if="modalshowflag"
node-key="id"
style="height: 100%; overflow: auto;"
class="filter-tree"
:data="treeData"
:props="defaultProps"
:default-checked-keys="nodeList"
highlight-current
check-strictly
@check="drawerCheck"
default-expand-all
:expand-on-click-node="false"
show-checkbox
ref="tree">
</el-tree>
<div id="roleFormButton" class="demo-drawer-footer">
<el-button class="common-button-primary" size="mini" icon="el-icon-check" type="primary" @click="saveUserInfo">确定</el-button>
<el-button class="common-button-default" size="mini" icon="el-icon-close" @click="cancleUserInfo">取消</el-button>
</div>
</el-drawer>
<el-drawer
title="选择责任部门对接人"
:visible.sync="modalshowflag2"
:wrapperClosable="false"
size="800px">
<el-tree
v-if="modalshowflag2"
node-key="id"
style="height: 100%; overflow: auto;"
class="filter-tree"
:data="treeData"
:props="defaultProps"
:default-checked-keys="nodeList2"
highlight-current
check-strictly
@check="drawerCheck2"
default-expand-all
:expand-on-click-node="false"
show-checkbox
ref="tree2">
</el-tree>
<div id="roleFormButton2" class="demo-drawer-footer">
<el-button class="common-button-primary" size="mini" icon="el-icon-check" type="primary" @click="saveUserInfo2">确定</el-button>
<el-button class="common-button-default" size="mini" icon="el-icon-close" @click="cancleUserInfo2">取消</el-button>
</div>
</el-drawer>
</div>
</template>
<script>
import ProcessHeader from '../../components/ProcessHeader'
import ProcessFooter from '../../components/ProcessFooter'
import ProcessTitle from '../../components/ProcessTitle'
export default {
name: "bzjdStep1",
data() {
return {
listModel2: false,
standInfoList2: [],
sarType: '',
loading: false,
standId: '',
commentText: '',
textarea: '', // 意见
title: '', // 新增抽屉标题
listModel: false, // 新增抽屉开关
active: '1', // 默认显示
isSubmit: false,
saveLoading: false,
// 基础信息form表单
form: {
itemsNum: '',
itemsName: '',
standId: '',
itemsNum1: '',
itemsName1: '',
oldNumber: ''
},
formRules: {
itemsNum: [
{ required: true, message: '请输入标准号/政策号', trigger: 'change' },
],
itemsName: [
{ required: true, message: '请输入标准名称/政策名称', trigger: 'change' },
],
},
// 标准征求意见数据可库
standCommonlySearch: {
numOrName: '',
page: 1,
pageSize: this.$store.getters.userInfo.configContent,
result: '1',
},
standCommonlySearch2: {
page: 1,
pageSize: this.$store.getters.userInfo.configContent,
result: '1',
sarType: 'INLAND'
},
spinShow: false,
standInfoList: [],
tableHeight: null,
total: 0,
total2: 0,
selectedList: [],
selectedList2: [],
data: [],
roleForm: {
applyUserIdName: this.$store.getters.userInfo.userName,
applyUserId: this.$store.getters.userInfo.userId,
deptUserId: '',
deptUserIdName: ''
},
roleFormRules: {
zrUserId: [
{ required: true, message: '请选择责任部门对接人', trigger: 'change' },
],
deptUserId: [
{ required: true, message: '请选择标准法规部部长', trigger: 'change' },
],
},
treeData: [],
nodeList: [],
nodeList2: [],
type: '',
drawerTitle: '',
modalshowflag: false,
modalshowflag2: false,
defaultProps: {
children: 'children',
label: 'name'
},
roleRow: {},
itemList: [],
zrType: '',
zrIndex: '',
zrIdList: []
}
},
components: {
ProcessHeader,
ProcessFooter,
ProcessTitle
},
methods: {
addZqyjList() {
this.title = '标准拆分数据库'
this.listModel = true
},
/** 标准征求意见库方法*
* **********************************************/
// 清空
clearSearchStand () {
this.standCommonlySearch.page = 1
this.standCommonlySearch.start = ''
this.standCommonlySearch.end = ''
this.standCommonlySearch.categorg = ''
this.standCommonlySearch.cname = ''
this.sarStandCompareHis()
},
// 搜索
sarStandCompareHisInfo() {
this.splitInfoPage = 1
this.sarStandCompareHis()
},
// 查询表格
sarStandCompareHis () {
this.spinShow = true
var form = this.standCommonlySearch
this.$http.get('lawss/sarFileSplitInfo/getSarFileSplitInfoEOPage', form, {
_this: this
}, res => {
this.standInfoList = res.data.list
this.total = res.data.total
this.spinShow = false
}, e => {
})
},
sarStandCompareHis2 () {
var form = this.standCommonlySearch2
this.$http.get('lawss/sarFileSplitInfo/getSarFileSplitInfoEOPage', form, {
_this: this
}, res => {
this.standInfoList2 = res.data.list
this.total2 = res.data.total
}, e => {
})
},
pageChange (page) {
this.standCommonlySearch.page = page
this.sarStandCompareHis()
},
// 分页每页显示数改变后方法
pageSizeChange (pageSize) {
this.$store.getters.userInfo.configContent = pageSize
this.standCommonlySearch.pageSize = pageSize
this.sarStandCompareHis()
},
pageChange2 (page) {
this.standCommonlySearch2.page = page
this.sarStandCompareHis2()
},
// 分页每页显示数改变后方法
pageSizeChange2 (pageSize) {
this.$store.getters.userInfo.configContent = pageSize
this.standCommonlySearch2.pageSize = pageSize
this.sarStandCompareHis2()
},
/** 选择带入数据的方法操作
* */
handleSelection(data) {
this.selectedList = [];
for (let i = 0; i < data.length; i++) {
this.selectedList.push(data[i].id);
}
},
handleSelection2 (data) {
this.selectedList2 = [];
for (let i = 0; i < data.length; i++) {
this.selectedList2.push(data[i].id);
}
},
closeDrawer() {
this.listModel = false
},
enterDrawer() {
if (this.selectedList.length === 1) {
this.loading = true
let deposit = new Map();
this.standInfoList.forEach(item => {
deposit.set(item.id, item);
});
let bringData = [];
for (let i = 0; i < this.selectedList.length; i++) {
bringData.push(deposit.get(this.selectedList[i]));
}
if (bringData[0].splitStatus === '0') {
this.form.itemsNum = bringData[0].standNumSplit
this.form.itemsName = bringData[0].standNameSplit
} else {
this.form.itemsNum = bringData[0].showNumber
this.form.itemsName = bringData[0].standName
}
this.form.standId = bringData[0].id
this.sarType = bringData[0].sarType
this.standId = bringData[0].standId
this.listModel = false;
this.listModel2 = true
this.$http.get('lawss/sarFileSplitItems/getSplitItemsByPage', {
infoId: this.form.id,
page: 1,
pageSize: 9999
}, {
_this: this
}, res => {
if (res.ok) {
res.data.list.forEach(item => {
item.zrUserId = ''
item.zrUserIdName= ''
})
this.itemList = res.data.list
}
this.loading = false
})
} else if (this.selectedList.length > 1) {
this.$message.warning("只能选择一条数据进行带入");
} else {
this.$message.warning("请选择一条数据进行带入");
}
},
closeDrawer2() {
this.listModel2 = false
},
enterDrawer2() {
if (this.selectedList2.length === 1) {
let deposit = new Map();
this.standInfoList2.forEach(item => {
deposit.set(item.id, item);
});
let bringData = [];
for (let i = 0; i < this.selectedList2.length; i++) {
bringData.push(deposit.get(this.selectedList2[i]));
}
if (bringData[0].splitStatus === '0') {
this.form.itemsNum1 = bringData[0].standNumSplit
this.form.itemsName1 = bringData[0].standNameSplit
} else {
this.form.itemsNum1 = bringData[0].showNumber
this.form.itemsName1 = bringData[0].standName
}
this.form.oldNumber = bringData[0].id
this.listModel2 = false
} else if (this.selectedList2.length > 1) {
this.$message.warning("只能选择一条数据进行带入");
} else {
this.$message.warning("请选择一条数据进行带入");
}
},
/*** **********************************************/
/** 流程节点负责人的选择 *****************************/
choiceZRR (type, title, id) {
this.nodeList = []
this.nodeList.push(id)
this.type = type
this.drawerTitle = title
this.modalshowflag = true
},
getTree () {
this.$http.get('SarInstitution/institution/institutionAndUser', {}, {}, res=> {
this.treeData = res.data
})
},
saveUserInfo () {
if (this.type === 'deptUserId') {
this.roleForm.deptUserId = this.roleRow.id
this.roleForm.deptUserIdName = this.roleRow.name
}
this.modalshowflag = false
},
cancleUserInfo () {
this.modalshowflag = false
},
drawerCheck (data) {
var getlist = this.$refs.tree.getCheckedNodes().concat(this.$refs.tree.getHalfCheckedNodes());
if(getlist.length == 1) {
this.roleRow = getlist[0]
}else {
this.$refs.tree.setCheckedKeys([data.id]);
this.roleRow = this.$refs.tree.getCheckedNodes()[0]
}
},
drawerCheck2 (data) {
var getlist = this.$refs.tree2.getCheckedNodes().concat(this.$refs.tree2.getHalfCheckedNodes());
if(getlist.length == 1) {
this.roleRow = getlist[0]
}else {
this.$refs.tree2.setCheckedKeys([data.id]);
this.roleRow = this.$refs.tree2.getCheckedNodes()[0]
}
},
handleSelectionChange (val) {
this.zrIdList = []
val.forEach( item => {
this.zrIdList.push(item.id)
})
},
choiceZRRS (row, type, index) {
if (type === 1) {
this.nodeList2 = []
this.zrIndex= index
this.zrType = type
this.nodeList2.push(row)
this.modalshowflag2 = true
} else {
// 批量
if (this.zrIdList.length > 0) {
this.zrType = type
this.nodeList2 = []
this.modalshowflag2 = true
} else {
this.$message.warning('请选择要编辑的数据')
}
}
},
saveUserInfo2 () {
var idList = ''
var nameList = ''
this.$refs.tree2.getCheckedNodes().concat(this.$refs.tree2.getHalfCheckedNodes()).forEach( item => {
if (nameList.length > 0) {
nameList += ','
idList += ','
}
idList += item.id
nameList += item.name
})
if (this.zrType == 1) {
this.itemList[this.zrIndex].zrUserId = idList
this.itemList[this.zrIndex].zrUserIdName = nameList
} else {
this.itemList.forEach( item => {
this.zrIdList.forEach( items => {
if (item.id === items) {
item.zrUserId = idList
item.zrUserIdName = nameList
}
})
})
}
this.modalshowflag2 = false
},
cancleUserInfo2 () {
this.modalshowflag2 = false
},
handleTabs(name) {
this.active = name
},
handleSave() {},
handleSubmit() {
this.$refs['bzzqyjForm'].validate((valid) => {
if (valid) {
this.$refs['Form'].validate((valid) => {
if (valid) {
let b = 0
for (let a = 0; a < this.itemList.length; a++) {
if (!this.itemList[a].zrUserId) {
b++
}
}
if (b > 0) {
this.$message.warning('请选择责任人')
} else {
this.$http.get('lawss/activiti/startProcess', {
type: '9'
}, {}, res => {
if (res.ok) {
var json = Object.assign(this.form, this.roleForm)
json.commentText = this.commentText
json.standInData = this.sarType
json.itemList = this.itemList
this.$http.post('lawss/activiti/completeTask', {
json: JSON.stringify(json),
taskId: res.data,
userId: this.$store.getters.userInfo.userId
}, {}, res => {
if (res.success) {
this.$message.success('流程发起成功')
this.$router.push('/processCenter')
}
})
} else {
this.$message.warning('流程启动失败')
}
})
}
} else {
return this.$message.warning('请完善人员信息')
}
})
} else {
return this.$message.warning('请完善基础信息')
}
})
}
},
mounted () {
this.getTree()
this.sarStandCompareHis()
this.sarStandCompareHis2()
this.tableHeight = $('.content').height() - 44
window.onresize = () => {
this.tableHeight = $('.content').height() - 44
}
},
}
</script>
<style lang="less" scoped>
@import '~@/assets/styles/style';
@import '~@/assets/styles/mixins';
.bzjdStep1 {
/deep/.el-drawer__container {
.prc-content-border {
border: none;
padding: 0 20px 0;
}
}
position: relative;
height: 100%;
.headerTabs {
height: 52px;
display: flex;
align-items: center;
position: absolute;
top: 0;
right: 10px;
.headerTabsItem {
border: 1px solid #c1c1c1;
padding: 0 5px;
height: 30px;
line-height: 30px;
cursor: pointer;
}
.active {
border: 1px solid #E6A23C;
color: #fff;
background: #E6A23C;
}
}
.content {
display: flex;
flex-direction: column;
justify-content: space-between;
height: calc(~'100% - 107px');
overflow: auto;
}
.standardForComments {
height: 100%;
background: #fff;
.el-divider--horizontal {
display: block;
height: 1px;
width: 100%;
margin: 0;
}
flex-direction: column;
.action-bar {
margin-bottom: 5px;
padding: 0;
}
.content {
flex: auto;
overflow: hidden;
display: flex;
flex-direction: column;
.table-wrap {
flex: auto;
overflow: hidden;
position: relative;
}
}
& > .pagination {
position: static;
/deep/.pagination-slot {
padding: 0;
}
}
}
}
</style>