caseEditor/src/view/mediaLibrary/TableComponent.vue

<template>
  <div class="mymediaLibrary">
    <!-- 表头搜索 -->
    <el-form :inline="true" :model="searchForm">
      <el-form-item class="formitem">
        <el-input
          v-model="searchForm.name"
          @input="submitClick"
          @keydown.enter="submitClick"
          :placeholder="$t('mediaLibrary.addFilePlace')"
          size="default"
          :prefix-icon="Search"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-select
          style="width: 120px"
          v-model="searchForm.fileType"
          @change="submitClick"
          :placeholder="$t('mediaLibrary.fileType.0')"
        >
          <el-option
            v-for="(item, index) in [
              $t('mediaLibrary.fileType.0'),
              $t('mediaLibrary.fileType.1'),
              $t('mediaLibrary.fileType.2'),
              $t('mediaLibrary.fileType.3'),
              $t('mediaLibrary.fileType.4'),
              $t('mediaLibrary.fileType.5'),
            ]"
            :key="index"
            :label="item"
            :value="index"
          />
        </el-select>
      </el-form-item>
      <el-form-item style="margin-right: 0px">
        <el-select
          class="groupingSelcet"
          v-model="searchForm.dictId"
          style="width: 120px"
          @change="submitClick"
          :placeholder="$t('mediaLibrary.fileType.0')"
        >
          <el-option
            v-for="(item, index) in [...allList, ...dictIdList]"
            :key="index"
            :label="item.dictName"
            :value="item.id"
          />
        </el-select>
        <div class="grouping" @click="handleAddfz">
          <img :src="groupingSvg" alt="" />
        </div>
      </el-form-item>
      <el-form-item style="float: right; margin-right: 0">
        <el-button
          @click="windowOpen({ type: 'photography', library: true })"
          >{{ $t("mediaLibrary.photography") }}</el-button
        >
        <el-button
          v-if="modeling == 1"
          @click="windowOpen({ type: 'modeling', library: true })"
          >{{ $t("mediaLibrary.Modeling") }}</el-button
        >
        <!--v-if="photography == 1" <el-button type="primary" @click="handleAddfz">{{$t('mediaLibrary.grouping')}}</el-button> -->
        <el-button type="primary" @click="handleAdd">{{
          $t("mediaLibrary.upload")
        }}</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table
      tooltip-effect="dark"
      ref="tableRef"
      size="large"
      :data="tableData"
      style="width: 100%"
      :row-class-name="tableRowClassName"
    >
      <el-table-column
        prop="name"
        :label="$t('program.case.title')"
        min-width="300px"
        show-overflow-tooltip
      >
        <template #default="scope">
          <a
            style="color: var(--primaryColor); cursor: pointer"
            v-if="scope.row.fileUrl"
            target="_blank"
            :title="scope.row.name"
            @click="floadileUrl(scope.row)"
          >
            {{ scope.row.name }}</a
          >
        </template>
      </el-table-column>
      <el-table-column
        v-for="column in columns"
        :key="column.prop"
        :prop="column.prop"
        show-overflow-tooltip
        align="center"
        :min-width="column.width"
        :label="column.label"
      ></el-table-column>
      <el-table-column
        align="center"
        :label="$t('mediaLibrary.operate')"
        width="150"
      >
        <template #default="{ row }">
          <!-- <el-button type="primary" text style="color: var(--primaryColor)" size="small" @click="handleEdit(row)">
            编辑
          </el-button> -->
          <span
            class="oper-span"
            style="color: var(--primaryColor)"
            @click="handleEdit(row)"
          >
            {{ $t("sys.edit") }}
          </span>
          <span
            class="oper-span"
            @click="del(row)"
            style="color: var(--primaryColor)"
          >
            {{ $t("sys.delete") }}
          </span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      class="mt-3"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30]"
      :page-size="pageSize"
      style="justify-content: end"
      layout="prev, pager, next"
      :total="total"
    >
    </el-pagination>
    <!-- 弹窗 -->
    <el-dialog v-model="dialogData.show" :title="dialogData.title" width="400">
      <el-form label-position="top" :model="form" label-width="110">
        <el-form-item
          v-if="dialogData.title == $t('sys.upload')"
          :label="$t('mediaLibrary.file')"
          :label-width="formLabelWidth"
        >
          <!-- <el-input v-model="addForm.name" autocomplete="off" /> -->
          <el-upload
            class="upload-demo"
            style="width: 100%"
            ref="upload"
            :multiple="false"
            :limit="1"
            :before-upload="beforeUpload"
            :on-exceed="handleExceed"
            :file-list="fileList"
            :http-request="() => {}"
            :on-preview="previewFile"
            :accept="accept"
            :before-remove="removeFile"
          >
            <el-button type="primary">
              {{ $t("sys.upload") }}
            </el-button>
          </el-upload>
        </el-form-item>
        <el-form-item
          :label="
            dialogData.title == $t('sys.upload')
              ? $t('mediaLibrary.dictName')
              : $t('mediaLibrary.setGrouping')
          "
          :label-width="formLabelWidth"
        >
          <el-select
            style="width: 100%"
            v-model="addForm.dictId"
            :placeholder="$t('mediaLibrary.tips.dictId')"
          >
            <el-option
              v-for="(item, index) in dictIdList"
              :key="index"
              :label="item.dictName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <div v-if="dialogData.title == $t('sys.upload')">
          <div style="margin-bottom: 10px">
            {{ $t("mediaLibrary.tips.uplooadfiletype")
            }}{{ $t("mediaLibrary.tips.uplooadSize") }}
          </div>
          <!-- <span>注意：模型需使用zip包上传。包含贴图、模型、mtl文件，包内不得包含文件夹。</span> -->
          <div style="margin-bottom: 10px">
            <div>
              {{ $t("mediaLibrary.tips.objtips") }}
            </div>
            <img style="width: 150px" :src="obj" alt="" />
          </div>
          <div style="margin-bottom: 10px">
            <div>
              {{ $t("mediaLibrary.tips.osgbtips") }}
            </div>
            <img style="width: 150px" :src="osgb" alt="" />
          </div>
        </div>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogData.show = false">{{
            $t("sys.cancel")
          }}</el-button>
          <el-button type="primary" @click="handleuploadAdd">
            {{ $t("sys.enter") }}
          </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 修改分组 -->
    <el-dialog
      v-model="dialogData.fzshow"
      :title="$t('mediaLibrary.grouping')"
      width="400"
    >
      <el-form label-position="top" :model="form" label-width="50">
        <el-form-item
          :label="$t('mediaLibrary.addgrouping')"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="dialogData.fzName"
            maxlength="50"
            show-word-limit
            style="width: 278px"
          />
          <el-button
            style="margin-left: 20px; width: 60px"
            @click="handlefzAdd"
            >{{ $t("common.add") }}</el-button
          >
        </el-form-item>
        <div class="itemTitle">
          <p>{{ $t("mediaLibrary.groupingList") }}</p>
          <div class="itemTitleList">
            <div class="itemTitle-list" v-if="!dictIdList?.length">
              {{ $t("program.undata") }}
            </div>
            <div
              class="itemTitle-list"
              v-for="(item, index) in dictIdList"
              :key="index"
            >
              <span class="name">{{ item.dictName }}</span>
              <span class="del" @click="hanleFzDle(item)">{{
                $t("sys.delete")
              }}</span>
            </div>
          </div>
        </div>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogData.fzshow = false">{{
            $t("sys.cancel")
          }}</el-button>
          <el-button type="primary" @click="dialogData.fzshow = false">
            {{ $t("sys.enter") }}
          </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- //查看资源下载 -->
    <el-dialog
      v-model="dialogDowm.show"
      :title="$t('sys.query')"
      :width="dialogDowm.type == 4 ? 800 : 600"
      @close="handleClose"
    >
      <div class="showContent">
        <img
          style="width: 100%; object-fit: cover"
          :src="dialogDowm.url"
          alt=""
          v-if="dialogDowm.type == 0"
        />
        <video
          ref="audio"
          controls
          style="width: 100%; max-height: 300px"
          :style="{ height: dialogDowm.type == 2 ? '50px' : 'auto' }"
          :src="dialogDowm.url"
          alt=""
          v-else-if="dialogDowm.type == 1 || dialogDowm.type == 2"
        />
        <iframe
          style="width: 100%; height: 400px"
          v-else
          :src="dialogDowm.url"
          frameborder="0"
        ></iframe>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogDowm.show = false">{{
            $t("sys.cancel")
          }}</el-button>
          <el-button
            v-if="dialogDowm.type == 0"
            type="primary"
            @click="hanleDown"
          >
            {{$t("sys.download")}}
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { Search } from "@element-plus/icons-vue";
import { ref, watch, onMounted } from "vue";
import {
  getByKeyList,
  getfzdel,
  getdictFiledel,
  getaddOrUpdate,
  setFileaddOrUpdate,
  uploadFile,
  getUrlSrc,
} from "@/store/case";
import dayjs from "dayjs";
import obj from "@/assets/images/obj.jpg";
import osgb from "@/assets/images/osgb.jpg";
import { ElMessage, ElMessageBox, genFileId } from "element-plus";
import { ui18n } from "@/i18n";
import { windowOpen } from "@/util";
import groupingSvg from "@/assets/images/grouping.svg";
import { ElLoading } from "element-plus";

