fix : 修复需求征集界面样式及提示

src/fvcomponents/fvTable/index.vue

@@ -4,12 +4,12 @@
     <div class="fv-table-btn" v-if="tableConfig.btns">
       <div class="table-head-btn">
         <el-button
-          v-for="btn in tableConfig.btns"
-          :key="btn.key"
-          :type="btn.type || ''"
-          :color="btn.color || ''"
-          v-perm="btn.auth || ['*:*:*']"
-          @click="handleClickBtns(btn.key)"
+            v-for="btn in tableConfig.btns"
+            :key="btn.key"
+            :type="btn.type || ''"
+            :color="btn.color || ''"
+            v-perm="btn.auth || ['*:*:*']"
+            @click="handleClickBtns(btn.key)"
         >
           {{ btn.name }}
         </el-button>
@@ -19,7 +19,9 @@
     <div v-if="isSettingCol" style="float: right">
       <el-tooltip effect="dark" content="列配置" placement="bottom">
         <el-button ref="buttonRef" link>
-          <el-icon size="18"><Setting /></el-icon>
+          <el-icon size="18">
+            <Setting/>
+          </el-icon>
         </el-button>
       </el-tooltip>
       <el-popover
@@ -30,7 +32,8 @@
           virtual-triggering
           trigger="click">
         <div class="col-setting-checkall">
-          <el-checkbox label="列展示" v-model="localData.allColShow" :indeterminate="localData.indeterminate" @change="changeIsShowAll"></el-checkbox>
+          <el-checkbox label="列展示" v-model="localData.allColShow" :indeterminate="localData.indeterminate"
+                       @change="changeIsShowAll"></el-checkbox>
         </div>
         <div class="col-setting-list">
           <el-checkbox-group v-model="localData.checkGroup" @change="changeColShow">
@@ -49,19 +52,19 @@
     <!-- 表格部分 -->
     <div class="fv-table">
       <el-table
-        :data="localData.list"
-        v-loading="localData.loading"
-        :row-key="tableConfig?.rowKey || 'id'"
-        v-bind="$attrs"
-        table-layout="auto"
-        :show-overflow-tooltip="true"
-        highlight-current-row
-        @selection-change="selectionChange"
-        @row-click="rowClick"
-        @row-dblclick="rowDblclick"
-        @cell-click="cellClick"
-        v-tabh
-        ref="tableInstance"
+          :data="localData.list"
+          v-loading="localData.loading"
+          :row-key="tableConfig?.rowKey || 'id'"
+          v-bind="$attrs"
+          table-layout="auto"
+          :show-overflow-tooltip="true"
+          highlight-current-row
+          @selection-change="selectionChange"
+          @row-click="rowClick"
+          @row-dblclick="rowDblclick"
+          @cell-click="cellClick"
+          v-tabh
+          ref="tableInstance"
       >
         <template #default>
           <fvTableColumn v-for="column in localData.columns" :key="column.prop" :columns="column">
@@ -82,22 +85,22 @@
       </el-table>
       <!-- 分页 -->
       <fvPagination
-        v-if="pagination"
-        :current-page="localData.query.pageNum"
-        :page-size="localData.query.pageSize"
-        :page-sizes="[10, 20, 30, 40,50]"
-        :total="localData.total"
-        @changeSize="handleSizeChange"
-        @goPage="handleCurrentChange"
-        >
+          v-if="pagination"
+          :current-page="localData.query.pageNum"
+          :page-size="localData.query.pageSize"
+          :page-sizes="[10, 20, 30, 40,50]"
+          :total="localData.total"
+          @changeSize="handleSizeChange"
+          @goPage="handleCurrentChange"
+      >
       </fvPagination>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ElMessage } from 'element-plus';
