gengx

src/assets/images/DeleteButton.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80" zoomAndPan="magnify" viewBox="0 0 60 30.000001" height="40" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><filter x="0%" y="0%" width="100%" height="100%" id="be9ed5facf"><feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0" color-interpolation-filters="sRGB"/></filter><filter x="0%" y="0%" width="100%" height="100%" id="433f37944a"><feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.2126 0.7152 0.0722 0 0" color-interpolation-filters="sRGB"/></filter><g/><clipPath id="8c0991ba84"><path d="M 1 3.230469 L 57.683594 3.230469 L 57.683594 25.914062 L 1 25.914062 Z M 1 3.230469 " clip-rule="nonzero"/></clipPath><image x="0" y="0" width="81" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAAAgCAAAAABPmsuOAAAAAmJLR0QA/4ePzL8AAAKJSURBVEiJrZbfS1NhGMe/O2xtbtOKLpIaWwpdyBZsQdiCQOkmRv+DQtgPIqFgkKhd2A+9Kza6iNFFN22sCFuNugjUZA3pZlQyHlAo2SQIkY6by6Y+XWzzPcdUfF3fm3Oe73nfDw+c932ex4ANWTva2xyN+yCpP0u57NT48kZsqL24ei40yMKESm8i3/VE8/VuEybHv+aWVmRh5kaHp+Msyk9D2q3OUaLh1r2niNZholGXiN0pip2sgwcAvhil3LXAlaawpU4gYA5Tupql5RWFtJ8OXH2Z/ZlPP+yUZYYoUUksSDGzxr+2wFUlj0tmGaUgADinyaexoyxUPi+H9NG0C8BdGtGYL1inU3LIYboH2DKkOTZX9ED+ZZQitlDGhgBFhNOwzszxB8zM/O1WiZmH5JKMUEDxY0IY3QYAszcGACweG1kDcPOQFHECfsTJK4z3zMx8B328bDbkmJm5S4ropbjRiTlhtAEABjCIxNp8MwDAvdXGbTUHp9GOgjD2Vx4DSj+4ah2UIhZgV3RGtXqoz60IV61VKSIApQC7iOYBAAuHM7Ph3v6KlZPC2VHQ/5nHzMyfFeSZh3BxhZn5jBTRS3GF4NEQAeCZKX8EGAw+KQD49FGK6AHpTzg+MHNxvXJfSszMfikgIhSALUMtwmnedAsj22/eSi2UsSnFJC4L68c53Yp3PXLES0gW/6lmp2dEho/keLVqhiBFtRXXeHtGVVVVXXwrW8RrFReWhL4r7FkhSlRbvitNYfPOi3chTecC3CmK+nZavQv5opruCrgS9U4A94kSlQxrU0pvlwmTY1/yalkWZmo6eqJTM6X8p0nq9+vNkxQAWDvb2xxNcq0KwKqay06NiWnvL72xRVTe8FxnAAAAAElFTkSuQmCC" id="d2864536fd" height="32" preserveAspectRatio="xMidYMid meet"/><mask id="f97e95528b"><g filter="url(#be9ed5facf)"><g filter="url(#433f37944a)" transform="matrix(0.700172, 0, 0, 0.708924, 0.967741, 3.230268)"><image x="0" y="0" width="81" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAAAgCAAAAABPmsuOAAAAAmJLR0QA/4ePzL8AAAKJSURBVEiJrZbfS1NhGMe/O2xtbtOKLpIaWwpdyBZsQdiCQOkmRv+DQtgPIqFgkKhd2A+9Kza6iNFFN22sCFuNugjUZA3pZlQyHlAo2SQIkY6by6Y+XWzzPcdUfF3fm3Oe73nfDw+c932ex4ANWTva2xyN+yCpP0u57NT48kZsqL24ei40yMKESm8i3/VE8/VuEybHv+aWVmRh5kaHp+Msyk9D2q3OUaLh1r2niNZholGXiN0pip2sgwcAvhil3LXAlaawpU4gYA5Tupql5RWFtJ8OXH2Z/ZlPP+yUZYYoUUksSDGzxr+2wFUlj0tmGaUgADinyaexoyxUPi+H9NG0C8BdGtGYL1inU3LIYboH2DKkOTZX9ED+ZZQitlDGhgBFhNOwzszxB8zM/O1WiZmH5JKMUEDxY0IY3QYAszcGACweG1kDcPOQFHECfsTJK4z3zMx8B328bDbkmJm5S4ropbjRiTlhtAEABjCIxNp8MwDAvdXGbTUHp9GOgjD2Vx4DSj+4ah2UIhZgV3RGtXqoz60IV61VKSIApQC7iOYBAAuHM7Ph3v6KlZPC2VHQ/5nHzMyfFeSZh3BxhZn5jBTRS3GF4NEQAeCZKX8EGAw+KQD49FGK6AHpTzg+MHNxvXJfSszMfikgIhSALUMtwmnedAsj22/eSi2UsSnFJC4L68c53Yp3PXLES0gW/6lmp2dEho/keLVqhiBFtRXXeHtGVVVVXXwrW8RrFReWhL4r7FkhSlRbvitNYfPOi3chTecC3CmK+nZavQv5opruCrgS9U4A94kSlQxrU0pvlwmTY1/yalkWZmo6eqJTM6X8p0nq9+vNkxQAWDvb2xxNcq0KwKqay06NiWnvL72xRVTe8FxnAAAAAElFTkSuQmCC" height="32" preserveAspectRatio="xMidYMid meet"/></g></g></mask><image x="0" y="0" width="81" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAAAgCAIAAADlkwMFAAAABmJLR0QA/wD/AP+gvaeTAAAFF0lEQVRYhd1ZTW8bVRQ9586MO3bclm4rFalQV/wAfkC32VZCSpwGZcWPYoXUlKaKxJIsu67EHoSbsACxQy6QeJzMvHtYvLHrxOPQlhIbzi7P707ueffdz0c04ajfF8Akydvt4vjYSZMEQALZKLJMSCAJRD3b3e64KBQCgY++/np++0UCg/V15DnT1LLMSblzBUleCkk0M8nLUlWF8bh3cDC7wWb/ONzeZreL8RhZ5gAkkgQkORAkDYcqyytl8HdQWWo4DJJHtgBJSA4gTTEec23tqN+fFXltw8HmJs1ophDqz5GSGC81gLJECJw7tuVisL6uPEeSIMsiGZEko9oADIjH0Xv6NK7UnI/6fZcE0AyRpBnco9z9Jq9YTfzY7wOgBIlmABA9FDAyujcB/LSz42XJeB8AAEmrFapKQG93d/67P+3sKAS5Kx7KnMffW/YZDTY2UJYYjXjrVlwxAGZM07tffWUAvKosyzxeBhLuHkKSpo2EB1tboaqYJJjsnw9xL/v9w/MudMXo7e1hNEKe6/Q0JhoBTFOvKgA83N6GpBDq34ZDtNu9b75p/NbLfj8aFtIl0TyGPQD3Ji60LAwePkRR1NaWaEbJFFNuJOyOTgdF0SwfkzbASwkjBjwA5OHW1nul8PYoCnQ6co/6UBJgQYpLtQGzrDEsH25tvV2aJkmejEbPHzz455q/M3oHB8gymYkE4EAF2Nhsyllkb29vXvLnzz5jCHzL6kTSb8PhjevX34/674re3p7MgllUaZwk1g0hcpkmtHkEsywEzWyYeuwFXPjIndu3W9euff/55++NwTtBpIUAgGQ3BIs6RgKL8rCTZ1l2YSWKzS5mr16lf/45excIpJ2OuWOp+OTxY0qaFFc2rV1ssZ3d7MJvlEiK1OS+azj88Ntvy+vXZ3cKyEJYhXrdpKgqgTQmnnZZjt++l4g3XCTcfykKbm2h6eCWbmcA7t4O4TTLMO0Rfwd8sZ0x33/NrBsZ3O/cvt1IuHnxyuHS7wAASfY3e1FvXGQpB9qdTivLLuurV4P2FBaD9k3AFiutBVE9abUSs9HJiburMY5jVQgbeRMAQLLuooosM1ts80mhNouP79+3EOQev0AsSF/SKtA2syKmHqkOyJT8kstJ6vyJUHr54kU56bTrRTTQ1mqMWXzSUb/OVTHx/LC93SxBMoRZc4mctmnntp2v1epOo6m2u0r8sL2tiWoE7DhJomaeJFyQVHq7u3RPqupKNX1/oORJAkDScZJYPpnyJSFQGmxsNIqZu0975jf6PwRAsrf0dnJjg+6Je9QnD8ESgEmC2CS6oywH6+vzknf393W+8LoEcQoHcvkDk/V1lCXdozMbkAJWD8Bi7DXDaIR2u1H+3tOnIIvR6Odff13YkLAOZCTvPXnyb1F5c7TbGI3qwZgEd8ZYe/jokaWpn53FFlrjMdznx8IRzx88uNntplnWyfNL6pCVsHCew4x5Hqc6rbKszO4+e1bPAFVV8NcRTMMhOh1kWWM7vfponAHSPQ3hzv7+4lmvOybe+9+a9dZ+d/msN2KwuUnS4sAEwGSmbzHWm52laZUkZZp++uWXS2CzAN998UVWVWkIraoyd5EOJDOdIxfN9COO+n0/O9PJCT/4YOqrddEinWbZSZ53iyI9X34tF1WSHLfba+PxtbLUZKxbQ9KrV1xbs1Zr9rHuf/hGByA2yYve6Jr5nHuL/eMPmXFyW1YWUUO6t2/cOC0KX/wW+xe27uxowEbnmAAAAABJRU5ErkJggg==" id="cf9e71ecef" height="32" preserveLine truncated

