laws_weilai/jero-web/src/views/businessSupport/problemKnowledgeBase/components/classificationMaintenanceModel.vue

<template>
  <div>
    <a-drawer
      :title="$t('classificationMaintenance')"
      :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">
        <div class="box-title">
          <div @click="addLabelClick" class="operator-text">
            <a-icon type="plus"/>
            {{$t('addLabel')}}
          </div>
        </div>
        <a-table
          :columns="columns"
          :scroll="{x: '100%',y:'calc(100vh - 300px)'}"
          :data-source="dataList"
          :pagination="false"
          :loading="loading">
           <span slot="operation" slot-scope="text,record">
              <a style="margin-right: 8px" @click="edit(record)">{{$t('edit')}}</a>
              <a @click="deleteData(record)">{{$t('delete')}}</a>
           </span>
        </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" type="danger">{{$t('cancel')}}</a-button>
      </div>
    </a-drawer>
    <classificationMaintenanceAdd ref="classificationMaintenanceAddRef"
                                  @classificationMaintenanceAddForm="classificationMaintenanceAddForm"/>
  </div>

</template>

<script>
  import { getAction, postAction, deleteAction } from '@/api/manage'
  import classificationMaintenanceAdd from './classificationMaintenanceAdd'

  export default {
    name: 'classificationMaintenanceModel',
    components: {
      classificationMaintenanceAdd
    },
    data() {
      return {
        url: {
          list: '/problemKnowledgeBase/problemKnowledgeBaseClassifyEO/page',
          deleteOne: '/problemKnowledgeBase/problemKnowledgeBaseClassifyEO/deleteBatch'
        },
        visible: false,
        selectedRowKeys: [],
        dataList: [],
        loading: false,
        pageNo: 1,
        pageSize: 10,
        total: 0,
        columns: [
          {
            title: this.$t('number'),
            align: 'center',
            width: 70,
            customRender: function(t, r, index) {
              return parseInt(index) + 1
            }
          },
          {
            title: this.$t('problemLabel'),
            dataIndex: 'problemLabel',
            align: 'center',
            width: 240,
            ellipsis: true
          },
          {
            title: this.$t('personCharge'),
            dataIndex: 'chargePersonIdName',
            align: 'center',
            width: 240,
            ellipsis: true
          },
          {
            title: this.$t('operation'),
            align: 'center',
            fixed: 'right',
            width: 180,
            scopedSlots: { customRender: 'operation' }
          }
        ]
      }
    },
    mounted() {
    },
    methods: {
      getData() {
        this.visible = true
        this.replacePage()
      },
      handleCancel() {
        this.visible = false
        this.$emit('classificationMaintenanceModelForm')
      },
      onChange(page, pageSize) {
        this.pageNo = page
        this.replacePage()
      },
      addLabelClick() {
        this.$refs.classificationMaintenanceAddRef.add()
      },
      edit(val) {
        this.$refs.classificationMaintenanceAddRef.edit(JSON.parse(JSON.stringify(val)))
      },
      deleteData(val) {
        let _this = this
        this.$confirm({
          content: _this.$t('ConfirmDelete'),
          onOk() {
            deleteAction(_this.url.deleteOne, { ids: val.id }).then((res) => {
              if (res.success) {
                _this.$message.success(_this.$t('OperationSuccessful'))
                _this.replacePage()
              } else {
                _this.$message.warning(res.message)
              }
            })
          }
        })
      },
      classificationMaintenanceAddForm() {
        this.pageNo = 1
        this.replacePage()
      },
      SizeChange(page, pageSize) {
        this.pageNo = 1
        this.pageSize = pageSize
        this.replacePage()
      },
      replacePage() {
        let query = {
          pageNo: this.pageNo,
          pageSize: this.pageSize
        }
        this.loading = true
        getAction(this.url.list, query).then((res) => {
          if (res.success) {
            this.dataList = res.result.records || []
            this.total = res.result.total
            this.loading = false
          } else {
            this.dataList = []
            this.total = 0
            this.loading = false
          }
        })
      }
    }
  }
</script>

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

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

  .box-title {
    width: 100%;
    text-align: right;
    margin-bottom: 20px;
  }

  .operator-text {
    cursor: pointer;
    margin-right: 13px;
    font-size: 14px;
    font-weight: 400;
    color: #040B29;
    display: inline-block;
  }
  ::v-deep .ant-table-row:first-child {
    background: #fff!important;
  }

  ::v-deep .ant-table-body {
    background: transparent!important;
  }
</style>