前端笔记

前端笔记

1 标签行内块

<dict-tag :options="verifac_regimen" :value="form.destinatarioRegimen" style="display: inline-block; margin-left: 5px;"/>

2 formItem 自定义label长度

:deep(.el-form-item__label){
  width: 100px !important;
}

3 提示

<el-tooltip content="描述信息" placement="top">
    <el-icon ><question-filled /></el-icon>
</el-tooltip>

4 键盘事件回车

@keyup.enter="handleConfirm"

5 表格布局

<style lang="scss" scoped>
.app-container {
  height: 100%; /* 确保父容器高度充满 */
  display: flex;
  flex-direction: column;
}

.table-container {
  flex-grow: 1; /* 表格区域充满剩余空间 */
  display: flex;
  flex-direction: column;
}

.el-table {
  flex-grow: 1; /* 表格充满剩余空间 */
}

.pagination {
  flex-shrink: 0; /* 分页栏固定在底部 */
  margin-top: auto; /* 将分页栏推到容器底部 */
}

:deep(.el-form-item__label){
  width: 100px !important;
}
</style>

6 svg图标

<svg-icon icon-class="balance" />

7 card 基础样式

<el-card class="info-card" shadow="never">
    <template #header>
      <div class="card-header">
        <svg-icon icon-class="balance" />
        <span style="margin-left: 10px;">余额对比</span>
      </div>
    </template>
    ......
</el-card>

<style lang="scss" scoped>
.info-card{
  border: 1px solid var(--el-border-color-lighter);
  margin-bottom: 6px;
  &:hover {
    transform: translate3d(0px,-5px,5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
  }
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.15);
    z-index: -1;
    transition: all 0.3s ease;
  }
  &:hover::before {
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
  }

  :deep(.el-card__header) {
    padding: 16px 20px;
    background: var(--el-fill-color-lighter);
    border-bottom: 1px solid var(--el-border-color-lighter);
  }

  .card-header {
    display: flex;
    align-items: center;
    font-weight: 600;
    color: var(--el-text-color-primary);
    
    .el-icon {
      margin-right: 8px;
      color: var(--el-color-primary);
    }
  }
}

</style>

8 描述 descriptions 的样式

<el-descriptions-item label="合计金额" align="center" 
label-class-name="total-label" class-name="total-content">
   {{ formatTwoEuro(shiftForm.cashValue1 * 1 ) }}
</el-descriptions-item>

<style lang="scss" scoped>
    :deep(.el-descriptions__label.total-label) {
      color: #000;
      background: var(--el-color-primary-light-5) !important;
    }
    :deep(.el-descriptions__content.total-content) {
      color: var(--el-color-primary);
      background: var(--el-color-primary-light-9);
    }
</style>

9 对象重新赋值

• 推荐用 Object.assign(form.value, order.data) ✅
  → 保持响应式对象不变，Element Plus 表单配合更稳定。

• form.value = order.data
  → 会替换整个对象，可能破坏 <el-form> 内部校验 / 重置逻辑，除非你确认没用到这些功能。

10 获取配置

import { useTenantConfigStore } from "@/store/modules/tenantConfig";

const tenantConfigStore = useTenantConfigStore(); // 获取租户配置信息

const openShiftRecord = tenantConfigStore.tenantConfig["openShiftRecord"] ; // 是否开启交班功能

11 dialog 自动聚焦

<el-dialog 
    @opened="handleDialogOpen"
    @closed="emit('closed')"
  >

// 对话框打开后的处理 - 聚焦输入框
const handleDialogOpen = () => {
  console.log("对话框打开后的处理.....");
  // 使用 nextTick 确保DOM已渲染完成
  nextTick(() => {
    if (quantityInputRef.value) {
      quantityInputRef.value.focus();
    }
  });
}

12 添加注解

<el-tooltip content="参与业务活动的订单的基础佣金是否生效" placement="top">
  <el-icon ><question-filled /></el-icon>
</el-tooltip>

13 金额计算

// 1 封装转化方法
const formatAmount = (value, decimals = 2) => {
  // 明确检查空值
  if (value === null || value === undefined || value === "") {
    return new Decimal(0);
  }
  
  try {
    return new Decimal(value).toDecimalPlaces(decimals);
  } catch (e) {
    console.warn("Invalid value for Decimal conversion:", value);
    return new Decimal(0);
  }
};