src/assets/images/EditButton.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80" zoomAndPan="magnify" viewBox="0 0 60 30.000001" height="40" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><filter x="0%" y="0%" width="100%" height="100%" id="14488328da"><feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0" color-interpolation-filters="sRGB"/></filter><filter x="0%" y="0%" width="100%" height="100%" id="658f38dfac"><feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.2126 0.7152 0.0722 0 0" color-interpolation-filters="sRGB"/></filter><g/><clipPath id="efa149595d"><path d="M 1 3.121094 L 57 3.121094 L 57 25.59375 L 1 25.59375 Z M 1 3.121094 " clip-rule="nonzero"/></clipPath><image x="0" y="0" width="81" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAAAgCAAAAABPmsuOAAAAAmJLR0QA/4ePzL8AAAJkSURBVEiJrZbNaxNRFMVPh8mHSVoQ3RkypptQE8FxYaxY2/ixsAj+AYIUJEEXuihk505pXSc704WCkqy0De3KRRtCGApCQk2sl25qGkWCCE3TqEnNc5FkZjJR6Us8q/vOm/lxBoZ77xBU2ab8Y85hMzhV3yttrq/V1PNQp5CCN47wwjR9X4597CZa7s+YkF7Ll/Z+8sIsw07f1AQazyP6V12LRPOj/UfE6DzRoqSdvRlKnB2ABwBygjLezkFSKGodEAhYoqS0U1qXKKJd3N6qtHTt6IbMx4xQshUsTAmL6sqso5tgzSt8KeMUBgBXgXRZUirxEhhjd7iQMhUkCAiJr7Oa6Ver4wCwwEXMvhJDgD1H+t/mq5pxA8cuB/g+G27K2TFNMb1XVonshVMURT4iYjQtjCP1l9tbO41GnZOYwrjgQd7gftvR6iYnMQ+P4ELR4MonFbWugU9FuAQHqgb3TPNC9o+PH0JVOIRed+kqzr/vFwkIVTiM3puLdX+uP5wDVaEIV4+fPle93h/RhaJA8PX4W2XM9kf0gQQFk0a74Nl+HO6POAkF9hy5dVaZsQ82PGSsUa/Xf7EKH9BNObuwv4KQznMAp2qzj/DZZDabX/JGDGJlH5C6utk2Y08ijLHdu8Fg8C1jXECZChIAhCmuddx7rEtfeICdjgtrUj8VFnYrmvJc8yxCyfbIlxSKWv798GESapML8GYozjmleiTHddMVkJJEc4NsAO45omQrYWdLeTAjIr367lOlwQszjZw4HZjAwbP2lvKfNqkfy08NmxQA2AL+MecI72TBQaW0ub6qtebf7pAROcO4m2gAAAAASUVORK5CYII=" id="965b0b6a1a" height="32" preserveAspectRatio="xMidYMid meet"/><mask id="396ea1dc73"><g filter="url(#14488328da)"><g filter="url(#658f38dfac)" transform="matrix(0.693538, 0, 0, 0.702207, 0.967741, 3.122781)"><image x="0" y="0" width="81" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAAAgCAAAAABPmsuOAAAAAmJLR0QA/4ePzL8AAAJkSURBVEiJrZbNaxNRFMVPh8mHSVoQ3RkypptQE8FxYaxY2/ixsAj+AYIUJEEXuihk505pXSc704WCkqy0De3KRRtCGApCQk2sl25qGkWCCE3TqEnNc5FkZjJR6Us8q/vOm/lxBoZ77xBU2ab8Y85hMzhV3yttrq/V1PNQp5CCN47wwjR9X4597CZa7s+YkF7Ll/Z+8sIsw07f1AQazyP6V12LRPOj/UfE6DzRoqSdvRlKnB2ABwBygjLezkFSKGodEAhYoqS0U1qXKKJd3N6qtHTt6IbMx4xQshUsTAmL6sqso5tgzSt8KeMUBgBXgXRZUirxEhhjd7iQMhUkCAiJr7Oa6Ver4wCwwEXMvhJDgD1H+t/mq5pxA8cuB/g+G27K2TFNMb1XVonshVMURT4iYjQtjCP1l9tbO41GnZOYwrjgQd7gftvR6iYnMQ+P4ELR4MonFbWugU9FuAQHqgb3TPNC9o+PH0JVOIRed+kqzr/vFwkIVTiM3puLdX+uP5wDVaEIV4+fPle93h/RhaJA8PX4W2XM9kf0gQQFk0a74Nl+HO6POAkF9hy5dVaZsQ82PGSsUa/Xf7EKH9BNObuwv4KQznMAp2qzj/DZZDabX/JGDGJlH5C6utk2Y08ijLHdu8Fg8C1jXECZChIAhCmuddx7rEtfeICdjgtrUj8VFnYrmvJc8yxCyfbIlxSKWv798GESapML8GYozjmleiTHddMVkJJEc4NsAO45omQrYWdLeTAjIr367lOlwQszjZw4HZjAwbP2lvKfNqkfy08NmxQA2AL+MecI72TBQaW0ub6qtebf7pAROcO4m2gAAAAASUVORK5CYII=" height="32" preserveAspectRatio="xMidYMid meet"/></g></g></mask><image x="0" y="0" width="81" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAAAgCAIAAADlkwMFAAAABmJLR0QA/wD/AP+gvaeTAAAEwklEQVRYhdVZy24cRRQ951Z194wNNsoy4jPYYAchxC579kjOw174a7JIMETiK7wjKErsFRL8BCyQUBQjz0xXV93DoseJ7fgZY8/4aKTpblXdrtu36twXcRLWdsYESLJuOGlhkgjoxMFzA5KCU4NGqZUk4Pnq8IRxx+43t5UHXQleogIA6MMxcw8BLEDMtGyxrZ7cP6KCHb559GrUDVOcVKo8TJ9RBAGhIHXN2wHzkSkzB7M1bwdInVAIiOiNFAAFj22VFtLazvjIlHdXD1+3gFOSgf1zIYiFEkV36wIzY26OfbbZYnNbObaK8qrIjGK/5gMN5CAFwn681/RTpqtf2xmbABjpU2HmKKRo4NOvBjevzMdh49XEIVA0uaZbUjLAndPjTQDf/6oQE8xjT1NUaocxJot568vFwxIf7451GpEJhB9cGalnK4unDL12rO/uM8U4qtvPxhAJZABuJdc/f0MDEKwruQ6QAEHoQghdzvUxhdd39yHxtH1NAMHUiYGUxMe741OGXjuerSzGUZ0HnbVBkIBAlVwH6wDw0auRw4wOEkDzdpCb7um39YeCHu+MyPcb5kMQJpVeDgkJFH64d4K3uDFs/JJiW7XLEwCQigwmA2FwGAEYPS+k2FYnzhdwhsIAAH9HEL3CM3fosa3yQrKepIwwEbBSDEYIAuWmOp9Oy+fRtUS+V1OcvWt/cp+qszshQAiACi1Nmp65ogPgVYin17iKnQMQSAx99s782cqinF76O6VxExcW296XOWW6ql0Itoqfp6lvexPTFQX+L5DAaYzFhcXWnAJAQNTV/bAAK/yrnvS/mZ/nHj99PSSn9nQq9pGlo1zHyybm5w+6EQgugAgEDRQAZ0nVZc6e6+7KrQnOAKTKnAUAKOv9yd7SUqrixUWI9vfvLT8Js6fmiyFVcW9pCQCEj+RVUl2LbuxvlptbovV7WL/ipb29usuXmklX7Hx5L8V2MP/Wrru8tLcHAIT1Gacp1N3l+cYYUbxuY3W573XzqDu3aRGEURABQ/jISJEUPOc455Ujwgj2SZT1cYgAiQ9eXi4T2loZ/DOgRJyaYc4FHrwcS9Oo2EQb7U9jz4OM6MJoBt/9ke6M5lrbHjToIPYc7TdWD9uegSyApvXd/YtIubsyCJbujMqhlAJSH8nPF9Z390mFaa7IetgagwoAAoSZmOLm9vnL/nO3zeOiQ3TNgyIagEtumGvE5raYopkkgCgAg6yPwuAC4LI4qnPTnS6EB3/iUf8kTnNHAoeO94ytnpsujupp2u+qQAH2fHUIt9QN+yB0sjyWaeNFOsnaFHSJ1Mt8hm57c1sbL5JMk+UxAFCLNgyw56tDA1C8CjEVkQBBb0qcVHkhHTvbW6uDvtJ9MdsJ6r3DDLC+u58XUpxU3hSCBIo4VqpZ4Yxar9ElUqRuU633wcsxDaTs7Fpvj4evW8FFBGraDiCssFBuMIpmJNyarS/mhaIAPPpN5q0EubtIhwpCdUApVNEpNf0eazvj2Fk9qtulcV8kQ1/Wcihaw7YLnyIlaF6yYgCgoa6r8m+rhtlhB+eJgKvZG6aFlCs/3Kw7qUfXdB49394enQSe1aM7WZ/DvVi0LSSRhnltyBIUHKQEEs05vdj/AEKZkNcZzqScAAAAAElFTkSuQmCC" id="9f32076e55" height="32" preserveAspectRatio="xMidYMid meet"/></defs><g clip-path="url(#efa149595d)"><g mask="url(#396ea1dc73)"><g transform="matrix(0.693538, 0, 0, 0.702207, 0.967741, 3.122781)"><image x="0" y="0" width="81" xlink:href="data:image/png;base64,iLine truncated

