我会给你一些代码,你需要把里面的中文都提取出来,每一个都作为object的key,对应的value是一个数组,数组第一个元素和key相同,第二个元素是key翻译出来的英文。import Layout from 'layouts';
const lockStatusMap = {
0: '未锁定',
1: '已锁定',
2: '其他用户锁定',
};
export const lockStatusStyleMap = {
0: 'error',
1: 'success',
2: 'warning',
};
export default function BatchImport() {
const { userInfo } = useSelector((state) => state.modelUser);
const router = useRouter();
const {
query: { tableId, tableName },
} = router;
const [tableData, setTableData] = useState([]);
const [confirmLoading, setConfirmLoading] = useState(false);
const [fileList, setFileList] = useState([]);
const [uploadLoading, setUploadLoading] = useState(false);
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
const [selectedRows, setSelectedRows] = useState([]);
const access_token = localStorage.getItem('token');
const apiBaseUrl = process.env.API_BASE_URL;
const {
loading: commonDataLoading,
dictItems,
dynLookList,
enumList,
} = useSelector((state) => state.modelCommonData);
const dispatch = useDispatch();
const {
modelCommonData: { fetchCommonData },
} = dispatch;
const { requesting: metaRequesting, launchRequest: getMetaRequest, res: metaRes } = useApiRequest(getMetaTableDetail);
const { fields: originFields } = metaRes || {};
const { requesting: batchLockRequesting, launchRequest: batchLockRequest } = useApiRequest(batchLockData);
const { requesting: batchCheckLockRequesting, launchRequest: batchCheckLockRequest } =
useApiRequest(batchCheckLockSatus);
useEffect(() => {
fetchCommonData('dictItems');
fetchCommonData('dynLookList');
}, []);
useEffect(() => {
getMetaRequest({ tableId }).catch((error) => {
message.error(error.msg || error.message || error.error || '查询失败');
});
}, [tableId]);
const fields = useMemo(() => {
if (!dictItems || !enumList || !dynLookList) {
return [];
}
return (
originFields?.map((fieldInfo) => {
const { visibleType, dynLookupId } = fieldInfo;
let res = {
...fieldInfo,
};
if (!!dynLookupId) {
res.dynLookupInfo = dynLookList.find((item) => item.id === dynLookupId);
}
if (visibleType === 2) {
const selectList = getSelectList(fieldInfo, dictItems, enumList);
res.selectList = selectList;
}
return res;
}) || []
);
}, [originFields, dictItems, enumList, dynLookList]);
const columns = useMemo(() => {
if (commonDataLoading.dictItems || commonDataLoading.enumList || commonDataLoading.dynLookList) {
return [];
}
const lockStatusFilters = Object.keys(lockStatusMap).map((key) => ({ value: key, text: lockStatusMap[key] }));
const lockStatusColumn = {
title: '锁定状态',
dataIndex: 'lockStatus',
width: fieldWidth,
render: (val) => lockStatusMap[val],
render: (val) => <Badge status={lockStatusStyleMap[val]} text={lockStatusMap[val]} />,
filters: lockStatusFilters,
onFilter: (value, record) => record.lockStatus == value,
};
const _columns =
fields
?.filter((item) => item.fieldType === 1)
?.map((fieldInfo) => ({
title: (
<div className={!fieldInfo.isNullable && st.required}>{fieldInfo.displayName || fieldInfo.description}</div>
),
dataIndex: fieldInfo.fieldNameCamel,
width: fieldWidth,
render: (val) => (
<div
className={st.showValue}
style={numberVisibleTypes.includes(fieldInfo.visibleType) ? { justifyContent: 'flex-end' } : {}}
>
{getShowValue(val, fieldInfo)}
</div>
),
})) || [];
return [lockStatusColumn, ..._columns];
}, [fields, commonDataLoading]);
const upload = async () => {
const lists = tableData.filter((item) => item.lockStatus === 1);
try {
setConfirmLoading(true);
await batchUpdateData(tableName, lists);
setConfirmLoading(false);
message.success('操作成功');
setTimeout(() => {
backPage();
}, 1000);
} catch (error) {
setConfirmLoading(false);
message.error(error.msg || error.message || '操作失败');
}
};
const confirmUpload = async () => {
const recordIds = tableData.map((item) => item.id);
const { lockedByCurrentUser, notLockedByCurrentUser, notFoundRecords } = await batchCheckLockRequest({
tableId,
tableName,
recordIds,
});
const idInfo = originFields.find((item) => item.fieldNameCamel === 'id');
const errorTips = [];
if (notLockedByCurrentUser.length > 0) {
errorTips.push(
`${idInfo.displayName || idInfo.description}为${notLockedByCurrentUser.join(',')}的${
notLockedByCurrentUser.length
}条数据未被您锁定`
);
}
if (notFoundRecords.length > 0) {
errorTips.push(`${idDescrition}为${notFoundRecords.join(',')}的${notFoundRecords.length}条数据未找到`);
}
if (errorTips.length > 0) {
const canImportData = tableData.filter((item) => lockedByCurrentUser.includes(item.id));
return Modal.confirm({
centered: true,
title: '提示',
icon: <ExclamationCircleFilled />,
okText: '继续',
content: `${errorTips.join(',')},是否继续导入数据?`,
onOk() {
upload(canImportData);
},
});
}
upload(tableData);
};
const backPage = () => {
router.push(`/data/detail?tableId=${tableId}&tableName=${tableName}`);
};
const onBeforeUpload = (file) => {
const type = file.name.split('.').at(-1);
let index = ['xlsx'].indexOf(type.toLocaleLowerCase());
if (index < 0) {
message.error('文件类型不支持');
return false;
}
if (file.size > 10 * 1000 * 1000) {
message.error('文件大小不超过10M哦');
return false;
}
setUploadLoading(true);
return new Promise((resolve) => {
resolve(file);
});
};
const onUploadChange = (res) => {
let { file: { status, response: { code, data, error } = {} } = {} } = res;
if (status === 'uploading') {
setFileList(res.fileList);
} else if (status === 'done') {
setUploadLoading(false);
if (code === 1) {
message.success('上传成功');
setFileList(res.fileList);
const _tableData =
data.dataList?.map((item) => {
const lockStatus = !item.lockedBy ? 0 : item.lockedBy === userInfo?.accountNumber ? 1 : 2;
return {
...item,
lockStatus,
};
}) || [];
setTableData(_tableData);
} else {
message.error(error);
setFileList([]);
}
} else if (status === 'error') {
setFileList([]);
setUploadLoading(false);
message.error('上传失败');
}
};
const onRemove = () => {
setTableData([]);
setFileList([]);
};
const onSelectChange = (newSelectedRowKeys, selectedRows) => {
setSelectedRowKeys(newSelectedRowKeys);
setSelectedRows(selectedRows);
};
const rowSelection = {
selectedRowKeys,
onChange: onSelectChange,
getCheckboxProps: (record) => ({
disabled: record.lockStatus !== 0,
}),
};
const handleBatchLock = () => {
Modal.confirm({
title: '提示',
content: '确定锁定选择的所有数据吗?锁定后将限制为仅您本人可编辑',
onOk: async () => {
await batchLockRequest({
tableId,
tableName,
recordIds: selectedRowKeys,
})
.then((res) => {
const { totalCount, successCount, details } = res;
const failCount = totalCount - successCount;
if (failCount === 0) {
message.success('操作成功');
} else {
message.info(`${successCount}条数据锁定成功,${failCount}条数据锁定失败`);
}
const newTableData = tableData.map((rowData) => {
const newItem = details.find((item) => item.recordId === rowData.id);
if (newItem) {
const lockStatus = !newItem.lockBy ? 0 : newItem.lockBy === userInfo?.accountNumber ? 1 : 2;
return {
...rowData,
lockStatus,
};
} else {
return rowData;
}
});
setTableData(newTableData);
setSelectedRowKeys([]);
setSelectedRows([]);
})
.catch((error) => {
message.error(error.msg || error.message || error.error || '操作失败');
});
},
confirmLoading: batchLockRequesting,
});
};
const unlockedNum = tableData.filter((item) => item.lockStatus === 0).length;
const lockedNum = tableData.filter((item) => item.lockStatus === 1).length;
const otherLockedNum = tableData.filter((item) => item.lockStatus === 2).length;
return (
<div className={st.batchWrap}>
<div className={st.uploadWrap}>
<div className={st.title}>数据批量上传</div>
<div className={st.line}></div>
<div className={st.draggerWrap}>
<Dragger
name='file'
fileList={fileList}
headers={{
Authorization: `Bearer ${access_token}`,
}}
action={`${apiBaseUrl}/udop/api/data/${tableName}/v1/loadSheetForReview`}
maxCount={1}
onChange={onUploadChange}
beforeUpload={onBeforeUpload}
disabled={uploadLoading}
onRemove={onRemove}
>
<img src={'/img/upload.svg'} className={st.uploadIcon} />
<div className={st.text}>点击或将文件拖拽到此区域上传</div>
</Dragger>
</div>
<div className={st.tips}>注:请上传Excel文件,文件大小不能超过10M,仅支持单次最多上传1000条数据。</div>
</div>
<div className={st.tableWrap}>
<div className={st.titleWrap}>
匹配结果列表
<div className={st.btnWrap}>
<Button onClick={backPage}>取消</Button>
<Button type='primary' onClick={confirmUpload} disabled={!lockedNum} loading={confirmLoading}>
确认导入
</Button>
</div>
</div>
<div className={st.summary}>
<div className={st.block}>
<Tooltip title='批量锁定'>
<Button
type='link'
icon={<LockOutlined />}
onClick={handleBatchLock}
disabled={selectedRows.length === 0}
loading={batchLockRequesting}
/>
</Tooltip>
</div>
<div className={st.block}>
已锁定
<span style={{ color: '#3095B4' }}>{lockedNum}</span>条
</div>
<div className={st.block}>
未锁定
<span style={{ color: '#3095B4' }}>{unlockedNum}</span>条
</div>
<div className={st.block}>
其他用户锁定
<span style={{ color: '#3095B4' }}>{otherLockedNum}</span>条
</div>
<div className={st.block}>
可导入
<span style={{ color: '#3095B4' }}>{lockedNum}</span>条
</div>
</div>
{fields?.length === 0 ? (
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
) : (
<Table
bordered
dataSource={tableData}
columns={columns}
pagination={false}
scroll={{ x: 'max-content', y: 'calc(100vh - 25.7rem)' }}
rowSelection={rowSelection}
rowKey='id'
loading={metaRequesting || batchCheckLockRequesting || batchLockRequest}
/>
)}
</div>
</div>
);
}
最新发布