|
|
@@ -48,6 +48,16 @@
|
|
|
@keyup.enter.native="handleQuery"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
+ <el-form-item label="区域" prop="cityIds">
|
|
|
+ <el-cascader
|
|
|
+ v-model="queryCityIds"
|
|
|
+ :options="citys"
|
|
|
+ clearable
|
|
|
+ size="small"
|
|
|
+ placeholder="请选择省市区"
|
|
|
+ style="width: 240px"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
<el-form-item label="状态" prop="status">
|
|
|
<el-select
|
|
|
v-model="queryParams.status"
|
|
|
@@ -146,7 +156,12 @@
|
|
|
<el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" v-if="columns[2].visible" :show-overflow-tooltip="true" />
|
|
|
<el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" v-if="columns[3].visible" :show-overflow-tooltip="true" />
|
|
|
<el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" v-if="columns[4].visible" width="120" />
|
|
|
- <el-table-column label="状态" align="center" key="status" v-if="columns[5].visible">
|
|
|
+ <el-table-column label="区域" align="center" key="area" v-if="columns[5].visible" :show-overflow-tooltip="true" min-width="140">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ (scope.row.province || '') + (scope.row.city || '') + (scope.row.district || '') }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="状态" align="center" key="status" v-if="columns[6].visible">
|
|
|
<template slot-scope="scope">
|
|
|
<el-switch
|
|
|
v-model="scope.row.status"
|
|
|
@@ -156,7 +171,7 @@
|
|
|
></el-switch>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[6].visible" width="160">
|
|
|
+ <el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[7].visible" width="160">
|
|
|
<template slot-scope="scope">
|
|
|
<span>{{ parseTime(scope.row.createTime) }}</span>
|
|
|
</template>
|
|
|
@@ -301,6 +316,21 @@
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="区域" prop="cityIds">
|
|
|
+ <el-cascader
|
|
|
+ ref="citySelect"
|
|
|
+ v-model="form.cityIds"
|
|
|
+ :options="citys"
|
|
|
+ clearable
|
|
|
+ placeholder="请选择省市区"
|
|
|
+ style="width: 100%"
|
|
|
+ @change="handleCityChange"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
<el-row>
|
|
|
<el-col :span="24">
|
|
|
<el-form-item label="备注">
|
|
|
@@ -352,6 +382,7 @@ import { listUser, getUser, delUser, addUser, updateUser, exportUser, resetUserP
|
|
|
import {addSet,getSet } from "@/api/system/set";
|
|
|
import { getToken } from "@/utils/auth";
|
|
|
import { treeselect } from "@/api/system/dept";
|
|
|
+import { getCitys } from "@/api/store/city";
|
|
|
import Treeselect from "@riophae/vue-treeselect";
|
|
|
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
|
|
|
|
|
@@ -396,6 +427,10 @@ export default {
|
|
|
postOptions: [],
|
|
|
// 角色选项
|
|
|
roleOptions: [],
|
|
|
+ // 省市区树
|
|
|
+ citys: [],
|
|
|
+ // 查询用级联值
|
|
|
+ queryCityIds: [],
|
|
|
// 表单参数
|
|
|
form: {},
|
|
|
defaultProps: {
|
|
|
@@ -424,7 +459,8 @@ export default {
|
|
|
userName: undefined,
|
|
|
phonenumber: undefined,
|
|
|
status: undefined,
|
|
|
- deptId: undefined
|
|
|
+ deptId: undefined,
|
|
|
+ cityIds: undefined
|
|
|
},
|
|
|
// 列信息
|
|
|
columns: [
|
|
|
@@ -433,8 +469,9 @@ export default {
|
|
|
{ key: 2, label: `用户昵称`, visible: true },
|
|
|
{ key: 3, label: `部门`, visible: true },
|
|
|
{ key: 4, label: `手机号码`, visible: true },
|
|
|
- { key: 5, label: `状态`, visible: true },
|
|
|
- { key: 6, label: `创建时间`, visible: true }
|
|
|
+ { key: 5, label: `区域`, visible: true },
|
|
|
+ { key: 6, label: `状态`, visible: true },
|
|
|
+ { key: 7, label: `创建时间`, visible: true }
|
|
|
],
|
|
|
// 表单校验
|
|
|
rules: {
|
|
|
@@ -475,6 +512,7 @@ export default {
|
|
|
created() {
|
|
|
this.getList();
|
|
|
this.getTreeselect();
|
|
|
+ this.getCitys();
|
|
|
this.getDicts("sys_normal_disable").then(response => {
|
|
|
this.statusOptions = response.data;
|
|
|
});
|
|
|
@@ -489,13 +527,42 @@ export default {
|
|
|
/** 查询用户列表 */
|
|
|
getList() {
|
|
|
this.loading = true;
|
|
|
- listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
|
|
|
+ const params = this.addDateRange({ ...this.queryParams }, this.dateRange);
|
|
|
+ if (this.queryCityIds && this.queryCityIds.length) {
|
|
|
+ params.cityIds = this.queryCityIds.toString();
|
|
|
+ } else {
|
|
|
+ params.cityIds = undefined;
|
|
|
+ }
|
|
|
+ listUser(params).then(response => {
|
|
|
this.userList = response.rows;
|
|
|
this.total = response.total;
|
|
|
this.loading = false;
|
|
|
}
|
|
|
);
|
|
|
},
|
|
|
+ /** 加载省市区 */
|
|
|
+ getCitys() {
|
|
|
+ getCitys().then(res => {
|
|
|
+ this.citys = res.data || [];
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /** 区域变更 */
|
|
|
+ handleCityChange(value) {
|
|
|
+ if (!value || !value.length) {
|
|
|
+ this.form.cityIds = null;
|
|
|
+ this.form.province = null;
|
|
|
+ this.form.city = null;
|
|
|
+ this.form.district = null;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const nodes = this.$refs.citySelect.getCheckedNodes();
|
|
|
+ this.form.cityIds = value.toString();
|
|
|
+ if (nodes && nodes.length && nodes[0].pathLabels) {
|
|
|
+ this.form.province = nodes[0].pathLabels[0] || null;
|
|
|
+ this.form.city = nodes[0].pathLabels[1] || null;
|
|
|
+ this.form.district = nodes[0].pathLabels[2] || null;
|
|
|
+ }
|
|
|
+ },
|
|
|
/** 查询部门下拉树结构 */
|
|
|
getTreeselect() {
|
|
|
treeselect().then(response => {
|
|
|
@@ -546,7 +613,11 @@ export default {
|
|
|
status: "0",
|
|
|
remark: undefined,
|
|
|
postIds: [],
|
|
|
- roleIds: []
|
|
|
+ roleIds: [],
|
|
|
+ cityIds: [],
|
|
|
+ province: undefined,
|
|
|
+ city: undefined,
|
|
|
+ district: undefined
|
|
|
};
|
|
|
this.resetForm("form");
|
|
|
},
|
|
|
@@ -558,6 +629,8 @@ export default {
|
|
|
/** 重置按钮操作 */
|
|
|
resetQuery() {
|
|
|
this.dateRange = [];
|
|
|
+ this.queryCityIds = [];
|
|
|
+ this.queryParams.cityIds = undefined;
|
|
|
this.resetForm("queryForm");
|
|
|
this.handleQuery();
|
|
|
},
|
|
|
@@ -606,6 +679,11 @@ export default {
|
|
|
this.roleOptions = response.roles;
|
|
|
this.form.postIds = response.postIds;
|
|
|
this.form.roleIds = response.roleIds;
|
|
|
+ if (this.form.cityIds && typeof this.form.cityIds === "string") {
|
|
|
+ this.form.cityIds = this.form.cityIds.split(",").map(Number);
|
|
|
+ } else if (!this.form.cityIds) {
|
|
|
+ this.form.cityIds = [];
|
|
|
+ }
|
|
|
this.open = true;
|
|
|
this.title = "修改用户";
|
|
|
this.form.password = "";
|
|
|
@@ -677,14 +755,18 @@ export default {
|
|
|
submitForm: function() {
|
|
|
this.$refs["form"].validate(valid => {
|
|
|
if (valid) {
|
|
|
+ const submitData = { ...this.form };
|
|
|
+ if (Array.isArray(submitData.cityIds)) {
|
|
|
+ submitData.cityIds = submitData.cityIds.length ? submitData.cityIds.toString() : null;
|
|
|
+ }
|
|
|
if (this.form.userId != undefined) {
|
|
|
- updateUser(this.form).then(response => {
|
|
|
+ updateUser(submitData).then(response => {
|
|
|
this.msgSuccess("修改成功");
|
|
|
this.open = false;
|
|
|
this.getList();
|
|
|
});
|
|
|
} else {
|
|
|
- addUser(this.form).then(response => {
|
|
|
+ addUser(submitData).then(response => {
|
|
|
this.msgSuccess("新增成功");
|
|
|
this.open = false;
|
|
|
this.getList();
|
|
|
@@ -709,7 +791,12 @@ export default {
|
|
|
},
|
|
|
/** 导出按钮操作 */
|
|
|
handleExport() {
|
|
|
- const queryParams = this.queryParams;
|
|
|
+ const queryParams = this.addDateRange({ ...this.queryParams }, this.dateRange);
|
|
|
+ if (this.queryCityIds && this.queryCityIds.length) {
|
|
|
+ queryParams.cityIds = this.queryCityIds.toString();
|
|
|
+ } else {
|
|
|
+ queryParams.cityIds = undefined;
|
|
|
+ }
|
|
|
this.$confirm('是否确认导出所有用户数据项?', "警告", {
|
|
|
confirmButtonText: "确定",
|
|
|
cancelButtonText: "取消",
|