feat(http): 修改接口 页面

src/api/corporation/modal.ts

@@ -7,6 +7,7 @@ import {
   SubAccountUsers,
   selectCompanyParam,
   auditParam,
+  addPointParam,
 } from './model';
 import type { Result } from '/#/axios';
 
@@ -14,6 +15,7 @@ enum Api {
   addDevice = '/zfb-api/zfb/company/addDevice',
   checkDevice = '/zfb-api/zfb/company/checkDevice',
   selectUserList = '/zfb-api/zfb/company/selectUserList',
+  addPoint = '/zfb-api/zfb/company/addPoint',
   checkUserAddAble = '/zfb-api/zfb/company/back/checkUserAddAble',
   saveSubUsers = '/zfb-api/zfb/company/saveSubUsers',
   selectCompanyById = '/zfb-api/zfb/company/selectCompanyById',
@@ -51,6 +53,16 @@ export const auditCompany = (params: auditParam) =>
       ignoreCancelToken: true,
     },
   });
+
+export const addPoint = (params: addPointParam) =>
+  defHttp.post<Result>({
+    url: Api.addPoint,
+    params,
+    headers: {
+      // @ts-ignore
+      ignoreCancelToken: true,
+    },
+  });
 export const selectUserList = (params: selectUserListParam) =>
   defHttp.post<Result>({
     url: Api.selectUserList,

src/api/corporation/model.ts

@@ -17,6 +17,10 @@ export interface auditParam {
   id: number | null;
 }
 
+export interface addPointParam {
+  id: number | null;
+  idpoint: number | null;
+}
 export interface selectUserListParam {
   id: number | null;
   page: number | null;

src/api/product/category.ts

@@ -1,8 +1,12 @@
 import { defHttp } from '/@/utils/http/axios';
-import { PageParams, RentListGetResultModel } from './model';
+import { PageParams, updateItem, RentListGetResultModel } from './model';
 
 enum Api {
   category = '/basic-api/category/queryAll',
+  attribute = '/basic-api/specification/list',
+  delete = '/basic-api/specification/delete',
+  update = '/basic-api/specification/update',
+  save = '/basic-api/specification/save',
 }
 
 /**
@@ -18,3 +22,43 @@ export const categoryApi = (params: PageParams) =>
       ignoreCancelToken: true,
     },
   });
+
+export const attributeListApi = (params: PageParams) =>
+  defHttp.post<RentListGetResultModel>({
+    url: Api.attribute,
+    params,
+    headers: {
+      // @ts-ignore
+      ignoreCancelToken: true,
+    },
+  });
+
+export const updateItemApi = (params: PageParams) =>
+  defHttp.post<RentListGetResultModel>({
+    url: Api.update,
+    params,
+    headers: {
+      // @ts-ignore
+      ignoreCancelToken: true,
+    },
+  });
+
+export const saveItemApi = (params: updateItem) =>
+  defHttp.post<RentListGetResultModel>({
+    url: Api.save,
+    params,
+    headers: {
+      // @ts-ignore
+      ignoreCancelToken: true,
+    },
+  });
+
+export const attributeDleteApi = (params: string) =>
+  defHttp.post<RentListGetResultModel>({
+    url: Api.delete,
+    params: [params],
+    headers: {
+      // @ts-ignore
+      ignoreCancelToken: true,
+    },
+  });

src/api/product/model.ts

@@ -6,6 +6,8 @@ export type PageParams = BasicPageParams;
 
 export interface OrderListItem {
   id: number;
+  limit: number | null;
+  page: number | null;
   name: string;
   image: string;
   link: string;
@@ -13,6 +15,16 @@ export interface OrderListItem {
   isShow: boolean;
 }
 
+export interface OrderListItem {
+  limit: number | null;
+  page: number | null;
+  name: string;
+}
+
+export interface updateItem {
+  id: number | null;
+  name: string;
+}
 /**
  * @description: Request list return value
  */

src/components/Modal/src/hooks/useModal.ts

@@ -55,6 +55,7 @@ export function useModal(): UseModalReturnType {
   }
 
   const getInstance = () => {
+    console.log('modal', modal);
     const instance = unref(modal);
     if (!instance) {
       error('useModal instance is undefined!');

src/views/dashboard/corporation/DetailModal.vue

@@ -1,179 +0,0 @@
-<template>
-  <BasicModal
-    v-bind="$attrs"
-    @register="register"
-    title="企业信息"
-    @visible-change="handleVisibleChange"
-    @ok="handleSubmit"
-  >
-    <div class="pt-2px pr-3px">
-      <BasicForm @register="registerForm" :model="model" />
-    </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';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import { checkUserAddAble } from '/@/api/corporation/modal'; //selectUserList
-  const schemas: FormSchema[] = [
-    {
-      field: 'name',
-      component: 'Input',
-      label: '信息标题',
-      colProps: {
-        span: 16,
-      },
-      componentProps: {
-        disabled: true,
-      },
-    },
-    {
-      field: 'contacts',
-      component: 'Input',
-      label: '联系人',
-      colProps: {
-        span: 16,
-      },
-      componentProps: {
-        disabled: true,
-      },
-    },
-    {
-      field: 'phone',
-      component: 'Input',
-      label: '手机号',
-      colProps: {
-        span: 16,
-      },
-      componentProps: {
-        disabled: true,
-      },
-    },
-    {
-      field: 'area',
-      component: 'Input',
-      label: '所属区域',
-      colProps: {
-        span: 16,
-      },
-      componentProps: {
-        disabled: true,
-      },
-    },
-    {
-      field: 'website',
-      component: 'Input',
-      label: '企业官网',
-      colProps: {
-        span: 16,
-      },
-      componentProps: {
-        disabled: true,
-      },
-    },
-    {
-      field: 'logo',
-      component: 'Input',
-      label: '企业LOGO',
-      colProps: {
-        span: 8,
-      },
-    },
-    {
-      field: 'contacts',
-      component: 'Input',
-      label: '企业资质',
-      colProps: {
-        span: 8,
-      },
-      componentProps: {
-        disabled: true,
-      },
-    },
-    {
-      field: 'contacts',
-      component: 'Input',
-      label: '企业简介',
-      colProps: {
-        span: 16,
-      },
-      componentProps: {
-        disabled: true,
-      },
-    },
-  ];
-  export default defineComponent({
-    components: { BasicModal, BasicForm },
-    props: {
-      userData: { type: Object },
-    },
-    setup(props) {
-      const modelRef = ref({});
-      const { createMessage } = useMessage();
-      const [
-        registerForm,
-        {
-          getFieldsValue,
-          // setFieldsValue,
-          // setProps
-        },
-      ] = useForm({
-        labelWidth: 120,
-        schemas,
-        showActionButtonGroup: false,
-        actionColOptions: {
-          span: 24,
-        },
-      });
-      let addListFunc = () => {};
-      const [register, { closeModal }] = useModalInner((data) => {
-        data && onDataReceive(data);
-      });
-
-      function onDataReceive(data) {
-        console.log('Data Received', data);
-        const { addList } = data;
-        if (typeof addList === 'function') {
-          //是函数    其中 FunName 为函数名称
-          addListFunc = addList;
-        }
-      }
-      const handleSubmit = async () => {
-        console.log('getFieldsValue()', getFieldsValue());
-        var reg_tel =
-          /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
-        let { phone, memoName } = getFieldsValue();
-        if (phone == '') {
-          createMessage.error('请填写您的手机号码！');
-          return false;
-        } else if (!reg_tel.test(phone)) {
-          createMessage.error('请正确填写您的手机号码！');
-          return false;
-        }
-        let res = await checkUserAddAble({ phone });
-        if (res.result == false) {
-          addListFunc({ phone, memoName });
-          closeModal();
-        } else {
-          createMessage.error('子账号已被该企业绑定');
-        }
-      };
-      function handleVisibleChange(v) {
-        v && props.userData && nextTick(() => onDataReceive(props.userData));
-      }
-
-      return {
-        register,
-        schemas,
-        registerForm,
-        model: modelRef,
-        handleVisibleChange,
-        handleSubmit,
-        addListFunc,
-        closeModal,
-      };
-    },
-  });
-</script>

src/views/dashboard/corporation/chargeModal.vue

@@ -3,38 +3,42 @@
     v-bind="$attrs"
     @register="register"
     title="设备充值"
+    @ok="submit"
     @visible-change="handleVisibleChange"
   >
     <div class="pt-3px pr-3px">
-      <BasicForm @register="registerForm" :model="model">
+      <BasicForm @register="registerForm" :model="modelRef">
         <template #userName="{ record }">
           {{ record.userName }}
         </template>
+        <template #text="{ model, field }">
+          {{ model[field] }}
+        </template>
       </BasicForm>
     </div>
   </BasicModal>
 </template>
 <script lang="ts">
-  import { defineComponent, ref, nextTick } from 'vue';
+  import { defineComponent, ref, nextTick, inject } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
+  import { addPoint } from '/@/api/corporation/modal';
+  import { useMessage } from '/@/hooks/web/useMessage';
   const schemas: FormSchema[] = [
     {
       field: 'userName',
       component: 'Input',
       label: '充值账号',
       labelWidth: 100,
+      slot: 'text',
       colProps: {
         span: 20,
-        // offset,
-      },
-      componentProps: {
-        disabled: true,
       },
     },
     {
       field: 'point',
       component: 'Input',
+      slot: 'text',
       label: '当前余额',
       labelWidth: 100,
       colProps: {
@@ -44,6 +48,16 @@
         disabled: true,
       },
     },
+    {
+      field: 'addPointnumber',
+      component: 'InputNumber',
+      label: '充 值',
+      labelWidth: 100,
+      colProps: {
+        span: 20,
+      },
+      defaultValue: 0,
+    },
   ];
   export default defineComponent({
     components: { BasicModal, BasicForm },
@@ -51,15 +65,10 @@
       userData: { type: Object },
     },
     setup(props) {
+      const { createConfirm, createMessage } = useMessage();
+      const reload = inject('tablereload');
       const modelRef = ref({});
-      const [
-        registerForm,
-        {
-          setFieldsValue,
-          resetFields,
-          // setProps,
-        },
-      ] = useForm({
+      const [registerForm, { setFieldsValue, resetFields, getFieldsValue }] = useForm({
         labelWidth: 120,
         schemas,
         showActionButtonGroup: false,
@@ -68,10 +77,30 @@
         },
       });
 
-      const [register] = useModalInner((data) => {
+      const [register, { closeModal }] = useModalInner((data) => {
         data && onDataReceive(data);
       });
-
+      async function saveTable() {
+        let { addPointnumber } = getFieldsValue();
+        let res = await addPoint({
+          id: modelRef.value.id,
+          point: addPointnumber,
+        });
+        console.log('saveTable', res, addPoint);
+        createMessage.success('操作成功');
+        reload();
+        closeModal();
+      }
+      async function submit() {
+        createConfirm({
+          iconType: 'warning',
+          title: '提示',
+          content: '此操作将对该账号进行充值, 是否继续?',
+          onOk: async () => {
+            saveTable();
+          },
+        });
+      }
       function onDataReceive(data) {
         console.log('Data Received', data.record);
         // 方式1;
@@ -81,18 +110,25 @@
         });
 
         // // 方式2
-        // modelRef.value = { field2: data.data, field1: data.info };
-
-        // setProps({
-        //   ...data.record,
-        // });
+        modelRef.value = {
+          ...data.record,
+        };
       }
 
       function handleVisibleChange(v) {
         v && props.userData && nextTick(() => onDataReceive(props.userData));
       }
 
-      return { register, schemas, registerForm, model: modelRef, handleVisibleChange };
+      return {
+        register,
+        submit,
+        saveTable,
+        reload,
+        schemas,
+        registerForm,
+        modelRef,
+        handleVisibleChange,
+      };
     },
   });
 </script>

src/views/dashboard/corporation/detailsModal.vue

@@ -0,0 +1,223 @@
+<template>
+  <BasicModal
+    v-bind="$attrs"
+    @register="register"
+    title="新增设备"
+    @ok="submitMolad(true)"
+    cancelText="拒绝"
+    okText="通过"
+    @cancel="submitMolad(false)"
+    @visible-change="handleVisibleChange"
+  >
+    <div class="pt-3px pr-3px">
+      <BasicForm @register="registerForm">
+        <template #text="{ model, field }">
+          {{ model[field] }}
+        </template>
+        <template #link="{ model, field }">
+          <a :href="model[field]" target="_blank">{{ model[field] }}</a>
+        </template>
+        <template #iamge="{ model, field }">
+          <div v-if="model[field]">
+            <TableImg :size="200" :simpleShow="true" :imgList="[model[field]]" />
+          </div>
+        </template>
+      </BasicForm>
+    </div>
+  </BasicModal>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, nextTick } from 'vue';
+  import { TableImg } from '/@/components/Table';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { checkDevice, selectCompanyById, auditCompany } from '/@/api/corporation/modal';
+  export default defineComponent({
+    components: { BasicModal, BasicForm, TableImg },
+    props: {
+      userData: { type: Object },
+    },
+    setup(props) {
+      const modelRef = ref({});
+      const num = ref(0);
+      const { createMessage } = useMessage();
+      const { error, success } = createMessage; //success,
+      const [register, { closeModal }] = useModalInner((data) => {
+        data && onDataReceive(data);
+      });
+
+      const handlevalidator = async (_, value) => {
+        console.log('handlevalidator', value);
+        if (!value) {
+          return Promise.resolve();
+        }
+        try {
+          let res = await checkDevice({
+            childName: value,
+          });
+          if (res.message) {
+            return Promise.reject(res.message);
+          } else {
+            return Promise.resolve();
+          }
+        } catch (err) {
+          return Promise.reject(err);
+        }
+      };
+      const schemas: FormSchema[] = [
+        {
+          field: 'name',
+          label: '信息标题',
+          slot: 'text',
+          component: 'Input',
+        },
+        {
+          field: 'contacts',
+          label: '联系人',
+          slot: 'text',
+          component: 'Input',
+        },
+        {
+          field: 'phone',
+          label: '手机号',
+          slot: 'text',
+          component: 'Input',
+        },
+        {
+          field: 'area',
+          label: '所属区域',
+          slot: 'text',
+          component: 'Input',
+        },
+        {
+          field: 'address',
+          label: '详细地址',
+          slot: 'text',
+          component: 'Input',
+        },
+        {
+          field: 'website',
+          label: '企业官网',
+          slot: 'text',
+          component: 'Input',
+        },
+        {
+          field: 'name',
+          label: '企业简介',
+          slot: 'name',
+          component: 'Input',
+        },
+        {
+          field: 'logo',
+          label: '企业LOGO',
+          slot: 'iamge',
+          component: 'Input',
+        },
+        {
+          field: 'qualification',
+          label: '企业资质',
+          slot: 'iamge',
+          component: 'Input',
+        },
+      ];
+      // let schemasList = []
+      const [
+        registerForm,
+        { setFieldsValue, resetFields, appendSchemaByField, removeSchemaByFiled },
+      ] = useForm({
+        labelWidth: 120,
+        schemas,
+        showActionButtonGroup: false,
+        actionColOptions: {
+          span: 24,
+        },
+      });
+      async function submitMolad(val) {
+        let res = await auditCompany({
+          id: modelRef.value.id,
+          state: val ? 1 : 2,
+        });
+        success(res);
+        closeModal();
+      }
+      async function onDataReceive(data) {
+        // 方式1;
+        resetFields();
+        let { id } = data.record;
+        let res = await selectCompanyById({
+          id,
+        });
+        console.log('setFieldsValue', res);
+        setFieldsValue({
+          ...res,
+        });
+        modelRef.value = { ...data.record };
+      }
+      function numOnChange(event) {
+        const value = Number(event);
+        if (num.value > value) {
+          //减
+          let delList = Array.from(new Array(num.value)).map((_, index) => {
+            console.log(index, value, num.value);
+            if (index >= value) {
+              return `ID${index}`;
+            }
+          });
+          removeSchemaByFiled(delList);
+          console.log('schemasList减', value, num.value, delList);
+          // value,num.value,schemasList.filter((_,index) => {return !(index<num.value)}).map((_,index) => `ID${index}`))
+        } else {
+          //增
+          let schemasList: FormSchema[] = Array.from(new Array(value)).map((_, index) => {
+            return {
+              field: `ID${index}`,
+              component: 'Input',
+              label: '设备ID' + index,
+              itemProps: {
+                validateTrigger: 'blur',
+              },
+              colProps: {
+                span: 24,
+              },
+              rules: [
+                {
+                  required: false,
+                  trigger: 'blur',
+                  validator: handlevalidator,
+                },
+              ],
+            };
+          });
+          console.log(
+            'schemasList增',
+            num.value,
+            schemasList.filter((_, index) => {
+              return index >= num.value;
+            }),
+          );
+          schemasList
+            .filter((_, index) => {
+              return index >= num.value;
+            })
+            .forEach((item) => appendSchemaByField(item, ''));
+        }
+        num.value = value;
+      }
+      function handleVisibleChange(v) {
+        v && props.userData && nextTick(() => onDataReceive(props.userData));
+      }
+      return {
+        register,
+        submitMolad,
+        schemas,
+        registerForm,
+        numOnChange,
+        modelRef,
+        handleVisibleChange,
+        num,
+        errorMsg: error,
+      };
+    },
+  });
+</script>

src/views/dashboard/corporation/deviceModal.vue

@@ -3,24 +3,16 @@
     v-bind="$attrs"
     @register="register"
     title="新增设备"
-    @ok="submitMolad(true)"
-    cancelText="拒绝"
-    okText="通过"
-    @cancel="submitMolad(false)"
+    @ok="submitMolad"
     @visible-change="handleVisibleChange"
   >
     <div class="pt-3px pr-3px">
       <BasicForm @register="registerForm">
-        <template #text="{ model, field }">
+        <template #userName="{ model, field }">
           {{ model[field] }}
         </template>
-        <template #link="{ model, field }">
-          <a :href="model[field]" target="_blank">{{ model[field] }}</a>
-        </template>
-        <template #iamge="{ model, field }">
-          <div v-if="model[field]">
-            <TableImg :size="200" :simpleShow="true" :imgList="[model[field]]" />
-          </div>
+        <template #name="{ model, field }">
+          {{ model[field] }}
         </template>
       </BasicForm>
     </div>
@@ -28,13 +20,12 @@
 </template>
 <script lang="ts">
   import { defineComponent, ref, nextTick } from 'vue';
-  import { TableImg } from '/@/components/Table';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
   import { useMessage } from '/@/hooks/web/useMessage';
-  import { checkDevice, selectCompanyById, auditCompany } from '/@/api/corporation/modal';
+  import { AddDevice, checkDevice } from '/@/api/corporation/modal';
   export default defineComponent({
-    components: { BasicModal, BasicForm, TableImg },
+    components: { BasicModal, BasicForm },
     props: {
       userData: { type: Object },
     },
@@ -42,7 +33,17 @@
       const modelRef = ref({});
       const num = ref(0);
       const { createMessage } = useMessage();
-      const { error, success } = createMessage; //success,
+      const { success, error } = createMessage;
+      // const debounce = (fn, delay) => {
+      //   var timer = null;
+      //   return function () {
+      //     var context = this, args = arguments;
+      //     clearTimeout(timer);
+      //     timer = setTimeout(function () {
+      //       fn.apply(context, args);
+      //     }, delay);
+      //   };
+      // }
       const [register, { closeModal }] = useModalInner((data) => {
         data && onDataReceive(data);
       });
@@ -67,64 +68,44 @@
       };
       const schemas: FormSchema[] = [
         {
-          field: 'name',
-          label: '信息标题',
-          slot: 'text',
-          component: 'Input',
-        },
-        {
-          field: 'contacts',
-          label: '联系人',
-          slot: 'text',
-          component: 'Input',
-        },
-        {
-          field: 'phone',
-          label: '手机号',
-          slot: 'text',
-          component: 'Input',
-        },
-        {
-          field: 'area',
-          label: '所属区域',
-          slot: 'text',
-          component: 'Input',
-        },
-        {
-          field: 'address',
-          label: '详细地址',
-          slot: 'text',
-          component: 'Input',
-        },
-        {
-          field: 'website',
-          label: '企业官网',
-          slot: 'text',
+          field: 'userName',
+          label: '企业名称',
+          slot: 'userName',
           component: 'Input',
         },
         {
           field: 'name',
-          label: '企业简介',
+          label: '企业账号',
           slot: 'name',
           component: 'Input',
         },
         {
-          field: 'logo',
-          label: '企业LOGO',
-          slot: 'iamge',
-          component: 'Input',
-        },
-        {
-          field: 'qualification',
-          label: '企业资质',
-          slot: 'iamge',
-          component: 'Input',
+          field: 'num',
+          component: 'InputNumber',
+          label: '设备数量',
+          colProps: {
+            span: 8,
+          },
+          componentProps: () => {
+            return {
+              // xxxx props schema, tableAction, formModel  checkDevice
+              min: 0,
+              onChange: numOnChange,
+            };
+          },
         },
       ];
       // let schemasList = []
       const [
         registerForm,
-        { setFieldsValue, resetFields, appendSchemaByField, removeSchemaByFiled },
+        {
+          setFieldsValue,
+          resetFields,
+          getFieldsValue,
+          validateFields,
+          appendSchemaByField,
+          removeSchemaByFiled,
+        },
       ] = useForm({
         labelWidth: 120,
         schemas,
@@ -133,26 +114,50 @@
           span: 24,
         },
       });
-      async function submitMolad(val) {
-        let res = await auditCompany({
-          id: modelRef.value.id,
-          state: val ? 1 : 2,
-        });
-        success(res);
-        closeModal();
+      async function submitMolad() {
+        let formData = {
+          ...getFieldsValue(),
+        };
+        let validate = false;
+        try {
+          const res = await validateFields();
+          validate = true;
+          console.log('passing', res, formData);
+        } catch (error: unknown) {
+          console.log('not passing', error);
+        }
+        if (validate) {
+          const { subNum, id, userName } = modelRef.value;
+          try {
+            const res = await AddDevice({
+              childName: null,
+              id,
+              subNum,
+              userName,
+            });
+            if (res.code == 200) {
+              success(res.message);
+              closeModal();
+            }
+          } catch (errors) {
+            error('errors');
+            console.log('not passing', error);
+          }
+        }
       }
-      async function onDataReceive(data) {
+      function onDataReceive(data) {
         // 方式1;
         resetFields();
-        let { id } = data.record;
-        let res = await selectCompanyById({
-          id,
-        });
-        console.log('setFieldsValue', res);
         setFieldsValue({
-          ...res,
+          ...data.record,
         });
+
+        // // 方式2
         modelRef.value = { ...data.record };
+
+        // setProps({
+        //   ...data.record,
+        // });
       }
       function numOnChange(event) {
         const value = Number(event);
@@ -213,7 +218,7 @@
         schemas,
         registerForm,
         numOnChange,
-        model: modelRef,
+        modelRef,
         handleVisibleChange,
         num,
         errorMsg: error,

src/views/dashboard/corporation/index.vue

@@ -35,7 +35,7 @@
           :actions="[
             {
               // icon: 'ri:money-cny-circle-fill',
-              label: t('routes.corporation.device'),
+              label: t('routes.corporation.recharge'),
               onClick: handleOpenModal.bind(null, 'charge', record),
             },
             {
@@ -54,6 +54,7 @@
       </template>
     </BasicTable>
     <chargeModal @register="registerChargeModal" />
+    <deviceModal @register="registerDeviceModal" />
     <SubaccountModal @reload="tablereload" @register="registerSubaccountModal" />
   </div>
 </template>
@@ -69,6 +70,7 @@
   import { ListApi, uploadLogoApi } from '/@/api/corporation/list';
   import { useModal } from '/@/components/Modal';
   import chargeModal from './chargeModal.vue';
+  import deviceModal from './deviceModal.vue';
   import SubaccountModal from './SubaccountModal.vue';
   import { Time } from '/@/components/Time';
 
@@ -78,10 +80,12 @@
       CropperAvatar,
       TableAction,
       chargeModal,
+      deviceModal,
       SubaccountModal,
       Time,
     },
     setup() {
+      const [registerDeviceModal, { openModal: openDeviceModal }] = useModal();
       const [registerChargeModal, { openModal: openChargeModal }] = useModal();
       const [registerSubaccountModal, { openModal: openSubaccountModal }] = useModal();
       const { t } = useI18n();
@@ -220,6 +224,7 @@
         t,
         registerTable,
         registerChargeModal,
+        registerDeviceModal,
         registerSubaccountModal,
         handleOpenModal,
         uploadApi: uploadApi as any,

src/views/dashboard/corporation/verify.vue

@@ -7,6 +7,9 @@
           {{ state || '审核中' }}
         </Tag>
       </template>
+      <template #time="{ record }">
+        <Time :value="record.createTime" mode="date" />
+      </template>
       <template #action="{ record }">
         <TableAction
           :actions="[
@@ -22,7 +25,7 @@
         />
       </template>
     </BasicTable>
-    <deviceModal @register="registerDeviceModal" />
+    <detailsModal @register="registerDeviceModal" />
   </div>
 </template>
 <script lang="ts">
@@ -30,19 +33,26 @@
   import { BasicTable, useTable, BasicColumn, FormProps, TableAction } from '/@/components/Table';
   import { uploadApi } from '/@/api/sys/upload';
   import { Tag } from 'ant-design-vue';
+  import { Time } from '/@/components/Time';
   import { ListVerifyApi } from '/@/api/corporation/list';
-  import deviceModal from './deviceModal.vue';
+  import detailsModal from './detailsModal.vue';
   import { useModal } from '/@/components/Modal';
 
   export default defineComponent({
-    components: { BasicTable, Tag, TableAction, deviceModal },
+    components: { BasicTable, Tag, TableAction, detailsModal, Time },
     setup() {
       const [registerDeviceModal, { openModal: openDeviceModal }] = useModal();
       const columns: BasicColumn[] = [
         {
           title: '提交日期',
           dataIndex: 'createTime',
+          slots: { customRender: 'time' },
           width: 180,
+          // editComponent: 'DatePicker',
+          // editComponentProps: {
+          //   valueFormat: 'YYYY-MM-DD',
+          //   format: 'YYYY-MM-DD',
+          // },
         },
         {
           title: '企业名称',

src/views/dashboard/product/addModal.vue

@@ -0,0 +1,85 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="register" title="新 增" @ok="handleOk">
+    <div class="pt-3px pr-3px">
+      <BasicForm @register="registerForm" :model="model" />
+    </div>
+  </BasicModal>
+</template>
+<script lang="ts">
+  import { defineComponent, ref } from 'vue';
+  import { saveItemApi } from '/@/api/product/category';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
+  const schemas: FormSchema[] = [
+    {
+      field: 'name',
+      component: 'Input',
+      label: '商品属性',
+      colProps: {
+        span: 18,
+      },
+      required: true,
+    },
+    {
+      field: 'sortOrder',
+      component: 'InputNumber',
+      label: '排序',
+      defaultValue: 1,
+      colProps: {
+        span: 24,
+      },
+    },
+  ];
+  export default defineComponent({
+    components: { BasicModal, BasicForm },
+    props: {
+      userData: { type: Object },
+    },
+    setup(props, context) {
+      const modelRef = ref({});
+      const [
+        registerForm,
+        {
+          // setFieldsValue,
+          getFieldsValue,
+        },
+      ] = useForm({
+        labelWidth: 120,
+        schemas,
+        showActionButtonGroup: false,
+        actionColOptions: {
+          span: 24,
+        },
+      });
+
+      const [register, { closeModal }] = useModalInner((data) => {
+        data && onDataReceive(data);
+      });
+
+      function onDataReceive(data) {
+        console.log('Data Received', data);
+        // 方式1;
+        // setFieldsValue({
+        //   field2: data.data,
+        //   field1: data.info,
+        // });
+
+        // // 方式2
+        modelRef.value = { field2: data.data, field1: data.info };
+
+        // setProps({
+        //   model:{ field2: data.data, field1: data.info }
+        // })
+      }
+
+      async function handleOk() {
+        let data = getFieldsValue();
+        let res = await saveItemApi(data);
+        context && context.emit('ok', res);
+        closeModal();
+      }
+
+      return { register, schemas, registerForm, model: modelRef, handleOk };
+    },
+  });
+</script>

src/views/dashboard/product/ref.vue

@@ -2,79 +2,188 @@
   <BasicTable @register="registerTable">
     <template #toolbar>
       <a-button type="primary" @click="handleCreate"> 新增商品分类</a-button>
-      <a-button type="warning" @click="expandAll">展开全部</a-button>
-      <a-button type="error" @click="collapseAll">折叠全部</a-button>
     </template>
-    <template #action="{ record }">
-      <TableAction
-        :actions="[
-          {
-            icon: 'clarity:note-edit-line',
-            onClick: handleEdit.bind(null, record),
-          },
-          {
-            icon: 'ant-design:delete-outlined',
-            color: 'error',
-            popConfirm: {
-              title: '是否确认删除',
-              confirm: handleDelete.bind(null, record),
-            },
-          },
-        ]"
-      />
+    <template #action="{ record, column }">
+      <TableAction :actions="createActions(record, column)" />
     </template>
   </BasicTable>
+  <addModal @register="registerModal" @ok="handleSaveAdd" />
 </template>
 
 <script lang="ts">
-  import { defineComponent } from 'vue'; // h
-  import { BasicTable, useTable, BasicColumn, TableAction } from '/@/components/Table';
-  import { categoryApi } from '/@/api/product/category';
+  import { defineComponent, ref } from 'vue'; // h
+  import {
+    BasicTable,
+    useTable,
+    BasicColumn,
+    TableAction,
+    EditRecordRow,
+    ActionItem,
+  } from '/@/components/Table';
+  import { attributeListApi, attributeDleteApi, updateItemApi } from '/@/api/product/category';
+  import { cloneDeep } from 'lodash-es';
   // import { Tag } from 'ant-design-vue';
-
   import { useI18n } from '/@/hooks/web/useI18n';
+  import { useModal } from '/@/components/Modal';
+  import addModal from './addModal.vue';
   import { useMessage } from '/@/hooks/web/useMessage';
 
   export default defineComponent({
-    components: { BasicTable, TableAction },
+    components: { BasicTable, TableAction, addModal },
     setup() {
-      const { createMessage } = useMessage();
-
+      const { createConfirm, createMessage: msg } = useMessage();
+      const [registerModal, { openModal }] = useModal();
+      const currentEditKeyRef = ref('');
       const { t } = useI18n();
-
+      console.log('registerModal', registerModal);
       const columns: BasicColumn[] = [
         {
           title: '商品属性',
-          dataIndex: 'id',
+          editRow: true,
+          dataIndex: 'name',
           fixed: 'left',
           width: 100,
         },
         {
           title: '排序',
-          dataIndex: 'orderNo',
+          dataIndex: 'sortOrder',
+          editComponent: 'InputNumber',
+          editRow: true,
           width: 50,
         },
       ];
 
-      const [registerTable, { expandAll, collapseAll }] = useTable({
+      const [registerTable, { expandAll, reload, collapseAll }] = useTable({
         title: '商品分类',
-        api: categoryApi,
+        api: attributeListApi,
         columns: columns,
         useSearchForm: true,
-        showTableSetting: true,
-        tableSetting: { fullScreen: true },
         showIndexColumn: false,
-        isTreeTable: true,
+        // rowSelection: { type: 'checkbox' },
         rowKey: 'id',
         bordered: true,
+        fetchSetting: {
+          pageField: 'page',
+          sizeField: 'limit',
+          listField: 'list',
+          totalField: 'totalCount',
+        },
+        formConfig: {
+          labelWidth: 66,
+          schemas: [
+            {
+              field: `name`,
+              label: `商品属性`,
+              component: 'Input',
+              colProps: {
+                xl: 6,
+                xxl: 6,
+              },
+            },
+          ],
+        },
+        actionColumn: {
+          width: 160,
+          title: 'Action',
+          dataIndex: 'action',
+          slots: { customRender: 'action' },
+        },
       });
-      function handleCreate() {}
-      function handleEdit() {}
-      function handleDelete() {}
+      async function handleCreate() {
+        openModal(true);
+      }
+      function handleEdit(record: EditRecordRow) {
+        currentEditKeyRef.value = record.key;
+        record.onEdit?.(true);
+      }
+      function handleDelete(record) {
+        createConfirm({
+          iconType: 'warning',
+          title: '警告',
+          content: `此操作将对${record.name}进行删除, 是否继续?`,
+          onOk: async () => {
+            let res = await attributeDleteApi(record.id);
+            console.log('res', res);
+            reload();
+          },
+        });
+      }
+      function handleCancel(record: EditRecordRow) {
+        currentEditKeyRef.value = '';
+        record.onEdit?.(false, false);
+      }
+      async function handleSaveAdd() {
+        console.log('handleSaveAdd');
+        reload();
+      }
+
+      async function handleSave(record: EditRecordRow) {
+        // 校验
+        msg.loading({ content: '正在保存...', duration: 0, key: 'saving' });
+        const valid = await record.onValid?.();
+        if (valid) {
+          try {
+            const data = cloneDeep(record.editValueRefs);
+            console.log(data);
+            //TODO 此处将数据提交给服务器保存
+            // ...
+            updateItemApi({
+              id: record.id,
+              ...data,
+            });
+
+            // 保存之后提交编辑状态
+            const pass = await record.onEdit?.(false, true);
+            if (pass) {
+              currentEditKeyRef.value = '';
+            }
+            msg.success({ content: '数据已保存', key: 'saving' });
+          } catch (error) {
+            msg.error({ content: '保存失败', key: 'saving' });
+          }
+        } else {
+          msg.error({ content: '请填写正确的数据', key: 'saving' });
+        }
+      }
+      function createActions(record: EditRecordRow, column: BasicColumn): ActionItem[] {
+        console.log('editable', record);
+        if (!record.editable) {
+          return [
+            {
+              label: '编辑',
+              icon: 'mdi:information-outline',
+              disabled: currentEditKeyRef.value ? currentEditKeyRef.value !== record.key : false,
+              onClick: handleEdit.bind(null, record),
+            },
+            {
+              label: '删除',
+              color: 'error',
+              icon: 'ant-design:delete-outlined',
+              disabled: currentEditKeyRef.value ? currentEditKeyRef.value !== record.key : false,
+              onClick: handleDelete.bind(null, record),
+            },
+          ];
+        }
+        return [
+          {
+            label: '保存',
+            onClick: handleSave.bind(null, record, column),
+          },
+          {
+            label: '取消',
+            popConfirm: {
+              title: '是否取消编辑',
+              confirm: handleCancel.bind(null, record, column),
+            },
+          },
+        ];
+      }
       return {
         registerTable,
-        createMessage,
+        createActions,
         t,
+        registerModal,
+        handleSaveAdd,
         handleCreate,
         handleEdit,
         handleDelete,