laws_weilai/jero-web/src/views/dashboard/customContentList.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 :md="6" :sm="8" style="line-height: 48px">
            <div class="box-title-text">
              <div class="title-text" :title="$t('MessageContent')">
                <span>{{this.$t('MessageContent')}}</span>
              </div>
              <j-input class="box-input"
                       :placeholder="$t('pleaseEnter')+$t('MessageContent')"
                       v-model="queryParam.msgContent">
              </j-input>
            </div>
          </a-col>
          <span style="float: right;overflow: hidden;margin-right: 11px" class="table-page-search-submitButtons">
               <a-col :md="6" :sm="24">
                  <a-button class="box-button" type="primary" @click="searchQuery">{{$t('query')}}</a-button>
                  <a-button class="box-button" style="margin-left: 8px" @click="searchReset">{{$t('reset')}}</a-button>
               </a-col>
         </span>

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

    <div class="table-operator">
      <div @click="handleDel" class="operator-text">
        <a-icon type="delete"/>
        {{$t('BatchDelete')}}
      </div>
    </div>

    <a-table
      ref="table"
      rowKey="id"
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      :columns="columns"
      :dataSource="dataSource"
      :scroll="{x: '100%'}"
      :pagination="ipagination"
      :loading="loading"
      @change="handleTableChange">
      <span slot="msgContent" slot-scope="text,scope">
          <a :style="{'color':scope.readFlag == 0 ? 'red':'#00A0E9'}" :title="text" @click="msgContentClick(scope)">
           {{text}}
          </a>
      </span>
    </a-table>
  </a-card>
</template>

<script>
  import { getAction, putAction, deleteAction } from '@/api/manage'
  import { JeroListMixin } from '@/mixins/JeroListMixin'

  export default {
    name: 'customContentList',
    mixins: [JeroListMixin],
    data() {
      return {
        queryParam: {},
        selectedRowKeys: [],
        columns: [
          {
            title: this.$t('MessageContent'),
            align: 'center',
            dataIndex: 'msgContent',
            ellipsis: true,
            scopedSlots: { customRender: 'msgContent' }
          },
          {
            title: this.$t('NotificationTime'),
            align: 'center',
            width: 200,
            dataIndex: 'createTime'
          }
        ],
        url: {
          list: '/home/homeDocumentDynamicEO/page',
          deleteUrl: '/home/homeDocumentDynamicEO/deleteBatch'
        },
        loading: false,
        openPath: '',
        formData: ''
      }
    },
    methods: {
      onSelectChange(value) {
        this.selectedRowKeys = value
      },
      msgContentClick(row) {
        row.isCustomContentList = true
        this.$router.push({
          path: '/system/MessageDetails',
          query: row
        })
      },
      handleDel() {
        var that = this
        if (this.selectedRowKeys.length > 0) {
          that.$confirm({
            content: that.$t('ConfirmBatchDeletion'),
            onOk: function() {
              let selectedRowKeys = JSON.parse(JSON.stringify(that.selectedRowKeys))
              getAction(that.url.deleteUrl, { ids: selectedRowKeys.join(',') }).then((res) => {
                if (res.success) {
                  that.selectedRowKeys = []
                  that.$message.success(that.$t('OperationSuccessful'))
                  that.loadData()
                } else {
                  that.$message.warning(that.$t('operationFailed'))
                }
              })
            }
          })
        } else {
          this.$message.warning(this.$t('PleaseSelectData'))
        }
      }
    }
  }
</script>

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

  .ant-card-body .table-operator {
    margin-bottom: 18px;
  }

  .anty-row-operator button {
    margin: 0 5px
  }

  .ant-btn-danger {
    background-color: #ffffff
  }

  .ant-modal-cust-warp {
    height: 100%
  }

  .ant-modal-cust-warp .ant-modal-body {
    height: calc(100% - 110px) !important;
    overflow-y: auto
  }

  .ant-modal-cust-warp .ant-modal-content {
    height: 90% !important;
    overflow-y: hidden
  }

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

  .title-text {
    width: 66px;
    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;
    /*margin-top: 2px;*/
  }
</style>
<style>
  .box-input .ant-select-selection {
    height: 38px;
    line-height: 38px;
  }

  .box-input .ant-select-selection__rendered {
    line-height: 38px;
  }
</style>