项目自述
管理系统 To B
公共方法

公共方法

getObjType 获取数据类型

获取数据类型

import { getObjType } from '@/util/index';
 
getObjType(() => {
}); // function

toAddUrl 新增打开新窗口

新增打开新窗口页面

import { toAddUrl } from '@/util';
 
// 第一个参数是 路径, 第二个参数 默认数据
toAddUrl.call(this, '/purchase/order/add', infoFormDefault);

toEditUrl 编辑打开新窗口

编辑打开新窗口页面

import { toEditUrl } from '@/util';
 
// 第一个参数是 路径, 第二个参数唯一id 第三个参数 默认数据
toEditUrl.call(this, '/purchase/order/add', this.infoForm.id, this.infoForm);

checkIndexPath 验证是否是详情、新增、编辑页面

验证是否是详情、新增、编辑页面

import { checkIndexPath } from '@/util';
// 参数传入 url
checkIndexPath(path) // 返回布尔值

awaitProcess 进程暂停

进程暂停

import { awaitProcess } from '@/util';
// 传入毫秒数
await awaitProcess(3000);

dateReplaceCH 中文日期转换

中文日期转换 解决dayjs不支持中文转换 （类似 2021年8月25 => 2021-8-25 ）

import { dateReplaceCH } from '@/util/index';
 
// 第一个参数日期, 第二个参数分隔符
dateReplaceCH('2021年8月25'); // 2021-8-25
dateReplaceCH('2021年8月25', '&'); // 2021&8&25

getNewTableHeight 获取table高度

获取商品明细table高度

  • vxe-table 不能使用 max-height 必须使用 height

  • (可选参数) options

  • height?: number => 默认 38 // 分页组件的高度

  • lines?: number => 默认 2 // 搜索组件的行数

<template>
  <basicContainer>
    <el-search-group :data="formData" ref="searchRef">
      <sht-vxe-toolbar />
    </el-search-group>
    <!-- 不能使用 max-height 必须使用 height -->
    <vxe-table
        id="toolbar-other-purchase-inquiry"
        :custom-config="{ storage: { resizable: true } }"
        :height="getHeight()"
    >
      <!--省略代码-->
    </vxe-table>
  </basicContainer>
</template>
 
<script>
import { getNewTableHeight } from '@/util';
 
export default {
  methods: {
    getHeight() {
      return getNewTableHeight();
    }
  }
}
</script>

downloadFile 下载PDF,excel

下载PDF,excel

/**
 * 下载PDF,excel
 * @param type 区分下载文件类型 是excel还是pdf
 * @param name 下载的文件名称
 * @param data 请求拿到的文件流
 */
import { downloadFile } from '@/util';
 
downloadFile('excel', '应收核销数据', res.data);

getFinanceAggregate 财务合计

财务合计 注意 : 只能在财务模板使用

 
<vxe-table :footer-method="getSummaries" show-footer>
<vxe-table-column field="cancelledAmount" title="已核销金额" width="100" />
<vxe-table-column field="unverifiedAmount" title="未核销金额" width="100" />
</vxe-table>
 
<script>
/**
 * 财务合计
 * @param arr 需要计算合计的字段集合
 * @param columns vxe的columns
 * @param data vxe的data
 * @param sumList 后端返回的总计
 * @param isTotal true为需要总计  没有分页的不需要总计
 * @return []
 */
 
import { getFinanceAggregate } from '@/util';
 
export default {
  methods: {
    getSummaries({ columns, data }) {
      const arr = ['cancelledAmount', 'unverifiedAmount'];
      return getFinanceAggregate(arr, this.sumList, columns, data);
    }
  }
}
</script>

getAggregate 合计、小计

合计、小计

 
<vxe-table :footer-method="getSummaries" show-footer>
<vxe-table-column field="priceAmount" title="货品总金额" width="150" />
<vxe-table-column field="discountPriceAmount" title="折算总金额" width="150" />
</vxe-table>
 
<script>
/**
 * 其他合计(采购 销售等)
 * @param arr 需要计算合计的字段集合[name:'列表字段',value:'自行处理后端返回对应列表字段的总计']
 * @param columns vxe的 columns
 * @param data vxe的 data
 * @param isTotal 需要总计  没有分页的不需要总计
 * @return []
 */
