knowledgeList.vue 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242
  1. <template>
  2. <div class="ledge_box">
  3. <!-- 搜索创建dom块 -->
  4. <div class="data-search">
  5. <el-form :inline="true" :model="queryForm" class="demo-form-inline">
  6. <!-- <el-form-item label="角色名称:">
  7. <el-input v-model="queryForm.name" placeholder="角色名称"></el-input>
  8. </el-form-item>
  9. <el-form-item label="角色状态:">
  10. <el-select
  11. v-model="queryForm.status"
  12. class="m-2"
  13. placeholder="请选择角色状态"
  14. size="large"
  15. >
  16. <el-option
  17. v-for="item in statusOptions"
  18. :key="item.value"
  19. :label="item.label"
  20. :value="item.value"
  21. />
  22. </el-select>
  23. </el-form-item> -->
  24. <el-form-item>
  25. <!-- <el-button type="primary" @click="onSubmit">
  26. <svg-icon icon-class="search" /> 搜索</el-button> -->
  27. <el-button type="success" @click="onCreate">
  28. <svg-icon icon-class="edit" />创建知识库</el-button
  29. >
  30. </el-form-item>
  31. </el-form>
  32. </div>
  33. <!-- 卡片模块 -->
  34. <div class="data-list" v-loading="loading" element-loading-text="加载中...">
  35. <el-row>
  36. <el-col
  37. :span="4"
  38. v-for="(item, index) in buckList"
  39. :key="index"
  40. :offset="index > 0 && index % 5 !== 0 ? 1 : 0"
  41. class="card-col"
  42. >
  43. <el-card :body-style="{ padding: '0px' }" shadow="never">
  44. <div class="card_box">
  45. <div class="box_content" @click="getInfo(item)">
  46. <div class="header">
  47. <div class="header_left">
  48. <svg-icon
  49. icon-class="header"
  50. style="width: 34px; height: 34px"
  51. />
  52. </div>
  53. <el-popover placement="bottom" trigger="hover">
  54. <el-button icon="el-icon-delete" @click="delect(item)"
  55. >删除</el-button
  56. >
  57. <div class="header_right" slot="reference">
  58. <svg-icon
  59. icon-class="sand"
  60. style="width: 24px; height: 30px"
  61. />
  62. </div>
  63. </el-popover>
  64. </div>
  65. <div class="content">
  66. {{ item.name }}
  67. </div>
  68. <div class="footer">
  69. <div class="file">
  70. <svg-icon
  71. icon-class="word"
  72. style="width: 18px; height: 18px; filter: grayscale(100%)"
  73. />
  74. {{ item.doc_num }}
  75. </div>
  76. <div class="date">
  77. <svg-icon
  78. icon-class="date"
  79. style="width: 18px; height: 18px; filter: grayscale(100%)"
  80. />
  81. {{ item.create_time }}
  82. </div>
  83. </div>
  84. </div>
  85. </div>
  86. </el-card>
  87. </el-col>
  88. </el-row>
  89. </div>
  90. <!-- 创建弹窗 -->
  91. <el-dialog
  92. title="创建知识库"
  93. :visible.sync="dialogVisible"
  94. width="30%"
  95. :before-close="handleClose"
  96. >
  97. <el-form :model="creatForm" ref="creatRef" :rules="creatRules">
  98. <el-form-item label="知识库名称:" prop="bucket_name">
  99. <el-input
  100. v-model="creatForm.bucket_name"
  101. placeholder="请输入内容"
  102. ></el-input>
  103. </el-form-item>
  104. </el-form>
  105. <span slot="footer" class="dialog-footer">
  106. <el-button @click="handleClose">取 消</el-button>
  107. <el-button type="primary" @click="submitBuck">确 定</el-button>
  108. </span>
  109. </el-dialog>
  110. </div>
  111. </template>
  112. <script>
  113. import { listBuckets, createBucket, deleteBucket } from "@/api/knowledge";
  114. import { mapGetters } from "vuex";
  115. export default {
  116. name: "Dashboard",
  117. data() {
  118. // 自定义验证函数
  119. const validateBucketName = (rule, value, callback) => {
  120. const regex = /^[a-z0-9-]{3,63}$/;
  121. if (!regex.test(value)) {
  122. callback(
  123. new Error(
  124. "名称必须在 3-63 个字符之间,只能包含小写字母、数字和连字符"
  125. )
  126. );
  127. } else {
  128. callback();
  129. }
  130. };
  131. return {
  132. loading: true,
  133. queryForm: {},
  134. buckList: [],
  135. visible: false,
  136. dialogVisible: false,
  137. creatForm: {
  138. bucket_name: "",
  139. }, //知识库名称
  140. creatRules: {
  141. bucket_name: [
  142. { required: true, message: "请输入知识库名称", trigger: "blur" },
  143. /* { validator: validateBucketName, trigger: "blur" }, */
  144. ],
  145. },
  146. };
  147. },
  148. computed: {
  149. ...mapGetters(["roles"]),
  150. },
  151. created() {},
  152. mounted() {
  153. this.onSubmit();
  154. },
  155. methods: {
  156. /* 搜索创建模块 */
  157. onCreate(e) {
  158. this.creatForm = {
  159. bucket_name: "",
  160. user_id: this.$store.state.user.id,
  161. };
  162. this.dialogVisible = true;
  163. },
  164. onClose(e) {
  165. this.dialogVisible = false;
  166. this.onSubmit();
  167. },
  168. //搜索
  169. onSubmit() {
  170. this.loading = true;
  171. listBuckets({ user_id: this.$store.state.user.id })
  172. .then((res) => {
  173. if (res.status !== 200) return;
  174. res.data.map((el) => {
  175. el.visible = false;
  176. });
  177. this.buckList = res.data;
  178. })
  179. .finally(() => {
  180. this.loading = false;
  181. });
  182. },
  183. /* 删除 */
  184. delect(val) {
  185. this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
  186. confirmButtonText: "确定",
  187. cancelButtonText: "取消",
  188. type: "warning",
  189. })
  190. .then(() => {
  191. deleteBucket({ bucket_id: val.id }).then((res) => {
  192. this.$message({
  193. type: "success",
  194. message: "删除成功!",
  195. });
  196. this.onSubmit();
  197. });
  198. })
  199. .catch(() => {
  200. this.$message({
  201. type: "info",
  202. message: "已取消删除",
  203. });
  204. });
  205. },
  206. /* 关闭弹窗 */
  207. handleClose(done) {
  208. this.creatForm = {};
  209. done();
  210. },
  211. /* 创建知识库 */
  212. submitBuck() {
  213. this.$refs.creatRef.validate((valid) => {
  214. if (valid) {
  215. createBucket(this.creatForm).then((res) => {
  216. if (res.status !== 200) return;
  217. this.dialogVisible = false;
  218. this.onSubmit();
  219. this.creatForm = {};
  220. });
  221. } else {
  222. this.$message.error("请填写知识库名称");
  223. }
  224. });
  225. },
  226. /* 跳转到详细页面 */
  227. getInfo(item) {
  228. console.log(item.id);
  229. this.$router.push({
  230. path: "/knowledge/category/knowledgeSet",
  231. query: { id: item.id },
  232. });
  233. },
  234. },
  235. };
  236. </script>
  237. <style lang="scss" scoped>
  238. @import "./index.scss";
  239. </style>