例子

在该页面进行配置后可在前端展示出对应的列表页，并支持增删改查功能

<template>
  <div class="container">
    <div class="contain">
      <div class="containHead">列表配置</div>
      <div class="content">
        <div class="formBox">
          <div class="formHead">
            <div class="button" @click="goPreview">
              <img src="@/assets/formicon/previewicon.png" alt="" />
              <span>预览</span>
            </div>
          </div>
          <div class="formContent">
            <div class="headTitle">筛选条件配置</div>
            <div class="sxBox" v-for="(item, index) in sxList" :key="index">
              <div class="sxHead">筛选条件{{ index + 1 }}</div>
              <div class="sxContent">
                <el-select v-model="item.value" style="width: 300px" placeholder="请选择">
                  <el-option
                    v-for="(item, index) in list"
                    :key="index"
                    :label="item.title"
                    :value="item.code"
                  ></el-option>
                </el-select>
                <img v-if="index == sxList.length - 1" @click="addSx" src="@/assets/form/more.png" alt="" />
                <img v-if="sxList.length > 1" @click="removeSx(index)" src="@/assets/form/reduce.png" alt="" />
              </div>
            </div>
            <div class="headTitle" style="margin-top: 40px">列表配置</div>
            <div style="display: flex; align-items: center; margin-top: 20px">
              <div style="margin-right: 10px">展示列表序号</div>
              <el-switch :active-value="true" :inactive-value="false" v-model="params.showIndex"></el-switch>
              <el-tooltip
                class="box-item"
                effect="dark"
                content="序号按自然数顺序进行排序，分页排序不断。"
                placement="right"
                ><img style="width: 14px; height: 14px; margin-left: 10px" src="@/assets/form/wenhao.png" alt="" />
              </el-tooltip>
            </div>
            <div class="sxBox" v-for="(item, index) in lbList" :key="index">
              <div class="sxHead">列表字段{{ index + 1 }}</div>
              <div class="sxContent">
                <el-select v-model="item.value" style="width: 300px" placeholder="请选择">
                  <el-option
                    v-for="(item, index) in list"
                    :key="index"
                    :label="item.title"
                    :value="item.code"
                  ></el-option>
                </el-select>
                <img v-if="index == lbList.length - 1" @click="addLb" src="@/assets/form/more.png" alt="" />
                <img v-if="lbList.length > 1" @click="removeLb(index)" src="@/assets/form/reduce.png" alt="" />
              </div>
            </div>
            <div class="sortBox" v-for="(item, index) in sortList" :key="index">
              <div class="sortLeft">
                <div class="sortHead"><span>*</span>排序字段</div>
                <div class="sortContent">
                  <el-select v-model="item.value" style="width: 150px">
                    <el-option
                      v-for="(item, index) in list"
                      :key="index"
                      :label="item.title"
                      :value="item.code"
                    ></el-option>
                  </el-select>
                </div>
              </div>
              <div class="sortRight">
                <div class="sortHead">
                  <span>*</span>排序方式
                  <el-tooltip class="box-item" effect="dark" placement="right">
                    <template #content>
                      根据选择的排序字段和排序方式进行列表数据排序，支持按多个字段进行排序。
                      <br />当存在多个字段排序时，将优先按照第一个字段排序，内容相同时，依次按照其他字段排序。 </template
                    ><img style="width: 14px; height: 14px; margin-left: 10px" src="@/assets/form/wenhao.png" alt="" />
                  </el-tooltip>
                </div>
                <div class="sortContent">
                  <el-select v-model="item.value1" style="width: 150px">
                    <el-option label="正序" value="ASC"></el-option>
                    <el-option label="倒序" value="DESC"></el-option>
                  </el-select>
                </div>
              </div>
              <img v-if="index == sortList.length - 1" @click="addSt" src="@/assets/form/more.png" alt="" />
              <img v-if="sortList.length > 1" @click="removeSt(index)" src="@/assets/form/reduce.png" alt="" />
            </div>
          </div>
          <div class="formBottom">
            <div class="cancel" @click="goBack">取消</div>
            <div class="save" @click="handleSave">保存</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ElMessage } from "element-plus"
