代码补充

src/layout/components/HeaderWrap.vue

@@ -18,6 +18,11 @@ const breadcrumbArr=computed(()=>{
   if(arr[1]&&arr[1].meta.from){
     temarr.splice(1,0,{title:arr[1].meta.from,path:arr[1].meta.fromPath})
   }
+  if(arr[1]){
+    if(['消息推送管理','客户反馈','图片资源库'].includes(arr[1].meta.title)){
+        return [{title:arr[1].meta.title}]
+    }
+  }
   return temarr
 })
 function handleClickBreadcrumb(e){

src/router/modules/customer.js

@@ -22,7 +22,7 @@ export default[
         component:()=>import('@/views/customer/FeedbackList.vue'),
         name:'FeedbackList',
         meta:{
-            title:'客户反馈列表'
+            title:'客户反馈'
         }
       },
       {

src/styles/element.scss

@@ -37,5 +37,10 @@
   background-color: #fff;
 }
 .el-table thead th.el-table__cell{
-    background-color:#E7E7E7!important;
+    background-color:#E4EBF3!important;
+}
+.el-button{
+    .el-icon{
+        font-size: 15px;
+    }
 }

src/styles/var.scss

@@ -2,5 +2,5 @@
 :root{
   --el-primary-color:#086CE0 !important;
   --el-color-primary:#086CE0 !important;
-  --el-fill-color-lighter:#F1F6FF;
+  --el-fill-color-lighter:#F3F9FF;
 }

src/views/author/List.vue

@@ -1,11 +1,14 @@
 <script setup>
 import { ref, reactive } from 'vue'
+import { Search } from '@element-plus/icons-vue'
 
 const tableQuery = reactive({
     keyWord:'',
     currentPage:1,
     pageSize:10,
     totals:0,
+    sortParam:'',
+    sortType:''
 })
 
 const tableColumns = [
@@ -25,39 +28,56 @@ function getTableData(){
     tableData.value = [
         {
             name:'aaa',
-            time:'2024-08-02 12:30'
+            time:'2024-08-02 12:30',
+            cover:'https://hongze.oss-accelerate.aliyuncs.com/static/images/202207/20220720/K6rmSx3MNUwnJxhlPMV62swe3FLV.jpg'
         }
     ]
 }
 getTableData()
-function handlePageChange(){}
+function handlePageChange(page){
+    tableQuery.currentPage = page
+    getTableData()
+}
 
 function handlePreviewPic(){}
 
 function handleSaveAuthor(){}
+
+function handleSortChange({order,prop}){
+    // ascending 
+}
 </script>
 
 <template>
     <div class="author-list-wrap">
         <div class="top-box">
-            <el-input style="width:426px;" placeholder="研究员名称"></el-input>
+            <el-input 
+                v-model="tableQuery.keyWord"
+                :prefix-icon="Search" 
+                clearable 
+                style="width:426px;" 
+                placeholder="研究员名称"></el-input>
         </div>
         <div class="table-box">
-            <el-table stripe border :data="tableData">
+            <el-table stripe border :data="tableData" @sort-change="handleSortChange">
                 <el-table-column 
                     align="center"
                     v-for="column in tableColumns" :key="column.key"
                     :prop="column.key" :label="column.label" :sortable="column.sortable" :width="column.width">
                     <template #default="{row}">
                         <div v-if="column.key==='cover'" @click="handlePreviewPic(row)" style="color:#086CE0;cursor: pointer;">
-                            <img class="row-img" :src="row[column.key]||''">
+                            <el-image 
+                                fit="cover"
+                                :src="row[column.key]||''" 
+                                :preview-src-list="[row[column.key]||'']" 
+                                style="display: inline-block;width:60px;height: 60px;" preview-teleported/>
                         </div>
                         <span v-else>{{ row[column.key] }}</span>
                     </template>
                 </el-table-column>
-                <el-table-column label="操作">
+                <el-table-column label="操作" align="center">
                     <template #default="{row}">
-                        <el-link @click="handleModifyAuthorShow(row)">配置</el-link>
+                        <el-link type="primary" :underline="false" @click="handleModifyAuthorShow(row)">配置</el-link>
                     </template>
                 </el-table-column>
             </el-table>

src/views/customer/NotificationList.vue

@@ -90,7 +90,9 @@ function handleLabelChange(){}
 
                 </el-table-column>
                 <el-table-column label="操作">
-
+                    <template #default="{row}">
+                        <el-link type="primary" :underline="false" @click="">推送</el-link>
+                    </template>
                 </el-table-column>
             </el-table>
             <el-pagination

src/views/customer/TempUserList.vue

@@ -26,42 +26,22 @@ const tableQuery = reactive({
     keyWord:'',
     currentPage:1,
     pageSize:10,
-    totals:0
+    totals:0,
+    sortParam:'',
+    sortType:''
 })
 const tableData = ref([])
 function getTableData(){
-    tableData.value = [
-        {
-            mobile:'123456'
-        },
-        {
-            mobile:'123456'
-        },
-        {
-            mobile:'123456'
-        },
-        {
-            mobile:'123456'
-        },
-        {
-            mobile:'123456'
-        },
-        {
-            mobile:'123456'
-        },
-        {
-            mobile:'123456'
-        },
-        {
-            mobile:'123456'
-        },
-        {
-            mobile:'123456'
-        },
-    ]
+    tableData.value = [{mobile:'123456'},{mobile:'123456'}]
 }
 getTableData()
-function handlePageChange(){}
+function handlePageChange(page){
+    tableQuery.currentPage = page
+    getTableData()
+}
+function handleSortChange({order,prop}){
+    // ascending 
+}
 </script>
 
 <template>
@@ -74,7 +54,7 @@ function handlePageChange(){}
                 placeholder="请输入手机号"></el-input>
         </div>
         <div class="table-box">
-            <el-table stripe border :data="tableData">
+            <el-table stripe border :data="tableData" @sort-change="handleSortChange">
                 <el-table-column 
                     align="center"
                     v-for="column in tableColumns" :key="column.key"

src/views/media/AudioList.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { ref, reactive } from 'vue'
-import { Search } from '@element-plus/icons-vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Search,Plus } from '@element-plus/icons-vue'
 import MediaUpload from './components/MediaUpload.vue';
 import MediaPlayer from './components/MediaPlayer.vue';
 
@@ -10,6 +11,8 @@ const tableQuery = reactive({
     currentPage:1,
     pageSize:10,
     totals:0,
+    sortParam:'',
+    sortType:''
 })
 
 const tableColumns = [
@@ -30,24 +33,56 @@ function getTableData(){
     ]
 }
 getTableData()
-function handlePageChange(){}
+function handlePageChange(page){
+    tableQuery.currentPage = page
+    getTableData()
+}
 
 let mediaPlayerShow = ref(false)
 function handlePreviewAudio(row){
     mediaPlayerShow.value = true
 }
+let curData = ref({})
+function handleUploadShow(data={}){
+    curData.value = {
+        fileUrl:data.url||'',
+        mediaName:data.name||'',
+        author:data.author||'',
+        labels:data.labels||'',
+        mediaCover:data.pic||'',
+    }
+    mediaUploadShow.value = true
+}
+
+function handleEdit(data){
+    handleUploadShow(data)
+}
+function handleDelete(data){
+    ElMessageBox.confirm(
+        '删除后不可恢复，是否确认删除该音频？',
+        '提示',
+        {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+        }
+    )
+    .then(() => {
+        ElMessage.success('删除成功')
+    }).catch(() => {})
+}
+function handleSortChange({order,prop}){}
 </script>
 
 <template>
     <div class="audio-list-wrap">
         <div class="top-box">
-            <el-button @click="mediaUploadShow = true">上传音频</el-button>
+            <el-button type="primary" :icon="Plus" @click="handleUploadShow">上传音频</el-button>
             <el-input style="width:400px;margin-left: auto;" placeholder="音频名称" v-model="tableQuery.keyWord" :prefix-icon="Search" clearable></el-input>
         </div>
         <div class="table-box">
-            <el-table stripe border :data="tableData">
+            <el-table stripe border :data="tableData" @sort-change="handleSortChange">
                 <el-table-column 
-                    align="center"
                     v-for="column in tableColumns" :key="column.key"
                     :prop="column.key" :label="column.label" :sortable="column.sortable" :width="column.width">
                     <template #default="{row}">
@@ -57,8 +92,11 @@ function handlePreviewAudio(row){
                         <span v-else>{{ row[column.key] }}</span>
                     </template>
                 </el-table-column>
-                <el-table-column label="操作">
-
+                <el-table-column label="操作" >
+                    <template #default="{row}">
+                        <el-link type="primary" :underline="false" @click="handleEdit(row)" style="margin-right: 20px;">编辑</el-link>
+                        <el-link type="danger" :underline="false" @click="handleDelete(row)">删除</el-link>
+                    </template>
                 </el-table-column>
             </el-table>
             <el-pagination
@@ -76,6 +114,7 @@ function handlePreviewAudio(row){
         v-model:show="mediaUploadShow"
         mediaType="audio"
         modifyType="add"
+        :modifyata="curData"
     ></MediaUpload>
     <MediaPlayer 
         v-model:show="mediaPlayerShow"

src/views/media/PictureLibrary.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref, reactive } from 'vue'
-
+import {InfoFilled,Search} from '@element-plus/icons-vue'
 const tableQuery = reactive({
     keyWord:'',
     currentPage:1,
@@ -16,10 +16,31 @@ const tableColumns = [
 ]
 let picUploadShow = ref(false)
 let curPicData = ref({})
-function handlePicUploadShow(data){
-    curPicData.value = data
+function handlePicUploadShow(data={}){
+    curPicData.value = {
+        imgUrl:data.imgUrl||'',
+        name:data.name||'',
+        labels:data.labels||''
+    }
     picUploadShow.value = true
 }
+function handleEdit(data){
+    handlePicUploadShow(data)
+}
+function handleDelete(data){
+    ElMessageBox.confirm(
+        '删除后不可恢复，是否确认删除该图片？',
+        '提示',
+        {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+        }
+    )
+    .then(() => {
+        ElMessage.success('删除成功')
+    }).catch(() => {})
+}
 const tableData = ref([])
 function getTableData(){
     tableData.value = [
@@ -32,17 +53,23 @@ function getTableData(){
 getTableData()
 function handlePageChange(){}
 
-function handlePreviewPic(){}
-
 function handleSavePic(){}
 </script>
 
 <template>
     <div class="picture-libraray-wrap">
         <div class="top-box">
-            <el-button @click="handlePicUploadShow({})">上传图片</el-button>
+            <el-button type="primary" @click="handlePicUploadShow({})">上传图片</el-button>
+            <el-tooltip
+                class="box-item"
+                effect="dark"
+                content="应用于小程序报告、音频、视频列表页，取产品关联的第一个标签展示"
+                placement="top-start"
+            >
+            <el-icon style="margin-left: 5px;"><InfoFilled /></el-icon>
+            </el-tooltip>
             <el-cascader></el-cascader>
-            <el-input style="width:426px;"></el-input>
+            <el-input style="width:426px;" :prefix-icon="Search" clearable placeholder="请输入图片名称"></el-input>
         </div>
         <div class="table-box">
             <el-table stripe border :data="tableData">
@@ -51,14 +78,17 @@ function handleSavePic(){}
                     v-for="column in tableColumns" :key="column.key"
                     :prop="column.key" :label="column.label" :sortable="column.sortable" :width="column.width">
                     <template #default="{row}">
-                        <div v-if="column.key==='cover'" @click="handlePreviewPic(row)" style="color:#086CE0;cursor: pointer;">
+                        <div v-if="column.key==='cover'" style="color:#086CE0;cursor: pointer;">
                             <img class="row-img" :src="row[column.key]||''">
                         </div>
                         <span v-else>{{ row[column.key] }}</span>
                     </template>
                 </el-table-column>
                 <el-table-column label="操作">
-
+                    <template #default="{row}">
+                        <el-link type="primary" :underline="false" @click="handleEdit(row)" style="margin-right: 20px;">编辑</el-link>
+                        <el-link type="danger" :underline="false" @click="handleDelete(row)">删除</el-link>
+                    </template>
                 </el-table-column>
             </el-table>
             <el-pagination
@@ -77,15 +107,16 @@ function handleSavePic(){}
             <el-form label-width="95px" label-position="left">
                 <el-form-item label="照片">
                     <ImageUpload
+                        :imgUrl="curPicData.imgUrl"
                         width="90px"
                         height="120px"
                     ></ImageUpload>
                 </el-form-item>
                 <el-form-item label="图片名称">
-                    <el-input placeholder="请输入图片名称"></el-input>
+                    <el-input v-model="curPicData.name" placeholder="请输入图片名称"></el-input>
                 </el-form-item>
                 <el-form-item label="关联标签">
-                    <el-cascader placeholder="请选择关联品种"></el-cascader>
+                    <el-cascader v-model="curPicData.labels" placeholder="请选择关联品种"></el-cascader>
                 </el-form-item>
             </el-form>
         </div>
@@ -103,6 +134,7 @@ function handleSavePic(){}
     .top-box{
         display: flex;
         justify-content: space-between;
+        align-items: center;
         :deep(.el-cascader){
             margin-left: auto;
             margin-right: 20px;

src/views/media/VideoList.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref, reactive } from 'vue'
-import { Search } from '@element-plus/icons-vue'
+import { Search,Plus } from '@element-plus/icons-vue'
 import MediaUpload from './components/MediaUpload.vue';
 import MediaPlayer from './components/MediaPlayer.vue';
 
@@ -10,6 +10,8 @@ const tableQuery = reactive({
     currentPage:1,
     pageSize:10,
     totals:0,
+    sortParam:'',
+    sortType:''
 })
 
 const tableColumns = [
@@ -32,22 +34,53 @@ function getTableData(){
     ]
 }
 getTableData()
-function handlePageChange(){}
-
+function handlePageChange(page){
+    tableQuery.currentPage = page
+    getTableData()
+}
 let mediaPlayerShow = ref(false)
 function handlePreviewVideo(row){
     mediaPlayerShow.value = true
 }
+let curData = ref({})
+function handleUploadShow(data={}){
+    curData.value = {
+        fileUrl:data.url||'',
+        mediaName:data.name||'',
+        author:data.author||'',
+        labels:data.labels||'',
+        mediaCover:data.pic||'',
+    }
+    mediaUploadShow.value = true
+}
+function handleEdit(data){
+    handleUploadShow(data)
+}
+function handleDelete(data){
+    ElMessageBox.confirm(
+        '删除后不可恢复，是否确认删除该视频？',
+        '提示',
+        {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+        }
+    )
+    .then(() => {
+        ElMessage.success('删除成功')
+    }).catch(() => {})
+}
+function handleSortChange({order,prop}){}
 </script>
 
 <template>
     <div class="video-list-wrap">
         <div class="top-box">
-            <el-button @click="mediaUploadShow = true">上传视频</el-button>
+            <el-button type="primary" :icon="Plus" @click="handleUploadShow">上传视频</el-button>
             <el-input style="width:400px;margin-left: auto;" placeholder="视频名称" v-model="tableQuery.keyWord" :prefix-icon="Search" clearable></el-input>
         </div>
         <div class="table-box">
-            <el-table stripe border :data="tableData">
+            <el-table stripe border :data="tableData" @sort-change="handleSortChange">
                 <el-table-column 
                     align="center"
                     v-for="column in tableColumns" :key="column.key"
@@ -60,7 +93,10 @@ function handlePreviewVideo(row){
                     </template>
                 </el-table-column>
                 <el-table-column label="操作">
-
+                    <template #default="{row}">
+                        <el-link type="primary" :underline="false" @click="handleEdit(row)" style="margin-right: 20px;">编辑</el-link>
+                        <el-link type="danger" :underline="false" @click="handleDelete(row)">删除</el-link>
+                    </template>
                 </el-table-column>
             </el-table>
             <el-pagination
@@ -76,6 +112,7 @@ function handlePreviewVideo(row){
     </div>
     <MediaUpload
         v-model:show="mediaUploadShow"
+        :modifyata="curData"
         mediaType="video"
         modifyType="add"
         ImageUploadWidth="192px"

src/views/media/components/MediaUpload.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { ref, reactive, computed } from 'vue'
+import { objectEach } from 'highcharts';
+import { ref, reactive, computed, watch } from 'vue'
 
 
 const show = defineModel('show', { type: Boolean, default: false })
@@ -8,6 +9,16 @@ const props = defineProps({
         type:String,
         default:'audio',//audio or video
     },
+    modifyata:{
+        type:Object,
+        default:{
+            fileUrl:'',
+            mediaName:'',
+            author:'',
+            labels:'',
+            mediaCover:'',
+        }
+    },
     modifyType:{
         type:String,
         default:'add',//add or edit
@@ -27,13 +38,40 @@ const mediaName = computed(()=>{
 const dialogTitle = computed(()=>{
     return {'add':'上传','edit':'编辑',}[props.modifyType]+mediaName.value
 })
+const uploadAccept = computed(()=>{
+    return props.mediaType==='audio'?'.mp3':'.mp4'
+})
+const mediaData = reactive({
+    fileUrl:'',
+    mediaName:'',
+    author:'',
+    labels:'',
+    mediaCover:'',
+})
+watch(show,(newval)=>{
+    if(newval){
+        Object.assign(mediaData,props.modifyata)
+    }else{
+        Object.assign(mediaData,{
+            fileUrl:'',
+            mediaName:'',
+            author:'',
+            labels:'',
+            mediaCover:'',
+        })
+    }
+})
 
 //点击上传按钮
 const uploadRef = ref(null)
 function handleUpload(){
     uploadRef.value?.$el.getElementsByTagName('input')[0].click()
 }
-function handleUploadMedia(){}
+function handleUploadMedia(file){
+    //console.log('aaa',file)
+    //上传成功后，赋值mediaData.fileUrl
+    mediaData.fileUrl = '123456'
+}
 
 function handleSave(){}
 </script>
@@ -43,13 +81,17 @@ function handleSave(){}
         <div class="content-wrap">
             <el-form label-width="95px" label-position="left">
                 <el-form-item prop="mediaUrl" class="upload-form-item">
-                    <el-input placeholder="请上传文件">
+                    <el-input placeholder="请上传文件" v-model="mediaData.fileUrl" disabled>
                         <template #append>
-                            <el-button @click="handleUpload">上传{{mediaName}}</el-button>
+                            <el-button 
+                                @click="handleUpload" 
+                                style="background-color: #086CE0;color:#fff;border-top-left-radius:0;border-bottom-left-radius:0;">
+                                上传{{mediaName}}
+                            </el-button>
                             <el-upload
                                 ref="uploadRef"
                                 action=""
-                                accept="application/pdf"
+                                :accept="uploadAccept"
                                 :http-request="handleUploadMedia"
                                 :show-file-list="false"
                                 style="display: flex;"
@@ -60,18 +102,19 @@ function handleSave(){}
                 </el-form-item>
                 <el-form-item label="照片" v-if="props.mediaType==='video'">
                     <ImageUpload
+                        :imgUrl="mediaData.mediaCover"
                         :width="ImageUploadWidth"
                         :height="ImageUploadHeight"
                     ></ImageUpload>
                 </el-form-item>
                 <el-form-item :label="`${mediaName}名称`">
-                    <el-input></el-input>
+                    <el-input v-model="mediaData.mediaName" placeholder="请输入名称"></el-input>
                 </el-form-item>
                 <el-form-item label="研究员名称">
-                    <el-select></el-select>
+                    <el-select v-model="mediaData.author"></el-select>
                 </el-form-item>
                 <el-form-item label="标签">
-                    <el-cascader style="width: 100%;"></el-cascader>
+                    <el-cascader style="width: 100%;" v-model="mediaData.labels"></el-cascader>
                 </el-form-item>
             </el-form>
         </div>