Commit 8a089a91 by wanglizhen

知识库

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