laws_weilai/jero-web/src/views/projectManagement/components/customizeList.vue

<template>
  <a-drawer
    :title="$t('customize')"
    :maskClosable="false"
    :width="1000"
    placement="right"
    :closable="true"
    @close="handleCancel"
    :visible="visible"
    style="height: 100%;overflow: auto;padding-bottom: 53px;">
    <div style="margin-bottom: 60px">
      <a-table
        :components="drag(columns,'columns')"
        :columns="columns"
        :rowKey="record=> record.key"
        :scroll="{x: 800}"
        :data-source="dataList"
        :pagination="false"
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange,columnTitle:'',getCheckboxProps: getCheckboxProps }"
        :loading="loading">

      </a-table>
      <!--      <div class="page" v-if="dataList.length > 0">-->
      <!--        <a-pagination-->
      <!--          :show-total="total => $t('total')+` ${total} `+$t('strip')"-->
      <!--          show-quick-jumper-->
      <!--          show-size-changer-->
      <!--          :page-size.sync="pageSize"-->
      <!--          :total="total"-->
      <!--          :current="pageNo"-->
      <!--          @change="onChange"-->
      <!--          @showSizeChange="SizeChange"-->
      <!--        />-->
      <!--      </div>-->
    </div>

    <div class="drawer-bootom-button">
      <a-button @click="handleCancel" style="margin-right: 16px">{{$t('cancel')}}</a-button>
      <a-button @click="handleSubmit(undefined)" type="primary" :loading="confirmLoading">{{$t('determine')}}</a-button>
    </div>
  </a-drawer>
</template>

<script>
  import { getAction, postAction } from '@/api/manage'
  import { ResizeHeader, ResizeColumnProvide } from '@/mixins/header'

  export default {
    name: 'transferList',
    components: {},
    props: ['url'],
    mixins:[ResizeHeader, ResizeColumnProvide],
    data() {
      return {
        visible: false,
        queryParam: {},
        confirmLoading: false,
        selectedRowKeys: [],
        columns: [
          {
            title: this.$t('customColumn'),
            dataIndex: 'name',
            align: 'left',
            ellipsis: true,
            width: 884
          },
        ],
        dataList: [
          {
            orderBy: '1',
            name: '1',
            id: '1',
            status:1,
          },
          {
            orderBy: '2',
            name: '2',
            id: '12',
            status:2,
          },
          {
            orderBy: '3',
            name: '3',
            id: '13',
          },
          {
            orderBy: '4',
            name: '4',
            id: '15',
          },
          {
            orderBy: '5',
            name: '4',
            id: '16',
          },
          {
            orderBy: '6',
            name: '4',
            id: '17',
          },
          {
            orderBy: '7',
            name: '4',
            id: '18',
          },
          {
            orderBy: '8',
            name: '4',
            id: '19',
            status:2,
          },
        ],
        content: [],
        loading: false,
        pageNo: 1,
        pageSize: 10,
        total: 0
      }
    },
    mounted() {

    },
    methods: {
      transferModel() {
        this.visible = true
        this.queryParam = {}
        this.selectedRowKeys = []
        // this.replacePage()
      },
      searchQuery() {
        this.pageNo = 1
        this.replacePage()
      },
      searchReset() {
        this.pageNo = 1
        this.queryParam = {}
        this.replacePage()
      },
      onChange(page, pageSize) {
        this.pageNo = page
        this.replacePage()
      },
      SizeChange(page, pageSize) {
        this.pageNo = 1
        this.pageSize = pageSize
        this.replacePage()
      },
      replacePage() {
        let query = {
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          ...this.queryParam
        }
        this.loading = true
        postAction(this.url.transferUrl, query).then((res) => {
          if (res.success) {
            this.dataList = res.result.records || []
            this.total = res.result.total
            this.loading = false
          } else {
            this.loading = false
          }
        })
      },
      onSelectChange(value) {
        this.selectedRowKeys = value
        // if (this.selectedRowKeys.length > 1) {
        //   this.selectedRowKeys.shift()
        // }
      },
      getCheckboxProps(record) {
        console.log(record.status, 'status');
        return ({
          props: {
            //当状态是1或者2的时候执行disable
            disabled: record.status === 1 || record.status === 2
          }
        })
      },
      handleCancel() {
        this.visible = false
      },
      handleSubmit(flag) {
        if (this.selectedRowKeys && this.selectedRowKeys.length > 0) {
          this.confirmLoading = true
          let selectedRowKeys = JSON.parse(JSON.stringify(this.selectedRowKeys))
          this.confirmLoading = false
          this.$emit('transferListForm',selectedRowKeys.join(','))
          this.selectedRowKeys = []
          // postAction(this.url.addModel, {
          //   dummyInventoryBaseId: selectedRowKeys.join(','),
          //   projectLibraryId: this.$route.query.id,
          //   flag: flag
          // }).then((res) => {
          //   if (res.success) {
          //     this.confirmLoading = false
          //     this.$message.success(this.$t('OperationSuccessful'))
          //     this.visible = false
          //     this.selectedRowKeys = []
          //     this.$emit('transferListForm')
          //   } else {
          //     if (res.message == '该虚拟清单的维护清单中没有数据,是否需要添加') {
          //       this.confirmLoading = false
          //       this.getAdd()
          //       return
          //     }
          //     this.$message.warning(this.$t('operationFailed'))
          //     this.confirmLoading = false
          //   }
          // })
        } else {
          this.$message.warning(this.$t('selectLeastOne'))
        }
      },
      getAdd() {
        let _this = this
        this.$confirm({
          content: _this.$t('TheDoesNotContainData'),
          onOk() {
            _this.handleSubmit('1')
          }
        })
      }
    }
  }
</script>

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

.drawer-bootom-button {
  position: absolute;
  bottom: 0;
  z-index: 100;
  width: 100%;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  left: 0;
  background: #fff;
  border-radius: 0 0 2px 2px;
}

.box-title-text {
  line-height: 1.4;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.title-text {
  width: 20%;
  min-width: 110px;
  color: #000F16;
  display: inline-block;
  font-weight: 500;
  font-size: 14px;
  margin-right: 16px;
  margin-top: 3px;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.box-input {
  display: inline-block;
  width: 70%;
  height: 38px;
  margin-top: 2px;
}

.box-button {
  height: 38px;
}

</style>