|
@@ -0,0 +1,518 @@
|
|
|
+<template>
|
|
|
+ <div class="choose-know-container">
|
|
|
+ <el-dialog
|
|
|
+ :visible.sync="show"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ :modal-append-to-body="false"
|
|
|
+ custom-class="dialog"
|
|
|
+ @close="cancelHandle"
|
|
|
+ :title="'添加知识资源-' + knowMessage[ResourceType].title"
|
|
|
+ top="3vh"
|
|
|
+ center
|
|
|
+ width="1200px"
|
|
|
+ v-dialogDrag
|
|
|
+ >
|
|
|
+ <div class="dialog-top">
|
|
|
+ <div>
|
|
|
+ <el-input
|
|
|
+ @input="filterChange"
|
|
|
+ placeholder="请输入标题"
|
|
|
+ v-model="filterForm.keyWord"
|
|
|
+ clearable
|
|
|
+ style="width: 240px"
|
|
|
+ prefix-icon="el-icon-search"
|
|
|
+ />
|
|
|
+
|
|
|
+ <el-popover
|
|
|
+ placement="bottom"
|
|
|
+ trigger="click"
|
|
|
+ :visible-arrow="false"
|
|
|
+ popper-class="report-select-popover"
|
|
|
+ width="350"
|
|
|
+ style="display: inline-block"
|
|
|
+ >
|
|
|
+ <div class="select-wrap-know">
|
|
|
+ <div class="select-top">
|
|
|
+ <h4>筛选条件</h4>
|
|
|
+ <span @click="handleClearFilter"
|
|
|
+ style="cursor: pointer;"
|
|
|
+ ><i class="el-icon-delete" style="margin-right: 4px;"/>清空所选条件</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div class="select-item">
|
|
|
+ <el-cascader
|
|
|
+ v-model="filterForm.classifys"
|
|
|
+ :options="classifyOptions"
|
|
|
+ :props="{
|
|
|
+ value: 'ClassifyId',
|
|
|
+ label: 'ClassifyName',
|
|
|
+ children: 'Child',
|
|
|
+ emitPath: false,
|
|
|
+ multiple: true,
|
|
|
+ }"
|
|
|
+ :show-all-levels="false"
|
|
|
+ clearable
|
|
|
+ placeholder="请选择分类"
|
|
|
+ style="width: 100%"
|
|
|
+ @change="filterChange"
|
|
|
+ ></el-cascader>
|
|
|
+ </div>
|
|
|
+ <div class="select-item">
|
|
|
+ <el-select
|
|
|
+ v-model="filterForm.sources"
|
|
|
+ placeholder="请选择来源"
|
|
|
+ size="medium"
|
|
|
+ clearable
|
|
|
+ style="width: 100%"
|
|
|
+ multiple
|
|
|
+ @change="filterChange"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in sourcesOptions"
|
|
|
+ :key="item"
|
|
|
+ :label="item"
|
|
|
+ :value="item"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="select-item">
|
|
|
+ <el-select
|
|
|
+ v-model="filterForm.tags"
|
|
|
+ placeholder="请选择标签"
|
|
|
+ size="medium"
|
|
|
+ clearable
|
|
|
+ style="width: 100%"
|
|
|
+ multiple
|
|
|
+ @change="filterChange"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in tagsOptions"
|
|
|
+ :key="item.TagId"
|
|
|
+ :label="item.TagName"
|
|
|
+ :value="item.TagId"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="select-item">
|
|
|
+ <el-select
|
|
|
+ v-model="filterForm.users"
|
|
|
+ placeholder="请选择用户"
|
|
|
+ size="medium"
|
|
|
+ clearable
|
|
|
+ style="width: 100%"
|
|
|
+ multiple
|
|
|
+ @change="filterChange"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in usersOptions"
|
|
|
+ :key="item.AdminId"
|
|
|
+ :label="item.AdminRealName"
|
|
|
+ :value="item.AdminId"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="select-btn" slot="reference">
|
|
|
+ <img src="~@/assets/icons/filter.svg" />
|
|
|
+ <span class="select-num">
|
|
|
+ <span class="circle-rect"></span>
|
|
|
+ <span>{{ selectNum }}</span>
|
|
|
+ </span>
|
|
|
+ <span>筛选条件</span>
|
|
|
+ </div>
|
|
|
+ </el-popover>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <el-checkbox v-model="filterForm.IsShowMe" @change="filterChange"
|
|
|
+ >只看我的</el-checkbox
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="main">
|
|
|
+ <el-table
|
|
|
+ :data="tableData"
|
|
|
+ style="
|
|
|
+ box-shadow: 0px 3px 6px rgba(155, 170, 219, 0.2);
|
|
|
+ margin-top: 20px;
|
|
|
+ "
|
|
|
+ border
|
|
|
+ v-loading="dataLoading"
|
|
|
+ @select="selectHandle"
|
|
|
+ @select-all="selectAllPageHandle"
|
|
|
+ ref="table"
|
|
|
+ >
|
|
|
+ <el-table-column type="selection" width="50" />
|
|
|
+ <el-table-column
|
|
|
+ v-for="item in tableColums"
|
|
|
+ :key="item.key"
|
|
|
+ :label="item.label"
|
|
|
+ :width="item.widthsty"
|
|
|
+ :min-width="item.minwidthsty"
|
|
|
+ show-overflow-tooltip
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <span>{{ row[item.key] }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <div class="nodata" slot="empty">
|
|
|
+ <tableNoData :text="$t('Table.prompt_slogan')" size="mini" />
|
|
|
+ </div>
|
|
|
+ </el-table>
|
|
|
+ <div style="height: 35px; margin: 20px 0; padding-right: 30px">
|
|
|
+ <m-page
|
|
|
+ :page_no="filterForm.pageNo"
|
|
|
+ :pageSize="filterForm.pageSize"
|
|
|
+ :total="total"
|
|
|
+ @handleCurrentChange="pageChange"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="dia-footer-know">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ plain
|
|
|
+ @click="cancelHandle"
|
|
|
+ style="margin-right: 20px"
|
|
|
+ >{{ $t("Dialog.cancel_btn") }}</el-button
|
|
|
+ >
|
|
|
+ <el-button type="primary" @click="saveHandle" :loading="btnLoading">{{
|
|
|
+ $t("Dialog.confirm_save_btn")
|
|
|
+ }}</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+const knowMessage = {
|
|
|
+ 0: { title: "事件库" },
|
|
|
+ 1: { title: "政策库" },
|
|
|
+ 2: { title: "报告库" },
|
|
|
+ 3: { title: "知识库" },
|
|
|
+};
|
|
|
+import { eventInterface } from "@/api/modules/knowledge";
|
|
|
+import mPage from "@/components/mPage.vue";
|
|
|
+export default {
|
|
|
+ props: {
|
|
|
+ show: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ ResourceType: {
|
|
|
+ type: Number,
|
|
|
+ default: 0,
|
|
|
+ },
|
|
|
+ knowList:{
|
|
|
+ type:Array,
|
|
|
+ default:() => []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: { mPage },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ knowMessage,
|
|
|
+ filterForm: {
|
|
|
+ pageNo: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ classifys: [],
|
|
|
+ sources: [],
|
|
|
+ tags: [],
|
|
|
+ users: [],
|
|
|
+ keyWord: "",
|
|
|
+ IsShowMe: false,
|
|
|
+ },
|
|
|
+ classifyOptions: [],
|
|
|
+ sourcesOptions: [],
|
|
|
+ tagsOptions: [],
|
|
|
+ usersOptions: [],
|
|
|
+ total: 0,
|
|
|
+ tableData: [],
|
|
|
+
|
|
|
+ dataLoading: false,
|
|
|
+ btnLoading:false,
|
|
|
+ selectionReactCancel: false, //手动设置选中中
|
|
|
+ checkedList: [],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ show(newval) {
|
|
|
+ if (!newval) return;
|
|
|
+ this.getClassifyOptions();
|
|
|
+ this.getSourceOptions();
|
|
|
+ this.getTagOptions();
|
|
|
+ this.getUsersOptions();
|
|
|
+ this.checkedList = this.knowList.filter(_=>_.ResourceType == this.ResourceType);
|
|
|
+ this.getTableData();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ selectNum() {
|
|
|
+ let num = 0;
|
|
|
+ this.filterForm.classifys.length && num++;
|
|
|
+ this.filterForm.sources.length && num++;
|
|
|
+ this.filterForm.tags.length && num++;
|
|
|
+ this.filterForm.users.length && num++;
|
|
|
+ return num;
|
|
|
+ },
|
|
|
+ tableColums() {
|
|
|
+ return [
|
|
|
+ { label: "时间", key: "StartTime" },
|
|
|
+ { label: "标题", key: "Title", minwidthsty: "150px" },
|
|
|
+ { label: "来源", key: "SourceFrom" },
|
|
|
+ { label: "分类", key: "ClassifyFullName" },
|
|
|
+ { label: "标签", key: "TagName" },
|
|
|
+ { label: "添加人", key: "AdminRealName" },
|
|
|
+ ];
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ selectHandle(selection, row) {
|
|
|
+ if (this.selectionReactCancel) return;
|
|
|
+ //当前项是选中还是取消选
|
|
|
+ let haveChecked = selection.some(
|
|
|
+ (_) => _.KnowledgeResourceId == row.KnowledgeResourceId
|
|
|
+ );
|
|
|
+
|
|
|
+ if (haveChecked) {
|
|
|
+ this.checkedList.push(row);
|
|
|
+ } else {
|
|
|
+ this.checkedList = this.checkedList.filter(
|
|
|
+ (_) => _.KnowledgeResourceId != row.KnowledgeResourceId
|
|
|
+ );
|
|
|
+ }
|
|
|
+ //去重
|
|
|
+ this.checkedList = this.checkedList.filter((item, index, arr) => {
|
|
|
+ return (
|
|
|
+ arr.findIndex(
|
|
|
+ (_) => _.KnowledgeResourceId == item.KnowledgeResourceId
|
|
|
+ ) == index
|
|
|
+ );
|
|
|
+ });
|
|
|
+ },
|
|
|
+ selectAllPageHandle(selection) {
|
|
|
+ if (this.selectionReactCancel) return;
|
|
|
+ //当前页是选中还是取消
|
|
|
+ let haveChecked = selection && selection.length > 0;
|
|
|
+
|
|
|
+ if (haveChecked) {
|
|
|
+ this.checkedList = [...this.checkedList, ...this.tableData];
|
|
|
+ } else {
|
|
|
+ let pageIds = this.tableData.map((_) => _.KnowledgeResourceId);
|
|
|
+ this.checkedList = this.checkedList.filter(
|
|
|
+ (_) => !pageIds.includes(_.KnowledgeResourceId)
|
|
|
+ );
|
|
|
+ }
|
|
|
+ //去重
|
|
|
+ this.checkedList = this.checkedList.filter((item, index, arr) => {
|
|
|
+ return (
|
|
|
+ arr.findIndex(
|
|
|
+ (_) => _.KnowledgeResourceId == item.KnowledgeResourceId
|
|
|
+ ) == index
|
|
|
+ );
|
|
|
+ });
|
|
|
+ },
|
|
|
+ saveHandle() {
|
|
|
+ if(this.checkedList && this.checkedList.length > 10)
|
|
|
+ return this.$message.warning('每种知识资源最多只能选择10条');
|
|
|
+ this.btnLoading = true;
|
|
|
+ this.$emit("addKnow", {
|
|
|
+ ResourceType: this.ResourceType,
|
|
|
+ checkedList: this.checkedList || [],
|
|
|
+ });
|
|
|
+ },
|
|
|
+ filterChange() {
|
|
|
+ this.filterForm.pageNo = 1;
|
|
|
+ this.getTableData();
|
|
|
+ },
|
|
|
+ pageChange(page) {
|
|
|
+ this.filterForm.pageNo = page;
|
|
|
+ this.getTableData();
|
|
|
+ },
|
|
|
+ async getTableData() {
|
|
|
+ const {
|
|
|
+ pageNo,
|
|
|
+ pageSize,
|
|
|
+ classifys,
|
|
|
+ sources,
|
|
|
+ tags,
|
|
|
+ users,
|
|
|
+ keyWord,
|
|
|
+ IsShowMe,
|
|
|
+ } = this.filterForm;
|
|
|
+ let params = {
|
|
|
+ PageSize: pageSize,
|
|
|
+ CurrentIndex: pageNo,
|
|
|
+ ClassifyIds: classifys.join(","),
|
|
|
+ SysUserIds: users.join(","),
|
|
|
+ TagIds: tags.join(","),
|
|
|
+ Keyword: keyWord,
|
|
|
+ SourceFrom: sources.join(","),
|
|
|
+ ResourceType: this.ResourceType,
|
|
|
+ IncludeFile:'no',
|
|
|
+ IsShowMe,
|
|
|
+ };
|
|
|
+ this.dataLoading = true;
|
|
|
+ const res = await eventInterface.getEventListByES(params);
|
|
|
+
|
|
|
+ this.dataLoading = false;
|
|
|
+ if (res.Ret !== 200) return;
|
|
|
+
|
|
|
+ this.tableData = res.Data.List || [];
|
|
|
+ this.total = res.Data.Paging.Totals || 0;
|
|
|
+ this.handleChoosed();
|
|
|
+ },
|
|
|
+ handleChoosed() {
|
|
|
+ this.selectionReactCancel = true;
|
|
|
+ this.checkedList.map((_) => {
|
|
|
+ let row = this.tableData.find(
|
|
|
+ (item) => item.KnowledgeResourceId == _.KnowledgeResourceId
|
|
|
+ );
|
|
|
+ if (row) {
|
|
|
+ //设置部分选中
|
|
|
+ setTimeout(() => {
|
|
|
+ this.$refs.table.toggleRowSelection(row, true);
|
|
|
+ }, 20);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ setTimeout(() => {
|
|
|
+ this.selectionReactCancel = false;
|
|
|
+ }, 30);
|
|
|
+ },
|
|
|
+ cancelHandle() {
|
|
|
+ this.$emit("update:show", false);
|
|
|
+ this.init();
|
|
|
+ },
|
|
|
+ init() {
|
|
|
+ this.filterForm = {
|
|
|
+ pageNo: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ classifys: [],
|
|
|
+ sources: [],
|
|
|
+ tags: [],
|
|
|
+ users: [],
|
|
|
+ keyWord: "",
|
|
|
+ IsShowMe: false,
|
|
|
+ };
|
|
|
+ this.checkedList = [];
|
|
|
+ this.total = 0;
|
|
|
+ this.tableData = [];
|
|
|
+ this.btnLoading = false;
|
|
|
+ },
|
|
|
+ handleClearFilter() {
|
|
|
+ this.filterForm.classifys = [];
|
|
|
+ this.filterForm.sources = [];
|
|
|
+ this.filterForm.tags = [];
|
|
|
+ this.filterForm.users = [];
|
|
|
+ this.filterChange();
|
|
|
+ },
|
|
|
+ async getClassifyOptions() {
|
|
|
+ const res = await eventInterface.getClassify({
|
|
|
+ ResourceType: this.ResourceType,
|
|
|
+ });
|
|
|
+ if (res.Ret !== 200) return;
|
|
|
+
|
|
|
+ this.classifyOptions = res.Data.List || [];
|
|
|
+ },
|
|
|
+ async getSourceOptions() {
|
|
|
+ const res = await eventInterface.getSourcesList({
|
|
|
+ ResourceType: this.ResourceType,
|
|
|
+ });
|
|
|
+ if (res.Ret !== 200) return;
|
|
|
+
|
|
|
+ this.sourcesOptions = res.Data.List || [];
|
|
|
+ },
|
|
|
+ async getTagOptions() {
|
|
|
+ const res = await eventInterface.getTagList({
|
|
|
+ ResourceType: this.ResourceType,
|
|
|
+ });
|
|
|
+ if (res.Ret !== 200) return;
|
|
|
+
|
|
|
+ this.tagsOptions = res.Data.List || [];
|
|
|
+ },
|
|
|
+ async getUsersOptions() {
|
|
|
+ const res = await eventInterface.getUsersList({
|
|
|
+ ResourceType: this.ResourceType,
|
|
|
+ });
|
|
|
+ if (res.Ret !== 200) return;
|
|
|
+
|
|
|
+ this.usersOptions = res.Data.List || [];
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss">
|
|
|
+.choose-know-container {
|
|
|
+ .dialog-top {
|
|
|
+ padding: 5px 15px 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ .select-btn {
|
|
|
+ cursor: pointer;
|
|
|
+ width: 140px;
|
|
|
+ height: 40px;
|
|
|
+ text-align: center;
|
|
|
+ background-color: #ecf2fe;
|
|
|
+ border-radius: 4px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ line-height: 40px;
|
|
|
+ margin-left: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ img,
|
|
|
+ span {
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ .select-num {
|
|
|
+ margin-left: 10px;
|
|
|
+ color: #0052d9;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
+ margin-right: 2px;
|
|
|
+ .circle-rect{
|
|
|
+ display: inline-block;
|
|
|
+ width: 4px;
|
|
|
+ height: 4px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: #0052D9;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .main {
|
|
|
+ padding: 0 15px 0;
|
|
|
+ }
|
|
|
+ .dia-footer-know {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ margin: 40px 0 20px 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+.select-wrap-know {
|
|
|
+ padding: 8px;
|
|
|
+ margin: 0 20px;
|
|
|
+ .select-top {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ > span {
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .select-item {
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+ .select-bot {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ margin-top: 20px;
|
|
|
+ .el-button {
|
|
|
+ width: 120px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|