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

<template>
  <div>
    <a-drawer
      :title="$t('templateMaintenance')"
      :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('newlyAdded')}}
          </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>
          <span slot="lableType" slot-scope="text,record">
             <span v-if="text == 3">{{$t('optionDropDownBox')}}</span>
             <span v-if="text == 7">{{$t('attachmentUpload')}}</span>
             <span v-if="text == 8">{{$t('textInput')}}</span>
           </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>
    <countryCardReleaseModelAdd ref="countryCardReleaseModelAddRef"
                                @countryCardReleaseModelAddForm="countryCardReleaseModelAddForm"/>
  </div>
</template>

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

  export default {
    name: 'countryCardReleaseModel',
    components: {
      countryCardReleaseModelAdd
    },
    data() {
      return {
        url: {
          list: '/problemKnowledgeBase/countryCardTempEO/page',
          deleteOne: '/problemKnowledgeBase/countryCardTempEO/deleteBatch'
        },
        visible: false,
        selectedRowKeys: [],
        dataList: [],
        loading: false,
        pageNo: 1,
        pageSize: 10,
        total: 0,
        columns: [
          {
            title: this.$t('LabelName'),
            dataIndex: 'lableName',
            align: 'center',
            ellipsis: true,
            width: 200
          },
          {
            title: this.$t('LabelType'),
            dataIndex: 'lableType',
            align: 'center',
            ellipsis: true,
            width: 200,
            scopedSlots: { customRender: 'lableType' }
          },
          {
            title: this.$t('DisplayOrder'),
            dataIndex: 'orderNum',
            align: 'center',
            ellipsis: true,
            width: 160
          },
          {
            title: this.$t('operation'),
            align: 'center',
            fixed: 'right',
            width: 180,
            scopedSlots: { customRender: 'operation' }
          }
        ]
      }
    },
    mounted() {
    },
    methods: {
      getData() {
        this.visible = true
        this.pageNo = 1
        this.replacePage()
      },
      handleCancel() {
        this.visible = false
      },
      onChange(page, pageSize) {
        this.pageNo = page
        this.replacePage()
      },
      countryCardReleaseModelAddForm() {
        this.pageNo = 1
        this.replacePage()
      },
      addLabelClick() {
        this.$refs.countryCardReleaseModelAddRef.add()
      },
      edit(val) {
        this.$refs.countryCardReleaseModelAddRef.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(_this.$t('operationFailed'))
              }
            })
          }
        })
      },
      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;
  }
</style>