From fdc1e1a0349c52f214507352df6a835c56d2d96a Mon Sep 17 00:00:00 2001
From: ZhaoTongYao <531131322@qq.com>
Date: Sat, 23 May 2020 13:23:53 +0800
Subject: [PATCH] =?UTF-8?q?=E7=95=8C=E9=9D=A2=E4=BC=98=E5=8C=96;level?=
 =?UTF-8?q?=E9=80=89=E6=8B=A9;?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 epmet-oper-web/public/index.html              |   4 +-
 .../modules/c-manage/customer-manage.scss     |  46 +++-
 .../modules/customer-manage/customer-info.vue |  33 +--
 .../customer-manage/customer-manage.vue       | 249 ++++++++++--------
 4 files changed, 186 insertions(+), 146 deletions(-)

diff --git a/epmet-oper-web/public/index.html b/epmet-oper-web/public/index.html
index 6c4b8fc..a5b1e02 100644
--- a/epmet-oper-web/public/index.html
+++ b/epmet-oper-web/public/index.html
@@ -29,8 +29,8 @@
 
   <!-- 开发环境 -->
   <% if (process.env.VUE_APP_NODE_ENV === 'dev') { %>
-    <!-- <script>window.SITE_CONFIG['apiURL'] = 'https://epmet-dev.elinkservice.cn/api';</script> -->
-    <script>window.SITE_CONFIG['apiURL'] = 'http://192.168.1.130:8080/api';</script>
+    <script>window.SITE_CONFIG['apiURL'] = 'https://epmet-dev.elinkservice.cn/api';</script>
+    <!-- <script>window.SITE_CONFIG['apiURL'] = 'http://192.168.1.130:8080/api';</script> -->
   <% } %>
   <!-- 集成测试环境 -->
   <% if (process.env.VUE_APP_NODE_ENV === 'prod:sit') { %>
diff --git a/epmet-oper-web/src/assets/scss/modules/c-manage/customer-manage.scss b/epmet-oper-web/src/assets/scss/modules/c-manage/customer-manage.scss
index 1738489..aa83828 100644
--- a/epmet-oper-web/src/assets/scss/modules/c-manage/customer-manage.scss
+++ b/epmet-oper-web/src/assets/scss/modules/c-manage/customer-manage.scss
@@ -1,23 +1,41 @@
 .add-c-box{
-    width: 600px;
+    width: 850px;
     height: 500px;
     margin: 0 auto;
-    border: 1px dashed grey;
     position: relative;
     padding: 20px 100px;
-    .el-input{
-        width: 300px;
-        & input{
-            width: 100%;
-        }
-    };
-    .el-button{
-        position: absolute;
-        right: 10px;
-        bottom: 10px;
-        width: 200px;
-    };
     h2{
         text-align: center;
     }
+    .el-form{
+        .el-form-item{
+            .el-form-item__content{
+                .el-input{
+                    & input{
+                        width: 100%;
+                    }
+                };
+                .el-select{
+                    width: 100%;
+                }
+                .distpicker-address-wrapper{
+                    select:first-child{
+                        width: 35%;
+                    }
+                    select:nth-child(2){
+                        width: 40%;
+                    }
+                    select:nth-child(3){
+                        width: 23%;
+                    }
+                }
+            }
+        }
+        .el-button{
+            position: absolute;
+            right: 10%;
+            bottom: 1%;
+            width: 200px;
+        };
+    }
 }
\ No newline at end of file
diff --git a/epmet-oper-web/src/views/modules/customer-manage/customer-info.vue b/epmet-oper-web/src/views/modules/customer-manage/customer-info.vue
index de59f77..8257d6d 100644
--- a/epmet-oper-web/src/views/modules/customer-manage/customer-info.vue
+++ b/epmet-oper-web/src/views/modules/customer-manage/customer-info.vue
@@ -1,24 +1,24 @@
 <template>
   <div>
-    <el-button @click="backStep" type="primary" icon="el-icon-back">返回</el-button>
-    <el-card shadow="never" class="aui-card--fill" style="width:600px">
+    <!-- <el-button @click="backStep" type="primary" icon="el-icon-back">返回</el-button> -->
+    <el-card shadow="never" class="aui-card--fill" style="width:800px" v-if="data.length!==0">
         <el-row>
             <h2>客户信息</h2>
-            <el-row v-for="(val, key) in data.customerInfoDTO" :key="key" style="background-color:rgb(23,179,163);margin:10px;color:white;font-size:16px;height:30px;line-height:30px;" :gutter="20">
+            <el-row v-for="(val, key) in data.customerInfoDTO" :key="key" style="margin:10px;font-size:16px;height:30px;line-height:30px;border-bottom:1px solid grey;" :gutter="20">
                 <el-col :span="10">{{key|infoName}}</el-col>
                 <el-col :span="14">{{val}}</el-col>
             </el-row>
         </el-row>
         <el-row>
-            <h2>根级组织信息</h2>
-            <el-row v-for="(val, key) in data.rootAgencyDTO" :key="key" style="background-color:rgb(23,179,163);margin:10px;color:white;font-size:16px;height:30px;line-height:30px;" :gutter="20">
+            <h2 v-if="data.rootAgencyDTO!=null">根级组织信息</h2>
+            <el-row v-for="(val, key) in data.rootAgencyDTO" :key="key" style="margin:10px;font-size:16px;height:30px;line-height:30px;border-bottom:1px solid grey;" :gutter="20">
                 <el-col :span="10">{{key|infoName}}</el-col>
                 <el-col :span="14">{{val}}</el-col>
             </el-row>
         </el-row>
         <el-row>
-            <h2>管理员信息</h2>
-            <el-row v-for="(val, index) in data.managers" :key="index" style="background-color:rgb(23,179,163);margin:10px;color:white;font-size:16px;height:30px;line-height:30px;" :gutter="20">
+            <h2 v-if="data.managers.length!==0">管理员信息</h2>
+            <el-row v-for="(val, index) in data.managers" :key="index" style="margin:10px;font-size:16px;height:30px;line-height:30px;border-bottom:1px solid grey;" :gutter="20">
               <el-col :span="6">{{val.realName}}</el-col>
               <el-col :span="4">{{val.gender|genderName}}</el-col>
               <el-col :span="14">{{val.mobile}}</el-col>
@@ -30,21 +30,22 @@
 <script>
 export default {
   props: {
-    dataList: [ Object, Array ]
+    dataList: {
+      type: [ Object, Array ],
+      default: function () {
+        return {
+          customerInfoDTO: {},
+          rootAgencyDTO: {},
+          managers: []
+        }
+      }
+    }
   },
   data () {
     return {
       data: this.dataList
     }
   },
-  methods: {
-    backStep () {
-      this.$emit('backto')
-    }
-  },
-  beforeDestroy () {
-    this.data = {}
-  },
   filters: {
     infoName (key) {
       return {
diff --git a/epmet-oper-web/src/views/modules/customer-manage/customer-manage.vue b/epmet-oper-web/src/views/modules/customer-manage/customer-manage.vue
index 9bdd7aa..fe412fa 100644
--- a/epmet-oper-web/src/views/modules/customer-manage/customer-manage.vue
+++ b/epmet-oper-web/src/views/modules/customer-manage/customer-manage.vue
@@ -1,17 +1,14 @@
 <template>
   <div>
-    <div v-if="step==0">
-      <componentInfo :dataList="details" @backto="toStep(1)"></componentInfo>
-    </div>
-    <el-button v-show="step==1" type="primary" plain icon="el-icon-circle-plus-outline" style="margin-bottom:10px;" @click="toStep(2)">新增</el-button>
-    <el-card v-show="step==1" shadow="never" class="aui-card--fill">
+    <el-button type="primary" plain icon="el-icon-circle-plus-outline" style="margin-bottom:10px;" @click="toStep(2)">新增</el-button>
+    <el-card shadow="never" class="aui-card--fill">
       <el-table
         v-loading="dataListLoading"
         :data="dataList"
         border
         style="width: 100%;">
         <el-table-column prop="customerName" label="客户名称" header-align="left" align="left" width="300"></el-table-column>
-        <el-table-column label="操作" fixed="right" header-align="center" align="center">
+        <el-table-column label="操作" fixed="right" header-align="right" align="right">
           <template slot-scope="scope">
             <el-button size="small" v-if="!scope.row.hasRootAgency" @click="toSetUpStep(scope.row.customerId, 3)">根级组织设置</el-button>
             <el-button size="small" v-if="!scope.row.hasManager" @click="toSetUpStep(scope.row.customerId, 4)">管理员设置</el-button>
@@ -20,73 +17,78 @@
         </el-table-column>
       </el-table>
     </el-card>
-    <div class="add-c-box" v-if="step==2">
-      <h2>客户信息</h2>
-      <el-form label-position="left" label-width="80px" :model="dataForm2" :rules="dataRule" ref="dataForm" @keyup.enter.native="submitStepHandle()" status-icon>
-        <el-form-item prop="customerName" label="客户名称">
-            <el-input v-model="dataForm2.customerName" key="customerName">
-            <span slot="prefix" class="el-input__icon">
-                <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-user"></use></svg>
-            </span>
-            </el-input>
-        </el-form-item>
-        <el-form-item prop="organizationLevel" label="组织级别">
-          <el-select v-model="dataForm2.organizationLevel" key="organizationLevel">
-              <el-option v-for="(val, key) in organizationLevels" :key="key" :label="val" :value="val"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-button type="primary" @click="submitStepHandle">下一步</el-button>
-      </el-form>
-    </div>
-    <div class="add-c-box" v-else-if="step==3">
-      <h2>根级组织信息</h2>
-      <el-form label-position="left" label-width="80px" :model="dataForm3" :rules="dataRule" ref="dataForm" @keyup.enter.native="submitStepHandle()" status-icon>
-        <el-form-item prop="agencyName" label="组织名称" >
-            <el-input v-model="dataForm3.agencyName" key="agencyName">
+    <el-dialog @close="toStep(0)" width="850px" :visible.sync="centerDialogVisible" center :close-on-click-modal="false" :close-on-press-escape="false">
+      <div v-if="step==1">
+        <componentInfo :dataList="details"></componentInfo>
+      </div>
+      <div class="add-c-box" v-if="step==2">
+        <h2>客户信息</h2>
+        <el-form label-position="left" label-width="80px" :model="dataForm2" :rules="dataRule" ref="dataForm" @keyup.enter.native="submitStepHandle()" status-icon>
+          <el-form-item prop="customerName" label="客户名称">
+              <el-input v-model="dataForm2.customerName" key="customerName">
               <span slot="prefix" class="el-input__icon">
                   <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-user"></use></svg>
               </span>
-            </el-input>
-        </el-form-item>
-        <el-form-item prop="level" label="组织级别">
-            <el-select v-model="dataForm3.level" key="level">
+              </el-input>
+          </el-form-item>
+          <el-form-item prop="organizationLevel" label="组织级别">
+            <el-select v-model="dataForm2.organizationLevel" key="organizationLevel">
                 <el-option v-for="(val, key) in organizationLevels" :key="key" :label="val" :value="val"></el-option>
             </el-select>
-        </el-form-item>
-        <el-form-item prop="district" label="选择地区">
-          <v-distpicker @province="onChangeProvince" @city="onChangeCity" @area="onChangeArea"></v-distpicker>
-        </el-form-item>
-        <el-form-item prop="areaCode" label="地区编码">
-            <el-input v-model="dataForm3.areaCode" key="areaCode"></el-input>
-        </el-form-item>
-        <el-button type="primary" @click="submitStepHandle">下一步</el-button>
-      </el-form>
-    </div>
-    <div class="add-c-box" v-else-if="step==4">
-      <h2>管理员信息</h2>
-      <el-form label-position="left" label-width="80px" :model="dataForm4" :rules="dataRule" ref="dataForm" @keyup.enter.native="submitStepHandle()" status-icon>
-        <el-form-item prop="realName" label="姓名">
-            <el-input v-model="dataForm4.realName" key="realName">
-            <span slot="prefix" class="el-input__icon">
-                <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-user"></use></svg>
-            </span>
-            </el-input>
-        </el-form-item>
-        <el-form-item prop="gender" label="性别">
-            <el-select v-model="dataForm4.gender" key="gender">
-                <el-option v-for="(val, key) in genders" :key="key" :label="val" :value="key"></el-option>
-            </el-select>
-        </el-form-item>
-        <el-form-item prop="mobile" label="手机号">
-            <el-input v-model.number="dataForm4.mobile" key="mobile">
-            <span slot="prefix" class="el-input__icon">
-                <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-user"></use></svg>
-            </span>
-            </el-input>
-        </el-form-item>
-        <el-button type="primary" @click="submitStepHandle">完成</el-button>
-      </el-form>
-    </div>
+          </el-form-item>
+          <el-button type="primary" @click="submitStepHandle">下一步</el-button>
+        </el-form>
+      </div>
+      <div class="add-c-box" v-else-if="step==3">
+        <h2>根级组织信息</h2>
+        <el-form label-position="left" label-width="80px" :model="dataForm3" :rules="dataRule" ref="dataForm" @keyup.enter.native="submitStepHandle()" status-icon>
+          <el-form-item prop="agencyName" label="组织名称" >
+              <el-input v-model="dataForm3.agencyName" key="agencyName">
+                <span slot="prefix" class="el-input__icon">
+                    <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-user"></use></svg>
+                </span>
+              </el-input>
+          </el-form-item>
+          <el-form-item prop="level" label="组织级别">
+              <el-select v-model="dataForm3.level" key="level">
+                  <el-option v-for="(val, key) in organizationLevels" :key="key" :label="val" :value="val"></el-option>
+              </el-select>
+          </el-form-item>
+          <el-form-item prop="district" label="选择地区">
+            <v-distpicker :hideArea="isHideArea" :onlyProvince="isOnlyProvince" @province="onChangeProvince" @city="onChangeCity" @area="onChangeArea"></v-distpicker>
+          </el-form-item>
+          <el-form-item prop="areaCode" label="地区编码">
+              <el-input v-model="dataForm3.areaCode" key="areaCode"></el-input>
+          </el-form-item>
+          <el-button type="primary" @click="submitStepHandle">下一步</el-button>
+        </el-form>
+      </div>
+      <div class="add-c-box" v-else-if="step==4">
+        <h2>管理员信息</h2>
+        <el-form label-position="left" label-width="80px" :model="dataForm4" :rules="dataRule" ref="dataForm" @keyup.enter.native="submitStepHandle()" status-icon>
+          <el-form-item prop="realName" label="姓名">
+              <el-input v-model="dataForm4.realName" key="realName">
+              <span slot="prefix" class="el-input__icon">
+                  <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-user"></use></svg>
+              </span>
+              </el-input>
+          </el-form-item>
+          <el-form-item prop="gender" label="性别">
+              <el-select v-model="dataForm4.gender" key="gender">
+                  <el-option v-for="(val, key) in genders" :key="key" :label="val" :value="key"></el-option>
+              </el-select>
+          </el-form-item>
+          <el-form-item prop="mobile" label="手机号">
+              <el-input v-model.number="dataForm4.mobile" key="mobile">
+              <span slot="prefix" class="el-input__icon">
+                  <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-user"></use></svg>
+              </span>
+              </el-input>
+          </el-form-item>
+          <el-button type="primary" @click="submitStepHandle">完成</el-button>
+        </el-form>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -97,7 +99,6 @@ import mixinViewModule from '@/mixins/view-module'
 import VDistpicker from 'v-distpicker'
 import { Loading } from 'element-ui'
 import componentInfo from './customer-info'
-// import cloneDeep from 'lodash/cloneDeep'
 
 export default {
   mixins: [mixinViewModule],
@@ -107,6 +108,7 @@ export default {
         getDataListURL: '/oper/crm/customer/getvalidcustomerlist',
         getDataListIsPage: false
       },
+      centerDialogVisible: false,
       organizationLevels: ['社区级', '乡（镇、街道）级', '区县级', '市级', '省级'],
       genders: ['未知', '男', '女'],
       step: 1,
@@ -133,6 +135,8 @@ export default {
         mobile: '',
         agencyId: ''
       },
+      isHideArea: false,
+      isOnlyProvince: false,
       checkMobile: (rule, value, callback) => {
         if (!Number.isInteger(value)) {
           return callback(new Error('手机号格式不正确'))
@@ -148,49 +152,12 @@ export default {
   components: {
     VDistpicker, componentInfo
   },
-  computed: {
-    dataRule () {
-      return {
-        customerName: [
-          { required: true, message: '请输入客户名称' }
-        ],
-        organizationLevel: [
-          { required: true, message: '请选择组织级别' }
-        ],
-        agencyName: [
-          { required: true, message: '请输入组织名称' }
-        ],
-        level: [
-          { required: true, message: '请选择组织级别' }
-        ],
-        areaCode: [
-          { required: true, message: '请输入地区编码' }
-        ],
-        province: [
-          { required: true, message: '请选择省份' }
-        ],
-        city: [
-          { required: true, message: '请选择城市' }
-        ],
-        district: [
-          { required: true, message: '请选择区县', trigger: 'blur' }
-        ],
-        realName: [
-          { required: true, message: '请输入姓名' }
-        ],
-        gender: [
-          { required: true, message: '请输入性别' }
-        ],
-        mobile: [
-          { required: true, message: '请输入手机号' },
-          { validator: this.checkMobile }
-        ]
-      }
-    }
-  },
   methods: {
     toStep (s) {
       this.step = s
+      if (s !== 0) {
+        this.centerDialogVisible = true
+      }
     },
     toSetUpStep (customerId, step) {
       this.customerId = customerId
@@ -216,7 +183,7 @@ export default {
     async onOpenDetails (customerId) {
       let loadingInstance = Loading.service()
       await this.getCustomerDetail(customerId)
-      this.toStep(0)
+      this.toStep(1)
       loadingInstance.close()
     },
     submitDataForm2 () {
@@ -273,7 +240,7 @@ export default {
           return this.$message.error(res.msg)
         } else {
           console.log('提交信息成功' + this.step)
-          this.toStep(1)
+          this.toStep(0)
         }
       }).catch(() => {
         return this.$message.error('网络错误')
@@ -311,9 +278,49 @@ export default {
       this.dataForm3.district = e.value
     }
   },
+  computed: {
+    dataRule () {
+      return {
+        customerName: [
+          { required: true, message: '请输入客户名称' }
+        ],
+        organizationLevel: [
+          { required: true, message: '请选择组织级别' }
+        ],
+        agencyName: [
+          { required: true, message: '请输入组织名称' }
+        ],
+        level: [
+          { required: true, message: '请选择组织级别' }
+        ],
+        areaCode: [
+          { required: true, message: '请输入地区编码' }
+        ],
+        province: [
+          { required: true, message: '请选择省份' }
+        ],
+        city: [
+          { required: true, message: '请选择城市' }
+        ],
+        district: [
+          { required: true, message: '请选择区县', trigger: 'blur' }
+        ],
+        realName: [
+          { required: true, message: '请输入姓名' }
+        ],
+        gender: [
+          { required: true, message: '请输入性别' }
+        ],
+        mobile: [
+          { required: true, message: '请输入手机号' },
+          { validator: this.checkMobile }
+        ]
+      }
+    }
+  },
   watch: {
-    step (nVal) {
-      if (nVal === 1) {
+    step (nVal, oVal) {
+      if (nVal === 0) {
         this.dataForm2 = {
           customerName: '',
           organizationLevel: ''
@@ -331,7 +338,21 @@ export default {
           gender: '',
           mobile: ''
         }
-        this.query()
+        this.centerDialogVisible = false
+        if (oVal === 3 || oVal === 4) {
+          this.query()
+        }
+      }
+    },
+    'dataForm3.level': function (nVal) {
+      if (nVal === '省级') {
+        this.isOnlyProvince = true
+      } else if (nVal === '市级') {
+        this.isHideArea = true
+        this.isOnlyProvince = false
+      } else {
+        this.isHideArea = false
+        this.isOnlyProvince = false
       }
     }
   }