elink-star
/
epmet-oper-lingshan
12
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

界面优化;level选择;

master
ZhaoTongYao 5 years ago
parent
119d5bec93
commit
fdc1e1a034
4 changed files with 186 additions and 146 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      epmet-oper-web/public/index.html
  2. 46
      epmet-oper-web/src/assets/scss/modules/c-manage/customer-manage.scss
  3. 33
      epmet-oper-web/src/views/modules/customer-manage/customer-info.vue
  4. 249
      epmet-oper-web/src/views/modules/customer-manage/customer-manage.vue

4
epmet-oper-web/public/index.html
View File

@ -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') { %>

46
epmet-oper-web/src/assets/scss/modules/c-manage/customer-manage.scss
View File

@ -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;
};
}
}

33
epmet-oper-web/src/views/modules/customer-manage/customer-info.vue
View File

@ -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 {

249
epmet-oper-web/src/views/modules/customer-manage/customer-manage.vue
View File

@ -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
}
}
}

Write Preview
Loading…
Cancel
Save