map/ui/dasadmin/src/views/backend/auth/Enumeration/index.vue

<template>
    <div class="Enumeration">
        <el-container class="containerPart">
            <el-aside class="defaultAside">
                <el-main class="treeMain">
<!--                    <div class="demo-collapse">
                        <el-collapse>
                            <el-collapse-item class="treeTitle" title="枚举类型配置" name="1" :icon="CaretRight">
                                <div>
                                    <el-tree
                                        style="max-width: 600px;margin-top: 2.2%"
                                        ref="TypeTree"
                                        :data="TypeData"
                                        :props="defaultProps"
                                        node-key="id"
                                        @node-click="handleNodeClick"
                                    />
                                </div>

&lt;!&ndash;                                <template #title>
                                    枚举类型配置<el-icon class="header-icon" :icon="CaretRight"></el-icon>
                                </template>&ndash;&gt;
&lt;!&ndash;                                <label class="treeTitle">枚举类型配置</label>&ndash;&gt;

                            </el-collapse-item>
                        </el-collapse>
                    </div>-->
                    <label class="treeTitle">枚举类型配置</label>
                    <el-tree
                        style="max-width: 600px;margin-top: 2.2%"
                        ref="TypeTree"
                        :data="TypeData"
                        :props="defaultProps"
                        node-key="id"
                        @node-click="handleNodeClick"
                    />

                </el-main>
            </el-aside>
            <el-container class="defaultMainContainer">
                <el-header class="defaultHeader">
                    <div class="searchPart">
                        <el-input v-model="queryName" class="searchInput" placeholder="按名称查询枚举名"></el-input>
                        <el-button @click="clickQuery" type="primary" :icon="Search" class="defaultBtn">查询</el-button>
                    </div>
                    <div class="btnPart">
                        <el-button type="primary" :icon="Plus" class="defaultBtn" @click="fromAddType">新增枚举类型</el-button>
                        <el-button type="primary" :icon="Plus" class="defaultBtn" @click="fromAddValue">新增枚举值</el-button>
                    </div>
                </el-header>
                <el-main class="mainPart">
                    <el-table :data="tableData"  class="tablePart">
