|
@@ -0,0 +1,166 @@
|
|
|
+import { ActionType, ModalForm, PageContainer, ProFormCheckbox, ProFormSelect, ProFormText, ProTable } from "@ant-design/pro-components"
|
|
|
+import { Button, Drawer, message, Table } from "antd"
|
|
|
+import { columns, childrenColumns, columnsOpen } from "./tableConfig"
|
|
|
+import { useAjax } from "@/Hook/useAjax"
|
|
|
+import { useMemo, useRef, useState } from "react"
|
|
|
+import { useModel } from "@umijs/max"
|
|
|
+import { accountConfig, accountConfigEnabled, accountConfigList, delAccountConfig, manageList } from "@/services/distributor/appManage"
|
|
|
+import { distributorAccountAll } from "@/services/distributor/account"
|
|
|
+
|
|
|
+const Page: React.FC = () => {
|
|
|
+ let { state, getEnum } = useModel("global")
|
|
|
+ let [key, setKey] = useState<any>(1)
|
|
|
+ let [openTable, setOpenTalbe] = useState<any>(null)
|
|
|
+ let [openMoadl, setOpenModal] = useState<any>(false)
|
|
|
+ let getList = useAjax((params) => manageList(params), { type: 'table' })
|
|
|
+ let AccountConfigList = useAjax((params) => accountConfigList(params), { type: 'noPage' })
|
|
|
+ let DelAccountConfig = useAjax((id) => delAccountConfig(id))
|
|
|
+ let add = useAjax((params) => accountConfig(params))
|
|
|
+ let AccountConfigEnabled = useAjax((params) => accountConfigEnabled(params))
|
|
|
+ let allList = useAjax(() => distributorAccountAll())
|
|
|
+ const actionRef = useRef<ActionType>();
|
|
|
+
|
|
|
+
|
|
|
+ let del = (id: any) => {
|
|
|
+ DelAccountConfig.run(id).then(res => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ message.success("删除成功")
|
|
|
+ actionRef.current?.reload()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ let edit = (configId: any, enabled: boolean) => {
|
|
|
+ AccountConfigEnabled.run({ configId, enabled }).then(res => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ message.success("操作成功")
|
|
|
+ actionRef.current?.reload()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ return <PageContainer
|
|
|
+ tabList={getEnum("APP_TYPE", "arr")}
|
|
|
+ tabProps={{
|
|
|
+ type: 'card',
|
|
|
+ hideAdd: true,
|
|
|
+ onChange: (e) => setKey(e),
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <ProTable<any, any>
|
|
|
+ headerTitle={"抖音小程序列表"}
|
|
|
+ rowKey={(r) => r.id}
|
|
|
+ search={{
|
|
|
+ labelWidth: 120,
|
|
|
+ }}
|
|
|
+ scroll={{ x: "auto" }}
|
|
|
+ params={{
|
|
|
+ appType: key
|
|
|
+ }}
|
|
|
+ request={async (params) => {
|
|
|
+ if (params.appType) {
|
|
|
+ return await getList.run(params)
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ columns={columns({ appType: key, setOpenTalbe })}
|
|
|
+ expandable={{
|
|
|
+ rowExpandable: (record) => record?.appCarrierList?.length > 0,
|
|
|
+ expandRowByClick: true,
|
|
|
+ expandedRowRender: (record) => {
|
|
|
+ return <Table
|
|
|
+ columns={childrenColumns}
|
|
|
+ dataSource={record.appCarrierList}
|
|
|
+ rowKey={(r) => r.id}
|
|
|
+ pagination={false}
|
|
|
+ size='small'
|
|
|
+ bordered
|
|
|
+ />
|
|
|
+ },
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ <Drawer
|
|
|
+ open={!!openTable}
|
|
|
+ placement="right"
|
|
|
+ onClose={() => { setOpenTalbe(null) }}
|
|
|
+ footer={null}
|
|
|
+ width={'85%'}
|
|
|
+ destroyOnClose={true}
|
|
|
+ styles={{ body: { padding: 0 } }}
|
|
|
+ closeIcon={false}
|
|
|
+ title={<div style={{ fontSize: 20 }}>{openTable?.appName}</div>}
|
|
|
+ extra={<Button type="primary" onClick={() => {
|
|
|
+ allList.run().then(res => {
|
|
|
+ setOpenModal(true)
|
|
|
+ })
|
|
|
+ }}>批量新增账号</Button>}
|
|
|
+ >
|
|
|
+ <ProTable
|
|
|
+ actionRef={actionRef}
|
|
|
+ search={false}
|
|
|
+ toolBarRender={false}
|
|
|
+ columns={columnsOpen({ del, edit })}
|
|
|
+ params={{
|
|
|
+ appType: key,
|
|
|
+ appId: openTable?.id
|
|
|
+ }}
|
|
|
+ request={async (params) => {
|
|
|
+ if (params.appType && params.appId) {
|
|
|
+ return await AccountConfigList.run(params)
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ <ModalForm
|
|
|
+ title={"批量新增账号"}
|
|
|
+ width="500px"
|
|
|
+ open={openMoadl}
|
|
|
+ onOpenChange={(b) => {
|
|
|
+ if (!b) {
|
|
|
+ setOpenModal(false)
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ onFinish={async (value) => {
|
|
|
+ console.log(value)
|
|
|
+ add.run({ ...value, appId: openTable?.id, appType: key }).then(res => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ message.success("新增成功!")
|
|
|
+ actionRef.current?.reload()
|
|
|
+ setOpenModal(false)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }}
|
|
|
+ colProps={{ span: 24 }}
|
|
|
+ layout="horizontal"
|
|
|
+ >
|
|
|
+ <ProFormCheckbox.Group
|
|
|
+ rules={[
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '此项为必填项',
|
|
|
+ },
|
|
|
+ ]}
|
|
|
+ width="md"
|
|
|
+ name="advertisingChannels"
|
|
|
+ label="投放渠道"
|
|
|
+ options={getEnum("ADVERTISING_CHANNEL", "arr")}
|
|
|
+ />
|
|
|
+ <ProFormSelect
|
|
|
+ rules={[
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '此项为必填项',
|
|
|
+ },
|
|
|
+ ]}
|
|
|
+ fieldProps={{
|
|
|
+ showSearch: true,
|
|
|
+ placeholder: '批量选择账号',
|
|
|
+ mode: "multiple"
|
|
|
+ }}
|
|
|
+ width="md"
|
|
|
+ name="distributorAccountIds"
|
|
|
+ label="投放账号"
|
|
|
+ options={allList?.data?.data?.map((item: { id: any; nickname: any }) => ({ value: item.id, label: item.nickname }))}
|
|
|
+ />
|
|
|
+ </ModalForm>
|
|
|
+ </Drawer>
|
|
|
+ </PageContainer>
|
|
|
+
|
|
|
+}
|
|
|
+export default Page
|