例子

在后台配置完成前端列表页展示内容后，前端根据返回的配置项生成对应的列表页

<template>
  <div class="container">
    <div class="contain">
      <div class="pager-pagination">
        <el-pagination background :total="total" @current-change="handleCurrentChange" />
      </div>
      <div class="searchForm">
        <el-form :inline="true" class="form-inline">
          <div class="left">
            <el-row>
              <el-col :span="8" v-for="(item, index) in headList" :key="index">
                <el-form-item :label="item.title" label-width="100px">
                  <el-input v-if="item.type == 'TEXT'" v-model="params[item.code]" :placeholder="item.tips" />
                  <el-input
                    type="number"
                    v-if="item.type == 'NUMBER'"
                    v-model="params[item.code]"
                    :placeholder="item.tips"
                  />
                  <el-date-picker
                    :format="item.format"
                    :value-format="item.format"
                    v-if="item.type == 'DATE'"
                    v-model="params[item.code]"
                    :placeholder="item.tips"
                  />
                  <el-date-picker
                    v-model="params[item.code]"
                    style="width: 250px"
                    type="datetimerange"
                    :format="item.format"
                    :value-format="item.format"
                    v-if="item.type == 'DATE_RANGE'"
                    :placeholder="item.tips"
                  />
                  <el-select style="width: 210px" v-model="params[item.code]" v-if="item.type == 'RADIO'">
                    <el-option v-for="(op, i) in item.optionList" :key="i" :label="op.text" :value="op.value" />
                  </el-select>
                  <el-select
                    style="width: 210px"
                    v-if="item.type == 'CHECKBOX'"
                    v-model="params[item.code]"
                    :placeholder="item.tips"
                  >
                    <el-option v-for="(op, i) in item.optionList" :key="i" :label="op.text" :value="op.value" />
                  </el-select>
                  <el-select
                    style="width: 210px"
                    v-if="item.type == 'SELECT'"
                    v-model="params[item.code]"
                    :placeholder="item.tips"
                  >
                    <el-option
                      v-for="(op, i) in item.optionList"
                      :key="i"
                      :label="op.text"
                      :value="op.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <el-form-item class="btn-all">
            <el-button @click="resetSearch"><img src="@/assets/btn/reset-btn.png" /> <span>重置</span></el-button>
            <el-button type="primary" @click="getTableData"
              ><img src="@/assets/btn/search-btn.png" /> <span>搜索</span></el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="add">
        <div class="addBox" @click="goAdd" v-if="buttonList.includes('form:data:create')">
          <img src="@/assets/formicon/add.png" alt="" />
          <span>新增</span>
        </div>
      </div>
      <el-table
        :data="tableData"
        show-overflow-tooltip
        header-cell-class-name="table-header-cell-class-name"
        class="table-list-class"
        virtual-scroll
        stripe
      >
        <template #empty>
          <div class="noData">
            <div>
              <img src="@/assets/form/nodataTable.png" alt="" />
              <div class="tips">暂无数据</div>
            </div>
          </div>
        </template>
        <el-table-column v-if="isNumber" type="index" label="序号" width="70" />
        <el-table-column v-for="(item, index) in tableList" :key="index" :prop="item.code" :label="item.title">
          <template v-if="item.code === 'status'" #default="scope">
            <span class="listing-status" :class="scope.row.status == '已上架' ? 'active' : ''">
              <img src="@/assets/authentication/adopt.png" v-if="scope.row.status == '已上架'" />
              <img src="@/assets/authentication/yqx.png" v-else />
              {{ scope.row.status }}
            </span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="300">
          <template #default="scope">
            <el-button
              v-if="buttonList.includes('form:data:updateStatus')"
              type="primary"
              class="table-fixed-btn-text"
              link
              @click="handleSj(scope.row)"
              >{{ scope.row.status == "已上架" ? "下架" : "上架" }}</el-button
            >
            <el-button
              v-if="buttonList.includes('form:data:detail')"
              type="primary"
              class="table-fixed-btn-text"
              link
              @click="handleDetail(scope.row)"
              >详情</el-button
            >
            <el-button
              v-if="buttonList.includes('form:data:update')"
              type="primary"
              class="table-fixed-btn-text"
              link
              @click="goEdit(scope.row)"
              >编辑</el-button
            >
            <el-button
              v-if="buttonList.includes('form:data:delete')"
              type="primary"
              class="table-fixed-btn-text"
              link
              @click="deleteRow(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script setup>
