fix

src/api/methods/order.ts

@@ -3,8 +3,8 @@ import { container } from "@/utils/container/index";
 
 export default {
     // 获取工单状态数量
-    getOrderStatusCount() {
-        return http.post("/order.order/getOrderStatusCount");
+    getOrderStatusCount(params: { form_id?: string }) {
+        return http.post("/order.order/getOrderStatusCount", params);
     },
     // 工单列表
     listOrder(params: { form_id?: string; where?: string }) {

src/assets/css/global.less

@@ -14,7 +14,7 @@
     --navbar_height: 50px; // tabs高度
 
     /* 背景色 */
-    --bg_gray: #f5f6f8;
+    --bg_gray: #eff2f4;
     --bg_green: #e6f4f1;
 
     /* icon颜色 */

src/router/index.ts

@@ -9,6 +9,14 @@ const routers: RouteRecordRaw[] = [
         path: "/",
         name: "home",
         component: () => import("@/view/home/index.vue"),
+        redirect: "/work_order",
+        children: [
+            {
+                path: "/work_order",
+                name: "work_order",
+                component: () => import("@/view/work_order/index.vue"),
+            },
+        ],
     },
     {
         // 产品扫码详情

src/view/home/index.vue

 <template>
-    <div> 123123231 </div>
+    <div class="home">
+        <div class="home_content">
+            <router-view></router-view>
+        </div>
+
+        <div class="nav_bar">
+            <div
+                class="item"
+                v-for="it in navbar"
+                :class="{ active: it.path == route.path }"
+                @click="router.push(it.path)">
+                <i :class="it.icon"></i>
+                <span>{{ it.label }}</span>
+            </div>
+        </div>
+    </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { useRoute, useRouter } from "vue-router";
+
+const route = useRoute();
+const router = useRouter();
+
+const navbar = [
+    {
+        label: "首页",
+        icon: "icon-579",
+        path: "/home",
+    },
+    {
+        label: "工单中心",
+        icon: "icon-580",
+        path: "/work_order",
+    },
+    {
+        label: "客户运营",
+        icon: "icon-581",
+        path: "/customer",
+    },
+    {
+        label: "产品管理",
+        icon: "icon-488",
+        path: "/product",
+    },
+];
+</script>
+
+<style lang="less" scoped>
+.home {
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--bg_gray);
+
+    .home_content {
+        flex: 1;
+        overflow: hidden;
+    }
+
+    .nav_bar {
+        height: 60px;
+        background-color: white;
+        display: flex;
+        align-items: center;
+        justify-content: space-evenly;
+        color: var(--gray);
+
+        .active {
+            color: var(--blue);
+        }
+
+        .item {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
 
-<style lang="less" scoped></style>
+            i {
+                font-size: 18px;
+            }
+            span {
+                font-size: 14px;
+                margin-top: 6px;
+            }
+        }
+    }
+}
+</style>

src/view/work_order/hook.ts

+import { computed, ref, ComputedRef } from "vue";
+import api from "@/api";
+import { $selectUserDept } from "@/components/select_user_dept/index";
+import { $createFormData } from "@/components/create_form_data/index";
+import { order_type, OrderType } from "@/utils/variable";
+import { useDataList } from "@/utils/hook";
+import { $toast } from "@/components/toast";
+
+// 工单方法
+export const useOrderControls = (callBack = () => {}) => {
+    // 派单
+    const assignOrder = ({ form_id, id }: any) => {
+        $selectUserDept({
+            config: [
+                {
+                    key: "fuze_user",
+                    type: ["user"],
+                    title: "负责人",
+                    size: 1,
+                },
+                {
+                    key: "xietong_user",
+                    type: ["user"],
+                    title: "协同人",
+                },
+            ],
+            onConfirm: async (data) => {
+                const msg = await api.order.assignOrder({
+                    form_id,
+                    id,
+                    fuze_user: data.fuze_user.map((it) => it.id)[0],
+                    xietong_user: JSON.stringify({
+                        users: data.xietong_user.map((it) => it.id),
+                    }),
+                });
+                if (msg.code == 0) {
+                    $toast({ type: "success", message: "派单成功" });
+                    callBack();
+                }
+            },
+        });
+    };
+
+    // 接单
+    const receiveOrder = async ({ form_id, id }: any) => {
+        const msg = await api.order.receiveOrder({
+            form_id,
+            id,
+        });
+        if (msg.code == 0) {
+            $toast({ type: "success", message: "接单成功" });
+            callBack();
+        }
+    };
+
+    // 开始
+    const startOrder = async ({ form_id, id }: any) => {
+        const msg = await api.order.startOrder({
+            form_id,
+            id,
+        });
+        if (msg.code == 0) {
+            $toast({ type: "success", message: "开始工单" });
+            callBack();
+        }
+    };
+
+    // 完成回执
+    const finishOrder = async ({ form_id, id, node_info }: any) => {
+        const finish_order = node_info.find(
+            (it: any) => it.id == "finish_order"
+        );
+
+        $createFormData({
+            form_id: finish_order.receipt_template_id,
+            onEditConfirm: async (data) => {
+                const msg = await api.order.finishOrder({
+                    form_id: form_id,
+                    id: id,
+                    data,
+                });
+                if (msg.code == 0) {
+                    $toast({ type: "success", message: "完成工单" });
+                    callBack();
+                }
+            },
+        });
+    };
+
+    // 评价
+    const evaluateOrder = async ({ form_id, id, node_info }: any) => {
+        const evaluate_order = node_info.find(
+            (it: any) => it.id == "evaluate_order"
+        );
+
+        $createFormData({
+            form_id: evaluate_order.template_id,
+            onEditConfirm: async (data) => {
+                const msg = await api.order.evaluateOrder({
+                    form_id: form_id,
+                    id: id,
+                    data,
+                });
+                if (msg.code == 0) {
+                    $toast({ type: "success", message: "感谢评价" });
+                    callBack();
+                }
+            },
+        });
+
+        return;
+    };
+
+    // 编辑
+    const editOrder = (order_detail: any) => {
+        $createFormData({
+            form_id: order_detail.form_id,
+            data: order_detail,
+            onEditConfirm: async (data) => {
+                if (order_detail?.id) {
+                    const msg = await api.order.saveOrder({
+                        form_id: order_detail.form_id,
+                        id: order_detail?.id,
+                        ...data,
+                    });
+                    if (msg.code == 0) {
+                        $toast({ type: "success", message: "修改成功" });
+                        callBack();
+                    }
+                }
+            },
+        });
+    };
+
+    return {
+        assignOrder,
+        receiveOrder,
+        startOrder,
+        finishOrder,
+        evaluateOrder,
+        editOrder,
+    };
+};
+
+// 工单
+interface Props {
+    init(): void;
+}
+export const useOrder = (props: ComputedRef<Props>) => {
+    // 工单表单
+    const order_form_list = ref<FormInfo[]>([]);
+    const default_order_form = computed(
+        () => order_form_list.value.find((it) => it.template_type == "0")!
+    );
+    const getOrderFormList = async () => {
+        if (order_form_list.value.length) return;
+        const msg = await api.form.TemplateLists({ template_type: [0, 3, 4] });
+        if (msg.code == 0) {
+            order_form_list.value = msg.data.lists;
+        }
+    };
+    const selected_order_form = ref<FormInfo>({} as FormInfo);
+    const selectOrderForm = (form: FormInfo) => {
+        selected_order_form.value = form;
+        props.value.init();
+    };
+
+    // 状态数量
+    const order_type_num = ref<{ [k: number]: number }>({});
+    const getOrderTypeNum = async () => {
+        const msg = await api.order.getOrderStatusCount({
+            form_id: selected_order_form.value.form_id,
+        });
+        if (msg.code == 0) {
+            order_type_num.value = msg.data;
+        }
+    };
+
+    // 状态列表
+    const selected_type = ref<OrderType>({} as OrderType);
+    const order_type_list = computed(() => order_type);
+    const select_type = (type?: OrderType) => {
+        selected_type.value = type || ({} as OrderType);
+        getList();
+    };
+
+    // 数据列表
+    const params = computed(() => ({
+        api: api.order.listOrder,
+        deleteApi: api.order.deleteOrder,
+        params: {
+            type: selected_type.value.value
+                ? [+selected_type.value.value]
+                : undefined,
+            form_id: selected_order_form.value.form_id,
+        },
+    }));
+    const { list, page, count, getList, deleteData } = useDataList(params);
+
+    // 创建工单
+    const create_order = (order_form: FormInfo) => {
+        $createFormData({
+            form_id: order_form.form_id,
+            onConfirm: async (data) => {
+                const msg = await api.order.saveOrder({
+                    ...data,
+                    form_id: order_form.form_id,
+                    order_type: +order_form.template_type,
+                });
+                if (msg.code == 0) {
+                    $toast({ type: "success", message: "创建成功" });
+                    props.value.init();
+                }
+            },
+        });
+    };
+
+    // 详情
+    const show_detail = ref(false);
+    const detail_info = ref({});
+    const detail = (row: any) => {
+        detail_info.value = row;
+        show_detail.value = true;
+    };
+
+    // 工单操作
+    const {
+        assignOrder,
+        receiveOrder,
+        startOrder,
+        finishOrder,
+        evaluateOrder,
+    } = useOrderControls(() => {
+        props.value.init();
+    });
+
+    return {
+        order_form_list,
+        default_order_form,
+        getOrderFormList,
+        selected_order_form,
+        order_type_num,
+        getOrderTypeNum,
+        selectOrderForm,
+        selected_type,
+        order_type_list,
+        select_type,
+        list,
+        page,
+        count,
+        getList,
+        deleteData,
+        create_order,
+        show_detail,
+        detail_info,
+        detail,
+        assignOrder,
+        receiveOrder,
+        startOrder,
+        finishOrder,
+        evaluateOrder,
+    };
+};

src/view/work_order/index.vue

+<template>
+    <div class="work_order">
+        <div class="header">
+            <div class="left">
+                <div class="filter_item">
+                    <span>全部工单</span>
+                    <i class="icon-173"></i>
+                </div>
+
+                <div class="filter_item">
+                    <span>全部类型</span>
+                    <i class="icon-173"></i>
+                </div>
+            </div>
+        </div>
+
+        <div class="order_type">
+            <div
+                :class="{ active: !selected_type.value }"
+                @click="select_type()">
+                <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 }"
+                @click="select_type(it)">
+                <span>{{ it.label }}</span>
+                <span>{{ order_type_num[+it.value] || 0 }}</span>
+            </div>
+        </div>
+
+        <div class="order_list">
+            <div class="card">
+                <div class="title_box">
+                    <span class="title">1232321123</span>
+                    <span class="type">已超时</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { getType } from "@/utils/variable";
+import { useOrder } from "./hook";
+import { computed } from "vue";
+
+const init = async () => {
+    await getOrderFormList();
+    getOrderTypeNum();
+    getList();
+};
+
+const useOrderProps = computed(() => ({
+    init,
+}));
+const {
+    getOrderFormList,
+    getOrderTypeNum,
+    order_form_list,
+    default_order_form,
+    selected_order_form,
+    order_type_num,
+    selectOrderForm,
+    selected_type,
+    order_type_list,
+    select_type,
+    list,
+    page,
+    count,
+    getList,
+    deleteData,
+    create_order,
+    show_detail,
+    detail_info,
+    detail,
+    assignOrder,
+    receiveOrder,
+    startOrder,
+    finishOrder,
+    evaluateOrder,
+} = useOrder(useOrderProps);
+
+init();
+</script>
+
+<style lang="less" scoped>
+.work_order {
+    .header {
+        display: flex;
+        height: 50px;
+        background-color: white;
+        padding: 0 20px;
+        box-sizing: border-box;
+        flex-shrink: 0;
+
+        .left {
+            display: flex;
+            align-items: center;
+
+            .filter_item {
+                margin-right: 14px;
+                display: flex;
+                align-items: center;
+
+                i {
+                    transform: rotate(90deg);
+                    margin-left: 4px;
+                    font-size: 12px;
+                }
+            }
+        }
+    }
+
+    .order_type {
+        display: flex;
+        flex-wrap: nowrap;
+        overflow-x: auto;
+        padding: 10px 6px;
+        flex-shrink: 0;
+
+        div {
+            background-color: white;
+            border-radius: 7px;
+            padding: 12px 12px;
+            display: flex;
+            flex-wrap: nowrap;
+            margin-right: 6px;
+            border: 1px solid transparent;
+
+            &.active {
+                border: 1px solid var(--blue);
+                color: var(--blue);
+            }
+
+            span {
+                white-space: nowrap;
+            }
+
+            span:nth-of-type(1) {
+                margin-right: 16px;
+                position: relative;
+
+                &::after {
+                    content: "";
+                    position: absolute;
+                    right: -10px;
+                    width: 4px;
+                    height: 4px;
+                    border-radius: 50%;
+                    background-color: black;
+                    top: 50%;
+                    transform: translateY(-50%);
+                }
+            }
+
+            span:nth-of-type(2) {
+                color: var(--orange);
+            }
+        }
+    }
+
+    .order_list {
+        display: flex;
+        flex: 1;
+        overflow: auto;
+        box-sizing: border-box;
+        padding: 0 6px;
+
+        .card {
+            width: 100%;
+            padding: 20px;
+            background-color: white;
+            border-radius: 7px;
+        }
+    }
+}
+</style>