登录存储token

src/api/DemoApi.ts

@@ -7,132 +7,52 @@
  * @FilePath: \uniapp-vue3-fant-ts\src\api\DemoApi.ts
  * 记得注释
  */
-import http from '@/http/HttpClient'
-import BaseResponse from '@/model/BaseResponse'
-import Chanel from '@/model/Chanel'
-import UserInfo from '@/model/UserInfo'
+import http from '@/http/HttpClient';
+import BaseResponse from '@/model/BaseResponse';
+import Chanel from '@/model/Chanel';
+import UserInfo from '@/model/UserInfo';
 // 这里将API方法统一管理
 export default class DemoApi {
-  /**
-   * 登录
-   */
-  static login(data): Promise<BaseResponse<UserInfo>> {
+  // 获取项目名称
+  static getProjectNameList(data): Promise<BaseResponse<UserInfo>> {
     return http
       .server(data)
-      .get('bi-api/report/dataapi/login?phone=' + data.mobile + '&name=' + data.name)
+      .get(
+        'bi-api/report/dataapi/project_info?date=202402&month=202401&themonth=202402&quarter=20240&year=2024&theyear=2024&today=20240202&yesterday=20240201&lart30=20240103&startTime=202302&endTime=202401'
+      )
       .then((res) => {
-        return res.data
-      })
+        return res.data;
+      });
   }
+  //  获取客户列表 getCustomerList
 
-  static leaderLogin(data): Promise<BaseResponse<UserInfo>> {
+  static getCustomerList(data): Promise<BaseResponse<UserInfo>> {
     return http
       .server(data)
-      .get('bi-api/report/dataapi/dirverLeader?phone=' + data.mobile + '&name=' + data.name)
+      .get(
+        'bi-api/report/dataapi/customerinfo_api?date=202402&month=202401&themonth=202402&quarter=20240&year=2024&theyear=2024&today=20240202&yesterday=20240201&lart30=20240103&startTime=202302&endTime=202401'
+      )
       .then((res) => {
-        return res.data
-      })
+        return res.data;
+      });
   }
 
-  /**
-   * 初始化
-   */
-  static init(abortRequest: 'same' | 'all' | 'none' = 'none'): Promise<BaseResponse<Chanel[]>> {
-    return http
-      .server(abortRequest)
-      .post('api/init', {}, {})
-      .then((res) => {
-        return res.data
-      })
-  }
-
-  // 项目列表
-  static projectList(data): Promise<BaseResponse<Chanel[]>> {
+  // config 结算管理 接口
+  static getConfig(data): Promise<BaseResponse<Chanel[]>> {
     return http
       .server(data)
-      .get('bi-api/report/dataapi/xiangmu?mobile=' + data.COL_4, {})
+      .get('visual-api/paas/visualdev/OnlineDev/' + data + '/Config')
       .then((res) => {
-        return res.data
-      })
+        return res.data;
+      });
   }
-
-  // 客户列表
-  static customerList(data): Promise<BaseResponse<Chanel[]>> {
+  // 项目列表
+  static getFormDataList(data): Promise<BaseResponse<Chanel[]>> {
     return http
       .server(data)
-      .get('bi-api/report/dataapi/kehu?xiangmu_name=' + data.COL_1, {})
-      .then((res) => {
-        return res.data
-      })
-  }
-
-  // 油品列表
-  static oilList(): Promise<BaseResponse<Chanel[]>> {
-    return http
-      .server()
-      .get('bi-api/report/dataapi/oilList', {})
-      .then((res) => {
-        return res.data
-      })
-  }
-
-  // 提交数据
-  static submit(data): Promise<BaseResponse<Chanel[]>> {
-    return http
-      .server()
-      .post('/visual-api/paas/visualdev/OnlineDev/7164c3e7895f49fd0c4e2742e81cb726', data, {})
-      .then((res) => {
-        return res.data
-      })
-  }
-
-  static duizhangsubmit(data): Promise<BaseResponse<Chanel[]>> {
-    return http
-      .server()
-      .post('/visual-api/paas/visualdev/OnlineDev/63af99d0ee724d149a30b9a782397844', data, {})
-      .then((res) => {
-        return res.data
-      })
-  }
-
-  // 加油历史纪录
-  static history(data): Promise<BaseResponse<Chanel[]>> {
-    return http
-      .server()
-      .get('bi-api/report/dataapi/history?mobile=' + data.mobile, {})
-      .then((res) => {
-        return res.data
-      })
-  }
-
-  // 队长加油历史纪录
-  static duizhanghistory(data): Promise<BaseResponse<Chanel[]>> {
-    return http
-      .server()
-      .get('bi-api/report/dataapi/duizhanghistory?mobile=' + data.mobile, {})
-      .then((res) => {
-        return res.data
-      })
-  }
-
-  // 采购管理
-  static purchase(data): Promise<BaseResponse<Chanel[]>> {
-    return http
-      .server()
-      .get('bi-api/report/dataapi/odsbuy?xiangmu_id=' + data.xiangmu_id, {})
-      .then((res) => {
-        return res.data
-      })
-  }
-
-  static qiumidu(data) {
-    return http
-      .server()
-      .get(`bi-api/report/dataapi/qiumidu`, {
-        params: data
-      })
+      .post('bi-api/cube/browser/' + data.dbLinkId)
       .then((res) => {
-        return res.data
-      })
+        return res.data;
+      });
   }
 }

