Commit 02801c34 authored by zhanglongbao's avatar zhanglongbao

fix

parent 66fd6b7e
...@@ -3,8 +3,8 @@ import { container } from "@/utils/container/index"; ...@@ -3,8 +3,8 @@ import { container } from "@/utils/container/index";
export default { export default {
// 获取工单状态数量 // 获取工单状态数量
getOrderStatusCount() { getOrderStatusCount(params: { form_id?: string }) {
return http.post("/order.order/getOrderStatusCount"); return http.post("/order.order/getOrderStatusCount", params);
}, },
// 工单列表 // 工单列表
listOrder(params: { form_id?: string; where?: string }) { listOrder(params: { form_id?: string; where?: string }) {
......
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
--navbar_height: 50px; // tabs高度 --navbar_height: 50px; // tabs高度
/* 背景色 */ /* 背景色 */
--bg_gray: #f5f6f8; --bg_gray: #eff2f4;
--bg_green: #e6f4f1; --bg_green: #e6f4f1;
/* icon颜色 */ /* icon颜色 */
......
...@@ -9,6 +9,14 @@ const routers: RouteRecordRaw[] = [ ...@@ -9,6 +9,14 @@ const routers: RouteRecordRaw[] = [
path: "/", path: "/",
name: "home", name: "home",
component: () => import("@/view/home/index.vue"), component: () => import("@/view/home/index.vue"),
redirect: "/work_order",
children: [
{
path: "/work_order",
name: "work_order",
component: () => import("@/view/work_order/index.vue"),
},
],
}, },
{ {
// 产品扫码详情 // 产品扫码详情
......
<template> <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> </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>
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,
};
};
<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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment