css样式 分开 设置为secoped

ruoyi-ui/src/api/bookmark/tag.js

@@ -0,0 +1,53 @@
+import request from '@/utils/request'
+
+// 查询书签_标签列表
+export function listTag(query) {
+  return request({
+    url: '/system/tag/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询书签_标签详细
+export function getTag(id) {
+  return request({
+    url: '/system/tag/' + id,
+    method: 'get'
+  })
+}
+
+// 新增书签_标签
+export function addTag(data) {
+  return request({
+    url: '/system/tag',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改书签_标签
+export function updateTag(data) {
+  return request({
+    url: '/system/tag',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除书签_标签
+export function delTag(id) {
+  return request({
+    url: '/system/tag/' + id,
+    method: 'delete'
+  })
+}
+
+// 导出书签_标签
+export function exportTag(query) {
+  return request({
+    url: '/system/tag/export',
+    method: 'get',
+    params: query
+  })
+}

ruoyi-ui/src/router/index.js

@@ -159,6 +159,13 @@ export const constantRoutes = [
         meta:{
           requireAuth: false,//加该字段,表示进入这个路由是需要登录的true
         },
+      },{
+        path: '/UserTagAll',
+        name: 'UserTagAll',
+        component: resolve => require(['../views/bookmark/common/UserTagAll.vue'], resolve),
+        meta:{
+          requireAuth: true,//加该字段,表示进入这个路由是需要登录的true
+        },
       },{
         path: '/importHtml',
         name: 'importHtml',

ruoyi-ui/src/views/bookmark/bookmark/index.vue

@@ -198,7 +198,7 @@
   </div>
 </template>
 
-<script>
+<script >
 
 
   import {
@@ -577,10 +577,6 @@
 <style scoped>
 
 
-  /**编辑标签 开始**/
-  .el-tag {
-    margin-left: 10px;
-  }
 
   .button-new-tag {
     margin-left: 10px;
@@ -656,7 +652,7 @@
     height: 70px;
     position: absolute;
     background-color: #acd7ff;
-    right: 0;
+    /*right: 0;编辑*/
     display: none;
   }
 
@@ -668,7 +664,14 @@
     align-items: center;
 
   }
-
+  .bookmark-time {
+    float: left;
+  }
+  .bookmark-hr {
+    background-color: #fff !important;
+    margin-top: 2px !important;
+    margin-bottom: 7px !important;
+  }
   .editlist div {
     margin-left: 10px;
     width: 50px;
@@ -681,6 +684,17 @@
     margin-right: 5px;
   }
 
+  .bookmark-icon {
+    float: left;
+    margin-right: 5px;
+
+  }
+
+  .bookmark-icon img {
+    width: 14px;
+    height: 14px;
+    vertical-align: middle;
+  }
   .filter-tbar {
     display: flex;
     position: relative;
@@ -748,10 +762,21 @@
   }
 
   .bookmark-list-tag {
+    display: flex;
+    justify-content: center;
+    align-items: center;
     margin-left: 4px;
-    color: #5094d5;
+    height: 18px;
-    background-color: #fff;
+    line-height: 18px;
+    margin-top: 2px;
+    border-radius: 1px;
+    color: #7794D8;
+    background-color: #FFFFFF;
     border-radius: 0px;
+    border: 1px solid #EAEAEF;
+  }
+  .bookmark-list-tag:hover{
+    color: #569cd5;
   }
 
   .listhint {
@@ -769,8 +794,76 @@
   .info-wrap{
     color: #9EABB3;
   }
+
 /**evanyou背景特效**/
 
+  .bookmark-title {
+    /*设置文本框大小*/
+    white-space: nowrap;
+    /*设置内容不换行*/
+    text-overflow: ellipsis;
+    /*设置文字超出文本框的内容显示成...*/
+    overflow: hidden;
+    /*超出部分隐藏*/
+    font-size: 17px;
+    font-weight: 600;
+  }
 
+  .description {
+    /*设置文本框大小*/
+    white-space: nowrap;
+    /*设置内容不换行*/
+    text-overflow: ellipsis;
+    /*设置文字超出文本框的内容显示成...*/
+    overflow: hidden;
+    /*超出部分隐藏*/
+    color: #545454;
+    font-size: 13px;
+  }
+  .bookmarklist {
+    width: 100%;
+    height: 600px;
+    /*background-color: #fff;*/
+    float: left
+  }
+
+
+  /**滚动条美化*/
+
+  /*滚动条的宽度*/
+
+  ::-webkit-scrollbar {
+    width:5px;
+    height:3px;
+    /*background-color: red;*/
+  }
+
+  /*外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果*/
+
+  ::-webkit-scrollbar-track {
+    width: 6px;
+    background-color:#fff;
+    -webkit-border-radius: 2em;
+    -moz-border-radius: 2em;
+    border-radius:2em;
+  }
+
+  /*滚动条的设置*/
+
+  ::-webkit-scrollbar-thumb {
+    background-color:#606d71;
+    background-clip:padding-box;
+    min-height:28px;
+    -webkit-border-radius: 2em;
+    -moz-border-radius: 2em;
+    border-radius:2em;
+
+  }
+  /*滚动条移上去的背景*/
+
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: #7c6fff;
+  }
+  /*滚动条美化结束*/
 
 </style>

ruoyi-ui/src/views/bookmark/common/ImportHtml.vue

@@ -92,7 +92,7 @@
 
 </template>
 
-<script>
+<script >
 
  import { getToken } from "@/utils/auth";
   export default {

ruoyi-ui/src/views/bookmark/common/UserTagAll.vue

@@ -1,19 +1,362 @@
 <template>
-    <div>
+  <div class="app-container" style="overflow-y: scroll;height:750px">
-        {{msg}}
+<!--    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">-->
-    </div>
+<!--      <el-form-item label="标签名字" prop="name">-->
-</template>
+<!--        <el-input-->
-<script>
+<!--          v-model="queryParams.name"-->
-    export default {
+<!--          placeholder="请输入标签名字"-->
-        name: 'areaTree',
+<!--          clearable-->
-        components: {},
+<!--          size="small"-->
+<!--          @keyup.enter.native="handleQuery"-->
+<!--        />-->
+<!--      </el-form-item>-->
+<!--      <el-form-item label="引用数量" prop="icount">-->
+<!--        <el-input-->
+<!--          v-model="queryParams.icount"-->
+<!--          placeholder="请输入引用数量"-->
+<!--          clearable-->
+<!--          size="small"-->
+<!--          @keyup.enter.native="handleQuery"-->
+<!--        />-->
+<!--      </el-form-item>-->
+<!--      <el-form-item label="谁增加的该标签" prop="userId">-->
+<!--        <el-input-->
+<!--          v-model="queryParams.userId"-->
+<!--          placeholder="请输入谁增加的该标签"-->
+<!--          clearable-->
+<!--          size="small"-->
+<!--          @keyup.enter.native="handleQuery"-->
+<!--        />-->
+<!--      </el-form-item>-->
+<!--      <el-form-item label="标签的字体颜色" prop="isFontColor">-->
+<!--        <el-input-->
+<!--          v-model="queryParams.isFontColor"-->
+<!--          placeholder="请输入标签的字体颜色"-->
+<!--          clearable-->
+<!--          size="small"-->
+<!--          @keyup.enter.native="handleQuery"-->
+<!--        />-->
+<!--      </el-form-item>-->
+<!--      <el-form-item label="标签的背景颜色" prop="isBgColor">-->
+<!--        <el-input-->
+<!--          v-model="queryParams.isBgColor"-->
+<!--          placeholder="请输入标签的背景颜色"-->
+<!--          clearable-->
+<!--          size="small"-->
+<!--          @keyup.enter.native="handleQuery"-->
+<!--        />-->
+<!--      </el-form-item>-->
+<!--      <el-form-item label="S系统标签,P用户标签" prop="tagType">-->
+<!--        <el-select v-model="queryParams.tagType" placeholder="请选择S系统标签,P用户标签" clearable size="small">-->
+<!--          <el-option label="请选择字典生成" value="" />-->
+<!--        </el-select>-->
+<!--      </el-form-item>-->
+<!--      <el-form-item label="状态 0显示默认" prop="istatus">-->
+<!--        <el-select v-model="queryParams.istatus" placeholder="请选择状态 0显示默认" clearable size="small">-->
+<!--          <el-option label="请选择字典生成" value="" />-->
+<!--        </el-select>-->
+<!--      </el-form-item>-->
+<!--      <el-form-item label="排序" prop="tagSort">-->
+<!--        <el-input-->
+<!--          v-model="queryParams.tagSort"-->
+<!--          placeholder="请输入排序"-->
+<!--          clearable-->
+<!--          size="small"-->
+<!--          @keyup.enter.native="handleQuery"-->
+<!--        />-->
+<!--      </el-form-item>-->
+<!--      <el-form-item>-->
+<!--        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>-->
+<!--        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>-->
+<!--      </el-form-item>-->
+<!--    </el-form>-->
 
-        data: function () {
+    <el-row :gutter="10" class="mb8">
-            return {}
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['system:tag:add']"
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          icon="el-icon-edit"
+          size="mini"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['system:tag:edit']"
+        >修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['system:tag:remove']"
+        >删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['system:tag:export']"
+        >导出</el-button>
+      </el-col>
+    </el-row>
+
+    <el-table v-loading="loading" :data="tagList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="标签名字"  width="155" >
+        <template slot-scope="scope">
+              <el-tag type="success" size="medium">{{ scope.row.name }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="引用数量" align="center" prop="icount" />
+      <el-table-column label="标签的字体颜色" align="center" prop="isFontColor" />
+      <el-table-column label="标签的背景颜色" align="center" prop="isBgColor" />
+      <el-table-column label="排序" align="center" prop="tagSort" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['system:tag:edit']"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['system:tag:remove']"
+          >删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改书签_标签对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="标签名字" prop="name">
+          <el-input v-model="form.name" placeholder="请输入标签名字" />
+        </el-form-item>
+        <el-form-item label="引用数量" prop="icount">
+          <el-input v-model="form.icount" placeholder="请输入引用数量" />
+        </el-form-item>
+        <el-form-item label="谁增加的该标签" prop="userId">
+          <el-input v-model="form.userId" placeholder="请输入谁增加的该标签" />
+        </el-form-item>
+        <el-form-item label="标签的字体颜色" prop="isFontColor">
+          <el-input v-model="form.isFontColor" placeholder="请输入标签的字体颜色" />
+        </el-form-item>
+        <el-form-item label="标签的背景颜色" prop="isBgColor">
+          <el-input v-model="form.isBgColor" placeholder="请输入标签的背景颜色" />
+        </el-form-item>
+        <el-form-item label="S系统标签,P用户标签">
+          <el-select v-model="form.tagType" placeholder="请选择S系统标签,P用户标签">
+            <el-option label="请选择字典生成" value="" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="状态 0显示默认">
+          <el-radio-group v-model="form.istatus">
+            <el-radio label="1">请选择字典生成</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="排序" prop="tagSort">
+          <el-input v-model="form.tagSort" placeholder="请输入排序" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  import { listTag, getTag, delTag, addTag, updateTag, exportTag } from "@/api/bookmark/tag";
+
+  export default {
+    name: "Tag",
+    data() {
+      return {
+        // 遮罩层
+        loading: true,
+        // 选中数组
+        ids: [],
+        // 非单个禁用
+        single: true,
+        // 非多个禁用
+        multiple: true,
+        // 总条数
+        total: 0,
+        // 书签_标签表格数据
+        tagList: [],
+        // 弹出层标题
+        title: "",
+        // 是否显示弹出层
+        open: false,
+        // 查询参数
+        queryParams: {
+          pageNum: 1,
+          pageSize: 10,
+          name: undefined,
+          icount: undefined,
+          userId: undefined,
+          isFontColor: undefined,
+          isBgColor: undefined,
+          tagType: undefined,
+          istatus: undefined,
+          tagSort: undefined,
         },
-        methods: {}
+        // 表单参数
+        form: {},
+        // 表单校验
+        rules: {
+        }
+      };
+    },
+    created() {
+      this.getList();
+    },
+    methods: {
+      /** 查询书签_标签列表 */
+      getList() {
+        this.loading = true;
+        listTag(this.queryParams).then(response => {
+          this.tagList = response.rows;
+          this.total = response.total;
+          this.loading = false;
+        });
+      },
+      // 取消按钮
+      cancel() {
+        this.open = false;
+        this.reset();
+      },
+      // 表单重置
+      reset() {
+        this.form = {
+          id: undefined,
+          name: undefined,
+          icount: undefined,
+          userId: undefined,
+          isFontColor: undefined,
+          isBgColor: undefined,
+          tagType: undefined,
+          istatus: "0",
+          tagSort: undefined,
+          createTime: undefined
+        };
+        this.resetForm("form");
+      },
+      /** 搜索按钮操作 */
+      handleQuery() {
+        this.queryParams.pageNum = 1;
+        this.getList();
+      },
+      /** 重置按钮操作 */
+      resetQuery() {
+        this.resetForm("queryForm");
+        this.handleQuery();
+      },
+      // 多选框选中数据
+      handleSelectionChange(selection) {
+        this.ids = selection.map(item => item.id)
+        this.single = selection.length!=1
+        this.multiple = !selection.length
+      },
+      /** 新增按钮操作 */
+      handleAdd() {
+        this.reset();
+        this.open = true;
+        this.title = "添加书签_标签";
+      },
+      /** 修改按钮操作 */
+      handleUpdate(row) {
+        this.reset();
+        const id = row.id || this.ids
+        getTag(id).then(response => {
+          this.form = response.data;
+          this.open = true;
+          this.title = "修改书签_标签";
+        });
+      },
+      /** 提交按钮 */
+      submitForm: function() {
+        this.$refs["form"].validate(valid => {
+          if (valid) {
+            if (this.form.id != undefined) {
+              updateTag(this.form).then(response => {
+                if (response.code === 200) {
+                  this.msgSuccess("修改成功");
+                  this.open = false;
+                  this.getList();
+                }
+              });
+            } else {
+              addTag(this.form).then(response => {
+                if (response.code === 200) {
+                  this.msgSuccess("新增成功");
+                  this.open = false;
+                  this.getList();
+                }
+              });
+            }
+          }
+        });
+      },
+      /** 删除按钮操作 */
+      handleDelete(row) {
+        const ids = row.id || this.ids;
+        this.$confirm('是否确认删除书签_标签编号为"' + ids + '"的数据项?', "警告", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }).then(function() {
+          return delTag(ids);
+        }).then(() => {
+          this.getList();
+          this.msgSuccess("删除成功");
+        }).catch(function() {});
+      },
+      /** 导出按钮操作 */
+      handleExport() {
+        const queryParams = this.queryParams;
+        this.$confirm('是否确认导出所有书签_标签数据项?', "警告", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }).then(function() {
+          return exportTag(queryParams);
+        }).then(response => {
+          this.download(response.msg);
+        }).catch(function() {});
+      }
     }
+  };
 </script>
-<style>
+<style scoped>
+  .app-container{
+    padding: 0px;
+  }
 
 </style>

ruoyi-ui/src/views/bookmark/index/index.vue

@@ -3,7 +3,7 @@
 
     <el-container class="box" ref="box">
       <transition name="el-zoom-in-left" >
-        <el-aside :style="asideHeight" v-show="isShowZtree" class="transition-box left"
+        <el-aside :style="asideHeight" v-show="isShowZtree" class="transition-box left isaside"
                   style="overflow-x:hidden;overflow-y: hidden;">
           <el-header class="aside-logo">
             <!--        <img src="https://s1.ax1x.com/2020/08/15/dACqUO.png"/>-->
@@ -28,7 +28,7 @@
             </div>
             <div class="reminder">工具箱</div>
             <div class="aside-title"><i class="el-icon-s-flag" style="color: red"></i><span>RSS订阅</span></div>
-            <div class="aside-title"><i class="el-icon-s-management"></i><span>标签管理</span></div>
+            <div class="aside-title" @click="goUserTagAll"><i class="el-icon-s-management"></i><span>标签管理</span></div>
             <div class="aside-title" @click="gorecycle"><i class="el-icon-delete-solid"></i><span>回收站</span></div>
             <div class="aside-title" @click="importHtml"><i class="el-icon-s-platform"></i><span>导入书签</span></div>
             <div class="aside-title"><i class="el-icon-s-comment"></i><span>意见反馈</span></div>
@@ -288,7 +288,7 @@
 </template>
 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 
-<script>
+<script >
   // 下面的是单个Vue组件引用的外部静态文件，也可以在main.js文件中引用
   import {addBookmark} from "@/api/bookmark/bookmark";
 
@@ -1327,7 +1327,8 @@
         })
 
       },
-      // 回收站
+
+      /** 回收站**/
       gorecycle() {
         var that = this;
         that.$router.push({
@@ -1336,8 +1337,15 @@
             menuId: 'RECYCLE'
           }
         })
-
       },
+      /** 用户书签**/
+      goUserTagAll() {
+        var that = this;
+        that.$router.push({
+          path: "/UserTagAll",
+        })
+      },
+
 
 
     },
@@ -1477,7 +1485,7 @@
 
   }
 
-  aside{
+  .isaside{
     padding: 0;
     margin-bottom: 0;
     /*background:url('https://ftp.bmp.ovh/imgs/2020/08/4ac1d6b4f41049ef.jpg') no-repeat;*/
@@ -1597,13 +1605,6 @@
   }
 
   .filter {
-    /*width: 100%;*/
-    /*height: 30px;*/
-    /*position: relative;*/
-    /*margin-top: 0;*/
-    /*background-color: #ffffff;*/
-    /*margin-bottom: 5px;*/
-
     display: flex;
     flex-wrap: wrap;
   }
@@ -1673,9 +1674,6 @@
     margin-top: 6px;
   }
 
-  .margintop {
-    margin-left: 10px;
-  }
 
 
   .sousou-input {
@@ -1720,71 +1718,29 @@
     margin-right: 5px;
   }
 
-  .bookmark-title {
-    /*设置文本框大小*/
-    white-space: nowrap;
-    /*设置内容不换行*/
-    text-overflow: ellipsis;
-    /*设置文字超出文本框的内容显示成...*/
-    overflow: hidden;
-    /*超出部分隐藏*/
-    font-size: 17px;
-    font-weight: 600;
-  }
 
-  .description {
-    /*设置文本框大小*/
-    white-space: nowrap;
-    /*设置内容不换行*/
-    text-overflow: ellipsis;
-    /*设置文字超出文本框的内容显示成...*/
-    overflow: hidden;
-    /*超出部分隐藏*/
-    color: #545454;
-    font-size: 13px;
-  }
 
   .bookmark {
     height: 65px;
   }
 
-  .bookmark-icon {
-    float: left;
-    margin-right: 5px;
 
-  }
-
-  .bookmark-icon img {
-    width: 14px;
-    height: 14px;
-    vertical-align: middle;
-  }
 
 
   .bookmark-official {
     float: left;
   }
 
-  .info {
+  /*.info {*/
-    font-size: 12px;
+  /*  font-size: 12px;*/
+
+  /*}*/
+
+
 
-  }
-
-  .info-wrap {
-    color: #8c8c8c;
-  }
-
-  .bookmark-time {
-    float: left;
 
 
-  }
 
-  .bookmark-hr {
-    background-color: #fff !important;
-    margin-top: 2px !important;
-    margin-bottom: 7px !important;
-  }
 
   .sousouleft-switch {
 
@@ -1829,22 +1785,8 @@
     color: #000 !important;
   }
 
-  .announcement {
-    margin-top: 20px;
-    width: 24%;
-    height: 400px;
-    /*background-color: #ff5f85;*/
-    float: left;
-    border-left: #8c8c8c 1px solid;
-    margin-left: 10px;
-  }
 
-  .bookmarklist {
+
-    width: 100%;
-    height: 600px;
-    /*background-color: #fff;*/
-    float: left
-  }
 
   .sousouright-icon {
     margin-right: 24px;
@@ -2032,6 +1974,7 @@
     user-select:none; /* CSS3属性 */
   }
 
+  /* 拖拽相关样式 结束 */
   #evanyou{
     position:fixed;
     width:100%;

ruoyi-ui/src/views/bookmark/menu/index.vue

@@ -158,7 +158,7 @@
 
   }
 </script>
-<style >
+<style scoped>
   body{
     font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
     /*background-image: url("https://s1.ax1x.com/2020/08/11/aOHstP.jpg");*/