列表加loading

README.md

@@ -3,4 +3,9 @@
 1. 全局挂载了formatTime(时间字符串,输出形式默认YYYY-MM-DD HH:mm:ss)方法,在组件中可直接使用
 2. 图标尽量使用svg，使用方法 <svg-icon name="close">
 3. Element-plus 中的icon 可以用<el-icon><i-ep-CirclePlus /></el-icon> 此种方式 就是加个 i-ep；在vite.config中配置了
-4. 全局组件直接在components中定义就好，已经做了自动导入，直接在页面中用文件名即可
+4. 全局组件直接在components中定义就好，已经做了自动导入，直接在页面中用文件名即可
+
+
+# 海通crm
+
+测试地址：http://8.136.199.33:7006/login

src/views/Login.vue

@@ -51,8 +51,8 @@ async function submitForm(formEl) {
 // 获取菜单跳转到第一个菜单
 function getMenuList() {
   apiSystemRole.menuData().then(res => {
-    router.replace('/customer/tempUserList')
-    return 
+    /* router.replace('/customer/tempUserList')
+    return  */
     if (res.Ret === 200) {
       const arr = res.Data || []
       if (arr.length === 0) {

src/views/author/List.vue

@@ -27,13 +27,16 @@ function handleModifyAuthorShow(data){
     formRef.value?.clearValidate()
     modifyAuthorShow.value = true
 }
+const tableLoading = ref(false)
 const tableData = ref([])
 function getTableData(){
+    tableLoading.value = true
     apiAuthor.getAuthorList({
         PageSize:tableQuery.pageSize,
         CurrentIndex:tableQuery.currentPage,
         KeyWord:tableQuery.keyWord
     }).then(res=>{
+        tableLoading.value = false
         if(res.Ret!==200) return 
         tableData.value = res.Data.List||[]
         tableQuery.totals = res.Data.Paging.Totals||0
@@ -98,7 +101,7 @@ async function handleSaveAuthor(){
                 @input="handlePageChange(1)"/>
         </div>
         <div class="table-box">
-            <el-table stripe border :data="tableData">
+            <el-table stripe border :data="tableData" element-loading-text="数据加载中..." v-loading="tableLoading">
                 <el-table-column 
                     v-for="column in tableColumns" :key="column.key"
                     :prop="column.key" :label="column.label" :sortable="column.sortable" :width="column.width">

src/views/customer/FeedbackList.vue

@@ -22,14 +22,19 @@ const tableQuery = reactive({
     /* keyWord:'', */
     currentPage:1,
     pageSize:10,
-    totals:0
+    totals:0,
+    sortType:''
 })
+const tableLoading = ref(false)
 const tableData = ref([])
 function getTableData(){
+    tableLoading.value = true
     apiCustomerUser.getFeedbackList({
         PageSize:tableQuery.pageSize,
         CurrentIndex:tableQuery.currentPage,
+        SortType:tableQuery.sortType
     }).then(res=>{
+        tableLoading.value = false
         if(res.Ret!==200) return 
         tableData.value = res.Data.List||[]
         tableQuery.totals = res.Data.Paging.Totals||0
@@ -40,12 +45,16 @@ function handlePageChange(page){
     tableQuery.currentPage = page
     getTableData()
 }
+function handleSortChange({order,prop}){
+    tableQuery.sortType = order==='ascending'?'asc':'desc'
+    getTableData()
+}
 </script>
 
 <template>
     <div class="feedback-wrap">
         <div class="table-box">
-            <el-table stripe border :data="tableData">
+            <el-table stripe border :data="tableData" @sort-change="handleSortChange" element-loading-text="数据加载中..." v-loading="tableLoading">
                 <el-table-column 
                     align="center"
                     v-for="column in tableColumns" :key="column.key"

src/views/customer/NotificationList.vue

@@ -88,8 +88,10 @@ function handlePageChange(page){
     tableQuery.currentPage = page
     getTableData()
 }
+const tableLoading = ref(false)
 const tableData = ref([])
 async function getTableData(){
+    tableLoading.value = true
     const params = {
         KeyWord:tableQuery.keyWord,
         PermissionIds:Array.isArray(tableQuery.labels)?tableQuery.labels.join(','):'',
@@ -108,6 +110,7 @@ async function getTableData(){
         'video':apiMessage.getVideoMsgList,
     }
     const res = await apiMap[activeType.value]({...params,...otherParams})
+    tableLoading.value = false
     if(res.Ret!==200) return 
     tableData.value = res.Data.List||[]
     tableQuery.totals = res.Data.Paging.Totals||0
@@ -142,6 +145,10 @@ function pushMessage(data){
         getTableData()
     })
 }
+function handleSortChange({order,prop}){
+    tableQuery.sortType = order==='ascending'?'asc':'desc'
+    getTableData()
+}
 </script>
 
 <template>
@@ -152,6 +159,7 @@ function pushMessage(data){
                 :options="labelOptions"
                 collapse-tags
                 collapse-tags-tooltip
+                clearable
                 :props="{
                     value:'id',
                     label:'name',
@@ -160,7 +168,7 @@ function pushMessage(data){
                 }"
             ></el-cascader>
             <el-select style="width:160px" placeholder="研究员" v-model="tableQuery.author" @change="handleAuthorChange"
-                multiple collapse-tags collapse-tags-tooltip value-key="Id">
+                multiple collapse-tags collapse-tags-tooltip clearable value-key="Id">
                 <el-option 
                     v-for="item in authorList" 
                     :key="item.Id"
@@ -179,7 +187,7 @@ function pushMessage(data){
             </el-tabs>
         </div>
         <div class="table-box">
-            <el-table stripe border :data="tableData">
+            <el-table stripe border :data="tableData" element-loading-text="数据加载中..." v-loading="tableLoading" @sort-change="handleSortChange">
                 <el-table-column 
                     align="center"
                     v-for="column in tableColumns" :key="column.key"
@@ -210,7 +218,7 @@ function pushMessage(data){
             <el-pagination
                 background
                 layout="total,prev,pager,next,jumper"
-                :current-page="tableQuery.page"
+                :current-page="tableQuery.currentPage"
                 :page-size="tableQuery.pageSize"
                 :total="tableQuery.totals"
                 @current-change="handlePageChange"

src/views/media/AudioList.vue

@@ -25,14 +25,17 @@ const tableColumns = [
 ]
 let mediaUploadShow = ref(false)
 
+const tableLoading = ref(false)
 const tableData = ref([])
 function getTableData(){
+    tableLoading.value = true
     apiAudio.getAudioList({
         PageSize:tableQuery.pageSize,
         CurrentIndex:tableQuery.currentPage,
         SortType:tableQuery.sortType,
         KeyWord:tableQuery.keyWord
     }).then(res=>{
+        tableLoading.value = false
         if(res.Ret!==200) return 
         tableData.value = res.Data.List||[]
         tableQuery.totals = res.Data.Paging.Totals||0
@@ -99,7 +102,7 @@ function handleSortChange({order,prop}){
                 @input="handlePageChange(1)"/>
         </div>
         <div class="table-box">
-            <el-table stripe border :data="tableData" @sort-change="handleSortChange">
+            <el-table stripe border :data="tableData" @sort-change="handleSortChange" element-loading-text="数据加载中..." v-loading="tableLoading">
                 <el-table-column 
                     v-for="column in tableColumns" :key="column.key"
                     :prop="column.key" :label="column.label" :sortable="column.sortable" :width="column.width">
@@ -120,7 +123,7 @@ function handleSortChange({order,prop}){
             <el-pagination
                 background
                 layout="total,prev,pager,next,jumper"
-                :current-page="tableQuery.page"
+                :current-page="tableQuery.currentPage"
                 :page-size="tableQuery.pageSize"
                 :total="tableQuery.totals"
                 @current-change="handlePageChange"

src/views/media/PictureLibrary.vue

@@ -22,6 +22,7 @@ let picUploadShow = ref(false)
 let curPicData = ref({})
 function handlePicUploadShow(data={}){
     curPicData.value = cloneDeep(data)
+    formRef.value?.clearValidate()
     picUploadShow.value = true
 }
 function handleEdit(data){
@@ -55,8 +56,10 @@ function getLabelOptions(){
     })
 }
 getLabelOptions()
+const tableLoading = ref(false)
 const tableData = ref([])
 function getTableData(){
+    tableLoading.value = true
     apiImgSource.getImgSourceList({
         KeyWord:tableQuery.keyWord,
         PermissionIds:Array.isArray(tableQuery.labels)?tableQuery.labels.join(','):'',
@@ -64,6 +67,7 @@ function getTableData(){
         CurrentIndex:tableQuery.currentPage,
         PageSize:tableQuery.pageSize
     }).then(res=>{
+        tableLoading.value = false
         if(res.Ret!==200) return 
         tableData.value = res.Data.List||[]
         tableQuery.totals = res.Data.Paging.Totals||0
@@ -93,8 +97,16 @@ function handleUploadImg(file){
         curPicData.value.SrcUrl = res.Data?.Url||''
     })
 }
+const rules = {
+    SrcUrl:[{required:true,message:'请上传图片'}],
+    ImgName:[{required:true,message:'请输入图片名称'}],
+    PermissionId:[{required:true,message:'请选择关联标签'}],
+}
+const formRef = ref(null)
 async function handleSavePic(){
-    //rule check
+    try{
+        await formRef.value?.validate()
+    }catch(e){ return }
     const params = {
         ImageName:curPicData.value.ImgName,
         SrcUrl:curPicData.value.SrcUrl,
@@ -108,6 +120,10 @@ async function handleSavePic(){
     getTableData()
     picUploadShow.value = false
 }
+function handleSortChange({order,prop}){
+    tableQuery.sortType = order==='ascending'?'asc':'desc'
+    getTableData()
+}
 </script>
 
 <template>
@@ -126,6 +142,7 @@ async function handleSavePic(){
                 :options="labelOptions"
                 collapse-tags
                 collapse-tags-tooltip
+                clearable
                 :props="{
                     value:'id',
                     label:'name',
@@ -140,7 +157,7 @@ async function handleSavePic(){
             />
         </div>
         <div class="table-box">
-            <el-table stripe border :data="tableData">
+            <el-table stripe border :data="tableData" element-loading-text="数据加载中..." v-loading="tableLoading" @sort-change="handleSortChange">
                 <el-table-column 
                     align="center"
                     v-for="column in tableColumns" :key="column.key"
@@ -168,7 +185,7 @@ async function handleSavePic(){
             <el-pagination
                 background
                 layout="total,prev,pager,next,jumper"
-                :current-page="tableQuery.page"
+                :current-page="tableQuery.currentPage"
                 :page-size="tableQuery.pageSize"
                 :total="tableQuery.totals"
                 @current-change="handlePageChange"
@@ -178,8 +195,8 @@ async function handleSavePic(){
     </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="照片">
+            <el-form label-width="95px" label-position="left" :model="curPicData" :rules="rules" ref="formRef">
+                <el-form-item label="照片" prop="SrcUrl">
                     <ImageUpload
                         :imgUrl="curPicData.SrcUrl"
                         uploadHint="支持jpg、jpeg、png等格式，建议上传宽高比例为3:4的图片"
@@ -189,11 +206,11 @@ async function handleSavePic(){
                         @remove="curPicData.SrcUrl=''"
                     ></ImageUpload>
                 </el-form-item>
-                <el-form-item label="图片名称">
+                <el-form-item label="图片名称" prop="ImgName">
                     <el-input v-model="curPicData.ImgName" placeholder="请输入图片名称"></el-input>
                 </el-form-item>
-                <el-form-item label="关联标签">
-                    <el-cascader v-model="curPicData.PermissionId" placeholder="请选择关联品种"
+                <el-form-item label="关联标签" prop="PermissionId">
+                    <el-cascader v-model="curPicData.PermissionId" placeholder="请选择关联品种" style="width: 100%;"
                         :options="labelOptions"
                         :props="{
                             value:'id',

src/views/media/VideoList.vue

@@ -26,14 +26,17 @@ const tableColumns = [
 
 let mediaUploadShow = ref(false)
 
+const tableLoading = ref(false)
 const tableData = ref([])
 function getTableData(){
+    tableLoading.value = true
     apiVideo.getVideoList({
         PageSize:tableQuery.pageSize,
         CurrentIndex:tableQuery.currentPage,
         SortType:tableQuery.sortType,
         KeyWord:tableQuery.keyWord
     }).then(res=>{
+        tableLoading.value = false
         if(res.Ret!==200) return 
         tableData.value = res.Data.List||[]
         tableQuery.totals = res.Data.Paging.Totals||0
@@ -100,7 +103,7 @@ function handleSortChange({order,prop}){
                 @input="handlePageChange(1)"/>
         </div>
         <div class="table-box">
-            <el-table stripe border :data="tableData" @sort-change="handleSortChange">
+            <el-table stripe border :data="tableData" @sort-change="handleSortChange" element-loading-text="数据加载中..." v-loading="tableLoading">
                 <el-table-column 
                     align="center"
                     v-for="column in tableColumns" :key="column.key"
@@ -131,7 +134,7 @@ function handleSortChange({order,prop}){
             <el-pagination
                 background
                 layout="total,prev,pager,next,jumper"
-                :current-page="tableQuery.page"
+                :current-page="tableQuery.currentPage"
                 :page-size="tableQuery.pageSize"
                 :total="tableQuery.totals"
                 @current-change="handlePageChange"

src/views/media/components/MediaUpload.vue

@@ -58,7 +58,7 @@ const mediaData = reactive({
 watch(show,(newval)=>{
     if(newval){
         Object.assign(mediaData,props.modifydata)
-        mediaData.labels = mediaData.labels.split(',').map(i=>Number(i))
+        mediaData.labels = mediaData.labels.length?mediaData.labels.split(',').map(i=>Number(i)):''
         const AuthorItem = authorList.value.find(i=>i.Id===mediaData.author)||''
         mediaData.author = AuthorItem
     }else{
@@ -70,6 +70,7 @@ watch(show,(newval)=>{
             mediaCover:'',
             duration:0
         })
+        formRef.value?.clearValidate()
     }
 })
 

src/views/system/RoleList.vue

@@ -77,7 +77,7 @@ async function handleDel(e) {
 <template>
   <div class="system-rolelist-page">
     <div class="shadow-box top-box">
-      <el-button type="primary" @click="handleEdit('')">添加角色</el-button>
+      <el-button type="primary" @click="handleEdit('')" v-permission="'sysuser:roleAdd'">添加角色</el-button>
     </div>
     <div class="shadow-box content-box">
       <el-table
@@ -92,10 +92,10 @@ async function handleDel(e) {
         <el-table-column prop="SysRoleName" label="角色" />
         <el-table-column prop="opt" label="操作">
           <template #default="{ row }">
-            <el-button v-if="row.SysRoleName!=='admin'" link type="primary" @click="handleEdit(row)"
+            <el-button v-if="row.SysRoleName!=='admin'" link type="primary" @click="handleEdit(row)" v-permission="'sysuser:roleEdit'"
               >编辑</el-button
             >
-            <el-button v-if="row.SysRoleName!=='admin'" link type="danger" @click="handleDel(row)"
+            <el-button v-if="row.SysRoleName!=='admin'" link type="danger" @click="handleDel(row)" v-permission="'sysuser:roleConfig'"
               >删除</el-button
             >
           </template>