ccl_plm-vue/src/views/modules/project/demo.vue

<template>
  <div class="mod-config">
    <el-form :inline="true" label-position="top" label-width="100px" style="margin-top: -10px;">
      <el-button @click="getData()" type="primary" style="margin-left: 2px;margin-top: 33px">查询</el-button>
    </el-form>

    <el-table
      :height="height"
      :data="dataList"
      border
      v-loading="dataListLoading"
      style="width: 100%;">
      <el-table-column
        header-align="center"
        align="center"
        width="150"
        label="操作">
        <template slot-scope="scope">
          <a type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</a>
          <a type="text" size="small" @click="deleteHandle(scope.row.id)">删除</a>
        </template>
      </el-table-column>
      <el-table-column
        v-for="(item,index) in columnList" :key="index"
        :sortable="item.columnSortable"
        :prop="item.columnProp"
        :header-align="item.headerAlign"
        :show-overflow-tooltip="item.showOverflowTooltip"
        :align="item.align"
        :fixed="item.fixed==''?false:item.fixed"
        :min-width="item.columnWidth"
        :label="item.columnLabel">
        <template slot-scope="scope">
          <span v-if="!item.columnHidden"> {{scope.row[item.columnProp]}}</span>
          <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]"
                                             style="width: 100px; height: 80px"/></span>
        </template>
      </el-table-column>

    </el-table>
  </div>
</template>

<script>

  import {
    getTableDefaultListLanguage,
    getTableUserListLanguage,
  } from "@/api/table.js"
  import {userFavoriteList, saveUserFavorite, removeUserFavorite} from '@/api/userFavorite.js'

  export default {
    name: "null",
    data() {
      return {
        // 是否收藏 收藏夹功能
        favorite: false,
        //动态列开始
        visible: false,
        queryTable: {
          functionId: this.$route.meta.menuId,
          tableId: "mainTable",
          languageCode: this.$i18n.locale
        },
        // 用户table 查询参数
        queryTableUser: {
          userId: this.$store.state.user.name,
          functionId: this.$route.meta.menuId,
          tableId: "mainTable",
          status: true,
          languageCode: this.$i18n.locale
        },
        //动态列结束
        height: 200,
        dataList:[],
        dataListLoading: false,
        columnList: [
          {
            userId: this.$store.state.user.name,
            functionId: 104001001,
            serialNumber: '104001001Table3OrderNo',
            tableId: "104001001Table3",
            tableName: "生产订单数据获取表",
            columnProp: "orderNo",
            headerAlign: "center",
            align: "left",
            columnLabel: "订单号",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 120
          },
        ],
      }
    },
    watch: {
      // $route: {
      //   handler: function (val, oldVal) {
      //     this.$router.onReady(() => {
      //       if (this.$route.query.order) {
      //         this.modelData.orderNo = this.$route.query.order
      //         this.modelData.site = this.$route.query.site
      //         this.modelData.user = this.$route.query.user
      //         if (this.modelData.orderNo) {
      //           this.tableHanddle(this.modelData)
      //         }
      //       }
      //     })
      //   },
      //   // 深度观察监听
      //   deep: true
      // },

      // updateData: {
      //   deep: true,
      //   handler: function (newV, oldV) {
      //     this.updateData.projectID = this.updateData.projectID.toUpperCase();
      //     this.updateData.oriSOOrderNo = this.updateData.oriSOOrderNo.toUpperCase();
      //     this.updateData.orderType = this.updateData.orderType.toUpperCase();
      //   }
      // }
    },
    mounted() {
      this.$nextTick(() => {
        this.height = window.innerHeight - 240;
      })
    },
    methods: {
      // 动态列开始 获取 用户保存的 格式列
      async getTableUserColumn(tableId, columnId) {
        let queryTableUser = {
          userId: this.$store.state.user.name,
          functionId: this.$route.meta.menuId,
          tableId: tableId,
          status: true,
          languageCode: this.$i18n.locale
        }
        await getTableUserListLanguage(queryTableUser).then(({data}) => {
          if (data.rows.length > 0) {
            //this.columnList = []
            switch (columnId) {
              case 1:
                this.columnList = data.rows
                break;
              // case 2:
              //   this.columnList1 = data.rows
              //   break;
              // case 3:
              //   this.columnList2 = data.rows
              //   break;
              // case 4:
              //   this.columnList3 = data.rows
              //   break;
            }

          } else {
            this.getColumnList(tableId, columnId)
          }
        })

      },
      // 获取 tableDefault 列
      async getColumnList(tableId, columnId) {
        this.queryTable.tableId = tableId
        let   queryTable= {
          functionId: this.$route.meta.menuId,
          tableId: tableId,
          languageCode: this.$i18n.locale
        }
        await getTableDefaultListLanguage(queryTable).then(({data}) => {
          if (!data.rows.length == 0) {
            switch (columnId) {
              case 1:
                this.columnList = data.rows
                break;
              // case 2:
              //   this.columnList1 = data.rows
              //   break;
              // case 3:
              //   this.columnList2 = data.rows
              //   break;
              // case 4:
              //   this.columnList3 = data.rows
              //   break;
            }
          } else {
            // this.showDefault = true
          }
        })

      },
      // 动态列结束


    },
    created() {
      this.getTableUserColumn(this.queryTable.functionId+'table',1)
    }
  }
</script>

<style scoped>

</style>