fix

components.d.ts

@@ -42,12 +42,9 @@ declare module 'vue' {
     Toast: typeof import('./src/components/toast/index.vue')['default']
     User: typeof import('./src/components/widget/field/user/index.vue')['default']
     User_dept_list: typeof import('./src/components/user_dept_list/index.vue')['default']
-    VanCascader: typeof import('vant/es')['Cascader']
     VanCheckbox: typeof import('vant/es')['Checkbox']
-    VanDatePicker: typeof import('vant/es')['DatePicker']
     VanPicker: typeof import('vant/es')['Picker']
     VanPopup: typeof import('vant/es')['Popup']
-    VanTimePicker: typeof import('vant/es')['TimePicker']
     Widget: typeof import('./src/components/widget/index.vue')['default']
     Wx: typeof import('./src/components/name/wx.vue')['default']
   }

src/main.ts

@@ -10,7 +10,7 @@ import VConsole from "vconsole";
 import "./assets/css/reset.css";
 import "./assets/css/global.less";
 import "./assets/icon/style.css";
-import "vant/lib/toast/index.css";
+import "vant/lib/index.css";
 
 window.mitt = mitt();
 new VConsole();

src/utils/hook.ts

@@ -22,7 +22,11 @@ export const useDataList = (props: ComputedRef<UseDataList>) => {
             ...(props.value.params || {}),
         });
         if (msg.code == 0) {
+            if (page.value == 1) {
                 list.value = msg.data.data || [];
+            } else {
+                list.value.push(...(msg.data.data || []));
+            }
             count.value = msg.data.count || 0;
             console.log("list", list.value);
         }

src/view/home/index.vue

