|
|
@@ -0,0 +1,817 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div class="bigBox">
|
|
|
+ <div class="settingBox">
|
|
|
+ <!-- 设置盒子顶部搜索 -->
|
|
|
+ <div class="topSearch">
|
|
|
+ <div style="position: relative;">
|
|
|
+ <el-input v-model="searchFire" class="searchFire" size="large" placeholder="搜索文件" />
|
|
|
+ <el-icon style="color: gray;display: inline-block;position: absolute;top: 8px;right: 5px;">
|
|
|
+ <Search />
|
|
|
+ </el-icon>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <el-icon style="font-size: 24px;">
|
|
|
+ <Plus />
|
|
|
+ </el-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 方块点击盒子 -->
|
|
|
+ <div
|
|
|
+ style="display: flex;justify-content: flex-start;align-items: flex-start;flex-wrap: wrap;height: 540px;">
|
|
|
+ <!-- v-for盒子 -->
|
|
|
+ <div class="setBox" @click="changeFile">
|
|
|
+ <el-dropdown trigger="click" class="selectChe">
|
|
|
+ <span class="el-dropdown-link">
|
|
|
+ ...
|
|
|
+ </span>
|
|
|
+ <template #dropdown>
|
|
|
+ <el-dropdown-menu>
|
|
|
+ <el-dropdown-item @click="addPeople">
|
|
|
+ <img :src="togger" alt="">
|
|
|
+ <span>添加人员</span>
|
|
|
+ </el-dropdown-item>
|
|
|
+ <el-dropdown-item>
|
|
|
+ <img :src="textbox" alt="">
|
|
|
+ <span>重命名</span>
|
|
|
+ </el-dropdown-item>
|
|
|
+ <el-dropdown-item>
|
|
|
+ <img :src="trash" alt="">
|
|
|
+ <span>删除</span>
|
|
|
+ </el-dropdown-item>
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </template>
|
|
|
+ </el-dropdown>
|
|
|
+ <img src="../../assets/images/fileStyle.png" style="width: 72px;height: 72px;">
|
|
|
+ <p>xxx文件</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <p>
|
|
|
+ <span style="margin-left: 10px;">5G/1T</span>
|
|
|
+ <span style="margin-left: 10rem;font-size: 12px;color: blue;cursor: pointer;"
|
|
|
+ @click="askApply">申请扩容</span>
|
|
|
+ </p>
|
|
|
+ <el-progress style="margin-left: 8px;" :percentage="50" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 右侧大盒子 -->
|
|
|
+ <div class="mesBox">
|
|
|
+ <!-- 功能盒子 -->
|
|
|
+ <div class="useBox">
|
|
|
+ <!-- table切换 -->
|
|
|
+ <div style="width: 100%;height: 24px;background-color: #7084B4;line-height: 20px;">
|
|
|
+ <template v-for="(item, index) in menuList">
|
|
|
+ <span @click="tableChange(item, index)"
|
|
|
+ :class="['tables', { tableLis: selectedIndex === index }]">
|
|
|
+ {{ item.name }}
|
|
|
+ <img v-if="selectedIndex === index ? true : false"
|
|
|
+ style="position: absolute;top: 4px;right: 4px;" src="../../assets/images/close.png"
|
|
|
+ @click="shotdown(item)">
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <!-- 众多功能 -->
|
|
|
+ <div class="manyUse">
|
|
|
+ <div
|
|
|
+ style="display: flex;width: 92px;height: 32px;justify-content: flex-start;align-items: center;line-height: 18px;">
|
|
|
+ <div style="margin-left: 5px;">
|
|
|
+ <el-icon
|
|
|
+ style="background-color: #7084B4;width: 24px;height: 24px;border-radius: 50%;color: white;">
|
|
|
+ <Plus />
|
|
|
+ </el-icon>
|
|
|
+ </div>
|
|
|
+ <div style="margin-left: 5px;">
|
|
|
+ <el-dropdown trigger="click">
|
|
|
+ <span style="color: black;cursor: pointer;font-size: 12px;" @click="createNew">新建
|
|
|
+ <el-icon>
|
|
|
+ <arrow-down />
|
|
|
+ </el-icon>
|
|
|
+ </span>
|
|
|
+ <template #dropdown>
|
|
|
+ <el-dropdown-menu>
|
|
|
+ <!-- <template v-for="(item, index) in arrorMenu">
|
|
|
+ <el-dropdown-item>
|
|
|
+ <img :src="item.img" alt="">
|
|
|
+ <span>{{ item.name }}</span>
|
|
|
+ </el-dropdown-item>
|
|
|
+ </template> -->
|
|
|
+ <el-dropdown-item @click="directoryOpen">
|
|
|
+ 组织目录
|
|
|
+ </el-dropdown-item>
|
|
|
+ <el-dropdown-item @click="directoryOpen">
|
|
|
+ 公开目录
|
|
|
+ </el-dropdown-item>
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </template>
|
|
|
+ </el-dropdown>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <template v-for="(item, index) in useMenu">
|
|
|
+ <div
|
|
|
+ style="display: flex;width: 82px;height: 32px;justify-content: flex-start;align-items: center;line-height: 18px;">
|
|
|
+ <div style="margin-left: 5px;">
|
|
|
+ <img :src="item.img" style="width: 24px;height: 24px;" alt="">
|
|
|
+ </div>
|
|
|
+ <div style="margin-left: 5px;">
|
|
|
+ <span style="font-size: 12px;">{{ item.name }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div
|
|
|
+ style="display: flex;width: 102px;height: 32px;justify-content: flex-start;align-items: center;line-height: 18px;">
|
|
|
+ <div style="margin-left: 5px;">
|
|
|
+ <img :src="funnel" style="width: 24px;height: 24px;" alt="">
|
|
|
+ </div>
|
|
|
+ <div style="margin-left: 5px;">
|
|
|
+ <el-dropdown trigger="click">
|
|
|
+ <span style="color: black;cursor: pointer;font-size: 12px;">快速筛选
|
|
|
+ <el-icon>
|
|
|
+ <arrow-down />
|
|
|
+ </el-icon>
|
|
|
+ </span>
|
|
|
+ <template #dropdown>
|
|
|
+ <!-- <el-dropdown-menu>
|
|
|
+ <template v-for="(item, index) in arrorMenu">
|
|
|
+ <el-dropdown-item>
|
|
|
+ <img :src="item.img" alt="">
|
|
|
+ <span>{{ item.name }}</span>
|
|
|
+ </el-dropdown-item>
|
|
|
+ </template>
|
|
|
+ </el-dropdown-menu> -->
|
|
|
+ </template>
|
|
|
+ </el-dropdown>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ style="display: flex;width: 92px;height: 32px;justify-content: flex-start;align-items: center;line-height: 18px;">
|
|
|
+ <div style="margin-left: 5px;">
|
|
|
+ <img src="../../assets/images/upload.png" style="width: 24px;height: 24px;" alt="">
|
|
|
+ </div>
|
|
|
+ <div style="margin-left: 5px;">
|
|
|
+ <el-dropdown trigger="click">
|
|
|
+ <span style="color: black;cursor: pointer;font-size: 12px;">上传
|
|
|
+ <el-icon>
|
|
|
+ <arrow-down />
|
|
|
+ </el-icon>
|
|
|
+ </span>
|
|
|
+ <template #dropdown>
|
|
|
+ <el-dropdown-menu>
|
|
|
+ <template v-for="(item, index) in arrorMenu">
|
|
|
+ <el-dropdown-item>
|
|
|
+ <img :src="item.img" alt="">
|
|
|
+ <span>{{ item.name }}</span>
|
|
|
+ </el-dropdown-item>
|
|
|
+ </template>
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </template>
|
|
|
+ </el-dropdown>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 面包屑功能栏 -->
|
|
|
+ <div class="breadBox">
|
|
|
+ <!-- 左侧 -->
|
|
|
+ <div style="display: flex;justify-content: space-around;align-items: center;">
|
|
|
+ <!-- 前进后退 -->
|
|
|
+ <div style="display: flex;justify-content: space-around;align-items: center;">
|
|
|
+ <img style="display:block;width: 11px;height: 11px;" :src="blueLeft" alt="">
|
|
|
+ <img style="display:block;width: 16px;height: 16px;" :src="grayRight" alt="">
|
|
|
+ </div>
|
|
|
+ <!-- 面包屑 -->
|
|
|
+ <div>
|
|
|
+ <el-breadcrumb separator="/">
|
|
|
+ <el-breadcrumb-item style="font-size: 12px;">homepage</el-breadcrumb-item>
|
|
|
+ <el-breadcrumb-item style="font-size: 12px;">promotion management</el-breadcrumb-item>
|
|
|
+ <el-breadcrumb-item style="font-size: 12px;">promotion detail</el-breadcrumb-item>
|
|
|
+ </el-breadcrumb>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 右侧 -->
|
|
|
+ <div>
|
|
|
+ <img :src="sort" alt="">
|
|
|
+ <img :src="squre" alt="">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 展示文件夹盒子 -->
|
|
|
+ <div>
|
|
|
+ <!-- 文件夹 -->
|
|
|
+ <div class="detailBox">
|
|
|
+ <el-collapse v-model="folder" accordion class="collapse">
|
|
|
+ <el-collapse-item title="文件夹" name="1" class="custom-collapse-item">
|
|
|
+
|
|
|
+ </el-collapse-item>
|
|
|
+ </el-collapse>
|
|
|
+ </div>
|
|
|
+ <!-- 文件 -->
|
|
|
+ <div class="fileTable">
|
|
|
+ <el-collapse v-model="files" accordion class="collapse">
|
|
|
+ <el-collapse-item title="文件" name="2" class="custom-collapse-item">
|
|
|
+ <el-table :data="fileList" style="width: 100%" @row-click="handleRowClick">
|
|
|
+ <el-table-column label="Image" width="100">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <!-- 插入固定图片 -->
|
|
|
+ <span>1</span>
|
|
|
+ <img :src="fileBox" alt="" />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="date" label="Date" width="180" />
|
|
|
+ <el-table-column prop="name" label="Name" width="180" />
|
|
|
+ <el-table-column prop="address" label="Address" />
|
|
|
+ </el-table>
|
|
|
+ <!-- <div class="setCli" v-if="cliCC">
|
|
|
+ <template v-for="(item, index) in mouseCli">
|
|
|
+ <p @click="chooseSet(item, index)" class="chooseSet">
|
|
|
+ <img :src="item.img" alt="">
|
|
|
+ {{ item.name }}
|
|
|
+ <span v-if="item.name == '在线编辑' || item.name == '协作' ? true : false"
|
|
|
+ style="color: #7084B4;float: right;">></span>
|
|
|
+ </p>
|
|
|
+ </template>
|
|
|
+ </div> -->
|
|
|
+ </el-collapse-item>
|
|
|
+ </el-collapse>
|
|
|
+ </div>
|
|
|
+ <!-- 添加人员穿梭框 -->
|
|
|
+ <div>
|
|
|
+ <el-dialog v-model="transferModal" title="添加人员" width="40%">
|
|
|
+ <el-transfer v-model="tranvalue" filterable :filter-method="filterMethod"
|
|
|
+ filter-placeholder="State Abbreviations" :data="trandata" />
|
|
|
+ <template #footer>
|
|
|
+ <span class="dialog-footer">
|
|
|
+ <el-button @click="transferModal = false">取消</el-button>
|
|
|
+ <el-button type="primary" @click="transferSure">确定</el-button>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 扩容弹窗 -->
|
|
|
+ <div>
|
|
|
+ <el-dialog v-model="askTo" title="扩容申请" width="30%">
|
|
|
+ <el-form>
|
|
|
+ <el-form-item label="新容量">
|
|
|
+ <el-input-number v-model="askNum" :min="1" :max="10" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="申请理由">
|
|
|
+ <el-input v-model="askTalk" maxlength="150" placeholder="请输入申请理由" show-word-limit
|
|
|
+ type="textarea" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <span class="dialog-footer">
|
|
|
+ <el-button @click="askTo = false">取消</el-button>
|
|
|
+ <el-button type="primary" @click="sureAsk">
|
|
|
+ 确定
|
|
|
+ </el-button>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+ <!-- 新建组织目录 -->
|
|
|
+ <div>
|
|
|
+ <el-dialog v-model="directoryModal" title="扩容申请" width="55%">
|
|
|
+ <el-form :data="v1form">
|
|
|
+ <el-form-item label="目录名称">
|
|
|
+ <el-input v-model="v1form.names"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="目录分类">
|
|
|
+ <el-radio-group v-model="v1form.types" class="ml-4" @change="directoryChange">
|
|
|
+ <el-radio label="公开目录" value="0" size="large"></el-radio>
|
|
|
+ <el-radio label="组织目录" value="1" size="large"></el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="成员权限" v-if="directoryPower">
|
|
|
+ <el-checkbox-group v-model="v1form.power">
|
|
|
+ <el-checkbox label="可查看" />
|
|
|
+ <el-checkbox label="可编辑" />
|
|
|
+ <el-checkbox label="可上传" />
|
|
|
+ <el-checkbox label="可删除" />
|
|
|
+ </el-checkbox-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="选择成员" v-if="directoryPower">
|
|
|
+ <el-transfer v-model="v1form.tranvalue1" filterable :filter-method="filterMethod1"
|
|
|
+ filter-placeholder="State Abbreviations" :data="trandata1" />
|
|
|
+ <!-- <template #footer>
|
|
|
+ <span class="dialog-footer">
|
|
|
+ <el-button @click="transferModal = false">取消</el-button>
|
|
|
+ <el-button type="primary" @click="transferSure">确定</el-button>
|
|
|
+ </span>
|
|
|
+ </template> -->
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <span class="dialog-footer">
|
|
|
+ <el-button @click="directoryModal = false">取消</el-button>
|
|
|
+ <el-button type="primary" @click="">
|
|
|
+ 确定
|
|
|
+ </el-button>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { ref } from 'vue'
|
|
|
+import myfile from '../../api/myfile/myfile'
|
|
|
+import { Search } from '@element-plus/icons-vue'
|
|
|
+import copy from '../../assets/images/copy.png'
|
|
|
+import clipboard from '../../assets/images/clipboard.png'
|
|
|
+import share from '../../assets/images/share.png'
|
|
|
+import trash from '../../assets/images/trash.png'
|
|
|
+import file from '../../assets/images/file.png'
|
|
|
+import folder from '../../assets/images/folder.png'
|
|
|
+import image from '../../assets/images/image.png'
|
|
|
+import filmSlate from '../../assets/images/filmSlate.png'
|
|
|
+import musicNotes from '../../assets/images/musicNotes.png'
|
|
|
+import blueLeft from '../../assets/images/blueLeft.png'
|
|
|
+import grayRight from "../../assets/images/grayRight.png"
|
|
|
+import sort from '../../assets/images/sort.png'
|
|
|
+import squre from '../../assets/images/squre.png'
|
|
|
+import addolder from '../../assets/images/addolder.png'
|
|
|
+import textbox from '../../assets/images/textbox.png'
|
|
|
+import goon from '../../assets/images/goon.png'
|
|
|
+import notePencil from '../../assets/images/notePencil.png'
|
|
|
+import togger from '../../assets/images/togger.png'
|
|
|
+import icc from '../../assets/images/icc.png'
|
|
|
+import history from '../../assets/images/history.png'
|
|
|
+import fileBox from '../../assets/images/fileBox.png'
|
|
|
+import funnel from '../../assets/images/funnel.png'
|
|
|
+export default {
|
|
|
+ setup() {
|
|
|
+ let searchFire = ref('')
|
|
|
+ let selectedIndex = ref(0)
|
|
|
+ let folder = ref(['1'])
|
|
|
+ let files = ref(['2'])
|
|
|
+ let folderList = ref([])
|
|
|
+ let askTo = ref(false)
|
|
|
+ let askNum = ref(1)
|
|
|
+ let askTalk = ref('')
|
|
|
+ // let cliCC = ref(false)
|
|
|
+ let transferModal = ref(false)
|
|
|
+ let directoryModal = ref(false)
|
|
|
+ let directoryPower = ref(true)
|
|
|
+ let trandata = ref(generateData())
|
|
|
+ let trandata1 = ref(generateData1())
|
|
|
+ let tranvalue = ref([])
|
|
|
+ // let tranvalue1 = ref([])
|
|
|
+ let v1form = ref({
|
|
|
+ names:"",
|
|
|
+ types:"",
|
|
|
+ power:[],
|
|
|
+ tranvalue1:[]
|
|
|
+ })
|
|
|
+ let fileList = ref([
|
|
|
+ {
|
|
|
+ date: '2016-05-03',
|
|
|
+ name: 'Tom',
|
|
|
+ address: 'No. 189, Grove St, Los Angeles',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date: '2016-05-02',
|
|
|
+ name: 'Tom',
|
|
|
+ address: 'No. 189, Grove St, Los Angeles',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date: '2016-05-04',
|
|
|
+ name: 'Tom',
|
|
|
+ address: 'No. 189, Grove St, Los Angeles',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date: '2016-05-01',
|
|
|
+ name: 'Tom',
|
|
|
+ address: 'No. 189, Grove St, Los Angeles',
|
|
|
+ },
|
|
|
+ ])
|
|
|
+ let menuList = ref([
|
|
|
+ {
|
|
|
+ name: "标签1",
|
|
|
+ choose: "1"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "标签2",
|
|
|
+ choose: "2"
|
|
|
+ },
|
|
|
+ ])
|
|
|
+ let useMenu = ref([
|
|
|
+ {
|
|
|
+ img: copy,
|
|
|
+ name: "复制"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: clipboard,
|
|
|
+ name: "粘贴"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: share,
|
|
|
+ name: "分享给"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: trash,
|
|
|
+ name: "删除"
|
|
|
+ },
|
|
|
+ ])
|
|
|
+ let arrorMenu = ref([
|
|
|
+ {
|
|
|
+ img: file,
|
|
|
+ name: "文件"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: folder,
|
|
|
+ name: '文件夹'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: image,
|
|
|
+ name: "图片"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: filmSlate,
|
|
|
+ name: "视频"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: musicNotes,
|
|
|
+ name: "音频"
|
|
|
+ }
|
|
|
+ ])
|
|
|
+ let mouseCli = ref([
|
|
|
+ {
|
|
|
+ img: addolder,
|
|
|
+ name: "移动",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: copy,
|
|
|
+ name: "复制",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: clipboard,
|
|
|
+ name: "粘贴"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: textbox,
|
|
|
+ name: "重命名"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: goon,
|
|
|
+ name: "发送"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: share,
|
|
|
+ name: "分享"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: notePencil,
|
|
|
+ name: "在线编辑"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: togger,
|
|
|
+ name: "协作"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: icc,
|
|
|
+ name: "文字识别"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: history,
|
|
|
+ name: "历史版本"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: share,
|
|
|
+ name: "删除"
|
|
|
+ }
|
|
|
+ ])
|
|
|
+ function getAll() {
|
|
|
+ myfile.get().then(res => {
|
|
|
+ console.log(res, 'eee');
|
|
|
+ })
|
|
|
+ }
|
|
|
+ function changeFile(row) {
|
|
|
+
|
|
|
+ }
|
|
|
+ // tableMenu切换
|
|
|
+ function tableChange(row, num) {
|
|
|
+ this.selectedIndex = num
|
|
|
+ }
|
|
|
+ // x图标事件
|
|
|
+ function shotdown(row) {
|
|
|
+ this.menuList = this.menuList.filter(item => item.name !== row.name)
|
|
|
+ }
|
|
|
+ // 文件名表格每一行点击事件
|
|
|
+ function handleRowClick(row) {
|
|
|
+ cliCC.value = true
|
|
|
+ }
|
|
|
+ // 申请扩容
|
|
|
+ function askApply() {
|
|
|
+ this.askTo = true
|
|
|
+ }
|
|
|
+ function sureAsk() {
|
|
|
+ this.askTo = false
|
|
|
+ }
|
|
|
+ //mouse弹框
|
|
|
+ function chooseSet(row, num) {
|
|
|
+ if (row.name == '在线编辑' || row.name == '协作') {
|
|
|
+ cliCC.value = true
|
|
|
+ } else {
|
|
|
+ cliCC.value = false
|
|
|
+ }
|
|
|
+ // if (row.name == '分享') {
|
|
|
+ // transferModal.value = true
|
|
|
+ // } else {
|
|
|
+ // transferModal.value = false
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ // 穿梭框数据
|
|
|
+ function generateData() {
|
|
|
+ const data = []
|
|
|
+ const states = [
|
|
|
+ '某人1',
|
|
|
+ '某人2',
|
|
|
+ '某人3',
|
|
|
+ '某人4',
|
|
|
+ '某人5',
|
|
|
+ '某人6',
|
|
|
+ '某人7 ',
|
|
|
+ ]
|
|
|
+ const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT']
|
|
|
+ states.forEach((city, index) => {
|
|
|
+ data.push({
|
|
|
+ label: city,
|
|
|
+ key: index,
|
|
|
+ initial: initials[index],
|
|
|
+ })
|
|
|
+ })
|
|
|
+ return data
|
|
|
+ }
|
|
|
+ // 新建目录时选择的穿梭框数据
|
|
|
+ function generateData1() {
|
|
|
+ const data = []
|
|
|
+ const states = [
|
|
|
+ '某某1',
|
|
|
+ '某某2',
|
|
|
+ '某某3',
|
|
|
+ '某某4',
|
|
|
+ '某某5',
|
|
|
+ '某某6',
|
|
|
+ '某某7 ',
|
|
|
+ ]
|
|
|
+ const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT']
|
|
|
+ states.forEach((city, index) => {
|
|
|
+ data.push({
|
|
|
+ label: city,
|
|
|
+ key: index,
|
|
|
+ initial: initials[index],
|
|
|
+ })
|
|
|
+ })
|
|
|
+ return data
|
|
|
+ }
|
|
|
+ function filterMethod(query, item) {
|
|
|
+ return item.initial.toLowerCase().includes(query.toLowerCase())
|
|
|
+ }
|
|
|
+ function filterMethod1(query, item) {
|
|
|
+ return item.initial.toLowerCase().includes(query.toLowerCase())
|
|
|
+ }
|
|
|
+ // 添加人员
|
|
|
+ function addPeople() {
|
|
|
+ transferModal.value = true
|
|
|
+ }
|
|
|
+ // 新建组织目录
|
|
|
+ function directoryOpen() {
|
|
|
+ directoryModal.value = true
|
|
|
+ }
|
|
|
+ function directoryChange(e){
|
|
|
+ if(e==='公开目录'){
|
|
|
+ directoryPower.value = false
|
|
|
+ }else{
|
|
|
+ directoryPower.value = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ folderList,//文件夹的数据
|
|
|
+ fileList,//文件夹的数据
|
|
|
+ getAll,//拿到数据的方法
|
|
|
+ searchFire,//搜索文件的model
|
|
|
+ changeFile,//切换右侧视图的file
|
|
|
+ menuList,//右侧切换
|
|
|
+ tableChange,//改变class点击事件
|
|
|
+ selectedIndex,//当前选中下标
|
|
|
+ shotdown,//筛选出当前数据
|
|
|
+ useMenu,
|
|
|
+ arrorMenu,
|
|
|
+ blueLeft,//返回
|
|
|
+ grayRight,//前进
|
|
|
+ squre,//视图切换
|
|
|
+ sort,//排序
|
|
|
+ folder,
|
|
|
+ files,
|
|
|
+ handleRowClick,
|
|
|
+ askApply,//申请扩容
|
|
|
+ askTo,
|
|
|
+ sureAsk,
|
|
|
+ askNum,
|
|
|
+ askTalk,
|
|
|
+ // cliCC,
|
|
|
+ addolder,//图片↓
|
|
|
+ textbox,
|
|
|
+ goon,
|
|
|
+ notePencil,
|
|
|
+ togger,
|
|
|
+ icc,
|
|
|
+ history,
|
|
|
+ mouseCli,//文件点击弹框
|
|
|
+ chooseSet,
|
|
|
+ fileBox,
|
|
|
+ transferModal,
|
|
|
+ generateData,
|
|
|
+ generateData1,
|
|
|
+ filterMethod,
|
|
|
+ filterMethod1,
|
|
|
+ trandata,
|
|
|
+ trandata1,
|
|
|
+ tranvalue,
|
|
|
+ trash,//删除图标
|
|
|
+ funnel,//筛选图标
|
|
|
+ folder,//文件夹图标
|
|
|
+ addPeople,
|
|
|
+ directoryModal,
|
|
|
+ directoryOpen,//新建组织目录
|
|
|
+ v1form,
|
|
|
+ directoryChange,
|
|
|
+ directoryPower,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getAll();
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+p {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.bigBox {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.settingBox {
|
|
|
+ width: 342px;
|
|
|
+ height: 666px;
|
|
|
+ border: 2px solid black;
|
|
|
+ border-radius: 4px;
|
|
|
+ /* margin: 5px 5px; */
|
|
|
+ margin-right: 15px;
|
|
|
+ background-color: white;
|
|
|
+}
|
|
|
+
|
|
|
+.topSearch {
|
|
|
+ width: 100%;
|
|
|
+ height: 48px;
|
|
|
+ background-color: #EBEFF6;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.searchFire {
|
|
|
+ width: 248px;
|
|
|
+ height: 32px;
|
|
|
+}
|
|
|
+
|
|
|
+.setBox {
|
|
|
+ width: 88px;
|
|
|
+ height: 112px;
|
|
|
+ text-align: center;
|
|
|
+ margin-left: 12px;
|
|
|
+ margin-top: 5px;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.setBox:hover {
|
|
|
+ background-color: #EEF9FF;
|
|
|
+}
|
|
|
+
|
|
|
+.setBox:hover .selectChe {
|
|
|
+ background-color: #EEF9FF;
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+.selectChe {
|
|
|
+ display: none;
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ background: rgba(255, 255, 255, 0.7);
|
|
|
+ border-radius: 4px 4px 4px 4px;
|
|
|
+ position: absolute;
|
|
|
+ top: 2px;
|
|
|
+ right: 2px;
|
|
|
+ line-height: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.mesBox {
|
|
|
+ width: 70vw;
|
|
|
+ height: 666px;
|
|
|
+ /* margin: 5px 5px; */
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: white;
|
|
|
+}
|
|
|
+
|
|
|
+.useBox {
|
|
|
+ width: 100%;
|
|
|
+ height: 96px;
|
|
|
+}
|
|
|
+
|
|
|
+.tables {
|
|
|
+ display: inline-block;
|
|
|
+ width: 112px;
|
|
|
+ height: 22px;
|
|
|
+ border-radius: 4px;
|
|
|
+ line-height: 21px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 12px;
|
|
|
+ margin-left: 5px;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.tableLis {
|
|
|
+ display: inline-block;
|
|
|
+ width: 112px;
|
|
|
+ height: 22px;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: #EBEFF6;
|
|
|
+ line-height: 21px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 12px;
|
|
|
+ margin-left: 5px;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.manyUse {
|
|
|
+ width: 100%;
|
|
|
+ height: 48px;
|
|
|
+ background-color: white;
|
|
|
+ line-height: 48px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.el-dropdown-link {
|
|
|
+ color: white;
|
|
|
+}
|
|
|
+
|
|
|
+.breadBox {
|
|
|
+ width: 100%;
|
|
|
+ height: 24px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ background-color: #D9E0F0;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-collapse-item__header {
|
|
|
+ height: 24px !important;
|
|
|
+ background-color: #EBEFF6 !important;
|
|
|
+}
|
|
|
+
|
|
|
+.detailBox {
|
|
|
+ width: 100%;
|
|
|
+ height: 270px;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-dialog__header {
|
|
|
+ background-color: #ECEFF7;
|
|
|
+ margin-right: 0px;
|
|
|
+}
|
|
|
+
|
|
|
+.fileTable {
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.setCli {
|
|
|
+ width: 156px;
|
|
|
+ height: auto;
|
|
|
+ position: absolute;
|
|
|
+ top: -70px;
|
|
|
+ left: 300px;
|
|
|
+ background-color: white;
|
|
|
+ border: 1px solid gray;
|
|
|
+ border-radius: 4px;
|
|
|
+ z-index: 2;
|
|
|
+}
|
|
|
+
|
|
|
+.chooseSet:hover {
|
|
|
+ width: 100%;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ background-color: #8693b2;
|
|
|
+ color: white;
|
|
|
+}
|
|
|
+</style>
|
liyangzheng
