VUE笔记解析

<template>
<!-- //加入子项目 -->
<productAdd ref="productAddRef"></productAdd>

    <!-- form 表单开始 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="查询条件">
            <el-input v-model="formInline.name" placeholder="" />
        </el-form-item>
        <el-form-item label="父类">
            <el-tree-select v-model="formInline.parentId" :data="categoryFormData" :check-strictly="true" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>
    <!-- form 表单结束 -->
    <!-- table表单开始 -->
    <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="id" label="id" />
        <el-table-column prop="name" label="姓名" :formatter="formatter" />
        <el-table-column prop="img" label="图片">
            <!-- #default="scope"当前行属性  scope局部样式   scope.row.img获取当前行的img属性   具体看element表格的常用问题解答-->
            <template #default="scope">
                <el-image style="width: 100px; height: 100px" :src="scope.row.img" />
            </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" />
        <el-table-column prop="price" label="价格" />
        <el-table-column prop="brief" label="简介" />
        <el-table-column prop="seq" label="排序" />
        <el-table-column prop="lastupdateby" label="最后操作人" :formatter="formatter" />
        <el-table-column prop="lastupdatetime" label="最后操作时间" :formatter="formatter" />


        <!-- 删除功能 -->
        <el-table-column prop="caozuo" label="操作">
            <!-- scope局部样式 -->
            <template #default="scope">
                <!-- @click="deleterow(scope.$index) 删除时找到这一行的index下标 -->
                <el-button type="primary" @click="deleterow(scope.$index)">删除</el-button>
                         <el-button type="primary" @click="edit(scope.$index)">修改</el-button>
            </template>
        </el-table-column>





    </el-table>

    <!-- table表单结束 -->
</template>
<script lang="ts" setup>
//常用vue自带类型变量
//ref代理，ref一般匹配的一般是导入自动匹配    一般表单数据用ref代理，需要查询的form用reactive代理，onMounted钩子函数，当页面加载时会自动调用这个函数
//ref后面有.value     reactive后面没有.value
import { ref, reactive, onMounted } from "vue";
//http像后端发送请求
import http from "@/http/index";
//路由，页面跳转，三者配套 route获取当前页面url的值 router进行其他页面跳转，可以用push跳转页面 
//router.push({ name: "categoryedit", query: { id: row.id, name: row.name } });
import { useRoute, useRouter } from "vue-router";
//弹出消息
import { ElMessage } from 'element-plus'
//格式化时间
import dayjs from "dayjs";
//导入子页面
import productAdd from "@/views/product/ProductAdd.vue"
const route = useRoute();
const router = useRouter();

//定义子项目
const productAddRef=ref()

const tableData = ref([])
//XXXX=()=>{};是一个方法
const gettabledate = () => {
    //  请求路径
    http
        .post("/api/product/select", {
            //这里面是查询条件
            name: formInline.name,
        })
        //当正确时反馈的信息
        .then((data: any) => {
            console.log(data)
            tableData.value = data
        })
        //错误时的操作
        .catch((err: any) => {
            console.log(err);
        });

};
//XXXX=()=>{};是一个方法
const deleterow = (index: number) => {
    http
        .post("/api/product/updateStatus", {
            //这里面是查询条件
            id: tableData.value[index].id,
            status: 0
        })
        //当正确时反馈的信息
        .then((data: any) => {
            if (data === 1) {
              
                 ElMessage({
                    message: '删除成功',
                    type: 'success',
                })
            }
     
            gettabledate();
        })
        //错误时的操作
        .catch((err: any) => {
            console.log(err);
        });

};
const edit=()=>{
  http
        .post("/api/product/update", {
            //这里面是查询条件
           
        })
        //当正确时反馈的信息
        .then((data: any) => {
            if (data === 1) {
              
                 ElMessage({
                    message: '修改成功',
                    type: 'success',
                })
            }
     
            gettabledate();
        })
        //错误时的操作
        .catch((err: any) => {
            console.log(err);
        });
}
//XXXX(()=>{});是一个方法.是一种vue类似于java的lambda表达式
onMounted(() => {

    //这事方法调用的例子
    gettabledate();
    //树形结构
    getData4Tree();
 
});







//form 这是reactive的格式
const formInline = reactive({
    name: "",
    id: "",
    parentId: "-1",
})
const onSubmit = () => {
    gettabledate();
}

const categoryFormData = ref([{ value: "-1", label: "所有品类" }, { value: "0", label: "根节点" }]);
const getData4Tree = () => {
    http
        .post("/api/categorytree/select", {
            //parentId: form.parentId,
        })
        .then((data: any) => {
            categoryFormData.value = categoryFormData.value.concat(data); 
          
        })
        .catch((err: any) => {
            console.log(err);
        });
};
//代码格式化
const formatter = (row: any, column: any) => {
    if (column.property === "lastupdatetime") {
        return dayjs(row.lastupdatetime).format("MM-DD HH:mm:ss");
    }
    if (column.property === "lastupdateby") {
        let index = row.lastupdateby.indexOf("@");

        return row.lastupdateby.substring(0, index);
    }
    if (column.property === "name") {
        if (row.name.length > 3) {
            return row.name.substring(0, 3) + "...";
        } else {
            return row.name;
        }
    }
};

</script>