CN-1273 自定义library增加tag颜色选择功能

src/components/table/setting/KnowledgeBaseTableForRow.vue

@@ -104,6 +104,11 @@
             >
             </el-switch>
           </template>
+          <template v-else-if="item.prop === 'color'">
+            <div class="knowledge-color">
+              <span class="knowledge-color__icon" :class="colorName(scope.row[item.prop])"></span> <span>{{colorText(scope.row[item.prop])}}</span>
+            </div>
+          </template>
           <span v-else>{{scope.row[item.prop] || '-'}}</span>
         </template>
       </el-table-column>
@@ -117,7 +122,7 @@
 
 <script>
 import table from '@/mixins/table'
-import { knowledgeBaseCategory, knowledgeBaseSource } from '@/utils/constants'
+import { knowledgeBaseCategory, knowledgeBaseSource, knowledgeBaseColor } from '@/utils/constants'
 export default {
   name: 'KnowledgeBaseTableForRow',
   props: {
@@ -153,6 +158,11 @@ export default {
           prop: 'reference',
           width: 180,
           show: true
+        }, {
+          label: this.$t('overall.color'),
+          prop: 'color',
+          width: 180,
+          show: true
         }, {
           label: this.$t('overall.remark'),
           prop: 'description',
@@ -189,7 +199,8 @@ export default {
           show: true,
           width: 80
         }
-      ]
+      ],
+      knowledgeBaseColor
     }
   },
   watch: {
@@ -221,6 +232,18 @@ export default {
         const t = knowledgeBaseSource.find(t => t.value === type)
         return t ? t.name : ''
       }
+    },
+    colorText () {
+      return function (color) {
+        const t = knowledgeBaseColor.find(t => t.value === color)
+        return t ? t.label : knowledgeBaseColor[0].label
+      }
+    },
+    colorName () {
+      return function (color) {
+        const t = knowledgeBaseColor.find(t => t.value === color)
+        return t ? t.name : knowledgeBaseColor[0].name
+      }
     }
   }
 }