From 3339cd48d37e3fe1b0dd7f4ea313c0cf2a8c0623 Mon Sep 17 00:00:00 2001
From: yz <yz_0812@outlook.com>
Date: 星期四, 18 二月 2021 04:58:55 +0800
Subject: [PATCH] 标签管理
---
src/views/yunpan/fujian.vue | 271 ++++++----
src/views/dashboard/index.vue | 22
src/views/yunpan/zhishou.vue | 1228 +++++++++++++++++++++++-----------------------
3 files changed, 789 insertions(+), 732 deletions(-)
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 2e5c440..e120706 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -62,14 +62,14 @@
<p>超龄员工人数</p>
</el-card>
</el-col>
- </el-row>
- <el-row :gutter="20">
<el-col :span="4">
<el-card shadow="always" class="card-info">
<p class="card-number">12</p>
<p>离职员工总数</p>
</el-card>
</el-col>
+ </el-row>
+ <el-row :gutter="20">
<el-col :span="4">
<el-card shadow="always" class="card-info">
<p class="card-number">12</p>
@@ -94,8 +94,6 @@
<p>公司辞退人数</p>
</el-card>
</el-col>
- </el-row>
- <el-row :gutter="20">
<el-col :span="4">
<el-card shadow="always" class="card-info">
<p class="card-number">12</p>
@@ -108,6 +106,9 @@
<p>到期合同</p>
</el-card>
</el-col>
+ </el-row>
+ <el-row :gutter="20">
+
<el-col :span="4">
<el-card shadow="always" class="card-info">
<p class="card-number">12</p>
@@ -126,8 +127,6 @@
<p>历史合同</p>
</el-card>
</el-col>
- </el-row>
- <el-row :gutter="20">
<el-col :span="4">
<el-card shadow="always" class="card-info">
<p class="card-number">12</p>
@@ -146,6 +145,9 @@
<p>员工体验</p>
</el-card>
</el-col>
+ </el-row>
+ <el-row :gutter="20">
+
<el-col :span="4">
<el-card shadow="always" class="card-info">
<p class="card-number">12</p>
@@ -158,8 +160,6 @@
<p>员工旷工</p>
</el-card>
</el-col>
- </el-row>
- <el-row :gutter="20">
<el-col :span="4">
<el-card shadow="always" class="card-info">
<p class="card-number">12</p>
@@ -184,14 +184,15 @@
<p>社保申请</p>
</el-card>
</el-col>
+ </el-row>
+ <el-row :gutter="20">
+
<el-col :span="4">
<el-card shadow="always" class="card-info">
<p class="card-number">12</p>
<p>失业金案件</p>
</el-card>
</el-col>
- </el-row>
- <el-row :gutter="20">
<el-col :span="4">
<el-card shadow="always" class="card-info">
<p class="card-number">12</p>
@@ -210,7 +211,6 @@
<p>不良记录</p>
</el-card>
</el-col>
-
</el-row>
</div>
</template>
diff --git a/src/views/yunpan/fujian.vue b/src/views/yunpan/fujian.vue
index eac8c3e..76872d1 100644
--- a/src/views/yunpan/fujian.vue
+++ b/src/views/yunpan/fujian.vue
@@ -146,13 +146,79 @@
</el-form>
<el-row style="margin: 10px;">
<el-col :span="24">
- <el-button class="hr-but-all" type="danger">新建标签</el-button>
- <el-button type="primary">删除标签</el-button>
- <el-popconfirm title="是否删除所选择的附件？">
- <el-button slot="reference" class="hr-but-all" type="danger" @click="delfj()">删除附件</el-button>
+ <el-button class="hr-but-all" type="danger" @click="dialogFormVisible = true">新建标签</el-button>
+ <el-popconfirm title="是否删除标签？" @onConfirm="deldialogFormVisible = true">
+ <el-button slot="reference" class="hr-but" type="danger">删除标签</el-button>
</el-popconfirm>
+
+ <el-dialog
+ title="新建标签"
+ :visible.sync="dialogFormVisible"
+ width="25%"
+ class="add-label"
+ >
+ <el-form ref="labelform" :model="labelform" :rules="rules">
+ <el-form-item
+ label="标签名称:"
+ :label-width="formLabelWidth"
+ prop="labelname"
+ >
+ <el-input v-model="labelform.labelname" autocomplete="off" />
+ </el-form-item>
+ <el-form-item
+ label="标签code:"
+ :label-width="formLabelWidth"
+ prop="labelcode"
+ >
+ <el-input v-model="labelform.labelcode" autocomplete="off" />
+ </el-form-item>
+ <el-form-item label="标签排序:" :label-width="formLabelWidth" prop="sort">
+ <el-input-number
+ v-model="labelform.sort"
+ :min="0"
+ :max="100"
+ label="排序"
+ />
+ </el-form-item></el-form>
+ <div slot="footer" class="dialog-footer">
+ <el-button @click="dialogFormVisible = false">取 消</el-button>
+ <el-button
+ type="primary"
+ @click="addlabel('labelform')"
+ >确 定</el-button>
+ </div>
+ </el-dialog>
+ <el-dialog
+ title="删除标签"
+ :visible.sync="deldialogFormVisible"
+ width="25%"
+ class="add-label"
+ >
+ <el-form ref="dellabelform" :model="labelform" :rules="delrules">
+ <el-form-item
+ label="标签名称:"
+ :label-width="formLabelWidth"
+ prop="labelid"
+ >
+ <el-select v-model="labelform.labelid" placeholder="请选择标签名称">
+ <el-option
+ v-for="item in labelData"
+ :key="item.labelid"
+ :value="item.labelid"
+ :label="item.labelname"
+ />
+ </el-select>
+ </el-form-item>
+ </el-form>
+ <div slot="footer" class="dialog-footer">
+ <el-button @click="deldialogFormVisible = false">取 消</el-button>
+ <el-button
+ type="primary"
+ @click="dellabel('dellabelform')"
+ >确 定</el-button>
+ </div>
+ </el-dialog>
<el-button class="hr-but-all" type="danger" @click="downloadfj()">下载附件</el-button>
- <el-button class="hr-but-all" type="danger" @click="dialogShow()">附件管理</el-button>
<el-dialog title="附件管理" :visible.sync="dialogShowUploadfj" :fullscreen="true">
<uploadfj @cancleChooseUser="cancleChooseUser()" />
</el-dialog>
@@ -171,7 +237,7 @@
<el-button
type="text"
size="small"
- @click.native.prevent="deleteRow(scope.$index, tableData)"
+ @click.native.prevent="dialogShow(scope.$index, tableData)"
>
上传
</el-button>
@@ -181,112 +247,15 @@
<el-table-column prop="certificateNumb" label="身份证号" width="180" />
<el-table-column prop="deptName" label="护卫点(部门)" width="180" />
<el-table-column prop="jobName" label="岗位" width="100" />
- <el-table-column prop="jljt" label="记录截图">
- <template slot-scope="scope">
- <el-link type="primary"> {{ scope.row.jljt }}</el-link>
- </template>
- </el-table-column>
- <el-table-column prop="zp" label="照片">
- <template slot-scope="scope">
- <el-link type="primary"> {{ scope.row.zp }}</el-link>
- </template>
- </el-table-column>
- <el-table-column prop="ldht" label="劳动合同">
- <template slot-scope="scope">
- <el-link type="primary"> {{ scope.row.ldht }}</el-link>
- </template>
- </el-table-column>
- <el-table-column prop="sfz" label="身份证">
- <template slot-scope="scope">
- <el-link type="primary"> {{ scope.row.sfz }}</el-link>
- </template>
- </el-table-column>
+ <template v-for="(col) in labelData">
+ <el-table-column :key="col.labelid" :prop="col.labelcode" :label="col.labelname">
+ <template slot-scope="scope">
+ <el-link type="primary"> {{ scope.row[col.labelcode] }}</el-link>
+ </template>
+ </el-table-column>
+ </template>
- <el-table-column prop="rzb" label="入职表">
- <template slot-scope="scope">
- <el-link type="primary">
- {{ scope.row.rzb }}</el-link>
- </template>
- </el-table-column>
- <el-table-column prop="tjb" label="体检表">
- <template slot-scope="scope">
- <el-link type="primary">
- {{ scope.row.tjb }}</el-link>
- </template>
- </el-table-column>
- <el-table-column prop="hz" label="回执">
- <template slot-scope="scope">
- <el-link type="primary">
- {{ scope.row.hz }}</el-link>
- </template>
- </el-table-column>
- <el-table-column prop="yhk" label="银行卡">
- <template slot-scope="scope">
- <el-link type="primary">
- {{ scope.row.yhk }}</el-link>
- </template>
- </el-table-column>
- <el-table-column prop="xgzj" label="相关证件">
- <template slot-scope="scope">
- <el-link type="primary">
- {{ scope.row.xgzj }}</el-link>
- </template>
- </el-table-column>
- <el-table-column prop="xght" label="相关合同">
- <template slot-scope="scope">
- <el-link type="primary">{{ scope.row.xght }}</el-link>
- </template>
- </el-table-column>
- <el-table-column prop="qj" label="请假">
- <template slot-scope="scope">
- <el-link type="primary">{{ scope.row.qj }}</el-link>
- </template>
- </el-table-column>
- <el-table-column prop="cf" label="处罚">
- <template slot-scope="scope">
- <el-link type="primary"> {{ scope.row.cf }}</el-link>
- </template>
- </el-table-column>
- <el-table-column prop="czsq" label="辞职申请">
- <template slot-scope="scope">
- <el-link type="primary"> {{ scope.row.czsq }}</el-link>
- </template>
- </el-table-column>
- <el-table-column prop="lzsx" label="离职手续">
- <template slot-scope="scope">
- <el-link type="primary"> {{ scope.row.lzsx }}</el-link>
- </template>
- </el-table-column>
- <el-table-column prop="zl" label="自离">
- <template slot-scope="scope">
- <el-link type="primary"> {{ scope.row.zl }}</el-link>
- </template>
- </el-table-column>
- <el-table-column prop="sb" label="社保">
- <template slot-scope="scope">
- <el-link type="primary">{{ scope.row.sb }}</el-link>
- </template>
- </el-table-column>
- <el-table-column prop="syj" label="失业金">
- <template slot-scope="scope">
- <el-link type="primary"> {{ scope.row.syj }}</el-link>
- </template>
- </el-table-column>
- <el-table-column prop="ywx" label="意外险">
- <template slot-scope="scope">
- <el-link type="primary">{{ scope.row.ywx }}</el-link>
- </template>
- </el-table-column>
- <el-table-column prop="gs" label="工伤">
- <template slot-scope="scope">
- <el-link type="primary"> {{ scope.row.gs }}</el-link>
- </template>
- </el-table-column>
- <el-table-column prop="lz" label="劳资">
- <template slot-scope="scope">
- <el-link type="primary"> {{ scope.row.lz }}</el-link>
- </template>
- </el-table-column></el-table>
+ </el-table>
<pagination
v-show="total>0"
:total="total"
@@ -308,6 +277,29 @@
},
data() {
return {
+ deldialogFormVisible: false,
+ formLabelWidth: '100px',
+ dialogFormVisible: false,
+ labelform: {
+ labelname: '',
+ labelid: '',
+ labelcode: '',
+ sort: 0
+ },
+ rules: {
+ labelname: [
+ { required: true, message: '请输入标签名称', trigger: 'blur' },
+ { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
+ ],
+ labelcode: [
+ { required: true, message: '请输入标签code', trigger: 'blur' },
+ { min: 3, max: 10, message: '长度在 3 到 20 个字符', trigger: 'blur' }
+ ],
+ sort: [{ required: true, message: '请输入排序', type: 'number', trigger: 'blur' }]
+ },
+ delrules: {
+ labelid: [{ required: true, message: '请选择标签', trigger: 'change' }]
+ },
dialogShowUploadfj: false,
empName: '',
queryform: {
@@ -363,6 +355,7 @@
]
},
tableData: [],
+ labelData: [],
defaultProps: {
children: 'children',
label: 'label'
@@ -370,16 +363,53 @@
}
},
mounted() {
+ this.initLabel()
this.fetch()
},
methods: {
- delfj() {
-
+ dellabel(formName) {
+ this.$refs[formName].validate(valid => {
+ if (valid) {
+ this.$delete('hr/label', { ...this.labelform }).then(() => {
+ this.dialogFormVisible = false
+ this.$message({
+ message: this.$t('tips.deleteSuccess'),
+ type: 'success'
+ })
+ this.deldialogFormVisible = false
+ // 初始加载
+ this.initLabel()
+ this.fetch()
+ })
+ }
+ })
+ },
+ addlabel(formName) {
+ this.$refs[formName].validate(valid => {
+ if (valid) {
+ this.$post('hr/label', { ...this.labelform }).then(() => {
+ this.dialogFormVisible = false
+ this.$message({
+ message: this.$t('tips.createSuccess'),
+ type: 'success'
+ })
+ this.labelform.labelname = ''
+ this.labelform.sort = 0
+ this.labelform.labelcode = ''
+ // 初始加载
+ this.initLabel()
+ this.fetch()
+ })
+ }
+ })
},
downloadfj() {
-
+ this.$message({
+ message: '下载成功!',
+ type: 'success'
+ })
},
- dialogShow() {
+ dialogShow(index, tableData) {
this.dialogShowUploadfj = true
},
cancleChooseUser() {
@@ -434,6 +464,11 @@
this.tableData = data.rows
})
},
+ initLabel() {
+ this.$get('hr/label').then((r) => {
+ this.labelData = r.data.data
+ })
+ },
advancedQueryShowMethods() {
if (this.advancedQueryShow) {
this.headerHeight = '70px'
@@ -457,8 +492,14 @@
margin-top: 10px;
height: 600px;
}
+.el-input-number {
+ width: 100%;
+}
</style>
<style lang="scss">
+.add-lable {
+ text-align: initial;
+}
.input-empName .el-input-group__append{
padding: 0 15px 0 0;
}
diff --git a/src/views/yunpan/zhishou.vue b/src/views/yunpan/zhishou.vue
index 2580ee3..797a339 100644
--- a/src/views/yunpan/zhishou.vue
+++ b/src/views/yunpan/zhishou.vue
@@ -1,606 +1,622 @@
-<template>
- <div class="zs-main">
- <el-row class="search-title">
- <el-col :span="18" class="title">
- <div class="zs-title">云盘智搜</div>
- </el-col>
- <el-col :span="6" class="search">
- <el-input
- v-model="fileName"
- maxlength="20"
- minlength="1"
- clearable
- placeholder="请输入文件名"
- show-word-limit
- style="width:200px"
- />
- <el-button type="primary" @click="findFileByFileName()">查询</el-button>
- </el-col>
- </el-row>
- <el-container style="background-color: #fff;">
- <el-aside width="210px" style="background-color: #fff;text-align: center;">
- <el-button class="add-folder-but" @click="dialogFormVisible = true">新增</el-button>
- <el-popconfirm title="是否删除此目录?">
- <el-button class="add-folder-but" @click="delFolder()">删除</el-button>
- </el-popconfirm>
- <el-dialog
- title="新增文件夹"
- :visible.sync="dialogFormVisible"
- width="25%"
- class="add-folder"
- >
- <el-form ref="folderform" :model="folderform" :rules="rules">
- <el-form-item
- label="文件夹名称:"
- :label-width="formLabelWidth"
- prop="foldername"
- >
- <el-input v-model="folderform.foldername" autocomplete="off" />
- </el-form-item>
- <el-form-item label="文件夹排序:" :label-width="formLabelWidth" prop="sort">
- <el-input-number
- v-model="folderform.sort"
- :min="0"
- :max="100"
- label="排序"
- />
- </el-form-item>
- </el-form>
- <div slot="footer" class="dialog-footer">
- <el-button @click="dialogFormVisible = false">取 消</el-button>
- <el-button
- type="primary"
- @click="addFolderForm('folderform')"
- >确 定</el-button>
- </div>
- </el-dialog>
- <el-timeline>
- <el-timeline-item
- v-for="(activity, index) in activities"
- :key="index"
- :icon="activity.icon"
- :type="activity.type"
- :color="activity.color"
- :size="activity.size"
- placement="bottom"
- >
- <span
- style="position: relative; top: -5px;"
- @click="clickTimeline(index, activity.id)"
- >
- {{ activity.timestamp }}</span>
- </el-timeline-item>
- </el-timeline>
- </el-aside>
- <el-container>
- <el-header class="text-header">
- <el-row><el-col :span="24">
- <i
- class="el-icon-bell"
- style=" color: #a32c30; margin-right: 10px;"
- />提示：文件不要超过10个，单个文件大小不超过50M，单击或者拖动文件到下面区域，支持单个或批量文件的上传。</el-col>
- </el-row>
- <el-row style="background-color: rgba(0,0,0,0.2);">
- <el-col :span="19">
- <el-checkbox
- v-model="checkAll"
- class="myRedCheckBox"
- style="color: #000; margin-left: 20px;"
- @change="checkAllMethods()"
- >全选</el-checkbox></el-col>
- <el-col :span="5">
- <el-button
- type="primary"
- icon="el-icon-download"
- size="mini"
- @click="download()"
- >下载</el-button>
- <el-button
- type="primary"
- icon="el-icon-search"
- size="mini"
- @click="delFile()"
- >删除</el-button>
- </el-col>
- </el-row>
- </el-header>
- <el-main style="background-color: #fff;">
- <el-row v-for="(data, index) in filesUploadData" :key="index">
- <template v-for="(node, nodeIndex) in data.node">
- <el-col v-if="node.isUpload === false" :key="node.filesid" :span="3">
- <el-card
- shadow="never"
- @click.native="clickCard(index * 8 + nodeIndex)"
- >
- <img
- :src="showFileImg(node.filesformat)"
- class="uploading-image"
- >
- <div style="padding-top: 14px;">
- <el-checkbox v-model="checkedArr[index * 8 + nodeIndex].isChecked" class="myRedCheckBox">{{ node.filesname }}</el-checkbox>
- </div>
- </el-card>
- </el-col>
- <el-col v-if="node.isUpload" :key="node.filesid" :span="3">
- <el-card shadow="never">
- <el-upload
- class="avatar-uploader"
- :action="filesUploadUrl"
- :show-file-list="false"
- :before-upload="beforeAvatarUpload"
- :headers="headers()"
- :data="fileDate"
- :on-success="handleAvatarSuccess"
- :on-error="handleAvatarError"
- :multiple="true"
- :limit="10"
- drag
- >
- <i class="el-icon-upload" />
- </el-upload>
- </el-card>
- </el-col>
- </template>
- </el-row>
- </el-main>
- </el-container>
- </el-container>
- </div>
-</template>
-
-<script>
-import { getToken } from '@/utils/auth'
-import { pages } from '@/settings'
-
-export default {
- data() {
- return {
- filesUploadUrl: pages.filesUploadUrl,
- fileDate: {
- folderid: 0
- },
- dialogFormVisible: false,
- folderform: {
- foldername: '',
- sort: 0
- },
- rules: {
- foldername: [
- { required: true, message: '请输入文件夹名称', trigger: 'blur' },
- { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
- ],
- sort: [{ required: true, message: '请输入排序', type: 'number', trigger: 'blur' }]
- },
- formLabelWidth: '100px',
- beforeIndex: 0,
- fileName: '',
- checkedArr: [],
- checkAll: false,
- activities: [],
- filesUploadData: [],
- updateNum: 0
- }
- },
- mounted() {
- // 初始加载
- this.initFolder()
- },
- methods: {
- async initFolder() {
- await this.$get('hr/folder').then(r => {
- this.activities = []
- this.beforeIndex = 0
- r.data.data.forEach((v, i) => {
- if (i === 0) {
- this.activities.push({
- timestamp: v.foldername,
- id: v.folderid,
- color: '#a32c30'
- })
- } else {
- this.activities.push({ timestamp: v.foldername, id: v.folderid })
- }
- })
- })
- var params = { folderid: this.activities[0].id }
- this.initFile(params)
- },
- initFile(params) {
- var node = { node: [] }
- // 文件列表置为空
- this.filesUploadData = []
- this.checkedArr = []
- this.$get('hr/filesUpload', { ...params }).then(r => {
- r.data.data.forEach((v, i) => {
- this.checkedArr.push({ isChecked: false, filesid: v.filesid })
- // 一行8个 等于8就换行
- if (i % 8 === 0 && i !== 0) {
- this.filesUploadData.push(node)
- node = { node: [] }
- }
- // 添加一个新的元素判断是否是上传用的
- this.$set(v, 'isUpload', false)
- // 添加
- node.node.push(v)
- // 如果是最后一个元素,需要手动丢到列表里面去
- if (i === r.data.data.length - 1) {
- this.filesUploadData.push(node)
- }
- })
- // 如果列表为空,增加一个上传的
- if (this.filesUploadData.length === 0) {
- this.filesUploadData.push({ node: [{ isUpload: true }] })
- } else {
- // 如果不为空,但是这一行刚好满8个了,就将数组,新增一个对象
- if (this.filesUploadData[this.filesUploadData.length - 1].node.length === 8) {
- this.filesUploadData.push({ node: [{ isUpload: true }] })
- } else {
- // 新增一个上传
- this.filesUploadData[this.filesUploadData.length - 1].node.push({
- isUpload: true
- })
- }
- }
- })
- },
- clickTimeline(index, id) {
- // 不这样操作的不会响应式更新
- // 赋值到新的列表
- var list = this.activities
- // 将之前的数组置为空
- this.activities = []
- // 删除之前下标的颜色
- delete list[this.beforeIndex].color
- // 将新下标存储起来
- this.beforeIndex = index
- // 将新下标修改颜色
- list[index]['color'] = '#a32c30'
- // 将修改好的数组放回去
- this.activities = list
- this.checkAll = false
- var params
- if (this.fileName === '') {
- // 生成查询文件的条件
- params = { folderid: this.activities[index].id }
- } else {
- // 生成查询文件的条件
- params = {
- folderid: this.activities[this.beforeIndex].id,
- filesname: this.fileName
- }
- }
-
- this.initFile(params)
- },
- clickCard(index) {
- if (this.checkedArr[index].isChecked) {
- this.$set(this.checkedArr[index], 'isChecked', false)
- } else {
- this.$set(this.checkedArr[index], 'isChecked', true)
- }
- },
- checkAllMethods() {
- if (this.checkAll) {
- this.checkedArr.forEach((v, i) => {
- this.$set(v, 'isChecked', true)
- })
- } else {
- this.checkedArr.forEach((v, i) => {
- this.$set(v, 'isChecked', false)
- })
- }
- },
- findFileByFileName() {
- // 生成查询文件的条件
- var params = {
- folderid: this.activities[this.beforeIndex].id,
- filesname: this.fileName
- }
- this.initFile(params)
- },
- addFolderForm(formName) {
- this.$refs[formName].validate(valid => {
- if (valid) {
- this.$post('hr/folder', { ...this.folderform }).then(() => {
- this.dialogFormVisible = false
- this.$message({
- message: this.$t('tips.createSuccess'),
- type: 'success'
- })
- this.folderform.fileName = ''
- this.folderform.sort = 0
- // 初始加载
- this.initFolder()
- })
- }
- })
- },
- delFolder() {
- // 生成查询文件的条件
- var params = { folderid: this.activities[this.beforeIndex].id }
- this.$delete('hr/folder', { ...params }).then(() => {
- this.dialogFormVisible = false
- this.$message({
- message: this.$t('tips.deleteSuccess'),
- type: 'success'
- })
- // 初始加载
- this.initFolder()
- })
- },
- showFileImg(type) {
- switch (type) {
- case 'txt':
- return require('../../assets/uploading/txt.png')
- case 'apk':
- return require('../../assets/uploading/apk.png')
- case 'csv':
- return require('../../assets/uploading/csv.png')
- case 'excel':
- return require('../../assets/uploading/excel.png')
- case 'exe':
- return require('../../assets/uploading/exe.png')
- case 'folder':
- return require('../../assets/uploading/folder.png')
- case 'gif':
- return require('../../assets/uploading/gif.png')
- case 'html':
- return require('../../assets/uploading/html.png')
- case 'json':
- return require('../../assets/uploading/json.png')
- case 'mp3':
- return require('../../assets/uploading/mp3.png')
- case 'mp4':
- return require('../../assets/uploading/mp4.png')
- case 'pdf':
- return require('../../assets/uploading/pdf.png')
- case 'pic':
- return require('../../assets/uploading/pic.png')
- case 'ppt':
- return require('../../assets/uploading/ppt.png')
- case 'rar':
- return require('../../assets/uploading/rar.png')
- case 'svg':
- return require('../../assets/uploading/svg.png')
- case 'webpage':
- return require('../../assets/uploading/webpage.png')
- case 'word':
- return require('../../assets/uploading/word.png')
- case 'zip':
- return require('../../assets/uploading/zip.png')
- case 'jpg':
- return require('../../assets/uploading/jpg.png')
- case 'png':
- return require('../../assets/uploading/png.png')
- default:
- return require('../../assets/uploading/unknown.png')
- }
- },
- beforeAvatarUpload(file) {
- this.fileDate.folderid = this.activities[this.beforeIndex].id
- const isLt50M = file.size / 1024 / 1024 < 50
- if (!isLt50M) {
- this.$message.error('上传文件不能超过 50MB!')
- }
- return isLt50M
- },
- headers() {
- const token = getToken()
- if (token) {
- return {
- Authorization: 'bearer ' + token
- }
- } else {
- return null
- }
- },
- handleAvatarSuccess(response, file, fileList) {
- this.$notify({
- title: '成功',
- message: '上传成功!',
- type: 'success'
- })
- this.updateNum++
- if (this.updateNum === fileList.length) {
- this.updateNum = 0
- // 生成查询文件的条件
- var params = {
- folderid: this.activities[this.beforeIndex].id,
- filesname: this.fileName
- }
- this.initFile(params)
- }
- },
- handleAvatarError() {
- this.updateNum = 0
- this.$notify.error({
- title: '失败',
- message: '上传失败,请联系管理员!'
- })
- },
- download() {
- var checke = []
- this.checkedArr.forEach((v, i) => {
- if (v.isChecked) {
- checke.push(v.filesid)
- }
- })
- if (checke.length <= 0) {
- this.$message({
- message: '请选择需要下载的文件!',
- type: 'warning'
- })
- } else {
- // 生成查询文件的条件
- var params = { fileids: checke.join(',') }
- this.$download('hr/filesUpload/download', { ...params }, new Date().getTime() + '.zip').then(() => {
- this.$message({
- message: '下载成功!',
- type: 'success'
- })
- })
- }
- },
- delFile() {
- var checke = []
- this.checkedArr.forEach((v, i) => {
- if (v.isChecked) {
- checke.push(v.filesid)
- }
- })
- // 生成查询文件的条件
- var params = { fileids: checke.join(',') }
- this.$delete('hr/filesUpload', { ...params }).then(() => {
- this.$message({
- message: '删除成功!',
- type: 'success'
- })
- // 生成查询文件的条件
- var initFileParams = {
- folderid: this.activities[this.beforeIndex].id,
- filesname: this.fileName
- }
-
- this.initFile(initFileParams)
- })
- }
- }
-}
-</script>
-
-<style lang="scss">
-.clearfix:before,
-.clearfix:after {
- display: table;
- content: '';
-}
-
-.clearfix:after {
- clear: both;
-}
-.add-folder {
- text-align: initial;
-}
-.zs-main {
- .search-title {
- height: 50px;
- .search {
- position: relative;
- top: 50%;
- transform: translateY(-50%);
- }
- .title {
- position: relative;
- top: 40%;
- transform: translateY(-50%);
- }
- .zs-title {
- border-left: 4px solid #a32c30;
- padding-left: 10px;
- font-size: 16px;
- }
- }
- .add-folder-but {
- background: #fff !important;
- color: #a32c30 !important;
- margin-bottom: 20px;
- }
- padding: 0 15px 0 15px;
- .text-header {
- line-height: 60px;
- }
- .uploading-image {
- width: 100%;
- height: 100%;
- display: block;
- }
-}
-
-.el-timeline-item__timestamp {
- font-size: 15px;
- color: #000;
-}
-
-/* 设置带边框的checkbox，选中后边框的颜色 */
-.myRedCheckBox.is-bordered.is-checked {
- border-color: #a32c30;
-}
-
-/* 设置选中后的文字颜色 */
-.myRedCheckBox .el-checkbox__input.is-checked + .el-checkbox__label {
- color: #a32c30;
-}
-
-/* 设置选中后对勾框的边框和背景颜色 */
-.myRedCheckBox .el-checkbox__input.is-checked .el-checkbox__inner,
-.myRedCheckBox .el-checkbox__input.is-indeterminate .el-checkbox__inner {
- border-color: #a32c30;
- background-color: #a32c30;
-}
-
-/* 设置checkbox获得焦点后，对勾框的边框颜色 */
-.myRedCheckBox .el-checkbox__input.is-focus .el-checkbox__inner {
- border-color: #a32c30;
-}
-
-/* 设置鼠标经过对勾框，对勾框边框的颜色 */
-.myRedCheckBox .el-checkbox__inner:hover {
- border-color: #a32c30;
-}
-
-.avatar-uploader .el-upload {
- border: 1px dashed #d9d9d9;
- border-radius: 6px;
- cursor: pointer;
- position: relative;
- overflow: hidden;
-}
-.avatar-uploader .el-upload:hover {
- border-color: #409eff;
-}
-.avatar-uploader-icon {
- font-size: 28px;
- color: #8c939d;
- width: 178px;
- height: 178px;
- line-height: 178px;
- text-align: center;
-}
-.avatar {
- width: 178px;
- height: 178px;
- display: block;
-}
-.avatar-uploader .el-upload-dragger .el-icon-upload {
- margin: 20px 0 16px;
-}
-.avatar-uploader .el-upload-dragger {
- border: none;
- width: 100px;
- height: 100px;
-}
-</style>
-<style lang="scss" scoped>
-.el-main {
- margin-top: 2%;
-}
-.app-main {
- background-color: #ffffff;
-}
-.el-button,
-.el-button--primary {
- background: #a32c30;
- border-color: #a32c30;
- color: #fff;
- outline: none;
-}
-.zs-main .text-header {
- line-height: 40px;
-}
-.el-card {
- border: none;
-}
-.el-input-number {
- width: 100%;
-}
-</style>
+<template>
+ <div class="zs-main">
+ <el-row class="search-title">
+ <el-col :span="18" class="title">
+ <div class="zs-title">云盘智搜</div>
+ </el-col>
+ <el-col :span="6" class="search">
+ <el-input
+ v-model="fileName"
+ maxlength="20"
+ minlength="1"
+ clearable
+ placeholder="请输入文件名"
+ show-word-limit
+ style="width:200px"
+ />
+ <el-button type="primary" @click="findFileByFileName()">查询</el-button>
+ </el-col>
+ </el-row>
+ <el-container style="background-color: #fff;">
+ <el-aside width="210px" style="background-color: #fff;text-align: center;">
+ <el-button class="add-folder-but" @click="dialogFormVisible = true">新增</el-button>
+ <el-button class="add-folder-but" @click="dialogDelVisible = true">删除</el-button>
+ <el-dialog
+ title="提示"
+ :visible.sync="dialogDelVisible"
+ width="20%"
+ >
+ <span>是否删除此目录?</span>
+ <span slot="footer" class="dialog-footer">
+ <el-button @click="dialogDelVisible = false">取 消</el-button>
+ <el-button type="primary" @click="delFolder()">确 定</el-button>
+ </span>
+ </el-dialog>
+
+ <el-popconfirm title="是否删除此目录?">
+ <el-button class="add-folder-but" @click="delFolder()">删除</el-button>
+ </el-popconfirm>
+ <el-dialog
+ title="新增文件夹"
+ :visible.sync="dialogFormVisible"
+ width="25%"
+ class="add-folder"
+ >
+ <el-form ref="folderform" :model="folderform" :rules="rules">
+ <el-form-item
+ label="文件夹名称:"
+ :label-width="formLabelWidth"
+ prop="foldername"
+ >
+ <el-input v-model="folderform.foldername" autocomplete="off" />
+ </el-form-item>
+ <el-form-item label="文件夹排序:" :label-width="formLabelWidth" prop="sort">
+ <el-input-number
+ v-model="folderform.sort"
+ :min="0"
+ :max="100"
+ label="排序"
+ />
+ </el-form-item>
+ </el-form>
+ <div slot="footer" class="dialog-footer">
+ <el-button @click="dialogFormVisible = false">取 消</el-button>
+ <el-button
+ type="primary"
+ @click="addFolderForm('folderform')"
+ >确 定</el-button>
+ </div>
+ </el-dialog>
+ <el-timeline>
+ <el-timeline-item
+ v-for="(activity, index) in activities"
+ :key="index"
+ :icon="activity.icon"
+ :type="activity.type"
+ :color="activity.color"
+ :size="activity.size"
+ placement="bottom"
+ >
+ <span
+ style="position: relative; top: -5px;"
+ @click="clickTimeline(index, activity.id)"
+ >
+ {{ activity.timestamp }}</span>
+ </el-timeline-item>
+ </el-timeline>
+ </el-aside>
+ <el-container>
+ <el-header class="text-header">
+ <el-row><el-col :span="24">
+ <i
+ class="el-icon-bell"
+ style=" color: #a32c30; margin-right: 10px;"
+ />提示：文件不要超过10个，单个文件大小不超过50M，单击或者拖动文件到下面区域，支持单个或批量文件的上传。</el-col>
+ </el-row>
+ <el-row style="background-color: rgba(0,0,0,0.2);">
+ <el-col :span="19">
+ <el-checkbox
+ v-model="checkAll"
+ class="myRedCheckBox"
+ style="color: #000; margin-left: 20px;"
+ @change="checkAllMethods()"
+ >全选</el-checkbox></el-col>
+ <el-col :span="5">
+ <el-button
+ type="primary"
+ icon="el-icon-download"
+ size="mini"
+ @click="download()"
+ >下载</el-button>
+ <el-button
+ type="primary"
+ icon="el-icon-search"
+ size="mini"
+ @click="delFile()"
+ >删除</el-button>
+ </el-col>
+ </el-row>
+ </el-header>
+ <el-main style="background-color: #fff;">
+ <el-row v-for="(data, index) in filesUploadData" :key="index">
+ <template v-for="(node, nodeIndex) in data.node">
+ <el-col v-if="node.isUpload === false" :key="node.filesid" :span="3">
+ <el-card
+ shadow="never"
+ @click.native="clickCard(index * 8 + nodeIndex)"
+ >
+ <img
+ :src="showFileImg(node.filesformat)"
+ class="uploading-image"
+ >
+ <div style="padding-top: 14px;">
+ <el-checkbox v-model="checkedArr[index * 8 + nodeIndex].isChecked" class="myRedCheckBox">{{ node.filesname }}</el-checkbox>
+ </div>
+ </el-card>
+ </el-col>
+ <el-col v-if="node.isUpload" :key="node.filesid" :span="3">
+ <el-card shadow="never">
+ <el-upload
+ class="avatar-uploader"
+ :action="filesUploadUrl"
+ :show-file-list="false"
+ :before-upload="beforeAvatarUpload"
+ :headers="headers()"
+ :data="fileDate"
+ :on-success="handleAvatarSuccess"
+ :on-error="handleAvatarError"
+ :multiple="true"
+ :limit="10"
+ drag
+ >
+ <i class="el-icon-upload" />
+ </el-upload>
+ </el-card>
+ </el-col>
+ </template>
+ </el-row>
+ </el-main>
+ </el-container>
+ </el-container>
+ </div>
+</template>
+
+<script>
+import { getToken } from '@/utils/auth'
+import { pages } from '@/settings'
+
+export default {
+ data() {
+ return {
+ filesUploadUrl: pages.filesUploadUrl,
+ fileDate: {
+ folderid: 0
+ },
+ dialogDelVisible: false,
+ dialogFormVisible: false,
+ folderform: {
+ foldername: '',
+ sort: 0
+ },
+ rules: {
+ foldername: [
+ { required: true, message: '请输入文件夹名称', trigger: 'blur' },
+ { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
+ ],
+ sort: [{ required: true, message: '请输入排序', type: 'number', trigger: 'blur' }]
+ },
+ formLabelWidth: '100px',
+ beforeIndex: 0,
+ fileName: '',
+ checkedArr: [],
+ checkAll: false,
+ activities: [],
+ filesUploadData: [],
+ updateNum: 0
+ }
+ },
+ mounted() {
+ // 初始加载
+ this.initFolder()
+ },
+ methods: {
+ async initFolder() {
+ await this.$get('hr/folder').then(r => {
+ this.activities = []
+ this.beforeIndex = 0
+ r.data.data.forEach((v, i) => {
+ if (i === 0) {
+ this.activities.push({
+ timestamp: v.foldername,
+ id: v.folderid,
+ color: '#a32c30'
+ })
+ } else {
+ this.activities.push({ timestamp: v.foldername, id: v.folderid })
+ }
+ })
+ })
+ var params = { folderid: this.activities[0].id }
+ this.initFile(params)
+ },
+ initFile(params) {
+ var node = { node: [] }
+ // 文件列表置为空
+ this.filesUploadData = []
+ this.checkedArr = []
+ this.$get('hr/filesUpload', { ...params }).then(r => {
+ r.data.data.forEach((v, i) => {
+ this.checkedArr.push({ isChecked: false, filesid: v.filesid })
+ // 一行8个 等于8就换行
+ if (i % 8 === 0 && i !== 0) {
+ this.filesUploadData.push(node)
+ node = { node: [] }
+ }
+ // 添加一个新的元素判断是否是上传用的
+ this.$set(v, 'isUpload', false)
+ // 添加
+ node.node.push(v)
+ // 如果是最后一个元素,需要手动丢到列表里面去
+ if (i === r.data.data.length - 1) {
+ this.filesUploadData.push(node)
+ }
+ })
+ // 如果列表为空,增加一个上传的
+ if (this.filesUploadData.length === 0) {
+ this.filesUploadData.push({ node: [{ isUpload: true }] })
+ } else {
+ // 如果不为空,但是这一行刚好满8个了,就将数组,新增一个对象
+ if (this.filesUploadData[this.filesUploadData.length - 1].node.length === 8) {
+ this.filesUploadData.push({ node: [{ isUpload: true }] })
+ } else {
+ // 新增一个上传
+ this.filesUploadData[this.filesUploadData.length - 1].node.push({
+ isUpload: true
+ })
+ }
+ }
+ })
+ },
+ clickTimeline(index, id) {
+ // 不这样操作的不会响应式更新
+ // 赋值到新的列表
+ var list = this.activities
+ // 将之前的数组置为空
+ this.activities = []
+ // 删除之前下标的颜色
+ delete list[this.beforeIndex].color
+ // 将新下标存储起来
+ this.beforeIndex = index
+ // 将新下标修改颜色
+ list[index]['color'] = '#a32c30'
+ // 将修改好的数组放回去
+ this.activities = list
+ this.checkAll = false
+ var params
+ if (this.fileName === '') {
+ // 生成查询文件的条件
+ params = { folderid: this.activities[index].id }
+ } else {
+ // 生成查询文件的条件
+ params = {
+ folderid: this.activities[this.beforeIndex].id,
+ filesname: this.fileName
+ }
+ }
+
+ this.initFile(params)
+ },
+ clickCard(index) {
+ if (this.checkedArr[index].isChecked) {
+ this.$set(this.checkedArr[index], 'isChecked', false)
+ } else {
+ this.$set(this.checkedArr[index], 'isChecked', true)
+ }
+ },
+ checkAllMethods() {
+ if (this.checkAll) {
+ this.checkedArr.forEach((v, i) => {
+ this.$set(v, 'isChecked', true)
+ })
+ } else {
+ this.checkedArr.forEach((v, i) => {
+ this.$set(v, 'isChecked', false)
+ })
+ }
+ },
+ findFileByFileName() {
+ // 生成查询文件的条件
+ var params = {
+ folderid: this.activities[this.beforeIndex].id,
+ filesname: this.fileName
+ }
+ this.initFile(params)
+ },
+ addFolderForm(formName) {
+ this.$refs[formName].validate(valid => {
+ if (valid) {
+ this.$post('hr/folder', { ...this.folderform }).then(() => {
+ this.dialogFormVisible = false
+ this.$message({
+ message: this.$t('tips.createSuccess'),
+ type: 'success'
+ })
+ this.folderform.filename = ''
+ this.folderform.sort = 0
+ // 初始加载
+ this.initFolder()
+ })
+ }
+ })
+ },
+ delFolder() {
+ // 生成查询文件的条件
+ var params = { folderid: this.activities[this.beforeIndex].id }
+ this.$delete('hr/folder', { ...params }).then(() => {
+ this.dialogFormVisible = false
+ this.$message({
+ message: this.$t('tips.deleteSuccess'),
+ type: 'success'
+ })
+ this.dialogDelVisible = false
+ // 初始加载
+ this.initFolder()
+ })
+ },
+ showFileImg(type) {
+ switch (type) {
+ case 'txt':
+ return require('../../assets/uploading/txt.png')
+ case 'apk':
+ return require('../../assets/uploading/apk.png')
+ case 'csv':
+ return require('../../assets/uploading/csv.png')
+ case 'excel':
+ return require('../../assets/uploading/excel.png')
+ case 'exe':
+ return require('../../assets/uploading/exe.png')
+ case 'folder':
+ return require('../../assets/uploading/folder.png')
+ case 'gif':
+ return require('../../assets/uploading/gif.png')
+ case 'html':
+ return require('../../assets/uploading/html.png')
+ case 'json':
+ return require('../../assets/uploading/json.png')
+ case 'mp3':
+ return require('../../assets/uploading/mp3.png')
+ case 'mp4':
+ return require('../../assets/uploading/mp4.png')
+ case 'pdf':
+ return require('../../assets/uploading/pdf.png')
+ case 'pic':
+ return require('../../assets/uploading/pic.png')
+ case 'ppt':
+ return require('../../assets/uploading/ppt.png')
+ case 'rar':
+ return require('../../assets/uploading/rar.png')
+ case 'svg':
+ return require('../../assets/uploading/svg.png')
+ case 'webpage':
+ return require('../../assets/uploading/webpage.png')
+ case 'word':
+ return require('../../assets/uploading/word.png')
+ case 'zip':
+ return require('../../assets/uploading/zip.png')
+ case 'jpg':
+ return require('../../assets/uploading/jpg.png')
+ case 'png':
+ return require('../../assets/uploading/png.png')
+ default:
+ return require('../../assets/uploading/unknown.png')
+ }
+ },
+ beforeAvatarUpload(file) {
+ this.fileDate.folderid = this.activities[this.beforeIndex].id
+ const isLt50M = file.size / 1024 / 1024 < 50
+ if (!isLt50M) {
+ this.$message.error('上传文件不能超过 50MB!')
+ }
+ return isLt50M
+ },
+ headers() {
+ const token = getToken()
+ if (token) {
+ return {
+ Authorization: 'bearer ' + token
+ }
+ } else {
+ return null
+ }
+ },
+ handleAvatarSuccess(response, file, fileList) {
+ this.$notify({
+ title: '成功',
+ message: '上传成功!',
+ type: 'success'
+ })
+ this.updateNum++
+ if (this.updateNum === fileList.length) {
+ this.updateNum = 0
+ // 生成查询文件的条件
+ var params = {
+ folderid: this.activities[this.beforeIndex].id,
+ filesname: this.fileName
+ }
+ this.initFile(params)
+ }
+ },
+ handleAvatarError() {
+ this.updateNum = 0
+ this.$notify.error({
+ title: '失败',
+ message: '上传失败,请联系管理员!'
+ })
+ },
+ download() {
+ var checke = []
+ this.checkedArr.forEach((v, i) => {
+ if (v.isChecked) {
+ checke.push(v.filesid)
+ }
+ })
+ if (checke.length <= 0) {
+ this.$message({
+ message: '请选择需要下载的文件!',
+ type: 'warning'
+ })
+ } else {
+ // 生成查询文件的条件
+ var params = { fileids: checke.join(',') }
+ this.$download('hr/filesUpload/download', { ...params }, this.activities[this.beforeIndex].timestamp + '.zip').then(() => {
+ this.$message({
+ message: '下载成功!',
+ type: 'success'
+ })
+ })
+ }
+ },
+ delFile() {
+ var checke = []
+ this.checkedArr.forEach((v, i) => {
+ if (v.isChecked) {
+ checke.push(v.filesid)
+ }
+ })
+ // 生成查询文件的条件
+ var params = { fileids: checke.join(',') }
+ this.$delete('hr/filesUpload', { ...params }).then(() => {
+ this.$message({
+ message: '删除成功!',
+ type: 'success'
+ })
+ // 生成查询文件的条件
+ var initFileParams = {
+ folderid: this.activities[this.beforeIndex].id,
+ filesname: this.fileName
+ }
+
+ this.initFile(initFileParams)
+ })
+ }
+ }
+}
+</script>
+
+<style lang="scss">
+.clearfix:before,
+.clearfix:after {
+ display: table;
+ content: '';
+}
+
+.clearfix:after {
+ clear: both;
+}
+.add-folder {
+ text-align: initial;
+}
+.zs-main {
+ .search-title {
+ height: 50px;
+ .search {
+ position: relative;
+ top: 50%;
+ transform: translateY(-50%);
+ }
+ .title {
+ position: relative;
+ top: 40%;
+ transform: translateY(-50%);
+ }
+ .zs-title {
+ border-left: 4px solid #a32c30;
+ padding-left: 10px;
+ font-size: 16px;
+ }
+ }
+ .add-folder-but {
+ background: #fff !important;
+ color: #a32c30 !important;
+ margin-bottom: 20px;
+ }
+ padding: 0 15px 0 15px;
+ .text-header {
+ line-height: 60px;
+ }
+ .uploading-image {
+ width: 100%;
+ height: 100%;
+ display: block;
+ }
+}
+
+.el-timeline-item__timestamp {
+ font-size: 15px;
+ color: #000;
+}
+
+/* 设置带边框的checkbox，选中后边框的颜色 */
+.myRedCheckBox.is-bordered.is-checked {
+ border-color: #a32c30;
+}
+
+/* 设置选中后的文字颜色 */
+.myRedCheckBox .el-checkbox__input.is-checked + .el-checkbox__label {
+ color: #a32c30;
+}
+
+/* 设置选中后对勾框的边框和背景颜色 */
+.myRedCheckBox .el-checkbox__input.is-checked .el-checkbox__inner,
+.myRedCheckBox .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+ border-color: #a32c30;
+ background-color: #a32c30;
+}
+
+/* 设置checkbox获得焦点后，对勾框的边框颜色 */
+.myRedCheckBox .el-checkbox__input.is-focus .el-checkbox__inner {
+ border-color: #a32c30;
+}
+
+/* 设置鼠标经过对勾框，对勾框边框的颜色 */
+.myRedCheckBox .el-checkbox__inner:hover {
+ border-color: #a32c30;
+}
+
+.avatar-uploader .el-upload {
+ border: 1px dashed #d9d9d9;
+ border-radius: 6px;
+ cursor: pointer;
+ position: relative;
+ overflow: hidden;
+}
+.avatar-uploader .el-upload:hover {
+ border-color: #409eff;
+}
+.avatar-uploader-icon {
+ font-size: 28px;
+ color: #8c939d;
+ width: 178px;
+ height: 178px;
+ line-height: 178px;
+ text-align: center;
+}
+.avatar {
+ width: 178px;
+ height: 178px;
+ display: block;
+}
+.avatar-uploader .el-upload-dragger .el-icon-upload {
+ margin: 20px 0 16px;
+}
+.avatar-uploader .el-upload-dragger {
+ border: none;
+ width: 100px;
+ height: 100px;
+}
+</style>
+<style lang="scss" scoped>
+.el-main {
+ margin-top: 2%;
+}
+.app-main {
+ background-color: #ffffff;
+}
+.el-button,
+.el-button--primary {
+ background: #a32c30;
+ border-color: #a32c30;
+ color: #fff;
+ outline: none;
+}
+.zs-main .text-header {
+ line-height: 40px;
+}
+.el-card {
+ border: none;
+}
+.el-input-number {
+ width: 100%;
+}
+</style>
+
--
Gitblit v1.8.0