fix

src/pages/distribution/miniprogram/mimiModule/formConfig.tsx

@@ -0,0 +1,68 @@
+import { ProFormColumnsType } from '@ant-design/pro-components';
+function formConfig(
+  enumList?: { [key: string]: any },
+): ProFormColumnsType<{
+  name: string;
+  state: string;
+}>[] {
+  return [
+    {
+      title: '组件名称',
+      dataIndex: 'componentName',
+      formItemProps: {
+        style: { marginBottom: 10 },
+        rules: [
+          {
+            required: true,
+            message: '此项为必填项',
+          },
+        ],
+      },
+    },
+    {
+      title: '组件使用平台',
+      dataIndex: 'enabledAppTypes',
+      valueType: 'checkbox',
+      formItemProps: {
+        style: { marginBottom: 10 },
+        rules: [
+          {
+            required: true,
+            message: '此项为必填项',
+          },
+        ],
+      },
+      valueEnum: () => {
+        let arr = enumList?.APP_TYPE?.values;
+        return arr
+          ? new Map([...arr]?.map(({ value, description }: any) => [value, description]))
+          : {};
+      }
+    },
+    {
+      title: '是否可用',
+      dataIndex: 'enabled',
+      valueType: 'radio',
+      formItemProps: {
+        style: { marginBottom: 10 },
+        initialValue:true,
+        rules: [
+          {
+            required: true,
+            message: '此项为必填项',
+          },
+        ],
+      },
+      valueEnum: () => {
+        let arr = [{ value: true, text: "可用" }, { value: false, text: "禁用" }]
+        return new Map(arr.map(({ value, text }: any) => [value, text]))
+      }
+    },
+    {
+      title: '备注',
+      dataIndex: 'remark',
+    },
+  ];
+}
+
+export default formConfig;

src/pages/distribution/miniprogram/mimiModule/index.tsx

