You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
228 lines
9.0 KiB
228 lines
9.0 KiB
<template>
|
|
<div>
|
|
<div class="format-main">
|
|
<div class="format-main-left">
|
|
<div class="head-container">
|
|
<el-button v-permission="permission.add" size="mini" icon="el-icon-plus" :disabled="table.left.selections.length == 0" @click="toAdd(table.left.selections)">
|
|
插入
|
|
</el-button>
|
|
</div>
|
|
<!--表格渲染-->
|
|
<el-table ref="leftTable" v-loading="table.left.loading" :data="table.left.data" style="width: 400px;" height="calc(100vh - 602px)" @selection-change="(val)=>selectionChangeHandler(val,'left')" @row-click="(row,column,e)=>clickRowHandler(row,column,e,'leftTable')">
|
|
<el-table-column type="selection" width="55" align="center" />
|
|
<el-table-column type="index" label="序号" width="55" align="center" />
|
|
<el-table-column prop="fieldCnName" label="字段名称" align="center" />
|
|
</el-table>
|
|
<!--表单渲染-->
|
|
<eForm />
|
|
</div>
|
|
<div class="format-main-right">
|
|
<div class="head-container">
|
|
<el-button v-permission="permission.del" icon="el-icon-delete" size="mini" :loading="delAllLoading" :disabled="table.right.selections.length === 0" @click="toDelete(table.right.selections)">
|
|
移除
|
|
</el-button>
|
|
<el-button v-permission="permission.edit" size="mini" icon="el-icon-edit" :disabled="table.right.selections.length === 0" @click="toEdit(table.right.selections)">
|
|
编辑
|
|
</el-button>
|
|
<!-- type="danger" -->
|
|
<el-button v-permission="permission.sort" icon="el-icon-sort" size="mini" :loading="sortLoading" :disabled="table.right.data <= 1" @click="toSort">排序</el-button>
|
|
</div>
|
|
<!--表格渲染-->
|
|
<el-table ref="rightTable" v-loading="table.right.loading" :data="table.right.data" height="calc(100vh - 602px)" @selection-change="(val)=>selectionChangeHandler(val,'right')" @row-click="(row,column,e)=>clickRowHandler(row,column,e,'rightTable')">
|
|
<el-table-column type="selection" width="55" align="center" />
|
|
<el-table-column type="index" label="序号" width="55" align="center" />
|
|
<el-table-column prop="fieldCnName" label="字段名称" align="center" />
|
|
<el-table-column prop="displayLength" label="显示长度" align="center" />
|
|
<el-table-column label="显示格式">
|
|
<template slot-scope="scope">
|
|
<span v-if="scope.row.displayformatType === 'center'">居中</span>
|
|
<span v-if="scope.row.displayformatType === 'left'">靠左</span>
|
|
<span v-if="scope.row.displayformatType === 'right'">靠右</span>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<!--表单渲染-->
|
|
<eForm ref="cuform" @refresh="initData" />
|
|
<!--排序对话框组件-->
|
|
<sortDialog ref="sort" @refresh="initData" />
|
|
<!--删除对话框组件-->
|
|
<el-dialog class="tip-dialog" title="提示" :visible.sync="deleteVisible" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body>
|
|
<div class="setting-dialog">
|
|
<div class="tip-content">
|
|
<p class="tipMsg">此操作将移除当前所选字段</p>
|
|
<span>你是否还要继续?</span>
|
|
</div>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button type="text" @click="deleteVisible = false">取消</el-button>
|
|
<el-button type="primary" @click.native="handleDelConfirm">确定</el-button>
|
|
</div>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
<!-- @selection-change="selectionChangeHandler" -->
|
|
<el-table ref="table" :key="tableKey" v-loading="table.bottom.loading" :data="table.bottom.data" style="min-width: 100%;" height="300" class="nowrap-tab">
|
|
<el-table-column type="selection" width="55" align="center" />
|
|
<el-table-column type="index" label="序号" width="55" align="center" />
|
|
<el-table-column v-for="field in table.right.data" :key="field.id" :label="field.fieldCnName" :align="field.displayformatType" :width="field.displayLength" show-overflow-tooltip>
|
|
<template slot-scope="scope">
|
|
{{ scope.row[field.fieldName] }}
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { FetchDocumentFieldManage } from '@/api/system/fileLibrary/fileLibrary'
|
|
import { FetchInitArchivesView } from '@/api/archivesManage/archivesList'
|
|
import { add } from '@/api/system/fileLibrary/listBrowsing'
|
|
import eForm from './module/form'
|
|
import sortDialog from './module/sortDialog'
|
|
import Vue from 'vue'
|
|
|
|
export default {
|
|
components: { eForm, sortDialog },
|
|
props: {
|
|
selectedCategory: {
|
|
type: Object,
|
|
default: function() {
|
|
return {}
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
permission: {
|
|
add: ['admin', 'listBrowsing:add'],
|
|
edit: ['admin', 'listBrowsing:edit'],
|
|
del: ['admin', 'listBrowsing:delete'],
|
|
sort: ['admin', 'listBrowsing:sort']
|
|
},
|
|
deleteVisible: false,
|
|
sortLoading: false,
|
|
delAllLoading: false,
|
|
tableKey: false, // 刷新下面预览表格用的:key
|
|
table: {
|
|
left: {
|
|
data: [],
|
|
Loading: false,
|
|
selections: []
|
|
},
|
|
right: {
|
|
data: [],
|
|
Loading: false,
|
|
selections: []
|
|
},
|
|
bottom: {
|
|
data: [],
|
|
Loading: false,
|
|
selections: []
|
|
}
|
|
}
|
|
}
|
|
},
|
|
watch: {
|
|
selectedCategory: function(newValue, oldValue) {
|
|
this.initData()
|
|
}
|
|
},
|
|
mounted() {
|
|
this.initData()
|
|
},
|
|
methods: {
|
|
initData() {
|
|
this.getDisplayFieldData()
|
|
this.getBottomTableData()
|
|
},
|
|
getDisplayFieldData() {
|
|
FetchDocumentFieldManage({ documentId: this.selectedCategory.id, isType: 2 }).then((res) => {
|
|
this.table.right.data.splice(0, this.table.right.data.length)
|
|
this.table.left.data.splice(0, this.table.left.data.length)
|
|
res.sort((item1, item2) => { return item1.displayOrder - item2.displayOrder }).forEach((item) => {
|
|
if (item.isInput) {
|
|
if (item.isDisplay) {
|
|
this.table.right.data.push(item)
|
|
} else {
|
|
this.table.left.data.push(item)
|
|
}
|
|
}
|
|
})
|
|
this.tableKey = !this.tableKey
|
|
})
|
|
},
|
|
getBottomTableData() {
|
|
FetchInitArchivesView({ documentId: this.selectedCategory.id, isdel: false, page: 0, size: 10 }).then((res) => {
|
|
this.table.bottom.data.splice(0, this.table.bottom.data.length)
|
|
if (res && res.list) {
|
|
res.list.content.forEach((item) => {
|
|
this.table.bottom.data.push(item)
|
|
})
|
|
}
|
|
})
|
|
},
|
|
clickRowHandler(row, column, e, tableName) {
|
|
this.$refs[tableName].toggleRowSelection(row)
|
|
},
|
|
selectionChangeHandler(val, tableName) {
|
|
this.table[tableName].selections = val
|
|
},
|
|
toAdd() {
|
|
const maxDisplayOrder = this.table.right.data.reduce((prev, cur) => { return { displayOrder: Math.max(prev.displayOrder, cur.displayOrder) } }, { displayOrder: 0 }).displayOrder + 1
|
|
this.table.left.selections.forEach((item, index) => {
|
|
Vue.set(item, 'displayLength', 100)
|
|
Vue.set(item, 'displayformatType', 'center')
|
|
Vue.set(item, 'displayOrder', maxDisplayOrder + index)
|
|
item.isDisplay = true
|
|
})
|
|
this.$refs.cuform.title = '新增列表显示列'
|
|
Vue.set(this.$refs.cuform.formData, 'fields', JSON.parse(JSON.stringify(this.table.left.selections)))
|
|
this.$refs.cuform.cuDialogVisible = true
|
|
},
|
|
toEdit() {
|
|
this.$refs.cuform.title = '编辑列表显示列'
|
|
Vue.set(this.$refs.cuform.formData, 'fields', JSON.parse(JSON.stringify(this.table.right.selections)))
|
|
this.$refs.cuform.cuDialogVisible = true
|
|
},
|
|
toDelete() {
|
|
this.deleteVisible = true
|
|
},
|
|
handleDelConfirm() {
|
|
this.deleteVisible = false
|
|
this.delAllLoading = true
|
|
const deleteData = this.table.right.selections.map((item) => {
|
|
item.isDisplay = false
|
|
item.displayformatType = null
|
|
item.displayLength = null
|
|
item.displayOrder = null
|
|
return item
|
|
})
|
|
add(deleteData).then((res) => {
|
|
this.delAllLoading = false
|
|
this.$message({
|
|
message: '删除成功',
|
|
type: 'success',
|
|
duration: 2500
|
|
})
|
|
this.getDisplayFieldData()
|
|
})
|
|
},
|
|
toSort() {
|
|
this.$refs.sort.sortTableData = JSON.parse(JSON.stringify(this.table.right.data))
|
|
this.$refs.sort.sortVisible = true
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
// ::v-deep div.el-dialog__footer {
|
|
// text-align: center;
|
|
// }
|
|
// ::v-deep .el-table tr .el-table__cell {
|
|
// height: 40px;
|
|
// }
|
|
// ::v-deep .nowrap-tab .el-table__header .cell {
|
|
// text-overflow: unset !important;
|
|
// white-space: nowrap !important;
|
|
// }
|
|
</style>
|