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="imge_tab">
        <img src="../../../assets/images/pic_sy_ytj.png" alt="" v-if="imgShoew == 2" >
        <img src="../../../assets/images/pic_sy_shz.png" alt="" v-if="imgShoew == 4" >
        <img src="../../../assets/images/pic_sy_ybh.png" alt="" v-if="imgShoew == 3" >
      </div>
      <div class="table_headerBtun table_headerBtuntwo" v-if="queryData.buttonList">
        <el-button type="primary" size="mini" plain v-for="(item,index) in jeigneutwo" :key="index" @click="handleQuery(item)">{{item}}</el-button>
      </div>
    </div>
    <!-- 内容 -->
    <div class="table_nav headertable_nav" >
      <el-collapse v-model="activeNames" @change="handleChange">
        <el-form :model="queryParams" :rules="queryData.rules" ref="queryForm" :inline="true" label-width="120px">
          <el-collapse-item :title="item.columnComment" :name="index" v-for="(item,index) in queryData.showData" :key="index">
            <el-row>
              <el-col :span="24" :key="index">
                <dynamic-forms @modelFn="modelFn" :ref="items.columnName" :config="queryParams" @inputs="changeFn" :formConfig="items" v-for="(items,indexs) in item.hrChildren"
                  :key='indexs' />
              </el-col>
            </el-row>
          </el-collapse-item>
        </el-form>
      </el-collapse>
    </div>
  </div>
