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

<template>
  <div class="tabForm">
    <div class="tabForm_header">
      <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" v-if="queryData.buttonList">
        <el-button type="primary" size="small" plain @click="handleQuery(item)" v-for="(item,index) in queryData.buttonList.split('')" :key="index">{{item | btnConversion}}</el-button>
        <el-button type="primary" size="small" plain @click="handleQuery('sx')">刷新</el-button>
        <el-button type="primary" size="small" plain @click="handleQuery('fh')">返回</el-button>
      </div>
    </div>
    <!-- 内容 -->
    <div class="table_nav " >
      <el-collapse v-model="activeNames">
         <div class="table_forem">
           <el-form :model="queryParams"  :rules="queryData.rules" ref="queryForm" :inline="true" :label-width="this.queryData.table_column == 6 ? 80 :120">
           <el-collapse-item :title="item.columnComment" :name="index" v-for="(item,index) in queryData.showData" :key="index" class="eitde">
               <el-row :gutter="0">
                     <dynamic-formsteo @modelFn="modelFn" :ref="items.columnName" :config="queryParams" @inputs = "changeFn" :formConfig="items" v-for="(items,indexs) in item.hrChildren" :key='indexs' />
               </el-row>
           </el-collapse-item>
           </el-form>
         </div>
        <!-- 列表 -->
        <el-collapse-item :title="title" name="lised"  class="eitde" v-if="tabShoes">
          <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="numtab !== index">
              <img src="../../../assets/images/icon_tbtab_selected.png" alt="" class="index_headerImg" v-if="numtab == index">
              <span :class="[index == numtab ? 'span' : '']">{{item.tableComment}}</span>
            </p>
          </div>
          <el-divider></el-divider>
          <div style="display: flex; align-items: center; margin-bottom: 20px;" class="hiueo">
            <el-form style="display: flex; align-items:center;" :model="queryParamstwoi" ref="queryForm" :inline="true" >
              <DynamicForms :ref="item.columnName" :config="queryParamstwoi" @inputs="changeFn" :formConfig="item" v-for="(item,index) in queryDatatao.queryList"
                :key='index' />
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQueryiu">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
              </el-form-item>
            </el-form>
           <el-button type="primary" size="small" plain v-for="(item,indexss) in jeigneutwo" :key="item + indexss"
             @click="handleQueryju(item)">{{item}}</el-button>
          </div>

          <el-table v-loading="loading" :data="postList.rows" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" style="color: red;" align="center" />
            <template v-for="(item, index) in postList.tableHeadList">
              <el-table-column :label="item.columnComment"  align="center" :prop="item.columnName" :key="index" >
                <template slot-scope="scope">
                  <img class="img_icon" v-if="item.htmlType=='imageUpload' && scope.row[scope.column.property]" @click="imgBtn(JSON.parse(scope.row[scope.column.property])[0].url)"
                    :src="JSON.parse(scope.row[scope.column.property])[0].url" alt="">
                  <span  :style="scope.row.list_class" v-else-if="item.columnName == 'status' " >{{ scope.row[scope.column.property] }}</span>
                  <span  v-else>{{ scope.row[scope.column.property] }}</span>
                </template>
              </el-table-column>
            </template>
          </el-table>
          <div class="index_haderPagin">
            <pagination
              v-show="total>0"
              :total="total"
              :page.sync="queryParamslist.pageNo"
              :limit.sync="queryParamslist.pageSize"
              @pagination="foremliseju"
            />
          </div>
        </el-collapse-item>
      </el-collapse>
      <BigPicture ref="BigPicture" :urls="pir_imgs"></BigPicture>
    </div>
  </div>
</template>

