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"
          @change="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  @click="windowOpen({type: 'modeling', library: true})">{{$t('mediaLibrary.Modeling')}}</el-button>
        <!-- <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">
        <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="文件"
          :label-width="formLabelWidth"
        >
          <!-- <el-input v-model="addForm.name" autocomplete="off" /> -->
          <el-upload
            class="upload-demo"
            style="width: 100%"
            :multiple="false"
            :limit="1"
            :before-upload="beforeUpload"
            :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="100" 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-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="资源查看" :width="dialogDowm.type == 4?800:600">
    <div class="showContent">
      <img style="width: 100%;object-fit: cover;" :src="dialogDowm.url" alt="" v-if="dialogDowm.type == 0"/>
      <video controls style="width: 100%;object-fit: cover;" :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">
            下载
          </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 } from "element-plus";
import { ui18n } from '@/i18n'
import { windowOpen } from "@/util";
import { getUrlData } from "@/store/user";
import groupingSvg from "@/assets/images/grouping.svg";

// 定义 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 file = ref(null);
const accept = ".jpg,.png,.jpeg,.mp4,.wav,.mp3,.shp";
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)
    ElMessage({
      type: "success",
      message: ui18n.t('mediaLibrary.tips.del'),
    });
  });
  

  console.log("upload", file);
};
const { photography, modeling } = getUrlData()
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 = () => {
  addForm.value.dictId = '';
  addForm.value.dictId = '';
  fileList.value = [];
  dialogData.value = {
    show: true,
    title: ui18n.t('sys.upload')
  };
};
const handlefzAdd = async () => {
  let params = {
    dictName: dialogData.value.fzName,
  };
  if (!params.dictName) {
    return ElMessage.error(ui18n.t('mediaLibrary.tips.placeholderName'));
  }
  await getaddOrUpdate(params);
  ElMessage({
    type: "success",
    message: ui18n.t('mediaLibrary.tips.placeholderName'),
  });
  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')){
    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();
    formData.append("file", fileList.value && fileList.value[0]);
    formData.append("dictId", addForm.value.dictId);
    uploadFile(formData).then((res) => {
    console.log(res);
    if (res) {
      initData();
      dialogData.value.show = false;
      ElMessage({
        type: "success",
        message: ui18n.t('mediaLibrary.tips.uplooadSuccess'),
      });
    }
  });
    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.show = true;
  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});
    return windowOpen({url, library: true});
  } else {
    dialogDowm.value.url = getUrlSrc({type: 102}) +'/'+ record.fileUrl;
    // return windowOpen({url: record.fileUrl, library: true});
  }
};
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) {
          createMessage.error(ui18n.t('mediaLibrary.tips.uplooadfiletype'));
          fileList.value = [];
          return false;
        }
        const isLt10M = file.size / 1024 / 1024 < 2000;
        if (!isLt10M) {
          fileList.value = [];
          createMessage.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">
:root {
  // --el-bg-color: #151515;
  // --colorColor: #fff;
}
// /* 覆盖 Element Plus 的 CSS 变量 */
// --el-color-primary: #1890ff;
// --el-bg-color: #141414;
// --el-text-color-primary: #ffffff;
// /* 可以根据需要覆盖更多变量 */
.mb-3 {
  margin-bottom: 1rem;
}
.mt-3 {
  margin-top: 1rem;
}
.mymediaLibrary {
  background-color: #292929;
  text-align: left;
  // .el-form-item{
  //   margin-bottom: 30px;
  // }
  // .el-table th.el-table__cell{
  //   background-color: #1d1d1d;
  //   color: #fff;
  // }
  // width: 100%;
  // --el-input-bg-color: #535353;
  // .el-table{
  //   background-color: #535353;
  // }
  .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;
  }
  // .el-form-item, .el-select__wrapper{
  //   background-color: #535353;
  // }
  // .el-input__wrapper, .el-select__wrapper{
  //   background-color: #535353;
  //   box-shadow: none;
  // }
  // .el-input__inner, .el-select__selected-item{
  //   color: #fff;
  // }
  //     /* 局部修改具有 custom-table 类名的 el-table 的背景颜色 */
  //     .custom-table.el-table {
  //     background-color: #535353;
  //   }

  //   /* 修改表头背景颜色 */
  //   .custom-table.el-table__header-wrapper th {
  //     background-color: #535353;
  //   }

  //   /* 修改表格行的背景颜色 */
  //   .el-table tr {
  //     background-color: #535353;
  //   }

  //   /* 修改表格行悬停时的背景颜色 */
  //   .custom-table.el-table__body tr:hover>td {
  //     background-color: #535353;
  //   }
  //   .el-table th.el-table__cell{
  //     background-color: #1d1d1d
  //   }
  //   .el-table .el-table__cell{
  //     border-color: #303030 !important;
  //   }
  //   .el-table--fit .el-table__inner-wrapper:before{
  //     background-color: none;
  //   }
  //   .el-table .warning-row {
  //     --el-table-tr-bg-color: var(--el-color-warning-light-9);
  //   }
  //   .el-table .success-row {
  //     --el-table-tr-bg-color: var(--el-color-success-light-9);
  //   }
  .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: red;
        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>