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.
191 lines
6.7 KiB
191 lines
6.7 KiB
<template>
|
|
<div class="app-container">
|
|
<el-row class="container-main" :gutter="20">
|
|
<!--左侧树状数据-->
|
|
<el-col class="container-left" :xs="9" :sm="6" :md="5" :lg="4" :xl="4">
|
|
<span class="right-top-line" />
|
|
<span class="left-bottom-line" />
|
|
<div class="head-container" style="color:#fff">
|
|
档案门类
|
|
</div>
|
|
<el-tree ref="archivesTree" v-loading="crud.loading" :data="crud.data" :props="defaultProps" node-key="id" :expand-on-click-node="false" highlight-current @node-click="handleNodeClick" />
|
|
|
|
</el-col>
|
|
<!--用户数据-->
|
|
<el-col class="container-right" :xs="15" :sm="18" :md="19" :lg="20" :xl="20">
|
|
<span class="right-top-line" />
|
|
<span class="left-bottom-line" />
|
|
<!--工具栏-->
|
|
<div class="head-container">
|
|
<el-button icon="el-icon-delete" size="mini" @click="handleDelete">彻底删除</el-button>
|
|
<el-button size="mini" style="margin-right:10px" @click="handleRestore">
|
|
<svg-icon icon-class="huanyuan-fanbai" class-name="svg-style" />还原</el-button>
|
|
<!-- 搜索 -->
|
|
<!-- <div v-if="crud.props.searchToggle" class="head-search"> -->
|
|
<el-input
|
|
v-model="query.blurry"
|
|
clearable
|
|
size="small"
|
|
prefix-icon="el-icon-search"
|
|
placeholder="请输入关键词"
|
|
style="width: 200px;margin-right:10px"
|
|
class="filter-item"
|
|
/>
|
|
<rrOperation />
|
|
<!-- </div> -->
|
|
</div>
|
|
<!--表格渲染-->
|
|
<el-table
|
|
ref="table"
|
|
:data="tableData"
|
|
style="min-width: 100%"
|
|
height="calc(100vh - 355px)"
|
|
@selection-change="selectionChangeHandler"
|
|
@row-click="clickRowHandler"
|
|
>
|
|
<el-table-column type="selection" width="55" />
|
|
<el-table-column type="index" label="序号" width="55" />
|
|
<el-table-column prop="" label="文件" min-width="55" />
|
|
<el-table-column prop="" label="全宗名" min-width="85" />
|
|
<el-table-column prop="archivesID" :show-overflow-tooltip="true" label="档号" min-width="110" />
|
|
<el-table-column prop="" label="部门名称" min-width="85" />
|
|
<el-table-column prop="" label="件号" min-width="55" />
|
|
<el-table-column :show-overflow-tooltip="true" prop="titleName" label="题名" min-width="100" />
|
|
<el-table-column prop="" label="成文日期" min-width="80" />
|
|
<el-table-column prop="" label="机构(问题)" :show-overflow-tooltip="true" min-width="80" />
|
|
<el-table-column prop="" label="页号" min-width="60" />
|
|
<el-table-column prop="" label="责任者" min-width="85" />
|
|
<el-table-column prop="" label="保管期限" min-width="85" />
|
|
<el-table-column prop="" label="备注" min-width="85" />
|
|
</el-table>
|
|
<!-- 删除模态框 -->
|
|
<el-dialog title="确认删除" :visible.sync="deleteVisible">
|
|
<span class="dialog-right-top" />
|
|
<span class="dialog-left-bottom" />
|
|
<div class="setting-dialog">
|
|
<p><span style="color:#fff;">确定要彻底删除当前档案数据吗?</span></p>
|
|
<p><span style="color:#fff;">数据来源:文件1条数据</span></p>
|
|
<p><span style="color:#f00;">提示:确定彻底删除后，该档案数据及所属文件不能还原</span></p>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button type="primary" @click.native="handleDelConfirm">确定</el-button>
|
|
</div>
|
|
</div>
|
|
</el-dialog>
|
|
<!-- 还原模态框 -->
|
|
<el-dialog title="确认还原" :visible.sync="restoreVisible">
|
|
<span class="dialog-right-top" />
|
|
<span class="dialog-left-bottom" />
|
|
<div class="setting-dialog">
|
|
<p><span style="color:#fff;">确定将当前选择的档案数据进行还原?</span></p>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button type="primary" @click.native="handleRestoreConfirm">确定</el-button>
|
|
</div>
|
|
</div>
|
|
</el-dialog>
|
|
<!--分页组件-->
|
|
<pagination />
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import CRUD, { presenter, header, crud } from '@crud/crud'
|
|
import rrOperation from '@crud/RR.operation'
|
|
import pagination from '@crud/Pagination'
|
|
import data1 from '../lendManage/data1.json'
|
|
import crudCategory from '@/api/category/category'
|
|
|
|
export default {
|
|
name: 'RecycleBin',
|
|
components: { rrOperation, pagination },
|
|
cruds() {
|
|
return CRUD({
|
|
title: '门类',
|
|
url: 'api/archives-type/menu',
|
|
crudMethod: { ...crudCategory },
|
|
optShow: {
|
|
add: false,
|
|
edit: false,
|
|
del: false,
|
|
download: true,
|
|
group: false
|
|
}
|
|
})
|
|
},
|
|
mixins: [presenter(), header(), crud()],
|
|
// 数据字典
|
|
dicts: ['user_status'],
|
|
data() {
|
|
return {
|
|
selections: [], // 选中列表
|
|
deleteVisible: false,
|
|
restoreVisible: false,
|
|
tableData: [],
|
|
defaultProps: { children: 'children', label: 'cnName' }
|
|
|
|
}
|
|
},
|
|
created() {
|
|
this.getData()
|
|
},
|
|
methods: {
|
|
// 获取表格数据
|
|
getData() {
|
|
this.tableData = data1.rows
|
|
},
|
|
// 切换菜单
|
|
handleNodeClick(data) {
|
|
console.log(data)
|
|
},
|
|
// 彻底删除
|
|
handleDelete() {
|
|
if (this.selections.length > 0) {
|
|
this.deleteVisible = true
|
|
} else {
|
|
this.$message({
|
|
message: '请选择要删除的数据',
|
|
type: 'warning'
|
|
})
|
|
}
|
|
},
|
|
// 还原
|
|
handleRestore() {
|
|
if (this.selections.length > 0) {
|
|
this.restoreVisible = true
|
|
} else {
|
|
this.$message({
|
|
message: '请选择要还原的数据',
|
|
type: 'warning'
|
|
})
|
|
}
|
|
},
|
|
clickRowHandler(row) {
|
|
this.$refs.table.toggleRowSelection(row) // 单击选中
|
|
},
|
|
selectionChangeHandler(val) {
|
|
this.selections = val
|
|
},
|
|
handleDelConfirm() {
|
|
this.deleteVisible = false
|
|
},
|
|
handleRestoreConfirm() {
|
|
this.restoreVisible = false
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
|
::v-deep .vue-treeselect__control,::v-deep .vue-treeselect__placeholder,::v-deep .vue-treeselect__single-value {
|
|
height: 30px;
|
|
line-height: 30px;
|
|
}
|
|
::v-deep .head-container .filter-item input{
|
|
height: 30px;
|
|
line-height: 30px;
|
|
}
|
|
.svg-style{
|
|
margin-right: 5px;
|
|
}
|
|
</style>
|