spfm-market-front/src/pages/main/itknowledgetop/knowledgeManagement.vue

<template>
  <fullscreen :fullscreen.sync="fullscreen" class="container">
    <div class="container-box">
      <toolList @iconCli="iconCli" :tooltit="tooltit"></toolList>
      <el-row :gutter="20" style="height: 100%">
        <el-col :span="4" style="height: 100%">
          <el-input
            style="margin-top: 20px"
            placeholder="输入关键字进行过滤"
            v-model="filterText"
          >
          </el-input>
          <div class="choice-style">
            <div class="ant-alert-info ant-alert">
              <i style="color: #1890ff" class="el-icon-warning"></i>当前选择：{{
                actionName || "无"
              }}
              <div class="canel-style" @click="canelChoice" v-show="actionName">
                取消选择
              </div>
            </div>
          </div>
          <div class="tree-box">
            <el-tree
              class="filter-tree"
              :data="treeData"
              node-key="id"
              :props="defaultProps"
              default-expand-all
              :filter-node-method="filterNode"
              @node-click="checkNode"
              ref="tree"
            ><span class="custom-tree-node" slot-scope="{ node }">
              <span>
                <span style="color: #009cff" class="iconfont icon-wenjianjia"></span>
                <!-- <span
                  v-if="
                    node.data.hasOwnProperty('children') &&
                    node.data.children.length > 0
                  "
                  style="color: #009cff"
                  class="iconfont icon-wenjianjia"
                ></span> -->
                <!-- <span
                  v-else
                  style="color: #fdb441"
                  class="iconfont icon-wenjian"
                ></span> -->
                <span
                  :style="
                    node.data.hasOwnProperty('parent')
                      ? 'font-size:14px;padding-left:5px'
                      : 'font-size:12px;padding-left:5px'
                  "
                  >{{ node.data.title }}</span
                >
              </span>
            </span>
            </el-tree>
          </div>
        </el-col>
        <el-col :span="20" style="height: 100%">
          <div class="search">
            <mySearch
              :searchList="searchList"
              @searchInfo="searchInfo"
            ></mySearch>
            <el-button
              class="btn-check"
              size="medium"
              type="primary"
              @click="dialogCheck(1)"
              >添加
            </el-button>
          </div>
          <div class="tabbox">
            <el-table
              height="calc(100% - 40px)"
              class="com-table"
              ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              size="small"
              border
              style="width: 100%"
              v-loading="loading"
              @sort-change="sortChange"
            >
              <el-table-column prop="title" show-overflow-tooltip label="标题">
              </el-table-column>
              <el-table-column label="发布工号">
                <template slot-scope="scope">
                  <span class="">{{ scope.row.handlerId }}</span>
                </template>
              </el-table-column>
              <el-table-column label="发布姓名">
                <template slot-scope="scope">
                  <span>{{ $desensitization(scope.row.handler, 1) }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="orgName"
                show-overflow-tooltip
                label="发布部门"
              >
              </el-table-column>
              <el-table-column prop="typeName" label="发布类型">
              </el-table-column>
              <el-table-column
                prop="catalogName"
                show-overflow-tooltip
                label="归属目录"
              >
              </el-table-column>
              <el-table-column
                prop="createTime"
                show-overflow-tooltip
                label="发布时间"
                width="140"
              >
              </el-table-column>
              <!-- <el-table-column prop="stsDesc" label="状态"> </el-table-column> -->
              <el-table-column
                prop="hits"
                width="90"
                label="点击量"
                sortable="custom"
              >
              </el-table-column>
              <el-table-column label="操作" width="250px" align="center">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="success"
                    @click="collectionHandle(scope.row)"
                    plain
                    >{{
                      scope.row.collection == "0" ? "点击收藏" : "取消收藏"
                    }}</el-button
                  >
                  <el-button
                    size="mini"
                    type="primary"
                    plain
                    @click="dialogCheck(2, scope.row)"
                    >查看</el-button
                  >
                  <el-button
                    size="mini"
                    v-if="scope.row.sts != 1"
                    type="primary"
                    plain
                    @click="dialogCheck(3, scope.row)"
                    >修改</el-button
                  >
                  <el-button
                    size="mini"
                    v-if="scope.row.sts != 1"
                    type="danger"
                    plain
                    @click="delLine(scope.row)"
                  >
                    删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              class="pageBox"
              @current-change="currchange"
              layout="prev, pager, next"
              background
              :total="total"
            >
            </el-pagination></div
        ></el-col>
      </el-row>

      <el-dialog
        :title="titname + '知识'"
        :visible.sync="dialogStatus"
        width="50%"
        :close-on-press-escape="false"
        :show-close="true"
        :fullscreen="fullscreen"
        :before-close="closedia"
        :destroy-on-close="true"
        :modal-append-to-body="false"
        :close-on-click-modal="false"
      >
        <div slot="title">
          <div>
            {{ titname + "知识"
            }}<i
              class="el-icon-full-screen"
              style="float: right; margin-right: 30px"
              @click="
                () => {
                  fullscreen = !fullscreen;
                }
              "
            ></i>
          </div>
        </div>
        <div v-loading="loadinged">
          <el-form
            v-if="titname != '查看'"
            :model="infolist"
            :style="fullscreen ? '' : 'height: 50vh; overflow-y: scroll'"
            ref="infolist"
            :rules="rules"
          >
            <div class="info-line">
              <el-form-item prop="title">
                <span>标题</span>
                <el-input v-model="infolist.title" placeholder="标题">
                </el-input>
              </el-form-item>
              <el-form-item prop="type">
                <span>发布类型</span>
                <el-select
                  :popper-append-to-body="false"
                  v-model="infolist.type"
                  placeholder="发布类型"
                  clearable
                  @change="verifcheck(1)"
                >
                  <el-option
                    v-for="item in knowledge.type.options"
                    :key="item.dataCode"
                    :label="item.dataName"
                    :value="item.dataCode"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <el-form-item prop="catalogName" class="info-line online">
              <span>目录</span>
              <div class="treebox">
                <el-select
                  v-model="infolist.catalogName"
                  placeholder="请选择报表路径"
                  ref="selectReport"
                >
                  <el-option
                    style="height:auto;background-color:#fff"
                    :value="infolist.catalogName"
                    :label="infolist.catalogName"
                  >
                    <el-tree
                      :data="treeData"
                      :props="defaultProps"
                      @node-click="nodeClick"
                    ></el-tree>
                  </el-option>
                </el-select>
              </div>
              <!-- <div class="treebox tree">
                <p style="padding-left: 10px">
                  当前选择： <span>{{ infolist.catalogName }}</span>
                </p>
                <el-tree
                  class="tree"
                  :data="treeData"
                  node-key="id"
                  :props="defaultProps"
                  @node-click="nodeClick"
                ></el-tree>
              </div> -->
            </el-form-item>
            <el-form-item class="info-line online" prop="text">
              <span>内容</span>
              <p-editor-tiny
                imgType="upload"
                v-model="infolist.text"
              ></p-editor-tiny>
            </el-form-item>
            <div style="padding-left: 80px">
              <myUpload
                @uploadBack="uploadBack"
                :fileInfo="fileInfo"
                :fileList="fileInfo.fileList"
              >
              </myUpload>
            </div>
          </el-form>
          <div v-loading="loadinged" v-else>
            <h3 style="text-align: center; margin: 10px 0">
              {{ infolist.title }}
            </h3>
            <div style="font-size: 12px; color: grey; margin: 10px 0">
              发布时间：{{ infolist.createTime || "暂无" }} 发布人：{{
                infolist.handler || "暂无"
              }}
            </div>
            <div v-html="infolist.text"></div>
            <div style="margin: 10px 0">
              附件：
              <uploadDown
                :datalist="datalist"
                :dialogStatus="uploadstatus"
              ></uploadDown>
            </div>
          </div>
          <div class="dialog-footer myfooter">
            <el-button
              type="primary"
              v-if="titname != '查看'"
              @click="dialogCli(1)"
              >保 存</el-button
            >
            <el-button @click="dialogCli(2)">取 消</el-button>
          </div>
        </div>
      </el-dialog>
      <myMessage
        :messTit="messTit"
        @closeMessage="closeMessage"
        :centerDialogVisible="centerDialogVisible"
        v-if="centerDialogVisible"
      ></myMessage>
    </div>
  </fullscreen>
</template>
<script>
import myUpload from "../../../components/upload";
import uploadDown from "../../../components/uploadDown";
import mySearch from "../../../components/search";
import toolList from "../../../components/toolList";
import myMessage from "../../../components/myMessage.vue";
export default {
  components: {
    myMessage,
    myUpload,
    uploadDown,
    mySearch,
    toolList,
    PEditorTiny: () =>
      import(
        /* webpackChunkName: "peditor-tiny" */ "../../../components/p-editor-tiny"
      ),
  },
  data() {
    const catalogName = (rule, value, callback) => {
      if (!this.infolist.catalogName) {
        callback(new Error("不能为空"));
      } else {
        callback();
      }
    };
    return {
      actionName: "",
      htmlS: "",
      filterText: "",
      choiceName: "", // 点击树提示当前选择项
      treeData: [], //  目录树数据
      defaultProps: {
        children: "children",
        label: "title",
      },
      fullscreen: false, // 是否全屏控制按钮
      rules: {
        type: [
          {
            required: true,
            trigger: "change",
            message: "请选择类型",
          },
        ],
        title: [
          {
            required: true,
            trigger: "blur",
            message: "请输入标题",
          },
        ],
        text: [
          {
            required: true,
            trigger: "blur",
            message: "请输入内容",
          },
        ],
        catalogName: [
          {
            required: true,
            trigger: "blur",
            message: "请选择目录",
            validator: catalogName,
          },
        ],
      },
      tooltit: "知识库管理",
      fileInfo: {
        limit: 5,
        url: "/market/cknowledgeatt/upload",
        fileList: [],
      },
      total: 0,
      pageSize: 1,
      knowledge: {
        type: {
          options: [],
        },
      },
      tableData: [], // 表格数据源
      dialogStatus: false, // 弹窗开启关闭
      infolist: {}, // 提交表单数据源
      typeOptions: [], // 类型数据源
      titname: "", // 操作名称 -- 新增、修改、查看
      fileList: [], // 回显附件数据源
      attList: [], // 修改附件数据源
      uploadstatus: false,
      userInfo: {}, // 登录用户信息
      searchList: [
        {
          type: "sel",
          tit: "类型",
          value: "",
          width: "100%",
          options: [],
        },
        {
          type: "input",
          tit: "标题",
          value: "",
          width: "100%",
        },
        {
          type: "sel",
          tit: "状态",
          value: "",
          width: "100%",
          options: [
            {
              dataCode: "0",
              dataName: "未收藏",
            },
            {
              dataCode: "1",
              dataName: "已收藏",
            },
          ],
        },
      ],
      params: {},
      centerDialogVisible: false,
      messTit: "",
      dataId: "",
      loading: false,
      loadinged: false,
      datalist: {
        url: "/market/compatt/downfile",
        type: 2,
      },
    };
  },
  methods: {
    canelChoice() {
      this.params.catalogId = "";
      this.actionName = "";
      this.getList(this.params, this.pageSize);
    },
    collectionHandle(val) {
      this.$http({
        url: "/market/cnewknowledgenet/collection",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          id: val.id,
          collection: val.collection == "0" ? "1" : "0",
        },
      }).then((res) => {
        if (res.data.result === 1) {
          this.$message({
            message: res.data.desc,
            type: "error",
          });
        } else {
          this.$message({
            message: "成功",
            type: "success",
          });
          this.getList(this.params, this.pageSize);
        }
      });
    },
    sortChange(val) {
      if (val.prop == "hits") {
        this.params.hits = val.order;
      }
      this.getList(this.params, this.pageSize);
    },
    checkNode(index, data, node) {
      this.actionName = data.label;
      this.searchList.map((item) => {
        item.value = "";
      });
      this.params.type = "";
      this.params.title = "";
      this.params.collection = "";
      this.params.catalogId = data.key;
      this.getList(this.params, this.pageSize);
    },
    // 树筛选
    filterNode(value, data) {
      if (!value) return true;
      return data.title.indexOf(value) !== -1;
    },
    // 树点击
    nodeClick(index, data, node) {
      this.infolist.catalogName = data.data.title;
      this.infolist.catalogId = data.data.id;
      this.$forceUpdate();
    },
    // 获取树
    getTreeData() {
      this.$http({
        url: "/market/mkKnowledgeCatalogNet/queryList",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {},
      }).then((res) => {
        this.treeData = res.data;
      });
    },
    // 关闭弹窗
    closedia() {
      this.fullscreen = false;
      this.infolist = {};
      this.dialogStatus = false;
      this.fileInfo.fileList = [];
      this.getList(this.params, this.pageSize);
    },
    // 上传回调
    uploadBack(v) {
      this.attList = v;
    },
    //搜索数据
    searchInfo(v) {
      this.params = {};
      v[0] ? (this.params.type = v[0]) : "";
      v[1] ? (this.params.title = v[1]) : "";
      v[2] ? (this.params.collection = v[2]) : "";
      this.getList(this.params, this.pageSize);
    },
    //获取列表
    getList(v, n) {
      this.pageSize = n;
      this.loading = true;
      this.tableData = [];
      this.$http({
        url: "/market/mkNewknowledgeNet/queryPage",
        method: "post",
        headers: {
          "Content-Type": "application/json",
          page: '{"pageNo":"' + n + '","pageSize":"10"}',
        },
        data: v,
      }).then((res) => {
        this.tableData = res.data.data;
        this.total = res.data.totalRecord;
        this.loading = false;
      });
    },
    //字典类型
    getListype(v) {
      this.$http({
        url: "/market/mkKnowledgePubMsgTypeNet/queryList",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          dictCode: "pubType",
        },
      }).then((res) => {
        let listopt = [];
        res.data.forEach((item) => {
          listopt.push({
            dataCode: item.id,
            dataName: item.pubType,
          });
        });
        this.searchList[0].options = listopt;
        this.knowledge.type.options = listopt;
      });
    },
    //功能栏
    iconCli(v) {
      if (v === 1) {
        this.getList(this.params, this.pageSize);
      }
      if (v === 2) {
        this.fullscreen = !this.fullscreen;
        // let isFullscreen =
        //   document.body.scrollHeight == window.screen.height &&
        //   document.body.scrollWidth == window.screen.width;
        // if (!isFullscreen) {
        //   this.requestFullscreen();
        // } else {
        //   this.exitFullscreen();
        // }
      }
    },
    // 全屏
    requestFullscreen() {
      const element = element || document.documentElement;
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen();
      }
    },
    // 退出全屏
    exitFullscreen() {
      const element = element || document.documentElement;
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
      }
    },
    // 分页
    currchange(v) {
      this.pageSize = v;
      this.getList(this.params, this.pageSize);
    },
    //查看 修改 新增
    dialogCheck(v, n) {
      this.dialogStatus = true;
      this.infolist = {};
      if (v === 1) {
        this.titname = "新建";
        this.infolist = {};
        this.getUser();
        return;
      } else if (v === 2) {
        this.titname = "查看";
        this.loadinged = true;
      } else if (v === 3) {
        this.titname = "修改";
        this.loadinged = true;
      }
      this.$http({
        url: "/market/cnewknowledgenet/queryInfo",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          id: n.id,
        },
      }).then((res) => {
        this.datalist.attList = res.data.attList;
        this.uploadstatus = true;
        this.infolist = res.data;
        this.fileInfo.fileList = [];
        this.attList = [];
        res.data.attList.forEach((item) => {
          this.fileInfo.fileList.push({
            name: item.fileName,
            url: "",
            id: item.id,
            fileName: item.fileName,
            fileCode: item.fileCode,
            opName: item.opName,
            opNo: item.opNo,
            opTime: item.opTime,
          });
          this.attList.push({
            name: item.fileName,
            url: "",
            id: item.id,
            fileName: item.fileName,
            fileCode: item.fileCode,
            opName: item.opName,
            opNo: item.opNo,
            opTime: item.opTime,
          });
        });
        this.loadinged = false;
      });
    },
    //添加 修改
    dialogCli(v) {
      this.uploadstatus = false;
      this.fileInfo.fileList = [];
      if (v === 2) {
        this.getUser();
        this.dialogStatus = false;
        this.getList(this.params, this.pageSize);
        return;
      }
      if (this.titname === "新建") {
        this.submitInfo("/market/cnewknowledgenet/addSave", v);
      } else if (this.titname === "修改") {
        this.submitInfo("/market/cnewknowledgenet/update ", v);
      }
    },
    submitInfo(u, v) {
      this.$refs.infolist.validate((valid) => {
        if (valid) {
          let attList = [];
          for (let i = 0; i < this.attList.length; i++) {
            attList.push({
              id: this.attList[i].id,
              fileCode: this.attList[i].fileCode,
              fileName: this.attList[i].fileName,
              opName: this.attList[i].opName,
              opNo: this.attList[i].opNo,
              opTime: this.attList[i].opTime,
            });
          }
          this.loadinged = true;
          this.$http({
            url: u,
            method: "post",
            headers: {
              "Content-Type": "application/json",
            },
            data: {
              newKnowleDge: this.infolist,
              attList: attList,
            },
          }).then((res) => {
            this.loadinged = false;
            if (res.data.result === 1) {
              this.$message({
                message: res.data.desc,
                type: "error",
              });
            } else {
              this.$message({
                message: "成功",
                type: "success",
              });
              this.fileInfo.fileList = [];
              this.infolist = {};
              this.dialogStatus = false;
              this.getList(this.params, this.pageSize);
            }
          });
        }
      });
    },
    //处理所需数据
    verifcheck(v) {
      if (v === 1) {
        for (let i = 0; i < this.knowledge.type.options.length; i++) {
          if (this.knowledge.type.options[i].dataCode == this.infolist.type) {
            this.infolist.typeName = this.knowledge.type.options[i].dataName;
          }
        }
      }
    },
    //删除
    delLine(val) {
      this.centerDialogVisible = true;
      this.messTit = "即将删除此条数据, 是否删除?";
      this.dataId = val.id;
    },
    closeMessage(v) {
      this.centerDialogVisible = false;
      if (v === 1) {
        this.$http({
          url: "/market/cnewknowledgenet/delete",
          method: "post",
          headers: {
            "Content-Type": "application/json",
          },
          data: { id: this.dataId },
        }).then((res) => {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.getList(this.params, this.pageSize);
        });
      }
    },
    getUser() {
      this.userInfo = JSON.parse(window.sessionStorage.userInfo);
      this.infolist = {};
      this.infolist.handler = this.userInfo.loginNo;
      this.infolist.orgId = this.userInfo.groupId;
      this.infolist.orgName = this.userInfo.groupName;
      this.infolist.handlerId = this.userInfo.loginName;
    },
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  mounted() {
    this.getList(this.params, this.pageSize);
    this.getListype();
    this.getUser();
    this.getTreeData();
  },
  created() {},
};
</script>
<style>
.el-select-dropdown__item {
  /* padding: 0 !important; */
}
</style>
<style scoped lang="scss">
@import "../../../assets/style";

