You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
559 lines
16 KiB
559 lines
16 KiB
<!-- @format -->
|
|
|
|
<template>
|
|
<div class="main">
|
|
<div class="left">
|
|
<div class="top">
|
|
<div class="ns-table-title">关联企业</div>
|
|
<div>
|
|
<a-input-search
|
|
v-model:value="searchValue"
|
|
style="margin-bottom: 8px"
|
|
placeholder="请输入关联企业"
|
|
@search="onSearch" />
|
|
<a-tree :tree-data="treeData" defaultExpandAll @select="handleSelect">
|
|
<template #title="{ title }">
|
|
{{ title }}
|
|
<!-- <span v-if="title.indexOf(searchValue) > -1">
|
|
{{ title.substring(0, title.indexOf(searchValue)) }}
|
|
</span>
|
|
<span v-else>{{ title }}</span> -->
|
|
</template>
|
|
</a-tree>
|
|
</div>
|
|
</div>
|
|
<div class="ns-table-title">关联部门</div>
|
|
<div>
|
|
<a-input-search
|
|
v-model:value="searchValue2"
|
|
style="margin-bottom: 8px"
|
|
placeholder="请输入关联部门"
|
|
@search="onSearch2" />
|
|
<a-tree :tree-data="treeData2" defaultExpandAll @select="handleSelect2">
|
|
<template #title="{ title }">
|
|
{{ title }}
|
|
<!-- <span v-if="title.indexOf(searchValue) > -1">
|
|
{{ title.substring(0, title.indexOf(searchValue)) }}
|
|
</span>
|
|
<span v-else>{{ title }}</span> -->
|
|
</template>
|
|
</a-tree>
|
|
</div>
|
|
</div>
|
|
<div class="right">
|
|
<ns-view-list-table v-bind="tableConfig" :model="data" ref="mainRef" />
|
|
</div>
|
|
<a-drawer
|
|
:width="1200"
|
|
:visible="visible"
|
|
:body-style="{ paddingBottom: '80px' }"
|
|
:footer-style="{ textAlign: 'right' }"
|
|
destroyOnClose
|
|
@close="onClose">
|
|
<ns-form ref="formRef" :schemas="formSchema" :model="formData" class="form" />
|
|
<span class="admin">用户权限</span>
|
|
<ns-view-list-table v-bind="tableConfig2" :model="data" ref="mainRef" rowKey="uuid" />
|
|
<a-button style="margin-right: 8px" @click="onClose">取消</a-button>
|
|
<a-button type="primary" @click="onEdit">确定</a-button>
|
|
</a-drawer>
|
|
|
|
<a-modal
|
|
title="用户信息"
|
|
:width="600"
|
|
:visible="addformvisible"
|
|
cancelText="取消"
|
|
@ok="handleOk"
|
|
@cancel="handleClose">
|
|
<ns-form :schemas="formSchema2" :model="formData2" formLayout="vertical" />
|
|
</a-modal>
|
|
</div>
|
|
</template>
|
|
<script lang="ts">
|
|
import { Modal } from 'ant-design-vue';
|
|
import { createVNode, defineComponent, reactive, ref } from 'vue';
|
|
import { http } from '/nerv-lib/util/http';
|
|
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
|
import { cloneDeep } from 'lodash-es';
|
|
import { NsMessage } from '/nerv-lib/component';
|
|
import { formConfig, formConfig2 } from './config';
|
|
import { mockData, mockData2, treeData, treeData2 } from './mock';
|
|
import { origanizemanage } from '/@/api/origanizemanage';
|
|
|
|
export default defineComponent({
|
|
name: 'OrderListIndex',
|
|
setup() {
|
|
const mainRef = ref();
|
|
const data = reactive({});
|
|
let formData = ref({});
|
|
let formData2 = ref({});
|
|
const formRef = ref();
|
|
const visible = ref(false);
|
|
const addformvisible = ref(false);
|
|
const searchValue = ref<string>('');
|
|
const searchValue2 = ref<string>('');
|
|
const formSchema = formConfig;
|
|
const casData = ref([]);
|
|
const formSchema2 = formConfig2(casData);
|
|
|
|
const opMap: any = {
|
|
type: 'add',
|
|
fuc: () => {},
|
|
record: {},
|
|
};
|
|
|
|
const onSearch = () => {
|
|
console.log(searchValue.value);
|
|
};
|
|
const onSearch2 = () => {
|
|
console.log(searchValue2.value);
|
|
};
|
|
|
|
const handleSelect = (selectedKeys: any, info: any) => {
|
|
console.log(selectedKeys, 'selectedKeys');
|
|
console.log(info, 'info');
|
|
};
|
|
const handleSelect2 = (selectedKeys: any, info: any) => {
|
|
console.log(selectedKeys, 'selectedKeys');
|
|
console.log(info, 'info');
|
|
};
|
|
|
|
const onClose = () => {
|
|
visible.value = false;
|
|
};
|
|
|
|
const onEdit = () => {
|
|
formRef.value?.triggerSubmit().then(() => {
|
|
console.log(formData.value, 'formData.value');
|
|
opMap.fuc && opMap.fuc(formData.value);
|
|
visible.value = false;
|
|
});
|
|
};
|
|
|
|
const handleOk = () => {
|
|
console.log(formData2.value, 'formData2.value');
|
|
console.log(opMap.type, 'type');
|
|
if (opMap.type === 'add') {
|
|
mockData2.value.push({ information: casData.value.join('/') });
|
|
} else {
|
|
}
|
|
addformvisible.value = false;
|
|
};
|
|
const handleClose = () => {
|
|
addformvisible.value = false;
|
|
};
|
|
|
|
const tableConfig = {
|
|
title: '用户管理',
|
|
api: origanizemanage.userList,
|
|
params: {
|
|
orgId: JSON.parse(sessionStorage.getItem('userInfo')).orgId,
|
|
},
|
|
listField: 'data.records',
|
|
headerActions: [
|
|
{
|
|
label: '新增',
|
|
name: 'RoleTypeAdd',
|
|
type: 'primary',
|
|
handle: () => {
|
|
opMap.type = 'add';
|
|
opMap.fuc = (formData: any) => {
|
|
console.log(formData, 'formData');
|
|
// origanizemanage.addUser
|
|
// mockData.value.push({
|
|
// id: Math.random().toString().slice(2, 6),
|
|
// ...cloneDeep(formData),
|
|
// });
|
|
};
|
|
visible.value = true;
|
|
},
|
|
},
|
|
{
|
|
label: '导入',
|
|
type: 'primary',
|
|
name: 'RoleTypeAdd',
|
|
handle: () => {},
|
|
},
|
|
{
|
|
label: '模板下载',
|
|
type: 'primary',
|
|
name: 'RoleTypeAdd',
|
|
handle: () => {},
|
|
},
|
|
{
|
|
label: '导出',
|
|
type: 'primary',
|
|
name: 'exports',
|
|
},
|
|
{
|
|
label: '批量删除',
|
|
type: 'primary',
|
|
name: 'RoleTypeAdd',
|
|
dynamicDisabled: (data: any) => {
|
|
return data.list.length === 0;
|
|
},
|
|
confirm: true,
|
|
isReload: true,
|
|
handle: (data: any) => {
|
|
console.log('object :>> ', data.list);
|
|
const idList = data.list.map((item) => item.id);
|
|
mockData.value.splice(0);
|
|
return;
|
|
const copyData = cloneDeep(mockData.value);
|
|
mockData.value = copyData.filter((tar) => {
|
|
return !idList.includes(tar.id);
|
|
});
|
|
|
|
console.log(mockData.value);
|
|
|
|
return;
|
|
copyData.map((item, index) => {
|
|
if (idList.includes(item.id)) {
|
|
mockData.value.filter((tar) => {
|
|
return !idList.includes(tar.id);
|
|
});
|
|
}
|
|
});
|
|
},
|
|
},
|
|
],
|
|
columns: [
|
|
{
|
|
title: '序号',
|
|
dataIndex: 'address',
|
|
customRender: (text: any) => {
|
|
return text.index + 1;
|
|
},
|
|
sorter: {
|
|
compare: (a, b) => a.address - b.address,
|
|
},
|
|
},
|
|
{
|
|
title: '账号',
|
|
dataIndex: 'accountNo',
|
|
sorter: {
|
|
compare: (a, b) => a.accountNo - b.accountNo,
|
|
},
|
|
},
|
|
{
|
|
title: '姓名',
|
|
dataIndex: 'realName',
|
|
sorter: {
|
|
compare: (a, b) => a.realName - b.realName,
|
|
},
|
|
},
|
|
{
|
|
title: '性别',
|
|
dataIndex: 'sex',
|
|
sorter: {
|
|
compare: (a, b) => a.name - b.name,
|
|
},
|
|
},
|
|
{
|
|
title: '手机号',
|
|
dataIndex: 'telephone',
|
|
},
|
|
{
|
|
title: '邮箱',
|
|
dataIndex: 'email',
|
|
},
|
|
{
|
|
title: '组织关系',
|
|
dataIndex: 'deptInfo',
|
|
customRender: (value) => {
|
|
return value.record.deptInfo.orgName;
|
|
},
|
|
},
|
|
{
|
|
title: '部门/角色',
|
|
dataIndex: 'orgInfo',
|
|
customRender: (value) => {
|
|
// // console.log(value.record.orgInfo.orgName, 'ss');
|
|
// console.log(
|
|
// value.record.userRoleList.map((item) => {
|
|
// return `${value.record.orgInfo.orgName}/${item.roleName}`;
|
|
// }),
|
|
// );
|
|
// value.record.userRoleList.map((item) => {
|
|
// return `${value.record.orgInfo.orgName}/${item.roleName}`;
|
|
// });
|
|
// return `${value.record.orgInfo.orgName}/`;
|
|
},
|
|
},
|
|
{
|
|
title: '状态',
|
|
dataIndex: 'userStatus',
|
|
},
|
|
],
|
|
columnActions: {
|
|
title: '操作',
|
|
actions: [
|
|
{
|
|
label: '编辑',
|
|
name: 'RoleTypeEdit',
|
|
// dynamicParams: 'uuid',
|
|
handle: (record: any) => {
|
|
console.log(record, 'record');
|
|
formData.value = record;
|
|
opMap.type = 'edit';
|
|
opMap.fuc = (formData: any) => {
|
|
Object.assign(
|
|
mockData.value.filter((item) => item.id === record.id)[0],
|
|
formData,
|
|
);
|
|
};
|
|
visible.value = true;
|
|
},
|
|
},
|
|
{
|
|
label: '冻结',
|
|
name: 'RoleTypeEdit',
|
|
handle: (record: any) => {
|
|
console.log(record, 'record');
|
|
Modal.confirm({
|
|
title: '是否冻结该账户',
|
|
icon: createVNode(ExclamationCircleOutlined),
|
|
content: createVNode('div', { style: 'color:red;' }, ''),
|
|
|
|
onOk() {
|
|
// http
|
|
// .post('/api/parking_merchant/objs/gateInfo/delete', {
|
|
// uuid: record.uuid,
|
|
// })
|
|
// .then((res) => {
|
|
// mainRef.value.nsTableRef.reload();
|
|
// });
|
|
NsMessage.success('冻结成功');
|
|
},
|
|
class: 'test',
|
|
});
|
|
},
|
|
},
|
|
{
|
|
label: '重置密码',
|
|
name: 'RoleTypeEdit',
|
|
handle: (record: any) => {
|
|
console.log(record, 'record');
|
|
Modal.confirm({
|
|
title: '是否重置密码',
|
|
icon: createVNode(ExclamationCircleOutlined),
|
|
content: createVNode('div', { style: 'color:red;' }, ''),
|
|
onOk() {
|
|
// Modal.success({
|
|
// title: '密码重置成功,初始密码123456',
|
|
// });
|
|
NsMessage.success('密码重置成功,初始密码123456');
|
|
},
|
|
onCancel() {
|
|
console.log('Cancel');
|
|
},
|
|
class: 'test',
|
|
});
|
|
},
|
|
},
|
|
{
|
|
label: '删除',
|
|
name: 'RoleTypeEdit',
|
|
dynamicParams: {
|
|
uuid: 'uuid',
|
|
},
|
|
confirm: true,
|
|
handle: (record: any, name: any, reload: any) => {
|
|
console.log(record, name, reload, 'record');
|
|
mockData.value.splice(0, 1);
|
|
},
|
|
},
|
|
],
|
|
},
|
|
|
|
formConfig: {
|
|
schemas: [
|
|
{
|
|
field: 'accountNo',
|
|
label: '账号名',
|
|
component: 'NsInput',
|
|
componentProps: {
|
|
placeholder: '请输入账号名',
|
|
maxLength: 30,
|
|
},
|
|
},
|
|
{
|
|
field: 'realName',
|
|
label: '姓名',
|
|
component: 'NsInput',
|
|
componentProps: {
|
|
placeholder: '请输入姓名',
|
|
maxLength: 30,
|
|
},
|
|
},
|
|
{
|
|
field: 'telephone',
|
|
label: '手机号',
|
|
component: 'NsInput',
|
|
componentProps: {
|
|
placeholder: '请输入手机号',
|
|
maxLength: 11,
|
|
},
|
|
},
|
|
{
|
|
field: 'email',
|
|
label: '邮箱',
|
|
component: 'NsInput',
|
|
componentProps: {
|
|
placeholder: '请输入邮箱',
|
|
maxLength: 30,
|
|
},
|
|
},
|
|
{
|
|
field: 'userStatus',
|
|
label: '用户状态',
|
|
component: 'NsSelect',
|
|
componentProps: {
|
|
placeholder: '请选择',
|
|
disabled: true,
|
|
options: [
|
|
{
|
|
label: '正常',
|
|
value: 1,
|
|
},
|
|
{
|
|
label: '冻结',
|
|
value: 2,
|
|
},
|
|
],
|
|
},
|
|
},
|
|
],
|
|
params: {},
|
|
},
|
|
// pagination: { defaultPageSize: 10 },
|
|
rowKey: 'id',
|
|
};
|
|
const tableConfig2 = {
|
|
// api: {
|
|
// url: '/carbon_emission/device/getGatewayList',
|
|
// method: 'post',
|
|
// },
|
|
value: mockData2.value,
|
|
listField: 'data.records',
|
|
rowSelection: null,
|
|
headerActions: [
|
|
{
|
|
label: '新增',
|
|
name: 'RoleTypeAdd',
|
|
type: 'primary',
|
|
handle: () => {
|
|
opMap.type = 'add';
|
|
opMap.fuc = (formData2: any) => {
|
|
console.log(formData2, 'formData2');
|
|
mockData2.value.push(cloneDeep(formData2));
|
|
};
|
|
addformvisible.value = true;
|
|
},
|
|
},
|
|
],
|
|
columns: [
|
|
{
|
|
title: '角色信息',
|
|
dataIndex: 'information',
|
|
},
|
|
],
|
|
columnActions: {
|
|
title: '操作',
|
|
actions: [
|
|
{
|
|
label: '编辑',
|
|
name: 'RoleTypeEdit',
|
|
// dynamicParams: 'uuid',
|
|
handle: (record: any) => {
|
|
console.log(record, 'record');
|
|
formData2.value = record;
|
|
opMap.type = 'edit';
|
|
opMap.fuc = (formData2: any) => {
|
|
Object.assign(
|
|
mockData.value.filter((item) => item.id === record.id)[0],
|
|
formData2,
|
|
);
|
|
};
|
|
addformvisible.value = true;
|
|
},
|
|
},
|
|
{
|
|
label: '删除',
|
|
name: 'RoleTypeEdit',
|
|
confirm: true,
|
|
handle: (record: any, name: any, reload: any) => {
|
|
console.log(record, name, reload, 'record');
|
|
mockData2.value.splice(0, 1);
|
|
},
|
|
},
|
|
],
|
|
},
|
|
};
|
|
|
|
return {
|
|
formRef,
|
|
tableConfig,
|
|
tableConfig2,
|
|
data,
|
|
mainRef,
|
|
visible,
|
|
addformvisible,
|
|
formSchema,
|
|
formSchema2,
|
|
formData,
|
|
formData2,
|
|
treeData,
|
|
treeData2,
|
|
searchValue,
|
|
searchValue2,
|
|
handleSelect,
|
|
handleSelect2,
|
|
onClose,
|
|
onEdit,
|
|
onSearch,
|
|
onSearch2,
|
|
handleOk,
|
|
handleClose,
|
|
};
|
|
},
|
|
});
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.main {
|
|
display: flex;
|
|
}
|
|
.left {
|
|
width: 400px;
|
|
border-right: 5px solid rgb(229, 235, 240);
|
|
min-width: fit-content;
|
|
}
|
|
.right {
|
|
flex: 1;
|
|
overflow: auto;
|
|
}
|
|
.top {
|
|
height: 46vh;
|
|
border-bottom: 5px solid rgb(229, 235, 240);
|
|
}
|
|
.ns-table-title {
|
|
text-align: left;
|
|
// height: 46px;
|
|
line-height: 46px;
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
padding-left: 16px;
|
|
}
|
|
.admin {
|
|
text-align: left;
|
|
height: 42px;
|
|
line-height: 42px;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
user-select: text;
|
|
padding-left: 16px;
|
|
width: calc(100% + 32px);
|
|
}
|
|
.form {
|
|
margin-left: 10px;
|
|
}
|
|
</style>
|
|
|