动态列

src/views/modules/sampleTracking/projectProofTracking.vue

@@ -76,44 +76,43 @@
       style="width: 100%; margin-top: 8px"
     >
 <!--      <el-table-column type="selection" width="45" />-->
-      <el-table-column prop="projectNo" label="项目编码" width="90" show-overflow-tooltip>
-        <template slot-scope="scope">
-          <span :class="getProjectPartSyncTextClass(scope.row)">{{ scope.row.projectNo || '-' }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column prop="projectDesc" label="项目描述" width="120" show-overflow-tooltip>
-        <template slot-scope="scope">
-          <span :class="getProjectPartSyncTextClass(scope.row)">{{ scope.row.projectDesc || '-' }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column prop="testPartNo" label="项目物料" width="90" show-overflow-tooltip>
-        <template slot-scope="scope">
-          <span :class="getProjectPartSyncTextClass(scope.row)">{{ scope.row.testPartNo || '-' }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column prop="partDesc" label="物料描述" :fixed="'left'" width="150" show-overflow-tooltip>
-        <template slot-scope="scope">
-          <span :class="getProjectPartSyncTextClass(scope.row)">{{ scope.row.partDesc || '-' }}</span>
-        </template>
-      </el-table-column>
-<!--      <el-table-column prop="customerNo" label="客户编码" width="110" show-overflow-tooltip />
-      <el-table-column prop="customerDesc" label="客户名称" width="130" show-overflow-tooltip />-->
-      <el-table-column prop="proofingNo" label="打样单号" width="90" show-overflow-tooltip>
-        <template slot-scope="scope">
-          <span :class="getProofSyncTextClass(scope.row)">{{ scope.row.proofingNo || '-' }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column prop="proofingStatus" label="打样状态" width="60">
-        <template slot-scope="scope">
-          <a :style="{color: (scope.row.proofingStatus === '打样完成' || scope.row.proofingStatus === '打样结束') ? '#67c23a' : '#046e97'}">
-            {{ scope.row.proofingStatus || '进行中' }}</a>
-        </template>
-      </el-table-column>
-      <el-table-column label="Tracking Status" align="center" width="150" show-overflow-tooltip>
+      <el-table-column
+        v-for="(item, trackingColumnIndex) in visibleTrackingColumns"
+        :key="`${item.columnProp}_${trackingColumnIndex}`"
+        :prop="item.columnProp"
+        :label="item.columnLabel"
+        :width="item.columnWidth"
+        :header-align="item.headerAlign || 'center'"
+        :align="item.align || 'left'"
+        :fixed="item.fixed === '' ? false : item.fixed"
+        :show-overflow-tooltip="item.showOverflowTooltip"
+      >
         <template slot-scope="scope">
-          <div :class="getTrackingStatusClass(scope.row)">
+          <span
+            v-if="isProjectPartSyncColumn(item.columnProp)"
+            :class="getProjectPartSyncTextClass(scope.row)"
+          >{{ getTrackingColumnDisplayValue(scope.row, item.columnProp) }}</span>
+          <span
+            v-else-if="item.columnProp === 'proofingNo'"
+            :class="getProofSyncTextClass(scope.row)"
+          >{{ getTrackingColumnDisplayValue(scope.row, item.columnProp) }}</span>
+          <a
+            v-else-if="item.columnProp === 'proofingStatus'"
+            :style="{ color: (scope.row.proofingStatus === '打样完成' || scope.row.proofingStatus === '打样结束') ? '#67c23a' : '#046e97' }"
+          >{{ scope.row.proofingStatus || '进行中' }}</a>
+          <div
+            v-else-if="item.columnProp === 'trackingStatus'"
+            :class="getTrackingStatusClass(scope.row)"
+          >
             {{ getTrackingStatusText(scope.row) }}
           </div>
+          <span v-else-if="item.columnProp === 'engineer'">
+            {{ getTrackingRoleDisplayValue(scope.row, 'engineerName', 'engineer') }}
+          </span>
+          <span v-else-if="item.columnProp === 'projectManager'">
+            {{ getTrackingRoleDisplayValue(scope.row, 'projectManagerName', 'projectManager') }}
+          </span>
+          <span v-else>{{ getTrackingColumnDisplayValue(scope.row, item.columnProp) }}</span>
         </template>
       </el-table-column>
 
@@ -962,6 +961,7 @@ import {
   searchBusinessInfo8
 } from '@/api/factory/site.js'
 import { queryCustomerList } from '@/api/customer/customer'
+import { getTableDefaultListLanguage, getTableUserListLanguage } from '@/api/table.js'
 import Chooselist from '@/views/modules/common/Chooselist_eam'
 import Sortable from 'sortablejs'
 
@@ -1009,6 +1009,167 @@ function cloneDefaultProcessColumns () {
   return DEFAULT_PROCESS_COLUMNS.map(item => Object.assign({}, item))
 }
 
+const DEFAULT_TRACKING_COLUMNS = [
+  {
+    serialNumber: 'proofTrackingTable1ProjectNo',
+    columnProp: 'projectNo',
+    headerAlign: 'center',
+    align: 'left',
+    columnLabel: '项目编码',
+    columnHidden: false,
+    columnImage: false,
+    columnSortable: false,
+    status: true,
+    fixed: '',
+    columnWidth: 90,
+    showOverflowTooltip: true
+  },
+  {
+    serialNumber: 'proofTrackingTable1ProjectDesc',
+    columnProp: 'projectDesc',
+    headerAlign: 'center',
+    align: 'left',
+    columnLabel: '项目描述',
+    columnHidden: false,
+    columnImage: false,
+    columnSortable: false,
+    status: true,
+    fixed: '',
+    columnWidth: 120,
+    showOverflowTooltip: true
+  },
+  {
+    serialNumber: 'proofTrackingTable1TestPartNo',
+    columnProp: 'testPartNo',
+    headerAlign: 'center',
+    align: 'left',
+    columnLabel: '项目物料',
+    columnHidden: false,
+    columnImage: false,
+    columnSortable: false,
+    status: true,
+    fixed: '',
+    columnWidth: 90,
+    showOverflowTooltip: true
+  },
+  {
+    serialNumber: 'proofTrackingTable1PartDesc',
+    columnProp: 'partDesc',
+    headerAlign: 'center',
+    align: 'left',
+    columnLabel: '物料描述',
+    columnHidden: false,
+    columnImage: false,
+    columnSortable: false,
+    status: true,
+    fixed: 'left',
+    columnWidth: 150,
+    showOverflowTooltip: true
+  },
+  {
+    serialNumber: 'proofTrackingTable1ProjectRegion',
+    columnProp: 'cProjectRegion',
+    headerAlign: 'center',
+    align: 'left',
+    columnLabel: '区域',
+    columnHidden: false,
+    columnImage: false,
+    columnSortable: false,
+    status: true,
+    fixed: '',
+    columnWidth: 90,
+    showOverflowTooltip: true
+  },
+  {
+    serialNumber: 'proofTrackingTable1CustomerDesc',
+    columnProp: 'customerDesc',
+    headerAlign: 'center',
+    align: 'left',
+    columnLabel: '客户名称',
+    columnHidden: false,
+    columnImage: false,
+    columnSortable: false,
+    status: true,
+    fixed: '',
+    columnWidth: 130,
+    showOverflowTooltip: true
+  },
+  {
+    serialNumber: 'proofTrackingTable1Engineer',
+    columnProp: 'engineer',
+    headerAlign: 'center',
+    align: 'left',
+    columnLabel: 'Engineer',
+    columnHidden: false,
+    columnImage: false,
+    columnSortable: false,
+    status: true,
+    fixed: '',
+    columnWidth: 120,
+    showOverflowTooltip: true
+  },
+  {
+    serialNumber: 'proofTrackingTable1ProjectManager',
+    columnProp: 'projectManager',
+    headerAlign: 'center',
+    align: 'left',
+    columnLabel: 'PM/Sales',
+    columnHidden: false,
+    columnImage: false,
+    columnSortable: false,
+    status: true,
+    fixed: '',
+    columnWidth: 120,
+    showOverflowTooltip: true
+  },
+  {
+    serialNumber: 'proofTrackingTable1ProofingNo',
+    columnProp: 'proofingNo',
+    headerAlign: 'center',
+    align: 'left',
+    columnLabel: '打样单号',
+    columnHidden: false,
+    columnImage: false,
+    columnSortable: false,
+    status: true,
+    fixed: '',
+    columnWidth: 90,
+    showOverflowTooltip: true
+  },
+  {
+    serialNumber: 'proofTrackingTable1ProofingStatus',
+    columnProp: 'proofingStatus',
+    headerAlign: 'center',
+    align: 'center',
+    columnLabel: '打样状态',
+    columnHidden: false,
+    columnImage: false,
+    columnSortable: false,
+    status: true,
+    fixed: '',
+    columnWidth: 80,
+    showOverflowTooltip: false
+  },
+  {
+    serialNumber: 'proofTrackingTable1TrackingStatus',
+    columnProp: 'trackingStatus',
+    headerAlign: 'center',
+    align: 'center',
+    columnLabel: 'Tracking Status',
+    columnHidden: false,
+    columnImage: false,
+    columnSortable: false,
+    status: true,
+    fixed: '',
+    columnWidth: 150,
+    showOverflowTooltip: true
+  }
+]
+
+function cloneDefaultTrackingColumns () {
+  return DEFAULT_TRACKING_COLUMNS.map(item => Object.assign({}, item))
+}
+
 export default {
   name: 'ProjectProofTracking',
   directives: {
@@ -1044,6 +1205,7 @@ export default {
         proofSyncFlag: '',
         proofingStatus: ''
       },
+      trackingColumnList: cloneDefaultTrackingColumns(),
       processColumns: cloneDefaultProcessColumns(),
       buProcessConfigDialogVisible: false,
       buProcessConfigRows: [],
@@ -1208,7 +1370,7 @@ export default {
     }
   },
   activated () {
-    Promise.all([this.loadUserBuList(), this.queryProcessColumns()]).then(() => {
+    Promise.all([this.loadUserBuList(), this.queryProcessColumns(), this.loadTrackingColumns()]).then(() => {
       this.queryBuProcessConfig()
     })
     this.getDataList()
@@ -1217,6 +1379,12 @@ export default {
     this.destroyDefaultProcessConfigSortable()
   },
   computed: {
+    visibleTrackingColumns () {
+      const sourceColumns = Array.isArray(this.trackingColumnList) && this.trackingColumnList.length > 0
+        ? this.trackingColumnList
+        : this.buildDefaultTrackingColumns()
+      return sourceColumns.filter(item => this.isTrackingColumnVisible(item))
+    },
     visibleProcessColumns () {
       const searchBuNo = this.getSelectedSearchBuNo()
       // 指定了查询BU时，整表进度列按该BU配置展示。
@@ -1250,6 +1418,193 @@ export default {
     }
   },
   methods: {
+    getTrackingColumnFunctionId () {
+      return this.$route && this.$route.meta && this.$route.meta.menuId
+        ? this.$route.meta.menuId
+        : ''
+    },
+    getTrackingColumnTableId () {
+      const functionId = this.getTrackingColumnFunctionId()
+      return functionId ? `${functionId}table1` : 'projectProofTrackingTable1'
+    },
+    buildDefaultTrackingColumns () {
+      const functionId = this.getTrackingColumnFunctionId()
+      const tableId = this.getTrackingColumnTableId()
+      const userId = this.$store.state.user.name
+      return cloneDefaultTrackingColumns().map(item => Object.assign({}, item, {
+        userId: userId,
+        functionId: functionId,
+        tableId: tableId,
+        tableName: '项目打样跟踪'
+      }))
+    },
+    normalizeTrackingColumnWidth (value, fallbackValue) {
+      const parsedValue = parseInt(value, 10)
+      if (!Number.isNaN(parsedValue) && parsedValue > 0) {
+        return parsedValue
+      }
+      const parsedFallback = parseInt(fallbackValue, 10)
+      return !Number.isNaN(parsedFallback) && parsedFallback > 0 ? parsedFallback : 120
+    },
+    normalizeTrackingColumnBoolean (value, fallbackValue) {
+      if (value === undefined || value === null || value === '') {
+        return fallbackValue
+      }
+      if (typeof value === 'boolean') {
+        return value
+      }
+      if (typeof value === 'number') {
+        return value !== 0
+      }
+      const normalizedValue = String(value).trim().toLowerCase()
+      if (normalizedValue === 'true' || normalizedValue === '1' || normalizedValue === 'y' || normalizedValue === 'yes') {
+        return true
+      }
+      if (normalizedValue === 'false' || normalizedValue === '0' || normalizedValue === 'n' || normalizedValue === 'no') {
+        return false
+      }
+      return fallbackValue
+    },
+    normalizeTrackingColumnItem (item, fallbackItem) {
+      const defaultItem = fallbackItem || {}
+      const mergedItem = Object.assign({}, defaultItem, item || {})
+      const columnProp = mergedItem.columnProp == null ? '' : String(mergedItem.columnProp).trim()
+      const normalizedLabel = mergedItem.columnLabel == null ? '' : String(mergedItem.columnLabel).trim()
+      return Object.assign({}, mergedItem, {
+        columnProp: columnProp,
+        columnLabel: normalizedLabel || defaultItem.columnLabel || columnProp,
+        headerAlign: mergedItem.headerAlign || defaultItem.headerAlign || 'center',
+        align: mergedItem.align || defaultItem.align || 'left',
+        fixed: mergedItem.fixed == null ? (defaultItem.fixed || '') : mergedItem.fixed,
+        columnWidth: this.normalizeTrackingColumnWidth(mergedItem.columnWidth, defaultItem.columnWidth),
+        showOverflowTooltip: this.normalizeTrackingColumnBoolean(mergedItem.showOverflowTooltip, defaultItem.showOverflowTooltip !== false),
+        status: this.normalizeTrackingColumnBoolean(mergedItem.status, true),
+        columnHidden: this.normalizeTrackingColumnBoolean(mergedItem.columnHidden, false)
+      })
+    },
+    normalizeTrackingColumns (rows) {
+      const defaultColumns = this.buildDefaultTrackingColumns()
+      const defaultColumnMap = {}
+      defaultColumns.forEach(item => {
+        defaultColumnMap[item.columnProp] = item
+      })
+      const mergedRows = []
+      const usedColumnPropMap = {}
+      if (Array.isArray(rows)) {
+        rows.forEach(item => {
+          const columnProp = item && item.columnProp != null ? String(item.columnProp).trim() : ''
+          if (!columnProp || usedColumnPropMap[columnProp]) {
+            return
+          }
+          usedColumnPropMap[columnProp] = true
+          mergedRows.push(this.normalizeTrackingColumnItem(item, defaultColumnMap[columnProp]))
+        })
+      }
+      // 用户旧配置可能缺少新加列，这里按系统默认顺序补齐，避免新增列永远看不到。
+      defaultColumns.forEach((defaultItem, defaultIndex) => {
+        if (usedColumnPropMap[defaultItem.columnProp]) {
+          return
+        }
+        let insertIndex = mergedRows.length
+        for (let i = defaultIndex + 1; i < defaultColumns.length; i++) {
+          const nextProp = defaultColumns[i].columnProp
+          const matchedIndex = mergedRows.findIndex(item => item.columnProp === nextProp)
+          if (matchedIndex > -1) {
+            insertIndex = matchedIndex
+            break
+          }
+        }
+        if (insertIndex === mergedRows.length) {
+          for (let i = defaultIndex - 1; i >= 0; i--) {
+            const prevProp = defaultColumns[i].columnProp
+            const matchedIndex = mergedRows.findIndex(item => item.columnProp === prevProp)
+            if (matchedIndex > -1) {
+              insertIndex = matchedIndex + 1
+              break
+            }
+          }
+        }
+        mergedRows.splice(insertIndex, 0, Object.assign({}, defaultItem))
+        usedColumnPropMap[defaultItem.columnProp] = true
+      })
+      return mergedRows
+    },
+    loadTrackingDefaultColumns (tableId) {
+      const queryTable = {
+        functionId: this.getTrackingColumnFunctionId(),
+        tableId: tableId,
+        languageCode: this.$i18n && this.$i18n.locale ? this.$i18n.locale : ''
+      }
+      return getTableDefaultListLanguage(queryTable).then(({ data }) => {
+        const rows = data && Array.isArray(data.rows) ? data.rows : []
+        this.trackingColumnList = rows.length > 0
+          ? this.normalizeTrackingColumns(rows)
+          : this.buildDefaultTrackingColumns()
+        this.refreshTrackingTableLayout()
+        return this.trackingColumnList
+      }).catch(() => {
+        this.trackingColumnList = this.buildDefaultTrackingColumns()
+        this.refreshTrackingTableLayout()
+        return this.trackingColumnList
+      })
+    },
+    loadTrackingColumns () {
+      const tableId = this.getTrackingColumnTableId()
+      const queryTableUser = {
+        userId: this.$store.state.user.name,
+        functionId: this.getTrackingColumnFunctionId(),
+        tableId: tableId,
+        status: true,
+        languageCode: this.$i18n && this.$i18n.locale ? this.$i18n.locale : ''
+      }
+      return getTableUserListLanguage(queryTableUser).then(({ data }) => {
+        const rows = data && Array.isArray(data.rows) ? data.rows : []
+        if (rows.length > 0) {
+          this.trackingColumnList = this.normalizeTrackingColumns(rows)
+          this.refreshTrackingTableLayout()
+          return this.trackingColumnList
+        }
+        return this.loadTrackingDefaultColumns(tableId)
+      }).catch(() => {
+        this.trackingColumnList = this.buildDefaultTrackingColumns()
+        this.refreshTrackingTableLayout()
+        return this.trackingColumnList
+      })
+    },
+    isTrackingColumnVisible (column) {
+      if (!column) {
+        return false
+      }
+      if (this.normalizeTrackingColumnBoolean(column.status, true) === false) {
+        return false
+      }
+      return this.normalizeTrackingColumnBoolean(column.columnHidden, false) === false
+    },
+    isProjectPartSyncColumn (columnProp) {
+      return ['projectNo', 'projectDesc', 'testPartNo', 'partDesc'].indexOf(columnProp) > -1
+    },
+    getTrackingColumnDisplayValue (row, columnProp) {
+      if (!row || !columnProp) {
+        return '-'
+      }
+      const value = row[columnProp]
+      return this.isBlankValue(value) ? '-' : String(value)
+    },
+    getTrackingRoleDisplayValue (row, nameField, valueField) {
+      if (!row) {
+        return '-'
+      }
+      const roleNameValue = row[nameField]
+      if (!this.isBlankValue(roleNameValue)) {
+        return String(roleNameValue)
+      }
+      const roleValue = row[valueField]
+      if (this.isBlankValue(roleValue)) {
+        return '-'
+      }
+      const displayName = this.getRoleDisplayName(roleValue)
+      return this.isBlankValue(displayName) ? '-' : displayName
+    },
     loadUserBuList () {
       if (this.userBuList.length > 0) {
         this.ensureBuProcessConfigRows()