master

分支 (1)

管理

管理

master

superfile-electron
/
index2.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>文件批量重命名</title>
    <link rel="stylesheet" href="css/layui.css">
    <script src="js/vue.js"></script>
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="./static/css/font.css">
    <link rel="stylesheet" href="./static/css/weadmin.css">
  </head>

  <body>
    <script src="js/layui.js"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>

  <div class="container" id="user">
    <div class="logo">
      <a href="./index2.html">superFile</a>
    </div>

    <ul class="layui-nav right" lay-filter="">
      <li class="layui-nav-item">
        <a href="javascript:;">{{username}}</a>
        <dl class="layui-nav-child">
          <!-- 二级菜单 -->
          <!-- <dd>
            <a onclick="WeAdminShow('个人信息','http://www.baidu.com')">个人信息</a>
          </dd> -->
          <dd>
            <a class="loginout" href="./login.html">退出</a>
          </dd>
        </dl>
      </li>
      <li class="layui-nav-item to-index">
        <a href="./index2.html" target="_blank">首页</a>
      </li>
    </ul>
  </div>

  <div id="page" style="padding: 20px; margin: 0 auto; background-color: #F2F2F2;">
    <div class="layui-row layui-col-space2" style="margin-bottom: 30px;">
      <button id="create" type="button" class="layui-btn" data-method="createBucket">
        <i class="layui-icon">&#xe608;</i> 创建新文件夹
      </button>

      <button id="add" type="button" class="layui-btn" data-method="add">
        <i class="layui-icon">&#xe608;</i> 添加文件夹
      </button>
    </div>


    <div class="layui-row layui-col-space15" id="layerDemo">
      <div class="layui-col-md6" v-for="item in bucketList">
        <div class="layui-card">
          <div class="layui-card-header" style="cursor:pointer;" v-on:click="tofile(item.bucketId)">{{item.bucketName}}
          </div>
          <div class="layui-card-body">
            <br>
            文件数量：{{item.count}}<br>
            <br>
            <div class="site-demo-button"  style="margin-bottom: 0;">
              <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" data-method="edit"
                :data-type="item.bucketId"><i class="layui-icon"></i></button>
              <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" data-method="delete"
                :data-type="item.bucketId"><i class="layui-icon"></i></button>
              <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" data-method="share"
                :data-type="item.bucketId"><i class="layui-icon"></i></button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</body>

<script>

  var url = 'http://localhost:8081'
  var Authorization = window.localStorage.Authorization

  $(function () {
    $.ajax({
      type: "GET",
      url: url + '/bucket',
      headers: {
        Authorization: Authorization
      },
      success: function (res) {
        page.bucketList = res.data
      }
    });
  });


  var page = new Vue({
    el: '#page',
    data: {
      bucketList: []
    },
    methods: {
      tofile: function (event) {
        window.localStorage.bucketId = event
        // console.log(window.localStorage.bucketId)
        window.location.replace("index1.html")

      }
    }
  })
  var user = new Vue({
    el: '#user',
    data: {
      username: window.localStorage.username
    },
    methods: {

    }
  })


  layui.use('layer', function () { //独立版的layer无需执行这一句
    var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句

    //触发事件
    var active = {


      createBucket: function () {
        layer.prompt({
          formType: 0,
          value: '',
          title: '请输入文件夹名称',
          btn: ['确定', '取消'], //按钮，
          btnAlign: 'c'
        }, function (value, index) {

          $.ajax({
            type: "POST",
            url: url + '/bucket',
            contentType: 'application/json;charset=utf-8',
            headers: {
              Authorization: Authorization
            },
            data: JSON.stringify({
              bucketName: value
            }),
            success: function (res) {
              $.ajax({
                type: "GET",
                url: url + '/bucket',
                headers: {
                  Authorization: Authorization
                },
                success: function (res) {
                  page.bucketList = res.data
                }
              });
            }
          });
          layer.close(index);

        }, function (value, index) {
          layer.close(index);
        });
      }


      ,edit: function(othis){
        layer.prompt({
          formType: 0,
          value: '',
          title: '请输入新的文件夹名称',
          btn: ['确定', '取消'], //按钮，
          btnAlign: 'c'
        }, function (value, index) {

          $.ajax({
            type: "POST",
            url: url + '/bucket/update',
            contentType: 'application/json;charset=utf-8',
            headers: {
              Authorization: Authorization
            },
            data: JSON.stringify({
              bucketName: value,
              bucketId:othis.data('type')
            }),
            success: function (res) {
              $.ajax({
                type: "GET",
                url: url + '/bucket',
                headers: {
                  Authorization: Authorization
                },
                success: function (res) {
                  page.bucketList = res.data
                }
              });
            }
          });
          layer.close(index);

        }, function (value, index) {
          layer.close(index);
        });
      }


      , delete: function (othis) {
        layer.confirm('确认删除吗?', { icon: 3, title: '提示' }, function (index) {
          $.ajax({
            type: "POST",
            url: url + '/bucket/delete',
            contentType: 'application/json;charset=utf-8',
            headers: {
              Authorization: Authorization
            },
            data: JSON.stringify({
              bucketId: othis.data('type')
            }),

            success: function (res) {
              if (res.msg == "success") {
                layer.msg('删除成功');
                $.ajax({
                  type: "GET",
                  url: url + '/bucket',
                  headers: {
                    Authorization: Authorization
                  },
                  success: function (res) {
                    page.bucketList = res.data

                  }
                });

              } else {
                layer.msg('删除失败');
              }
            }
          });
          layer.close(index);
        });

      }


      , share: function (othis) {
        var type = othis.data('type')
          , text = othis.text();
        layer.tips("分享码："+type, othis, {
          area: ["300px","50px"],
          tips: 1,
          time: 6000
        });

      }


      , add: function(othis){
        layer.prompt({
          formType: 0,
          value: '',
          title: '请输入分享码',
          btn: ['确定', '取消'], //按钮，
          btnAlign: 'c'
        }, function (value, index) {
          $.ajax({
            type: "POST",
            url: url + '/bucket/add',
            contentType: 'application/json;charset=utf-8',
            headers: {
              Authorization: Authorization
            },
            data: JSON.stringify({
              bucketId: value
            }),
            success: function (res) {
              layer.msg(res.msg)
              $.ajax({
                type: "GET",
                url: url + '/bucket',
                headers: {
                  Authorization: Authorization
                },
                success: function (res) {
                  page.bucketList = res.data
                }
              });
            }
          });
          layer.close(index);

        }, function (value, index) {
          layer.close(index);
        });
      }
    };

    $('#layerDemo').on('click','.layui-btn', function () {
      console.log("AAA")
      var othis = $(this), method = othis.data('method');
      active[method] ? active[method].call(this, othis) : '';
    });

    $('#create').on('click', function () {
      console.log("AAA")
      var othis = $(this), method = othis.data('method');
      active[method] ? active[method].call(this, othis) : '';
    });

    $('#add').on('click', function () {
      console.log("AAA")
      var othis = $(this), method = othis.data('method');
      active[method] ? active[method].call(this, othis) : '';
    });

  });

</script>

</html>