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.

693 lines
19 KiB

10 months ago
<!-- @format -->
<template>
10 months ago
<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" @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" @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" class="table" />
</div>
10 months ago
<a-drawer
:width="1200"
:visible="visible"
:body-style="{ paddingBottom: '80px' }"
:footer-style="{ textAlign: 'right' }"
@close="onClose">
<ns-form :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>
10 months ago
10 months ago
<a-modal
title="用户信息"
:width="600"
:visible="addformvisible"
cancelText="取消"
@ok="handleOk"
@cancel="handleClose">
<ns-form :schemas="formSchema2" :model="formData2" />
</a-modal>
</div>
10 months ago
</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';
10 months ago
import { cloneDeep } from 'lodash-es';
import { NsMessage } from '/nerv-lib/component';
10 months ago
export default defineComponent({
name: 'OrderListIndex',
setup() {
const mainRef = ref();
const data = reactive({});
10 months ago
let formData = ref({});
let formData2 = ref({});
10 months ago
const visible = ref(false);
10 months ago
const addformvisible = ref(false);
10 months ago
const searchValue = ref<string>('');
const searchValue2 = ref<string>('');
10 months ago
const opMap: any = {
type: 'add',
fuc: () => {},
record: {},
};
const mockData = ref([
{
id: 3,
zhanghao: 'axb',
name: '张三',
sex: '男',
phone: '123456789',
email: '1234567889',
relation: '1',
role: '1',
status: '1',
},
]);
const mockData2 = ref([
{
information: '1',
},
]);
10 months ago
const treeData = [
{
title: '铁路总局',
key: '0-0',
children: [
{ title: '济阳站', key: '0-0-0' },
{ title: '临沂站', key: '0-0-1' },
],
},
];
const treeData2 = [
{
title: '全部',
key: '0-0',
children: [
{ title: '产品部', key: '0-0-0' },
{ title: '运维部', key: '0-0-1' },
],
},
];
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;
};
10 months ago
10 months ago
const onEdit = () => {
10 months ago
opMap.fuc && opMap.fuc(formData.value);
10 months ago
visible.value = false;
};
const handleOk = () => {
10 months ago
opMap.fuc && opMap.fuc(formData2.value);
10 months ago
addformvisible.value = false;
};
const handleClose = () => {
addformvisible.value = false;
};
const tableConfig = {
// title: '企业管理',
10 months ago
// api: {
// url: '/carbon_emission/device/getGatewayList',
// method: 'post',
// },
value: mockData.value,
10 months ago
listField: 'data.records',
headerActions: [
{
label: '新增',
name: 'RoleTypeAdd',
type: 'primary',
handle: () => {
10 months ago
opMap.type = 'add';
opMap.fuc = (formData: any) => {
console.log(formData, 'formData');
mockData.value.push(cloneDeep(formData));
};
10 months ago
visible.value = true;
},
},
{
label: '导入',
type: 'primary',
name: 'RoleTypeAdd',
handle: () => {},
},
{
label: '模板下载',
type: 'primary',
name: 'RoleTypeAdd',
handle: () => {},
},
{
label: '导出',
type: 'primary',
10 months ago
name: 'exports',
10 months ago
},
{
label: '批量删除',
type: 'primary',
name: 'RoleTypeAdd',
handle: () => {},
dynamicDisabled: (data: any) => {
return data.list.length === 0;
},
confirm: true,
isReload: true,
},
],
params: {
page: 0,
pageSize: 10,
},
columns: [
{
title: '序号',
dataIndex: 'address',
customRender: (text: any) => {
return text.index + 1;
},
sorter: {
compare: (a, b) => a.address - b.address,
},
},
{
title: '账号',
dataIndex: 'zhanghao',
sorter: {
compare: (a, b) => a.zhanghao - b.zhanghao,
},
},
{
title: '姓名',
dataIndex: 'name',
sorter: {
compare: (a, b) => a.name - b.name,
},
},
{
title: '性别',
dataIndex: 'sex',
sorter: {
compare: (a, b) => a.name - b.name,
},
},
{
title: '手机号',
dataIndex: 'phone',
},
{
title: '邮箱',
dataIndex: 'email',
},
{
title: '组织关系',
dataIndex: 'relation',
},
{
title: '部门角色',
dataIndex: 'role',
},
{
title: '状态',
dataIndex: 'status',
},
],
columnActions: {
title: '操作',
actions: [
{
label: '编辑',
name: 'RoleTypeEdit',
// dynamicParams: 'uuid',
handle: (record: any) => {
console.log(record, 'record');
10 months ago
formData.value = record;
opMap.type = 'edit';
opMap.fuc = (formData: any) => {
Object.assign(
mockData.value.filter((item) => item.id === record.id)[0],
formData,
);
};
10 months ago
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();
// });
10 months ago
NsMessage.success('冻结成功');
10 months ago
},
onCancel() {
console.log('Cancel');
},
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() {
10 months ago
// Modal.success({
// title: '密码重置成功,初始密码123456',
// });
NsMessage.success('密码重置成功,初始密码123456');
10 months ago
},
onCancel() {
console.log('Cancel');
},
class: 'test',
});
},
},
{
label: '删除',
name: 'RoleTypeEdit',
dynamicParams: {
uuid: 'uuid',
},
10 months ago
confirm: true,
handle: (record: any, name, reload) => {
console.log(record, name, reload, 'record');
mockData.value.splice(0, 1);
10 months ago
},
},
],
},
formConfig: {
schemas: [
{
field: 'zhanghao',
label: '账号名',
component: 'NsInput',
componentProps: {
placeholder: '请输入账号名',
},
},
{
field: 'name',
label: '姓名',
component: 'NsInput',
componentProps: {
placeholder: '请输入姓名',
},
},
{
field: 'phone',
label: '手机号',
component: 'NsInput',
componentProps: {
placeholder: '请输入手机号',
},
},
{
field: 'email',
label: '邮箱',
component: 'NsInput',
componentProps: {
placeholder: '请输入邮箱',
},
},
{
field: 'status',
label: '用户状态',
component: 'NsSelect',
componentProps: {
placeholder: '请选择',
options: [
{
label: '正常',
value: 1,
},
{
label: '冻结',
value: 2,
},
],
},
},
],
params: {},
},
// pagination: { defaultPageSize: 10 },
10 months ago
rowKey: 'id',
10 months ago
};
const tableConfig2 = {
10 months ago
// api: {
// url: '/carbon_emission/device/getGatewayList',
// method: 'post',
// },
value: mockData2.value,
10 months ago
listField: 'data.records',
rowSelection: null,
headerActions: [
{
label: '新增',
name: 'RoleTypeAdd',
type: 'primary',
handle: () => {
10 months ago
opMap.type = 'add';
opMap.fuc = (formData2: any) => {
console.log(formData2, 'formData2');
mockData2.value.push(cloneDeep(formData2));
};
10 months ago
addformvisible.value = true;
},
},
],
columns: [
{
title: '角色信息',
10 months ago
dataIndex: 'information',
10 months ago
},
],
columnActions: {
title: '操作',
actions: [
{
label: '编辑',
name: 'RoleTypeEdit',
// dynamicParams: 'uuid',
handle: (record: any) => {
console.log(record, 'record');
10 months ago
formData2.value = record;
opMap.type = 'edit';
opMap.fuc = (formData2: any) => {
Object.assign(
mockData.value.filter((item) => item.id === record.id)[0],
formData2,
);
};
10 months ago
addformvisible.value = true;
},
},
{
label: '删除',
name: 'RoleTypeEdit',
dynamicParams: {
uuid: 'uuid',
},
10 months ago
confirm: true,
handle: (record: any, name, reload) => {
console.log(record, name, reload, 'record');
mockData2.value.splice(0, 1);
10 months ago
},
10 months ago
// 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();
// // });
// },
// onCancel() {
// console.log('Cancel');
// },
// class: 'test',
// });
10 months ago
},
],
},
};
const formSchema = reactive([
{
field: 'field111',
component: 'NsChildForm',
componentProps: {
title: '用户信息',
schemas: [
{
label: '账号',
field: 'zhanghao',
component: 'NsInput',
componentProps: {
placeholder: '请输入账号',
},
rules: [
{
required: false,
message: '请输入账号',
},
],
},
{
label: '姓名',
field: 'name',
component: 'NsInput',
componentProps: {
placeholder: '请输入姓名',
},
rules: [
{
required: false,
message: '请输入姓名',
},
],
},
{
label: '性别',
field: 'sex',
component: 'NsRadioGroup',
componentProps: {
radioType: 'radio',
options: [
{ label: '男', value: 1 },
{ label: '女', value: 2 },
],
},
},
{
label: '手机号',
field: 'phone',
component: 'NsInput',
componentProps: {
placeholder: '请输入手机号',
},
rules: [
{
required: false,
message: '请输入手机号',
},
],
},
{
label: '邮箱',
field: 'email',
component: 'NsInput',
componentProps: {
placeholder: '请输入邮箱',
},
},
{
label: '组织关系',
field: 'relation',
component: 'NsSelect',
componentProps: {
placeholder: '请选择组织关系',
options: [
{
label: '正常',
value: 1,
},
{
label: '冻结',
value: 2,
},
],
},
},
],
},
},
]);
const formSchema2 = reactive([
{
field: 'information',
component: 'NsCascader',
componentProps: {
placeholder: '请选择',
options: [
{
value: 'zhejiang',
10 months ago
label: '铁路局',
10 months ago
children: [
{
value: 'hangzhou',
10 months ago
label: '铁路局1',
10 months ago
children: [
{
value: 'xihu',
10 months ago
label: '铁路局2',
10 months ago
},
],
},
],
},
],
},
},
]);
return {
tableConfig,
tableConfig2,
data,
mainRef,
visible,
10 months ago
addformvisible,
10 months ago
formSchema,
10 months ago
formSchema2,
10 months ago
formData,
10 months ago
formData2,
10 months ago
treeData,
treeData2,
searchValue,
searchValue2,
10 months ago
handleSelect,
handleSelect2,
onClose,
onEdit,
10 months ago
onSearch,
onSearch2,
handleOk,
handleClose,
};
},
});
</script>
10 months ago
<style lang="less" scoped>
10 months ago
.main {
display: flex;
}
.left {
width: 400px;
/* height: 95vh; */
10 months ago
// height: 92.7vh;
10 months ago
border-right: 5px solid rgb(229, 235, 240);
10 months ago
min-width: fit-content;
10 months ago
}
10 months ago
.right {
flex: 1;
overflow: auto;
}
10 months ago
.top {
10 months ago
height: 46vh;
10 months ago
border-bottom: 5px solid rgb(229, 235, 240);
}
10 months ago
/* .ns-table-title {
10 months ago
text-align: left;
height: 46px;
line-height: 46px;
font-size: 18px;
font-weight: bold;
user-select: text;
padding-left: 16px;
10 months ago
width: 100%;
10 months ago
} */
10 months ago
.table {
10 months ago
/* width: 2000px; */
10 months ago
/* width: auto; */
10 months ago
}
.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>