src/http/HttpClient.ts

@@ -28,6 +28,7 @@ export default class ApiClient {
         request.headers ? (request.headers['Content-Type'] = 'application/json') : (request.headers = { 'Content-Type': 'application/json' })
         // 设置请求唯一标识（便于查询请求日志）
         request.headers.trace_id = new Date().getTime()
+        request.headers['Blade-Auth'] = 'bearer ' + uni.getStorageSync('token') // 从本地缓存中获取token
         switch (abortRequest) {
           case 'all':
             axiosCancelToken.removeAllRequest()

src/manifest.json

@@ -42,7 +42,7 @@
     },
     "quickapp" : {},
     "mp-weixin" : {
-        "appid" : "wx45d2df0e3e05e9aa",
+        "appid" : "wx72a100f9e8923277",
         "setting" : {
             "urlCheck" : false
         },

src/pages.json

@@ -79,6 +79,21 @@
         "navigationStyle": "default",
         "navigationBarTitleText": "司机加油记录"
       }
+    },
+
+    {
+      "path": "pages/settlement/list",
+      "style": {
+        "navigationStyle": "default",
+        "navigationBarTitleText": "结算管理"
+      }
+    },
+    {
+      "path": "pages/settlement/form",
+      "style": {
+        "navigationStyle": "default",
+        "navigationBarTitleText": "结算管理"
+      }
     }
   ],
   "tabBar": {

src/pages/home/Home.vue

@@ -15,7 +15,7 @@
         <wd-cell-group border>
           <template>
             <wd-cell title="采购管理" is-link icon="edit" to="/pages/publish/Publish" />
-            <wd-cell title="结算管理" is-link icon="spool" to="/pages/home/history" />
+            <wd-cell title="结算管理" is-link icon="spool" to="/pages/settlement/list" />
             <wd-cell title="回款打款管理" is-link icon="spool" to="/pages/home/history" />
             <wd-cell title="油品信息管理" is-link icon="spool" to="/pages/home/history" />
           </template>

src/pages/login/Login.vue

@@ -21,7 +21,15 @@
           :maxlength="20"
         ></wd-input>
         <view class="border border-full h-1"></view>
-        <wd-input key="username" label-width="115rpx" label="密码：" show-password v-model="password" clearable placeholder="请输入密码"></wd-input>
+        <wd-input
+          key="username"
+          label-width="115rpx"
+          label="密码："
+          show-password
+          v-model="password"
+          clearable
+          placeholder="请输入密码"
+        ></wd-input>
         <wd-input
           key="username"
           label-width="115rpx"
@@ -40,8 +48,14 @@
           <view class="h-20"></view>
           <wd-button size="large" block type="success" @click="doLogin">登录</wd-button>
           <view class="h-20"></view>
-          <view style="color: #333; font-size: 28rpx" class="text-center" @click="openPrivacyContract">
-            <wd-checkbox :modelValue="isAuth" shape="square"><text style="color: #333">《用户隐私保护指引》</text></wd-checkbox>
+          <view
+            style="color: #333; font-size: 28rpx"
+            class="text-center"
+            @click="openPrivacyContract"
+          >
+            <wd-checkbox :modelValue="isAuth" shape="square">
+              <text style="color: #333">《用户隐私保护指引》</text>
+            </wd-checkbox>
           </view>
         </view>
       </view>
@@ -50,28 +64,30 @@
 </template>
 
 <script lang="ts" setup>
-import { useToast } from 'wot-design-uni/components/wd-toast'
-import md from 'js-md5'
-const username = ref<string>('') // 用户名
-const name = ref<string>('') // 密码
-const password = ref<string>('')
+import { useToast } from 'wot-design-uni/components/wd-toast';
+import md from 'js-md5';
+const username = ref<string>(''); // 用户名
+const name = ref<string>(''); // 密码
+const password = ref<string>('');
 // 验证码
-const code = ref('')
-const type = ref<number>(0) // 单选框
-const toast = useToast()
-const { userInfo } = storeToRefs(useAuthStore()) // 解构pinia的store
-const router = useRouter() // 路由
+const code = ref('');
+const type = ref<number>(0); // 单选框
+const toast = useToast();
+const { userInfo } = storeToRefs(useAuthStore()); // 解构pinia的store
+const router = useRouter(); // 路由
 
 // 登录按钮是否禁用
 const disabled = computed(() => {
-  return !username.value || !name.value || !code.value
-})
+  return !username.value || !name.value || !code.value;
+});
 // 验证码图片地址