import { getAggregate } from '@/util';
 
export default {
  methods: {
    getSummaries({ columns, data }) {
      const priceAmountSum = 2000; // 假设后端返回 货品总金额的总计为2000
      const discountPriceAmount = 3000;
      const arr = [
        { name: 'priceAmount', value: priceAmountSum },
        { name: 'discountPriceAmount', value: discountPriceAmount },
      ];
      // return getAggregate(arr, columns, data, false);//详情页不需要总计,第四个参数传false
      return getAggregate(arr, columns, data);
    }
  }
}
</script>

getNotTaxPrice 含税计算未税

根据含税价格计算未税价格

/**
 * 根据含税价格计算未税价格
 * @param price 单价
 * @param tax 税率
 * @return {null|string}
 */
import { getNotTaxPrice } from '@/util/price';
 
getNotTaxPrice(1, 0.13) // 0.884956';

getTaxPrice 未税计算含税

根据未税价格计算含税价格

import { getTaxPrice } from '@/util/price';
 
getTaxPrice(0.884956, 0.13) // 1.000000

computeSingleTotalPrice 计算单个总价

根据 单价 * 数量 = 计算单个总价

/**
 * 根据 单价 * 数量 = 计算单个总价
 * @param price
 * @param num
 * @return {string|String}
 */
 
import { computeSingleTotalPrice } from '@/util/price';
 
computeSingleTotalPrice(1.123456, 1); // 1.123456

getDateRange 获取某个时间范围

import { getDateRange } from '@/util/date';
 
// 获取两天时间区间
const { start, end } = getDateRange(2, 'day');
// start: 2021-11-02 00:00:00    end: 2021-11-04 23:59:59
 
// 获取两个星期时间区间
const { start, end } = getDateRange(2, 'week');
// start: 2021-10-21 00:00:00    end: 2021-11-04 23:59:59
 
// 获取两个月时间区间
const { start, end } = getDateRange(2, 'month');
// start: 2021-09-04 00:00:00    end: 2021-11-04 23:59:59
 
// 获取两年时间区间
const { start, end } = getDateRange(2, 'year');
// start: 2019-11-04 00:00:00    end: 2021-11-04 23:59:59

element日期范围组件 带快捷选项

  1. lastMonth 最近一周
  2. lastThreeMonth 最近一个月
  3. lastTwelveMonth 最近三个月
  4. lastWeek 最近一年
 
<template>
  <el-search-group ref="searchRef" :data="formData" />
</template>
<script>
import { getDateRange, lastMonth, lastThreeMonth, lastTwelveMonth, lastWeek } from '@/util/date';
 
export default {
  data() {
    const { start, end } = getDateRange(1, 'year');
    return {
      formData: [
        {
          name: 'dateRange',
          type: 'dateRange',
          default: [start, end],
          props: {
            pickerOptions: {
              shortcuts: [lastWeek, lastMonth, lastThreeMonth, lastTwelveMonth],
            },
          },
        },
      ],
    }
  },
}
 
</script>

emptyDataFormat 对空数据做转换处理

  1. 改方法接受两个参数 第一个需要转换的值, 第二个参数需要转换成的标示符号
  2. 如何是非String类型和Number类型统一都返回替代符号
import { emptyDataFormat } from '@/util';
 
emptyDataFormat(-1); // 返回 '-'
emptyDataFormat(-10); // 返回 '-'
emptyDataFormat({ a: 10 }); // 返回 '-'
emptyDataFormat([1, 2]); // 返回 '-'
emptyDataFormat('', '*'); // 返回 '*'
emptyDataFormat(-1, '*'); // 返回 '*'

关于 promptMessage

  1. 消息提醒公共方法
  2. 参数: msg 支持 数组字符串 与 字符串

小技巧 当msg为空的时候 不会触发提示

此方法调用的上下文对象必须是Vue 应当使用 .call 的形式调用 因为方法内部依赖了 element-ui

// 书写方式 参考
import { promptMessage } from '@/util/prompt';
 
promptMessage.call(this, msg);
私有库文档Vxe-table