mky-vent-base/src/views/vent/gas/components/list/listItem.vue

<template>
  <div class="list-item" :class="{ 'list-item__background': backgrounded }">
    <div class="list-item__label" :style="labelStyle">
      <slot name="label">
        {{ label }}
      </slot>
    </div>
    <div class="list-item__value" :class="{ 'list-item__border': bordered }" :style="valueStyle">
      <slot name="value">
        <!-- 状态灯 -->
        <div v-if="type === 'status-light'" :class="statusLightConfig.class">
          {{ statusLightConfig.label }}
        </div>
        <!-- 输入框 -->
        <div v-if="type === 'input'">
          <Input :bordered="false" :value="value" @update:value="$emit('update:value', $event)" />
        </div>
        <!-- 默认 -->
        <div v-if="type === 'default'" class="text-right list-item__text_blue">
          {{ value }}
        </div>
      </slot>
    </div>
  </div>
</template>

<script setup lang="ts">
  // @TODO 对组件的颜色、背景等样式进行修改，符合全局规范
  import { Input } from 'ant-design-vue';
  import { computed } from 'vue';

  const props = withDefaults(
    defineProps<{
      /** value（即右侧）部分是否有边框 */
      bordered?: boolean;
      /** 是否有背景 */
      backgrounded?: boolean;
      /** label（即左侧）内容，可用slot */
      label?: string;
      /** value（即右侧）内容，可用slot */
      value?: string;
      /** 条目类型 */
      type?: 'input' | 'default' | 'status-light';
      /** 输入框的固定宽度 */
      labelWidth?: number | string;
      /** 输入框的固定宽度 */
      valueWidth?: number | string;
      /** 状态灯配置，第一项配置激活状态，第二项配置失活状态 */
      status?: [{ label: string; value: any }, { label: string }];
    }>(),
    {
      bordered: false,
      backgrounded: true,
      type: 'default',
      label: '',
      value: '',
      labelWidth: 100,
    }
  );
  defineEmits(['update:value']);

  // 状态灯相关的内容
  const statusLightConfig = computed(() => {
    if (!props.status) return { label: 'unknown', class: 'list-item__deactived' };
    const actived = props.value === props.status[0].value;

    return {
      label: props.status[actived ? 0 : 1].label,
      class: actived ? 'list-item__actived' : 'list-item__deactived',
    };
  });

  const labelStyle = computed(() => {
    const w = props.labelWidth;
    const width = typeof w === 'string' ? w : `${w}px`;
    return { width };
  });
  const valueStyle = computed(() => {
    const w = props.valueWidth;
    const width = typeof w === 'string' ? w : `${w}px`;
    return { width };
  });
</script>

<style lang="less" scoped>
  @import '@/design/vent/color.less';

  .list-item {
    height: 36px;
    line-height: 36px;
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    color: @white;
  }
  // .list-item__label {
  // }
  .list-item__value {
    flex-grow: 1;
  }

  .list-item__background {
    background-image: @vent-gas-list-item-bg-img;
  }

  .list-item__text_blue {
    color: @vent-gas-primary-text;
  }

  .list-item__border {
    border: 1px solid @vent-gas-primary-text;
    border-radius: 5px;
  }

  .list-item__actived {
    padding-left: 20px;
    background-image: url('@/assets/images/company/home/select-bg.png');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 20px 20px;
  }

  .list-item__deactived {
    padding-left: 20px;
    background-image: url('@/assets/images/company/home/unselect-bg.png');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 20px 20px;
  }

  ::v-deep .zxm-input {
    color: @white;
  }
</style>