<script>
  import {
    getTableQuery,
    getObject,
    geteditindeTab,
    listIndex,
    delMenutabform,
    tableSubimt, tableSubimtanit, addbjectSave,
    getObjectqure
  } from '@/api/system/form.js'

  export default {
    name: "index",
    inject: ['reload'],
    data() {
      return {
        pir_imgs: '', // 图片链接
        num: 0,
       // 总条数
        total: 0,
        loading:true,
        tabList: {},
        currentPage3: 0,
        activeNames: [0,'lised'],
        title: '列表',
        objParams: {
          table: '',
          fixedData: {
            id: -1
          },
          isUi:true
        },
        objParamstue:{
          table: ''
        },
        queryData: {},
        queryDatatao:{},
        // 查询参数
        queryParams: {
          dictName: undefined,
          dictType: undefined,
          status: undefined
        },
        queryParamstwoi:{
         dictName: undefined,
         dictType: undefined,
         status: undefined
        },
        queryParamslist: {
          pageNo: 1,
          pageSize: 10,
          orderBy:'create_time desc',
          table: '',
          fixedData:{
            condition:{}
          }
        },
        labletit: '查询参数1233',
        surlable: '实际数据库表',
        postList: {},
        numtab: 0,
        tabldie:[],
        xidugje: '',
        tabShoes:false,//tab 显示隐藏
        tableZbietabg:{
          table:'sys_user'
        },
        forme:{
          table:'',
          fixedData:{}
        },
        formeanti:{
          table:'',
          commitData:[],
        },
        formy:{
          id:0,
          status:1
        },
        // 删除参数
        deledlid:{
          table:'',
          idList:[]
        },
        imgShoew:1,
        jeigneu: [],
        jeigneutwo: [],
        single: true,
        multiple: true,
        tabName:'',
        oieufr:'',
        cielsshow:false,
        foremTtae:'',
        foremTtaid:-1
      };
    },
    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.formeanti.table = this.$route.query.tables
      this.forme.table = this.$route.query.tables
      this.forme.objId = this.$route.query.id
      this.formy.id = this.$route.query.id
      this.oieufr = this.$route.query.id
      this.tableZbietabg.table = this.$route.query.tables
      this.objParams.table = this.$route.query.tables
      this.objParams.fixedData.id = this.$route.query.id
      this.deledlid.table = this.$route.query.tables
      this.deledlid.idList.push(this.$route.query.id)
      this.queryParamslist.table = this.$route.query.tables
      if(this.$route.query.id == -1){
        console.log(this.$route.query.id)
        this.foremTtae = this.$route.query.tables+'_id'
      }else{
        let begad = this.$route.query.tables+'_id'
        this.queryParamslist.fixedData.condition[begad] = this.$route.query.id
        this.foremTtae = this.$route.query.tables+'_id'
      }
      // this.objParamstue.fixedData.id = this.$route.query.id
      this.init()
      this.edingelsietab()
    },
    methods: {
      imgBtn(url) {
        this.pir_imgs = url
        this.$refs.BigPicture.hidden.status = true
      },
      modelFn(obj, cont) {
        this.$set(this.queryParams,obj,cont)
      },
      handleCurrentChange() {

      },
      handleSizeChange() {

      },
      headerBtn(item) {
        switch(item) {
          case 'A': {
            return
          }
          case 'M': {
            return
          }
          case 'D': {
            return
          }
          case 'Q': {
            return
          }
          case 'S': {
            return
          }
          case 'U': {
            return
          }
          case 'E': {
            return
          }
        }
      },
      init() {
        getObject(this.objParams).then(res => {
          let data = res.data
          this.queryData = data
          // 图片的显示隐藏
          if(this.queryData.showData.length !==0){
           this.queryData.showData.filter(route => {
                route.hrChildren.filter(routerst =>{
                  if(this.queryData.table_column == undefined){
                    this.queryData.table_column = null
                  }
                  routerst.tableColumnuy = this.queryData.table_column
                })
               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
                   })
                 }
               }
           })
          }
          if(this.xidugje == 'sx'){
            if(res.code == 200){
              this.msgSuccess("操作成功");
            }
          }
        })
      },
      // tab数据
      edingelsietab(){
        geteditindeTab(this.tableZbietabg).then(response => {
          if(response.data.ref.length !==0){
            this.tabldie = response.data.ref
            this.queryParamslist.table = this.tabldie[0].tableName
            this.objParamstue.table = this.tabldie[0].tableName
            this.tabName = this.tabldie[0].tableName
            this.tabShoes = true
            this.foremliseju()
            this.foremlisejuque()
          }else{
            this.tabShoes = false
          }
        });
      },
      // 列表数据
      foremliseju(){
       listIndex(this.queryParamslist).then(res => {
         let data = res.data
         this.postList = data
         this.loading = false
         this.total = res.data.total - 0

       })
      },
      // 列表查询接口
      foremlisejuque(){
       getObjectqure(this.objParamstue).then(res => {
          let data = res.data
         this.queryDatatao = res.data
         this.jeigneutwo = []
         this.jeigneu = []
         this.jeigneu = data.buttonList.split('')
         this.jeigneu.filter(route => {
           // route.dept_id = route.dept_id.value
           if (route == 'A') {

               route = '新增'
             this.jeigneutwo.push(route)
           } else if (route == 'M') {
             route = '修改'
               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)
           }

         })
         // 图片的显示隐藏
       })
      },
      // tab点击
      tabSbu(index) {
        this.num = index
      },
      enditTab(index) {
        this.numtab = index
        this.queryParamslist.table = this.tabldie[index].tableName
        this.tabName = this.tabldie[index].tableName
        this.foremliseju()
      },
      changeFn(obj) {
        for(let key in obj){
          this.queryParams[key] = obj[key]
        }
      },
      resetQuery() {

      },
      /** 搜索按钮操作 */
      handleQuery(index) {
        if(index == 'fh'){
          this.$store.dispatch("tagsView/delView", this.$route);
          this.$router.go(-1)
          return
        }else if(index == 'sx'){
          this.xidugje = 'sx'
          this.reload()
          return
        }
         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(index == 'D'){
           //删除
           this.handleDelete(this.deledlid)
         }else if(index == 'S'){
           //提交  保存
            this.formeanti.commitData = []
            this.formy.status = 1
            this.formeanti.commitData.push(this.formy)
           this.antiSubmission()
         }else if(index == 'U'){
           //反提交  保存
            this.formeanti.commitData = []
            this.formy.status = 2
            this.formeanti.commitData.push(this.formy)
           this.antiSubmission()
         }else if(index == 'M'){
           // 修改
           this.forme.fixedData = this.queryParams
           this.submitForm()
         }else if(index == 'A'){
          //  let query = Object.assign({'id':'630'},{} )
          // this.$router.push({ query})
          //  this.reload()
           this.forme.fixedData = this.queryParams
           this.submitForm()
         }

        // this.getList();
      },
      // 搜索列表
      handleQueryiu(){
       for(let item of this.queryDatatao.queryList){
           if(item.htmlType == 'checkbox'){
             this.queryParamstwoi[item.columnName] = this.$refs[item.columnName][0].config
           }else if(item.htmlType == 'imageUpload' || item.htmlType == 'fileUpload'){
             this.queryParamstwoi[item.columnName] = JSON.stringify(this.$refs[item.columnName][0].config)
           } else{
             this.queryParamstwoi[item.columnName] = this.$refs[item.columnName][0].config[item.columnName]
           }

       }
       for(var items in this.queryParamstwoi){
         if(this.queryParamstwoi[items] == ''){
           this.queryParamstwoi[items] = undefined
         }
       }
       this.queryParamstwoi[this.foremTtae] = this.oieufr
       this.queryParamslist.fixedData.condition = this.queryParamstwoi
       // this.queryParamslist.fixedData.condition[this.foremTtae] = this.oieufr
       this.foremliseju()

      },
     /** 新增 修改提交按钮 */
     submitForm: function() {
       this.$refs["queryForm"].validate(valid => {
         if (valid) {
           addbjectSave(this.forme).then(response => {
             this.msgSuccess("保存成功");
             if(this.formy.id == -1){
               if(response.code == 200){
                 this.cielsshow = true;
               }else{
                 this.cielsshow = false;
               }
               let query = Object.assign({'id':response.data,'tables': this.forme.table},{} )
               this.$router.push({ query})
               this.queryParamslist.fixedData.condition[this.foremTtae] = response.data
               this.oieufr = response.data
               this.objParams.fixedData.id = response.data
               this.init()
               this.foremliseju()
             }else{
               this.$store.dispatch("tagsView/delView", this.$route);
               this.$router.go(-1)
             }

             // this.$store.dispatch("tagsView/delView", this.$route);

             // this.$store.dispatch("tagsView/delView", this.$route);
             // this.$router.go(-1)
             // this.getList();
           });
         }
       });
     },
     // 提交反提交
     antiSubmission(){
       this.$refs["queryForm"].validate(valid => {
         if (valid) {
       if (this.formy.status == 1) {
         // 提交
         tableSubimt(this.formeanti).then(response => {
           this.msgSuccess("提交成功");
           this.$store.dispatch("tagsView/delView", this.$route);
           this.$router.go(-1)
           // this.getList();
         });
       } else if(this.formy.status == 2){
         // 反提交
         tableSubimtanit(this.formeanti).then(response => {
           this.msgSuccess("反提交成功");
           this.$store.dispatch("tagsView/delView", this.$route);
           this.$router.go(-1)
           // this.getList();
         });
       }
       }
       });
     },
     //删除
     handleDelete(index) {
       this.$confirm('是否确认删除', "警告", {
           confirmButtonText: "确定",
           cancelButtonText: "取消",
           type: "warning"
         }).then(function() {
           return delMenutabform(index);
         }).then(() => {
           // this.getList();
           this.msgSuccess("删除成功");
           this.$store.dispatch("tagsView/delView", this.$route);
           this.$router.go(-1)
         })
     },
     // 列表删除
     handleDeletetwo(index){
       index.idList  = this.ids
       index.table = this.tabName
      this.$confirm('是否确认删除', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delMenutabform(index);
        }).then(() => {
          this.foremliseju();
          this.msgSuccess("删除成功");
          // this.$router.go(-1)
        })
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
       this.ids = selection.map(item => item.id)
       // console.log(this.ids)
       this.single = selection.length != 1
       this.multiple = !selection.length
     },
     handleQueryju(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 {
             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.handleDeletetwo(this.deledlid)
       }  else if(index == '新增'){
         if(this.cielsshow == true){
           this.routerFn(-1, this.tabName,this.oieufr,this.forme.table)
         }else{
           this.msgInfo('基本信息暂未保存')
         }
       }else if(index == '修改'){
         if (this.single) {
           this.msgInfo('请勾选一条信息')
           return
         }
         const id = this.ids.join(',')
         this.routerFn(id, this.tabName,this.oieufr,this.forme.table)
       }
     },
     routerFn(id, tables,tabfe, tabik) {
       // if (this.queryDatatao.viewType == 'crud') {
         this.$router.push({
           path: 'table',
           query: {
             id,
             tables,
             tabfe,
             tabik
           },
         })
       // } else if (this.queryDatatao.viewType == 'headTab') {
       //   this.$router.push({
       //     path: 'editing',
       //     query: {
       //       id,
       //       tables,
       //       tabfe,
       //       tabik
       //     },
       //   })
       // }
     },

    },
  };
