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

<template>
  <div class="table_total">
    <div class="table_header">
      <!-- <p>单表</p>
      <el-divider></el-divider> -->
      <div class="table_headerBtun" v-if="queryData.buttonList">
        <el-button type="primary" plain @click="headerBtn(item)" size="small" v-for="(item,index) in queryData.buttonList.split('').filter((res) => {return res!='S'})"
          :key="index">{{item | btnConversion}}</el-button>
      </div>
      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
        <dynamic-forms :type="0" :ref="item.columnName" :config="queryParams" @inputs="changeFn" :formConfig="item"
          v-for="(item,index) in queryData.queryList" :key='index' />
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 内容 -->
    <div class="table_nav">
      <el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" style="color: red;" align="center" />
        <template v-for="(item, index) in tabData">
          <el-table-column :width="tabData.length>13?zjFn(item.columnComment)*19:'auto'" :label="item.columnComment" align="center" :prop="item.columnName" :key="index" show-overflow-tooltip>
            <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>
              <div v-else>
                <span v-if="item.fkInfo">{{scope.row[scope.column.property].value}}</span>
                <span v-else>{{scope.row[scope.column.property]}}</span>
              </div>
            </template>
          </el-table-column>
        </template>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    </div>
    <BigPicture ref="BigPicture" :urls="pir_imgs"></BigPicture>
  </div>
</template>

<script>
  import {
    tableQuery,
    getQueryList,
    addbjectSave,
    getByTableName,
    delMenu,
    getObject
  } from '@/api/system/table.js'
  import {
    mapGetters,
    mapState
  } from "vuex";
  export default {
    name: "index",
    data() {
      return {
        pir_imgs: '', // 图片链接
        // jue:'color: red;',
        tabData: [],
        multiple: true,
        single: true,
        open: false,
        // 遮罩层
        loading: true,
        total: 0,
        // 岗位表格数据
        postList: [],
        // 显示搜索条件
        showSearch: true,
        activeNames: ['1'],
        title: '',
        queryData: {},
        tabName: '',
        form: {
          table: '',
          objId: -1,
          fixedData: {
            condition: {

            }
          }
        },
        // 查询参数
        queryParams: {
          table: '',
          pageNo: 1,
          isUi: false,
          pageSize: 10,
          orderBy: 'create_time desc',
          fixedData: {
            condition: {

            }
          }
        }
      };
    },
    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 '导出';
        }
      }
    },
    computed: {
      ...mapGetters(["sidebarRouters", "sidebar", "tabIndex"]),
    },
    mounted() {
      const route = this.$route;
      const {
        meta,
        path
      } = route;
      let items = this.sidebarRouters.filter(res => {
        return res.path == ('/' + path.split('/')[1])
      })[0].children.filter(res => {
        return res.path == path.split('/')[2]
      })[0]
      this.tabName = items.sysTableName
      this.queryParams.table = items.sysTableName
      this.form.table = items.sysTableName
      this.init();
      this.getList();
    },
    methods: {
      zjFn(str) {
        let bytesCount = 0;
        for (var i = 0; i < str.length; i++)
        {
          var c = str.charAt(i);
          if (/^[\u0000-\u00ff]$/.test(c)) //匹配双字节
          {
          bytesCount += 1;
          }
          else
          {
          bytesCount += 2;
          }
        }
        return bytesCount
      },
      imgBtn(url) {
        this.pir_imgs = url
        this.$refs.BigPicture.hidden.status = true
      },
      routerFn(id, tables) {
        if (this.queryData.viewType == 'crud') {
          this.$router.push({
            path: '/business/table',
            query: {
              id,
              tables,
            },
          })
        } else if (this.queryData.viewType == 'headTab') {
          this.$router.push({
            path: '/business/editing',
            query: {
              id,
              tables,
            },
          })
        } else if (this.queryData.viewType == 'itemTab') {
          this.$router.push({
            path: '/business/form',
            query: {
              id,
              tables,
            },
          })
        }
      },
      headerBtn(item) {
        const _this = this
        switch (item) {
          case 'A':
            {
              this.routerFn(-1, this.tabName)
              return
            }
          case 'M':
            {
              if (this.single) {
                this.msgInfo('请勾选一条信息')
                return
              }
              const id = this.ids.join(',')
              this.routerFn(id, this.tabName)
              return
            }
          case 'D':
            {
              if (this.multiple) {
                this.msgInfo('请勾选一条信息')
                return
              }
              this.$confirm('是否确认删除岗位编号为"' + this.ids + '"的数据项?', "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
              }).then(function() {
                return delMenu({
                  table: _this.tabName,
                  idList: _this.ids
                });
              }).then(() => {
                _this.getList();
                _this.msgSuccess("删除成功");
              })

              return
            }
          case 'Q':
            {
              this.handleQuery()
              return
            }
          case 'S':
            {
              return
            }
          case 'U':
            {
              return
            }
          case 'E':
            {
              this.handleExport()
              return
            }
        }
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('system/post/export', {
          ...this.queryParams
        }, `post_${new Date().getTime()}.xlsx`)
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length != 1
        this.multiple = !selection.length
      },
      changeFn(obj) {
        for (let key in obj) {
          this.queryParams.fixedData.condition[key] = obj[key]
        }
      },
      // 表单重置
      reset() {
        this.form = {
          table: this.tabName,
          objId: '',
          fixedData: {
            condition: {

            }
          },
        };
        this.resetForm("form");
      },
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNo = 1;
        this.grabFn(this.queryData.queryList, this.queryParams.fixedData.condition)
        this.getList();
      },
      // 抓取参数
      grabFn(arr, parForm) {
        for (let item of arr) {
          if (item.htmlType == 'checkbox' || item.htmlType == 'imageUpload' || item.htmlType == 'fileUpload') {
            if (this.$refs[item.columnName][0].config.length) {
              parForm[item.columnName] = this.$refs[item.columnName][0].config
            }
          } else {
            parForm[item.columnName] = this.$refs[item.columnName][0].config[item.columnName]
          }
        }
      },
      getList() {
        getQueryList(this.queryParams).then(response => {
          this.total = response.data.total;
          this.tabData = response.data.tableHeadList
          this.postList = response.data.rows;
          this.loading = false;
        });
      },
      init() {
        tableQuery({
          table: this.tabName,
        }).then(res => {
          let data = res.data
          this.queryData = data
        })
      },
      handleChange(val) {}
    },
  };
</script>


<style lang="scss">
  .el-table .cell, .el-table th div {
  	padding-right: 0;
  }
  .img_icon {
    width: 120px;
    height: 120px;
    cursor: pointer;
    object-fit: cover;
  }

  .table_header {
    .el-divider--horizontal {
      margin-top: 16px;
    }

    .table_headerBtun {
      margin-bottom: 20px;
    }
  }

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

    }
  }
</style>



<style scoped lang="scss">
  .app-main {
    // background-color: #eef0ff !important;
  }

  .table_total {
    background-color: #eef0ff;
    min-height: calc(100vh - 94px);
    padding: 20px;

    // 头部
    .table_header {
      background-color: #fff;
      border-radius: 6px;
      padding: 23px 23px 0px;
      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_nav {
      background-color: #fff;
      border-radius: 6px;
      padding: 23px;
    }
  }

  p {
    margin: 0;

  }
</style>