ZQ/laws-sinotruk-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[update] 表格拖拽换j-table

Browse Source
This commit is contained in:
lideqin
2023-08-23 15:44:51 +08:00
parent 8e7345928e
commit 029c89e13f
17 changed files with 479 additions and 428 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/documentTool/modules/SplitDetail.vue
+126 -117
View File
@@ -68,7 +68,7 @@
<div class="div-right-wrapper">
<div class="right-search-header table-page-search-wrapper">
<search :flag="'4'" :url="url" :infoId="$route.query.infoId"
:menuId="menuId" @resetSearch="resetSearch" @queryParams="queryParamsValues" />
:menuId="menuId" @reset="searchReset" @search="searchQuery" />
</div>
<div class="table-operator">
<div class="operator-text" @click="handleCopyManage">
@@ -84,7 +84,7 @@
{{ $t('add') }}
</div>
<div class="operator-text upload-split"
v-if="$route.query.createBy === userData.username || administrators"
v-if="isCanOperate"
@click="handleImportManage" v-has="'split:sarFileSplitItems:import'">
<a-icon type="import" :rotate="-90" v-if="uploadMenuId === undefined || uploadMenuId === ''" />
{{ (uploadMenuId === '' || uploadMenuId === undefined) ? $t('import') : '' }}
@@ -97,44 +97,65 @@
{{ $t('export') }}
</div>
<div class="operator-text" @click="handleDownManage"
v-if="$route.query.createBy === userData.username || administrators"
v-if="isCanOperate"
v-has="'split:sarFileSplitItems:template'">
<a-icon type="download" />
{{ $t('templateDownload') }}
</div>
<div class="operator-text" @click="handleMergeManage"
v-if="$route.query.createBy === userData.username || administrators"
v-if="isCanOperate"
v-has="'split:sarFileSplitItems:merge'">
<a-icon type="snippets" />
{{ $t('docTool.split.mergerClause') }}
</div>
<div class="operator-text" @click="handleManage"
v-if="$route.query.createBy === userData.username || administrators"
v-if="isCanOperate"
v-has="'split:sarFileSplitItems:set'">
<a-icon type="setting" />
{{ $t('docTool.split.batchSetting') }}
</div>
<div class="operator-text" @click="handleBatCancel"
v-if="$route.query.createBy === userData.username || administrators"
v-if="isCanOperate"
v-has="'split:sarFileSplitItems:delete'">
<a-icon type="delete" />
{{ $t('batchDelete') }}
</div>
</div>
<div class="split-detail-table">
<table-data
ref="splitDetailTable"
:url="url"
:flag="'4'"
:operationList="operationList"
:infoId="$route.query.infoId"
:menuId="menuId"
:showAction="$route.query.createBy === userData.username || administrators ? true :false"
@onSelectChange="onSelectChange"
@deleteClick="deleteClick"
@editClick="editClick"
@showContent="showContent"
></table-data>
<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" :key="index" @click="operationClick(operation,record)">
<!-- v-has="operation.has"-->
<span class="text">
{{ operation.text }}
</span>
</a>
</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>
<template slot="showContent" slot-scope="text, record">
<span class="content-show" @click="showContent(text,record)">{{record.iterms_conditions&&record.iterms_conditions!=='null'?record.iterms_conditions.replace(/<.*?>/ig, ' ') : ''}}</span>
</template>
</j-table>
</div>
</div>
</div>
@@ -154,7 +175,7 @@
<script>
import Search from '@/components/customField/Search'
import TableData from '@/components/customField/TableData'
import JTable from '@/components/jero/JTable'
// 条款添加
import SplitAddForm from './SplitAddForm'
// 条款内容弹框
@@ -168,17 +189,19 @@ import { ACCESS_TOKEN } from '@/store/mutation-types'
import { mapGetters } from 'vuex'
import { postAction, getAction, downloadFile } from '@/api/manage'
import moment from 'moment'
import { ConfigurableTableMixin } from '../../../mixins/ConfigurableTableMixin'
export default {
name: 'SplitDetail',
components: {
Search,
TableData,
JTable,
SplitAddForm,
SplitClauseDetail,
SplitDetailNodeAdd,
SplitDetailBatchSetting
},
mixins: [ConfigurableTableMixin],
data () {
return {
userData: {},
@@ -215,8 +238,8 @@ export default {
],
url: {
tableHeader: 'split/sarFileSplitItems/getHeader', // 表格头部字段
searchList: 'split/sarFileSplitItems/queryCondition', // 搜索字段
tableList: 'split/sarFileSplitItems/getSplitItemsByPage', // 表格数据
getSearchList: 'split/sarFileSplitItems/queryCondition', // 搜索字段
list: 'split/sarFileSplitItems/getSplitItemsByPage', // 表格数据
getAddForm: 'split/sarFileSplitItems/getForm', // 表单的字段
getDocumentInfo: 'split/sarFileSplitItems/getSplitItemsById',
importZipUrl: '/split/sarFileSplitItems/importSplitItems' // 导入
@@ -228,7 +251,20 @@ export default {
moveUpFlag: false,
fullWidth: '',
parameter: {},
administrators: false
administrators: false,
showAction: this.isCanOperate,
flag: '4' // 查询要用到
}
},
computed: {
isCanOperate () {
return !!(this.$route.query.createBy === this.userData.username || this.administrators)
},
filters () {
return {
menu_id: this.menuId,
info_id: this.infoId
}
}
},
mounted () {
@@ -383,13 +419,9 @@ export default {
this.menuId = selectedKeys[0]
this.uploadMenuId = selectedKeys[0]
this.selectedKeys = selectedKeys
const queryParam = {
menu_id: this.menuId,
info_id: this.infoId
}
this.parameter.info_id = this.infoId
this.parameter.menu_id = this.menuId
this.$refs.splitDetailTable.$emit('searchQuery', JSON.parse(JSON.stringify(queryParam)))
this.loadData()
},
// 树形新增
orgAdd () {
@@ -403,11 +435,7 @@ export default {
nodeAddOk () {
this.expandedKeys.push(this.nodeItem.id)
this.loadMenuData()
const queryParam = {
menu_id: this.menuId,
info_id: this.infoId
}
this.$refs.splitDetailTable.$emit('searchQuery', JSON.parse(JSON.stringify(queryParam)))
this.loadData()
},
// 修改节点完成后的回调
nodeUpdateOk (expandId) {
@@ -424,11 +452,7 @@ export default {
if (res.success) {
this.$message.success(this.$t('operationSuccessful'))
this.loadMenuData()
const queryParam = {
menu_id: this.menuId,
info_id: this.infoId
}
this.$refs.splitDetailTable.$emit('searchQuery', JSON.parse(JSON.stringify(queryParam)))
this.loadData()
} else {
this.$message.warning(this.$t('operationFailed'))
}
@@ -451,11 +475,7 @@ export default {
if (res.success) {
this.$message.success(this.$t('operationSuccessful'))
this.loadMenuData()
const queryParam = {
menu_id: this.menuId,
info_id: this.infoId
}
this.$refs.splitDetailTable.$emit('searchQuery', JSON.parse(JSON.stringify(queryParam)))
this.loadData()
} else {
this.$message.warning(this.$t('operationFailed'))
}
@@ -476,12 +496,7 @@ export default {
if (res.success) {
this.$message.success(this.$t('operationSuccessful'))
this.loadMenuData()
const queryParam = {
menu_id: this.menuId,
info_id: this.infoId
}
this.$refs.splitDetailTable.$emit('searchQuery', JSON.parse(JSON.stringify(queryParam)))
this.loadData()
} else {
this.$message.warning(this.$t('operationFailed'))
}
@@ -490,6 +505,56 @@ export default {
onContextMenuClick (treeKey, menuKey) {
// console.log(`treeKey: ${treeKey}, menuKey: ${menuKey}`);
},
// 表格操作列按钮的点击
operationClick (operation, record) {
if (this[operation.clickEvent]) {
this[operation.clickEvent](record)
}
},
/**
* 处理表头数据
* @param columns
* @returns {*[]}
*/
dealColumns (columns) {
const tempColumns = []
columns.forEach(item => {
// 可点击项加入插槽
if (item.click === 'true') {
item.scopedSlots = {
customRender: 'detailClick'
}
} else if (item.urlClick === 'true') {
item.scopedSlots = {
customRender: 'urlClick'
}
} else if (item.db_field_name === 'iterms_conditions') {
// 拆分文档详情页的条款内容点击可预览
item.scopedSlots = {
customRender: 'showContent'
}
}
// 是否可排序
item.sorter = item.sort === 'true'
item.width = 215
item.title = item.db_field_txt
item.dataIndex = item.db_field_name
item.align = 'left'
tempColumns.push(item)
})
if (this.showAction && this.operateColumn) {
let width = 0
if (this.operationList.length > 0) {
for (let i = 0; i < this.operationList.length; i++) {
width += this.getTextWith(this.operationList[i].text)
}
}
const operateColumn = JSON.parse(JSON.stringify(this.operateColumn))
operateColumn.width = width
tempColumns.push(operateColumn)
}
return tempColumns
},
// 清空按钮
resetSearch () {
this.menuId = ''
@@ -520,13 +585,8 @@ export default {
if (res.data.success) {
this.$message.success(this.$t('operationSuccessful'))
this.selectClear()
// this.loadData()
this.loadMenuData()
const queryParam = {
menu_id: this.menuId,
info_id: this.infoId
}
this.$refs.splitDetailTable.$emit('searchGetData', JSON.parse(JSON.stringify(queryParam)))
this.loadData()
} else {
this.$message.warning(this.$t('operationFailed'))
}
@@ -569,13 +629,8 @@ export default {
// 上传成功
uploadSuccess (data, status) {
if (status === 'success') {
const queryParam = {
menu_id: this.menuId,
info_id: this.infoId
}
this.loadMenuData()
this.$refs.splitDetailTable.$emit('searchGetData', JSON.parse(JSON.stringify(queryParam)))
this.loadData()
}
const attIdList = []
if (data && data.length > 0) {
@@ -612,10 +667,8 @@ export default {
downloadFile('split/sarFileSplitItems/exportSplitInfoZip', name, query, this.selectClear)
},
selectClear () {
this.$refs.splitDetailTabel.selectedRowKeys = []
this.selectedRowKeys = []
this.selectedRows = []
this.selecIds = []
},
// 模板下载
handleDownManage () {
@@ -637,11 +690,7 @@ export default {
this.$message.success(this.$t('operationSuccessful'))
this.selectClear()
this.loadMenuData()
const queryParam = {
menu_id: this.menuId,
info_id: this.infoId
}
this.$refs.splitDetailTable.$emit('searchGetData', JSON.parse(JSON.stringify(queryParam)))
this.loadData()
this.selectedRowKeys = []
} else {
this.$message.warning(this.$t('operationFailed'))
@@ -663,18 +712,14 @@ export default {
// 批量设置完成的回调
batchSettingOk () {
this.selectClear()
const queryParam = {
menu_id: this.menuId,
info_id: this.infoId
}
this.$refs.splitDetailTable.$emit('searchGetData', JSON.parse(JSON.stringify(queryParam)))
this.loadData()
},
// 批量删除
handleBatCancel () {
const params = {
ids: this.selecIds.join(',')
ids: this.selectedRowKeys.join(',')
}
if (this.selecIds && this.selecIds.length > 0) {
if (this.selectedRowKeys && this.selectedRowKeys.length > 0) {
this.$confirm({
title: this.$t('confirmBatchDeletion'),
content: '',
@@ -683,13 +728,12 @@ export default {
if (res.data.success) {
this.$message.success(this.$t('operationSuccessful'))
this.loadMenuData()
const queryParam = {
this.filter = {
menu_id: this.menuId,
info_id: this.infoId
}
this.$refs.splitDetailTable.$emit('searchGetData', JSON.parse(JSON.stringify(queryParam)))
this.loadData()
this.selectClear()
// eventBUs.$emit('searchReset')
} else {
this.$message.warning(res.data.message)
}
@@ -712,8 +756,8 @@ export default {
})
},
// 保存成功
sumber (queryParam) {
this.$refs.splitDetailTable.$emit('searchGetData', JSON.parse(JSON.stringify(queryParam)))
sumber () {
this.loadData()
this.loadMenuData()
},
// 删除
@@ -729,12 +773,7 @@ export default {
if (res.data.success) {
this.$message.success(this.$t('operationSuccessful'))
this.loadMenuData()
const queryParam = {
menu_id: this.menuId,
info_id: this.infoId
}
this.$refs.splitDetailTable.$emit('searchGetData', JSON.parse(JSON.stringify(queryParam)))
this.loadData()
} else {
this.$message.warning(this.$t('operationFailed'))
}
@@ -851,36 +890,6 @@ export default {
<style scoped lang="less">
@import '~@assets/less/common.less';
/deep/ .ant-table-body {
overflow: hidden !important;
}
.add-menus {
.ant-modal-wrap {
.ant-modal-footer {
text-align: center;
}
}
}
.show-setting {
.ant-modal {
min-width: 700px;
}
.ant-select-dropdown--multiple {
max-height: 39vh !important;
}
.ant-modal-body {
overflow-y: visible !important;
}
.ant-modal-footer {
text-align: center;
}
}
@media screen and (min-width: 600px) and (max-width: 1600px) {
.operator-text {
margin-right: 20px !important;