添加工作类型设置(内部)，并对接接口；

王强
1 parent ce698ce0
Showing 4 changed files with 230 additions and 116 deletions
config/routers/office.ts
src/pages/office/WorkTypeSetting/api.ts
src/pages/office/WorkTypeSetting/index.tsx
src/pages/office/WorkTypeSetting/interface.d.ts
 /*
  * @Date: 2021-08-10 09:51:37
  * @LastEditors: wangqiang@feewee.cn
- * @LastEditTime: 2021-10-12 14:36:13
+ * @LastEditTime: 2023-01-30 10:41:51
  */
 export default [
   /** 会议办公 **/
   {
-    path: '/office/workStandardSetting', // 工作项标准配置
-    component: './office/Work/WorkStandardSetting'
+    path: "/office/workStandardSetting", // 工作项标准配置
+    component: "./office/Work/WorkStandardSetting",
   },
   {
-    path: '/office/workShopStandardSetting', // 门店工作项匹配标准设置
-    component: './office/Work/WorkShopStandardSetting'
+    path: "/office/workShopStandardSetting", // 门店工作项匹配标准设置
+    component: "./office/Work/WorkShopStandardSetting",
   },
   {
-    path: '/office/punishmentMattersSettings', // 处罚事项设置
-    component: './office/PunishmentMattersSettings'
+    path: "/office/punishmentMattersSettings", // 处罚事项设置
+    component: "./office/PunishmentMattersSettings",
   },
   {
-    path: '/office/rewardAmountSetting', // 奖励额度设置
-    component: './office/RewardAmountSetting'
+    path: "/office/rewardAmountSetting", // 奖励额度设置
+    component: "./office/RewardAmountSetting",
   },
   {
-    path: '/office/workTypeSetting', // 工作类型设置
-    component: './office/WorkTypeSetting'
+    path: "/office/workTypeSetting", // 工作类型设置
+    component: "./office/WorkTypeSetting",
+  },
+  {
+    path: "/office/workTypeSetting_private", // 工作类型设置(内部)
+    component: "./office/WorkTypeSetting",
   },
 ];
 \ No newline at end of file
 /*
  * @Date: 2021-03-23 17:48:39
  * @LastEditors: wangqiang@feewee.cn
- * @LastEditTime: 2021-10-08 10:06:58
+ * @LastEditTime: 2023-01-30 10:47:34
  */
-import request from '@/utils/request';
-import { OFFICE } from '@/utils/host';
-import { http } from '@/typing/http';
+import request from "@/utils/request";
+import { OFFICE } from "@/utils/host";
+import { http } from "@/typing/http";
  
 /**
  * @description: 工作类型分页
  * @param {WorkTypeSetting.QueryParams} params
  * @return {http.PromisePageResp<WorkTypeSetting.WorkTypeItemVO>}
  */
