🚑 account api

src/api/index.ts

@@ -12,6 +12,7 @@ import {
   ADpushSimple,
   IOfficials,
   ADPlanItem,
+  IPlatform,
 } from "@/types/api";
 
 /**
@@ -102,3 +103,10 @@ export const getADPlanlist = (
 ): AxiosPromise<IList<ADPlanItem>> => {
   return axios("/ad/adData", { params: query });
 };
+
+/**
+ * 获取平台列表
+ */
+export const getPlatforms = (): AxiosPromise<IPlatform[]> => {
+  return axios("/simplePlatforms");
+};

src/components/_dialog_dont_use_just_test/index.ts

@@ -4,7 +4,7 @@ import ModalConstructor from "./index.vue";
 import { IDialogConfig } from "./dialog";
 
 // NOTE: 开发环境下会报错 和devTools有关 正式环境无问题
-// TODO: 子组件数据响应式问题
+// TODO: 子组件数据响应式问题 可用作展示型modal
 const Modal = (options: Partial<IDialogConfig> = {}): Promise<void> => {
   return new Promise((resolve, reject) => {
     const container = document.createElement("div");

src/helper/index.ts

@@ -55,3 +55,22 @@ export const pathResolve = (paths: string, base: string = "/") => {
   if (validateURL(base)) return base;
   return path.resolve(base, paths);
 };
+
+/**
+ * 格式化select的格式
+ * @param list 目标数组
+ * @param key key字段
+ * @param value value对应的字段
+ */
+export const formatSelectOptions = <T>(
+  list: any[],
+  key: string,
+  value: string
+): SelectOptions<T> => {
+  return list.map((item: any) => {
+    return {
+      label: item[key],
+      value: item[value],
+    };
+  });
+};

src/main.ts

@@ -8,8 +8,13 @@ import router from "./router";
 import store from "./store";
 
 import install from "@/plugins/install";
+import createGlobalData from "./plugins/createGlobal";
 
-const app = install(createApp(App));
+const app = createApp(App);
+
+// 初始化三方库和插件
+install(app);
+createGlobalData(app);
 
 app.use(store).use(router);
 

src/plugins/createGlobal.ts

@@ -0,0 +1,19 @@
+import { App } from "vue";
+import store from "@/store";
+
+import { ActionType } from "@/store/modules/app/_type";
+
+/**
+ * 创建一些全局数据
+ * @param app
+ */
+const createGlobalData = async (app: App<Element>) => {
+  try {
+    // 平台列表
+    store.dispatch(ActionType.doSavePlatforms);
+  } catch (error) {
+    console.log("global data error", error);
+  }
+};
+
+export default createGlobalData;

src/scss/index.scss

@@ -94,6 +94,10 @@ body {
   margin-bottom: 15px;
 }
 
-.ml-10{
-margin-left: 10px;
-}
+.ml-10 {
+  margin-left: 10px;
+}
+
+.theme {
+  color: $theme-color;
+}

src/store/modules/app/_type.ts

@@ -13,6 +13,7 @@ type State = {
   addRoutes: RouteConfig[];
   user: Partial<IUser>;
   officials: SelectOptions<number>;
+  platforms: SelectOptions<string>;
 };
 
 // mutation 定义
@@ -21,6 +22,7 @@ enum MutationType {
   setRoutes = "setRoutes",
   setUser = "setUser",
   setOfficial = "setOfficial",
+  setPlatforms = "setPlatforms",
 }
 
 type Mutations<S = State> = {
@@ -28,6 +30,7 @@ type Mutations<S = State> = {
   [MutationType.setRoutes](state: S, routes: RouteConfig[]): void;
   [MutationType.setUser](state: S, user: Partial<IUser>): void;
   [MutationType.setOfficial](state: S, officials: SelectOptions<number>): void;
+  [MutationType.setPlatforms](state: S, platforms: SelectOptions<string>): void;
 };
 
 // action 定义
@@ -36,6 +39,7 @@ enum ActionType {
   getUserRoles = "getUserRoles",
   doLogin = "doLogin",
   doSaveOfficial = "doSaveOfficial",
+  doSavePlatforms = "doSavePlatforms",
 }
 
 type Actions = {
@@ -48,6 +52,7 @@ type Actions = {
   }: AugmentedActionContext): Promise<string[]>;
   [ActionType.doLogin]({ commit }: AugmentedActionContext, user: unknown): void;
   [ActionType.doSaveOfficial]({ commit }: AugmentedActionContext): void;
+  [ActionType.doSavePlatforms]({ commit }: AugmentedActionContext): void;
 };
 
 // getter 定义
@@ -57,6 +62,7 @@ type Getters = {
   user(state: State): Partial<IUser>;
   pageTitle(state: State): string;
   officials(state: State): SelectOptions<number>;
+  platforms(state: State): SelectOptions<string>;
 };
 
 export { State, Mutations, MutationType, Actions, ActionType, Getters };

src/store/modules/app/actions.ts

@@ -3,8 +3,9 @@ import { Actions, ActionType, MutationType, State } from "./_type";
 import { RootState } from "@/store";
 import asyncRoutes from "@/router/async";
 import { filterRoutesByRoles } from "@/helper/permission";
+import { formatSelectOptions } from "@/helper/index";
 
-import { doLogin, getOfficialSimpleAccount } from "@/api";
+import { doLogin, getOfficialSimpleAccount, getPlatforms } from "@/api";
 
 type userData = {
   account: string;
@@ -37,17 +38,21 @@ const actions: ActionTree<State, RootState> & Actions = {
   async [ActionType.doSaveOfficial]({ commit }) {
     try {
       const { data } = await getOfficialSimpleAccount();
-      const storeOfficials: SelectOptions<number> = data.map((item) => {
-        return {
-          label: item.name,
-          value: item.id,
-        };
-      });
+      const storeOfficials = formatSelectOptions<number>(data, "name", "id");
       commit(MutationType.setOfficial, storeOfficials);
     } catch (e) {
       console.log("error", e);
     }
   },
+  async [ActionType.doSavePlatforms]({ commit }) {
+    try {
+      const { data } = await getPlatforms();
+      const storePlatforms = formatSelectOptions<string>(data, "desc", "name");
+      commit(MutationType.setPlatforms, storePlatforms);
+    } catch (e) {
+      console.log("error", e);
+    }
+  },
 };
 
 export default actions;

src/store/modules/app/getters.ts

@@ -8,6 +8,7 @@ const getters: GetterTree<State, RootState> & Getters = {
   user: (state) => state.user,
   pageTitle: (state) => state.pageTitle,
   officials: (state) => state.officials,
+  platforms: (state) => state.platforms,
 };
 
 export default getters;

src/store/modules/app/mutations.ts

@@ -15,6 +15,9 @@ const mutations: MutationTree<State> & Mutations = {
   [MutationType.setOfficial](state, officials) {
     if (!state.officials.length) state.officials = officials;
   },
+  [MutationType.setPlatforms](state, platforms) {
+    if (!state.platforms.length) state.platforms = platforms;
+  },
 };
 
 export default mutations;

src/store/modules/app/state.ts

@@ -21,6 +21,7 @@ const state: State = {
   addRoutes: [],
   user: store.getItem("user")?.parse<IUser>() ?? {},
   officials: [],
+  platforms: [],
 };
 
 export default state;

src/types/api.d.ts

@@ -103,3 +103,8 @@ export interface ADPlanItem {
   budget: string;
   aim: string;
 }
+
+export interface IPlatform {
+  desc: string;
+  name: string;
+}

src/views/Login.vue

@@ -56,14 +56,20 @@ const Login = defineComponent({
 
     const data = reactive({
       forms: {
-        account: "xiaowei",
-        passwd: "655c98362b4bd6fa",
+        account: "",
+        passwd: "",
       },
       title: computed(() => store.getters.pageTitle),
       loading: false,
       layout: formLayout,
     });
 
+    // TODO 测试账号
+    if (process.env.NODE_ENV === "development") {
+      data.forms.account = process.env.VUE_APP_LOGIN_ACCOUNT;
+      data.forms.passwd = process.env.VUE_APP_LOGIN_PASSWORD;
+    }
+
     const onLogin = async () => {
       data.loading = true;
       await store.dispatch(ActionType.doLogin, data.forms);

src/views/_pageOptions/table-account.ts

@@ -1,11 +1,11 @@
 export const TableColumnOfAccount = [
   {
     title: "公众号名称",
-    dataIndex: "name",
+    dataIndex: "account_name",
   },
   {
     title: "公众号唯一标识",
-    dataIndex: "openid",
+    dataIndex: "app_id",
   },
   {
     title: "平台",
@@ -13,11 +13,11 @@ export const TableColumnOfAccount = [
   },
   {
     title: "站点",
-    dataIndex: "channel",
+    dataIndex: "channel_id",
   },
   {
     title: "推广员",
-    dataIndex: "promoter",
+    dataIndex: "nickname",
   },
   {
     title: "开始时间",
@@ -27,9 +27,4 @@ export const TableColumnOfAccount = [
     title: "结束时间",
     dataIndex: "end_time",
   },
-  {
-    title: "操作",
-    key: "operator",
-    slots: { customRender: "operator" },
-  },
 ];

src/views/account/account.vue

@@ -8,25 +8,36 @@
         <p class="label">平台</p>
         <a-select class="full-width"
                   v-model:value="query.platform">
-          <a-select-option value="platform1">平台1</a-select-option>
-          <a-select-option value="platform2">平台2</a-select-option>
-          <a-select-option value="platform3">平台3</a-select-option>
+          <a-select-option v-for="platform in platforms"
+                           :key="platform.name"
+                           :value="platform.name">{{platform.desc}}</a-select-option>
         </a-select>
       </div>
     </tool-bar>
-    <a-table :loading="loading"
+    <a-table rowKey="id"
+             :loading="loading"
              :pagination="tablePageOptions"
              :columns="columns"
              :data-source="list"
-             @change="onLoadOfficials"></a-table>
+             @change="onLoadOfficials" />
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted, reactive, ref, toRefs } from "vue";
+import {
+  computed,
+  defineComponent,
+  inject,
+  onMounted,
+  reactive,
+  Ref,
+  ref,
+  toRefs,
+} from "vue";
 
 import ToolBar from "@/components/tool-bar/index.vue";
 
+import useApp from "@/hooks/useApp";
 import usePagination from "@/hooks/usePagination";
 
 import { TableColumnOfAccount } from "@/views/_pageOptions/table-account";
@@ -39,9 +50,10 @@ const Account = defineComponent({
   },
   setup() {
     let { loading, meta, tablePageOptions } = usePagination();
+    const { store } = useApp();
 
     const state = reactive({
-      platform: "platform1",
+      platforms: computed(() => store.getters.platforms),
       list: ref<IOfficials[]>([]),
       columns: TableColumnOfAccount,
       searching: false,