// 定义 props
const props = defineProps({
  columns: {
    type: Array,
    default: () => [],
  },
  searchColumns: {
    type: Array,
    default: () => [],
  },
  getData: {
    type: Function,
    required: true,
  },
});
// 定义响应式数据
const searchForm = ref({
  name: "",
  fileType: 0,
  dictId: "0",
});
const addForm = ref({
  fileType: "",
  dictId: "",
  name: "",
});
const dialogDowm = ref({
  show: false,
  url: "",
  type: "",
  data: {},
});
const dialogData = ref({
  show: false,
  title: ui18n.t("sys.upload"),
  data: {},
  fzshow: false,
  fzName: "",
  fzList: [],
});
const upload = ref(null);
const file = ref(null);
const audio = ref(null);
const loadingText = ref("0%");

const accept = ".jpg,.png,.jpeg,.mp4,.wav,.mp3,.shp,.zip";
const handleClose = () => {
  console.log("handleClose", audio.value);
  if (audio.value) {
    audio.value.pause();
  }
};
const hanleFzDle = (item) => {
  ElMessageBox.confirm(
    ui18n.t("mediaLibrary.tips.deltext"),
    ui18n.t("sys.dialogTitle"),
    {
      confirmButtonText: ui18n.t("sys.enter"),
      cancelButtonText: ui18n.t("sys.cancel"),
    }
  ).then(async () => {
    await getfzdel(item);
    dictIdList.value = dictIdList.value.filter((item1) => item1.id !== item.id);
    searchForm.value.dictId = "0";
    initData();
    ElMessage({
      type: "success",
      message: ui18n.t("mediaLibrary.tips.del"),
    });
  });

  console.log("upload", file);
};
const previewFile = (file) => {
  console.log("previewFile", file);
};
const handleEdit = (data) => {
  addForm.value.dictId = data.dictId;
  console.log("data", data, addForm.value);

  dialogData.value = {
    show: true,
    title: ui18n.t("mediaLibrary.setGrouping"),
    data,
  };
};

