418 lines
13 KiB
Java
418 lines
13 KiB
Java
<template>
|
|
<div class="split-detail">
|
|
<a-card :bordered="false">
|
|
<div class="split-detail-wrap">
|
|
<div class="split-detail-left">
|
|
<div class="split-detail-left-tree">
|
|
<a-input-search style="margin-bottom: 8px" placeholder="Search" @change="onChange" />
|
|
<a-tree
|
|
v-if="gData.length>0"
|
|
:expanded-keys="expandedKeys"
|
|
:auto-expand-parent="autoExpandParent"
|
|
:defaultExpandAll="true"
|
|
:tree-data="gData"
|
|
@expand="onExpand"
|
|
>
|
|
<template slot="title" slot-scope="{ title }">
|
|
<span v-if="title.indexOf(searchValue) > -1">
|
|
{{ title.substr(0, title.indexOf(searchValue)) }}
|
|
<span style="color: #f50">{{ searchValue }}</span>
|
|
{{ title.substr(title.indexOf(searchValue) + searchValue.length) }}
|
|
</span>
|
|
<span v-else>{{ title }}</span>
|
|
</template>
|
|
</a-tree>
|
|
</div>
|
|
</div>
|
|
<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="44">
|
|
<a-col :md="6" :sm="12">
|
|
<a-form-model-item :label="'条款名称'">
|
|
<j-input :placeholder="'请输入条款名称'" v-model="queryParams.serialNumber"></j-input>
|
|
</a-form-model-item>
|
|
</a-col>
|
|
<a-col :md="6" :sm="12">
|
|
<a-form-model-item :label="'条款内容'">
|
|
<j-input :placeholder="'请输入条款内容'" v-model="queryParams.title"></j-input>
|
|
</a-form-model-item>
|
|
</a-col>
|
|
<a-col :md="6" :sm="8">
|
|
<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">
|
|
<a-icon type="copy" />
|
|
{{ $t('copy') }}
|
|
</div>
|
|
<div class="operator-text" @click="handleAddManage">
|
|
<a-icon type="plus" />
|
|
{{ $t('add') }}
|
|
</div>
|
|
<div class="operator-text" @click="handleImportManage">
|
|
<a-icon type="import" :rotate="-90" />
|
|
{{ $t('import') }}
|
|
</div>
|
|
<div class="operator-text" @click="handleExportManage">
|
|
<a-icon type="export" :rotate="-90"/>
|
|
{{ $t('export') }}
|
|
</div>
|
|
<div class="operator-text" @click="handleDownManage">
|
|
<a-icon type="download" />
|
|
{{ $t('TemplateDownload') }}
|
|
</div>
|
|
<div class="operator-text" @click="handleMergeManage">
|
|
<a-icon type="snippets" />
|
|
{{ $t('MergerClause') }}
|
|
</div>
|
|
<div class="operator-text" @click="handleManage">
|
|
<a-icon type="setting" />
|
|
{{ $t('BatchSetting') }}
|
|
</div>
|
|
<div class="operator-text" @click="handleBatCancel">
|
|
<a-icon type="delete" />
|
|
{{ $t('BatchDelete') }}
|
|
</div>
|
|
</div>
|
|
<div class="split-detail-table">
|
|
<a-table bordered :data-source="tableData" :columns="columns" :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :pagination="false" :loading="loading" class="tag-con-table">
|
|
<template slot="action" slot-scope="text, record">
|
|
<a class="action-edit" href="javascript:;" @click="onEdit(record)">编辑</a>
|
|
<a class="action-delete" href="javascript:;" @click="onCancel(record)">删除</a>
|
|
</template>
|
|
</a-table>
|
|
<div class="page" v-if="tableData.length > 0">
|
|
<a-pagination
|
|
:show-total="total => `共 ${total} 条`"
|
|
show-quick-jumper
|
|
show-size-changer
|
|
:current="queryParams.pageNo"
|
|
:page-size.sync="queryParams.pageSize"
|
|
:total="total"
|
|
@change="onChangePage"
|
|
@showSizeChange="SizeChange"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<splitAddForm v-if="addVisible" :addVisible="addVisible" @closeVisible="closeVisible"></splitAddForm>
|
|
</div>
|
|
</a-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import splitAddForm from './splitAddForm'
|
|
export default {
|
|
name: 'splitDetail',
|
|
components:{
|
|
splitAddForm
|
|
},
|
|
data() {
|
|
return {
|
|
queryParams:{
|
|
pageNo:1,
|
|
pageSize:10
|
|
},
|
|
total:0,
|
|
tableData:[
|
|
{
|
|
serialNumber:'001',
|
|
serialName:'条款001',
|
|
serialContent:'12. 附加光反射器，可以是贴纸，具有以下规格： a) 正面左右两侧呈白色或淡黄色； b) 背面左右两侧呈红色； c) 防护板下面是白色；和 d) 高至少400（四百）毫米和宽至少100（一百）毫米；',
|
|
functionArea:'aaa',
|
|
tecArea:'bbb'
|
|
}
|
|
],
|
|
selectedRowKeys: [],
|
|
expandedKeys: [],
|
|
searchValue: '',
|
|
autoExpandParent: true,
|
|
dataList: [],
|
|
gData: [
|
|
{
|
|
title: '总目录',
|
|
key: '0-0',
|
|
children: [
|
|
{
|
|
title: '第一条 替代品',
|
|
key: '0-0-0',
|
|
children: [
|
|
{ title: '0-0-0-0', key: '0-0-0-0' },
|
|
{ title: '0-0-0-1', key: '0-0-0-1' },
|
|
{ title: '0-0-0-2', key: '0-0-0-2' },
|
|
],
|
|
},
|
|
{
|
|
title: '第二条',
|
|
key: '0-0-1',
|
|
children: [
|
|
{ title: '0-0-1-0', key: '0-0-1-0' },
|
|
{ title: '0-0-1-1', key: '0-0-1-1' },
|
|
{ title: '0-0-1-2', key: '0-0-1-2' },
|
|
],
|
|
},
|
|
],
|
|
}
|
|
],
|
|
selecIds:'',
|
|
loading:false,
|
|
columns: [
|
|
{
|
|
title: '条款号',
|
|
dataIndex: 'serialNumber',
|
|
key: 'serialNumber',
|
|
align: "center",
|
|
width: 80,
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
title: '条款名称',
|
|
dataIndex: 'serialName',
|
|
key: 'serialName',
|
|
align: "center",
|
|
width: 80,
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
title: '条款内容',
|
|
dataIndex: 'serialContent',
|
|
key: 'serialContent',
|
|
align: "center",
|
|
width: 200,
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
title: '功能领域',
|
|
dataIndex: 'functionArea',
|
|
key: 'functionArea',
|
|
align: "center",
|
|
width: 80,
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
title: '技术领域',
|
|
dataIndex: 'tecArea',
|
|
key: 'tecArea',
|
|
align: "center",
|
|
width: 80,
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
title: this.$t('operation'),
|
|
dataIndex: 'action',
|
|
scopedSlots: {customRender: 'action'},
|
|
align: "center",
|
|
width: 80
|
|
}
|
|
],
|
|
addVisible:false
|
|
}
|
|
},
|
|
mounted() {
|
|
this.generateList(this.gData);
|
|
},
|
|
methods: {
|
|
generateList(data){
|
|
for (let i = 0; i < data.length; i++) {
|
|
const node = data[i];
|
|
const key = node.key;
|
|
this.dataList.push({ key, title: key });
|
|
if (node.children) {
|
|
this.generateList(node.children);
|
|
}
|
|
}
|
|
},
|
|
|
|
getParentKey(key, tree){
|
|
let parentKey;
|
|
for (let i = 0; i < tree.length; i++) {
|
|
const node = tree[i];
|
|
if (node.children) {
|
|
if (node.children.some(item => item.key === key)) {
|
|
parentKey = node.key;
|
|
} else if (this.getParentKey(key, node.children)) {
|
|
parentKey = this.getParentKey(key, node.children);
|
|
}
|
|
}
|
|
}
|
|
return parentKey;
|
|
},
|
|
onExpand(expandedKeys){
|
|
this.expandedKeys = expandedKeys;
|
|
this.autoExpandParent = false;
|
|
},
|
|
onChange(e) {
|
|
const value = e.target.value;
|
|
const expandedKeys = this.dataList
|
|
.map(item => {
|
|
if (item.title.indexOf(value) > -1) {
|
|
return this.getParentKey(item.key, this.gData);
|
|
}
|
|
return null;
|
|
})
|
|
.filter((item, i, self) => item && self.indexOf(item) === i);
|
|
Object.assign(this, {
|
|
expandedKeys,
|
|
searchValue: value,
|
|
autoExpandParent: true,
|
|
})
|
|
this.$set(this,'autoExpandParent',true)
|
|
|
|
console.log('this',this)
|
|
},
|
|
//获取列表数据
|
|
loadData(){
|
|
let params={
|
|
...this.queryParams
|
|
}
|
|
// this.loading=true
|
|
// getAction(``,params).then(res=>{
|
|
// if(res.success){
|
|
// this.tableData= [ ...res.result.records ]
|
|
// this.loading=false
|
|
// }
|
|
// })
|
|
},
|
|
//搜索
|
|
searchQuery(){
|
|
|
|
},
|
|
//清空
|
|
searchReset(){
|
|
this.queryParams={
|
|
pageNo: 1,
|
|
pageSize: 10
|
|
}
|
|
this.loadData()
|
|
},
|
|
//删除
|
|
handleCopyManage(record){
|
|
let params={
|
|
id:record.id
|
|
}
|
|
this.$confirm({
|
|
title: '确认删除?',
|
|
content: '',
|
|
onOk:
|
|
async () => {
|
|
deleteAction(``,params).then(res=> {
|
|
if(res.success){
|
|
this.$message.success(res.message)
|
|
this.loadData()
|
|
}else{
|
|
this.$message.warning(res.message)
|
|
}
|
|
})
|
|
},
|
|
onCancel() {},
|
|
});
|
|
},
|
|
//新增
|
|
handleAddManage(){
|
|
this.addVisible=true
|
|
},
|
|
closeVisible(val){
|
|
this.addVisible=val
|
|
},
|
|
//导入
|
|
handleImportManage(){
|
|
|
|
},
|
|
//导出
|
|
handleExportManage(){
|
|
|
|
},
|
|
//模板下载
|
|
handleDownManage(){
|
|
|
|
},
|
|
//合并条款
|
|
handleMergeManage(){
|
|
|
|
},
|
|
//批量设置
|
|
handleManage(){
|
|
|
|
},
|
|
//批量删除
|
|
handleBatCancel(){
|
|
|
|
},
|
|
//编辑
|
|
onEdit(val){
|
|
|
|
},
|
|
//删除
|
|
onCancel(val){
|
|
|
|
},
|
|
//选择框
|
|
onSelectChange(selectedRowKeys,rows) {
|
|
this.selectedRowKeys = selectedRowKeys;
|
|
let ids=[]
|
|
if(rows && rows.length>0){
|
|
rows.forEach(item=>{
|
|
ids.push(item.id)
|
|
})
|
|
}
|
|
this.selecIds=ids.join(',')
|
|
},
|
|
//点击页数
|
|
onChangePage(page,pageSize){
|
|
this.queryParams.pageNo = page
|
|
this.loadData()
|
|
},
|
|
//一页显示条数
|
|
SizeChange(page,pageSize){
|
|
this.queryParams.pageSize = pageSize
|
|
this.loadData()
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
@import '~@assets/less/common.less';
|
|
.split-detail{
|
|
.split-detail-wrap{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.split-detail-left{
|
|
width: 260px;
|
|
padding-right: 20px;
|
|
border-right: 1px solid #666666;
|
|
}
|
|
.split-detail-right{
|
|
padding-left: 20px;
|
|
flex: 1;
|
|
.split-detail-search-header{
|
|
margin-bottom: 20px;
|
|
}
|
|
.split-detail-table{
|
|
.action-edit{
|
|
margin-right: 20px;
|
|
}
|
|
}
|
|
}
|
|
.page{
|
|
margin-top: 20px;
|
|
}
|
|
}
|
|
}
|
|
</style> |