feat: 修改熟悉

cesss

ceessss

src/api/corporation/modal.ts

@@ -0,0 +1,52 @@
+import { defHttp } from '/@/utils/http/axios';
+import { selectUserListParam, checkDeiceParam, addDeiceParam } from './model';
+import type { Result } from '/#/axios';
+
+enum Api {
+  addDevice = '/zfb-api/zfb/company/addDevice',
+  checkDevice = '/zfb-api/zfb/company/checkDevice',
+  selectUserList = '/zfb-api/zfb/company/selectUserList',
+  saveSubUsers = '/zfb-api/zfb/company/saveSubUsers',
+}
+
+/**
+ * @description: Get sample list value
+ */
+
+export const AddDevice = (params: addDeiceParam) =>
+  defHttp.post<Result>({
+    url: Api.addDevice,
+    params,
+    headers: {
+      // @ts-ignore
+      ignoreCancelToken: true,
+    },
+  });
+
+export const checkDevice = (params: checkDeiceParam) =>
+  defHttp.post<Result>({
+    url: Api.checkDevice,
+    params,
+    headers: {
+      // @ts-ignore
+      ignoreCancelToken: true,
+    },
+  });
+export const selectUserList = (params: selectUserListParam) =>
+  defHttp.post<Result>({
+    url: Api.selectUserList,
+    params,
+    headers: {
+      // @ts-ignore
+      ignoreCancelToken: true,
+    },
+  });
+export const saveSubUsers = (params: selectUserListParam) =>
+  defHttp.post<Result>({
+    url: Api.saveSubUsers,
+    params,
+    headers: {
+      // @ts-ignore
+      ignoreCancelToken: true,
+    },
+  });

src/api/corporation/model.ts

@@ -3,7 +3,63 @@ import { BasicPageParams, BasicFetchResult } from '/@/api/model/baseModel';
  * @description: Request list interface parameters
  */
 export type PageParams = BasicPageParams;
+export interface addDeiceParam {
+  childName: string | null;
+  id: number;
+  subNum: number;
+  userName: string;
+}
+export interface checkDeiceParam {
+  childName: string | null;
+}
+
+export interface selectUserListParam {
+  id: number | null;
+}
+export interface SubAccountUsers {
+  id: number | null;
+  subNum: string | null;
+  subUsers: SubAccountUser[];
+}
 