src/assets/styles/element-variables.scss

@@ -84,6 +84,43 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
   background-color: #e8e8e8;
   box-shadow: -5px 5px 5px 5px #eaeaea;
 }
+//main-container结构下的标头格式
+.HeadLine{
+  font-size:20px;
+  display:flex;
+  flex-direction:row;
+  flex-wrap:nowrap;
+  align-items: center;
+}
+//main-container结构下的标头字体格式
+.TitleFont{
+  margin-left:10px;
+  font-weight:600;
+}
+//main-container结构下的标头矩形图案样式
+.HeadSquare{
+  width:2.5px;
+  height:23px;
+  margin-left:5px;
+  margin-top:3px;
+  background-color: #59a2a3;
+}
+//按钮格子的位置调整：
+.ButtonBlock{
+  display: flex;
+  flex-wrap:nowrap;
+  flex-direction:row;
+  justify-content:space-around;
+}
+//按钮特效：
+.MyButton{
+
+}
+.MyButton:hover{
+  transform:scale(1.08);
+  cursor: pointer;
+}
+
 .backbutton :hover{
   color: #789be5!important;
 }

src/components/System/Manage/articleManage.vue

@@ -1,13 +1,275 @@
 <template>
-    <div>文章管理</div>
+    <div>
+        <div class="HeadLine">
+            <div class="HeadSquare"></div>
+            <div class="TitleFont">文章管理</div>
+        </div>
+        <div style="height:50px;width:100%;"></div>
+
+        <el-card  shadow="always" class="card_style">
+            <el-table v-model="List" :data="List" :header-row-style="{height:'20px'}"  :cell-style="{padding:'2px'}" border>
+                <el-table-column label="文章id" key="articleId" prop="articleId" width="100" align="center" />
+                <el-table-column label="文章标题" key="articleTitle" prop="articleTitle" width="200" align="center" :show-overflow-tooltip="true"/>
+                <el-table-column label="发布者id" key="userId" prop="userId" width="100" align="center" />
+                <el-table-column label="阅读量" key="readCount" prop="readCount" width="100" align="center" :show-overflow-tooltip="true"/>
+                <el-table-column label="发布时间" key="publishTime" prop="publishTime" width="100" align="center" />
+                <el-table-column label="文章图标" key="articleIco" prop="articleIco" width="150" align="center" :show-overflow-tooltip="true"/>
+                <el-table-column label="文章内容" key="articleContent" prop="articleContent" width="250" align="center">
+                    <template slot-scope="scope">
+                        <el-tooltip  placement="top" width="150"
+                                     trigger="hover"
+                                     effect="dark" close-delay="2000">
+                            <div class="MyPopover" slot="content">{{scope.row.articleContent}}</div>
+                            <div>
+                                <span>{{ scope.row.articleContent.substr(0,12)}}</span>
+                                <span v-if="(scope.row.articleContent).length > 12">...</span>
+                            </div>
+                        </el-tooltip>
+                    </template>
+                </el-table-column>
+                <el-table-column label="是否有效" key="isValid" prop="isValid"  align="center">
+                    <template slot-scope="scope">
+                        <el-switch
+                            v-model="scope.row.isValid"
+                            :active-value="1"
+                            :inactive-value="0"
+                            active-color="#13ce66"
+                            inactive-color="#ff4949"
+                        >
+                        </el-switch>
+                    </template>
+                </el-table-column>
+                <el-table-column width="150" label="操作" fixed="right" align="center">
+                    <template slot-scope="scope">
+                        <div class="ButtonBlock">
+                            <img class="MyButton" @click="handleEdit(scope.row)"
+                                 src="../../../assets/images/EditButton.svg" style="width:60px">
+                            <img class="MyButton" @click="handleDelete(scope.row)"
+                                 src="../../../assets/images/DeleteButton.svg" style="width:60px">
+                        </div>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </el-card>
+
+
+        <el-dialog title="编辑" :visible.sync="dialogVisible" width="26%"
+                   append-to-body
+                   :close-on-click-modal="false"
+                   :before-close="closeDialog"
+        >
+            <el-form ref="ruleForm" class="login_container" :model="form" status-icon  label-width="100px">
+                <el-form-item label="文章ID" prop="articleId">
+                    <el-input v-model="form.articleId"  placeholder='ID' clearable disabled></el-input>
+                </el-form-item>
+                <el-form-item label="发布用户ID" prop="userId">
+                    <el-input v-model="form.userId"  disabled></el-input>
+                </el-form-item>
+                <el-form-item label="文章标题" prop="articleTitle" >
+                    <el-input v-model="form.articleTitle"  placeholder='标题' clearable :disabled="isEdit"></el-input>
+                </el-form-item>
+                <el-form-item label="文章内容" prop="articleContent" >
+                    <el-input v-model="form.articleContent"
+                              type="textarea"
+                              rows="10"
+                              placeholder='文章内容'
+                              :disabled="isEdit"
+                              clearable></el-input>
+                </el-form-item>
+                <el-form-item label="阅读量" prop="readCount" >
+                    <el-input v-model="form.readCount"  placeholder='阅读量' :disabled="isEdit" clearable></el-input>
+                </el-form-item>
+                <el-form-item label="文章图标" prop="articleIco" >
+                    <el-input v-model="form.articleIco"  placeholder='图标' :disabled="isEdit" clearable></el-input>
+                </el-form-item>
+                <el-form-item label="是否有效" prop="isValid">
+                    <el-radio-group v-model="form.isValid" :disabled="isEdit">
+                        <el-radio :label="1">有效</el-radio>
+                        <el-radio :label="0">无效</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+
+                <el-form-item>
+                    <div style="display: flex;flex-direction: row;align-items: center;flex-wrap: nowrap;justify-content: space-between">
+                        <el-button @click="editForm()">编辑</el-button>
+                        <el-button @click="submit('ruleForm')" type="primary" style=";margin-top:10px">提交</el-button>
+                    </div>
+                </el-form-item>
+            </el-form>
+        </el-dialog>
+
+    </div>
 </template>
 
 <script>
