suzhou-jichuang-lanhai
/
TcAssetPc2
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

单位管理table

Browse Source
yfy
许宏杰 2 months ago
parent 25ef8ebfc2
commit 2cf549171f
1 changed files with 369 additions and 0 deletions
Show Stats Download Patch File Download Diff File

369
src/views/auditPages/unit.vue
Unescape View File

@ -0,0 +1,369 @@
<template>
<main-app :showTree="true" listTitle="单位列表">
<template v-slot:tree>
<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"
/>
</template>
<template v-slot:tablec>
<el-button type="info" plain icon="el-icon-upload2" size="mini"
>导入</el-button
>
<el-button type="warning" plain icon="el-icon-download" size="mini"
>导出</el-button
>
<el-button type="primary" plain icon="el-icon-plus" size="mini"
>新增单位</el-button
>
</template>
<template v-slot:search>
<el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
label-width="88px"
>
<el-form-item label="单位名称：" prop="nickName">
<el-input
v-model="queryParams.nickName"
placeholder="请输入单位名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="单位类型：" prop="dwlx">
<el-select
v-model="queryParams.dwlx"
placeholder="请选择单位类型"
clearable
>
<el-option
v-for="dict in dict.type.dwlx"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="信用代码：" prop="userName">
<el-input
v-model="queryParams.userName"
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>
</template>
<template v-slot:table>
<el-table
v-loading="loading"
:data="userList"
:height="tabHeader"
:row-class-name="tableRowClassName"
>
<el-table-column type="index" width="50" label="序号" align="center" />
<el-table-column
label="单位名称"
align="center"
prop="nickName"
show-overflow-tooltip
>
<template slot-scope="scope">{{ scope.row.nickName }}</template>
</el-table-column>
<el-table-column
label="单位类型"
width="100"
align="center"
prop="dwlx"
show-overflow-tooltip
>
<template slot-scope="scope">
<dict-tag :options="dict.type.dwlx" :value="scope.row.dwlx" />
</template>
</el-table-column>
<el-table-column
label="统一社会信用代码"
align="center"
prop="userName"
show-overflow-tooltip
>
<template slot-scope="scope">{{ scope.row.userName }}</template>
</el-table-column>
<el-table-column
label="所属行业"
width="80"
align="center"
prop="sshy"
show-overflow-tooltip
>
<template slot-scope="scope">
<dict-tag :options="dict.type.sshy" :value="scope.row.sshy" />
</template>
</el-table-column>
<el-table-column
label="单位地址"
align="center"
prop="dwxxdz"
show-overflow-tooltip
>
<template slot-scope="scope">{{ scope.row.dwxxdz }}</template>
</el-table-column>
<el-table-column
label="操作"
prop="userId"
class-name="table-operation"
align="center"
width="400"
>
<template slot-scope="scope">
<el-button type="primary" size="mini" plain icon="el-icon-view"
>查看</el-button
>
<el-button
type="warning"
size="mini"
plain
icon="el-icon-edit-outline"
>修改</el-button
>
<el-button
type="warning"
size="mini"
plain
icon="el-icon-refresh-left"
>重置密码</el-button
>
<el-button type="danger" size="mini" plain icon="el-icon-delete"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<pagination
prev-text="上页"
next-text="下页"
v-show="total > 0"
:total="total"
:page-sizes="[10, 20, 40, 80, 100]"
:page.sync="queryParams.current"
:limit.sync="queryParams.size"
@pagination="getList"
/>
</template>
</main-app>
</template>
<script>
import { deptTreeSelect } from "@/api/system/user";
import { listUnit, delUnit, editPassword } from "@/api/auditPagesApi/index";
import { getToken } from "@/utils/auth";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { MessageBox } from "element-ui";
export default {
name: "User",
dicts: ["dwlx", "sshy"],
components: { Treeselect },
data() {
return {
roles: this.$store.state.user.roles,
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 用户表格数据
userList: null,
// 弹出层标题
title: "",
// 部门树选项
deptOptions: undefined,
// 是否显示弹出层
open: false,
// 部门名称
deptName: undefined,
// 默认密码
initPassword: undefined,
// 岗位选项
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 + "/tc/unit/importData",
},
// 查询参数
queryParams: {
current: 1,
size: 20,
userName: undefined,
nickName: undefined,
dwlx: undefined,
},
// 表单校验
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: [
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: "请输入正确的手机号码",
trigger: "blur",
},
],
},
tabHeader: 585,
};
},
created() {
this.getList();
this.getDeptTree();
},
methods: {
// 修改table背景色
tableRowClassName({ row, rowIndex }) {
if (rowIndex % 2 !== 0) {
return "evenNumber-row";
}
return "";
},
/** 查询部门下拉树结构 */
getDeptTree() {
deptTreeSelect().then((response) => {
this.deptOptions = response.data;
});
},
/**
* 重置
*/
resetQuery() {
this.resetForm("queryForm");
this.queryParams.deptId = undefined;
this.$refs.tree.setCurrentKey(null);
this.handleQuery();
},
// 筛选节点
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
// 节点单击事件
handleNodeClick(data) {
this.queryParams.deptId = data.id;
this.handleQuery();
},
/**
* 搜索
*/
handleQuery() {
this.queryParams.current = 1;
this.getList();
},
/**
* 获取列表
*/
getList() {
this.loading = true;
listUnit(this.queryParams).then((response) => {
this.userList = response.data.records;
this.total = response.data.total;
this.loading = false;
});
},
},
};
</script>
<style lang="scss" scoped>
::v-deep .el-form-item__content {
width: 280px;
.el-select,
.el-date-editor {
width: 100%;
}
}
</style>
Write Preview
Loading…
Cancel
Save