feat(datasource): add changeState function

src/locales/en-US/pages.ts

@@ -74,10 +74,10 @@ export default {
   'pages.data.option': 'option',
   'pages.data.option.remove': 'delete',
   'pages.data.option.remove.tips': 'Confirm to delete?',
-  'pages.data.option.disable': 'disable',
-  'pages.data.option.disable.tips': 'Confirm to disable?',
-  'pages.data.option.enable': 'enable',
-  'pages.data.option.enable.tips': 'Confirm to enable?',
+  'pages.data.option.disabled': 'disable',
+  'pages.data.option.disabled.tips': 'Confirm to disable?',
+  'pages.data.option.enabled': 'enable',
+  'pages.data.option.enabled.tips': 'Confirm to enable?',
   'pages.data.option.add': 'Add',
   'pages.data.option.edit': 'Edit',
   'pages.data.option.preview': 'Preview',

src/locales/zh-CN/pages.ts

@@ -72,10 +72,10 @@ export default {
   'pages.data.option': '操作',
   'pages.data.option.remove': '删除',
   'pages.data.option.remove.tips': '确认删除?',
-  'pages.data.option.disable': '禁用',
-  'pages.data.option.disable.tips': '确认禁用？',
-  'pages.data.option.enable': '启用',
-  'pages.data.option.enable.tips': '确认启用？',
+  'pages.data.option.disabled': '禁用',
+  'pages.data.option.disabled.tips': '确认禁用？',
+  'pages.data.option.enabled': '启用',
+  'pages.data.option.enabled.tips': '确认启用？',
   'pages.data.option.add': '新增',
   'pages.data.option.edit': '编辑',
   'pages.data.option.preview': '预览',

src/pages/system/DataSource/index.tsx

@@ -14,6 +14,11 @@ import { map } from 'rxjs/operators';
 
 export const service = new Service('datasource/config');
 
+const stateIconMap = {
+  enabled: <CloseCircleOutlined />,
+  disabled: <PlayCircleOutlined />,
+};
+
 const DataSource = () => {
   const intl = useIntl();
   const actionRef = useRef<ActionType>();
@@ -41,7 +46,9 @@ const DataSource = () => {
     {
       title: 'ID',
       dataIndex: 'id',
-      width: 200,
+      width: 240,
+      sorter: true,
+      defaultSortOrder: 'ascend',
     },
     {
       title: '名称',
@@ -65,7 +72,6 @@ const DataSource = () => {
       valueType: 'option',
       align: 'center',
       width: 200,
-
       render: (text, record) => [
         <a key="editable" onClick={() => CurdModel.update(record)}>
           <Tooltip
@@ -77,17 +83,17 @@ const DataSource = () => {
             <EditOutlined />
           </Tooltip>
         </a>,
-        <a href={record.id} target="_blank" rel="noopener noreferrer" key="view">
+        <a key="status">
           <Popconfirm
             title={intl.formatMessage({
-              id: 'pages.data.option.disable.tips',
-              defaultMessage: '确认禁用？',
+              id: `pages.data.option.${
+                record.state.value === 'disabled' ? 'enabled' : 'disabled'
+              }.tips`,
+              defaultMessage: `确认${record.state.value === 'disabled' ? '启' : '禁'}用？`,
             })}
             onConfirm={async () => {
-              await service.update({
-                id: record.id,
-                // state: record.state ? 0 : 1,
-              });
+              const state = record.state.value === 'disabled' ? 'enable' : 'disable';
+              await service.changeStatus(record.id, state);
               message.success(
                 intl.formatMessage({
                   id: 'pages.data.option.success',
@@ -99,11 +105,13 @@ const DataSource = () => {
           >
             <Tooltip
               title={intl.formatMessage({
-                id: `pages.data.option.${record.state ? 'disable' : 'enable'}`,
-                defaultMessage: record.state ? '禁用' : '启用',
+                id: `pages.data.option.${
+                  record.state.value === 'enabled' ? 'disabled' : 'enabled'
+                }`,
+                defaultMessage: record.state.text,
               })}
             >
-              {record.state ? <CloseCircleOutlined /> : <PlayCircleOutlined />}
+              {stateIconMap[record.state.value]}
             </Tooltip>
           </Popconfirm>
         </a>,