|
@@ -0,0 +1,307 @@
|
|
|
+<template>
|
|
|
+ <div class="data-list" v-loading="loading" element-loading-text="加载中...">
|
|
|
+ <el-table
|
|
|
+ :data="dataList"
|
|
|
+ style="width: 100%"
|
|
|
+ header-row-class-name="headerBg"
|
|
|
+ empty-text="没有模板信息"
|
|
|
+ >
|
|
|
+ <el-table-column prop="id" label="ID" align="center" width="80" />
|
|
|
+ <el-table-column prop="object_name" label="文件名称" align="center" />
|
|
|
+ <el-table-column prop="size" label="分块数" align="center" />
|
|
|
+ <el-table-column prop="last_modified" label="上传时间" align="center" />
|
|
|
+ <el-table-column prop="" label="解析方法" align="center" />
|
|
|
+ <el-table-column prop="createTime" label="启用" align="center" />
|
|
|
+ <el-table-column prop="status" label="解析状态" align="center">
|
|
|
+ <template #default="scope">
|
|
|
+ <div v-if="scope.row.status == 5">启用</div>
|
|
|
+ <div v-if="scope.row.status == 6">停用</div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" align="center" width="300"><!-- editWidth() -->
|
|
|
+ <template #default="scope">
|
|
|
+ <div class="btns">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ v-if="allowEdit"
|
|
|
+ @click="btnEdit(scope.row.object_name)"
|
|
|
+ ><svg-icon icon-class="edit" />修改文件名</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ v-if="allowEdit"
|
|
|
+ @click="btnDown(scope.row.object_name)"
|
|
|
+ ><svg-icon icon-class="edit" />下载</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ type="danger"
|
|
|
+ size="small"
|
|
|
+ v-if="allowDelete"
|
|
|
+ @click="btnDelete(scope.row.object_name)"
|
|
|
+ ><svg-icon icon-class="delete" />删除</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <div class="page-info">
|
|
|
+ <el-pagination
|
|
|
+ :currentPage="queryForm.page"
|
|
|
+ :page-size="queryForm.pageSize"
|
|
|
+ :total="recordCount"
|
|
|
+ :page-count="pageTotal"
|
|
|
+ background
|
|
|
+ layout="prev, pager, next"
|
|
|
+ @current-change="ChangePage"
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ <el-dialog
|
|
|
+ title="修改名称"
|
|
|
+ :visible.sync="dialogVisible"
|
|
|
+ width="30%"
|
|
|
+ :before-close="handleClose"
|
|
|
+ >
|
|
|
+ <el-form :model="wordForm" ref="wordRef" :rules="wordRules">
|
|
|
+ <el-form-item label="文件名称:" prop="new_name">
|
|
|
+ <el-input
|
|
|
+ v-model="wordForm.new_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 { getBucketContents, deleteFile, nameGetUrl,renameFile } from "@/api/knowledge";
|
|
|
+export default {
|
|
|
+ props: {
|
|
|
+ queryForm: {
|
|
|
+ type: Object,
|
|
|
+ default: () => {
|
|
|
+ return {
|
|
|
+ page: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ bucket_name: "",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ },
|
|
|
+ allowEdit: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ allowDelete: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ queryForm: {
|
|
|
+ handler: function (val) {
|
|
|
+ this.search();
|
|
|
+ },
|
|
|
+ // immediate: true,//立即执行
|
|
|
+ deep: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ 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: false,
|
|
|
+ dialogVisible: false, //控制产品审核
|
|
|
+ currentDataId: 0,
|
|
|
+ recordCount: 0,
|
|
|
+ pageTotal: 1,
|
|
|
+ dataList: [],
|
|
|
+ currentData: {},
|
|
|
+ dialogVisible: false,
|
|
|
+ wordForm: {
|
|
|
+ bucket_name: this.$route.query.bucket_name,
|
|
|
+ object_name: "",
|
|
|
+ new_name: "",
|
|
|
+ },
|
|
|
+ wordRules: {
|
|
|
+ new_name: [
|
|
|
+ { required: true, message: "请输入文件名称", trigger: "blur" },
|
|
|
+ { validator: validateBucketName, trigger: "blur" },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.search();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ editWidth() {
|
|
|
+ if (this.allowDelete && this.allowEdit) {
|
|
|
+ return 200;
|
|
|
+ }
|
|
|
+ if (this.allowDelete || this.allowEdit) {
|
|
|
+ return 120;
|
|
|
+ }
|
|
|
+ return 100;
|
|
|
+ },
|
|
|
+
|
|
|
+ onFocusVal(e) {
|
|
|
+ let _this = this;
|
|
|
+ _this.currentDataId = e.target.dataset.id;
|
|
|
+ },
|
|
|
+
|
|
|
+ onChangeVal(e) {
|
|
|
+ let _this = this;
|
|
|
+ let par = {
|
|
|
+ id: _this.currentDataId,
|
|
|
+ val: e,
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ btnDelete(e) {
|
|
|
+ let _this = this;
|
|
|
+ let par = {
|
|
|
+ bucket_name: this.$route.query.bucket_name,
|
|
|
+ object_name: e,
|
|
|
+ };
|
|
|
+ _this
|
|
|
+ .$confirm("您是否确认删除该记录?", "提示", {
|
|
|
+ confirmButtonText: "确认",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning",
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ deleteFile(par).then((res) => {
|
|
|
+ _this.search();
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
+ },
|
|
|
+
|
|
|
+ searchData() {
|
|
|
+ let _this = this;
|
|
|
+ _this.dialogVisible = false;
|
|
|
+ _this.search();
|
|
|
+ },
|
|
|
+ /* 关闭 */
|
|
|
+ handleClose(done) {
|
|
|
+ done();
|
|
|
+ },
|
|
|
+ /* 修改文件名 */
|
|
|
+ btnEdit(e) {
|
|
|
+ this.wordForm.object_name = e;
|
|
|
+ this.dialogVisible = true;
|
|
|
+ },
|
|
|
+ /* 提交 */
|
|
|
+ submitBuck() {
|
|
|
+ this.$refs.wordRef.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ renameFile(this.wordForm).then((res) => {
|
|
|
+ if (res.status !== 200) return;
|
|
|
+ this.search()
|
|
|
+ this.dialogVisible = false;
|
|
|
+ this.wordForm = {};
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.$message.error("请填写文档名称");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ //编辑
|
|
|
+ btnDown(e) {
|
|
|
+ nameGetUrl({
|
|
|
+ bucket_name: this.$route.query.bucket_name,
|
|
|
+ object_name: e,
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ if (res.status !== 200) {
|
|
|
+ this.$message.error("获取下载链接失败");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 使用 fetch 来获取文件内容
|
|
|
+ fetch(res.data.url)
|
|
|
+ .then((response) => response.blob())
|
|
|
+ .then((blob) => {
|
|
|
+ // 创建一个 Blob URL
|
|
|
+ const url = window.URL.createObjectURL(blob);
|
|
|
+
|
|
|
+ // 创建一个隐藏的a标签
|
|
|
+ const link = document.createElement("a");
|
|
|
+ link.href = url;
|
|
|
+ link.download = e;
|
|
|
+
|
|
|
+ // 添加到body并触发点击
|
|
|
+ document.body.appendChild(link);
|
|
|
+ link.click();
|
|
|
+
|
|
|
+ // 清理
|
|
|
+ setTimeout(() => {
|
|
|
+ document.body.removeChild(link);
|
|
|
+ window.URL.revokeObjectURL(url);
|
|
|
+ }, 100);
|
|
|
+ })
|
|
|
+ .catch((error) => {
|
|
|
+ console.error("下载出错:", error);
|
|
|
+ this.$message.error("下载失败,请稍后重试");
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch((error) => {
|
|
|
+ console.error("获取下载链接出错:", error);
|
|
|
+ this.$message.error("获取下载链接失败,请稍后重试");
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ handleClose() {
|
|
|
+ let _this = this;
|
|
|
+ _this.currentData = {};
|
|
|
+ _this.dialogVisible = false;
|
|
|
+ },
|
|
|
+
|
|
|
+ //搜索
|
|
|
+ search() {
|
|
|
+ let _this = this;
|
|
|
+ _this.loading = true; // Set loading to true before API call
|
|
|
+ getBucketContents(_this.queryForm)
|
|
|
+ .then((res) => {
|
|
|
+ if (res.status !== 200) return;
|
|
|
+ _this.dataList = res.data.files;
|
|
|
+ _this.pageTotal = res.data.total_count;
|
|
|
+ _this.loading = false; // Set loading to false after data is processed
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ _this.loading = false; // Set loading to false if there's an error
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //修改分页
|
|
|
+ ChangePage(e) {
|
|
|
+ let _this = this;
|
|
|
+ _this.queryForm.page = e;
|
|
|
+ _this.search();
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+@import "./dataList.scss";
|
|
|
+</style>
|