hi-ucs/back/src/views/modules/sys/user.vue

282 lines
7.7 KiB
Vue
Raw Normal View History

2022-06-14 09:32:49 +08:00
<template>
<el-card shadow="never" class="aui-card--fill">
<div class="mod-sys__user">
2022-06-21 18:04:15 +08:00
<el-form
:inline="true"
:model="dataForm"
@keyup.enter.native="getDataList()"
>
2022-06-14 09:32:49 +08:00
<el-form-item>
2022-06-21 18:04:15 +08:00
<el-input
v-model="dataForm.username"
:placeholder="$t('user.username')"
clearable
></el-input>
2022-06-14 09:32:49 +08:00
</el-form-item>
<el-form-item>
2022-06-21 18:04:15 +08:00
<ren-select
v-model="dataForm.gender"
dict-type="gender"
:placeholder="$t('user.gender')"
></ren-select>
2022-06-14 09:32:49 +08:00
</el-form-item>
<el-form-item>
2022-06-21 18:04:15 +08:00
<el-select
v-model="dataForm.postId"
:placeholder="$t('user.postIdList')"
clearable
>
<el-option
:label="data.postName"
v-for="data in postList"
:key="data.id"
:value="data.id"
>{{ data.postName }}</el-option
>
2022-06-14 09:32:49 +08:00
</el-select>
</el-form-item>
<el-form-item>
2022-06-21 18:04:15 +08:00
<ren-dept-tree
v-model="dataForm.deptId"
:placeholder="$t('dept.title')"
:query="true"
></ren-dept-tree>
2022-06-14 09:32:49 +08:00
</el-form-item>
<el-form-item>
2022-06-21 18:04:15 +08:00
<el-button type="primary" @click="getDataList()">{{
$t("query")
}}</el-button>
2022-06-14 09:32:49 +08:00
</el-form-item>
<el-form-item>
2022-06-21 18:04:15 +08:00
<el-button
v-if="$hasPermission('sys:user:save')"
type="primary"
@click="addOrUpdateHandle()"
>{{ $t("add") }}</el-button
>
2022-06-14 09:32:49 +08:00
</el-form-item>
<el-form-item>
2022-06-21 18:04:15 +08:00
<el-button
v-if="$hasPermission('sys:user:delete')"
type="danger"
@click="deleteHandle()"
>{{ $t("deleteBatch") }}</el-button
>
2022-06-14 09:32:49 +08:00
</el-form-item>
<el-form-item>
2022-06-21 18:04:15 +08:00
<el-button
v-if="$hasPermission('sys:user:export')"
type="info"
@click="exportHandle()"
>{{ $t("export") }}</el-button
>
2022-06-14 09:32:49 +08:00
</el-form-item>
<el-form-item>
<el-button @click="reset()">重置</el-button>
</el-form-item>
</el-form>
<el-table
v-loading="dataListLoading"
:data="dataList"
border
@selection-change="dataListSelectionChangeHandle"
@sort-change="dataListSortChangeHandle"
2022-06-21 18:04:15 +08:00
style="width: 100%"
>
<el-table-column
type="selection"
header-align="center"
align="center"
width="50"
></el-table-column>
<el-table-column
prop="username"
:label="$t('user.username')"
sortable="custom"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="deptName"
:label="$t('user.deptName')"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="email"
:label="$t('user.email')"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="mobile"
:label="$t('user.mobile')"
sortable="custom"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="gender"
:label="$t('user.gender')"
sortable="custom"
header-align="center"
align="center"
>
2022-06-14 09:32:49 +08:00
<template slot-scope="scope">
{{ $getDictLabel("gender", scope.row.gender) }}
</template>
</el-table-column>
2022-06-21 18:04:15 +08:00
<el-table-column
prop="status"
:label="$t('user.status')"
sortable="custom"
header-align="center"
align="center"
>
2022-06-14 09:32:49 +08:00
<template slot-scope="scope">
2022-06-21 18:04:15 +08:00
<el-tag v-if="scope.row.status === 0" size="small" type="danger">{{
$t("user.status0")
}}</el-tag>
<el-tag v-else size="small" type="success">{{
$t("user.status1")
}}</el-tag>
2022-06-14 09:32:49 +08:00
</template>
</el-table-column>
2022-06-21 18:04:15 +08:00
<el-table-column
prop="createDate"
:label="$t('user.createDate')"
sortable="custom"
header-align="center"
align="center"
width="180"
></el-table-column>
<el-table-column
:label="$t('handle')"
fixed="right"
header-align="center"
align="center"
width="150"
>
2022-06-14 09:32:49 +08:00
<template slot-scope="scope">
2022-06-21 18:04:15 +08:00
<el-button
v-if="$hasPermission('sys:user:update')"
type="text"
size="small"
@click="addOrUpdateHandle(scope.row.id)"
>{{ $t("update") }}</el-button
>
<el-button
v-if="$hasPermission('sys:user:delete')"
type="text"
size="small"
@click="deleteHandle(scope.row.id)"
>{{ $t("delete") }}</el-button
>
2022-06-14 09:32:49 +08:00
</template>
</el-table-column>
</el-table>
<el-pagination
:current-page="page"
:page-sizes="[10, 20, 50, 100]"
:page-size="limit"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="pageSizeChangeHandle"
2022-06-21 18:04:15 +08:00
@current-change="pageCurrentChangeHandle"
>
2022-06-14 09:32:49 +08:00
</el-pagination>
<!-- 弹窗, 新增 / 修改 -->
2022-06-21 18:04:15 +08:00
<add-or-update
v-if="addOrUpdateVisible"
ref="addOrUpdate"
@refreshDataList="getDataList"
></add-or-update>
2022-06-14 09:32:49 +08:00
</div>
</el-card>
</template>
<script>
2022-06-21 18:04:15 +08:00
import mixinViewModule from "@/mixins/view-module";
import AddOrUpdate from "./user-add-or-update";
import qs from "qs";
2022-06-14 09:32:49 +08:00
export default {
mixins: [mixinViewModule],
2022-06-21 18:04:15 +08:00
data() {
2022-06-14 09:32:49 +08:00
return {
mixinViewModuleOptions: {
2022-06-21 18:04:15 +08:00
getDataListURL: "/sys/user/page",
2022-06-14 09:32:49 +08:00
getDataListIsPage: true,
2022-06-21 18:04:15 +08:00
deleteURL: "/sys/user",
2022-06-14 09:32:49 +08:00
deleteIsBatch: true,
2022-06-21 18:04:15 +08:00
exportURL: "/sys/user/export",
2022-06-14 09:32:49 +08:00
},
postList: [],
dataForm: {
2022-06-21 18:04:15 +08:00
username: "",
deptId: "",
postId: "",
gender: "",
},
};
2022-06-14 09:32:49 +08:00
},
components: {
2022-06-21 18:04:15 +08:00
AddOrUpdate,
2022-06-14 09:32:49 +08:00
},
2022-06-21 18:04:15 +08:00
created() {
this.getPostList();
2022-06-14 09:32:49 +08:00
},
methods: {
2022-06-21 18:04:15 +08:00
reset() {
this.$http
.get(
this.mixinViewModuleOptions.getDataListURL +
"?" +
qs.stringify({
page: 1,
limit: 10,
username: "",
deptId: "",
postId: "",
gender: "",
})
)
.then(({ data: res }) => {
this.dataForm.username = "";
this.dataForm.deptId = "";
this.dataForm.postId = "";
this.dataForm.gender = "";
if (res.code !== 0) {
this.dataList = [];
this.total = 0;
return this.$message.error(res.msg);
}
this.dataList = this.mixinViewModuleOptions.getDataListIsPage
? res.data.list
: res.data;
this.total = this.mixinViewModuleOptions.getDataListIsPage
? res.data.total
: 0;
if (this.mixinViewModuleOptions.requestCallback) {
this.mixinViewModuleOptions.requestCallback(res.data);
}
this.dataListLoading = false;
2022-06-14 09:32:49 +08:00
})
2022-06-21 18:04:15 +08:00
.catch(() => {
this.dataListLoading = false;
});
2022-06-14 09:32:49 +08:00
},
2022-06-21 18:04:15 +08:00
getPostList() {
this.$http
.get("/sys/post/list")
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg);
}
this.postList = res.data;
})
.catch(() => {});
},
},
};
2022-06-14 09:32:49 +08:00
</script>