@@ -62,12 +62,13 @@ const navbar = [
     }
 
     .nav_bar {
-        height: 60px;
+        height: 56px;
         background-color: white;
         display: flex;
         align-items: center;
         justify-content: space-evenly;
         color: var(--gray);
+        border-top: 1px solid var(--border_color);
 
         .active {
             color: var(--blue);
@@ -81,8 +82,9 @@ const navbar = [
             i {
                 font-size: 18px;
             }
+
             span {
-                font-size: 14px;
+                font-size: 12px;
                 margin-top: 6px;
             }
         }

src/view/work_order/index.vue

@@ -2,15 +2,15 @@
     <div class="work_order">
         <div class="header">
             <div class="left">
-                <div class="filter_item">
-                    <span>全部工单</span>
+                <div class="filter_item" @click="changeOrderForm">
+                    <span>{{ selected_order_form.title || "全部工单" }}</span>
                     <i class="icon-173"></i>
                 </div>
 
-                <div class="filter_item">
+                <!-- <div class="filter_item">
                     <span>全部类型</span>
                     <i class="icon-173"></i>
-                </div>
+                </div> -->
             </div>
         </div>
 
@@ -21,6 +21,7 @@
                 <span>全部</span>
                 <span>{{ order_type_num[-1] || 0 }}</span>
             </div>
+
             <div
                 v-for="it in order_type_list"
                 :class="{ active: selected_type.value == it.value }"
@@ -30,11 +31,82 @@
             </div>
         </div>
 
-        <div class="order_list">
-            <div class="card">
+        <div class="order_list" @scroll="scroll">
+            <div class="card" v-for="it in list">
                 <div class="title_box">
-                    <span class="title">1232321123</span>
-                    <span class="type">已超时</span>
+                    <div class="title_left">
+                        <span class="title">{{ it.order_title }}</span>
+                    </div>
+                    <span
+                        class="status"
+                        :style="{
+                            color: getType(it.status)?.color,
+                            background: getType(it.status)?.bg_color,
+                        }">
+                        {{ getType(it.status)?.label }}
+                    </span>
+                </div>
+
+                <div class="item">
+                    <span class="label">工单编号</span>
+                    <span class="value" style="color: var(--blue)">
+                        {{ it.order_number || "--" }}
+                    </span>
+                </div>
+                <div class="item">
+                    <span class="label">客户名称</span>
+                    <span class="value">
+                        {{ it?.customer_id?.link_user_name || "--" }}
+                    </span>
+                </div>
+                <div class="item">
+                    <span class="label">优先级</span>
+                    <span
+                        class="value"
+                        :style="{ color: getPriority(it.priority)?.color }">
+                        {{ getPriority(it.priority)?.label }}
+                    </span>
+                </div>
+
+                <div class="controls">
+                    <span
+                        class="button green text"
+                        v-if="it.status == 0"
+                        @click="assignOrder(it)">
+                        派单
+                    </span>
+
+                    <span
+                        class="button green text"
+                        v-if="it.status == 1"
+                        @click="receiveOrder(it)">
+                        接单
+                    </span>
+
+                    <span
+                        class="button green text"
+                        v-if="it.status == 2"
+                        @click="startOrder(it)">
+                        开始
+                    </span>
+
+                    <span
+                        class="button green text"
+                        v-if="it.status == 3"
+                        @click="finishOrder(it)">
+                        完成
+                    </span>
+
+                    <span
+                        class="button green text"
+                        v-if="it.status == 5"
+                        @click="evaluateOrder(it)">
+                        评价
+                    </span>
+
+                    <span class="button text green" @click="delOrder(it)">
+                        删除
+                    </span>
                 </div>
             </div>
         </div>
@@ -42,9 +114,12 @@
 </template>
 
 <script setup lang="ts">
-import { getType } from "@/utils/variable";
+import { getType, getPriority } from "@/utils/variable";
 import { useOrder } from "./hook";
 import { computed } from "vue";
+import { showConfirmDialog } from "vant";
+import { $select } from "@/components/select/index";
+import { useScroll } from "@/utils/hook";
 
 const init = async () => {
     await getOrderFormList();
@@ -56,12 +131,12 @@ const useOrderProps = computed(() => ({
     init,
 }));
 const {
-    getOrderFormList,
-    getOrderTypeNum,
     order_form_list,
-    default_order_form,
+    // default_order_form,
+    getOrderFormList,
     selected_order_form,
     order_type_num,
+    getOrderTypeNum,
     selectOrderForm,
     selected_type,
     order_type_list,
@@ -71,10 +146,10 @@ const {
     count,
     getList,
     deleteData,
-    create_order,
-    show_detail,
-    detail_info,
-    detail,
+    // create_order,
+    // show_detail,
+    // detail_info,
+    // detail,
     assignOrder,
     receiveOrder,
     startOrder,
@@ -82,11 +157,54 @@ const {
     evaluateOrder,
 } = useOrder(useOrderProps);
 
+// 删除工单
+const delOrder = (order: any) => {
+    showConfirmDialog({
+        title: "提示",
+        message: "是否删除该工单？删除后将无法恢复。",
+    }).then(() => {
+        deleteData({
+            data: [{ id: order.id, form_id: order.form_id }],
+        });
+    });
+};
+
+// 切换工单类型
+const changeOrderForm = () => {
+    $select({
+        title: "工单类型",
+        value: selected_order_form.value.form_id,
+        options: order_form_list.value.map((it) => ({
+            text: it.title,
+            value: it.form_id,
+        })),
+        onConfirm: (data) => {
+            const form = order_form_list.value.find((it) => it.form_id == data);
+            selectOrderForm(form!);
+        },
+    });
+};
+
+// 滚动分页
+const { scroll } = useScroll({
+    callback: () => {
+        if (list.value.length >= count.value) return;
+        page.value++;
+        getList();
+    },
+});
+
 init();
 </script>
 
 <style lang="less" scoped>
 .work_order {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+
     .header {
         display: flex;
         height: 50px;
@@ -123,7 +241,7 @@ init();
         div {
             background-color: white;
             border-radius: 7px;
-            padding: 12px 12px;
+            padding: 8px 10px;
             display: flex;
             flex-wrap: nowrap;
             margin-right: 6px;
@@ -163,6 +281,7 @@ init();
 
     .order_list {
         display: flex;
+        flex-direction: column;
         flex: 1;
         overflow: auto;
         box-sizing: border-box;
@@ -170,9 +289,39 @@ init();
 
         .card {
             width: 100%;
-            padding: 20px;
+            padding: 14px 16px;
             background-color: white;
             border-radius: 7px;
+            box-sizing: border-box;
+            margin-bottom: 10px;
+
+            .title_box {
+                display: flex;
+
+                .title_left {
+                    flex: 1;
+
+                    .title {
+                        font-size: 18px;
+                    }
+                }
+            }
+
+            .item {
+                display: flex;
+                margin-top: 10px;
+                font-size: 14px;
+
+                .label {
+                    width: 80px;
+                }
+            }
+
+            .controls {
+                margin-top: 10px;
+                padding-top: 4px;
+                border-top: 1px solid var(--border_color);
+            }
         }
     }
 }