+import axios from "axios";
+import Vue from "vue";
+
 export default {
-    name: "articleManage"
+    name: "articleManage",
+    data(){
+        return{
+            isEdit:true,
+            List:[],
+            dialogVisible:false,
+            form:{
+                articleId:'',
+                userId: '',
+                articleContent: '',
+                articleTitle: '',
+                articleIco: '',
+                readCount: '',
+                isValid: '',
+            }
+        }
+    },
+    mounted() {
+        this.GetData();
+    },
+    methods:{
+        GetData(){
+            var that = this;
+            axios({
+                method:'post',
+                url:'http://localhost:8082/helloGithub_war_exploded/selectAllArticleByadmin',
+                params:{
+                }
+            }).then(function(res){
+                that.List = res.data;
+            })
+            // /selectAllArticleByadmin
+        },
+        closeDialog() {
+            // 先重置
+            this.GetData();
+            // 后关闭
+            this.dialogVisible = false;
+            this.isEdit=true;
+        },
+        editForm(){
+            this.isEdit=false;
+        },
+        resetForm(formName) {
+            this.$refs[formName].resetFields();
+        },
+        openDialog(){
+            this.dialogVisible=true;
+        },
+        handleEdit(index) {
+            this.openDialog();
+            // 深拷贝
+            this.form = index;
+        },
+        handleDelete(index) {
+            var that=this;
+            this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                axios({
+                    method: 'post',
+                    // 请求的地址
+                    url: 'http://localhost:8082/helloGithub_war_exploded/deleteArticleByAdmin',
+                    // URL 中的查询参数
+                    params: {
+                        articleId: index.articleId,
+                    }
+                }).then(function (res) {
+                    if (res.data.code === 500) {
+                        Vue.prototype.$notify.error({
+                            title: '错误',
+                            message: res.data.msg,
+                            offset: 50
+                        });
+                    } else {
+                        Vue.prototype.$notify({
+                            title: '成功',
+                            message: ('i', {style: 'color: teal'}, "删除成功"),
+                            type: 'success',
+                            offset: 50
+                        });
+                        that.GetData();
+                    }
+
+                });
+            }).catch(() => {
+                // 点击取消:不删除了
+                this.$message({
+                    type: 'info',
+                    message: '已取消删除'
+                });
+            });
+        },
+        submit() {
+            var _this = this;
+            //调用方法提交
+            axios({
+                method: 'post',
+                // 请求的地址
+                url: 'http://localhost:8082/helloGithub_war_exploded/updateArticleByAdmin',
+                // URL 中的查询参数
+                params: {
+                    articleId: this.form.articleId,
+                    userId: this.form.userId,
+                    articleContent: this.form.articleContent,
+                    articleTitle: this.form.articleTitle,
+                    articleIco: this.form.articleIco,
+                    readCount: this.form.readCount,
+                    isValid: this.form.isValid,
+                }
+            }).then(function (res) {
+                if (res.data.code === 500) {
+                    Vue.prototype.$notify.error({
+                        title: '错误',
+                        message: res.data.msg,
+                        offset: 50
+                    });
+
+                } else {
+                    _this.isEdit=true;
+                    _this.dialogVisible = false;
+                    _this.GetData();
+                    Vue.prototype.$notify({
+                        title: '成功',
+                        message: ('i', {style: 'color: teal'}, "更新成功！"),
+                        type: 'success',
+                        offset: 50
+                    });
+                }
+            });
+        },
+
+
+    }
 }
 </script>
