shujuju/ruoyi-ui/src/views/system/surface/index.vue

<template>
  <div class="table_total">
    <div class="table_header">
      <!-- <p>单表</p>
      <el-divider></el-divider> -->
      <div class="table_headerBtun" v-if="queryData.buttonList">
        <el-button type="primary" plain v-for="(item,index) in queryData.buttonList.split('')" :key="index">{{item | btnConversion}}</el-button>
      </div>
      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" >
        <dynamic-form :ref="item.columnName" :config="queryParams" @inputs = "changeFn" :formConfig="item" v-for="(item,index) in queryData.queryList" :key='index' />
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 内容 -->
    <div class="table_nav">
      <!-- <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item :title="title" :name="index" v-for="(item,index) in 4" :key="index">
          <el-form :model="queryParams" ref="queryForm" :inline="true">
            <el-row :gutter="0">
              <el-col :span="6" v-for="(item,index) in 12" :key="index">
                <el-form-item :label="labletit" prop="dictName">
                  <el-input v-model="queryParams.dictName" placeholder="请输入字典名称" clearable size="small"
                    @keyup.enter.native="handleQuery" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-collapse-item>

      </el-collapse> -->
    </div>

  </div>

</template>

<script>
  import {
    getTableQuery
  } from '@/api/system/table.js'
  export default {
    name: "index",
    data() {
      return {
        // 显示搜索条件
        showSearch: true,
        activeNames: ['1'],
        title: '单表1',
        queryData: {},
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
        },
        labletit: '查询参数1233'
      };
    },
    filters:{
      btnConversion(val) {
        switch(val){
          case 'A':
          return '新增';
          case 'M':
          return '修改';
          case 'D':
          return '删除';
          case 'Q':
          return '查询';
          case 'S':
          return '提交';
          case 'U':
          return '反提交';
          case 'I':
          return '导入';
          case 'E':
          return '导出';
        }
      }
    },
    mounted() {
      this.init()
    },
    methods: {
      changeFn(obj) {
        for(let key in obj){
          this.queryParams[key] = obj[key]
        }
      },
      resetQuery() {

      },
      /** 搜索按钮操作 */
      handleQuery() {
        for(let item of this.queryData.queryList){
          if(item.htmlType == 'checkbox'){
            this.queryParams[item.columnName] = this.$refs[item.columnName][0].config
          }else if(item.htmlType == 'imageUpload'){
            console.log(this.$refs[item.columnName][0].config,7777)
          } else{
            this.queryParams[item.columnName] = this.$refs[item.columnName][0].config[item.columnName]
          }
        }
        console.log(this.queryParams,22311)
        this.getList();
      },
      getList() {

      },
      init() {
        getTableQuery({
          table: 'obj_test'
        }).then(res => {
          let data = res.data
          this.queryData = data
          // this.queryData.queryList.filter(route => {
          //   if(route.htmlType == 'checkbox'){
          //     route.sysDictDatatwo = []
          //     route.sysDictDatatwo.push(route.columnName)
          //     console.log(route.sysDictDatatwo,846)
          //   }
          // })
        })
      },
      handleChange(val) {
        console.log(val);
      }
    },
  };
</script>


<style lang="scss">
  .table_header {
    .el-divider--horizontal {
      margin-top: 16px;
    }
    .table_headerBtun{
      margin-bottom: 20px;
    }
  }

  .table_nav {
    .el-collapse-item__wrap {
      border-bottom: 0;
    }

    .el-collapse-item__header {
      border-bottom: 0;
      font-size: 15px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #3C8DBC;
      line-height: 36px;
    }

    .el-form-item__content {
      width: 55%;
    }

    .el-collapse {
      border-top: 0;
    }
  }
</style>



<style scoped lang="scss">
  .app-main {
    // background-color: #eef0ff !important;
  }

  .table_total {
    background-color: #eef0ff;
    min-height: calc(100vh - 94px);
    padding: 20px;

    // 头部
    .table_header {
      background-color: #fff;
      border-radius: 6px;
      padding: 23px 23px 0px;
      margin-bottom: 20px;

      p {
        font-size: 15px;
        font-weight: bold;
        color: #3C8DBC;
        line-height: 36px;
      }

      p::before {
        content: "";
        display: block;
        width: 18px;
        height: 8px;
        background: #3C8DBC;
        border-radius: 3px;

      }
    }

    // 内容
    .table_nav {
      background-color: #fff;
      border-radius: 6px;
      padding: 23px;
    }
  }

  p {
    margin: 0;

  }
</style>