+export interface SubAccountUser {
+  appid: string | number | null;
+  companyId: string | number | null;
+  createTime: string | number | null;
+  createUser: string | number | null;
+  fdkkPassword: string | number | null;
+  fdkkUser: string | number | null;
+  head: string | number | null;
+  id: number | null;
+  memoName: string | null;
+  message: string | number | null;
+  nickName: string | null;
+  phone: string | null;
+  state: string | number | null;
+  token: string | number | null;
+  type: string | number | null;
+  updateTime: string | number | null;
+  updateUser: string | number | null;
+  userName: string | null;
+  userPassword: string | number | null;
+}
+
+export interface ListItem {
+  id: number;
+  bgMusic: string;
+  cameraNum: string;
+  childName: string;
+  expirationDate: string;
+  expirationTime: string;
+  floorLogo: string;
+  name: string;
+  num: string;
+  point: string;
+  sceneLogo: string;
+  sceneNum: string;
+  subNum: string;
+  userName: string;
+}
 export interface ListItem {
   id: number;
   bgMusic: string;

src/components/Form/src/components/FormItem.vue

@@ -309,6 +309,7 @@
         const { itemProps, slot, render, field, suffix, component } = props.schema;
         const { labelCol, wrapperCol } = unref(itemLabelWidthProp);
         const { colon } = props.formProps;
+        console.log('itemProps', itemProps);
 
         if (component === 'Divider') {
           return (

src/components/Form/src/types/form.ts

@@ -10,7 +10,7 @@ import type { RowProps } from 'ant-design-vue/lib/grid/Row';
 export type FieldMapToTime = [string, [string, string], string?][];
 
 export type Rule = RuleObject & {
-  trigger?: 'blur' | 'change' | ['change', 'blur'];
+  trigger?: 'blur' | 'change' | 'blur' | ['change', 'blur', 'blur'];
 };
 
 export interface RenderCallbackParams {

src/views/dashboard/corporation/EditModal.vue

@@ -0,0 +1,73 @@
+<template>
+  <BasicModal
+    v-bind="$attrs"
+    @register="register"
+    title="修改子账号"
+    @visible-change="handleVisibleChange"
+    @ok="submitMolad"
+  >
+    <div class="pt-3px 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';
+  const schemas: FormSchema[] = [
+    {
+      field: 'memoName',
+      component: 'Input',
+      label: '姓名',
+      colProps: {
+        span: 24,
+      },
+    },
+    {
+      field: 'phone',
+      component: 'Input',
+      label: '手机号',
+      colProps: {
+        span: 24,
+      },
+    },
+  ];
+  export default defineComponent({
+    components: { BasicModal, BasicForm },
+    props: {
+      userData: { type: Object },
+    },
+    setup(props) {
+      const modelRef = ref({});
+      const [registerForm, { setFieldsValue, getFieldsValue }] = useForm({
+        labelWidth: 120,
+        schemas,
+        showActionButtonGroup: false,
+        actionColOptions: {
+          span: 24,
+        },
+      });
+
+      const [register] = useModalInner((data) => {
+        data && onDataReceive(data);
+      });
+      function submitMolad() {
+        console.log('handleSubmit', getFieldsValue());
+      }
+      function onDataReceive(data) {
+        console.log('Data Received', data);
+        // 方式1;
+        setFieldsValue({ ...data });
+        // // 方式2
+        modelRef.value = { ...data };
+      }
+
+      function handleVisibleChange(v) {
+        v && props.userData && nextTick(() => onDataReceive(props.userData));
+      }
+
+      return { register, submitMolad, schemas, registerForm, model: modelRef, handleVisibleChange };
+    },
+  });
+</script>

src/views/dashboard/corporation/SubaccountModal.vue

@@ -0,0 +1,204 @@
+<template>
+  <BasicModal
+    v-bind="$attrs"
+    @register="register"
+    title="设备"
+    @visible-change="handleVisibleChange"
+  >
+    <div class="pt-3px pr-3px">
+      <BasicForm @register="registerForm" :model="modelRef">
+        <template #userName="{ model, field }">
+          {{ model[field] }}
+        </template>
+        <template #name="{ model, field }">
+          {{ model[field] }}
+        </template>
+        <template #addeduser="{ model, field }">
+          {{ model[field] || 10 }}
+          <a-button type="primary" preIcon="ic:outline-person-add"> 新增子账号 </a-button>
+        </template>
+      </BasicForm>
+      <div class="table_list">
+        <BasicTable @register="registerTable">
+          <template #action="{ record }">
+            <TableAction
+              :actions="[
+                {
+                  label: '编辑',
+                  icon: 'mdi:account-edit-outline',
+                  onClick: handleDelete.bind(null, record, 'edit'),
+                },
+                {
+                  label: '解绑',
+                  icon: 'mdi:account-multiple-remove-outline',
+                  onClick: handleDelete.bind(null, record, 'unbond'),
+                },
+              ]"
+            />
+          </template>
+        </BasicTable>
+      </div>
+    </div>
+    <EditModal @register="registerEdit" />
+  </BasicModal>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, nextTick } from 'vue';
+  import { BasicModal, useModalInner, useModal } from '/@/components/Modal';
+  import { BasicTable, useTable, BasicColumn, TableAction } from '/@/components/Table';
+  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
+  import { selectUserList } from '/@/api/corporation/modal';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import EditModal from './EditModal.vue';
+  export default defineComponent({
+    components: { BasicModal, BasicForm, BasicTable, TableAction, EditModal },
+    props: {
+      userData: { type: Object },
+    },
+    setup(props) {
+      const { createConfirm } = useMessage();
+      const modelRef = ref({});
+      const columns: BasicColumn[] = [
+        {
+          title: '姓名',
+          dataIndex: 'memoName',
+          width: 100,
+        },
+        {
+          title: '手机号',
+          dataIndex: 'phone',
+          width: 150,
+        },
+      ];
+      const [registerTable, { setProps, reload }] = useTable({
+        title: '子账户列表',
+        api: selectUserList,
+        columns: columns,
+        rowKey: 'id',
+        fetchSetting: {
+          pageField: 'pageNum',
+          sizeField: 'pageSize',
+          listField: 'list',
+          totalField: 'total',
+        },
+        actionColumn: {
+          width: 160,
+          title: '操作',
+          dataIndex: 'action',
+          slots: { customRender: 'action' },
+        },
+      });
+      const schemas: FormSchema[] = [
+        {
+          field: 'userName',
+          component: 'Input',
+          label: '充值账号',
+          slot: 'userName',
+          labelWidth: 200,
+        },
+        {
+          field: 'name',
+          label: '企业账号',
+          slot: 'name',
+          component: 'Input',
+          labelWidth: 200,
+        },
+        {
+          field: 'subNum',
+          component: 'InputNumber',
+          label: '设备数量',
+          labelWidth: 200,
+          componentProps: () => {
+            return {
+              // xxxx props schema, tableAction, formModel  checkDevice
+              min: 0,
+              onChange: numOnChange,
+            };
+          },
+        },
+        {
+          field: 'addeduser',
+          label: '已添加字子号账号数',
+          labelWidth: 200,
+          slot: 'addeduser',
+          component: 'Input',
+        },
+      ];
+      const [
+        registerForm,
+        {
+          setFieldsValue,
+          resetFields,
+          // setProps,
+        },
+      ] = useForm({
+        labelWidth: 120,
+        schemas,
+        showActionButtonGroup: false,
+        actionColOptions: {
+          span: 24,
+        },
+      });
+      const [registerEdit, { openModal: EditModal }] = useModal();
+      const [register] = useModalInner((data) => {
+        data && onDataReceive(data);
+      });
+
+      function onDataReceive(data) {
+        console.log('Data Received', data.record);
+        // 方式1;
+        resetFields();
+        setFieldsValue({
+          ...data.record,
+        });
+
+        // // 方式2
+        modelRef.value = { ...data.record };
+        let { id } = data.record;
+        setProps({
+          searchInfo: {
+            id,
+          },
+        });
+        reload();
+      }
+      function numOnChange(event) {
+        console.log('numOnChange', event);
+      }
+      async function handleDelete(item, type) {
+        console.log('handleDelete', item, type);
+        if (type == 'edit') {
+          //编辑
+          const { memoName, phone } = item;
+          EditModal(true, {
+            memoName,
+            phone,
+          });
+        } else {
+          //解除
+          let confirm = await createConfirm({
+            iconType: 'warning',
+            title: '提示',
+            content: '确定要解绑该子账号？',
+          });
+          console.log('confirm', confirm);
+        }
+      }
+      function handleVisibleChange(v) {
+        v && props.userData && nextTick(() => onDataReceive(props.userData));
+      }
+
+      return {
+        register,
+        handleDelete,
+        registerEdit,
+        numOnChange,
+        registerTable,
+        schemas,
+        registerForm,
+        modelRef,
+        handleVisibleChange,
+      };
+    },
+  });
+</script>

src/views/dashboard/corporation/deviceModal.vue

@@ -0,0 +1,228 @@
+<template>
+  <BasicModal
+    v-bind="$attrs"
+    @register="register"
+    title="新增设备"
+    @ok="submitMolad"
+    @visible-change="handleVisibleChange"
+  >
+    <div class="pt-3px pr-3px">
+      <BasicForm @register="registerForm">
+        <template #userName="{ model, field }">
+          {{ model[field] }}
+        </template>
+        <template #name="{ model, field }">
+          {{ model[field] }}
+        </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';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { AddDevice, checkDevice } from '/@/api/corporation/modal';
+  export default defineComponent({
+    components: { BasicModal, BasicForm },
+    props: {
+      userData: { type: Object },
+    },
+    setup(props) {
+      const modelRef = ref({});
+      const num = ref(0);
+      const { createMessage } = useMessage();
+      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);
+      });
+
+      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: 'userName',
+          label: '企业名称',
+          slot: 'userName',
+          component: 'Input',
+        },
+        {
+          field: 'name',
+          label: '企业账号',
+          slot: 'name',
+          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,
+          getFieldsValue,
+          validateFields,
+          appendSchemaByField,
+          removeSchemaByFiled,
+        },
+      ] = useForm({
+        labelWidth: 120,
+        schemas,
+        showActionButtonGroup: false,
+        actionColOptions: {
+          span: 24,
+        },
+      });
+      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);
+          }
+        }
+      }
+      function onDataReceive(data) {
+        // 方式1;
+        resetFields();
+        setFieldsValue({
+          ...data.record,
+        });
+
+        // // 方式2
+        modelRef.value = { ...data.record };
+
+        // setProps({
+        //   ...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,
+        model: modelRef,
+        handleVisibleChange,
+        num,
+        errorMsg: error,
+      };
+    },
+  });
+</script>