import { detailTableByCategoryId, selectPage, deleteItem, updateStatus, getButton } from "@/api/form.js"
import { ref, reactive, onMounted } from "vue"
import { useRoute, useRouter } from "vue-router"
import { ElMessage, ElMessageBox } from "element-plus"
const route = useRoute()
const router = useRouter()
//筛选列表
const headList = ref([])
//表格列表
const tableList = ref([])
//表格数据
const tableData = ref([])
//条数
const total = ref(0)
//数据处理方法
function generateObject(arr) {
  const result = {}
  arr.forEach((item) => {
    if (item.code) {
      result[item.code] = "" // 将 code 作为键，值设置为空字符串
    }
  })
  return result
}
//参数
const params = reactive({
  pageNo: 1,
  pageSize: 10,
  formCode: ""
})
const resetSearch = () => {
  console.log(params)
  for (let key in params) {
    if (key === "pageNo") {
      params[key] = 1
    } else if (key === "pageSize") {
      params[key] = 10
    } else if (key === "formCode") {
      console.log(1)
    } else {
      params[key] = ""
    }
  }
  getTableData()
}
//分页方法
const handleCurrentChange = () => {
  getTableData()
}
//数据处理方法
function transformData(input) {
  // 初始化一个新的对象
  let result = {
    pageNo: input.pageNo,
    pageSize: input.pageSize,
    formCode: input.formCode,
    tableScreenList: []
  }

  // 遍历输入对象的其他属性
  for (let key in input) {
    // 排除 pageNo, pageSize, formCode 这几个属性
    if (key !== "pageNo" && key !== "pageSize" && key !== "formCode") {
      // 将其他属性转换成指定格式，并添加到 tableScreenList 数组中
      result.tableScreenList.push({
        code: key,
        value: input[key]
      })
    }
  }

  return result
}
const isNumber = ref(false)
//数据处理方法
function transformDatas(inputData) {
  return inputData.map((item) => {
    // 构建一个新的对象，包含外层数据
    let newItem = {
      id: item.id,
      userId: item.userId,
      formId: item.formId,
      category: item.category,
      siteCode: item.siteCode,
      version: item.version,
      userName: item.userName
    }

    // 处理dataList中的数据，提取key和value并存入新对象
    item.dataList.forEach((data) => {
      const key = data.code // 使用code作为key
      const value = data.valueString || data.valueInt || data.valueDecimal // 使用valueString或valueInt作为value
      newItem[key] = value // 将数据存入新对象
    })

    return newItem
  })
}

//获取表格数据
const getTableData = async () => {
  const res = await selectPage(transformData(params))
  tableData.value = transformDatas(res.data.list)
  const arr = []
  res.data.list.forEach((item) => {
    const obj = {
      userName: item.userName,
      createTime: item.createTime,
      updateTime: item.updateTime,
      status: item.status,
      reviewStatus: item.reviewStatus
    }
    arr.push(obj)
  })
  tableData.value.forEach((item) => {
    for (let key in item) {
      tableList.value.forEach((item2) => {
        if (item2.code == key) {
          if (item2.type === "SELECT" || item2.type === "CHECKBOX" || item2.type === "RADIO") {
            item2.optionList.forEach((item3) => {
              if (item3.value === item[key]) {
                item[key] = item3.text
              }
            })
          }
        }
      })
    }
  })
  tableData.value.forEach((item, index) => {
    arr.forEach((item2, index2) => {
      if (index == index2) {
        ;(item.userName = item2.userName),
          (item.createTime = timestampToDateTime(item2.createTime)),
          (item.updateTime = timestampToDateTime(item2.updateTime)),
          (item.status = handleStatus(item2.status)),
          (item.reviewStatus = item2.reviewStatus)
      }
    })
  })
  total.value = res.data.total
}
function handleStatus(status) {
  if (status == 1) {
    return "已上架"
  }
  if (status == 0) {
    return "已下架"
  }
}
function timestampToDateTime(timestamp) {
  var date = new Date(timestamp) // 转换为Date对象
  var year = date.getFullYear() // 获取年份
  var month = ("0" + (date.getMonth() + 1)).slice(-2) // 获取月份，转为两位数
  var day = ("0" + date.getDate()).slice(-2) // 获取日，转为两位数
  var hours = ("0" + date.getHours()).slice(-2) // 获取小时，转为两位数
  var minutes = ("0" + date.getMinutes()).slice(-2) // 获取分钟，转为两位数
  var seconds = ("0" + date.getSeconds()).slice(-2) // 获取秒钟，转为两位数

  // 拼接字符串
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}
//获取页面表单
const getForm = async () => {
  const res = await detailTableByCategoryId({ categoryId: route.query.id, siteCode: "DALIAN" })
  isNumber.value = res.data.isNumber
  headList.value = res.data.tableScreenList
  formId.value = res.data.formId
  params.formCode = res.data.formCode
  res.data.tableScreenList.forEach((item) => {
    params[item.code] = ""
  })
  tableList.value = res.data.tableHeaderList

  // tableData.value = [generateObject(res.data.tableHeaderList)]
}
//去新增
const formId = ref("")
const goAdd = () => {
  router.push(`/operateManage/formAdd?id=${formId.value}&type=add`)
}
const goEdit = (item) => {
  console.log(item)
  router.push(`/operateManage/formAdd?id=${item.id}&type=edit`)
}
const handleSj = async (item) => {
  console.log(item)
  if (item.status === "已下架") {
    const res = await updateStatus({ dataId: item.id, status: 1 })
    ElMessage.success("操作成功")
    getTableData()
  }
  if (item.status === "已上架") {
    const res = await updateStatus({ dataId: item.id, status: 0 })
    ElMessage.success("操作成功")
    getTableData()
  }
}
const handleDetail = (item) => {
  router.push(`/operateManage/formDetail?id=${item.id}&type=edit`)
}
const deleteRow = async (row) => {
  ElMessageBox.confirm("确认删除吗？", "", {
    cancelButtonText: "取消",
    confirmButtonText: "确认",
    customClass: "delete-message-box",
    center: true
  })
    .then(async () => {
      await deleteItem({ id: row.id })
      getTableData()
      ElMessage({
        type: "success",
        message: "删除成功"
      })
    })
    .catch(() => {})
}
const buttonList = ref([])
const getPermission = async () => {
  const res = await getButton({ menuIdList: route.query.buttonId })
  console.log(res)
  buttonList.value = res.data
}
onMounted(async () => {
  getPermission()
  await getForm()
  await getTableData()
})
</script>

