From e7ab4b4f77ea538cdda45d2ac3d26133d060f992 Mon Sep 17 00:00:00 2001
From: jiangyuying <jiang478938504@126.com>
Date: Tue, 30 Jun 2020 14:12:12 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=A2=E6=88=B6=E7=AE=A1=E7=90=86=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 epmet-oper-web/.vscode/settings.json          |  43 ++
 epmet-oper-web/public/index.html              |   2 +-
 .../customer-manage/customer-manage.vue       | 402 +++++++++++-------
 3 files changed, 296 insertions(+), 151 deletions(-)
 create mode 100644 epmet-oper-web/.vscode/settings.json

diff --git a/epmet-oper-web/.vscode/settings.json b/epmet-oper-web/.vscode/settings.json
new file mode 100644
index 0000000..fbbfd4c
--- /dev/null
+++ b/epmet-oper-web/.vscode/settings.json
@@ -0,0 +1,43 @@
+{
+  "workbench.colorTheme": "One Monokai",
+  "window.zoomLevel": 1,
+  "terminal.integrated.fontWeightBold": "normal",
+  "workbench.iconTheme": "material-icon-theme",
+  // vscode默认启用了根据文件类型自动设置tabsize的选项
+  "editor.detectIndentation": false,
+  // 重新设定tabsize
+  "editor.tabSize": 2,
+  // #每次保存的时候自动格式化
+  "editor.formatOnSave": false,
+  // #每次保存的时候将代码按eslint格式进行修复
+  "eslint.autoFixOnSave": true,
+  // 添加 vue 支持
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    {
+      "language": "vue",
+      "autoFix": true
+    }
+  ],
+  // #去掉代码结尾的分号
+  "prettier.semi": false,
+  // #使用带引号替代双引号
+  "prettier.singleQuote": true,
+  // #让函数(名)和后面的括号之间加个空格
+  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
+  // #这个按用户自身习惯选择
+  "vetur.format.defaultFormatter.html": "js-beautify-html",
+  // #让vue中的js按编辑器自带的ts格式进行格式化
+  "vetur.format.defaultFormatter.js": "vscode-typescript",
+  "vetur.format.defaultFormatterOptions": {
+    "js-beautify-html": {
+      "wrap_attributes": "force-aligned"
+      // #vue组件中html代码格式化样式
+    }
+  },
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
+  "git.enableSmartCommit": true
+}
\ No newline at end of file
diff --git a/epmet-oper-web/public/index.html b/epmet-oper-web/public/index.html
index c6dd54e..14b63b2 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'] = 'http://localhost:8080/api';</script> -->
   <% } %>
   <!-- 集成测试环境 dev -->
   <% if (process.env.VUE_APP_NODE_ENV === 'prod:sit') { %>
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 0357bdf..aff0ca8 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,6 +1,13 @@
 <template>
   <div>
-    <el-button type="primary" plain icon="el-icon-circle-plus-outline" style="margin-bottom:10px;" @click="toStep(2)">新增</el-button>
+    <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"
@@ -8,107 +15,211 @@
         border
         style="width: 100%;"
         @row-contextmenu="handleRowContext"
-        @cell-dblclick="handleRowContext">
-        <el-table-column prop="logo" label="客户LOGO" header-align="left" align="left" width="100">
+        @cell-dblclick="handleRowContext"
+      >
+        <el-table-column
+          prop="logo"
+          label="客户LOGO"
+          header-align="left"
+          align="left"
+          width="100"
+        >
           <template slot-scope="scope">
-              <el-image
-                v-if="scope.row.logo"
-                style="width: 40px; height: 40px;text-align: center;"
-                :src="scope.row.logo"
-                :preview-src-list="[scope.row.logo]"
-                >
+            <el-image
+              v-if="scope.row.logo"
+              style="width: 40px; height: 40px;text-align: center;"
+              :src="scope.row.logo"
+              :preview-src-list="[scope.row.logo]"
+            >
             </el-image>
             <!-- <img v-if="scope.row.logo" :src="scope.row.logo" class="customer-logo"  /> -->
           </template>
         </el-table-column>
-        <el-table-column prop="customerName" label="客户名称" header-align="left" align="left" width="300"></el-table-column>
-        <el-table-column label="操作" fixed="right" header-align="right" align="right">
+        <el-table-column
+          prop="customerName"
+          label="客户名称"
+          header-align="left"
+          align="left"
+          width="300"
+        ></el-table-column>
+        <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>
-            <el-button size="small" @click="onOpenDetails(scope.row.customerId)">详情</el-button>
+            <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
+            >
+            <el-button size="small" @click="onOpenDetails(scope.row.customerId)"
+              >详情</el-button
+            >
           </template>
         </el-table-column>
       </el-table>
     </el-card>
-    <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">
+    <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">
+      <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
+          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">
+            <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>
+                <svg class="icon-svg" aria-hidden="true">
+                  <use xlink:href="#icon-user"></use>
+                </svg>
               </span>
-              </el-input>
+            </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="key" :value="val"></el-option>
+            <el-select
+              v-model="dataForm2.organizationLevel"
+              key="organizationLevel"
+            >
+              <el-option
+                v-for="(val, key) in organizationLevels"
+                :key="key"
+                :label="key"
+                :value="val"
+              ></el-option>
             </el-select>
           </el-form-item>
           <el-form-item prop="logo" label="客户LOGO">
-              <el-upload
-                class="avatar-uploader"
-                :action="uploadUlr"
-                :show-file-list="false"
-                :on-success="handleAvatarSuccess"
-                >
-                <img v-if="dataForm2.logo" :src="dataForm2.logo" class="avatar">
-                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-                </el-upload>
+            <el-upload
+              class="avatar-uploader"
+              :action="uploadUlr"
+              :show-file-list="false"
+              :on-success="handleAvatarSuccess"
+            >
+              <img v-if="dataForm2.logo" :src="dataForm2.logo" class="avatar" />
+              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+            </el-upload>
           </el-form-item>
           <el-button type="primary" @click="submitStepHandle">下一步</el-button>
         </el-form>
       </div>
-      <div class="add-c-box" v-else-if="step==3">
+      <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
+          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="key" :value="val"></el-option>
-              </el-select>
+            <el-select
+              v-model="dataForm3.level"
+              key="level"
+              @change="onLevelChange"
+            >
+              <el-option
+                v-for="(val, key) in organizationLevels"
+                :key="key"
+                :label="key"
+                :value="val"
+              ></el-option>
+            </el-select>
           </el-form-item>
           <el-form-item :prop="pcd" label="选择地区" :show-message="pcdError">
-            <v-distpicker :hideArea="isHideArea" :onlyProvince="isOnlyProvince" @province="onChangeProvince" @city="onChangeCity" @area="onChangeArea"></v-distpicker>
+            <v-distpicker
+              :hideArea="isHideArea"
+              :province="dataForm3.province"
+              :city="dataForm3.city"
+              :area="dataForm3.district"
+              :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" disabled></el-input>
+            <el-input
+              v-model="dataForm3.areaCode"
+              key="areaCode"
+              disabled
+            ></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>
+      <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">
+            <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>
+                <svg class="icon-svg" aria-hidden="true">
+                  <use xlink:href="#icon-user"></use>
+                </svg>
               </span>
-              </el-input>
+            </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-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">
+            <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>
+                <svg class="icon-svg" aria-hidden="true">
+                  <use xlink:href="#icon-user"></use>
+                </svg>
               </span>
-              </el-input>
+            </el-input>
           </el-form-item>
           <el-button type="primary" @click="submitStepHandle">完成</el-button>
         </el-form>
@@ -117,7 +228,10 @@
   </div>
 </template>
 
-<style lang="scss" src="@/assets/scss/modules/c-manage/customer-manage.scss"></style>
+<style
+  lang="scss"
+  src="@/assets/scss/modules/c-manage/customer-manage.scss"
+></style>
 
 <script>
 import mixinViewModule from '@/mixins/view-module'
@@ -138,11 +252,11 @@ export default {
       pcdError: true,
       centerDialogVisible: false,
       organizationLevels: {
-        '社区级': 'community',
+        社区级: 'community',
         '乡（镇、街道）级': 'street',
-        '区县级': 'district',
-        '市级': 'city',
-        '省级': 'province'
+        区县级: 'district',
+        市级: 'city',
+        省级: 'province'
       },
       genders: ['未知', '男', '女'],
       step: 1,
@@ -185,7 +299,8 @@ export default {
     }
   },
   components: {
-    VDistpicker, componentInfo
+    VDistpicker,
+    componentInfo
   },
   methods: {
     toStep (s) {
@@ -200,20 +315,20 @@ export default {
     },
     getCustomerDetail (id) {
       const url = '/oper/crm/customer/detail'
-      this.$http.post(
-        url,
-        { customerId: id }
-      ).then(({ data: res }) => {
-        if (res.code !== 0) {
-          return this.$message.error(res.msg)
-        } else {
-          console.log('获取详情成功')
-          this.details = res.data
-          console.log(res.data)
-        }
-      }).catch(() => {
-        return this.$message.error('网络错误')
-      })
+      this.$http
+        .post(url, { customerId: id })
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          } else {
+            console.log('获取详情成功')
+            this.details = res.data
+            console.log(res.data)
+          }
+        })
+        .catch(() => {
+          return this.$message.error('网络错误')
+        })
     },
     async onOpenDetails (customerId) {
       let loadingInstance = Loading.service()
@@ -225,40 +340,40 @@ export default {
       console.log(this.dataForm2)
       const url = '/oper/crm/customer/add'
       const dataForm = this.dataForm2
-      return this.$http.post(
-        url,
-        dataForm
-      ).then(({ data: res }) => {
-        if (res.code !== 0) {
-          return this.$message.error(res.msg)
-        } else {
-          this.customerId = res.data.customerId
-          console.log('提交信息成功' + this.step)
-          this.toStep(3)
-        }
-      }).catch(() => {
-        return this.$message.error('网络错误')
-      })
+      return this.$http
+        .post(url, dataForm)
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          } else {
+            this.customerId = res.data.customerId
+            console.log('提交信息成功' + this.step)
+            this.toStep(3)
+          }
+        })
+        .catch(() => {
+          return this.$message.error('网络错误')
+        })
     },
     submitDataForm3 () {
       this.dataForm3.customerId = this.customerId
       console.log(this.dataForm3)
       const url = '/oper/crm/customer/addrootagency'
       const dataForm = this.dataForm3
-      return this.$http.post(
-        url,
-        dataForm
-      ).then(({ data: res }) => {
-        if (res.code !== 0) {
-          return this.$message.error(res.msg)
-        } else {
-          this.agencyId = res.data.agencyId
-          console.log('提交信息成功' + this.step)
-          this.toStep(4)
-        }
-      }).catch(() => {
-        return this.$message.error('网络错误')
-      })
+      return this.$http
+        .post(url, dataForm)
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          } else {
+            this.agencyId = res.data.agencyId
+            console.log('提交信息成功' + this.step)
+            this.toStep(4)
+          }
+        })
+        .catch(() => {
+          return this.$message.error('网络错误')
+        })
     },
     submitDataForm4 () {
       this.dataForm4.customerId = this.customerId
@@ -267,19 +382,19 @@ export default {
       console.log(this.dataForm4)
       const url = '/oper/crm/customer/addmanager'
       const dataForm = this.dataForm4
-      return this.$http.post(
-        url,
-        dataForm
-      ).then(({ data: res }) => {
-        if (res.code !== 0) {
-          return this.$message.error(res.msg)
-        } else {
-          console.log('提交信息成功' + this.step)
-          this.toStep(0)
-        }
-      }).catch(() => {
-        return this.$message.error('网络错误')
-      })
+      return this.$http
+        .post(url, dataForm)
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          } else {
+            console.log('提交信息成功' + this.step)
+            this.toStep(0)
+          }
+        })
+        .catch(() => {
+          return this.$message.error('网络错误')
+        })
     },
     async toNextStep () {
       let loadingInstance = Loading.service()
@@ -300,6 +415,12 @@ export default {
         this.toNextStep()
       })
     },
