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>
<div class="gap-title">
<span>{{title}}</span>
</div>
<div
class="gap-title"
:class="{
'has-line': hasLine,
}">
<span>{{ title }}</span>
</div>
</template>
<script>
export default {
props: {
title:{
type:String,
default:""
}
},
components: {
},
data() {
return {
};
},
watch: {
},
computed: {
},
created() {
},
mounted() {
},
methods: {
},
props: {
title: {
type: String,
default: "",
},
hasLine: {
type: Boolean,
default: false,
},
},
components: {},
data() {
return {};
},
watch: {},
computed: {},
created() {},
mounted() {},
methods: {},
};
</script>
<style scoped>
.gap-title{
font-size: 18px;
font-weight: 600;
color: #202531;
display: flex;
align-items: center;
.gap-title {
height: 18px;
font-size: 18px;
font-weight: 600;
color: #202531;
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{
content:'';
display: inline-block;
margin-right: 8px;
width: 4px;
height: 16px;
background-color: #2b4695;
border-radius: 2px;
.gap-title.has-line::after {
content: "";
display: inline-block;
flex: 1;
border-top: 1px dashed #dadee7;
margin-left: 8px;
}
</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 @@
{{ item.label }}
</div>
<div class="value">
<span v-if="item.prop == 'status'">
<span class="status" :class="`status-${valueData.status}`"></span>
<span>{{ STATUS_OBJ[valueData[item.prop]] }}</span>
</span>
<span v-else>
{{ valueData[item.prop] }}
</span>
<div class="value-body">
<span v-if="item.prop == 'status'">
<slot name="status" :item="item" :valueData="valueData" v-if="slots.status" />
<span class="status-body" v-else>
<span class="status" :class="`status-${valueData.status}`"></span>
<span>{{ STATUS_OBJ[valueData[item.prop]] }}</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>
......@@ -20,8 +26,9 @@
</template>
<script setup>
import { computed } from "vue";
import { STATUS_OBJ } from "./env.js"
import { useSlots, computed } from "vue";
import { STATUS_OBJ } from "./env.js";
const slots = useSlots();
const props = defineProps({
labelData: {
......@@ -32,6 +39,13 @@ const props = defineProps({
type: Object,
default: () => ({}),
},
status_obj: {
type: Object,
default: null,
},
});
const status_obj = computed(() => {
return props.status_obj || STATUS_OBJ;
});
</script>
......@@ -58,29 +72,47 @@ const props = defineProps({
background-color: #f7f7f9;
border-right: 1px solid #dadee7;
padding: 0 16px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
.value {
height: 100%;
flex: 1;
border-right: 1px solid #dadee7;
padding: 0 16px;
display: flex;
align-items: center;
.status {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
margin-right: 8px;
$statusObj: (
success: #48ad97,
error: #d75138,
);
@each $status, $color in $statusObj {
&-#{$status} {
background-color: $color;
position: relative;
.value-body {
padding: 0 16px;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
.status {
display: inline-block;
width: 6px;
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 @@
<div class="breadcrumb">
<bg-breadcrumb />
</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>
</template>
<script setup>
import { ref } from "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>
<style lang="scss" scoped>
......@@ -26,6 +168,46 @@ import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
background-color: #ffffff;
box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.15);
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>
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 @@
<div class="breadcrumb">
<bg-breadcrumb />
</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>
</template>
<script setup>
import { ref } from "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>
<style lang="scss" scoped>
......@@ -26,6 +168,46 @@ import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
background-color: #ffffff;
box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.15);
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>
src/page/main/ticket/my-business-ticket/index.vue
View file @ 3fbbf1d9
......@@ -4,10 +4,7 @@
<bg-breadcrumb />
</div>
<div class="content">
<bg-filter-group
@search="changeSearch"
v-model="filter.key_word"
placeholder="请输入角色名称">
<bg-filter-group @search="changeSearch" v-model="filter.key_word" placeholder="请输入角色名称">
<template v-slot:filter_group>
<div class="left-filter filter_list">
<div class="filter_item">
......@@ -63,15 +60,9 @@
</bg-filter-group>
<div class="table_container">
<div class="table">
<bg-table
ref="listtable"
:headers="headers"
:rows="rows"
height="100%"
:isIndex="true"
:stripe="true">
<template #work_order_name="{ row }">
<div class="href" @click="goTo(row)">{{ row.work_order_name || "-" }}</div>
<bg-table ref="listtable" :headers="headers" :rows="rows" height="100%" :isIndex="true" :stripe="true">
<template #ticket_name="{ row }">
<div class="href" @click="goTo(row)">{{ row.ticket_name || "-" }}</div>
</template>
<template #operation="{ row }">
<span class="primary-edit" @click="operation(row)"> 处置反馈 </span>
......@@ -156,7 +147,7 @@ const statusOptions = ref([
let headers = reactive([
{
label: "工单名称",
prop: "work_order_name",
prop: "ticket_name",
align: "left",
},
{
......@@ -166,7 +157,7 @@ let headers = reactive([
},
{
label: "工单状态",
prop: "work_order_status",
prop: "ticket_status",
align: "left",
},
{
......@@ -197,9 +188,9 @@ let headers = reactive([
},
]);
let rows = ref([
{ work_order_name: 11, id: 111 },
{ work_order_name: 22, id: 222 },
{ work_order_name: 33, id: 333 },
{ ticket_name: 11, id: 111 },
{ ticket_name: 22, id: 222 },
{ ticket_name: 33, id: 333 },
]);
const changeSize = (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