baozhida-logistics/src/components/tables.vue

<template>
  <!-- tables -->
  <div class="tables_grid">
    <el-table ref="tableRef" style="width: 100%" tooltip-effect="dark myTooltips" :show-header="showHeader"
      class="table-style" :data="tableData" :border="border" :row-key="(val) => rowKey(val)" @cell-click="cellClick"
      @selection-change="handleSelectionChange">
      <template v-for="(item,index) in tableList">
        <el-table-column :fixed="suspension ? 'right' : false" :label="item.label" :width="item.colWidth" align="center"
          v-if="item.field == 'action'">
          <template slot-scope="scope">
            <div style="display: flex;align-items: center;justify-content: center;">
              <div v-for="disk in item.labelButton" :key="disk.key" class="btn_table">
                <el-button :class="disk.modality" :type="disk.style" :icon="disk.icon" size="mini"
                  :disabled="jurisdiction(scope.row,disk.type)" @click="buttonData(scope.row,disk.type)">
                  {{ disk.label }}
                </el-button>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column class="card_unpack_btn" :fixed="suspension ? 'right' : false" :label="item.label"
          :width="unpackWidth" align="center" v-else-if="item.field == 'unpackBtn'">
          <template slot="header" slot-scope="scope">
            <div class="unpack_card">
              <div v-if="!iconFlag">{{item.label}}</div>
              <i class="card_unpack" :class="iconFlag ? 'el-icon-s-fold' : 'el-icon-s-unfold'" @click="getUnpack"></i>
            </div>
          </template>
          <template slot-scope="scope">
            <div class="center_in" v-if="!iconFlag">
              <div style="display: flex;" v-for="disk in item.labelButton" :key="disk.key" class="btn_table">
                <el-button :class="disk.modality" :type="disk.style" :icon="disk.icon" size="mini"
                  :disabled="jurisdiction(scope.row,disk.type)" @click="buttonData(scope.row,disk.type)">
                  {{ disk.label }}
                </el-button>
              </div>
            </div>
            <div v-else :key="index">
              <el-popover placement="top" width="460" trigger="click">
                <div class="center_in">
                  <div v-for="disk in item.labelButton" :key="disk.key" class="btn_table">
                    <el-button :class="disk.modality" :type="disk.style" :icon="disk.icon" size="mini"
                      :disabled="jurisdiction(scope.row,disk.type)" @click="buttonData(scope.row,disk.type)">
                      {{ disk.label }}
                    </el-button>
                  </div>
                </div>
                <el-tag style="cursor: pointer;" size="mini" slot="reference">操作</el-tag>
              </el-popover>
            </div>
          </template>
        </el-table-column>
        <el-table-column :prop="item.field" :label="item.label" :width="item.colWidth" :align="item.align"
          v-else-if="['provUser.isorders','provUser.userType','customer.type','tbFillData.productMediaId'].includes(item.field)">
          <template slot-scope="scope">
            <div>{{initDictvalue(scope.row,item.options,item.field)}}</div>
          </template>
        </el-table-column>
        <el-table-column :prop="item.field" :label="item.label" :width="item.colWidth" :align="item.align"
          v-else-if="['userId', 'type', 'status', 'storeId', 'personCode', 'optType', 'corrosion', 'crackle', 'deform', 'damage', 'safeAnnex', 'gasPressure', 'bodyDeform', 'fillingLeak', 'bodyTemperature', 'filledLeak', 'warnSign', 'fillLabel', 'seal','fill_media'].includes(item.field)">
          <template slot-scope="scope">
            <div :style="{color: filterColor(scope.row,item.options,item.field)}">
              {{initDictvalueil(scope.row,item.options,item.field)}}
            </div>
          </template>
        </el-table-column>
        <el-table-column :prop="item.field" :label="item.label" :width="item.colWidth" :align="item.align"
          v-else-if="item.field == 'myStatus'">
          <template slot-scope="scope">
            <div :style="{color: myfilterColor(scope.row,item.options,item.field)}">
              {{myInitDictvalueil(scope.row,item.options,item.field)}}
            </div>
          </template>
        </el-table-column>
        <el-table-column :prop="item.field" :label="item.label" :width="item.colWidth" :align="item.align"
          v-else-if="item.field == 'region'">
          <template slot-scope="scope">
            <div>{{scope.row.provinceName}}{{scope.row.cityName}}{{scope.row.regionName}}</div>
          </template>
        </el-table-column>
        <el-table-column type="index" :fixed="item.boxhead ? true : false" width="80px" :label="item.label"
          :align="item.align" v-else-if="item.field == 'index'">
        </el-table-column>
        <el-table-column type="selection" v-model="selectionList" reserve-selection width="55"
          v-else-if="item.field == 'selection'"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" :prop="item.field" :label="item.label" :width="item.colWidth"
          :align="item.align" v-else>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script>
  import {
    orderStatus,
    rectificationState
  } from '@/assets/js/blockSort'
  export default {
    props: {
      // 是否显示表头
      showHeader: {
        type: Boolean,
        default: () => true,
      },
      // 表格边框
      border: {
        type: Boolean,
        default: () => false,
      },
      // 表格数据
      tableList: {
        type: Array,
        default: () => [],
      },
      // 表格label数据
      tableData: {
        type: Array,
        default: () => [],
      },
      // 网关数据
      detailGateway: {
        type: Array,
        default: () => [],
      },
      // 语言数据
      detailLanguage: {
        type: Array,
        default: () => [],
      },
      // 是否悬浮
      suspension: {
        type: Boolean,
        default: () => false,
      }
    },
    data() {
      return {
        orderStatusList: orderStatus(),
        waybillIds: [],
        selectionList: [],
        iconFlag: false,
        unpackWidth: '460px',
        visible: false,
      }
    },
    methods: {
      // 文字匹配
      initDictvalue(value, list, type) {
        let propertyName = type.split(".")
        let name = ''
        if (list) {
          list.forEach(item => {
            if (value[propertyName[0]][propertyName[1]] == item.value) {
              name = item.label
            }
          })
        }
        return name
      },
      // 普通类型文字匹配
      initDictvalueil(value, list, type) {
        let name = ''
        if (list) {
          list.forEach(item => {
            if (value[type] === item.value) {
              name = item.label
            }
          })
        }
        return name
      },
      // tag颜色获取
      filterColor(value, list, type) {
        let color = ''
        if (list) {
          list.forEach(item => {
            if (value[type] === item.value) {
              color = item.bgcolor
            }
          })
        }
        return color
      },
      // 我的订单
      myInitDictvalueil(value, list, type) {
        if ([1].includes(value.status)) {
          return list[0].label
        } else if ([2, 3, 9].includes(value.status)) {
          return list[1].label
        } else if ([4, 5, 6, 7, 10, 11].includes(value.status)) {
          return list[2].label
        } else if (value.status == 8) {
          return list[3].label
        }
      },
      myfilterColor(value, list, type) {
        if ([1].includes(value.status)) {
          return list[0].bgcolor
        } else if ([2, 3, 9].includes(value.status)) {
          return list[1].bgcolor
        } else if ([4, 5, 6, 7, 10, 11].includes(value.status)) {
          return list[2].bgcolor
        } else if (value.status == 8) {
          return list[3].bgcolor
        }
      },
      // 城市筛选
      cityScreening(value, list, type) {
        function getChildById(parentArray, id) {
          for (let i = 0; i < parentArray.length; i++) {
            if (parentArray[i].value === id) { // 如果当前元素的ID与目标ID相等，则返回该元素
              return parentArray[i];
            } else if (parentArray[i].children && Array.isArray(parentArray[i].children)) { // 判断当前元素是否有子节点且类型为数组
              const result = getChildById(parentArray[i].children, id); // 对子节点进行递归调用
              if (result !== null) { // 若子节点存在结果，则返回该结果
                return result;
              }
            }
          }
          return null; // 没有找到符合条件的元素时返回null
        }
        var name = getChildById(list, value[type])
        if (name != null) {
          return name.label
        }
      },
      // 权限按钮
      jurisdiction(row, type) {
        const arr = localStorage.getItem('userList')
        const userArr = JSON.parse(arr)
        if (row.waybillNo) {
          if (userArr.userType == 'customer' && type == 'edit' || type == 'del') {
            if ([1, 2, 3, 9].includes(row.status)) {
              return false
            } else {
              return true
            }
          } else if (type == 'send' || type == 'del') {
            if (row.status == 1 || row.status == 2 || row.status == 3 || row.status == 9) {
              return false
            } else {
              return true
            }
          } else if (type == 'pdf') {
            if (row.status == 8) {
              return false
            } else {
              return true
            }
          } else if (type == 'print') {
            if (row.status == 2 || row.status == 3 || row.status == 9) {
              return false
            } else {
              return true
            }
          }
        }
      },
      // 选择tables某一项
      cellClick(row) {
        this.$emit('cellClick', row)
      },
      // 选择多行数据
      handleSelectionChange(row) {
        this.selectionList = row
        let arrID = []
        const arr = row
        arr.forEach(item => {
          // const option = {
          //   id: item.id,
          //   status: item.status,
          // }
          // arrID.push(option)
          // arrID.push(item.id)
          arrID.push(item)
        })
        this.waybillIds = JSON.parse(JSON.stringify(arrID))
      },
      // 操作按钮
      buttonData(row, type) {
        this.$emit("buttonData", row, type);
      },
      // 清空选中项
      clearSelected() {
        this.$nextTick(() => {
          this.$refs.tableRef.clearSelection();
        })
      },
      rowKey(val) {
        if (val.id) {
          return val.id
        } else {
          if (val.T_id) {
            return val.T_id + Math.random()
          } else {
            return val.T_sn
          }
        }
      },
      // 展开收起
      getUnpack() {
        if (this.iconFlag) {
          this.unpackWidth = '460px'
          this.iconFlag = false
        } else {
          this.unpackWidth = '70px'
          this.iconFlag = true
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  ::v-deep .el-table__fixed-right {
    transition: width 0.15s;
    -webkit-transition: width 0.15s;
    -moz-transition: width 0.15s;
    -webkit-transition: width 0.15s;
    -o-transition: width 0.15s;
  }

  .btn_table:nth-of-type(n+2) {
    margin-left: 10px;
  }

  .el-button--mini {
    padding: 5px;
  }

  .deleteBtn {
    color: #ff6665;
  }

  .icon_play {
    font-size: 25px;
    color: #83FF00;
  }

  .icon_pause {
    font-size: 25px;
    color: #FF9494;
  }

  .title_play {
    font-size: 15px;
    color: #83FF00;
    margin-left: 10px;
  }

  .title_pause {
    font-size: 15px;
    color: #FF9494;
    margin-left: 10px;
  }

  .card_operation {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .gateway_title {
    color: #59fe6d;
  }

  .gateway_title1 {
    color: #34d9f4;
  }

  .operator_title {
    color: #fff;
  }

  .unpack_card {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .card_unpack {
    cursor: pointer;
    font-size: 25px;
    margin-left: 10px;
  }
</style>
<style>
  .myTooltips {
    max-width: 50%;
  }
</style>