+    // 改变组织级别
+    onLevelChange (e) {
+      this.dataForm3.province = ''
+      this.dataForm3.city = ''
+      this.dataForm3.district = ''
+    },
     onChangeProvince (e) {
       this.dataForm3.areaCode = e.code
       this.dataForm3.province = e.value
@@ -325,8 +446,9 @@ export default {
       }
     },
     handleAvatarSuccess (res, file) {
-      if (res.code === 0 && res.msg === 'success') this.dataForm2.logo = res.data.url
-      else this.$message.error(res.msg)
+      if (res.code === 0 && res.msg === 'success') {
+        this.dataForm2.logo = res.data.url
+      } else this.$message.error(res.msg)
     },
     beforeAvatarUpload (file) {
       const isJPG = file.type === 'image/jpeg'
@@ -366,36 +488,16 @@ export default {
   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: '请选择省份', trigger: 'blur' }
-        ],
-        city: [
-          { required: true, message: '请选择城市', trigger: 'blur' }
-        ],
-        district: [
-          { required: true, message: '请选择区县', trigger: 'blur' }
-        ],
-        realName: [
-          { required: true, message: '请输入姓名' }
-        ],
-        gender: [
-          { required: true, message: '请输入性别' }
-        ],
+        customerName: [{ required: true, message: '请输入客户名称' }],
+        organizationLevel: [{ required: true, message: '请选择组织级别' }],
+        agencyName: [{ required: true, message: '请输入组织名称' }],
+        level: [{ required: true, message: '请选择组织级别' }],
+        areaCode: [{ required: true, message: '请输入地区编码' }],
+        province: [{ required: true, message: '请选择省份', trigger: 'blur' }],
+        city: [{ required: true, message: '请选择城市', trigger: 'blur' }],
+        district: [{ required: true, message: '请选择区县', trigger: 'blur' }],
+        realName: [{ required: true, message: '请输入姓名' }],
+        gender: [{ required: true, message: '请输入性别' }],
         mobile: [
           { required: true, message: '请输入手机号' },
           { validator: this.checkMobile }