const removeFile = () => {
  return true;
};
const handleAdd = () => {
  fileList.value = [];
  addForm.value.dictId = "";
  dialogData.value.title = ui18n.t("sys.upload");
  setTimeout(() => {
    dialogData.value.show = true;
  }, 100);
};
const handlefzAdd = async () => {
  let params = {
    dictName: dialogData.value.fzName?.trim(),
  };
  if (!params.dictName) {
    return ElMessage.error(ui18n.t("mediaLibrary.tips.placeholderName"));
  }
  await getaddOrUpdate(params);
  ElMessage({
    type: "success",
    message: ui18n.t("mediaLibrary.tips.add"),
  });
  getFzlist();
  dialogData.value.fzName = "";
};
const handleAddfz = () => {
  dialogData.value.fzshow = true;
};

const handleuploadAdd = async () => {
  console.log("formData", dialogData.value.title);
  if (dialogData.value.title != ui18n.t("sys.upload")) {
    if (!addForm.value.dictId)
      return ElMessage.error(ui18n.t("mediaLibrary.tips.dictId"));
    await setFileaddOrUpdate({
      id: dialogData.value.data?.id,
      dictId: addForm.value.dictId,
    });
    initData();
    dialogData.value.show = false;
    dialogData.value.title = "";
    ElMessage({
      type: "success",
      message: ui18n.t("mediaLibrary.tips.operate"),
    });
  } else {
    const formData = new FormData();
    const file = fileList.value && fileList.value[0];
    if (!file) return ElMessage.error(ui18n.t("common.NoFilesSelected"));
    formData.append("file", file);
    formData.append("dictId", addForm.value.dictId);
    console.log(file, formData, "formData");
    const loading = ElLoading.service({
      lock: true,
      text: loadingText.value,
      background: "rgba(0, 0, 0, 0.7)",
    });
    uploadFile({ file, dictId: addForm.value.dictId }, (completeProgress) => {
      console.log("上传进度", completeProgress);
      // props.progress = completeProgress; //上传过程
      loadingText.value = completeProgress + "%";
      loading.setText(loadingText.value)
    }).then((res) => {
      loading.close();
      console.log("上传进度", res);
      if (res.data?.status == 1) {
        initData();
        dialogData.value.show = false;
        ElMessage({
          type: "success",
          message: ui18n.t("mediaLibrary.tips.uplooadSuccess"),
        });
      } else {
        ElMessage.error(ui18n.t("mediaLibrary.tips.uplooadErr"));
      }
    });
    console.log(formData);
  }
};
// 定义方法
const del = (row) => {
  console.log(file, "file");
  ElMessageBox.confirm(
    ui18n.t("mediaLibrary.tips.deltext"),
    ui18n.t("sys.dialogTitle"),
    {
      confirmButtonText: ui18n.t("sys.enter"),
      cancelButtonText: ui18n.t("sys.cancel"),
    }
  ).then(async () => {
    await getdictFiledel({ id: row.id });
    initData();
    ElMessage({
      type: "success",
      message: ui18n.t("mediaLibrary.tips.del"),
    });
  });
};
const allList = ref([
  { dictName: ui18n.t("mediaLibrary.fileType.0"), id: "0" },
]);
const dictIdList = ref([]);
const tableData = ref([]);
const fileList = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
onMounted(() => {
  // document.body.classList.toggle("dark-mode");
});
const getFzlist = () => {
  getByKeyList({}).then((res) => {
    console.log("getByKeyList", res);
    dictIdList.value = res;
  });
};
getFzlist();
const submitClick = () => {
  console.log("submitClick", searchForm.value);
  currentPage.value = 1;
  initData();
};
const tableRowClassName = ({ row, rowIndex }) => {
  if (rowIndex === 1) {
    return "warning-row";
  } else if (rowIndex === 3) {
    return "success-row";
  }
  return "";
};