</script>

<style lang="scss">
  .tabForm {
    .hiueo{
      .el-form-item{
        margin-bottom: 0 !important;
      }
    }

    .el-collapse-item__content {
      padding: 0;
    }

    .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;
        border: 0;
      }

      .el-divider--horizontal {
        margin-top: 0;
      }

      .eitde {
        background-color: #fff;
        border-radius: 6px;
        padding: 23px;
        padding-top: 0;
        margin-bottom: 10px;
      }
    }
  }
  .table_forem{
    .el-form--inline .el-form-item{
      width: 100% !important;
    }
    .el-select{
      width: 100%;
    }
    .el-date-editor.el-input{
      width: 100% !important;
    }
    .el-form-item--medium .el-form-item__content{
      width: 70%;
    }
  }
</style>

<style scoped lang="scss">
  .tabForm {
    background-color: #eef0ff;
    height: 100%;
    padding: 20px;

    p {
      margin: 0;
    }

    // 头部
    .tabForm_header {
      background-color: #fff;
      border-radius: 6px;
      padding: 13px;
      margin-bottom: 10px;
      position: relative;
    }

    // 内容
    .table_nav {

      // background-color: #fff;
      // border-radius: 6px;
      // padding: 23px;
      .ppl {
        display: flex;
        height: 38px;

        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;
          }
        }
      }
    }
  }

  // tab
  .index_headetab {
    display: flex;
    border-bottom: 1px solid #E5E5E5;
    height: 53px;
    // padding-top: 20px;
    padding-bottom: 10px;
    margin-bottom: 20px !important;

    span {
      width: 70px;
      text-align: center;
      line-height: 53px;
      height: 53px;
      font-size: 15px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #666;
      position: relative;
      // flex: 1;
      // border-bottom: ;
    }

    .span {
      content: '';
      display: block;
      width: 18px;
      height: 8px;
      border-radius: 3px;
      background-color: #3C8DBC;
      color: #3C8DBC !important;
      // position: absolute;
      // border-bottom: ;
    }

    .spanto {
      color: #3C8DBC;
      border-bottom: 3px solid #3C8DBC;
    }
  }
  .imge_tab{
    position: absolute;
    right: 0;
    top: 5px;
  }
</style>