@@ -1,4 +1,186 @@
-function Page() {
-  return '小程序组件配置';
-}
+import { useAjax } from '@/Hook/useAjax';
+import { apiDistributorInfoList } from '@/services/distribution/info';
+import {
+  apiWxAppInfo,
+  apiWxAppInfoPageList,
+  apiWxAppInfoRemove,
+  apiWxAppInfoUpdate,
+  apiWxAppInfoUpdateEnabled,
+  apiWxAppInfoWxAppConfigAddOrEdit,
+  wechatMchAll,
+} from '@/services/distribution/weChatInfo';
+import { PlusCircleOutlined } from '@ant-design/icons';
+import {
+  ActionType,
+  BetaSchemaForm,
+  PageContainer,
+  ProFormInstance,
+  ProTable,
+} from '@ant-design/pro-components';
+import { useModel } from '@umijs/max';
+import { Button, message } from 'antd';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import formConfig from './formConfig';
+import { columns } from './tableConfig';
+import { apiMiniappComponentInfoDel, apiMiniappComponentInfoPageList, apiMiniappComponentInfoSave, apiMiniappComponentInfoUpdate, apiMiniappComponentInfoUpdateEnabled } from '@/services/distribution/miniprogram';
+
+type DataItem = {
+  name: string;
+  state: string;
+};
+const Page: React.FC = () => {
+  const formRef = useRef<ProFormInstance>();
+  const assignRormRef = useRef<ProFormInstance>();
+  const actionRef = useRef<ActionType>();
+  let { state } = useModel('global');
+  let [open, setOpen] = useState<any>(null); //新增
+  let [assignOpen, setAssignOpen] = useState(false);
+  let [editValues, setEditValues] = useState<any>({});
+  // ======API===============
+  let MiniappComponentInfoPageList = useAjax((params) => apiMiniappComponentInfoPageList(params), { type: 'table' }); //列表
+  let MiniappComponentInfoUpdate = useAjax((params) => apiMiniappComponentInfoUpdate(params)); //更新
+  let MiniappComponentInfoSave = useAjax((params) => apiMiniappComponentInfoSave(params)); //新增
+  let MiniappComponentInfoDel = useAjax((params) => apiMiniappComponentInfoDel(params)); //删除
+  let MiniappComponentInfoUpdateEnabled = useAjax((params) => apiMiniappComponentInfoUpdateEnabled(params)); //启停
+
+  useEffect(() => {
+  }, []);
+  // 删除
+  const del = (id: any) => {
+    MiniappComponentInfoDel.run(id).then((res) => {
+      if (res.code === 200) {
+        actionRef?.current?.reload();
+        message.success('删除成功');
+      }
+    });
+  };
+  // 状态更新
+  const stateUpdata = (id: any, ck: boolean) => {
+    MiniappComponentInfoUpdateEnabled.run({ id, enabled: ck }).then((res) => {
+      if (res.data) {
+        actionRef?.current?.reload();
+        message.success(ck ? '启动成功' : '停用成功');
+      }
+    });
+  };
+  // 新增 or 编辑
+  const submit = async (values: any) => {
+    let api = editValues?.id ? MiniappComponentInfoUpdate : MiniappComponentInfoSave;
+    if (editValues?.id) {
+      values.id = editValues?.id;
+    }
+    api.run(values).then((res) => {
+      if (res.code === 200) {
+        actionRef?.current?.reload();
+        message.success('操作成功!');
+        closeForm(false);
+      }
+    });
+    console.log(values);
+  };
+  // 关闭表单弹窗和重置表单内容
+  const closeForm = (b: boolean, values?: any) => {
+    if (!b) {
+      setEditValues({});
+      formRef?.current?.resetFields?.();
+      setOpen(b);
+    } else {
+      setEditValues(values);
+      setTimeout(() => {
+        formRef?.current?.setFieldsValue({ ...values, mchId: values?.mchInfo?.id });
+      }, 100);
+      setOpen(b);
+    }
+  };
+  return (
+    <PageContainer>
+      <ProTable<any, any>
+        headerTitle={'小程序组件列表'}
+        actionRef={actionRef}
+        rowKey={(r) => r.id}
+        search={{
+          labelWidth: 120,
+        }}
+        scroll={{ x: 'auto' }}
+        request={async (params) => {
+          return await MiniappComponentInfoPageList.run(params);
+        }}
+        toolBarRender={() => {
+          return [
+            <Button
+              type="primary"
+              onClick={() => {
+                setOpen(true);
+              }}
+            >
+              <PlusCircleOutlined />
+              新增组件
+            </Button>,
+          ];
+        }}
+        columns={columns(closeForm, del, stateUpdata,state?.enumList)}
+        // bordered
+      />
+      {/* 新增修改 */}
+      <BetaSchemaForm<DataItem>
+        title={!editValues?.id ? '新增组件' : '编辑组件'}
+        formRef={formRef}
+        width={600}
+        open={open}
+        onOpenChange={(b) => {
+          !b && closeForm(b);
+        }}
+        layoutType={'ModalForm'}
+        labelCol={{ span: 6 }}
+        wrapperCol={{ span: 14 }}
+        grid={true}
+        rowProps={{ gutter: [10, 10] }}
+        layout="horizontal"
+        onFinish={submit}
+        columns={formConfig(state?.enumList)}
+        loading={MiniappComponentInfoSave?.loading || MiniappComponentInfoUpdate?.loading}
+      />
+      {/*指派  */}
+      {/* <BetaSchemaForm<DataItem>
+        title={editValues?.appName + '小程序指派'}
+        formRef={assignRormRef}
+        width={400}
+        open={assignOpen}
+        onOpenChange={(b) => {
+          if (!b) {
+            setEditValues({});
+            setAssignOpen(false);
+          }
+        }}
+        layoutType={'ModalForm'}
+        labelCol={{ span: 6 }}
+        wrapperCol={{ span: 14 }}
+        grid={true}
+        rowProps={{ gutter: [20, 20] }}
+        layout="horizontal"
+        onFinish={assign}
+        columns={[
+          {
+            title: '分销商',
+            dataIndex: 'distributorId',
+            formItemProps: {
+              style: { marginTop: 20 },
+              rules: [
+                {
+                  required: true,
+                  message: '此项为必填项',
+                },
+              ],
+            },
+            valueEnum: () => {
+              let arr = DistributorInfoList?.data?.data;
+              return new Map(arr?.map(({ id, companyName }: any) => [id, companyName]));
+            },
+          },
+        ]}
+        loading={WxAppInfoWxAppConfigAddOrEdit?.loading}
+      /> */}
+    </PageContainer>
+  );
+};
 export default Page;