import { getFormDetail, tableDetail, createTable } from "@/api/form.js"
import { ref, reactive, onMounted } from "vue"
import { useRoute } from "vue-router"
const route = useRoute()
import router from "@/router"
const goBack = () => {
  if(route.query.from =='index'){
    router.push('/formCenter/index')
  }else{
    router.push(`/formCenter/versionManage?id=${route.query.id}`)
  }
  
}

const params = reactive({
  showIndex: false
})
const removeSx = (index) => {
  sxList.value.splice(index, 1)
}
const addSx = () => {
  sxList.value.push({ value: "" })
}
const removeLb = (index) => {
  lbList.value.splice(index, 1)
}
const addLb = () => {
  lbList.value.push({ value: "" })
}
const removeSt = (index) => {
  sortList.value.splice(index, 1)
}
const addSt = () => {
  sortList.value.push({ value: "" })
}
const sxList = ref([{ value: "" }])
const lbList = ref([{ value: "" }])
const sortList = ref([{ value: "", value1: "" }])
const goPreview = () => {
  const tableScreenList = []
  const tableHeaderList = []
  const tableSortList = []
  sortList.value.forEach((item, index) => {
    if (!item.value) {
      ElMessage({
        type: "error",
        message: "排序字段不能为空"
      })
      throw new Error("排序字段不能为空")
    }
    if (!item.value1) {
      ElMessage({
        type: "error",
        message: "排序方式不能为空"
      })
      throw new Error("排序方式不能为空")
    }
  })
  console.log(sortList.value)
  console.log(list.value)

  sortList.value.forEach((item, index) => {
    list.value.forEach((item2) => {
      if (item.value == item2.code) {
        tableSortList.push({
          code: item2.code,
          sort: index + 1,
          sortMode: item.value1
        })
      }
    })
  })
  sxList.value.forEach((item) => {
    list.value.forEach((item2) => {
      if (item.value == item2.code) {
        tableScreenList.push({
          code: item2.code,
          dataType: item2.dataType,
          format: item2.format,
          optionList: item2.optionList,
          title: item2.title,
          type: item2.type
        })
      }
    })
  })
  if (tableScreenList.length > 6) {
    ElMessage({
      type: "error",
      message: "筛选条件不能超过6个"
    })
    return false
  }
  lbList.value.forEach((item) => {
    list.value.forEach((item2) => {
      if (item.value == item2.code) {
        tableHeaderList.push({
          code: item2.code,
          dataType: item2.dataType,
          format: item2.format,
          title: item2.title,
          type: item2.type
        })
      }
    })
  })
  if (tableHeaderList.length < 3 || tableHeaderList.length > 10) {
    ElMessage({
      type: "error",
      message: "表格字段最多10个,最少3个"
    })
    return false
  }
  const formParams = reactive({
    // category:'',
    formId: route.query.id,
    isNumber: params.showIndex,
    siteCode: route.query.siteCode,
    tableScreenList: tableScreenList,
    tableHeaderList: tableHeaderList,
    tableSortList: tableSortList
  })
  console.log(formParams)
  router.push(
    `/formCenter/listPreview?id=${route.query.id}&category=${route.query.category}&siteCode=${route.query.siteCode}&data=${JSON.stringify(formParams)}&from=${route.query.from}`
  )
}
const list = ref([])
const init = async () => {
  const res = await getFormDetail({ id: route.query.id })
  console.log(res)
  res.data.labelList.forEach((item) => {
    if (
      item.type === "TEXT" ||
      item.type === "NUMBER" ||
      item.type === "DATE" ||
      item.type === "DATE_RANGE" ||
      item.type === "RADIO" ||
      item.type === "CHECKBOX" ||
      item.type === "SELECT"
    ) {
      list.value.push(item)
    }
    if (item.type === "COLUMNAR_LAYOUT" || item.type === "TITLE") {
      item.labelList.forEach((item1) => {
        if (
          item1.type === "TEXT" ||
          item1.type === "NUMBER" ||
          item1.type === "DATE" ||
          item1.type === "DATE_RANGE" ||
          item1.type === "RADIO" ||
          item1.type === "CHECKBOX" ||
          item1.type === "SELECT"
        ) {
          list.value.push(item1)
        }
      })
    }
  })
  list.value.push({
    type: "TEXT",
    code: "userName",
    title: "创建人"
  })
  list.value.push({
    type: "DATE_RANGE",
    code: "createTime",
    format: "YYYY-MM-DD HH:mm:ss",
    title: "创建时间"
  })
  list.value.push({
    type: "DATE_RANGE",
    code: "updateTime",
    format: "YYYY-MM-DD HH:mm:ss",
    title: "更新时间"
  })
  list.value.push({
    type: "SELECT",
    code: "status",
    title: "上下架状态",
    optionList: [
      { text: "上架", value: true },
      { text: "下架", value: false }
    ]
  })
  list.value.push({
    type: "SELECT",
    code: "reviewStatus",
    title: "流程审核状态",
    optionList: [
      { text: "发起审核", value: "START" },
      { text: "审核通过", value: "CHECK_PASS" },
      { text: "审核拒绝", value: "CHECK_REJECT" },
      { text: "撤销审核", value: "CANCEL" }
    ]
  })
}
const getDetail = async () => {
  if (route.query.data) {
    const data = JSON.parse(route.query.data)
    console.log(data)

    params.showIndex = data.isNumber
    if (data.tableScreenList.length > 0) {
      sxList.value = []
      data.tableScreenList.forEach((item, index) => {
        sxList.value.push({ value: item.title, value: item.code })
      })
    }
    if (data.tableHeaderList.length > 0) {
      lbList.value = []
      data.tableHeaderList.forEach((item, index) => {
        lbList.value.push({ value: item.title, value: item.code })
      })
    }
    if (data.tableSortList.length > 0) {
      sortList.value = []
      data.tableSortList.forEach((item, index) => {
        sortList.value.push({ value: item.code, value1: item.sortMode })
      })
    }
  } else {
    const res = await tableDetail(route.query.id)
    params.showIndex = res.data.isNumber
    if (res.data.tableScreenList.length > 0) {
      sxList.value = []
      res.data.tableScreenList.forEach((item, index) => {
        sxList.value.push({ value: item.title, value: item.code })
      })
    }
    if (res.data.tableHeaderList.length > 0) {
      lbList.value = []
      res.data.tableHeaderList.forEach((item, index) => {
        lbList.value.push({ value: item.title, value: item.code })
      })
    }
    if (res.data.tableSortList.length > 0) {
      sortList.value = []
      res.data.tableSortList.forEach((item, index) => {
        sortList.value.push({ value: item.code, value1: item.sortMode })
      })
    }
  }
}
const handleSave = async () => {
  const tableScreenList = []
  const tableHeaderList = []
  const tableSortList = []
  sortList.value.forEach((item, index) => {
    if (!item.value) {
      ElMessage({
        type: "error",
        message: "排序字段不能为空"
      })
      throw new Error("排序字段不能为空")
    }
    if (!item.value1) {
      ElMessage({
        type: "error",
        message: "排序方式不能为空"
      })
      throw new Error("排序方式不能为空")
    }
  })
  console.log(sortList.value)
  console.log(list.value)
  sortList.value.forEach((item, index) => {
    list.value.forEach((item2) => {
      if (item.value == item2.code) {
        tableSortList.push({
          code: item2.code,
          sort: index + 1,
          sortMode: item.value1
        })
      }
    })
  })
  sxList.value.forEach((item) => {
    list.value.forEach((item2) => {
      if (item.value == item2.code) {
        tableScreenList.push({
          code: item2.code,
          dataType: item2.dataType,
          format: item2.format,
          optionList: item2.optionList,
          title: item2.title,
          type: item2.type
        })
      }
    })
  })
  if (tableScreenList.length > 6) {
    ElMessage({
      type: "error",
      message: "筛选条件不能超过6个"
    })
    return false
  }
  lbList.value.forEach((item) => {
    list.value.forEach((item2) => {
      console.log(item,item2);
      
      if (item.value == item2.code) {
        tableHeaderList.push({
          code: item2.code,
          dataType: item2.dataType,
          optionList:item2.optionList,
          format: item2.format,
          title: item2.title,
          type: item2.type
        })
      }
    })
  })
  if (tableHeaderList.length < 3 || tableHeaderList.length > 10) {
    ElMessage({
      type: "error",
      message: "表格字段最多10个,最少3个"
    })
    return false
  }
  const formParams = reactive({
    // category:'',
    formId: route.query.id,
    isNumber: params.showIndex,
    siteCode: route.query.siteCode,
    tableScreenList: tableScreenList,
    tableHeaderList: tableHeaderList,
    tableSortList: tableSortList
  })
  console.log(formParams)
  const res = await createTable(formParams)
  console.log(res)
  ElMessage({
    type: "success",
    message: "操作成功"
  })
  setTimeout(() => {
    if(route.query.from =='index'){
    router.push('/formCenter/index')
  }else{
    router.push(`/formCenter/versionManage?id=${route.query.id}`)
  }
  }, 1000)
}
onMounted(() => {
  getDetail()
  init()
})
</script>

