|
@@ -52,15 +52,15 @@
|
|
|
labelWidth?: number | string;
|
|
|
/** 输入框的固定宽度 */
|
|
|
valueWidth?: number | string;
|
|
|
- /** 状态灯配置,第一项配置激活状态,第二项配置失活状态 */
|
|
|
- status?: [{ label: string; value: any }, { label: string }];
|
|
|
+ /** 状态灯配置,第一项配置激活状态,第二项配置失活状态,都不匹配则为默认无状态 */
|
|
|
+ status?: [{ label: string; value: any }, { label: string; value: any }];
|
|
|
}>(),
|
|
|
{
|
|
|
bordered: false,
|
|
|
backgrounded: true,
|
|
|
type: 'default',
|
|
|
label: '',
|
|
|
- value: '',
|
|
|
+ value: '-',
|
|
|
labelWidth: 100,
|
|
|
}
|
|
|
);
|
|
@@ -69,11 +69,20 @@
|
|
|
// 状态灯相关的内容
|
|
|
const statusLightConfig = computed(() => {
|
|
|
if (!props.status) return { label: 'unknown', class: 'list-item__deactived' };
|
|
|
- const actived = props.value === props.status[0].value;
|
|
|
+ let classSuffix = 'default';
|
|
|
+ let statusLabel = '';
|
|
|
+ if (props.value === props.status[0].value) {
|
|
|
+ classSuffix = 'actived';
|
|
|
+ statusLabel = props.status[0].label;
|
|
|
+ }
|
|
|
+ if (props.value === props.status[1].value) {
|
|
|
+ classSuffix = 'deactived';
|
|
|
+ statusLabel = props.status[1].label;
|
|
|
+ }
|
|
|
|
|
|
return {
|
|
|
- label: props.status[actived ? 0 : 1].label,
|
|
|
- class: actived ? 'list-item__actived' : 'list-item__deactived',
|
|
|
+ label: statusLabel,
|
|
|
+ class: `list-item__${classSuffix}`,
|
|
|
};
|
|
|
});
|
|
|
|
|
@@ -142,6 +151,8 @@
|
|
|
}
|
|
|
|
|
|
.list-item__actived {
|
|
|
+ min-width: 20px;
|
|
|
+ height: 100%;
|
|
|
padding-left: 20px;
|
|
|
background-image: url('@/assets/images/company/home/select-bg.png');
|
|
|
background-repeat: no-repeat;
|
|
@@ -150,6 +161,8 @@
|
|
|
}
|
|
|
|
|
|
.list-item__deactived {
|
|
|
+ min-width: 20px;
|
|
|
+ height: 100%;
|
|
|
padding-left: 20px;
|
|
|
background-image: url('@/assets/images/company/home/unselect-bg.png');
|
|
|
background-repeat: no-repeat;
|
|
@@ -157,6 +170,37 @@
|
|
|
background-size: 20px 20px;
|
|
|
}
|
|
|
|
|
|
+ .list-item__default {
|
|
|
+ min-width: 20px;
|
|
|
+ height: 100%;
|
|
|
+ padding-left: 20px;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .list-item__default::before {
|
|
|
+ display: block;
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ width: 8px;
|
|
|
+ height: 8px;
|
|
|
+ top: calc(50% - 4px);
|
|
|
+ left: 10px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: #858585;
|
|
|
+ }
|
|
|
+ .list-item__default::after {
|
|
|
+ display: block;
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ width: 12px;
|
|
|
+ height: 12px;
|
|
|
+ top: calc(50% - 6px);
|
|
|
+ left: 8px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: #85858544;
|
|
|
+ box-shadow: 0 0 1px 1px #85858599;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
::v-deep .zxm-input {
|
|
|
color: @white;
|
|
|
}
|