smart-web.git - Gitblit

			@@ -1,111 +1,119 @@
			<!--
			* @Date: 2024-04-09 22:18:47
			* @LastEditors: Sneed
			* @LastEditTime: 2024-04-11 21:36:58
			* @LastEditTime: 2024-04-13 22:11:04
			* @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/console/system/component-classification.vue
			* 分类维护
			-->
			<template>
			<el-container>
			<el-header style="justify-content: flex-start;">
			<el-button type="primary" plain @click="add">新增</el-button>
			<el-button @click="del" plain type="danger" :disabled="selection.length == 0">删除</el-button>
			</el-header>
			<el-main>
			<el-table @selection-change="handleSelectionChange" :data="tableData"
			style="width: 100%;margin-bottom: 20px;" row-key="id" border :tree-props="{ hasChildren: 'has' }">
			<el-table-column type="selection" width="55" />
			<el-table-column prop="name" label="分类名称" />
			<el-table-column prop="parentId" label="上级分类" />
			<el-table-column prop="icon" label="分类图标">
			<template #default="scope">
			<component v-if="icons.includes(scope.row.icon)" style="width: 20px;height: 20px;"
			:is='scope.row.icon'></component>
			<el-main>
			<el-card shadow="never">
			<el-container>
			<el-header style="justify-content: flex-start;">
			<el-button type="primary" plain @click="add">新增</el-button>
			<el-button @click="del" plain type="danger" :disabled="selection.length == 0">删除</el-button>
			</el-header>
			<el-main>
			<el-table @selection-change="handleSelectionChange" :data="tableData"
			style="width: 100%;margin-bottom: 20px;" row-key="id" border
			:tree-props="{ hasChildren: 'has' }">
			<el-table-column type="selection" width="55" />
			<el-table-column prop="name" label="分类名称" />
			<el-table-column prop="parentId" label="上级分类" />
			<el-table-column prop="icon" label="分类图标">
			<template #default="scope">
			<component v-if="icons.includes(scope.row.icon)" style="width: 20px;height: 20px;"
			:is='scope.row.icon'></component>
			</template>
			</el-table-column>
			<el-table-column prop="type" label="分类编号" />
			<el-table-column prop="orderNum" label="排列顺序" />
			<el-table-column prop="status" label="状态">
			<template #default="scope">
			<span>{{ scope.row.status === 1 ? '启用' : '停用' }}</span>
			</template>
			</el-table-column>
			<el-table-column label="操作" fixed="right" align="left" width="160">
			<template #default="scope">
			<el-button-group>
			<el-button text type="primary" size="small"
			@click="table_edit(scope.row, scope.$index)">编辑</el-button>
			<el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index, '0')">
			<template #reference>
			<el-button text type="primary" size="small">删除</el-button>
			</template>
			</el-popconfirm>
			</el-button-group>
			</template>
			</el-table-column>
			</el-table>
			</el-main>
			<el-dialog v-model="dialogVisible" :title="dialogTitle" width="750" :before-close="handleClose">
			<el-form :model="row" :rules="rules" ref="dialogForm" label-width="120px" label-position="center">
			<el-row>
			<el-col :span="12">
			<el-form-item label="分类名称" prop="name">
			<el-input style="width: 240px" v-model="row.name" placeholder="请输入分类名称"
			clearable></el-input>
			</el-form-item>
			</el-col>
			<el-col :span="12">
			<el-form-item label="上级分类" prop="parentId">
			<el-select v-model="row.parentId" filterable placeholder="请选择上级分类"
			style="width: 240px">
			<el-option v-for="item in options" :key="item.value" :label="item.label"
			:value="item.value" />
			</el-select>
			</el-form-item>
			</el-col>
			<el-col :span="12">
			<el-form-item label="分类图标" prop="icon">
			<el-input @click="showIconDialog = true" style="width: 240px" v-model="row.icon"
			placeholder="请选择分类图标" clearable></el-input>
			</el-form-item>
			</el-col>
			<el-col :span="12">
			<el-form-item label="分类编号" prop="type">
			<el-input style="width: 240px" v-model="row.type" placeholder="请输入分类编号"
			clearable></el-input>
			</el-form-item>
			</el-col>
			<el-col :span="12">
			<el-form-item label="排列顺序" prop="orderNum">
			<el-input-number style="width: 240px" default v-model="row.orderNum" :min="0"
			placeholder="请输入排列顺序" />
			</el-form-item>
			</el-col>
			<el-col :span="12">
			<el-form-item label="状态" prop="status">
			<el-radio-group style="width: 240px" v-model="row.status">
			<el-radio v-for="item in statusList" :label="item.value" :key="item.value">{{
			item.label
			}}</el-radio>
			</el-radio-group>
			</el-form-item>
			</el-col>
			</el-row>
			</el-form>
			<template #footer>
			<div class="dialog-footer">
			<el-button @click="dialogVisible = false">取消</el-button>
			<el-button type="primary" @click="save">
			保存
			</el-button>
			</div>
			</template>
			</el-table-column>
			<el-table-column prop="type" label="分类编号" />
			<el-table-column prop="orderNum" label="排列顺序" />
			<el-table-column prop="status" label="状态">
			<template #default="scope">
			<span>{{ scope.row.status === 1 ? '启用' : '停用' }}</span>
			</template>
			</el-table-column>
			<el-table-column label="操作" fixed="right" align="left" width="160">
			<template #default="scope">
			<el-button-group>
			<el-button text type="primary" size="small"
			@click="table_edit(scope.row, scope.$index)">编辑</el-button>
			<el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index, '0')">
			<template #reference>
			<el-button text type="primary" size="small">删除</el-button>
			</template>
			</el-popconfirm>
			</el-button-group>
			</template>
			</el-table-column>
			</el-table>
			</el-main>
			<el-dialog v-model="dialogVisible" :title="dialogTitle" width="750" :before-close="handleClose">
			<el-form :model="row" :rules="rules" ref="dialogForm" label-width="120px" label-position="center">
			<el-row>
			<el-col :span="12">
			<el-form-item label="分类名称" prop="name">
			<el-input style="width: 240px" v-model="row.name" placeholder="请输入分类名称"
			clearable></el-input>
			</el-form-item>
			</el-col>
			<el-col :span="12">
			<el-form-item label="上级分类" prop="parentId">
			<el-select v-model="row.parentId" filterable placeholder="请选择上级分类" style="width: 240px">
			<el-option v-for="item in options" :key="item.value" :label="item.label"
			:value="item.value" />
			</el-select>
			</el-form-item>
			</el-col>
			<el-col :span="12">
			<el-form-item label="分类图标" prop="icon">
			<el-input @click="showIconDialog = true" style="width: 240px" v-model="row.icon"
			placeholder="请选择分类图标" clearable></el-input>
			</el-form-item>
			</el-col>
			<el-col :span="12">
			<el-form-item label="分类编号" prop="type">
			<el-input style="width: 240px" v-model="row.type" placeholder="请输入分类编号"
			clearable></el-input>
			</el-form-item>
			</el-col>
			<el-col :span="12">
			<el-form-item label="排列顺序" prop="orderNum">
			<el-input-number style="width: 240px" default v-model="row.orderNum" :min="0"
			placeholder="请输入排列顺序" />
			</el-form-item>
			</el-col>
			<el-col :span="12">
			<el-form-item label="状态" prop="status">
			<el-radio-group style="width: 240px" v-model="row.status">
			<el-radio v-for="item in statusList" :label="item.value" :key="item.value">{{ item.label
			}}</el-radio>
			</el-radio-group>
			</el-form-item>
			</el-col>
			</el-row>
			</el-form>
			<template #footer>
			<div class="dialog-footer">
			<el-button @click="dialogVisible = false">取消</el-button>
			<el-button type="primary" @click="save">
			保存
			</el-button>
			</div>
			</template>
			</el-dialog>
			<el-dialog v-model="showIconDialog" title="分类图标" width="750">
			<div class="icons">
			<component @click="setIcon(item)" class="icon" v-for="item in icons" :is='item' :key="item"></component>
			</div>
			</el-dialog>
			<el-dialog v-model="showIconDialog" title="分类图标" width="750">
			<div class="icons">
			<component @click="setIcon(item)" class="icon" v-for="item in icons" :is='item' :key="item">
			</component>
			</div>

			</el-dialog>
			</el-container>
			</el-dialog>
			</el-container>
			</el-card>
			</el-main>
			</template>

			<script>