Vue（前端）Q&A

新建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

/