+<style>
+.MyPopover{
+    max-width:200px;
+    max-height:100px;
+    overflow: auto;
+}
+.MyPopover::-webkit-scrollbar {
+    width: 10px;
+    background-color: #ffce9a;
+    border-radius: 5px;
+}
+.MyPopover::-webkit-scrollbar-thumb {
+    background-color: #676767;
+    border-radius: 5px;
+}
+</style>
 
-<style scoped>
 
+<style scoped lang="scss">
+.formData{
+    border:3px solid gray;
+}
+
+.el-tooltip__popper{
+    effect:"light";
+    max-width: 250px;
+//overflow: clip;
+}
 </style>

src/components/System/Manage/categoryManage.vue

@@ -1,11 +1,222 @@
 <template>
-  <div>标签管理</div>
+  <div>
+      <div class="HeadLine">
+          <div class="HeadSquare"></div>
+          <div class="TitleFont">标签管理</div>
+      </div>
+      <div style="height:50px;width:100%;"></div>
+
+      <el-card  style="width:1000px;margin-left:200px;" shadow="always" class="card_style">
+          <div style="width:900px;margin-left:30px;">
+              <el-table width="400" v-model="List" :data="List" :header-row-style="{height:'20px'}"  :cell-style="{padding:'2px'}" border>
+                  <el-table-column label="标签名" key="categoryName" prop="categoryName" width="200" align="center" :show-overflow-tooltip="true"/>
+                  <el-table-column label="标签id" key="categoryId" prop="categoryId" width="100" align="center" />
+                  <el-table-column label="标签图标" key="category" prop="category" align="center" :show-overflow-tooltip="true"/>
+                  <el-table-column label="是否有效" key="isValid" prop="isValid"  align="center">
+                      <template slot-scope="scope">
+                          <el-switch
+                                  v-model="scope.row.isValid"
+                                  :active-value="1"
+                                  :inactive-value="0"
+                                  active-color="#13ce66"
+                                  inactive-color="#ff4949"
+                          >
+                          </el-switch>
+                      </template>
+                  </el-table-column>
+                  <el-table-column width="150" label="操作" fixed="right" align="center">
+                      <template slot-scope="scope">
+                          <div class="ButtonBlock">
+                              <img class="MyButton" @click="handleEdit(scope.row)"
+                                   src="../../../assets/images/EditButton.svg" style="width:60px">
+                              <img class="MyButton" @click="handleDelete(scope.row)"
+                                   src="../../../assets/images/DeleteButton.svg" style="width:60px">
+                          </div>
+                      </template>
+                  </el-table-column>
+              </el-table>
+
+              <el-dialog title="编辑" :visible.sync="dialogVisible" width="26%"
+                         append-to-body
+                         :close-on-click-modal="false"
+                         :before-close="closeDialog"
+              >
+                  <el-form ref="ruleForm" class="login_container" :model="form" status-icon  label-width="100px">
+                      <el-form-item label="标签名" prop="categoryName">
+                          <el-input v-model="form.categoryName"  placeholder='标签名' :disabled="isEdit" clearable></el-input>
+                      </el-form-item>
+                      <el-form-item label="标签id" prop="categoryId">
+                          <el-input v-model="form.categoryId" placeholder='ID' :disabled="isEdit" ></el-input>
+                      </el-form-item>
+                      <el-form-item label="标签图标" prop="category" >
+                          <el-input v-model="form.category"  placeholder='标签图标' clearable :disabled="isEdit"></el-input>
+                      </el-form-item>
+                      <el-form-item label="是否有效" prop="isValid">
+                          <el-radio-group v-model="form.isValid" :disabled="isEdit">
+                              <el-radio :label="1">有效</el-radio>
+                              <el-radio :label="0">无效</el-radio>
+                          </el-radio-group>
+                      </el-form-item>
+
+                      <el-form-item>
+                          <div style="display: flex;flex-direction: row;align-items: center;flex-wrap: nowrap;justify-content: space-between">
+                              <el-button @click="editForm()">编辑</el-button>
+                              <el-button @click="submit('ruleForm')" type="primary" style=";margin-top:10px">提交</el-button>
+                          </div>
+                      </el-form-item>
+                  </el-form>
+              </el-dialog>
+
+          </div>
+
+
+
+      </el-card>
+
+
+
+  </div>
 </template>
 
 <script>