// .iconfont {
//   font-size: 42px;
// }

.icon-excel {
  color: #67db63;
}

.icon-word {
  color: #ff654e;
}

.icon-ppt {
  color: #ff8943;
}

.icon-wenjian {
  color: #ccc;
}
.tinymce-editor {
  width: calc(100% - 100px) !important;
}
.el-icon-picture {
  font-size: 36px;
  color: #ccc;
  background: #fff;
  padding: 4px 2px;
  margin-bottom: 2px;
}
.el-icon-full-screen {
  cursor: pointer;
}
.back-box {
  margin-top: 20px;
  background: #f2f2f2;
  padding: 20px;

  div {
    display: inline-block;
    text-align: center;
    margin-right: 20px;
    cursor: pointer;

    span {
      display: block;
      width: 80px;
      overflow: hidden;
      padding-top: 10px;
      margin: 0 10px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      /* 将对象作为弹性伸缩盒子模型显示 */
      -webkit-line-clamp: 1;
      /* 控制最多显示几行 */
      -webkit-box-orient: vertical;
      /* 设置或检索伸缩盒对象的子元素的排列方式 */
    }
  }
}
.tree-box {
  height: calc(100% - 170px);
  overflow: auto;
  border: 1px solid #dcdfe6;
  border-top: none;
}

