[add] 企标库-企业标准
This commit is contained in:
lideqin
@@ -0,0 +1,309 @@
|
||||
<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('pleaseEnterTreeSystem')"
|
||||
@search="handleTableSearch" />
|
||||
<img src="">
|
||||
<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" />
|
||||
<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" />
|
||||
</a-button>
|
||||
<a-button class="tree-operate-node-btn">
|
||||
<img src="@/assets/image/common/iconTreeDelete.png" />
|
||||
</a-button>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</a-tree>
|
||||
</div>
|
||||
<div class="page-right-box">
|
||||
<div class="table-page-search-wrapper">
|
||||
<search ref="searchRef"
|
||||
:flag="flag"
|
||||
:get-query-condition-func="getQueryConditionFunc"
|
||||
@search="searchQuery"
|
||||
@reset="searchReset" />
|
||||
</div>
|
||||
<div class="table-operator">
|
||||
<div class="operator-text" @click="handleAdd">
|
||||
<a-icon type="plus" />
|
||||
{{ $t('newlyAdded') }}
|
||||
</div>
|
||||
<a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
|
||||
<div class="operator-text">
|
||||
<a-icon type="upload" />
|
||||
{{ $t('import') }}
|
||||
</div>
|
||||
</a-upload>
|
||||
<div class="operator-text" @click="handleExportXls">
|
||||
<a-icon type="export" />
|
||||
{{ $t('export') }}
|
||||
</div>
|
||||
<div class="operator-text" @click="handleFileExport">
|
||||
<a-icon type="mail" />
|
||||
{{ $t('exportWithFile') }}
|
||||
</div>
|
||||
<div class="operator-text" @click="downTemplate($t('enterpriseStandardLibrary.enterpriseStandard.templateExport'))">
|
||||
<a-icon type="download" />
|
||||
{{ $t('templateDownload') }}
|
||||
</div>
|
||||
<div class="operator-text" @click="batchDel">
|
||||
<a-icon type="delete" />
|
||||
{{ $t('batchDelete') }}
|
||||
</div>
|
||||
<div class="operator-text" @click="handleAllocationStandard">
|
||||
<a-icon type="setting" />
|
||||
{{ $t('enterpriseStandardLibrary.enterpriseStandard.allocationStandard') }}
|
||||
</div>
|
||||
<div class="operator-text" @click="handleShiftOutStandard">
|
||||
<a-icon type="setting" />
|
||||
{{ $t('enterpriseStandardLibrary.enterpriseStandard.shiftOutStandard') }}
|
||||
</div>
|
||||
<div class="operator-text" @click="handleInitChange">
|
||||
<a-icon type="setting" />
|
||||
{{ $t('enterpriseStandardLibrary.enterpriseStandard.initChange') }}
|
||||
</div>
|
||||
<div class="operator-text" @click="handleTemporaryPermissSet">
|
||||
<a-icon type="setting" />
|
||||
{{ $t('enterpriseStandardLibrary.enterpriseStandard.temporaryPermissionSet') }}
|
||||
</div>
|
||||
</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 slot="operation" slot-scope="{text, record}">
|
||||
<a v-for="(operation, index) in operationList.slice(0, operateMaxNum)" :key="index" @click="operationClick(operation,record)">
|
||||
<template v-if="operation.text === $t('enterpriseStandardLibrary.enterpriseStandard.collection')">
|
||||
{{ !record.collectFlag || record.collectFlag === '0' ? $t('enterpriseStandardLibrary.enterpriseStandard.collection') : $t('enterpriseStandardLibrary.enterpriseStandard.cancelCollection')
|
||||
}}
|
||||
</template>
|
||||
</a>
|
||||
<a-divider v-if="operationList.length >= operateMaxNum" type="vertical" />
|
||||
<a-dropdown v-if="operationList.length >= operateMaxNum">
|
||||
<a class="ant-dropdown-link">
|
||||
{{ $t('more') }} <a-icon type="down"/>
|
||||
</a>
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item v-for="(operation, index) in operationList.slice(operateMaxNum)" :key="index">
|
||||
<a @click="operationClick(operation,record)">
|
||||
{{ operation.text }}
|
||||
</a>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
</template>
|
||||
|
||||
<!-- 详情-->
|
||||
<template slot="detailClick" slot-scope="{text, record}">
|
||||
<a-tooltip overlay-class-name="tooltip-style">
|
||||
<template slot="title">{{ text || text === 0 ? text : global.emptyLine }}</template>
|
||||
<a class="table-text textName" @click="detailClick(record)" v-if="text || text === 0">{{ text }}</a>
|
||||
<div class="table-text" v-else>{{ global.emptyLine }}</div>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
|
||||
</j-table>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import '@assets/less/common.less'
|
||||
import JTable from '@/components/jero/JTable'
|
||||
// 搜索组件
|
||||
import Search from '@/components/customField/Search'
|
||||
import { ConfigurableTableMixin } from '@/mixins/ConfigurableTableMixin'
|
||||
import { getEnterpriseStandardTableHeader, getEnterpriseStandardSearchForm } from '@api/enterpriseStandardLibraryApi'
|
||||
|
||||
export default {
|
||||
name: 'EnterpriseStandardList',
|
||||
components: { JTable, Search },
|
||||
mixins: [ConfigurableTableMixin],
|
||||
data () {
|
||||
return {
|
||||
flag: '3',
|
||||
treeInput: '', // 左侧树搜索框内容
|
||||
treeData: [], // 左侧树数据
|
||||
mouseInNodeKey: null, // 鼠标悬浮的节点key值
|
||||
operationList: [
|
||||
{
|
||||
text: this.$t('enterpriseStandardLibrary.enterpriseStandard.collection'),
|
||||
clickEvent: 'handleCollection',
|
||||
has: 'enterpriseStandard:collection'
|
||||
},
|
||||
{
|
||||
text: this.$t('edit'),
|
||||
clickEvent: 'handleEdit',
|
||||
has: 'enterpriseStandard:edit'
|
||||
},
|
||||
{
|
||||
text: this.$t('share'),
|
||||
clickEvent: 'handleShare',
|
||||
has: 'enterpriseStandard:share'
|
||||
},
|
||||
{
|
||||
text: this.$t('delete'),
|
||||
clickEvent: 'handleDelete',
|
||||
has: 'enterpriseStandard:delete'
|
||||
}
|
||||
],
|
||||
selectedRowKeys: [],
|
||||
loading: false,
|
||||
getTableHeaderFunc: getEnterpriseStandardTableHeader,
|
||||
getQueryConditionFunc: getEnterpriseStandardSearchForm,
|
||||
// url传参严格按照当前命名
|
||||
url: {
|
||||
list: '/laws/common/getCommonPage', // 表格数据
|
||||
getAddForm: '/laws/common/getFormModel', // 表单的字段
|
||||
addInfo: '', // 新增
|
||||
updateInfo: '', // 编辑
|
||||
getDocumentInfo: '', // 查看
|
||||
delete: '', // 删除
|
||||
deleteBatch: '', // 批量删除
|
||||
importUrl: '', // 导入
|
||||
exportXlsUrl: '', // 导出
|
||||
exportZipUrl: '', // 带文件导出
|
||||
downTemplateUrl: '' // 下载导入模板
|
||||
},
|
||||
showAction: true, // 是否显示操作列
|
||||
dataSource: [
|
||||
{
|
||||
collectFlag: '0',
|
||||
id: 'fd045f5c5d734087a884a63664ee91f1',
|
||||
issue_time: '',
|
||||
region: '',
|
||||
serial_number: '0621001编号',
|
||||
state: '现行',
|
||||
subscribeFlag: '0',
|
||||
technology_territory: '',
|
||||
title: '0621001标题',
|
||||
title_en: '0621001Title'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 左侧树搜索
|
||||
handleTableSearch () {
|
||||
|
||||
},
|
||||
// 左侧树鼠标移入某一目录
|
||||
handleTreeMouseover (key) {
|
||||
this.mouseInNodeKey = key
|
||||
},
|
||||
// 左侧树鼠标移出某一目录
|
||||
handleTreeMouseout (key) {
|
||||
if (this.mouseInNodeKey === key) {
|
||||
this.mouseInNodeKey = null
|
||||
}
|
||||
},
|
||||
// 配置标准
|
||||
handleAllocationStandard () {
|
||||
|
||||
},
|
||||
// 移出标准
|
||||
handleShiftOutStandard () {
|
||||
|
||||
},
|
||||
// 发起更改
|
||||
handleInitChange () {
|
||||
|
||||
},
|
||||
// 临时权限设置
|
||||
handleTemporaryPermissSet () {
|
||||
|
||||
},
|
||||
// 操作栏的点击
|
||||
operationClick (operation, record) {
|
||||
if (operation.clickEvent === 'handleDelete') {
|
||||
this.handleDelete(record.id)
|
||||
} else {
|
||||
this[operation.clickEvent](record)
|
||||
}
|
||||
},
|
||||
// 收藏
|
||||
handleCollection (record) {
|
||||
|
||||
},
|
||||
// 分享
|
||||
handleShare (record) {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
/deep/ .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