From 139355c05c55a21a419e9e23d633332b8f1efc0c Mon Sep 17 00:00:00 2001
From: duan <duanduanduan.com>
Date: Tue, 16 Aug 2022 15:46:09 +0800
Subject: [PATCH] =?UTF-8?q?feat(src/views/shortcut):=20=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E5=BF=AB=E6=8D=B7=E6=96=B9=E5=BC=8F=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                 |   1 +
 src/icons/svg/关闭.svg       |   2 +
 src/icons/svg/加号.svg       |   2 +
 src/router/index.js          |   7 +
 src/views/home/index.vue     |   7 +-
 src/views/shortcut/index.vue | 284 +++++++++++++++++++++++++++++++++++
 6 files changed, 302 insertions(+), 1 deletion(-)
 create mode 100644 src/icons/svg/关闭.svg
 create mode 100644 src/icons/svg/加号.svg
 create mode 100644 src/views/shortcut/index.vue

diff --git a/package.json b/package.json
index 361b337..76bd33a 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "px2rem-loader": "^0.1.9",
     "vue": "2.6.10",
     "vue-router": "3.0.6",
+    "vuedraggable": "^2.24.3",
     "vuex": "3.1.0",
     "vuex-persistedstate": "^4.1.0"
   },
diff --git a/src/icons/svg/关闭.svg b/src/icons/svg/关闭.svg
new file mode 100644
index 0000000..9d053fe
--- /dev/null
+++ b/src/icons/svg/关闭.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1660629901763" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3256" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M851.408 715.648L647.76 512l203.648-203.648-135.76-135.76L512 376.24 308.352 172.592l-135.76 135.76L376.24 512 172.592 715.648l135.76 135.76L512 647.76l203.648 203.648z" fill="#ffffff" p-id="3257"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/加号.svg b/src/icons/svg/加号.svg
new file mode 100644
index 0000000..90ee6ca
--- /dev/null
+++ b/src/icons/svg/加号.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1660631934752" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2573" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M867.7 423.8H599.8V155.9c0-49.3-40-89.3-89.3-89.3s-89.3 40-89.3 89.3v267.9H153.3c-49.3 0-89.3 40-89.3 89.3s40 89.3 89.3 89.3h267.9v267.9c0 49.3 40 89.3 89.3 89.3s89.3-40 89.3-89.3V602.4h267.9c49.3 0 89.3-40 89.3-89.3s-40-89.3-89.3-89.3z" p-id="2574" fill="#ffffff"></path></svg>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 7fac4c3..7a09320 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -42,8 +42,15 @@ export const constantRoutes = [
     component: () => import('@/views/home/index'),
     hidden: true
   },
