zant-admin 1.0.0

package/src/components/FormTable.vue

@@ -0,0 +1,875 @@
+<template>
+  <div>
+    <div class="table-search" v-if="formState">
+      <a-form
+        name="advanced_search"
+        ref="tableformRef"
+        :model="formState"
+        @finish="onFinish"
+      >
+        <a-row :gutter="24">
+          <template v-for="(v, key, index) in formState" :key="key">
+            <a-col v-show="state.expand || index < formStateShow" :span="6">
+              <a-form-item :name="`${key}`" :label="`${v.label}`">
+                <a-input
+                  v-if="v.type === 'text'"
+                  v-model:value="v.value"
+                  placeholder="请输入"
+                />
+                <a-input-number
+                  v-if="v.type === 'number'"
+                  :min="v.min"
+                  :max="v.max"
+                  :step="v.step"
+                  style="width: 100%"
+                  v-model:value="v.value"
+                  placeholder="请输入"
+                />
+                <a-select
+                  v-if="v.type === 'select'"
+                  v-model:value="v.value"
+                  placeholder="请选择"
+                  :options="v.data"
+                  showSearch
+                  @change="v.onChange"
+                  :filter-option="filterOption"
+                />
+                <a-radio-group
+                  v-if="v.type === 'radio'"
+                  v-model:value="v.value"
+                  :options="v.data"
+                >
+                </a-radio-group>
+                <a-range-picker
+                  v-if="v.type === 'time'"
+                  v-model:value="v.value"
+                  style="width: 100%"
+                  :format="
+                    v.picker === 'month'
+                      ? 'YYYY-MM'
+                      : v.picker === 'year'
+                        ? 'YYYY'
+                        : 'YYYY-MM-DD'
+                  "
+                  :value-format="
+                    v.picker === 'month'
+                      ? 'YYYY-MM'
+                      : v.picker === 'year'
+                        ? 'YYYY'
+                        : 'YYYY-MM-DD'
+                  "
+                  :picker="v.picker"
+                />
+                <a-date-picker
+                  v-if="v.type === 'datetime'"
+                  v-model:value="v.value"
+                  style="width: 100%"
+                  :picker="v.picker"
+                />
+              </a-form-item>
+            </a-col>
+          </template>
+          <a-col
+            :span="forminputbuttonspan"
+            style="text-align: right; margin-bottom: 24px"
+          >
+            <a-space>
+              <a
+                style="font-size: 12px; margin-right: 20px"
+                v-if="formStatelength > formStateShow"
+                @click="state.expand = !state.expand"
+              >
+                <template v-if="state.expand"> <UpOutlined />收起 </template>
+                <template v-else> <DownOutlined />更多搜索条件 </template>
+              </a>
+              <a-button  type="primary" html-type="submit">搜索</a-button>
+              <a-button  style="margin: 0 8px" @click="resetForm">重置</a-button>
+            </a-space>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+    <div class="card-table">
+      <a-table
+        :columns="filteredColumns"
+        :dataSource="state.dataSource"
+        :pagination="page ? pagination : false"
+        :rowSelection="rowSelect ? rowSelection : null"
+        :loading="state.loading"
+        rowKey="id"
+        :size="formConfig.tableSize"
+        :bordered="formConfig.tableBordered"
+        @change="handleTableChange"
+        :scroll="scroll"
+        @resizeColumn="handleResizeColumn"
+      >
+        <!-- 插槽部分 -->
+        <template #bodyCell="{ column, record, index }">
+          <template v-if="column.key === 'num'">
+            <span>{{
+              (pagination.current - 1) * pagination.pageSize + index + 1
+            }}</span>
+          </template>
+          <template v-if="column.key === 'operation'">
+            <!-- 插槽内容 -->
+            <a  v-permission="getPermission('details')" @click="details(record)">详情</a>
+            <a-divider
+              v-if="hasDetailsPermission && (hasEditPermission || hasDeletePermission)"
+              type="vertical"
+            />
+            <a  v-permission="getPermission('update')" @click="edit(record)">修改</a>
+            <a-divider v-if="hasEditPermission && hasDeletePermission" type="vertical" />
+            <a-popconfirm
+              title="确定要删除该数据吗?"
+              @confirm="tabelDelete(record)"
+            >
+            <a v-permission="getPermission('delete')">删除</a>
+            </a-popconfirm>
+          </template>
+          <!-- 如果父组件传递了对应列的插槽，则渲染插槽内容，否则默认展示数据 -->
+          <slot
+            :name="`custom-${column.key}`"
+            :record="record"
+            :column="column"
+          >
+            {{ record[column.dataIndex] }}
+          </slot>
+        </template>
+        <!-- 新增合计插槽 -->
+        <template #summary>
+          <slot
+            name="summary"
+            :dataSource="state.dataSource"
+            :columns="filteredColumns"
+          ></slot>
+        </template>
+        <template #title>
+          <div class="flex-row">
+            <div class="flex-item text-align-left">
+              <a-space>
+                <a-button
+                  type="primary"
+                  v-permission="getPermission('add')"
+                  @click="edit"
+                  size="middle"
+                >
+                  <PlusOutlined />新增
+                </a-button>
+                <a-button
+                  type="primary"
+                  v-permission="getPermission('delete')"
+                  @click="batchDelete"
+                  :disabled="!hasSelected"
+                  danger
+                  size="middle"
+                >
+                  <DeleteOutlined />删除
+                </a-button>
+                <a-button
+                 type="primary"
+                  v-permission="getPermission('export')"
+                  @click="dataExport"
+                  size="middle"
+                >
+                  <ExportOutlined />导出
+                </a-button>
+                <a-button
+                 type="primary"
+                  v-permission="getPermission('import')"
+                  @click="showImportModal"
+                  size="middle"
+                >
+                  <ImportOutlined />导入
+                </a-button>
+                <slot :name="'table-toolbar'"></slot>
+              </a-space>
+            </div>
+            <div class="flex-item text-align-right padding-right-10">
+              <a-space size="large">
+                <a class="text-color-black" @click.prevent @click="tableLoad">
+                  <RedoOutlined />
+                </a>
+                <a-dropdown class="">
+                  <a class="text-color-black" @click.prevent>
+                    <ColumnHeightOutlined />
+                  </a>
+                  <template #overlay>
+                    <a-menu @click="dropdownonTableSizeClick">
+                      <a-menu-item key="large"> 默认 </a-menu-item>
+                      <a-menu-item key="middle"> 中等 </a-menu-item>
+                      <a-menu-item key="small"> 紧凑 </a-menu-item>
+                    </a-menu>
+                  </template>
+                </a-dropdown>
+                <a-dropdown
+                  :trigger="['click']"
+                  :open="dropdownVisible"
+                  @openChange="handleDropdownVisibility"
+                >
+                  <a class="text-color-black" @click.prevent>
+                    <AlignCenterOutlined />
+                  </a>
+                  <template #overlay>
+                    <a-checkbox-group
+                      v-model:value="checkedColumns"
+                      @change="handleColumnChange"
+                    >
+                      <a-menu>
+                        <a-menu-item
+                          v-for="col in columns"
+                          :key="col.dataIndex"
+                        >
+                          <a-checkbox :value="col.dataIndex" @click.stop>{{
+                            col.title
+                          }}</a-checkbox>
+                        </a-menu-item>
+                      </a-menu>
+                    </a-checkbox-group>
+                  </template>
+                </a-dropdown>
+              </a-space>
+            </div>
+          </div>
+        </template>
+      </a-table>
+    </div>
+
+    <!-- 导入模态框 -->
+    <a-modal
+      v-model:open="importModalVisible"
+      title="数据导入"
+      :footer="null"
+      width="650px"
+    >
+      <div class="import-modal-content">
+        <a-space direction="vertical" style="width: 100%">
+          <a-card title="" :bordered="false">
+            <a-upload-dragger
+              :file-list="fileList"
+              :before-upload="beforeUpload"
+              @remove="handleRemove"
+              accept=".xlsx,.xls"
+              :multiple="false"
+            >
+              <p class="ant-upload-drag-icon">
+                <InboxOutlined />
+              </p>
+              <p class="ant-upload-text">点击或拖拽文件到此区域上传</p>
+              <p class="ant-upload-hint">
+                仅支持单个文件上传，只接受.xlsx、.xls格式的Excel文件，文件大小不能超过10MB
+              </p>
+            </a-upload-dragger>
+            <div class="upload-actions">
+              <a-button
+                type="primary"
+                :disabled="fileList.length === 0"
+                :loading="uploading"
+                @click="handleUpload"
+              >
+                {{ uploading ? '上传中...' : '开始导入' }}
+              </a-button>
+            </div>
+          </a-card>
+
+          <a-card title="导入模板" :bordered="false" class="template-card">
+            <div class="template-content">
+              <div class="template-info">
+                <FileExcelOutlined class="template-icon" />
+                <div class="template-description">
+                  <h4>Excel导入模板</h4>
+                  <p>请先下载导入模板，按照模板格式填写数据后再进行导入</p>
+                  <ul class="template-tips">
+                    <li>支持.xlsx、.xls格式的Excel文件</li>
+                    <li>请按照模板中的字段顺序填写数据</li>
+                    <li>必填字段不能为空</li>
+                    <li>数据格式需与模板保持一致</li>
+                  </ul>
+                </div>
+              </div>
+              <div class="template-action">
+                <a-button type="primary" size="large" @click="downloadTemplate">
+                  <DownloadOutlined />
+                  下载模板
+                </a-button>
+              </div>
+            </div>
+          </a-card>
+        </a-space>
+      </div>
+    </a-modal>
+  </div>
+</template>
+<script setup>
+import { ref, defineProps, defineEmits, reactive, computed } from 'vue'
+import { configStore } from '@/stores/config'
+import { menuStore } from '@/stores/menu'
+import { post, get, downloadFilePost } from '@/api/request'
+import { Modal, message } from 'ant-design-vue'
+import { saveAs } from 'file-saver'
+import {
+  PlusOutlined,
+  DeleteOutlined,
+  ExportOutlined,
+  ImportOutlined,
+  UploadOutlined,
+  DownloadOutlined,
+  RedoOutlined,
+  ColumnHeightOutlined,
+  AlignCenterOutlined,
+  UpOutlined,
+  DownOutlined,
+  InboxOutlined,
+  FileExcelOutlined
+} from '@ant-design/icons-vue'
+
+const config = configStore()
+const menu = menuStore()
+const formConfig = reactive({
+  tableSize: config.tableSize,
+  tableBordered: config.tableBordered,
+})
+// 根据模块路径生成权限标识
+const getPermission = (action) => {
+  // 优先使用 permissionModulePath，如果不存在则使用 modulePath
+  const pathToUse = props.permissionModulePath || props.modulePath
+  if (!pathToUse) return `table:${action}`
+  // 将路径转换为权限标识，例如：/sys/user -> sys:user
+  const pathPermission = pathToUse.replace(/^\//, '').replace(/\//g, ':')
+  return `${pathPermission}:${action}`
+}
+
+// 检查按钮权限的计算属性
+const hasDetailsPermission = computed(() => {
+  return  menu.hasPermission(getPermission('details'))
+})
+
+const hasEditPermission = computed(() => {
+  return menu.hasPermission(getPermission('update'))
+})
+
+const hasDeletePermission = computed(() => {
+  return menu.hasPermission(getPermission('delete'))
+})
+
+// 定义 props
+const props = defineProps({
+  formStateShow: {
+    //筛选条件控制显示隐藏数量
+    type: Int32Array,
+    default: 7,
+  },
+  formState: Object, //表格上面搜索条件
+  modulePath: String, //模块路径
+  permissionModulePath: String, //权限模块路径，用于生成权限标识
+  pageAction: {
+    //分页方法名称
+    type: String,
+    default: 'page',
+  },
+  where: {
+    //查询条件
+    type: Array,
+    default: [],
+  },
+  ftableAdd: {
+    //新增方法名称
+    type: Boolean,
+    default: false,
+  },
+  ftableDeleteAction: {
+    //删除方法名称
+    type: String,
+    default: 'delete',
+  },
+  ftableExportAction: {
+    //导出方法名称
+    type: String,
+    default: 'export',
+  },
+  method: {
+    //请求方法
+    type: String,
+    default: 'post',
+  },
+  page: {
+    //是否分页
+    type: Boolean,
+    default: true,
+  },
+  columns: {
+    type: Array,
+    default: () => [],
+  }, //列
+  rowSelect: {
+    //选择行
+    type: Boolean,
+    default: true,
+  },
+  scroll: {
+    //选择行
+    type: Object,
+    default: () => ({
+      x: 1200,
+    }),
+  },
+})
+const state = reactive({
+  loading: false, //表格加载中状态
+  params: {}, //表单请求条件参数
+  expand: false, // 表单判断是从合并展开属性
+  dataSource: [], //定义表格数据源
+  selectedRowKeys: [], //表格选中行
+})
+
+// 导入相关状态
+const importModalVisible = ref(false) // 导入模态框显示状态
+const fileList = ref([]) // 上传文件列表
+const uploading = ref(false) // 上传状态
+// // 根据模块路径生成权限标识
+// const getPermission = (action) => {
+
+//  return `${props.permissionModulePath}:${action}`
+// }
+const formStatelength = ref(
+  props.formState ? Object.keys(props.formState).length : 0,
+)
+const forminputbuttonspan = computed(() => {
+  const values = [18, 12, 6, 24]
+  if (state.expand) {
+    const index = (formStatelength.value - 1) % values.length
+    return values[index]
+  } else {
+    if (formStatelength.value >= props.formStateShow) {
+      return 6
+    } else if (formStatelength.value < props.formStateShow) {
+      const index = (formStatelength.value - 1) % values.length
+      return values[index]
+    }
+  }
+})
+// 表单选择器属性
+const filterOption = (input, option) => {
+  return option.label.toLowerCase().includes(input.toLowerCase())
+}
+//表单重置属性
+const tableformRef = ref(null)
+//表单搜索按钮事件
+const onFinish = values => {
+  pagination.value.current = 1
+  tableLoad()
+}
+//重置表单
+const resetForm = () => {
+  Object.keys(props.formState).forEach(key => {
+    props.formState[key].value = props.formState[key].defaultvalue // 重置输入框
+  })
+  onFinish()
+}
+//列的显示/隐藏选择器
+const dropdownVisible = ref(false)
+const handleDropdownVisibility = visible => {
+  dropdownVisible.value = visible
+}
+const handleColumnChange = checkedValues => {
+  checkedColumns.value = checkedValues
+}
+const initialCheckedColumns = props.columns.map(col => col.dataIndex)
+const checkedColumns = ref([...initialCheckedColumns])
+const filteredColumns = computed(() =>
+  props.columns.filter(col => checkedColumns.value.includes(col.dataIndex)),
+)
+// 分页配置
+const pagination = ref({
+  current: 1,
+  pageSize: 10,
+  total: 0,
+  showTotal: total => `共 ${total} 条`,
+  showSizeChanger: true,
+  pageSizeOptions: ['10', '20', '30', '40'],
+  showQuickJumper: true,
+})
+const hasSelected = computed(() => state.selectedRowKeys.length > 0)
+//选择行事件
+const rowSelection = {
+  onChange: (selectedRowKeys, selectedRows) => {
+    state.selectedRowKeys = selectedRowKeys
+  },
+}
+// 分页和表格变化处理
+const handleTableChange = newPagination => {
+  pagination.value = {
+    ...pagination.value,
+    ...newPagination,
+  }
+  tableLoad()
+}
+
+const loaddata = () => {
+  var values = props.formState
+  if (values) {
+    const newValues = Object.keys(values).reduce((acc, key) => {
+      const item = values[key]
+      switch (key) {
+        case 'createTime':
+          if (Array.isArray(item.value) && item.value.length > 0) {
+            acc[key] = item.value.join('~')
+          } else {
+            acc[key] = item.value
+          }
+          break
+        case 'finishTime':
+          if (Array.isArray(item.value) && item.value.length > 0) {
+            acc[key] = item.value.join('~')
+          } else {
+            acc[key] = item.value
+          }
+          break
+        case 'year':
+          if (item.value != null) {
+            // 确保是 dayjs 对象
+            acc[key] = item.value?.format?.('YYYY') || item.value
+          } else {
+            acc[key] = null
+          }
+          break
+        default:
+          acc[key] = values[key].value
+          break
+      }
+      return acc
+    }, {})
+    state.params = newValues
+  }
+
+  var data = state.params
+  Object.assign(data, props.where)
+  return data
+}
+//加载表格数据
+const tableLoad = () => {
+  state.loading = true
+  var data = loaddata()
+  if (props.page) {
+    data.page = pagination.value.current
+    data.size = pagination.value.pageSize
+  }
+  if (props.method == 'post') {
+    post(props.modulePath + '/' + props.pageAction, data).then(res => {
+      state.loading = false
+      state.dataSource = res.data
+      if (props.page) pagination.value.total = res.count // 计算总条数
+      emit('load-complete', res.data) // 发射事件
+    })
+  }
+  if (props.method == 'get') {
+    get(props.modulePath + '/' + props.pageAction, data).then(res => {
+      state.loading = false
+      state.dataSource = res.data
+      if (props.page) pagination.value.total = res.count // 计算总条数
+      emit('load-complete', res.data) // 发射事件
+    })
+  }
+}
+tableLoad()
+//表格选择size
+const dropdownonTableSizeClick = ({ key }) => {
+  config.tableSize = key
+  formConfig.tableSize = key
+}
+const emit = defineEmits(['edit', 'details'])
+//编辑
+const edit = record => {
+  // 触发自定义事件，父组件会监听这个事件
+  emit('edit', record)
+}
+const details = record => {
+  emit('details', record)
+}
+//批量删除
+const batchDelete = () => {
+  Modal.confirm({
+    title: '提示',
+    content: '确定要删除这些数据吗？',
+    onOk() {
+      return new Promise((resolve, reject) => {
+        setTimeout(Math.random() > 0.5 ? resolve : reject, 1000)
+      }).catch(() => {
+
+        get(props.modulePath + '/' + props.ftableDeleteAction, {
+          ids: state.selectedRowKeys,
+        }).then(() => {
+          message.success({
+            content: '成功',
+            duration: 1,
+            onClose: () => {
+              state.selectedRowKeys = []
+              tableLoad()
+            },
+          })
+        })
+      })
+    },
+    onCancel() {},
+  })
+}
+const tabelDelete = record => {
+  get(
+    props.modulePath + '/' + props.ftableDeleteAction,
+    {
+      ids: record.id,
+    },
+    true,
+    '删除中...',
+  ).then(() => {
+    message.success({
+      content: '成功',
+      duration: 1,
+      onClose: () => {
+        tableLoad()
+      },
+    })
+  })
+}
+//导出
+const dataExport = () => {
+  Modal.confirm({
+    title: '提示',
+    content: '确定要导出这些数据吗？',
+    onOk() {
+      return new Promise((resolve, reject) => {
+        var data = loaddata()
+        downloadFilePost(
+          props.modulePath + '/' + props.ftableExportAction,
+          data,
+        ).then(res => {
+          saveAs(res.blob, res.fileName)
+          resolve() // 请求成功后再关闭对话框
+        }).catch(error => {
+          console.log('Oops errors!')
+          reject(error) // 请求失败时保持对话框打开
+        })
+      })
+    },
+    onCancel() {},
+  })
+}
+const handleResizeColumn = (w, col) => {
+  col.width = w
+}
+const getSelectedRows = () => state.selectedRowKeys
+const getDataSource = () => state.dataSource
+// const getBtns = () => btns
+
+/**
+ * 显示导入模态框
+ */
+const showImportModal = () => {
+  importModalVisible.value = true
+  fileList.value = []
+}
+
+/**
+ * 文件上传前的处理
+ * @param {Object} file - 上传的文件对象
+ * @returns {Boolean} - 返回false阻止自动上传
+ */
+const beforeUpload = file => {
+  // 检查文件类型
+  const isExcel = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
+                  file.type === 'application/vnd.ms-excel'
+
+  if (!isExcel) {
+    message.error('只能上传Excel文件!')
+    return false
+  }
+
+  // 检查文件大小（限制为10MB）
+  const isLt10M = file.size / 1024 / 1024 < 10
+  if (!isLt10M) {
+    message.error('文件大小不能超过10MB!')
+    return false
+  }
+
+  // 确保只能上传一个文件，替换已有文件
+  fileList.value = [file]
+  return false // 阻止自动上传
+}
+
+/**
+ * 移除上传的文件
+ * @param {Object} file - 要移除的文件对象
+ */
+const handleRemove = file => {
+  const index = fileList.value.indexOf(file)
+  const newFileList = fileList.value.slice()
+  newFileList.splice(index, 1)
+  fileList.value = newFileList
+}
+
+/**
+ * 处理文件上传
+ */
+const handleUpload = () => {
+  if (fileList.value.length === 0) {
+    message.warning('请先选择文件')
+    return
+  }
+
+  const formData = new FormData()
+  fileList.value.forEach(file => {
+    formData.append('file', file)
+  })
+
+  uploading.value = true
+
+  // 这里假设导入接口为模块路径下的import方法
+  post(props.modulePath + '/import', formData, {
+  }).then(res => {
+      uploading.value = false
+      message.success({
+                content: '导入成功',
+                duration: 1,
+                onClose: () => {
+                    importModalVisible.value = false
+                  // 刷新表格数据
+                  tableLoad()
+                },
+              })
+
+  }).catch(error => {
+    uploading.value = false
+  })
+}
+
+/**
+ * 下载导入模板
+ */
+const downloadTemplate = () => {
+  // 这里假设模板下载接口为模块路径下的template方法
+  downloadFilePost(props.modulePath + '/importTemplate', {})
+    .then(res => {
+      saveAs(res.blob, res.fileName || '导入模板.xlsx')
+    })
+    .catch(error => {
+      message.error('模板下载失败: ' + (error.message || '未知错误'))
+    })
+}
+
+// 将配置和方法暴露给父组件
+defineExpose({
+  edit,
+  tableLoad,
+  getSelectedRows,
+  getDataSource,
+ // getBtns,
+})
+</script>
+<style scoped>
+.table-search {
+  margin-bottom: 8px;
+  padding: 24px 24px 0px;
+  background-color: white;
+  border-radius: 3px;
+}
+.card-table {
+  padding: 24px;
+  background-color: white;
+  border-radius: 3px;
+}
+.table-operations {
+  margin-bottom: 16px;
+}
+.table-operations > button {
+  margin-right: 8px;
+}
+
+/* 导入模态框样式 */
+.import-modal-content {
+  padding: 10px 0;
+}
+
+.upload-actions {
+  margin-top: 16px;
+  text-align: center;
+}
+
+/* 导入模板卡片样式 */
+.template-card {
+  margin-top: 16px;
+}
+
+.template-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.template-info {
+  display: flex;
+  align-items: flex-start;
+  flex: 1;
+}
+
+.template-icon {
+  font-size: 48px;
+  color: #1890ff;
+  margin-right: 16px;
+}
+
+.template-description {
+  flex: 1;
+}
+
+.template-description h4 {
+  margin: 0 0 8px 0;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.template-description p {
+  margin: 0 0 12px 0;
+  color: rgba(0, 0, 0, 0.65);
+}
+
+.template-tips {
+  margin: 0;
+  padding-left: 20px;
+  color: rgba(0, 0, 0, 0.45);
+  font-size: 12px;
+}
+
+.template-tips li {
+  margin-bottom: 4px;
+}
+
+.template-action {
+  margin-left: 16px;
+}
+
+/* 表格工具栏样式 */
+.flex-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.flex-item {
+  flex: 1;
+}
+
+.text-align-left {
+  text-align: left;
+}
+
+.text-align-right {
+  text-align: right;
+}
+
+.padding-right-10 {
+  padding-right: 10px;
+}
+
+.text-color-black {
+  color: rgba(0, 0, 0, 0.88);
+}
+</style>