feat: 修改api

cesss

ceessss

.env.development

@@ -7,6 +7,7 @@ VITE_PUBLIC_PATH = /
 # Cross-domain proxy, you can configure multiple
 # Please note that no line breaks
 VITE_PROXY = [["/basic-api","http://192.168.0.47:8190"],["/upload","http://localhost:3300/upload"],["/zfb-api","http://192.168.0.47:7081"]]
+#["/zfb-api","http://192.168.0.47:7081"]]
 # VITE_PROXY=[["/api","https://vvbin.cn/test"]]
 
 # Delete console

docker/setting/proxy.conf

@@ -3,5 +3,6 @@ location /basic-api/ {
 }
 
 location /zfb-api/ {
+    # proxy_pass http://192.168.0.47:7081/;
     proxy_pass http://192.168.0.47:7081/;
 }

mock/company/selectCompanyNum.ts

@@ -68,7 +68,7 @@ export default [
   {
     url: '/basic-api/mock/zfb/company/selectCompanyNum',
     timeout: 1000,
-    method: 'get',
+    method: 'post',
     response: ({ query }) => {
       const { page = 1, pageSize = 20 } = query;
       return resultPageSuccess(page, pageSize, demoList);

src/api/corporation/modal.ts

@@ -1,14 +1,22 @@
 import { defHttp } from '/@/utils/http/axios';
-import { selectUserListParam, checkDeiceParam, addDeiceParam } from './model';
+import {
+  selectUserListParam,
+  checkDeiceParam,
+  addDeiceParam,
+  checkUserParam,
+  SubAccountUsers,
+  selectCompanyParam,
+} 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',
+  checkUserAddAble = '/zfb-api/zfb/company/back/checkUserAddAble',
   saveSubUsers = '/zfb-api/zfb/company/saveSubUsers',
+  selectCompanyById = '/zfb-api/zfb/company/selectCompanyById',
 }
-
 /**
  * @description: Get sample list value
  */
@@ -41,7 +49,28 @@ export const selectUserList = (params: selectUserListParam) =>
       ignoreCancelToken: true,
     },
   });