<style lang="scss" scoped>
.sortBox {
  display: flex;
  margin-top: 24px;
  align-items: center;
  .sortLeft,
  .sortRight {
    margin-right: 10px;
    .sortHead {
      margin-bottom: 8px;
      span {
        color: red;
      }
    }
    .sortContent {
    }
  }
  img {
    width: 14px;
    height: 14px;
    margin-left: 10px;
  }
}
.container {
  width: 100%;
  height: calc(100vh - var(--v3-navigationbar-height));
  display: flex;

  .contain {
    margin: 24px;
    border-radius: 8px;
    background: #f4f7fc;
    overflow: hidden;
    flex: 1;
    display: flex;
    flex-direction: column;
    .containHead {
      height: 50px;
      display: flex;
      align-items: center;
      font-family: SourceHanSansCN, SourceHanSansCN;
      font-weight: 500;
      font-size: 16px;
      color: #1d2129;
      line-height: 24px;
      text-align: left;
      font-style: normal;
      padding-left: 24px;
      border-bottom: 1px solid #e4e7ed;
      margin-bottom: 24px;
      background-color: #fff;
    }
    .content {
      flex: 1;
      background-color: #f4f7fc;
      display: flex;
      justify-content: center;
      .formBox {
        width: 1024px;
        height: 80vh;
        overflow-y: auto;
        background: #ffffff;
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        .formHead {
          display: flex;
          justify-content: right;
          padding-top: 16px;
          padding-right: 16px;
          height: 40px;
          .button {
            cursor: pointer;
            width: 80px;
            height: 36px;
            background: #ffffff;
            border-radius: 4px;
            border: 2px solid #005fd0;
            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: #005fd0;
              line-height: 20px;
              text-align: left;
              font-style: normal;
            }
          }
        }
        .formContent {
          flex: 1;
          padding-left: 116px;
          .headTitle {
            text-indent: 10px;
            border-left: 3px solid #005fd0;
            font-family: SourceHanSansCN, SourceHanSansCN;
            font-weight: 500;
            font-size: 14px;
            color: #1d2129;
            line-height: 14px;
            text-align: left;
            font-style: normal;
          }
          .sxBox {
            margin-top: 24px;
            .sxHead {
              font-family: SourceHanSansCN, SourceHanSansCN;
              font-weight: 500;
              font-size: 14px;
              color: #1d2129;
              line-height: 20px;
              text-align: left;
              font-style: normal;
              margin-bottom: 8px;
            }
            .sxContent {
              display: flex;
              align-items: center;
              img {
                margin-left: 10px;
                width: 14px;
                height: 14px;
                cursor: pointer;
              }
            }
          }
        }
        .formBottom {
          margin-top: 20px;
          height: 100px;
          display: flex;
          justify-content: center;
          align-items: center;
          .cancel {
            cursor: pointer;
            width: 80px;
            height: 36px;
            background: #ffffff;
            border-radius: 2px;
            border: 1px solid #005fd0;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: SourceHanSansCN, SourceHanSansCN;
            font-weight: 400;
            font-size: 14px;
            color: #005fd0;
            line-height: 20px;
            text-align: left;
            font-style: normal;
            margin-right: 16px;
          }
          .save {
            cursor: pointer;
            width: 80px;
            height: 36px;
            background: #005fd0;
            border-radius: 2px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: SourceHanSansCN, SourceHanSansCN;
            font-weight: 500;
            font-size: 14px;
            color: #ffffff;
            line-height: 20px;
            text-align: center;
            font-style: normal;
          }
        }
      }
    }
  }
}
</style>

```<