标签管理模块

src/components/common/c-button.vue

@@ -23,7 +23,7 @@ export default Vue.extend({
   props: {
     round: {
       type: Boolean,
-      default: false
+      default: true
     },
     disabled: {
       type: Boolean,

src/router/client.ts

@@ -54,5 +54,12 @@ export const clientRoutes: Array<RouteConfig> = [
     meta: {
       title: '编辑标签'
     }
+  },
+  {
+    path: '/filter',
+    component: () => import('@/views/client/filter-client.vue'),
+    meta: {
+      title: '筛选'
+    }
   }
 ]
\ No newline at end of file

src/views/client/client-management.vue

@@ -80,6 +80,8 @@ export default Vue.extend({
     clickTab(action: string) {
       if (action === 'search') {
         this.$router.push('/search-client')
+      } else if (action === 'filter') {
+        this.$router.push('/filter')
       }
     },
     addClient() {

src/views/client/components/tag-card.vue

@@ -3,6 +3,9 @@
     <div class="flex-1 overflow-hidden">
       <div class="">{{ tag.label }}</div>
       <div class="mt-1.5 whitespace-nowrap">
+        <div v-if="tag.tags.length < 1" class="text-text-secondary text-sm">
+          暂无标签
+        </div>
         <template v-if="tag.tags.length > 3">
           <c-tag
             v-for="(item, index) in tag.tags.slice(0,3)"

src/views/client/edit-tag.vue

@@ -113,6 +113,7 @@ export default Vue.extend({
   created() {
     const id = Number(this.$route.params.id)
     this.currentTag = this.tagList.find(tag => tag.id === id) as Tags.Tag
+    // this.tags = JSON.parse(JSON.stringify(this.currentTag.tags))
     this.tagName = this.currentTag.label
     this.currentColor = this.currentTag.color
   },
@@ -122,7 +123,12 @@ export default Vue.extend({
       this.currentTag.tags.splice(index, 1)
     },
     saveTag() {
-      
+      if (this.tag.replace(/(^\s*)|(\s*$)/g, '') !== '') {
+        this.currentTag.tags.push(this.tag)
+      }
+      this.currentTag.color = this.currentColor
+      // this.currentTag.tags = this.tags
+      this.$router.push('/tag')
     }
   }
 })

src/views/client/filter-client.vue

+<template>
+  <!-- 筛选 -->
+  <main-page>
+    <div
+      slot="left"
+      class="text-sm font-medium"
+      @click="$router.go(-1)"
+    >
+      取消
+    </div>
+    <app-icon
+      slot="right"
+      icon-name="menu"
+      class-name="w-4 h-4"
+      @click="$router.push('/tag')"
+    />
+    <div class="pt-14 px-4 pb-16">
+      <div
+        v-for="tag in tagList"
+        :key="tag.id"
+      >
+        <div class="title py-1 flex items-center">
+          <div class="dot w-2 h-2 rounded-full mr-1.5" :class="`bg-tag-${tag.color}`" />
+          <div class="title" :class="`text-tag-${tag.color}`">{{ tag.label }}</div>
+        </div>
+        <div class="wrapper mt-1.5 grid grid-cols-3 gap-x-6 gap-y-2.5">
+          <div
+            v-for="(item, index) in tag.tags"
+            :key="index"
+            class="rounded px-3 h-10 text-sm flex items-center justify-center leading-4"
+            :class="selected[tag.id].indexOf(item) > -1 ? `bg-tag-${tag.color}-lighter text-tag-${tag.color}` : 'bg-white'"
+            @click="selectTag(tag.id, item)"
+          >
+            {{ item }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="px-4 py-1.5 bg-common-bg fixed bottom-0 left-0 w-full grid grid-cols-2 gap-x-4">
+      <c-button @click="reset">重置</c-button>
+      <c-button @click="$router.push('/client-management')">确定</c-button>
+    </div>
+  </main-page>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import * as Tags from '@/DTO/tags'
+
+interface Select {
+  [key: string]: Array<string>
+}
+
+export default Vue.extend({
+  name: 'FilterClient',
+  components:{
+    'main-page': () => import('@/layout/main-page.vue'),
+    'c-button': () => import('@/components/common/c-button.vue'),
+    'app-icon': () => import('@/components/common/Icon.vue'),
+  },
+  data() {
+    const { tagList } = Tags
+    const selected: Select = {}
+    return {
+      tagList,
+      selected
+    }
+  },
+  created() {
+    this.tagList.forEach(tag => {
+      this.$set(this.selected, tag.id, [] )
+    })
+  },
+  methods: {
+    selectTag(id: number, tag: string) {
+      const index = this.selected[id].findIndex(item => item === tag)
+      if (index < 0) {
+        this.selected[id].push(tag)
+      } else {
+        this.selected[id].splice(index, 1)
+      }
+    },
+    reset() {
+      for(const key in this.selected) {
+        this.selected[key] = []
+      }
+    }
+  }
+})
+</script>
+
+<style lang="less">
+
+</style>

vue.config.js

@@ -18,8 +18,8 @@ module.exports = {
       }
     },
     devServer: {
-      proxy: 'http://118.24.233.110', // 请求的ip或者域名:端口号
-      public: '192.168.0.109:8080', // 本地的ip:端口号
+      proxy: 'http://localhost:8080', // 请求的ip或者域名:端口号
+      public: '127.0.0.1:8080', // 本地的ip:端口号
       port: '8080'
     }
     // pwa: {