knowledgeList.vue 9.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325
  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="5"
  38. v-for="(item, index) in buckList"
  39. :key="index"
  40. :offset="index > 0 && index % 4 !== 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
  55. type="success"
  56. icon="el-icon-edit"
  57. @click="editInfo(item)"
  58. >编辑</el-button
  59. >
  60. <el-button
  61. type="danger"
  62. icon="el-icon-delete"
  63. @click="delect(item)"
  64. >删除</el-button
  65. >
  66. <div class="header_right" slot="reference">
  67. <svg-icon
  68. icon-class="sand"
  69. style="width: 24px; height: 30px"
  70. />
  71. </div>
  72. </el-popover>
  73. </div>
  74. <div class="content">
  75. <p style="margin: 0">{{ item.name }}</p>
  76. <div class="content_info">{{item.description}}</div><!-- item.description -->
  77. <div class="content_file">
  78. <div class="file">
  79. <svg-icon
  80. icon-class="file"
  81. style="width: 32px; height: 32px; "
  82. />
  83. <p>WORD</p>
  84. <p>{{ item.word_count }}</p>
  85. </div>
  86. <div class="file">
  87. <svg-icon
  88. icon-class="file"
  89. style="width: 32px; height: 32px; "
  90. />
  91. <p>EXCEL</p>
  92. <p>{{ item.excel_count }}</p>
  93. </div>
  94. <div class="file">
  95. <svg-icon
  96. icon-class="file"
  97. style="width: 32px; height: 32px; "
  98. />
  99. <p>PDF</p>
  100. <p>{{ item.pdf_count }}</p>
  101. </div>
  102. </div>
  103. </div>
  104. <div class="footer">
  105. <div class="file">
  106. <!-- <svg-icon
  107. icon-class="word"
  108. style="width: 18px; height: 18px; filter: grayscale(100%)"
  109. />
  110. {{ item.doc_num }} -->
  111. </div>
  112. <div class="date">
  113. <svg-icon
  114. icon-class="date"
  115. style="width: 12px; height: 12px; filter: grayscale(100%)"
  116. />
  117. {{ item.create_time }}
  118. </div>
  119. </div>
  120. </div>
  121. </div>
  122. </el-card>
  123. </el-col>
  124. </el-row>
  125. </div>
  126. <!-- 创建弹窗 -->
  127. <el-dialog
  128. :title="dialogTitle"
  129. :visible.sync="dialogVisible"
  130. width="30%"
  131. :before-close="handleClose"
  132. >
  133. <el-form :model="creatForm" ref="creatRef" :rules="creatRules">
  134. <el-form-item label="知识库名称:" prop="bucket_name">
  135. <el-input
  136. v-model="creatForm.bucket_name"
  137. placeholder="请输入内容"
  138. ></el-input>
  139. </el-form-item>
  140. <el-form-item label="描述:" prop="description">
  141. <el-input
  142. show-word-limit
  143. type="textarea"
  144. :rows="5"
  145. maxlength="250"
  146. v-model="creatForm.description"
  147. placeholder="请输入描述内容"
  148. ></el-input>
  149. </el-form-item>
  150. </el-form>
  151. <span slot="footer" class="dialog-footer">
  152. <el-button @click="handleClose">取 消</el-button>
  153. <el-button type="primary" @click="submitBuck">确 定</el-button>
  154. </span>
  155. </el-dialog>
  156. </div>
  157. </template>
  158. <script>
  159. import {
  160. listBuckets,
  161. createBucket,
  162. deleteBucket,
  163. updateKbm,
  164. } from "@/api/knowledge";
  165. import { mapGetters } from "vuex";
  166. export default {
  167. name: "Dashboard",
  168. data() {
  169. // 自定义验证函数
  170. const validateBucketName = (rule, value, callback) => {
  171. const regex = /^[a-z0-9-]{3,63}$/;
  172. if (!regex.test(value)) {
  173. callback(
  174. new Error(
  175. "名称必须在 3-63 个字符之间,只能包含小写字母、数字和连字符"
  176. )
  177. );
  178. } else {
  179. callback();
  180. }
  181. };
  182. return {
  183. loading: true,
  184. queryForm: {},
  185. buckList: [],
  186. visible: false,
  187. dialogVisible: false,
  188. dialogTitle: "创建知识库",
  189. creatForm: {
  190. id: null,
  191. bucket_name: "",
  192. description: "",
  193. user_id: null,
  194. },//知识库名称
  195. creatRules: {
  196. bucket_name: [
  197. { required: true, message: "请输入知识库名称", trigger: "blur" },
  198. /* { validator: validateBucketName, trigger: "blur" }, */
  199. ],
  200. },
  201. };
  202. },
  203. computed: {
  204. ...mapGetters(["roles"]),
  205. },
  206. created() {},
  207. mounted() {
  208. this.onSubmit();
  209. },
  210. methods: {
  211. editInfo(item) {
  212. this.dialogTitle = "编辑知识库";
  213. this.creatForm = {
  214. id: item.id,
  215. bucket_name: item.name,
  216. description: item.description,
  217. user_id: this.$store.state.user.id,
  218. };
  219. this.dialogVisible = true;
  220. },
  221. /* 创建知识库 */
  222. onCreate(e) {
  223. this.dialogTitle = "创建知识库";
  224. this.creatForm = {
  225. id: null,
  226. bucket_name: "",
  227. description: "",
  228. user_id: this.$store.state.user.id,
  229. };
  230. this.dialogVisible = true;
  231. },
  232. /* 关闭弹窗 */
  233. handleClose() {
  234. this.$refs.creatRef.resetFields();
  235. this.dialogVisible = false;
  236. },
  237. onClose(e) {
  238. this.dialogVisible = false;
  239. this.onSubmit();
  240. },
  241. //搜索
  242. onSubmit() {
  243. this.loading = true;
  244. listBuckets({ user_id: this.$store.state.user.id })
  245. .then((res) => {
  246. if (res.status !== 200) return;
  247. res.data.map((el) => {
  248. el.visible = false;
  249. });
  250. this.buckList = res.data;
  251. })
  252. .finally(() => {
  253. this.loading = false;
  254. });
  255. },
  256. /* 删除 */
  257. delect(val) {
  258. this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
  259. confirmButtonText: "确定",
  260. cancelButtonText: "取消",
  261. type: "warning",
  262. })
  263. .then(() => {
  264. deleteBucket({ bucket_id: val.id }).then((res) => {
  265. this.$message({
  266. type: "success",
  267. message: "删除成功!",
  268. });
  269. this.onSubmit();
  270. });
  271. })
  272. .catch(() => {
  273. this.$message({
  274. type: "info",
  275. message: "已取消删除",
  276. });
  277. });
  278. },
  279. /* 关闭弹窗 */
  280. /* handleClose(done) {
  281. this.creatForm = {};
  282. done();
  283. }, */
  284. /* 创建知识库 */
  285. submitBuck() {
  286. this.$refs.creatRef.validate((valid) => {
  287. if (valid) {
  288. const action = this.creatForm.id ? updateKbm : createBucket;
  289. const successMessage = this.creatForm.id ? "修改成功" : "创建成功";
  290. this.creatForm.id ? this.creatForm.name=this.creatForm.bucket_name :this.creatForm.bucket_name=this.creatForm.bucket_name ;
  291. action(this.creatForm).then((res) => {
  292. if (res.status !== 200) return;
  293. this.dialogVisible = false;
  294. this.$message.success(successMessage);
  295. this.onSubmit();
  296. this.$refs.creatRef.resetFields();
  297. });
  298. } else {
  299. this.$message.error("请填写必填项");
  300. }
  301. });
  302. },
  303. /* 跳转到详细页面 */
  304. getInfo(item) {
  305. console.log(item.id);
  306. this.$router.push({
  307. path: "/knowledge/category/knowledgeSet",
  308. query: { id: item.id },
  309. });
  310. },
  311. },
  312. };
  313. </script>
  314. <style lang="scss" scoped>
  315. ::v-deep .el-card {
  316. border-radius: 10px;
  317. }
  318. ::v-deep .el-col-offset-1 {
  319. margin-left: 2%;
  320. }
  321. @import "./index.scss";
  322. </style>