Commit 1165d598 by wanglizhen

知识库管理

parent eb74f07a
<script setup name="Dictionary">
import { onMounted, ref, toRefs } from 'vue'
import { Split } from 'view-ui-plus';
import ModalPop from "@/components/EditPop/ModalPop.vue"
import AddClass from './modules/AddClass.vue' // 分类
import AddValue from './modules/AddValue.vue' // 值
const splitNum = ref(0.31) // 左右分割比例
const data = reactive({
queryParams: {
pageNum: 1,
pageSize: 10,
},
addClassForm: {
name: "",
},
addValueForm: {
name: "",
}
});
const { addClassForm, addValueForm, queryParams } = toRefs(data);
const total = ref(4)
const modalData = reactive({
show: false,
text: '',
icon: 'error',
cancel: true,
type: ''
})
const modalPopData = reactive({
show: false,
title: '',
type: '',
operation: ''
})
const tableData = ref([
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄',
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
},
])
// 新增关闭
const modalPopCancel = () => {
modalPopData.show = false
}
// 新增/编辑 分类
const addClassClick = (type, item) => {
modalPopData.operation = type
if (modalPopData.operation === 'add') {
addClassForm.value = {}
} else if (modalPopData.operation === 'edit') {
}
modalPopData.title = '字典分类'
modalPopData.type = 'class'
modalPopData.show = true
}
// 新增/编辑 值
const addValueClick = (type, item) => {
modalPopData.operation = type
if (modalPopData.operation === 'add') {
addValueForm.value = {}
} else if (modalPopData.operation === 'edit') {
}
modalPopData.title = '字典数据'
modalPopData.type = 'value'
modalPopData.show = true
}
// 删除值
const valueDelete = (item) => {
console.log('删除值', item)
modalData.type = 'value'
modalData.cancel = true
modalData.icon = 'error'
modalData.text = '删除后无法恢复,是否确认删除[' + item.name + ']?'
modalData.show = true
}
// 删除分类
const classDelete = (item) => {
console.log('删除分类事件', item)
modalData.type = 'class'
modalData.cancel = false
modalData.icon = 'error'
modalData.text = '删除后无法恢复,是否确认删除[' + item.name + ']?'
modalData.show = true
}
// 提示回调
const modalConfirm = () => {
if (modalData.type === 'class') {
console.log('删除分类确认')
} else if (modalData.type === 'value') {
console.log('删除值确认')
}
modalData.show = false
}
// 分类查看
const classView = (item) => {
editDomainForm.value = item
}
// 新增确认
const AddDomainConfirm = (item) => {
if (modalPopData.type === 'class') {
console.log('新增分类确认', item)
} else if (modalPopData.type === 'value') {
console.log('新增值确认', item)
}
modalPopData.show = false
}
// 获取列表数据
const getList = () => {
}
onMounted(() => {
})
</script>
<template>
<div class="app-container scroller">
<PageTitle>
<template #title>
知识库
</template>
</PageTitle>
<div class="app-container__body">
<Split v-model="splitNum">
<template #left>
<div class="left">
<div class="mb20" style="display: flex;flex-direction: row-reverse;">
<el-button icon="Plus" type="primary" @click="addClassClick('add')">新增分类</el-button>
</div>
<div style="width: 100%;flex: 1;overflow: auto;">
<el-scrollbar>
<div class="left_item" @click="classView">
<span>单姓1(1)</span>
<div class="left_item_btn">
<el-icon :size="16" @click="addClassClick('edit')">
<edit />
</el-icon>
<el-icon :size="16" style="margin-left: 10px;" @click="classDelete">
<delete />
</el-icon>
</div>
</div>
</el-scrollbar>
</div>
</div>
</template>
<template #right>
<div class="right">
<div style="display: flex;justify-content: space-between;">
<el-form-item label="值:">
<el-input placeholder="" v-model="input3" class="input-with-select">
<template #append>
<el-button icon="Search"></el-button>
</template>
</el-input>
</el-form-item>
<div style="display: flex;">
<el-button icon="Upload" type="primary">导入</el-button>
<el-button icon="Download" type="success">导出</el-button>
<el-button icon="Plus" type="primary" @click="addValueClick('add')">新增值</el-button>
</div>
</div>
<el-table :data="tableData" stripe style="width: 100%;flex:1;">
<el-table-column prop="date" label="分类" align="center"></el-table-column>
<el-table-column prop="name" label="分类编码" align="center"></el-table-column>
<el-table-column prop="address" label="值" align="center"></el-table-column>
<el-table-column prop="address" label="名称" align="center"></el-table-column>
<el-table-column prop="address" label="父值" align="center"></el-table-column>
<el-table-column label="操作" align="center">
<template #default="scope">
<el-button type="primary" link @click="addValueClick('edit')">编辑</el-button>
<el-divider direction="vertical"></el-divider>
<el-button type="danger" link @click="valueDelete">删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:isTextShow="true"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</div>
</template>
</Split>
</div>
<!-- 提示框 -->
<Modal v-model="modalData.show" :icon="modalData.icon" :cancel="modalData.cancel" :text="modalData.text"
@confirm="modalConfirm"></Modal>
<!-- 新增分类 / 新增值 -->
<ModalPop :width="'600'" v-model="modalPopData.show" :title="modalPopData.title" @cancel="modalPopCancel">
<template #content>
<AddClass v-model="addClassForm" :type="modalPopData.operation" @cancel="modalPopCancel" @confirm="AddDomainConfirm"
v-if="modalPopData.type === 'class'" />
<AddValue v-model="addValueForm" :type="modalPopData.operation" @cancel="modalPopCancel" @confirm="AddDomainConfirm"
v-if="modalPopData.type === 'value'" />
</template>
</ModalPop>
</div>
</template>
<style lang="scss" scoped>
.app-container__body {
height: calc(
100vh - var(--navbar-height) - var(--container-pd) - var(--container-pd)
) !important;
.left {
display: flex;
flex-direction: column;
padding: 0 38px 10px 0;
width: 100%;
overflow: auto;
height: 100%;
.left_item {
position: relative;
height: 38px;
line-height: 38px;
border-bottom: 1px solid #dce5eb;
padding: 0 10px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
cursor: pointer;
font-size: 14px;
color: #7a8495;
.left_item_btn {
position: absolute;
right: 8px;
top: 2px;
z-index: 0;
-webkit-transition: all 0.3s;
transition: all 0.3s;
opacity: 0;
}
}
.left_item:hover {
.left_item_btn {
z-index: 10;
opacity: 1;
}
}
.active {
background: #f4faff;
}
}
.right {
padding-left: 36px;
height: 100%;
display: flex;
flex-direction: column;
:deep(.el-table .el-table__header-wrapper th){
background-color: #e9f5fe !important;
color: #2c9ef7;
}
}
}
</style>
\ No newline at end of file
<script setup lang="ts" name="AddClass">
import { onMounted, reactive, ref, toRefs, watch } from "vue";
const props = defineProps<{
modelValue: boolean;
type: string;
}>();
const emit = defineEmits(["update:modelValue", 'cancel','confirm']);
const data = reactive({
rules: {},
});
const { rules } = toRefs(data);
// 取消
const cancel = () => {
if (props.type === 'edit') {
}else if (props.type === 'add') {
}
emit('cancel')
}
const confirm = () => {
if (props.type === 'edit') {
}
emit('confirm')
}
</script>
<template>
<div>
<el-form ref="formRef" :model="modelValue" label-width="100px">
<el-form-item label="字典分类" required>
<el-input v-model="modelValue.name"></el-input>
</el-form-item>
<el-form-item label="备注">
<el-input type="textarea" rows="2" maxlength="200" show-word-limit v-model="modelValue.name"></el-input>
</el-form-item>
</el-form>
<div class="btn">
<el-button type="info" style="width: 150px;" @click="cancel">取消</el-button>
<el-button type="primary" style="width: 150px;" @click="confirm">确认</el-button>
</div>
</div>
</template>
<style lang="scss" scoped>
.btn {
padding: 20px;
display: flex;
justify-content: center;
}
</style>
\ No newline at end of file
<script setup lang="ts" name="AddValue">
import { onMounted, reactive, ref, toRefs, watch } from "vue";
const props = defineProps<{
modelValue: boolean;
type: string;
}>();
const emit = defineEmits(["update:modelValue", 'cancel','confirm']);
const data = reactive({
rules: {},
});
const { rules } = toRefs(data);
// 取消
const cancel = () => {
if (props.type === 'edit') {
}else if (props.type === 'add') {
}
emit('cancel')
}
const confirm = () => {
if (props.type === 'edit') {
}else if (props.type === 'add') {
}
emit('confirm')
}
</script>
<template>
<div>
<el-form ref="formRef" :model="modelValue" label-width="70px" :disabled="readOnly">
<el-form-item label="字典分类">
<el-select v-model="modelValue.name" v-if="!readOnly">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="值" required>
<el-input v-model="modelValue.name"></el-input>
</el-form-item>
<el-form-item label="名称" required>
<el-input v-model="modelValue.name"></el-input>
</el-form-item>
<el-form-item label="父值" required>
<el-input v-model="modelValue.name"></el-input>
</el-form-item>
</el-form>
<div class="btn">
<el-button type="info" style="width: 150px;" @click="cancel">取消</el-button>
<el-button type="primary" style="width: 150px;" @click="confirm">确认</el-button>
</div>
</div>
</template>
<style lang="scss" scoped>
.btn {
padding: 20px;
display: flex;
justify-content: center;
}
</style>
\ No newline at end of file
++ "b/src/views/ruleConfig/Dictionary/\347\237\245\350\257\206\345\272\223.md"
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论