RING:绩效0.1

src/views/data/performance.vue

@@ -4,14 +4,43 @@
       <h3>员工绩效</h3>
     </div>
     <div class="padding-box-common">
-      <div class="search-box"></div>
+      <div class="search-box" style="padding: 0 10px">
+        <a-input-search
+          v-model:value="search.uname"
+          placeholder="请输入推广员名称"
+          style="width: 180px"
+        />
+        <div class="right-search">
+          <span>自定义月数:</span
+          ><a-input
+            v-model:value="search.value"
+            placeholder="请输入"
+            style="width: 80px"
+            type="number"
+            :min="0"
+          />
+          <a-select style="width: 100px" v-model:value="search.type">
+            <a-select-option value="month">按月查询</a-select-option>
+            <a-select-option value="day">按日查询</a-select-option>
+          </a-select>
+          <a-range-picker
+            :placeholder="['开始月份', '结束月份']"
+            format="YYYY-MM"
+            :value="dateValue"
+            :mode="search.month_model"
+            @panelChange="handlePanelChange"
+            @change="handleChange"
+            style="width: 200px"
+          />
+        </div>
+      </div>
     </div>
   </div>
 </template>
-
 <script lang="ts">
 import usePagination from "@/hooks/usePagination";
 import { defineComponent, reactive, toRefs, ref } from "vue";
+import { Moment } from "moment";
 // import { TableColumnOfYuewen } from "../_pageOptions/table_yuewen";
 //getPromotionList
 import {} from "@/api";
@@ -22,15 +51,35 @@ const Performance = defineComponent({
     let { tablePageOptions } = usePagination();
     const state = reactive({
       search: {
-        name: "", // 推广员名称
-        days: "", // 自定义天数 1~30天 无默认
-        months: "", // 自定义月数 默认一个月
-        dateType: "month", // 按月查询month/按天查询date
-        month_range: "", // 按月查询 月范围
-        date_range: "", // 按天查询 日期范围
+        uname: "", // 推广员名称
+        start_date: "", // 开始日期 月或日
+        end_date: "", // 结束日期 月或日
+        type: "month", // 时间类型 day/month
+        model: "natural", // 计算方式 自然日：natural/ 顺延24小时:precise
+        value: "", // 自定义月数、天数
+        month_model: ref<string[]>(["month", "month"]),
       },
+      dateValue: ref<Moment[]>([]),
     });
-    return { ...toRefs(state), tablePageOptions };
+    const handlePanelChange = (val: Moment[], mode: string[]) => {
+      state.dateValue = val;
+      state.search.month_model = [
+        mode[0] === "date" ? "month" : mode[0],
+        mode[1] === "date" ? "month" : mode[1],
+      ];
+      console.log(state.dateValue, state.search.month_model);
+    };
+    const handleChange = (val: Moment[]) => {
+      state.dateValue = val;
+      console.log(state.dateValue, state.search.month_model);
+    };
+
+    return {
+      ...toRefs(state),
+      tablePageOptions,
+      handlePanelChange,
+      handleChange,
+    };
   },
   mounted() {
     this.getList({ current: 1 });