修改云盘智搜

yz_08

2021-02-09 8671e57aa0fe492040901b9e8eff8fc56b0c9588

修改云盘智搜

 src/views/user/Informationinput.vue

@@ -4693,10 +4693,6 @@
  margin-top: 2%;
}

.el-select {
  width: 100%;
}

.commonBtn {
  background-color: rgb(163, 44, 48);
  color: white;
@@ -4712,25 +4708,26 @@
  color: rgb(163, 44, 48);
}

.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}

.info-card {
  margin-top: 20px;
}

.el-header,
.el-footer {
</style>
<style lang="scss" scoped>
.el-select {
  width: 100%;
}
.el-autocomplete{
  width: 100%;
}
.el-header,.el-footer {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 60px;
}
</style>
<style lang="scss" scoped>
.el-autocomplete{
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}
</style>

 src/views/yunpan/zhishou.vue

@@ -5,13 +5,41 @@
        <div class="zs-title">云盘智搜</div>

      </el-col>

      <el-col :span="6" class="search">

        <el-input v-model="input" placeholder="请输入关键词" style="width:200px" />

        <el-button type="primary">查询</el-button>

        <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 icon="el-icon-plus" class="add-folder-but">新增文件夹</el-button>

        <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%"

          :before-close="handleClose"

        >

          <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-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="排序" @change="handleChange" />

            </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"

@@ -20,9 +48,10 @@
            :type="activity.type"

            :color="activity.color"

            :size="activity.size"

            :timestamp="activity.timestamp"

            placement="top"

          />

            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>

@@ -30,12 +59,12 @@
          <el-row><el-col :span="24">

            <i

              class="el-icon-bell"

              style=" color: #a32c30;    margin-right: 10px;"

              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;">全选</el-checkbox></el-col>

              <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">下载</el-button>

              <el-button type="primary" icon="el-icon-search" size="mini">删除</el-button>

@@ -43,210 +72,31 @@
          </el-row>

        </el-header>

        <el-main style="background-color: #fff;">

          <el-row>

            <el-col :span="3">

              <el-card shadow="never">

                <img src="../../assets/uploading/word.png" class="uploading-image">

                <div style="padding-top: 14px;">

                  <el-checkbox v-model="checked" class="myRedCheckBox">文件1.pdf</el-checkbox>

                </div>

              </el-card>

            </el-col>

            <el-col :span="3">

              <el-card shadow="never">

                <img src="../../assets/uploading/pdf.png" class="uploading-image">

                <div style="padding-top: 14px;">

                  <el-checkbox v-model="checked" class="myRedCheckBox">文件1.pdf</el-checkbox>

                </div>

              </el-card>

            </el-col>

            <el-col :span="3">

              <el-card shadow="never">

                <img src="../../assets/uploading/ppt.png" class="uploading-image">

                <div style="padding-top: 14px;">

                  <el-checkbox v-model="checked" class="myRedCheckBox">文件1.pdf</el-checkbox>

                </div>

              </el-card>

            </el-col>

            <el-col :span="3">

              <el-card shadow="never">

                <img src="../../assets/uploading/excel.png" class="uploading-image">

                <div style="padding-top: 14px;">

                  <el-checkbox v-model="checked" class="myRedCheckBox">文件1.pdf</el-checkbox>

                </div>

              </el-card>

            </el-col>

            <el-col :span="3">

              <el-card shadow="never">

                <img src="../../assets/uploading/zip.png" class="uploading-image">

                <div style="padding-top: 14px;">

                  <el-checkbox v-model="checked" class="myRedCheckBox">文件1.pdf</el-checkbox>

                </div>

              </el-card>

            </el-col>

            <el-col :span="3">

              <el-card shadow="never">

                <img src="../../assets/uploading/txt.png" class="uploading-image">

                <div style="padding-top: 14px;">

                  <el-checkbox v-model="checked" class="myRedCheckBox">文件1.pdf</el-checkbox>

                </div>

              </el-card>

            </el-col>

            <el-col :span="3">

              <el-card shadow="never">

                <img src="../../assets/uploading/txt.png" class="uploading-image">

                <div style="padding-top: 14px;">

                  <el-checkbox v-model="checked" class="myRedCheckBox">文件1.pdf</el-checkbox>

                </div>

              </el-card>

            </el-col>

            <el-col :span="3">

              <el-card shadow="never">

                <img src="../../assets/uploading/txt.png" class="uploading-image">

                <div style="padding-top: 14px;">

                  <el-checkbox v-model="checked" class="myRedCheckBox">文件1.pdf</el-checkbox>

                </div>

              </el-card>

            </el-col>

          </el-row>

          <el-row>

            <el-col :span="3">

              <el-card shadow="never">

                <img src="../../assets/uploading/word.png" class="uploading-image">

                <div style="padding-top: 14px;">

                  <el-checkbox v-model="checked" class="myRedCheckBox">文件1.pdf</el-checkbox>

                </div>

              </el-card>

            </el-col>

            <el-col :span="3">

              <el-card shadow="never">

                <img src="../../assets/uploading/pdf.png" class="uploading-image">

                <div style="padding-top: 14px;">

                  <el-checkbox v-model="checked" class="myRedCheckBox">文件1.pdf</el-checkbox>

                </div>

              </el-card>

            </el-col>

            <el-col :span="3">

              <el-card shadow="never">

                <img src="../../assets/uploading/ppt.png" class="uploading-image">

                <div style="padding-top: 14px;">

                  <el-checkbox v-model="checked" class="myRedCheckBox">文件1.pdf</el-checkbox>

                </div>

              </el-card>

            </el-col>

            <el-col :span="3">

              <el-card shadow="never">

                <img src="../../assets/uploading/excel.png" class="uploading-image">

                <div style="padding-top: 14px;">

                  <el-checkbox v-model="checked" class="myRedCheckBox">文件1.pdf</el-checkbox>

                </div>

              </el-card>

            </el-col>

            <el-col :span="3">

              <el-card shadow="never">

                <img src="../../assets/uploading/zip.png" class="uploading-image">

                <div style="padding-top: 14px;">

                  <el-checkbox v-model="checked" class="myRedCheckBox">文件1.pdf</el-checkbox>

                </div>

              </el-card>

            </el-col>

            <el-col :span="3">

              <el-card shadow="never">

                <img src="../../assets/uploading/txt.png" class="uploading-image">

                <div style="padding-top: 14px;">

                  <el-checkbox v-model="checked" class="myRedCheckBox">文件1.pdf</el-checkbox>

                </div>

              </el-card>

            </el-col>

            <el-col :span="3">

              <el-card shadow="never">

                <img src="../../assets/uploading/txt.png" class="uploading-image">

                <div style="padding-top: 14px;">

                  <el-checkbox v-model="checked" class="myRedCheckBox">文件1.pdf</el-checkbox>

                </div>

              </el-card>

            </el-col>

            <el-col :span="3">

              <el-card shadow="never">

                <img src="../../assets/uploading/txt.png" class="uploading-image">

                <div style="padding-top: 14px;">

                  <el-checkbox v-model="checked" class="myRedCheckBox">文件1.pdf</el-checkbox>

                </div>

              </el-card>

            </el-col>

          </el-row>

          <el-row>

            <el-col :span="3">

              <el-card shadow="never">

                <img src="../../assets/uploading/word.png" class="uploading-image">

                <div style="padding-top: 14px;">

                  <el-checkbox v-model="checked" class="myRedCheckBox">文件1.pdf</el-checkbox>

                </div>

              </el-card>

            </el-col>

            <el-col :span="3">

              <el-card shadow="never">

                <img src="../../assets/uploading/pdf.png" class="uploading-image">

                <div style="padding-top: 14px;">

                  <el-checkbox v-model="checked" class="myRedCheckBox">文件1.pdf</el-checkbox>

                </div>

              </el-card>

            </el-col>

            <el-col :span="3">

              <el-card shadow="never">

                <img src="../../assets/uploading/ppt.png" class="uploading-image">

                <div style="padding-top: 14px;">

                  <el-checkbox v-model="checked" class="myRedCheckBox">文件1.pdf</el-checkbox>

                </div>

              </el-card>

            </el-col>

            <el-col :span="3">

              <el-card shadow="never">

                <img src="../../assets/uploading/excel.png" class="uploading-image">

                <div style="padding-top: 14px;">

                  <el-checkbox v-model="checked" class="myRedCheckBox">文件1.pdf</el-checkbox>

                </div>

              </el-card>

            </el-col>

            <el-col :span="3">

              <el-card shadow="never">

                <img src="../../assets/uploading/zip.png" class="uploading-image">

                <div style="padding-top: 14px;">

                  <el-checkbox v-model="checked" class="myRedCheckBox">文件1.pdf</el-checkbox>

                </div>

              </el-card>

            </el-col>

            <el-col :span="3">

              <el-card shadow="never">

                <img src="../../assets/uploading/txt.png" class="uploading-image">

                <div style="padding-top: 14px;">

                  <el-checkbox v-model="checked" class="myRedCheckBox">文件1.pdf</el-checkbox>

                </div>

              </el-card>

            </el-col>

            <el-col :span="3">

              <el-card shadow="never">

                <img src="../../assets/uploading/txt.png" class="uploading-image">

                <div style="padding-top: 14px;">

                  <el-checkbox v-model="checked" class="myRedCheckBox">文件1.pdf</el-checkbox>

                </div>

              </el-card>

            </el-col>

            <el-col :span="3">

              <el-card shadow="never">

                <el-upload

                  class="avatar-uploader"

                  action="https://jsonplaceholder.typicode.com/posts/"

                  :show-file-list="false"

                  :on-success="handleAvatarSuccess"

                  :before-upload="beforeAvatarUpload"

                  drag

                >

                  <img v-if="imageUrl" :src="imageUrl" class="avatar">

                  <i v-else class="el-icon-upload" />

                </el-upload>

              </el-card>

            </el-col>

          <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="../../assets/uploading/word.png" 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="https://jsonplaceholder.typicode.com/posts/"

                    :show-file-list="false"

                    :on-success="handleAvatarSuccess"

                    :before-upload="beforeAvatarUpload"

                    drag

                  >

                    <i class="el-icon-upload" />

                  </el-upload>

                </el-card>

              </el-col>

            </template>

          </el-row>

        </el-main>

      </el-container>

@@ -258,23 +108,162 @@
export default {

  data() {

    return {

      checked: false,

      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: [

        {

          timestamp: '自定义文件夹1'

        },

        {

          color: '#a32c30',

          timestamp: '自定义文件夹2'

        },

        {

          timestamp: '自定义文件夹3'

        },

        {

          timestamp: '自定义文件夹4'

      activities: [],

      filesUploadData: []

    }

  }, 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()

      })

    }

  }

}

@@ -291,7 +280,9 @@
  .clearfix:after {

      clear: both

  }



.add-folder{

  text-align: initial;

}

.zs-main {

    .search-title {

        height: 50px;

@@ -391,8 +382,7 @@
</style>

<style lang="scss" scoped>

.el-main{

  margin-top: 1%;

      height: 500px;

  margin-top: 2%;

}

.app-main {

    background-color: #ffffff;

@@ -410,5 +400,7 @@
.el-card {

    border: none;

}



.el-input-number{

  width: 100%;

}

</style>