xiaoshi_system/src/views/report/components/view/table.vue

<template>
  <div>
    <div>
      <el-table :data="tableData" border style="width: 100%" header-row-class-name="custom-table-header" @sort-change="sortChange">
        <el-table-column label="#" width="60" type="index" align="center">
          <template slot-scope="scope">
            <span>{{ (scope.$index + 1) + ((queryParams.current - 1) * queryParams.size) }}</span>
          </template>
        </el-table-column>

        <el-table-column v-for="item in column" :key="item.value" :prop="item.value" :label="item.name" sortable="custom" align="center">
          <template slot-scope="scope">
            <div v-if="['name'].includes(item.value)">
              <el-link @click="handleItem(scope.row,item.value)">{{ scope.row[item.value] }}</el-link>
            </div>
            <div v-else-if="['eventNames'].includes(item.value)" v-html="getColumnData(scope.row,item.key)"></div>
            <div v-else>{{ scope.row[item.value] }}</div>
          </template>
        </el-table-column>

        <el-table-column v-if="[1].indexOf(isOperate) == -1" label="操作" align="center" width="150px">
        <template slot-scope="scope">
          <el-dropdown @command="handleCommand($event, scope.row)" split-button type="primary" size="small"  @click="handleCommand('e',scope.row)">
            <span v-if="$reportPermission(scope.row.id,[0,1])">编辑</span>
            <span v-else>查看</span>
            <el-dropdown-menu slot="dropdown" class="text-align_center">
              <el-dropdown-item command="0" v-if="$reportPermission(scope.row.id,[0,1])">分享</el-dropdown-item>
              <el-dropdown-item command="1" v-if="[2,3].includes(scope.row.status) && $reportPermission(scope.row.id,[0,1])">导出报告</el-dropdown-item>
              <el-dropdown-item command="2" v-if="[2,3].includes(scope.row.status) && $reportPermission(scope.row.id,[0,1])">报告文档</el-dropdown-item>
              <el-dropdown-item command="3" v-if="[1,2].includes(scope.row.status)&&[0,1,2,3].includes(scope.row.type) && $reportPermission(scope.row.id,[0,1])">自定义字段</el-dropdown-item>
              <el-dropdown-item command="4" v-if="[2].includes(scope.row.status)&& [0,1,2,3].includes(scope.row.type) && $reportPermission(scope.row.id,[0,1])">任务分配</el-dropdown-item>
              <el-dropdown-item command="5" v-if="([1].includes(scope.row.status) || (scope.row.type == 4 && [1,2].includes(scope.row.status))) && $reportPermission(scope.row.id,[0,1])">{{!([3,4].includes(scope.row.type))?'拆分特征':'产品信息录入'}}</el-dropdown-item>
              <el-dropdown-item command="8" v-if="(scope.row.type == 4 && [1,2].includes(scope.row.status)) && $reportPermission(scope.row.id,[0,1])">专利与产品关联比对</el-dropdown-item>
              <el-dropdown-item command="9" v-if="(scope.row.type == 5 && [1,2].includes(scope.row.status)) && $reportPermission(scope.row.id,[0,1])"> 规避方案填写</el-dropdown-item>
              <el-dropdown-item command="10" v-if="[0,1,2,3].includes(scope.row.type)&&[2].includes(scope.row.status) && $reportPermission(scope.row.id,[0,1])"> 添加对比文件</el-dropdown-item>
              <el-dropdown-item command="11" v-if="[1,2].includes(scope.row.status) && $reportPermission(scope.row.id,[0,1])"> 完成报告</el-dropdown-item>
              <el-dropdown-item command="12" v-if="[3].includes(scope.row.status) && $reportPermission(scope.row.id,[0,1])">添加追踪报告</el-dropdown-item>
              <el-dropdown-item command="13" v-if="(scope.row.type == 7 && [1,2,3].includes(scope.row.status)) && $reportPermission(scope.row.id,[0,1])">添加无效理由和证据</el-dropdown-item>
              <el-dropdown-item command="14" v-if="(scope.row.type == 7 && [1,2,3].includes(scope.row.status)) && $reportPermission(scope.row.id,[0,1])">证据文献</el-dropdown-item>
              <!-- <el-dropdown-item command="6" v-if="[2,3].includes(scope.row.status)&& scope.row.type != 4">导入 </el-dropdown-item> -->
              <el-dropdown-item command="7" divided style="color: red;" v-if=" $reportPermission(scope.row.id,[0,1])">删除 </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import mixins from '../mixins';
export default {
  mixins:[mixins],
  props: {
    isOperate: {//控制显示
      type: [String,Number],
      default:''
    },
   
    column: {//显示栏位管理数组
      type: Array,
      default: () => {
        return [
          
        ]
      }
    }
  },
  data() {
    return {
      
    };
  },
  watch: {
    
  },
  mounted() {
    
  },
  methods: {
    // 排序
    sortChange({ column, prop, order }) {
      this.$emit('sort', { column, prop, order })
    },
    // 获取栏位数据
    getColumnData(row,key) {
      if (key == 'eventNames') {
        if (row[key]) {
          var a=''
          row[key].forEach(item => {
            a+=item.name + '</br>'
          });
          return a
        } else {
          return '--'
        }
      }
    },

  },
};
</script>
<style lang="scss">

</style>
<style lang="scss" scoped></style>