|
|
@ -2,16 +2,22 @@ |
|
|
|
<div class="app-container"> |
|
|
|
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"> |
|
|
|
<el-form-item :label="$t('business.userManager.userInfo.account')" prop="account" label-width="120"> |
|
|
|
<el-input v-model="queryParams.account" :placeholder="$t('business.userManager.userInfo.accountPlaceholder')" clearable @keyup.enter.native="handleQuery" /> |
|
|
|
<el-input v-model="queryParams.account" :placeholder="$t('business.userManager.userInfo.accountPlaceholder')" |
|
|
|
clearable @keyup.enter.native="handleQuery"/> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item :label="$t('business.userManager.userInfo.idCard')" prop="idCard" label-width="auto"> |
|
|
|
<el-input v-model="queryParams.idCard" :placeholder="$t('business.userManager.userInfo.idCardPlaceholder')" clearable @keyup.enter.native="handleQuery" /> |
|
|
|
<el-input v-model="queryParams.idCard" :placeholder="$t('business.userManager.userInfo.idCardPlaceholder')" |
|
|
|
clearable @keyup.enter.native="handleQuery"/> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item :label="$t('business.userManager.userInfo.phone')" prop="phone" label-width="auto"> |
|
|
|
<el-input v-model="queryParams.phone" :placeholder="$t('business.userManager.userInfo.phonePlaceholder')" clearable @keyup.enter.native="handleQuery" /> |
|
|
|
<el-input v-model="queryParams.phone" :placeholder="$t('business.userManager.userInfo.phonePlaceholder')" |
|
|
|
clearable @keyup.enter.native="handleQuery"/> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item> |
|
|
|
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{ $t('common.button.search') }}</el-button> |
|
|
|
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{ |
|
|
|
$t('common.button.search') |
|
|
|
}} |
|
|
|
</el-button> |
|
|
|
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('common.button.reset') }}</el-button> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
@ -19,46 +25,54 @@ |
|
|
|
<el-row :gutter="10" class="mb8"> |
|
|
|
<el-col :span="1.5"> |
|
|
|
<el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" |
|
|
|
v-hasPermi="['business:userInfo:edit']">{{ $t('common.button.edit') }}</el-button> |
|
|
|
v-hasPermi="['business:userInfo:edit']">{{ $t('common.button.edit') }} |
|
|
|
</el-button> |
|
|
|
</el-col> |
|
|
|
<el-col :span="1.5"> |
|
|
|
<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" |
|
|
|
v-hasPermi="['business:userInfo:export']">{{ $t('common.button.export') }}</el-button> |
|
|
|
v-hasPermi="['business:userInfo:export']">{{ $t('common.button.export') }} |
|
|
|
</el-button> |
|
|
|
</el-col> |
|
|
|
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> |
|
|
|
</el-row> |
|
|
|
|
|
|
|
<el-table v-loading="loading" :data="userInfoList" @selection-change="handleSelectionChange"> |
|
|
|
<el-table-column type="selection" width="55" align="center" /> |
|
|
|
<el-table-column :label="$t('business.userManager.userInfo.account')" align="center" prop="account" /> |
|
|
|
<el-table-column :label="$t('business.userManager.userInfo.name')" align="center" prop="name" /> |
|
|
|
<el-table-column :label="$t('business.userManager.userInfo.gender')" align="center" prop="gender" > |
|
|
|
<el-table-column type="selection" width="55" align="center"/> |
|
|
|
<el-table-column :label="$t('business.userManager.userInfo.account')" align="center" prop="account"/> |
|
|
|
<el-table-column :label="$t('business.userManager.userInfo.name')" align="center" prop="name"/> |
|
|
|
<el-table-column :label="$t('business.userManager.userInfo.gender')" align="center" prop="gender"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<el-tag v-if="scope.row.gender == '1'">{{ $t('common.dict.male') }}</el-tag> |
|
|
|
<el-tag v-if="scope.row.gender == '0'">{{ $t('common.dict.female') }}</el-tag> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column :label="$t('business.userManager.userInfo.idCard')" align="center" prop="idCard" /> |
|
|
|
<el-table-column :label="$t('business.userManager.userInfo.phone')" align="center" prop="phone" /> |
|
|
|
<el-table-column :label="$t('business.userManager.userRegister.contactAddress')" align="center" prop="contactAddress" /> |
|
|
|
<el-table-column :label="$t('business.userManager.userInfo.email')" align="center" prop="email" /> |
|
|
|
<el-table-column :label="$t('business.userManager.userInfo.addr')" align="center" prop="addr" /> |
|
|
|
<el-table-column :label="$t('business.userManager.userInfo.idCard')" align="center" prop="idCard"/> |
|
|
|
<el-table-column :label="$t('business.userManager.userInfo.phone')" align="center" prop="phone"/> |
|
|
|
<el-table-column :label="$t('business.userManager.userRegister.contactAddress')" align="center" |
|
|
|
prop="contactAddress"/> |
|
|
|
<el-table-column :label="$t('business.userManager.userInfo.email')" align="center" prop="email"/> |
|
|
|
<el-table-column :label="$t('business.userManager.userInfo.addr')" align="center" prop="addr"/> |
|
|
|
<el-table-column :label="$t('business.userManager.userInfo.status')" align="center" prop="status"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<el-tag v-if="scope.row.status == '0'">{{ $t('business.userManager.userInfo.statusNormal') }}</el-tag> |
|
|
|
<el-tag type="danger" v-if="scope.row.status == '1'">{{ $t('business.userManager.userInfo.statusDisabled') }}</el-tag> |
|
|
|
<el-tag type="danger" v-if="scope.row.status == '1'">{{ |
|
|
|
$t('business.userManager.userInfo.statusDisabled') |
|
|
|
}} |
|
|
|
</el-tag> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column :label="$t('common.tableMsg.operation')" align="center" width="200" class-name="small-padding fixed-width"> |
|
|
|
<el-table-column :label="$t('common.tableMsg.operation')" align="center" width="200" |
|
|
|
class-name="small-padding fixed-width"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" |
|
|
|
v-hasPermi="['business:userInfo:edit']">{{ $t('common.button.edit') }}</el-button> |
|
|
|
v-hasPermi="['business:userInfo:edit']">{{ $t('common.button.edit') }} |
|
|
|
</el-button> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
|
|
|
|
<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" |
|
|
|
@pagination="getList" /> |
|
|
|
@pagination="getList"/> |
|
|
|
|
|
|
|
<!-- 添加或修改用户信息对话框 --> |
|
|
|
<el-dialog :title="title" :visible.sync="open" width="700px" append-to-body> |
|
|
@ -67,33 +81,37 @@ |
|
|
|
<el-input v-model="form.email" :placeholder="$t('business.userManager.userInfo.emailPlaceholder')"/> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item :label="$t('business.userManager.userInfo.name')" prop="name"> |
|
|
|
<el-input v-model="form.name" :placeholder="$t('business.userManager.userInfo.namePlaceholder')" /> |
|
|
|
<el-input v-model="form.name" :placeholder="$t('business.userManager.userInfo.namePlaceholder')"/> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item :label="$t('business.userManager.userInfo.gender')" prop="gender"> |
|
|
|
<el-radio-group v-model="form.gender"> |
|
|
|
<el-radio label="1">{{ $t('common.dict.male') }}</el-radio> |
|
|
|
<el-radio label="0">{{ $t('common.dict.female') }}</el-radio> |
|
|
|
</el-radio-group> |
|
|
|
<!-- <el-input v-model="form.gender" :placeholder="$t('business.userManager.userInfo.genderPlaceholder')" />--> |
|
|
|
<!-- <el-input v-model="form.gender" :placeholder="$t('business.userManager.userInfo.genderPlaceholder')" />--> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item :label="$t('business.userManager.userInfo.idCard')" prop="idCard"> |
|
|
|
<el-input v-model="form.idCard" :placeholder="$t('business.userManager.userInfo.idCardPlaceholder')" /> |
|
|
|
<el-input v-model="form.idCard" :placeholder="$t('business.userManager.userInfo.idCardPlaceholder')"/> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item :label="$t('business.userManager.userInfo.phone')" prop="phone"> |
|
|
|
<el-input v-model="form.phone" :placeholder="$t('business.userManager.userInfo.phonePlaceholder')" /> |
|
|
|
<el-input v-model="form.phone" :placeholder="$t('business.userManager.userInfo.phonePlaceholder')"/> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item :label="$t('business.userManager.userInfo.addr')" prop="addr"> |
|
|
|
<el-cascader |
|
|
|
:v-model="form.addr" |
|
|
|
v-model="form.addr" |
|
|
|
:options="options_addr" |
|
|
|
@change="handleChange"></el-cascader> |
|
|
|
@change="handleChange" |
|
|
|
clearable></el-cascader> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item :label="$t('business.userManager.userInfo.detailAddr')" prop="addrDetail"> |
|
|
|
<el-input v-model="form.addrDetail" :placeholder="$t('business.userManager.userInfo.addrPlaceholder')" /> |
|
|
|
<el-input v-model="form.addrDetail" :placeholder="$t('business.userManager.userInfo.addrPlaceholder')"/> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
<div slot="footer" class="dialog-footer"> |
|
|
|
<el-button :loading="buttonLoading" type="primary" @click="submitForm">{{ $t('common.button.confirm') }}</el-button> |
|
|
|
<el-button :loading="buttonLoading" type="primary" @click="submitForm">{{ |
|
|
|
$t('common.button.confirm') |
|
|
|
}} |
|
|
|
</el-button> |
|
|
|
<el-button @click="cancel">{{ $t('common.button.cancel') }}</el-button> |
|
|
|
</div> |
|
|
|
</el-dialog> |
|
|
@ -102,28 +120,28 @@ |
|
|
|
<el-dialog :title="title" :visible.sync="detailOpen" width="700px" append-to-body> |
|
|
|
<el-form ref="form" :model="form" label-width="auto"> |
|
|
|
<el-form-item :label="$t('business.userManager.userInfo.detailUserId')"> |
|
|
|
{{form.userCode}} |
|
|
|
{{ form.userCode }} |
|
|
|
</el-form-item> |
|
|
|
<el-form-item :label="$t('business.userManager.userInfo.detailName')"> |
|
|
|
{{form.name}} |
|
|
|
{{ form.name }} |
|
|
|
</el-form-item> |
|
|
|
<el-form-item :label="$t('business.userManager.userInfo.detailGender')"> |
|
|
|
{{form.gender}} |
|
|
|
{{ form.gender }} |
|
|
|
</el-form-item> |
|
|
|
<el-form-item :label="$t('business.userManager.userInfo.detailIdCard')"> |
|
|
|
{{form.idCard}} |
|
|
|
{{ form.idCard }} |
|
|
|
</el-form-item> |
|
|
|
<el-form-item :label="$t('business.userManager.userInfo.detailPhone')"> |
|
|
|
{{form.phone}} |
|
|
|
{{ form.phone }} |
|
|
|
</el-form-item> |
|
|
|
<el-form-item :label="$t('business.agent.userInfoAgent.contactAddress')"> |
|
|
|
{{form.contactAddress}} |
|
|
|
{{ form.contactAddress }} |
|
|
|
</el-form-item> |
|
|
|
<el-form-item :label="$t('business.userManager.userInfo.detailAge')"> |
|
|
|
{{form.age}} |
|
|
|
{{ form.age }} |
|
|
|
</el-form-item> |
|
|
|
<el-form-item :label="$t('business.userManager.userInfo.detailAddr')"> |
|
|
|
{{form.addr}} |
|
|
|
{{ form.addr }} |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
<div slot="footer" class="dialog-footer"> |
|
|
@ -134,16 +152,16 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { |
|
|
|
import { |
|
|
|
listUserInfo, |
|
|
|
getUserInfo, |
|
|
|
delUserInfo, |
|
|
|
addUserInfo, |
|
|
|
updateUserInfo, |
|
|
|
getAddress |
|
|
|
} from "@/api/business/userInfo"; |
|
|
|
} from "@/api/business/userInfo"; |
|
|
|
|
|
|
|
export default { |
|
|
|
export default { |
|
|
|
name: "UserInfo", |
|
|
|
data() { |
|
|
|
return { |
|
|
@ -164,7 +182,7 @@ |
|
|
|
// 用户信息表格数据 |
|
|
|
userInfoList: [], |
|
|
|
//地址选择列表 |
|
|
|
options_addr:[], |
|
|
|
options_addr: [], |
|
|
|
// 弹出层标题 |
|
|
|
title: "", |
|
|
|
// 是否显示弹出层 |
|
|
@ -196,28 +214,47 @@ |
|
|
|
// 表单校验 |
|
|
|
rules: { |
|
|
|
name: [ |
|
|
|
{ required: true, message: this.$t('business.userManager.userInfo.nameRequired'), trigger: "blur" } |
|
|
|
{required: true, message: this.$t('business.userManager.userInfo.nameRequired'), trigger: "blur"} |
|
|
|
], |
|
|
|
gender: [ |
|
|
|
{ required: true, message: this.$t('business.userManager.userInfo.genderRequired'), trigger: "blur" } |
|
|
|
{required: true, message: this.$t('business.userManager.userInfo.genderRequired'), trigger: "blur"} |
|
|
|
], |
|
|
|
idCard: [ |
|
|
|
{ required: true,pattern: /^\d+$/, message: this.$t('business.userManager.userInfo.idCardRequired'), trigger: "blur" } |
|
|
|
{ |
|
|
|
required: true, |
|
|
|
pattern: /^\d+$/, |
|
|
|
message: this.$t('business.userManager.userInfo.idCardRequired'), |
|
|
|
trigger: "blur" |
|
|
|
} |
|
|
|
], |
|
|
|
phone: [ |
|
|
|
{ required: true,pattern: /^\d+$/, message: this.$t('business.userManager.userInfo.phoneRequired') , trigger: "blur" } |
|
|
|
{ |
|
|
|
required: true, |
|
|
|
pattern: /^\d+$/, |
|
|
|
message: this.$t('business.userManager.userInfo.phoneRequired'), |
|
|
|
trigger: "blur" |
|
|
|
} |
|
|
|
], |
|
|
|
email: [ |
|
|
|
{ required: true, pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9-]+\.[a-zA-Z]{2,}(?:\.[a-zA-Z]{2,})?$/, message: this.$t('business.userManager.userInfo.emailRequired'), trigger: "blur" } |
|
|
|
{ |
|
|
|
required: true, |
|
|
|
pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9-]+\.[a-zA-Z]{2,}(?:\.[a-zA-Z]{2,})?$/, |
|
|
|
message: this.$t('business.userManager.userInfo.emailRequired'), |
|
|
|
trigger: "blur" |
|
|
|
} |
|
|
|
], |
|
|
|
addr: [ |
|
|
|
{ required: true, message: this.$t('business.userManager.userInfo.addrRequired'), trigger: "change" } |
|
|
|
{required: true, message: this.$t('business.userManager.userInfo.addrRequired'), trigger: "change"} |
|
|
|
], |
|
|
|
addrDetail: [ |
|
|
|
{ required: true, message: this.$t('business.userManager.userInfo.addrRequired'), trigger: "change" } |
|
|
|
{required: true, message: this.$t('business.userManager.userInfo.addrRequired'), trigger: "change"} |
|
|
|
], |
|
|
|
contactAddress: [ |
|
|
|
{ required: true, message: this.$t('business.agent.userInfoAgent.rule.contactAddressRequired'), trigger: "change" } |
|
|
|
{ |
|
|
|
required: true, |
|
|
|
message: this.$t('business.agent.userInfoAgent.rule.contactAddressRequired'), |
|
|
|
trigger: "change" |
|
|
|
} |
|
|
|
] |
|
|
|
} |
|
|
|
}; |
|
|
@ -265,6 +302,14 @@ |
|
|
|
phone: undefined, |
|
|
|
age: undefined, |
|
|
|
addr: undefined, |
|
|
|
// addr: [{ |
|
|
|
// value: 'zhinan', |
|
|
|
// label: '指南', |
|
|
|
// children: [{ |
|
|
|
// value: 'shejiyuanze', |
|
|
|
// label: '设计原则', |
|
|
|
// }], |
|
|
|
// }], |
|
|
|
status: undefined, |
|
|
|
delFlag: undefined, |
|
|
|
createBy: undefined, |
|
|
@ -301,10 +346,31 @@ |
|
|
|
handleUpdate(row) { |
|
|
|
this.loading = true; |
|
|
|
this.reset(); |
|
|
|
const id = row.id || this.ids |
|
|
|
const id = row.id || this.ids; |
|
|
|
getUserInfo(id).then(response => { |
|
|
|
this.loading = false; |
|
|
|
this.form = response.data; |
|
|
|
|
|
|
|
// 处理地址回显 |
|
|
|
const addrValue = this.form.addr; |
|
|
|
if (addrValue) { |
|
|
|
const addrArray = addrValue.split(','); |
|
|
|
const provinceValue = addrArray[0]; |
|
|
|
const cityValue = addrArray[1]; |
|
|
|
|
|
|
|
const province = this.options_addr.find(item => item.value === provinceValue); |
|
|
|
if (province) { |
|
|
|
if (cityValue) { |
|
|
|
const city = province.children.find(item => item.value === cityValue); |
|
|
|
if (city) { |
|
|
|
this.form.addr = [provinceValue, cityValue]; |
|
|
|
console.log(this.form); |
|
|
|
} |
|
|
|
} else { |
|
|
|
this.form.addr = [provinceValue]; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
this.open = true; |
|
|
|
this.title = this.$t('business.userManager.userInfo.editTitle'); |
|
|
|
}); |
|
|
@ -345,7 +411,8 @@ |
|
|
|
this.loading = false; |
|
|
|
this.getList(); |
|
|
|
this.$modal.msgSuccess(this.$t('common.button.deleteSuccess')); |
|
|
|
}).catch(() => {}).finally(() => { |
|
|
|
}).catch(() => { |
|
|
|
}).finally(() => { |
|
|
|
this.loading = false; |
|
|
|
}); |
|
|
|
}, |
|
|
@ -360,12 +427,21 @@ |
|
|
|
this.loading = true; |
|
|
|
getAddress(this.$i18n.locale).then(response => { |
|
|
|
this.options_addr = response.data; |
|
|
|
console.log("页面展示", this.options_addr); |
|
|
|
}); |
|
|
|
}, |
|
|
|
/** 地址联动事件 **/ |
|
|
|
handleChange(value) { |
|
|
|
this.form.addr = value; |
|
|
|
console.log("地址联动事件" + value); |
|
|
|
}, |
|
|
|
/** |
|
|
|
* 地址转换函数 |
|
|
|
*/ |
|
|
|
listToString(list, separator) { |
|
|
|
list = list || []; // 非空判断 |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
}; |
|
|
|
</script> |
|
|
|