From c43eb6bf4cafe921a1115690aef14a879d050823 Mon Sep 17 00:00:00 2001
From: ZhaoTongYao <531131322@qq.com>
Date: Fri, 22 May 2020 13:29:55 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=AE=A2=E6=88=B7=E7=AB=AF?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 epmet-oper-web/package-lock.json              |   8 +
 epmet-oper-web/package.json                   |   1 +
 epmet-oper-web/public/index.html              |   3 +-
 .../modules/c-manage/customer-manage.scss     |  23 ++
 .../customer-manage/customer-info.vue         |  78 ++++
 .../customer-manage/customer-manage.vue       | 338 ++++++++++++++++++
 6 files changed, 450 insertions(+), 1 deletion(-)
 create mode 100644 epmet-oper-web/src/assets/scss/modules/c-manage/customer-manage.scss
 create mode 100644 epmet-oper-web/src/components/customer-manage/customer-info.vue
 create mode 100644 epmet-oper-web/src/views/modules/customer-manage/customer-manage.vue

diff --git a/epmet-oper-web/package-lock.json b/epmet-oper-web/package-lock.json
index 9c36793..d35d618 100644
--- a/epmet-oper-web/package-lock.json
+++ b/epmet-oper-web/package-lock.json
@@ -17941,6 +17941,14 @@
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-1.4.2.tgz",
       "integrity": "sha1-RTAZ9oaWam34PNxSROfJkOzDMvw="
     },
+    "v-distpicker": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/v-distpicker/-/v-distpicker-1.2.2.tgz",
+      "integrity": "sha512-xmlNjiZJYs0eoxsLY3Pkygu+cxYKvGq1fpq9dQC7txRxtO2dM1pOPuz0b0Z1yiR0tjv36kwwCELBS9SSW/CXmQ==",
+      "requires": {
+        "vue": "^2.6.10"
+      }
+    },
     "v8flags": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/v8flags/-/v8flags-2.1.1.tgz",
diff --git a/epmet-oper-web/package.json b/epmet-oper-web/package.json
index 4e80859..a84fd79 100644
--- a/epmet-oper-web/package.json
+++ b/epmet-oper-web/package.json
@@ -33,6 +33,7 @@
     "sass-loader": "^7.1.0",
     "screenfull": "^4.2.1",
     "svg-sprite-loader": "^4.1.6",
+    "v-distpicker": "^1.2.2",
     "vue": "^2.6.11",
     "vue-i18n": "^8.12.0",
     "vue-router": "^3.0.7",
