Commit a4120669 authored by xinzhedeai's avatar xinzhedeai

add:删除无用文件、定位卡 增删改查 接口对接

parent b24183b4
...@@ -5,7 +5,9 @@ VUE_APP_TITLE = 高区应急管理平台 ...@@ -5,7 +5,9 @@ VUE_APP_TITLE = 高区应急管理平台
ENV = 'development' ENV = 'development'
# 若依管理系统/开发环境 # 若依管理系统/开发环境
VUE_APP_BASE_API = '/dev-api' # VUE_APP_BASE_API = '/dev-api'
VUE_APP_BASE_API = ''
# VUE_APP_BASE_API = 'http://192.168.2.16:8080' # VUE_APP_BASE_API = 'http://192.168.2.16:8080'
# 路由懒加载 # 路由懒加载
......
import request from '@/utils/request'
// 查询人员定位卡列表
export function listCard(query) {
return request({
url: '/person/card/getRemoteCardList',
method: 'post',
data: query
// params: query
})
}
// 查询人员定位卡详细
export function getCard(data) {
return request({
url: '/person/card/getRemoteCardById',
method: 'post',
data: data
})
}
// 新增人员定位卡
export function addCard(data) {
return request({
url: '/person/card/addRemoteCard',
method: 'post',
data: data
})
}
// 修改人员定位卡
export function updateCard(data) {
return request({
url: '/person/card/updateRemoteCard',
method: 'post',
data: data
})
}
// 删除人员定位卡
export function delCard(data) {
return request({
url: '/person/card/deleteRemoteCard',
method: 'post',
data: data
})
}
import request from '@/utils/request'
// 查询人员信息列表
export function listInfo(query) {
return request({
url: '/person/info/getRemotePersonInfoListt',
method: 'get',
params: query
})
}
// 查询人员信息详细
export function getInfo(personId) {
return request({
url: '/person/info/' + personId,
method: 'get'
})
}
// 新增人员信息
export function addInfo(data) {
return request({
url: '/person/info',
method: 'post',
data: data
})
}
// 修改人员信息
export function updateInfo(data) {
return request({
url: '/person/info',
method: 'put',
data: data
})
}
// 删除人员信息
export function delInfo(personId) {
return request({
url: '/person/info/' + personId,
method: 'delete'
})
}
...@@ -18,34 +18,35 @@ const isWhiteList = (path) => { ...@@ -18,34 +18,35 @@ const isWhiteList = (path) => {
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {
NProgress.start() NProgress.start()
if (getToken()) { if (getToken()) {
to.meta.title && store.dispatch('settings/setTitle', to.meta.title) // to.meta.title && store.dispatch('settings/setTitle', to.meta.title)
/* has token*/ // /* has token*/
if (to.path === '/login') { // if (to.path === '/login') {
next({ path: '/' }) // next({ path: '/' })
NProgress.done() // NProgress.done()
} else if (isWhiteList(to.path)) { // } else if (isWhiteList(to.path)) {
next() // next()
} else { // } else {
if (store.getters.roles.length === 0) { // if (store.getters.roles.length === 0) {
isRelogin.show = true // isRelogin.show = true
// 判断当前用户是否已拉取完user_info信息 // // 判断当前用户是否已拉取完user_info信息
store.dispatch('GetInfo').then(() => { // store.dispatch('GetInfo').then(() => {
isRelogin.show = false // isRelogin.show = false
store.dispatch('GenerateRoutes').then(accessRoutes => { // store.dispatch('GenerateRoutes').then(accessRoutes => {
// 根据roles权限生成可访问的路由表 // // 根据roles权限生成可访问的路由表
router.addRoutes(accessRoutes) // 动态添加可访问路由表 // router.addRoutes(accessRoutes) // 动态添加可访问路由表
next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 // next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
}) // })
}).catch(err => { // }).catch(err => {
store.dispatch('LogOut').then(() => { // store.dispatch('LogOut').then(() => {
Message.error(err) // Message.error(err)
next({ path: '/' }) // next({ path: '/' })
}) // })
}) // })
} else { // } else {
next() // next()
} // }
} // }
next()
} else { } else {
// 没有token // 没有token
if (isWhiteList(to.path)) { if (isWhiteList(to.path)) {
......
...@@ -63,22 +63,24 @@ export const constantRoutes = [ ...@@ -63,22 +63,24 @@ export const constantRoutes = [
component: () => import('@/views/error/401'), component: () => import('@/views/error/401'),
hidden: true hidden: true
}, },
// { {
// path: '', path: '',
// component: Layout, component: Layout,
// redirect: 'index', redirect: 'index',
// children: [ children: [
// { {
// path: 'index', path: 'index',
// component: () => import('@/views/index'), component: () => import('@/views/index'),
// name: 'Index', name: 'Index',
// meta: { title: '首页', icon: 'dashboard', affix: true } meta: { title: '首页', icon: 'dashboard',}
// } }
// ] ]
// }, },
{ {
path: '/dw', path: '/dw',
// component: Layout, // component: Layout,
hidden: true,
component: EmptyLayout, component: EmptyLayout,
redirect: 'noredirect', redirect: 'noredirect',
children: [ children: [
...@@ -86,7 +88,7 @@ export const constantRoutes = [ ...@@ -86,7 +88,7 @@ export const constantRoutes = [
path: 'index', path: 'index',
component: () => import('@/views/index-dw'), component: () => import('@/views/index-dw'),
name: 'Index', name: 'Index',
meta: { title: '首页2-dw', icon: 'dashboard', affix: true } meta: { title: '首页2-dw', icon: 'dashboard', }
} }
] ]
}, },
...@@ -101,7 +103,7 @@ export const constantRoutes = [ ...@@ -101,7 +103,7 @@ export const constantRoutes = [
path: 'index', path: 'index',
component: () => import('@/views/index-zz'), component: () => import('@/views/index-zz'),
name: 'Index', name: 'Index',
meta: { title: '首页2-zz', icon: 'dashboard', affix: true } meta: { title: '首页2-zz', icon: 'dashboard', }
} }
] ]
}, },
...@@ -115,7 +117,7 @@ export const constantRoutes = [ ...@@ -115,7 +117,7 @@ export const constantRoutes = [
path: 'index', path: 'index',
component: () => import('@/views/index-guiji'), component: () => import('@/views/index-guiji'),
name: 'Index', name: 'Index',
meta: { title: '首页2-gj', icon: 'dashboard', affix: true } meta: { title: '首页2-gj', icon: 'dashboard', }
} }
] ]
}, },
...@@ -129,10 +131,40 @@ export const constantRoutes = [ ...@@ -129,10 +131,40 @@ export const constantRoutes = [
path: 'index', path: 'index',
component: () => import('@/views/index-wl'), component: () => import('@/views/index-wl'),
name: 'Screen', name: 'Screen',
meta: { title: '首页-WL', icon: 'dashboard', affix: true } meta: { title: '首页-WL', icon: 'dashboard', }
} }
] ]
}, },
// 定位卡管理
{
path: '/card',
component: EmptyLayout,
redirect: 'noredirect',
children: [
{
path: 'index',
component: () => import('@/views/device/card'),
name: 'card',
meta: { title: '定位卡', icon: 'dashboard', }
}
]
},
// 人员列表
{
path: '/person',
component: EmptyLayout,
redirect: 'noredirect',
children: [
{
path: 'renyuan',
component: () => import('@/views/person/renyuan'),
name: 'renyuan',
meta: { title: '人员列表', icon: 'dashboard', }
}
]
},
{ {
path: '/user', path: '/user',
component: Layout, component: Layout,
......
<template>
<div class="app-container">
<el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
v-show="showSearch"
>
<el-form-item label="部门名称" prop="deptName">
<el-input
v-model="queryParams.deptName"
placeholder="请输入部门名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select
v-model="queryParams.status"
placeholder="部门状态"
clearable
>
<el-option
v-for="dict in dict.type.sys_normal_disable"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="handleQuery"
>搜索</el-button
>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
>重置</el-button
>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['backsystem:backdept:query']"
>新增</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="info"
plain
icon="el-icon-sort"
size="mini"
@click="toggleExpandAll"
>展开/折叠</el-button
>
</el-col>
<right-toolbar
:showSearch.sync="showSearch"
@queryTable="getList"
></right-toolbar>
</el-row>
<el-table
v-if="refreshTable"
v-loading="loading"
:data="deptList"
height="calc(100vh - 200px)"
row-key="deptId"
:default-expand-all="isExpandAll"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
>
<el-table-column
prop="deptName"
label="部门名称"
width="260"
></el-table-column>
<el-table-column
prop="orderNum"
label="排序"
width="200"
></el-table-column>
<el-table-column prop="status" label="状态" width="100">
<template slot-scope="scope">
<dict-tag
:options="dict.type.sys_normal_disable"
:value="scope.row.status"
/>
</template>
</el-table-column>
<el-table-column
label="创建时间"
align="center"
prop="createTime"
width="200"
>
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column
label="操作"
align="center"
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="['backsystem:backdept:edit']"
>修改</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-plus"
@click="handleAdd(scope.row)"
v-hasPermi="['backsystem:backdept:add']"
>新增</el-button
>
<el-button
v-if="scope.row.parentId != 0"
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['backsystem:backdept:remove']"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<!-- 添加或修改部门对话框 -->
<el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-row>
<el-col :span="24" v-if="form.parentId !== 0">
<el-form-item label="上级部门" prop="parentId">
<treeselect
v-model="form.parentId"
:options="deptOptions"
:normalizer="normalizer"
placeholder="选择上级部门"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="部门名称" prop="deptName">
<el-input v-model="form.deptName" placeholder="请输入部门名称" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="显示排序" prop="orderNum">
<el-input-number
v-model="form.orderNum"
controls-position="right"
:min="0"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="负责人" prop="leader">
<el-input
v-model="form.leader"
placeholder="请输入负责人"
maxlength="20"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="联系电话" prop="phone">
<el-input
v-model="form.phone"
placeholder="请输入联系电话"
maxlength="11"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="行业类型" prop="smallPlaceType">
<treeselect
v-model="form.smallPlaceType"
:options="sys_nineplaces_json"
:normalizer="smallPlaceNormalizer"
:multiple="true"
:clearable="true"
placeholder="请选择行业类型"
:show-count="true"
:searchable="true"
/>
<!-- <span
><i
class="el-icon-warning"
style="font-size: 16px; color: orange"
></i
>添加社区、街道无需选择类型</span
> -->
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="部门状态">
<el-radio-group v-model="form.status">
<el-radio
v-for="dict in dict.type.sys_normal_disable"
:key="dict.value"
:label="dict.value"
>{{ dict.label }}</el-radio
>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="类型" prop="type">
<el-select v-model="form.type" placeholder="">
<el-option
v-for="item in dict.type.dept_type"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
listDept,
getDept,
delDept,
addDept,
updateDept,
listDeptExcludeChild,
} from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
name: "BcakDept",
dicts: ["sys_normal_disable", "sys_nineplaces_json", "dept_type"],
components: { Treeselect },
data() {
return {
// 遮罩层
loading: true,
// 显示搜索条件
showSearch: true,
// 表格树数据
deptList: [],
// 部门树选项
deptOptions: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 是否展开,默认全部展开
isExpandAll: true,
// 重新渲染表格状态
refreshTable: true,
// 查询参数
queryParams: {
deptName: undefined,
status: undefined,
},
// 表单参数
form: {
orderNum: 1,
},
// 表单校验
rules: {
type: [{ required: true, message: "类型不能为空", trigger: "blur" }],
parentId: [
{ required: true, message: "上级部门不能为空", trigger: "blur" },
],
deptName: [
{ required: true, message: "部门名称不能为空", trigger: "blur" },
],
orderNum: [
{ required: true, message: "显示排序不能为空", trigger: "blur" },
],
email: [
{
type: "email",
message: "请输入正确的邮箱地址",
trigger: ["blur", "change"],
},
],
phone: [
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: "请输入正确的手机号码",
trigger: "blur",
},
],
},
};
},
created() {
this.getList();
},
computed: {
sys_nineplaces_json() {
// 转为树状结构
const data = this.dict.type.sys_nineplaces_json || [];
return this.buildTree(data.map((item) => item.raw || item));
},
},
methods: {
/** 将扁平数组转换为树状结构 */
buildTree(data, idKey = "id", pidKey = "pid", childrenKey = "children") {
const map = {};
const result = [];
// 创建映射表
data.forEach((item) => {
map[item[idKey]] = { ...item, [childrenKey]: [] };
});
// 构建树结构
data.forEach((item) => {
const parent = map[item[pidKey]];
if (parent && item[pidKey] !== 0) {
parent[childrenKey].push(map[item[idKey]]);
} else {
result.push(map[item[idKey]]);
}
});
return result;
},
/** 查询部门列表 */
getList() {
this.loading = true;
listDept(this.queryParams).then((response) => {
this.deptList = this.handleTree(response.data, "deptId");
this.loading = false;
});
},
/** 转换部门数据结构 */
normalizer(node) {
if (node.children && !node.children.length) {
delete node.children;
}
return {
id: node.deptId,
label: node.deptName,
children: node.children,
};
},
/** 转换九小场所类型数据结构 */
smallPlaceNormalizer(node) {
if (node.children && !node.children.length) {
delete node.children;
}
return {
id: node.id,
label: node.industryName,
children: node.children,
};
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
deptId: undefined,
parentId: undefined,
deptName: undefined,
orderNum: 1,
leader: undefined,
phone: undefined,
email: undefined,
status: "0",
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
/** 新增按钮操作 */
handleAdd(row) {
this.reset();
if (row != undefined) {
this.form.parentId = row.deptId;
}
this.open = true;
this.title = "添加部门";
listDept().then((response) => {
this.deptOptions = this.handleTree(response.data, "deptId");
});
},
/** 展开/折叠操作 */
toggleExpandAll() {
this.refreshTable = false;
this.isExpandAll = !this.isExpandAll;
this.$nextTick(() => {
this.refreshTable = true;
});
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
getDept(row.deptId).then((response) => {
this.form = response.data;
this.open = true;
this.title = "修改部门";
listDeptExcludeChild(row.deptId).then((response) => {
this.deptOptions = this.handleTree(response.data, "deptId");
if (this.deptOptions.length == 0) {
const noResultsOptions = {
deptId: this.form.parentId,
deptName: this.form.parentName,
children: [],
};
this.deptOptions.push(noResultsOptions);
}
});
});
},
/** 提交按钮 */
submitForm: function () {
this.$refs["form"].validate((valid) => {
if (valid) {
if (this.form.deptId != undefined) {
updateDept(this.form).then((response) => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addDept(this.form).then((response) => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
this.$modal
.confirm('是否确认删除名称为"' + row.deptName + '"的数据项?')
.then(function () {
return delDept(row.deptId);
})
.then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
})
.catch(() => {});
},
},
};
</script>
<template>
<div class="app-container">
<h4 class="form-header h4">基本信息</h4>
<el-form ref="form" :model="form" label-width="80px">
<el-row>
<el-col :span="8" :offset="2">
<el-form-item label="用户昵称" prop="nickName">
<el-input v-model="form.nickName" disabled />
</el-form-item>
</el-col>
<el-col :span="8" :offset="2">
<el-form-item label="登录账号" prop="userName">
<el-input v-model="form.userName" disabled />
</el-form-item>
</el-col>
</el-row>
</el-form>
<h4 class="form-header h4">角色信息</h4>
<el-table v-loading="loading" :row-key="getRowKey" @row-click="clickRow" ref="table" @selection-change="handleSelectionChange" :data="roles.slice((pageNum-1)*pageSize,pageNum*pageSize)">
<el-table-column label="序号" type="index" align="center">
<template slot-scope="scope">
<span>{{(pageNum - 1) * pageSize + scope.$index + 1}}</span>
</template>
</el-table-column>
<el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column>
<el-table-column label="角色编号" align="center" prop="roleId" />
<el-table-column label="角色名称" align="center" prop="roleName" />
<el-table-column label="权限字符" align="center" prop="roleKey" />
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
</el-table>
<pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" />
<el-form label-width="100px">
<el-form-item style="text-align: center;margin-left:-120px;margin-top:30px;">
<el-button type="primary" @click="submitForm()">提交</el-button>
<el-button @click="close()">返回</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import { getAuthRole, updateAuthRole } from "@/api/system/user";
export default {
name: "AuthRole",
data() {
return {
// 遮罩层
loading: true,
// 分页信息
total: 0,
pageNum: 1,
pageSize: 10,
// 选中角色编号
roleIds:[],
// 角色信息
roles: [],
// 用户信息
form: {}
};
},
created() {
const userId = this.$route.params && this.$route.params.userId;
if (userId) {
this.loading = true;
getAuthRole(userId).then((response) => {
this.form = response.user;
this.roles = response.roles;
this.total = this.roles.length;
this.$nextTick(() => {
this.roles.forEach((row) => {
if (row.flag) {
this.$refs.table.toggleRowSelection(row);
}
});
});
this.loading = false;
});
}
},
methods: {
/** 单击选中行数据 */
clickRow(row) {
this.$refs.table.toggleRowSelection(row);
},
// 多选框选中数据
handleSelectionChange(selection) {
this.roleIds = selection.map((item) => item.roleId);
},
// 保存选中的数据编号
getRowKey(row) {
return row.roleId;
},
/** 提交按钮 */
submitForm() {
const userId = this.form.userId;
const roleIds = this.roleIds.join(",");
updateAuthRole({ userId: userId, roleIds: roleIds }).then((response) => {
this.$modal.msgSuccess("授权成功");
this.close();
});
},
/** 关闭按钮 */
close() {
const obj = { path: "/system/user" };
this.$tab.closeOpenPage(obj);
},
},
};
</script>
\ No newline at end of file
<template>
<div class="app-container">
<el-row :gutter="20">
<splitpanes
:horizontal="this.$store.getters.device === 'mobile'"
class="default-theme"
>
<!--部门数据-->
<pane size="16">
<el-col>
<div class="head-container">
<el-input
v-model="deptName"
placeholder="请输入部门名称"
clearable
size="small"
prefix-icon="el-icon-search"
style="margin-bottom: 20px"
/>
</div>
<div class="head-container">
<el-tree
style="height: 630px;overflow-y: auto;"
:data="deptOptions"
:props="defaultProps"
:expand-on-click-node="false"
:filter-node-method="filterNode"
ref="tree"
node-key="id"
default-expand-all
highlight-current
@node-click="handleNodeClick"
/>
</div>
</el-col>
</pane>
<!--用户数据-->
<pane size="84">
<el-col>
<el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
v-show="showSearch"
label-width="68px"
>
<el-form-item label="用户账号" prop="userName">
<el-input
v-model="queryParams.userName"
placeholder="请输入用户账号"
clearable
style="width: 240px"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="手机号码" prop="phonenumber">
<el-input
v-model="queryParams.phonenumber"
placeholder="请输入手机号码"
clearable
style="width: 240px"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select
v-model="queryParams.status"
placeholder="用户状态"
clearable
style="width: 240px"
>
<el-option
v-for="dict in dict.type.sys_normal_disable"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="创建时间">
<el-date-picker
v-model="dateRange"
style="width: 240px"
value-format="yyyy-MM-dd"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
</el-form-item>
<el-form-item>
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="handleQuery"
>搜索</el-button
>
<el-button
icon="el-icon-refresh"
size="mini"
@click="resetQuery"
>重置</el-button
>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['backsystem:backuser:add']"
>新增</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['backsystem:backuser:edit']"
>修改</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['backsystem:backuser:remove']"
>删除</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="info"
plain
icon="el-icon-upload2"
size="mini"
@click="handleImport"
v-hasPermi="['backsystem:backuser:import']"
>导入</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['backsystem:backuser:export']"
>导出</el-button
>
</el-col>
<right-toolbar
:showSearch.sync="showSearch"
@queryTable="getList"
:columns="columns"
></right-toolbar>
</el-row>
<el-table
v-loading="loading"
:data="userList"
@selection-change="handleSelectionChange"
height="550px"
>
<el-table-column type="selection" width="50" align="center" />
<el-table-column
label="用户编号"
align="center"
key="userId"
prop="userId"
v-if="columns[0].visible"
/>
<el-table-column
label="用户账号"
align="center"
key="userName"
prop="userName"
v-if="columns[1].visible"
:show-overflow-tooltip="true"
/>
<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"
>
<template slot-scope="scope">
<el-switch
v-model="scope.row.status"
active-value="0"
inactive-value="1"
@change="handleStatusChange(scope.row)"
></el-switch>
</template>
</el-table-column>
<el-table-column
label="创建时间"
align="center"
prop="createTime"
v-if="columns[6].visible"
width="160"
>
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column
label="操作"
align="center"
width="160"
class-name="small-padding fixed-width"
>
<template slot-scope="scope" v-if="scope.row.userId !== 1">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['backsystem:backuser:edit']"
>修改</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['backsystem:backuser:remove']"
>删除</el-button
>
<el-dropdown
size="mini"
@command="(command) => handleCommand(command, scope.row)"
v-hasPermi="[
'backsystem:backuser:resetPwd',
'backsystem:backuser:edit',
]"
>
<el-button
size="mini"
type="text"
icon="el-icon-d-arrow-right"
>更多</el-button
>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item
command="handleResetPwd"
icon="el-icon-key"
v-hasPermi="['backsystem:backuser:resetPwd']"
>重置密码</el-dropdown-item
>
<!-- <el-dropdown-item
command="handleAuthRole"
icon="el-icon-circle-check"
v-hasPermi="['backsystem:backuser:edit']"
>分配角色</el-dropdown-item
> -->
</el-dropdown-menu>
</el-dropdown>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</el-col>
</pane>
</splitpanes>
</el-row>
<!-- 添加或修改用户配置对话框 -->
<el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-row>
<el-col :span="12">
<el-form-item label="用户名称" prop="nickName">
<el-input
v-model="form.nickName"
placeholder="请输入用户名称"
maxlength="30"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="归属部门" prop="deptId">
<treeselect
v-model="form.deptId"
:options="enabledDeptOptions"
:show-count="true"
placeholder="请选择归属部门"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="手机号码" prop="phonenumber">
<el-input
v-model="form.phonenumber"
placeholder="请输入手机号码"
maxlength="11"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="邮箱" prop="email">
<el-input
v-model="form.email"
placeholder="请输入邮箱"
maxlength="50"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item
v-if="form.userId == undefined"
label="用户账号"
prop="userName"
>
<el-input
v-model="form.userName"
placeholder="请输入用户账号"
maxlength="30"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
v-if="form.userId == undefined"
label="用户密码"
prop="password"
>
<el-input
v-model="form.password"
placeholder="请输入用户密码"
type="password"
maxlength="20"
show-password
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="用户性别">
<el-select v-model="form.sex" placeholder="请选择性别">
<el-option
v-for="dict in dict.type.sys_user_sex"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="状态">
<el-radio-group v-model="form.status">
<el-radio
v-for="dict in dict.type.sys_normal_disable"
:key="dict.value"
:label="dict.value"
>{{ dict.label }}</el-radio
>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="岗位">
<el-select
v-model="form.postIds"
multiple
placeholder="请选择岗位"
>
<el-option
v-for="item in postOptions"
:key="item.postId"
:label="item.postName"
:value="item.postId"
:disabled="item.status == 1"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="角色" prop="roleIds">
<el-select
v-model="form.roleIds"
multiple
placeholder="请选择角色"
>
<el-option
v-for="item in roleOptions"
:key="item.roleId"
:label="item.roleName"
:value="item.roleId"
:disabled="item.status == 1"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="备注">
<el-input
v-model="form.remark"
type="textarea"
placeholder="请输入内容"
></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<!-- 用户导入对话框 -->
<el-dialog
:title="upload.title"
:visible.sync="upload.open"
width="400px"
append-to-body
>
<el-upload
ref="upload"
:limit="1"
accept=".xlsx, .xls"
:headers="upload.headers"
:action="upload.url + '?updateSupport=' + upload.updateSupport"
:disabled="upload.isUploading"
:on-progress="handleFileUploadProgress"
:on-success="handleFileSuccess"
:auto-upload="false"
drag
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<div class="el-upload__tip text-center" slot="tip">
<div class="el-upload__tip" slot="tip">
<el-checkbox
v-model="upload.updateSupport"
/>是否更新已经存在的用户数据
</div>
<span>仅允许导入xls、xlsx格式文件。</span>
<el-link
type="primary"
:underline="false"
style="font-size: 12px; vertical-align: baseline"
@click="importTemplate"
>下载模板</el-link
>
</div>
</el-upload>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitFileForm">确 定</el-button>
<el-button @click="upload.open = false">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
listUser,
getUser,
delUser,
addUser,
updateUser,
resetUserPwd,
changeUserStatus,
deptTreeSelect,
} from "@/api/system/user";
import { getToken } from "@/utils/auth";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { Splitpanes, Pane } from "splitpanes";
import "splitpanes/dist/splitpanes.css";
export default {
name: "BackUser",
dicts: ["sys_normal_disable", "sys_user_sex"],
components: { Treeselect, Splitpanes, Pane },
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 用户表格数据
userList: null,
// 弹出层标题
title: "",
// 所有部门树选项
deptOptions: undefined,
// 过滤掉已禁用部门树选项
enabledDeptOptions: undefined,
// 是否显示弹出层
open: false,
// 部门名称
deptName: undefined,
// 默认密码
initPassword: undefined,
// 日期范围
dateRange: [],
// 岗位选项
postOptions: [],
// 角色选项
roleOptions: [],
// 表单参数
form: {},
defaultProps: {
children: "children",
label: "label",
},
// 用户导入参数
upload: {
// 是否显示弹出层(用户导入)
open: false,
// 弹出层标题(用户导入)
title: "",
// 是否禁用上传
isUploading: false,
// 是否更新已经存在的用户数据
updateSupport: 0,
// 设置上传的请求头部
headers: { Authorization: "Bearer " + getToken() },
// 上传的地址
url: process.env.VUE_APP_BASE_API + "/system/user/importData",
},
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
userName: undefined,
phonenumber: undefined,
status: undefined,
deptId: undefined,
},
// 列信息
columns: [
{ key: 0, label: `用户编号`, visible: true },
{ key: 1, label: `用户账号`, visible: true },
{ 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 },
],
// 表单校验
rules: {
userName: [
{ required: true, message: "用户账号不能为空", trigger: "blur" },
{
min: 2,
max: 20,
message: "用户账号长度必须介于 2 和 20 之间",
trigger: "blur",
},
],
nickName: [
{ required: true, message: "用户名称不能为空", trigger: "blur" },
],
password: [
{ required: true, message: "用户密码不能为空", trigger: "blur" },
{
min: 5,
max: 20,
message: "用户密码长度必须介于 5 和 20 之间",
trigger: "blur",
},
{
pattern: /^[^<>"'|\\]+$/,
message: "不能包含非法字符:< > \" ' \\\ |",
trigger: "blur",
},
],
email: [
{
type: "email",
message: "请输入正确的邮箱地址",
trigger: ["blur", "change"],
},
],
phonenumber: [
{ required: true, message: "手机号不能为空", trigger: "blur" },
{
pattern: /^1[3-9]\d{9}$/,
message: "请输入正确的手机号码",
trigger: "blur",
},
],
deptId: [{ required: true, message: "请选择部门", trigger: "change" }],
roleIds: [{ required: true, message: "请选择角色", trigger: "change" }],
},
};
},
watch: {
// 根据名称筛选部门树
deptName(val) {
this.$refs.tree.filter(val);
},
},
created() {
this.getList();
this.getDeptTree();
this.getConfigKey("sys.user.initPassword").then((response) => {
this.initPassword = response.msg;
});
},
methods: {
/** 查询用户列表 */
getList() {
this.loading = true;
listUser(this.addDateRange(this.queryParams, this.dateRange)).then(
(response) => {
this.userList = response.rows;
this.total = response.total;
this.loading = false;
}
);
},
/** 查询部门下拉树结构 */
getDeptTree() {
deptTreeSelect().then((response) => {
this.deptOptions = response.data;
this.enabledDeptOptions = this.filterDisabledDept(
JSON.parse(JSON.stringify(response.data))
);
});
},
// 过滤禁用的部门
filterDisabledDept(deptList) {
return deptList.filter((dept) => {
if (dept.disabled) {
return false;
}
if (dept.children && dept.children.length) {
dept.children = this.filterDisabledDept(dept.children);
}
return true;
});
},
// 筛选节点
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
// 节点单击事件
handleNodeClick(data) {
this.queryParams.deptId = data.id;
this.queryParams.type = data.type;
console.log('点击树状数据',data)
this.handleQuery();
},
// 用户状态修改
handleStatusChange(row) {
let text = row.status === "0" ? "启用" : "停用";
this.$modal
.confirm('确认要"' + text + '""' + row.userName + '"用户吗?')
.then(function () {
return changeUserStatus(row.userId, row.status);
})
.then(() => {
this.$modal.msgSuccess(text + "成功");
})
.catch(function () {
row.status = row.status === "0" ? "1" : "0";
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
userId: undefined,
deptId: undefined,
userName: undefined,
nickName: undefined,
password: undefined,
phonenumber: undefined,
email: undefined,
sex: undefined,
status: "0",
remark: undefined,
postIds: [],
roleIds: [],
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.dateRange = [];
this.resetForm("queryForm");
this.queryParams.deptId = undefined;
this.$refs.tree.setCurrentKey(null);
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map((item) => item.userId);
this.single = selection.length != 1;
this.multiple = !selection.length;
},
// 更多操作触发
handleCommand(command, row) {
switch (command) {
case "handleResetPwd":
this.handleResetPwd(row);
break;
case "handleAuthRole":
this.handleAuthRole(row);
break;
default:
break;
}
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
getUser().then((response) => {
this.postOptions = response.posts;
this.roleOptions = response.roles.filter(
(item) => item.roleName !== "商家"
);
this.open = true;
this.title = "添加用户";
this.form.password = this.initPassword;
});
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const userId = row.userId || this.ids;
getUser(userId).then((response) => {
this.form = response.data;
this.postOptions = response.posts;
this.roleOptions = response.roles.filter(
(item) => item.roleName !== "商家"
);
this.$set(this.form, "postIds", response.postIds);
this.$set(this.form, "roleIds", response.roleIds);
this.open = true;
this.title = "修改用户";
this.form.password = "";
});
},
/** 重置密码按钮操作 */
handleResetPwd(row) {
this.$prompt('请输入"' + row.userName + '"的新密码', "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
closeOnClickModal: false,
inputPattern: /^.{5,20}$/,
inputErrorMessage: "用户密码长度必须介于 5 和 20 之间",
inputValidator: (value) => {
if (/<|>|"|'|\||\\/.test(value)) {
return "不能包含非法字符:< > \" ' \\\ |";
}
},
})
.then(({ value }) => {
resetUserPwd(row.userId, value).then((response) => {
this.$modal.msgSuccess("修改成功,新密码是:" + value);
});
})
.catch(() => {});
},
/** 分配角色操作 */
handleAuthRole: function (row) {
const userId = row.userId;
this.$router.push("/system/user-auth/role/" + userId);
},
/** 提交按钮 */
submitForm: function () {
if (this.form.roleIds.length !== 1) {
this.$modal.msgError("用户有且只有一个角色");
return;
}
this.$refs["form"].validate((valid) => {
if (valid) {
if (this.form.userId != undefined) {
updateUser(this.form).then((response) => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addUser(this.form).then((response) => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const userIds = row.userId || this.ids;
this.$modal
.confirm('是否确认删除用户编号为"' + userIds + '"的数据项?')
.then(function () {
return delUser(userIds);
})
.then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
})
.catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.download(
"system/user/export",
{
...this.queryParams,
},
`user_${new Date().getTime()}.xlsx`
);
},
/** 导入按钮操作 */
handleImport() {
this.upload.title = "用户导入";
this.upload.open = true;
},
/** 下载模板操作 */
importTemplate() {
this.download(
"system/user/importTemplate",
{},
`user_template_${new Date().getTime()}.xlsx`
);
},
// 文件上传中处理
handleFileUploadProgress(event, file, fileList) {
this.upload.isUploading = true;
},
// 文件上传成功处理
handleFileSuccess(response, file, fileList) {
this.upload.open = false;
this.upload.isUploading = false;
this.$refs.upload.clearFiles();
this.$alert(
"<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
response.msg +
"</div>",
"导入结果",
{ dangerouslyUseHTMLString: true }
);
this.getList();
},
// 提交上传文件
submitFileForm() {
this.$refs.upload.submit();
},
},
};
</script>
<style scoped lang="scss">
::v-deep .vue-treeselect__menu-container{
width:400px !important;
}
</style>
\ No newline at end of file
<template>
<div class="app-container">
<el-row :gutter="20">
<el-col :span="6" :xs="24">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>个人信息</span>
</div>
<div>
<div class="text-center">
<userAvatar />
</div>
<ul class="list-group list-group-striped">
<li class="list-group-item">
<svg-icon icon-class="user" />用户名称
<div class="pull-right">{{ user.userName }}</div>
</li>
<li class="list-group-item">
<svg-icon icon-class="phone" />手机号码
<div class="pull-right">{{ user.phonenumber }}</div>
</li>
<li class="list-group-item">
<svg-icon icon-class="email" />用户邮箱
<div class="pull-right">{{ user.email }}</div>
</li>
<li class="list-group-item">
<svg-icon icon-class="tree" />所属部门
<div class="pull-right" v-if="user.dept">{{ user.dept.deptName }} / {{ postGroup }}</div>
</li>
<li class="list-group-item">
<svg-icon icon-class="peoples" />所属角色
<div class="pull-right">{{ roleGroup }}</div>
</li>
<li class="list-group-item">
<svg-icon icon-class="date" />创建日期
<div class="pull-right">{{ user.createTime }}</div>
</li>
</ul>
</div>
</el-card>
</el-col>
<el-col :span="18" :xs="24">
<el-card>
<div slot="header" class="clearfix">
<span>基本资料</span>
</div>
<el-tabs v-model="activeTab">
<el-tab-pane label="基本资料" name="userinfo">
<userInfo :user="user" />
</el-tab-pane>
<el-tab-pane label="修改密码" name="resetPwd">
<resetPwd />
</el-tab-pane>
</el-tabs>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
import userAvatar from "./userAvatar";
import userInfo from "./userInfo";
import resetPwd from "./resetPwd";
import { getUserProfile } from "@/api/system/user";
export default {
name: "Profile",
components: { userAvatar, userInfo, resetPwd },
data() {
return {
user: {},
roleGroup: {},
postGroup: {},
activeTab: "userinfo"
};
},
created() {
this.getUser();
},
methods: {
getUser() {
getUserProfile().then(response => {
this.user = response.data;
this.roleGroup = response.roleGroup;
this.postGroup = response.postGroup;
});
}
}
};
</script>
<template>
<el-form ref="form" :model="user" :rules="rules" label-width="80px">
<el-form-item label="旧密码" prop="oldPassword">
<el-input v-model="user.oldPassword" placeholder="请输入旧密码" type="password" show-password/>
</el-form-item>
<el-form-item label="新密码" prop="newPassword">
<el-input v-model="user.newPassword" placeholder="请输入新密码" type="password" show-password/>
</el-form-item>
<el-form-item label="确认密码" prop="confirmPassword">
<el-input v-model="user.confirmPassword" placeholder="请确认新密码" type="password" show-password/>
</el-form-item>
<el-form-item>
<el-button type="primary" size="mini" @click="submit">保存</el-button>
<el-button type="danger" size="mini" @click="close">关闭</el-button>
</el-form-item>
</el-form>
</template>
<script>
import { updateUserPwd } from "@/api/system/user";
export default {
data() {
const equalToPassword = (rule, value, callback) => {
if (this.user.newPassword !== value) {
callback(new Error("两次输入的密码不一致"));
} else {
callback();
}
};
return {
user: {
oldPassword: undefined,
newPassword: undefined,
confirmPassword: undefined
},
// 表单校验
rules: {
oldPassword: [
{ required: true, message: "旧密码不能为空", trigger: "blur" }
],
newPassword: [
{ required: true, message: "新密码不能为空", trigger: "blur" },
{ min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" },
{ pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符:< > \" ' \\\ |", trigger: "blur" }
],
confirmPassword: [
{ required: true, message: "确认密码不能为空", trigger: "blur" },
{ required: true, validator: equalToPassword, trigger: "blur" }
]
}
};
},
methods: {
submit() {
this.$refs["form"].validate(valid => {
if (valid) {
updateUserPwd(this.user.oldPassword, this.user.newPassword).then(response => {
this.$modal.msgSuccess("修改成功");
});
}
});
},
close() {
this.$tab.closePage();
}
}
};
</script>
<template>
<div>
<div class="user-info-head" @click="editCropper()"><img v-bind:src="options.img" title="点击上传头像" class="img-circle img-lg" /></div>
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @opened="modalOpened" @close="closeDialog">
<el-row>
<el-col :xs="24" :md="12" :style="{height: '350px'}">
<vue-cropper
ref="cropper"
:img="options.img"
:info="true"
:autoCrop="options.autoCrop"
:autoCropWidth="options.autoCropWidth"
:autoCropHeight="options.autoCropHeight"
:fixedBox="options.fixedBox"
:outputType="options.outputType"
@realTime="realTime"
v-if="visible"
/>
</el-col>
<el-col :xs="24" :md="12" :style="{height: '350px'}">
<div class="avatar-upload-preview">
<img :src="previews.url" :style="previews.img" />
</div>
</el-col>
</el-row>
<br />
<el-row>
<el-col :lg="2" :sm="3" :xs="3">
<el-upload action="#" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUpload">
<el-button size="small">
选择
<i class="el-icon-upload el-icon--right"></i>
</el-button>
</el-upload>
</el-col>
<el-col :lg="{span: 1, offset: 2}" :sm="2" :xs="2">
<el-button icon="el-icon-plus" size="small" @click="changeScale(1)"></el-button>
</el-col>
<el-col :lg="{span: 1, offset: 1}" :sm="2" :xs="2">
<el-button icon="el-icon-minus" size="small" @click="changeScale(-1)"></el-button>
</el-col>
<el-col :lg="{span: 1, offset: 1}" :sm="2" :xs="2">
<el-button icon="el-icon-refresh-left" size="small" @click="rotateLeft()"></el-button>
</el-col>
<el-col :lg="{span: 1, offset: 1}" :sm="2" :xs="2">
<el-button icon="el-icon-refresh-right" size="small" @click="rotateRight()"></el-button>
</el-col>
<el-col :lg="{span: 2, offset: 6}" :sm="2" :xs="2">
<el-button type="primary" size="small" @click="uploadImg()">提 交</el-button>
</el-col>
</el-row>
</el-dialog>
</div>
</template>
<script>
import store from "@/store";
import { VueCropper } from "vue-cropper";
import { uploadAvatar } from "@/api/system/user";
import { debounce } from '@/utils'
export default {
components: { VueCropper },
data() {
return {
// 是否显示弹出层
open: false,
// 是否显示cropper
visible: false,
// 弹出层标题
title: "修改头像",
options: {
img: store.getters.avatar, //裁剪图片的地址
autoCrop: true, // 是否默认生成截图框
autoCropWidth: 200, // 默认生成截图框宽度
autoCropHeight: 200, // 默认生成截图框高度
fixedBox: true, // 固定截图框大小 不允许改变
outputType:"png", // 默认生成截图为PNG格式
filename: 'avatar' // 文件名称
},
previews: {},
resizeHandler: null
};
},
methods: {
// 编辑头像
editCropper() {
this.open = true;
},
// 打开弹出层结束时的回调
modalOpened() {
this.visible = true;
if (!this.resizeHandler) {
this.resizeHandler = debounce(() => {
this.refresh()
}, 100)
}
window.addEventListener("resize", this.resizeHandler)
},
// 刷新组件
refresh() {
this.$refs.cropper.refresh();
},
// 覆盖默认的上传行为
requestUpload() {
},
// 向左旋转
rotateLeft() {
this.$refs.cropper.rotateLeft();
},
// 向右旋转
rotateRight() {
this.$refs.cropper.rotateRight();
},
// 图片缩放
changeScale(num) {
num = num || 1;
this.$refs.cropper.changeScale(num);
},
// 上传预处理
beforeUpload(file) {
if (file.type.indexOf("image/") == -1) {
this.$modal.msgError("文件格式错误,请上传图片类型,如:JPG,PNG后缀的文件。");
} else {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
this.options.img = reader.result;
this.options.filename = file.name;
};
}
},
// 上传图片
uploadImg() {
this.$refs.cropper.getCropBlob(data => {
let formData = new FormData();
formData.append("avatarfile", data, this.options.filename);
uploadAvatar(formData).then(response => {
this.open = false;
this.options.img = process.env.VUE_APP_BASE_API + response.imgUrl;
store.commit('SET_AVATAR', this.options.img);
this.$modal.msgSuccess("修改成功");
this.visible = false;
});
});
},
// 实时预览
realTime(data) {
this.previews = data;
},
// 关闭窗口
closeDialog() {
this.options.img = store.getters.avatar
this.visible = false;
window.removeEventListener("resize", this.resizeHandler)
}
}
};
</script>
<style scoped lang="scss">
.user-info-head {
position: relative;
display: inline-block;
height: 120px;
}
.user-info-head:hover:after {
content: '+';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
color: #eee;
background: rgba(0, 0, 0, 0.5);
font-size: 24px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
cursor: pointer;
line-height: 110px;
border-radius: 50%;
}
</style>
<template>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="用户昵称" prop="nickName">
<el-input v-model="form.nickName" maxlength="30" />
</el-form-item>
<el-form-item label="手机号码" prop="phonenumber">
<el-input v-model="form.phonenumber" maxlength="11" />
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="form.email" maxlength="50" />
</el-form-item>
<el-form-item label="性别">
<el-radio-group v-model="form.sex">
<el-radio label="0"></el-radio>
<el-radio label="1"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item>
<el-button type="primary" size="mini" @click="submit">保存</el-button>
<el-button type="danger" size="mini" @click="close">关闭</el-button>
</el-form-item>
</el-form>
</template>
<script>
import { updateUserProfile } from "@/api/system/user";
export default {
props: {
user: {
type: Object
}
},
data() {
return {
form: {},
// 表单校验
rules: {
nickName: [
{ required: true, message: "用户昵称不能为空", trigger: "blur" }
],
email: [
{ required: true, message: "邮箱地址不能为空", trigger: "blur" },
{
type: "email",
message: "请输入正确的邮箱地址",
trigger: ["blur", "change"]
}
],
phonenumber: [
{ required: true, message: "手机号码不能为空", trigger: "blur" },
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: "请输入正确的手机号码",
trigger: "blur"
}
]
}
};
},
watch: {
user: {
handler(user) {
if (user) {
this.form = { nickName: user.nickName, phonenumber: user.phonenumber, email: user.email, sex: user.sex };
}
},
immediate: true
}
},
methods: {
submit() {
this.$refs["form"].validate(valid => {
if (valid) {
updateUserProfile(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.user.phonenumber = this.form.phonenumber;
this.user.email = this.form.email;
});
}
});
},
close() {
this.$tab.closePage();
}
}
};
</script>
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="名称" prop="name">
<el-input
v-model="queryParams.name"
placeholder="请输入名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="类型" prop="type">
<!-- <el-input
v-model="queryParams.orderNum"
placeholder="请输入排序"
clearable
@keyup.enter.native="handleQuery"
/>-->
<el-select v-model="queryParams.type" placeholder="">
<el-option label="派出所民警" :value="3"></el-option>
<el-option label="消防大队" :value="4"></el-option>
<el-option label="消防监督工作站" :value="5"></el-option>
<el-option label="安全员" :value="6"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['gaoqu:psap:add']"
>新增</el-button>
</el-col>
<!-- <el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['gaoqu:psap:edit']"
>修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['gaoqu:psap:remove']"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['gaoqu:psap:export']"
>导出</el-button> -->
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="psapList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<!-- <el-table-column label="" align="center" prop="id" /> -->
<el-table-column label="名称" align="center" prop="name" />
<!-- <el-table-column label="排序" align="center" prop="orderNum" /> -->
<el-table-column label="类型" align="center" prop="typeName" />
<!-- <el-table-column label="所属部门" align="center" prop="deptNames" >
<template slot-scope="scope">
{{ scope.row.deptNames.length && scope.row.deptNames.join(',')|| '-' }}
</template>
</el-table-column> -->
<el-table-column label="操作" align="center" 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="['gaoqu:psap:edit']"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['gaoqu:psap:remove']"
>删除</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"
/>
<!-- 添加或修改公安武警对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body
:close-on-click-modal="false">
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="名称" prop="name">
<el-input v-model="form.name" placeholder="请输入名称" />
</el-form-item>
<el-form-item label="类型" prop="orderNum">
<el-select v-model="form.type" placeholder="">
<el-option label="派出所民警" :value="3"></el-option>
<el-option label="消防大队" :value="4"></el-option>
<el-option label="消防监督工作站" :value="5"></el-option>
<el-option label="安全员" :value="6"></el-option>
</el-select>
</el-form-item>
<!-- <el-form-item label="管辖网格" prop="orderNum">
<el-select
v-model="form.deptIds"
placeholder="" multiple
filterable
:filter-method="filterDept"
>
<el-option v-for="item in filteredCities" :key="item.deptId" :label="item.deptName" :value="item.deptId">
</el-option>
</el-select>
</el-form-item> -->
<el-form-item label="管辖网格" prop="orderNum">
<treeselect
v-model="form.deptIds"
:options="deptOptions"
:multiple="true"
placeholder="请选择隶属网格"
/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
listPsap,
getPsap,
delPsap,
addPsap,
updatePsap,
getAllDept,
} from "@/api/gaoqu/gonganwujing";
import {
deptList,
} from "@/api/stData/merchantList";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
name: "Psap",
components: { Treeselect },
data() {
return {
deptOptions: undefined,
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 公安武警表格数据
psapList: [],
options4dept: [],
filteredCities:[],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
name: null,
orderNum: null,
type: null,
},
// 表单参数
form: {},
// 表单校验
rules: {},
};
},
created() {
this.getList();
this.getDeptTree();
getAllDept().then((response) => {
this.options4dept = response.data;
this.filteredCities = response.data
});
},
methods: {
/** 查询部门下拉树结构 */
getDeptTree() {
deptList().then((response) => {
this.deptOptions = response.data;
// this.enabledDeptOptions = this.filterDisabledDept(
// JSON.parse(JSON.stringify(response.data))
// );
});
},
filterDept(query) {
if (!query) {
this.filteredCities = [...this.options4dept];
return;
}
const q = query.toLowerCase();
this.filteredCities = this.options4dept.filter(city =>
city.deptName.includes(q) ||
city.deptName.toLowerCase().includes(q) ||
city.deptName.includes(q)
);
},
/** 查询公安武警列表 */
getList() {
this.loading = true;
listPsap(this.queryParams).then((response) => {
this.psapList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
id: null,
name: null,
createBy: null,
createTime: null,
orderNum: null,
deptIds: [],
type: null,
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map((item) => item.id);
this.single = selection.length !== 1;
this.multiple = !selection.length;
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加公安武警";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids;
getPsap(id).then((response) => {
this.form = response.data;
this.open = true;
this.title = "修改公安武警";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate((valid) => {
if (valid) {
if (this.form.id != null) {
updatePsap(this.form).then((response) => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addPsap(this.form).then((response) => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$modal
.confirm('是否确认删除公安武警编号为"' + ids + '"的数据项?')
.then(function () {
return delPsap(ids);
})
.then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
})
.catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.download(
"gaoqu/psap/export",
{
...this.queryParams,
},
`psap_${new Date().getTime()}.xlsx`
);
},
},
};
</script>
\ No newline at end of file
<template> <template>
<div class="app-container"> <div class="app-container">
<el-form <el-form
...@@ -9,26 +8,72 @@ ...@@ -9,26 +8,72 @@
v-show="showSearch" v-show="showSearch"
label-width="68px" label-width="68px"
> >
<el-form-item label="常识名称" prop="name"> <el-form-item label="卡号" prop="cardId">
<el-input <el-input
v-model="queryParams.name" v-model="queryParams.cardId"
placeholder="请输入安全常识名称" placeholder="请输入卡号"
clearable clearable
@keyup.enter.native="handleQuery" @keyup.enter.native="handleQuery"
/> />
</el-form-item> </el-form-item>
<el-form-item label="类型" prop="type"> <!-- <el-form-item label="定位卡型号" prop="cardModel">
<el-select v-model="queryParams.type" placeholder="请选择类型" <el-input
clearable v-model="queryParams.cardModel"
@keyup.enter.native="handleQuery"> placeholder="请输入定位卡型号"
<el-option clearable
v-for="(item, i) in dict.type.safety_type" @keyup.enter.native="handleQuery"
:key="i" />
:label="item.label" </el-form-item>
:value="'' + item.value" <el-form-item label="卡类型名称" prop="cardTypeName">
></el-option> <el-input
</el-select> v-model="queryParams.cardTypeName"
</el-form-item> placeholder="请输入卡类型名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> -->
<el-form-item label="IC卡号" prop="icCardId">
<el-input
v-model="queryParams.icCardId"
placeholder="请输入IC卡号"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<!-- <el-form-item label="电量百分比" prop="cardPower">
<el-input
v-model="queryParams.cardPower"
placeholder="请输入电量百分比"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="版本" prop="cardVersion">
<el-input
v-model="queryParams.cardVersion"
placeholder="请输入版本"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="频点" prop="cardFreq">
<el-input
v-model="queryParams.cardFreq"
placeholder="请输入频点"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> -->
<el-form-item label="启用状态" prop="cardEnable">
<el-select
v-model="queryParams.cardEnable"
placeholder="请选择启用状态"
clearable
>
<el-option label="启用" value="Y" />
<el-option label="禁用" value="N" />
</el-select>
</el-form-item>
<el-form-item> <el-form-item>
<el-button <el-button
type="primary" type="primary"
...@@ -51,7 +96,6 @@ ...@@ -51,7 +96,6 @@
icon="el-icon-plus" icon="el-icon-plus"
size="mini" size="mini"
@click="handleAdd" @click="handleAdd"
v-hasPermi="['gaoqu:knowledge:add']"
>新增</el-button >新增</el-button
> >
</el-col> </el-col>
...@@ -63,7 +107,6 @@ ...@@ -63,7 +107,6 @@
size="mini" size="mini"
:disabled="single" :disabled="single"
@click="handleUpdate" @click="handleUpdate"
v-hasPermi="['gaoqu:knowledge:edit']"
>修改</el-button >修改</el-button
> >
</el-col> </el-col>
...@@ -75,7 +118,6 @@ ...@@ -75,7 +118,6 @@
size="mini" size="mini"
:disabled="multiple" :disabled="multiple"
@click="handleDelete" @click="handleDelete"
v-hasPermi="['gaoqu:knowledge:remove']"
>删除</el-button >删除</el-button
> >
</el-col> --> </el-col> -->
...@@ -86,7 +128,7 @@ ...@@ -86,7 +128,7 @@
icon="el-icon-download" icon="el-icon-download"
size="mini" size="mini"
@click="handleExport" @click="handleExport"
v-hasPermi="['gaoqu:knowledge:export']" v-hasPermi="['system:card:export']"
>导出</el-button >导出</el-button
> >
</el-col> </el-col>
...@@ -98,14 +140,34 @@ ...@@ -98,14 +140,34 @@
<el-table <el-table
v-loading="loading" v-loading="loading"
:data="knowledgeList" :data="cardList"
@selection-change="handleSelectionChange" @selection-change="handleSelectionChange"
height="600px"
> >
<el-table-column type="selection" width="55" align="center" /> <el-table-column type="selection" width="55" align="center" />
<el-table-column label="安全常识名称" align="center" prop="name" /> <el-table-column label="卡号" align="center" prop="cardId" />
<el-table-column label="类型" align="center" prop="typeName" /> <el-table-column label="定位卡型号" align="center" prop="cardModel" />
<el-table-column label="上传时间" align="center" prop="uploadsDate" /> <el-table-column label="卡类型" align="center" prop="cardType" />
<el-table-column label="卡类型名称" align="center" prop="cardTypeName" />
<el-table-column label="IC卡号" align="center" prop="icCardId" />
<el-table-column label="电量百分比" align="center" prop="cardPower" />
<el-table-column label="卡状态" align="center" prop="cardStatus" />
<el-table-column label="版本" align="center" prop="cardVersion" />
<el-table-column label="频点" align="center" prop="cardFreq" />
<el-table-column label="启用状态" align="center" prop="cardEnable">
<template slot-scope="scope">
<el-tag :type="scope.row.cardEnable === 'Y' ? 'success' : 'danger'">
{{ scope.row.cardEnable === "Y" ? "启用" : "禁用" }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="使用状态" align="center" prop="useStatus">
<template slot-scope="scope">
<el-tag :type="scope.row.useStatus === 'Y' ? 'primary' : 'info'">
{{ scope.row.useStatus === "Y" ? "使用中" : "未使用" }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column <el-table-column
label="操作" label="操作"
align="center" align="center"
...@@ -117,7 +179,6 @@ ...@@ -117,7 +179,6 @@
type="text" type="text"
icon="el-icon-edit" icon="el-icon-edit"
@click="handleUpdate(scope.row)" @click="handleUpdate(scope.row)"
v-hasPermi="['gaoqu:knowledge:edit']"
>修改</el-button >修改</el-button
> >
<el-button <el-button
...@@ -125,7 +186,6 @@ ...@@ -125,7 +186,6 @@
type="text" type="text"
icon="el-icon-delete" icon="el-icon-delete"
@click="handleDelete(scope.row)" @click="handleDelete(scope.row)"
v-hasPermi="['gaoqu:knowledge:remove']"
>删除</el-button >删除</el-button
> >
</template> </template>
...@@ -140,86 +200,45 @@ ...@@ -140,86 +200,45 @@
@pagination="getList" @pagination="getList"
/> />
<!-- 添加或修改安全常识对话框 --> <!-- 添加或修改人员定位卡对话框 -->
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body> <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="120px"> <el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="安全常识名称" prop="name"> <el-form-item label="卡号" prop="cardId">
<el-input v-model="form.name" placeholder="请输入安全常识名称" /> <el-input v-model="form.cardId" placeholder="请输入卡号" />
</el-form-item> </el-form-item>
<el-form-item label="类型" prop="type" > <el-form-item label="定位卡型号" prop="cardModel">
<el-select v-model="form.type" placeholder="" :disabled="form.type=='3' && form.id"> <el-input v-model="form.cardModel" placeholder="请输入定位卡型号" />
<el-option
v-for="(item, i) in typeDict"
:key="i"
:label="item.label"
:value="'' + item.value"
></el-option>
</el-select>
</el-form-item> </el-form-item>
<el-form-item label="上传的视频" prop="videoUrl" v-show="form.type!='3'"> <el-form-item label="卡类型名称" prop="cardTypeName">
<el-upload <el-input
ref="videoUpload" v-model="form.cardTypeName"
class="upload-demo" placeholder="请输入卡类型名称"
:action="upload.url" />
:on-success="handleVideoUploadSuccess"
:before-upload="beforeVideoUpload"
:headers="upload.headers"
:limit="1"
accept="video/mp4"
:show-file-list="true"
:auto-upload="true"
v-model="form.videoUrl"
>
<el-button size="small" type="primary"
>点击上传</el-button
>
<div slot="tip" class="el-upload__tip">
仅支持mp4格式视频,最大支持100MB,只能上传1个
</div>
</el-upload>
</el-form-item> </el-form-item>
<el-form-item label="应知应会内容" prop="content" v-show="form.type==='3'"> <el-form-item label="IC卡号" prop="icCardId">
<editor v-model="form.content" :min-height="192" /> <el-input v-model="form.icCardId" placeholder="请输入IC卡号" />
</el-form-item> </el-form-item>
<!-- 新增附件上传表单项 --> <el-form-item label="电量百分比" prop="cardPower">
<el-form-item label="附件" prop="file" v-show="form.type==='3'"> <el-input v-model="form.cardPower" placeholder="请输入电量百分比" />
<el-upload </el-form-item>
ref="fileUpload" <el-form-item label="版本" prop="cardVersion">
class="upload-demo" <el-input v-model="form.cardVersion" placeholder="请输入版本" />
:action="upload.url" </el-form-item>
:headers="upload.headers" <el-form-item label="频点" prop="cardFreq">
:on-success="handleFileUploadSuccess" <el-input v-model="form.cardFreq" placeholder="请输入频点" />
:before-upload="beforeFileUpload" </el-form-item>
:limit="1" <el-form-item label="启用状态" prop="cardEnable">
accept="application/pdf" <el-select
:show-file-list="true" v-model="queryParams.cardEnable"
:auto-upload="true" placeholder="请选择启用状态"
v-model="form.file" clearable
>
<el-button size="small" type="primary">点击上传PDF</el-button>
<div slot="tip" class="el-upload__tip">
仅支持PDF格式,最大100MB
</div>
</el-upload>
<!-- 预览链接(上传成功后显示) -->
<el-link
v-if="form.file"
:href="form.file"
target="_blank"
type="primary"
>点击预览附件</el-link
> >
<el-option label="启用" value="Y" />
<el-option label="禁用" value="N" />
</el-select>
</el-form-item> </el-form-item>
<el-form-item label="上传日期" prop="uploadsDate"> <el-form-item label="备注" prop="remark">
<el-date-picker <el-input v-model="form.remark" placeholder="请输入备注" />
v-model="form.uploadsDate"
type="date"
placeholder="选择上传日期"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
:clearable="false"
/>
</el-form-item> </el-form-item>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
...@@ -232,34 +251,17 @@ ...@@ -232,34 +251,17 @@
<script> <script>
import { import {
listKnowledge, listCard,
getKnowledge, getCard,
delKnowledge, delCard,
addKnowledge, addCard,
updateKnowledge, updateCard,
} from "@/api/gaoqu/knowledge"; } from "@/api/jinrun/card";
import { getToken } from "@/utils/auth";
export default { export default {
name: "Knowledge", name: "Card",
dicts: ["safety_type"],
data() { data() {
return { return {
typeDict:[],
upload: {
// 是否显示弹出层(用户导入)
open: false,
// 弹出层标题(用户导入)
title: "",
// 是否禁用上传
isUploading: false,
// 是否更新已经存在的用户数据
updateSupport: 0,
// 设置上传的请求头部
headers: { Authorization: "Bearer " + getToken() },
// 上传的地址
url: process.env.VUE_APP_BASE_API + "/common/upload",
},
// 遮罩层 // 遮罩层
loading: true, loading: true,
// 选中数组 // 选中数组
...@@ -272,8 +274,8 @@ export default { ...@@ -272,8 +274,8 @@ export default {
showSearch: true, showSearch: true,
// 总条数 // 总条数
total: 0, total: 0,
// 安全常识表格数据 // 人员定位卡表格数据
knowledgeList: [], cardList: [],
// 弹出层标题 // 弹出层标题
title: "", title: "",
// 是否显示弹出层 // 是否显示弹出层
...@@ -282,104 +284,33 @@ export default { ...@@ -282,104 +284,33 @@ export default {
queryParams: { queryParams: {
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 10,
name: null, cardId: null,
type: null, cardModel: null,
videoUrl: null, cardType: null,
content: null, cardTypeName: null,
file: null, icCardId: null,
cardPower: null,
cardStatus: null,
cardVersion: null,
cardFreq: null,
cardEnable: null,
useStatus: null,
}, },
// 表单参数 // 表单参数
form: { id: null, form: {},
name: null,
type: null,
videoUrl: null,
content: null,
file: null,
uploadsDate: new Date().toISOString().split('T')[0] // 初始化时设置当前日期(格式:YYYY-MM-DD)
},
// 表单校验 // 表单校验
rules: { rules: {},
name: [
{ required: true, message: "安全常识名称不能为空", trigger: "blur" },
],
type: [ // 新增类型必填校验
{ required: true, message: "请选择类型", trigger: "change" }
],
// videoUrl: [ // 新增视频必填校验
// { required: true, message: "请上传视频", trigger: "change" }
// ],
// content: [ // 新增内容必填校验
// { required: true, message: "请输入应知应会内容", trigger: "blur" }
// ],
// file: [ // 新增附件必填校验
// { required: true, message: "请上传附件", trigger: "change" }
// ],
uploadsDate: [ // 新增日期必填校验
{ required: true, message: "请选择上传日期", trigger: "change" }
]
},
}; };
}, },
created() { created() {
this.getList(); this.getList();
this.typeDict = this.dict.type.safety_type
}, },
methods: { methods: {
/** 附件上传前校验 */ /** 查询人员定位卡列表 */
beforeFileUpload(file) {
const isPdf = file.type === "application/pdf";
const isLt100M = file.size / 1024 / 1024 < 100; // 100MB限制
if (!isPdf) {
this.$message.error("仅支持PDF格式文件上传");
return false;
}
if (!isLt100M) {
this.$message.error("文件大小不能超过100MB");
return false;
}
return true;
},
/** 附件上传成功处理 */
handleFileUploadSuccess(response, file) {
if (response.code === 200) {
this.form.file = response.url; // 假设接口返回文件路径
this.$message.success("附件上传成功");
} else {
this.$message.error("附件上传失败");
}
},
/** 视频上传前校验 */
beforeVideoUpload(file) {
const isVideo = file.type.startsWith("video/mp4");
const isLt100M = file.size / 1024 / 1024 < 100; // 限制100MB
if (!isVideo) {
this.$message.error("仅支持MP4视频格式文件上传");
return false;
}
if (!isLt100M) {
this.$message.error("视频大小不能超过100MB");
return false;
}
return true;
},
/** 视频上传成功处理 */
handleVideoUploadSuccess(response, file) {
if (response.code === 200) {
this.form.videoUrl = response.url; // 假设接口返回视频路径
this.$message.success("视频上传成功");
} else {
this.$message.error("视频上传失败");
}
},
/** 查询安全常识列表 */
getList() { getList() {
this.loading = true; this.loading = true;
listKnowledge(this.queryParams).then((response) => { listCard(this.queryParams).then((response) => {
this.knowledgeList = response.rows; this.cardList = response.data;
this.total = response.total; this.total = response.total;
this.loading = false; this.loading = false;
}); });
...@@ -393,23 +324,22 @@ export default { ...@@ -393,23 +324,22 @@ export default {
reset() { reset() {
this.form = { this.form = {
id: null, id: null,
name: null, cardId: null,
type: null, cardModel: null,
videoUrl: null, cardType: null,
content: null, cardTypeName: null,
file: null, icCardId: null,
uploadsDate: new Date().toISOString().split('T')[0] // 重置时设置当前日期 cardPower: null,
cardStatus: null,
cardVersion: null,
cardFreq: null,
cardEnable: null,
useStatus: null,
remark: null,
createTime: null,
updateTime: null,
createBy: null,
}; };
this.typeDict = this.dict.type.safety_type
// 清空上传组件的文件列表(关键新增逻辑)
if (this.$refs.videoUpload) {
this.$refs.videoUpload.clearFiles(); // 清空视频上传组件的文件列表
}
if (this.$refs.fileUpload) {
this.$refs.fileUpload.clearFiles(); // 清空附件上传组件的文件列表
}
this.resetForm("form"); this.resetForm("form");
}, },
/** 搜索按钮操作 */ /** 搜索按钮操作 */
...@@ -432,77 +362,30 @@ export default { ...@@ -432,77 +362,30 @@ export default {
handleAdd() { handleAdd() {
this.reset(); this.reset();
this.open = true; this.open = true;
this.title = "添加安全常识"; this.title = "添加人员定位卡";
}, },
/** 修改按钮操作 */ /** 修改按钮操作 */
handleUpdate(row) { handleUpdate(row) {
this.reset(); this.reset();
// const id = row.id || this.ids const id = row.id || this.ids;
// getKnowledge(id).then(response => { getCard(row).then((response) => {
this.typeDict = this.dict.type.safety_type.filter((item)=>{ this.form = response.data;
if(row.id&&row.type!=='3'){ this.open = true;
return item.value+'' !== '3' this.title = "修改人员定位卡";
} });
return true
})
this.form = JSON.parse(JSON.stringify(row));
this.open = true;
this.title = "修改安全常识";
// 回显视频上传组件的历史文件
if (this.form.videoUrl) {
// 从URL中提取文件名(例如:"test.mp4")
const fileName = this.form.videoUrl.split('/').pop();
// 构造符合el-upload格式的文件对象(需包含name/url/status)
this.$refs.videoUpload.fileList = [{
name: fileName,
url: this.form.videoUrl,
status: 'success' // 标记为已上传状态
}];
}
// 回显附件上传组件的历史文件(可选,根据业务需求)
if (this.form.file) {
const fileFileName = this.form.file.split('/').pop();
this.$refs.fileUpload.fileList = [{
name: fileFileName,
url: this.form.file,
status: 'success'
}];
}
// });
}, },
/** 提交按钮 */ /** 提交按钮 */
submitForm() { submitForm() {
console.log(this.$modal)
this.$refs["form"].validate((valid) => { this.$refs["form"].validate((valid) => {
if (valid) { if (valid) {
if(this.form.type === '3'){ // 应知应会内容
if(!this.form.content){
this.$modal.alertWarning('请输入应知应会内容');
return;
}
if(!this.form.file){
this.$modal.alertWarning('请上传附件');
return;
}
}
if(this.form.type !== '3'){ // 警示、常识视频等内容
if(!this.form.videoUrl){
this.$modal.alertWarning('请上传视频');
return;
}
}
if (this.form.id != null) { if (this.form.id != null) {
updateKnowledge(this.form).then((response) => { updateCard(this.form).then((response) => {
this.$modal.msgSuccess("修改成功"); this.$modal.msgSuccess("修改成功");
this.open = false; this.open = false;
this.getList(); this.getList();
}); });
} else { } else {
addKnowledge(this.form).then((response) => { addCard(this.form).then((response) => {
this.$modal.msgSuccess("新增成功"); this.$modal.msgSuccess("新增成功");
this.open = false; this.open = false;
this.getList(); this.getList();
...@@ -515,9 +398,9 @@ export default { ...@@ -515,9 +398,9 @@ export default {
handleDelete(row) { handleDelete(row) {
const ids = row.id || this.ids; const ids = row.id || this.ids;
this.$modal this.$modal
.confirm('是否确认删除该数据') .confirm('是否确认删除人员定位卡编号为"' + ids + '"的数据项')
.then(function () { .then(function () {
return delKnowledge(ids); return delCard(row);
}) })
.then(() => { .then(() => {
this.getList(); this.getList();
...@@ -528,11 +411,11 @@ export default { ...@@ -528,11 +411,11 @@ export default {
/** 导出按钮操作 */ /** 导出按钮操作 */
handleExport() { handleExport() {
this.download( this.download(
"gaoqu/knowledge/export", "system/card/export",
{ {
...this.queryParams, ...this.queryParams,
}, },
`knowledge_${new Date().getTime()}.xlsx` `card_${new Date().getTime()}.xlsx`
); );
}, },
}, },
......
<template> <template>
<div class="login"> <div class="login">
<el-form <el-form
ref="loginForm" ref="loginForm"
:model="loginForm" :model="loginForm"
:rules="loginRules" :rules="loginRules"
class="login-form" class="login-form"
> >
<h3 class="title">{{ title }}</h3> <h3 class="title">{{ title }}</h3>
<el-form-item prop="username"> <el-form-item prop="username">
<el-input <el-input
v-model="loginForm.username" v-model="loginForm.username"
type="text" type="text"
auto-complete="off" auto-complete="off"
placeholder="账号" placeholder="账号"
> >
<svg-icon <svg-icon
slot="prefix" slot="prefix"
icon-class="user" icon-class="user"
class="el-input__icon input-icon" class="el-input__icon input-icon"
/> />
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item prop="password"> <el-form-item prop="password">
<el-input <el-input
v-model="loginForm.password" v-model="loginForm.password"
type="password" type="password"
auto-complete="off" auto-complete="off"
placeholder="密码" placeholder="密码"
@keyup.enter.native="handleLogin" @keyup.enter.native="handleLogin"
> >
<svg-icon <svg-icon
slot="prefix" slot="prefix"
icon-class="password" icon-class="password"
class="el-input__icon input-icon" class="el-input__icon input-icon"
/> />
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item prop="code" v-if="captchaEnabled"> <el-form-item prop="code" v-if="captchaEnabled">
<el-input <el-input
v-model="loginForm.code" v-model="loginForm.code"
auto-complete="off" auto-complete="off"
placeholder="验证码" placeholder="验证码"
style="width: 63%" style="width: 63%"
@keyup.enter.native="handleLogin" @keyup.enter.native="handleLogin"
> >
<svg-icon <svg-icon
slot="prefix" slot="prefix"
icon-class="validCode" icon-class="validCode"
class="el-input__icon input-icon" class="el-input__icon input-icon"
/> />
</el-input> </el-input>
<div class="login-code"> <div class="login-code">
<img :src="codeUrl" @click="getCode" class="login-code-img" /> <img :src="codeUrl" @click="getCode" class="login-code-img" />
</div> </div>
</el-form-item> </el-form-item>
<el-checkbox <el-checkbox
v-model="loginForm.rememberMe" v-model="loginForm.rememberMe"
style="margin: 0px 0px 25px 0px" style="margin: 0px 0px 25px 0px"
>记住密码</el-checkbox >记住密码</el-checkbox
> >
<el-form-item style="width: 100%"> <el-form-item style="width: 100%">
<el-button <el-button
:loading="loading" :loading="loading"
size="medium" size="medium"
type="primary" type="primary"
style="width: 100%" style="width: 100%"
@click.native.prevent="handleLogin" @click.native.prevent="handleLogin"
> >
<span v-if="!loading">登 录</span> <span v-if="!loading">登 录</span>
<span v-else>登 录 中...</span> <span v-else>登 录 中...</span>
</el-button> </el-button>
<div style="float: right" v-if="register"> <div style="float: right" v-if="register">
<router-link class="link-type" :to="'/register'" <router-link class="link-type" :to="'/register'"
>立即注册</router-link >立即注册</router-link
> >
</div> </div>
</el-form-item> </el-form-item>
</el-form> </el-form>
<!-- 底部 --> <!-- 底部 -->
<div class="el-login-footer"> <div class="el-login-footer">
<span>晶合科技</span> <span>晶合科技</span>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
...@@ -90,170 +90,171 @@ import Cookies from "js-cookie"; ...@@ -90,170 +90,171 @@ import Cookies from "js-cookie";
import { encrypt, decrypt } from "@/utils/jsencrypt"; import { encrypt, decrypt } from "@/utils/jsencrypt";
export default { export default {
name: "Login", name: "Login",
data() { data() {
return { return {
title: process.env.VUE_APP_TITLE, title: process.env.VUE_APP_TITLE,
codeUrl: "", codeUrl: "",
loginForm: { loginForm: {
username: "", username: "",
password: "", password: "",
rememberMe: false, rememberMe: false,
code: "", code: "",
uuid: "", uuid: "",
}, },
loginRules: { loginRules: {
username: [ username: [
{ required: true, trigger: "blur", message: "请输入您的账号" }, { required: true, trigger: "blur", message: "请输入您的账号" },
], ],
password: [ password: [
{ required: true, trigger: "blur", message: "请输入您的密码" }, { required: true, trigger: "blur", message: "请输入您的密码" },
], ],
code: [{ required: true, trigger: "change", message: "请输入验证码" }], code: [{ required: true, trigger: "change", message: "请输入验证码" }],
}, },
loading: false, loading: false,
// 验证码开关 // 验证码开关
captchaEnabled: true, captchaEnabled: true,
// 注册开关 // 注册开关
register: false, register: false,
redirect: undefined, redirect: undefined,
}; };
}, },
watch: { watch: {
$route: { $route: {
handler: function (route) { handler: function (route) {
this.redirect = route.query && route.query.redirect; this.redirect = route.query && route.query.redirect;
}, },
immediate: true, immediate: true,
}, },
}, },
created() { created() {
this.getCode(); this.getCode();
this.getCookie(); this.getCookie();
}, },
methods: { methods: {
getCode() { getCode() {
getCodeImg().then((res) => { getCodeImg().then((res) => {
this.captchaEnabled = this.captchaEnabled =
res.captchaEnabled === undefined ? true : res.captchaEnabled; res.captchaEnabled === undefined ? true : res.captchaEnabled;
if (this.captchaEnabled) { if (this.captchaEnabled) {
this.codeUrl = "data:image/gif;base64," + res.img; this.codeUrl = "data:image/gif;base64," + res.img;
this.loginForm.uuid = res.uuid; this.loginForm.uuid = res.uuid;
} }
}); });
}, },
getCookie() { getCookie() {
const username = Cookies.get("username"); const username = Cookies.get("username");
const password = Cookies.get("password"); const password = Cookies.get("password");
const rememberMe = Cookies.get("rememberMe"); const rememberMe = Cookies.get("rememberMe");
this.loginForm = { this.loginForm = {
username: username === undefined ? this.loginForm.username : username, username: username === undefined ? this.loginForm.username : username,
password: password:
password === undefined ? this.loginForm.password : decrypt(password), password === undefined ? this.loginForm.password : decrypt(password),
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe), rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
}; };
}, },
handleLogin() { handleLogin() {
this.$refs.loginForm.validate((valid) => { this.$refs.loginForm.validate((valid) => {
if (valid) { if (valid) {
this.loading = true; this.loading = true;
// 创建加密后的登录数据对象 // 创建加密后的登录数据对象
const encryptedForm = { const encryptedForm = {
...this.loginForm, ...this.loginForm,
password: encrypt(this.loginForm.password), // 密码加密 // password: encrypt(this.loginForm.password), // 密码加密
}; password: this.loginForm.password, // 密码加密
if (this.loginForm.rememberMe) { };
Cookies.set("username", this.loginForm.username, { expires: 30 }); if (this.loginForm.rememberMe) {
Cookies.set("password", encrypt(this.loginForm.password), { Cookies.set("username", this.loginForm.username, { expires: 30 });
expires: 30, Cookies.set("password", encrypt(this.loginForm.password), {
}); expires: 30,
Cookies.set("rememberMe", this.loginForm.rememberMe, { });
expires: 30, Cookies.set("rememberMe", this.loginForm.rememberMe, {
}); expires: 30,
} else { });
Cookies.remove("username"); } else {
Cookies.remove("password"); Cookies.remove("username");
Cookies.remove("rememberMe"); Cookies.remove("password");
} Cookies.remove("rememberMe");
console.log(decrypt(encryptedForm.password)); }
console.log(decrypt(encryptedForm.password));
this.$store this.$store
.dispatch("Login", encryptedForm) .dispatch("Login", encryptedForm)
.then(() => { .then(() => {
this.$router.push({ path: this.redirect || "/" }).catch(() => {}); this.$router.push({ path: this.redirect || "/" }).catch(() => {});
}) })
.catch(() => { .catch(() => {
this.loading = false; this.loading = false;
if (this.captchaEnabled) { if (this.captchaEnabled) {
this.getCode(); this.getCode();
} }
}); });
} }
}); });
}, },
}, },
}; };
</script> </script>
<style rel="stylesheet/scss" lang="scss"> <style rel="stylesheet/scss" lang="scss">
.login { .login {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100%; height: 100%;
background-image: url("../assets/images/login-background.jpg"); background-image: url("../assets/images/login-background.jpg");
background-size: cover; background-size: cover;
} }
.title { .title {
margin: 0px auto 30px auto; margin: 0px auto 30px auto;
text-align: center; text-align: center;
color: #707070; color: #707070;
} }
.login-form { .login-form {
border-radius: 6px; border-radius: 6px;
background: #ffffff; background: #ffffff;
width: 400px; width: 400px;
padding: 25px 25px 5px 25px; padding: 25px 25px 5px 25px;
.el-input { .el-input {
height: 38px; height: 38px;
input { input {
height: 38px; height: 38px;
} }
} }
.input-icon { .input-icon {
height: 39px; height: 39px;
width: 14px; width: 14px;
margin-left: 2px; margin-left: 2px;
} }
} }
.login-tip { .login-tip {
font-size: 13px; font-size: 13px;
text-align: center; text-align: center;
color: #bfbfbf; color: #bfbfbf;
} }
.login-code { .login-code {
width: 33%; width: 33%;
height: 38px; height: 38px;
float: right; float: right;
img { img {
cursor: pointer; cursor: pointer;
vertical-align: middle; vertical-align: middle;
} }
} }
.el-login-footer { .el-login-footer {
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
position: fixed; position: fixed;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
text-align: center; text-align: center;
color: #fff; color: #fff;
font-family: Arial; font-family: Arial;
font-size: 12px; font-size: 12px;
letter-spacing: 1px; letter-spacing: 1px;
} }
.login-code-img { .login-code-img {
height: 38px; height: 38px;
} }
</style> </style>
<template>
<div class="app-container">
<!-- 搜索行 -->
<el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
v-show="showSearch"
label-width="68px"
>
<!-- <el-form-item>
<el-select clearable v-model="queryParams.smallPlaceTypeId" @change="handleQuery" placeholder="请选择场所类型">
<el-option v-for="(item, i) in jiuxiaochangsuoTypeOptions4search" :key="i" :label="item.categoryName"
:value="Number(item.id)"></el-option>
</el-select>
</el-form-item> -->
<el-form-item>
<el-select
clearable
v-model="queryParams.industryType"
@change="handleQuery"
placeholder="请选择行业类型"
>
<el-option
v-for="(item, i) in hangyeTypeOptions"
:key="i"
:label="item.industryName"
:value="Number(item.id)"
></el-option>
</el-select>
</el-form-item>
<el-form-item prop="unitName">
<el-input
v-model="queryParams.unitName"
placeholder="请输入单位名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="handleQuery"
>查询</el-button
>
</el-form-item>
</el-form>
<!-- 按钮行 -->
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['merchant:add']"
>新增</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="info"
plain
icon="el-icon-upload2"
size="mini"
@click="handleImport"
v-hasPermi="['merchant:import']"
>导入</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['merchant:export']"
>导出</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport2weima"
v-hasPermi="['merchant:export']"
>批量导出二维码</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport4yh"
v-hasPermi="['merchant:export']"
>导出企业隐患分析</el-button
>
</el-col>
<right-toolbar
:showSearch.sync="showSearch"
@queryTable="getList"
></right-toolbar>
</el-row>
<!-- 商铺信息表格 -->
<el-table
v-loading="loading"
style="width: 100%"
height="700px"
:data="infoList"
@selection-change="handleSelectionChange"
>
<el-table-column
label="单位名称"
align="center"
width="150"
prop="unitName"
/>
<el-table-column
label="经营地址"
align="center"
width="300"
prop="businessAddress"
/>
<el-table-column
label="行业类型"
align="center"
prop="industryTypeName"
width="100"
/>
<el-table-column
label="使用性质"
align="center"
width="100"
prop="useNature"
/>
<el-table-column
label="统一社会信用代码"
align="center"
width="100"
prop="unifiedSocialCreditCode"
/>
<el-table-column label="建筑面积" align="center" prop="area" width="80" />
<el-table-column
label="员工人数"
align="center"
prop="employeeCount"
width="50"
/>
<el-table-column
label="负责人"
align="center"
prop="merchantName"
width="80"
/>
<el-table-column
label="商户联系方式"
align="center"
prop="merchantPhone"
width="120"
/>
<el-table-column
label="所属社区"
align="center"
prop="communityName"
width="80"
/>
<el-table-column
label="所属街道"
align="center"
prop="streetName"
width="80"
/>
<el-table-column
label="所属网格"
align="center"
prop="gridName"
width="80"
/>
<el-table-column
label="网格员姓名"
align="center"
prop="gridMemberName"
width="100"
/>
<el-table-column
label="网格员电话"
align="center"
prop="gridMemberPhone"
width="120"
/>
<el-table-column label="备注" align="center" prop="remark" width="80" />
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
fixed="right"
width="200"
>
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-download"
@click="lookQRcode(scope.row)"
v-hasPermi="['merchant:QRcode']"
>下载二维码</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['merchant:edit']"
>修改</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['merchant:remove']"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 10"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改商户信息对话框 -->
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="140px">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="单位名称" prop="unitName">
<el-input v-model="form.unitName" placeholder="请输入单位名称" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="隶属网格" prop="grid">
<treeselect
v-model="form.grid"
:options="deptOptions"
normalizer1="normalizer"
placeholder="请选择隶属网格"
/>
</el-form-item>
<!-- -->
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="行业类型" prop="industryType">
<treeselect
v-model="form.industryType"
:options="hangyeTypeOptions"
:normalizer="industryNormalizer"
placeholder="请选择行业类型"
@select="handleIndustryChange"
:searchable="true"
:clearable="true"
/>
</el-form-item>
</el-col>
<!-- <el-col :span="12">
<el-form-item label="场所类型" prop="smallPlaceTypeId">
<el-select
v-model="form.smallPlaceTypeId"
placeholder="请选择场所类型"
>
<el-option
v-for="(item, i) in jiuxiaochangsuoTypeOptions"
:key="i"
:label="item.categoryName"
:value="Number(item.id)"
></el-option>
</el-select>
</el-form-item>
</el-col> -->
</el-row>
<el-form-item label="经营地址" prop="businessAddress">
<el-input
type="textarea"
:rows="2"
v-model="form.businessAddress"
placeholder="请输入经营地址"
/>
</el-form-item>
<el-form-item label="统一社会信用代码" prop="unifiedSocialCreditCode">
<el-input
v-model="form.unifiedSocialCreditCode"
placeholder="请输入统一社会信用代码"
/>
</el-form-item>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="员工人数" prop="employeeCount">
<el-input
v-model="form.employeeCount"
placeholder="请输入员工人数"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="使用性质" prop="useNature">
<el-input v-model="form.useNature" placeholder="请输入使用性质" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<!-- 新增字段容器 -->
<el-col :span="12">
<el-form-item label="负责人" prop="owner">
<el-input
v-model="form.merchantName"
placeholder="请输入负责人"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<span style="color: red; font-size: 12px; margin-left: 140px"
>爱山东商户登录手机号用</span
>
<el-form-item label="商户联系方式" prop="merchantPhone">
<el-input v-model="form.merchantPhone" placeholder="" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12" v-if="form.id">
<el-form-item label="所属网格员" prop="">
<el-input v-model="form.gridMemberName" :disabled="true" />
</el-form-item>
</el-col>
<!-- 生茶经营信息 -->
<el-col :span="12">
<el-form-item label="生产经营类型" prop="owner">
<el-select
clearable
v-model="form.businessType"
placeholder="请选择生产经营类型"
>
<el-option
v-for="(item, i) in dict.type.business_type"
:key="i"
:label="item.label"
:value="item.value + ''"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="建筑面积" prop="area">
<el-input
v-model="form.area"
type="number"
placeholder="请输入建筑面积"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="建筑结构" prop="buildingStructure">
<el-input
v-model="form.buildingStructure"
placeholder="请输入建筑结构"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="产权人" prop="owner">
<el-input v-model="form.owner" placeholder="" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="产权人电话" prop="owner">
<el-input v-model="form.ownerPhone" placeholder="" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="经营人" prop="owner">
<el-input v-model="form.operator" placeholder="" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="经营人电话" prop="owner">
<el-input v-model="form.operatorPhone" placeholder="" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="房屋类型" prop="owner">
<el-select
clearable
v-model="form.houseType"
placeholder="请选择房屋类型"
>
<el-option
v-for="(item, i) in dict.type.house_type"
:key="i"
:label="item.label"
:value="item.value + ''"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="房屋用途" prop="owner">
<el-select
clearable
v-model="form.houseUsage"
placeholder="请选择房屋用途"
>
<el-option
v-for="(item, i) in dict.type.house_usage"
:key="i"
:label="item.label"
:value="item.value + ''"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="房东姓名" prop="owner">
<el-input v-model="form.landlordName" placeholder="" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="房东联系方式" prop="owner">
<el-input v-model="form.landlordContact" placeholder="" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="备注" prop="remark">
<el-input
v-model="form.remark"
type="textarea"
placeholder="请输入内容"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24">
<!-- 图片上传组件 -->
<el-form-item label="平面疏散图片" prop="floorPlanPhotos">
<imageUpload
v-model="form.floorEvacuationPlan"
:limit="4"
></imageUpload>
</el-form-item>
<!-- 图片上传组件 -->
<el-form-item label="平面图片" prop="floorPlanPhotos">
<imageUpload
v-model="form.floorPlanPhotos"
:limit="4"
></imageUpload>
</el-form-item>
<!-- 图片上传组件 -->
<el-form-item label="门头图片" prop="storefrontPhotos">
<imageUpload
v-model="form.storefrontPhotos"
:limit="1"
></imageUpload>
</el-form-item>
<!-- 图片上传组件 -->
<el-form-item label="营业执照" prop="businessLicensePhotos">
<imageUpload
v-model="form.businessLicensePhotos"
:limit="1"
></imageUpload>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<!-- 商铺导入对话框 -->
<el-dialog
:title="upload.title"
:visible.sync="upload.open"
width="400px"
append-to-body
>
<el-upload
ref="upload"
:limit="1"
accept=".xlsx, .xls"
:headers="upload.headers"
:action="upload.url + '?updateSupport=' + upload.updateSupport"
:disabled="upload.isUploading"
:on-progress="handleFileUploadProgress"
:on-success="handleFileSuccess"
:auto-upload="false"
drag
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<div class="el-upload__tip text-center" slot="tip">
<div class="el-upload__tip" slot="tip">
<el-checkbox
v-model="upload.updateSupport"
/>是否更新已经存在的用户数据
</div>
<span>仅允许导入xls、xlsx格式文件。</span>
<el-link
type="primary"
:underline="false"
style="font-size: 12px; vertical-align: baseline"
@click="importTemplate"
>下载模板</el-link
>
</div>
</el-upload>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitFileForm">确 定</el-button>
<el-button @click="upload.open = false">取 消</el-button>
</div>
</el-dialog>
<!-- 导出条件选择弹窗 -->
<el-dialog
title="导出数据"
:visible.sync="exportDialogVisible"
width="600px"
append-to-body
>
<el-form :model="exportParams" label-width="100px">
<el-form-item label="管辖网格">
<treeselect
value-consists-of="BRANCH_PRIORITY"
v-model="exportParams.deptIds"
:options="deptOptions4search"
:multiple="true"
placeholder="请选择隶属网格"
/>
</el-form-item>
<el-form-item label="创建时间">
<el-date-picker
v-model="exportParams.createTime"
style="width: 100%"
value-format="yyyy-MM-dd"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="exportDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="confirmExport">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
listInfo,
getInfo,
delInfo,
addInfo,
updateInfo,
getImgUrl,
deptList,
getJiuxiaochangsuoTypeList,
getHangyeTypeList,
} from "@/api/stData/merchantList";
import { exportInfor } from "@/api/tool/gen.js";
import Treeselect from "@riophae/vue-treeselect";
import { getToken } from "@/utils/auth";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
name: "MerchantList",
dicts: ["house_type", "house_usage", "business_type"],
components: { Treeselect },
data() {
return {
fileList: [], // 存储上传的文件列表
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 商户信息表格数据
infoList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
unitName: null,
businessAddress: null,
smallPlaceTypeId: null,
useNature: null,
unifiedSocialCreditCode: null,
area: null,
employeeCount: null,
owner: null,
merchantPhone: null,
grid: null,
street: null,
industryType: null,
},
// 导出弹窗参数
exportDialogVisible: false,
// 导出参数
exportParams: {
deptIds: [],
createTime: [],
},
// 表单参数
form: {
floorEvacuationPlan: [],
floorPlanPhotos: [], // 新增:存储图片URL数组
storefrontPhotos: [], // 新增:存储图片URL数
businessLicensePhotos: [], // 新增:存储图片URL数组
},
uploadImgUrl: process.env.VUE_APP_BASE_API + "common/upload", // 图片上传接口地址(需调整)
// 表单校验
rules: {
unitName: [
{ required: true, message: "请输入单位名称", trigger: "blur" },
],
businessAddress: [
{ required: true, message: "经营地址不能为空", trigger: "blur" },
],
industryType: [
{
required: true,
message: "请选择行业类型",
trigger: "blur",
},
],
useNature: [
{ required: true, message: "请输入使用性质", trigger: "blur" },
],
unifiedSocialCreditCode: [
{
required: true,
message: "请输入统一社会信用代码",
trigger: "blur",
},
{
pattern: /^[0-9A-Z]{18}/,
message: "请输入正确的统一社会信用代码",
trigger: "blur",
},
],
area: [{ required: true, message: "请输入建筑面积", trigger: "blur" }],
employeeCount: [
{ required: true, message: "请输入员工人数", trigger: "blur" },
],
merchantName: [
{ required: true, message: "请输入负责人", trigger: "blur" },
],
merchantPhone: [
{ required: true, message: "请输入商户联系方式", trigger: "blur" },
{
pattern: /^1[3456789]\d{9}$/,
message: "手机号码格式不正确",
trigger: "blur",
},
],
grid: [{ required: true, message: "请输入所属社区", trigger: "blur" }],
// street: [
// { required: true, message: "请输入所属街道", trigger: "blur" },
// ],
},
// 所有部门树选项
deptOptions: undefined,
// 所有部门树选项
deptOptions4search: [],
// 过滤掉已禁用部门树选项
// enabledDeptOptions: undefined,
hangyeTypeOptions: [],
jiuxiaochangsuoTypeOptions: [],
jiuxiaochangsuoTypeOptions4search: [],
// 商铺导入参数
upload: {
// 是否显示弹出层(用户导入)
open: false,
// 弹出层标题(用户导入)
title: "",
// 是否禁用上传
isUploading: false,
// 是否更新已经存在的用户数据
updateSupport: 0,
// 设置上传的请求头部
headers: { Authorization: "Bearer " + getToken() },
// 上传的地址
// url: process.env.VUE_APP_BASE_API + 'gq/merchant/importData', // 确定导入文件
url: process.env.VUE_APP_BASE_API + "/export/file/upload",
},
};
},
created() {
this.getList();
this.getDeptTree();
this.getDeptTree4search();
this.getHangyeTypeList();
this.getJiuxiaochangsuoTypeList4search();
// listDept().then((response) => {
// this.wanggeOptions = this.handleTree(response.data, "grid");
// });
},
watch: {
// 监听导出弹窗关闭事件,清空选择的值
exportDialogVisible(newVal) {
if (!newVal) {
// 弹窗关闭时清空treeselect组件的值
this.exportParams.deptIds = [];
this.exportParams.createTime = [];
}
},
},
methods: {
/** 确认导出操作 */
confirmExport() {
// 关闭弹窗
this.exportDialogVisible = false;
// 调用下载方法,传递导出参数
this.download(
"/gq/merchant/getQrCodes",
{
// 合并导出参数和查询参数中的其他可能需要的字段
...this.queryParams,
deptIds: JSON.stringify(this.exportParams.deptIds),
createTime: JSON.stringify(this.exportParams.createTime),
},
`商铺二维码_${this.formatDate(
new Date(),
"YYYY年MM月DD日HH时mm分ss秒"
)}.zip`
);
},
/** 查询部门下拉树结构 */
getDeptTree4search() {
deptList().then((response) => {
this.deptOptions4search = response.data;
});
},
/** 转换行业类型数据结构 */
industryNormalizer(node) {
if (node.children && !node.children.length) {
delete node.children;
}
return {
id: node.id + "",
label: node.industryName,
children: node.children,
};
},
// 查询场所类型类型列表
getJiuxiaochangsuoTypeList4search(param) {
console.log("pram", param, "查询场所类型类型列表");
getJiuxiaochangsuoTypeList({
industryId: "1",
}).then((response) => {
this.jiuxiaochangsuoTypeOptions4search = response.data;
});
},
handleIndustryChange(node, instanceId) {
// treeselect 的 @select 事件传递的是选中的节点对象
const val = node ? node.id : this.form.industryType;
console.log("修改", val);
this.jiuxiaochangsuoTypeOptions = [];
this.form.smallPlaceTypeId = null;
if (val) {
this.getJiuxiaochangsuoTypeList({
industryId: val,
});
}
},
// 查询行业类型列表
getHangyeTypeList() {
getHangyeTypeList().then((response) => {
this.hangyeTypeOptions = response.data;
});
},
// 查询场所类型类型列表
getJiuxiaochangsuoTypeList(param) {
console.log("pram", param, "查询场所类型类型列表");
getJiuxiaochangsuoTypeList(param).then((response) => {
this.jiuxiaochangsuoTypeOptions = response.data;
});
},
/** 查询部门下拉树结构 */
getDeptTree() {
deptList().then((response) => {
this.deptOptions = response.data;
// this.enabledDeptOptions = this.filterDisabledDept(
// JSON.parse(JSON.stringify(response.data))
// );
});
},
// 过滤禁用的部门
filterDisabledDept(deptList) {
return deptList.filter((dept) => {
if (dept.disabled) {
return false;
}
if (dept.children && dept.children.length) {
dept.children = this.filterDisabledDept(dept.children);
}
return true;
});
},
/** 查询商户信息列表 */
getList() {
this.loading = true;
listInfo(this.queryParams).then((response) => {
this.infoList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
id: null,
unitName: null,
businessAddress: null,
smallPlaceTypeId: null,
useNature: null,
unifiedSocialCreditCode: null,
area: null,
employeeCount: null,
owner: null,
merchantPhone: null,
grid: null,
street: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null,
remark: null,
floorEvacuationPlan: [],
floorPlanPhotos: [], // 新增:清空图片URL数组
storefrontPhotos: [], // 新增:清空图片URL数组
businessLicensePhotos: [], // 新增:清空图片URL数组
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map((item) => item.id);
this.single = selection.length !== 1;
this.multiple = !selection.length;
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加商户信息";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids;
getInfo(id).then((response) => {
this.form = response.data;
if (!this.form.industryType) {
this.form.industryType = null;
}
this.open = true;
this.title = "修改商户信息";
this.getJiuxiaochangsuoTypeList({
industryId: row.industryType,
});
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate((valid) => {
if (valid) {
console.log(
"if(this.form.floorEvacuationPlan",
this.form.floorEvacuationPlan,
!this.form.floorEvacuationPlan.length
);
if (!this.form.floorEvacuationPlan.length) {
this.form.floorEvacuationPlan = "";
}
if (!this.form.floorPlanPhotos.length) {
this.form.floorPlanPhotos = "";
}
if (!this.form.businessLicensePhotos.length) {
this.form.businessLicensePhotos = "";
}
if (!this.form.storefrontPhotos.length) {
this.form.storefrontPhotos = "";
}
if (this.form.id != null) {
// 删除对应参数
delete this.form["floorEvacuationPlanH5"];
delete this.form["floorPlanPhotosH5"];
delete this.form["businessLicensePhotosH5"];
delete this.form["storefrontPhotosH5"];
updateInfo(this.form).then((response) => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addInfo(this.form).then((response) => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$modal
.confirm('是否确认删除商户信息编号为"' + ids + '"的数据项?')
.then(function () {
return delInfo(ids);
})
.then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
})
.catch(() => {});
},
// 查看二维码
// 修改背景图片路径和二维码数据处理方式
lookQRcode(item) {
// const createCanvasImage = (bgUrl, qrUrl) => {
// return new Promise((resolve, reject) => {
// const canvas = document.createElement("canvas");
// const ctx = canvas.getContext("2d");
// // 加载背景图
// const img = new Image();
// img.crossOrigin = "Anonymous"; // 解决跨域问题
// img.src = bgUrl;
// img.onload = () => {
// canvas.width = img.width;
// canvas.height = img.height;
// ctx.drawImage(img, 0, 0);
// // 加载二维码图
// const qrImg = new Image();
// qrImg.src = qrUrl;
// qrImg.onload = () => {
// // 绘制二维码(调整为左下角)
// const qrSize = 610;
// // 在lookQRcode方法中修改二维码定位坐标
// ctx.drawImage(
// qrImg,
// (canvas.width - qrSize) / 2, // 水平居中
// (canvas.height - qrSize) / 2 + 40, // 垂直居中
// qrSize,
// qrSize
// );
// // 转换画布为可下载格式
// canvas.toBlob((blob) => {
// resolve(URL.createObjectURL(blob));
// }, "image/png");
// };
// qrImg.onerror = () => reject("二维码加载失败");
// };
// img.onerror = () => reject("背景图加载失败");
// });
// };
// getImgUrl(item.id).then(async (res) => {
// if (res.code === 200) {
// try {
// // 修正背景图路径(需要将图片放入public目录)
// const bgPath = "/img/erweimabg.png";
// // 生成带前缀的base64数据
// const qrData = res.data;
// const mergedUrl = await createCanvasImage(bgPath, qrData);
// // 创建下载链接
// const aLink = document.createElement("a");
// aLink.download = `${item.unitName}_合成二维码.png`;
// aLink.href = mergedUrl;
// document.body.appendChild(aLink); // 需要临时添加到DOM
// aLink.click();
// document.body.removeChild(aLink);
// URL.revokeObjectURL(mergedUrl); // 释放内存
// } catch (error) {
// console.error("图片合成失败:", error);
// this.$message.error("下载失败,请检查控制台");
// }
// }
// });
// },
getImgUrl(item.id).then((res) => {
if (res.code === 200) {
let base64 = res.data.toString();
let byteCharacters = atob(
base64.replace(/^data:image\/(png|jpeg|jpg);base64,/, "")
);
let byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
byteNumbers[i] = byteCharacters.charCodeAt(i);
}
let byteArray = new Uint8Array(byteNumbers);
let blob = new Blob([byteArray], {
type: undefined,
});
let aLink = document.createElement("a");
aLink.download = `${item.unitName}.png`; //这里写保存时的图片名称
aLink.href = URL.createObjectURL(blob);
aLink.click();
}
});
},
exportData() {
exportInfor().then((res) => {
let url = window.URL.createObjectURL(res);
let a = document.createElement("a");
document.body.appendChild(a);
a.href = url;
a.download = "失败数据列表.xlsx";
a.click();
window.URL.revokeObjectURL(url);
});
},
// 文件上传中处理
handleFileUploadProgress(event, file, fileList) {
this.upload.isUploading = true;
},
// 文件上传成功处理
handleFileSuccess(response, file, fileList) {
this.upload.open = false;
this.upload.isUploading = false;
this.$refs.upload.clearFiles();
this.$alert(
"<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
"导入成功:" +
response.data.success +
"条<br/>" +
"导入失败:" +
response.data.error +
"条<br/>" +
"</div>",
"导入结果",
{
dangerouslyUseHTMLString: true,
callback: () => {
this.exportData();
},
}
);
this.getList();
},
// 提交上传文件
submitFileForm() {
this.$refs.upload.submit();
},
/** 下载模板操作 */
importTemplate() {
this.download(
"gq/merchant/importTemplate",
{},
`商铺信息模版_${this.formatDate(
new Date(),
"YYYY年MM月DD日 HH时mm分ss秒"
)}.xlsx`
);
},
/** 导入按钮操作 */
handleImport() {
this.upload.title = "用户导入";
this.upload.open = true;
},
/** 导出按钮操作 */
handleExport() {
this.download(
"/gq/merchant/export",
{
...this.queryParams,
},
`商铺信息列表_${this.formatDate(
new Date(),
"YYYY年MM月DD日HH时mm分ss秒"
)}.xlsx`
);
},
handleExport2weima() {
// 打开导出弹窗,而不是直接导出
this.exportDialogVisible = true;
},
handleExport4yh() {
this.download(
"/gq/hiddenDanger/exportHidden",
{
...this.queryParams,
},
`企业隐患分析_${this.formatDate(
new Date(),
"YYYY年MM月DD日HH时mm分ss秒"
)}.xlsx`
);
},
// 修改后的日期格式化方法
formatDate(date, format) {
const pad = (n) => (n < 10 ? "0" + n : n);
return format
.replace("YYYY", date.getFullYear())
.replace("MM", pad(date.getMonth() + 1))
.replace("DD", pad(date.getDate()))
.replace("HH", pad(date.getHours()))
.replace("mm", pad(date.getMinutes()))
.replace("ss", pad(date.getSeconds()))
.replace("", "") // 保持中文年字符
.replace("", "") // 保持中文月字符
.replace("", "") // 保持中文日字符
.replace("", "") // 保持中文单位
.replace("", "")
.replace("", "");
},
},
};
</script>
<style scoped lang="scss">
::v-deep .vue-treeselect__menu-container {
width: auto !important;
min-width: 100% !important;
}
::v-deep .vue-treeselect__menu {
width: 100% !important;
}
</style>
<template>
<div class="app-container">
<h4 class="form-header h4">基本信息</h4>
<el-form ref="form" :model="form" label-width="80px">
<el-row>
<el-col :span="8" :offset="2">
<el-form-item label="用户昵称" prop="nickName">
<el-input v-model="form.nickName" disabled />
</el-form-item>
</el-col>
<el-col :span="8" :offset="2">
<el-form-item label="登录账号" prop="userName">
<el-input v-model="form.userName" disabled />
</el-form-item>
</el-col>
</el-row>
</el-form>
<h4 class="form-header h4">角色信息</h4>
<el-table v-loading="loading" :row-key="getRowKey" @row-click="clickRow" ref="table" @selection-change="handleSelectionChange" :data="roles.slice((pageNum-1)*pageSize,pageNum*pageSize)">
<el-table-column label="序号" type="index" align="center">
<template slot-scope="scope">
<span>{{(pageNum - 1) * pageSize + scope.$index + 1}}</span>
</template>
</el-table-column>
<el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column>
<el-table-column label="角色编号" align="center" prop="roleId" />
<el-table-column label="角色名称" align="center" prop="roleName" />
<el-table-column label="权限字符" align="center" prop="roleKey" />
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
</el-table>
<pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" />
<el-form label-width="100px">
<el-form-item style="text-align: center;margin-left:-120px;margin-top:30px;">
<el-button type="primary" @click="submitForm()">提交</el-button>
<el-button @click="close()">返回</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import { getAuthRole, updateAuthRole } from "@/api/system/user";
export default {
name: "AuthRole",
data() {
return {
// 遮罩层
loading: true,
// 分页信息
total: 0,
pageNum: 1,
pageSize: 10,
// 选中角色编号
roleIds:[],
// 角色信息
roles: [],
// 用户信息
form: {}
};
},
created() {
const userId = this.$route.params && this.$route.params.userId;
if (userId) {
this.loading = true;
getAuthRole(userId).then((response) => {
this.form = response.user;
this.roles = response.roles;
this.total = this.roles.length;
this.$nextTick(() => {
this.roles.forEach((row) => {
if (row.flag) {
this.$refs.table.toggleRowSelection(row);
}
});
});
this.loading = false;
});
}
},
methods: {
/** 单击选中行数据 */
clickRow(row) {
this.$refs.table.toggleRowSelection(row);
},
// 多选框选中数据
handleSelectionChange(selection) {
this.roleIds = selection.map((item) => item.roleId);
},
// 保存选中的数据编号
getRowKey(row) {
return row.roleId;
},
/** 提交按钮 */
submitForm() {
const userId = this.form.userId;
const roleIds = this.roleIds.join(",");
updateAuthRole({ userId: userId, roleIds: roleIds }).then((response) => {
this.$modal.msgSuccess("授权成功");
this.close();
});
},
/** 关闭按钮 */
close() {
const obj = { path: "/system/user" };
this.$tab.closeOpenPage(obj);
},
},
};
</script>
\ No newline at end of file
<template>
<div class="app-container">
<el-row :gutter="20">
<splitpanes
:horizontal="this.$store.getters.device === 'mobile'"
class="default-theme"
>
<!--商铺数据-->
<pane size="16">
<el-col>
<div class="head-container">
<el-input
v-model="unitName"
placeholder="请输入商铺名称"
clearable
size="small"
prefix-icon="el-icon-search"
style="margin-bottom: 20px"
/>
</div>
<div class="head-container" style="height: 790px; overflow: auto">
<el-tree
:data="deptOptions"
:props="defaultProps"
:expand-on-click-node="false"
:filter-node-method="filterNode"
ref="tree"
node-key="id"
default-expand-all
highlight-current
@node-click="handleNodeClick"
/>
</div>
</el-col>
</pane>
<!--用户数据-->
<pane size="84">
<el-col>
<el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
v-show="showSearch"
label-width="68px"
>
<el-form-item label="用户名称" prop="nickName">
<el-input
v-model="queryParams.nickName"
placeholder="请输入用户名称"
clearable
style="width: 240px"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="手机号码" prop="phonenumber">
<el-input
v-model="queryParams.phonenumber"
placeholder="请输入手机号码"
clearable
style="width: 240px"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select
v-model="queryParams.status"
placeholder="用户状态"
clearable
style="width: 240px"
>
<el-option
v-for="dict in dict.type.sys_normal_disable"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="创建时间">
<el-date-picker
v-model="dateRange"
style="width: 240px"
value-format="yyyy-MM-dd"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
</el-form-item>
<el-form-item>
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="handleQuery"
>搜索</el-button
>
<el-button
icon="el-icon-refresh"
size="mini"
@click="resetQuery"
>重置</el-button
>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['shop:user:add']"
>新增</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['shop:user:edit']"
>修改</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['shop:user:remove']"
>删除</el-button
>
</el-col>
<!-- <el-col :span="1.5">
<el-button
type="info"
plain
icon="el-icon-upload2"
size="mini"
@click="handleImport"
v-hasPermi="['system:user:import']"
>导入</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['system:user:export']"
>导出</el-button
>
</el-col> -->
<right-toolbar
:showSearch.sync="showSearch"
@queryTable="getList"
:columns="columns"
></right-toolbar>
</el-row>
<el-table
v-loading="loading"
:data="userList"
@selection-change="handleSelectionChange"
height="550px"
>
<el-table-column type="selection" width="50" align="center" />
<el-table-column
label="用户编号"
align="center"
key="userId"
prop="userId"
v-if="columns[0].visible"
/>
<el-table-column
label="用户名称"
align="center"
key="nickName"
prop="nickName"
v-if="columns[1].visible"
:show-overflow-tooltip="true"
/>
<!-- <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="unitName"
prop="unitName"
v-if="columns[2].visible"
:show-overflow-tooltip="true"
/>
<el-table-column
label="手机号码/账号"
align="center"
key="phonenumber"
prop="phonenumber"
v-if="columns[3].visible"
width="120"
/>
<el-table-column
label="状态"
align="center"
key="status"
v-if="columns[4].visible"
>
<template slot-scope="scope">
<el-switch
v-model="scope.row.status"
active-value="0"
inactive-value="1"
@change="handleStatusChange(scope.row)"
></el-switch>
</template>
</el-table-column>
<el-table-column
label="创建时间"
align="center"
prop="createTime"
v-if="columns[5].visible"
width="160"
>
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column
label="操作"
align="center"
width="160"
class-name="small-padding fixed-width"
>
<template slot-scope="scope" v-if="scope.row.userId !== 1">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['shop:user:edit']"
>修改</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['shop:user:remove']"
>删除</el-button
>
<el-dropdown
size="mini"
@command="(command) => handleCommand(command, scope.row)"
v-hasPermi="['shop:user:resetPwd', 'shop:user:edit']"
>
<el-button
size="mini"
type="text"
icon="el-icon-d-arrow-right"
>更多</el-button
>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item
command="handleResetPwd"
icon="el-icon-key"
v-hasPermi="['shop:user:resetPwd']"
>重置密码</el-dropdown-item
>
<!-- <el-dropdown-item
command="handleAuthRole"
icon="el-icon-circle-check"
v-hasPermi="['shop:user:edit']"
>分配角色</el-dropdown-item
> -->
</el-dropdown-menu>
</el-dropdown>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</el-col>
</pane>
</splitpanes>
</el-row>
<!-- 添加或修改用户配置对话框 -->
<el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-row>
<el-col :span="12">
<el-form-item
v-if="form.userId == undefined"
label="用户名称"
prop="nickName"
>
<el-input
v-model="form.nickName"
placeholder="请输入用户名称"
maxlength="30"
/>
</el-form-item>
<!-- <el-form-item label="用户昵称" prop="nickName">
<el-input
v-model="form.nickName"
placeholder="请输入用户昵称"
maxlength="30"
/>
</el-form-item> -->
</el-col>
<el-col :span="12">
<el-form-item label="归属商铺" prop="merchantId">
<!-- <treeselect
v-model="form.merchantId"
:options="enabledDeptOptions4modal"
:show-count="true"
:normalizer="normalizeOptions"
placeholder="请选择归属商铺"
/> -->
<el-select
v-model="form.merchantId"
filterable
clearable="true"
:filter-method="remoteMethod4modal"
placeholder="请选择归属商铺"
>
<el-option
v-for="item in enabledDeptOptions4modal"
:key="item.id"
:label="item.unitName"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="手机号码" prop="phonenumber">
<el-input
v-model="form.phonenumber"
placeholder="请输入手机号码"
maxlength="11"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<!-- <el-form-item label="邮箱" prop="email">
<el-input
v-model="form.email"
placeholder="请输入邮箱"
maxlength="50"
/>
</el-form-item> -->
<el-form-item
v-if="form.userId == undefined"
label="用户密码"
prop="password"
>
<el-input
v-model="form.password"
placeholder="请输入用户密码"
type="password"
maxlength="20"
show-password
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12"> </el-col>
<el-col :span="12"> </el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="用户性别">
<el-select v-model="form.sex" placeholder="请选择性别">
<el-option
v-for="dict in dict.type.sys_user_sex"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="状态">
<el-radio-group v-model="form.status">
<el-radio
v-for="dict in dict.type.sys_normal_disable"
:key="dict.value"
:label="dict.value"
>{{ dict.label }}</el-radio
>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<!-- <el-form-item label="岗位">
<el-select
v-model="form.postIds"
multiple
placeholder="请选择岗位"
>
<el-option
v-for="item in postOptions"
:key="item.postId"
:label="item.postName"
:value="item.postId"
:disabled="item.status == 1"
></el-option>
</el-select>
</el-form-item> -->
</el-col>
<el-col :span="12">
<el-form-item label="角色">
<el-select
v-model="form.roleIds"
disabled
multiple
placeholder="请选择角色"
>
<el-option
v-for="item in roleOptions"
:key="item.roleId"
:label="item.roleName"
:value="item.roleId"
:disabled="item.status == 1"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="备注">
<el-input
v-model="form.remark"
type="textarea"
placeholder="请输入内容"
></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<!-- 用户导入对话框 -->
<el-dialog
:title="upload.title"
:visible.sync="upload.open"
width="400px"
append-to-body
>
<el-upload
ref="upload"
:limit="1"
accept=".xlsx, .xls"
:headers="upload.headers"
:action="upload.url + '?updateSupport=' + upload.updateSupport"
:disabled="upload.isUploading"
:on-progress="handleFileUploadProgress"
:on-success="handleFileSuccess"
:auto-upload="false"
drag
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<div class="el-upload__tip text-center" slot="tip">
<div class="el-upload__tip" slot="tip">
<el-checkbox
v-model="upload.updateSupport"
/>是否更新已经存在的用户数据
</div>
<span>仅允许导入xls、xlsx格式文件。</span>
<el-link
type="primary"
:underline="false"
style="font-size: 12px; vertical-align: baseline"
@click="importTemplate"
>下载模板</el-link
>
</div>
</el-upload>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitFileForm">确 定</el-button>
<el-button @click="upload.open = false">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
listUser,
getUser,
delUser,
addUser,
updateUser,
resetUserPwd,
changeUserStatus,
deptTreeSelect,
getRoleList,
} from "@/api/stData/shopUser";
import { getToken } from "@/utils/auth";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { Splitpanes, Pane } from "splitpanes";
import "splitpanes/dist/splitpanes.css";
export default {
name: "ShopUser",
dicts: ["sys_normal_disable", "sys_user_sex"],
components: { Treeselect, Splitpanes, Pane },
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 用户表格数据
userList: null,
// 弹出层标题
title: "",
// 所有商铺树选项
deptOptions: undefined,
// 过滤掉已禁用商铺树选项
enabledDeptOptions: undefined,
// 所有商铺树选项
deptOptions4modal: undefined,
// 过滤掉已禁用商铺树选项
enabledDeptOptions4modal: undefined,
// 是否显示弹出层
open: false,
// 商铺名称
unitName: undefined,
// 默认密码
initPassword: undefined,
// 日期范围
dateRange: [],
// 岗位选项
postOptions: [],
// 角色选项
roleOptions: [],
// 表单参数
form: {
roleIds: ["100"],
},
defaultProps: {
children: "children",
label: "unitName",
},
// 用户导入参数
upload: {
// 是否显示弹出层(用户导入)
open: false,
// 弹出层标题(用户导入)
title: "",
// 是否禁用上传
isUploading: false,
// 是否更新已经存在的用户数据
updateSupport: 0,
// 设置上传的请求头部
headers: { Authorization: "Bearer " + getToken() },
// 上传的地址
url: process.env.VUE_APP_BASE_API + "/system/user/importData",
},
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
nickName: undefined,
phonenumber: undefined,
status: undefined,
merchantId: undefined,
},
// 列信息
columns: [
{ key: 0, label: `用户编号`, visible: true },
{ key: 1, label: `用户名称`, visible: true },
// { 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 },
],
// 表单校验
rules: {
nickName: [
{ required: true, message: "用户名称不能为空", trigger: "blur" },
{
min: 2,
max: 20,
message: "用户名称长度必须介于 2 和 20 之间",
trigger: "blur",
},
],
// nickName: [
// { required: true, message: "用户昵称不能为空", trigger: "blur" },
// ],
password: [
{ required: true, message: "用户密码不能为空", trigger: "blur" },
{
min: 5,
max: 20,
message: "用户密码长度必须介于 5 和 20 之间",
trigger: "blur",
},
{
pattern: /^[^<>"'|\\]+$/,
message: "不能包含非法字符:< > \" ' \\\ |",
trigger: "blur",
},
],
// email: [
// {
// type: "email",
// message: "请输入正确的邮箱地址",
// trigger: ["blur", "change"],
// },
// ],
phonenumber: [
{ required: true, message: "用户手机号不能为空", trigger: "blur" },
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: "请输入正确的手机号码",
trigger: "blur",
},
],
},
};
},
watch: {
// 根据名称筛选商铺树
unitName(val) {
// console.log(this.$refs.tree.filter);
// this.$refs.tree.filter(val);
this.getDeptTree({
unitName: val,
});
},
},
created() {
this.getList();
this.getDeptTree();
this.getDeptTree4modal();
this.getConfigKey("sys.user.initPassword").then((response) => {
this.initPassword = response.msg;
});
getRoleList().then((res) => {
this.roleOptions = res.data;
});
},
methods: {
remoteMethod4modal(query) {
if (query !== "") {
this.loading = true;
setTimeout(() => {
this.loading = false;
this.getDeptTree4modal(query);
}, 200);
} else {
this.enabledDeptOptions4modal = [];
}
},
/** 查询用户列表 */
getList() {
this.loading = true;
listUser(this.addDateRange(this.queryParams, this.dateRange)).then(
(response) => {
this.userList = response.rows;
this.total = response.total;
this.loading = false;
}
);
},
/** 查询商铺下拉树结构 */
getDeptTree(params = {}) {
deptTreeSelect(params).then((response) => {
this.deptOptions = response.data;
this.enabledDeptOptions = response.data;
});
},
/** 查询商铺下拉树结构 模态框*/
getDeptTree4modal(query) {
deptTreeSelect({
abbreviationFlag: "1",
unitName: query,
}).then((response) => {
this.deptOptions4modal = response.data;
this.enabledDeptOptions4modal = response.data;
});
},
// vue-treeselect数据格式
normalizeOptions(node) {
// node: 原始的选项数据
// 在这里根据需要进行选项数据的规范化操作,并返回规范化后的选项数据
// 例如,可以将原始的选项数据转换为符合插件要求的结构
if (node.children && !node.children.length) {
// 去掉children=[]的children属性
delete node.children;
}
return {
id: node.id,
label: node.unitName,
};
},
// 过滤禁用的商铺
filterDisabledDept(deptList) {
return deptList.filter((dept) => {
if (dept.disabled) {
return false;
}
if (dept.children && dept.children.length) {
dept.children = this.filterDisabledDept(dept.children);
}
return true;
});
},
// 筛选节点
filterNode(value, data) {
if (!value) return true;
return data.unitName.indexOf(value) !== -1;
},
// 节点单击事件
handleNodeClick(data) {
this.queryParams.merchantId = data.id;
this.handleQuery();
},
// 用户状态修改
handleStatusChange(row) {
let text = row.status === "0" ? "启用" : "停用";
this.$modal
.confirm('确认要"' + text + '""' + row.nickName + '"用户吗?')
.then(function () {
return changeUserStatus(row.userId, row.status);
})
.then(() => {
this.$modal.msgSuccess(text + "成功");
})
.catch(function () {
row.status = row.status === "0" ? "1" : "0";
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
this.form.roleIds = [100];
},
// 表单重置
reset() {
this.form = {
userId: undefined,
merchantId: undefined,
nickName: undefined,
nickName: undefined,
password: undefined,
phonenumber: undefined,
email: undefined,
sex: undefined,
status: "0",
remark: undefined,
postIds: [],
roleIds: [100],
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.dateRange = [];
this.resetForm("queryForm");
this.queryParams.merchantId = undefined;
this.$refs.tree.setCurrentKey(null);
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map((item) => item.userId);
this.single = selection.length != 1;
this.multiple = !selection.length;
},
// 更多操作触发
handleCommand(command, row) {
switch (command) {
case "handleResetPwd":
this.handleResetPwd(row);
break;
case "handleAuthRole":
this.handleAuthRole(row);
break;
default:
break;
}
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.form.roleIds = [100];
getUser().then((response) => {
this.postOptions = response.posts;
// this.roleOptions = response.roles;
this.open = true;
this.title = "添加用户";
this.form.password = this.initPassword;
});
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const userId = row.userId || this.ids;
getUser(userId).then((response) => {
this.form = response.data;
this.form.merchantId = row.merchantId;
this.postOptions = response.posts;
// this.roleOptions = response.roles;
this.$set(this.form, "postIds", response.postIds);
this.$set(this.form, "roleIds", [100]);
this.open = true;
this.title = "修改用户";
this.form.password = "";
});
},
/** 重置密码按钮操作 */
handleResetPwd(row) {
this.$prompt('请输入"' + row.nickName + '"的新密码', "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
closeOnClickModal: false,
inputPattern: /^.{5,20}$/,
inputErrorMessage: "用户密码长度必须介于 5 和 20 之间",
inputValidator: (value) => {
if (/<|>|"|'|\||\\/.test(value)) {
return "不能包含非法字符:< > \" ' \\\ |";
}
},
})
.then(({ value }) => {
resetUserPwd(row.userId, value).then((response) => {
this.$modal.msgSuccess("修改成功,新密码是:" + value);
});
})
.catch(() => {});
},
/** 分配角色操作 */
handleAuthRole: function (row) {
const userId = row.userId;
this.$router.push("/system/user-auth/role/" + userId);
},
/** 提交按钮 */
submitForm: function () {
this.$refs["form"].validate((valid) => {
if (valid) {
if (this.form.userId != undefined) {
updateUser(this.form).then((response) => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addUser(this.form).then((response) => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const userIds = row.userId || this.ids;
this.$modal
.confirm('是否确认删除用户编号为"' + userIds + '"的数据项?')
.then(function () {
return delUser(userIds);
})
.then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
})
.catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.download(
"system/user/export",
{
...this.queryParams,
},
`user_${new Date().getTime()}.xlsx`
);
},
/** 导入按钮操作 */
handleImport() {
this.upload.title = "用户导入";
this.upload.open = true;
},
/** 下载模板操作 */
importTemplate() {
this.download(
"system/user/importTemplate",
{},
`shopUser_template_${new Date().getTime()}.xlsx`
);
},
// 文件上传中处理
handleFileUploadProgress(event, file, fileList) {
this.upload.isUploading = true;
},
// 文件上传成功处理
handleFileSuccess(response, file, fileList) {
this.upload.open = false;
this.upload.isUploading = false;
this.$refs.upload.clearFiles();
this.$alert(
"<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
response.msg +
"</div>",
"导入结果",
{ dangerouslyUseHTMLString: true }
);
this.getList();
},
// 提交上传文件
submitFileForm() {
this.$refs.upload.submit();
},
},
};
</script>
<style scoped lang="scss">
::v-deep .vue-treeselect__menu-container {
width: 400px !important;
}
</style>
<template>
<div class="app-container">
<el-row :gutter="20">
<el-col :span="6" :xs="24">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>个人信息</span>
</div>
<div>
<div class="text-center">
<userAvatar />
</div>
<ul class="list-group list-group-striped">
<li class="list-group-item">
<svg-icon icon-class="user" />用户名称
<div class="pull-right">{{ user.userName }}</div>
</li>
<li class="list-group-item">
<svg-icon icon-class="phone" />手机号码
<div class="pull-right">{{ user.phonenumber }}</div>
</li>
<li class="list-group-item">
<svg-icon icon-class="email" />用户邮箱
<div class="pull-right">{{ user.email }}</div>
</li>
<li class="list-group-item">
<svg-icon icon-class="tree" />所属部门
<div class="pull-right" v-if="user.dept">{{ user.dept.deptName }} / {{ postGroup }}</div>
</li>
<li class="list-group-item">
<svg-icon icon-class="peoples" />所属角色
<div class="pull-right">{{ roleGroup }}</div>
</li>
<li class="list-group-item">
<svg-icon icon-class="date" />创建日期
<div class="pull-right">{{ user.createTime }}</div>
</li>
</ul>
</div>
</el-card>
</el-col>
<el-col :span="18" :xs="24">
<el-card>
<div slot="header" class="clearfix">
<span>基本资料</span>
</div>
<el-tabs v-model="activeTab">
<el-tab-pane label="基本资料" name="userinfo">
<userInfo :user="user" />
</el-tab-pane>
<el-tab-pane label="修改密码" name="resetPwd">
<resetPwd />
</el-tab-pane>
</el-tabs>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
import userAvatar from "./userAvatar";
import userInfo from "./userInfo";
import resetPwd from "./resetPwd";
import { getUserProfile } from "@/api/system/user";
export default {
name: "Profile",
components: { userAvatar, userInfo, resetPwd },
data() {
return {
user: {},
roleGroup: {},
postGroup: {},
activeTab: "userinfo"
};
},
created() {
this.getUser();
},
methods: {
getUser() {
getUserProfile().then(response => {
this.user = response.data;
this.roleGroup = response.roleGroup;
this.postGroup = response.postGroup;
});
}
}
};
</script>
<template>
<el-form ref="form" :model="user" :rules="rules" label-width="80px">
<el-form-item label="旧密码" prop="oldPassword">
<el-input v-model="user.oldPassword" placeholder="请输入旧密码" type="password" show-password/>
</el-form-item>
<el-form-item label="新密码" prop="newPassword">
<el-input v-model="user.newPassword" placeholder="请输入新密码" type="password" show-password/>
</el-form-item>
<el-form-item label="确认密码" prop="confirmPassword">
<el-input v-model="user.confirmPassword" placeholder="请确认新密码" type="password" show-password/>
</el-form-item>
<el-form-item>
<el-button type="primary" size="mini" @click="submit">保存</el-button>
<el-button type="danger" size="mini" @click="close">关闭</el-button>
</el-form-item>
</el-form>
</template>
<script>
import { updateUserPwd } from "@/api/system/user";
export default {
data() {
const equalToPassword = (rule, value, callback) => {
if (this.user.newPassword !== value) {
callback(new Error("两次输入的密码不一致"));
} else {
callback();
}
};
return {
user: {
oldPassword: undefined,
newPassword: undefined,
confirmPassword: undefined
},
// 表单校验
rules: {
oldPassword: [
{ required: true, message: "旧密码不能为空", trigger: "blur" }
],
newPassword: [
{ required: true, message: "新密码不能为空", trigger: "blur" },
{ min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" },
{ pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符:< > \" ' \\\ |", trigger: "blur" }
],
confirmPassword: [
{ required: true, message: "确认密码不能为空", trigger: "blur" },
{ required: true, validator: equalToPassword, trigger: "blur" }
]
}
};
},
methods: {
submit() {
this.$refs["form"].validate(valid => {
if (valid) {
updateUserPwd(this.user.oldPassword, this.user.newPassword).then(response => {
this.$modal.msgSuccess("修改成功");
});
}
});
},
close() {
this.$tab.closePage();
}
}
};
</script>
<template>
<div>
<div class="user-info-head" @click="editCropper()"><img v-bind:src="options.img" title="点击上传头像" class="img-circle img-lg" /></div>
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @opened="modalOpened" @close="closeDialog">
<el-row>
<el-col :xs="24" :md="12" :style="{height: '350px'}">
<vue-cropper
ref="cropper"
:img="options.img"
:info="true"
:autoCrop="options.autoCrop"
:autoCropWidth="options.autoCropWidth"
:autoCropHeight="options.autoCropHeight"
:fixedBox="options.fixedBox"
:outputType="options.outputType"
@realTime="realTime"
v-if="visible"
/>
</el-col>
<el-col :xs="24" :md="12" :style="{height: '350px'}">
<div class="avatar-upload-preview">
<img :src="previews.url" :style="previews.img" />
</div>
</el-col>
</el-row>
<br />
<el-row>
<el-col :lg="2" :sm="3" :xs="3">
<el-upload action="#" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUpload">
<el-button size="small">
选择
<i class="el-icon-upload el-icon--right"></i>
</el-button>
</el-upload>
</el-col>
<el-col :lg="{span: 1, offset: 2}" :sm="2" :xs="2">
<el-button icon="el-icon-plus" size="small" @click="changeScale(1)"></el-button>
</el-col>
<el-col :lg="{span: 1, offset: 1}" :sm="2" :xs="2">
<el-button icon="el-icon-minus" size="small" @click="changeScale(-1)"></el-button>
</el-col>
<el-col :lg="{span: 1, offset: 1}" :sm="2" :xs="2">
<el-button icon="el-icon-refresh-left" size="small" @click="rotateLeft()"></el-button>
</el-col>
<el-col :lg="{span: 1, offset: 1}" :sm="2" :xs="2">
<el-button icon="el-icon-refresh-right" size="small" @click="rotateRight()"></el-button>
</el-col>
<el-col :lg="{span: 2, offset: 6}" :sm="2" :xs="2">
<el-button type="primary" size="small" @click="uploadImg()">提 交</el-button>
</el-col>
</el-row>
</el-dialog>
</div>
</template>
<script>
import store from "@/store";
import { VueCropper } from "vue-cropper";
import { uploadAvatar } from "@/api/system/user";
import { debounce } from '@/utils'
export default {
components: { VueCropper },
data() {
return {
// 是否显示弹出层
open: false,
// 是否显示cropper
visible: false,
// 弹出层标题
title: "修改头像",
options: {
img: store.getters.avatar, //裁剪图片的地址
autoCrop: true, // 是否默认生成截图框
autoCropWidth: 200, // 默认生成截图框宽度
autoCropHeight: 200, // 默认生成截图框高度
fixedBox: true, // 固定截图框大小 不允许改变
outputType:"png", // 默认生成截图为PNG格式
filename: 'avatar' // 文件名称
},
previews: {},
resizeHandler: null
};
},
methods: {
// 编辑头像
editCropper() {
this.open = true;
},
// 打开弹出层结束时的回调
modalOpened() {
this.visible = true;
if (!this.resizeHandler) {
this.resizeHandler = debounce(() => {
this.refresh()
}, 100)
}
window.addEventListener("resize", this.resizeHandler)
},
// 刷新组件
refresh() {
this.$refs.cropper.refresh();
},
// 覆盖默认的上传行为
requestUpload() {
},
// 向左旋转
rotateLeft() {
this.$refs.cropper.rotateLeft();
},
// 向右旋转
rotateRight() {
this.$refs.cropper.rotateRight();
},
// 图片缩放
changeScale(num) {
num = num || 1;
this.$refs.cropper.changeScale(num);
},
// 上传预处理
beforeUpload(file) {
if (file.type.indexOf("image/") == -1) {
this.$modal.msgError("文件格式错误,请上传图片类型,如:JPG,PNG后缀的文件。");
} else {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
this.options.img = reader.result;
this.options.filename = file.name;
};
}
},
// 上传图片
uploadImg() {
this.$refs.cropper.getCropBlob(data => {
let formData = new FormData();
formData.append("avatarfile", data, this.options.filename);
uploadAvatar(formData).then(response => {
this.open = false;
this.options.img = process.env.VUE_APP_BASE_API + response.imgUrl;
store.commit('SET_AVATAR', this.options.img);
this.$modal.msgSuccess("修改成功");
this.visible = false;
});
});
},
// 实时预览
realTime(data) {
this.previews = data;
},
// 关闭窗口
closeDialog() {
this.options.img = store.getters.avatar
this.visible = false;
window.removeEventListener("resize", this.resizeHandler)
}
}
};
</script>
<style scoped lang="scss">
.user-info-head {
position: relative;
display: inline-block;
height: 120px;
}
.user-info-head:hover:after {
content: '+';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
color: #eee;
background: rgba(0, 0, 0, 0.5);
font-size: 24px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
cursor: pointer;
line-height: 110px;
border-radius: 50%;
}
</style>
<template>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="用户昵称" prop="nickName">
<el-input v-model="form.nickName" maxlength="30" />
</el-form-item>
<el-form-item label="手机号码" prop="phonenumber">
<el-input v-model="form.phonenumber" maxlength="11" />
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="form.email" maxlength="50" />
</el-form-item>
<el-form-item label="性别">
<el-radio-group v-model="form.sex">
<el-radio label="0"></el-radio>
<el-radio label="1"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item>
<el-button type="primary" size="mini" @click="submit">保存</el-button>
<el-button type="danger" size="mini" @click="close">关闭</el-button>
</el-form-item>
</el-form>
</template>
<script>
import { updateUserProfile } from "@/api/system/user";
export default {
props: {
user: {
type: Object
}
},
data() {
return {
form: {},
// 表单校验
rules: {
nickName: [
{ required: true, message: "用户昵称不能为空", trigger: "blur" }
],
email: [
{ required: true, message: "邮箱地址不能为空", trigger: "blur" },
{
type: "email",
message: "请输入正确的邮箱地址",
trigger: ["blur", "change"]
}
],
phonenumber: [
{ required: true, message: "手机号码不能为空", trigger: "blur" },
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: "请输入正确的手机号码",
trigger: "blur"
}
]
}
};
},
watch: {
user: {
handler(user) {
if (user) {
this.form = { nickName: user.nickName, phonenumber: user.phonenumber, email: user.email, sex: user.sex };
}
},
immediate: true
}
},
methods: {
submit() {
this.$refs["form"].validate(valid => {
if (valid) {
updateUserProfile(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.user.phonenumber = this.form.phonenumber;
this.user.email = this.form.email;
});
}
});
},
close() {
this.$tab.closePage();
}
}
};
</script>
<template>
<div class="app-container">
<el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
v-show="showSearch"
label-width="68px"
>
<el-form-item label="人员类型名称" prop="personTypeName">
<el-input
v-model="queryParams.personTypeName"
placeholder="请输入人员类型名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="员工类型名称" prop="staffTypeName">
<el-input
v-model="queryParams.staffTypeName"
placeholder="请输入员工类型名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="定位图标类型名称" prop="positionIconTypeName">
<el-input
v-model="queryParams.positionIconTypeName"
placeholder="请输入定位图标类型名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="真实姓名" prop="realName">
<el-input
v-model="queryParams.realName"
placeholder="请输入真实姓名"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="手机号" prop="phone">
<el-input
v-model="queryParams.phone"
placeholder="请输入手机号"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="出生日期" prop="birth">
<el-date-picker
clearable
v-model="queryParams.birth"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择出生日期"
>
</el-date-picker>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input
v-model="queryParams.email"
placeholder="请输入邮箱"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="籍贯" prop="nativePlace">
<el-input
v-model="queryParams.nativePlace"
placeholder="请输入籍贯"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="民族" prop="nation">
<el-input
v-model="queryParams.nation"
placeholder="请输入民族"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="身份证号" prop="idNumber">
<el-input
v-model="queryParams.idNumber"
placeholder="请输入身份证号"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="人员IC卡号" prop="personIc">
<el-input
v-model="queryParams.personIc"
placeholder="请输入人员IC卡号"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="人员编号" prop="personCode">
<el-input
v-model="queryParams.personCode"
placeholder="请输入人员编号"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="人员来源" prop="personSource">
<el-input
v-model="queryParams.personSource"
placeholder="请输入人员来源"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="所属公司" prop="company">
<el-input
v-model="queryParams.company"
placeholder="请输入所属公司"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="公司名称" prop="companyName">
<el-input
v-model="queryParams.companyName"
placeholder="请输入公司名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="管理员姓名" prop="administratorName">
<el-input
v-model="queryParams.administratorName"
placeholder="请输入管理员姓名"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="管理员电话" prop="administratorPhone">
<el-input
v-model="queryParams.administratorPhone"
placeholder="请输入管理员电话"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="工号" prop="jobNumber">
<el-input
v-model="queryParams.jobNumber"
placeholder="请输入工号"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="入职日期" prop="hireDate">
<el-date-picker
clearable
v-model="queryParams.hireDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择入职日期"
>
</el-date-picker>
</el-form-item>
<el-form-item label="入职日期别名" prop="hireDateAlias">
<el-input
v-model="queryParams.hireDateAlias"
placeholder="请输入入职日期别名"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="离职日期" prop="dimissionDate">
<el-date-picker
clearable
v-model="queryParams.dimissionDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择离职日期"
>
</el-date-picker>
</el-form-item>
<el-form-item label="办公电话" prop="officePhone">
<el-input
v-model="queryParams.officePhone"
placeholder="请输入办公电话"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="职务" prop="duty">
<el-input
v-model="queryParams.duty"
placeholder="请输入职务"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="职称" prop="professionalTitle">
<el-input
v-model="queryParams.professionalTitle"
placeholder="请输入职称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="职称编号" prop="professionalTitleNumber">
<el-input
v-model="queryParams.professionalTitleNumber"
placeholder="请输入职称编号"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="工龄" prop="seniority">
<el-input
v-model="queryParams.seniority"
placeholder="请输入工龄"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="经验年限" prop="experience">
<el-input
v-model="queryParams.experience"
placeholder="请输入经验年限"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="经验描述" prop="yearPlusExperience">
<el-input
v-model="queryParams.yearPlusExperience"
placeholder="请输入经验描述"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="最高学历" prop="highestEducation">
<el-input
v-model="queryParams.highestEducation"
placeholder="请输入最高学历"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="最高学位" prop="highestDegree">
<el-input
v-model="queryParams.highestDegree"
placeholder="请输入最高学位"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="专业" prop="profession">
<el-input
v-model="queryParams.profession"
placeholder="请输入专业"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="毕业学校" prop="school">
<el-input
v-model="queryParams.school"
placeholder="请输入毕业学校"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="毕业证编号" prop="diplomaNumber">
<el-input
v-model="queryParams.diplomaNumber"
placeholder="请输入毕业证编号"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="CENG编号" prop="cengNumber">
<el-input
v-model="queryParams.cengNumber"
placeholder="请输入CENG编号"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="承包商ID" prop="contractorId">
<el-input
v-model="queryParams.contractorId"
placeholder="请输入承包商ID"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="承包商名称" prop="contractorName">
<el-input
v-model="queryParams.contractorName"
placeholder="请输入承包商名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="接收入负责人" prop="receiveLeader">
<el-input
v-model="queryParams.receiveLeader"
placeholder="请输入接收入负责人"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="接收入电话" prop="receivePhone">
<el-input
v-model="queryParams.receivePhone"
placeholder="请输入接收入电话"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="是否通行" prop="gateThrough">
<el-input
v-model="queryParams.gateThrough"
placeholder="请输入是否通行"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="离开时间" prop="leaveTime">
<el-date-picker
clearable
v-model="queryParams.leaveTime"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择离开时间"
>
</el-date-picker>
</el-form-item>
<el-form-item label="访问时间" prop="visitTime">
<el-date-picker
clearable
v-model="queryParams.visitTime"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择访问时间"
>
</el-date-picker>
</el-form-item>
<el-form-item label="流程状态" prop="process">
<el-input
v-model="queryParams.process"
placeholder="请输入流程状态"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="最后更新时间" prop="lastUpdateDate">
<el-date-picker
clearable
v-model="queryParams.lastUpdateDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择最后更新时间"
>
</el-date-picker>
</el-form-item>
<el-form-item label="最后创建时间" prop="lastCreateDate">
<el-date-picker
clearable
v-model="queryParams.lastCreateDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择最后创建时间"
>
</el-date-picker>
</el-form-item>
<el-form-item label="更新失败标志" prop="updateFail">
<el-input
v-model="queryParams.updateFail"
placeholder="请输入更新失败标志"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="卡类型名称" prop="cardTypeName">
<el-input
v-model="queryParams.cardTypeName"
placeholder="请输入卡类型名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="定位卡号" prop="cardId">
<el-input
v-model="queryParams.cardId"
placeholder="请输入定位卡号"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="IC卡号" prop="icCardId">
<el-input
v-model="queryParams.icCardId"
placeholder="请输入IC卡号"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="电量百分比" prop="cardPower">
<el-input
v-model="queryParams.cardPower"
placeholder="请输入电量百分比"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="部门名称" prop="deptName">
<el-input
v-model="queryParams.deptName"
placeholder="请输入部门名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="预约进场开始时间" prop="reservationEntryStartTime">
<el-date-picker
clearable
v-model="queryParams.reservationEntryStartTime"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择预约进场开始时间"
>
</el-date-picker>
</el-form-item>
<el-form-item label="预约进场结束时间" prop="reservationEntryEndTime">
<el-date-picker
clearable
v-model="queryParams.reservationEntryEndTime"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择预约进场结束时间"
>
</el-date-picker>
</el-form-item>
<el-form-item label="预约访问时间" prop="reservationVisitingTime">
<el-date-picker
clearable
v-model="queryParams.reservationVisitingTime"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择预约访问时间"
>
</el-date-picker>
</el-form-item>
<el-form-item label="当前操作人姓名" prop="curUserName">
<el-input
v-model="queryParams.curUserName"
placeholder="请输入当前操作人姓名"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="访客id" prop="visitorId">
<el-input
v-model="queryParams.visitorId"
placeholder="请输入访客id"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="handleQuery"
>搜索</el-button
>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
>重置</el-button
>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['system:info:add']"
>新增</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['system:info:edit']"
>修改</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['system:info:remove']"
>删除</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['system:info:export']"
>导出</el-button
>
</el-col>
<right-toolbar
:showSearch.sync="showSearch"
@queryTable="getList"
></right-toolbar>
</el-row>
<el-table
v-loading="loading"
:data="infoList"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="人员ID" align="center" prop="personId" />
<el-table-column label="人员类型" align="center" prop="personType" />
<el-table-column
label="人员类型名称"
align="center"
prop="personTypeName"
/>
<el-table-column label="员工类型编码" align="center" prop="staffType" />
<el-table-column
label="员工类型名称"
align="center"
prop="staffTypeName"
/>
<el-table-column
label="定位图标类型"
align="center"
prop="positionIconType"
/>
<el-table-column
label="定位图标类型名称"
align="center"
prop="positionIconTypeName"
/>
<el-table-column label="真实姓名" align="center" prop="realName" />
<el-table-column label="手机号" align="center" prop="phone" />
<el-table-column label="性别" align="center" prop="sex" />
<el-table-column label="出生日期" align="center" prop="birth" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.birth, "{y}-{m}-{d}") }}</span>
</template>
</el-table-column>
<el-table-column label="邮箱" align="center" prop="email" />
<el-table-column label="籍贯" align="center" prop="nativePlace" />
<el-table-column label="民族" align="center" prop="nation" />
<el-table-column label="婚姻状况" align="center" prop="maritalStatus" />
<el-table-column label="政治面貌" align="center" prop="politicsStatus" />
<el-table-column label="健康状态" align="center" prop="healthStatus" />
<el-table-column label="证件类型" align="center" prop="idType" />
<el-table-column label="身份证号" align="center" prop="idNumber" />
<el-table-column label="人员IC卡号" align="center" prop="personIc" />
<el-table-column label="人员编号" align="center" prop="personCode" />
<el-table-column label="人员来源" align="center" prop="personSource" />
<el-table-column label="所属公司" align="center" prop="company" />
<el-table-column label="公司名称" align="center" prop="companyName" />
<el-table-column
label="管理员姓名"
align="center"
prop="administratorName"
/>
<el-table-column
label="管理员电话"
align="center"
prop="administratorPhone"
/>
<el-table-column label="工号" align="center" prop="jobNumber" />
<el-table-column label="在职状态" align="center" prop="jobStatus" />
<el-table-column
label="入职日期"
align="center"
prop="hireDate"
width="180"
>
<template slot-scope="scope">
<span>{{ parseTime(scope.row.hireDate, "{y}-{m}-{d}") }}</span>
</template>
</el-table-column>
<el-table-column
label="入职日期别名"
align="center"
prop="hireDateAlias"
/>
<el-table-column
label="离职日期"
align="center"
prop="dimissionDate"
width="180"
>
<template slot-scope="scope">
<span>{{ parseTime(scope.row.dimissionDate, "{y}-{m}-{d}") }}</span>
</template>
</el-table-column>
<el-table-column label="办公电话" align="center" prop="officePhone" />
<el-table-column label="职务" align="center" prop="duty" />
<el-table-column label="职称" align="center" prop="professionalTitle" />
<el-table-column
label="职称编号"
align="center"
prop="professionalTitleNumber"
/>
<el-table-column label="工龄" align="center" prop="seniority" />
<el-table-column label="经验年限" align="center" prop="experience" />
<el-table-column
label="经验描述"
align="center"
prop="yearPlusExperience"
/>
<el-table-column
label="最高学历"
align="center"
prop="highestEducation"
/>
<el-table-column label="最高学位" align="center" prop="highestDegree" />
<el-table-column label="专业" align="center" prop="profession" />
<el-table-column label="毕业学校" align="center" prop="school" />
<el-table-column label="毕业证编号" align="center" prop="diplomaNumber" />
<el-table-column label="CENG编号" align="center" prop="cengNumber" />
<el-table-column label="附件" align="center" prop="accessory" />
<el-table-column label="附件列表" align="center" prop="accessoryList" />
<el-table-column label="承包商ID" align="center" prop="contractorId" />
<el-table-column
label="承包商名称"
align="center"
prop="contractorName"
/>
<el-table-column
label="接收入负责人"
align="center"
prop="receiveLeader"
/>
<el-table-column label="接收入电话" align="center" prop="receivePhone" />
<el-table-column label="是否通行" align="center" prop="gateThrough" />
<el-table-column
label="离开时间"
align="center"
prop="leaveTime"
width="180"
>
<template slot-scope="scope">
<span>{{ parseTime(scope.row.leaveTime, "{y}-{m}-{d}") }}</span>
</template>
</el-table-column>
<el-table-column label="访客状态" align="center" prop="visitorStatus" />
<el-table-column
label="访问时间"
align="center"
prop="visitTime"
width="180"
>
<template slot-scope="scope">
<span>{{ parseTime(scope.row.visitTime, "{y}-{m}-{d}") }}</span>
</template>
</el-table-column>
<el-table-column label="流程状态" align="center" prop="process" />
<el-table-column
label="最后更新时间"
align="center"
prop="lastUpdateDate"
width="180"
>
<template slot-scope="scope">
<span>{{ parseTime(scope.row.lastUpdateDate, "{y}-{m}-{d}") }}</span>
</template>
</el-table-column>
<el-table-column
label="最后创建时间"
align="center"
prop="lastCreateDate"
width="180"
>
<template slot-scope="scope">
<span>{{ parseTime(scope.row.lastCreateDate, "{y}-{m}-{d}") }}</span>
</template>
</el-table-column>
<el-table-column label="更新失败标志" align="center" prop="updateFail" />
<el-table-column label="在线状态" align="center" prop="onlineStatus" />
<el-table-column label="进出状态" align="center" prop="inOutStatus" />
<el-table-column label="卡类型" align="center" prop="cardType" />
<el-table-column label="卡类型名称" align="center" prop="cardTypeName" />
<el-table-column label="定位卡号" align="center" prop="cardId" />
<el-table-column label="IC卡号" align="center" prop="icCardId" />
<el-table-column label="电量百分比" align="center" prop="cardPower" />
<el-table-column label="人员照片URL" align="center" prop="personPhoto" />
<el-table-column label="照片签名" align="center" prop="photoSign" />
<el-table-column label="部门名称" align="center" prop="deptName" />
<el-table-column
label="预约进场开始时间"
align="center"
prop="reservationEntryStartTime"
width="180"
>
<template slot-scope="scope">
<span>{{
parseTime(scope.row.reservationEntryStartTime, "{y}-{m}-{d}")
}}</span>
</template>
</el-table-column>
<el-table-column
label="预约进场结束时间"
align="center"
prop="reservationEntryEndTime"
width="180"
>
<template slot-scope="scope">
<span>{{
parseTime(scope.row.reservationEntryEndTime, "{y}-{m}-{d}")
}}</span>
</template>
</el-table-column>
<el-table-column
label="预约访问时间"
align="center"
prop="reservationVisitingTime"
width="180"
>
<template slot-scope="scope">
<span>{{
parseTime(scope.row.reservationVisitingTime, "{y}-{m}-{d}")
}}</span>
</template>
</el-table-column>
<el-table-column
label="当前操作人姓名"
align="center"
prop="curUserName"
/>
<el-table-column label="访客id" align="center" prop="visitorId" />
<el-table-column
label="操作"
align="center"
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="['system:info:edit']"
>修改</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['system:info:remove']"
>删除</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"
/>
<!-- 添加或修改人员信息对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="备注" prop="remark">
<el-input
v-model="form.remark"
type="textarea"
placeholder="请输入内容"
/>
</el-form-item>
<el-form-item label="人员类型名称" prop="personTypeName">
<el-input
v-model="form.personTypeName"
placeholder="请输入人员类型名称"
/>
</el-form-item>
<el-form-item label="员工类型名称" prop="staffTypeName">
<el-input
v-model="form.staffTypeName"
placeholder="请输入员工类型名称"
/>
</el-form-item>
<el-form-item label="定位图标类型名称" prop="positionIconTypeName">
<el-input
v-model="form.positionIconTypeName"
placeholder="请输入定位图标类型名称"
/>
</el-form-item>
<el-form-item label="真实姓名" prop="realName">
<el-input v-model="form.realName" placeholder="请输入真实姓名" />
</el-form-item>
<el-form-item label="手机号" prop="phone">
<el-input v-model="form.phone" placeholder="请输入手机号" />
</el-form-item>
<el-form-item label="出生日期" prop="birth">
<el-date-picker
clearable
v-model="form.birth"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择出生日期"
>
</el-date-picker>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="form.email" placeholder="请输入邮箱" />
</el-form-item>
<el-form-item label="籍贯" prop="nativePlace">
<el-input v-model="form.nativePlace" placeholder="请输入籍贯" />
</el-form-item>
<el-form-item label="民族" prop="nation">
<el-input v-model="form.nation" placeholder="请输入民族" />
</el-form-item>
<el-form-item label="身份证号" prop="idNumber">
<el-input v-model="form.idNumber" placeholder="请输入身份证号" />
</el-form-item>
<el-form-item label="人员IC卡号" prop="personIc">
<el-input v-model="form.personIc" placeholder="请输入人员IC卡号" />
</el-form-item>
<el-form-item label="人员编号" prop="personCode">
<el-input v-model="form.personCode" placeholder="请输入人员编号" />
</el-form-item>
<el-form-item label="人员来源" prop="personSource">
<el-input v-model="form.personSource" placeholder="请输入人员来源" />
</el-form-item>
<el-form-item label="所属公司" prop="company">
<el-input v-model="form.company" placeholder="请输入所属公司" />
</el-form-item>
<el-form-item label="公司名称" prop="companyName">
<el-input v-model="form.companyName" placeholder="请输入公司名称" />
</el-form-item>
<el-form-item label="管理员姓名" prop="administratorName">
<el-input
v-model="form.administratorName"
placeholder="请输入管理员姓名"
/>
</el-form-item>
<el-form-item label="管理员电话" prop="administratorPhone">
<el-input
v-model="form.administratorPhone"
placeholder="请输入管理员电话"
/>
</el-form-item>
<el-form-item label="工号" prop="jobNumber">
<el-input v-model="form.jobNumber" placeholder="请输入工号" />
</el-form-item>
<el-form-item label="入职日期" prop="hireDate">
<el-date-picker
clearable
v-model="form.hireDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择入职日期"
>
</el-date-picker>
</el-form-item>
<el-form-item label="入职日期别名" prop="hireDateAlias">
<el-input
v-model="form.hireDateAlias"
placeholder="请输入入职日期别名"
/>
</el-form-item>
<el-form-item label="离职日期" prop="dimissionDate">
<el-date-picker
clearable
v-model="form.dimissionDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择离职日期"
>
</el-date-picker>
</el-form-item>
<el-form-item label="办公电话" prop="officePhone">
<el-input v-model="form.officePhone" placeholder="请输入办公电话" />
</el-form-item>
<el-form-item label="职务" prop="duty">
<el-input v-model="form.duty" placeholder="请输入职务" />
</el-form-item>
<el-form-item label="职称" prop="professionalTitle">
<el-input v-model="form.professionalTitle" placeholder="请输入职称" />
</el-form-item>
<el-form-item label="职称编号" prop="professionalTitleNumber">
<el-input
v-model="form.professionalTitleNumber"
placeholder="请输入职称编号"
/>
</el-form-item>
<el-form-item label="工龄" prop="seniority">
<el-input v-model="form.seniority" placeholder="请输入工龄" />
</el-form-item>
<el-form-item label="经验年限" prop="experience">
<el-input v-model="form.experience" placeholder="请输入经验年限" />
</el-form-item>
<el-form-item label="经验描述" prop="yearPlusExperience">
<el-input
v-model="form.yearPlusExperience"
placeholder="请输入经验描述"
/>
</el-form-item>
<el-form-item label="最高学历" prop="highestEducation">
<el-input
v-model="form.highestEducation"
placeholder="请输入最高学历"
/>
</el-form-item>
<el-form-item label="最高学位" prop="highestDegree">
<el-input v-model="form.highestDegree" placeholder="请输入最高学位" />
</el-form-item>
<el-form-item label="专业" prop="profession">
<el-input v-model="form.profession" placeholder="请输入专业" />
</el-form-item>
<el-form-item label="毕业学校" prop="school">
<el-input v-model="form.school" placeholder="请输入毕业学校" />
</el-form-item>
<el-form-item label="毕业证编号" prop="diplomaNumber">
<el-input
v-model="form.diplomaNumber"
placeholder="请输入毕业证编号"
/>
</el-form-item>
<el-form-item label="CENG编号" prop="cengNumber">
<el-input v-model="form.cengNumber" placeholder="请输入CENG编号" />
</el-form-item>
<el-form-item label="附件" prop="accessory">
<el-input
v-model="form.accessory"
type="textarea"
placeholder="请输入内容"
/>
</el-form-item>
<el-form-item label="附件列表" prop="accessoryList">
<el-input
v-model="form.accessoryList"
type="textarea"
placeholder="请输入内容"
/>
</el-form-item>
<el-form-item label="承包商ID" prop="contractorId">
<el-input v-model="form.contractorId" placeholder="请输入承包商ID" />
</el-form-item>
<el-form-item label="承包商名称" prop="contractorName">
<el-input
v-model="form.contractorName"
placeholder="请输入承包商名称"
/>
</el-form-item>
<el-form-item label="接收入负责人" prop="receiveLeader">
<el-input
v-model="form.receiveLeader"
placeholder="请输入接收入负责人"
/>
</el-form-item>
<el-form-item label="接收入电话" prop="receivePhone">
<el-input
v-model="form.receivePhone"
placeholder="请输入接收入电话"
/>
</el-form-item>
<el-form-item label="是否通行" prop="gateThrough">
<el-input v-model="form.gateThrough" placeholder="请输入是否通行" />
</el-form-item>
<el-form-item label="离开时间" prop="leaveTime">
<el-date-picker
clearable
v-model="form.leaveTime"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择离开时间"
>
</el-date-picker>
</el-form-item>
<el-form-item label="访问时间" prop="visitTime">
<el-date-picker
clearable
v-model="form.visitTime"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择访问时间"
>
</el-date-picker>
</el-form-item>
<el-form-item label="流程状态" prop="process">
<el-input v-model="form.process" placeholder="请输入流程状态" />
</el-form-item>
<el-form-item label="最后更新时间" prop="lastUpdateDate">
<el-date-picker
clearable
v-model="form.lastUpdateDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择最后更新时间"
>
</el-date-picker>
</el-form-item>
<el-form-item label="最后创建时间" prop="lastCreateDate">
<el-date-picker
clearable
v-model="form.lastCreateDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择最后创建时间"
>
</el-date-picker>
</el-form-item>
<el-form-item label="更新失败标志" prop="updateFail">
<el-input
v-model="form.updateFail"
placeholder="请输入更新失败标志"
/>
</el-form-item>
<el-form-item label="卡类型名称" prop="cardTypeName">
<el-input
v-model="form.cardTypeName"
placeholder="请输入卡类型名称"
/>
</el-form-item>
<el-form-item label="定位卡号" prop="cardId">
<el-input v-model="form.cardId" placeholder="请输入定位卡号" />
</el-form-item>
<el-form-item label="IC卡号" prop="icCardId">
<el-input v-model="form.icCardId" placeholder="请输入IC卡号" />
</el-form-item>
<el-form-item label="电量百分比" prop="cardPower">
<el-input v-model="form.cardPower" placeholder="请输入电量百分比" />
</el-form-item>
<el-form-item label="人员照片URL" prop="personPhoto">
<el-input
v-model="form.personPhoto"
type="textarea"
placeholder="请输入内容"
/>
</el-form-item>
<el-form-item label="照片签名" prop="photoSign">
<el-input
v-model="form.photoSign"
type="textarea"
placeholder="请输入内容"
/>
</el-form-item>
<el-form-item label="部门名称" prop="deptName">
<el-input v-model="form.deptName" placeholder="请输入部门名称" />
</el-form-item>
<el-form-item label="预约进场开始时间" prop="reservationEntryStartTime">
<el-date-picker
clearable
v-model="form.reservationEntryStartTime"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择预约进场开始时间"
>
</el-date-picker>
</el-form-item>
<el-form-item label="预约进场结束时间" prop="reservationEntryEndTime">
<el-date-picker
clearable
v-model="form.reservationEntryEndTime"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择预约进场结束时间"
>
</el-date-picker>
</el-form-item>
<el-form-item label="预约访问时间" prop="reservationVisitingTime">
<el-date-picker
clearable
v-model="form.reservationVisitingTime"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择预约访问时间"
>
</el-date-picker>
</el-form-item>
<el-form-item label="当前操作人姓名" prop="curUserName">
<el-input
v-model="form.curUserName"
placeholder="请输入当前操作人姓名"
/>
</el-form-item>
<el-form-item label="访客id" prop="visitorId">
<el-input v-model="form.visitorId" placeholder="请输入访客id" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
listInfo,
getInfo,
delInfo,
addInfo,
updateInfo,
} from "@/api/jinrun/renyuan";
export default {
name: "Info",
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 人员信息表格数据
infoList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
personType: null,
personTypeName: null,
staffType: null,
staffTypeName: null,
positionIconType: null,
positionIconTypeName: null,
realName: null,
phone: null,
sex: null,
birth: null,
email: null,
nativePlace: null,
nation: null,
maritalStatus: null,
politicsStatus: null,
healthStatus: null,
idType: null,
idNumber: null,
personIc: null,
personCode: null,
personSource: null,
company: null,
companyName: null,
administratorName: null,
administratorPhone: null,
jobNumber: null,
jobStatus: null,
hireDate: null,
hireDateAlias: null,
dimissionDate: null,
officePhone: null,
duty: null,
professionalTitle: null,
professionalTitleNumber: null,
seniority: null,
experience: null,
yearPlusExperience: null,
highestEducation: null,
highestDegree: null,
profession: null,
school: null,
diplomaNumber: null,
cengNumber: null,
accessory: null,
accessoryList: null,
contractorId: null,
contractorName: null,
receiveLeader: null,
receivePhone: null,
gateThrough: null,
leaveTime: null,
visitorStatus: null,
visitTime: null,
process: null,
lastUpdateDate: null,
lastCreateDate: null,
updateFail: null,
onlineStatus: null,
inOutStatus: null,
cardType: null,
cardTypeName: null,
cardId: null,
icCardId: null,
cardPower: null,
personPhoto: null,
photoSign: null,
deptName: null,
reservationEntryStartTime: null,
reservationEntryEndTime: null,
reservationVisitingTime: null,
curUserName: null,
visitorId: null,
},
// 表单参数
form: {},
// 表单校验
rules: {
personType: [
{ required: true, message: "人员类型不能为空", trigger: "change" },
],
},
};
},
created() {
this.getList();
},
methods: {
/** 查询人员信息列表 */
getList() {
this.loading = true;
listInfo(this.queryParams).then((response) => {
this.infoList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
createBy: null,
createTime: null,
updateTime: null,
remark: null,
personId: null,
personType: null,
personTypeName: null,
staffType: null,
staffTypeName: null,
positionIconType: null,
positionIconTypeName: null,
realName: null,
phone: null,
sex: null,
birth: null,
email: null,
nativePlace: null,
nation: null,
maritalStatus: null,
politicsStatus: null,
healthStatus: null,
idType: null,
idNumber: null,
personIc: null,
personCode: null,
personSource: null,
company: null,
companyName: null,
administratorName: null,
administratorPhone: null,
jobNumber: null,
jobStatus: null,
hireDate: null,
hireDateAlias: null,
dimissionDate: null,
officePhone: null,
duty: null,
professionalTitle: null,
professionalTitleNumber: null,
seniority: null,
experience: null,
yearPlusExperience: null,
highestEducation: null,
highestDegree: null,
profession: null,
school: null,
diplomaNumber: null,
cengNumber: null,
accessory: null,
accessoryList: null,
contractorId: null,
contractorName: null,
receiveLeader: null,
receivePhone: null,
gateThrough: null,
leaveTime: null,
visitorStatus: null,
visitTime: null,
process: null,
lastUpdateDate: null,
lastCreateDate: null,
updateFail: null,
onlineStatus: null,
inOutStatus: null,
cardType: null,
cardTypeName: null,
cardId: null,
icCardId: null,
cardPower: null,
personPhoto: null,
photoSign: null,
deptName: null,
reservationEntryStartTime: null,
reservationEntryEndTime: null,
reservationVisitingTime: null,
curUserName: null,
visitorId: null,
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map((item) => item.personId);
this.single = selection.length !== 1;
this.multiple = !selection.length;
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加人员信息";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const personId = row.personId || this.ids;
getInfo(personId).then((response) => {
this.form = response.data;
this.open = true;
this.title = "修改人员信息";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate((valid) => {
if (valid) {
if (this.form.personId != null) {
updateInfo(this.form).then((response) => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addInfo(this.form).then((response) => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const personIds = row.personId || this.ids;
this.$modal
.confirm('是否确认删除人员信息编号为"' + personIds + '"的数据项?')
.then(function () {
return delInfo(personIds);
})
.then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
})
.catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.download(
"system/info/export",
{
...this.queryParams,
},
`info_${new Date().getTime()}.xlsx`
);
},
},
};
</script>
<template>
<div class="app-container">
<el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
v-show="showSearch"
label-width="68px"
>
<el-form-item label="人员编号" prop="personCode">
<el-input
v-model="queryParams.personCode"
placeholder="请输入人员编号"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="公司名称" prop="companyName">
<el-input
v-model="queryParams.companyName"
placeholder="请输入公司名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="handleQuery"
>搜索</el-button
>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
>重置</el-button
>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['system:info:add']"
>新增</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['system:info:edit']"
>修改</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['system:info:remove']"
>删除</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['system:info:export']"
>导出</el-button
>
</el-col>
<right-toolbar
:showSearch.sync="showSearch"
@queryTable="getList"
></right-toolbar>
</el-row>
<el-table
v-loading="loading"
:data="infoList"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="人员ID" align="center" prop="personId" />
<el-table-column label="人员类型" align="center" prop="personType" />
<el-table-column
label="人员类型名称"
align="center"
prop="personTypeName"
/>
<el-table-column label="员工类型编码" align="center" prop="staffType" />
<el-table-column
label="员工类型名称"
align="center"
prop="staffTypeName"
/>
<el-table-column
label="定位图标类型"
align="center"
prop="positionIconType"
/>
<el-table-column
label="定位图标类型名称"
align="center"
prop="positionIconTypeName"
/>
<el-table-column label="真实姓名" align="center" prop="realName" />
<el-table-column label="手机号" align="center" prop="phone" />
<el-table-column label="性别" align="center" prop="sex" />
<el-table-column label="出生日期" align="center" prop="birth" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.birth, "{y}-{m}-{d}") }}</span>
</template>
</el-table-column>
<el-table-column label="邮箱" align="center" prop="email" />
<el-table-column label="籍贯" align="center" prop="nativePlace" />
<el-table-column label="民族" align="center" prop="nation" />
<el-table-column label="婚姻状况" align="center" prop="maritalStatus" />
<el-table-column label="政治面貌" align="center" prop="politicsStatus" />
<el-table-column label="健康状态" align="center" prop="healthStatus" />
<el-table-column label="证件类型" align="center" prop="idType" />
<el-table-column label="身份证号" align="center" prop="idNumber" />
<el-table-column label="人员IC卡号" align="center" prop="personIc" />
<el-table-column label="人员编号" align="center" prop="personCode" />
<el-table-column label="人员来源" align="center" prop="personSource" />
<el-table-column label="所属公司" align="center" prop="company" />
<el-table-column label="公司名称" align="center" prop="companyName" />
<el-table-column
label="管理员姓名"
align="center"
prop="administratorName"
/>
<el-table-column
label="管理员电话"
align="center"
prop="administratorPhone"
/>
<el-table-column label="工号" align="center" prop="jobNumber" />
<el-table-column label="在职状态" align="center" prop="jobStatus" />
<el-table-column
label="入职日期"
align="center"
prop="hireDate"
width="180"
>
<template slot-scope="scope">
<span>{{ parseTime(scope.row.hireDate, "{y}-{m}-{d}") }}</span>
</template>
</el-table-column>
<el-table-column
label="入职日期别名"
align="center"
prop="hireDateAlias"
/>
<el-table-column
label="离职日期"
align="center"
prop="dimissionDate"
width="180"
>
<template slot-scope="scope">
<span>{{ parseTime(scope.row.dimissionDate, "{y}-{m}-{d}") }}</span>
</template>
</el-table-column>
<el-table-column label="办公电话" align="center" prop="officePhone" />
<el-table-column label="职务" align="center" prop="duty" />
<el-table-column label="职称" align="center" prop="professionalTitle" />
<el-table-column
label="职称编号"
align="center"
prop="professionalTitleNumber"
/>
<el-table-column label="工龄" align="center" prop="seniority" />
<el-table-column label="经验年限" align="center" prop="experience" />
<el-table-column
label="经验描述"
align="center"
prop="yearPlusExperience"
/>
<el-table-column
label="最高学历"
align="center"
prop="highestEducation"
/>
<el-table-column label="最高学位" align="center" prop="highestDegree" />
<el-table-column label="专业" align="center" prop="profession" />
<el-table-column label="毕业学校" align="center" prop="school" />
<el-table-column label="毕业证编号" align="center" prop="diplomaNumber" />
<el-table-column label="CENG编号" align="center" prop="cengNumber" />
<el-table-column label="附件" align="center" prop="accessory" />
<el-table-column label="附件列表" align="center" prop="accessoryList" />
<el-table-column label="承包商ID" align="center" prop="contractorId" />
<el-table-column
label="承包商名称"
align="center"
prop="contractorName"
/>
<el-table-column
label="接收入负责人"
align="center"
prop="receiveLeader"
/>
<el-table-column label="接收入电话" align="center" prop="receivePhone" />
<el-table-column label="是否通行" align="center" prop="gateThrough" />
<el-table-column
label="离开时间"
align="center"
prop="leaveTime"
width="180"
>
<template slot-scope="scope">
<span>{{ parseTime(scope.row.leaveTime, "{y}-{m}-{d}") }}</span>
</template>
</el-table-column>
<el-table-column label="访客状态" align="center" prop="visitorStatus" />
<el-table-column
label="访问时间"
align="center"
prop="visitTime"
width="180"
>
<template slot-scope="scope">
<span>{{ parseTime(scope.row.visitTime, "{y}-{m}-{d}") }}</span>
</template>
</el-table-column>
<el-table-column label="流程状态" align="center" prop="process" />
<el-table-column
label="最后更新时间"
align="center"
prop="lastUpdateDate"
width="180"
>
<template slot-scope="scope">
<span>{{ parseTime(scope.row.lastUpdateDate, "{y}-{m}-{d}") }}</span>
</template>
</el-table-column>
<el-table-column
label="最后创建时间"
align="center"
prop="lastCreateDate"
width="180"
>
<template slot-scope="scope">
<span>{{ parseTime(scope.row.lastCreateDate, "{y}-{m}-{d}") }}</span>
</template>
</el-table-column>
<el-table-column label="更新失败标志" align="center" prop="updateFail" />
<el-table-column label="在线状态" align="center" prop="onlineStatus" />
<el-table-column label="进出状态" align="center" prop="inOutStatus" />
<el-table-column label="卡类型" align="center" prop="cardType" />
<el-table-column label="卡类型名称" align="center" prop="cardTypeName" />
<el-table-column label="定位卡号" align="center" prop="cardId" />
<el-table-column label="IC卡号" align="center" prop="icCardId" />
<el-table-column label="电量百分比" align="center" prop="cardPower" />
<el-table-column label="人员照片URL" align="center" prop="personPhoto" />
<el-table-column label="照片签名" align="center" prop="photoSign" />
<el-table-column label="部门名称" align="center" prop="deptName" />
<el-table-column
label="预约进场开始时间"
align="center"
prop="reservationEntryStartTime"
width="180"
>
<template slot-scope="scope">
<span>{{
parseTime(scope.row.reservationEntryStartTime, "{y}-{m}-{d}")
}}</span>
</template>
</el-table-column>
<el-table-column
label="预约进场结束时间"
align="center"
prop="reservationEntryEndTime"
width="180"
>
<template slot-scope="scope">
<span>{{
parseTime(scope.row.reservationEntryEndTime, "{y}-{m}-{d}")
}}</span>
</template>
</el-table-column>
<el-table-column
label="预约访问时间"
align="center"
prop="reservationVisitingTime"
width="180"
>
<template slot-scope="scope">
<span>{{
parseTime(scope.row.reservationVisitingTime, "{y}-{m}-{d}")
}}</span>
</template>
</el-table-column>
<el-table-column
label="当前操作人姓名"
align="center"
prop="curUserName"
/>
<el-table-column label="访客id" align="center" prop="visitorId" />
<el-table-column
label="操作"
align="center"
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="['system:info:edit']"
>修改</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['system:info:remove']"
>删除</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"
/>
<!-- 添加或修改人员信息对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="备注" prop="remark">
<el-input
v-model="form.remark"
type="textarea"
placeholder="请输入内容"
/>
</el-form-item>
<el-form-item label="人员类型名称" prop="personTypeName">
<el-input
v-model="form.personTypeName"
placeholder="请输入人员类型名称"
/>
</el-form-item>
<el-form-item label="员工类型名称" prop="staffTypeName">
<el-input
v-model="form.staffTypeName"
placeholder="请输入员工类型名称"
/>
</el-form-item>
<el-form-item label="定位图标类型名称" prop="positionIconTypeName">
<el-input
v-model="form.positionIconTypeName"
placeholder="请输入定位图标类型名称"
/>
</el-form-item>
<el-form-item label="真实姓名" prop="realName">
<el-input v-model="form.realName" placeholder="请输入真实姓名" />
</el-form-item>
<el-form-item label="手机号" prop="phone">
<el-input v-model="form.phone" placeholder="请输入手机号" />
</el-form-item>
<el-form-item label="出生日期" prop="birth">
<el-date-picker
clearable
v-model="form.birth"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择出生日期"
>
</el-date-picker>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="form.email" placeholder="请输入邮箱" />
</el-form-item>
<el-form-item label="籍贯" prop="nativePlace">
<el-input v-model="form.nativePlace" placeholder="请输入籍贯" />
</el-form-item>
<el-form-item label="民族" prop="nation">
<el-input v-model="form.nation" placeholder="请输入民族" />
</el-form-item>
<el-form-item label="身份证号" prop="idNumber">
<el-input v-model="form.idNumber" placeholder="请输入身份证号" />
</el-form-item>
<el-form-item label="人员IC卡号" prop="personIc">
<el-input v-model="form.personIc" placeholder="请输入人员IC卡号" />
</el-form-item>
<el-form-item label="人员编号" prop="personCode">
<el-input v-model="form.personCode" placeholder="请输入人员编号" />
</el-form-item>
<el-form-item label="人员来源" prop="personSource">
<el-input v-model="form.personSource" placeholder="请输入人员来源" />
</el-form-item>
<el-form-item label="所属公司" prop="company">
<el-input v-model="form.company" placeholder="请输入所属公司" />
</el-form-item>
<el-form-item label="公司名称" prop="companyName">
<el-input v-model="form.companyName" placeholder="请输入公司名称" />
</el-form-item>
<el-form-item label="管理员姓名" prop="administratorName">
<el-input
v-model="form.administratorName"
placeholder="请输入管理员姓名"
/>
</el-form-item>
<el-form-item label="管理员电话" prop="administratorPhone">
<el-input
v-model="form.administratorPhone"
placeholder="请输入管理员电话"
/>
</el-form-item>
<el-form-item label="工号" prop="jobNumber">
<el-input v-model="form.jobNumber" placeholder="请输入工号" />
</el-form-item>
<el-form-item label="入职日期" prop="hireDate">
<el-date-picker
clearable
v-model="form.hireDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择入职日期"
>
</el-date-picker>
</el-form-item>
<el-form-item label="入职日期别名" prop="hireDateAlias">
<el-input
v-model="form.hireDateAlias"
placeholder="请输入入职日期别名"
/>
</el-form-item>
<el-form-item label="离职日期" prop="dimissionDate">
<el-date-picker
clearable
v-model="form.dimissionDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择离职日期"
>
</el-date-picker>
</el-form-item>
<el-form-item label="办公电话" prop="officePhone">
<el-input v-model="form.officePhone" placeholder="请输入办公电话" />
</el-form-item>
<el-form-item label="职务" prop="duty">
<el-input v-model="form.duty" placeholder="请输入职务" />
</el-form-item>
<el-form-item label="职称" prop="professionalTitle">
<el-input v-model="form.professionalTitle" placeholder="请输入职称" />
</el-form-item>
<el-form-item label="职称编号" prop="professionalTitleNumber">
<el-input
v-model="form.professionalTitleNumber"
placeholder="请输入职称编号"
/>
</el-form-item>
<el-form-item label="工龄" prop="seniority">
<el-input v-model="form.seniority" placeholder="请输入工龄" />
</el-form-item>
<el-form-item label="经验年限" prop="experience">
<el-input v-model="form.experience" placeholder="请输入经验年限" />
</el-form-item>
<el-form-item label="经验描述" prop="yearPlusExperience">
<el-input
v-model="form.yearPlusExperience"
placeholder="请输入经验描述"
/>
</el-form-item>
<el-form-item label="最高学历" prop="highestEducation">
<el-input
v-model="form.highestEducation"
placeholder="请输入最高学历"
/>
</el-form-item>
<el-form-item label="最高学位" prop="highestDegree">
<el-input v-model="form.highestDegree" placeholder="请输入最高学位" />
</el-form-item>
<el-form-item label="专业" prop="profession">
<el-input v-model="form.profession" placeholder="请输入专业" />
</el-form-item>
<el-form-item label="毕业学校" prop="school">
<el-input v-model="form.school" placeholder="请输入毕业学校" />
</el-form-item>
<el-form-item label="毕业证编号" prop="diplomaNumber">
<el-input
v-model="form.diplomaNumber"
placeholder="请输入毕业证编号"
/>
</el-form-item>
<el-form-item label="CENG编号" prop="cengNumber">
<el-input v-model="form.cengNumber" placeholder="请输入CENG编号" />
</el-form-item>
<el-form-item label="附件" prop="accessory">
<el-input
v-model="form.accessory"
type="textarea"
placeholder="请输入内容"
/>
</el-form-item>
<el-form-item label="附件列表" prop="accessoryList">
<el-input
v-model="form.accessoryList"
type="textarea"
placeholder="请输入内容"
/>
</el-form-item>
<el-form-item label="承包商ID" prop="contractorId">
<el-input v-model="form.contractorId" placeholder="请输入承包商ID" />
</el-form-item>
<el-form-item label="承包商名称" prop="contractorName">
<el-input
v-model="form.contractorName"
placeholder="请输入承包商名称"
/>
</el-form-item>
<el-form-item label="接收入负责人" prop="receiveLeader">
<el-input
v-model="form.receiveLeader"
placeholder="请输入接收入负责人"
/>
</el-form-item>
<el-form-item label="接收入电话" prop="receivePhone">
<el-input
v-model="form.receivePhone"
placeholder="请输入接收入电话"
/>
</el-form-item>
<el-form-item label="是否通行" prop="gateThrough">
<el-input v-model="form.gateThrough" placeholder="请输入是否通行" />
</el-form-item>
<el-form-item label="离开时间" prop="leaveTime">
<el-date-picker
clearable
v-model="form.leaveTime"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择离开时间"
>
</el-date-picker>
</el-form-item>
<el-form-item label="访问时间" prop="visitTime">
<el-date-picker
clearable
v-model="form.visitTime"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择访问时间"
>
</el-date-picker>
</el-form-item>
<el-form-item label="流程状态" prop="process">
<el-input v-model="form.process" placeholder="请输入流程状态" />
</el-form-item>
<el-form-item label="最后更新时间" prop="lastUpdateDate">
<el-date-picker
clearable
v-model="form.lastUpdateDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择最后更新时间"
>
</el-date-picker>
</el-form-item>
<el-form-item label="最后创建时间" prop="lastCreateDate">
<el-date-picker
clearable
v-model="form.lastCreateDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择最后创建时间"
>
</el-date-picker>
</el-form-item>
<el-form-item label="更新失败标志" prop="updateFail">
<el-input
v-model="form.updateFail"
placeholder="请输入更新失败标志"
/>
</el-form-item>
<el-form-item label="卡类型名称" prop="cardTypeName">
<el-input
v-model="form.cardTypeName"
placeholder="请输入卡类型名称"
/>
</el-form-item>
<el-form-item label="定位卡号" prop="cardId">
<el-input v-model="form.cardId" placeholder="请输入定位卡号" />
</el-form-item>
<el-form-item label="IC卡号" prop="icCardId">
<el-input v-model="form.icCardId" placeholder="请输入IC卡号" />
</el-form-item>
<el-form-item label="电量百分比" prop="cardPower">
<el-input v-model="form.cardPower" placeholder="请输入电量百分比" />
</el-form-item>
<el-form-item label="人员照片URL" prop="personPhoto">
<el-input
v-model="form.personPhoto"
type="textarea"
placeholder="请输入内容"
/>
</el-form-item>
<el-form-item label="照片签名" prop="photoSign">
<el-input
v-model="form.photoSign"
type="textarea"
placeholder="请输入内容"
/>
</el-form-item>
<el-form-item label="部门名称" prop="deptName">
<el-input v-model="form.deptName" placeholder="请输入部门名称" />
</el-form-item>
<el-form-item label="预约进场开始时间" prop="reservationEntryStartTime">
<el-date-picker
clearable
v-model="form.reservationEntryStartTime"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择预约进场开始时间"
>
</el-date-picker>
</el-form-item>
<el-form-item label="预约进场结束时间" prop="reservationEntryEndTime">
<el-date-picker
clearable
v-model="form.reservationEntryEndTime"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择预约进场结束时间"
>
</el-date-picker>
</el-form-item>
<el-form-item label="预约访问时间" prop="reservationVisitingTime">
<el-date-picker
clearable
v-model="form.reservationVisitingTime"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择预约访问时间"
>
</el-date-picker>
</el-form-item>
<el-form-item label="当前操作人姓名" prop="curUserName">
<el-input
v-model="form.curUserName"
placeholder="请输入当前操作人姓名"
/>
</el-form-item>
<el-form-item label="访客id" prop="visitorId">
<el-input v-model="form.visitorId" placeholder="请输入访客id" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
listInfo,
getInfo,
delInfo,
addInfo,
updateInfo,
} from "@/api/jinrun/renyuan";
export default {
name: "Info",
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 人员信息表格数据
infoList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
personType: null,
personTypeName: null,
staffType: null,
staffTypeName: null,
positionIconType: null,
positionIconTypeName: null,
realName: null,
phone: null,
sex: null,
birth: null,
email: null,
nativePlace: null,
nation: null,
maritalStatus: null,
politicsStatus: null,
healthStatus: null,
idType: null,
idNumber: null,
personIc: null,
personCode: null,
personSource: null,
company: null,
companyName: null,
administratorName: null,
administratorPhone: null,
jobNumber: null,
jobStatus: null,
hireDate: null,
hireDateAlias: null,
dimissionDate: null,
officePhone: null,
duty: null,
professionalTitle: null,
professionalTitleNumber: null,
seniority: null,
experience: null,
yearPlusExperience: null,
highestEducation: null,
highestDegree: null,
profession: null,
school: null,
diplomaNumber: null,
cengNumber: null,
accessory: null,
accessoryList: null,
contractorId: null,
contractorName: null,
receiveLeader: null,
receivePhone: null,
gateThrough: null,
leaveTime: null,
visitorStatus: null,
visitTime: null,
process: null,
lastUpdateDate: null,
lastCreateDate: null,
updateFail: null,
onlineStatus: null,
inOutStatus: null,
cardType: null,
cardTypeName: null,
cardId: null,
icCardId: null,
cardPower: null,
personPhoto: null,
photoSign: null,
deptName: null,
reservationEntryStartTime: null,
reservationEntryEndTime: null,
reservationVisitingTime: null,
curUserName: null,
visitorId: null,
},
// 表单参数
form: {},
// 表单校验
rules: {
personType: [
{ required: true, message: "人员类型不能为空", trigger: "change" },
],
},
};
},
created() {
this.getList();
},
methods: {
/** 查询人员信息列表 */
getList() {
this.loading = true;
listInfo(this.queryParams).then((response) => {
this.infoList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
createBy: null,
createTime: null,
updateTime: null,
remark: null,
personId: null,
personType: null,
personTypeName: null,
staffType: null,
staffTypeName: null,
positionIconType: null,
positionIconTypeName: null,
realName: null,
phone: null,
sex: null,
birth: null,
email: null,
nativePlace: null,
nation: null,
maritalStatus: null,
politicsStatus: null,
healthStatus: null,
idType: null,
idNumber: null,
personIc: null,
personCode: null,
personSource: null,
company: null,
companyName: null,
administratorName: null,
administratorPhone: null,
jobNumber: null,
jobStatus: null,
hireDate: null,
hireDateAlias: null,
dimissionDate: null,
officePhone: null,
duty: null,
professionalTitle: null,
professionalTitleNumber: null,
seniority: null,
experience: null,
yearPlusExperience: null,
highestEducation: null,
highestDegree: null,
profession: null,
school: null,
diplomaNumber: null,
cengNumber: null,
accessory: null,
accessoryList: null,
contractorId: null,
contractorName: null,
receiveLeader: null,
receivePhone: null,
gateThrough: null,
leaveTime: null,
visitorStatus: null,
visitTime: null,
process: null,
lastUpdateDate: null,
lastCreateDate: null,
updateFail: null,
onlineStatus: null,
inOutStatus: null,
cardType: null,
cardTypeName: null,
cardId: null,
icCardId: null,
cardPower: null,
personPhoto: null,
photoSign: null,
deptName: null,
reservationEntryStartTime: null,
reservationEntryEndTime: null,
reservationVisitingTime: null,
curUserName: null,
visitorId: null,
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map((item) => item.personId);
this.single = selection.length !== 1;
this.multiple = !selection.length;
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加人员信息";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const personId = row.personId || this.ids;
getInfo(personId).then((response) => {
this.form = response.data;
this.open = true;
this.title = "修改人员信息";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate((valid) => {
if (valid) {
if (this.form.personId != null) {
updateInfo(this.form).then((response) => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addInfo(this.form).then((response) => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const personIds = row.personId || this.ids;
this.$modal
.confirm('是否确认删除人员信息编号为"' + personIds + '"的数据项?')
.then(function () {
return delInfo(personIds);
})
.then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
})
.catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.download(
"system/info/export",
{
...this.queryParams,
},
`info_${new Date().getTime()}.xlsx`
);
},
},
};
</script>
<template>
<div class="app-container">
<el-row type="flex">
<!-- <el-col :span="6"></el-col>
<el-col :span="6"></el-col>
<el-col :span="6"></el-col> -->
<el-col :span="6">
<!-- /** 范围日期选择 */ -->
<el-date-picker
v-model="date"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd"
></el-date-picker>
</el-col>
<el-col :span="6">
<!-- /** 查询按钮 */ -->
<el-button
type="primary"
icon="el-icon-search"
style="margin-left: -30px"
@click="getList"
>查询</el-button>
</el-col>
</el-row>
<!-- /** 表格 */ -->
<el-table
:data="tableData"
style="width: 100%; margin-top: 20px"
@sort-change="sortingFn"
>
<el-table-column
prop="businessName"
label="商家名称"
align="center"
></el-table-column>
<el-table-column
prop="inspectionCount"
label="检查数"
align="center"
sortable="custom"
></el-table-column>
<el-table-column
prop="selfInspectionCount"
label="自查数"
align="center"
sortable="custom"
></el-table-column>
<el-table-column
prop="hazardCount"
label="隐患数"
align="center"
sortable="custom"
></el-table-column>
<el-table-column
prop="rectificationCount"
label="整改数"
align="center"
sortable="custom"
></el-table-column>
<el-table-column
prop="hazardRectificationRate"
label="隐患整改率"
align="center"
sortable="custom"
></el-table-column>
<el-table-column
prop="consumerSafetySupervisionCount"
label="消费者安全建议数"
sortable="custom"
align="center"
></el-table-column>
</el-table>
<!-- /** 分页 */ -->
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</div>
</template>
<script>
import { getlistranking } from "@/api/gaoqu/knowledge.js";
export default {
name: "",
props: {},
components: {},
data() {
return {
date: [],
tableData: [],
total: 0,
queryParams: {
pageNum: 1,
pageSize: 10,
},
};
},
computed: {},
watch: {},
created() {
this.getList();
},
mounted() {},
methods: {
// /** 获取列表 */
getList() {
if (this.date.length > 0) {
this.queryParams.startDate = this.date[0];
this.queryParams.endDate = this.date[1];
}
getlistranking(this.queryParams).then((res) => {
if (res.code !== 200) {
return this.$message.error(res.msg);
}
this.tableData = res.rows;
this.total = res.total;
});
},
// /** 排序 */
sortingFn({ column, prop, order }) {
this.queryParams.prop = prop;
this.queryParams.order = order;
this.getList();
},
},
};
</script>
<style scoped lang="scss">
.app-container {
// 添加固定高度和滚动条样式
height: calc(100vh - 100px);
overflow-y: auto;
}
</style>
...@@ -37,7 +37,9 @@ module.exports = { ...@@ -37,7 +37,9 @@ module.exports = {
// detail: https://cli.vuejs.org/config/#devserver-proxy // detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: { [process.env.VUE_APP_BASE_API]: {
// target: `http://192.168.2.16:8081`,//涛本地 ruoyi // target: `http://192.168.2.16:8081`,//涛本地 ruoyi
target: `http://192.168.2.37:8080`,//鲁本地 target: `http://192.168.2.16:8082`,//涛本地 接口
// target: `http://192.168.2.37:8080`,//鲁本地
// target: `https://gqyjpt.weihai.cn`,//高区孵化平台 // target: `https://gqyjpt.weihai.cn`,//高区孵化平台
// target: `http://192.168.2.16:8080`,//涛本地 // target: `http://192.168.2.16:8080`,//涛本地
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment