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

<template>
  <div class="eniting">
    <!-- 头部 -->
    <div class="eniting_header">
      <!-- <p class="p">表编辑</p> -->
      <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="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 table_headerBtuntue" v-if="queryData.buttonList">
        <el-form v-if="num !== 0" :model="queryParamstwoi" ref="queryForm" :inline="true" >
          <dynamic-form :ref="item.columnName" :config="queryParamstwoi" @inputs="changeFn" :formConfig="item" v-for="(item,index) in queryDatatwo.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="keyname + indexss"
          @click="handleQuery(item)">{{item}}</el-button>
      </div>
    </div>
    <!-- 内容 -->
    <div class="eniting_nav">
      <el-collapse v-model="activeNames" @change="handleChange" >
       <div class="table_forem">
         <el-form v-show="num == 0" :rules="queryData.rules" :model="queryParams" ref="queryForm" :inline="true" :label-width="this.queryData.table_column == 6 ? '70px' :'120px'">
            <el-collapse-item :title="item.columnComment" :name="index" v-for="(item,index) in queryData.showData" :key="index"
              class="eitde">
              <el-row>
                  <dynamic-formsteo @iChange="iChange" :queryData="queryData" @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>
        <div v-show= "num !==0" style="background-color: #fff; padding-bottom: 40px; padding-left: 23px; padding-right: 23px; padding-top: 23px;" >
          <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="">
                  <!-- :style="scope.row.list_class" scope.row[scope.column.property] -->
                  <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>
        </div>
      </el-collapse>
    </div>
  </div>
</template>
<script>
  import {
    tableQuery,
    getTableQuery,
    delMenutab,
    getQueryList,
    geteditindeTab,
    tableSubimt,
    tableSubimtanit,
    addbjectSave
  } from '@/api/system/table.js';
  import {
    listIndex,
  } from '@/api/system/form.js'

  export default {
    name: "index",
    inject: ['reload'],
    data() {
      return {
        // 总条数
         total: 0,
         loading:true,
        activeNames: [0],
        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: {},
        queryDatatwo:{},
        keyname: 'nu',
        tabldie: [],
        forme: {
          table: '',
          objId: -1,
          fixedData: {}
        },
        formeanti: {
          table: '',
          commitData: [],
        },
        formy: {
          id: 0,
          status: 1
        },
        // 删除参数
        deledlid: {
          table: '',
          idList: []
        },
        jeigneu: [],
        jeigneutwo: [],
        imgShoew:1,
        queryParamslist: {
          pageNo: 1,
          pageSize: 10,
          orderBy:'create_time desc',
          table: '',
          fixedData:{
            condition:{}
          }
        },
        postList: {},
         single: true,
         multiple: true,
         taheus:'',
         taheusid:0,
         tabName:'',
         queryParamstwoi:{},
      };
    },
    mounted() {
      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.queryParamslist.table = this.$route.query.tables
      this.taheus = this.$route.query.tables
      this.taheusid = this.$route.query.id
      this.deledlid.idList.push(this.$route.query.id)

      // tab
      this.edingelsietab()
      this.init()

    },
    filters: {},
    methods: {
      iChange(name,val){
        for(let item of this.queryData.showData){
          for(let itemChild of item.hrChildren){
            if(itemChild.columnName == name){
              itemChild.columnValue = (val?val:null)
            }
          }
        }
      },
      modelFn(obj, cont) {
        this.$set(this.queryParams,obj,cont)
      },
      handleChange(val) {
      },
      enditTab(index) {
        this.num = index
        if(this.num == 0){
          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.taheus
          this.tableZbie.fixedData.id = this.taheusid
          this.init()
          this.reload()
        }else{
          this.tabName = this.tabldie[index].tableName
          this.queryParamslist.table = this.tabldie[index].tableName
          this.inittwo()
          this.foremliseju()
        }
      },
      // 按钮
      init() {
        getTableQuery(
          this.tableZbie
        ).then(res => {
          let data = res.data
          this.queryData = data
          this.jeigneutwo = []
          this.jeigneu = []
          this.jeigneu = data.buttonList.split('')
          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.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
                   })
                 }
               }
           })
          }
        })
      },
      inittwo() {
        tableQuery({
          table: this.tabName,
        }).then(res => {
          let data = res.data
          this.queryDatatwo = data
          this.jeigneutwo = []
          this.jeigneu = []
          this.jeigneu = data.buttonList.split('')
          this.jeigneu.filter(route => {
            if (route == 'A') {
                route = '新增'
                this.jeigneutwo.push(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)
            }

          })
        })
      },
      // 数据信息
      edingelsie() {
        getQueryList(
          this.tabledeLise
        ).then(res => {
          let data = res.data
          this.taleLisst = data
        })
      },
      // tab数据
      edingelsietab() {
        geteditindeTab(this.tableZbietabg).then(response => {
          this.tabldie = [{tableComment:'主表数据',tableName:this.taheus}]
          this.tabldie =this.tabldie.concat(response.data.ref)
          if (this.tabldie.length !== 1) {

          } else {
            this.msgSuccess("暂无tab数据");
            this.$store.dispatch("tagsView/delView", this.$route);
            this.$router.go(-1)
          }

        });
      },
      // 列表数据
      foremliseju(){
       listIndex(this.queryParamslist).then(res => {
         if(res.code == 200){
           let data = res.data
           this.postList = data
           this.total = res.data.total - 0
         }else{
         }
          this.loading = false

       })
      },
      changeFn(obj) {
        for (let key in obj) {
          this.queryParams[key] = obj[key]
        }
      },
      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.$store.dispatch("tagsView/delView", this.$route);
          this.$router.go(-1)
        } else if (index == '刷新') {
          this.reload()
        }else if(index == '新增'){
            this.routerFn(-1, this.tabName)
        }else if(index == '修改'){
          if (this.single) {
            this.msgInfo('请勾选一条信息')
            return
          }
          const id = this.ids.join(',')
          this.routerFn(id, this.tabName)
        }

        // this.getList();
      },
      /** 新增 修改提交按钮 */
      submitForm: function() {
        this.$refs["queryForm"].validate(valid => {
          if (valid) {
            addbjectSave(this.forme).then(response => {
              this.msgSuccess("保存成功");
              this.open = false;
              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) {
        if(this.num == 0){
          this.$confirm('是否确认删除', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
            return delMenutab(index);
          }).then(() => {
            // this.getList();
            this.msgSuccess("删除成功");
            this.$store.dispatch("tagsView/delView", this.$route);
            this.$router.go(-1)
          })
        }else{
          if (this.single) {
            this.msgInfo('请勾选一条信息')
            return
          }
          // console.log(this.ids)
          var that = this
          index.idList  = this.ids
          index.table = this.tabName
         this.$confirm('是否确认删除', "警告", {
           confirmButtonText: "确定",
           cancelButtonText: "取消",
           type: "warning"
         }).then(function() {
           return delMenutab(index);
         }).then(() => {
           this.foremliseju();
           this.msgSuccess("删除成功");
           // this.$router.go(-1)
         })
        }
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length != 1
        this.multiple = !selection.length
      },
      routerFn(id, tables) {
        // if (this.queryDatatwo.viewType == 'crud') {
          this.$router.push({
            path: 'table',
            query: {
              id,
              tables,
            },
          })
      },
     // 搜索
     handleQueryiu(){
      for(let item of this.queryDatatwo.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.queryParamslist.fixedData.condition = this.queryParamstwoi
      this.foremliseju()
     },
     resetQuery(){
      this.resetForm("queryParamstwoi");
      this.foremliseju();
     }

    },
  };
</script>

<style lang="scss">
  .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%;
    }
  }
  .eniting_header {
    position: relative;
    .el-divider--horizontal {
      margin-top: 0;
    }
   .el-form-item{
     margin-bottom: 0 !important;
     margin-right: 10px;
   }
  }

  .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;
      padding-top: 0;
      margin-bottom: 10px;
    }
  }
</style>

<style scoped lang="scss">
  .table_headerBtuntue{
    display: flex;
    height: 30px;
    align-items: center;
  }
  .eniting {
    p {
      margin: 0;
    }

    background-color: #eef0ff;
    height: 100%;
    padding: 20px;

    .eniting_header {
      background-color: #fff;
      border-radius: 6px;
      padding: 13px;
      margin-bottom: 10px;

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