研究员管理，图片资源库 over

src/components/ImageUpload.vue

@@ -81,6 +81,7 @@ function showImage(){
             }
             .form-hint {
                 margin-top: 10px;
+                font-size: 12px;
                 color: #999999;
             }
 

src/views/author/List.vue

@@ -1,13 +1,110 @@
 <script setup>
 import { ref, reactive } from 'vue'
+
+const tableQuery = reactive({
+    keyWord:'',
+    currentPage:1,
+    pageSize:10,
+    totals:0,
+})
+
+const tableColumns = [
+    {label:'研究员名称',key:'name',},
+    {label:'简介',key:'intor'},
+    {label:'照片',key:'cover',},
+    {label:'添加时间',key:'time',width:250,sortable:true},
+]
+let modifyAuthorShow = ref(false)
+let curAuthorData = ref({})
+function handleModifyAuthorShow(data){
+    curAuthorData.value = data
+    modifyAuthorShow.value = true
+}
+const tableData = ref([])
+function getTableData(){
+    tableData.value = [
+        {
+            name:'aaa',
+            time:'2024-08-02 12:30'
+        }
+    ]
+}
+getTableData()
+function handlePageChange(){}
+
+function handlePreviewPic(){}
+
+function handleSaveAuthor(){}
 </script>
 
 <template>
-    <div>
-        研究员管理
+    <div class="author-list-wrap">
+        <div class="top-box">
+            <el-input style="width:426px;" placeholder="研究员名称"></el-input>
+        </div>
+        <div class="table-box">
+            <el-table stripe border :data="tableData">
+                <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]||''">
+                        </div>
+                        <span v-else>{{ row[column.key] }}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column label="操作">
+                    <template #default="{row}">
+                        <el-link @click="handleModifyAuthorShow(row)">配置</el-link>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <el-pagination
+                background
+                layout="total,prev,pager,next,jumper"
+                :current-page="tableQuery.page"
+                :page-size="tableQuery.pageSize"
+                :total="tableQuery.totals"
+                @current-change="handlePageChange"
+                style=" justify-content: flex-end;border:1px solid #ebeef5;border-top: none;"
+            />
+        </div>
     </div>
+    <el-dialog v-model="modifyAuthorShow" title="编辑作者" width="646px" draggable>
+        <div class="content-wrap">
+            <el-form label-width="95px" label-position="left">
+                <el-form-item label="研究员名称">
+                    张三
+                </el-form-item>
+                <el-form-item label="简介">
+                    <el-input type="textarea" placeholder="请输入作者简介"></el-input>
+                </el-form-item>
+                <el-form-item label="照片">
+                    <ImageUpload
+                        width="120px"
+                        height="120px"
+                    ></ImageUpload>
+                </el-form-item>
+            </el-form>
+        </div>
+        <template #footer>
+            <div class="footer-wrap">
+                <el-button type="primary" plain size="large" @click="modifyAuthorShow = false">取消</el-button>
+                <el-button type="primary" size="large" @click="handleSaveAuthor">保存</el-button>
+            </div>
+        </template>
+    </el-dialog>
 </template>
 
 <style scoped lang="scss">
-
+.author-list-wrap{
+    .top-box{
+        text-align: right;
+    }
+    .table-box{
+        margin-top: 25px;
+    }
+}
 </style>

src/views/media/PictureLibrary.vue

@@ -1,13 +1,115 @@
 <script setup>
 import { ref, reactive } from 'vue'
+
+const tableQuery = reactive({
+    keyWord:'',
+    currentPage:1,
+    pageSize:10,
+    totals:0,
+})
+
+const tableColumns = [
+    {label:'图片预览',key:'cover',},
+    {label:'图片名称',key:'name',},
+    {label:'添加时间',key:'time',width:250,sortable:true},
+    {label:'关联标签',key:'label',},
+]
+let picUploadShow = ref(false)
+let curPicData = ref({})
+function handlePicUploadShow(data){
+    curPicData.value = data
+    picUploadShow.value = true
+}
+const tableData = ref([])
+function getTableData(){
+    tableData.value = [
+        {
+            name:'aaa',
+            time:'2024-08-02 12:30'
+        }
+    ]
+}
+getTableData()
+function handlePageChange(){}
+
+function handlePreviewPic(){}
+
+function handleSavePic(){}
 </script>
 
 <template>
-    <div>
-        图片资源库
+    <div class="picture-libraray-wrap">
+        <div class="top-box">
+            <el-button @click="handlePicUploadShow({})">上传图片</el-button>
+            <el-cascader></el-cascader>
+            <el-input style="width:426px;"></el-input>
+        </div>
+        <div class="table-box">
+            <el-table stripe border :data="tableData">
+                <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]||''">
+                        </div>
+                        <span v-else>{{ row[column.key] }}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column label="操作">
+
+                </el-table-column>
+            </el-table>
+            <el-pagination
+                background
+                layout="total,prev,pager,next,jumper"
+                :current-page="tableQuery.page"
+                :page-size="tableQuery.pageSize"
+                :total="tableQuery.totals"
+                @current-change="handlePageChange"
+                style=" justify-content: flex-end;border:1px solid #ebeef5;border-top: none;"
+            />
+        </div>
     </div>
+    <el-dialog v-model="picUploadShow" :title="curPicData.id?'编辑图片':'添加图片'" width="646px" draggable>
+        <div class="content-wrap">
+            <el-form label-width="95px" label-position="left">
+                <el-form-item label="照片">
+                    <ImageUpload
+                        width="90px"
+                        height="120px"
+                    ></ImageUpload>
+                </el-form-item>
+                <el-form-item label="图片名称">
+                    <el-input placeholder="请输入图片名称"></el-input>
+                </el-form-item>
+                <el-form-item label="关联标签">
+                    <el-cascader placeholder="请选择关联品种"></el-cascader>
+                </el-form-item>
+            </el-form>
+        </div>
+        <template #footer>
+            <div class="footer-wrap">
+                <el-button type="primary" plain size="large" @click="picUploadShow = false">取消</el-button>
+                <el-button type="primary" size="large" @click="handleSavePic">保存</el-button>
+            </div>
+        </template>
+    </el-dialog>
 </template>
 
 <style scoped lang="scss">
-
+.picture-libraray-wrap{
+    .top-box{
+        display: flex;
+        justify-content: space-between;
+        :deep(.el-cascader){
+            margin-left: auto;
+            margin-right: 20px;
+        }
+    }
+    .table-box{
+        margin-top: 25px;
+    }
+}
 </style>