laws-sinotruk-client/src/views/system/AsmsInterfaceList.vue

<template>
  <a-card :bordered="false">
    <!--  搜索区域  -->
<!--    <div class="table-page-search-wrapper">-->
<!--      <a-form layout="inline" @keyup.enter.native="searchQuery">-->
<!--        <a-row :gutter="24">-->
<!--          <a-col :span="6">-->
<!--            <a-form-item :label="$t('personalCenter.receivedShare.pushSearch')" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
<!--              <a-input :placeholder="$t('personalCenter.receivedShare.enterPushInfo')" v-model="queryParam.title"></a-input>-->
<!--            </a-form-item>-->
<!--          </a-col>-->
<!--          <a-col :span="6">-->
<!--            <a-form-item :label="$t('personalCenter.receivedShare.owningPlate')" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
<!--              <j-dict-select-tag-->
<!--                :placeholder="$t('pleaseEnter')+$t('personalCenter.receivedShare.owningPlate')"-->
<!--                dict-code="sector"-->
<!--                v-model="queryParam.source">-->
<!--              </j-dict-select-tag>-->
<!--            </a-form-item>-->
<!--          </a-col>-->

<!--          <div style="float: right;overflow: hidden;" class="table-page-search-submitButtons">-->
<!--            <a-button type="primary" @click="searchQuery" icon="search" style="margin-left: 8px" v-has="'personalCenter:receivedShare:search'">{{ $t('query') }}</a-button>-->
<!--            <a-button @click="searchReset" icon="reload" style="margin-left: 8px">{{ $t('reset') }}</a-button>-->
<!--          </div>-->

<!--        </a-row>-->
<!--      </a-form>-->
<!--    </div>-->

    <!--  操作区域  -->
    <div class="table-operator">
      <a-button @click="handleAdd" type="primary" icon="plus">{{ $t('newlyAdded') }}</a-button>
      <a-button @click="handleSync" type="primary">批量同步</a-button>
      <!-- 批量删除 -->
      <a-button icon="delete" type="primary" ghost @click="batchDel">
        {{ $t('batchDelete') }}
      </a-button>
    </div>

    <div>
      <j-table
        :can-drag="true"
        :scroll="{x: '100%'}"
        ref="table"
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange">
        <!-- 操作栏 -->
        <div slot="action" class="table-action" slot-scope="{text, record}">
          <a class="action-edit" @click="handleEdit(record)" >{{ $t('edit') }}</a>
          <a class="action-delete" @click="handleDelete(record.id)">{{ $t('delete') }}</a>
          <a class="action-delete" @click="handleShow(record.id)">查看</a>
        </div>

      </j-table>
    </div>
    <!-- 添加、编辑 -->
    <asms-interface-modal ref="modalForm" @ok="modalFormOk"/>
  </a-card>
</template>

<script>
import { JeroListMixin } from '@/mixins/JeroListMixin'
import JTable from '@comp/jero/JTable'
import AsmsInterfaceModal from '@views/system/modules/AsmsInterfaceModal'
import { getAsmsInterfaceById, syncAsmsInterface } from '@api/api'

export default {
  name: 'AsmsInterfaceList',
  components: { AsmsInterfaceModal, JTable },
  mixins: [JeroListMixin],
  data () {
    return {
      isorter: null,
      labelCol: {
        span: 4
      },
      wrapperCol: {
        span: 14
      },
      columns: [
        {
          title: 'api名称',
          align: 'center',
          width: 150,
          dataIndex: 'apiName',
          scopedSlots: { customRender: 'text' }
        },
        {
          title: '接口类型',
          align: 'center',
          width: 120,
          dataIndex: 'apiType_dictText',
          scopedSlots: { customRender: 'text' }
        },
        {
          title: 'api路径',
          align: 'center',
          width: 180,
          dataIndex: 'apiUrl',
          scopedSlots: { customRender: 'text' }
        },
        {
          title: '数据字典',
          align: 'center',
          width: 180,
          dataIndex: 'dictId_dictText',
          scopedSlots: { customRender: 'text' }
        },
        {
          title: '参数map',
          align: 'center',
          width: 180,
          dataIndex: 'queryParamJson',
          scopedSlots: { customRender: 'text' }
        },
        {
          title: this.$t('operation'),
          // dataIndex: 'action',
          align: 'center',
          width: 170,
          scopedSlots: { customRender: 'action' }
        }
      ],
      url: {
        list: '/docking/asms/api/lawsAsmsOpenApi/page',
        delete: '/docking/asms/api/lawsAsmsOpenApi/delete',
        deleteBatch: '/docking/asms/api/lawsAsmsOpenApi/deleteBatch'
      }
    }
  },
  methods: {
    handleSync () {
      if (this.selectedRowKeys.length <= 0) {
        this.$message.warning(this.$t('selectARecord'))
      } else {
        const ids = this.selectedRowKeys.join(',')
        const that = this
        this.$confirm({
          title: '同步',
          content: '确认进行同步',
          onOk: function () {
            that.loading = true
            syncAsmsInterface({ ids }).then((res) => {
              if (res.success) {
                // 重新计算分页问题
                that.reCalculatePage(that.selectedRowKeys.length)
                that.$message.success(res.message)
                that.loadData()
                that.onClearSelected()
              } else {
                that.$message.warning(res.message)
              }
            }).finally(() => {
              that.loading = false
            })
          }
        })
      }
    },
    handleShow (id) {
      getAsmsInterfaceById({ id }).then(res => {
        if (res.success) {
          const arr = res.result || []
          this.$success({
            width: 800,
            title: '查看',
            content: arr.map(item => (<p>{(JSON.stringify(item) + '\n')}</p>))
          })
        } else {
          this.$message.warn(res.message)
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
@import '~@assets/less/common.less';
</style>