-const codeSrc = ref<string>('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7')
-const codeKeyData = ref<string>('')
+const codeSrc = ref<string>(
+  'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
+);
+const codeKeyData = ref<string>('');
 // 验证码焦点
-const codeFocus = ref(false)
-const codekey = ref('')
+const codeFocus = ref(false);
+const codekey = ref('');
 // 获取验证码
 function getCode() {
   // 获取image验证码
@@ -79,65 +95,69 @@ function getCode() {
     url: 'https://miniapp.zhangmushiye.com/api/blade-auth/oauth/captcha',
     method: 'GET',
     success: (res) => {
-      codeSrc.value = res.data.image
-      codeKeyData.value = res.data.key
-    }
-  })
+      codeSrc.value = res.data.image;
+      codeKeyData.value = res.data.key;
+    },
+  });
 }
-getCode()
+getCode();
 
 // 登录接口
 async function doLogin() {
   if (!isAuth.value) {
-    toast.error('请先阅读《用户隐私保护指引》')
-    return
+    toast.error('请先阅读《用户隐私保护指引》');
+    return;
   }
-  toast.loading({ loadingType: 'ring', msg: '登录中' })
+  toast.loading({ loadingType: 'ring', msg: '登录中' });
   uni.request({
-    url: `https://miniapp.zhangmushiye.com/api/blade-auth/oauth/token?password=${md(password.value)}&username=${username.value}&tenantId=000000`,
+    url: `https://miniapp.zhangmushiye.com/api/blade-auth/oauth/token?password=${md(
+      password.value
+    )}&username=${username.value}&tenantId=000000`,
     data: {
       password: md(password.value),
       username: username.value,
-      tenantId: '000000'
+      tenantId: '000000',
     },
     method: 'post',
     header: {
       'Captcha-Key': codeKeyData.value,
-      'Captcha-Code': code.value
+      'Captcha-Code': code.value,
     },
     success: (res) => {
-      console.log('🚀 ~ doLogin ~ res:', res)
+      console.log('🚀 ~ doLogin ~ res:', res);
       if (res.data.error_code === 400) {
-        toast.close()
-        toast.error(res.data.error_description)
-        getCode()
-        return
+        toast.close();
+        toast.error(res.data.error_description);
+        getCode();
+        return;
       }
       if (res.data.access_token) {
-        toast.close()
-        toast.success('登录成功')
-        userInfo.value = res.data
+        toast.close();
+        toast.success('登录成功');
+        userInfo.value = res.data;
+        // 存储token到本地缓存
+        uni.setStorageSync('token', res.data.access_token);
         // pages/home/Home
         uni.switchTab({
-          url: '/pages/home/Home'
-        })
+          url: '/pages/home/Home',
+        });
       }
-    }
-  })
+    },
+  });
 }
 
 // 隐私是否授权
-const isAuth = ref(false)
+const isAuth = ref(false);
 const openPrivacyContract = () => {
   wx.openPrivacyContract({
     success: (res) => {
-      isAuth.value = true
+      isAuth.value = true;
     },
     fail: (err) => {
-      isAuth.value = false
-    }
-  })
-}
+      isAuth.value = false;
+    },
+  });
+};
 </script>
 
 <style lang="scss" scoped>

src/pages/settlement/form.vue

@@ -0,0 +1,4 @@
+<template>
+  <view class="settlement-form"></view>
+</template>
+<script setup lang="ts"></script>

src/pages/settlement/list.vue

