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" 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 taleLisst" :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='items.id' />
             </el-col>
           </el-row>
         </el-form>
       </el-collapse-item>
       <!-- 扩展功能 -->
       <!-- <el-collapse-item :title="title" :name="index" v-for="(item,index) in 1" :key="index" class="eitde">
         <el-form :model="queryParams" ref="queryForm" :inline="true"  >
           <el-row :gutter="0">
             <el-col :span="12" v-for="(item,index) in 2" :key="index">
               <el-form-item :label="labletit" prop="dictName" class="textarea_et">
                <el-input
               v-model="queryParams.dictName"
               placeholder="请输入字典名称"
               clearable
               type="textarea"
               style="width: 100%; height: 100%;"
               @keyup.enter.native="handleQuery"
               />
              </el-form-item>
           </el-col>
           <el-col :span="24" v-for="(item,index) in 1" :key="index">
               <el-form-item :label="labletit" prop="dictName" class="textarea_ety">
                <el-input
               v-model="queryParams.dictName"
               placeholder="请输入字典名称"
               clearable
               type="textarea"
               style="width: 100%; height: 100%;"
               @keyup.enter.native="handleQuery"
               />
              </el-form-item>
           </el-col>
           </el-row>
         </el-form>
       </el-collapse-item> -->
       <!-- 服务程序 -->
       <!-- <el-collapse-item :title="title" :name="index" v-for="(item,index) in 1" :key="index" class="eitde">
         <el-form :model="queryParams" ref="queryForm" :inline="true"  >
           <el-row :gutter="0">
            <el-col :span="12" v-for="(item,index) in 8" :key="index">
                <el-form-item label="取消提交程序：" prop="dictName" class="textarea_etyju">
                 <el-input
                v-model="queryParams.dictName"
                placeholder="请输入字典名称"
                clearable
                style="width: 100%;"
                @keyup.enter.native="handleQuery"
                />
               </el-form-item>
            </el-col>
           </el-row>
         </el-form>
       </el-collapse-item> -->

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

<script>
 import { getTableQuery, 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: {
             pageNum: 1,
             pageSize: 10,
             dictName: undefined,
             dictType: undefined,
             status: undefined
           },
           labletit:'查询参数1233',
           num:0,
           tabledeLise:{
             table:'obj_test',
             isUi:true
           },
           taleLisst:[]  ,//列表数据
           // 按钮参数
           tableZbie:{
             table:'obj_test'
           },
           tableZbietabg:{
             table:'sys_user'
           },
           queryData: {},
            keyname:'nu',
            tabldie:[],
            forme:{
              table:'',
              objId:-1,
              fixedData:{}
            },
            formeanti:{
              table:'',
              commitData:[],
            },
            formy:{
              id:0,
              status:1
            }
        };
      },
      mounted() {
        this.edingelsie()
        // button
        this.init()
        // 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
         if(index == 0){
          this.tabledeLise.table = 'obj_test'
         }else if(index ==1){
          this.tabledeLise.table = 'sys_config'
         }
         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
           // 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.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'){
            //提交  保存
             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.getList();
              });
      },
      // 提交反提交
      antiSubmission(){
        if (this.formy.status == 1) {
          // 提交
          tableSubimt(this.formeanti).then(response => {
            this.msgSuccess("提交成功");
            // this.open = false;
            // this.getList();
          });
        } else if(this.formy.status == 2){
          // 反提交
          tableSubimtanit(this.formeanti).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">
  .eniting_header{
    .el-divider--horizontal{
      margin-top: 0;
    }
  }
  .eniting_nav{
    .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: 55%;
    }
    .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>