// 初始化数据
const initData = async () => {
  const { list, totalCount } = await props.getData({
    ...searchForm.value,
    fileType:
      searchForm.value.fileType == 0 ? "" : searchForm.value.fileType - 1,
    dictId: searchForm.value.dictId == 0 ? "" : searchForm.value.dictId,
    pageNum: currentPage.value,
    pageSize: pageSize.value,
  });
  tableData.value = list.map((res) => {
    return {
      ...res,
      statusStr:
        res.status == -1
          ? ui18n.t("mediaLibrary.tips.uplooadErr")
          : res.status == 0
          ? ui18n.t("mediaLibrary.tips.uplooad")
          : ui18n.t("mediaLibrary.tips.uplooadSuccess"),
      createTime: dayjs(res.createTime).format("YYYY-MM-DD HH:mm:ss"),
    };
  });
  total.value = totalCount;
};
const floadileUrl = (record) => {
  dialogDowm.value.type = record.fileType;
  dialogDowm.value.data = record;
  if (record.fileType == 3) {
    // let url = `/code/index.html?title=${record.fileName}&type=${record.fileFormat}&fileUrl=${record.fileUrl}#/sign-model`;
    dialogDowm.value.url = getUrlSrc({ ...record, type: 101 });
    dialogDowm.value.show = true;
    // return windowOpen({url: dialogDowm.value.url, library: true});
  } else if (
    record.fileType == 2 ||
    record.fileType == 1 ||
    record.fileType == 0
  ) {
    dialogDowm.value.url = getUrlSrc({ type: 102 }) + "/" + record.fileUrl;
    dialogDowm.value.show = true;
    // return windowOpen({url: record.fileUrl, library: true});
  } else {
    hanleDown();
  }
};
const handleExceed = (files) => {
  const file = files[0];
  if (!beforeUpload(file)) {
    return false;
  }
  upload.value && upload.value.clearFiles();
  file.uid = genFileId();
  upload.value && upload.value.handleStart(file);
};
const beforeUpload = (file) => {
  console.log("beforeUpload", file);
  const filetype = file.name
    .substring(file.name.lastIndexOf(".") + 1)
    .toLowerCase();
  const isExcel = [
    "jpg",
    "jpg",
    "png",
    "jpeg",
    "mp4",
    "wav",
    "mp3",
    "shp",
    "zip",
  ].includes(filetype); // 调用上面代码
  if (!isExcel) {
    ElMessage.error(ui18n.t("mediaLibrary.tips.uplooadfiletype"));
    fileList.value = [];
    return false;
  }
  const isLt10M = file.size / 1024 / 1024 < 2000;
  if (!isLt10M) {
    fileList.value = [];
    ElMessage.error(ui18n.t("mediaLibrary.tips.uplooadSize"));
    return false;
  }
  fileList.value = [file];
  return true;
};
// 监听搜索表单变化
watch(searchForm, () => {
  currentPage.value = 1;
  initData();
});