src/pages/distribution/miniprogram/mimiModule/tableConfig.tsx

@@ -0,0 +1,108 @@
+import { ProColumns } from '@ant-design/pro-components';
+import { Button, Popconfirm, Space, Switch, Tooltip } from 'antd';
+
+export const columns = (
+  edit: (b: boolean, v: any) => void,
+  del: (id: any) => void,
+  stateUpdata: (id: any, ck: boolean) => void,
+  enumList?: { [key: string]: any },
+): ProColumns<any>[] => {
+  return [
+    {
+      title: 'ID',
+      dataIndex: 'id',
+      key: 'id',
+      align: 'center',
+      width: 70,
+      ellipsis: true,
+      hideInSearch: true,
+    },
+    {
+      title: '组件名称',
+      dataIndex: 'componentName',
+      align: 'center',
+      width: 70,
+      ellipsis: true,
+    },
+    {
+      title: '备注',
+      dataIndex: 'remark',
+      align: 'center',
+      width: 70,
+      ellipsis: true,
+      hideInSearch: true
+    },
+    {
+      title: '组件使用平台',
+      dataIndex: 'enabledAppTypes',
+      valueType:'select',
+      align: 'center',
+      width: 80,
+      ellipsis: true,
+      valueEnum: () => {
+        let arr = enumList?.APP_TYPE?.values;
+        return arr
+          ? new Map([...arr]?.map(({ value, description }: any) => [value, description]))
+          : {};
+      }
+    },
+    {
+      title: '状态',
+      dataIndex: 'enabled',
+      key: 'enabled',
+      width: 80,
+      align: 'center',
+      ellipsis: true,
+      hideInSearch: true,
+      render: (a: any, b: any) => {
+        return (
+          <Switch
+            checkedChildren="正常"
+            unCheckedChildren="停用"
+            checked={b?.enabled}
+            onChange={(ck) => {
+              stateUpdata(b.id, ck);
+            }}
+          />
+        );
+      },
+    },
+    {
+      title: '操作',
+      dataIndex: 'cz',
+      key: 'cz',
+      width: 160,
+      align: 'center',
+      hideInSearch: true,
+      render: (a: any, b: any) => {
+        return (
+          <Space size={[0, 0]}>
+            <Button
+              onClick={() => {
+                edit(true, b);
+              }}
+              size="small"
+              type="link"
+            >
+              编辑
+            </Button>
+            <Popconfirm
+              title={
+                <div>
+                  确定要删除<span style={{ color: 'red' }}>{b.componentName}</span>组件?
+                </div>
+              }
+              onConfirm={() => {
+                del(b.id);
+              }}
+            >
+              <Button size="small" danger type="link">
+                删除
+              </Button>
+            </Popconfirm>
+          </Space>
+        );
+      },
+    },
+  ];
+};

src/services/distribution/miniprogram/index.tsx

@@ -70,7 +70,7 @@ export async function apiMiniappComponentInfoGetInfo(id: any) {
 }
 
 /**
- * 小程序删除
+ * 小程序组件删除
  * @param id
  */
 export async function apiMiniappComponentInfoDel(id: any) {