update AddForm、Search组件修改
This commit is contained in:
赵霄
@@ -0,0 +1,266 @@
|
||||
<template>
|
||||
<a-card :bordered="false" class="page-left-right-layout">
|
||||
<div class="page-left-box">
|
||||
<!-- $t('standardRegulationLibrary.domesticStandard.treeSearchPlaceholder')-->
|
||||
<a-input-search v-model="treeInput" :placeholder="$t('standardRegulationLibrary.domesticStandard.treeSearchPlaceholder')"
|
||||
@search="handleTableSearch" />
|
||||
<a-tree :show-line="true" :show-icon="true" :tree-data=treeData>
|
||||
<template #iconCustom="{title}">
|
||||
<div class="tree-node">
|
||||
<img src="@/assets/image/common/iconTreeFolder.png" class="tree-node-icon" alt="" />
|
||||
<a-tooltip>
|
||||
<template #title>
|
||||
{{ title }}
|
||||
</template>
|
||||
<span class="tree-node-title">{{ title }}</span>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #custom="{title, key}">
|
||||
<div class="tree-operate-node" @mouseenter="handleTreeMouseover(key)" @mouseleave="handleTreeMouseout(key)">
|
||||
<a-tooltip>
|
||||
<template #title>
|
||||
{{ title }}
|
||||
</template>
|
||||
<span class="tree-node-custom-title">{{ title }}</span>
|
||||
</a-tooltip>
|
||||
<template v-if="key === mouseInNodeKey">
|
||||
<!-- 新增-->
|
||||
<a-button icon="plus" class="tree-operate-node-btn"></a-button>
|
||||
<!-- 编辑-->
|
||||
<a-button class="tree-operate-node-btn">
|
||||
<img src="@/assets/image/common/iconTreeEdit.png" alt="" />
|
||||
</a-button>
|
||||
<!-- 删除-->
|
||||
<a-button class="tree-operate-node-btn">
|
||||
<img src="@/assets/image/common/iconTreeDelete.png" alt="" />
|
||||
</a-button>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</a-tree>
|
||||
</div>
|
||||
<div class="page-right-box">
|
||||
<div class="table-page-search-wrapper">
|
||||
<search ref="searchRef" :url="url" :get-query-condition-func="getQueryConditionFunc" @search="searchQuery" @reset="searchReset" />
|
||||
</div>
|
||||
|
||||
<div class="table-operator">
|
||||
<!-- 新增-->
|
||||
<a-button icon="plus" type="primary" @click="handleAdd">{{ $t('newlyAdded') }}</a-button>
|
||||
<!-- 导入-->
|
||||
<a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
|
||||
<a-button type="primary" icon="download" ghost>{{ $t('import') }}</a-button>
|
||||
</a-upload>
|
||||
<!-- 导出-->
|
||||
<a-button icon="upload" type="primary" ghost @click="handleExportXls($t('standardRegulationLibrary.domesticStandard.treeSearchPlaceholder'))">
|
||||
{{ $t('export') }}
|
||||
</a-button>
|
||||
<!-- 带文件导出-->
|
||||
<a-button icon="upload" type="primary" ghost>{{ $t('exportWithFile') }}</a-button>
|
||||
<!-- 模板下载-->
|
||||
<a-button type="primary" icon="download" ghost @click="downTemplate('standardRegulationLibrary.domesticStandard.templateName')">
|
||||
{{ $t('templateDownload') }}
|
||||
</a-button>
|
||||
<!-- 批量删除-->
|
||||
<a-button type="primary" icon="delete" ghost @click="batchDel">{{ $t('batchDelete') }}</a-button>
|
||||
<!-- 配置标准-->
|
||||
<a-button type="primary" icon="setting" ghost>{{ $t('standardRegulationLibrary.configStandard') }}</a-button>
|
||||
<!-- 移出标准-->
|
||||
<a-button type="primary" icon="minus-circle" ghost>{{ $t('standardRegulationLibrary.removeStandard') }}</a-button>
|
||||
</div>
|
||||
<div>
|
||||
<j-table
|
||||
v-if="columns && columns.length > 0"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:can-drag="true"
|
||||
rowKey="id"
|
||||
:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
|
||||
:pagination="ipagination"
|
||||
:scroll="{x: '100%'}"
|
||||
@change="tableOnChange">
|
||||
|
||||
<template v-slot:operation="{text, record}">
|
||||
<a>{{ $t('standardRegulationLibrary.domesticStandard.collection') }}</a>
|
||||
<a-divider type="vertical" />
|
||||
<a-dropdown>
|
||||
<a-icon type="more" class="operate-icon-btn" />
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item v-for="(operation, index) in operationList.slice(operateMaxNum)" :key="index">
|
||||
<a @click="operationClick(operation,record)">
|
||||
<span v-if="operation.text === $t('docLibrary.cancelCollection')" class="text">
|
||||
{{ !record.collectFlag || record.collectFlag === '0' ? $t('docLibrary.collection') : $t('docLibrary.cancelCollection') }}
|
||||
</span>
|
||||
<span v-else-if="operation.text === $t('docLibrary.cancelSubscribe')" class="text">
|
||||
{{ !record.subscribeFlag || record.subscribeFlag === '0' ? $t('docLibrary.subscribe') : $t('docLibrary.cancelSubscribe') }}
|
||||
</span>
|
||||
<span v-else class="text">
|
||||
{{ operation.text }}
|
||||
</span>
|
||||
</a>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
</template>
|
||||
</j-table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 新增、编辑-->
|
||||
<overseas-standard-modal ref="modalForm" @ok="modalFormOk" />
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import '@assets/less/common.less'
|
||||
import JTable from '../../../components/jero/JTable.vue'
|
||||
import Search from '../../../components/customField/Search.vue'
|
||||
import { ConfigurableTableMixin } from '../../../mixins/ConfigurableTableMixin'
|
||||
import OverseasStandardModal from './modules/OverseasStandardModal.vue'
|
||||
|
||||
const apiTreeData = [
|
||||
{
|
||||
title: 'parent 1',
|
||||
key: '0-0',
|
||||
child: [
|
||||
{
|
||||
title: '张晨成',
|
||||
key: '0-0-0',
|
||||
disabled: true,
|
||||
child: [
|
||||
{ title: 'leaf', key: '0-0-0-0' },
|
||||
{ title: 'leaf', key: '0-0-0-1' }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'parent 1-1',
|
||||
key: '0-0-1',
|
||||
child: [{ key: '0-0-1-0', title: 'zcvc' }]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'OverseasStandardList',
|
||||
components: { JTable, Search, OverseasStandardModal },
|
||||
mixins: [ConfigurableTableMixin],
|
||||
data () {
|
||||
return {
|
||||
treeInput: null, // 树查询绑定值
|
||||
treeData: [],
|
||||
mouseInNodeKey: null, // 鼠标悬浮的节点key值
|
||||
showAction: true,
|
||||
operationList: [
|
||||
// 收藏
|
||||
{
|
||||
text: this.$t('standardRegulationLibrary.domesticStandard.cancelCollection'),
|
||||
clickEvent: 'collection',
|
||||
has: ''
|
||||
},
|
||||
{
|
||||
text: this.$t('edit'),
|
||||
clickEvent: 'handleEdit',
|
||||
has: ''
|
||||
},
|
||||
{
|
||||
text: this.$t('share'),
|
||||
clickEvent: 'handleShare',
|
||||
has: ''
|
||||
},
|
||||
{
|
||||
text: this.$t('delete'),
|
||||
clickEvent: 'handleDelete',
|
||||
has: ''
|
||||
}
|
||||
],
|
||||
url: {
|
||||
tableHeader: '/laws/standard/overseas/getCommonHeader',
|
||||
getSearchList: '/laws/standard/overseas/getQueryCondition',
|
||||
list: '/laws/standard/overseas/getCommonHeader',
|
||||
delete: '/laws/standard/overseas/deleteByIdsAndModule'
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.initTreeData()
|
||||
},
|
||||
methods: {
|
||||
initTreeData () {
|
||||
this.treeData = this.dealTreeData(apiTreeData)
|
||||
},
|
||||
dealTreeData (treeData) {
|
||||
return treeData.map(item => {
|
||||
if (item.child && item.child.length > 0) {
|
||||
item.scopedSlots = { title: 'iconCustom' }
|
||||
item.children = this.dealTreeData(item.child)
|
||||
} else {
|
||||
item.scopedSlots = { title: 'custom' }
|
||||
}
|
||||
return item
|
||||
})
|
||||
},
|
||||
handleTableSearch () {
|
||||
|
||||
},
|
||||
handleTreeMouseover (key) {
|
||||
this.mouseInNodeKey = key
|
||||
},
|
||||
handleTreeMouseout (key) {
|
||||
if (this.mouseInNodeKey === key) {
|
||||
this.mouseInNodeKey = null
|
||||
}
|
||||
},
|
||||
operationClick (operation, record) {
|
||||
if (operation.clickEvent === 'handleDelete') {
|
||||
this.handleDelete(record.id)
|
||||
} else {
|
||||
this[operation.clickEvent](record)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
/deeo/ .ant-tree li span.ant-tree-iconEle {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.tree-icon {
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.tree-operate-node {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
|
||||
&-btn {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: rgba(213, 44, 38, 0.08);
|
||||
border-radius: 2px 2px 2px 2px;
|
||||
border: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 4px;
|
||||
padding: 0;
|
||||
|
||||
/deep/ .anticon {
|
||||
margin-top: 2px;
|
||||
color: #D52C26;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user