基本接口调试完成

src/api/media/imgsource.js

@@ -0,0 +1,55 @@
+import { get, post } from "@/api/index";
+
+export default{
+    /**
+     * 图片资源库-列表
+     * @param {Object} params
+     * @param {Number} params.PageSize
+     * @param {Number} params.CurrentIndex
+     * @param {String} params.SortType asc desc
+     * @param {String} params.PermissionIds ,号隔开
+     * @param {String} params.KeyWord
+     * @returns 
+     */
+    getImgSourceList:params=>{
+        return get('/source/imageList',params)
+    },
+    /**
+     * 上传图片
+     * @param {Object} params
+     * @param {File} params.File
+     * @returns res.Data {Url:'',FileName:''}
+     */
+    uploadImgFile:params=>{
+        return post('/source/uploadImage',params)
+    },
+    /**
+     * @param {Object} params
+     * @param {String} params.ImageName
+     * @param {String} params.SrcUrl
+     * @param {Number} params.PermissionId 
+     * @returns 
+     */
+    addImgSource:params=>{
+        return post('/source/addImage',params)
+    },
+    /**
+     * @param {Object} params
+     * @param {Number} params.ImageId
+     * @param {String} params.ImageName
+     * @param {String} params.SrcUrl
+     * @param {Number} params.PermissionId 
+     * @returns 
+     */
+    editImgSource:params=>{
+        return post('/source/editImage',params)
+    },
+    /**
+     * @param {Object} params
+     * @param {Number} params.ImageId
+     * @returns 
+     */
+    deleteImgSource:params=>{
+        return post('/source/deleteImage',params)
+    }
+}

src/api/media/index.js

@@ -1,8 +1,10 @@
 import apiAudio from './audio'
 import apiVideo from './video'
 import apiMediaCommon from './common'
+import apiImgSource from './imgsource'
 export {
     apiAudio,
     apiVideo,
-    apiMediaCommon
+    apiMediaCommon,
+    apiImgSource
 }

src/api/system/user.js

@@ -9,7 +9,12 @@ export default {
   userAdd:params=>{
     return post("/sys_user/add", params);
   },
-  // 编辑用户
+  // 编辑用户角色
+  /*
+  SysUserId   int    `description:"id"`
+  SysUserName string `description:"账号"`
+  SysRoleId   int    `description:"角色id"`
+   */
   userEdit:params=>{
     return post("/sys_user/edit", params);
   },

src/layout/components/LeftWrap.vue

@@ -11,7 +11,7 @@ const navList = ref([])
 
 function getNavList(){
     //mock navList
-    navList.value = [
+    /* navList.value = [
         {
             Path:'/customer',
             Name:'客户管理',
@@ -74,11 +74,11 @@ function getNavList(){
                 }
             ]
         },
-    ]
+    ] */
     
   apiSystemRole.menuData().then(res=>{
     if(res.Ret===200){
-      //navList.value=res.Data||[]
+      navList.value=res.Data||[]
     }
   })
 }
@@ -102,13 +102,13 @@ function logout() {
 
 function getMenuIcon(item){
     const iconMap = {
-        '客户管理':'menu/custom',
-        '研究员管理':'menu/author',
-        '音视频管理':'menu/media',
-        '消息推送管理':'menu/message',
-        '图片资源库':'menu/piclib',
-        '客户反馈':'menu/feedback',
-        '系统设置':'menu/setting'
+        '/customer':'menu/custom',
+        '/authorMgt/authorList':'menu/author',
+        '/mediaMgt':'menu/media',
+        '/customer/notification':'menu/message',
+        '/mediaMgt/pictureLib':'menu/piclib',
+        '/customer/feedbackList':'menu/feedback',
+        '/system':'menu/setting'
     }
     return iconMap[item]||'menu/setting'
 
@@ -131,7 +131,7 @@ function getMenuIcon(item){
           v-if="level1.Children.length===0"
         >
           <svg-icon 
-            :name="getMenuIcon(level1.Name)" :color="$route.path===level1.Path?'#086CE0':'#333'" style="font-size:16px;"></svg-icon>
+            :name="getMenuIcon(level1.Path)" :color="$route.path===level1.Path?'#086CE0':'#333'" style="font-size:16px;"></svg-icon>
           <span style="margin-left: 5px;">{{ level1.Name }}</span>
         </el-menu-item>
         <el-sub-menu
@@ -139,7 +139,7 @@ function getMenuIcon(item){
           v-if="level1.Children.length>0"
         >
           <template #title>
-            <svg-icon :name="getMenuIcon(level1.Name)" :color="$route.path===level1.Path?'#086CE0':'#333'" style="font-size:16px"></svg-icon>
+            <svg-icon :name="getMenuIcon(level1.Path)" :color="$route.path===level1.Path?'#086CE0':'#333'" style="font-size:16px"></svg-icon>
             <span style="margin-left: 5px;">{{ level1.Name }}</span>
           </template>
           <el-menu-item

src/router/modules/system.js

@@ -14,7 +14,7 @@ export default[
         component:()=>import('@/views/system/userList/Index.vue'),
         name:"SystemUserList",
         meta:{
-          title:'用户管理'
+          title:'用户列表'
         },
       },
       {

src/views/author/List.vue

@@ -45,8 +45,6 @@ function handlePageChange(page){
     getTableData()
 }
 
-function handlePreviewPic(){}
-
 function handleUploadImg(file){
     //图片大小和格式限制
     const {size,type} = file.file
@@ -106,7 +104,7 @@ async function handleSaveAuthor(){
                     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==='HeadImgURL'" @click="handlePreviewPic(row)" style="color:#086CE0;cursor: pointer;">
+                        <div v-if="column.key==='HeadImgURL'" style="color:#086CE0;cursor: pointer;">
                             <el-image 
                                 v-if="row[column.key]"
                                 fit="cover"

src/views/media/PictureLibrary.vue

@@ -1,27 +1,27 @@
 <script setup>
 import { ref, reactive } from 'vue'
 import {InfoFilled,Search} from '@element-plus/icons-vue'
+import {apiImgSource,apiMediaCommon} from '@/api/media'
+import {cloneDeep} from 'lodash'
 const tableQuery = reactive({
     keyWord:'',
+    labels:'',
     currentPage:1,
     pageSize:10,
     totals:0,
+    sortType:''
 })
 
 const tableColumns = [
-    {label:'图片预览',key:'cover',},
-    {label:'图片名称',key:'name',},
-    {label:'添加时间',key:'time',width:250,sortable:true},
-    {label:'关联标签',key:'label',},
+    {label:'图片预览',key:'SrcUrl',},
+    {label:'图片名称',key:'ImgName',},
+    {label:'添加时间',key:'CreatedTime',width:250,sortable:true},
+    {label:'关联标签',key:'PermissionName',},
 ]
 let picUploadShow = ref(false)
 let curPicData = ref({})
 function handlePicUploadShow(data={}){
-    curPicData.value = {
-        imgUrl:data.imgUrl||'',
-        name:data.name||'',
-        labels:data.labels||''
-    }
+    curPicData.value = cloneDeep(data)
     picUploadShow.value = true
 }
 function handleEdit(data){
@@ -38,22 +38,76 @@ function handleDelete(data){
         }
     )
     .then(() => {
-        ElMessage.success('删除成功')
+        apiImgSource.deleteImgSource({
+            ImageId:data.Id
+        }).then(res=>{
+            if(res.Ret!==200) return 
+            ElMessage.success('删除成功')
+            getTableData()
+        })
     }).catch(() => {})
 }
+const labelOptions = ref([])
+function getLabelOptions(){
+    apiMediaCommon.getPermissionList().then(res=>{
+        if(res.Ret!==200) return
+        labelOptions.value = res.Data.List||[]
+    })
+}
+getLabelOptions()
 const tableData = ref([])
 function getTableData(){
-    tableData.value = [
-        {
-            name:'aaa',
-            time:'2024-08-02 12:30'
-        }
-    ]
+    apiImgSource.getImgSourceList({
+        KeyWord:tableQuery.keyWord,
+        PermissionIds:Array.isArray(tableQuery.labels)?tableQuery.labels.join(','):'',
+        SortType:tableQuery.sortType,
+        CurrentIndex:tableQuery.currentPage,
+        PageSize:tableQuery.pageSize
+    }).then(res=>{
+        if(res.Ret!==200) return 
+        tableData.value = res.Data.List||[]
+        tableQuery.totals = res.Data.Paging.Totals||0
+    })
 }
 getTableData()
-function handlePageChange(){}
-
-function handleSavePic(){}
+function handlePageChange(page){
+    tableQuery.currentPage = page
+    getTableData()
+}
+function handleUploadImg(file){
+    //图片大小和格式限制
+    const {size,type} = file.file
+    const sizeLimit = 500*1024
+    if(!['image/png','image/jpeg'].includes(type)){
+        ElMessage.warning('仅支持png、jpg格式的图片')
+        return
+    }
+    if(size>sizeLimit){
+        ElMessage.warning('资源库图片不能超过500kb')
+        return
+    }
+    let form = new FormData();
+    form.append('File',file.file);
+    apiImgSource.uploadImgFile(form).then(res=>{
+        if(res.Ret!==200) return 
+        curPicData.value.SrcUrl = res.Data?.Url||''
+    })
+}
+async function handleSavePic(){
+    //rule check
+    const params = {
+        ImageName:curPicData.value.ImgName,
+        SrcUrl:curPicData.value.SrcUrl,
+        PermissionId:curPicData.value.PermissionId
+    }
+    const res = curPicData.value.Id
+    ? await apiImgSource.editImgSource({...params,ImageId:curPicData.value.Id})
+    :await apiImgSource.addImgSource(params)
+    if(res.Ret!==200) return 
+    ElMessage.success(`${curPicData.value.Id?'编辑':'添加'}成功`)
+    getTableData()
+    picUploadShow.value = false
+}
 </script>
 
 <template>
@@ -68,8 +122,22 @@ function handleSavePic(){}
             >
             <el-icon style="margin-left: 5px;"><InfoFilled /></el-icon>
             </el-tooltip>
-            <el-cascader></el-cascader>
-            <el-input style="width:426px;" :prefix-icon="Search" clearable placeholder="请输入图片名称"></el-input>
+            <el-cascader v-model="tableQuery.labels" @change="handlePageChange(1)" placeholder="标签"
+                :options="labelOptions"
+                collapse-tags
+                collapse-tags-tooltip
+                :props="{
+                    value:'id',
+                    label:'name',
+                    emitPath:false,
+                    multiple:true
+                }"
+            ></el-cascader>
+            <el-input style="width:426px;" :prefix-icon="Search" clearable 
+                placeholder="请输入图片名称"
+                v-model="tableQuery.keyWord"
+                @input="handlePageChange(1)"
+            />
         </div>
         <div class="table-box">
             <el-table stripe border :data="tableData">
@@ -78,10 +146,16 @@ 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'" style="color:#086CE0;cursor: pointer;">
-                            <img class="row-img" :src="row[column.key]||''">
+                        <div v-if="column.key==='SrcUrl'" style="color:#086CE0;cursor: pointer;">
+                            <el-image 
+                                v-if="row[column.key]"
+                                fit="cover"
+                                :src="row[column.key]||''" 
+                                :preview-src-list="[row[column.key]||'']" 
+                                style="display: inline-block;width:60px;height: 60px;" preview-teleported/>
+                            <span v-else style="display: inline-block;width:60px;height: 60px;line-height: 60px;">-</span> 
                         </div>
-                        <span v-else>{{ row[column.key] }}</span>
+                        <span v-else>{{ row[column.key]||'-' }}</span>
                     </template>
                 </el-table-column>
                 <el-table-column label="操作">
@@ -102,21 +176,32 @@ function handleSavePic(){}
             />
         </div>
     </div>
-    <el-dialog v-model="picUploadShow" :title="curPicData.id?'编辑图片':'添加图片'" width="646px" draggable>
+    <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
-                        :imgUrl="curPicData.imgUrl"
+                        :imgUrl="curPicData.SrcUrl"
+                        uploadHint="支持jpg、jpeg、png等格式，建议上传宽高比例为3:4的图片"
                         width="90px"
                         height="120px"
+                        @upload="handleUploadImg"
+                        @remove="curPicData.SrcUrl=''"
                     ></ImageUpload>
                 </el-form-item>
                 <el-form-item label="图片名称">
-                    <el-input v-model="curPicData.name" placeholder="请输入图片名称"></el-input>
+                    <el-input v-model="curPicData.ImgName" placeholder="请输入图片名称"></el-input>
                 </el-form-item>
                 <el-form-item label="关联标签">
-                    <el-cascader v-model="curPicData.labels" placeholder="请选择关联品种"></el-cascader>
+                    <el-cascader v-model="curPicData.PermissionId" placeholder="请选择关联品种"
+                        :options="labelOptions"
+                        :props="{
+                            value:'id',
+                            label:'name',
+                            emitPath:false,
+                            multiple:false
+                        }"
+                    ></el-cascader>
                 </el-form-item>
             </el-form>
         </div>

src/views/media/components/MediaUpload.vue

@@ -59,6 +59,8 @@ watch(show,(newval)=>{
     if(newval){
         Object.assign(mediaData,props.modifydata)
         mediaData.labels = mediaData.labels.split(',').map(i=>Number(i))
+        const AuthorItem = authorList.value.find(i=>i.Id===mediaData.author)||''
+        mediaData.author = AuthorItem
     }else{
         Object.assign(mediaData,{
             fileUrl:'',

src/views/system/RoleList.vue

@@ -9,19 +9,14 @@ const tableLoading = ref(false)
 const totals = ref(0)
 async function getRoleList() {
   tableLoading.value = true
-  /* const res = await apiSystemRole.roleList({
+  const res = await apiSystemRole.roleList({
     PageSize: pageSize.value,
     CurrentIndex: page.value,
-  }) */
+  })
   tableLoading.value = false
-  /* if (res.Ret !== 200) return
+  if (res.Ret !== 200) return
   roleList.value = res.Data.List || []
-  totals.value = res.Data.Paging.Totals */
-  roleList.value = [
-    {
-        SysRoleName:'aaa'
-    }
-  ]
+  totals.value = res.Data.Paging.Totals
 }
 getRoleList()
 function handlePageChange(e) {

src/views/system/userList/Index.vue

@@ -2,16 +2,16 @@
 import DepartWrap from './components/DepartWrap.vue'
 import { Search, Plus } from '@element-plus/icons-vue'
 import { apiSystemUser, apiSystemRole } from '@/api/system'
+import { reactive } from 'vue';
 
 // 获取角色
 const roleId = ref('')
 const roleArr = ref([])
 async function getRoleList() {
-  /* const res = await apiSystemRole.roleAllList()
+  const res = await apiSystemRole.roleAllList()
   if (res.Ret !== 200) return
   const list = res.Data.List || []
-  roleArr.value = list */
-  roleArr.value = []
+  roleArr.value = list
 }
 getRoleList()
 
@@ -46,38 +46,28 @@ const tableColOpt = [
   },
   {
     label: '在职状态',
-    key: 'IsEnabled1'
+    key: 'IsEnabled'
   },
 ]
 const userList = ref([])
 const page = ref(1)
-const pageSize = ref(20)
+const pageSize = ref(10)
 const tableLoading = ref(false)
 const totals = ref(0)
 async function getUserList() {
   tableLoading.value = true
-  /* const res = await apiSystemUser.userList({
+  const res = await apiSystemUser.userList({
     PageSize: pageSize.value,
     CurrentIndex: page.value,
-    RoleId: roleId.value,
+    /* RoleId: roleId.value, */
     KeyWord: keyword.value,
     DepartmentId: departId.value
-  }) */
+  })
   tableLoading.value = false
-  userList.value = [
-    {
-        SysRealName:'aaa',
-        SysUserName:'026530',
-        Phone:'123456',
-        Email:'aaa@qq.com',
-        SysDepartmentName:'FICC研究部/aaa/bbb',
-        IsEnabled1:'在职'
-    }
-  ]
-  /* if (res.Ret === 200) {
+  if (res.Ret === 200) {
     userList.value = res.Data.List || []
     totals.value = res.Data.Paging.Totals
-  } */
+  }
 }
 getUserList()
 function handlePageChange(e) {
@@ -89,8 +79,30 @@ function refreshUserList() {
   getUserList()
 }
 
-function changeUserAuth(data){}
-
+let show = ref(false)
+const formState = reactive({
+    SysUserId:'',
+    SysUserName:'',
+    SysRoleId:'',
+})
+function changeUserAuth(data){
+    formState.SysUserId = data.SysUserId||0
+    formState.SysUserName = data.SysRealName||''
+    formState.SysRoleId = data.SysRoleId||0
+    show.value = true
+}
+function handleSubmitForm(){
+    if(!formState.SysRoleId) return ElMessage.warning('请选择角色')
+    const {SysUserId,SysUserName,SysRoleId} = formState
+    apiSystemUser.userEdit({
+        SysUserId,SysUserName,SysRoleId
+    }).then(res=>{
+        if(res.Ret!==200) return 
+        ElMessage.success('设置成功')
+        getUserList()
+        show.value = false
+    })
+}
 </script>
 
 
@@ -127,8 +139,7 @@ function changeUserAuth(data){}
             <template #default="{ row }">
               <span
                 v-if="column.key === 'IsEnabled'"
-                :style="{ color: !row.IsEnabled ? '#f00' : '' }"
-                >{{ row.IsEnabled ? "启用" : "禁用" }}</span
+                >{{ row.IsEnabled ? "在职" : "离职" }}</span
               >
               <span v-else>{{ row[column.key] }}</span>
             </template>
@@ -136,6 +147,7 @@ function changeUserAuth(data){}
           <el-table-column label="操作" width="260">
             <template #default="{ row }">
               <el-button
+                v-if="row.SysRoleName!=='admin'"
                 type="primary"
                 link
                 @click.stop="changeUserAuth(row)"
@@ -178,6 +190,30 @@ function changeUserAuth(data){}
       </div>
     </div>
   </div>
+  <!-- 配置角色弹窗 -->
+  <el-dialog v-model="show" width="500" draggable title="配置角色">
+    <el-form ref="formRef" :model="formState">
+      <el-form-item label="角色" prop="name">
+        <el-select v-model="formState.SysRoleId">
+            <el-option v-for="item in roleArr" :key="item.SysRoleId" 
+                :label="item.SysRoleName"
+                :value="item.SysRoleId"
+            />
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="btn-content" style="text-align: center; padding-bottom: 20px">
+        <el-button
+          type="primary"
+          style="width: 80px; margin-right: 24px"
+          @click="handleSubmitForm"
+          >保存</el-button
+        >
+        <el-button style="width: 80px" @click="show = false">取消</el-button>
+      </div>
+    </template>
+  </el-dialog>
 </template>
 
 <style lang="scss" scoped>

src/views/system/userList/components/DepartWrap.vue

@@ -15,11 +15,10 @@ const departTreeKeys = {
 const departOpts = ref([])
 const departActive = defineModel('departActive')//当前选中的分类
 async function getDepartList() {
-  /* const res = await apiSystemDepart.departList()
+  const res = await apiSystemDepart.departList()
   if (res.Ret !== 200) return
   const list = res.Data.List || []
-  departOpts.value = list */
-  departOpts.value=[]
+  departOpts.value = list
 }
 getDepartList()
 function initDepart() {
@@ -257,7 +256,7 @@ function getFormTitle(e) {
         <template #default="{ node, data }">
           <div class="depart-item-box">
             <div class="label">{{ node.label }}</div>
-            <div class="opt-box" v-show="showClassifyOpt(node, data)">
+            <!-- <div class="opt-box" v-show="showClassifyOpt(node, data)">
               <svg-icon
                 name="edit2"
                 size="16px"
@@ -285,7 +284,7 @@ function getFormTitle(e) {
                   </el-dropdown-menu>
                 </template>
               </el-dropdown>
-            </div>
+            </div> -->
           </div>
         </template>
       </el-tree>