feat: 大客户更新基本信息

src/modules/customer/api.js

@@ -8,9 +8,13 @@ export function getCustomerList(params) {
 export function createCustomer(data) {
   return httpRequest.post('/api/customer/admin/v1/customer', data)
 }
-// 获取基本信息
-export function getBaseDetail(params) {
-  return httpRequest.get('/api/customer/admin/v1/customer/{id}', { params })
+// 获取客户详情
+export function getCustomerDetail(id) {
+  return httpRequest.get(`/api/customer/admin/v1/customer/${id}`)
+}
+// 更新客户
+export function updateCustomer(id, data) {
+  return httpRequest.put(`/api/customer/admin/v1/customer/${id}`, data)
 }
 // 删除客户
 export function deleteCustomer(id) {

src/modules/customer/components/BaseInfo.vue

 <template>
   <div class="base-info">
     <div class="bar">
-      <el-button type="primary" size="small">更 新</el-button>
+      <el-button type="primary" size="small" @click="dialogVisable = true">更 新</el-button>
     </div>
     <div class="info">
       <div class="item"><label>客户名称：</label>{{ form.name }}</div>
       <div class="item"><label>客户简称：</label>{{ form.short_name }}</div>
-      <div class="item"><label>客户来源：</label>{{ form.source }}</div>
-      <div class="item"><label>客户分类：</label>{{ form.type }}</div>
+      <div class="item"><label>客户来源：</label>{{ form.source | sourceFilter }}</div>
+      <div class="item"><label>客户分类：</label>{{ form.type | typeFilter }}</div>
       <div class="item"><label>所在地区：</label>{{ form.region }}</div>
       <div class="item"><label>详细地址：</label>{{ form.address }}</div>
       <div class="item"><label>备注：</label>{{ form.remark }}</div>
     </div>
+    <customer-form-dialog v-model="dialogVisable" :info="form"  @change="getBaseInfo"/>
   </div>
 </template>
 <script>
-import { getBaseDetail } from '../api'
+import CustomerFormDialog from './CustomerFormDialog.vue'
+import { getCustomerDetail } from '../api'
+const sourceMap = { 1: '公司资源', 2: '自己开拓', 3: '第三方介绍' }
+const typeMap = { 1: '普通客户', 2: '重点客户' }
 export default {
   props: {
     id: {
       type: String
     }
   },
+  components: { CustomerFormDialog },
   data() {
     return {
       form: {
         name: '',
-        abbr: '',
+        short_name: '',
         source: '',
-        category: '',
-        area: '',
+        type: '',
+        region: '',
         address: '',
-        remark: ''
+        remark: '',
+        id: this.id
+      },
+      dialogVisable: false
     }
+  },
+  filters: {
+    sourceFilter(val) {
+      return sourceMap[val]
+    },
+    typeFilter(val) {
+      return typeMap[val]
     }
   },
   mounted() {
@@ -40,8 +55,7 @@ export default {
   },
   methods: {
     getBaseInfo() {
-      const params = { id: this.id }
-      getBaseDetail(params).then(res => {
+      getCustomerDetail(this.id).then(res => {
         this.form = res.data
       })
     }

src/modules/customer/components/CustomerFormDialog.vue

 <template>
-  <el-dialog custom-class="create-custom-dialog" title="创建客户" :visible="value" :close-on-click-modal="false" :close-on-press-escape="false" top="50px" @close="handleClose">
+  <el-dialog custom-class="create-custom-dialog" :title="info.id ? '更新客户信息' : '创建客户'" :visible="value" :close-on-click-modal="false" :close-on-press-escape="false" top="50px" @close="handleClose">
     <!-- <div slot="title">
     </div> -->
     <el-form :model="form" :rules="rules" ref="ruleForm" label-width="90px">
@@ -40,7 +40,7 @@
 </template>
 <script>
 import AppArea from '@/components/base/AppArea.vue'
-import { createCustomer } from '../api'
+import { createCustomer, updateCustomer } from '../api'
 export default {
   components: { AppArea },
   props: {
@@ -48,9 +48,11 @@ export default {
       type: Boolean,
       default: false
     },
-    id: {
-      type: String,
-      default: ''
+    info: {
+      type: Object,
+      default:() => {
+        return {}
+      }
     }
   },
   data() {
@@ -76,6 +78,16 @@ export default {
   watch: {
     value(val) {
       this.dialogVisible = val
+    },
+    'info.id': {
+      handler(v) {
+        console.log(v)
+        Object.keys(this.form).forEach(key => {
+          this.form[key] = this.info[key]
+          if (key === 'region') this.form[key] = this.form[key].split('-')
+        })
+      },
+      deep: true
     }
   },
   methods: {
@@ -86,7 +98,7 @@ export default {
     handleSubmit() {
       this.$refs.ruleForm.validate((valid) => {
         if (valid) {
-          this.fetchCreateCustomer()
+          this.info.id ? this.fetchUpdateCustomer() : this.fetchCreateCustomer()
         }
       })
     },
@@ -104,6 +116,21 @@ export default {
       }).catch(() => {
         this.$message.error('创建客户失败')
       })
+    },
+    fetchUpdateCustomer() {
+      const params = Object.assign({}, this.form)
+      params.region = this.form.region.join('-')
+      updateCustomer(this.info.id, params).then(res => {
+        if (res.code === 0 && res.data && res.data.status) {
+          this.$message.success('更新客户成功')
+          this.$emit('input', false)
+          this.$emit('change')
+        } else {
+          this.$message.error('更新客户失败')
+        }
+      }).catch(() => {
+        this.$message.error('更新客户失败')
+      })
     }
   }
 }