+import axios from "axios";
+import Vue from "vue";
+
 export default {
-    name: "categoryManage"
+    name: "categoryManage",
+    data(){
+        return{
+            isEdit:true,
+            List:[],
+            dialogVisible:false,
+            form:{
+                articleId:'',
+                userId: '',
+                articleContent: '',
+                articleTitle: '',
+                articleIco: '',
+                readCount: '',
+                isValid: '',
+            }
+        }
+    },
+    mounted() {
+        this.GetData();
+    },
+    methods:{
+        GetData(){
+            var that = this;
+            axios({
+                method:'post',
+                url:'http://localhost:8082/helloGithub_war_exploded/selectAllCategoryByAdmin',
+                params:{
+                }
+            }).then(function(res){
+                that.List = res.data;
+                console.log(that.List);
+            })
+            // /selectAllArticleByadmin
+        },
+        closeDialog() {
+            // 先重置
+            this.GetData();
+            // 后关闭
+            this.dialogVisible = false;
+            this.isEdit=true;
+        },
+        editForm(){
+            this.isEdit=false;
+        },
+        resetForm(formName) {
+            this.$refs[formName].resetFields();
+        },
+        openDialog(){
+            this.dialogVisible=true;
+        },
+        handleEdit(index) {
+            this.openDialog();
+            // 深拷贝
+            this.form = index;
+        },
+        handleDelete(index) {
+            var that=this;
+            this.$confirm('此操作将永久删除该标签, 是否继续?', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                axios({
+                    method: 'post',
+                    // 请求的地址
+                    url: 'http://localhost:8082/helloGithub_war_exploded/deleteCategoryByAdmin',
+                    // URL 中的查询参数
+                    params: {
+                        categoryId: index.categoryId,
+                    }
+                }).then(function (res) {
+                    if (res.data.code === 500) {
+                        Vue.prototype.$notify.error({
+                            title: '错误',
+                            message: res.data.msg,
+                            offset: 50
+                        });
+                    } else {
+                        Vue.prototype.$notify({
+                            title: '成功',
+                            message: ('i', {style: 'color: teal'}, "删除成功"),
+                            type: 'success',
+                            offset: 50
+                        });
+                        that.GetData();
+                    }
+
+                });
+            }).catch(() => {
+                // 点击取消:不删除了
+                this.$message({
+                    type: 'info',
+                    message: '已取消删除'
+                });
+            });
+        },
+        submit() {
+            var _this = this;
+            //调用方法提交
+            axios({
+                method: 'post',
+                // 请求的地址
+                url: 'http://localhost:8082/helloGithub_war_exploded/updateArticleByAdmin',
+                // URL 中的查询参数
+                params: {
+                    articleId: this.form.categoryId,
+                    category: this.form.category,
+                    isValid: this.form.isValid,
+                    categoryName: this.form.categoryName,
+                }
+            }).then(function (res) {
+                if (res.data.code === 500) {
+                    Vue.prototype.$notify.error({
+                        title: '错误',
+                        message: res.data.msg,
+                        offset: 50
+                    });
+
+                } else {
+                    _this.isEdit=true;
+                    _this.dialogVisible = false;
+                    _this.GetData();
+                    Vue.prototype.$notify({
+                        title: '成功',
+                        message: ('i', {style: 'color: teal'}, "更新成功！"),
+                        type: 'success',
+                        offset: 50
+                    });
+                }
+            });
+        },
+    }
 }