-export const saveSubUsers = (params: selectUserListParam) =>
+
+export const checkUserAddAble = (params: checkUserParam) =>
+  defHttp.post<Result>({
+    url: Api.checkUserAddAble,
+    params,
+    headers: {
+      // @ts-ignore
+      ignoreCancelToken: true,
+    },
+  });
+
+export const selectCompanyById = (params: selectCompanyParam) =>
+  defHttp.post<Result>({
+    url: Api.selectCompanyById,
+    params,
+    headers: {
+      // @ts-ignore
+      ignoreCancelToken: true,
+    },
+  });
+
+export const saveSubUsers = (params: SubAccountUsers) =>
   defHttp.post<Result>({
     url: Api.saveSubUsers,
     params,

src/api/corporation/model.ts

@@ -15,13 +15,22 @@ export interface checkDeiceParam {
 
 export interface selectUserListParam {
   id: number | null;
+  page: number | null;
+  limit: number | null;
 }
+export interface checkUserParam {
+  phone: string | null;
+}
+
 export interface SubAccountUsers {
   id: number | null;
   subNum: string | null;
   subUsers: SubAccountUser[];
 }
 
+export interface selectCompanyParam {
+  id: number | null;
+}
 export interface SubAccountUser {
   appid: string | number | null;
   companyId: string | number | null;

src/locales/lang/en/routes/corporation.ts

@@ -0,0 +1,5 @@
+export default {
+  recharge: '充值',
+  device: '设备',
+  sub_account: '子账号',
+};

src/locales/lang/zh-CN/routes/corporation.ts

@@ -0,0 +1,5 @@
+export default {
+  recharge: '充值',
+  device: '设备',
+  sub_account: '子账号',
+};

src/views/dashboard/corporation/AddModal.vue

@@ -0,0 +1,110 @@
+<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';
+  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 { 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/DetailModal.vue

@@ -0,0 +1,179 @@
+<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/SubaccountModal.vue

@@ -3,6 +3,7 @@
     v-bind="$attrs"
     @register="register"
     title="设备"
+    @ok="saveTable"
     @visible-change="handleVisibleChange"
   >
     <div class="pt-3px pr-3px">
@@ -13,21 +14,31 @@
         <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 #addeduser>
+          {{ myData.pagination.total || 0 }}
+          <a-button @click="openTargetModal()" type="primary" preIcon="ic:outline-person-add">
+            新增子账号
+          </a-button>
         </template>
       </BasicForm>
       <div class="table_list">
-        <BasicTable @register="registerTable" :canResize="true">
+        <BasicTable
+          title="子账户列表"
+          :columns="columns"
+          :showIndexColumn="false"
+          :dataSource="myData.TableData"
+          :bordered="true"
+          :pagination="false"
+          :beforeEditSubmit="beforeEditSubmit"
+        >
           <template #action="{ record }">
             <TableAction
               :actions="[
-                {
-                  label: '编辑',
-                  icon: 'mdi:account-edit-outline',
-                  onClick: handleDelete.bind(null, record, 'edit'),
-                },
+                // {
+                //   label: '编辑',
+                //   icon: 'mdi:account-edit-outline',
+                //   onClick: handleDelete.bind(null, record, 'edit'),
+                // },
                 {
                   label: '解绑',
                   icon: 'mdi:account-multiple-remove-outline',
@@ -37,65 +48,91 @@
             />
           </template>
         </BasicTable>
+        <AddModal @register="register4" />
       </div>
     </div>
     <EditModal @register="registerEdit" />
   </BasicModal>
 </template>
 <script lang="ts">
-  import { defineComponent, ref, nextTick } from 'vue';
+  import {
+    defineComponent,
+    ref,
+    reactive,
+    nextTick,
+    onMounted,
+    unref,
+    ComponentOptions,
+    shallowRef,
+    computed,
+  } from 'vue';
   import { BasicModal, useModalInner, useModal } from '/@/components/Modal';
-  import { BasicTable, useTable, BasicColumn, TableAction } from '/@/components/Table';
+  import { BasicTable, BasicColumn, TableAction } from '/@/components/Table';
   import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
-  import { selectUserList } from '/@/api/corporation/modal';
+  import { selectUserList, saveSubUsers } from '/@/api/corporation/modal';
   import { useMessage } from '/@/hooks/web/useMessage';
   import EditModal from './EditModal.vue';
+  import { tableState } from './types/hooks';
+  import AddModal from './AddModal.vue';
   export default defineComponent({
-    components: { BasicModal, BasicForm, BasicTable, TableAction, EditModal },
+    components: { BasicModal, BasicForm, BasicTable, AddModal, TableAction, EditModal },
     props: {
       userData: { type: Object },
     },
-    setup(props) {
-      const { createConfirm } = useMessage();
+    emits: ['reload'],
+    setup(props, context) {
+      const { createConfirm, createMessage } = useMessage();
+      const currentModal = shallowRef<Nullable<ComponentOptions>>(null);
+      const [register4, { openModal: addopenModal }] = useModal();
       const modelRef = ref({});
       // const editList = ref({
       //   list:[]
       // })
+      const myData = reactive<tableState>({
+        TableData: [],
+        subNum: null,
+        id: null,
+        pagination: {
+          total: 0,
+          pageSize: 9999,
+          current: 1,
+        },
+      });
+      const getPagination = computed(() => {
+        const { total, pageSize, current } = myData.pagination;
+        return {
+          total: total,
+          pageSize,
+          //size: 'small',
+          current: unref(current),
+          onChange(page) {
+            myData.pagination.current = page;
+            getApiList();
+          },
+        };
+      });
       const columns: BasicColumn[] = [
         {
           title: '姓名',
           dataIndex: 'memoName',
-          width: 100,
+          edit: true,
+          editRule: true,
+          width: 200,
         },
         {
           title: '手机号',
+          edit: true,
+          editRule: true,
+          width: 200,
           dataIndex: 'phone',
-          width: 150,
         },
-      ];
-      const [registerTable, { setProps, reload }] = useTable({
-        title: '子账户列表',
-        api: selectUserList,
-        pagination: false,
-        columns: columns,
-        rowKey: 'id',
-        fetchSetting: {
-          pageField: 'pageNum',
-          sizeField: 'pageSize',
-          listField: 'list',
-          totalField: 'total',
-        },
-        afterFetch: (T) => {
-          console.log('afterFetch', T);
-          return T;
-        },
-        actionColumn: {
-          width: 160,
+        {
           title: '操作',
-          dataIndex: 'action',
+          dataIndex: '',
           slots: { customRender: 'action' },
+          width: 120,
         },
-      });
+      ];
       const schemas: FormSchema[] = [
         {
           field: 'userName',
@@ -148,27 +185,21 @@
         },
       });
       const [registerEdit, { openModal: EditModal }] = useModal();
-      const [register] = useModalInner((data) => {
+      const [register, { closeModal }] = useModalInner((data) => {
         data && onDataReceive(data);
       });
 
       function onDataReceive(data) {
         console.log('Data Received', data.record);
         // 方式1;
+        let { id, subNum } = data.record;
         resetFields();
         setFieldsValue({
           ...data.record,
         });
-
-        // // 方式2
-        modelRef.value = { ...data.record };
-        let { id } = data.record;
-        setProps({
-          searchInfo: {
-            id,
-          },
-        });
-        reload();
+        myData.id = id;
+        myData.subNum = subNum;
+        getApiList();
       }
       function numOnChange(event) {
         console.log('numOnChange', event);
@@ -195,20 +226,78 @@
           console.log('confirm', confirm);
         }
       }
+      function pageChange(page, d, a) {
+        console.log('pageChange', page, d, a);
+        myData.pagination.current = page;
+        getApiList();
+      }
+      async function getApiList() {
+        const { current, pageSize } = myData.pagination;
+        let res = await selectUserList({
+          id: myData.id,
+          page: current || 1,
+          limit: pageSize || 10,
+        });
+        myData.TableData = res.list || [];
+        myData.pagination.total = res.totalCount || 0;
+        console.log('selectUserList', res, myData);
+      }
+      async function beforeEditSubmit({ record, index, key, value }) {
+        myData.TableData[index][key] = value;
+        console.log('单元格数据正在准备提交', record, myData.TableData[index]);
+        return true;
+      }
       function handleVisibleChange(v) {
         v && props.userData && nextTick(() => onDataReceive(props.userData));
       }
-
+      function openTargetModal() {
+        console.log('openTargetModal');
+        addopenModal(true, {
+          addList: (val) => {
+            console.log('addList', val, myData.subNum > myData.pagination.total);
+            if (myData.subNum > myData.pagination.total) {
+              myData.TableData.push(val);
+              console.log('addList', val, myData.TableData);
+            } else {
+              createMessage.error('子账号数量已满!');
+            }
+          },
+        });
+      }
+      async function saveTable() {
+        let res = await saveSubUsers({
+          id: myData.id,
+          subNum: myData.subNum,
+          subUsers: myData.TableData,
+        });
+        console.log('saveTable', res, context);
+        context.emit('reload');
+        closeModal();
+      }
+      onMounted(async () => {
+        myData.id && getApiList();
+      });
       return {
         register,
         handleDelete,
         registerEdit,
         numOnChange,
-        registerTable,
+        getApiList,
+        pageChange,
+        myData,
+        getPagination,
         schemas,
+        columns,
         registerForm,
         modelRef,
         handleVisibleChange,
+        beforeEditSubmit,
+        register4,
+        openTargetModal,
+        currentModal,
+        addopenModal,
+        saveTable,
+        closeModal,
       };
     },
   });

src/views/dashboard/corporation/chargeModal.vue

@@ -29,7 +29,6 @@
         // offset,
       },
       componentProps: {
-        // readOnly: true,
         disabled: true,
       },
     },

src/views/dashboard/corporation/deviceModal.vue

@@ -34,16 +34,6 @@
       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);
       });

src/views/dashboard/corporation/index.vue

@@ -35,18 +35,18 @@
           :actions="[
             {
               // icon: 'ri:money-cny-circle-fill',
-              label: '充值',
+              label: t('routes.corporation.device'),
               onClick: handleOpenModal.bind(null, 'charge', record),
             },
             {
               // icon: 'icon-park-outline:devices',
-              label: '设备',
+              label: t('routes.corporation.device'),
               onClick: handleOpenModal.bind(null, 'device', record),
             },
             {
               // icon: 'mdi:account-group',
               color: 'error',
-              label: '子账号',
+              label: t('routes.corporation.sub_account'),
               onClick: handleOpenModal.bind(null, 'sub_account', record),
             },
           ]"
@@ -55,10 +55,11 @@
     </BasicTable>
     <chargeModal @register="registerChargeModal" />
     <deviceModal @register="registerDeviceModal" />
-    <SubaccountModal @register="registerSubaccountModal" />
+    <SubaccountModal @reload="tablereload" @register="registerSubaccountModal" />
   </div>
 </template>
 <script lang="ts">
+  import { useI18n } from '/@/hooks/web/useI18n';
   import { defineComponent } from 'vue';
   import { BasicTable, useTable, BasicColumn, FormProps, TableAction } from '/@/components/Table';
   // import { CollapseContainer } from '/@/components/Container';
@@ -87,6 +88,7 @@
       const [registerChargeModal, { openModal: openChargeModal }] = useModal();
       const [registerDeviceModal, { openModal: openDeviceModal }] = useModal();
       const [registerSubaccountModal, { openModal: openSubaccountModal }] = useModal();
+      const { t } = useI18n();
       const columns: BasicColumn[] = [
         {
           title: 'ID',
@@ -174,7 +176,7 @@
         ],
       };
       // { getForm }
-      const [registerTable] = useTable({
+      const [registerTable, { reload }] = useTable({
         title: '企业账号',
         api: ListApi,
         columns: columns,
@@ -198,6 +200,10 @@
           slots: { customRender: 'action' },
         },
       });
+      function tablereload() {
+        console.log('tablereload');
+        reload();
+      }
       function handleOpenModal(val, record: Recordable) {
         let listKey = {
           charge: openChargeModal,
@@ -214,12 +220,14 @@
       }
 
       return {
+        t,
         registerTable,
         registerChargeModal,
         registerDeviceModal,
         registerSubaccountModal,
         handleOpenModal,
         uploadApi: uploadApi as any,
+        tablereload,
       };
     },
   });

src/views/dashboard/corporation/types/hooks.ts

@@ -0,0 +1,29 @@
+import type { PaginationProps } from '/@/components/Table/src/types/pagination';
+export interface tableState {
+  TableData: tableList[];
+  id: number | null;
+  pagination: PaginationProps;
+  subNum: number | null;
+}
+
+export interface tableList {
+  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;
+}