1176 lines
34 KiB
Vue
1176 lines
34 KiB
Vue
<template>
|
||
<div id="dataCenter">
|
||
<div id="left" class="tree-content" :class="{ 'tree-closed': sideClose }">
|
||
<div style="width: 100%" class="left">
|
||
<div class="tree">
|
||
<el-card style="height: 100%;padding-right: 120px;overflow-y:auto">
|
||
<el-tree
|
||
ref="tree"
|
||
node-key="id"
|
||
class="tree-line"
|
||
icon-class="icon-tree"
|
||
:indent="0"
|
||
:props="props"
|
||
:data="treeList"
|
||
:default-expanded-keys="['1']"
|
||
highlight-current
|
||
@node-click="treeClick"
|
||
:filter-node-method="filterNode">
|
||
<span class="custom-tree-node" slot-scope="{ node, data }" @mouseenter="mouseenter(data)"
|
||
@mouseleave="mouseleave(data)">
|
||
<span
|
||
:class="data.children.length !== 0 ? 'is-show' : 'is-leaf-none'"></span>
|
||
<span style="font-size:12px"> {{ node.label }} </span>
|
||
<span>
|
||
<el-button
|
||
type="text"
|
||
size="mini"
|
||
v-show="data.show"
|
||
v-btn-permission="'e9e80920563325fa7f6e91213ee98466'"
|
||
@click="() => append(data)">
|
||
新增
|
||
</el-button>
|
||
<el-button
|
||
type="text"
|
||
size="mini"
|
||
v-show="data.show"
|
||
v-btn-permission="'0b95246d8ad2da6c54381deffa3d0fa2'"
|
||
@click="() => update(data)">
|
||
编辑
|
||
</el-button>
|
||
<el-button
|
||
type="text"
|
||
size="mini"
|
||
v-show="data.showDel"
|
||
v-btn-permission="'07ba9d907841a62a18267198da3873b1'"
|
||
@click="() => remove(node, data)">
|
||
删除
|
||
</el-button>
|
||
</span>
|
||
</span>
|
||
</el-tree>
|
||
</el-card>
|
||
</div>
|
||
</div>
|
||
<div class="tree-collapse" @click="treeCollapse" :class="{ 'tree-close': sideClose }">
|
||
<!--切换折叠样式-->
|
||
<i class="el-icon-arrow-left" v-if="sideClose === false"></i>
|
||
<i class="el-icon-arrow-right" v-if="sideClose === true"></i>
|
||
</div>
|
||
</div>
|
||
<div id="resize"></div>
|
||
<div id="right" class="tree-right">
|
||
<div class="search-area">
|
||
<el-form :modal="dataCenterSearch" :inline="true">
|
||
<el-form-item label="类型:">
|
||
<!-- <el-input-->
|
||
<!-- size="small"-->
|
||
<!-- v-model="dataCenterSearch.dataType"-->
|
||
<!-- placeholder="请输入类型"-->
|
||
<!-- ></el-input>-->
|
||
<el-select ref="treeSelect" class="tree-select" filterable clearable v-model="dataCenterSearch.treeId" @clear="setValueNull" value-key="id" placeholder="请选择类型">
|
||
<el-option class="tree-select-option" :value="dataCenterSearch.treeId" :label="dataCenterSearch.dataType">
|
||
<el-tree
|
||
ref="tree"
|
||
node-key="id"
|
||
class="tree-line"
|
||
icon-class="icon-tree"
|
||
:indent="0"
|
||
:props="props"
|
||
:data="treeList"
|
||
:default-expanded-keys="['1']"
|
||
highlight-current
|
||
@node-click="selectTreeClick2"
|
||
:filter-node-method="filterNode">
|
||
</el-tree>
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="资料标题:">
|
||
<el-input
|
||
size="small"
|
||
v-model="dataCenterSearch.dataTitle"
|
||
placeholder="请输入资料标题"
|
||
clearable
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="上传开始时间:">
|
||
<!-- <el-date-picker-->
|
||
<!-- v-model="dataCenterSearch.dataUploadTime"-->
|
||
<!-- clearable-->
|
||
<!-- value-format="yyyy-MM-dd"-->
|
||
<!-- size="small"-->
|
||
<!-- type="daterange"-->
|
||
<!-- range-separator="至"-->
|
||
<!-- start-placeholder="开始日期"-->
|
||
<!-- end-placeholder="结束日期">-->
|
||
<!-- </el-date-picker>-->
|
||
<el-date-picker
|
||
v-model="dataCenterSearch.startDataUploadTime"
|
||
size="small"
|
||
type="date"
|
||
value-format="yyyy-MM-dd"
|
||
placeholder="请选择上传开始时间">
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item label="上传结束时间:">
|
||
<el-date-picker
|
||
v-model="dataCenterSearch.endDataUploadTime"
|
||
size="small"
|
||
type="date"
|
||
value-format="yyyy-MM-dd"
|
||
placeholder="请选择上传结束时间">
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button
|
||
type="primary"
|
||
size="mini"
|
||
v-btn-permission="'39784f04404cdf50891e9d033f6373c3'"
|
||
@click="searchInfo">
|
||
查询
|
||
</el-button>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button
|
||
@click="clearSearch"
|
||
size="mini">清空
|
||
</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
<div class="operate-area" style="padding: 0 10px 10px 10px">
|
||
<el-button
|
||
size="mini"
|
||
type="primary"
|
||
v-btn-permission="'45db41d367f474e10a7ae5dbe8cb0f6e'"
|
||
@click="addInfo">新增
|
||
</el-button>
|
||
</div>
|
||
<div class="table-area">
|
||
<el-table
|
||
:data="dataCenterTable"
|
||
tooltip-effect="dark"
|
||
style="width: 100%"
|
||
border
|
||
height="100%"
|
||
:header-cell-style="{background: '#f5f1f1', color: '#333333', fontSize: '16px',
|
||
fontWeight: 'bold', height: '48px'}"
|
||
>
|
||
<el-table-column
|
||
type="index"
|
||
width="55"
|
||
label="序号"
|
||
align="center">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="dataType"
|
||
width="250"
|
||
label="类型"
|
||
:show-overflow-tooltip="true"
|
||
align="center">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="dataTitle"
|
||
min-width="250"
|
||
label="资料标题"
|
||
:show-overflow-tooltip="true"
|
||
align="center">
|
||
<template slot-scope="scope">
|
||
<span @click.stop="toDetail(scope.row)" style="cursor:pointer;color: #409eff">{{ scope.row.dataTitle }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="dataUploadTime"
|
||
width="250"
|
||
label="上传时间"
|
||
align="center">
|
||
<template slot-scope="scope">
|
||
<span>{{ $moment(scope.row.dataUploadTime).format("YYYY-MM-DD HH:mm:ss") }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
label="操作"
|
||
min-width="100"
|
||
align="center">
|
||
<template slot-scope="scope">
|
||
<el-button
|
||
size="mini"
|
||
type="primary"
|
||
v-btn-permission="'d9698737e801822ab8f96dbcd47b7d62'"
|
||
@click="editInfo(scope.row)"
|
||
>编辑
|
||
</el-button>
|
||
<el-button
|
||
size="mini"
|
||
type="danger"
|
||
v-btn-permission="'1cae70abf414bacc33f3ed794cdfa903'"
|
||
@click="deleteInfo(scope.row)"
|
||
>删除
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<loading :loading="loading">数据获取中</loading>
|
||
<pagination :page="dataCenterSearch.page" :total="dataCenterSearch.total" @pageChange="pageChange"
|
||
@pageSizeChange="pageSizeChange"></pagination>
|
||
</div>
|
||
</div>
|
||
<!-- 新建树节点抽屉 -->
|
||
<el-drawer
|
||
:wrapperClosable="false"
|
||
:title="productTitle"
|
||
:visible.sync="productModal"
|
||
size="800px"
|
||
:before-close="closeDrawer"
|
||
label-width="130px"
|
||
>
|
||
<div class="demo-drawer-content">
|
||
<el-form :model="productModelAdd"
|
||
ref="productModelAdd"
|
||
:rules="productRules"
|
||
class="label-input-form"
|
||
label-width="130px">
|
||
<el-row>
|
||
<el-col>
|
||
<el-form-item label="目录名称" prop="name" class="add-form-item">
|
||
<el-input v-model.trim="productModelAdd.name" placeholder="请输入目录名称" clearable></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col>
|
||
<el-form-item label="目录顺序" prop="sort" class="add-form-item">
|
||
<el-input v-model.number="productModelAdd.sort"
|
||
number
|
||
placeholder="请输入目录顺序"
|
||
:maxlength="4"
|
||
clearable></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
</div>
|
||
<div class="demo-drawer-footer">
|
||
<el-button
|
||
class="common-button-primary"
|
||
icon="el-icon-check"
|
||
type="primary"
|
||
@click="saveProduct('productModelAdd')">提交
|
||
</el-button>
|
||
<el-button
|
||
class="common-button-default"
|
||
icon="el-icon-close"
|
||
@click="closeModal">取消
|
||
</el-button>
|
||
</div>
|
||
</el-drawer>
|
||
<el-drawer
|
||
:title="attributeTitle"
|
||
:wrapperClosable="false"
|
||
:visible.sync="showInfoModal"
|
||
size="800px"
|
||
:styles="styles"
|
||
:close="cancelModel"
|
||
>
|
||
<div style="height: 92%;margin-left: 3%">
|
||
<el-form
|
||
ref="attributeEO"
|
||
:model="attributeEO"
|
||
:rules="attributeEOFormRules"
|
||
class="label-input-form"
|
||
label-width="130px"
|
||
v-if="showInfoModal"
|
||
>
|
||
<el-form-item label="所属目录" prop="treeId" class="add-form-item">
|
||
<el-select ref="treeSelect" class="tree-select" v-model="attributeEO.treeId" value-key="id" placeholder="请选择所属目录">
|
||
<el-option class="tree-select-option" :value="attributeEO.treeId" :label="attributeEO.treeName">
|
||
<el-tree
|
||
ref="tree"
|
||
node-key="id"
|
||
class="tree-line"
|
||
icon-class="icon-tree"
|
||
:indent="0"
|
||
:props="props"
|
||
:data="treeList"
|
||
:default-expanded-keys="['1']"
|
||
highlight-current
|
||
@node-click="selectTreeClick"
|
||
:filter-node-method="filterNode">
|
||
</el-tree>
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="类型"
|
||
prop="dataType"
|
||
class="add-form-item"
|
||
>
|
||
<el-select ref="treeSelect" class="tree-select" v-model="attributeEO.dataType" value-key="id" placeholder="请选择类型">
|
||
<el-option class="tree-select-option" :value="attributeEO.dataType" :label="attributeEO.dataType">
|
||
<el-tree
|
||
ref="tree"
|
||
node-key="id"
|
||
class="tree-line"
|
||
icon-class="icon-tree"
|
||
:indent="0"
|
||
:props="props"
|
||
:data="treeList"
|
||
:default-expanded-keys="['1']"
|
||
highlight-current
|
||
@node-click="selectTreeClick3"
|
||
:filter-node-method="filterNode">
|
||
</el-tree>
|
||
</el-option>
|
||
</el-select>
|
||
<!-- <el-input-->
|
||
<!-- v-model="attributeEO.dataType"-->
|
||
<!-- placeholder="请输入类型"-->
|
||
<!-- clearable-->
|
||
<!-- />-->
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="资料标题"
|
||
prop="dataTitle"
|
||
class="add-form-item"
|
||
>
|
||
<el-input
|
||
class="dataTitle"
|
||
v-model="attributeEO.dataTitle"
|
||
placeholder="请输入资料标题"
|
||
clearable
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="资料说明"
|
||
prop="dataExplain"
|
||
class="add-form-item"
|
||
>
|
||
<el-input
|
||
type="textarea"
|
||
:autosize="{ minRows: 1, maxRows: 10}"
|
||
resize="none"
|
||
style="width: 95%"
|
||
maxlength="4000"
|
||
show-word-limit
|
||
v-model="attributeEO.dataExplain"
|
||
placeholder="请输入资料说明"
|
||
clearable
|
||
/>
|
||
<el-button icon="el-icon-delete" circle type="danger" size="mini" @click="attributeEO.dataExplain = ''"></el-button>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="附件"
|
||
prop="attachFileId"
|
||
class="add-form-item"
|
||
>
|
||
<el-upload
|
||
class="upload-demo"
|
||
action="/api/att/attFile/uploadNew"
|
||
:before-upload="beginImportFile"
|
||
:on-preview="handlePreview"
|
||
:on-remove="handleRemove"
|
||
multiple
|
||
:limit="50"
|
||
:on-exceed="handleExceed"
|
||
:on-success="uploadSuccess"
|
||
:file-list="fileList">
|
||
<el-button size="small" type="primary">点击上传</el-button>
|
||
</el-upload>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
<div style="height: 4%;text-align: right;">
|
||
<el-button
|
||
type="primary"
|
||
class="common-button-primary"
|
||
size="mini"
|
||
icon="el-icon-check"
|
||
@click="saveInfo"
|
||
:loading="submitLoading"
|
||
>提交
|
||
</el-button
|
||
>
|
||
<el-button
|
||
size="mini"
|
||
icon="el-icon-close"
|
||
class="common-button-default"
|
||
@click="cancelModel"
|
||
>取消
|
||
</el-button
|
||
>
|
||
</div>
|
||
</el-drawer>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "dataCenter",
|
||
data() {
|
||
return {
|
||
filterText: '', // 国内法规过滤
|
||
props: {
|
||
label: 'name',
|
||
children: 'children'
|
||
},
|
||
treeList: [],
|
||
defaultProps: {
|
||
children: 'children',
|
||
label: 'name'
|
||
},
|
||
sideClose: false, // 边栏收展状态
|
||
loading: false,
|
||
submitLoading: false,
|
||
fileList: [],
|
||
attributeTitle: '',
|
||
showInfoModal: false,
|
||
styles: {
|
||
height: 'calc(100% - 55px)',
|
||
overflow: 'auto',
|
||
paddingBottom: '53px',
|
||
position: 'static'
|
||
},
|
||
attributeEO: {
|
||
dataType: '',
|
||
dataTitle: '',
|
||
dataExplain: '',
|
||
attachFileId: '',
|
||
treeId: '',
|
||
treeName: ''
|
||
},
|
||
attributeEOFormRules: {
|
||
treeId: [
|
||
{required: true, message: '所属目录不能为空', trigger: 'change'},
|
||
],
|
||
dataType: [
|
||
{required: true, message: '类型不能为空', trigger: 'change'},
|
||
],
|
||
dataTitle: [
|
||
{required: true, message: '资料标题不能为空', trigger: 'change'},
|
||
],
|
||
attachFileId: [
|
||
{required: true, message: '附件不能为空', trigger: 'change'},
|
||
]
|
||
},
|
||
dataCenterSearch: {
|
||
dataType: '',
|
||
dataTitle: '',
|
||
treeId: '',
|
||
dataUploadTime: [],
|
||
page: 1,
|
||
pageSize: this.$store.getters.userInfo.configContent,
|
||
total: 0
|
||
},
|
||
dataCenterTable: [],
|
||
cbcdOptions: [],
|
||
productModelAdd: {
|
||
name: '',
|
||
parentId: '',
|
||
sort: ''
|
||
},
|
||
productRules: {
|
||
name: [
|
||
{required: true, message: '目录名称不能为空', trigger: 'change'}
|
||
],
|
||
sort: [
|
||
{required: true, message: '目录顺序不能为空', trigger: 'change'}
|
||
]
|
||
},
|
||
productModal: false,
|
||
productTitle: ''
|
||
}
|
||
},
|
||
methods: {
|
||
// 左右拖动事件
|
||
dragControllerLR: function () {
|
||
var resize = document.getElementById("resize");
|
||
var left = document.getElementById("left");
|
||
var right = document.getElementById("right");
|
||
var box = document.getElementById("dataCenter");
|
||
resize.onmousedown = function (e) {
|
||
var startX = e.clientX;
|
||
resize.left = resize.offsetLeft;
|
||
document.onmousemove = function (e) {
|
||
var endX = e.clientX;
|
||
|
||
var moveLen = resize.left + (endX - startX);
|
||
var maxT = box.clientWidth - resize.offsetWidth;
|
||
if (moveLen < 150) moveLen = 150;
|
||
if (moveLen > maxT - 150) moveLen = maxT - 150;
|
||
|
||
resize.style.left = moveLen;
|
||
left.style.width = moveLen + "px";
|
||
right.style.width = (box.clientWidth - moveLen - 5) + "px";
|
||
}
|
||
document.onmouseup = function (evt) {
|
||
document.onmousemove = null;
|
||
document.onmouseup = null;
|
||
resize.releaseCapture && resize.releaseCapture();
|
||
}
|
||
resize.setCapture && resize.setCapture();
|
||
return false;
|
||
}
|
||
},
|
||
// 国内标签过滤
|
||
filterNode(value, data) {
|
||
if (!value) return true;
|
||
return data.name.indexOf(value) !== -1;
|
||
},
|
||
selectMenu1() {
|
||
return new Promise((resolve, reject) => {
|
||
this.$http.get('fileMaterialCenter/zlTree', {}, {
|
||
_this: this
|
||
}, res => {
|
||
const history = res;
|
||
resolve(history)
|
||
})
|
||
})
|
||
},
|
||
async getTreeAsync(){
|
||
|
||
let tsResource = await this.selectMenu1()
|
||
|
||
let list1 = []
|
||
if(tsResource && tsResource.ok && tsResource.data){
|
||
list1 = tsResource.data
|
||
}
|
||
if(list1.length > 0){
|
||
this.treeList = list1
|
||
}
|
||
},
|
||
treeClick(treeNode) {
|
||
this.selectSarMenu = treeNode
|
||
this.dataCenterSearch.treeId = treeNode.id === '1' ? '' : treeNode.id
|
||
this.attributeEO.treeId = treeNode.id === '1' ? '' : treeNode.id
|
||
this.attributeEO.treeName = treeNode.name
|
||
this.searchInfo()
|
||
},
|
||
selectTreeClick(treeNode) {
|
||
this.attributeEO.treeId = treeNode.id === '1' ? '' : treeNode.id
|
||
this.attributeEO.treeName = treeNode.name
|
||
this.$http.get('fileMaterialCenter/zlTree/queryTree', {
|
||
treeId : this.attributeEO.treeId
|
||
}, {
|
||
_this: this
|
||
}, res => {
|
||
if(res.ok){
|
||
// this.attributeEO.dataType = res.data.id
|
||
this.attributeEO.dataType = res.data.name
|
||
}
|
||
})
|
||
|
||
},
|
||
selectTreeClick2(treeNode) {
|
||
this.dataCenterSearch.treeId = treeNode.id === '1' ? '' : treeNode.id
|
||
this.dataCenterSearch.dataType = treeNode.name
|
||
|
||
},
|
||
selectTreeClick3(treeNode) {
|
||
// this.attributeEO.dataType = treeNode.id === '1' ? '' : treeNode.id
|
||
this.attributeEO.dataType = treeNode.name
|
||
|
||
},
|
||
// 树节点鼠标移入移出
|
||
mouseenter(data) {
|
||
if (data.name !== '我的收藏') {
|
||
this.$set(data, 'show', true)
|
||
if (data.parentId !== null) {
|
||
this.$set(data, 'showDel', true)
|
||
}
|
||
}
|
||
},
|
||
mouseleave(data) {
|
||
this.$set(data, 'show', false)
|
||
this.$set(data, 'showDel', false)
|
||
},
|
||
update(data) {
|
||
this.modalType = 2
|
||
this.productModal = true
|
||
this.productModelAdd = JSON.parse(JSON.stringify(data));
|
||
// 取消所有的选中效果
|
||
this.productTitle = '编辑目录'
|
||
// const newChild = { id: this.id++, label: 'testtest', children: [] };
|
||
// if (!data.children) {
|
||
// this.$set(data, 'children', []);
|
||
// }
|
||
// data.children.push(newChild);
|
||
},
|
||
|
||
append(data) {
|
||
this.modalType = 1
|
||
this.productModal = true
|
||
// 取消所有的选中效果
|
||
this.productTitle = '新增目录'
|
||
this.productModelAdd.name = ''
|
||
this.productModelAdd.parentId = data.id
|
||
},
|
||
|
||
selectMenu() {
|
||
this.$http.get('fileMaterialCenter/zlTree', {}, {
|
||
_this: this
|
||
}, res => {
|
||
this.treeList = res.data
|
||
this.dataCenterSearch.treeId = ''
|
||
this.searchInfo()
|
||
})
|
||
},
|
||
remove(node, data) {
|
||
//通过 stahndinfoList 是否有数据进行判断
|
||
this.$confirm(data.children.length > 0 ? '该节点下有记录，是否删除？' : '是否删除菜单', '提示', {
|
||
confirmButtonText: '确定',
|
||
confirmButtonClass: 'common-button-primary',
|
||
cancelButtonText: '取消',
|
||
roundButton: true,
|
||
type: 'warning'
|
||
}).then(() => {
|
||
this.$http.delete("fileMaterialCenter/zlTree", {
|
||
id: data.id
|
||
}, res => {
|
||
}, e => {
|
||
if (e.ok) {
|
||
this.$message({
|
||
type: 'success',
|
||
message: "删除成功"
|
||
})
|
||
this.selectMenu()
|
||
this.getDomesticStandardTable()
|
||
} else {
|
||
this.$message({
|
||
type: 'warning',
|
||
message: e.message
|
||
})
|
||
}
|
||
})
|
||
}).catch(() => {
|
||
this.$refs.selections.clearSelection()
|
||
this.$message({
|
||
type: 'info',
|
||
message: '已取消删除'
|
||
})
|
||
})
|
||
// const parent = node.parent;
|
||
// const children = parent.data.children || parent.data;
|
||
// const index = children.findIndex(d => d.id === data.id);
|
||
// children.splice(index, 1);
|
||
},
|
||
closeDrawer() {
|
||
this.$nextTick(() => {
|
||
this.$refs['productModelAdd'].resetFields()
|
||
this.productModelAdd = {
|
||
name: '',
|
||
parentId: '',
|
||
sort: ''
|
||
}
|
||
})
|
||
this.productModal = false
|
||
},
|
||
// 提交新增/修改
|
||
saveProduct(name) {
|
||
this.$refs[name].validate((valid) => {
|
||
if (valid) {
|
||
if (this.modalType === 1) {
|
||
this.$http.postData('fileMaterialCenter/zlTree', this.productModelAdd, {
|
||
_this: this
|
||
}, res => {
|
||
if (res.ok) {
|
||
this.selectMenu()
|
||
this.productModal = false
|
||
this.productModelAdd = {
|
||
name: '',
|
||
parentId: '',
|
||
sort: ''
|
||
}
|
||
} else {
|
||
this.productModal = true
|
||
}
|
||
}, e => {
|
||
})
|
||
} else if (this.modalType === 2) {
|
||
this.$http.putData('fileMaterialCenter/zlTree', this.productModelAdd, {
|
||
_this: this
|
||
}, res => {
|
||
this.selectMenu()
|
||
this.productModal = false
|
||
this.productModelAdd = {
|
||
name: '',
|
||
parentId: '',
|
||
sort: ''
|
||
}
|
||
}, e => {
|
||
})
|
||
}
|
||
} else {
|
||
}
|
||
})
|
||
},
|
||
closeModal() {
|
||
this.productModal = false
|
||
this.closeDrawer()
|
||
},
|
||
treeCollapse() {
|
||
this.sideClose = !this.sideClose
|
||
},
|
||
toDetail(row){
|
||
this.$router.push({
|
||
name: "dataCenterDetail",
|
||
query: {
|
||
id: row.id
|
||
}
|
||
});
|
||
},
|
||
beginImportFile (file) {
|
||
var filename = file.name
|
||
var index1 = filename.lastIndexOf('.')
|
||
var index2 = filename.length
|
||
var fileSuffix = filename.substring(index1, index2)
|
||
// const fileSuffix = file.name.split('.')[1] // 后缀名
|
||
// 判断上传文件格式
|
||
if (fileSuffix === '.pdf' || fileSuffix === '.PDF' || fileSuffix === '.ppt'|| fileSuffix === '.PPT' || fileSuffix === '.pptx'|| fileSuffix === '.PPTX'|| fileSuffix === '.doc' || fileSuffix === '.DOC' || fileSuffix === '.docx' || fileSuffix === '.DOCX' || fileSuffix === '.xls' || fileSuffix === '.xlsx') {
|
||
return true
|
||
} else {
|
||
this.spinShow = false
|
||
this.$message.error('文件' + file.name + '格式不正确，请上传PDF/PPT/PPTX/DOC/DOCX或XLS文件')
|
||
return false
|
||
}
|
||
// 判断文件上传大小
|
||
// eslint-disable-next-line no-unreachable
|
||
if (file.size / 1024 / 1024 <= 200) {
|
||
return true
|
||
} else {
|
||
this.$message.error('文件' + file.name + '大小不超过200M')
|
||
return false
|
||
}
|
||
return true
|
||
},
|
||
uploadSuccess(response, file, fileList) {
|
||
|
||
if(response.ok){
|
||
const fileIdList = fileList.map(item => {
|
||
if (item.response){
|
||
return item.response.data.attId
|
||
}else {
|
||
return item.id
|
||
}
|
||
})
|
||
this.attributeEO.attachFileId = fileIdList.join(',')
|
||
}
|
||
},
|
||
handleRemove(file, fileList) {
|
||
const fileIdList = fileList.map(item => {
|
||
if (item.response){
|
||
return item.response.data.attId
|
||
}else {
|
||
return item.id
|
||
}
|
||
})
|
||
this.attributeEO.attachFileId = fileIdList.join(',')
|
||
},
|
||
handlePreview(file) {
|
||
},
|
||
setValueNull(){
|
||
this.dataCenterSearch.dataType = ''
|
||
},
|
||
handleExceed(files, fileList) {
|
||
this.$message.warning(`当前限制选择 50 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
|
||
},
|
||
beforeRemove(file, fileList) {
|
||
return this.$confirm(`确定移除 ${file.name}？`);
|
||
},
|
||
deleteInfo(row) {
|
||
this.$confirm('您是否确定删除该数据?', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
let deleteId = row.id
|
||
this.$http.delete('fileMaterialCenter/file-material', {id: deleteId}, {
|
||
_this: this
|
||
}, res => {
|
||
if (res.ok) {
|
||
this.$message.success('删除成功')
|
||
this.searchInfo()
|
||
}
|
||
}, e => {
|
||
console.log(e)
|
||
})
|
||
}).catch(() => {
|
||
})
|
||
},
|
||
pageChange(page) {
|
||
this.dataCenterSearch.page = page
|
||
this.searchInfo()
|
||
},
|
||
pageSizeChange(pageSize) {
|
||
this.dataCenterSearch.page = 1
|
||
this.dataCenterSearch.pageSize = pageSize
|
||
this.searchInfo()
|
||
},
|
||
searchInfo() {
|
||
this.loading = true
|
||
// if(this.dataCenterSearch.dataUploadTime && this.dataCenterSearch.dataUploadTime.length !== 0){
|
||
// this.dataCenterSearch.startDataUploadTime = this.dataCenterSearch.dataUploadTime[0]
|
||
// this.dataCenterSearch.endDataUploadTime = this.dataCenterSearch.dataUploadTime[1]
|
||
// }else{
|
||
// this.dataCenterSearch.startDataUploadTime =''
|
||
// this.dataCenterSearch.endDataUploadTime = ''
|
||
// }
|
||
if(this.dataCenterSearch.endDataUploadTime < this.dataCenterSearch.startDataUploadTime){
|
||
this.$message.warning('结束时间不能小于开始时间')
|
||
this.loading = false
|
||
return
|
||
}
|
||
if(this.dataCenterSearch.treeId){
|
||
delete this.dataCenterSearch.treeId
|
||
}
|
||
this.$http.get('fileMaterialCenter/file-material', this.dataCenterSearch, {
|
||
_this: this
|
||
}, res => {
|
||
this.dataCenterTable = res.data.records
|
||
this.dataCenterSearch.total = res.data.total
|
||
this.loading = false
|
||
}, e => {
|
||
console.log(e)
|
||
this.loading = false
|
||
})
|
||
},
|
||
clearSearch() {
|
||
this.dataCenterSearch = {
|
||
dataType: '',
|
||
dataTitle: '',
|
||
dataUploadTime: '',
|
||
page: 1,
|
||
pageSize: this.$store.getters.userInfo.configContent,
|
||
}
|
||
this.searchInfo()
|
||
},
|
||
addInfo() {
|
||
this.showInfoModal = true
|
||
this.attributeTitle = '新增'
|
||
this.attributeEO = {
|
||
dataType: '',
|
||
dataTitle: '',
|
||
attachFileId: '',
|
||
treeId: this.selectSarMenu ? this.selectSarMenu.id : this.treeList[0].id,
|
||
treeName: this.selectSarMenu ? this.selectSarMenu.name : this.treeList[0].name
|
||
}
|
||
this.fileList = []
|
||
},
|
||
editInfo(row) {
|
||
this.showInfoModal = true
|
||
this.attributeTitle = '编辑'
|
||
this.attributeEO = row
|
||
this.fileList = []
|
||
// 请求上传的文件信息
|
||
this.$http.get("att/attFile/getMultiFileInfos", {
|
||
fileIds: row.attachFileId
|
||
}, {
|
||
_this: this
|
||
}, res => {
|
||
this.$nextTick(() => {
|
||
res.data.map(item => {
|
||
// 赋值要回显的上传文件内容
|
||
this.fileList.push({
|
||
name: item.oldFileName,
|
||
uid: item.uid,
|
||
status: item.status,
|
||
id: item.id
|
||
});
|
||
});
|
||
});
|
||
}, e => {
|
||
});
|
||
|
||
// const fileIdList = this.fileList.map(item => {
|
||
// return item.id
|
||
// })
|
||
// this.attributeEO.attachFileId = fileIdList.join(',')
|
||
},
|
||
saveInfo() {
|
||
this.submitLoading = true
|
||
this.$refs['attributeEO'].validate((valid) => {
|
||
if (valid) {
|
||
if (this.attributeTitle === '新增'){
|
||
this.$http.postData(
|
||
'fileMaterialCenter/file-material',
|
||
this.attributeEO,
|
||
{
|
||
_this: this,
|
||
},
|
||
(res) => {
|
||
if (res.ok) {
|
||
this.$message.success('新增成功')
|
||
this.submitLoading = false
|
||
this.cancelModel()
|
||
this.searchInfo()
|
||
}
|
||
}
|
||
)
|
||
}else {
|
||
this.$http.putData(
|
||
'fileMaterialCenter/file-material',
|
||
this.attributeEO,
|
||
{
|
||
_this: this,
|
||
},
|
||
(res) => {
|
||
if (res.ok) {
|
||
this.$message.success('修改成功')
|
||
this.submitLoading = false
|
||
this.cancelModel()
|
||
this.searchInfo()
|
||
}
|
||
}
|
||
)
|
||
}
|
||
}else{
|
||
this.submitLoading = false
|
||
}
|
||
})
|
||
|
||
},
|
||
cancelModel() {
|
||
this.$nextTick(() => {
|
||
this.$refs['attributeEO'].resetFields()
|
||
this.attributeEO = {
|
||
dataType: '',
|
||
dataTitle: '',
|
||
attachFileId: '',
|
||
treeId: '',
|
||
treeName: ''
|
||
}
|
||
})
|
||
this.showInfoModal = false
|
||
},
|
||
},
|
||
async mounted() {
|
||
this.searchInfo()
|
||
// 进入页面后查询树形结构目录
|
||
await this.getTreeAsync()
|
||
this.dragControllerLR()
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
#dataCenter {
|
||
/deep/ .el-input--small .el-input__inner {
|
||
width: 160px;
|
||
}
|
||
background-color: white;
|
||
height: 100%;
|
||
display: flex;
|
||
}
|
||
#left {
|
||
height: 100%;
|
||
float: left;
|
||
}
|
||
|
||
#resize {
|
||
width: 5px;
|
||
height: 100%;
|
||
cursor: w-resize;
|
||
float: left;
|
||
}
|
||
|
||
#right {
|
||
float: right;
|
||
width: 70%;
|
||
height: 100%;
|
||
}
|
||
.tree-content {
|
||
background: #fff;
|
||
width: 16%;
|
||
position: relative;
|
||
|
||
.tree {
|
||
/deep/ .el-card__body {
|
||
padding: 0 !important;
|
||
}
|
||
|
||
.el-card {
|
||
width: 500px;
|
||
min-width: 2000px;
|
||
max-width: 100%;
|
||
//min-width: min-content;
|
||
}
|
||
|
||
height: 95%;
|
||
width: calc(~'100% - 15px');
|
||
position: absolute;
|
||
left: 0;
|
||
}
|
||
|
||
.tree-collapse {
|
||
position: absolute;
|
||
right: 0;
|
||
}
|
||
}
|
||
|
||
.tree-right {
|
||
overflow-y: hidden;
|
||
padding: 0;
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
flex: auto;
|
||
|
||
.table-wrap {
|
||
flex: auto;
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.collection-btn {
|
||
padding: 0;
|
||
border: none;
|
||
color: #F2CB51;
|
||
font-size: 18px;
|
||
width: 18px;
|
||
height: 18px;
|
||
background-color: transparent;
|
||
/*background: rgba(244, 162, 39, 0.1);*/
|
||
|
||
//.icon-collection {
|
||
// background-image: url("~assets/images/shangqi/standardDetails/collection.png");
|
||
//}
|
||
|
||
}
|
||
}
|
||
|
||
.pagination {
|
||
position: static;
|
||
|
||
/deep/ .pagination-slot {
|
||
padding: 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.table-area{
|
||
height: calc(100% - 180px);
|
||
padding: 0 10px 10px 10px;
|
||
}
|
||
|
||
/deep/ .tree-line {
|
||
.el-tree-node {
|
||
position: relative;
|
||
padding-left: 0px; // 缩进量
|
||
line-height: 30px;
|
||
}
|
||
|
||
.el-tree-node__children {
|
||
padding-left: 16px; // 缩进量
|
||
}
|
||
|
||
// 竖线
|
||
.el-tree-node::before {
|
||
content: "";
|
||
height: 100%;
|
||
width: 1px;
|
||
position: absolute;
|
||
left: -3px;
|
||
top: -26px;
|
||
border-width: 1px;
|
||
border-left: 1px dashed #858990e0;
|
||
}
|
||
|
||
// 当前层最后一个节点的竖线高度固定
|
||
.el-tree-node:last-child::before {
|
||
height: 38px; // 可以自己调节到合适数值
|
||
}
|
||
|
||
// 横线
|
||
.el-tree-node::after {
|
||
content: "";
|
||
width: 11px;
|
||
height: 20px;
|
||
position: absolute;
|
||
left: -3px;
|
||
top: 12px;
|
||
border-width: 1px;
|
||
border-top: 1px dashed #858990e0;
|
||
}
|
||
|
||
// 去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了
|
||
& > .el-tree-node::after {
|
||
border-top: none;
|
||
}
|
||
|
||
& > .el-tree-node::before {
|
||
border-left: none;
|
||
}
|
||
|
||
// 展开关闭的icon
|
||
.el-tree-node__expand-icon {
|
||
font-size: 16px;
|
||
// 叶子节点（无子节点）
|
||
&.is-leaf {
|
||
color: transparent;
|
||
// display: none; // 也可以去掉
|
||
}
|
||
}
|
||
}
|
||
/deep/.dataTitle .el-input__inner{
|
||
width: 560px !important;
|
||
}
|
||
/deep/.el-input__inner{
|
||
width: 180px !important;
|
||
}
|
||
/deep/ .icon-tree {
|
||
margin: 0 5px 0 10px;
|
||
position: relative;
|
||
background: url('~@/assets/images/shangqi/img/tree-add.png');
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
/deep/ .expanded {
|
||
background: url('~@/assets/images/shangqi/img/tree-sub.png');
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
/deep/ .is-leaf {
|
||
background-image: none;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
/deep/ .is-leaf-none {
|
||
position: relative;
|
||
display: inline-block;
|
||
width: 15px;
|
||
height: 15px;
|
||
background: url('~@/assets/images/shangqi/img/none-file-new.png');
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
/deep/ .is-show {
|
||
position: relative;
|
||
display: inline-block;
|
||
width: 15px;
|
||
height: 15px;
|
||
background: url('~@/assets/images/shangqi/img/tree.png');
|
||
background-size: 100% 100%;
|
||
}
|
||
.upload-demo{
|
||
/deep/.el-upload-list{
|
||
height: 42vh;
|
||
overflow-y: auto;
|
||
}
|
||
}
|
||
.tree-select{
|
||
.el-select-dropdown__item{
|
||
height: auto;
|
||
line-height: normal;
|
||
}
|
||
}
|
||
.tree-select-option{
|
||
height: auto;
|
||
padding: 0;
|
||
}
|
||
</style>
|