<style lang="scss" scoped>
.noData {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 500px;

  img {
    width: 157px;
    height: 150px;
  }

  .tips {
    font-family: SourceHanSansCN, SourceHanSansCN;
    font-weight: 500;
    font-size: 14px;
    color: #005fd0;
    line-height: 20px;
    text-align: center;
    font-style: normal;
  }
}

.container {
  width: 100%;
  height: calc(100vh - var(--v3-navigationbar-height));
  display: flex;

  .contain {
    margin: 24px;
    margin-top: 0;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;

    .pager-pagination {
      z-index: 9999;
      position: absolute;
      bottom: 10px;
      right: 20px;
      background-color: #fff;
    }

    .searchForm {
      padding-left: 24px;
      padding-right: 24px;
      box-sizing: border-box;
      border-bottom: 1px solid #e4e7ed;
      // height: 84px;
      display: flex;
      align-items: center;

      .form-inline {
        width: 100%;
        display: flex;
        align-items: center;

        .left {
          flex: 1;
          padding-bottom: 20px;
        }

        :deep(.el-row) {
          padding-bottom: 20px;
        }

        :deep(.el-col) {
          margin-top: 20px;
        }

        :deep(.el-form-item) {
          margin-bottom: 0px;
          margin-right: 40px;

          .el-form-item__label {
            font-size: 14px;
            color: #1d2129;
            padding-right: 8px;
            height: 36px;
            line-height: 36px;
          }

          .el-input,
          .el-select {
            // width: 240px;
            height: 36px;
            line-height: 36px;

            > div {
              height: 36px;
            }
          }
        }

        .btn-all {
          margin-right: 0;

          :deep(.el-button) {
            width: 80px;
            height: 36px;

            > span {
              > img {
                width: 14px;
                margin-right: 4px;
                margin-top: -1px;
              }

              > span {
                font-weight: 400;
                font-size: 14px;
              }
            }
          }
        }
      }

      .searchItem {
        display: flex;

        .reset {
          cursor: pointer;
          margin-right: 24px;
          width: 80px;
          height: 36px;
          background: #ffffff;
          border-radius: 2px;
          border: 1px solid #c9cdd4;
          display: flex;
          align-items: center;
          justify-content: center;

          img {
            width: 14px;
            height: 14px;
            margin-right: 4px;
          }

          span {
            font-family: SourceHanSansCN, SourceHanSansCN;
            font-weight: 400;
            font-size: 14px;
            color: #1d2129;
            line-height: 20px;
            text-align: center;
            font-style: normal;
          }
        }

        .search {
          cursor: pointer;
          width: 80px;
          height: 36px;
          background: #005fd0;
          border-radius: 2px;
          display: flex;
          align-items: center;
          justify-content: center;

          img {
            width: 14px;
            height: 14px;
            margin-right: 4px;
          }

          span {
            font-family: SourceHanSansCN, SourceHanSansCN;
            font-weight: 500;
            font-size: 14px;
            color: #ffffff;
            line-height: 20px;
            text-align: center;
            font-style: normal;
          }
        }
      }
    }

    .add {
      padding-top: 24px;
      height: 84px;
      padding-left: 24px;

      .addBox {
        cursor: pointer;
        width: 80px;
        height: 36px;
        background: #ffffff;
        border-radius: 2px;
        border: 2px solid #005fd0;
        display: flex;
        align-items: center;
        justify-content: center;

        span {
          font-family: SourceHanSansCN, SourceHanSansCN;
          font-weight: 400;
          font-size: 14px;
          color: #005fd0;
          line-height: 20px;
          text-align: left;
          font-style: normal;
        }

        img {
          width: 14px;
          height: 14px;
          margin-right: 4px;
        }
      }
    }
  }
}
</style>