Commit 8a089a91 by wanglizhen

知识库

parent ddda1bda
......@@ -222,38 +222,32 @@ 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 class="pageTitle">
<img class="icon" src="@/assets/images/ruleConfig/dictionaryPage.png" alt="">
<span>知识库</span>
</div>
<div class="box">
<div class="left">
<div style="width: 100%;flex: 1;overflow: auto;">
<el-scrollbar>
<div class="left_item" :class="queryParams.typecode === item.value ? 'active' : ''"
v-for="(item, index) in classList" :key="index" @click="classView(item)">
<span>{{ item.text }}{{ item.value }}</span>
<div class="left_item_btn">
<el-icon :size="16" @click.stop="addClassClick('edit', item)">
<edit />
</el-icon>
<el-icon :size="16" style="margin-left: 10px;" @click.stop="classDelete(item)">
<delete />
<div class="index">{{ index + 1 }}</div>
<span>{{ item.text }}</span>
<div class="left_item_btn" v-if="queryParams.typecode === item.value">
<img class="edit" src="@/assets/images/ruleConfig/edit.png" mode="scaleToFill" @click.stop="addClassClick('edit', item)" />
<el-icon color="rgba(212, 48, 48, 1)" :size="16" @click.stop="classDelete(item)">
<circle-close-filled />
</el-icon>
</div>
</div>
</el-scrollbar>
</div>
</div>
</template>
<template #right>
<div class="right">
<div class="line"></div>
<div class="right-content">
<div style="display: flex;justify-content: space-between;">
<el-form-item label="值:">
<el-input placeholder="" v-model="queryParams.value" class="input-with-select">
......@@ -263,12 +257,14 @@ onMounted(() => {
</el-input>
</el-form-item>
<div style="display: flex;">
<el-button icon="Upload" type="primary" @click="importClick">导入</el-button>
<el-button icon="Download" type="success" @click="exportExcelFunc">导出</el-button>
<el-button icon="Plus" type="primary" @click="addValueClick('add')">新增值</el-button>
<el-button class="but" icon="Plus" type="primary" style="background: rgba(0, 186, 173, 1);border-color:rgba(0, 186, 173, 1);" @click="addClassClick('add')">新增分类</el-button>
<el-button class="but" icon="Plus" type="primary" style="background: rgba(0, 189, 207, 1);border-color:rgba(0, 189, 207, 1);" @click="addValueClick('add')">新增值</el-button>
<el-button class="but" icon="Upload" type="primary" @click="importClick">导入</el-button>
<el-button class="but" icon="Download" type="success" style="background: rgba(11, 136, 251, 1);border-color:rgba(11, 136, 251, 1);" @click="exportExcelFunc">导出</el-button>
</div>
</div>
<el-table :data="tableData.list" stripe style="width: 100%;flex:1;">
<el-table-column type="index" label="序号" width="100" align="center"></el-table-column>
<el-table-column prop="date" label="分类" align="center">
<template #default="scope">
{{ getClassName(scope.row.typecode) }}
......@@ -278,19 +274,18 @@ onMounted(() => {
<el-table-column prop="value" label="值" align="center"></el-table-column>
<el-table-column prop="name" label="名称" align="center"></el-table-column>
<el-table-column prop="parentvalue" label="父值" align="center"></el-table-column>
<el-table-column label="操作" align="center">
<el-table-column label="操作" align="center" width="180">
<template #default="scope">
<el-button type="primary" link @click="addValueClick('edit',scope.row)">编辑</el-button>
<el-divider direction="vertical"></el-divider>
<el-button type="danger" link @click="valueDelete(scope.row)">删除</el-button>
<el-button type="primary" icon="Edit" link @click="addValueClick('edit',scope.row)">编辑</el-button>
<el-button type="primary" icon="Delete" link @click="valueDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination v-show="tableData.total>0" :total="tableData.total" :isTextShow="true"
v-model:page="queryParams.pageno" v-model:limit="queryParams.pagesize" @pagination="getTableData" />
</div>
</template>
</Split>
</div>
</div>
</div>
<!-- 提示框 -->
......@@ -298,72 +293,132 @@ onMounted(() => {
@confirm="modalConfirm"></Modal>
<!-- 新增分类 / 新增值 -->
<ModalPop :width="'600'" v-model="modalPopData.show" :title="modalPopData.title" @cancel="modalPopCancel">
<template #content>
<el-dialog :title="modalPopData.title" v-model="modalPopData.show" :before-close="modalPopCancel" width="600">
<div style="padding: 30px;">
<AddClass :itemData="addClassForm" :type="modalPopData.operation" @cancel="modalPopCancel"
@confirm="AddDomainConfirm" v-if="modalPopData.type === 'class'" />
<AddValue :itemData="addValueForm" :type="modalPopData.operation" :classDict="classList"
@cancel="modalPopCancel" @confirm="AddDomainConfirm" v-if="modalPopData.type === 'value'" />
<uploadModule @cancel="modalPopCancel" @confirm="AddDomainConfirm" v-if="modalPopData.type === 'upload'" />
</template>
</ModalPop>
</div>
</el-dialog>
</div>
</template>
<style lang="scss" scoped>
.app-container__body {
height: calc(
100vh - var(--navbar-height) - var(--container-pd) - var(--container-pd)
) !important;
padding: 20px 0 0 0;
.pageTitle {
margin-bottom: 20px;
display: flex;
align-items: center;
font-size: 16px;
font-weight: 500;
letter-spacing: 0px;
line-height: 22px;
color: rgba(53, 64, 79, 1);
.icon {
margin-right: 6px;
width: 16px;
height: 16px;
}
}
.box {
display: flex;
width: 100%;
flex: 1;
overflow: hidden;
.left {
display: flex;
flex-direction: column;
padding: 0 38px 10px 0;
width: 100%;
width: 282px;
overflow: auto;
height: 100%;
.left_item {
position: relative;
height: 38px;
line-height: 38px;
border-bottom: 1px solid #dce5eb;
padding: 0 10px;
height: 50px;
line-height: 50px;
border-bottom: 1px dashed rgba(186, 193, 204, 1);
padding: 0 13px 0 22px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
cursor: pointer;
font-size: 14px;
color: #7a8495;
color: rgba(53, 64, 79, 1);
display: flex;
align-items: center;
.index{
margin-right: 6px;
width: 18px;
height: 18px;
border-radius: 50%;
background: linear-gradient(180deg, rgba(68, 129, 235, 1) 0%, rgba(4, 190, 254, 1) 100%);
font-size: 12px;
font-weight: 700;
line-height: 18px;
color: rgba(255, 255, 255, 1);
text-align: center;
}
.left_item_btn {
position: absolute;
right: 8px;
top: 2px;
z-index: 0;
-webkit-transition: all 0.3s;
transition: all 0.3s;
opacity: 0;
}
top: 0;
height: 100%;
display: flex;
align-items: center;
.edit{
margin-right: 11px;
width: 14px;
height: 14px;
cursor: pointer;
}
.left_item:hover {
.left_item_btn {
z-index: 10;
opacity: 1;
}
}
.active {
background: #f4faff;
background: rgba(255, 255, 255, 1);
}
}
.right {
padding-left: 36px;
height: 100%;
flex: 1;
display: flex;
flex-direction: column;
background: rgba(255, 255, 255, 1);
.line {
width: 100%;
height: 2px;
border-radius: 5px 5px 0px 0px;
background: linear-gradient(
90deg,
rgba(33, 103, 217, 1) 0%,
rgba(17, 200, 250, 1) 34.03%,
rgba(33, 103, 217, 1) 64.58%,
rgba(48, 128, 255, 1) 100%
);
}
&-content{
flex: 1;
overflow: hidden;
padding: 32px 18px 20px 18px;
display: flex;
flex-direction: column;
.input-with-select{
height: 40px;
}
.but{
height: 40px;
}
:deep(.el-form-item__label){
line-height: 40px;
}
:deep(.el-table .el-table__header-wrapper th) {
background-color: #e9f5fe !important;
color: #2c9ef7;
background-color: rgba(235, 242, 255, 1) !important;
color: rgba(53, 64, 79, 1);
}
:deep(.el-table__cell) {
height: 46px;
}
}
:deep(.el-table__cell){
height: 48px;
}
}
}
......
......@@ -120,8 +120,8 @@ watch(
</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>
<el-button type="primary" style="width: 80px;" @click="confirm">确认</el-button>
<el-button style="width: 80px;" @click="cancel">取消</el-button>
</div>
</div>
</template>
......
......@@ -112,8 +112,8 @@ watch(
</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>
<el-button type="primary" style="width: 80px;" @click="confirm">确认</el-button>
<el-button style="width: 80px;" @click="cancel">取消</el-button>
</div>
</div>
</template>
......
......@@ -54,8 +54,8 @@ const handleFileChange = (file) => {
</el-radio-group>
</el-form-item>
<div class="btn">
<el-button type="info" style="width: 150px;" @click="cancel">取消</el-button>
<el-button type="primary" :loading="uploadLoading" style="width: 150px;" @click="confirm">确认</el-button>
<el-button type="primary" :loading="uploadLoading" style="width: 80px;" @click="confirm">确认</el-button>
<el-button style="width: 80px;" @click="cancel">取消</el-button>
</div>
</div>
</template>
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论