新建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>
		</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>
一、Tailwind CSS框架

                                    写ts比较少，在写代码的时候，对一个对象做了一个for…网上找了下，才明白原来key值的类型不是string，在javascript中是默认给你转好的，而在Typescript中则不是。在tsconfig.json中compilerOptions里面新增忽略的代码，如下所示，添加后则不会报错。在定义的Interface里对其进行声明。
                                    TypeScript报错：ts(2683)"this" 隐式具有类型 "any"，因为它没有类型注释。ts(7009)其目标缺少构造签名的 "new" 表达式隐式具有 "any" 类型。
                                    错误信息列表code类型英文描述中文描述1002错误Unterminated string literal.未终止的字符串文本。1003错误Identifier expected.应为标识符。1005错误'{0}' expected.应为“{0}”。1006错误A file cannot have a reference to itself.文件不能引用自身。1009错误Trailing comm...