档案管理1
This commit is contained in:
parent
e7ade0eb34
commit
e48b5160d2
@ -164,6 +164,10 @@ export const DICT_TYPE = {
|
||||
JY_ORDER_STATUS: 'jy_order_status',
|
||||
// 车辆类型
|
||||
RESCUE_CAR_TYPE: 'rescue_car_type',
|
||||
// 合同分类
|
||||
CONTRACT_TYPE: 'contract_type',
|
||||
// 资料分类
|
||||
MATERIAL_TYPE: 'material_type',
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -2,11 +2,6 @@
|
||||
<div class="app-container">
|
||||
<!-- 搜索工作栏 -->
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="90px">
|
||||
<el-table-column label="序号" align="center">
|
||||
<template scope="scope">
|
||||
<span>{{ scope.$index + 1 }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-form-item label="姓名" prop="name">
|
||||
<el-input v-model="queryParams.name" placeholder="请输入姓名" clearable @keyup.enter.native="handleQuery"/>
|
||||
</el-form-item>
|
||||
|
@ -1,594 +1,35 @@
|
||||
<template>
|
||||
<div class="centenr">
|
||||
<div class="left-box">
|
||||
<div class="ds-box" :class="{'actbox' : tabIndex == 1 }" @click="clickType(null,1)">
|
||||
<span>全部文件 </span>
|
||||
</div>
|
||||
<div class="ds-box" :class="{'actbox' : tabIndex == 2 }" @click="clickType(1,2)">
|
||||
<el-icon :size="22">
|
||||
<Picture/>
|
||||
</el-icon>
|
||||
<div class="size-right">图片</div>
|
||||
</div>
|
||||
<div class="ds-box" :class="{'actbox' : tabIndex == 3 }" @click="clickType(2,3)">
|
||||
<el-icon :size="22">
|
||||
<Film/>
|
||||
</el-icon>
|
||||
<div class="size-right">视频</div>
|
||||
</div>
|
||||
<div class="ds-box" :class="{'actbox' : tabIndex == 4 }" @click="clickType(3,4)">
|
||||
<el-icon :size="22">
|
||||
<Document/>
|
||||
</el-icon>
|
||||
<div class="size-right">文档</div>
|
||||
</div>
|
||||
<div class="ds-box" :class="{'actbox' : tabIndex == 5 }" @click="clickType(4,5)">
|
||||
<el-icon :size="22">
|
||||
<Headset/>
|
||||
</el-icon>
|
||||
<div class="size-right">音频</div>
|
||||
</div>
|
||||
<div class="hs-box" :class="{'actbox' : tabIndex == 6 }" @click="getListRecycled(6)">
|
||||
<span>回收站</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-box">
|
||||
<div class="right-box-top">
|
||||
<div class="left-ds-box">
|
||||
<div style="display: flex; align-items: center">
|
||||
<el-button class="lan-bottom" @click="openUpload()" v-if="tabIndex != 6">上传文件</el-button>
|
||||
<el-button class="lan-bottom" @click="Bfolder()" v-if="tabIndex != 6">新建文件夹</el-button>
|
||||
|
||||
<el-button class="hong-bottom" v-if="tabIndex != 6" @click="handleDelete">批量删除</el-button>
|
||||
<el-button class="hong-bottom" v-if="tabIndex == 6" @click="handleRealDelete">批量删除</el-button>
|
||||
<el-button class="hong-bottom" @click="returnDir" v-if="tabIndex != 6">返回</el-button>
|
||||
</div>
|
||||
|
||||
<div class="input-box">
|
||||
<!-- <input type="text" @input="findAllDocLists()" v-model="queryParams.originalFilename" placeholder="输入搜索关键词"> -->
|
||||
<el-input @input="findAllDocLists()" v-model="queryParams.originalFilename" placeholder="输入搜索关键词" />
|
||||
</div>
|
||||
</div>
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
ref="multipleTableRef"
|
||||
:data="tableData"
|
||||
row-key="id"
|
||||
style="width: 100%"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column type="selection" width="55"/>
|
||||
<el-table-column property="curFilename" label="名称" width="360">
|
||||
<template #default="scope">
|
||||
<div style="display: flex;align-items: center" @click="shijian(scope.row)">
|
||||
<img src="../../assets/images/wjj.png" v-if=" scope.row.type == '0' " @click="enterDir(scope.row)"
|
||||
style="width: 28px; height: 28px;margin-right: 5px">
|
||||
<img src="../../assets/images/wd.png" v-if=" scope.row.type == '3' " @click="view(scope.row)"
|
||||
style="width: 28px; height: 28px;margin-right: 5px">
|
||||
<img src="../../assets/images/zp.png" v-if=" scope.row.type == '1' " @click="view(scope.row)"
|
||||
style="width: 28px; height: 28px;margin-right: 5px">
|
||||
<img src="../../assets/images/yp.png" v-if=" scope.row.type == '4' " @click="view(scope.row)"
|
||||
style="width: 28px; height: 28px;margin-right: 5px">
|
||||
<img src="../../assets/images/sp.png" v-if=" scope.row.type == '2' " @click="view(scope.row)"
|
||||
style="width: 28px; height: 28px;margin-right: 5px">
|
||||
<div v-if="scope.row.curFilename" style="cursor:pointer" > {{ scope.row.curFilename }}</div>
|
||||
<div v-else > {{ scope.row.curFilename }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="fileSize" label="大小">
|
||||
<template #default="scope">
|
||||
<span >{{ (scope.row.fileSize/(1024*1024)).toFixed(1) }}MB</span>
|
||||
|
||||
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="type" label="类型">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.type == 0">文件夹</span>
|
||||
<span v-if="scope.row.type == 1">图片</span>
|
||||
<span v-if="scope.row.type == 2">视频</span>
|
||||
<span v-if="scope.row.type == 3">文档</span>
|
||||
<span v-if="scope.row.type == 4">音频</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="createTime" label="创建时间" v-if="tabIndex != 6 ">
|
||||
<template #default="scope">
|
||||
<span>{{ formatDate(scope.row.createTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="updateTime" label="删除日期" v-if="tabIndex == 6 ">
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.updateTime }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template #default="scope">
|
||||
<div class="bot-box">
|
||||
<div style="margin-right: 15px" v-if="tabIndex == 6 " @click="restores(scope.row)">还原</div>
|
||||
<div style="margin-right: 15px" v-show="scope.row.isDir ==1" v-else @click="down(scope.row)">下载</div>
|
||||
<div style="margin-right: 15px" v-if="tabIndex == 6" @click="handleRealDelete(scope.row)">删除</div>
|
||||
<div style="margin-right: 15px" v-else @click="handleDelete(scope.row)">删除</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="box-fy">
|
||||
<el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="total"
|
||||
@size-change="pageSizeChangeHandle" @current-change="pageCurrentChangeHandle" :current-page="queryParams.pageNo" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog :visible.sync="centerDialogVisible" title="上传文件" width="500" center>
|
||||
<div style="display: flex">
|
||||
<span style="color: red;margin-right: 10px">*</span>
|
||||
<FileUpload v-if="centerDialogVisible" v-model="fileInfos" :limit="5"></FileUpload>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="cancel">取消</el-button>
|
||||
<el-button type="primary" @click="addFile()">
|
||||
确定
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<el-dialog :visible.sync="folder" title="新建文件夹" width="500" center>
|
||||
<div class="wj-box">
|
||||
<div><span style="color: red">*</span> 名称:</div>
|
||||
<el-input v-model="form.curFilename" style="width: 240px" placeholder="请输入新建文件夹名称"/>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="closeDir">取消</el-button>
|
||||
<!-- <el-button type="primary" @click="folder = false">-->
|
||||
<el-button type="primary" @click="createDir">
|
||||
确定
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<div class="app-container">
|
||||
<el-tabs v-model="activeTab" @tab-click="handleClick">
|
||||
<!-- 合同管理 -->
|
||||
<el-tab-pane label="合同管理" :name="DICT_TYPE.CONTRACT_TYPE">
|
||||
<ArchivesTable :active-tab="activeTab" />
|
||||
</el-tab-pane>
|
||||
<!-- 资料管理 -->
|
||||
<el-tab-pane label="资料管理" :name="DICT_TYPE.MATERIAL_TYPE">
|
||||
<ArchivesTable :active-tab="activeTab" />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { findAll, save, delByIds, ackDelete, restore, getParentId, findAllDocList } from "@/api/knowledge/tarchives/tarchives";
|
||||
import { getPreViewUrl } from "@/utils/auth";
|
||||
import { downloadFileUrl, downloadFile } from "../util/file";
|
||||
import { DICT_TYPE } from '@/utils/dict'
|
||||
import ArchivesTable from '@/views/knowledge/views/archives/components/ArchivesTable'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
tabIndex: 1,
|
||||
folder: false,
|
||||
input: '',
|
||||
parentId: '',
|
||||
tableData: [],
|
||||
ids: null,
|
||||
idList: null,
|
||||
selectIds: null,
|
||||
total: 0,
|
||||
form: {},
|
||||
queryParams: {
|
||||
originalFilename: "",
|
||||
parentId: null,
|
||||
isRecycled: 1,
|
||||
type: null,
|
||||
pageNo: 1,
|
||||
pageSize: 10
|
||||
},
|
||||
rules: {
|
||||
parentId: [{ required: true, message: "上级部门不能为空", trigger: "blur" }],
|
||||
deptName: [{ required: true, message: "部门名称不能为空", trigger: "blur" }],
|
||||
orderNum: [{ required: true, message: "显示排序不能为空", trigger: "blur" }],
|
||||
email: [{ type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }],
|
||||
phone: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }]
|
||||
},
|
||||
centerDialogVisible: false,
|
||||
presentId: null,
|
||||
fileInfos: []
|
||||
};
|
||||
name: "Archives",
|
||||
components:{
|
||||
ArchivesTable
|
||||
},
|
||||
methods: {
|
||||
formatDate(value) {
|
||||
const date = new Date(value);
|
||||
// 使用toISOString将日期格式化为YYYY-MM-DD
|
||||
const isoString = date.toISOString();
|
||||
// 将ISO字符串分割并取前面的日期部分
|
||||
return isoString.slice(0, 10);
|
||||
|
||||
},
|
||||
padLeftZero(str) {
|
||||
return ('00' + str).substr(str.length)
|
||||
},
|
||||
|
||||
openUpload(){
|
||||
console.log(193)
|
||||
this.centerDialogVisible = true
|
||||
},
|
||||
/**
|
||||
* 上传文件
|
||||
*/
|
||||
uploadUrl(obj) {
|
||||
this.fileInfos = obj;
|
||||
},
|
||||
cancel() {
|
||||
this.centerDialogVisible = false;
|
||||
this.fileInfos = [];
|
||||
},
|
||||
addFile() {
|
||||
console.log(this.fileInfos,207)
|
||||
if (!this.fileInfos) {
|
||||
this.$modal.msgError("请选择文件");
|
||||
return;
|
||||
}
|
||||
|
||||
this.fileInfos.forEach(fileInfo => {
|
||||
let data = {
|
||||
parentId: this.presentId,
|
||||
originalFilename: fileInfo.name,
|
||||
fileUrl: fileInfo.url,
|
||||
fileSize: fileInfo.size
|
||||
};
|
||||
save(data).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.folder = false;
|
||||
this.form = {};
|
||||
} else {
|
||||
// this.$modal.msgError(res.data.msg);
|
||||
}
|
||||
this.getList();
|
||||
this.centerDialogVisible = false
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
this.$modal.msgSuccess("上传成功");
|
||||
|
||||
},
|
||||
shijian(data) {
|
||||
if (data.type === '0') {
|
||||
this.enterDir(data);
|
||||
} else {
|
||||
this.view(data);
|
||||
}
|
||||
},
|
||||
enterDir(data) {
|
||||
this.queryParams.pageNo = 1;
|
||||
if (data.isRecycled === 1 && data.isDir === 0) {
|
||||
this.queryParams.parentId = data.id;
|
||||
this.parentId = data.id;
|
||||
this.form.parentId = data.id;
|
||||
this.getList();
|
||||
}
|
||||
this.presentId = data.id;
|
||||
},
|
||||
returnDir() {
|
||||
let data = {
|
||||
id: this.presentId
|
||||
};
|
||||
this.queryParams.pageNo = 1;
|
||||
getParentId(data).then(res => {
|
||||
if (res.data.parentId) {
|
||||
this.queryParams.parentId = res.data.parentId;
|
||||
this.form.parentId = res.data.parentId;
|
||||
this.presentId = res.data.parentId;
|
||||
} else {
|
||||
this.queryParams.parentId = '';
|
||||
this.form.parentId = '';
|
||||
}
|
||||
this.getList();
|
||||
});
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
let tempId = selection.map(item => item.id);
|
||||
this.selectIds = tempId.join(',');
|
||||
this.ids = tempId.join(',');
|
||||
},
|
||||
/** 文件查看 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
findAll(this.queryParams).then(response => {
|
||||
console.log(response,274)
|
||||
this.tableData = response.data.records;
|
||||
this.total = response.data.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
pageCurrentChangeHandle(val) {
|
||||
this.loading = true;
|
||||
this.queryParams.pageNo = val;
|
||||
findAll(this.queryParams).then(response => {
|
||||
this.tableData = response.data.records;
|
||||
this.total = response.data.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
pageSizeChangeHandle(val) {
|
||||
this.loading = true;
|
||||
this.queryParams.pageNo = 1;
|
||||
this.queryParams.pageSize = val;
|
||||
findAll(this.queryParams).then(response => {
|
||||
this.tableData = response.data.records;
|
||||
this.total = response.data.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
/** 文件查看 */
|
||||
findAllDocLists() {
|
||||
this.loading = true;
|
||||
findAllDocList(this.queryParams).then(response => {
|
||||
this.tableData = response.data.records;
|
||||
this.total = response.data.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
clickType(type, idx) {
|
||||
this.queryParams.pageNo = 1;
|
||||
this.tableData = [];
|
||||
this.form.parentId = null;
|
||||
this.tabIndex = idx;
|
||||
this.loading = true;
|
||||
this.queryParams.parentId = null;
|
||||
this.queryParams.isRecycled = 1;
|
||||
this.queryParams.type = type;
|
||||
this.getList();
|
||||
},
|
||||
getListRecycled(idx) {
|
||||
this.tabIndex = idx;
|
||||
this.loading = true;
|
||||
this.queryParams.type = null;
|
||||
this.queryParams.parentId = null;
|
||||
this.queryParams.isRecycled = 0;
|
||||
this.getList();
|
||||
},
|
||||
closeDir() {
|
||||
this.form = {};
|
||||
this.folder = false;
|
||||
},
|
||||
/** 文件保存 */
|
||||
createDir() {
|
||||
if (!this.form.curFilename) {
|
||||
this.$modal.msgWarning("请填写文件名称");
|
||||
return;
|
||||
}
|
||||
if (this.form.id!== undefined) {
|
||||
save(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.folder = false;
|
||||
this.getList();
|
||||
});
|
||||
} else {
|
||||
save(this.form).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.folder = false;
|
||||
this.form = {};
|
||||
this.getList();
|
||||
} else {
|
||||
this.$modal.msgError(response.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
/** 文件删除 */
|
||||
handleDelete(row) {
|
||||
const ids = row.id || this.selectIds;
|
||||
this.$modal.confirm('是否确认删除此项数据?').then(() => {
|
||||
let data = {
|
||||
ids: ids
|
||||
};
|
||||
return delByIds(data);
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
/** 彻底删除 */
|
||||
handleRealDelete(row) {
|
||||
const ids = row.id || this.selectIds;
|
||||
this.$modal.confirm('是否确认删除此项数据?').then(() => {
|
||||
let data = {
|
||||
ids: ids
|
||||
};
|
||||
return ackDelete(data);
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
handleExport() {
|
||||
this.$download("/knowledge/system/tArchives/export", this.queryParams, `档案管理_${new Date().getTime()}`);
|
||||
},
|
||||
/** 还原 */
|
||||
restores(row) {
|
||||
const ids = row.id || this.ids;
|
||||
this.$modal.confirm('是否确认还原此项数据?').then(() => {
|
||||
let data = {
|
||||
ids: ids
|
||||
};
|
||||
return restore(data);
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("还原成功");
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
down(row) {
|
||||
downloadFile(row.fileUrl,row.originalFilename);
|
||||
},
|
||||
view(row) {
|
||||
var preViewUrl = getPreViewUrl(downloadFileUrl + "?fileName=" + row.fileUrl, row.fileUrl, "连铝");
|
||||
window.open(preViewUrl);
|
||||
},
|
||||
Bfolder() {
|
||||
this.folder = true;
|
||||
data(){
|
||||
return{
|
||||
activeTab: DICT_TYPE.CONTRACT_TYPE,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
methods:{
|
||||
handleClick(tab, event) {
|
||||
console.log(this.activeTab)
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
|
||||
.centenr {
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
padding: 20px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.left-box {
|
||||
width: 15%;
|
||||
border-right: 1px solid #D8D8D8;
|
||||
|
||||
}
|
||||
|
||||
.right-box {
|
||||
width: 84%;
|
||||
|
||||
box-sizing: border-box;
|
||||
//padding: 0px 15px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.actbox {
|
||||
background: #F1F7FF !important;
|
||||
color: #237EFF !important;
|
||||
}
|
||||
|
||||
.hs-box {
|
||||
width: 90%;
|
||||
height: 40px;
|
||||
border-radius: 3px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-top: 1px solid #D8D8D8;
|
||||
margintop: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ds-box {
|
||||
width: 90%;
|
||||
height: 40px;
|
||||
border-radius: 3px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.size-right {
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
right-box-top {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
}
|
||||
|
||||
.input-box {
|
||||
width: 20%;
|
||||
height: 40px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
padding: 5px 15px;
|
||||
|
||||
}
|
||||
|
||||
.left-ds-box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.lan-bottom {
|
||||
width: 112px;
|
||||
height: 40px;
|
||||
background: #0052D9;
|
||||
border-radius: 3px;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 15px;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
.dlan-bottom {
|
||||
width: 112px;
|
||||
height: 40px;
|
||||
border: 1px solid #0052D9;
|
||||
border-radius: 3px;
|
||||
color: #0052D9;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 15px;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
.hong-bottom {
|
||||
width: 112px;
|
||||
height: 40px;
|
||||
border: 1px solid #D54941;
|
||||
border-radius: 3px;
|
||||
color: #D54941;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 15px;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
.box-fy {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.bot-box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
color: #237EFF;
|
||||
}
|
||||
|
||||
.wj-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
594
src/views/knowledge/views/archives/archives_bak.vue
Normal file
594
src/views/knowledge/views/archives/archives_bak.vue
Normal file
@ -0,0 +1,594 @@
|
||||
<template>
|
||||
<div class="centenr">
|
||||
<div class="left-box">
|
||||
<div class="ds-box" :class="{'actbox' : tabIndex == 1 }" @click="clickType(null,1)">
|
||||
<span>全部文件 </span>
|
||||
</div>
|
||||
<div class="ds-box" :class="{'actbox' : tabIndex == 2 }" @click="clickType(1,2)">
|
||||
<el-icon :size="22">
|
||||
<Picture/>
|
||||
</el-icon>
|
||||
<div class="size-right">图片</div>
|
||||
</div>
|
||||
<div class="ds-box" :class="{'actbox' : tabIndex == 3 }" @click="clickType(2,3)">
|
||||
<el-icon :size="22">
|
||||
<Film/>
|
||||
</el-icon>
|
||||
<div class="size-right">视频</div>
|
||||
</div>
|
||||
<div class="ds-box" :class="{'actbox' : tabIndex == 4 }" @click="clickType(3,4)">
|
||||
<el-icon :size="22">
|
||||
<Document/>
|
||||
</el-icon>
|
||||
<div class="size-right">文档</div>
|
||||
</div>
|
||||
<div class="ds-box" :class="{'actbox' : tabIndex == 5 }" @click="clickType(4,5)">
|
||||
<el-icon :size="22">
|
||||
<Headset/>
|
||||
</el-icon>
|
||||
<div class="size-right">音频</div>
|
||||
</div>
|
||||
<div class="hs-box" :class="{'actbox' : tabIndex == 6 }" @click="getListRecycled(6)">
|
||||
<span>回收站</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-box">
|
||||
<div class="right-box-top">
|
||||
<div class="left-ds-box">
|
||||
<div style="display: flex; align-items: center">
|
||||
<el-button class="lan-bottom" @click="openUpload()" v-if="tabIndex != 6">上传文件</el-button>
|
||||
<el-button class="lan-bottom" @click="Bfolder()" v-if="tabIndex != 6">新建文件夹</el-button>
|
||||
|
||||
<el-button class="hong-bottom" v-if="tabIndex != 6" @click="handleDelete">批量删除</el-button>
|
||||
<el-button class="hong-bottom" v-if="tabIndex == 6" @click="handleRealDelete">批量删除</el-button>
|
||||
<el-button class="hong-bottom" @click="returnDir" v-if="tabIndex != 6">返回</el-button>
|
||||
</div>
|
||||
|
||||
<div class="input-box">
|
||||
<!-- <input type="text" @input="findAllDocLists()" v-model="queryParams.originalFilename" placeholder="输入搜索关键词"> -->
|
||||
<el-input @input="findAllDocLists()" v-model="queryParams.originalFilename" placeholder="输入搜索关键词" />
|
||||
</div>
|
||||
</div>
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
ref="multipleTableRef"
|
||||
:data="tableData"
|
||||
row-key="id"
|
||||
style="width: 100%"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column type="selection" width="55"/>
|
||||
<el-table-column property="curFilename" label="名称" width="360">
|
||||
<template #default="scope">
|
||||
<div style="display: flex;align-items: center" @click="shijian(scope.row)">
|
||||
<img src="../../assets/images/wjj.png" v-if=" scope.row.type == '0' " @click="enterDir(scope.row)"
|
||||
style="width: 28px; height: 28px;margin-right: 5px">
|
||||
<img src="../../assets/images/wd.png" v-if=" scope.row.type == '3' " @click="view(scope.row)"
|
||||
style="width: 28px; height: 28px;margin-right: 5px">
|
||||
<img src="../../assets/images/zp.png" v-if=" scope.row.type == '1' " @click="view(scope.row)"
|
||||
style="width: 28px; height: 28px;margin-right: 5px">
|
||||
<img src="../../assets/images/yp.png" v-if=" scope.row.type == '4' " @click="view(scope.row)"
|
||||
style="width: 28px; height: 28px;margin-right: 5px">
|
||||
<img src="../../assets/images/sp.png" v-if=" scope.row.type == '2' " @click="view(scope.row)"
|
||||
style="width: 28px; height: 28px;margin-right: 5px">
|
||||
<div v-if="scope.row.curFilename" style="cursor:pointer" > {{ scope.row.curFilename }}</div>
|
||||
<div v-else > {{ scope.row.curFilename }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="fileSize" label="大小">
|
||||
<template #default="scope">
|
||||
<span >{{ (scope.row.fileSize/(1024*1024)).toFixed(1) }}MB</span>
|
||||
|
||||
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="type" label="类型">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.type == 0">文件夹</span>
|
||||
<span v-if="scope.row.type == 1">图片</span>
|
||||
<span v-if="scope.row.type == 2">视频</span>
|
||||
<span v-if="scope.row.type == 3">文档</span>
|
||||
<span v-if="scope.row.type == 4">音频</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="createTime" label="创建时间" v-if="tabIndex != 6 ">
|
||||
<template #default="scope">
|
||||
<span>{{ formatDate(scope.row.createTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="updateTime" label="删除日期" v-if="tabIndex == 6 ">
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.updateTime }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template #default="scope">
|
||||
<div class="bot-box">
|
||||
<div style="margin-right: 15px" v-if="tabIndex == 6 " @click="restores(scope.row)">还原</div>
|
||||
<div style="margin-right: 15px" v-show="scope.row.isDir ==1" v-else @click="down(scope.row)">下载</div>
|
||||
<div style="margin-right: 15px" v-if="tabIndex == 6" @click="handleRealDelete(scope.row)">删除</div>
|
||||
<div style="margin-right: 15px" v-else @click="handleDelete(scope.row)">删除</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="box-fy">
|
||||
<el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="total"
|
||||
@size-change="pageSizeChangeHandle" @current-change="pageCurrentChangeHandle" :current-page="queryParams.pageNo" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog :visible.sync="centerDialogVisible" title="上传文件" width="500" center>
|
||||
<div style="display: flex">
|
||||
<span style="color: red;margin-right: 10px">*</span>
|
||||
<FileUpload v-if="centerDialogVisible" v-model="fileInfos" :limit="5"></FileUpload>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="cancel">取消</el-button>
|
||||
<el-button type="primary" @click="addFile()">
|
||||
确定
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<el-dialog :visible.sync="folder" title="新建文件夹" width="500" center>
|
||||
<div class="wj-box">
|
||||
<div><span style="color: red">*</span> 名称:</div>
|
||||
<el-input v-model="form.curFilename" style="width: 240px" placeholder="请输入新建文件夹名称"/>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="closeDir">取消</el-button>
|
||||
<!-- <el-button type="primary" @click="folder = false">-->
|
||||
<el-button type="primary" @click="createDir">
|
||||
确定
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { findAll, save, delByIds, ackDelete, restore, getParentId, findAllDocList } from "@/api/knowledge/tarchives/tarchives";
|
||||
import { getPreViewUrl } from "@/utils/auth";
|
||||
import { downloadFileUrl, downloadFile } from "../util/file";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
tabIndex: 1,
|
||||
folder: false,
|
||||
input: '',
|
||||
parentId: '',
|
||||
tableData: [],
|
||||
ids: null,
|
||||
idList: null,
|
||||
selectIds: null,
|
||||
total: 0,
|
||||
form: {},
|
||||
queryParams: {
|
||||
originalFilename: "",
|
||||
parentId: null,
|
||||
isRecycled: 1,
|
||||
type: null,
|
||||
pageNo: 1,
|
||||
pageSize: 10
|
||||
},
|
||||
rules: {
|
||||
parentId: [{ required: true, message: "上级部门不能为空", trigger: "blur" }],
|
||||
deptName: [{ required: true, message: "部门名称不能为空", trigger: "blur" }],
|
||||
orderNum: [{ required: true, message: "显示排序不能为空", trigger: "blur" }],
|
||||
email: [{ type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }],
|
||||
phone: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }]
|
||||
},
|
||||
centerDialogVisible: false,
|
||||
presentId: null,
|
||||
fileInfos: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
formatDate(value) {
|
||||
const date = new Date(value);
|
||||
// 使用toISOString将日期格式化为YYYY-MM-DD
|
||||
const isoString = date.toISOString();
|
||||
// 将ISO字符串分割并取前面的日期部分
|
||||
return isoString.slice(0, 10);
|
||||
|
||||
},
|
||||
padLeftZero(str) {
|
||||
return ('00' + str).substr(str.length)
|
||||
},
|
||||
|
||||
openUpload(){
|
||||
console.log(193)
|
||||
this.centerDialogVisible = true
|
||||
},
|
||||
/**
|
||||
* 上传文件
|
||||
*/
|
||||
uploadUrl(obj) {
|
||||
this.fileInfos = obj;
|
||||
},
|
||||
cancel() {
|
||||
this.centerDialogVisible = false;
|
||||
this.fileInfos = [];
|
||||
},
|
||||
addFile() {
|
||||
console.log(this.fileInfos,207)
|
||||
if (!this.fileInfos) {
|
||||
this.$modal.msgError("请选择文件");
|
||||
return;
|
||||
}
|
||||
|
||||
this.fileInfos.forEach(fileInfo => {
|
||||
let data = {
|
||||
parentId: this.presentId,
|
||||
originalFilename: fileInfo.name,
|
||||
fileUrl: fileInfo.url,
|
||||
fileSize: fileInfo.size
|
||||
};
|
||||
save(data).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.folder = false;
|
||||
this.form = {};
|
||||
} else {
|
||||
// this.$modal.msgError(res.data.msg);
|
||||
}
|
||||
this.getList();
|
||||
this.centerDialogVisible = false
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
this.$modal.msgSuccess("上传成功");
|
||||
|
||||
},
|
||||
shijian(data) {
|
||||
if (data.type === '0') {
|
||||
this.enterDir(data);
|
||||
} else {
|
||||
this.view(data);
|
||||
}
|
||||
},
|
||||
enterDir(data) {
|
||||
this.queryParams.pageNo = 1;
|
||||
if (data.isRecycled === 1 && data.isDir === 0) {
|
||||
this.queryParams.parentId = data.id;
|
||||
this.parentId = data.id;
|
||||
this.form.parentId = data.id;
|
||||
this.getList();
|
||||
}
|
||||
this.presentId = data.id;
|
||||
},
|
||||
returnDir() {
|
||||
let data = {
|
||||
id: this.presentId
|
||||
};
|
||||
this.queryParams.pageNo = 1;
|
||||
getParentId(data).then(res => {
|
||||
if (res.data.parentId) {
|
||||
this.queryParams.parentId = res.data.parentId;
|
||||
this.form.parentId = res.data.parentId;
|
||||
this.presentId = res.data.parentId;
|
||||
} else {
|
||||
this.queryParams.parentId = '';
|
||||
this.form.parentId = '';
|
||||
}
|
||||
this.getList();
|
||||
});
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
let tempId = selection.map(item => item.id);
|
||||
this.selectIds = tempId.join(',');
|
||||
this.ids = tempId.join(',');
|
||||
},
|
||||
/** 文件查看 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
findAll(this.queryParams).then(response => {
|
||||
console.log(response,274)
|
||||
this.tableData = response.data.records;
|
||||
this.total = response.data.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
pageCurrentChangeHandle(val) {
|
||||
this.loading = true;
|
||||
this.queryParams.pageNo = val;
|
||||
findAll(this.queryParams).then(response => {
|
||||
this.tableData = response.data.records;
|
||||
this.total = response.data.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
pageSizeChangeHandle(val) {
|
||||
this.loading = true;
|
||||
this.queryParams.pageNo = 1;
|
||||
this.queryParams.pageSize = val;
|
||||
findAll(this.queryParams).then(response => {
|
||||
this.tableData = response.data.records;
|
||||
this.total = response.data.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
/** 文件查看 */
|
||||
findAllDocLists() {
|
||||
this.loading = true;
|
||||
findAllDocList(this.queryParams).then(response => {
|
||||
this.tableData = response.data.records;
|
||||
this.total = response.data.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
clickType(type, idx) {
|
||||
this.queryParams.pageNo = 1;
|
||||
this.tableData = [];
|
||||
this.form.parentId = null;
|
||||
this.tabIndex = idx;
|
||||
this.loading = true;
|
||||
this.queryParams.parentId = null;
|
||||
this.queryParams.isRecycled = 1;
|
||||
this.queryParams.type = type;
|
||||
this.getList();
|
||||
},
|
||||
getListRecycled(idx) {
|
||||
this.tabIndex = idx;
|
||||
this.loading = true;
|
||||
this.queryParams.type = null;
|
||||
this.queryParams.parentId = null;
|
||||
this.queryParams.isRecycled = 0;
|
||||
this.getList();
|
||||
},
|
||||
closeDir() {
|
||||
this.form = {};
|
||||
this.folder = false;
|
||||
},
|
||||
/** 文件保存 */
|
||||
createDir() {
|
||||
if (!this.form.curFilename) {
|
||||
this.$modal.msgWarning("请填写文件名称");
|
||||
return;
|
||||
}
|
||||
if (this.form.id!== undefined) {
|
||||
save(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.folder = false;
|
||||
this.getList();
|
||||
});
|
||||
} else {
|
||||
save(this.form).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.folder = false;
|
||||
this.form = {};
|
||||
this.getList();
|
||||
} else {
|
||||
this.$modal.msgError(response.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
/** 文件删除 */
|
||||
handleDelete(row) {
|
||||
const ids = row.id || this.selectIds;
|
||||
this.$modal.confirm('是否确认删除此项数据?').then(() => {
|
||||
let data = {
|
||||
ids: ids
|
||||
};
|
||||
return delByIds(data);
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
/** 彻底删除 */
|
||||
handleRealDelete(row) {
|
||||
const ids = row.id || this.selectIds;
|
||||
this.$modal.confirm('是否确认删除此项数据?').then(() => {
|
||||
let data = {
|
||||
ids: ids
|
||||
};
|
||||
return ackDelete(data);
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
handleExport() {
|
||||
this.$download("/knowledge/system/tArchives/export", this.queryParams, `档案管理_${new Date().getTime()}`);
|
||||
},
|
||||
/** 还原 */
|
||||
restores(row) {
|
||||
const ids = row.id || this.ids;
|
||||
this.$modal.confirm('是否确认还原此项数据?').then(() => {
|
||||
let data = {
|
||||
ids: ids
|
||||
};
|
||||
return restore(data);
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("还原成功");
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
down(row) {
|
||||
downloadFile(row.fileUrl,row.originalFilename);
|
||||
},
|
||||
view(row) {
|
||||
var preViewUrl = getPreViewUrl(downloadFileUrl + "?fileName=" + row.fileUrl, row.fileUrl, "连铝");
|
||||
window.open(preViewUrl);
|
||||
},
|
||||
Bfolder() {
|
||||
this.folder = true;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
|
||||
.centenr {
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
padding: 20px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.left-box {
|
||||
width: 15%;
|
||||
border-right: 1px solid #D8D8D8;
|
||||
|
||||
}
|
||||
|
||||
.right-box {
|
||||
width: 84%;
|
||||
|
||||
box-sizing: border-box;
|
||||
//padding: 0px 15px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.actbox {
|
||||
background: #F1F7FF !important;
|
||||
color: #237EFF !important;
|
||||
}
|
||||
|
||||
.hs-box {
|
||||
width: 90%;
|
||||
height: 40px;
|
||||
border-radius: 3px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-top: 1px solid #D8D8D8;
|
||||
margintop: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ds-box {
|
||||
width: 90%;
|
||||
height: 40px;
|
||||
border-radius: 3px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.size-right {
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
right-box-top {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
}
|
||||
|
||||
.input-box {
|
||||
width: 20%;
|
||||
height: 40px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
padding: 5px 15px;
|
||||
|
||||
}
|
||||
|
||||
.left-ds-box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.lan-bottom {
|
||||
width: 112px;
|
||||
height: 40px;
|
||||
background: #0052D9;
|
||||
border-radius: 3px;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 15px;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
.dlan-bottom {
|
||||
width: 112px;
|
||||
height: 40px;
|
||||
border: 1px solid #0052D9;
|
||||
border-radius: 3px;
|
||||
color: #0052D9;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 15px;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
.hong-bottom {
|
||||
width: 112px;
|
||||
height: 40px;
|
||||
border: 1px solid #D54941;
|
||||
border-radius: 3px;
|
||||
color: #D54941;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 15px;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
.box-fy {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.bot-box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
color: #237EFF;
|
||||
}
|
||||
|
||||
.wj-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
|
177
src/views/knowledge/views/archives/components/ArchivesTable.vue
Normal file
177
src/views/knowledge/views/archives/components/ArchivesTable.vue
Normal file
@ -0,0 +1,177 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="left">
|
||||
<div class="left_top">
|
||||
当前选择的是: {{ chooseData }}
|
||||
</div>
|
||||
<!-- 操作工具栏 -->
|
||||
<el-row :gutter="10" class="mb8" style="margin-top: 1rem">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="openForm(undefined)"
|
||||
v-hasPermi="['archives:catalog:create']"
|
||||
>新增
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="success" plain icon="el-icon-edit" :disabled="updateMultiple" size="mini" @click="openForm(undefined)"
|
||||
v-hasPermi="['archives:catalog:update']"
|
||||
>修改
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="danger" plain icon="el-icon-delete" :disabled="deleteMultiple" size="mini" @click="openForm(undefined)"
|
||||
v-hasPermi="['archives:catalog:remove']"
|
||||
>删除
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-input placeholder="请输入名称" size="small" style="margin:1rem 0 1rem 0" v-model="filterText"/>
|
||||
<el-tree @check="handleSelectionChange" show-checkbox :data="this.getDictDatas(activeTab)" ref="tree" :filter-node-method="filterNode"
|
||||
@node-click="handleNodeClick"
|
||||
highlight-current
|
||||
>
|
||||
<template v-slot="{ node, data }">
|
||||
<!-- 自定义节点内容 -->
|
||||
<span class="custom-tree-node">
|
||||
{{ truncateText(data.label, 15) }}
|
||||
</span>
|
||||
</template>
|
||||
</el-tree>
|
||||
</div>
|
||||
<div class="right">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="90px">
|
||||
<el-form-item label="名称" prop="fileName">
|
||||
<el-input v-model="queryParams.fileName" placeholder="请输入名称" clearable @keyup.enter.native="handleQuery"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="时间区间" prop="fileDateArray">
|
||||
<el-date-picker v-model="queryParams.fileDateArray" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss"
|
||||
type="daterange"
|
||||
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
|
||||
:default-time="['00:00:00', '23:59:59']"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- 操作工具栏 -->
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="openForm(undefined)"
|
||||
v-hasPermi="['company:staff:create']"
|
||||
>新增
|
||||
</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ArchivesTable',
|
||||
props: {
|
||||
activeTab: {
|
||||
type: String,
|
||||
defaultValue: undefined,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
filterText: '',
|
||||
chooseData: '',
|
||||
queryParams:{
|
||||
fileName: null,
|
||||
fileDateArray: null,
|
||||
},
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
deleteMultiple: true,
|
||||
updateMultiple: true,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
filterText(val) {
|
||||
this.$refs.tree.filter(val)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openForm(row){
|
||||
|
||||
},
|
||||
getList(){
|
||||
|
||||
},
|
||||
// 节点事件
|
||||
handleNodeClick(e) {
|
||||
this.chooseData = e.label
|
||||
},
|
||||
// 节点筛选
|
||||
filterNode(value, data) {
|
||||
if (!value) return true
|
||||
return data.label.indexOf(value) !== -1
|
||||
},
|
||||
truncateText(text, maxLength) {
|
||||
if (text.length > maxLength) {
|
||||
return text.substring(0, maxLength) + '...'
|
||||
}
|
||||
return text
|
||||
},
|
||||
handleQuery(){
|
||||
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm('queryForm')
|
||||
this.handleQuery()
|
||||
},
|
||||
handleSelectionChange(selection){
|
||||
console.log(selection)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
div {
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.app-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.left {
|
||||
width: 20%;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.left_top {
|
||||
color: #00afff;
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
|
||||
font-size: 14px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.custom-tree-node {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
::v-deep .el-tree-node__expand-icon.is-leaf{
|
||||
display: none;
|
||||
}
|
||||
</style>
|
@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ArchivesType',
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
Loading…
Reference in New Issue
Block a user