+
 </script>
 
 <style scoped>

src/components/System/Manage/commentManage.vue

@@ -1,8 +1,14 @@
 <template>
   <div>
+      <div class="HeadLine">
+          <div class="HeadSquare"></div>
+          <div class="TitleFont">评论管理</div>
+      </div>
+      <div style="height:50px;width:100%;"></div>
+
+      <el-card  shadow="always" class="card_style">
           <el-table
-              border
+              :header-row-style="{height:'20px'}"  :cell-style="{padding:'2px'}" border
-              stripe
               :data="dataTable"
               style="width: 100%;margin-top: 20px">
               <el-table-column
@@ -40,7 +46,8 @@
               <el-table-column
                   prop="commentTime"
                   align="center"
-                  show-overflow-tooltip
+                  width="150"
+                  :show-overflow-tooltip="true"
                   label="评论时间">
               </el-table-column>
               <el-table-column
@@ -54,12 +61,6 @@
                   align="center"
                   label="点赞数">
               </el-table-column>
-          <el-table-column
-                  prop="commentTime"
-                  align="center"
-                  label="评论时间">
-          </el-table-column>
-
 
               <el-table-column
                   prop="isValid"
@@ -77,18 +78,18 @@
                       </el-switch>
                   </template>
               </el-table-column>
-
+              <el-table-column width="150" label="操作" fixed="right" align="center">
-          <el-table-column
-                  align="center"
-                  fixed="right"
-                  label="操作">
                   <template slot-scope="scope">
-                  <el-button type="primary" icon="el-icon-edit" @click="handleEdit(scope.row)" size="small" circle></el-button>
+                      <div class="ButtonBlock">
-                  <el-button type="danger" icon="el-icon-delete" @click="handleDelete(scope.row)" circle size="small"></el-button>
+                          <img class="MyButton" @click="handleEdit(scope.row)"
+                               src="../../../assets/images/EditButton.svg" style="width:60px">
+                          <img class="MyButton" @click="handleDelete(scope.row)"
+                               src="../../../assets/images/DeleteButton.svg" style="width:60px">
+                      </div>
                   </template>
               </el-table-column>
           </el-table>
-
+      </el-card>
 
       <el-dialog title="编辑" :visible.sync="dialogVisible" width="45%"
                  append-to-body

src/components/System/Manage/projectManage.vue

@@ -1,8 +1,14 @@
 <template>
   <div>
+      <div class="HeadLine">
+          <div class="HeadSquare"></div>
+          <div class="TitleFont">项目管理</div>
+      </div>
+      <div style="height:50px;width:100%;"></div>
+
+      <el-card  shadow="always" class="card_style">
           <el-table
-              border
+              :header-row-style="{height:'20px'}"  :cell-style="{padding:'2px'}" border
-              stripe
               :data="dataTable"
               style="width: 100%;margin-top: 20px">
               <el-table-column
@@ -22,18 +28,21 @@
               <el-table-column
                   prop="projectName"
                   align="center"
-                  show-overflow-tooltip
+                  width="100"
+                  :show-overflow-tooltip="true"
                   label="项目名称">
               </el-table-column>
               <el-table-column
                   prop="projectUrl"
                   align="center"
+                  width="100"
                   show-overflow-tooltip
                   label="项目地址">
               </el-table-column>
               <el-table-column
                   prop="projectIco"
                   align="center"
+                  width="100"
                   show-overflow-tooltip
                   label="图标">
               </el-table-column>
@@ -57,6 +66,8 @@
               <el-table-column
                   prop="submitTime"
                   align="center"
+                  width="100"
+                  show-overflow-tooltip
                   label="提交时间">
               </el-table-column>
 
