2022年5月29日从svn移到git

src/components/Article/draftList.vue

@@ -0,0 +1,133 @@
+<template>
+  <div style="">
+    <div class="article-list" v-for="(item,idx) in items" :key="idx">
+      <div class="article-info">
+        <div class="article-info-title">
+          <span style=""><a :href="`${webBaseUrl}/article/detail?id=`" target="_blank"> {{item.title}}</a></span>
+          <div class="article-info-date">
+            <el-button @click="editItem(item)" type="text" icon="el-icon-edit">编辑</el-button>
+            <el-button @click="delItem(item,idx)" type="text" icon="el-icon-remove">删除</el-button>
+          </div>
+        </div>
+        <div class="article-info-summary">
+         作为一个管理者，首先应该具有的应该是判断力，包括对未来的眼界以及对细节的洞察能力
+        </div>
+        <div class="article-info-tools">
+          <div class="article-info-tools-auth">
+             <span style="font-size: 13px; color: #7b7b7b;"><i class="el-icon-time"></i> 2022-02-12</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'articleItems',
+    props: {
+      items: { //name,
+        type: Array,
+        default:()=>[]
+      }
+    },
+    data(){
+      return {
+        shareShow:false,
+        shareInfo:{
+          aid:'',
+          name:'',
+          article:null
+        }
+      }
+    },
+    mounted() {
+
+    },
+    methods:{
+      editItem(item){
+        this.$message({message:'编辑'+item.title+'内容',offset:50})
+      },
+      delItem(item,idx){
+        this.$confirm('您确定要删除所选文章吗？', '删除提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          this.items.splice(idx,1);
+          this.$message({type: 'success',message: '删除成功!',offset:50});
+        }).catch(() => {
+          this.$message({type: 'info',message: '已取消删除',offset:50});
+        });
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .article-status1{
+    padding: 3px;
+    border: 1px dotted #1EA0FA;
+    color:#1EA0FA;
+  }
+  .article-status2{
+    padding: 3px;
+    border: 1px dotted #00aa00;
+    color:#00aa00;
+  }
+  .article-status3{
+    padding: 3px;
+    border: 1px dotted #ff0000;
+    color:#ff0000;
+  }
+  .article-list {
+    margin: 5px 0;
+    border: 1px solid #dddddd;
+    padding: 10px;
+  }
+
+  .article-info {
+    .article-info-title {
+      font-size: 16px;
+      font-weight: 400;
+      height: 40px;
+      line-height: 40px;
+      .article-info-date {
+        height: 40px;
+        line-height: 40px;
+        float: right;
+        font-weight: 200;
+        color: #999999;
+        i {
+          margin-right: 5px;
+        }
+      }
+    }
+    .article-info-summary {
+      height: 65px;
+      color: #999999;
+    }
+    .article-info-tools {
+      height: 30px;
+      .article-info-tools-auth {
+        float: left;
+        font-size: 13px;
+        color: #999999;
+        img {
+          margin-right: 10px;
+          width: 30px;
+          border: 1px solid #eee;
+          border-radius: 50%;
+          vertical-align: middle;
+        }
+      }
+      .article-info-tools-btns {
+        float: right;
+        .article-info-tools-btn {
+          margin: 0 0 0 15px;
+        }
+      }
+    }
+  }
+
+</style>