src/views/dashboard/corporation/index.vue

@@ -36,24 +36,26 @@
             {
               // icon: 'ri:money-cny-circle-fill',
               label: '充值',
-              onClick: handleOpenChargeModal.bind(null, record),
+              onClick: handleOpenModal.bind(null, 'charge', record),
             },
             {
               // icon: 'icon-park-outline:devices',
               label: '设备',
-              onClick: () => {},
+              onClick: handleOpenModal.bind(null, 'device', record),
             },
             {
               // icon: 'mdi:account-group',
               color: 'error',
               label: '子账号',
-              onClick: handleOpenChargeModal.bind(null, record),
+              onClick: handleOpenModal.bind(null, 'sub_account', record),
             },
           ]"
         />
       </template>
     </BasicTable>
     <chargeModal @register="registerChargeModal" />
+    <deviceModal @register="registerDeviceModal" />
+    <SubaccountModal @register="registerSubaccountModal" />
   </div>
 </template>
 <script lang="ts">
@@ -67,13 +69,24 @@
   import { ListApi } 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';
 
   export default defineComponent({
-    components: { BasicTable, CropperAvatar, TableAction, chargeModal, Time },
+    components: {
+      BasicTable,
+      CropperAvatar,
+      TableAction,
+      chargeModal,
+      deviceModal,
+      SubaccountModal,
+      Time,
+    },
     setup() {
       const [registerChargeModal, { openModal: openChargeModal }] = useModal();
-
+      const [registerDeviceModal, { openModal: openDeviceModal }] = useModal();
+      const [registerSubaccountModal, { openModal: openSubaccountModal }] = useModal();
       const columns: BasicColumn[] = [
         {
           title: 'ID',
@@ -185,16 +198,27 @@
           slots: { customRender: 'action' },
         },
       });
-      function handleOpenChargeModal(record: Recordable) {
-        openChargeModal(true, {
-          record,
-        });
+      function handleOpenModal(val, record: Recordable) {
+        let listKey = {
+          charge: openChargeModal,
+          device: openDeviceModal,
+          sub_account: openSubaccountModal,
+        };
+        listKey[val] &&
+          listKey[val](true, {
+            record,
+          });
+        // openChargeModal(true, {
+        //   record,
+        // });
       }
 
       return {
         registerTable,
         registerChargeModal,
-        handleOpenChargeModal,
+        registerDeviceModal,
+        registerSubaccountModal,
+        handleOpenModal,
         uploadApi: uploadApi as any,
       };
     },