shujuju/ruoyi-ui/src/views/system/table/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" @click="handleQuery(item)">{{item | btnConversion}}</el-button>
      </div>
    </div>
    <!-- 内容 -->
    <div class="table_nav headertable_nav">
      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item :title="item.columnComment" :name="index" v-for="(item,index) in taleLisst" :key="index">
          <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="120px">
            <el-row :gutter="0">
              <el-col :span="24"  :key="index">
                  <dynamic-forms :ref="items.columnName" :config="queryParams" @inputs = "changeFn" :formConfig="items" v-for="(items,indexs) in item.hrChildren" :key='indexs' />
              </el-col>
            </el-row>
          </el-form>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>
<script>
  import {
    getTableQuery,
    getQueryList
  } from '@/api/system/table.js'
  export default {
    name: "index",
    data() {
      return {
        // 显示搜索条件
        showSearch: true,
        activeNames: ['1'],
        title: '单表1',
        tabledeLise:{
          table:'obj_test',
          isUi:true
        },
        queryData: {},
        // 查询参数
        queryParams: {

        },
        labletit: '查询参数1233',
        tableZbie:{
          table:'obj_test'
        },
        taleLisst:[],
        forme:{
          table:'',
          objId:-1,
          fixedData:{}
        },
      };
    },
    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()
      this.tablsie()
    },
    methods: {
      changeFn(obj) {
        for(let key in obj){
          this.queryParams[key] = obj[key]
        }
      },
      resetQuery() {

      },
      /** 搜索按钮操作 */
      handleQuery(index) {
         console.log(index,4)
         for(let item of this.taleLisst){
           for(var i = 0 ; i < item.hrChildren.length ; i++){
             if(item.hrChildren[i].htmlType == 'checkbox' || item.hrChildren[i].htmlType == 'imageUpload' || item.hrChildren[i].htmlType == 'fileUpload'){
               this.queryParams[item.hrChildren[i].columnName] = this.$refs[item.hrChildren[i].columnName][0].config
             } else{
               this.queryParams[item.hrChildren[i].columnName] = this.$refs[item.hrChildren[i].columnName][0].config[item.hrChildren[i].columnName]
             }
           }
         }
         if(index == 'D'){
           //删除
           this.handleDelete(index)
         }else if(index == 'S' || index == 'A'){
           //提交  保存
           this.forme.table = 'obj_test'
           this.forme.objId = -1
           this.forme.fixedData = this.queryParams
           // this.submitForm()
         }else if(index == 'M'){
           this.forme.table = 'obj_test'
           this.forme.objId = 1
           this.forme.fixedData = this.queryParams
           this.submitForm()
         }

        console.log(this.forme)
        // this.getList();
      },
      getList() {

      },
      init() {
        getTableQuery(
          this.tableZbie
        ).then(res => {
          let data = res.data
          this.queryData = data
          console.log(this.queryData,567)
        })
      },
      tablsie(){
        console.log(1234)
        getQueryList(
          this.tabledeLise
        ).then(res => {
          let data = res.data
          this.taleLisst = data
          // console.log(this.queryData.queryList)
        })
      },
      handleChange(val) {
        console.log(val);
      },
      // 按钮点击
      delet(index){
      console.log(index)
      if(index == 'D'){
        this.handleDelete(index)
      }
      },
      /** 提交按钮 */
      submitForm: function() {
        // this.$refs["form"].validate(valid => {
          // if (valid) {
            if (this.forme.objId != -1) {
              updateType(this.forme).then(response => {
                this.msgSuccess("修改成功");
                this.open = false;
                // this.getList();
              });
            } else {
              addType(this.forme).then(response => {
                this.msgSuccess("新增成功");
                this.open = false;
                // this.getList();
              });
            }
          // }
        // });
      },
      //删除
      handleDelete(row) {
        this.$confirm('是否确认删除名称为"' + row + '"的数据项?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
            // return delMenu(row.id);
          }).then(() => {
            // this.getList();
            this.msgSuccess("删除成功");
          })
      }
    },
  };
</script>


<style  lang="scss">
  .table_header{
    .el-divider--horizontal{
      margin-top: 16px;
    }
  }
  .headertable_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;
     height: 100%;
     padding: 20px;
     // 头部
     .table_header{
        background-color: #fff;
        border-radius: 6px;
        padding: 23px;
        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;

      }
     }
     // 内容
     .headertable_nav{
       background-color: #fff;
       border-radius: 6px;
       padding: 23px;
     }
  }
  p{
    margin: 0;

  }
</style>