拆分详情

This commit is contained in:
caoyang
2022-03-28 23:07:01 +08:00
parent 5998710e10
commit 9d55e0466f
8 changed files with 1065 additions and 194 deletions
@@ -22,15 +22,15 @@
<span v-else>{{ title }}</span>
</template>
</a-tree>
<div :style="tmpStyle" v-if="NodeTreeItem">
<div v-if="NodeTreeItem" :style="tmpStyle" >
<div class="menu-item" @click="orgAdd">
新增节点
{{$t('newNode')}}
</div>
<div class="menu-item" @click="orgEdit">
修改节点
{{$t('modifyNode')}}
</div>
<div class="menu-item menu-bottom" @click="orgDelete" v-if="NodeTreeItem">
删除节点
{{$t('deleteNode')}}
</div>
</div>
</div>
@@ -38,32 +38,33 @@
<div class="split-detail-right">
<div class="split-detail-right-wraper">
<div class="split-detail-search-header">
<a-form layout="inline" @keyup.enter.native="searchQuery(queryParams)">
<a-form-model
class="split-detail-content"
:model="queryParams"
ref="queryForm"
>
<a-row :gutter="24">
<a-col :md="6" :sm="8">
<a-form-model-item :label="$t('clauseName')" class="split-item">
<j-input :placeholder="$t('pleaseEnter') + $t('clauseName')" v-model="queryParams.serialNumber"></j-input>
</a-form-model-item>
</a-col>
<a-col :md="6" :sm="8">
<a-form-model-item :label="$t('clauseContent')" class="split-item">
<j-input :placeholder="$t('pleaseEnter')+$t('clauseContent')" v-model="queryParams.title"></j-input>
</a-form-model-item>
</a-col>
<a-col :md="6" :sm="6">
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
<a-button type="primary" @click="searchQuery" icon="search">{{$t('query')}}</a-button>
<a-button @click="searchReset" icon="reload" style="margin-left: 8px">{{ $t('reset') }}</a-button>
</span>
</a-col>
</a-row>
</a-form-model>
</a-form>
<search :flag="'4'" :url="url"/>
<!-- <a-form layout="inline" @keyup.enter.native="searchQuery(queryParams)">-->
<!-- <a-form-model-->
<!-- class="split-detail-content"-->
<!-- :model="queryParams"-->
<!-- ref="queryForm"-->
<!-- >-->
<!-- <a-row :gutter="24">-->
<!-- <a-col :md="6" :sm="8">-->
<!-- <a-form-model-item :label="$t('clauseName')" class="split-item">-->
<!-- <j-input :placeholder="$t('pleaseEnter') + $t('clauseName')" v-model="queryParams.serialNumber"></j-input>-->
<!-- </a-form-model-item>-->
<!-- </a-col>-->
<!-- <a-col :md="6" :sm="8">-->
<!-- <a-form-model-item :label="$t('clauseContent')" class="split-item">-->
<!-- <j-input :placeholder="$t('pleaseEnter')+$t('clauseContent')" v-model="queryParams.title"></j-input>-->
<!-- </a-form-model-item>-->
<!-- </a-col>-->
<!-- <a-col :md="6" :sm="6">-->
<!-- <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">-->
<!-- <a-button type="primary" @click="searchQuery" icon="search">{{$t('query')}}</a-button>-->
<!-- <a-button @click="searchReset" icon="reload" style="margin-left: 8px">{{ $t('reset') }}</a-button>-->
<!-- </span>-->
<!-- </a-col>-->
<!-- </a-row>-->
<!-- </a-form-model>-->
<!-- </a-form>-->
</div>
<div class="table-operator">
<div class="operator-text" @click="handleCopyManage">
@@ -100,27 +101,36 @@
</div>
</div>
<div class="split-detail-table">
<a-table :data-source="tableData" :columns="columns" rowKey="id" :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :pagination="false" :loading="loading" class="tag-con-table">
<template slot="clauseContent" slot-scope="text, record">
<a class="content-show" href="javascript:;" :title="record.serialContent" @click="showContent">{{record.serialContent}}</a>
</template>
<template slot="action" slot-scope="text, record">
<a class="action-edit" href="javascript:;" @click="onEdit(record)">{{$t('edit')}}</a>
<a class="action-delete" href="javascript:;" @click="onCancel(record)">{{$t('delete')}}</a>
</template>
</a-table>
<div class="page" v-if="tableData.length > 0">
<a-pagination
:show-total= "total => $t('total')+` ${total} `+ $t('strip')"
show-quick-jumper
show-size-changer
:current="queryParams.pageNo"
:page-size.sync="queryParams.pageSize"
:total="total"
@change="onChangePage"
@showSizeChange="SizeChange"
/>
</div>
<table-data
:url="url"
:flag="'4'"
:OperationList="OperationList"
showAction
@onSelectChange="onSelectChange"
@deleteClick="deleteClick"
@editClick="editClick"
></table-data>
<!-- <a-table :data-source="tableData" :columns="columns" rowKey="id" :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :pagination="false" :loading="loading" class="tag-con-table">-->
<!-- <template slot="clauseContent" slot-scope="text, record">-->
<!-- <a class="content-show" href="javascript:;" :title="record.serialContent" @click="showContent">{{record.serialContent}}</a>-->
<!-- </template>-->
<!-- <template slot="action" slot-scope="text, record">-->
<!-- <a class="action-edit" href="javascript:;" @click="onEdit(record)">{{$t('edit')}}</a>-->
<!-- <a class="action-delete" href="javascript:;" @click="onCancel(record)">{{$t('delete')}}</a>-->
<!-- </template>-->
<!-- </a-table>-->
<!-- <div class="page" v-if="tableData.length > 0">-->
<!-- <a-pagination-->
<!-- :show-total= "total => $t('total')+` ${total} `+ $t('strip')"-->
<!-- show-quick-jumper-->
<!-- show-size-changer-->
<!-- :current="queryParams.pageNo"-->
<!-- :page-size.sync="queryParams.pageSize"-->
<!-- :total="total"-->
<!-- @change="onChangePage"-->
<!-- @showSizeChange="SizeChange"-->
<!-- />-->
<!-- </div>-->
</div>
</div>
</div>
@@ -136,6 +146,7 @@
</a-modal>
<!-- 添加节点-->
<a-modal
class="add-menus"
:title="menuTitle"
:visible="menuRightVisible"
:confirm-loading="confirmLoading"
@@ -151,15 +162,19 @@
:label-col="labelCol"
:wrapper-col="wrapperCol"
>
<a-form-model-item :label="$t('clauseNo')" prop="clauseNo">
<a-input v-model="form.clauseNo" :placeholder="$t('PleaseEnter')+$t('clauseNo')" />
<a-form-model-item :label="$t('clauseNo')" prop="name">
<a-input v-model="form.name" :placeholder="$t('PleaseEnter')+$t('clauseNo')" />
</a-form-model-item>
<a-form-model-item :label="$t('clauseName')" prop="clauseName">
<a-input v-model="form.clauseName" :placeholder="$t('PleaseEnter')+$t('clauseName')" />
<a-form-model-item :label="$t('clauseName')" prop="itemName">
<a-input v-model="form.itemName" :placeholder="$t('PleaseEnter')+$t('clauseName')" />
</a-form-model-item>
<a-form-model-item :label="$t('serialNumber')" prop="displaySeq">
<a-input-number v-model="form.displaySeq" :min="1" :max="99999" :placeholder="$t('PleaseEnter')+$t('serialNumber')" :formatter="limitNumber" :parser="limitNumber" style="width: 100%" />
<!-- <a-input-number v-model="rowCount" :min="1" :placeholder="$t('pleaseEnter')+$t('numberRows')" :formatter="limitNumber" :parser="limitNumber" />-->
</a-form-model-item>
</a-form-model>
</a-modal>
<split-add-form v-if="addVisible" :addVisible="addVisible" :formTitle="formTitle" @closeVisible="closeVisible"></split-add-form>
<split-add-form ref="splitForm" v-if="addVisible" :addVisible="addVisible" :formTitle="formTitle" :flag="'4'" :url="url" @closeVisible="closeVisible"></split-add-form>
<upload ref="uploadSplit" @uploadSuccess="uploadSuccess"></upload>
</div>
</a-card>
@@ -167,12 +182,16 @@
</template>
<script>
import { getAction, postAction, deleteAction, downloadFile } from '@/api/manage'
import { getAction, postAction, deleteAction, putAction, downloadFile } from '@/api/manage'
import search from '@/components/search/index'
import TableData from '@/components/SplitTable/index'
import upload from '@/components/uploadFile/file.vue'
import SplitAddForm from './SplitAddForm'
export default {
name: 'SplitDetail',
components:{
search,
TableData,
SplitAddForm,
upload
},
@@ -284,18 +303,45 @@
menuRightVisible:false,
form:{},
rules: {
clauseNo: [
name: [
{ required: true, message: this.$t('PleaseEnter')+this.$t('clauseNo'), trigger: 'blur' },
{ min: 1, max: 20, message: this.$t('cantExeed') + '20' + this.$t('characters'), trigger: 'blur' },
],
clauseName: [
itemName: [
{ required: true, message: this.$t('PleaseEnter')+this.$t('clauseName'), trigger: 'blur' },
{ min: 1, max: 20, message: this.$t('cantExeed') + '20' + this.$t('characters'), trigger: 'blur' },
],
}
displaySeq: [
{ required: true, message: this.$t('PleaseEnter')+this.$t('serialNumber'), trigger: 'blur' },
// { min: 1, max: 99999, message: this.$t('cantExeed') + '99999' + this.$t('characters'), trigger: 'blur' },
],
},
infoId:'',
// NodeTreeItemVisible:false,
flag:false, //提交按钮标识
isEdit:false,
OperationList: [ //操作栏
{
text: this.$t('edit'),
ClickEvent: 'editClick'
}, //编辑
{
text: this.$t('delete'),
ClickEvent: 'deleteClick'
} //删除
],
url:{
tableHeader: 'language/switch/getHeader', //表格头部字段
seachList: 'language/switch/queryCondition', //搜索字段
// tableList: 'split/sarFileSplitInfo/page', //表格数据
getAddForm: 'language/switch/getForm', // 表单的字段
// addInfo: 'ocr/OcrRestful/addOcrRecord', //新增
},
}
},
mounted() {
this.infoId=this.$route.query.infoId
// console.log('info',this.$route.query)
this.loadMenuData()
this.generateList(this.gData);
},
@@ -398,7 +444,8 @@
},
//鼠标右键
rightClick({event,node}){
// console.log('eee',event,node)
console.log('eee',event,node)
// this.NodeTreeItemVisible=true
const x =
event.currentTarget.offsetLeft + event.currentTarget.clientWidth;
const y = event.currentTarget.offsetTop;
@@ -406,9 +453,15 @@
pageX: x,
pageY: y,
id: node._props.dataRef.id,
name:node._props.dataRef.name,
itemName:node._props.dataRef.itemName,
displaySeq:node._props.dataRef.displaySeq,
title: node._props.dataRef.title,
pid: node._props.dataRef.pid || null
};
this.nodeItem=JSON.parse(JSON.stringify(this.NodeTreeItem))
// this.form.pid=this.NodeTreeItem.id
// this.form.id=this.NodeTreeItem.id
this.tmpStyle = {
position: 'absolute',
maxHeight: 40,
@@ -418,10 +471,12 @@
background:`#FFFFFF`,
zIndex:`2`
};
// console.log('NodeTreeItem',this.NodeTreeItem)
},
// 用于点击空白处隐藏增删改菜单
clearMenu () {
this.NodeTreeItem = null;
// this.NodeTreeItemVisible=false
},
//选择树节点
onSelect(selectedKeys){
@@ -429,16 +484,39 @@
},
//树形新增
orgAdd(){
this.menuTitle=this.$t('add')
this.isEdit=false
this.form={}
this.menuRightVisible=true
},
//树形修改
orgEdit(){
this.menuTitle=this.$t('edit')
this.isEdit=true
this.form.id=this.nodeItem.id
this.form.pid=this.nodeItem.pid
this.form.name=this.nodeItem.name
this.form.itemName=this.nodeItem.itemName
this.form.displaySeq=this.nodeItem.displaySeq
this.menuRightVisible=true
},
//树形删除
orgDelete(){
this.$confirm({
content: this.$t('areYouSure'),
onOk:
async () => {
getAction(`split/sarFileSplitMenu/deleteMenu`, { id: this.nodeItem.id }).then(res => {
if (res.success) {
this.$message.success(this.$t('OperationSuccessful'))
this.loadMenuData()
} else {
this.$message.warning(this.$t('operationFailed'))
}
})
}
})
},
handleCancelMenuRight(){
this.menuRightVisible=false
@@ -446,7 +524,48 @@
//增加条款确定
hideModalMenuRight(){
this.menuRightVisible=false
let expandId=[]
expandId.push(this.form.pid)
if(!this.isEdit){
let params={
infoId: this.infoId,
pid:this.nodeItem.id,
...this.form,
}
this.flag=true
// console.log('parms',this.params)
postAction(`split/sarFileSplitMenu/addMenu`,params).then(res=>{
if(res.success){
this.$message.success(this.$t('OperationSuccessful'))
this.onExpand(expandId)
this.form={}
this.loadMenuData()
}else{
this.$message.warning(this.$t('operationFailed'))
}
}).finally(()=>{
this.flag=false
})
}else{
let params = {
infoId: this.infoId,
...this.form,
}
this.flag=true
// console.log('parms',params)
putAction(`split/sarFileSplitMenu/updateMenu`,params).then(res=>{
if(res.success){
this.$message.success(this.$t('OperationSuccessful'))
this.onExpand(expandId)
this.form={}
this.loadMenuData()
}else{
this.$message.warning(this.$t('operationFailed'))
}
}).finally(()=>{
this.flag=false
})
}
},
//获取列表数据
loadData(){
@@ -487,6 +606,7 @@
if(res.success){
this.$message.success(this.$t('OperationSuccessful'))
this.loadData()
}else{
this.$message.warning(this.$t('operationFailed'))
}
@@ -499,6 +619,9 @@
handleAddManage(){
this.formTitle=this.$t('add')
this.addVisible=true
this.$nextTick(() => {
this.$refs.splitForm.add()
})
},
closeVisible(val){
this.addVisible=val
@@ -559,12 +682,15 @@
});
},
//编辑
onEdit(val){
editClick(val){
this.formTitle=this.$t('edit')
this.addVisible=true
this.$nextTick(() => {
this.$refs.splitForm.edit()
})
},
//删除
onCancel(val){
deleteClick(val){
},
//选择框
@@ -681,6 +807,17 @@
}
}
},
//正则替换小数点
limitNumber(value) {
if (typeof value === 'string') {
return !isNaN(Number(value)) ? value.replace(/\./g, '') : 0
} else if (typeof value === 'number') {
return !isNaN(value) ? String(value).replace(/\./g, '') : 0
} else {
return 0
}
},
}
}
</script>
@@ -756,4 +893,18 @@
min-width: 100px;
}
}
.add-menus{
.ant-modal-wrap{
.ant-modal-footer{
text-align: center;
}
}
}
.split-detail-right-wraper{
.table-page-search-submitButtons{
.ant-col-md-6{
display: flex;
}
}
}
</style>