筛选

src/main/vue/src/mixins/logoPatent.js

@@ -2,10 +2,10 @@ export default {
     data() {
         return {
             applyStatusOptions: [
-                { label: '申请阶段', value: 'APPLY_STAGE' },
-                { label: '审查阶段', value: 'REVIEW_STAGE' },
-                { label: '授权阶段', value: 'GRANT_STAGE' },
-                { label: '已完成', value: 'COMPLETED' }
+                { label: '申请阶段', value: 'APPLY_STAGE', type: '' },
+                { label: '审查阶段', value: 'REVIEW_STAGE', type: 'warning' },
+                { label: '授权阶段', value: 'GRANT_STAGE', type: 'info' },
+                { label: '已完成', value: 'COMPLETED', type: 'end' }
             ],
             logoWorkflowOptions: [
                 { label: '是否决定签约', value: 'IS_CONTRACT' },

src/main/vue/src/styles/element_theme/index.css

@@ -9532,7 +9532,7 @@
     color: #369DD1;
     border-width: 1px;
     border-style: solid;
-    border-radius: 4px;
+    /* border-radius: 4px; */
     box-sizing: border-box;
     white-space: nowrap;
 }
@@ -9546,6 +9546,11 @@
     color: #fff;
     background-color: #d7ab41;
 }
+.el-tag.el-tag--end {
+    background-color: #8C7F6720;
+    border-color: #8C7F6720;
+    color: #8C7F67;
+}
 .el-tag.el-tag--info {
     background-color: #f4f4f5;
     border-color: #e9e9eb;
@@ -9577,9 +9582,9 @@
     background-color: #67c23a;
 }
 .el-tag.el-tag--warning {
-    background-color: #fdf6ec;
-    border-color: #faecd8;
-    color: #e6a23c;
+    background-color: #EE8F2420;
+    border-color: #EE8F2420;
+    color: #EE8F24;
 }
 .el-tag.el-tag--warning.is-hit {
     border-color: #e6a23c;
@@ -9781,9 +9786,13 @@
     transform: scale(0.8);
 }
 .el-tag--small {
-    height: 24px;
-    padding: 0 8px;
+    height: 22px;
+    padding: 0 4px;
     line-height: 22px;
+    font-size: 12px;
+    border-width: 0px;
+    min-width: 56px;
+    text-align: center;
 }
 .el-tag--small .el-icon-close {
     -webkit-transform: scale(0.8);

src/main/vue/src/views/LogoPatentList.vue

@@ -9,6 +9,12 @@
             </el-button>
         </page-title>
         <div class="filters-container">
+            <el-radio-group v-model="applyStatus" size="mini" @change="refreash">
+                <el-radio-button v-for="(item, index) in applyStatusOptions" :key="index" :label="item.value">
+                    {{ item.label }}
+                </el-radio-button>
+            </el-radio-group>
+
             <el-input
                 placeholder="搜索..."
                 v-model="search"
@@ -29,8 +35,14 @@
             cell-class-name="table-cell"
             :height="tableHeight"
         >
-            <el-table-column v-if="multipleMode" align="center" type="selection" width="50"> </el-table-column>
-            <el-table-column prop="applyStatus" label="案件状态" :formatter="applyStatusFormatter"> </el-table-column>
+            <el-table-column align="center" type="selection" width="50"> </el-table-column>
+            <el-table-column prop="applyStatus" label="案件状态">
+                <template slot-scope="{ row }">
+                    <el-tag v-if="row.applyStatus" :type="applyStatusFormatter(row.applyStatus).type">{{
+                        applyStatusFormatter(row.applyStatus).label
+                    }}</el-tag>
+                </template>
+            </el-table-column>
             <el-table-column prop="uwNo" label="寰球案号"> </el-table-column>
             <el-table-column prop="name" label="专利名称"> </el-table-column>
             <el-table-column prop="logoWorkflow" label="当前流程" :formatter="logoWorkflowFormatter"> </el-table-column>
@@ -74,7 +86,8 @@ export default {
             multipleMode: false,
             search: '',
             url: '/logoPatent/all',
-            downloading: false
+            downloading: false,
+            applyStatus: 'APPLY_STAGE'
         };
     },
     computed: {
@@ -83,8 +96,21 @@ export default {
         }
     },
     methods: {
+        applyStatusFormatter(status) {
+            let selectedOption = this.applyStatusOptions.find(i => i.value === status);
+            if (selectedOption) {
+                return selectedOption;
+            } else {
+                return null;
+            }
+        },
         beforeGetData() {
-            return { search: this.search };
+            return {
+                search: this.search,
+                query: {
+                    applyStatus: this.applyStatus
+                }
+            };
         },
         toggleMultipleMode(multipleMode) {
             this.multipleMode = multipleMode;
@@ -155,6 +181,10 @@ export default {
                         this.$message.error(e.error);
                     }
                 });
+        },
+        refreash() {
+            this.page = 1;
+            this.getData();
         }
     }
 };