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

<template>
  <div class="eniting">
    <!-- 头部 -->
    <div class="eniting_header">
      <!-- <p class="p">表编辑</p> -->
      <div class="ppl">
       <p v-for="(item,index) in tabldie" :key="index" @click="enditTab(index)">
          <img src="../../../assets/images/icon_tbtab_normal.png" alt="" class="index_headerImg" v-if="num !== index">
          <img src="../../../assets/images/icon_tbtab_selected.png" alt="" class="index_headerImg" v-if="num == index">
          <span :class="[index == num ? 'span' : '']">{{item.tableComment}}</span>
        </p>
      </div>
      <el-divider></el-divider>
      <div class="table_headerBtun" v-if="queryData.buttonList">
           <el-button type="primary" size="small" plain v-for="(item,indexss) in queryData.buttonList.split('')" :key="keyname + indexss" @click="handleQuery(item)">{{item | btnConversion}}</el-button>
      </div>
    </div>
    <!-- 内容 -->
    <div class="eniting_nav">
     <el-collapse v-model="activeNames" @change="handleChange">
       <el-collapse-item :title="item.columnComment" :name="index" v-for="(item,index) in queryData.showData" :key="index" class="eitde">
         <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="120px">
           <el-row >
             <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, delMenutab, getQueryList, geteditindeTab, tableSubimt, tableSubimtanit, addbjectSave} from '@/api/system/table.js';
 // import { getTableQuery, getQueryList,geteditindeTab, tableSubimt, tableSubimtanit, addbjectSave } from '@/src/api/system/editing.js';
  export default {
      name: "index",
      data() {
        return {
           activeNames: ['1'],
           title:'单表1',
           // 查询参数
           queryParams: {

           },
           labletit:'查询参数1233',
           num:0,
           tabledeLise:{
             table:'',
             isUi:true
           },
           taleLisst:[]  ,//列表数据
           // 按钮参数
           tableZbie:{
             table:'obj_test',
             isUi:true,
             fixedData:{
               id:-1
             }
           },
           tableZbietabg:{
             table:'sys_user'
           },
           queryData: {},
            keyname:'nu',
            tabldie:[],
            forme:{
              table:'',
              objId:-1,
              fixedData:{}
            },
            formeanti:{
              table:'',
              commitData:[],
            },
            formy:{
              id:0,
              status:1
            },
            // 删除参数
            deledlid:{
              table:'',
              idList:[]
            }
        };
      },
      mounted() {
        // this.edingelsie()
        // button
        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.tabledeLise.table = this.$route.query.tables
        this.tableZbie.table = this.$route.query.tables
        this.tableZbie.fixedData.id = this.$route.query.id
        this.formy.id = this.$route.query.id
        this.tableZbietabg.table = this.$route.query.tables
        this.deledlid.table = this.$route.query.tables
        this.deledlid.idList.push(this.$route.query.id)
        console.log(this.deledlid)

        // tab
        this.edingelsietab()
      },
      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 '导出';
          }
        }
      },
      methods: {
        handleChange(val) {
                console.log(val);
              },
        enditTab(index){
         this.num = index
         this.tabledeLise.table = this.tabldie[index].tableName
         this.formeanti.table = this.tabldie[index].tableName
         this.forme.table = this.tabldie[index].tableName

         this.tableZbie.table = this.tabldie[index].tableName
         // this.edingelsie()
         this.init()
        },
        // 按钮
        init() {
          getTableQuery(
            this.tableZbie
          ).then(res => {
            let data = res.data
            this.queryData = data
            console.log(this.queryData,567)
          })
        },
        // 数据信息
        edingelsie(){
          console.log(1234)
          getQueryList(
            this.tabledeLise
          ).then(res => {
            let data = res.data
            this.taleLisst = data
            // console.log(this.queryData.queryList)
          })
        },
        // tab数据
       edingelsietab(){
         console.log(4566)
         geteditindeTab(this.tableZbietabg).then(response => {
           this.tabldie = response.data.ref
           if(this.tabldie.length !==0){
             this.init()
           }else {
             this.msgSuccess("暂无数据");

             this.$router.go(-1)
           }

           // this.msgSuccess("反提交成功");
           // this.open = false;
           // this.getList();
         });
       },
       changeFn(obj) {
         for(let key in obj){
           this.queryParams[key] = obj[key]
         }
       },
       handleQuery(index) {
          console.log(index,4)
          for(let item of this.queryData.showData){
            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
                console.log(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]
                console.log(this.$refs[item.hrChildren[i].columnName][0].config[item.hrChildren[i].columnName])
              }
            }
          }
         console.log(this.queryParams)
         this.queryParams.image = JSON.stringify(this.queryParams.image)
         this.queryParams.file = JSON.stringify(this.queryParams.file)
          if(this.queryParams.pageNum !== undefined){
            this.queryParams.pageNum = undefined
          }
          if(this.queryParams.pageSize !== undefined){
            this.queryParams.pageSize = undefined
          }
          if(index == 'D'){
            //删除
            this.handleDelete(this.deledlid)
          }else if(index == 'S'){
            //提交  保存
             // this.formeanti.table = 'obj_test'
             this.formeanti.commitData = []
             this.formy.status = 1
             // this.formy.id = 0
             this.formeanti.commitData.push(this.formy)
             console.log(this.formeanti)
            this.antiSubmission()
          }else if(index == 'U'){
            //反提交  保存
             // this.formeanti.table = 'obj_test'
             this.formeanti.commitData = []
             this.formy.status = 2
             // this.formy.id = 0
             this.formeanti.commitData.push(this.formy)
             console.log(this.formeanti)
            this.antiSubmission()
          }else if(index == 'M'){
            // 修改
            // this.forme.table = 'obj_test'
            // this.forme.objId = 1
            this.forme.fixedData = this.queryParams
            this.submitForm()
          }else if(index == 'A'){
            //新增
            // this.forme.table = 'obj_test'
            // this.forme.objId = -1
            this.forme.fixedData = this.queryParams
            this.submitForm()
          }

         console.log(this.forme)
         // this.getList();
       },
      /** 新增 修改提交按钮 */
      submitForm: function() {
              addbjectSave(this.forme).then(response => {
                this.msgSuccess("保存成功");
                this.open = false;
                this.$router.go(-1)
                // this.getList();
              });
      },
      // 提交反提交
      antiSubmission(){
        if (this.formy.status == 1) {
          // 提交
          tableSubimt(this.formeanti).then(response => {
            this.msgSuccess("提交成功");
            this.$router.go(-1)
            // this.open = false;
            // this.getList();
          });
        } else if(this.formy.status == 2){
          // 反提交
          tableSubimtanit(this.formeanti).then(response => {
            this.msgSuccess("反提交成功");
            this.$router.go(-1)
            // this.open = false;
            // 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">
  .eniting_header{
    .el-divider--horizontal{
      margin-top: 0;
    }
  }
  .eniting_nav{
    // .el-form-item{
    //   width: 25% !important;
    //   }
    .el-collapse-item__content{
      padding-bottom: 0;
    }
    .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: 65%;
    // }
    .textarea_et{
    width: 95%;
    .el-form-item__content{
      width: 80%;
      height: 83px;
      .el-textarea__inner{
        height: 100%;
      }
      }
    }
    .textarea_etyju{
      width: 90%;
      .el-form-item__content{
        width: 75%;
        // height: 83px;
        .el-textarea__inner{
          // height: 100%;
        }
        }
    }
    .textarea_ety{
      width: 100%;
      .el-form-item__content{
        width: 88%;
        height: 150px;
        margin-bottom: 0;
        .el-textarea__inner{
          height: 100%;
        }
        }
    }
    .el-collapse{
      border-top: 0;
    }
    .eitde{
      background-color: #fff;
      border-radius: 6px;
      padding: 23px;
      margin-bottom: 20px;
    }
  }

</style>

<style scoped lang="scss">
  .eniting{
    p{
      margin: 0;
    }
    background-color: #eef0ff;
    height: 100%;
    padding: 20px;
    .eniting_header{
       background-color: #fff;
       border-radius: 6px;
       padding: 23px;
       margin-bottom: 20px;
     .p{
        font-size: 15px;
        font-weight: bold;
        color: #3C8DBC;
        line-height: 36px;
        margin-bottom: 0;
       }
     .p::before{
       content: "";
       display: block;
       width: 18px;
       height: 8px;
       background: #3C8DBC;
       border-radius: 3px;

     }
     .ppl{
       display: flex;
       height: 54px;
       p{
         position: relative;
         width: 113px;
         height: 38px;
         img{
           position: absolute;
           top:0;
           left: 0;
           width: 100%;
           height: 100%;
           // z-index: -1;
         }
         span{
           width: 100%;
           position: absolute;
           top: 0;
           left: 0;
           // transform: translate(-50%);
           text-align: center;
           line-height: 38px;
           font-size: 15px;
           font-family: PingFang SC;
           font-weight: bold;
           color: #aaa;
         }
         .span{
           color: #3C8DBC;
         }
       }
     }
    }
    // 内容
    .eniting_nav{
      // background-color: #fff;
      // border-radius: 6px;
      // padding: 23px;
    }
  }
</style>