finished 企业列表管理

package.json

@@ -10,10 +10,12 @@
   "dependencies": {
     "@jiaminghi/data-view": "^2.7.3",
     "ant-design-vue": "^1.7.5",
+    "area-data": "^5.0.6",
     "axios": "^0.19.0",
     "core-js": "^3.4.3",
     "nprogress": "^0.2.0",
     "vue": "^2.6.10",
+    "vue-area-linkage": "^5.1.0",
     "vue-router": "^3.1.3",
     "vuex": "^3.1.2"
   },

src/main.js

@@ -27,6 +27,11 @@ Vue.use(dataV)
 import NProgress from 'nprogress'
 import 'nprogress/nprogress.css'
 
+//area-linkage
+import 'vue-area-linkage/dist/index.css';
+import VueAreaLinkage from 'vue-area-linkage';
+Vue.use(VueAreaLinkage)
+
 // 路由拦截器
 router.beforeEach((to, from, next) => {
     NProgress.start()

src/views/biz/enterprise/index.vue

@@ -79,6 +79,15 @@
                     <a-tag v-if="record.adminStatus == 'DISABLE'" color="red">禁用</a-tag>
                     <a-tag v-if="record.adminStatus == 'UNACTIVATE'" color="orange">未激活</a-tag>
                 </div>
+                <!-- 操作 -->
+                <template slot="action" slot-scope="text, record">
+                    <a-button
+                        icon="edit"
+                        type="primary"
+                        class="btn_margin"
+                        @click="showModal(record)"
+                    >修改</a-button>
+                </template>
             </a-table>
         </div>
 
@@ -125,6 +134,7 @@
                     >
                         <a-input
                             v-model="formModel.adminMobile"
+                            :disabled="modalType == 'edit'"
                         >
                         </a-input>
                     </a-form-model-item>
@@ -134,6 +144,7 @@
                     >
                         <a-input
                             v-model="formModel.adminName"
+                            :disabled="modalType == 'edit'"
                         >
                         </a-input>
                     </a-form-model-item>
@@ -143,6 +154,7 @@
                     >
                         <a-input
                             v-model="formModel.adminNickName"
+                            :disabled="modalType == 'edit'"
                         >
                         </a-input>
                     </a-form-model-item>
@@ -150,20 +162,9 @@
                         label="省/市"
                         prop="province"
                     >
-                        <a-input
-                            v-model="formModel.province"
-                        >
-                        </a-input>
-                    </a-form-model-item>
-                    <a-form-model-item
-                        label="市/区"
-                        prop="city"
-                    >
-                        <a-input
-                            v-model="formModel.city"
-                        >
-                        </a-input>
+                        <area-cascader v-if="showAreaSelect" type="text" v-model="formModel.areaSelected" :data="pca" placeholder=""></area-cascader>
                     </a-form-model-item>
+                
                     <a-form-model-item
                         label="地址"
                         prop="address"
@@ -183,6 +184,7 @@
 
 import {fetchList,addObj,putObj} from '@/api/biz/enterprise'
 import { disposereq,timestampToTime } from '@/utils/util'
+import { pca, pcaa } from 'area-data';
 
 let columns = [
     
@@ -222,6 +224,12 @@ let columns = [
             return text ? timestampToTime(text) : '-'
         }
     },
+    {
+        title: '操作',
+        key: "action",
+        scopedSlots: { customRender: "action" },
+        align: "center"
+    }
     
 ]
 
@@ -253,7 +261,8 @@ export default {
                 adminName: '',
                 province: '',
                 city: '',
-                address: ''
+                address: '',
+                areaSelected: []
             },
             formRules: {
                 name: [
@@ -267,7 +276,9 @@ export default {
                         pattern: /^1[3456789]\d{9}$/,message: '手机号格式不正确', trigger: 'blur'
                     }
                 ]
-            }
+            },
+            pca,
+            showAreaSelect: true
 
         }
     },