.titbox {
  div {
    float: right;

    i {
      font-size: 22px;
      margin-left: 20px;
      cursor: pointer;
    }
  }
}

.tabbox {
  margin-top: 15px;
}

.pageBox {
  text-align: right;
  margin-top: 10px;
}

.info-line {
  width: 100%;
  display: block;
  padding-left: 20px;

  div {
    width: 50%;
    display: inline-block;
  }

  span {
    width: 80px;
    display: inline-block;
    text-align: left;

    i {
      color: red;
      display: inline-block;
      padding-right: 5px;
    }
  }

  .el-select,
  .el-input {
    width: calc(100% - 100px);
  }
  .tree {
    width: calc(100% - 100px);
  }
}

.online {
  width: 100%;

  .el-select {
    width: calc(100% - 100px);
  }

  span {
    vertical-align: top;
  }

  .el-textarea {
    width: calc(100% - 100px);
  }
}
.choice-style {
  background: rgb(255, 255, 255);
}
.ant-alert-info {
  background-color: #e6f7ff;
  border: 1px solid #91d5ff;
}
.ant-alert {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgb(0, 0, 0);
  font-size: 14px;
  font-variant: tabular-nums;
  line-height: 1.5;
  list-style: none;
  font-feature-settings: "tnum";
  position: relative;
  padding: 5px 0;
  word-wrap: break-word;
  border-radius: 4px;
}
.canel-style {
  color: #1890ff;
  cursor: pointer;
  padding-left: 10px;
}
</style>