-export function getWorkTypeListApi(params: WorkTypeSetting.QueryParams): http.PromisePageResp<WorkTypeSetting.WorkTypeItemVO> {
-  return request.get(`${OFFICE}/erp/work/config//type/page`, { params });
+export function getWorkTypeListApi(
+  params: WorkTypeSetting.QueryParams
+): http.PromisePageResp<WorkTypeSetting.WorkTypeItemVO> {
+  return request.get(`${OFFICE}/erp/work/config/type/page`, { params });
 }
  
 /**
@@ -21,7 +23,9 @@ export function getWorkTypeListApi(params: WorkTypeSetting.QueryParams): http.Pr
  * @param {WorkTypeSetting.WorkTypeItemVO} params
  * @return {http.PromiseResp<string>}
  */
-export function saveWorkTypeApi(params: WorkTypeSetting.WorkTypeItemVO): http.PromiseResp<string> {
+export function saveWorkTypeApi(
+  params: WorkTypeSetting.WorkTypeItemVO
+): http.PromiseResp<string> {
   return request.post(`${OFFICE}/erp/work/config//type/save`, params);
 }
  
@@ -31,5 +35,7 @@ export function saveWorkTypeApi(params: WorkTypeSetting.WorkTypeItemVO): http.Pr
  * @return {http.PromiseResp<string>}
  */
 export function deleteWorkTypeApi(id: number): http.PromiseResp<string> {
-  return request.get(`${OFFICE}/erp/work/config//type/remove`, { params: { id } });
-}
 \ No newline at end of file
+  return request.get(`${OFFICE}/erp/work/config//type/remove`, {
+    params: { id },
+  });
+}
 /*
  * @Date: 2021-03-23 17:47:45
  * @LastEditors: wangqiang@feewee.cn
- * @LastEditTime: 2021-10-08 10:17:36
+ * @LastEditTime: 2023-01-30 11:19:10
  */
-import React, { useEffect, useState } from 'react';
-import { Modal, List, Button, Row, Col, Input, Popconfirm, message, Card, ConfigProvider } from 'antd';
-import { PlusOutlined, CloseOutlined, DatabaseOutlined, PlusCircleOutlined, EditOutlined, CheckCircleOutlined, CloseCircleOutlined, DeleteOutlined } from '@ant-design/icons';
-import { getWorkTypeListApi, saveWorkTypeApi, deleteWorkTypeApi } from './api';
-import { debounce } from 'lodash';
-import usePagination from '@/hooks/usePagination';
-import { PageHeaderWrapper } from '@ant-design/pro-layout';
-import zhCN from 'antd/lib/locale-provider/zh_CN';
+import React, { useEffect, useState } from "react";
+import {
+  Modal,
+  Button,
+  Row,
+  Input,
+  Popconfirm,
+  message,
+  Card,
+  ConfigProvider,
+  Table,
+  Divider,
+  Form,
+  Spin,
+} from "antd";
+import { PlusOutlined } from "@ant-design/icons";
+import { getWorkTypeListApi, saveWorkTypeApi, deleteWorkTypeApi } from "./api";
+import { debounce } from "lodash";
+import usePagination from "@/hooks/usePagination";
+import { PageHeaderWrapper } from "@ant-design/pro-layout";
+import zhCN from "antd/lib/locale-provider/zh_CN";
+import { history } from "umi";
+import FeeweeFilterOption from "@/pages/notice/components/FeeweeFilterOption";
  
 export default function WorkTypeSettings() {
-  const examTypePagination = usePagination(getWorkTypeListApi);
-  const { list, loading, setLoading, paginationConfig, setParams: setExamTypeParams } = examTypePagination;
-  const [isAdd, setIsAdd] = useState(false);
-  const [addInputValue, setAddInputValue] = useState<string>();
-  const [edit, setEdit] = useState<{ id?: number, value?: string }>();
+  const systemDefine = history.location.pathname.includes(
+    "workTypeSetting_private"
+  );
+  const workTypePagination = usePagination(getWorkTypeListApi, {
+    systemDefine,
+  });
+  const {
+    list,
+    loading,
+    setLoading,
+    paginationConfig,
+    setParams: setExamTypeParams,
+  } = workTypePagination;
+  const [form] = Form.useForm();
+  const [confirmLoading, setConfirmLoading] = useState(false);
+  const [current, setCurrent] = useState<WorkTypeSetting.WorkTypeItemVO>();
+  const [open, setOpen] = useState(false);
  
-  const editItem = (): any => {
-    if (!edit?.value || (edit?.value && !edit?.value.trim())) return message.error('工作类型不能为空！');
-    saveWorkTypeApi({ id: edit?.id, name: edit?.value }).then(res => {
-      message.success('操作成功');
-      setLoading(true);
-      setEdit(undefined);
-    }).catch(error => {
-      message.error(error.message);
-    });
-  }
+  useEffect(() => {
+    if (open) {
+      current &&
+        form.setFieldsValue({
+          ...current,
+        });
+    } else {
+      form.resetFields();
+    }
+  }, [open, current]);
  
   const delItem = (id: number) => {
-    deleteWorkTypeApi(id).then(res => {
-      message.success('删除成功');
-      setLoading(true);
-    }).catch(error => message.error(error.message));
-  }
+    deleteWorkTypeApi(id)
+      .then((res) => {
+        message.success("删除成功");
+        setLoading(true);
+      })
+      .catch((error) => message.error(error.message));
+  };
  
-  const addOption = (): any => {
-    if (!addInputValue || (addInputValue && !addInputValue.trim())) return message.error('工作类型不能为空！');
-    saveWorkTypeApi({ name: addInputValue }).then(res => {
-      message.success('操作成功');
-      setAddInputValue(undefined);
-      setLoading(true);
-    }).catch(error => {
-      message.error(error.message);
-    });
-  }
+  const onSearch = debounce(
+    (name: string) => setExamTypeParams({ name, current: 1 }, true),
+    500
+  );
  
-  const renderItem = (item: ExamSetting.TypeItem) => <List.Item key={item.id}>
-    <DatabaseOutlined style={{ marginRight: 10 }} />
-    <Input
-      readOnly={edit?.id !== item.id}
-      bordered={edit?.id === item.id}
-      allowClear
-      value={edit && edit.id === item.id ? edit.value : item.name}
-      onChange={e => setEdit({ ...edit, value: e.target.value })}
-      onClick={() => setEdit({ id: item.id, value: item.name })}
-      suffix={edit && edit.id === item.id ?
-        <Popconfirm title={`确定修改工作类型？`} onConfirm={() => editItem()}>
-          <Button type='link' icon={<CheckCircleOutlined />} />
-        </Popconfirm> :
-        <>
-          <Button type='link' icon={<EditOutlined />} onClick={() => setEdit({ id: item.id, value: item.name })} />
-          <Popconfirm title={`确定删除【${item.name}】工作类型？`} onConfirm={() => delItem(item.id!)}>
-            <Button type='link' icon={<DeleteOutlined />} danger />
-          </Popconfirm>
-        </>}
-    />
-  </List.Item>
-
-  const onSearch = debounce((name: string) => setExamTypeParams({ name, current: 1 }, true), 500);
+  const onOk = (val: any) => {
+    const params: WorkTypeSetting.WorkTypeItemVO = {
+      id: current?.id,
+      name: val.name,
+      key: val?.key,
+      pageLink: val.pageLink,
+      systemDefine,
+    };
+    setConfirmLoading(true);
+    saveWorkTypeApi(params)
+      .then((res) => {
+        setConfirmLoading(false);
+        message.success(res.result);
+        setOpen(false);
+        setLoading(true);
+      })
+      .catch((error) => {
+        setConfirmLoading(false);
+        message.error(error.message || "保存工作类型失败");
+      });
+  };
  
   return (
-    <PageHeaderWrapper title="工作类型设置">
+    <PageHeaderWrapper title={`工作类型设置${systemDefine ? "(内部)" : ""}`}>
       <ConfigProvider locale={zhCN}>
         <Card bordered={false}>
           <Row justify="space-between" style={{ marginBottom: 20 }}>
-            <Input placeholder="输入工作项大类查询" allowClear style={{ width: 260 }} onChange={e => onSearch(e.target.value)} />
-            <Button type='link' icon={<CloseCircleOutlined />} disabled={!edit} onClick={() => setEdit(undefined)}>取消编辑</Button>
+            <FeeweeFilterOption title="工作类型">
+              <Input
+                placeholder="输入工作类型查询"
+                allowClear
+                style={{ minWidth: 260 }}
+                onChange={(e) => onSearch(e.target.value)}
+              />
+            </FeeweeFilterOption>
+            <Button
+              type="primary"
+              icon={<PlusOutlined />}
+              onClick={() => {
+                setCurrent(undefined);
+                setOpen(true);
+              }}
+            >
+              添加
+            </Button>
           </Row>
-          <List
-            bordered
-            loading={loading}
-            pagination={{ ...paginationConfig, size: 'small' }}
+          <Table
             dataSource={list}
+            pagination={paginationConfig}
+            loading={loading}
             rowKey="id"
-            renderItem={item => renderItem(item)}
-          />
-          <Row justify='space-between' style={{ height: 42, marginTop: 20 }}>
-            <Col span={6} style={{ justifyContent: 'center', alignItems: 'center', display: 'flex' }}>
-              <Button type='link' icon={isAdd ? <CloseOutlined /> : <PlusOutlined />} onClick={() => setIsAdd(!isAdd)} style={{ padding: '4px 0' }}>{isAdd ? '取消添加类型' : '添加工作类型'}</Button>
-            </Col>
-            <Col span={18}>
-              {isAdd && <Input
-                style={{ width: '100%' }}
-                placeholder='请输入工作类型'
-                allowClear
-                value={addInputValue}
-                onChange={e => setAddInputValue(e.target.value)}
-                suffix={
-                  <Popconfirm title={`确定添加工作类型？`} onConfirm={() => addOption()}>
-                    <Button type='link' icon={<PlusCircleOutlined />} disabled={!addInputValue} />
-                  </Popconfirm>
-                } />
-              }
-            </Col>
-          </Row>
+          >
+            <Table.Column title="工作类型" dataIndex="name" align="left" />
+            {systemDefine ? (
+              <>
+                <Table.Column
+                  title="业务详情key"
+                  dataIndex="key"
+                  align="left"
+                  render={(key: string) => key || "-"}
+                />
+                <Table.Column
+                  title="业务详情APP路径"
+                  dataIndex="pageLink"
+                  align="left"
+                  render={(pageLink: string) => pageLink || "-"}
+                />
+              </>
+            ) : null}
+            <Table.Column
+              title="操作"
+              align="left"
+              render={(record: WorkTypeSetting.WorkTypeItemVO) => (
+                <>
+                  <a
+                    onClick={() => {
+                      setCurrent(record);
+                      setOpen(true);
+                    }}
+                  >
+                    编辑
+                  </a>
+                  {/* <Divider type="vertical" />
+                  <Popconfirm
+                    title={`确定删除【${record.name}】工作类型？`}
+                    onConfirm={() => delItem(record.id!)}
+                  >
+                    <a style={{ color: "#F0492C" }}>删除</a>
+                  </Popconfirm> */}
+                </>
+              )}
+            />
+          </Table>
+          <Modal
+            title={`${current ? "编辑" : "添加"}工作类型`}
+            open={open}
+            maskClosable={false}
+            onOk={form.submit}
+            onCancel={() => setOpen(false)}
+            afterClose={() => {
+              setCurrent(undefined);
+            }}
+            confirmLoading={confirmLoading}
+          >
+            <Spin spinning={confirmLoading}>
+              <Form form={form} onFinish={onOk}>
+                <Form.Item
+                  name="name"
+                  label="工作类型"
+                  rules={[{ required: true, message: "请输入工作类型" }]}
+                >
+                  <Input placeholder="请输入工作类型" allowClear />
+                </Form.Item>
+                {systemDefine ? (
+                  <>
+                    <Form.Item
+                      name="key"
+                      label="业务详情key"
+                      rules={[{ required: true, message: "请输入业务详情key" }]}
+                    >
+                      <Input placeholder="请输入业务详情key" allowClear />
+                    </Form.Item>
+                    <Form.Item
+                      name="pageLink"
+                      label="业务详情APP路径"
+                      rules={[
+                        { required: true, message: "请输入业务详情APP路径" },
+                      ]}
+                    >
+                      <Input placeholder="请输入业务详情APP路径" allowClear />
+                    </Form.Item>
+                  </>
+                ) : null}
+              </Form>
+            </Spin>
+          </Modal>
         </Card>
       </ConfigProvider>
     </PageHeaderWrapper>
-  )
-}
 \ No newline at end of file
+  );
+}
 /*
  * @Date: 2021-08-11 15:51:56
  * @LastEditors: wangqiang@feewee.cn
- * @LastEditTime: 2021-10-08 10:07:01
+ * @LastEditTime: 2023-01-30 11:07:33
  */
 declare namespace WorkTypeSetting {
   interface QueryParams {
-    name?: string // 工作项名称
+    name?: string; // 工作项名称
+    systemDefine?: boolean; // 内部设置：true，外部设置：false
   }
  
   interface WorkTypeItemVO {
-    id?: number //工作类型id
-    name?: string //工作类型名称
+    id?: number; //工作类型id
+    name?: string; //工作类型名称
+    key?: string; // 业务详情key
+    pageLink?: string; // 业务详情路径
+    systemDefine?: boolean; // 内部设置：true，外部设置：false
   }
 }