// 2 加减乘除
import Decimal from 'decimal.js';

const a = new Decimal(10.5);
const b = new Decimal(3.2);

// 加法 - 使用 .plus() 方法
const sum = a.plus(b); // 不是 a + b

// 减法 - 使用 .minus() 方法  
const difference = a.minus(b); // 不是 a - b

// 乘法 - 使用 .times() 方法
const product = a.times(b); // 不是 a * b

// 除法 - 使用 .dividedBy() 方法
const quotient = a.dividedBy(b); // 不是 a / b

// 转成数字类型
const regularNumber = decimalValue.toNumber(); // 转换为数字

// 3 比较运算
// 方法1: 大于比较
const isGreater = amount.greaterThan(compareValue); // 是否大于
// 方法2: 大于或等于比较  
const isGreaterOrEqual = amount.greaterThanOrEqualTo(compareValue); // 是否大于等于
// 方法3: 小于比较
const isLess = amount.lessThan(compareValue); // 是否小于
// 方法4: 小于或等于比较
const isLessOrEqual = amount.lessThanOrEqualTo(compareValue); // 是否小于等于
// 方法5: 等于比较
const isEqual = amount.equals(compareValue); // 是否等于

// 4 绝对值、零的用法
const changeAmount = computed(() => {
  return remainAmount.value.lessThan(0) ? remainAmount.value.abs() : new Decimal(0);
})

14 静态数据

14.1 静态数据

/**
 * api发送类型
 * 01-不发送 02-ticketBai 03-verifac
 */
export const ApiSendTypeEnum = {
  NOT_SEND: {
    value: '01',
    label: 'noSend',
    type: 'danger',
    default: false
  },
  TICKETBAI: {
    value: '02',
    label: 'ticketBai',
    type: 'warning',
    default: false

  },
  VERIFAC: {
    value: '03',
    label: 'verifac',
    type: 'success',
    default: true
  },
}

14.2 静态数据使用

// 引入数据
import { ActiveEnum, AuthorizationEnum, TenantTypeEnum, TenantStatusEnum, CostMethodEnum, ApiSendTypeEnum} from "@/constants/system/tenantConstants";

// 构建实例
const { proxy } = getCurrentInstance();
const ApiSendType = proxy.createEnumAccessor(ApiSendTypeEnum)

// 获取默认值
form.value = {
    apiSendType: ApiSendType.getDefaultValue(),
}

// 下拉菜单中使用
<el-select v-model="form.apiSendType" placeholder="请选择发送类型">
    <el-option
      v-for="item in ApiSendTypeEnum"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    ></el-option>
</el-select>

// tap中使用
<el-tag :type="TenantType.getTypeByValue(scope.row.tenantType)" >{{ TenantType.getLabelByValue(scope.row.tenantType) }}</el-tag>

14.3 封装的公共方法

/**
 * 创建枚举访问器（推荐使用）
 * @param {Object} enumObj - 枚举对象
 * @returns {Object} 枚举访问方法集合
 */
export function createEnumAccessor(enumObj) {
  return {
    // 获取值
    getValue: (key) => enumObj[key]?.value || '',

    // 获取默认值
    getDefaultValue: () => {
      const defaultItem = Object.values(enumObj).find(item => item.default === true);
      return defaultItem ? defaultItem.value : '';
    },

    // 根据值获取项
    getItemByValue: (value) =>
      Object.values(enumObj).find(item => item.value === value) || null,

    // 根据值获取标签
    getLabelByValue: (value) => {
      const item = Object.values(enumObj).find(item => item.value === value);
      return item ? item.label : '';
    },

    // 根据值获取标签
    getTypeByValue: (value) => {
      const item = Object.values(enumObj).find(item => item.value === value);
      return item ? item.type : 'info';
    },

    // 根据标签获取值
    getValueByLabel: (label) => {
      const item = Object.values(enumObj).find(item => item.label === label);
      return item ? item.value : '';
    },

    // 根据标签获取项
    getItemByLabel: (label) =>
      Object.values(enumObj).find(item => item.label === label) || null,

    // 获取选项
    getOptions: () =>
      Object.values(enumObj).map(({ value, label }) => ({ value, label })),

    // 获取所有键值对
    getEntries: () =>
      Object.entries(enumObj).map(([key, { value, label }]) => ({ key, value, label })),

    // 原始枚举对象
    raw: enumObj
  };
}