-import { requestList } from '../../api/common';
+import {ElNotification} from 'element-plus';
+import {requestList} from '../../api/common';
 
 const props = defineProps({
   //表格配置
@@ -148,8 +151,8 @@ const handleClickBtns = (key) => {
 }
 
 const filterColumns = () => {
-  localData.columns = props.tableConfig.columns.map(item=>{
-    if(item.prop) {
+  localData.columns = props.tableConfig.columns.map(item => {
+    if (item.prop) {
       return {
         ...item
       }
@@ -158,10 +161,10 @@ const filterColumns = () => {
 }
 
 const changeIsShowAll = (val) => {
-  if(val) {
+  if (val) {
     filterColumns()
     localData.indeterminate = false
-    localData.checkGroup = props.tableConfig.columns.map(item=>item.prop)
+    localData.checkGroup = props.tableConfig.columns.map(item => item.prop)
   } else {
     localData.columns.length = 0
     localData.checkGroup.length = 0
@@ -170,10 +173,10 @@ const changeIsShowAll = (val) => {
 }
 
 const changeColShow = (val) => {
-  if(val.length == props.tableConfig.columns.length) {
+  if (val.length == props.tableConfig.columns.length) {
     localData.indeterminate = false
     localData.allColShow = true
-  } else if(val.length !== props.tableConfig.columns.length && val.length != 0) {
+  } else if (val.length !== props.tableConfig.columns.length && val.length != 0) {
     localData.allColShow = false
     localData.indeterminate = true
   } else {
@@ -181,9 +184,9 @@ const changeColShow = (val) => {
     localData.allColShow = false
   }
   const template = []
-  props.tableConfig.columns.forEach(item=>{
-    val.forEach(v=>{
-      if(item.prop == v) {
+  props.tableConfig.columns.forEach(item => {
+    val.forEach(v => {
+      if (item.prop == v) {
         template.push(item)
       }
     })
@@ -194,22 +197,31 @@ const changeColShow = (val) => {
 filterColumns()
 
 const getList = async () => {
-  const { api, params } = props.tableConfig
+  const {api, params} = props.tableConfig
   const queryParmas = {...localData.query, ...params}
-  if(api) {
+  if (api) {
     localData.loading = true
     try {
-      const { code, data, msg } = await requestList(api, queryParmas)
-      if ( code === 1000 ) {
+      const {code, data, msg} = await requestList(api, queryParmas)
+
+      if (code === 1000) {
         localData.list = data.rows
         localData.total = data.total
         localData.loading = false
       } else {
-        ElMessage.error(msg)
+        ElNotification({
+          title: '提示',
+          message: msg,
+          type: 'error'
+        })
         localData.loading = false
       }
     } catch (error) {
-      ElMessage.error('请求数据失败')
+      ElNotification({
+        title: '提示',
+        message: '请求数据失败',
+        type: 'error'
+      })
       localData.loading = false
     }
   } else {
@@ -246,13 +258,13 @@ const handleCurrentChange = (val) => {
   getList()
 }
 
-watchEffect(()=>{
-  if(localData.allColShow) {
-    localData.checkGroup = props.tableConfig.columns.map(item=>item.prop)
+watchEffect(() => {
+  if (localData.allColShow) {
+    localData.checkGroup = props.tableConfig.columns.map(item => item.prop)
   }
 })
 //刷新
-const refresh = ({resetPage=false}={}) => {
+const refresh = ({resetPage = false} = {}) => {
   resetPage ? localData.query.pageNum = 1 : null
   getList()
 }
@@ -265,7 +277,7 @@ const getQuery = () => {
   return localData.query
 }
 
-defineExpose({ refresh, updateLoading, getQuery, tableInstance })
+defineExpose({refresh, updateLoading, getQuery, tableInstance})
 
 onMounted(() => {
   getList()
@@ -277,20 +289,24 @@ onMounted(() => {
 .col-setting-checkall {
   border-bottom: 1px solid rgb(210, 210, 213);
 }
+
 .col-setting-list {
   max-height: 45vh;
   overflow-y: auto;
 }
+
 .table-head-btn {
   display: flex;
   justify-content: flex-start;
   align-items: center;
 }
+
 .fv-table-btn {
   display: flex;
   justify-content: space-between;
   align-content: center;
 }
+
 .fv-table {
   :deep(.el-tooltip) {
     width: 100% !important;