123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242 |
- <template>
- <div class="ledge_box">
- <!-- 搜索创建dom块 -->
- <div class="data-search">
- <el-form :inline="true" :model="queryForm" class="demo-form-inline">
- <!-- <el-form-item label="角色名称:">
- <el-input v-model="queryForm.name" placeholder="角色名称"></el-input>
- </el-form-item>
- <el-form-item label="角色状态:">
- <el-select
- v-model="queryForm.status"
- class="m-2"
- placeholder="请选择角色状态"
- size="large"
- >
- <el-option
- v-for="item in statusOptions"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- />
- </el-select>
- </el-form-item> -->
- <el-form-item>
- <!-- <el-button type="primary" @click="onSubmit">
- <svg-icon icon-class="search" /> 搜索</el-button> -->
- <el-button type="success" @click="onCreate">
- <svg-icon icon-class="edit" />创建知识库</el-button
- >
- </el-form-item>
- </el-form>
- </div>
- <!-- 卡片模块 -->
- <div class="data-list" v-loading="loading" element-loading-text="加载中...">
- <el-row>
- <el-col
- :span="4"
- v-for="(item, index) in buckList"
- :key="index"
- :offset="index > 0 && index % 5 !== 0 ? 1 : 0"
- class="card-col"
- >
- <el-card :body-style="{ padding: '0px' }" shadow="never">
- <div class="card_box">
- <div class="box_content" @click="getInfo(item)">
- <div class="header">
- <div class="header_left">
- <svg-icon
- icon-class="header"
- style="width: 34px; height: 34px"
- />
- </div>
- <el-popover placement="bottom" trigger="hover">
- <el-button icon="el-icon-delete" @click="delect(item)"
- >删除</el-button
- >
- <div class="header_right" slot="reference">
- <svg-icon
- icon-class="sand"
- style="width: 24px; height: 30px"
- />
- </div>
- </el-popover>
- </div>
- <div class="content">
- {{ item.name }}
- </div>
- <div class="footer">
- <div class="file">
- <svg-icon
- icon-class="word"
- style="width: 18px; height: 18px; filter: grayscale(100%)"
- />
- {{ item.doc_num }}
- </div>
- <div class="date">
- <svg-icon
- icon-class="date"
- style="width: 18px; height: 18px; filter: grayscale(100%)"
- />
- {{ item.create_time }}
- </div>
- </div>
- </div>
- </div>
- </el-card>
- </el-col>
- </el-row>
- </div>
- <!-- 创建弹窗 -->
- <el-dialog
- title="创建知识库"
- :visible.sync="dialogVisible"
- width="30%"
- :before-close="handleClose"
- >
- <el-form :model="creatForm" ref="creatRef" :rules="creatRules">
- <el-form-item label="知识库名称:" prop="bucket_name">
- <el-input
- v-model="creatForm.bucket_name"
- placeholder="请输入内容"
- ></el-input>
- </el-form-item>
- </el-form>
- <span slot="footer" class="dialog-footer">
- <el-button @click="handleClose">取 消</el-button>
- <el-button type="primary" @click="submitBuck">确 定</el-button>
- </span>
- </el-dialog>
- </div>
- </template>
-
- <script>
- import { listBuckets, createBucket, deleteBucket } from "@/api/knowledge";
- import { mapGetters } from "vuex";
- export default {
- name: "Dashboard",
- data() {
- // 自定义验证函数
- const validateBucketName = (rule, value, callback) => {
- const regex = /^[a-z0-9-]{3,63}$/;
- if (!regex.test(value)) {
- callback(
- new Error(
- "名称必须在 3-63 个字符之间,只能包含小写字母、数字和连字符"
- )
- );
- } else {
- callback();
- }
- };
- return {
- loading: true,
- queryForm: {},
- buckList: [],
- visible: false,
- dialogVisible: false,
- creatForm: {
- bucket_name: "",
- }, //知识库名称
- creatRules: {
- bucket_name: [
- { required: true, message: "请输入知识库名称", trigger: "blur" },
- /* { validator: validateBucketName, trigger: "blur" }, */
- ],
- },
- };
- },
- computed: {
- ...mapGetters(["roles"]),
- },
- created() {},
- mounted() {
- this.onSubmit();
- },
- methods: {
- /* 搜索创建模块 */
- onCreate(e) {
- this.creatForm = {
- bucket_name: "",
- user_id: this.$store.state.user.id,
- };
- this.dialogVisible = true;
- },
- onClose(e) {
- this.dialogVisible = false;
- this.onSubmit();
- },
- //搜索
- onSubmit() {
- this.loading = true;
- listBuckets({ user_id: this.$store.state.user.id })
- .then((res) => {
- if (res.status !== 200) return;
- res.data.map((el) => {
- el.visible = false;
- });
- this.buckList = res.data;
- })
- .finally(() => {
- this.loading = false;
- });
- },
- /* 删除 */
- delect(val) {
- this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
- confirmButtonText: "确定",
- cancelButtonText: "取消",
- type: "warning",
- })
- .then(() => {
- deleteBucket({ bucket_id: val.id }).then((res) => {
- this.$message({
- type: "success",
- message: "删除成功!",
- });
- this.onSubmit();
- });
- })
- .catch(() => {
- this.$message({
- type: "info",
- message: "已取消删除",
- });
- });
- },
- /* 关闭弹窗 */
- handleClose(done) {
- this.creatForm = {};
- done();
- },
- /* 创建知识库 */
- submitBuck() {
- this.$refs.creatRef.validate((valid) => {
- if (valid) {
- createBucket(this.creatForm).then((res) => {
- if (res.status !== 200) return;
- this.dialogVisible = false;
- this.onSubmit();
- this.creatForm = {};
- });
- } else {
- this.$message.error("请填写知识库名称");
- }
- });
- },
- /* 跳转到详细页面 */
- getInfo(item) {
- console.log(item.id);
- this.$router.push({
- path: "/knowledge/category/knowledgeSet",
- query: { id: item.id },
- });
- },
- },
- };
- </script>
- <style lang="scss" scoped>
- @import "./index.scss";
- </style>
-
|