From c143ba52d9f16c9e0a7b341e9e82b4132ccf4dc8 Mon Sep 17 00:00:00 2001
From: jacky <phpcrazy@163.com>
Date: Wed, 8 May 2024 21:40:53 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=A0=E9=99=A4=E4=B8=8D=E9=9C=80=E8=A6=81?=
 =?UTF-8?q?=E7=9A=84=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/selectImage/selectImage.vue | 365 ---------------------
 src/view/example/customer/customer.vue     | 232 -------------
 src/view/example/upload/upload.vue         | 247 --------------
 3 files changed, 844 deletions(-)
 delete mode 100644 src/components/selectImage/selectImage.vue
 delete mode 100644 src/view/example/customer/customer.vue
 delete mode 100644 src/view/example/upload/upload.vue

diff --git a/src/components/selectImage/selectImage.vue b/src/components/selectImage/selectImage.vue
deleted file mode 100644
index 2caa71e..0000000
--- a/src/components/selectImage/selectImage.vue
+++ /dev/null
@@ -1,365 +0,0 @@
-<template>
-  <div>
-    <div v-if="!multiple" class="update-image" :style="{
-      'background-image': `url(${getUrl(model)})`,
-      'position': 'relative',
-    }">
-      <el-icon v-if="isVideoExt(model || '')" :size="32" class="video video-icon" style="">
-        <VideoPlay />
-      </el-icon>
-      <video v-if="isVideoExt(model || '')" class="avatar video-avatar video" muted preload="metadata" style=""
-        @click="openChooseImg">
-        <source :src="getUrl(model) + '#t=1'">
-      </video>
-      <span v-if="model" class="update" style="position: absolute;" @click="openChooseImg">
-        <el-icon>
-          <delete />
-        </el-icon>
-        删除</span>
-      <span v-else class="update text-gray-600" @click="openChooseImg">
-        <el-icon>
-          <plus />
-        </el-icon>
-        上传</span>
-    </div>
-    <div v-else class="multiple-img">
-      <div v-for="(item, index) in multipleValue" :key="index" class="update-image" :style="{
-      'background-image': `url(${getUrl(item)})`,
-      'position': 'relative',
-    }">
-        <el-icon v-if="isVideoExt(item || '')" :size="32" class="video video-icon">
-          <VideoPlay />
-        </el-icon>
-        <video v-if="isVideoExt(item || '')" class="avatar video-avatar video" muted preload="metadata"
-          @click="deleteImg(index)">
-          <source :src="getUrl(item) + '#t=1'">
-        </video>
-        <span class="update" style="position: absolute;" @click="deleteImg(index)">
-          <el-icon>
-            <delete />
-          </el-icon>
-          删除</span>
-      </div>
-      <div v-if="!maxUpdateCount || maxUpdateCount > multipleValue.length" class="add-image">
-        <span class="update  text-gray-600" @click="openChooseImg">
-          <el-icon>
-            <Plus />
-          </el-icon>
-          上传</span>
-      </div>
-    </div>
-    <el-drawer v-model="drawer" title="媒体库" size="740px" direction="ltr">
-      <div class="gva-btn-list" style="width:100%">
-        <upload-common :image-common="imageCommon" class="upload-btn-media-library" @on-success="getImageList"
-          :category="props.category" />
-        <upload-image :image-url="imageUrl" :file-size="512" :max-w-h="1080" class="upload-btn-media-library"
-          :category="props.category" @on-success="getImageList" />
-        <el-input v-model="search.keyword" class="keyword" placeholder="请输入文件名或备注" clearable style="width: 390px;" />
-        <el-button type="primary" icon="search" @click="getImageList">查询</el-button>
-      </div>
-      <warning-bar title="点击“文件名/备注”可以编辑文件名或者备注内容。" style="width: 680px" />
-      <div class="gva-media-card">
-        <div v-for="(item, key) in picList" :key="key" class="media-box">
-          <div class="header-img-box-list">
-            <el-image :key="key" :src="getUrl(item.url)" fit="contain" style="width: 100%;height: 100%;"
-              @click="chooseImg(item.url)">
-              <template #error>
-                <el-icon v-if="isVideoExt(item.url || '')" :size="32" class="video video-icon">
-                  <VideoPlay />
-                </el-icon>
-                <video v-if="isVideoExt(item.url || '')" class="avatar video-avatar video" muted preload="metadata"
-                  @click="chooseImg(item.url)">
-                  <source :src="getUrl(item.url) + '#t=1'">
-                  您的浏览器不支持视频播放
-                </video>
-                <div v-else class="header-img-box-list">
-                  <el-icon class="lost-image">
-                    <icon-picture />
-                  </el-icon>
-                </div>
-              </template>
-            </el-image>
-          </div>
-          <div class="img-title" @click="editFileNameFunc(item)">{{ item.name }}
-          </div>
-        </div>
-      </div>
-      <el-pagination :current-page="page" :page-size="pageSize" :total="total" :style="{ 'justify-content': 'center' }"
-        layout="total, prev, pager, next, jumper" @current-change="handleCurrentChange"
-        @size-change="handleSizeChange" />
-    </el-drawer>
-  </div>
-</template>
-
-<script setup>
-
-import { getUrl, isVideoExt } from '@/utils/image'
-import { onMounted, ref } from 'vue'
-import { getFileList, editFileName } from '@/api/mediaFile'
-import UploadImage from '@/components/upload/image.vue'
-import UploadCommon from '@/components/upload/common.vue'
-import WarningBar from '@/components/warningBar/warningBar.vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import { Delete, Plus, Picture as IconPicture } from '@element-plus/icons-vue'
-
-const imageUrl = ref('')
-const imageCommon = ref('')
-
-const search = ref({})
-const page = ref(1)
-const total = ref(0)
-const pageSize = ref(30)
-
-const model = defineModel({ type: [String, Array] })
-
-const props = defineProps({
-  multiple: {
-    type: Boolean,
-    default: false
-  },
-  fileType: {
-    type: String,
-    default: ''
-  },
-  maxUpdateCount: {
-    type: Number,
-    default: 0
-  },
-  category: {
-    type: String,
-    required: true
-  }
-})
-const multipleValue = ref([])
-
-onMounted(() => {
-  if (props.multiple) {
-    multipleValue.value = model.value
-  }
-})
-const deleteImg = (index) => {
-  multipleValue.value.splice(index, 1)
-  model.value = multipleValue.value
-}
-
-// 分页
-const handleSizeChange = (val) => {
-  pageSize.value = val
-  getImageList()
-}
-
-const handleCurrentChange = (val) => {
-  page.value = val
-  getImageList()
-}
-const editFileNameFunc = async (row) => {
-  ElMessageBox.prompt('请输入文件名或者备注', '编辑', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    inputPattern: /\S/,
-    inputErrorMessage: '不能为空',
-    inputValue: row.name
-  }).then(async ({ value }) => {
-    row.name = value
-    // console.log(row)
-    const res = await editFileName(row)
-    if (res.code === 0) {
-      ElMessage({
-        type: 'success',
-        message: '编辑成功!',
-      })
-      getImageList()
-    }
-  }).catch(() => {
-    ElMessage({
-      type: 'info',
-      message: '取消修改'
-    })
-  })
-}
-
-const drawer = ref(false)
-const picList = ref([])
-
-const imageTypeList = ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'webp']
-const videoTyteList = ['mp4', 'avi', 'rmvb', 'rm', 'asf', 'divx', 'mpg', 'mpeg', 'mpe', 'wmv', 'mkv', 'vob']
-
-const listObj = {
-  image: imageTypeList,
-  video: videoTyteList
-}
-
-const chooseImg = (url) => {
-  if (props.fileType) {
-    const typeSuccess = listObj[props.fileType].some(item => {
-      if (url.includes(item)) {
-        return true
-      }
-    })
-    if (!typeSuccess) {
-      ElMessage({
-        type: 'error',
-        message: '当前类型不支持使用'
-      })
-      return
-    }
-  }
-  if (props.multiple) {
-    multipleValue.value.push(url)
-    model.value = multipleValue.value
-  } else {
-    model.value = url
-  }
-  drawer.value = false
-}
-const openChooseImg = async () => {
-  if (model.value && !props.multiple) {
-    model.value = ''
-    return
-  }
-  await getImageList()
-  drawer.value = true
-}
-
-const getImageList = async () => {
-  const res = await getFileList({ page: page.value, pageSize: pageSize.value, ...search.value })
-  if (res.code === 0) {
-    picList.value = res.data.list
-    total.value = res.data.total
-    page.value = res.data.page
-    pageSize.value = res.data.pageSize
-  }
-}
-
-</script>
-
-<style scoped lang="scss">
-.multiple-img {
-  display: flex;
-  gap: 8px;
-  width: 100%;
-  flex-wrap: wrap;
-}
-
-.add-image {
-  width: 120px;
-  height: 120px;
-  line-height: 120px;
-  display: flex;
-  justify-content: center;
-  border-radius: 20px;
-  border: 1px dashed #ccc;
-  background-size: cover;
-  cursor: pointer;
-}
-
-.update-image {
-  cursor: pointer;
-  width: 120px;
-  height: 120px;
-  line-height: 120px;
-  display: flex;
-  justify-content: center;
-  border-radius: 20px;
-  border: 1px solid #ccc;
-  background-repeat: no-repeat;
-  background-size: cover;
-  position: relative;
-
-  &:hover {
-    color: #fff;
-    background: linear-gradient(to bottom,
-        rgba(255, 255, 255, 0.15) 0%,
-        rgba(0, 0, 0, 0.15) 100%),
-      radial-gradient(at top center,
-        rgba(255, 255, 255, 0.4) 0%,
-        rgba(0, 0, 0, 0.4) 120%) #989898;
-    background-blend-mode: multiply, multiply;
-    background-size: cover;
-
-    .update {
-      color: #fff;
-    }
-
-    .video {
-      opacity: 0.2;
-    }
-  }
-
-  .video-icon {
-    position: absolute;
-    left: calc(50% - 16px);
-    top: calc(50% - 16px);
-  }
-
-  video {
-    object-fit: cover;
-    max-width: 100%;
-    border-radius: 20px;
-  }
-
-  .update {
-    height: 120px;
-    width: 120px;
-    text-align: center;
-    color: transparent;
-    position: absolute;
-  }
-}
-
-.media {
-  display: flex;
-  flex-wrap: wrap;
-
-  .media-box {
-    width: 120px;
-    margin-right: 20px;
-    margin-bottom: 20px;
-
-    .img-title {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      line-height: 36px;
-      text-align: center;
-      cursor: pointer;
-    }
-
-    .header-img-box-list {
-      width: 120px;
-      height: 120px;
-      border: 1px solid #ccc;
-      border-radius: 8px;
-      text-align: center;
-      line-height: 120px;
-      cursor: pointer;
-      overflow: hidden;
-
-      .el-image__inner {
-        max-width: 120px;
-        max-height: 120px;
-        vertical-align: middle;
-        width: unset;
-        height: unset;
-      }
-
-      .el-image {
-        position: relative;
-      }
-
-      .video-icon {
-        position: absolute;
-        left: calc(50% - 16px);
-        top: calc(50% - 16px);
-      }
-
-      video {
-        object-fit: cover;
-        max-width: 100%;
-        min-height: 100%;
-        border-radius: 8px;
-      }
-    }
-  }
-}
-</style>
diff --git a/src/view/example/customer/customer.vue b/src/view/example/customer/customer.vue
deleted file mode 100644
index fda75ee..0000000
--- a/src/view/example/customer/customer.vue
+++ /dev/null
@@ -1,232 +0,0 @@
-<template>
-  <div>
-    <warning-bar title="在资源权限中将此角色的资源权限清空 或者不包含创建者的角色 即可屏蔽此客户资源的显示" />
-    <div class="gva-table-box">
-      <div class="gva-btn-list">
-        <el-button
-          type="primary"
-          icon="plus"
-          @click="openDialog"
-        >新增</el-button>
-      </div>
-      <el-table
-        ref="multipleTable"
-        :data="tableData"
-        style="width: 100%"
-        tooltip-effect="dark"
-        row-key="ID"
-      >
-        <el-table-column
-          type="selection"
-          width="55"
-        />
-        <el-table-column
-          align="left"
-          label="接入日期"
-          width="180"
-        >
-          <template #default="scope">
-            <span>{{ formatDate(scope.row.CreatedAt) }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column
-          align="left"
-          label="姓名"
-          prop="customerName"
-          width="120"
-        />
-        <el-table-column
-          align="left"
-          label="电话"
-          prop="customerPhoneData"
-          width="120"
-        />
-        <el-table-column
-          align="left"
-          label="接入人ID"
-          prop="sysUserId"
-          width="120"
-        />
-        <el-table-column
-          align="left"
-          label="操作"
-          min-width="160"
-        >
-          <template #default="scope">
-            <el-button
-              type="primary"
-              link
-              icon="edit"
-              @click="updateCustomer(scope.row)"
-            >变更</el-button>
-            <el-button
-              type="primary"
-              link
-              icon="delete"
-              @click="deleteCustomer(scope.row)"
-            >删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <div class="gva-pagination">
-        <el-pagination
-          :current-page="page"
-          :page-size="pageSize"
-          :page-sizes="[10, 30, 50, 100]"
-          :total="total"
-          layout="total, sizes, prev, pager, next, jumper"
-          @current-change="handleCurrentChange"
-          @size-change="handleSizeChange"
-        />
-      </div>
-    </div>
-    <el-dialog
-      v-model="dialogFormVisible"
-      :before-close="closeDialog"
-      title="客户"
-    >
-      <el-form
-        :inline="true"
-        :model="form"
-        label-width="80px"
-      >
-        <el-form-item label="客户名">
-          <el-input
-            v-model="form.customerName"
-            autocomplete="off"
-          />
-        </el-form-item>
-        <el-form-item label="客户电话">
-          <el-input
-            v-model="form.customerPhoneData"
-            autocomplete="off"
-          />
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button @click="closeDialog">取 消</el-button>
-          <el-button
-            type="primary"
-            @click="enterDialog"
-          >确 定</el-button>
-        </div>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-
-<script setup>
-import {
-  createExaCustomer,
-  updateExaCustomer,
-  deleteExaCustomer,
-  getExaCustomer,
-  getExaCustomerList
-} from '@/api/customer'
-import WarningBar from '@/components/warningBar/warningBar.vue'
-import { ref } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import { formatDate } from '@/utils/format'
-
-defineOptions({
-  name: 'Customer'
-})
-
-const form = ref({
-  customerName: '',
-  customerPhoneData: ''
-})
-
-const page = ref(1)
-const total = ref(0)
-const pageSize = ref(10)
-const tableData = ref([])
-
-// 分页
-const handleSizeChange = (val) => {
-  pageSize.value = val
-  getTableData()
-}
-
-const handleCurrentChange = (val) => {
-  page.value = val
-  getTableData()
-}
-
-// 查询
-const getTableData = async() => {
-  const table = await getExaCustomerList({ page: page.value, pageSize: pageSize.value })
-  if (table.code === 0) {
-    tableData.value = table.data.list
-    total.value = table.data.total
-    page.value = table.data.page
-    pageSize.value = table.data.pageSize
-  }
-}
-
-getTableData()
-
-const dialogFormVisible = ref(false)
-const type = ref('')
-const updateCustomer = async(row) => {
-  const res = await getExaCustomer({ ID: row.ID })
-  type.value = 'update'
-  if (res.code === 0) {
-    form.value = res.data.customer
-    dialogFormVisible.value = true
-  }
-}
-const closeDialog = () => {
-  dialogFormVisible.value = false
-  form.value = {
-    customerName: '',
-    customerPhoneData: ''
-  }
-}
-const deleteCustomer = async(row) => {
-  ElMessageBox.confirm('确定要删除吗?', '提示', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning'
-  }).then(async() => {
-    const res = await deleteExaCustomer({ ID: row.ID })
-    if (res.code === 0) {
-      ElMessage({
-        type: 'success',
-        message: '删除成功'
-      })
-      if (tableData.value.length === 1 && page.value > 1) {
-        page.value--
-      }
-      getTableData()
-    }
-  })
-}
-const enterDialog = async() => {
-  let res
-  switch (type.value) {
-    case 'create':
-      res = await createExaCustomer(form.value)
-      break
-    case 'update':
-      res = await updateExaCustomer(form.value)
-      break
-    default:
-      res = await createExaCustomer(form.value)
-      break
-  }
-
-  if (res.code === 0) {
-    closeDialog()
-    getTableData()
-  }
-}
-const openDialog = () => {
-  type.value = 'create'
-  dialogFormVisible.value = true
-}
-
-</script>
-
-<style></style>
diff --git a/src/view/example/upload/upload.vue b/src/view/example/upload/upload.vue
deleted file mode 100644
index 8ffe123..0000000
--- a/src/view/example/upload/upload.vue
+++ /dev/null
@@ -1,247 +0,0 @@
-<template>
-  <div v-loading.fullscreen.lock="fullscreenLoading">
-    <div class="gva-table-box">
-      <warning-bar
-        title="点击“文件名/备注”可以编辑文件名或者备注内容。"
-      />
-      <div class="gva-btn-list">
-        <upload-common
-          :image-common="imageCommon"
-          @on-success="getTableData"
-        />
-        <upload-image
-          :image-url="imageUrl"
-          :file-size="512"
-          :max-w-h="1080"
-          @on-success="getTableData"
-        />
-        <el-input
-          v-model="search.keyword"
-          class="keyword"
-          placeholder="请输入文件名或备注"
-        />
-        <el-button
-          type="primary"
-          icon="search"
-          @click="getTableData"
-        >查询</el-button>
-      </div>
-
-      <el-table :data="tableData">
-        <el-table-column
-          align="left"
-          label="预览"
-          width="100"
-        >
-          <template #default="scope">
-            <CustomPic
-              pic-type="file"
-              :pic-src="scope.row.url"
-              preview
-            />
-          </template>
-        </el-table-column>
-        <el-table-column
-          align="left"
-          label="日期"
-          prop="UpdatedAt"
-          width="180"
-        >
-          <template #default="scope">
-            <div>{{ formatDate(scope.row.UpdatedAt) }}</div>
-          </template>
-        </el-table-column>
-        <el-table-column
-          align="left"
-          label="文件名/备注"
-          prop="name"
-          width="180"
-        >
-          <template #default="scope">
-            <div
-              class="name"
-              @click="editFileNameFunc(scope.row)"
-            >{{ scope.row.name }}</div>
-          </template>
-        </el-table-column>
-        <el-table-column
-          align="left"
-          label="链接"
-          prop="url"
-          min-width="300"
-        />
-        <el-table-column
-          align="left"
-          label="标签"
-          prop="tag"
-          width="100"
-        >
-          <template #default="scope">
-            <el-tag
-              :type="scope.row.tag === 'jpg' ? 'info' : 'success'"
-              disable-transitions
-            >{{ scope.row.tag }}
-            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column
-          align="left"
-          label="操作"
-          width="160"
-        >
-          <template #default="scope">
-            <el-button
-              icon="download"
-              type="primary"
-              link
-              @click="downloadFile(scope.row)"
-            >下载</el-button>
-            <el-button
-              icon="delete"
-              type="primary"
-              link
-              @click="deleteFileFunc(scope.row)"
-            >删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <div class="gva-pagination">
-        <el-pagination
-          :current-page="page"
-          :page-size="pageSize"
-          :page-sizes="[10, 30, 50, 100]"
-          :style="{ float: 'right', padding: '20px' }"
-          :total="total"
-          layout="total, sizes, prev, pager, next, jumper"
-          @current-change="handleCurrentChange"
-          @size-change="handleSizeChange"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { getFileList, deleteFile, editFileName } from '@/api/fileUploadAndDownload'
-import { downloadImage } from '@/utils/downloadImg'
-import CustomPic from '@/components/customPic/index.vue'
-import UploadImage from '@/components/upload/image.vue'
-import UploadCommon from '@/components/upload/common.vue'
-import { formatDate } from '@/utils/format'
-import WarningBar from '@/components/warningBar/warningBar.vue'
-
-import { ref } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-
-defineOptions({
-  name: 'Upload',
-})
-
-const path = ref(import.meta.env.VITE_BASE_API)
-
-const imageUrl = ref('')
-const imageCommon = ref('')
-
-const page = ref(1)
-const total = ref(0)
-const pageSize = ref(10)
-const search = ref({})
-const tableData = ref([])
-
-// 分页
-const handleSizeChange = (val) => {
-  pageSize.value = val
-  getTableData()
-}
-
-const handleCurrentChange = (val) => {
-  page.value = val
-  getTableData()
-}
-
-// 查询
-const getTableData = async() => {
-  const table = await getFileList({ page: page.value, pageSize: pageSize.value, ...search.value })
-  if (table.code === 0) {
-    tableData.value = table.data.list
-    total.value = table.data.total
-    page.value = table.data.page
-    pageSize.value = table.data.pageSize
-  }
-}
-getTableData()
-
-const deleteFileFunc = async(row) => {
-  ElMessageBox.confirm('此操作将永久删除文件, 是否继续?', '提示', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
-  })
-    .then(async() => {
-      const res = await deleteFile(row)
-      if (res.code === 0) {
-        ElMessage({
-          type: 'success',
-          message: '删除成功!',
-        })
-        if (tableData.value.length === 1 && page.value > 1) {
-          page.value--
-        }
-        getTableData()
-      }
-    })
-    .catch(() => {
-      ElMessage({
-        type: 'info',
-        message: '已取消删除',
-      })
-    })
-}
-
-const downloadFile = (row) => {
-  if (row.url.indexOf('http://') > -1 || row.url.indexOf('https://') > -1) {
-    downloadImage(row.url, row.name)
-  } else {
-    debugger
-    downloadImage(path.value + '/' + row.url, row.name)
-  }
-}
-
-/**
- * 编辑文件名或者备注
- * @param row
- * @returns {Promise<void>}
- */
-const editFileNameFunc = async(row) => {
-  ElMessageBox.prompt('请输入文件名或者备注', '编辑', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    inputPattern: /\S/,
-    inputErrorMessage: '不能为空',
-    inputValue: row.name
-  }).then(async({ value }) => {
-    row.name = value
-    // console.log(row)
-    const res = await editFileName(row)
-    if (res.code === 0) {
-      ElMessage({
-        type: 'success',
-        message: '编辑成功!',
-      })
-      getTableData()
-    }
-  }).catch(() => {
-    ElMessage({
-      type: 'info',
-      message: '取消修改'
-    })
-  })
-}
-</script>
-
-<style scoped>
-.name {
-  cursor: pointer;
-}
-
-</style>