<!--                        <el-table-column type="selection" width="55" />-->
                        <el-table-column prop="description" label="枚举描述" />
                        <el-table-column prop="value" label="枚举值" />
                        <el-table-column label="操作">
                            <template #default="scope">
                                <span style="color: #0064aa; cursor: pointer" @click="enumValueEdit(scope)">查看</span>
                                |
                                <span style="color: #0064aa; cursor: pointer" @click="fromDelete(scope)">删除</span>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="mainFooter" style="display: flex; justify-content: right">
                        <el-pagination
                            v-model:current-page="currentPage"
                            v-model:page-size="currentPageSize"
                            :total="pageTotal"
                            :page-sizes="pagePagination"
                            background
                            :pager-count="7"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            layout="prev, pager, next, jumper,sizes,total"
                        ></el-pagination>
                    </div>
                </el-main>
            </el-container>

            <!--新增枚举类型-->
            <el-dialog v-model="visibleTypeAdd" title="新增枚举类型" width="500" :before-close="handleClose">
                <el-form
                    ref="formRef"
                    :inline="true"
                    :model="formInlineAdd"
                    :rules="rules"
                    style="padding: 24px 40px; font-size: 14px; line-height: 1.5; word-wrap: break-word; font-size: 20px"
                >
                    <el-form-item label="名称:" prop="name">
                        <el-input v-model="formInlineAdd.name" placeholder="" clearable />
                    </el-form-item>
                    <el-form-item label="&nbsp;&nbsp;描述:">
                        <el-input v-model="formInlineAdd.description" placeholder="" clearable />
                    </el-form-item>

                </el-form>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="visibleTypeAdd = false"> 取消 </el-button>
                        <el-button type="primary" @click="onSubmitType">提交</el-button>
                    </div>
                </template>
            </el-dialog>

            <!--新增枚举值-->
            <el-dialog v-model="visibleValueAdd" title="新增枚举值" width="500" :before-close="handleClosevalue">
                <el-form
                    ref="formRef"
                    :inline="true"
                    :model="formInlineValue"
                    :rules="rules1"
                    style="padding: 24px 40px; font-size: 14px; line-height: 1.5; word-wrap: break-word; font-size: 20px"
                >
                    <el-form-item label="枚举值:" prop="value">
                        <el-input v-model="formInlineValue.value" placeholder="" clearable />
                    </el-form-item>
                    <el-form-item label="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;描述:" prop="enumDesc">
                        <el-input v-model="formInlineValue.description" placeholder="" clearable />
                    </el-form-item>
                    <el-form-item label="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;排序:">
                        <el-input-number :min="0" v-model="formInlineValue.orderNumber" placeholder="" />
                    </el-form-item>
                    <el-form-item label="&nbsp;&nbsp;是否有效:">
                        <el-switch v-model="formInlineValue.isActive" />
                    </el-form-item>

                </el-form>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="visibleValueAdd = false"> 取消 </el-button>
                        <el-button type="primary" @click="onSubmitvalue">提交</el-button>
                    </div>
                </template>
            </el-dialog>
            <!-- 删除确认弹框 -->
            <el-dialog v-model="dialogVisibleDelete" title="操作提示" width="500" :before-close="handleCloseDelete">
                <span>确定是否删除?</span>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="dialogVisibleDelete = false">取消</el-button>
                        <el-button type="primary" @click="dialogVisibleDelete1"> 确定 </el-button>
                    </div>
                </template>
            </el-dialog>
            <!--查看枚举值-->
            <el-dialog v-model="visibleValueEdit" title="查看枚举值" width="500" :before-close="edithandleClosevalue">
                <el-form
                    ref="formRef"
                    :inline="true"
                    :model="fromUpDate"
                    :rules="rules1"
                    style="padding: 24px 40px; font-size: 14px; line-height: 1.5; word-wrap: break-word; font-size: 20px"
                >
                    <el-form-item label="枚举值:" prop="value">
                        <el-input v-model="fromUpDate.value" placeholder="" clearable />
                    </el-form-item>
                    <el-form-item label="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;描述:" prop="enumDesc">
                        <el-input v-model="fromUpDate.description" placeholder="" clearable />
                    </el-form-item>
                    <el-form-item label="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;排序:">
                        <el-input-number :min="0" v-model="fromUpDate.orderNumber" placeholder="" />
                    </el-form-item>
                    <el-form-item label="&nbsp;&nbsp;是否有效:">
                        <el-switch v-model="fromUpDate.isActive" />
                    </el-form-item>

                </el-form>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="visibleValueEdit = false"> 取消 </el-button>
<!--                        <el-button type="primary" @click="onSubmitvalue">提交</el-button>-->
                    </div>
                </template>
            </el-dialog>
        </el-container>
    </div>
</template>

<script setup lang="ts">
import {nextTick, onMounted, reactive, ref} from 'vue'
import { Search, Plus, CaretRight } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox, FormRules } from 'element-plus'
import {
    enumListQuery,
    enumTreeQuery,
    enumTypeAdd,
    enumValueAdd,
    enumValueDelete
} from "/@/api/backend/Enumeration/request";






interface Tree {
    enumId: number,
    enumName: string,
    enumDesc: string,
}


const defaultProps = {
    label: 'description',
}

const tableData = ref()
const TypeData=ref()
const TypeTree = ref()
const formRef = ref()
const enumTypeId=ref()


// 搜索查询
const queryName = ref('')
const queryListData = reactive({
    pageSize: 20,
    pageNum: 1,
    description: '',
    enumTypeId: '',
})
const clickQuery = () => {
    queryListData.description = queryName.value
    queryenumValueMethod(queryListData)
}

