Skip to content

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

feat: 

工单列表
parent 6c696f85
Show whitespace changes
Inline Side-by-side
Showing with 652 additions and 421 deletions
src/bg-ui/index.scss
View file @ 3fbbf1d9
......@@ -19,7 +19,6 @@ a {
.clearfix {
zoom: 1;
&::after {
content: "";
display: block;
......@@ -65,7 +64,6 @@ a {
max-width: 750px;
margin: 0 auto;
}
.el-form-item {
.el-form-item__label {
float: unset;
......@@ -75,11 +73,9 @@ a {
color: #202531;
line-height: 36px;
}
.el-form-item__content {
line-height: 36px;
// margin-top: 40px;
.el-select,
.img_crop,
.el-cascader,
......@@ -87,13 +83,11 @@ a {
.el-date-editor {
width: 100%;
}
.wangeditor_class {
min-height: 553px;
border: 1px solid #dadee7;
border-radius: 4px;
overflow: hidden;
.toolbar {
.w-e-toolbar {
.w-e-menu {
......@@ -103,12 +97,10 @@ a {
}
}
}
&.inline {
display: flex;
justify-content: flex-start;
align-items: flex-start;
.el-form-item__label {
width: 6em;
padding: 0;
......@@ -116,30 +108,25 @@ a {
color: #616f94;
text-align: right;
margin-right: 1em;
&:before {
display: inline;
margin-left: -1em;
}
}
.el-form-item__content {
width: calc(100% - 7em);
flex-grow: 1;
}
}
&:last-child {
margin-bottom: 0;
}
}
.el-button {
min-width: 64px;
height: 36px;
padding: 0 10px;
line-height: 36px;
&.el-button--default {
background-color: #fff;
color: #404a62;
......@@ -174,7 +161,6 @@ a {
border-color: #404a62;
color: #fff;
}
&.is-disabled,
&.is-disabled:focus,
&.is-disabled:hover {
......@@ -185,35 +171,29 @@ a {
cursor: not-allowed;
opacity: 0.5;
}
+ .el-button {
margin-left: 16px;
}
}
.el-input .el-input__inner,
.el-textarea .el-textarea__inner {
background-color: #f7f7f9;
border: solid 1px #dadee7;
border-radius: 4px;
}
.el-input {
.el-input__inner {
height: 36px;
}
&.el-input-group {
> .el-input__inner {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
> .el-input-group__append {
background-color: transparent;
padding: 0;
border: none;
.input-append {
display: block;
min-width: 120px;
......@@ -228,7 +208,6 @@ a {
color: #f4f7fc;
text-align: center;
cursor: pointer;
&.disabled {
background-color: #a9b1c7;
cursor: not-allowed;
......@@ -236,7 +215,6 @@ a {
}
}
}
&.is-disabled {
.el-input__inner {
background-color: #e6e9ef;
......@@ -244,7 +222,6 @@ a {
}
}
}
.el-textarea {
.el-input__count {
background: #fff;
......@@ -256,14 +233,11 @@ a {
right: 10px;
}
}
.el-range-editor.el-input__inner {
height: 36px;
}
.el-pagination {
padding: 0 10px;
> * {
height: 36px !important;
background-color: transparent !important;
......@@ -271,23 +245,19 @@ a {
line-height: 36px !important;
color: #404a62;
}
> .el-pager > li {
height: 36px !important;
background-color: transparent !important;
line-height: 36px !important;
color: #404a62 !important;
&.active {
color: #3759be !important;
}
}
.el-input__inner {
background-color: #f7f7f9;
}
}
.el-checkbox {
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
......@@ -295,7 +265,6 @@ a {
border-color: #0c74a7;
}
}
.el-select {
.el-input {
.el-input__icon {
......@@ -306,17 +275,14 @@ a {
}
}
}
.el-tree {
.el-tree-node__content {
height: 32px;
display: flex;
justify-content: flex-start;
align-items: center;
.el-tree-node__expand-icon {
color: #2b4695;
&.el-icon-caret-right {
width: 16px;
height: 16px;
......@@ -326,7 +292,6 @@ a {
box-sizing: border-box;
margin-right: 8px;
text-align: center;
&:before {
content: "\e6d9";
font-size: 12px;
......@@ -334,34 +299,28 @@ a {
line-height: 14px;
color: #3759be;
}
&.expanded {
transform: rotate(0deg);
&:before {
content: "\e6d8";
}
}
&.is-leaf {
opacity: 0;
}
}
}
.el-tree-node__label {
font-size: 14px;
color: #404a62;
line-height: 32px;
}
}
&.el-tree--highlight-current {
.el-tree-node {
&.is-current {
> .el-tree-node__content {
background-color: #dfe5f6;
.el-tree-node__label {
color: #3759be;
}
......@@ -370,7 +329,6 @@ a {
}
}
}
&.float-label {
.el-form-item {
.el-form-item__label {
......@@ -378,7 +336,6 @@ a {
}
}
}
&.width-1340 {
.el-input,
.el-textarea,
......@@ -392,35 +349,29 @@ a {
display: flex;
justify-content: space-between;
align-items: center;
> .el-breadcrumb {
flex-shrink: 0;
white-space: nowrap;
height: 46px;
padding: 16px 0;
box-sizing: border-box;
.el-breadcrumb__item {
> span {
font-size: 14px;
font-weight: normal;
// line-height: 24px;
color: #909bb6;
&:hover{
&:hover {
color: #5170cd;
cursor: pointer;
}
}
&:last-child {
> span {
color: #202531;
}
}
}
& + * {
width: 429px;
flex-grow: 0;
......@@ -429,7 +380,6 @@ a {
margin: 7px 0 7px 14px;
}
}
&.deep-bg {
> .el-breadcrumb {
.el-breadcrumb__item {
......@@ -446,10 +396,8 @@ a {
.bg-dialog {
.el-dialog {
border-radius: 4px;
.el-dialog__header {
padding: 10px 16px;
.el-dialog__title {
padding-left: 1em;
position: relative;
......@@ -457,7 +405,6 @@ a {
font-weight: bolder;
color: #1d1e20;
line-height: 30px;
&::before {
content: "";
position: absolute;
......@@ -470,32 +417,25 @@ a {
}
}
}
.el-dialog__body {
padding: 24px 16px;
}
.el-dialog__footer {
padding: 8px 16px 16px;
}
.dialog-msg {
text-align: left;
> p {
font-size: 14px;
line-height: 1.5;
&:nth-child(1) {
font-size: 18px;
}
& + p {
margin-top: 14px;
}
}
}
.dialog-rich-text-content {
min-height: 650px;
font-size: 14px;
......@@ -509,10 +449,8 @@ a {
user-select: none;
height: 100%;
padding-top: 9px;
.bg-nav-title {
padding: 0 0 12px 24px;
> h3 {
font-size: 18px;
font-weight: bolder;
......@@ -520,18 +458,14 @@ a {
line-height: 30px;
}
}
> .bg-nav-list {
height: calc(100% - 10px);
box-sizing: border-box;
ul.nav-list {
height: 100%;
overflow: auto;
> li {
position: relative;
> .nav-item {
position: relative;
display: block;
......@@ -542,11 +476,9 @@ a {
text-decoration: none;
color: #fff;
cursor: pointer;
&:hover:not(.nav-more),
&.current {
color: #fff;
&::before {
content: "";
width: 100%;
......@@ -557,7 +489,6 @@ a {
background-color: #2a4aa7;
z-index: -1;
}
&::after {
content: "";
width: 3px;
......@@ -570,7 +501,6 @@ a {
}
}
}
> ul.nav-list {
background-color: #202531;
}
......@@ -583,7 +513,6 @@ a {
display: flex;
justify-content: flex-start;
align-items: flex-start;
> .bg-filtrate-text {
width: 7em;
flex-shrink: 0;
......@@ -594,7 +523,6 @@ a {
margin: 8px 0;
text-align: right;
}
> .bg-filtrate-list {
padding: 0;
margin: 0 0 0 10px;
......@@ -602,7 +530,6 @@ a {
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
> li {
height: 24px;
padding: 0 5px;
......@@ -611,11 +538,9 @@ a {
color: #202531;
cursor: pointer;
margin: 8px 0;
&:not(:last-child) {
margin-right: 20px;
}
&.current {
border-radius: 3px;
background-color: #2b4695;
......@@ -623,7 +548,6 @@ a {
}
}
}
> .bg-filtrate-title {
width: 7em;
height: 36px;
......@@ -633,7 +557,6 @@ a {
margin: 8px 0;
text-align: right;
}
> .bg-filtrate-content {
flex-shrink: 0;
margin: 8px 0 8px 10px;
......@@ -645,7 +568,7 @@ a {
display: none;
}
.el-table__empty-block {
height: 500px!important;
height: 500px !important;
.empty_container {
height: 500px;
padding-top: 247px;
......@@ -662,20 +585,17 @@ a {
}
th,
td {
padding: 11px 0!important;
padding: 11px 0 !important;
> .cell {
padding: 0 10px !important;
color: #404a62;
line-height: 16px;
}
}
&.el-table--border {
border-top-color: #b0bee8;
.el-table__header-wrapper {
position: relative;
&::before {
content: "";
width: 1px;
......@@ -686,7 +606,6 @@ a {
left: 0;
z-index: 1;
}
&::after {
content: "";
width: 0px;
......@@ -697,21 +616,19 @@ a {
bottom: 0;
z-index: 2;
}
table {
th {
border-color: #b0bee8;
background-color: #dfe5f6;
border-color: #dadee7;
background-color: #f5f6f9;
}
}
}
}
.stripe-row td {
background-color: #fff!important;
background-color: #fff !important;
}
.white-row td {
background-color: #f7f7f9!important;
background-color: #f7f7f9 !important;
}
.el-table--striped .el-table__body tr.el-table__row--striped td {
background-color: #f7f7f9;
......@@ -723,24 +640,20 @@ a {
th {
background-color: #e6e9ef;
}
tr {
&.has-children {
background-color: #f7f7f9;
}
}
}
.el-form-item {
margin: 0 !important;
.el-form-item__error {
top: unset;
bottom: -12px;
transform: scale(0.8);
transform-origin: 0 0;
}
.el-form-item__content {
margin: 0 !important;
}
......@@ -749,17 +662,15 @@ a {
max-width: 388px;
padding: 15px 12px;
color: #202531;
box-shadow: 0px 4px 12px 0px
rgba(18, 30, 63, 0.1);
box-shadow: 0px 4px 12px 0px rgba(18, 30, 63, 0.1);
border: solid 1px #e6e9ef;
font-size: 14px;
}
}
.bg-table-pro{
.bg-table-pro {
th,
td {
> .cell {
padding: 0 10px !important;
overflow: unset;
......@@ -768,14 +679,9 @@ a {
align-items: center;
}
}
&.el-table--border {
.el-table__header-wrapper {
table {
th {
border-color: #dadee7;
background-color: #f5f6f9;
......@@ -786,19 +692,15 @@ a {
}
.bg-table-tree {
.th,
.td {
>.cell {
> .cell {
display: flex;
justify-content: flex-start;
align-items: center;
>.el-input {
> .el-input {
flex: 1 1 auto;
}
}
}
}
......@@ -808,7 +710,7 @@ a {
color: #3759be;
cursor: pointer;
&:hover {
color: #738bd2
color: #738bd2;
}
&:active {
color: #2c4798;
......@@ -821,11 +723,9 @@ a {
color: #a9b1c7;
}
}
& + .bg-table-btn {
position: relative;
margin-left: 33px;
&::before {
content: "";
position: absolute;
......@@ -843,10 +743,8 @@ a {
box-shadow: 0px 4px 16px 0px rgba(18, 30, 0.03, 0.08);
border-radius: 12px;
overflow: hidden;
> .bg-tabs-nav {
background-color: #fff;
> ul {
height: 64px;
padding: 0;
......@@ -855,7 +753,6 @@ a {
display: flex;
justify-content: space-between;
align-items: stretch;
> li {
flex-grow: 0;
width: 320px;
......@@ -870,7 +767,6 @@ a {
color: #616f94;
background: #f7f7f9;
cursor: pointer;
&.current {
position: relative;
border-top-right-radius: 6px;
......@@ -881,7 +777,6 @@ a {
color: #3759be;
background-color: #fff;
overflow: hidden;
// &::before {
// content: "";
// position: absolute;
......@@ -892,11 +787,9 @@ a {
// background-color: #e56600;
// }
}
&:first-child {
border-left: none;
}
&:last-child {
flex-grow: 1;
flex-shrink: 1;
......@@ -905,31 +798,25 @@ a {
}
}
}
> .bg-tabs-content {
padding: 30px 16px;
}
&.nice-tabs {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
> .bg-tabs-nav {
flex-shrink: 0;
flex-grow: 0;
}
> .bg-tabs-content {
padding: 30px 0;
flex-shrink: 1;
flex-grow: 1;
> .bg-tab {
padding: 0;
margin: 0;
.el-input,
.el-textarea,
.bg-tags {
......@@ -937,7 +824,6 @@ a {
}
}
}
> .bg-tabs-action {
flex-shrink: 0;
flex-grow: 0;
......@@ -951,7 +837,6 @@ a {
.bg-tab {
> .tab-title {
margin-bottom: 16px;
> h3 {
position: relative;
padding-left: 16px;
......@@ -960,7 +845,6 @@ a {
font-weight: bolder;
line-height: 32px;
color: #202531;
&::before {
content: "";
width: 4px;
......@@ -972,11 +856,9 @@ a {
}
}
}
> .tab-content {
padding: 0px 40px;
}
& + .bg-tab {
margin-top: 30px;
}
......@@ -990,7 +872,6 @@ a {
z-index: 1998;
background-color: #eef0f5;
padding: 16px 16px 0;
> ul {
background-color: #fff;
height: 64px;
......@@ -1001,7 +882,6 @@ a {
justify-content: space-between;
align-items: stretch;
box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.1);
> li {
flex-grow: 0;
width: 320px;
......@@ -1015,10 +895,8 @@ a {
line-height: 25px;
color: #404a62;
cursor: pointer;
&.current {
position: relative;
&::before {
content: "";
position: absolute;
......@@ -1029,7 +907,6 @@ a {
background-color: #275a9d;
}
}
&:last-child {
flex-grow: 1;
flex-shrink: 1;
......@@ -1044,43 +921,35 @@ a {
display: flex;
flex-direction: column;
align-content: stretch;
> .bg-list-header {
margin-bottom: 16px;
> .bg {
background-color: #ffffff;
box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.1);
border-radius: 6px;
padding: 10px 16px;
}
> .header-content {
background-color: #ffffff;
box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.1);
border-radius: 6px;
> .header-action {
padding: 16px;
border-bottom: solid 1px #e6e9ef;
}
> .header-main {
padding: 16px;
}
}
}
> .bg-list-filter {
background-color: #ffffff;
box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.1);
border-radius: 6px;
margin-bottom: 16px;
}
> .bg-list-top {
margin-bottom: 16px;
> .bg {
background-color: #ffffff;
box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.1);
......@@ -1088,7 +957,6 @@ a {
padding: 10px 16px;
}
}
> .bg-list-main {
flex-grow: 1;
height: 205px;
......@@ -1098,13 +966,11 @@ a {
padding: 10px 16px 0;
box-sizing: border-box;
margin-bottom: 16px;
> .main-action {
padding-bottom: 16px;
margin: 4px 0 10px;
zoom: 1;
position: relative;
&::before {
content: "";
position: absolute;
......@@ -1113,7 +979,6 @@ a {
left: -16px;
border-bottom: 1px solid #e6e9ef;
}
&::after {
content: "";
display: block;
......@@ -1121,17 +986,14 @@ a {
clear: both;
}
}
> .main-table {
height: calc(100% - 36px - 16px * 2);
}
> .main-pagination {
height: 36px;
margin-top: 16px;
text-align: center;
}
&.has-action {
> .main-table {
height: calc(100% - 36px - 16px * 2 - 67px);
......@@ -1142,28 +1004,23 @@ a {
.bg-list-filter {
overflow: hidden;
> .fiter-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px;
border-bottom: 1px solid #e6e9ef;
> .el-button {
width: 103px;
+ .el-button {
margin-left: 18px;
}
}
> .filter-header-right {
width: 320px;
text-align: right;
}
}
> .filter-content {
// height: 136px;
padding: 8px 14px;
......@@ -1171,68 +1028,53 @@ a {
display: flex;
justify-content: space-between;
align-items: flex-start;
> .filter-action {
flex-shrink: 0;
display: flex;
justify-content: flex-start;
align-items: center;
.filters-right {
width: 240px;
margin-right: 10px;
}
> .el-button {
margin-top: 8px;
margin-bottom: 8px;
}
}
&.inline-filters {
min-height: unset !important;
height: unset !important;
> .filter-list {
margin-left: 1em;
> .bg-btns {
margin-right: 30px;
}
> .bg-filtrate {
display: inline-flex;
margin-right: 30px;
> .bg-filtrate-text,
> .bg-filtrate-title {
width: unset;
flex-shrink: 0;
}
> .bg-filtrate-content {
flex-grow: 1;
flex-shrink: 1;
> .el-input {
width: 160px;
}
> .el-select {
width: 160px;
}
> .el-date-editor {
width: 260px;
&.el-date-editor--datetimerange {
width: 400px;
}
}
> .el-radio-group {
height: 36px;
> label {
line-height: 36px;
}
......@@ -1241,7 +1083,6 @@ a {
}
}
}
&.show-more {
// min-height: 136px;
height: unset;
......@@ -1251,11 +1092,9 @@ a {
.bg-detail {
padding: 0 16px;
> .bg-detail-info {
margin-bottom: 16px;
}
> .bg-detail-tabs {
background-color: #ffffff;
box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.1);
......@@ -1266,7 +1105,6 @@ a {
.bg-edit {
padding: 0 16px;
.bg-edit-main {
min-height: calc(100vh - 58px - 44px - 16px);
background-color: #ffffff;
......@@ -1274,13 +1112,11 @@ a {
border-radius: 6px;
padding: 16px;
margin-bottom: 16px;
> .main-action {
padding-bottom: 17px;
margin-bottom: 16px;
position: relative;
zoom: 1;
&::before {
content: "";
position: absolute;
......@@ -1289,7 +1125,6 @@ a {
left: -16px;
border-bottom: 1px solid #e6e9ef;
}
&::after {
content: "";
display: block;
......@@ -1307,26 +1142,22 @@ a {
border: 1px solid #e3e5ef;
border-radius: 6px;
overflow: hidden;
> .el-input-number {
height: 36px;
flex-grow: 1;
line-height: 36px;
.el-input__inner {
border: none;
border-radius: 0;
background-color: #f7f8f9;
text-align: left;
}
.el-input-number__decrease,
.el-input-number__increase {
border: none;
color: #515fe7;
}
}
> .bg-input-number__text {
min-width: 50px;
padding: 0 15px;
......@@ -1344,22 +1175,14 @@ a {
border-radius: 4px;
margin: 10px;
overflow: hidden;
> .card-title {
height: 48px;
padding: 0 15px;
background-image: linear-gradient(
270deg,
#ffffff 0%,
#fef6f2 58%,
#fcede4 100%
),
linear-gradient(#fcede4, #fcede4);
background-image: linear-gradient(270deg, #ffffff 0%, #fef6f2 58%, #fcede4 100%), linear-gradient(#fcede4, #fcede4);
background-blend-mode: normal, normal;
display: flex;
justify-content: space-between;
align-items: center;
.title-text {
flex-grow: 1;
font-size: 18px;
......@@ -1368,7 +1191,6 @@ a {
color: #202531;
position: relative;
padding-left: 15px;
&::before {
content: "";
width: 4px;
......@@ -1379,7 +1201,6 @@ a {
left: 0;
}
}
.filter-list {
flex-shrink: 0;
display: flex;
......@@ -1389,7 +1210,6 @@ a {
padding: 2px;
border-radius: 5px;
margin-left: 10px;
> li {
min-width: 50px;
height: 20px;
......@@ -1401,38 +1221,31 @@ a {
color: #909bb6;
text-align: center;
cursor: pointer;
&.current {
background-color: #ff6a00;
color: #f8f9fd;
}
}
}
.download-btn {
flex-shrink: 0;
margin-left: 10px;
cursor: pointer;
> img {
display: block;
}
> .el-loading-mask {
cursor: not-allowed;
.el-loading-spinner {
margin-top: -10px;
}
}
}
}
> .card-content {
height: calc(100% - 48px);
padding: 10px 15px;
box-sizing: border-box;
> * {
width: 100% !important;
height: 100% !important;
......@@ -1442,19 +1255,15 @@ a {
.bg-pinboard-container {
padding: 0 14px 10px;
> .bg-pinboard-content {
zoom: 1;
margin: -10px -10px 0;
> .bg-layout-card {
float: left;
&.fr {
float: right;
}
}
&:after {
content: "";
display: block;
......@@ -1474,7 +1283,6 @@ a {
border-top: 1px solid #e3e5ef;
border-left: 1px solid #e3e5ef;
box-sizing: border-box;
> li {
border-right: 1px solid #e3e5ef;
border-bottom: 1px solid #e3e5ef;
......@@ -1483,7 +1291,6 @@ a {
display: flex;
justify-content: flex-start;
align-items: stretch;
> span {
flex: 0 0 auto;
padding: 10px 16px;
......@@ -1491,21 +1298,18 @@ a {
font-size: 14px;
line-height: 24px;
color: #404a62;
&:nth-child(1) {
flex-shrink: 0;
width: 240px;
background-color: #f7f8f9;
color: #616f94;
}
&:nth-child(2) {
flex-grow: 1;
width: calc(100% - 240px);
border-left: 1px solid #e3e5ef;
color: #404a62;
position: relative;
> .copy-btn {
position: absolute;
top: 50%;
......@@ -1526,7 +1330,6 @@ a {
}
}
}
&:last-child {
flex-grow: 1;
}
......@@ -1536,7 +1339,6 @@ a {
.bg-btns {
display: inline-block;
> ul {
padding: 2px;
background-color: #edeef0;
......@@ -1544,7 +1346,6 @@ a {
display: flex;
justify-content: flex-start;
align-items: center;
> li {
height: 24px;
padding: 0 16px;
......@@ -1552,7 +1353,6 @@ a {
line-height: 24px;
color: #8890a7;
cursor: pointer;
&.is-active {
background-color: #2b4695;
border-radius: 4px;
......@@ -1572,7 +1372,6 @@ a {
display: flex;
justify-content: flex-start;
align-items: center;
&::before {
content: "";
width: 4px;
......@@ -1582,7 +1381,6 @@ a {
left: 0;
background-color: #275a9d;
}
> span {
+ img {
margin-left: 10px;
......@@ -1597,7 +1395,6 @@ a {
color: #404a62;
padding-left: 16px;
position: relative;
&::before {
content: "";
width: 4px;
......@@ -1607,7 +1404,6 @@ a {
left: 0;
background-color: #275a9d;
}
> span {
color: #e56600;
}
......@@ -1615,7 +1411,6 @@ a {
.bg-upload {
text-align: left;
.trigger-content {
width: 360px;
height: 180px;
......@@ -1627,14 +1422,12 @@ a {
flex-direction: column;
justify-content: center;
align-items: stretch;
> .trigger-icon {
font-size: 0;
line-height: 1;
text-align: center;
margin-bottom: 16px;
}
> .trigger-tip {
font-size: 14px;
line-height: 21px;
......@@ -1643,7 +1436,6 @@ a {
margin: 0;
}
}
&.is-disabled {
.el-upload,
.el-upload__tip {
......@@ -1652,21 +1444,16 @@ a {
line-height: 18px;
}
}
&.is-easy {
> div {
max-width: unset !important;
display: flex;
justify-content: flex-start;
align-items: center;
> .el-upload-list {
margin: 0 0 0 16px;
> .el-upload-list__item {
margin: 0;
& + .el-upload-list__item {
margin-top: 5px;
}
......@@ -1680,7 +1467,6 @@ a {
}
.bg-upload-image {
.trigger-content {
> .image-trigger {
width: 144px;
......@@ -1688,12 +1474,10 @@ a {
border: 1px solid #dadee7;
box-sizing: border-box;
position: relative;
> img {
display: block;
width: 100%;
}
> .refresh-image {
position: absolute;
top: 0;
......@@ -1707,14 +1491,12 @@ a {
font-size: 20px;
color: #fff;
}
&:hover {
> .refresh-image {
display: flex;
}
}
}
> .upload-trigger {
width: 144px;
height: 144px;
......@@ -1726,12 +1508,10 @@ a {
display: flex;
justify-content: center;
align-items: center;
> .upload-icon {
width: 40px;
height: 40px;
position: relative;
&::before {
content: "";
width: 100%;
......@@ -1741,7 +1521,6 @@ a {
top: 19.5px;
left: 0;
}
&::after {
content: "";
width: 1px;
......@@ -1760,30 +1539,25 @@ a {
> .el-form-item {
width: 100%;
margin-right: 0;
> label {
color: #202531;
}
> .el-form-item__content {
.el-input__inner,
.el-textarea__inner {
background-color: #f7f7f9;
}
}
&.inline {
display: flex;
justify-content: flex-start;
align-items: flex-start;
> label {
width: 10em;
flex-shrink: 0;
color: #616f94;
text-align: right;
}
> .el-form-item__content {
width: calc(100% - 7em);
flex-grow: 1;
......@@ -1795,12 +1569,10 @@ a {
.auto-height {
.el-select-dropdown__item {
height: unset;
.bg-option-title {
font-size: 14px;
color: #fff;
}
.bg-option-sub-title {
font-size: 12px;
color: #9ea2aa;
......@@ -1827,15 +1599,12 @@ a {
padding: 5px;
border: 1px solid #dadee7;
border-radius: 4px;
> li {
margin: 5px;
> a {
cursor: pointer;
margin-left: 5px;
}
&.tag-item {
height: 36px;
padding: 5px 10px;
......@@ -1853,17 +1622,14 @@ a {
.bg-scroll {
overflow: hidden auto;
&::-webkit-scrollbar {
width: 16px;
}
/* &::-webkit-scrollbar-track {
border-radius: 8px;
box-shadow: 8px 0 0 #f4f4f4 inset;
border: 4px solid rgba(0, 0, 0, 0);
} */
&::-webkit-scrollbar-thumb {
border-radius: 8px;
box-shadow: 8px 0 0 #c1c7d7 inset;
......@@ -1873,17 +1639,14 @@ a {
.bg-no-scroll {
overflow: hidden auto;
&::-webkit-scrollbar {
width: 0px;
}
/* &::-webkit-scrollbar-track {
border-radius: 8px;
box-shadow: 8px 0 0 #f4f4f4 inset;
border: 4px solid rgba(0, 0, 0, 0);
} */
&::-webkit-scrollbar-thumb {
border-radius: 0px;
border: 0px solid rgba(0, 0, 0, 0);
......@@ -1902,8 +1665,7 @@ a {
background-color: #2b4695;
cursor: pointer;
user-select: none;
transition: all .3s;
transition: all 0.3s;
> .label {
font-size: 12px;
font-weight: 400;
......@@ -1911,7 +1673,6 @@ a {
position: absolute;
color: #fff;
}
> .circle {
width: 16px;
height: 16px;
......@@ -1919,9 +1680,8 @@ a {
position: absolute;
// top: 2px;
background-color: #fff;
transition: all .3s,
transition: all 0.3s;
}
&.disabled {
cursor: not-allowed;
}
......@@ -1931,13 +1691,11 @@ a {
display: flex;
justify-content: flex-start;
align-items: center;
> .bg-filtrate {
> * {
margin-top: 0;
margin-bottom: 0;
}
+ .bg-filtrate {
margin-left: 30px;
}
......@@ -1946,28 +1704,23 @@ a {
.bg-rich-text {
text-align: left;
.w-e-toolbar,
.w-e-text-container {
border: 1px solid #dadee7 !important;
width: 100%;
z-index: 1!important;
z-index: 1 !important;
}
.w-e-toolbar {
border-radius: 4px 4px 0 0;
z-index: 2!important;
z-index: 2 !important;
}
.w-e-text-container {
border-radius: 0 0 4px 4px;
border-top: none !important;
}
.w-e-text {
overflow-y: auto;
}
.onlyread {
height: 300px;
padding: 10px;
......@@ -1983,7 +1736,6 @@ a {
display: flex;
justify-content: flex-start;
align-items: flex-start;
> span {
// width: 4em;
height: 24px;
......@@ -1995,13 +1747,11 @@ a {
margin: 8px 0;
// min-width: 115px;
}
> ul {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
> li {
background-color: #fff;
// border: solid 1px #fff;
......@@ -2011,7 +1761,6 @@ a {
color: #202531;
cursor: pointer;
margin: 6px 4px;
&.current {
background-color: #2b4695;
// border: solid 1px #718ad6;
......@@ -2026,22 +1775,18 @@ a {
display: inline-flex;
justify-content: flex-start;
align-items: center;
> a {
height: 20px;
font-size: 15px;
line-height: 20px;
color: #8890a7;
cursor: pointer;
&.current {
color: #515fe7;
}
& + a {
position: relative;
margin-left: 30px;
&::before {
content: "";
width: 1px;
......@@ -2069,7 +1814,6 @@ a {
.el-carousel__indicators--horizontal {
bottom: 40px;
}
.el-carousel__indicator--horizontal {
padding: 0;
width: 48px;
......@@ -2077,60 +1821,50 @@ a {
background-color: #ffffff;
opacity: 0.3;
margin: 0 16px;
> button {
display: block;
width: 100%;
height: 100%;
background-color: transparent;
}
&.is-active {
opacity: 0.8;
}
}
&.hide-indicators {
.el-carousel__indicators {
display: none;
}
}
&.hide-bar {
.el-carousel__indicators--horizontal {
bottom: 20px;
}
.el-carousel__indicator--horizontal {
padding: 0;
width: 24px;
height: 4px;
background-color: #d0d8f1;
margin: 0 8px;
&.is-active {
background-color: #2b4695;
}
}
}
.el-carousel__indicators--vertical {
right: 20px;
.el-carousel__indicator--vertical {
padding: 0;
height: 24px;
width: 4px;
background-color: #d0d8f1;
margin: 8px 0;
> button {
display: block;
width: 100%;
height: 100%;
background-color: transparent;
}
&.is-active {
background-color: #2b4695;
}
......@@ -2153,13 +1887,11 @@ a {
line-height: 48px;
color: #202531;
text-align: center;
> span {
display: inline-block;
height: 48px;
padding: 0 64px;
position: relative;
&::before,
&::after {
content: "";
......@@ -2169,16 +1901,13 @@ a {
height: 1px;
background-color: #b0bee8;
}
&::before {
left: 0;
}
&::after {
right: 0;
}
}
&.light-text {
color: #fff;
}
......@@ -2224,11 +1953,9 @@ a {
.bg-card {
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;
margin-bottom: 16px;
.card-title {
padding: 8px 16px;
border-bottom: 1px solid #ebedf2;
......@@ -2236,7 +1963,6 @@ a {
display: flex;
justify-content: flex-start;
align-items: center;
.title-icon {
width: 20px;
height: 20px;
......@@ -2246,20 +1972,17 @@ a {
justify-content: center;
align-items: center;
margin-right: 12px;
.bg-icon {
font-size: 14px;
color: #fff;
}
}
.title-text{
.title-text {
font-size: 18px;
line-height: 36px;
color: #202531;
}
}
.card-content {
padding: 24px;
}
......@@ -2279,7 +2002,6 @@ a {
width: 398px;
justify-content: end;
display: flex;
.el-input {
width: 280px;
height: 36px;
......@@ -2307,7 +2029,7 @@ a {
padding: 10px 15px;
line-height: 1;
&:active,
&:hover{
&:hover {
background-color: #fff;
color: #3759be;
}
......@@ -2333,6 +2055,7 @@ a {
padding: 24px 16px 8px;
}
}
// 表格操作按钮组
.bg-table-btns {
position: relative;
......@@ -2351,7 +2074,6 @@ a {
border-radius: 4px;
border: solid 1px #e6e9ef;
width: 88px;
.bg-table-btn {
overflow: hidden;
text-overflow: ellipsis;
......@@ -2367,7 +2089,6 @@ a {
background-color: #f2f3f7;
color: #202531;
}
&.disabled {
color: #a9b1c7;
}
......@@ -2375,7 +2096,6 @@ a {
display: none;
}
}
&::before {
content: "";
position: absolute;
......@@ -2393,11 +2113,11 @@ a {
width: 100%;
}
}
.bg-permission {
border-top: solid 1px #dadee7;
border-left: solid 1px #dadee7;
width: 100%;
.el-checkbox {
width: 100%;
.el-checkbox__label {
......@@ -2412,8 +2132,7 @@ a {
color: #202531;
}
}
>.permission-header {
> .permission-header {
padding: 0 16px;
height: 48px;
line-height: 48px;
......@@ -2421,21 +2140,18 @@ a {
border-bottom: solid 1px #dadee7;
border-right: solid 1px #dadee7;
}
>.permission-null {
> .permission-null {
padding: 8px 16px;
border-bottom: solid 1px #dadee7;
border-right: solid 1px #dadee7;
>p {
> p {
font-size: 14px;
line-height: 16px;
color: #333;
text-align: center;
}
}
>.bg-permission-option--list {
> .bg-permission-option--list {
width: 100%;
}
}
......@@ -2444,8 +2160,7 @@ a {
display: flex;
justify-content: flex-start;
align-items: stretch;
>.bg-permission-option--self {
> .bg-permission-option--self {
flex-shrink: 0;
padding: 8px 16px;
border-right: solid 1px #dadee7;
......@@ -2454,15 +2169,13 @@ a {
justify-content: flex-start;
align-items: center;
}
>.bg-permission-option--list {
> .bg-permission-option--list {
flex-shrink: 0;
}
}
.bg-permission-option--self {
width: 128px;
&.full-option {
width: 100%;
}
......@@ -2470,7 +2183,6 @@ a {
.bg-permission-option--list {
width: calc(100% - 128px);
&.flex-wrap {
display: flex;
flex-wrap: wrap;
......@@ -2478,9 +2190,8 @@ a {
align-items: stretch;
border-right: solid 1px #dadee7;
border-bottom: solid 1px #dadee7;
>.bg-permission-option {
>.bg-permission-option--self {
> .bg-permission-option {
> .bg-permission-option--self {
width: 128px;
border-right: none;
border-bottom: none;
......@@ -2488,6 +2199,7 @@ a {
}
}
}
.bg-upload-image-dialog {
width: 650px;
}
src/components/gap-title.vue
View file @ 3fbbf1d9
<template>
<div class="gap-title">
<span>{{title}}</span>
<div
class="gap-title"
:class="{
'has-line': hasLine,
}">
<span>{{ title }}</span>
</div>
</template>
<script>
export default {
props: {
title:{
type:String,
default:""
}
title: {
type: String,
default: "",
},
components: {
},
data() {
return {
};
hasLine: {
type: Boolean,
default: false,
},
watch: {
},
computed: {
},
created() {
},
mounted() {
},
methods: {
components: {},
data() {
return {};
},
watch: {},
computed: {},
created() {},
mounted() {},
methods: {},
};
</script>
<style scoped>
.gap-title{
.gap-title {
height: 18px;
font-size: 18px;
font-weight: 600;
color: #202531;
display: flex;
align-items: center;
}
.gap-title::before{
content:'';
.gap-title::before {
content: "";
display: inline-block;
margin-right: 8px;
width: 4px;
......@@ -55,4 +50,11 @@ export default {
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,22 +6,29 @@
{{ item.label }}
</div>
<div class="value">
<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>
{{ valueData[item.prop] }}
<slot name="value" :item="item" :valueData="valueData" v-if="slots.value" />
<span v-else>{{ valueData[item.prop] }}</span>
</span>
</div>
</div>
</div>
</div>
</div>
</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,14 +72,27 @@ 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;
position: relative;
.value-body {
padding: 0 16px;
display: flex;
align-items: center;
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;
......@@ -82,6 +109,11 @@ const props = defineProps({
}
}
}
.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