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 @click="headerBtn(item)" 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-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column :label="item.columnComment" align="center" :prop="item.columnName" v-for="(item,index) in tabData"
          :key="index" />
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    </div>
  </div>

</template>

<script>
  import {
    tableQuery,
    getQueryList,
    addbjectSave,
    getByTableName,
    delMenu,
    getObject
  } from '@/api/system/table.js'
  import {
    mapGetters,
    mapState
  } from "vuex";
  export default {
    name: "index",
    data() {
      return {
        tabData: [],
        multiple: true,
        single: true,
        open: false,
        // 遮罩层
        loading: true,
        total: 0,
        // 岗位表格数据
        postList: [],
        // 显示搜索条件
        showSearch: true,
        activeNames: ['1'],
        title: '',
        queryData: {},
        tabName: '',
        form: {
          table: '',
          objId: -1,
          fixedData: {
            condition: {

            }
          }
        },
        // 查询参数
        queryParams: {
          table: '',
          pageNo: 1,
          isUi: false,
          pageSize: 10,
          orderBy: 'create_time desc',
          fixedData: {
            condition: {

            }
          }
        }
      };
    },
    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 '导出';
        }
      }
    },
    computed: {
      ...mapGetters(["sidebarRouters", "sidebar", "tabIndex"]),
    },
    mounted() {
      const route = this.$route;
      const {
        meta,
        path
      } = route;
      let items = this.sidebarRouters.filter(res => {
        return res.path == ('/'+ path.split('/')[1])
      })[0].children.filter(res => {
        return res.path == path.split('/')[2]
      })[0]
      this.tabName = items.sysTableName
      this.queryParams.table = items.sysTableName
      this.form.table = items.sysTableName
      console.log(this.sidebarRouters,items,path,998812111)
      this.init();
      this.getList();
    },
    methods: {
      routerFn(id,tables) {
        if(this.queryData.viewType == 'crud'){
          this.$router.push({
            path: '/business/table',
            query: {
              id,
              tables,
            },
          })
        }else if(this.queryData.viewType == 'headTab') {
          this.$router.push({
            path: '/business/editing',
            query: {
              id,
              tables,
            },
          })
        }else if(this.queryData.viewType == 'itemTab'){
          this.$router.push({
            path: '/business/form',
            query: {
              id,
              tables,
            },
          })
        }
      },
      headerBtn(item) {
        switch (item) {
          case 'A':
            {
              this.routerFn(-1,this.tabName)
              return
            }
          case 'M':
            {
              if (this.single) {
                this.msgInfo('请勾选一条信息')
                return
              }
              const id = this.ids.join(',')
              this.routerFn(id,this.tabName)
              return
            }
          case 'D':
            {
              if (this.multiple) {
                this.msgInfo('请勾选一条信息')
                return
              }
              delMenu({
                table: this.tabName,
                idList: this.ids
              }).then(res => {
                this.msgSuccess('删除成功')
                this.getList()
              })
              return
            }
          case 'Q':
            {
              this.handleQuery()
              return
            }
          case 'S':
            {
              return
            }
          case 'U':
            {
              return
            }
          case 'E':
            {
              this.handleExport()
              return
            }
        }
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('system/post/export', {
          ...this.queryParams
        }, `post_${new Date().getTime()}.xlsx`)
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length != 1
        this.multiple = !selection.length
      },
      changeFn(obj) {
        for (let key in obj) {
          this.queryParams.fixedData.condition[key] = obj[key]
        }
      },
      // 表单重置
      reset() {
        this.form = {
          table: this.tabName,
          objId: '',
          fixedData: {
            condition: {

            }
          },
        };
        this.resetForm("form");
      },
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNo = 1;
        this.grabFn(this.queryData.queryList, this.queryParams.fixedData.condition)
        this.getList();
      },
      // 抓取参数
      grabFn(arr, parForm) {
        for (let item of arr) {
          if (item.htmlType == 'checkbox' || item.htmlType == 'imageUpload' || item.htmlType == 'fileUpload') {
            if (this.$refs[item.columnName][0].config.length) {
              parForm[item.columnName] = this.$refs[item.columnName][0].config
            }
          } else {
            parForm[item.columnName] = this.$refs[item.columnName][0].config[item.columnName]
          }
        }
      },
      getList() {
        getQueryList(this.queryParams).then(response => {
          this.total = response.data.total;
          this.tabData = response.data.tableHeadList
          this.postList = response.data.rows;
          this.loading = false;
        });
      },
      init() {
        tableQuery({
          table: this.tabName,
        }).then(res => {
          let data = res.data
          this.queryData = data
        })
      },
      handleChange(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>