<template>
|
<div>
|
<j-modal
|
ref='modal'
|
:width='1000'
|
:visible='visible'
|
@ok='handleOk'
|
:fullscreen='fullscreen'
|
@cancel='handleCancel'
|
:footer='null'
|
:maskClosable='false'
|
:closable='false'
|
:destroyOnClose='true'
|
cancelText='关闭'>
|
|
|
<div class='container'>
|
<div class='panel-tool'>
|
<a class='panel-tool-min' @click='handleMin'></a>
|
<a class='panel-tool-max' @click='handleMax'></a>
|
<a class='panel-tool-close' @click='handleCancel'></a>
|
</div>
|
|
|
<a-upload-dragger
|
style='width: 100%; flex-grow: 1; margin: 25px 5px 5px 5px; background: white; box-sizing: border-box; border: 1px solid #95B8E7;'
|
name='file'
|
:action='uploadAction'
|
:headers='headers'
|
:data="{'biz':bizPath}"
|
:openFileDialogOnClick='false'
|
:showUploadList='false'
|
:multiple='true'
|
@change='handleChange'
|
|
>
|
<div class='content' @contextmenu.stop.prevent='onContextmenuRoot'>
|
<div class='place-info'>
|
<span>位置：</span>
|
<ul class='placeul'>
|
<li>首页</li>
|
<li @click='openFolder(place.id)' v-for='place in extSource' :value='place.id' :key='place.id'>
|
{{ place.name }}
|
</li>
|
|
</ul>
|
</div>
|
|
<a-table
|
ref='table'
|
rowKey='id'
|
:columns='columns'
|
:dataSource='dataSource'
|
:pagination='ipagination'
|
@change='handleTableChange'
|
>
|
<!--自定义表头start -->
|
<span slot='customTitle' style='font-size: 9px;color: #597190'>名称</span>
|
<span slot='customUpdateTime' style='font-size: 9px;color: #597190'>修改日期</span>
|
<span slot='customFileType' style='font-size: 9px;color: #597190'>类型</span>
|
<span slot='customFileSize' style='font-size: 9px;color: #597190'>大小</span>
|
<!--自定义表头end -->
|
|
|
<!--自定义表格数据格式start -->
|
|
|
<span slot='name' slot-scope='text,record'>
|
<!--文件夹-->
|
<div style='user-select: none;display: flex;align-items: center;' v-if='record.type==2'
|
v-on:dblclick='openFolder(record.id)' @contextmenu.stop.prevent='onContextmenuFolder($event,record)'>
|
<img :src="require('../../../assets/desk/f01.png')" style='margin-right: 3px' />
|
<template>
|
<editable-cell :ref="'cell' + record.id" :text="text" @change="onCellChange(record.id, 'name', $event)" />
|
</template>
|
</div>
|
|
<!--文件-->
|
<div v-if='record.type==1' style='user-select: none;display: flex;align-items: center;'
|
v-on:dblclick='download(record)' @contextmenu.stop.prevent='onContextmenuFile($event,record)'>
|
<img v-if="record.fileType.indexOf('doc') !=-1" :src="require('../../../assets/desk/icon/docm.png')"
|
style='margin-right: 3px' />
|
<img v-else-if="record.fileType.indexOf('xls') !=-1" :src="require('../../../assets/desk/icon/xls.png')"
|
style='margin-right: 3px' />
|
<img v-else-if="record.fileType.indexOf('pdf') !=-1" :src="require('../../../assets/desk/icon/pdf.png')"
|
style='margin-right: 3px' />
|
<img v-else :src="require('../../../assets/desk/f03.png')" style='margin-right: 3px' />
|
<template>
|
<editable-cell :ref="'cell' + record.id" :text="text" @change="onCellChange(record.id, 'name', $event)" />
|
</template>
|
</div>
|
</span>
|
<!--自定义表格数据格式end -->
|
</a-table>
|
|
</div>
|
|
|
</a-upload-dragger>
|
|
</div>
|
|
|
</j-modal>
|
</div>
|
</template>
|
|
<script>
|
|
|
import { getAction, postAction, putAction } from '@api/manage'
|
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
|
import Vue from 'vue'
|
import { ACCESS_TOKEN, USER_NAME } from '@/store/mutation-types'
|
import EditableCell from '@views/desktop/module/EditableCell'
|
|
|
|
export default {
|
name: 'CustomModal',
|
components: { EditableCell },
|
mixins: [JeecgListMixin],
|
data() {
|
return {
|
title: '01-研发部生产资料',
|
model: [],
|
headers: {},
|
fullscreen: false, //全屏
|
disableMixinCreated: true,
|
uploadAction: window._CONFIG['domianURL'] + '/desk/file/upload',
|
fileList: [],//上传的文件
|
visible: false,
|
columns: [
|
{
|
dataIndex: 'name',
|
key: 'name',
|
slots: { title: 'customTitle' },
|
scopedSlots: { customRender: 'name' }
|
},
|
|
{
|
slots: { title: 'customFileType' },
|
dataIndex: 'fileType',
|
key: 'fileType'
|
},
|
{
|
slots: { title: 'customUpdateTime' },
|
dataIndex: 'updateTime',
|
key: 'updateTime'
|
},
|
{
|
slots: { title: 'customFileSize' },
|
key: 'fileSize',
|
dataIndex: 'fileSize',
|
}
|
|
|
],
|
ipagination: {
|
current: 1,
|
pageSize: 15,
|
size: 'small',
|
pageSizeOptions: ['10', '15', '20'],
|
showTotal: (total, range) => {
|
return range[0] + '-' + range[1] + ' 共' + total + '条'
|
},
|
showQuickJumper: true,
|
showSizeChanger: true,
|
total: 0
|
},
|
/* 排序参数 */
|
isorter: {
|
column: 'type,createTime',
|
order: 'desc'
|
},
|
url: {
|
list: '/desk/file/list',
|
add: 'desk/file/add',
|
edit: 'desk/file/edit',
|
delete: '/desk/file/delete'
|
}
|
}
|
},
|
created() {
|
|
const token = Vue.ls.get(ACCESS_TOKEN)
|
this.headers = { 'X-Access-Token': token }
|
},
|
mounted() {
|
|
},
|
methods: {
|
show(item) {
|
this.model = item
|
this.queryParam.pid = item.id
|
console.info(this.queryParam)
|
this.visible = true
|
this.loadData(1)
|
},
|
download(record) {
|
this.downloadDeskFile(record.filePath)
|
},
|
openFolder(pid) {
|
this.queryParam.pid = pid
|
this.loadData()
|
},
|
handleMin() {
|
this.visible = false
|
//TODO 执行最小化操作
|
this.$emit('min', this.model)
|
},
|
|
handleCancel() {
|
this.close()
|
},
|
handleMax() {
|
this.$refs.modal.toggleFullscreen()
|
},
|
handleOk() {
|
this.visible = false
|
},
|
add() {
|
this.visible = true
|
},
|
close() {
|
this.$emit('close', this.model)
|
this.visible = false
|
},
|
showDelete(item) {
|
let that = this
|
this.$confirm({
|
title: '提示',
|
content: h => <div style='color:red;'>此操作不可恢复，确定删除？</div>,
|
onOk() {
|
that.handleDelete(item.id)
|
},
|
onCancel() {
|
|
},
|
class: 'test'
|
})
|
},
|
|
onContextmenuRoot(event) {
|
|
const that = this
|
this.$contextmenu({
|
items: [
|
{
|
label: '新建文件夹',
|
onClick: () => {
|
/* let nameList = that.dataSource.filter(c => c.name === '新建文件夹')
|
console.info(nameList)
|
if (nameList.length > 0) {
|
this.$message.error('已存在《新建文件夹》，请修改名称后再新建文件夹！')
|
return false
|
}*/
|
//添加桌面文件夹
|
const nitem = {
|
name: '新建文件夹',
|
type: 2,
|
pid: this.queryParam.pid || this.model.id
|
}
|
that.handleAdd(nitem)
|
|
}
|
},
|
{
|
label: '刷新',
|
onClick: () => {
|
that.loadData()
|
|
}
|
}
|
|
|
],
|
event, // 鼠标事件信息
|
customClass: 'custom-class', // 自定义菜单 class
|
zIndex: 2000, // 菜单样式 z-index
|
minWidth: 230 // 主菜单最小宽度
|
})
|
return false
|
},
|
onContextmenuFile(event, item) {
|
|
const that = this
|
this.$contextmenu({
|
items: [
|
{
|
label: '下载',
|
onClick: () => {
|
that.download(item)
|
}
|
},
|
{
|
label: '重命名',
|
onClick: () => {
|
that.edit(item.id)
|
}
|
},
|
{
|
label: '删除',
|
onClick: () => {
|
that.showDelete(item)
|
}
|
}
|
|
|
],
|
event, // 鼠标事件信息
|
customClass: 'custom-class', // 自定义菜单 class
|
zIndex: 2000, // 菜单样式 z-index
|
minWidth: 230 // 主菜单最小宽度
|
})
|
return false
|
},
|
onContextmenuFolder(event, item) {
|
|
const that = this
|
this.$contextmenu({
|
items: [
|
|
{
|
label: '重命名',
|
onClick: () => {
|
that.edit(item.id)
|
}
|
},
|
{
|
label: '删除',
|
onClick: () => {
|
that.showDelete(item)
|
}
|
}
|
|
|
],
|
event, // 鼠标事件信息
|
customClass: 'custom-class', // 自定义菜单 class
|
zIndex: 2000, // 菜单样式 z-index
|
minWidth: 230 // 主菜单最小宽度
|
})
|
return false
|
},
|
//
|
handleChange(info) {
|
const status = info.file.status
|
const response = info.file.response
|
|
if (status !== 'uploading') {
|
console.log(info.file, info.fileList)
|
}
|
if (status === 'done') {
|
if (response.success) {
|
if (!this.model.id) {
|
this.$message.error(`上级目录为空，请重新登录尝试!`)
|
return false
|
}
|
|
if (!response.message || response.message == '') {
|
this.$message.error(`服务器文件路径错误，请重新登录尝试!`)
|
return false
|
}
|
|
//上传结束后直接记录上传文件信息
|
//组装上传信息
|
let params = {
|
pid: this.queryParam.pid || this.model.id,
|
type: 1,
|
fileList: response.message
|
}
|
this.handleAdd(params)
|
|
} else {
|
this.$message.error(`异常错误，请重新登录尝试!`)
|
}
|
} else if (status === 'error') {
|
this.$message.error(`上传错误!`)
|
}
|
|
},
|
handleAdd(param) {
|
console.info(param)
|
this.loading = true
|
postAction(this.url.add, param)
|
.then((res) => {
|
this.confirmLoading = false
|
this.loading = false
|
if (res.success) {
|
this.loadData()
|
this.$message.success(res.message)
|
} else {
|
this.$message.warning(res.message)
|
}
|
})
|
.finally(() => {
|
this.confirmLoading = false
|
this.loading = false
|
})
|
},
|
handleEdit(item) {
|
putAction(this.url.edit, item)
|
.then((res) => {
|
this.confirmLoading = false
|
if (res.success) {
|
this.$message.success(res.message)
|
|
} else {
|
this.$message.warning(res.message)
|
}
|
})
|
.finally(() => {
|
this.confirmLoading = false
|
this.loadData()
|
})
|
},
|
|
onCellChange(key, dataIndex, value) {
|
const dataSource = [...this.dataSource];
|
const target = dataSource.find(item => item.id === key);
|
if (target) {
|
target[dataIndex] = value;
|
this.dataSource = dataSource;
|
}
|
this.handleEdit(target)
|
},
|
|
|
edit(key) {
|
this.$refs['cell'+key].editable = true
|
},
|
|
|
|
},
|
computed: {
|
bizPath() {
|
//以目录层级为上传路径
|
const username = Vue.ls.get(USER_NAME)
|
let path = '/desk/' + username
|
if (this.extSource.length > 0) {
|
|
for (let i = 0; i < this.extSource.length; i++) {
|
path += ('/' + this.extSource[i].name)
|
}
|
return path
|
} else {
|
return path += '/temp'
|
}
|
}
|
}
|
}
|
</script>
|
<style lang='less' scoped>
|
.ant-card-body .table-operator {
|
margin-bottom: 18px;
|
}
|
|
.ant-table-tbody .ant-table-row td {
|
padding-top: 15px;
|
padding-bottom: 15px;
|
}
|
|
.anty-row-operator button {
|
margin: 0 5px
|
}
|
|
.ant-btn-danger {
|
background-color: #ffffff
|
}
|
|
.ant-modal-cust-warp {
|
height: 100%
|
}
|
|
.ant-modal-cust-warp .ant-modal-body {
|
height: calc(100% - 110px) !important;
|
overflow-y: auto
|
}
|
|
.ant-modal-cust-warp .ant-modal-content {
|
height: 90% !important;
|
overflow-y: hidden
|
}
|
|
/deep/ .ant-modal .ant-modal-content .ant-modal-body {
|
padding: 0px;
|
}
|
|
/deep/ .ant-table-content .ant-table-tbody .ant-table-row td {
|
|
padding: 4px 16px;
|
border-bottom: none;
|
font-size: 9px;
|
|
}
|
|
/deep/ .ant-table-content .ant-table-body .ant-table-thead > tr > th {
|
padding: 7px 16px;
|
background: #f5f9fb;
|
border-bottom: none;
|
}
|
|
/deep/ .ant-table-pagination.ant-pagination {
|
margin-left: 20px;
|
float: left;
|
font-size: 10px;
|
|
}
|
|
/deep/ .ant-select-selection-selected-value {
|
font-size: 10px;
|
}
|
|
/deep/ .ant-upload.ant-upload-drag .ant-upload {
|
padding: 0;
|
}
|
|
.container {
|
min-height: 600px;
|
height: 100%;
|
position: relative;
|
background: linear-gradient(to bottom, #EFF5FF 0, #E0ECFF 20%);
|
box-sizing: border-box;
|
border: 1px solid #95B8E7;
|
border-radius: 5px;
|
display: flex;
|
|
.panel-tool {
|
width: 100%;
|
height: 25px;
|
padding: 0px 10px;
|
position: absolute;
|
box-sizing: border-box;
|
display: flex;
|
justify-content: flex-end;
|
align-items: center;
|
|
a {
|
display: inline-block;
|
width: 16px;
|
height: 16px;
|
opacity: .6;
|
margin: 0 0 0 2px;
|
vertical-align: top;
|
}
|
|
a:hover {
|
opacity: 1;
|
}
|
|
.panel-tool-close {
|
background: url(../../../assets/desk/panel_tools.png) no-repeat -16px 0px;
|
}
|
|
.panel-tool-max {
|
background: url(../../../assets/desk/panel_tools.png) no-repeat 0px -16px;
|
}
|
|
.panel-tool-min {
|
background: url(../../../assets/desk/panel_tools.png) no-repeat 0px 0px;
|
}
|
}
|
|
.content {
|
width: 100%;
|
height: 100%;
|
background: white;
|
box-sizing: border-box;
|
border: 1px solid #95B8E7;
|
overflow: hidden;
|
|
.place-info {
|
width: 100%;
|
height: 40px;
|
line-height: 40px;
|
background: url(~@assets/desk/righttop.gif) repeat-x;
|
font-size: 9px;
|
|
span {
|
line-height: 40px;
|
font-weight: bold;
|
float: left;
|
margin-left: 12px;
|
user-select: none;
|
}
|
|
.placeul {
|
display: block;
|
margin: 0;
|
padding: 0;
|
list-style: none;
|
|
li {
|
cursor: pointer;
|
float: left;
|
line-height: 40px;
|
padding-left: 7px;
|
padding-right: 12px;
|
user-select: none;
|
background: url(../../../assets/desk/rlist.gif) no-repeat right;
|
}
|
|
li:nth-last-of-type(1) {
|
background: transparent;
|
}
|
}
|
}
|
}
|
|
|
}
|
</style>
|
