案例管理页面实现

src/views/case/ManageList.vue

@@ -58,6 +58,7 @@
               v-if="scope.row.filePath && scope.row.confidentialityLevel == '内部'"><span @click="cancal(scope.row)"
                 v-if="scope.row.excellent">取消最佳</span><span @click="open(scope.row)" v-else>最佳案例</span></el-button>
             <el-button style="margin:0 5px" type="text" @click="delItem(scope.row)" icon="el-icon-delete">删除</el-button>
+            <el-button style="margin:0 5px" type="text" @click="theBest(scope.row)" icon="el-icon-delete">最佳</el-button>
           </el-button-group>
         </template>
       </el-table-column>
@@ -121,6 +122,41 @@
       </div>
       <span slot="footer" class="dialog-footer"><el-button @click="recommend.dlgShow = false">关闭</el-button></span>
     </el-dialog>
+    <el-dialog
+      title="最佳案例"
+      :visible.sync="bestValue"
+      width="36%">
+      <div class="best_card">
+        <div class="card_item">
+          <div class="card_title">
+            <i class="icon"></i>
+            <i class="text">年度</i>
+          </div>
+          <el-input style="width:190px" disabled v-model="bestYear" placeholder="请输入年度"></el-input>
+        </div>
+        <div class="card_item">
+          <div class="card_title">
+            <i class="icon"></i>
+            <i class="text">组织领域</i>
+          </div>
+          <el-input disabled v-model="bestOrg" placeholder="请输入组织领域"></el-input>
+        </div>
+        <div class="card_item">
+          <div class="card_title">
+            <i class="text">最佳理由</i>
+          </div>
+          <el-input type="textarea"
+            placeholder="请输入内容"
+            v-model="bestTextarea"
+            maxlength="200"
+            show-word-limit></el-input>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="notBest">取 消</el-button>
+        <el-button type="primary" @click="parameBest">确 定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
@@ -131,6 +167,10 @@ export default {
   name: 'articleItems',
   data() {
     return {
+      bestYear: '',
+      bestOrg: '',
+      bestTextarea: '',
+      bestValue: false,
       excellent: false,
       queryObj: {
         pageIndex: 1,
@@ -173,6 +213,15 @@ export default {
     this.getData();
   },
   methods: {
+    notBest(){
+      this.bestValue = false
+      this.bestYear = ''
+      this.bestOrg = ''
+      this.bestTextarea = ''
+    },
+    parameBest(){
+      this.notBest()
+    },
     // 导出
     importList() {
       apiCase.exports(this.queryObj).then(res => {
@@ -354,6 +403,9 @@ export default {
           this.$message({ type: 'info', message: '已取消删除', offset: 50 });
         });
     },
+    theBest(item){
+      this.bestValue = true
+    },
     //添加推荐
     shareItem(item) {
       this.shareItemData = { ...item }
@@ -467,6 +519,36 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+::v-deep .el-dialog__header{
+  border-bottom: 1px solid #909399;
+}
+::v-deep .el-textarea__inner{
+  height: 100px !important;
+}
+.best_card{
+  .card_item{
+    display: flex;
+    justify-content: start;
+    margin-bottom: 20px;
+    .card_title{
+      width: 94px;
+      min-width: 94px;
+      display: flex;
+      align-items: center;
+      justify-content: end;
+      margin-right: 14px;
+      .icon{
+        width:8px;
+        height: 8px;
+        background: url('../../assets/images/asterisk.png') no-repeat;
+        background-size: 100%;
+      }
+      .text{
+
+      }
+    }
+  }
+}
 .article-status1 {
   padding: 3px;
   border: 1px dotted #1ea0fa;