feat(ads): add drawer for CU

package.json

@@ -49,6 +49,7 @@
     "qs": "^6.10.1",
     "resize-observer-polyfill": "^1.5.1",
     "sortablejs": "^1.14.0",
+    "tinymce": "^5.10.2",
     "vue": "^3.2.21",
     "vue-i18n": "^9.1.9",
     "vue-router": "^4.0.12",

src/components/Drawer/src/BasicDrawer.vue

@@ -94,7 +94,7 @@
             opt.width = '100%';
           }
           const detailCls = `${prefixCls}__detail`;
-          opt.wrapClassName = wrapClassName ? `${wrapClassName} ${detailCls}` : detailCls;
+          opt.class = wrapClassName ? `${wrapClassName} ${detailCls}` : detailCls;
 
           if (!getContainer) {
             // TODO type error?

src/components/Drawer/src/typing.ts

@@ -128,13 +128,12 @@ export interface DrawerProps extends DrawerFooterProps {
    * @type any (string | slot)
    */
   title?: VNodeChild | JSX.Element;
-
   /**
    * The class name of the container of the Drawer dialog.
    * @type string
    */
   wrapClassName?: string;
-
+  class?: string;
   /**
    * Style of wrapper element which **contains mask** compare to `drawerStyle`
    * @type object

src/views/dashboard/advertisement/addListDrawer.vue

@@ -0,0 +1,58 @@
+<template>
+  <BasicDrawer v-bind="$attrs" title="新增轮播资讯" width="50%">
+    <BasicForm @register="register" />
+  </BasicDrawer>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { BasicDrawer } from '/@/components/Drawer';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { schemas } from './schemas';
+  export default defineComponent({
+    components: { BasicDrawer, BasicForm },
+    setup() {
+      const { createMessage } = useMessage();
+      const [register, { validate, setProps }] = useForm({
+        labelCol: {
+          span: 4,
+        },
+        wrapperCol: {
+          span: 18,
+        },
+        schemas: schemas,
+        actionColOptions: {
+          offset: 8,
+          span: 8,
+        },
+        submitButtonOptions: {
+          text: '提交',
+        },
+        submitFunc: summitAddDrawer,
+      });
+
+      async function summitAddDrawer() {
+        try {
+          await validate();
+          setProps({
+            submitButtonOptions: {
+              loading: true,
+            },
+          });
+          setTimeout(() => {
+            setProps({
+              submitButtonOptions: {
+                loading: false,
+              },
+            });
+            createMessage.success('提交成功！');
+          }, 2000);
+        } catch (error) {}
+      }
+
+      return {
+        register,
+      };
+    },
+  });
+</script>

src/views/dashboard/advertisement/addPadsDrawer.vue

@@ -0,0 +1,59 @@
+<template>
+  <BasicDrawer v-bind="$attrs" title="新增轮播资讯" width="50%">
+    <BasicForm @register="register" />
+  </BasicDrawer>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { BasicDrawer } from '/@/components/Drawer';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { schemas } from './schemas';
+
+  export default defineComponent({
+    components: { BasicDrawer, BasicForm },
+    setup() {
+      const { createMessage } = useMessage();
+      const [register, { validate, setProps }] = useForm({
+        labelCol: {
+          span: 4,
+        },
+        wrapperCol: {
+          span: 18,
+        },
+        schemas: schemas,
+        actionColOptions: {
+          offset: 8,
+          span: 8,
+        },
+        submitButtonOptions: {
+          text: '提交',
+        },
+        submitFunc: summitAddDrawer,
+      });
+
+      async function summitAddDrawer() {
+        try {
+          await validate();
+          setProps({
+            submitButtonOptions: {
+              loading: true,
+            },
+          });
+          setTimeout(() => {
+            setProps({
+              submitButtonOptions: {
+                loading: false,
+              },
+            });
+            createMessage.success('提交成功！');
+          }, 2000);
+        } catch (error) {}
+      }
+
+      return {
+        register,
+      };
+    },
+  });
+</script>

src/views/dashboard/advertisement/list.vue

@@ -2,7 +2,7 @@
   <div class="p-4">
     <BasicTable @register="registerTable">
       <template #toolbar>
-        <a-button type="primary" @click="addSlider">新增</a-button>
+        <a-button type="primary" @click="openAddDrawer(true)">新增</a-button>
       </template>
       <template #img="{ record }">
         <TableImg :size="200" :simpleShow="true" :imgList="[record.image]" />
@@ -32,20 +32,22 @@
         />
       </template>
     </BasicTable>
+    <addListDrawer @register="registeraddListDrawer" />
   </div>
 </template>
 <script lang="ts">
   import { defineComponent } from 'vue';
   import { BasicTable, useTable, BasicColumn, TableAction, TableImg } from '/@/components/Table';
   import { useMessage } from '/@/hooks/web/useMessage';
-  // import { Tag } from 'ant-design-vue';
-
+  import { useDrawer } from '/@/components/Drawer';
+  import addListDrawer from './addListDrawer.vue';
   import { ListApi } from '/@/api/advertisement/list';
   // param type 2
   export default defineComponent({
-    components: { BasicTable, TableAction, TableImg },
+    components: { BasicTable, TableAction, TableImg, addListDrawer },
     setup() {
       const { createMessage } = useMessage();
+      const [registeraddListDrawer, { openDrawer: openAddDrawer }] = useDrawer();
       const columns: BasicColumn[] = [
         {
           title: '序号',
@@ -79,9 +81,6 @@
         },
       ];
 
-      const addSlider = () => {
-        console.log('add');
-      };
       // { getForm }
       const [registerTable] = useTable({
         title: '轮播图',
@@ -98,7 +97,8 @@
       return {
         registerTable,
         createMessage,
-        addSlider,
+        registeraddListDrawer,
+        openAddDrawer,
       };
     },
   });

src/views/dashboard/advertisement/pads.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="p-4">
     <BasicTable @register="registerTable">
-      <template #toolbar> </template>
+      <template #toolbar>
+        <a-button type="primary" @click="openPadsDrawer(true)">新增</a-button>
+      </template>
       <template #img="{ record }">
         <TableImg :size="200" :simpleShow="true" :imgList="[record.image]" />
       </template>
@@ -30,27 +32,23 @@
         />
       </template>
     </BasicTable>
+    <addPadsDrawer @register="registeraddPadDrawer" />
   </div>
 </template>
 <script lang="ts">
   import { defineComponent } from 'vue';
-  import {
-    BasicTable,
-    useTable,
-    BasicColumn,
-    FormProps,
-    TableAction,
-    TableImg,
-  } from '/@/components/Table';
+  import { BasicTable, useTable, BasicColumn, TableAction, TableImg } from '/@/components/Table';
   import { useMessage } from '/@/hooks/web/useMessage';
   // import { Tag } from 'ant-design-vue';
-
+  import addPadsDrawer from './addPadsDrawer.vue';
   import { ListApi } from '/@/api/advertisement/list';
+  import { useDrawer } from '/@/components/Drawer';
   // param type 2
   export default defineComponent({
-    components: { BasicTable, TableAction, TableImg },
+    components: { BasicTable, TableAction, TableImg, addPadsDrawer },
     setup() {
       const { createMessage } = useMessage();
+      const [registeraddPadDrawer, { openDrawer: openPadsDrawer }] = useDrawer();
       const columns: BasicColumn[] = [
         {
           title: '序号',
@@ -84,62 +82,12 @@
         },
       ];
 
-      const searchForm: Partial<FormProps> = {
-        labelWidth: 100,
-        schemas: [
-          {
-            field: 'part',
-            component: 'Select',
-            label: '选择',
-            defaultValue: '1',
-            colProps: {
-              span: 4,
-            },
-            componentProps: {
-              options: [
-                {
-                  label: '全部',
-                  value: '1',
-                  key: '1',
-                },
-                {
-                  label: '正常',
-                  value: '2',
-                  key: '2',
-                },
-                {
-                  label: '已关闭',
-                  value: '2',
-                  key: '2',
-                },
-              ],
-            },
-          },
-          {
-            field: 'phone',
-            label: '手机号',
-            component: 'Input',
-            colProps: {
-              span: 6,
-            },
-          },
-          {
-            field: 'fieldTime',
-            component: 'RangePicker',
-            label: '时间字段',
-            colProps: {
-              span: 8,
-            },
-          },
-        ],
-      };
-      // { getForm }
       const [registerTable] = useTable({
         title: '新上房源 /热门房源 /热门企业',
         api: ListApi,
         columns: columns,
-        useSearchForm: true,
-        formConfig: searchForm,
+        useSearchForm: false,
+        // formConfig: searchForm,
         showTableSetting: true,
         tableSetting: { fullScreen: true },
         showIndexColumn: false,
@@ -149,6 +97,8 @@
       return {
         registerTable,
         createMessage,
+        registeraddPadDrawer,
+        openPadsDrawer,
       };
     },
   });

src/views/dashboard/advertisement/schemas.ts

@@ -0,0 +1,63 @@
+import { FormSchema } from '/@/components/Form';
+import { uploadApi } from '/@/api/sys/upload';
+import { Tinymce } from '/@/components/Tinymce/index';
+import { h } from 'vue';
+
+export const schemas: FormSchema[] = [
+  {
+    field: 'title',
+    component: 'Input',
+    label: '正文标题',
+    componentProps: {
+      placeholder: '轮播图正文标题',
+    },
+    required: true,
+  },
+
+  {
+    field: 'order',
+    component: 'Input',
+    label: '轮播排序',
+    defaultValue: 0,
+    componentProps: {
+      placeholder: '轮播排序',
+      type: 'number',
+      min: 0,
+    },
+    required: true,
+  },
+  {
+    field: 'link',
+    component: 'Input',
+    label: '链接',
+    componentProps: {
+      placeholder: '链接',
+    },
+    required: true,
+  },
+  {
+    field: 'image',
+    component: 'Upload',
+    label: '封面图',
+    rules: [{ required: true, message: '请选择上传文件' }],
+    componentProps: {
+      api: uploadApi,
+    },
+    required: true,
+  },
+  {
+    field: 'content',
+    component: 'Input',
+    label: '正文内容',
+    defaultValue: '',
+    rules: [{ required: true }],
+    render: ({ model, field }) => {
+      return h(Tinymce, {
+        value: model[field],
+        onChange: (value: string) => {
+          model[field] = value;
+        },
+      });
+    },
+  },
+];

yarn.lock

@@ -10011,6 +10011,11 @@ tinycolor2@^1.4.2:
   resolved "https://registry.npm.taobao.org/tinycolor2/download/tinycolor2-1.4.2.tgz"
   integrity "sha1-P2pNEHGtB2dtf6Ry4frECnGdiAM= sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA=="
 
+tinymce@^5.10.2:
+  version "5.10.2"
+  resolved "https://registry.yarnpkg.com/tinymce/-/tinymce-5.10.2.tgz#cf1ff01025909be26c64348509e6de8e70d58e1d"
+  integrity sha512-5QhnZ6c8F28fYucLLc00MM37fZoAZ4g7QCYzwIl38i5TwJR5xGqzOv6YMideyLM4tytCzLCRwJoQen2LI66p5A==
+
 tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.npm.taobao.org/tmp/download/tmp-0.0.33.tgz"