entity custoemr实体

Author: weizhanzhan

src/api/blogs.ts

@@ -0,0 +1,33 @@
+import request from '@/utils/request'
+// eslint-disable-next-line no-unused-vars
+import { CustomerContent } from '@/entity/Customer'
+const mockNum = '/mock/89/api/'
+
+export const getCustomerList = ():Promise<{contents:Array<CustomerContent>, totalElements:number}> => {
+  return request({
+      url: mockNum + 'customer/list',
+      method: 'get'
+  })
+}
+export const createCustomer = (data:CustomerContent) => {
+  return request({
+    url: mockNum + 'customer',
+    method: 'post',
+    data
+  })
+}
+
+export const updateCustomer = (data:CustomerContent) => {
+  return request({
+    url: mockNum + 'customer',
+    method: 'put',
+    data
+  })
+}
+export const deleteCustomer = (id:string) => {
+  return request({
+    url: mockNum + 'customer/' + id,
+    method: 'delete'
+  })
+}
+

src/api/customer.ts

@@ -18,7 +18,15 @@
           v-for="item in moduleMenu"
           :key="item.name"
         >
-          <span rel="noopener noreferrer">  <a-icon type="folder" />&nbsp;&nbsp;{{ $t(`menu.${ item.name }`) }}</span>
+          <div class="module-menu-item">
+            <span rel="noopener noreferrer">  <a-icon type="folder" />&nbsp;&nbsp;{{ $t(`menu.${ item.name }`) }}</span>
+            <span v-if="activeModule === item.name">
+              <a-icon
+                type="environment"
+                theme="twoTone"
+                two-tone-color="#52c41a"
+              /></span>
+          </div>
         </a-menu-item>
       </a-menu>
     </a-dropdown>
@@ -91,6 +99,10 @@
   .module-icon:hover {
     background: rgba(0, 0, 0, 0.025);
   }
-}
 
+}
+.module-menu-item{
+  display: flex;
+  justify-content: space-between;
+}
 </style>

src/components/HeaderMenu/Modules.vue

@@ -0,0 +1,35 @@
+import { getCustomerList, createCustomer, updateCustomer, deleteCustomer } from '@/api/customer'
+
+export interface CustomerContent {
+  id?:string
+  name:string
+  code:string
+  address:string
+  state:boolean
+  phone:string
+}
+
+export class Customer {
+  content:CustomerContent
+  constructor(customer?:CustomerContent) {
+    this.content = customer || {
+      name: '',
+      code: '',
+      address: '',
+      state: true,
+      phone: ''
+    }
+  }
+  create() {
+    return createCustomer(this.content)
+  }
+  update() {
+    return updateCustomer((this.content))
+  }
+  delete(customerId?:string) {
+    return deleteCustomer(customerId || this.content.id as string)
+  }
+  static getAllCustoemrList() {
+    return getCustomerList()
+  }
+}

src/entity/Customer.ts

@@ -0,0 +1,9 @@
+interface Model {
+  [key:string]:any
+}
+// 策略模式
+export const CustomerCodeType:Model = {
+  '1': { tagColor: '#87d068', name: '1级客户' },
+  '2': { tagColor: '#2db7f5', name: '2级客户' },
+  '3': { tagColor: '#108ee9', name: '3级客户' }
+}

src/model/CustomerModel.ts

@@ -14,26 +14,53 @@
       <div>
         <a-table
           :columns="columns"
-          :data-source="data"
-          :row-key="record => record._id"
+          :data-source="customerList"
+          :row-key="record => record.id"
           :pagination="false"
           :loading="loading"
         >
+          <a
+            slot="name"
+            slot-scope="name"
+          >
+            {{ name }}
+          </a>
           <template
-            slot="avatar"
-            slot-scope="avatar"
+            slot="code"
+            slot-scope="code"
           >
-            <a-avatar
-              :src="avatar"
-              :size="23"
-            />
+            <a-tag
+              :color="getCustomerType(code).tagColor"
+            >
+              {{ getCustomerType(code).name }}
+            </a-tag>
           </template>
           <template
-            slot="name"
-            slot-scope="name"
+            slot="state"
+            slot-scope="state"
           >
-            {{ name }}
+            <a-tag
+              v-if="!state"
+              color="red"
+            >
+              冻结
+            </a-tag>
+            <a-tag
+              v-else
+              color="cyan"
+            >
+              激活
+            </a-tag>
           </template>
+          <span
+            slot="action"
+            slot-scope=""
+          >
+            <a>编辑</a>
+            <a-divider type="vertical" />
+            <a>删除</a>
+
+          </span>
         </a-table>
       </div>
     </div>
@@ -43,43 +70,70 @@
 <script lang="ts">
 
   import { Vue, Component, Prop } from 'vue-property-decorator'
+  import { Tag, Divider } from 'ant-design-vue'
   import WxFilter from './components/filter.vue'
+  // eslint-disable-next-line no-unused-vars
+  import { Customer, CustomerContent } from '@/entity/Customer'
+  import { CustomerCodeType } from '@/model/CustomerModel'
   const CustomerImg = require('../../../assets/images/customer.jpg')
   const columns = [
     {
-      title: 'avatar',
-      dataIndex: 'avatar',
-      width: '20%',
-      scopedSlots: { customRender: 'avatar' }
-    },
-    {
-      title: 'Name',
+      title: '客户名称',
       dataIndex: 'name',
       sorter: true,
       width: '20%',
       scopedSlots: { customRender: 'name' }
     },
     {
-      title: 'Role',
-      dataIndex: 'role',
-      width: '20%'
+      title: 'code',
+      dataIndex: 'code',
+      scopedSlots: { customRender: 'code' }
+    },
+    {
+      title: 'state',
+      dataIndex: 'state',
+      scopedSlots: { customRender: 'state' }
     },
     {
-      title: 'Email',
-      dataIndex: 'email'
+      title: '电话',
+      dataIndex: 'phone'
+    },
+    {
+      title: '地址',
+      dataIndex: 'address'
+    },
+    {
+      title: '操作',
+      key: 'action',
+      scopedSlots: { customRender: 'action' }
     }
   ]
+  // eslint-disable-next-line no-unused-vars
+  enum CustomerTypes { first, second, thrid}
+
   @Component({
   components: {
-    'wx-filter': WxFilter
+    'wx-filter': WxFilter,
+    'a-tag': Tag,
+    'a-divider': Divider
     }
   })
-  export default class Customer extends Vue {
-    customerImg = CustomerImg
-    visible: boolean = false;
-    columns:Array<object> = columns
-    @Prop() data!:Array<object>
+  export default class extends Vue {
+    private customerImg = CustomerImg
+    private visible: boolean = false;
+    private columns:Array<object> = columns
+    private customerList:Array<CustomerContent> = []
+    private total:number = 0
     @Prop() loading!:boolean
+
+    getCustomerType(code:string) {
+      return CustomerCodeType[code]
+    }
+    async mounted() {
+      const customerListContent = await Customer.getAllCustoemrList()
+      this.customerList = customerListContent.contents
+      this.total = customerListContent.totalElements
+    }
   }
 </script>