const enumTreeTypeList = () => {
    enumTreeQuery().then((res) => {
        if (res.code == 200) {
            TypeData.value = res.data
            nextTick(() => {
                enumTypeId.value=res.data[0]?.id
                TypeTree.value?.setCurrentKey(res.data[0]?.id!, false)
                queryListData.description =queryName.value
                queryListData.enumTypeId = res.data[0].id
                queryListData.pageNum=currentPage.value,
                queryListData.pageSize=currentPageSize.value
                queryenumValueMethod(queryListData)

            })
        } else {
            ElMessage.error({
                message: res.msg,
                type: 'error',
            })
        }
    })
}
const queryParameter = ref()
const handleNodeClick = (data: any) => {
    queryParameter.value = data
    enumTypeId.value=data.id
    queryListData.enumTypeId=data.id,
    queryListData.description=queryName.value,
    queryListData.pageNum=currentPage.value,
    queryListData.pageSize=currentPageSize.value
    console.log(queryListData)
    queryenumValueMethod(queryListData)
}

const currentPage = ref(1)
const currentPageSize = ref(20)
const pageTotal = ref(0)
const pagePagination = ref([10, 20, 30])
const handleSizeChange = (val: number) => {
    queryListData.pageSize = val
    queryenumValueMethod(queryListData)
}
const handleCurrentChange = (val: number) => {
    queryListData.pageNum = val
    queryenumValueMethod(queryListData)
}
//新增枚举类型
interface RuleForm {
    name: string | undefined
    description: string | undefined
}
const rules = reactive<FormRules<RuleForm>>({
    name: [
        {
            required: true,
            message: '名称不能为空',
            trigger: 'blur',
        }]

})
const visibleTypeAdd = ref(false)
const formInlineAdd = reactive<RuleForm>({
    name: '',
    description: ''
})
const fromAddType = () => {
    visibleTypeAdd.value = true
    formInlineAdd.name = ''
    formInlineAdd.description =''
}
const handleClose = (done: () => void) => {
    visibleTypeAdd.value = false
}


const onSubmitType = () => {
    formRef.value.validate((valid: any) => {
        if (valid) {
            enumTypeAdd(formInlineAdd).then((res: any) => {
                if (res.code == 200) {
                    enumTreeTypeList()
                    ElMessage({
                        message: res.msg,
                        type: 'success',
                    })
                } else {
                    ElMessage.error({
                        message: res.msg,
                        type: 'error',
                    })
                }
            })

            visibleTypeAdd.value = false
        }
    })
}



//新增枚举值
interface RuleForm1 {
    enumTypeId: number | string
    value: string
    description: string| undefined
    orderNumber: number
    isActive: number
}
const rules1 = reactive<FormRules<RuleForm1>>({
    value: [
        {
            required: true,
            message: '值不能为空',
            trigger: 'blur',
        }]

})
const visibleValueAdd= ref(false)
const formInlineValue = reactive<RuleForm1>({
    enumTypeId: enumTypeId.value,
    value: ' ',
    description: ' ',
    orderNumber: 0,
    isActive:0
})
const fromAddValue = () => {
    visibleValueAdd.value= true
    formInlineValue.enumTypeId =enumTypeId.value
    formInlineValue.value = ''
    formInlineValue.description = ''
    formInlineValue.orderNumber =0
    formInlineValue.isActive =0
}
const handleClosevalue = (done: () => void) => {
    visibleValueAdd.value = false
}


const queryenumValueMethod = (data: any) => {
    enumListQuery(data).then((res) => {
        if (res.code == 200) {
            tableData.value = res.data.rows
            pageTotal.value = res.data.total
        } else {
            ElMessage.error({
                message: res.msg,
                type: 'error',
            })
        }
    })
}

