Files
2026-09-08 19:49:21 +08:00

673 lines
33 KiB
HTML

<!--#
layout("/layouts/platform.html"){
#-->
<div id="app" v-cloak>
<guava ref="guava">
<template>
<el-card shadow="never">
<el-row :gutter="20" type="flex">
<el-col :span="4">
<el-select clearable filterable placeholder="请选择单位" style="width: 100%"
v-model="pageForm.searchUnit">
<el-option
:key="item.id"
:label="item.name"
:value="item.id"
v-for="item in options">
</el-option>
</el-select>
</el-col>
<el-col :span="4">
<dict-select clearable code="UserType" placeholder="人员类型" style="width: 100%"
v-model="pageForm.personType"></dict-select>
</el-col>
<el-col :span="4">
<dict-select clearable code="UserState" placeholder="在职状态" style="width: 100%"
v-model="pageForm.userState"></dict-select>
</el-col>
<el-col :span="6">
<el-input @keyup.enter.native="doSearch" clearable placeholder="请输入内容"
v-model="pageForm.searchKeyword">
<el-select placeholder="查询类型" slot="prepend" style="width: 80px;"
v-model="pageForm.searchName">
<el-option label="姓名" value="username"></el-option>
<el-option label="工号" value="loginname"></el-option>
</el-select>
<el-button @click="doSearch" icon="el-icon-search" slot="append"></el-button>
</el-input>
</el-col>
<el-col :span="6" class="text-right">
<el-button @click="openAdd"><i class="ti-plus"></i> 新建用户</el-button>
<el-dropdown @command="batchCommand">
<el-button>
批量操作
<span class="ti-angle-down"></span>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :command="{type:'delete'}">
批量删除
</el-dropdown-item>
<el-dropdown-item :command="{type:'export'}">
导出XLS
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-col>
</el-row>
</el-card>
<el-card class="mt20" shadow="never">
<el-table
:data="tableData"
@selection-change="handleSelectionChange"
@sort-change='pageOrder'
header-align="center"
>
<el-table-column
type="selection"
width="35">
</el-table-column>
<el-table-column type="expand">
<template slot-scope="scope">
<el-form class="el-table-expand" inline label-position="left" size="mini">
<el-form-item label="Email">
<span>{{ scope.row.email }}</span>
</el-form-item>
<el-form-item label="最后登录时间">
<span>
{{ formatAt(scope.row.loginAt) }}</span>
</el-form-item>
<el-form-item label="手机号">
<span>{{ scope.row.mobile }}</span>
</el-form-item>
<el-form-item label="最后登录IP">
<span>{{ scope.row.loginIp }}</span>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column
align="center"
header-align="center"
label="工号"
prop="loginname"
sortable
>
</el-table-column>
<el-table-column
:show-overflow-tooltip="true"
align="center"
header-align="center"
label="姓名"
prop="username">
</el-table-column>
<el-table-column
:show-overflow-tooltip="true"
align="center"
header-align="center"
label="所属单位"
prop="unit"
>
<template slot-scope="scope">
<span v-if="scope.row.unit!=null">
{{scope.row.unit.name}}
</span>
</template>
</el-table-column>
<el-table-column
:show-overflow-tooltip="true"
align="center"
header-align="center"
label="人员类型"
prop="personType">
</el-table-column>
<el-table-column
:show-overflow-tooltip="true"
align="center"
header-align="center"
label="在职状态"
prop="userState">
</el-table-column>
<!-- <el-table-column-->
<!-- sortable-->
<!-- prop="disabled"-->
<!-- label="帐号状态"-->
<!-- header-align="center"-->
<!-- align="center"-->
<!-- :show-overflow-tooltip="true"-->
<!-- >-->
<!-- <template slot-scope="scope">-->
<!-- <i v-if="scope.row.disabled" class="fa fa-circle text-danger ml5"></i>-->
<!-- <i v-if="!scope.row.disabled" class="fa fa-circle text-success ml5"></i>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- sortable-->
<!-- prop="userOnline"-->
<!-- label="在线状态"-->
<!-- header-align="center"-->
<!-- align="center"-->
<!-- :show-overflow-tooltip="true"-->
<!-- >-->
<!-- <template slot-scope="scope">-->
<!-- <i v-if="scope.row.userOnline" class="text-success ml5">在线</i>-->
<!-- <i v-if="!scope.row.userOnline" class="text-danger ml5">离线</i>-->
<!-- </template>-->
<!-- </el-table-column>-->
<el-table-column
label="操作"
prop="userOnline"
width="120">
<template slot-scope="scope">
<el-dropdown @command="dropdownCommand">
<el-button size="mini">
<i class="ti-settings"></i>
<span class="ti-angle-down"></span>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item
:command="{type:'role',id:scope.row.id,loginname:scope.row.loginname}">
查看权限
</el-dropdown-item>
<el-dropdown-item
:command="{type:'reset',id:scope.row.id,loginname:scope.row.loginname}">
重置密码
</el-dropdown-item>
<el-dropdown-item :command="{type:'enable',id:scope.row.id,row:scope.row}"
divided>
启用
</el-dropdown-item>
<el-dropdown-item :command="{type:'disable',id:scope.row.id,row:scope.row}">
禁用
</el-dropdown-item>
<el-dropdown-item :command="{type:'edit',id:scope.row.id}" divided>
修改
</el-dropdown-item>
<el-dropdown-item
:command="{type:'delete',id:scope.row.id,loginname:scope.row.loginname}"
v-if="scope.row.loginname!='superadmin'">
删除
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
</el-table-column>
</el-table>
<el-pagination
:current-page="pageForm.pageNumber"
:page-size="pageForm.pageSize"
:page-sizes="[10, 20, 30, 50]"
:total="pageForm.totalCount"
@current-change="pageNumberChange"
@size-change="pageSizeChange"
layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
</el-card>
</template>
<template #edit>
<el-form :model="formData" :rules="formRules" label-width="100px" ref="addForm">
<el-divider content-position="left"><span style="color: rgb(121, 187, 255)">基本资料</span></el-divider>
<el-form-item class="is-required" label="所属高校" prop="gxid">
<el-select placeholder="请选择高校" style="width: 100%" v-model="formData.gxid">
<el-option :label="item.gxname" :value="item.gxid" v-for="item in gxList">
</el-option>
</el-select>
</el-form-item>
<el-form-item class="is-required" label="所属单位" prop="unitid">
<el-select clearable filterable placeholder="请选择单位" style="width: 100%"
v-model="formData.unitid">
<el-option
:key="item.id"
:label="item.name"
:value="item.id"
v-for="item in options">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="工&emsp;&emsp;号" prop="loginname">
<el-input auto-complete="off" maxlength="100"
placeholder="工号"
tabindex="4" type="text" v-model="formData.loginname"></el-input>
</el-form-item>
<el-row v-if="formData.id===null">
<el-col :span="12">
<el-form-item label="密&emsp;&emsp;码" prop="password">
<el-input auto-complete="off" maxlength="100"
placeholder="密码"
show-password tabindex="4" v-model="formData.password"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="确认密码" prop="passwordAgain">
<el-input auto-complete="off" maxlength="100"
placeholder="确认密码"
show-password tabindex="4" v-model="formData.passwordAgain"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="姓&emsp;&emsp;名" prop="username">
<el-input auto-complete="off" maxlength="100"
placeholder="姓名"
tabindex="4" type="text" v-model="formData.username"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item class="is-required" label="性&emsp;&emsp;别" prop="sex">
<el-radio border label="男" size="small" v-model="formData.sex"></el-radio>
<el-radio border label="女" size="small" v-model="formData.sex"></el-radio>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="人员类型" prop="personType">
<dict-select clearable code="UserType" placeholder="人员类型" style="width: 100%"
v-model="formData.personType"></dict-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="在职状态" prop="userState">
<dict-select clearable code="UserState" placeholder="在职状态" style="width: 100%"
v-model="formData.userState"></dict-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="是否退休" prop="retired">
<el-radio-group v-model="formData.retired" size="small">
<el-radio :label="true" border></el-radio>
<el-radio :label="false" border></el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="出生日期" prop="birthday">
<el-date-picker format="yyyy-MM-dd" placeholder="出生日期" style="width: 100%"
type="date" v-model="formData.birthday"
value-format="yyyy-MM-dd"></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="出生地点" prop="csdd">
<el-input auto-complete="off" maxlength="100"
placeholder="出生地点"
tabindex="4" type="text" v-model="formData.csdd"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-divider content-position="left"><span style="color: rgb(121, 187, 255)">个人信息</span></el-divider>
<el-row>
<el-col :span="12">
<el-form-item label="职&emsp;&emsp;务" prop="zw">
<el-input auto-complete="off" maxlength="100"
placeholder="职务"
tabindex="4" type="text" v-model="formData.zw"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="职&emsp;&emsp;称" prop="zc">
<el-input auto-complete="off" maxlength="100"
placeholder="职称"
tabindex="4" type="text" v-model="formData.zc"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="籍&emsp;&emsp;贯" prop="jg">
<el-input auto-complete="off" maxlength="100"
placeholder="籍贯"
tabindex="4" type="text" v-model="formData.jg"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="民&emsp;&emsp;族" prop="mz">
<el-input auto-complete="off" maxlength="100"
placeholder="民族"
tabindex="4" type="text" v-model="formData.mz"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="手&ensp;机&ensp;号" prop="mobile">
<el-input auto-complete="off" maxlength="100"
placeholder="手机号"
tabindex="4" type="text" v-model="formData.mobile"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="邮&emsp;&emsp;箱" prop="email">
<el-input auto-complete="off" maxlength="100"
placeholder="邮箱"
tabindex="4" type="text" v-model="formData.email"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="学&emsp;&emsp;历" prop="xl">
<el-input auto-complete="off" maxlength="100"
placeholder="学历"
tabindex="4" type="text" v-model="formData.xl"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="政治面貌" prop="zzmm">
<el-input auto-complete="off" maxlength="100"
placeholder="政治面貌"
tabindex="4" type="text" v-model="formData.zzmm"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="入校时间">
<el-date-picker format="yyyy-MM-dd" placeholder="入校时间" style="width: 100%"
type="date" v-model="formData.rxsj" value-format="yyyy-MM-dd"></el-date-picker>
</el-form-item>
<el-row justify="end" type="flex">
<el-button @click="doAdd" type="primary">确定</el-button>
</el-row>
</el-form>
</template>
</guava>
<el-dialog
:close-on-click-modal="false"
:title="roleDialogTitle"
:visible.sync="roleDialogVisible"
width="70%">
<el-table :data="roleTableData" style="width: 100%" size="small"
:highlight-current-row="true" row-key="id" lazy
:load="loadRoleChild">
<el-table-column label="菜单名称" header-align="center" prop="name"
width="200" :show-overflow-tooltip="true" align="left">
</el-table-column>
<el-table-column label="URL" header-align="center" prop="href"
:show-overflow-tooltip="true">
</el-table-column>
<el-table-column label="资源类型" header-align="center" prop="type"
:show-overflow-tooltip="true" align="center">
<template slot-scope="scope">
<i v-if="scope.row.type=='menu'" style="font-weight: bold">菜单</i>
<i v-if="scope.row.type=='data'">数据</i>
</template>
</el-table-column>
<el-table-column label="权限标识" header-align="center" prop="permission"
:show-overflow-tooltip="true">
</el-table-column>
</el-table>
<span slot="footer" class="dialog-footer">
<el-button @click="roleDialogVisible = false">关 闭</el-button>
</span>
</el-dialog>
</div>
<script>
var vue = new Vue({
el: "#app",
mixins: [initTableMixins],
data() {
const validatePass = (rule, value, callback) => {
if (value !== this.formData.password) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
const validateSex = (rule, value, callback) => {
if (this.formData.sex === "" || this.formData.sex === undefined) {
callback(new Error("请选择性别"))
} else {
callback();
}
};
return {
roleDialogVisible: false,
tableData: [],
options: [],
parentUnit: [],
pageForm: {
searchUnit: "",
searchName: "username",
searchKeyword: "",
pageNumber: 1,
pageSize: 10,
totalCount: 0,
pageOrderName: "",
pageOrderBy: "",
},
formData: {
id: null,
loginname: '',
username: '',
password: '',
passwordAgain: '',
unitid: "",
disabled: false,
sex: '男',
gxid: '',
},
formRules: {
gxid: [{required: true, message: '请选择高校', trigger: ['blur', 'change']}],
unitid: [{required: true, message: '请选择所属单位', trigger: ['blur', 'change']}],
sex: [{validator: validateSex, trigger: ['blur', 'change']}],
loginname: [
{required: true, message: '工号', trigger: ['blur', 'change']},
],
username: [
{required: true, message: '姓名', trigger: ['blur', 'change']}
],
email: [
// {required: false, message: '邮箱地址', trigger: ['blur', 'change']},
{type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}
],
mobile: [
{required: false, message: '手机号码', trigger: ['blur', 'change']},
{pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码'}
],
password: [
{required: true, message: '请输入密码', trigger: 'blur'},
{min: 3, max: 20, message: '密码长度必须是3-20位', trigger: 'change'}
],
passwordAgain: [
{required: true, message: '请再次输入新密码', trigger: 'blur'},
{validator: validatePass, trigger: 'change'}
]
},
editRules: {
username: [
{required: true, message: '姓名', trigger: ['blur', 'change']}
],
email: [
{type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}
],
mobile: [
{required: false, message: '手机号码', trigger: ['blur', 'change']},
{pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码'}
],
},
roleDialogTitle: "查看用户权限",
roleTableData: [],
userId: "",//当前用户ID
multipleSelection: [],
gxList: [],
}
},
components: {
'dict-select': httpVueLoader('/components/plugins/DictSelect.vue?v=1.0.0'),
'guava': httpVueLoader('/components/plugins/Guava.vue')
},
methods: {
async initTree() {
const {data} = await $.post(base + "/platform/sys/unit/getUnit2")
this.options = data
},
async pageData() {
sublime.showLoadingbar()
const {data} = await $.post(base + "/platform/sys/user/data", this.pageForm)
sublime.closeLoadingbar()
this.tableData = data.list
this.pageForm.totalCount = data.totalCount
},
formatAt(val) {
if (val > 0)
return moment(val * 1000).format("YYYY-MM-DD HH:mm");
return ""
},
openAdd() {
this.$refs.guava.edit()
this.formData.id = null
this.formData.password = ''
if (this.$refs["addForm"])
this.$refs["addForm"].resetFields();
},
doAdd() {
this.$refs["addForm"].validate(async valid => {
if (valid) {
const url = this.formData.id === null ? '/platform/sys/user/addDo' : '/platform/sys/user/editDo'
const resp_data = await $.post(url, this.formData)
if (resp_data.code === 0) {
this.doSearch()
this.$refs.guava.index()
this.$message.success(resp_data.msg)
} else {
this.$message.warning(resp_data.msg)
}
}
})
},
async initRoleTreeTable() {
const url = base + "/platform/sys/user/menu/" + self.userId;
const {data} = await $.post(url, {pid: ""})
this.roleTableData = data
},
async loadRoleChild(tree, treeNode, resolve) {
const url = base + "/platform/sys/user/menu/" + this.userId
const {data} = await $.post(url, {pid: tree.id})
resolve(data.data)
},
async dropdownCommand(command) {
if ("role" === command.type) {
this.roleDialogVisible = true;
this.roleDialogTitle = "查看用户 " + command.loginname + " 的权限";
this.userId = command.id;
this.initRoleTreeTable();
}
if ("enable" === command.type || "disable" === command.type) {
const resp_data = await $.post(base + "/platform/sys/user/" + command.type + "/" + command.id, {})
if (resp_data.code === 0) {
this.$message.success(resp_data.msg)
command.row.disabled = "disable" === command.type
} else {
this.$message.error(resp_data.msg)
}
}
if ("edit" === command.type) {
const resp_data = await $.post(base + "/platform/sys/user/edit/" + command.id, {})
if (resp_data.code === 0) {
this.formData = resp_data.data;
this.$refs.guava.edit()
} else {
this.$message.error(resp_data.msg)
}
}
if ("reset" === command.type) {
const resp_data = await $.post(base + "/platform/sys/user/resetPwd/" + command.id, {})
if (resp_data.code === 0) {
this.$message.success(resp_data.data)
this.doSearch()
} else {
this.$message.error(resp_data.msg)
}
}
if ("delete" === command.type) {
this.$confirm('此操作将删除 ' + command.loginname, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(async () => {
const resp_data = await $.post(base + "/platform/sys/user/delete/" + command.id, {})
if (resp_data.code === 0) {
this.$message.success(resp_data.msg)
this.doSearch()
} else {
this.$message.error(resp_data.msg)
}
}).catch(() => {
})
}
},
batchCommand(command) {
if ("delete" === command.type) {
if (this.multipleSelection.length === 0) {
this.$message.warning('请选择要删除的用户')
return
}
const userIdArray = this.multipleSelection.map(v => v.id)
this.$confirm('此操作将删除选中的用户', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(async () => {
const resp_data = await $.post(base + "/platform/sys/user/delete", {ids: userIdArray.toString()})
this.$message.success(resp_data.msg)
this.doSearch()
}).catch(() => {
})
}
if ("export" === command.type) {
const params = [
"searchUnit=" + this.pageForm.searchUnit,
"searchName=" + this.pageForm.searchName,
"searchKeyword=" + this.pageForm.searchKeyword,
"pageOrderName=" + this.pageForm.pageOrderName,
"pageOrderBy=" + this.pageForm.pageOrderBy,
]
window.location.href = '/platform/sys/user/export?' + params.join('&')
}
},
handleSelectionChange(val) {
this.multipleSelection = val
},
async findGx() {
const {data} = await $.post(base + "/platform/sys/user/findGx")
this.gxList = data
}
},
created() {
this.initTree()
this.pageData()
this.findGx()
}
});
</script>
<!--#
}
#-->