Skip to content

S
so-manage-ui
Commit 3fbbf1d9 authored by 张耀's avatar 张耀
Browse files
Options

feat: 

工单列表
parent 6c696f85
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 652 additions and 421 deletions
src/bg-ui/index.scss
View file @ 3fbbf1d9
This diff is collapsed.
src/components/gap-title.vue
View file @ 3fbbf1d9
<template> <template>
<div class="gap-title"> <div
<span>{{title}}</span> class="gap-title"
</div> :class="{
'has-line': hasLine,
}">
<span>{{ title }}</span>
</div>
</template> </template>
<script> <script>
export default { export default {
props: { props: {
title:{ title: {
type:String, type: String,
default:"" default: "",
} },
}, hasLine: {
components: { type: Boolean,
default: false,
}, },
data() { },
return { components: {},
data() {
}; return {};
}, },
watch: { watch: {},
computed: {},
}, created() {},
computed: { mounted() {},
methods: {},
},
created() {
},
mounted() {
},
methods: {
},
}; };
</script> </script>
<style scoped> <style scoped>
.gap-title{ .gap-title {
font-size: 18px; height: 18px;
font-weight: 600; font-size: 18px;
color: #202531; font-weight: 600;
display: flex; color: #202531;
align-items: center; display: flex;
align-items: center;
}
.gap-title::before {
content: "";
display: inline-block;
margin-right: 8px;
width: 4px;
height: 16px;
background-color: #2b4695;
border-radius: 2px;
} }
.gap-title::before{ .gap-title.has-line::after {
content:''; content: "";
display: inline-block; display: inline-block;
margin-right: 8px; flex: 1;
width: 4px; border-top: 1px dashed #dadee7;
height: 16px; margin-left: 8px;
background-color: #2b4695;
border-radius: 2px;
} }
</style> </style>
src/components/go-back/index.vue 0 → 100644
View file @ 3fbbf1d9
<template>
<el-button size="default" @click="goBack">返回</el-button>
</template>
<script setup>
import { useRouter } from "vue-router";
const router = useRouter();
const props = defineProps({
href: {
type: Object,
default: null,
},
});
const goBack = () => {
if (props.href) {
router.push(props.href);
} else {
router.go(-1);
}
};
</script>
<style lang="scss" scoped></style>
src/components/warn-detail/info.vue
View file @ 3fbbf1d9
...@@ -6,13 +6,19 @@ ...@@ -6,13 +6,19 @@
{{ item.label }} {{ item.label }}
</div> </div>
<div class="value"> <div class="value">
<span v-if="item.prop == 'status'"> <div class="value-body">
<span class="status" :class="`status-${valueData.status}`"></span> <span v-if="item.prop == 'status'">
<span>{{ STATUS_OBJ[valueData[item.prop]] }}</span> <slot name="status" :item="item" :valueData="valueData" v-if="slots.status" />
</span> <span class="status-body" v-else>
<span v-else> <span class="status" :class="`status-${valueData.status}`"></span>
{{ valueData[item.prop] }} <span>{{ STATUS_OBJ[valueData[item.prop]] }}</span>
</span> </span>
</span>
<span v-else>
<slot name="value" :item="item" :valueData="valueData" v-if="slots.value" />
<span v-else>{{ valueData[item.prop] }}</span>
</span>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -20,8 +26,9 @@ ...@@ -20,8 +26,9 @@
</template> </template>
<script setup> <script setup>
import { computed } from "vue"; import { useSlots, computed } from "vue";
import { STATUS_OBJ } from "./env.js" import { STATUS_OBJ } from "./env.js";
const slots = useSlots();
const props = defineProps({ const props = defineProps({
labelData: { labelData: {
...@@ -32,6 +39,13 @@ const props = defineProps({ ...@@ -32,6 +39,13 @@ const props = defineProps({
type: Object, type: Object,
default: () => ({}), default: () => ({}),
}, },
status_obj: {
type: Object,
default: null,
},
});
const status_obj = computed(() => {
return props.status_obj || STATUS_OBJ;
}); });
</script> </script>
...@@ -58,29 +72,47 @@ const props = defineProps({ ...@@ -58,29 +72,47 @@ const props = defineProps({
background-color: #f7f7f9; background-color: #f7f7f9;
border-right: 1px solid #dadee7; border-right: 1px solid #dadee7;
padding: 0 16px; padding: 0 16px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
} }
.value { .value {
height: 100%; height: 100%;
flex: 1; flex: 1;
border-right: 1px solid #dadee7; border-right: 1px solid #dadee7;
padding: 0 16px; position: relative;
display: flex; .value-body {
align-items: center; padding: 0 16px;
.status { position: absolute;
display: inline-block; top: 0;
width: 6px; left: 0;
height: 6px; width: 100%;
border-radius: 50%; height: 100%;
margin-right: 8px; overflow: hidden;
$statusObj: ( white-space: nowrap;
success: #48ad97, text-overflow: ellipsis;
error: #d75138, -o-text-overflow: ellipsis;
); .status {
@each $status, $color in $statusObj { display: inline-block;
&-#{$status} { width: 6px;
background-color: $color; height: 6px;
border-radius: 50%;
margin-right: 8px;
$statusObj: (
success: #48ad97,
error: #d75138,
);
@each $status, $color in $statusObj {
&-#{$status} {
background-color: $color;
}
} }
} }
.status-body {
display: flex;
align-items: center;
}
} }
} }
} }
......
src/page/main/ticket/business-ticket-list/detail/index.vue
View file @ 3fbbf1d9
...@@ -3,12 +3,154 @@ ...@@ -3,12 +3,154 @@
<div class="breadcrumb"> <div class="breadcrumb">
<bg-breadcrumb /> <bg-breadcrumb />
</div> </div>
<div class="content"></div> <div class="content bg-scroll">
<div class="go-back">
<goBack />
</div>
<gap-title :hasLine="true" title="基本信息"></gap-title>
<div class="info">
<Info :labelData="labelData" :valueData="info">
<template #status="{ item, valueData }">
<span class="status-body">
<span class="status" :class="`status-${valueData.status}`"></span>
<span>{{ STATUS_OBJ[valueData[item.prop]] }}</span>
</span>
</template>
</Info>
</div>
<gap-title :hasLine="true" title="推送方式"></gap-title>
<div class="info">
<Info :labelData="notificationMethod" :valueData="info">
<template #value="{ item, valueData }">
<span>{{ valueData[item.prop].map((e) => METHODS[e]).join("，") }}</span>
</template>
</Info>
<div class="notification-lists">
<bg-table border ref="listtable" :headers="headers" :rows="rows" height="100%" :isIndex="true"> </bg-table>
</div>
</div>
<gap-title :hasLine="true" title="工单反馈"></gap-title>
<div class="info">
<feedback-detail :detail-info="detailInfo"></feedback-detail>
</div>
</div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref } from "vue";
import bgBreadcrumb from "@/components/bg-breadcrumb.vue"; import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
import Info from "@/components/warn-detail/info.vue";
import gapTitle from "@/components/gap-title.vue";
import feedbackDetail from "@/page/main/ticket/modules/feedback-detail/index.vue";
import goBack from "@/components/go-back/index.vue";
import { METHODS } from "@/components/manual-distribution/env.js";
const STATUS_OBJ = {
finish: "已完成",
close: "已关闭",
info: "待处置",
};
const labelData = [
[
{
label: "工单名称",
prop: "ticket_name",
},
{
label: "状态",
prop: "status",
},
],
[
{
label: "工单等级",
prop: "ticket_level",
},
{
label: "创建人",
prop: "create_by",
},
],
[
{
label: "工单描述",
prop: "description",
},
],
[
{
label: "创建时间",
prop: "create_time",
},
{
label: "完成时间",
prop: "finish_time",
},
],
];
const info = {
ticket_name: "7月常态化运维巡检任务",
status: "finish",
ticket_level: "紧急任务",
create_by: "管理员",
description: "请进行所有系统常态化月度巡检任务（每月定期常态运维巡检），将巡检结果上报！",
create_time: "2020-01-01 00:00:00",
finish_time: "2020-01-01 00:00:00",
notification_method: ["1", "2"],
};
const notificationMethod = [
[
{
label: "通知方式",
prop: "notification_method",
},
],
];
const headers = [
{
prop: "user_id",
label: "账号",
},
{
prop: "user_name",
label: "姓名",
},
{
prop: "phone",
label: "联系方式",
},
];
const rows = ref([
{
user_id: "11",
user_name: "1111",
phone: "13211111111",
},
{
user_id: "22",
user_name: "2222",
phone: "13222222222",
},
{
user_id: "33",
user_name: "3333",
phone: "13233333333",
},
]);
const detailInfo = ref([
{
status: "close",
target: "张三",
feedback: "任务临时取消",
time: "2022-10-22 09:58:30",
},
{
status: "finish",
target: "李四",
feedback: "任务临时取消",
time: "2022-10-22 09:58:30",
},
]);
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
...@@ -26,6 +168,46 @@ import bgBreadcrumb from "@/components/bg-breadcrumb.vue"; ...@@ -26,6 +168,46 @@ import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
background-color: #ffffff; background-color: #ffffff;
box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.15); box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.15);
border-radius: 6px; border-radius: 6px;
padding: 24px;
.go-back {
margin-bottom: 24px;
}
:deep(.gap-title) {
margin-bottom: 16px;
}
.info,
.feedback-info {
max-width: 1072px;
width: 100%;
padding: 0 8px 0;
&:not(:last-child) {
padding-bottom: 24px;
}
.status {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
margin-right: 8px;
$statusObj: (
finish: #48ad97,
close: #9e9e9e,
info: #3759be,
);
@each $status, $color in $statusObj {
&-#{$status} {
background-color: $color;
}
}
}
.status-body {
display: flex;
align-items: center;
}
.notification-lists {
margin-top: 16px;
}
}
} }
} }
</style> </style>
src/page/main/ticket/modules/detail.vue deleted 100644 → 0
View file @ 6c696f85
<template>
<div>detail</div>
</template>
<script setup></script>
<style lang="scss" scoped></style>
src/page/main/ticket/modules/feedback-detail/detail.vue 0 → 100644
View file @ 3fbbf1d9
<template>
<div class="detail-info">
<div class="status" :class="`feedback-detail-status-${info.status}`">
{{ STATUS_OBJ[info.status] }}
</div>
<div class="info-body">
<div v-for="label in infoLabel" :key="label.prop">
<span class="info-label">{{ label.label }}：</span>
<span class="info-value">{{ info[label.prop] }}</span>
</div>
</div>
</div>
</template>
<script setup>
const STATUS_OBJ = {
finish: "已完成",
close: "已关闭",
info: "待处置",
};
const props = defineProps({
info: {
type: Object,
default: () => ({}),
},
});
const infoLabel = [
{
label: "下发对象",
prop: "target",
},
{
label: "工单反馈",
prop: "feedback",
},
{
label: "操作时间",
prop: "time",
},
];
</script>
<style lang="scss" scoped>
.detail-info {
background-color: #ffffff;
border-radius: 4px;
border: solid 1px #e3e4ef;
width: 100%;
height: auto;
font-size: 14px;
.status {
width: 100%;
height: 38px;
line-height: 37px;
background-color: #f9fafc;
padding: 0 16px;
font-weight: bold;
border-bottom: 1px solid #e3e4ef;
&.feedback-detail-status {
$statusObj: (
finish: #48ad97,
close: #242c43,
info: #3759be,
);
@each $status, $color in $statusObj {
&-#{$status} {
color: $color;
}
}
}
}
.info-body {
padding: 16px 24px;
& > div {
line-height: 30px;
display: flex;
align-items: flex-start;
.info-label {
width: auto;
color: #7784a6;
}
.info-value {
flex: 1;
color: #242c43;
}
}
}
}
</style>
src/page/main/ticket/modules/feedback-detail/index.vue 0 → 100644
View file @ 3fbbf1d9
<template>
<div class="feedback-detail">
<div class="detail-box" v-for="(detail, index) in detailInfo" :key="`feedback-detail-${index}`">
<Detail :info="detail" />
</div>
</div>
</template>
<script setup>
import Detail from "./detail.vue";
const props = defineProps({
detailInfo: {
type: Array,
default: () => [],
},
});
</script>
<style lang="scss" scoped>
.detail-box {
&:not(:first-child) {
margin-top: 16px;
}
}
</style>
src/page/main/ticket/my-business-ticket/detail/index.vue
View file @ 3fbbf1d9
...@@ -3,12 +3,154 @@ ...@@ -3,12 +3,154 @@
<div class="breadcrumb"> <div class="breadcrumb">
<bg-breadcrumb /> <bg-breadcrumb />
</div> </div>
<div class="content"></div> <div class="content bg-scroll">
<div class="go-back">
<goBack />
</div>
<gap-title :hasLine="true" title="基本信息"></gap-title>
<div class="info">
<Info :labelData="labelData" :valueData="info">
<template #status="{ item, valueData }">
<span class="status-body">
<span class="status" :class="`status-${valueData.status}`"></span>
<span>{{ STATUS_OBJ[valueData[item.prop]] }}</span>
</span>
</template>
</Info>
</div>
<gap-title :hasLine="true" title="推送方式"></gap-title>
<div class="info">
<Info :labelData="notificationMethod" :valueData="info">
<template #value="{ item, valueData }">
<span>{{ valueData[item.prop].map((e) => METHODS[e]).join("，") }}</span>
</template>
</Info>
<div class="notification-lists">
<bg-table border ref="listtable" :headers="headers" :rows="rows" height="100%" :isIndex="true"> </bg-table>
</div>
</div>
<gap-title :hasLine="true" title="工单反馈"></gap-title>
<div class="info">
<feedback-detail :detail-info="detailInfo"></feedback-detail>
</div>
</div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref } from "vue";
import bgBreadcrumb from "@/components/bg-breadcrumb.vue"; import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
import Info from "@/components/warn-detail/info.vue";
import gapTitle from "@/components/gap-title.vue";
import feedbackDetail from "@/page/main/ticket/modules/feedback-detail/index.vue";
import goBack from "@/components/go-back/index.vue";
import { METHODS } from "@/components/manual-distribution/env.js";
const STATUS_OBJ = {
finish: "已完成",
close: "已关闭",
info: "待处置",
};
const labelData = [
[
{
label: "工单名称",
prop: "ticket_name",
},
{
label: "状态",
prop: "status",
},
],
[
{
label: "工单等级",
prop: "ticket_level",
},
{
label: "创建人",
prop: "create_by",
},
],
[
{
label: "工单描述",
prop: "description",
},
],
[
{
label: "创建时间",
prop: "create_time",
},
{
label: "完成时间",
prop: "finish_time",
},
],
];
const info = {
ticket_name: "7月常态化运维巡检任务",
status: "finish",
ticket_level: "紧急任务",
create_by: "管理员",
description: "请进行所有系统常态化月度巡检任务（每月定期常态运维巡检），将巡检结果上报！",
create_time: "2020-01-01 00:00:00",
finish_time: "2020-01-01 00:00:00",
notification_method: ["1", "2"],
};
const notificationMethod = [
[
{
label: "通知方式",
prop: "notification_method",
},
],
];
const headers = [
{
prop: "user_id",
label: "账号",
},
{
prop: "user_name",
label: "姓名",
},
{
prop: "phone",
label: "联系方式",
},
];
const rows = ref([
{
user_id: "11",
user_name: "1111",
phone: "13211111111",
},
{
user_id: "22",
user_name: "2222",
phone: "13222222222",
},
{
user_id: "33",
user_name: "3333",
phone: "13233333333",
},
]);
const detailInfo = ref([
{
status: "close",
target: "张三",
feedback: "任务临时取消",
time: "2022-10-22 09:58:30",
},
{
status: "finish",
target: "李四",
feedback: "任务临时取消",
time: "2022-10-22 09:58:30",
},
]);
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
...@@ -26,6 +168,46 @@ import bgBreadcrumb from "@/components/bg-breadcrumb.vue"; ...@@ -26,6 +168,46 @@ import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
background-color: #ffffff; background-color: #ffffff;
box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.15); box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.15);
border-radius: 6px; border-radius: 6px;
padding: 24px;
.go-back {
margin-bottom: 24px;
}
:deep(.gap-title) {
margin-bottom: 16px;
}
.info,
.feedback-info {
max-width: 1072px;
width: 100%;
padding: 0 8px 0;
&:not(:last-child) {
padding-bottom: 24px;
}
.status {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
margin-right: 8px;
$statusObj: (
finish: #48ad97,
close: #9e9e9e,
info: #3759be,
);
@each $status, $color in $statusObj {
&-#{$status} {
background-color: $color;
}
}
}
.status-body {
display: flex;
align-items: center;
}
.notification-lists {
margin-top: 16px;
}
}
} }
} }
</style> </style>
src/page/main/ticket/my-business-ticket/index.vue
View file @ 3fbbf1d9
...@@ -4,10 +4,7 @@ ...@@ -4,10 +4,7 @@
<bg-breadcrumb /> <bg-breadcrumb />
</div> </div>
<div class="content"> <div class="content">
<bg-filter-group <bg-filter-group @search="changeSearch" v-model="filter.key_word" placeholder="请输入角色名称">
@search="changeSearch"
v-model="filter.key_word"
placeholder="请输入角色名称">
<template v-slot:filter_group> <template v-slot:filter_group>
<div class="left-filter filter_list"> <div class="left-filter filter_list">
<div class="filter_item"> <div class="filter_item">
...@@ -63,15 +60,9 @@ ...@@ -63,15 +60,9 @@
</bg-filter-group> </bg-filter-group>
<div class="table_container"> <div class="table_container">
<div class="table"> <div class="table">
<bg-table <bg-table ref="listtable" :headers="headers" :rows="rows" height="100%" :isIndex="true" :stripe="true">
ref="listtable" <template #ticket_name="{ row }">
:headers="headers" <div class="href" @click="goTo(row)">{{ row.ticket_name || "-" }}</div>
:rows="rows"
height="100%"
:isIndex="true"
:stripe="true">
<template #work_order_name="{ row }">
<div class="href" @click="goTo(row)">{{ row.work_order_name || "-" }}</div>
</template> </template>
<template #operation="{ row }"> <template #operation="{ row }">
<span class="primary-edit" @click="operation(row)"> 处置反馈 </span> <span class="primary-edit" @click="operation(row)"> 处置反馈 </span>
...@@ -156,7 +147,7 @@ const statusOptions = ref([ ...@@ -156,7 +147,7 @@ const statusOptions = ref([
let headers = reactive([ let headers = reactive([
{ {
label: "工单名称", label: "工单名称",
prop: "work_order_name", prop: "ticket_name",
align: "left", align: "left",
}, },
{ {
...@@ -166,7 +157,7 @@ let headers = reactive([ ...@@ -166,7 +157,7 @@ let headers = reactive([
}, },
{ {
label: "工单状态", label: "工单状态",
prop: "work_order_status", prop: "ticket_status",
align: "left", align: "left",
}, },
{ {
...@@ -197,9 +188,9 @@ let headers = reactive([ ...@@ -197,9 +188,9 @@ let headers = reactive([
}, },
]); ]);
let rows = ref([ let rows = ref([
{ work_order_name: 11, id: 111 }, { ticket_name: 11, id: 111 },
{ work_order_name: 22, id: 222 }, { ticket_name: 22, id: 222 },
{ work_order_name: 33, id: 333 }, { ticket_name: 33, id: 333 },
]); ]);
const changeSize = (size) => { const changeSize = (size) => {
filter.limit = size; filter.limit = size;
......
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