feat(ads): drawer perf

mock/company/selectCompanyByType.ts

@@ -32,7 +32,7 @@ const demoList = (() => {
       memoName: '@ctitle(10,20)',
       name: '@ctitle(10,20)',
       phone: phone,
-      point: null,
+      point: '@integer(1,20)',
       qualification: null,
       sceneLogo: null,
       startTime: '@datetime',

src/views/dashboard/advertisement/listDrawer.vue

@@ -41,6 +41,7 @@
           console.log('data.record', data.record);
           setFieldsValue({
             ...data.record,
+            image: [data.record.image],
           });
         }
       });

src/views/dashboard/advertisement/pads.vue

@@ -2,20 +2,18 @@
   <div class="p-4">
     <BasicTable @register="registerTable">
       <template #toolbar>
-        <a-button type="primary" @click="openPadsDrawer(true)">新增</a-button>
+        <a-button type="primary" @click="handleCreate">新增</a-button>
       </template>
       <template #img="{ record }">
         <TableImg :size="200" :simpleShow="true" :imgList="[record.image]" />
       </template>
-      <template #action>
+      <template #action="{ record }">
         <TableAction
           :actions="[
             {
               icon: 'clarity:note-edit-line',
               label: '编辑',
-              onClick: () => {
-                createMessage.info(`暂未接入`);
-              },
+              onClick: handleEdit.bind(null, record),
             },
             {
               icon: 'ant-design:delete-outlined',
@@ -32,7 +30,7 @@
         />
       </template>
     </BasicTable>
-    <addPadsDrawer @register="registeraddPadDrawer" />
+    <PadsDrawer @register="registerDrawer" />
   </div>
 </template>
 <script lang="ts">
@@ -40,15 +38,15 @@
   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 PadsDrawer from './padsDrawer.vue';
   import { ListApi } from '/@/api/advertisement/list';
   import { useDrawer } from '/@/components/Drawer';
   // param type 2
   export default defineComponent({
-    components: { BasicTable, TableAction, TableImg, addPadsDrawer },
+    components: { BasicTable, TableAction, TableImg, PadsDrawer },
     setup() {
       const { createMessage } = useMessage();
-      const [registeraddPadDrawer, { openDrawer: openPadsDrawer }] = useDrawer();
+      const [registerDrawer, { openDrawer }] = useDrawer();
       const columns: BasicColumn[] = [
         {
           title: '序号',
@@ -93,12 +91,23 @@
         showIndexColumn: false,
         rowKey: 'id',
       });
-      // pagination.value = { pageSize: 20 };
+      function handleCreate() {
+        openDrawer(true, {
+          isUpdate: false,
+        });
+      }
+      function handleEdit(record: Recordable) {
+        openDrawer(true, {
+          record,
+          isUpdate: true,
+        });
+      }
       return {
         registerTable,
         createMessage,
-        registeraddPadDrawer,
-        openPadsDrawer,
+        registerDrawer,
+        handleCreate,
+        handleEdit,
       };
     },
   });

src/views/dashboard/advertisement/addPadsDrawer.vue

@@ -1,11 +1,11 @@
 <template>
-  <BasicDrawer v-bind="$attrs" title="新增轮播资讯" width="50%">
-    <BasicForm @register="register" />
+  <BasicDrawer v-bind="$attrs" width="50%" :title="getTitle" @register="registerDrawer">
+    <BasicForm @register="registerForm" />
   </BasicDrawer>
 </template>
 <script lang="ts">
-  import { defineComponent } from 'vue';
-  import { BasicDrawer } from '/@/components/Drawer';
+  import { defineComponent, computed, ref, unref } from 'vue';
+  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
   import { BasicForm, useForm } from '/@/components/Form';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { schemas } from './schemas';
@@ -14,7 +14,8 @@
     components: { BasicDrawer, BasicForm },
     setup() {
       const { createMessage } = useMessage();
-      const [register, { validate, setProps }] = useForm({
+      const isUpdate = ref(true);
+      const [registerForm, { validate, setProps, resetFields, setFieldsValue }] = useForm({
         labelCol: {
           span: 4,
         },
@@ -50,9 +51,25 @@
           }, 2000);
         } catch (error) {}
       }
+      const getTitle = computed(() => (!unref(isUpdate) ? '新增轮播资讯' : '编辑轮播资讯'));
+      const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+        resetFields();
+        setDrawerProps({ confirmLoading: false });
+        isUpdate.value = !!data?.isUpdate;
 
+        if (unref(isUpdate)) {
+          console.log('data.record', data.record);
+          setFieldsValue({
+            ...data.record,
+            image: [data.record.image],
+          });
+        }
+      });
       return {
-        register,
+        registerForm,
+        getTitle,
+        registerDrawer,
+        closeDrawer,
       };
     },
   });

src/views/dashboard/advertisement/schemas.ts

@@ -42,6 +42,7 @@ export const schemas: FormSchema[] = [
     rules: [{ required: true, message: '请选择上传文件' }],
     componentProps: {
       api: uploadApi,
+      maxNumber: 1,
     },
     required: true,
   },

src/views/dashboard/corporation/chargeModal.vue

@@ -0,0 +1,99 @@
+<template>
+  <BasicModal
+    v-bind="$attrs"
+    @register="register"
+    title="设备充值"
+    @visible-change="handleVisibleChange"
+  >
+    <div class="pt-3px pr-3px">
+      <BasicForm @register="registerForm" :model="model">
+        <template #userName="{ record }">
+          {{ record.userName }}
+        </template>
+      </BasicForm>
+    </div>
+  </BasicModal>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, nextTick } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
+  const schemas: FormSchema[] = [
+    {
+      field: 'userName',
+      component: 'Input',
+      label: '充值账号',
+      labelWidth: 100,
+      colProps: {
+        span: 20,
+        // offset,
+      },
+      componentProps: {
+        // readOnly: true,
+        disabled: true,
+      },
+    },
+    {
+      field: 'point',
+      component: 'Input',
+      label: '当前余额',
+      labelWidth: 100,
+      colProps: {
+        span: 20,
+      },
+      componentProps: {
+        disabled: true,
+      },
+    },
+  ];
+  export default defineComponent({
+    components: { BasicModal, BasicForm },
+    props: {
+      userData: { type: Object },
+    },
+    setup(props) {
+      const modelRef = ref({});
+      const [
+        registerForm,
+        {
+          setFieldsValue,
+          resetFields,
+          // setProps,
+        },
+      ] = useForm({
+        labelWidth: 120,
+        schemas,
+        showActionButtonGroup: false,
+        actionColOptions: {
+          span: 24,
+        },
+      });
+
+      const [register] = useModalInner((data) => {
+        data && onDataReceive(data);
+      });
+
+      function onDataReceive(data) {
+        console.log('Data Received', data.record);
+        // 方式1;
+        resetFields();
+        setFieldsValue({
+          ...data.record,
+        });
+
+        // // 方式2
+        // modelRef.value = { field2: data.data, field1: data.info };
+
+        // setProps({
+        //   ...data.record,
+        // });
+      }
+
+      function handleVisibleChange(v) {
+        v && props.userData && nextTick(() => onDataReceive(props.userData));
+      }
+
+      return { register, schemas, registerForm, model: modelRef, handleVisibleChange };
+    },
+  });
+</script>

src/views/dashboard/corporation/index.vue

@@ -11,28 +11,59 @@
       <template #bgMusic="{ bgMusic }">
         <CropperAvatar :showBtn="false" :width="80" :uploadApi="uploadApi" :value="bgMusic" />
       </template>
+
+      <template #action="{ record }">
+        <TableAction
+          :actions="[
+            {
+              // icon: 'ri:money-cny-circle-fill',
+              label: '充值',
+              onClick: handleOpenChargeModal.bind(null, record),
+            },
+            {
+              // icon: 'icon-park-outline:devices',
+              label: '设备',
+              onClick: () => {},
+            },
+            {
+              // icon: 'mdi:account-group',
+              color: 'error',
+              label: '子账号',
+              popConfirm: {
+                title: '是否确认删除',
+                confirm: () => {},
+              },
+            },
+          ]"
+        />
+      </template>
     </BasicTable>
+    <chargeModal @register="registerChargeModal" />
   </div>
 </template>
 <script lang="ts">
   import { defineComponent } from 'vue';
-  import { BasicTable, useTable, BasicColumn, FormProps } from '/@/components/Table';
+  import { BasicTable, useTable, BasicColumn, FormProps, TableAction } from '/@/components/Table';
   // import { CollapseContainer } from '/@/components/Container';
   import { CropperAvatar } from '/@/components/Cropper';
   import { uploadApi } from '/@/api/sys/upload';
   // import { Avatar } from 'ant-design-vue';
   // import { getBasicColumns, getBasicData } from './tableData';
   import { ListApi } from '/@/api/corporation/list';
+  import { useModal } from '/@/components/Modal';
+  import chargeModal from './chargeModal.vue';
 
   export default defineComponent({
-    components: { BasicTable, CropperAvatar },
+    components: { BasicTable, CropperAvatar, TableAction, chargeModal },
     setup() {
+      const [registerChargeModal, { openModal: openChargeModal }] = useModal();
+
       const columns: BasicColumn[] = [
         {
           title: 'ID',
           dataIndex: 'id',
           fixed: 'left',
-          width: 100,
+          width: 80,
         },
         {
           title: '企业账户',
@@ -48,39 +79,39 @@
           title: '加载界面LOGO',
           dataIndex: 'sceneLogo',
           slots: { customRender: 'sceneLogo' },
-          width: 180,
+          width: 160,
         },
         {
           title: '加载地面LOGO',
           dataIndex: 'floorLogo',
           slots: { customRender: 'floorLogo' },
-          width: 180,
+          width: 160,
         },
         {
           title: '背景音乐',
           dataIndex: 'bgMusic',
           slots: { customRender: 'bgMusic' },
-          width: 180,
+          width: 160,
         },
         {
           title: '设备数量',
           dataIndex: 'cameraNum',
-          width: 150,
+          width: 80,
         },
         {
           title: '子账号数量',
           dataIndex: 'subNum',
-          width: 120,
+          width: 80,
         },
         {
           title: '上传场景数',
           dataIndex: 'sceneNum',
-          width: 100,
+          width: 80,
         },
         {
           title: '余额',
           dataIndex: 'point',
-          width: 100,
+          width: 80,
         },
         {
           title: '到期时间',
@@ -123,11 +154,23 @@
         tableSetting: { fullScreen: true },
         showIndexColumn: false,
         rowKey: 'id',
-        pagination: { pageSize: 20 },
+        actionColumn: {
+          width: 160,
+          title: '操作',
+          dataIndex: 'action',
+          slots: { customRender: 'action' },
+        },
       });
+      function handleOpenChargeModal(record: Recordable) {
+        openChargeModal(true, {
+          record,
+        });
+      }
 
       return {
         registerTable,
+        registerChargeModal,
+        handleOpenChargeModal,
         uploadApi: uploadApi as any,
       };
     },