fix : 修复标签关闭bug, 表格组件列配置, 完善用户管理页面

2024-09-14 16:44:45 +08:00
parent 556c87812a
commit 5e6fd1420f
17 changed files with 537 additions and 587 deletions
--- a/src/fvcomponents/fvForm/index.vue
+++ b/src/fvcomponents/fvForm/index.vue
@@ -11,12 +11,12 @@
        v-bind="item.colProps || { span: 12}"
        :key="item.prop"
      >
-        <el-form-item 
+        <el-form-item
          v-bind="item"
          :key="item.prop"
        >
          <template #default>
-            <component 
+            <component
              v-if="item.component"
              :is="item.component"
              v-bind="item.props || {}"
@@ -62,7 +62,6 @@ const filterSchma = computed(()=>{
  })
 })

-console.log(filterSchma.value, 'filterSchma');

 const validate = async () => {
  let validObj = {}
@@ -106,4 +105,4 @@ defineExpose({ getValues, setValues, validate, resetFields, formInstance, form }

 <style lang="scss" scoped>

-</style>
+</style>
--- a/src/fvcomponents/fvFormDialog/index.vue
+++ b/src/fvcomponents/fvFormDialog/index.vue
@@ -0,0 +1,62 @@
+<template>
+  <el-dialog v-model="localDialogParams.localVisited" :title="localDialogParams.localTitle" :width="localDialogParams.localWidth+'px'">
+    <fvForm :schema="localDialogParams.localFormSchema" @getInstance="(e)=>baseForm = e" label-position="right" :rules="localDialogParams.localFormRules"></fvForm>
+    <template #footer>
+      <span>
+        <el-button @click="handleCancel">取消</el-button>
+        <el-button type="primary" @click="handleSubmit">确定</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+const emits = defineEmits(['getInstance'])
+const props = defineProps({
+  isVisited: {
+    type: Boolean,
+    default: true
+  },
+  title: {
+    type: Boolean,
+    default: true
+  },
+  width: {
+    type: String,
+    default: '700'
+  },
+  formSchema: {
+    type: Function,
+    default: ()=>{}
+  },
+  formRules: {
+    type: Object,
+    default: {}
+  }
+})
+const baseForm = ref()
+const localDialogParams = ref({})
+watchEffect(()=>{
+  localDialogParams.value.localVisited = props.isVisited
+  localDialogParams.value.localTitle = props.title
+  localDialogParams.value.localWidth = props.width
+  localDialogParams.value.localFormSchema = props.formSchema
+  localDialogParams.value.localFormRules = props.formRules
+})
+const getFormInstance=()=>{
+  return baseForm.value
+}
+const handleCancel=()=>{
+  emits('dialogCancel')
+}
+const handleSubmit=()=>{
+  emits('dialogSubmit',baseForm.value)
+}
+defineExpose({
+  getFormInstance
+})
+</script>
+
+<style scoped>
+
+</style>
--- a/src/fvcomponents/fvRadio/index.vue
+++ b/src/fvcomponents/fvRadio/index.vue
@@ -15,7 +15,7 @@ const props = defineProps({
    default: []
  },
  modelValue: {
-    type: [Number, String],
+    type: [Number, String, Boolean],
    default: ''
  },
  cacheKey: {
--- a/src/fvcomponents/fvSearchForm/index.vue
+++ b/src/fvcomponents/fvSearchForm/index.vue
@@ -28,7 +28,8 @@
          </template>
        </el-form-item>
      </el-col>
-      <el-col :span="filterConfig.length % 4 == 0 ? 4 : 6" class="btn-col">
+<!--      class="btn-col"-->
+      <el-col :span="filterConfig.length % 4 == 0 ? 4 : 6" :offset="1">
        <el-form-item>
          <el-button v-if="searchConfig.length>=4" link type="primary" @click="showMore = !showMore">
            {{ showMore ? '收起' : '展开' }}
@@ -65,21 +66,25 @@ const filterConfig = computed(()=>{
  return arr.length >= 4 && showMore.value ? arr : arr.slice(0, 3)
 })

-console.log(filterConfig.value, 'filterConfig');
-
 // 搜索功能表单元素默认值
-const setDefaultFormValues = () => {
-  filterConfig.value.forEach(item=>{
-    form.value[item.prop] = item.props.defaultValue || null
-  })
-}
+// const setDefaultFormValues = () => {
+//   filterConfig.value.forEach(item => {
+//     form.value[item.prop] = item.props?.defaultValue || null
+//   })
+// }

-watchEffect(()=>{
-  if(filterConfig.value.length) {
-    setDefaultFormValues()
+watchEffect(() => {
+  if (filterConfig.value.length) {
+    // setDefaultFormValues()
  }
 })

+const elChange = () => {
+  setTimeout(() => {
+    getValues()
+  }, 500)
+}
+
 const getValues = () => {
  emits('search', form.value)
  return form.value
@@ -88,7 +93,7 @@ const getValues = () => {
 //重置
 const handleReset = () => {
  form.value = {}
-  setDefaultFormValues()
+  // setDefaultFormValues()
  emits('search', form.value)
 }

--- a/src/fvcomponents/fvTable/index.vue
+++ b/src/fvcomponents/fvTable/index.vue
@@ -2,35 +2,74 @@
  <div class="fv-table-container">
    <!-- 表格头部按钮 -->
    <div class="fv-table-btn" v-if="tableConfig.btns">
-      <el-button 
-        v-for="btn in tableConfig.btns"
-        :key="btn.key" 
-        :type="btn.type || ''"
-        v-perm="btn.auth || ['*:*:*']"
-        @click="handleClickBtns(btn.key)"
-      >
-        {{ btn.name }}
-      </el-button>
+      <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)"
+        >
+          {{ btn.name }}
+        </el-button>
+      </div>
+    </div>
+    <!-- 列显示配置 -->
+    <div v-if="isSettingCol" style="float: right">
+      <!--      <el-button v-if="tableConfig.export && tableConfig.export.open" @click="exportTable" color="#DED0B2"-->
+      <!--                 style="margin-bottom: 10px">导出-->
+      <!--      </el-button>-->
+      <el-tooltip effect="dark" content="列配置" placement="bottom">
+        <el-button ref="buttonRef" link>
+          <el-icon size="18">
+            <Setting/>
+          </el-icon>
+        </el-button>
+      </el-tooltip>
+      <el-popover
+          placement="bottom"
+          :width="200"
+          ref="popoverRef"
+          :virtual-ref="buttonRef"
+          virtual-triggering
+          trigger="click">
+        <div class="col-setting-checkall">
+          <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">
+            <el-space direction="vertical" alignment="flex-start" :size="0">
+              <el-checkbox
+                  v-for="item in tableConfig.columns"
+                  :key="item.prop"
+                  :label="item.label"
+                  :value="item.prop"
+              />
+            </el-space>
+          </el-checkbox-group>
+        </div>
+      </el-popover>
    </div>
    <!-- 表格部分 -->
    <div class="fv-table">
      <el-table
-        :data="localData.list"
-        v-loading="localData.loading"
-        :row-key="tableConfig?.rowKey || 'id'"
-        v-bind="$attrs"
-        table-layout="fixed"
-        :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"
+          :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 tableConfig.columns" :key="column.prop" :columns="column">
+          <fvTableColumn v-for="column in localData.columns" :key="column.prop" :columns="column">
            <template v-if="column?.slots?.header" #[column?.slots?.header]="params">
              <slot :name="column?.slots?.header" v-bind="params || {}"></slot>
            </template>
@@ -47,23 +86,24 @@
        </template>
      </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"
-        >
+      <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"
+      >
      </fvPagination>
    </div>
  </div>
 </template>

 <script setup>
-import { ElMessage } from 'element-plus';
+import { ElMessage,ElNotification } from 'element-plus';
 import { requestList } from '../../api/common';
+// import {exportExcel} from "@/utils/export-excel";

 const props = defineProps({
  //表格配置
@@ -80,10 +120,31 @@ const props = defineProps({
  pagination: {
    type: Boolean,
    default: true
+  },
+  // 是否显示列配置
+  isSettingCol: {
+    type: Boolean,
+    default: true
  }
 })

 const tableInstance = ref()
+const buttonRef = ref()
+const popoverRef = ref()
+
+
+const exportTable = () => {
+  const $e = tableInstance.value.$el
+  let $table = $e.querySelector('.el-table__fixed')
+  if (!$table) {
+    $table = $e
+  }
+  let fileName = ""
+  if (props.tableConfig.export && props.tableConfig.export) {
+    fileName = props.tableConfig.export.fileName
+  }
+  exportExcel($table, Object.keys(localData.list[0]), fileName)
+}

 const localData = reactive({
  list: [], // 表格数据
@@ -92,32 +153,104 @@ const localData = reactive({
    pageNum: 1
  },
  total: 0,
-  loading: false
+  loading: false,
+  // 列展示设置
+  columns: [],
+  allColShow: true, // 默认全部列都展示
+  indeterminate: false,
+  checkGroup: []
 })

-const emits = defineEmits(['headBtnClick', 'selectionChange', 'rowClick', 'rowDblclick', 'getBaseQuery', 'cellClick'])
+const emits = defineEmits(['headBtnClick', 'selectionChange', 'rowClick', 'rowDblclick', 'getBaseQuery', 'cellClick', 'getTotal'])

 const handleClickBtns = (key) => {
  emits('headBtnClick', key)
 }

+const filterColumns = () => {
+  localData.columns = props.tableConfig.columns.map(item => {
+    if (item.prop) {
+      return {
+        ...item
+      }
+    }
+  })
+}
+
+const changeIsShowAll = (val) => {
+  if (val) {
+    filterColumns()
+    localData.indeterminate = false
+    localData.checkGroup = props.tableConfig.columns.map(item => item.prop)
+  } else {
+    localData.columns.length = 0
+    localData.checkGroup.length = 0
+    localData.indeterminate = false
+  }
+}
+
+const changeColShow = (val) => {
+  if (val.length == props.tableConfig.columns.length) {
+    localData.indeterminate = false
+    localData.allColShow = true
+  } else if (val.length !== props.tableConfig.columns.length && val.length != 0) {
+    localData.allColShow = false
+    localData.indeterminate = true
+  } else {
+    localData.indeterminate = false
+    localData.allColShow = false
+  }
+  const template = []
+  props.tableConfig.columns.forEach(item => {
+    val.forEach(v => {
+      if (item.prop == v) {
+        template.push(item)
+      }
+    })
+  })
+  localData.columns = template
+}
+
+filterColumns()
+
 const getList = async () => {
  const { api, params } = props.tableConfig
  const queryParmas = {...localData.query, ...params}
  if(api) {
    localData.loading = true
    try {
-      const { code, data, msg } = await requestList(api, queryParmas)
-      if ( code === 1000 ) {
-        localData.list = data.rows
+      const {code, data, msg} = await requestList(api, queryParmas).then(res=>{
+        // console.log(res)
+        return res
+      })
+      // console.log(code,data,msg)
+      if (code === 1000) {
+        if (data.rows) {
+          localData.list = data.rows
+        } else {
+          localData.list = data
+        }
        localData.total = data.total
+        emits('getTotal', localData.total)
        localData.loading = false
      } else {
-        ElMessage.error(msg)
+        ElNotification({
+          title: '提示',
+          message: msg,
+          type: 'error'
+        })
        localData.loading = false
      }
    } catch (error) {
-      ElMessage.error('请求数据失败')
+      console.log("error",error)
+      if (!error){
+        return
+      }
+      ElNotification({
+        title: '提示',
+        message: '请求数据失败',
+        type: 'error'
+      })
      localData.loading = false
    }
  } else {
@@ -154,13 +287,11 @@ const handleCurrentChange = (val) => {
  getList()
 }

-// watchEffect(()=>{
-//   if(!props.tableConfig.api) {
-//     localData.list = props.data
-//   }else {
-//     getList()
-//   }
-// })
+watchEffect(() => {
+  if (localData.allColShow) {
+    localData.checkGroup = props.tableConfig.columns.map(item => item.prop)
+  }
+})
 //刷新
 const refresh = ({resetPage=false}={}) => {
  resetPage ? localData.query.pageNum = 1 : null
@@ -180,9 +311,34 @@ defineExpose({ refresh, updateLoading, getQuery, tableInstance })
 onMounted(() => {
  getList()
 })
- 
+
 </script>

 <style lang="scss" scoped>
+.col-setting-checkall {
+  border-bottom: 1px solid rgb(210, 210, 213);
+}

-</style>
+.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;
+  }
+}
+</style>
--- a/src/fvcomponents/fvTableColumn/index.vue
+++ b/src/fvcomponents/fvTableColumn/index.vue
@@ -49,7 +49,7 @@ import { isVNode } from 'vue'
    if(column && column?.formatter) {
      return column.formatter(row, column, value, $index) || '--'
    }
-    return value ? value.toString() : '--'
+    return value !== null && value !== undefined ? value.toString() : '--'
  }
 </script>