@@ -0,0 +1,165 @@
+<template>
+  <view class="settlement-form">
+    <wd-search v-model="value" title="搜索" @change="searchChange" @focus="searchFocus">
+      <template #prefix>
+        <wd-popover v-model="show" mode="menu" :content="menu" @menuclick="changeSearchType">
+          <view class="search-type">
+            <text>{{ searchType }}</text>
+            <wd-icon custom-class="icon-arrow" name="fill-arrow-down"></wd-icon>
+          </view>
+        </wd-popover>
+      </template>
+    </wd-search>
+    <wd-action-sheet
+      v-model="showSheet"
+      :title="searchType"
+      :actions="actions"
+      @close="close"
+      @select="select"
+    />
+  </view>
+</template>
+<script setup lang="ts">
+import DemoApi from '@/api/DemoApi';
+import { ref } from 'vue';
+import { useToast } from 'wot-design-uni';
+const show = ref<boolean>(false);
+const searchType = ref<string>('项目名称');
+const value = ref<string>('');
+const menu = ref([
+  {
+    content: '项目名称',
+  },
+  {
+    content: '油品名称',
+  },
+  {
+    content: '客户名称',
+  },
+]);
+const showSheet = ref<boolean>(false);
+function changeSearchType({ item, index }) {
+  searchType.value = item.content;
+  show.value = false;
+  showSheet.value = true;
+  if (index === 0) {
+    actions.value = projectList.value;
+  } else if (index === 1) {
+    actions.value = oilList.value;
+  } else if (index === 2) {
+    actions.value = userList.value;
+  }
+}
+function searchFocus() {
+  showSheet.value = true;
+}
+function searchChange(value) {
+  // 如果输入框为空则清空 searchForm
+  if (!value) {
+    searchForm.value = {
+      projectName: '',
+      oilName: '',
+      customerName: '',
+    };
+  }
+}
+const actions = ref([]);
+// 油品名称
+const oilList = ref([{ name: '柴油' }, { name: '汽油' }]);
+// 客户名称
+const userList = ref([]);
+// 获取客户列表
+const getUserList = () => {
+  DemoApi.getCustomerList().then((res) => {
+    userList.value = res.data.map((item) => {
+      return { name: item.COL_ALIAS_1 };
+    });
+  });
+};
+getUserList();
+const projectList = ref([]);
+const getProjectList = () => {
+  // 获取项目列表
+  DemoApi.getProjectNameList().then((res) => {
+    projectList.value = res.data.map((item) => {
+      return { name: item.项目名称 };
+    });
+    actions.value = projectList.value;
+  });
+};
+getProjectList();
+
+function close() {
+  showSheet.value = false;
+}
+const searchForm = ref({
+  projectName: '',
+  oilName: '',
+  customerName: '',
+});
+const toast = useToast();
+
+function select({ item, index }) {
+  showSheet.value = false;
+  if (searchType.value === '项目名称') {
+    searchForm.value.projectName = item.name;
+  } else if (searchType.value === '油品名称') {
+    searchForm.value.oilName = item.name;
+  } else if (searchType.value === '客户名称') {
+    searchForm.value.customerName = item.name;
+  }
+  value.value = item.name;
+}
+
+// 获取结算管理列表
+const settlementList = ref([]);
+const tableData = ref([]);
+const getSettlementList = () => {
+  DemoApi.getConfig('4d62523c9ef74cdacb90146125929f37').then((res) => {
+    let { dbLinkId } = res.data;
+
+    tableData.value = JSON.parse(res.data.tables || '[]');
+    // 匹配fieldName == menu name的值 并且再menu添加 fieldId
+    menu.value.map((item) => {
+      tableData.value.map((table) => {
+        if (table.fieldName === item.content) {
+          item.fieldId = table.fieldId;
+        }
+      });
+    });
+    const params = {
+      dbLinkId,
+    };
+    DemoApi.getFormDataList(params).then((res) => {
+      console.log('🚀 ~ DemoApi.getFormDataList ~ res:', res);
+      settlementList.value = res.data;
+    });
+  });
+};
+getSettlementList();
+</script>
+
+<style lang="scss" scoped>
+.search-type {
+  position: relative;
+  height: 30px;
+  line-height: 30px;
+  padding: 0 8px 0 16px;
+}
+.search-type::after {
+  position: absolute;
+  content: '';
+  width: 1px;
+  right: 0;
+  top: 5px;
+  bottom: 5px;
+  background: rgba(0, 0, 0, 0.25);
+}
+.search-type {
+  :deep(.icon-arrow) {
+    display: inline-block;
+    font-size: 20px;
+    vertical-align: middle;
+  }
+}
+</style>