@@ -311,6 +322,7 @@ export default {
         },
         timestampToTime,
         showModal(row){
+            // console.log(this.formModel.areaSelected)
             this.modalVisible = true
             if(row == ''){
                 this.modalTitle = '添加'
@@ -318,16 +330,25 @@ export default {
             }else{
                 this.modalTitle = '编辑'
                 this.modalType = 'edit'
+                if(row.province && row.city){
+                    row.areaSelected = [row.province,row.city]
+                }
                 this.formModel = {...row}
+                
             }
         },
         saveData(){
             if(this.modalType == 'add'){
                 let data = {...this.formModel}
+                if(data.areaSelected.length > 0){
+                    data.province = data.areaSelected[0]
+                    data.city = data.areaSelected[1]
+                }
                 addObj(data).then(res => {
                     if(res.resp_code == 200){
                         this.$message.info('保存成功')
                         this.getList(this.searchPage)
+                        this.closeModal()
                     }else{
                         this.$message.info(res.resp_msg)
                     }
@@ -335,14 +356,29 @@ export default {
                     disposereq(this,err)
                 })
             }else if(this.modalType == 'edit'){
-
+                let data = {...this.formModel}
+                if(data.areaSelected.length > 0){
+                    data.province = data.areaSelected[0]
+                    data.city = data.areaSelected[1]
+                }
+                putObj(data).then(res => {
+                    if(res.resp_code == 200){
+                        this.$message.info('保存成功')
+                        this.getList(this.searchPage)
+                        this.closeModal()
+                    }else{
+                        this.$message.info(res.resp_msg)
+                    }
+                }).catch(err => {
+                    disposereq(this,err)
+                })
             }
         },
         onConfirm(){
             this.$refs.formModelRef.validate(valid => {
                 if(valid){
                     this.saveData()
-                    this.closeModal()
+                    
                 }else{
                     return false
                 }
@@ -354,6 +390,12 @@ export default {
         closeModal(){
             this.modalVisible = false
             this.$refs.formModelRef.resetFields()
+            this.resetAreaSelected()
+        },
+        resetAreaSelected(){
+            this.formModel.areaSelected = []
+            this.showAreaSelect = false
+            var t = setTimeout(() => {this.showAreaSelect = true},0);
         },
         changeLogo(){
             console.log('changeLogo click')
@@ -386,4 +428,8 @@ export default {
 .btn_margin {
   margin: 0px 5px;
 }
+.area-select .area-selected-trigger {
+    padding: 0px 0px 0px 0px;
+    margin: 0px 0px 0px 10px;
+}
 </style>
\ No newline at end of file

yarn.lock

@@ -1457,6 +1457,11 @@ arch@^2.1.1:
   resolved "https://registry.npm.taobao.org/arch/download/arch-2.1.1.tgz#8f5c2731aa35a30929221bb0640eed65175ec84e"
   integrity sha1-j1wnMao1owkpIhuwZA7tZRdeyE4=
 
+area-data@^5.0.6:
+  version "5.0.6"
+  resolved "https://registry.npm.taobao.org/area-data/download/area-data-5.0.6.tgz#c381c3f88ff9e1050accd07549d206fce2a28d13"
+  integrity sha1-w4HD+I/54QUKzNB1SdIG/OKijRM=
+
 argparse@^1.0.7:
   version "1.0.10"
   resolved "https://registry.npm.taobao.org/argparse/download/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
@@ -4945,6 +4950,11 @@ lodash.defaultsdeep@^4.6.1:
   resolved "https://registry.npm.taobao.org/lodash.defaultsdeep/download/lodash.defaultsdeep-4.6.1.tgz#512e9bd721d272d94e3d3a63653fa17516741ca6"
   integrity sha1-US6b1yHSctlOPTpjZT+hdRZ0HKY=
 
+lodash.find@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.npm.taobao.org/lodash.find/download/lodash.find-4.6.0.tgz#cb0704d47ab71789ffa0de8b97dd926fb88b13b1"
+  integrity sha1-ywcE1Hq3F4n/oN6Ll92Sb7iLE7E=
+
 lodash.kebabcase@^4.1.1:
   version "4.1.1"
   resolved "https://registry.npm.taobao.org/lodash.kebabcase/download/lodash.kebabcase-4.1.1.tgz#8489b1cb0d29ff88195cceca448ff6d6cc295c36"
@@ -8027,6 +8037,13 @@ vm-browserify@^1.0.1:
   resolved "https://registry.npm.taobao.org/vm-browserify/download/vm-browserify-1.1.2.tgz?cache=0&sync_timestamp=1572870776965&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvm-browserify%2Fdownload%2Fvm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
   integrity sha1-eGQcSIuObKkadfUR56OzKobl3aA=
 
+vue-area-linkage@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.npm.taobao.org/vue-area-linkage/download/vue-area-linkage-5.1.0.tgz#369962b109907b058aedcf9f7deacb9e65afea03"
+  integrity sha1-NplisQmQewWK7c+fferLnmWv6gM=
+  dependencies:
+    lodash.find "^4.6.0"
+
 vue-eslint-parser@^5.0.0:
   version "5.0.0"
   resolved "https://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-5.0.0.tgz#00f4e4da94ec974b821a26ff0ed0f7a78402b8a1"