</template>
<script>
  import {
    getTableQuery,
    getQueryList,
    tableSubimt,
    tableSubimtanit,
    addbjectSave,
    delMenutab
  } from '@/api/system/table.js'
  export default {
    name: "index",
    inject: ['reload'],
    data() {
      return {
        // 显示搜索条件
        showSearch: true,
        activeNames: [0],
        title: '单表1',
        tabledeLise: {
          table: '',
          isUi: true
        },
        queryData: {},
        // 查询参数
        queryParams: {

        },
        labletit: '查询参数1233',
        tableZbie:{
          table:'',
          isUi:true,
          fixedData:{
            id:-1
          }

        },
        taleLisst:[],
        forme:{
          table:'',
          objId:-1,
          fixedData:{}
        },
        formeanti:{
          table:'',
          commitData:[],
        },
        formy:{
          id:0,
          status:1
        },
        // 删除参数
        deledlid:{
          table:'',
          idList:[]
        },
        jeigneu:[],
        jeigneutwo:[],
        xidugje:0,
        tijeq:0,
        imgShoew:0
      };
    },
    mounted() {
      // this.tableZbie.fixedData.id = 0
      this.deledlid.idList = []
      this.formeanti.table = this.$route.query.tables
      // this.formeanti.id = this.$route.query.id
      this.forme.table = this.$route.query.tables
      this.forme.objId = this.$route.query.id
      this.tableZbie.table = this.$route.query.tables
      this.tableZbie.fixedData.id = this.$route.query.id
      this.formy.id = this.$route.query.id
      this.deledlid.table = this.$route.query.tables
      this.deledlid.idList.push(this.$route.query.id)
      this.init()
      // this.tablsie()
    },
    methods: {
      modelFn(obj, cont) {
        this.$set(this.queryParams,obj,cont)
      },
      changeFn(obj) {
        for (let key in obj) {
          this.queryParams[key] = obj[key]
        }
      },
      resetQuery() {

      },
      /** 搜索按钮操作 */
      handleQuery(index) {
        for (let item of this.queryData.showData) {
          for (var i = 0; i < item.hrChildren.length; i++) {
            if (item.hrChildren[i].htmlType == 'checkbox') {
              this.queryParams[item.hrChildren[i].columnName] = this.$refs[item.hrChildren[i].columnName][0].config
            } else if (item.hrChildren[i].htmlType == 'imageUpload' || item.hrChildren[i].htmlType == 'fileUpload') {
              if (this.$refs[item.hrChildren[i].columnName][0].config.length) {
                this.queryParams[item.hrChildren[i].columnName] = JSON.stringify(this.$refs[item.hrChildren[i].columnName][0].config)
              }
            } else if (item.hrChildren[i].htmlType == 'datetime') {
              if (this.$refs[item.hrChildren[i].columnName][0].config[item.hrChildren[i].columnName]) {
                this.queryParams[item.hrChildren[i].columnName] = this.$refs[item.hrChildren[i].columnName][0].config[item.hrChildren[i].columnName]
              }else{
                this.queryParams[item.hrChildren[i].columnName] = null
              }
            } else {
              this.queryParams[item.hrChildren[i].columnName] = this.$refs[item.hrChildren[i].columnName][0].config[
                item.hrChildren[i].columnName]
            }
          }
        }
        if (this.queryParams.pageNum !== undefined) {
          this.queryParams.pageNum = undefined
        }
        if (this.queryParams.pageSize !== undefined) {
          this.queryParams.pageSize = undefined
        }

        if (index == '删除') {
          //删除
          this.handleDelete(this.deledlid)
        } else if (index == '提交') {
          //提交  保存
          this.formeanti.commitData = []
          this.formy.status = 1
          this.formeanti.commitData.push(this.formy)
          this.antiSubmission()
        } else if (index == '反提交') {
          //反提交  保存
          this.formeanti.commitData = []
          this.formy.status = 2
          this.formeanti.commitData.push(this.formy)
          this.antiSubmission()
        } else if (index == '保存') {
          // 修改
          this.forme.fixedData = this.queryParams
          this.submitForm()
        } else if (index == '新增') {
          //新增
          this.xidugje = 0
          this.reload()
        } else if (index == '返回') {
            this.$router.go(-1)
        } else if (index == '刷新') {
          this.xidugje = 1
          this.reload()
        }


        // this.getList();
      },
      getList() {

      },
      init() {
        getTableQuery(
          this.tableZbie
        ).then(res => {
          let data = res.data
          this.queryData = {}
          this.queryData = data
          // imgShoew
          this.jeigneutwo = []
          this.jeigneu = []
          this.jeigneu = data.buttonList.split('')
          // console.log(data.buttonList)
          this.jeigneu.filter(route => {
            if(route == 'A'){
              if(this.formy.id == -1){
                route = '保存'
                this.jeigneutwo.push(route)
              }else{
                route = '新增'
              }

            }else if(route == 'M'){
              route = '保存'
              if(this.formy.id != -1){
                this.jeigneutwo.push(route)
              }
            }else if(route == 'D'){
              route = '删除'
              if(this.formy.id != -1){
                this.jeigneutwo.push(route)
              }
            }else if(route == 'Q'){
              route = '查询'
              this.jeigneutwo.push(route)
            }else if(route == 'S'){
              route = '提交'
              if(this.formy.id != -1){
                this.jeigneutwo.push(route)
              }
            }else if(route == 'U'){
              route = '反提交'
              if(this.formy.id != -1){
                this.jeigneutwo.push(route)
              }
            }else if(route == 'I'){
              route = '导入'
              this.jeigneutwo.push(route)
            }else if(route == 'E'){
              route = '导出'
              this.jeigneutwo.push(route)
            }

          })

          this.jeigneutwo.push('刷新')
          this.jeigneutwo.push('返回')
          if(this.xidugje == '刷新'){
            if(res.code == 200){
              this.msgSuccess("操作成功");
            }
          }
         // 图片的显示隐藏
         if(this.queryData.showData.length !==0){
          this.queryData.showData.filter(route => {
            if(route.cssClass !== null){
              this.imgShoew = route.cssClass
              if(route.cssClass == 2 || route.cssClass == 4){
                route.hrChildren.filter(routers =>{
                  routers.isonliy = true
                })
              }else{
                route.hrChildren.filter(routers =>{
                  routers.isonliy = false
                })
              }
            }
          })
         }
        })
      },
      tablsie() {
        getQueryList(
          this.tabledeLise
        ).then(res => {
          let data = res.data
          this.taleLisst = data
        })
      },
      handleChange(val) {
      },
      // 按钮点击
      delet(index) {
        if (index == 'D') {
          this.handleDelete(this.formy.id)
        }
      },
      /** 新增 修改提交按钮 */
      submitForm: function() {
        this.$refs["queryForm"].validate(valid => {
          if (valid) {
            addbjectSave(this.forme).then(response => {
              this.msgSuccess("保存成功");
              // this.open = false;
              this.$router.go(-1)
            });
          }
        });
      },
      // 提交反提交
      antiSubmission() {
        this.$refs["queryForm"].validate(valid => {
          if (valid) {
            if (this.formy.status == 1) {
              // 提交
              tableSubimt(this.formeanti).then(response => {
                this.msgSuccess("提交成功");
                this.$router.go(-1)
                // this.getList();
              });
            } else if (this.formy.status == 2) {
              // 反提交
              tableSubimtanit(this.formeanti).then(response => {
                this.msgSuccess("反提交成功");
                this.$router.go(-1)
                // this.getList();
              });
            }
          }
        });
      },
      //删除
      handleDelete(index) {
        this.$confirm('是否确认删除', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delMenutab(index);
        }).then(() => {
          // this.getList();
          this.msgSuccess("删除成功");
          this.$router.go(-1)
        })
      }
    },
  };
</script>

<style  lang="scss">
  .table_header{
    position: relative;
    .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;

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

  }
  .imge_tab{
    position: absolute;
    right: 0;
    top: 5px;
  }
</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>