Vue（前端）Q&A

赖淇

2023-12-01

新建xxx.vue文件，必须为首字母大写
文件页面：src-views-(可新建目录)-Demo.vue
src-router-index.ts(页面添加)

children: [
            {
            {
                path: '/test',
                component: () => import('../views/Test.vue'),
                name: '测试',
                meta: { title: '测试' }
            },
        ]

layout-Sidebar.vue(菜单页面)

<el-menu-item index="test">测试</el-menu-item>

const 常量
ref：不常变化
eg：ref(false)
获取：使用.value
reactive：经常变化
获取：直接.即可
let 变量
函数写法：

const handleSizeChange = (value: number):void => {
    pageConfig.pageSize = value
    handleSubmit()
}

事件要求使用：handle
@click="handleSubmit()
命名要求：
request
get… GET
select… POST
delete…ById DELETE
insert… PUT
alter… POST

报错

Q：数据id有负数
A：勾选无符号
Q：删除时id获取错误，最后两位为0，无法删除
A：long与number、bigint长度不一样，修改转化为string、varchar，长度为64
Q：数据库id无法修改
A：取消二进制
Q：ruleAddForm”隐式具有类型 “any”，因为它不具有类型批注，且在其自身的初始化表达式中得到直接或间接引用。",
A：因为ruleAddForm中的参数any自身引用了自身，要修改很麻烦，暂不修改
修改方法：将any改成number（自己需要的类型），然后不要使用computed来计算，使用watch计算
eg：

watch(() => ruleAddForm, (data, prevData) => {
    ruleAddForm.value.loss = data.value.loadingQuantity - data.value.unloadingQuantity
    ruleAddForm.value.comprehensiveUnitPrice = data.value.paymentUnitPrice + data.value.freightUnitPrice
    ruleAddForm.value.buckleLoss = data.value.loss > 0 ? (data.value.loss * data.value.comprehensiveUnitPrice) : 0
    ruleAddForm.value.amountMoney = data.value.freightUnitPrice * data.value.loadingQuantity - data.value.buckleLoss
    ruleAddForm.value.paymentAmount = data.value.paymentUnitPrice * data.value.loadingQuantity
}, { deep: true })

Q：修改未提交会显示在页面上，但刷新又消失，未提交入数据库
A：修改和添加的ref需要设置不同的ref，不可用同一个，重置可以使用同一个函数，比如：

// 重置添加&修改采购单
const resetForm = (form?: FormInstance) => {
    if (form) {
        form.resetFields()
    }
}

在使用的时候放入不同的ref即可
Q：修改重置只会重置为第一次修改的值，把第一次点击修改的值当成了初始值
A：取消重置功能；设置不同的重置函数，将字段设置为想要的值，示例：

const resetForm = (form?: FormInstance) => {
    // if (form) {
    //     ruleAddForm.value.supplier = ""       //供应商
    //     ruleAddForm.value.date1 = ""      //单据日期
    //     ruleAddForm.value.name = ""       //厂家
    //     ruleAddForm.value.carNumber = ""      //车号
    //     ruleAddForm.value.carOwner = ""       //车主
    //     ruleAddForm.value.incomingWarehouse = ""      //进货罐号仓库
    //     ruleAddForm.value.density = 0     //密度
    //     ruleAddForm.value.productName = ""        //品名
    //     ruleAddForm.value.loadingQuantity = 0     //装车数量
    //     ruleAddForm.value.unloadingQuantity = 0   //卸车数量
    //     ruleAddForm.value.loss = 0        //损耗
    //     ruleAddForm.value.freightUnitPrice = 0        //运费单价
    //     ruleAddForm.value.buckleLoss = 0      //扣损
    //     ruleAddForm.value.amountMoney = 0     //金额
    //     ruleAddForm.value.date2 = ""      //结款日期
    //     ruleAddForm.value.comprehensiveUnitPrice = 0      //综合单价
    //     ruleAddForm.value.paymentUnitPrice = 0     //货款单价
    //     ruleAddForm.value.paymentAmount = 0       //货款金额
    //     ruleAddForm.value.notes = ""      //备注
    // }
}

Q：number计算小数点失去精度，比如：2.2-2.1=0.9999999999987
A：另外加一个ts文件类计算，结果计算回去再重新计算赋值，在vue中引用，实例：
src-utils：floatUtil.ts

/**
 * This is a math class to avoid float calc lost accuracy.
 */
export class floatCalc {
    private pow: number = 1000
    private times: number = 3
    private maxNumber: number = 9007199254740
    /**
     * constructor function to initilize decimal places
     * @param times MAX decimal places used. Default:3 (only support 1 , 2, 3, 4 or 5)
     */
    constructor(times: 1 | 2 | 3 | 4 | 5) {
        this.times = times
        this.pow = Math.pow(10, times)
        switch (times) {
            case 1:
                this.maxNumber = 900719925474099
                break
            case 2:
                this.maxNumber = 90071992547409
                break
            case 3:
                this.maxNumber = 9007199254740
                break
            case 4:
                this.maxNumber = 900719925474
                break
            case 5:
                this.maxNumber = 90071992547
                break
        }
    }
    private toInteger(float: number) {
        if (float < this.maxNumber) return float * this.pow
        else throw new Error('[Number:' + float + ']:Over floor !')
    }
    private tofloat(integer: number) {
        return integer / this.pow
    }
    /**
     * safe addition
     * @param a number
     * @param b number
     * @returns a plus b (a+b)
     */
    public add(a: number, b: number) {
        if (Number.isInteger(a) && Number.isInteger(b)) {
            return a + b
        } else {
            return this.tofloat(this.toInteger(a) + this.toInteger(b))
        }
    }
    /**
     * safe subtraction
     * @param a number
     * @param b number
     * @returns a minus b (a-b)
     */
    public sub(a: number, b: number) {
        if (Number.isInteger(a) && Number.isInteger(b)) {
            return a - b
        } else {
            return this.tofloat(this.toInteger(a) - this.toInteger(b))
        }
    }
    /**
     * safe multiplication
     * @param a number
     * @param b number
     * @returns a times b (a*b)
     */
    public mul(a: number, b: number) {
        if (Number.isInteger(a) && Number.isInteger(b)) {
            return a * b
        } else {
            return this.tofloat(this.tofloat(this.toInteger(a) * this.toInteger(b)))
        }
    }
    /**
     * safe division
     * @param a number
     * @param b number
     * @returns a divided by b (a/b)
     */
    public div(a: number, b: number) {
        if (Number.isInteger(a) && Number.isInteger(b)) {
            return a / b
        } else {
            return this.toInteger(a) / this.toInteger(b)
        }
    }
}

引用：

import { floatCalc } from "../../utils/floatUtil"
const float = new floatCalc(5)

watch(() => ruleAddForm, (data, prevData) => {
    ruleAddForm.value.loss = float.sub(data.value.loadingQuantity, data.value.unloadingQuantity)
    ruleAddForm.value.comprehensiveUnitPrice = float.add(data.value.paymentUnitPrice, data.value.freightUnitPrice)
    ruleAddForm.value.buckleLoss = data.value.loss > 0 ? float.mul(data.value.loss, data.value.comprehensiveUnitPrice) : 0
    ruleAddForm.value.amountMoney = float.sub(float.mul(data.value.freightUnitPrice, data.value.loadingQuantity), data.value.buckleLoss)
    ruleAddForm.value.paymentAmount = float.mul(data.value.paymentUnitPrice, data.value.loadingQuantity)
}, { deep: true })

Q：TypeError: Cannot read properties of undefined (reading ‘slice’)
A：数据库中日期这种在前端代码进行分解的数据是否存在
Q：没有错误但是报错“应为标识符。”
A：使用了不可使用的关键字，修改即可，我是在clas
中使用了app-container，修改该名称就不报错了

多个input在form中显示在同一行

代码段中在el-form设置:inline=“true

  <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    :rules="rules"
    label-width="120px"
    class="demo-ruleForm"
    :size="formSize"
  >

再设置el-from-item里控件的长度

提交信息后刷新页面

reload

页面加载刷新页面

调用获取列表函数：

onMounted(() => {
    handleSubmit()
}
)

设置随机数显示

Math.round(Math.random()*5) // 生成0~5的随机整数

获取当前日期当数字显示（设置单据编号）

获取日期：

var date = new Date();
    var seperator1 = "-";
    var seperator2 = ":";
    //获取当前时间的年月日时分秒
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var strDate = date.getDate();
    var minute = date.getMinutes();
    var hour = date.getHours();
    var second = date.getSeconds();

    var currentdate = year + seperator1 + month + seperator1 + strDate + hour + seperator2 + minute + seperator2 + second;
    ruleForm.value.number = currentdate
    //getFullYear() 年
    //getMonth()+1 月
    //getDate() 日
    //getHours() 时
    //getMinutes() 分
    //getSeconds() 秒

以上输出结果为：2022-3-1512:3:4
转化为字符串（无符号）：
去除seperator1和seperator2 ，toString转化为字符串

var date = new Date();
    //获取当前时间的年月日时分秒
    var year = date.getFullYear().toString();
    var month = (date.getMonth() + 1).toString();
    var strDate = date.getDate().toString();
    var minute = date.getMinutes().toString();
    var hour = date.getHours().toString();
    var second = date.getSeconds().toString();
    var currentdate = year + month + strDate + hour + minute + second;
    ruleForm.value.number = currentdate
    handleSubmit()

有无数据显示不同内容（官方）

<!-- 判断有无数据 -->
<div v-if="tableData.length === 0" style="color: darkgray;">
	<el-empty description="暂无数据" />
</div>
<div v-if="tableData.length != 0" style="color: darkgray;">
</div>

显示时间日期格式化

<el-table-column prop="date1" label="单据日期" width="180">
	<template #default="scope">
		<span>{{ dateFormater(scope.row[scope.column.property]) }}</span>
	</template>
</el-table-column>

// 定义日期格式化
const dateFormater = (date: string) => {
    return (
        date.slice(0, 4) + '年' + date.slice(5, 7) + '月' + date.slice(8, 10) + '日'
    )
}

自动计算数字并存入表单

初始化时使用computed：
eg：

//损耗
loss: computed(() => ruleAddForm.value.loadingQuantity - ruleAddForm.value.unloadingQuantity),

<el-form-item label="损耗" prop="loss">
	<span>{{ ruleAddForm.loss }}</span>
</el-form-item>

判断为负数为0，不为负数计算：

//扣损
buckleLoss: computed(() => ruleAddForm.value.loss > 0 ? ruleAddForm.value.loss * ruleAddForm.value.comprehensiveUnitPrice : 0),

四舍五入（小数点后三位）

buckleLoss: computed(() => ruleAddForm.value.loss > 0 ? (ruleAddForm.value.loss * ruleAddForm.value.comprehensiveUnitPrice).toFixed(3) : 0),

loss: computed(() => (ruleAddForm.value.loadingQuantity - ruleAddForm.value.unloadingQuantity).toFixed(3)),

不四舍五入？

//先取整
//然后保留几位小数就除以"1后面几个零"
//既然除了,就别忘记前面乘以
 
num = 3.14683452
Math.floor(num*100)/100; //3.14

使对话框整体居中在页面

修改样式：
主要后三行：

<el-dialog
        v-model="addDialogVisible"
        title="新增采购单"
        :before-close="addDialogClose"
        :append-to-body="true"
        top="5vh"
        width="42rem"
    >

主要后四行：

<el-form
	ref="addFormRef"
	:model="ruleAddForm"
	:rules="rules"
	class="demo-ruleForm"
	label-width="auto"
	label-position="left"
	:inline="true"
	style="margin-left: 2rem"
>

主要每个子元素中的style：

<el-input v-model="ruleAddForm.carNumber" style="width: 12rem" />

设置了同一行显示输入框后，当作item的按钮显示怪异：
设置插槽：
写在el-form外

<template #footer>
            <div style="margin-right:2rem">
                <el-button type="primary" @click="submitAddForm()">提交</el-button>
                <el-button @click="resetForm(addFormRef)">重置</el-button>
                <el-button @click="addDialogVisible = false; resetForm(addFormRef)">取消</el-button>
            </div>
</template>

表格增加链接跳转

const tableData = [
    {
        url: "purchase",
        select: '采购单记录查询',
    },
    {
        url: "returnPurchase",
        select: '采购退货单记录查询',
    },
    {
        url: "directPurchase",
        select: '直采直销单记录查询',
    },
    {
        url: "sale",
        select: '销售单记录查询',
    },
    {
        url: "returnSale",
        select: '销售退货单记录查询',
    },
    {
        url: "inStock",
        select: '入库单记录查询',
    },
    {
        url: "outStock",
        select: '出库单记录查询',
    },
    {
        url: "allot",
        select: '调拨单记录查询',
    },
    {
        url: "outlay",
        select: '支出单记录查询',
    },
    {
        url: "income",
        select: '收入单记录查询',
    },
    {
        url: "xxx",
        select: '罐号密度查询',
    },
]

<el-table :data="tableData" stripe style="width: 90%">
	<el-table-column prop="select" label="快速查看">
		<template #default="scope">
		<a :href="scope.row.url">
			<span>{{ scope.row[scope.column.property] }}</span>
		</a>
		</template>
	</el-table-column>
</el-table>

修改自动计算的数值

自动计算的数值无法修改，提交按钮再次显示一个弹框确认数值，为input，值改为上一个弹框的值，再次确认

表单获取另一个表单数据并存入表单

addFormConfirmRef.value = addFormRef.value
ruleAddConfirmForm.value = ruleAddForm.value

获取字典中的数据

onBeforeMount(() => {
    initDict()
})

import { ref, Ref, reactive, computed, watch, onMounted, onBeforeMount, getCurrentInstance } from "vue";

// 导入字典
import { initDict, getDict, getLabel } from '../../utils/dictUtil'

// 厂家字典
const manufactorType = getDict('manufactor_type')
const manufactorTypeFormatter = getLabel('manufactor_type')

<el-form-item label="厂家：" prop="selectName">
   <el-select v-model="testForm.selectName" placeholder="请选择厂家" style="width: 10rem">
       <el-option
           v-for="dict in manufactorType"
           :key="dict.dictValue"
           :label="dict.dictLabel"
           :value="dict.dictValue"
       />
   </el-select>
</el-form-item>

<el-table-column prop="productName" label="品名" width="130">
    <template #default="scope">
        <span>{{ productNameFormatter(scope.row[scope.column.property]) }}</span>
    </template>
</el-table-column>