// 处理分页大小变化
const handleSizeChange = (newSize) => {
  pageSize.value = newSize;
  initData();
};

// 处理当前页码变化
const handleCurrentChange = (newPage) => {
  currentPage.value = newPage;
  initData();
};
// 下载资源
const hanleDown = () => {
  const item = dialogDowm.value.data;
  const a = document.createElement("a");
  a.href = dialogDowm.value.url;
  a.download = `${item.name}.${item.fileFormat}`; // 下载后的文件名
  a.click();
  a.remove();
};
// 处理搜索按钮点击
const handleSearch = () => {
  currentPage.value = 1;
  initData();
};

// 重置搜索表单
const resetSearch = () => {
  Object.keys(searchForm.value).forEach((key) => {
    searchForm.value[key] = "";
  });
  currentPage.value = 1;
  initData();
};

// 初始化数据
initData();
</script>

<style lang="scss">
.upload-demo .el-upload-list__item.is-success:focus:not(:hover){
            display: none !important;
        }
.mb-3 {
  margin-bottom: 1rem;
}
.mt-3 {
  margin-top: 1rem;
}
.mymediaLibrary {
  background-color: #292929;
  text-align: left;
  .grouping {
    padding: 7px 10px;
    background-color: var(--el-fill-color-blank);
    box-shadow: 0 0 0 1px var(--el-border-color);
    border-radius: 0 4px 4px 0;
    opacity: 0.7;
    cursor: pointer;
    &:hover {
      box-shadow: 0 0 0 1px #6c6e72;
      opacity: 1;
    }
  }
  .groupingSelcet {
    .el-select__wrapper {
      border-radius: 4px 0 0 4px;
    }
  }
  .el-form--inline .el-form-item {
    margin-right: 20px;
  }
  .itemTitle {
    width: 100%;
    margin: 0 0 10px 0;
    .itemTitleList {
      margin-top: 10px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 4px 4px 4px 4px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      max-height: 240px;
      overflow-y: scroll;
      ::-webkit-scrollbar {
        display: none; /* Chrome Safari */
      }
    }
    .itemTitle-list {
      padding-left: 10px;
      line-height: 34px;
      display: flex;
      justify-content: space-between;
      position: relative;
      cursor: pointer;
      .name {
        width: 350px;
        overflow: hidden; //超出的文本隐藏
        text-overflow: ellipsis; //溢出用省略号显示
        white-space: nowrap; //溢出不换行
      }
      .del {
        color: #FA3D47;
        // width: 40px;

        cursor: pointer;
      }
    }
  }
}
.showContent {
  iframe {
    body:-webkit-full-page-media {
      background-color: none;
    }
  }
}
.el-pager li.is-active {
  border: 1px solid var(--el-color-primary);
  background-color: none;
}
</style>