340 lines
10 KiB
TypeScript
340 lines
10 KiB
TypeScript
import { Button, Form, Input, message, Modal, Tag } from 'antd';
|
||
import React, { useEffect, useState } from 'react';
|
||
import { DeviceInfo } from '../VirtualCard';
|
||
import { SelectRange } from '../../../../compenents';
|
||
import { getLocatedSchoolApi } from '../../api/virtualCard';
|
||
interface locateSoftModalProps {
|
||
isOpen: boolean;
|
||
onOk: (data: any) => void;
|
||
onCancel: () => void;
|
||
data?: DeviceInfo;
|
||
id: any;
|
||
}
|
||
|
||
const LocateSoftModal = (props: locateSoftModalProps) => {
|
||
const [form] = Form.useForm();
|
||
const { isOpen, onOk, onCancel, data, id } = props;
|
||
const [idsVisible, setIdsVisible] = useState(false);
|
||
|
||
const [deps, setDeps] = useState<any[]>([]);
|
||
const [depIds, setDepIds] = useState<number[]>([]);
|
||
const [userIds, setUserIds] = useState<number[]>([]);
|
||
const [groupIds, setGroupIds] = useState<number[]>([]);
|
||
const [groups, setGroups] = useState<any[]>([]);
|
||
const [users, setUsers] = useState<any[]>([]);
|
||
const [modalConfirmLoading, setModalConfirmLoading] = useState(false);
|
||
|
||
const getDepsDetail = (deps: any) => {
|
||
let arr: any = [];
|
||
let arr2: any = [];
|
||
Object.keys(deps).map((v, i) => {
|
||
arr.push(Number(v));
|
||
arr2.push({
|
||
key: Number(v),
|
||
title: {
|
||
props: {
|
||
children: deps[v],
|
||
},
|
||
},
|
||
});
|
||
});
|
||
setDepIds(arr);
|
||
setDeps(arr2);
|
||
};
|
||
|
||
const getGroupsDetail = (groups: any) => {
|
||
let arr: any = [];
|
||
let arr2: any = [];
|
||
Object.keys(groups).map((v, i) => {
|
||
arr.push(Number(v));
|
||
arr2.push({
|
||
key: Number(v),
|
||
title: {
|
||
props: {
|
||
children: groups[v],
|
||
},
|
||
},
|
||
});
|
||
});
|
||
setGroupIds(arr);
|
||
setGroups(arr2);
|
||
};
|
||
|
||
const getUsersDetail = (users: any) => {
|
||
let arr: any = [];
|
||
let arr2: any = [];
|
||
Object.keys(users).map((v, i) => {
|
||
arr.push(Number(v));
|
||
arr2.push({
|
||
id: Number(v),
|
||
name: users[v],
|
||
});
|
||
});
|
||
setUserIds(arr);
|
||
setUsers(arr2);
|
||
};
|
||
|
||
const getLocatedSchools = async (id: any) => {
|
||
try {
|
||
const res = (await getLocatedSchoolApi(id)) as any;
|
||
if (res.data) {
|
||
form.setFieldsValue({
|
||
depIds: res.data.dep_ids,
|
||
groupIds: res.data.group_ids,
|
||
userIds: res.data.user_ids,
|
||
ids: [
|
||
...(res.data.deps ? Object.keys(res.data.deps) : []),
|
||
...(res.data.users ? Object.keys(res.data.users) : []),
|
||
...(res.data.groups ? Object.keys(res.data.groups) : []),
|
||
].map(Number),
|
||
});
|
||
let deps = res.data.deps;
|
||
if (deps && JSON.stringify(deps) !== '{}') {
|
||
getDepsDetail(deps);
|
||
}
|
||
let groups = res.data.groups;
|
||
if (groups && JSON.stringify(groups) !== '{}') {
|
||
getGroupsDetail(groups);
|
||
}
|
||
let users = res.data.users;
|
||
if (users && JSON.stringify(users) !== '{}') {
|
||
getUsersDetail(users);
|
||
}
|
||
}
|
||
} catch {
|
||
/* empty */
|
||
} finally {
|
||
/* empty */
|
||
}
|
||
};
|
||
|
||
const resetAllState = () => {
|
||
setDeps([]);
|
||
setDepIds([]);
|
||
setUserIds([]);
|
||
setGroupIds([]);
|
||
setGroups([]);
|
||
setUsers([]);
|
||
setIdsVisible(false);
|
||
form.resetFields();
|
||
};
|
||
|
||
// 监听isOpen变化，当模态框关闭时重置状态
|
||
useEffect(() => {
|
||
if (!isOpen) {
|
||
resetAllState();
|
||
}
|
||
}, [isOpen]);
|
||
useEffect(() => {
|
||
if (id) getLocatedSchools(id);
|
||
return () => {
|
||
form.resetFields();
|
||
};
|
||
}, []);
|
||
|
||
const handleOk = async () => {
|
||
setModalConfirmLoading(true);
|
||
try {
|
||
await form.validateFields();
|
||
const postData = {
|
||
softId: id,
|
||
dep_ids: depIds,
|
||
user_ids: userIds,
|
||
group_ids: groupIds,
|
||
};
|
||
await onOk(postData);
|
||
} catch (error) {
|
||
console.error('表单验证失败:', error);
|
||
message.error('请填写所有必填字段！');
|
||
} finally {
|
||
setModalConfirmLoading(false);
|
||
form.resetFields();
|
||
}
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<SelectRange
|
||
defaultDepIds={depIds}
|
||
defaultGroupIds={groupIds}
|
||
defaultUserIds={userIds}
|
||
defaultDeps={deps}
|
||
defaultGroups={groups}
|
||
defaultUsers={users}
|
||
open={idsVisible}
|
||
onCancel={() => setIdsVisible(false)}
|
||
onSelected={(selDepIds, selDeps, selGroupIds, selGroups, selUserIds, selUsers) => {
|
||
setDepIds(selDepIds);
|
||
setDeps(selDeps);
|
||
setGroupIds(selGroupIds);
|
||
setGroups(selGroups);
|
||
setUserIds(selUserIds);
|
||
setUsers(selUsers);
|
||
form.setFieldsValue({
|
||
ids: selDepIds.concat(selGroupIds).concat(selUserIds),
|
||
});
|
||
form.setFieldsValue({
|
||
depIds: selDepIds,
|
||
});
|
||
form.setFieldsValue({
|
||
userIds: selUserIds,
|
||
});
|
||
form.setFieldsValue({
|
||
groupIds: selGroupIds,
|
||
});
|
||
//打印form中的 groupIds，userIds，depIds 这三个值
|
||
console.log(
|
||
'打印form中的:',
|
||
form.getFieldValue('groupIds'),
|
||
form.getFieldValue('userIds'),
|
||
form.getFieldValue('depIds')
|
||
);
|
||
setIdsVisible(false);
|
||
}}
|
||
/>
|
||
<Modal
|
||
open={isOpen}
|
||
title={'软件分配'}
|
||
onOk={handleOk}
|
||
confirmLoading={modalConfirmLoading}
|
||
onCancel={onCancel}
|
||
destroyOnHidden={true}
|
||
>
|
||
<Form form={form} style={{ marginTop: 20 }}>
|
||
<Form.Item label="软件名称">
|
||
<div>{data?.softwareName}</div>
|
||
</Form.Item>
|
||
<Form.Item label="软件编码">
|
||
<div>{data?.softNo}</div>
|
||
</Form.Item>
|
||
<Form.Item
|
||
label={'软件指派'}
|
||
name="ids"
|
||
rules={[{ required: true, message: '请选择软件指派!' }]}
|
||
>
|
||
<div className="d-flex" style={{ width: '100%', flexWrap: 'wrap', marginBottom: -8 }}>
|
||
<Button
|
||
type="default"
|
||
style={{ marginBottom: 14 }}
|
||
onClick={() => setIdsVisible(true)}
|
||
>
|
||
{'添加范围'}
|
||
</Button>
|
||
<div
|
||
className="d-flex"
|
||
style={{
|
||
width: '100%',
|
||
flexWrap: 'wrap',
|
||
marginBottom: -16,
|
||
}}
|
||
>
|
||
{deps.length > 0 &&
|
||
deps.map((item: any, i: number) => (
|
||
<Tag
|
||
key={i}
|
||
closable
|
||
style={{
|
||
height: 32,
|
||
lineHeight: '32px',
|
||
fontSize: 14,
|
||
color: '#FF4D4F',
|
||
background: 'rgba(255,77,79,0.1)',
|
||
marginRight: 16,
|
||
marginBottom: 16,
|
||
}}
|
||
onClose={(e) => {
|
||
e.preventDefault();
|
||
let arr = [...deps];
|
||
let arr2 = [...depIds];
|
||
arr.splice(i, 1);
|
||
arr2.splice(i, 1);
|
||
setDeps(arr);
|
||
setDepIds(arr2);
|
||
form.setFieldsValue({
|
||
ids: arr2.concat(groupIds).concat(userIds),
|
||
});
|
||
form.setFieldsValue({
|
||
depIds: arr2,
|
||
});
|
||
}}
|
||
>
|
||
{item.title.props.children}
|
||
</Tag>
|
||
))}
|
||
|
||
{groups.length > 0 &&
|
||
groups.map((item: any, i: number) => (
|
||
<Tag
|
||
key={i}
|
||
closable
|
||
style={{
|
||
height: 32,
|
||
lineHeight: '32px',
|
||
fontSize: 14,
|
||
color: '#FF4D4F',
|
||
background: 'rgba(255,77,79,0.1)',
|
||
marginRight: 16,
|
||
marginBottom: 16,
|
||
}}
|
||
onClose={(e) => {
|
||
e.preventDefault();
|
||
let arr = [...groups];
|
||
let arr2 = [...groupIds];
|
||
arr.splice(i, 1);
|
||
arr2.splice(i, 1);
|
||
setGroups(arr);
|
||
setGroupIds(arr2);
|
||
form.setFieldsValue({
|
||
ids: depIds.concat(arr2).concat(userIds),
|
||
});
|
||
form.setFieldsValue({
|
||
groupIds: arr2,
|
||
});
|
||
}}
|
||
>
|
||
{item.title.props.children}
|
||
</Tag>
|
||
))}
|
||
{users.length > 0 &&
|
||
users.map((item: any, j: number) => (
|
||
<Tag
|
||
key={j}
|
||
closable
|
||
style={{
|
||
height: 32,
|
||
lineHeight: '32px',
|
||
fontSize: 14,
|
||
color: '#FF4D4F',
|
||
background: 'rgba(255,77,79,0.1)',
|
||
marginRight: 16,
|
||
marginBottom: 16,
|
||
}}
|
||
onClose={(e) => {
|
||
e.preventDefault();
|
||
let arr = [...users];
|
||
let arr2 = [...userIds];
|
||
arr.splice(j, 1);
|
||
arr2.splice(j, 1);
|
||
setUsers(arr);
|
||
setUserIds(arr2);
|
||
form.setFieldsValue({
|
||
ids: depIds.concat(groupIds).concat(arr2),
|
||
});
|
||
form.setFieldsValue({
|
||
userIds: arr2,
|
||
});
|
||
}}
|
||
>
|
||
{item.name}
|
||
</Tag>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</Form.Item>
|
||
</Form>
|
||
</Modal>
|
||
</>
|
||
);
|
||
};
|
||
export default LocateSoftModal;
|