baozhida-panel-module/src/views/component/classification.vue

<template>
    <div class="app-container">
        <HeadSearch :searchTerms="searchTerms" :ruleForm="searchRuleForm" @handleSearch="handleSearch"></HeadSearch>
        <tables :tableData="tableData" :operatingList="operatingList" :tableColumns="tableColumns"
            @operationBtn="operationBtn" @handleUpdate="handleUpdate"></tables>
        <!-- 新增/修改 -->
        <el-dialog v-model="dialogVisible" :title="formData.id === undefined ? '新增分类' : '修改分类'" @closed="resetForm"
            width="500px">
            <forms ref="childRules" :formNewList="classifyForm" :ruleForm="formData"></forms>
            <template #footer>
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="handleCreateOrUpdate" :loading="loading">确认</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from "vue"
import { createComponentclassApi, deleteComponentclassApi, updateComponentclassApi, getComponentclassApi } from "@/api/classify/index"
import HeadSearch from "@/components/HeadSearch/index.vue"
import tables from "@/components/tables/index.vue"
import forms from "@/components/forms/index.vue"
import { type CreateOrUpdateTableRequestData, type TableData } from "@/api/classify/types/index"
import { type FormInstance, type FormRules, ElMessage, ElMessageBox } from "element-plus"
import { Search, Refresh, CirclePlus, Delete, Download, RefreshRight } from "@element-plus/icons-vue"
import { cloneDeep } from "lodash-es"

const searchTerms = [{
    type: 'input',
    label: '名称',
    field: 'name',
    placeholder: '请输入组件名称',
}]
const searchRuleForm = {
    name: '',
}
const operatingList = [{
    id: 'add',
    typeStyle: 'primary',
    title: '新增分类',
    icon: CirclePlus,
}, {
    id: 'del',
    typeStyle: 'danger',
    title: '删除分类',
    icon: Delete,
}]
const tableColumns = reactive([
    { prop: "selection", width: '50' },
    { prop: 'name', label: '分类名称' },
    {
        prop: 'action',
        label: '操作',
        labelButton: [{
            type: 'add',
            label: '新增分类',
            style: 'success',
        }, {
            type: 'edit',
            label: '编辑',
            style: 'primary',
        }, {
            type: 'del',
            label: '删除',
            style: 'danger',
        }]
    }
])
const classifyForm = ref([{
    field: 'name',
    label: '分类名称',
    placeholder: '请输入分类名称',
    type: 'input',
    rules: [{
        required: true,
        message: '请输入分类名称',
        trigger: 'blur'
    }]
}])
const childRules = ref(null)
const classifyList: any = ref({
    name: '',
})
//#region 增
const DEFAULT_FORM_DATA: CreateOrUpdateTableRequestData = {
    id: undefined,
    name: "",
    parentId: 0
}
const formData = ref<CreateOrUpdateTableRequestData>(cloneDeep(DEFAULT_FORM_DATA))
const dialogVisible = ref<boolean>(false)

const operationBtn = (event) => {
    if (event.id == 'add') {
        dialogVisible.value = true
    }
}
const handleUpdate = (event, type) => {
    console.log(event, type, 77);
    if (type.type == 'add') {
        dialogVisible.value = true
        formData.value.parentId = event.ID
    } else if (type.type == 'edit') {
        dialogVisible.value = true
        formData.value.id = event.ID
        formData.value.name = event.name
        // formData.value.parentId = event.ID
    } else if (type.type == 'del') {
        handleDelete(event)
    }
}
const loading = ref<boolean>(false)
const paginationData: any = ref({})
const tableData = ref([])
// 搜索
const handleSearch = () => {
    getTableData()
}
// 列表查询
const getTableData = () => {
    loading.value = true
    getComponentclassApi({
        currentPage: paginationData.currentPage,
        size: paginationData.pageSize,
        name: searchRuleForm.name,
    }).then((res: any) => {
        // console.log(res, 25);
        if (res.code == 200) {
            // paginationData.total = data.total
            tableData.value = res.data
        }
    }).catch(() => {
        tableData.value = []
    }).finally(() => {
        loading.value = false
    })
}
// 确定添加
const handleCreateOrUpdate = async () => {
    let params = await childRules.value.validateForm()
    if (params) {
        loading.value = true
        console.log(formData.value, 24);
        const api = formData.value.id === undefined ? createComponentclassApi : updateComponentclassApi
        api(formData.value).then((res: any) => {
            if (res.code == 200) {
                ElMessage.success("操作成功")
                dialogVisible.value = false
                getTableData()
            }
        }).finally(() => {
            loading.value = false
        })
    }
}

//#region 删
const handleDelete = (row: TableData) => {
    ElMessageBox.confirm(`正在删除组件分类：${row.name}，确认删除？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
    }).then(() => {
        console.log(row, 776);
        deleteComponentclassApi({ id: row.ID }).then(() => {
            ElMessage.success("删除成功")
            getTableData()
        })
    })
}
const resetForm = () => {
    childRules.value?.cleardate()
    formData.value = cloneDeep(DEFAULT_FORM_DATA)
}
watch([() => paginationData.currentPage, () => paginationData.pageSize], getTableData, { immediate: true })
</script>
<style lang="scss" scoped></style>