laws_weilai/jero-web/src/components/tableCollection/index.vue

<template>
  <div style="height: 100%">
    <div class="box">
      <a-table
        class="table"
        rowKey="id"
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        :pagination="false"
        :scroll="{x: true}"
        :data-source="dataSource"
        :loading="loading"
        :columns="columns"
        @change="tableOnChange"
        @onHeaderRow='onHeaderRow'
      >
        <span slot="operation" slot-scope="record">
                     <a v-for="(ol,index) in OperationList"
                        @click="OperationClick(ol,record)">
                        <span v-if="ol.text == $t('CancelCollection')" v-has="ol.has" class="text">
                                    {{!record.collectFlag || record.collectFlag == 0 ? $t('Collection') :$t('CancelCollection')}}
                        </span>
                        <span v-else-if="ol.text == $t('CancelSubscribe')" v-has="ol.has" class="text">
                                    {{!record.subscribeFlag || record.subscribeFlag == 0 ? $t('subscribe') :$t('CancelSubscribe')}}
                       </span>
                        <span v-else v-has="ol.has" class="text">
                               {{ol.text}}
                        </span>
                     </a>
         </span>
        <span slot="detailClick" slot-scope="text,record">
          <collection-type :detailDate='text' />
        </span>
      </a-table>
    </div>
  </div>
</template>

<script>
import eventBUs from '../../common/event'
import { getAction, postAction } from '@/api/manage'
import CollectionType from '@/components/CollectionType'
export default {
  name: 'index',
  props: {
    //接口
    url: {
      type: Object,
      default: {}
    },
    // 详细列表得一条数据
    paramsManifest: {
      type: Object,
      default: {},
      require: true
    },
    formInline: {
      type: Object,
      default: true
    }
  },
  components: {
    CollectionType
  },
  data() {
    return {
      jsonBody: [],
      checkboxList: [],
      tableAll: false,
      indeterminate: false,
      columns: [],
      selectedRowKeys: [],
      dataSource: [],
      pageNo: 1,
      pageSize: 10,
      total: 0,
      searchParmes: {},
      loading: false,
      orderBy: '1',
      orderByField: ''
    }
  },
  mounted() {},
  methods: {
    onHeaderRow(column, index) {
      console.log(column, index)
    },
    getData() {
      let params = {
        paramsManifestId: this.paramsManifest.id,
        flag: '7'
      }
      getAction(this.url.tableHeader, params).then((res) => {
        if (res.success) {
          var jsonHead = res.result
          this.columns = []
          jsonHead.forEach((res, index) => {
            this.columns.push({
              title: res.db_field_txt,
              dataIndex: res.db_field_name,
              align: 'center',
              ellipsis: true,
              sorter: res.sort
            })
            if (res.type) {
              this.columns[index].scopedSlots = {
                customRender: 'detailClick'
              }
            }
          })
          if (this.showAction) {
            this.columns.push({
              title: this.$t('operation'),
              align: 'center',
              fixed: 'right',
              width: width,
              scopedSlots: { customRender: 'operation' }
            })
          }
        }
      })
    },
    tableOnChange(pagination, filters, sorter) {
      console.log(pagination,filters,sorter,'iiiiiiiiiiiiiiiii')
    },
    getTableListReset() {
      let params = {
        paramsManifestId: this.paramsManifest.id,
      }
      this.loading = true
      getAction(this.url.tableList, params).then((res) => {
        if (res.success) {
          this.dataSource = res.result
          this.total = res.result.total
          this.loading = false
        } else {
          this.loading = false
        }
      })
    },
    getTableList() {
      let params = {
        paramsManifestId: this.paramsManifest.id,
        ...this.formInline
      }
      this.loading = true
      getAction(this.url.tableList, params).then((res) => {
        if (res.success) {
          this.dataSource = res.result
          this.total = res.result.total
          this.loading = false
        } else {
          this.loading = false
        }
      })
    },
    onChange(page, pageSize) {
      // this.pageNo = page
      // this.getTableList()
    },
    onSelectChange(value,rowValue) {
      console.log(value,rowValue)
      this.selectedRowKeys = value
      this.$emit('value',value)
      this.$emit('rowValue', rowValue)
    },
    OperationClick(ol, item) {
      // this.$emit(ol.ClickEvent, item)
    },
    detailClick(item, index) {
      // this.$emit('detailClick', item)
    }
  },
  watch: {
    paramsManifest(newVal, oldVal) {
      this.getData()
      this.getTableList()
    }
  }
}
</script>
<style>
.table .ant-table-column-title {
  font-weight: bold;
}

.ant-table td {
  white-space: nowrap;
}
</style>
<style scoped>
.box {
  width: 100%;
  height: calc(100% - 100px);
  overflow: auto;
}

.text {
  margin-right: 10px;
}

.page {
  text-align: right;
  margin-top: 20px;
}
</style>