Merge branch 'v2' of http://10.0.0.22:3000/lingxi/lingxi-business-paltform into v2

src/components/UploadImage/index.tsx

@@ -24,6 +24,8 @@ interface UploadImagePorpsType {
   fileList?: any,
   /** 最大图片数量 */
   filelistLength?: number,
+  btnSize?: number,
+  btnText?: string,
 }
 
 const UploadImage: React.FC<UploadImagePorpsType> = forwardRef((props, ref) => {
@@ -41,6 +43,8 @@ const UploadImage: React.FC<UploadImagePorpsType> = forwardRef((props, ref) => {
     beforeUpload,
     fileList = [],
     filelistLength = 3,
+    btnSize,
+    btnText = '上传图片',
     ...restProps
   } = props
 
@@ -99,14 +103,14 @@ const UploadImage: React.FC<UploadImagePorpsType> = forwardRef((props, ref) => {
   const uploadButton = (
     <Fragment>
       {loading ? <LoadingOutlined /> : <PlusOutlined />}
-      <p>上传图片</p>
+      <p>{btnText}</p>
     </Fragment>
   )
 
   const uploadListButton = (
     <div>
       {loading ? <LoadingOutlined /> : <PlusOutlined />}
-      <div className="ant-upload-text">上传图片</div>
+      <div className="ant-upload-text">{btnText}</div>
     </div>
   )
 
@@ -123,10 +127,10 @@ const UploadImage: React.FC<UploadImagePorpsType> = forwardRef((props, ref) => {
       case "picture-card":
         return !showUploadList ?
           // 单个待删除
-          <div className={styles.upload_image_wrap} style={large ? { height: '120px' } : {}}>
-            <div className={cx(styles.upload_wrap, large ? styles.large : '')}>
+          <div className={styles.upload_image_wrap} style={btnSize ? { width: btnSize, height: btnSize } : large ? { height: '120px' } : {}}>
+            <div className={cx(styles.upload_wrap, large ? styles.large : '')} style={btnSize ? { width: btnSize, height: btnSize } : {}}>
               <Upload {...uploadProps}>
-                {<div className={cx(styles.upload_btn, !imgUrl ? styles.isAdd : "", large ? styles.large : '')}>
+                {<div className={cx(styles.upload_btn, !imgUrl ? styles.isAdd : "", large ? styles.large : '')} style={btnSize ? { width: btnSize, height: btnSize } : {}}>
                   {
                     imgUrl ? <img src={imgUrl} /> : uploadButton
                   }

src/pages/editor/components/drawer/commodityDrawer/effect.ts

@@ -6,6 +6,8 @@ export const searchBrandOptionEffect = (
   shopId: any,
   context: any,
   fieldName: string,
+  memberId,
+  memberRoleId,
 ) => {
   context.getFieldState(fieldName, state => {
     PublicApi.getSearchCommodityTemplateGetBrandList({
@@ -13,6 +15,8 @@ export const searchBrandOptionEffect = (
       pageSize: '100',
       name: state.props['x-component-props'].searchValue,
       shopId,
+      memberId,
+      memberRoleId,
     }).then(res => {
       context.setFieldState(fieldName, state => {
         state.props['x-component-props'].dataoption = res.data?.data?.map(item => {
@@ -29,10 +33,14 @@ export const searchCustomerCategoryOptionEffect = (
   shopId: any,
   context: any,
   fieldName: string,
+  memberId,
+  memberRoleId,
 ) => {
   context.getFieldState(fieldName, state => {
     PublicApi.getSearchCommodityTemplateGetFirstCategoryListByMemberId({
       shopId,
+      memberId,
+      memberRoleId,
     }).then(res => {
       // PublicApi.getProductPlatformGetCategoryTree().then(res => {
       context.setFieldState(fieldName, state => {

src/pages/editor/components/drawer/commodityDrawer/index.tsx

@@ -14,7 +14,7 @@ import Submit from '@/components/NiceForm/components/Submit'
 import StatusTag from '@/components/StatusTag'
 import CustomInputSearch from '@/components/NiceForm/components/CustomInputSearch'
 import CustomCategorySearch from '@/components/NiceForm/components/CustomCategorySearch'
-
+import { getAuth } from '@/utils/auth'
 import ActivityImage from '@/assets/couponIcons/ActivityImage.svg';
 
 import styles from './index.less';
@@ -46,6 +46,7 @@ const CommodityDrawer: React.FC<CommodityDrawerProps> = (props: CommodityDrawerP
   const [selectedRows, setSelectedRows] = useState<any>([]);
   const [expandedRowKeys, setExpandedRowKeys] = useState<any>([]);
   const ref = useRef<any>({});
+  const { memberId, memberRoleId } = getAuth() || {}
 
   useEffect(() => {
     setSelectedRowKeys(selectId ? [selectId] : []);
@@ -210,10 +211,10 @@ const CommodityDrawer: React.FC<CommodityDrawerProps> = (props: CommodityDrawerP
                 FORM_FILTER_PATH,
               );
               FormEffectHooks.onFieldChange$('brandId').subscribe(state => {
-                searchBrandOptionEffect(shopId, actions, 'brandId')
+                searchBrandOptionEffect(shopId, actions, 'brandId', memberId, memberRoleId)
               })
               FormEffectHooks.onFieldChange$('categoryId').subscribe(state => {
-                searchCustomerCategoryOptionEffect(shopId, actions, 'categoryId')
+                searchCustomerCategoryOptionEffect(shopId, actions, 'categoryId', memberId, memberRoleId)
               })
             },
             components: { ModalSearch: Search, DateRangePickerUnix, Submit, CustomInputSearch, CustomCategorySearch },

src/pages/editor/mobileSettingPanel/propsSettings/components/recommendCommodity/index.tsx

@@ -63,10 +63,10 @@ const RecommendCommodity: React.FC<RecommendCommodityProps> = (props: RecommendC
 
   const _onChooseConfirm = (record) => {
     const newList = [...dataList, ...record]
-    if (newList.length > 4) {
-      message.error('最多选择四件商品')
-      return
-    }
+    // if (newList.length > 4) {
+    //   message.error('最多选择四件商品')
+    //   return
+    // }
     changeProps({
       props: Object.assign({ ...props }, {
         idList: [...idList, ...record.map((item) => item.id)],

src/pages/ownMall/ownMallManager/ownMallConfigure/components/editMallModal.tsx

-import { useState, useImperativeHandle, forwardRef } from 'react'
-import { Modal } from 'antd'
-import NiceForm from '@/components/NiceForm';
-import { ISchema } from '@formily/antd';
-import { createFormActions } from '@formily/antd';
-
-export type RefProps = {
-  show: (flag: boolean, data?: any) => void
-}
-
-const formActions = createFormActions()
-
-const classSchema: ISchema = {
-  type: 'object',
-  properties: {
-    megaLayout: {
-      type: 'object',
-      "x-component": "mega-layout",
-      "x-component-props": {
-        grid: true,
-        columns: 16,
-        labelAlign: 'top'
-      },
-      properties: {
-        noField1: {
-          type: 'object',
-          "x-component": 'mega-layout',
-          "x-component-props": {
-            full: true,
-          },
-          "x-mega-props": {
-            span: 1
-          },
-          properties: {
-            name: {
-              type: 'string',
-              title: '商城名称',
-              required: true,
-              "x-component-props": {
-                placeholder: '请输入商城名称'
-              },
-              "x-rules": [
-                {
-                  limitByte: true,
-                  maxByte: 20
-                }
-              ]
-            },
-            describe: {
-              type: 'string',
-              title: '商城描述',
-              "x-component-props": {
-                placeholder: '请输入商城描述'
-              },
-              "x-rules": [
-                {
-                  limitByte: true,
-                  maxByte: 80
-                }
-              ]
-            },
-            logoUrl: {
-              title: '商城LOGO',
-              'x-component': 'CustomUpload'
-            },
-          }
-        },
-      }
-    }
-  }
-}
-
-const Page = ({ onOk }: any, ref: any) => {
-
-  const [visible, setVisible] = useState<boolean>(false)
-  const [initData, setInitData] = useState<any>({})
-
-  useImperativeHandle(ref, () => ({
-    show(flag: boolean, data?: any) {
-      if (data) {
-        setInitData(data)
-      }
-      setVisible(flag)
-    }
-  }))
-
-  const onFinish = (value) => {
-    onOk && onOk(value)
-    setVisible(false)
-  }
-
-  return (
-    <Modal
-      title='修改商城信息'
-      maskClosable={false}
-      destroyOnClose
-      visible={visible}
-      onOk={() => formActions.submit()}
-      onCancel={() => setVisible(false)}
-    >
-      <NiceForm
-        value={initData}
-        name='classForm'
-        onSubmit={onFinish}
-        actions={formActions}
-        schema={classSchema}
-      >
-      </NiceForm>
-    </Modal>
-  )
-}
-
-export default forwardRef(Page)

src/pages/ownMall/ownMallManager/ownMallConfigure/constant.ts

@@ -17,13 +17,33 @@ export const MALL_TYPE = {
  * 商城环境
  */
 export const MALL_ENV = {
-  1: 'web',
+  1: 'WEB',
   2: 'H5',
   3: '小程序',
   4: 'APP' 
 }
 
 /**
+ * 商城环境-字体颜色样式
+ */
+ export const ENV_COLOR = {
+  1: '#007BFC',
+  2: '#007BFC',
+  3: '#EB9B00',
+  4: '#00A98F' 
+}
+
+/**
+ * 商城环境-背景颜色样式
+ */
+ export const ENV_BG_COLOR = {
+  1: '#E9F3FF',
+  2: '#E9F3FF',
+  3: '#FFF8EB',
+  4: '#EBF9F6' 
+}
+
+/**
  * 商城属性
  */ 
 export const MALL_PROPERTY = {
@@ -42,9 +62,9 @@ export const MALL_PROPERTY = {
 }
 
 /**
- * 是否默认-COLOR
+ * 状态
  */ 
- export const IS_DEFAULT_COLOR = {
-  0: 'default',
-  1: 'processing ',
+ export const STATE_TYPE= {
+  0: '无效',
+  1: '有效 ',
 }
\ No newline at end of file

src/pages/ownMall/ownMallManager/ownMallConfigure/index.less

+.mallItem {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: 72px;
+  padding: 16px;
+  margin: 0 0 16px 0 !important;
+  border-radius: 8px;
+  background-color: #FFF;
+  font-size: 12px;
+  color: #5C626A;
+
+  :global {
+    .ant-form-item {
+      margin-bottom: 8px;
+    }
+  }
+
+  .name {
+    margin-bottom: 8px;
+    font-size: 16px;
+    line-height: 1;
+    color: #303133;
+    font-weight: bold;
+  }
+
+  .property {
+    padding: 2px 4px;
+    color: #5C626A;
+    background-color: #F4F5F7;
+  }
+
+  .env {
+    padding: 2px 4px;
+  }
+
+  .title {
+    color: #909399;
+    margin-bottom: 8px;
+    line-height: 1;
+  }
+
+  .btns {
+    position: absolute;
+    right: 16px;
+    width: 136px;
+    height: 32px;
+    display: flex;
+    justify-content: flex-end;
+
+    .btnIcon {
+      width: 32px;
+      height: 32px;
+      line-height: 32px;
+      text-align: center;
+      cursor: pointer;
+    }
+  }
+}
\ No newline at end of file

src/pages/ownMall/ownMallManager/ownMallConfigure/index.tsx

-import React, { useEffect, useState, useRef } from 'react'
-import { Image, Tag, Button } from 'antd';
-import { ColumnType } from 'antd/lib/table';
+import { useRef, useState, useEffect } from 'react'
+import { Image, Button, Form, Spin, Row, Col, Switch, Space, Input, Empty } from 'antd';
+import { FormOutlined } from '@ant-design/icons';
 import { PublicApi } from '@/services/api';
-import StatusSwitch from '@/components/StatusSwitch'
-import { MALL_ENV, MALL_PROPERTY, IS_DEFAULT } from './constant'
-import EditMallModal, { RefProps } from './components/editMallModal'
-import { StandardTable } from 'god'
+import { MALL_ENV, MALL_PROPERTY, ENV_COLOR, ENV_BG_COLOR } from './constant'
+import { validatorByte } from '@/utils/regExp';
+import { PageHeaderWrapper } from '@ant-design/pro-layout'
+import UploadImage from '@/components/UploadImage'
+import styles from './index.less'
 
 
 const OwnMallConfigure = () => {
-  const modalRef = useRef<RefProps>()
 
-  // 已选商城列表columns
-  const columns: ColumnType<any>[] = [
-    {
-      title: '商城ID',
-      key: 'id',
-      dataIndex: 'id'
-    },
-    {
-      title: '商城名称',
-      key: 'name',
-      dataIndex: 'name'
-    },
-    {
-      title: '商城LOGO',
-      key: 'logoUrl',
-      dataIndex: 'logoUrl',
-      render: (tetx) => <Image src={tetx} width={40} />
-    },
-    {
-      title: '商城环境',
-      key: 'environment',
-      dataIndex: 'environment',
-      render: (text) => MALL_ENV[text]
-    },
-    {
-      title: '商城属性',
-      key: 'property',
-      dataIndex: 'property',
-      render: (text) => MALL_PROPERTY[text]
-    },
-    {
-      title: '商城地址',
-      key: 'url',
-      dataIndex: 'url'
-    },
-    {
-      title: '商城描述',
-      key: 'describe',
-      dataIndex: 'describe'
-    },
-    {
-      title: '状态',
-      dataIndex: 'state',
-      key: 'state',
-      render: (text: any, record: any) => (
-        <StatusSwitch
-          fieldNames="state"
-          handleConfirm={() => handleModify(record)}
-          record={record}
-        />
-      )
-    },
-    {
-      title: '是否默认',
-      key: 'isDefault',
-      dataIndex: 'isDefault',
-      render: (text) => IS_DEFAULT[text]
-    },
-    {
-      title: '操作',
-      key: 'operate',
-      dataIndex: 'operate',
-      render: (_text, record) => {
-        return (
-          <>
-            <Button type='link' onClick={() => modalRef.current.show(true, record)}>修改</Button>
-            <Button type='link' onClick={() => {}}>{record.isDefault === 1 ? '取消默认' : '设为默认'}</Button>
-          </>
-        )
-      }
-    }
-  ]
+  const idCache = useRef<number | null>()
+
+  const [form] = Form.useForm()
+
+  const [mallList, setMallList] = useState<any[]>([])
+  const [logoCache, setLogoCache] = useState<string>()
+  const [loading, setLoading] = useState<boolean>(false)
+  const [saveLoading, setSaveLoading] = useState<boolean>(false)
+
 
-  // 改变状态
-  const handleModify = async (record: any) => {
-    
+  // 设置/取消默认
+  const handleDefault = async (record: any) => {
+    PublicApi.getManageActivityShopRuleUpdateIsDefault({
+      id: record.id,
+      isDefault: record.isDefault === 1 ? 0 : 1
+    }).then(res => {
+      if (res.code === 1000) {
+        getMallList()
+      }
+    })
   }
 
-  // 修改商城信息回调
-  const onEdit = () => {
+  // 修改LOGO
+  const handleLogo = ({ id }: any,url: string) => {
+    setLogoCache(url)
+    form.setFieldsValue({
+      logoUrl: url
+    })
+  }
 
+  // 保存商城修改信息
+  const onEdit = (id: number) => {
+    form.validateFields().then(values => {
+      setSaveLoading(true)
+      PublicApi.postManageActivityShopRuleUpdate({ id, ...values }).then(res => {
+        if (res.code === 1000) {
+          getMallList()
+        }
+      }).finally(() => {
+        setSaveLoading(false)
+      })
+    })
   }
 
-  const fetchData = (params: any) => {
-    return new Promise((resolve) => {
-      PublicApi.getManageActivityShopRuleList({ ...params }).then(res => {
-        resolve(res.data)
+  // 进入/取消编辑
+  const showEdit = ({ id }: any, isEdit: boolean) => {
+    const newMallList = mallList.map(item => {
+      return item.id === id ? { ...item, isEdit } : { ...item, isEdit: false }
+    })
+    setMallList(newMallList)
+    if (isEdit) {
+      idCache.current = id
+      const editItem = mallList.find(item => item.id === id) || {}
+      setLogoCache(editItem.logoUrl)
+      form.setFieldsValue({
+        logoUrl: editItem.logoUrl,
+        name: editItem.name,
+        describe: editItem.describe
       })
+    } else {
+      form.resetFields()
+      idCache.current = null
+    }
+  }
+
+  // 获取商城列表
+  const getMallList = (isInit: boolean) => {
+    isInit && setLoading(true)
+    PublicApi.getManageActivityShopRuleList().then(res => {
+      if (res.code === 1000) {
+        const data = res.data.map(item => {
+          return item.id === idCache.current ? { ...item, isEdit: true } : item
+        })
+        setMallList(data)
+      }
+    }).finally(() => {
+      isInit && setLoading(false)
     })
   }
 
+  useEffect(() => {
+    getMallList(true)
+  }, [])
+
   return (
-    <>
-      <StandardTable
-        tableProps={{ rowKey: 'id' }}
-        columns={columns}
-        fetchTableData={(params: any) => fetchData(params)}
-        formilyLayouts={{
-          justify: "space-between"
-        }}
-        formilyProps={{
-          layouts: {
-            order: 3
-          },
-          ctx: {
-            schema: {
-              type: 'object',
-              properties: {
-                name: {
-                  type: 'string',
-                  "x-component": 'search',
-                  "x-component-props": {
-                    placeholder: '输入商城名称'
-                  }
-                }
-              }
-            }
-          }
-        }}
-      />
-      <EditMallModal ref={modalRef} onOk={onEdit} />
-    </>
+    <PageHeaderWrapper>
+      <Spin spinning={loading}>
+        <Form form={form}>
+        {
+          mallList.length ?
+            mallList.map(item => {
+              return (
+                <Row key={item.id} className={styles.mallItem} gutter={16}>
+                  <Col span={6}>
+                    <Space size={16} style={{ width: '100%' }}>
+                      {
+                        item.isEdit ?
+                        <Form.Item 
+                          name='logoUrl'
+                          rules={[{ required: true, message: "请上传商城LOGO" }]}
+                        >
+                          <UploadImage
+                            imgUrl={logoCache}
+                            fileMaxSize={50}
+                            size="200x200"
+                            onChange={(url) => handleLogo(item, url)}
+                            btnSize={40}
+                            btnText=''
+                            showDesc={false}
+                          />
+                        </Form.Item>
+                        :
+                        <Image src={item.logoUrl} width={40} style={{ borderRadius: 4 }} />
+                      }
+                      <div>
+                        {
+                          item.isEdit ?
+                          <Form.Item 
+                            name='name'
+                            rules={[
+                              { required: true, message: '请填写商城名称' },
+                              { validator: (r, v, c) => validatorByte(r, v, c, 40) }
+                            ]}
+                          >
+                            <Input/>
+                          </Form.Item>
+                          :
+                          <div className={styles.name}>{item.name}</div>
+                        }
+                        <Space size={8}>
+                          <div className={styles.property}>{MALL_PROPERTY[item.property]}</div>
+                          <div className={styles.env} style={{ color: ENV_COLOR[item.environment], backgroundColor: ENV_BG_COLOR[item.environment] }}>
+                            {MALL_ENV[item.environment]}
+                          </div>
+                        </Space>
+                      </div>
+                    </Space>
+                  </Col>
+                  <Col span={6}>
+                    <div className={styles.title}>商城描述：</div>
+                    {
+                      item.isEdit ?
+                      <Form.Item 
+                        name='describe'
+                        rules={[
+                          { validator: (r, v, c) => validatorByte(r, v, c, 160) }
+                        ]}
+                      >
+                        <Input/>
+                      </Form.Item>
+                      :
+                      <div>{item.describe}</div>
+                    }
+                  </Col>
+                  <Col span={6}>
+                    <div className={styles.title}>商城地址：</div>
+                    <div><a href={item.url} target="_blank">{item.url}</a></div>
+                  </Col>
+                  <Col span={6}>
+                    <div className={styles.title}>默认商城：</div>
+                    <div><Switch checked={item.isDefault === 1} onChange={() => handleDefault(item)} /></div>
+                  </Col>
+                  <div className={styles.btns}>
+                    {
+                      item.isEdit ?
+                      <div className={styles.btnEdit}>
+                        <Space size={16}>
+                            <Button onClick={() => showEdit(item, false)}>取消</Button>
+                            <Button type='primary' onClick={() => onEdit(item.id)} loading={saveLoading}>保存</Button>
+                        </Space>
+                      </div>
+                      :
+                      <div className={styles.btnIcon} onClick={() => showEdit(item, true)}><FormOutlined style={{ fontSize: 16 }} /></div>
+                    }
+                  </div>
+                </Row>
+              )
+            })
+          :
+          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+        }
+        </Form>
+      </Spin>
+    </PageHeaderWrapper>
   )
 }
 export default OwnMallConfigure;