@@ -102,17 +113,18 @@
                   </template>
               </el-table-column>
 
-          <el-table-column
+              <el-table-column width="150" label="操作" fixed="right" align="center">
-                  align="center"
-                  fixed="right"
-                  label="操作">
                   <template slot-scope="scope">
-                  <el-button type="primary" icon="el-icon-edit" @click="handleEdit(scope.row)" size="small" circle></el-button>
+                      <div class="ButtonBlock">
-                  <el-button type="danger" icon="el-icon-delete" @click="handleDelete(scope.row)" circle size="small"></el-button>
+                          <img class="MyButton" @click="handleEdit(scope.row)"
+                               src="../../../assets/images/EditButton.svg" style="width:60px">
+                          <img class="MyButton" @click="handleDelete(scope.row)"
+                               src="../../../assets/images/DeleteButton.svg" style="width:60px">
+                      </div>
                   </template>
               </el-table-column>
           </el-table>
-
+      </el-card>
 
       <el-dialog title="编辑" :visible.sync="dialogVisible" width="45%"
                  append-to-body

src/components/System/Manage/systemManage.vue

@@ -1,11 +1,17 @@
 <template>
     <div>
+        <div class="HeadLine">
+            <div class="HeadSquare"></div>
+            <div class="TitleFont">文章管理</div>
+        </div>
+        <div style="height:50px;width:100%;"></div>
+
+        <el-card  shadow="always" class="card_style">
             <div style="display: flex;justify-content: flex-start">
                 <el-button type="primary" @click="addAdmin" icon="el-icon-plus">新增</el-button>
             </div>
             <el-table
-            border
+                :header-row-style="{height:'20px'}"  :cell-style="{padding:'8px'}" border
-            stripe
                 :data="dataTable"
                 style="width: 100%;margin-top: 20px">
                 <el-table-column
@@ -47,16 +53,19 @@
                     </template>
                 </el-table-column>
 
-            <el-table-column
+                <el-table-column width="150" label="操作" fixed="right" align="center">
-                fixed="right"
-                align="center"
-                label="操作">
                     <template slot-scope="scope">
-                    <el-button type="primary" icon="el-icon-edit" @click="handleEdit(scope.row)" size="small" circle></el-button>
+                        <div class="ButtonBlock">
-                    <el-button type="danger" icon="el-icon-delete" @click="handleDelete(scope.row)" circle size="small"></el-button>
+                            <img class="MyButton" @click="handleEdit(scope.row)"
+                                 src="../../../assets/images/EditButton.svg" style="width:60px">
+                            <img class="MyButton" @click="handleDelete(scope.row)"
+                                 src="../../../assets/images/DeleteButton.svg" style="width:60px">
+                        </div>
                     </template>
                 </el-table-column>
             </el-table>
+        </el-card>
+
 
         <el-dialog :title="modalType === 0 ? '添加' : '编辑'" :visible.sync="dialogVisible" width="26%"
                    append-to-body

src/components/System/Manage/userManage.vue

@@ -1,8 +1,14 @@
 <template>
   <div>
+      <div class="HeadLine">
+          <div class="HeadSquare"></div>
+          <div class="TitleFont">用户管理</div>
+      </div>
+      <div style="height:50px;width:100%;"></div>
+
+      <el-card  shadow="always" class="card_style">
           <el-table
-              border
+              :header-row-style="{height:'20px'}"  :cell-style="{padding:'2px'}" border
-              stripe
               :data="dataTable"
               style="width: 100%;margin-top: 20px">
               <el-table-column
@@ -15,7 +21,8 @@
               <el-table-column
                   prop="userName"
                   align="center"
-                  label="用户名">
+                  label="用户名"
+              >
               </el-table-column>
               <el-table-column
                   prop="userPassword"
@@ -24,8 +31,10 @@
               </el-table-column>
               <el-table-column
                   prop="creatTime"
+                  width="120"
                   align="center"
-                  label="注册时间">
+                  label="注册时间"
+                  :show-overflow-tooltip="true">
               </el-table-column>
               <el-table-column
                   prop="userLevel"
@@ -45,12 +54,16 @@
               <el-table-column
                   prop="searchHistory"
                   align="center"
-                  label="搜索历史">
+                  width="120"
+                  label="搜索历史"
+                  :show-overflow-tooltip="true">
               </el-table-column>
               <el-table-column
                   prop="userAvatar"
                   align="center"
-                  label="头像">
+                  width="120"
+                  label="头像"
+                  :show-overflow-tooltip="true">
               </el-table-column>
 
               <el-table-column
@@ -70,17 +83,18 @@
                   </template>
               </el-table-column>
 
-          <el-table-column
+              <el-table-column width="150" label="操作" fixed="right" align="center">
-                  align="center"
-                  fixed="right"
-                  label="操作">
                   <template slot-scope="scope">
-                  <el-button type="primary" icon="el-icon-edit" @click="handleEdit(scope.row)" size="small" circle></el-button>
+                      <div class="ButtonBlock">
-                  <el-button type="danger" icon="el-icon-delete" @click="handleDelete(scope.row)" circle size="small"></el-button>
+                          <img class="MyButton" @click="handleEdit(scope.row)"
+                               src="../../../assets/images/EditButton.svg" style="width:60px">
+                          <img class="MyButton" @click="handleDelete(scope.row)"
+                               src="../../../assets/images/DeleteButton.svg" style="width:60px">
+                      </div>
                   </template>
               </el-table-column>
           </el-table>
-
+      </el-card>
 
       <el-dialog title="编辑" :visible.sync="dialogVisible" width="26%"
                  append-to-body
@@ -316,7 +330,6 @@ export default {
         },
 
         handleEdit(index) {
-
             this.openDialog();
             // 深拷贝
             this.form = index;