<template>
<div class="mpks-common-views">
<div class="mpks-search-strategy-resultintervene-content">
<div class="mpks-common-views-content-header mpks-search-strategy-resultintervene-header">
<div>
<el-button
type="primary"
icon="el-icon-plus"
@click="showAddItemDialog"
>新建知识库</el-button>
<el-button
v-if="selectedList.length > 0"
type="danger"
plain
@click="batchDelete"
>删除</el-button>
</div>
<!-- <div>
<search
class="mpks-search-strategy-search-input"
placeholder="搜索已添加干预"
:init-value="wd"
@search="search"
/>
</div> -->
</div>
<el-table
class="mpks-search-strategy-table"
header-cell-class-name="mpks-search-strategy-table-header"
:data="list"
@selection-change="changeSelection"
>
<!-- <p slot="empty">暂无干预</p> -->
<table-empty slot="empty">暂无数据</table-empty>
<el-table-column
label="序号"
width="72"
>
<template slot-scope="scope">
<span>{
{
(pageNumber - 1) * pageSize + scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column
prop="query"
label="库名"
/>
<el-table-column
prop="interveneType"
label="创建人"
/>
<el-table-column
label="操作"
width="140"
>
<template slot-scope="scope">
<div class="mpks-common-table-row-control">
<el-button type="text" @click="showModifyItemDialog(scope.row)">编辑</el-button>
<el-popover
v-model="visibleList[scope.row.id]"
placement="bottom"
width="277"
popper-class="mpks-common-delete-popper"
>
<p>您是否确认删除该干预？删除后将无法恢复</p>
<div class="mpks-common-delete-popper-control">
<el-button
type="primary"
size="mini"
@click="deleteItem(scope.row.id)"
>删除</el-button>
<el-button
plain
size="mini"
@click="cancelDeleteItem(scope.row.id)"
>取消</el-button>
</div>
<el-button
slot="reference"
class="mpks-common-gap-left mpks-common-delete-button"
type="text"
@click="visibleList[scope.row.id] = true"
>删除</el-button>
</el-popover>
</div>
</template>
</el-table-column>
</el-table>
<el-pagination
v-if="totalSize > 0"
class="mpks-common-pagination mpks-search-strategy-pagination"
layout="sizes, prev, pager, next, jumper"
:page-sizes="[5, 10, 15, 20, 30]"
:current-page="pageNumber"
:page-size="pageSize"
:total="totalSize"
@current-change="changePageNumber"
@size-change="changePageSize"
/>
<channel-dialog
:title="modifyItemDialog.title"
:dialog-visible.sync="modifyItemDialog.visible"
:data="currentItem"
@close="closeDialog"
/>
</div>
</div>
</template>
<script>
import Search from '@/components/Search.vue';
import ChannelDialog from './component/ChannelDialog.vue';
export default {
name: 'SearchStrategyResultIntervene',
components: {
Search,
ChannelDialog
},
data() {
return {
list: [],
totalSize: 0,
pageNumber: +this.$route.query.pn || 1,
pageSize: +this.$route.query.ps || 20,
wd: this.$route.query.wd || undefined,
currentItem: {
query: '',
list: [],
totalSize: 0,
pageNumber: 1,
pageSize: 20
},
modifyItemDialog: {
type: 'modify',
title: '',
visible: false
},
visibleList: {
},
selectedList: []
}
},
watch: {
$route() {
this.pageNumber = +this.$route.query.pn || 1;
this.pageSize = +this.$route.query.ps || 20;
this.wd = this.$route.query.wd || undefined;
this.load();
}
},
mounted () {
this.load();
// this.$store.commit('permission/setSecondaryMenu', '/search');
},
methods: {
load() {
// this.$store.dispatch('search/getInterfereList', {
// wd: this.wd,
// pageNumber: this.pageNumber,
// pageSize: this.pageSize
// }).then(res => {
// if (+res.errno === 0) {
// this.list = res.data.list;
// this.totalSize = res.data.totalSize;
// }
// else {
// this.$message.error(res.msg || '出错啦，请稍候再试。');
// }
// });
},
search(params) {
this.$router.push({
query: {
pn: 1,
ps: this.ps,
wd: params.value,
_t: new Date().getTime()
}
});
},
changePageNumber(pn) {
let query = Object.assign({
}, this.$route.query, {
pn: pn
});
this.$router.push({
query
});
},
changePageSize(ps) {
let query = Object.assign({
}, this.$route.query, {
pn: 1,
ps: ps
});
this.$router.push({
query
});
},
showAddItemDialog() {
this.modifyItemDialog.title = '新建知识库';
this.modifyItemDialog.visible = true;
this.currentItem = {
query: '',
list: [],
totalSize: 0,
pageNumber: 1,
pageSize: 20
};
},
showModifyItemDialog(data) {
this.modifyItemDialog.title = '编辑干预';
this.modifyItemDialog.visible = true;
this.currentItem = {
id: data.id,
query: data.query,
list: [],
totalSize: 0,
pageNumber: 1,
pageSize: 20
};
},
deleteItem(id) {
this.$store.dispatch('search/deleteInterfere', {
ids: [id]
}).then(res => {
if (+res.errno === 0) {
this.$message.success('删除成功');
this.load();
}
else {
this.$message.error(res.msg || '出错啦，请稍候再试。');
}
});
this.cancelDeleteItem(id);
},
batchDelete() {
this.$confirm('是否批量删除，此操作不能恢复。').then(() => {
this.$store.dispatch('search/deleteInterfere', {
ids: this.selectedList.map(item => item.id)
}).then(res => {
if (+res.errno === 0) {
this.$message.success('删除成功');
this.load();
}
else {
this.$message.error(res.msg || '出错啦，请稍候再试。');
}
});
}).catch(() => {
});
},
cancelDeleteItem(id) {
this.$set(this.visibleList, id, false);
},
toggleSelection(rows) {
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row);
});
}
else {
this.$refs.multipleTable.clearSelection();
}
},
changeSelection(val) {
this.selectedList = val;
},
closeDialog() {
this.modifyItemDialog.visible = false
// this.load();
}
}
}
</script>
<style lang="less">
@import (reference) "~@/common/util.less";
/deep/.mpks-search-strategy-pagination.el-pagination {
.el-pagination__sizes {
.el-input--mini .el-input__inner {
height: 32px;
line-height: 32px;
}
}
.btn-prev, .btn-next {
width: 32px;
height: 32px;
text-align: center;
}
.el-pager {
.number {
min-width: 32px;
width: 32px;
height: 32px;
padding: 6px;
font-family: PingFangSC-Regular;
font-size: 12px !important;
color: #151B26;
text-align: center;
line-height: 20px;
font-weight: 400;
}
.active {
color: #2468F2;
background: #FFFFFF;
border: 1px solid #2468F2 !important;
border-radius: 4px;
}
}
}
.mpks-search-strategy-table {
padding: 0 20px;
border-radius: 6px;
.cell {
padding: 8px 12px;
line-height: 24px;
}
&-header {
position: relative;
height: 40px;
padding: 0 !important;
color: #5c5f66;
&::after {
position: absolute;
left: 0;
content: '';
height: 100%;
width: 1px;
background: #fff;
}
}
.el-table__expanded-cell {
padding: 0 !important;
}
}
.mpks-search-strategy-search-input {
display: inline-block;
width: 240px;
.mpks-search-input-wrapper {
height: 32px;
}
.mpks-search-wrapper .mpks-search-button {
top: -2px;
}
.el-input__inner{
height: 30px !important;
border-radius: 4px;
}
.el-input__icon {
// 解决输入框高度改变时符号不居中
height: 40px;
position: relative;
top: -2px;
}
}
.mpks-search-strategy-resultintervene-content {
// height: calc(~"100vh - 136px");
border-radius: 6px;
background-color: #fff;
overflow: auto;
padding: 0!important;
}
.mpks-common-views{
background: #fff;
padding-top: 8px;
}
.mpks-search-strategy-resultintervene-header{
margin-left: 20px;
margin-top: 20px;
}
</style>
<style lang="less" scoped>
</style>
dialog：
<template>
<el-dialog class="mpks-common-dialog mpks-search-strategy-resultintervene-dialog" width="650px" :title="innerTitle"
:visible.sync="innerDialogVisible" :close-on-click-modal="false" :close-on-press-escape="false" @opened="open"
@close="close" @submit.native.prevent>
<el-form ref="form" :model="currentItem" label-width="150px" :rules="formRule">
<el-form-item label="知识库名称：" prop="query" class="mpks-common-dialog-form-item-qa">
<el-col :span="22">
<el-input v-model="currentItem.query" placeholder="请输入" :disabled="!!currentItem.id"
@keyup.enter.native="search" show-word-limit clearable>
</el-input>
</el-col>
</el-form-item>
</el-form>
<div slot="footer">
<el-button type="primary" @click="modifyItem">确认</el-button>
<el-button type="default" @click="innerDialogVisible = false">取消</el-button>
</div>
</el-dialog>
</template>
<script>
import cloneDeep from "lodash/cloneDeep";
import {
validate } from "@/common/util.js";
export default {
name: "SearchStrategyResultInterveneDialog",
props: {
title: {
type: String,
default: "新建知识库"
},
dialogVisible: {
type: Boolean,
default: false
},
data: {
type: Object,
required: true
}
},
data () {
return {
innerTitle: this.title,
innerDialogVisible: this.dialogVisible,
currentItem: cloneDeep(this.data),
formRule: {
query: [
{
required: true,
message: "问法不能为空",
trigger: "blur"
},
{
validator: validate.whitespace,
message: "问法不能为空",
trigger: "blur"
},
{
validator: validate.length,
max: 100,
message: "最多100个字符",
trigger: "change"
}
]
},
};
},
watch: {
dialogVisible: "sync"
},
methods: {
modifyItem () {
},
open () {
this.clearValidate("form");
},
close () {
this.clearValidate("form");
this.$emit("close");
},
clearValidate (formName) {
this.$refs[formName] && this.$refs[formName].clearValidate();
},
sync (newVal) {
console.log('newVal', newVal);
this.innerDialogVisible = newVal;
},
// beforeClose(done) {
// this.$confirm("是否确认退出干预?", "提示", {
// confirmButtonText: "确定",
// cancelButtonText: "取消",
// type: "warning"
// }).then(() => {
// done();
// });
// }
}
};
</script>
<style lang="less" scoped>
.mpks-search-strategy-resultintervene-dialog {
/deep/.el-dialog__footer {
padding-top: 0;
.el-button {
width: 72px;
margin-left: 12px;
}
}
.mpks-search-strategy-resultintervene-search-button {
margin: 0 0 0 16px;
height: 32px;
color: #fff;
border-color: #2468f2;
line-height: 10px;
border: 1px solid #2468f2;
border-radius: 4px;
font-size: 14px;
color: #2468f2;
&:hover {
border-color: #528eff;
color: #528eff;
}
&:focus {
border-color: #2468f2;
color: #2468f2;
}
}
.mpks-search-strategy-resultintervene-query-item-wrapper {
border: 1px solid #f1f1f1;
padding: 10px 0;
margin-bottom: 20px;
max-width: 880px;
}
.mpks-search-strategy-resultintervene-block {
background: #fafafa;
padding: 10px 15px;
.mpks-search-strategy-resultintervene-block-title {
font-size: 14px;
font-weight: 600;
}
.mpks-search-strategy-resultintervene-block-item {
margin: 10px 0;
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
.el-button {
padding: 0;
}
}
}
}
/deep/.mpks-common-dialog-form-item-qa {
.el-input-group__append {
padding: 0;
height: 32px;
background-color: #fff;
line-height: 32px;
border: none;
}
.el-input__inner {
padding-right: 80px !important;
}
}
</style>