chore

tzhh0617 · Jan 1, 2024 · 27a5289 · 27a5289
1 parent 0a5411f
commit 27a5289
Show file tree

Hide file tree

Showing 3 changed files with 131 additions and 21 deletions.
diff --git a/docs/.vitepress/theme/components/MoneyCalculator/enums.ts b/docs/.vitepress/theme/components/MoneyCalculator/enums.ts
@@ -4,14 +4,15 @@ export enum MoneyIOType {
 }
 
 export enum MoneyIOPer {
-  DATE = "DATE",
-  EVERY_DAY = "DAY",
-  EVERY_MONTH = "MONTH",
+  PER_DATE = "DATE",
+  PER_DAY = "DAY",
+  PER_MONTH = "MONTH",
 }
 
 export type MoneyIO = {
   type: MoneyIOType;
   per: MoneyIOPer;
   perMonthDate?: string;
+  perDate?: string;
   amount: string;
 };
diff --git a/docs/.vitepress/theme/components/MoneyCalculator/index.vue b/docs/.vitepress/theme/components/MoneyCalculator/index.vue
@@ -35,10 +35,105 @@
           prop="inouts"
           :rules="selectRuquiredRule"
         >
+          <el-button
+            class="absolute right-0 top--38px z-99"
+            type="primary"
+            @click="onClickAdd"
+          >
+            添加
+          </el-button>
+
           <el-table class="w-full!" :data="form.inouts" border>
             <el-table-column type="index" label="编号" width="54" />
-            <el-table-column label="记录">
-              <template #default="{ row }"> </template>
+            <el-table-column label="收支">
+              <template #default="{ row, $index }">
+                <el-row :gutter="8">
+                  <el-col :span="span6">
+                    <el-form-item
+                      :prop="`inouts.${$index}.type`"
+                      :rules="selectRuquiredRule"
+                    >
+                      <el-select
+                        class="w-full!"
+                        v-model="row.type"
+                        filterable
+                        placeholder="请选择"
+                      >
+                        <el-option label="收入" :value="MoneyIOType.IN" />
+                        <el-option label="支出" :value="MoneyIOType.OUT" />
+                      </el-select>
+                    </el-form-item>
+                  </el-col>
+
+                  <el-col :span="span6">
+                    <el-form-item
+                      :prop="`inouts.${$index}.type`"
+                      :rules="selectRuquiredRule"
+                    >
+                      <el-select
+                        class="w-full!"
+                        v-model="row.per"
+                        filterable
+                        placeholder="请选择"
+                      >
+                        <el-option
+                          label="一次性"
+                          :value="MoneyIOPer.PER_DATE"
+                        />
+                        <el-option label="每天" :value="MoneyIOPer.PER_DAY" />
+                        <el-option label="每月" :value="MoneyIOPer.PER_MONTH" />
+                      </el-select>
+                    </el-form-item>
+                  </el-col>
+                  <el-col v-if="row.per === MoneyIOPer.PER_MONTH" :span="span6">
+                    <el-form-item
+                      :prop="`inouts.${$index}.perMonthDate`"
+                      :rules="selectRuquiredRule"
+                    >
+                      <el-select
+                        class="w-full!"
+                        v-model="row.perMonthDate"
+                        filterable
+                        placeholder="请选择"
+                      >
+                        <el-option
+                          v-for="i in 31"
+                          :label="`${i}日`"
+                          :value="`${i}`"
+                        />
+                      </el-select>
+                    </el-form-item>
+                  </el-col>
+                  <el-col v-if="row.per === MoneyIOPer.PER_DATE" :span="span6">
+                    <el-form-item
+                      :prop="`inouts.${$index}.perDate`"
+                      :rules="selectRuquiredRule"
+                    >
+                      <el-date-picker
+                        v-model="row.perDate"
+                        class="w-full!"
+                        type="date"
+                        format="YYYY-MM-DD"
+                        placeholder="请选择"
+                        clearable
+                      />
+                    </el-form-item>
+                  </el-col>
+
+                  <el-col :span="span6">
+                    <el-form-item
+                      :prop="`inouts.${$index}.amount`"
+                      :rules="decimalRules"
+                    >
+                      <el-input
+                        v-model="row.amount"
+                        clearable
+                        placeholder="请输入"
+                      />
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+              </template>
             </el-table-column>
 
             <el-table-column label="操作" width="90">
@@ -52,6 +147,10 @@
         </el-form-item>
       </el-col>
     </el-row>
+
+    <div>
+      <el-button type="primary" @click="onClickCalc">计算</el-button>
+    </div>
   </el-form>
 </template>
 
@@ -62,7 +161,7 @@ import { useSpan } from "./useSpan";
 import { MoneyIO, MoneyIOPer, MoneyIOType } from "./enums";
 import dayjs from "dayjs";
 
-const { spanOne, spanFull } = useSpan();
+const { spanOne, spanFull, span6 } = useSpan();
 
 const formRef = ref<FormInstance>();
 
@@ -71,13 +170,23 @@ const form = ref({
   startDate: dayjs().format("YYYY-MM-DD"),
   inouts: [
     {
-      type: MoneyIOType.IN,
-      per: MoneyIOPer.EVERY_DAY,
-      amount: "",
+      type: MoneyIOType.OUT,
+      per: MoneyIOPer.PER_MONTH,
+      perMonthDate: "1",
+      amount: "0",
     },
   ] as MoneyIO[],
 });
 
+const onClickAdd = () => {
+  form.value.inouts.push({
+    type: MoneyIOType.OUT,
+    per: MoneyIOPer.PER_MONTH,
+    perMonthDate: "1",
+    amount: "0",
+  });
+};
+
 const selectRuquiredRule = [
   { required: true, message: "请选择", trigger: "blur" },
 ];
@@ -90,6 +199,10 @@ const decimalRules = [
     trigger: "blur",
   },
 ];
+
+const onClickCalc = async () => {
+  await formRef.value!.validate();
+};
 </script>
 
 <style lang="scss" scoped></style>
diff --git a/docs/.vitepress/theme/components/MoneyCalculator/useSpan.ts b/docs/.vitepress/theme/components/MoneyCalculator/useSpan.ts
@@ -2,6 +2,10 @@ import { computed, onMounted, onUnmounted, ref } from "vue";
 
 const isMobile = ref(false);
 
+function useSpanAt(span: number) {
+  return computed(() => (isMobile.value ? 24 : span));
+}
+
 export function useSpan() {
   const adjustColumn = () => {
     isMobile.value = window.innerWidth <= 768;
@@ -16,17 +20,9 @@ export function useSpan() {
     window.removeEventListener("resize", adjustColumn);
   });
 
-  const spanOne = computed(() => {
-    return isMobile.value ? 24 : 8;
-  });
-
-  const spanTwo = computed(() => {
-    return isMobile.value ? 24 : 8;
-  });
-
-  const spanFull = computed(() => {
-    return 24;
-  });
+  const span8 = useSpanAt(8);
+  const span6 = useSpanAt(6);
+  const spanFull = computed(() => 24);
 
-  return { isMobile, spanOne, spanTwo, spanFull };
+  return { isMobile, spanOne: span8, span6, spanFull };
 }