diff --git a/epmet-oper-web/public/index.html b/epmet-oper-web/public/index.html
index 5209c34..6c4b8fc 100644
--- a/epmet-oper-web/public/index.html
+++ b/epmet-oper-web/public/index.html
@@ -29,7 +29,8 @@
 
   <!-- 开发环境 -->
   <% if (process.env.VUE_APP_NODE_ENV === 'dev') { %>
-    <script>window.SITE_CONFIG['apiURL'] = 'http://localhost: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
new file mode 100644
index 0000000..1738489
--- /dev/null
+++ b/epmet-oper-web/src/assets/scss/modules/c-manage/customer-manage.scss
@@ -0,0 +1,23 @@
+.add-c-box{
+    width: 600px;
+    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;
+    }
+}
\ No newline at end of file
diff --git a/epmet-oper-web/src/components/customer-manage/customer-info.vue b/epmet-oper-web/src/components/customer-manage/customer-info.vue
new file mode 100644
index 0000000..0024b4b
--- /dev/null
+++ b/epmet-oper-web/src/components/customer-manage/customer-info.vue
@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <el-button @click="backStep" type="primary" icon="el-icon-back">返回</el-button>
+    <el-card shadow="never" class="aui-card--fill">
+        <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-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">
+                <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">
+              <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>
+            </el-row>
+        </el-row>
+    </el-card>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    dataList: [ Object, Array ]
+  },
+  data () {
+    return {
+      data: this.dataList
+    }
+  },
+  methods: {
+    backStep () {
+      this.$emit('backto')
+    }
+  },
+  beforeDestroy () {
+    this.data = {}
+  },
+  filters: {
+    infoName (key) {
+      return {
+        'customerName': '客户名称',
+        'organizationLevel': '组织级别',
+        'agencyName': '组织名称',
+        'level': '组织级别',
+        'areaCode': '地区编码',
+        'province': '省份',
+        'city': '城市',
+        'district': '区县',
+        'realName': '姓名',
+        'gender': '性别',
+        'mobile': '手机号'
+      }[key]
+    },
+    genderName (key) {
+      return [
+        '未知',
+        '男',
+        '女'
+      ][key]
+    }
+  },
+  watch: {
+    dataList (nVal) {
+      this.data = nVal
+    }
+  }
+}
+</script>
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
new file mode 100644
index 0000000..6364835
--- /dev/null
+++ b/epmet-oper-web/src/views/modules/customer-manage/customer-manage.vue
@@ -0,0 +1,338 @@
+<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-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">
+          <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>
+          </template>
+        </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">
+              <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 @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>
+  </div>
+</template>
+
+<style lang="scss" src="@/assets/scss/modules/c-manage/customer-manage.scss"></style>
+
+<script>
+import mixinViewModule from '@/mixins/view-module'
+import VDistpicker from 'v-distpicker'
+import { Loading } from 'element-ui'
+import componentInfo from '@/components/customer-manage/customer-info'
+// import cloneDeep from 'lodash/cloneDeep'
+
+export default {
+  mixins: [mixinViewModule],
+  data () {
+    return {
+      mixinViewModuleOptions: {
+        getDataListURL: '/oper/crm/customer/getvalidcustomerlist',
+        getDataListIsPage: false
+      },
+      organizationLevels: ['社区级', '乡（镇、街道）级', '区县级', '市级', '省级'],
+      genders: ['未知', '男', '女'],
+      step: 1,
+      details: [],
+      customerId: '',
+      agencyId: '',
+      dataForm2: {
+        customerName: '',
+        organizationLevel: ''
+      },
+      dataForm3: {
+        customerId: '',
+        agencyName: '',
+        level: '',
+        areaCode: '',
+        province: '',
+        city: '',
+        district: ''
+      },
+      dataForm4: {
+        customerId: '',
+        realName: '',
+        gender: '',
+        mobile: '',
+        agencyId: ''
+      },
+      checkMobile: (rule, value, callback) => {
+        if (!Number.isInteger(value)) {
+          return callback(new Error('手机号格式不正确'))
+        }
+        if (value.toString().length !== 11) {
+          return callback(new Error('请输入11位长度的手机号'))
+        }
+        callback()
+      }
+    }
+  },
+  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
+    },
+    toSetUpStep (customerId, step) {
+      this.customerId = customerId
+      this.toStep(step)
+    },
+    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('网络错误')
+      })
+    },
+    async onOpenDetails (customerId) {
+      let loadingInstance = Loading.service()
+      await this.getCustomerDetail(customerId)
+      this.toStep(0)
+      loadingInstance.close()
+    },
+    submitDataForm2 () {
+      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)
+        }
+      }).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)
+        }
+      }).catch(() => {
+        return this.$message.error('网络错误')
+      })
+    },
+    submitDataForm4 () {
+      this.dataForm4.customerId = this.customerId
+      this.dataForm4.agencyId = this.agencyId
+      this.dataForm4.mobile = this.dataForm4.mobile.toString()
+      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)
+        }
+      }).catch(() => {
+        return this.$message.error('网络错误')
+      })
+    },
+    async toNextStep () {
+      let loadingInstance = Loading.service()
+      if (this.step === 2) {
+        await this.submitDataForm2()
+        this.toStep(3)
+      } else if (this.step === 3) {
+        await this.submitDataForm3()
+        this.toStep(4)
+      } else if (this.step === 4) {
+        await this.submitDataForm4()
+        this.toStep(1)
+      }
+      loadingInstance.close()
+    },
+    submitStepHandle () {
+      this.$refs['dataForm'].validate((valid) => {
+        if (!valid) {
+          return false
+        }
+        this.toNextStep()
+      })
+    },
+    onChangeProvince (e) {
+      this.dataForm3.areaCode = e.code
+      this.dataForm3.province = e.value
+    },
+    onChangeCity (e) {
+      this.dataForm3.areaCode = e.code
+      this.dataForm3.city = e.value
+    },
+    onChangeArea (e) {
+      this.dataForm3.areaCode = e.code
+      this.dataForm3.district = e.value
+    }
+  },
+  watch: {
+    step (nVal) {
+      if (nVal === 1) {
+        this.dataForm2 = {
+          customerName: '',
+          organizationLevel: ''
+        }
+        this.dataForm3 = {
+          agencyName: '',
+          level: '',
+          areaCode: '',
+          province: '',
+          city: '',
+          district: ''
+        }
+        this.dataForm4 = {
+          realName: '',
+          gender: '',
+          mobile: ''
+        }
+        this.query()
+      }
+    }
+  }
+}
+</script>