+  {
+    path: '/shortcut',
+    name: 'Shortcut',
+    component: () => import('@/views/shortcut/index'),
+    hidden: true
+  },
   {
     path: '/userinfo',
+    redirect: '/userinfo/index',
     component: Layout,
     hidden: true,
     children: [
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index bef67f0..8dbe678 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -14,10 +14,14 @@
         <div key="5" class="home-pic-item" @click="picClick('user')"><img src="@/assets/2-主界面/用户管理.png" alt=""></div>
       </div>
       <div class="home-menu">
-        <div v-for="item in 9" :key="item" class="home-menu-item">
+        <div v-for="item in 8" :key="item" class="home-menu-item">
           <div class="home-menu-item-img"><img src="@/assets/2-主界面/库存盘点.png" alt=""></div>
           <div class="home-menu-item-text">库存盘点</div>
         </div>
+        <div class="home-menu-item" @click="$router.push('/shortcut')">
+          <div class="home-menu-item-img"><img src="@/assets/2-主界面/更多.png" alt=""></div>
+          <div class="home-menu-item-text">更多</div>
+        </div>
       </div>
     </div>
   </div>
@@ -91,6 +95,7 @@ export default {
         }
       }
       .home-menu-item-text{
+        text-align: center;
         font-size: 1.75rem;
         font-weight: 400;
         color: #606266;
diff --git a/src/views/shortcut/index.vue b/src/views/shortcut/index.vue
new file mode 100644
index 0000000..2058b7b
--- /dev/null
+++ b/src/views/shortcut/index.vue
@@ -0,0 +1,284 @@
+<template>
+  <div>
+    <div class="home-top">
+      <div class="home-top-left"> <img src="@/assets/2-主界面/logo.png" alt=""> </div>
+      <div class="home-top-mid"><img src="@/assets/rms/主界面-黑-80px.png" alt=""></div>
+      <div class="home-top-right"><img class="home-top-right-img" src="@/assets/2-主界面/关闭.png" alt=""></div>
+    </div>
+    <div class="content-container-text">
+      <div class="title"><div class="return" @click="$router.push('/')"><i class="el-icon-arrow-left" /> 返回</div>快捷方式设置</div>
+      <div class="content">
+        <div class="content-item">
+          <div class="sub-title">已选择快捷方式 <span class="sub-title-num">（已选7/7）</span></div>
+          <draggable :list="items" class="items">
+            <li v-for="(item,index) in items" :key="item.id" class="item">
+              <div class="item-container">
+                <svg-icon icon-class="关闭" class="opt-icon" @click="handleDel(index)" />
+                <div class="item-img">
+                  <img src="@/assets/2-主界面/库存盘点.png" alt="">
+                </div>
+                <el-tooltip :content="item.name" :disabled="item.name.length < 5" placement="top" effect="light">
+                  <div class="item-title">{{ item.name }}</div>
+                </el-tooltip>
+              </div>
+            </li>
+          </draggable>
+          <div class="bottom">
+            <div class="bottom-desc">按住拖拽，调整顺序</div>
+            <div class="bottom-opt"><el-button type="primary" @click="handleEnable">应用</el-button></div>
+          </div>
+        </div>
+        <div class="content-item item-right">
+          <div v-for="(item,index) in itemList" :key="item.id + 'l'">
+            <div class="sub-title">{{ item.title }}</div>
+            <ul class="items-right">
+              <li v-for="(it,idx) in item.items" :key="idx +'' + index" class="item">
+                <div class="item-container">
+                  <svg-icon icon-class="加号" class="opt-icon opt-right" @click="handleAdd(index,idx)" />
+                  <div class="item-img">
+                    <img src="@/assets/2-主界面/库存盘点.png" alt="">
+                  </div>
+                  <el-tooltip :content="it.name" :disabled="it.name.length < 5" placement="top" effect="light">
+                    <div class="item-title">{{ it.name }}</div>
+                  </el-tooltip>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import draggable from 'vuedraggable'
+export default {
+  name: 'Shortcut',
+  components: {
+    draggable
+  },
+  data() {
+    return {
+      items: [
+        { name: '试剂入库', id: 0 },
+        { name: '试剂领用', id: 1 },
+        { name: '试剂管理', id: 2 }
+      ],
+      itemList: [
+        {
+          id: 0,
+          title: '试剂管理',
+          items: [
+            { name: '试剂入库试', id: 0 },
+            { name: '试剂领用', id: 1 },
+            { name: '试剂管理', id: 2 },
+            { name: '试剂入库', id: 0 },
+            { name: '试剂领用', id: 1 },
+            { name: '试剂管理', id: 2 }
+          ]
+        },
+        {
+          id: 1,
+          title: '标准品管理',
+          items: [
+            { name: '试剂入库', id: 0 },
+            { name: '试剂领用', id: 1 },
+            { name: '试剂管理', id: 2 }
+          ]
+        },
+        {
+          id: 2,
+          title: '用户管理',
+          items: [
+            { name: '试剂入库', id: 0 },
+            { name: '试剂领用', id: 1 },
+            { name: '试剂管理', id: 2 }
+          ]
+        }
+
+      ]
+    }
+  },
+  methods: {
+    handleEnable() {
+      console.log(this.items)
+    },
+    handleAdd(index, idx) {
+      const item = this.itemList[index].items.splice(idx, 1)
+      this.items.push(...item)
+    },
+    handleDel(index) {
+      const item = this.items.splice(index, 1)
+      const idx = 0
+      this.itemList[idx].items.push(...item)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.title{
+  font-size: 28px;
+  font-weight: bold;
+  color: #303133;
+  text-align: center;
+}
+.content-container-text{
+  padding: 2rem 1rem 2rem 1rem;
+  height: calc(100vh - 6rem);
+  background: linear-gradient(180deg, #F3F5F9 0%, #D3D9E7 100%);
+}
+.return {
+  font-size: 20px;
+  font-weight: 400;
+  color: #303133;
+  float: left;
+}
+.content{
+  display: flex;
+  /*height: calc( 100vh - 200px) ;*/
+  height: 77vh;
+  margin-top: 2rem;
+}
+.content-item{
+  margin: 1rem;
+  width: 50%;
+  background: rgba(255,255,255,0.0800);
+  border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
+  opacity: 1;
+  border: 0.0625rem solid #FFFFFF;
+  padding: 2rem;
+}
+.sub-title{
+  font-size: 1.25rem;
+  font-weight: bold;
+  color: #303133;
+  line-height: 0;
+}
+.sub-title-num{
+  font-size: 1rem;
+  font-weight: 400;
+  color: #909399;
+}
+.items{
+  /*height: calc( 100vh - 270px);*/
+  height: 60vh;
+  margin-top: 2rem;
+  list-style: none;
+  overflow-y: auto;
+  padding: 0;
+}
+.bottom{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.item-img img{
+  height: 5rem;
+}
+.item-title{
+  font-size: 20px;
+  font-weight: 400;
+  color: #606266;
+  margin-top: 0.5rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.item-container{
+  margin: 0 1rem 1rem 1rem;
+  text-align: center;
+}
+.item{
+  float: left;
+  background: rgba(255,255,255,0.2000);
+  border-radius: 4px 4px 4px 4px;
+  opacity: 1;
+  border: 2px solid #FFFFFF;
+  height: 9.5rem;
+  width: 7.5rem;
+  margin: 1rem;
+}
+.opt-icon{
+  position: relative;
+  top: -10px;
+  right: -55px;
+  background: #C0C4CC;
+  border-radius: 50%;
+  padding: 0.1rem;
+}
+.item-right {
+  overflow-y: auto;
+}
+.items-right{
+  margin-top: 2rem;
+  list-style: none;
+  overflow-y: auto;
+  padding: 0;
+}
+.opt-right{
+  background: #409EFF;
+}
+</style>
+<style lang="scss" scoped>
+.home-top{
+  height: 6rem;
+  background: #FFFFFF;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-right: 2rem;
+  margin-left: 2rem;
+  .home-top-left{
+    img{
+      height: 6rem;
+    }
+  }
+  .home-top-mid{
+    margin-right: 11.25rem;
+    img{
+      width: 31.25rem;
+    }
+  }
+  .home-top-right{
+    img{
+      height: 2.5rem;
+    }
+  }
+}
+.bottom-desc{
+  font-size: 16px;
+  font-weight: 400;
+  color: #909399;
+}
+</style>
+
+<style lang="scss" scoped>
+.home-top{
+  height: 6rem;
+  background: #FFFFFF;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-right: 2rem;
+  margin-left: 2rem;
+  .home-top-left{
+    img{
+      height: 6rem;
+    }
+  }
+  .home-top-mid{
+    margin-right: 11.25rem;
+    img{
+      width: 31.25rem;
+    }
+  }
+  .home-top-right{
+    img{
+      height: 2.5rem;
+    }
+  }
+}
+</style>