const onSubmitvalue = () => {
    formRef.value.validate((valid: any) => {
        if (valid) {
            debugger
            if(formInlineValue.isActive==true){
                formInlineValue.isActive=1
            }else{
                formInlineValue.isActive=0
            }

            console.log(formInlineValue)
            enumValueAdd(formInlineValue).then((res: any) => {
                debugger
                if (res.code == 200) {
                   /* TypeTree.value?.setCurrentKey(res.data[0]?.id!, false)*/
                    queryListData.description =queryName.value
                    queryListData.enumTypeId = enumTypeId.value
                    queryListData.pageNum=currentPage.value,
                    queryListData.pageSize=currentPageSize.value
                    queryenumValueMethod(queryListData)
                    ElMessage({
                        message: res.msg,
                        type: 'success',
                    })
                } else {
                    ElMessage.error({
                        message: res.msg,
                        type: 'error',
                    })
                }
            })

            visibleValueAdd.value = false
        }
    })
}

// 删除
const fromDeleteData = reactive({
    id: '',
})
interface fromDelete {
    row?: any[]
}
const fromDelete = (data: any) => {
    debugger
    dialogVisibleDelete.value = true
    fromDeleteData.id = data.row.id
}

// 删除提示弹框
const dialogVisibleDelete = ref(false)

const handleCloseDelete = (done: () => void) => {
    dialogVisibleDelete.value = false
}
const dialogVisibleDelete1 = (done: () => void) => {
    dialogVisibleDelete.value = false
    enumValueDelete(fromDeleteData).then((res) => {
        if (res.code == 200) {
            setTimeout(() => {
                ElMessage({
                    message: res.msg,
                    type: 'success',
                })
            }, 1000)
            const queryData2 = {
                description: queryName.value,
                enumTypeId: enumTypeId.value,
                pageNum: currentPage.value,
                pageSize: currentPageSize.value,
            }
            queryenumValueMethod(queryData2)
        } else {
            ElMessage.error({
                message: res.msg,
                type: 'error',
            })
        }
    })
}
// 菜单修改
const fromUpDate = reactive({
    id: '',
    enumTypeId: '',
    value:'',
    description : '',
    orderNumber: 0,
    isActive: false
})
const visibleValueEdit = ref(false)
const enumValueEdit = (data: any) => {
    visibleValueEdit.value = true
    fromUpDate.id = data.row.id
    fromUpDate.enumTypeId = data.row.enumTypeId
    fromUpDate.value = data.row.value
    fromUpDate.description = data.row.description
    fromUpDate.orderNumber = data.row.orderNumber
    if(data.row.isActive==1){
        fromUpDate.isActive = true
    }else{
        fromUpDate.isActive = false
    }

}
const edithandleClosevalue = (done: () => void) => {
    visibleValueEdit.value = false
}

onMounted(() => {
    enumTreeTypeList()
})
</script>

<style scoped lang="scss">

$defaultHeaderHeight: 60px;
@mixin searchInput($value) {
    margin-right: $value;
    width: 220px;
    height: 40px;
}
$paginationHeight: 32px;

.Enumeration{
    width: 100%;
    height: 100%;
    .containerPart{
        height: 100%;
        .defaultAside{
            width: 260px;
            height: 100%;
            border-right: 1px solid #eaebed;
            .treeMain{
                .treeTitle{
                    height:40px;
                    background: #d0e5f2;
                    line-height: 40px;
                    display: inline-block;
                    width: 100%;
                    border-radius: 4px;
                    padding-left: 10px;
                }
            }
        }
        .defaultMainContainer{
            height: 100%;
            .defaultHeader{
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: $defaultHeaderHeight;
                .searchPart {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }
                .defaultBtn {
                    height: 40px;
                }
                .searchInput {
                    @include searchInput(10px);
                }
            }
            .tablePart {
                height: calc(100% - $paginationHeight);
            }
        }
        .el-form--inline .el-form-item{
            width: 100%;
        }
    }
}
</style>