feat: userTag

project/src/components/assembly/screen/userTag.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="customerServiceTagBox">
+    <div class="customerServiceTag" :style="tagStyle"><i :class="icon"></i> <span><slot /></span></div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    icon: {
+      type: String,
+      default: () => 'el-icon-user-solid',
+    },
+    bgColor: {
+      type: String,
+      default: () => '#00b38a',
+    },
+  },
+  data() {
+    return {
+      tagStyle: {
+        backgroundColor: this.bgColor,
+        borderColor: this.bgColor,
+      },
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.customerServiceTagBox {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  .customerServiceTag {
+    display: flex;
+    align-items: center;
+    background: #00b38a;
+    border-radius: 4px;
+    border: 1px solid #00b38a;
+    color: #ffffff;
+    font-size: 12px;
+    margin: 2px;
+    padding: 0 3px;
+    word-wrap: break-word;
+    i {
+      margin-top: 2px;
+    }
+  }
+}
+</style>

project/src/components/smartPush/ruleList.vue

@@ -21,10 +21,8 @@
     <el-table ref="multipleTable" :height="height" :data="tableData" tooltip-effect="dark" style="width: 100%">
       <el-table-column prop="name" label="标题" show-overflow-tooltip align="center" min-width="120" />
       <el-table-column label="创建人" align="center" min-width="120">
-        <template slot-scope="scope">
-          <div class="customerServiceTagBox">
-            <div class="customerServiceTag"><i class="el-icon-user-solid"></i> {{ scope.row.creator }}</div>
-          </div>
+        <template slot-scope="{ row }">
+          <userTag icon="el-icon-user-solid" bgColor="#00b38a">{{ row.creator }}</userTag>
         </template>
       </el-table-column>
       <el-table-column prop="desc" label="规则" align="center" min-width="200" />
@@ -66,9 +64,10 @@
 <script>
 import datePicker from '@/components/assembly/screen/datePicker.vue'
 import selfChannel from '@/components/assembly/screen/channel.vue'
+import userTag from '@/components/assembly/screen/userTag.vue'
 import createMassMsg from './createMassMsg.vue'
 export default {
-  components: { datePicker, selfChannel, createMassMsg, },
+  components: { datePicker, selfChannel, createMassMsg, userTag },
   data () {
     return {
       massMsgFlag: false,