yiliangyiyun-pcfront/src/views/new/newType.vue

<!-- 新闻管理 by wangshxc -->
<template>
  <div>
    <div class="tab-item">
      <div class="tab-button" align="left">
      </div>
      <!-- 模糊搜索 Start -->
      <div class="searchThree" align="right">
        <span style="font-size: 14px; color: #606266;">发布租户:</span>
        <ws-select
          v-model="typeIds"
          multiple
          collapse-tags
          @change="getDeptBudgetList"
          style="width: 20%;margin-right: 10px;"
          placeholder="请选择">
          <ws-option
            v-for="item in shipList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </ws-option>
        </ws-select>
        <span style="font-size: 14px; color: #606266;">发布日期:</span>
        <ws-date-picker
          v-model="deptBudgetDate"
          @change="getDeptBudgetDate"
          clearable
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 25%"
        />
        <ws-input
          v-model="deptBudgetPage.searchKeyword"
          maxlength="50"
          placeholder="请输入标题"
          @clear="resetSearch"
          @keyup.enter.native="getDeptBudgetList"
          style="width: 20%;padding-left: 10px;"
        />
        <svg-icon icon-class="gen" class="searchIcon" @click="getDeptBudgetList"/>
      </div>
    </div>
    <div>
      <!--一览页页面 Start -->
      <ws-normal-table
        v-loading="listLoading"
        stripe
        :data="deptBudgetList"
        @cell-click="jumpDeptBudget">
        <ws-table-column align="center" prop="crtNo" label="序号" width="100">
          <template slot-scope="scope">
            {{ (deptBudgetPage.currentPage - 1)*deptBudgetPage.pageSize + scope.$index + 1 }}
          </template>
        </ws-table-column>
        <ws-table-column align="center" prop="title" label="标题" width="200"/>
        <ws-table-column align="center" prop="typeName" label="类型" width="200"/>
        <ws-table-column align="center" prop="issueUserName" label="发布人" width="200"/>
        <ws-table-column align="center" prop="issueDate" label="发布日期" width="200"/>
        <ws-table-column align="center" prop="tenantName" label="发布租户">
          <template slot-scope="scope">
            <div :title="scope.row.tenantName">{{ scope.row.tenantName }}</div>
          </template>
        </ws-table-column>
      </ws-normal-table>
      <pagination
        v-show="deptBudgetTotal>0"
        :total="deptBudgetTotal"
        :page.sync="deptBudgetPage.currentPage"
        :limit.sync="deptBudgetPage.pageSize"
        @pagination="getDeptBudgetList"
      />
      <!--一览页页面 End -->
    </div>
  </div>
</template>

<script>
    import Pagination from '../../components/Pagination'
    import {getTenantPageByCondition, sendScope} from '../../api/new'

    export default {
        name: 'newList',
        components: {
            Pagination
        },
        data() {
            return {
                listLoading: false,
                setDialogFormVisible: false,
                inputVisible: false,
                inputValue: '',
                allTypeName: '全部类型',
                shipList: [],
                deptBudgetDate: [], // 过滤时间数组
                deptBudgetList: [],
                typeIds: [],
                deptBudgetPage: {
                    currentPage: 1,
                    pageSize: 10,
                    tenantId: '',
                    createDateStart: '',
                    createDateEnd: '',
                    searchKeyword: '',
                    issueUserId: localStorage.getItem('ws-pf_userId'),
                },
                deptBudgetTotal: 0,
                id: '',
                dialogDeptBudgetFilter: false,
                addRemarkMsg: {
                    id: ''
                },
                dynamicTags: [{
                    parameterId: '',
                    constCode: 'NEWS_TYPE',
                    parameterKey: '',
                    parameterValue: '',
                    parameterValueEn: '',
                }
                ],
            }
        },
        created() {
            this.getDeptBudgetList()
            this.getDeptBudgetListLy()
        },
        methods: {
            // 一览页面信息
            getDeptBudgetListLy() {
                sendScope().then(response => {
                    this.shipList = response.data[0].children
                })
            },
            getDeptBudgetList() {
                this.deptBudgetPage.tenantId = ''
                if (this.typeIds.length > 0) {
                    for (let i = 0; i < this.typeIds.length; i++) {
                        this.deptBudgetPage.tenantId += this.typeIds[i] + ','
                    }
                }
                this.listLoading = true;
                getTenantPageByCondition(this.deptBudgetPage).then(response => {
                    this.deptBudgetList = response.data.records;
                    this.deptBudgetList.forEach((item) => {
                        this.id = item.id
                        item.operate = false;
                        item.statusStr = '';
                        item.issueDate = item.issueDate && item.issueDate.length > 0 ? item.issueDate.substr(0, 16) : ''

                        item.operate = true;
                        if (item.isIssue === '1') {
                            item.edit = false;
                            item.statusStr = '已发布';
                        } else {
                            item.edit = true;
                            item.statusStr = '待发布';
                        }
                    })
                    this.deptBudgetTotal = response.data.total
                    this.listLoading = false;
                })
            },
            // 日期筛选
            getDeptBudgetDate(val) {
                if (val != null && val.length === 2) {
                    this.deptBudgetPage.createDateStart = val[0] + ' 00:00:00'
                    this.deptBudgetPage.createDateEnd = val[1] + ' 23:59:59'
                    this.getDeptBudgetList()
                } else {
                    this.deptBudgetPage.createDateStart = null
                    this.deptBudgetPage.createDateEnd = null
                    this.getDeptBudgetList()
                }
            },

            // 重置
            resetSearch() {
                this.deptBudgetPage.searchKeyword = null
                this.getDeptBudgetList()
            },
            // 一览页面跳转
            jumpDeptBudget(row, column) {
                if (column.property !== 'remark') {
                    this.$router.push({
                        name: 'newTenantDetails',
                        query: {
                            id: row.id,
                        }
                    })
                }
            },
        }
    }
</script>

<style scoped lang="scss">
  .tabsMain .navBar {
    width: 100%;
  }

  .main-list {
    height: calc(81vh - 0px);
    padding: 0 !important;
  }

  .searchThree {
    width: 95%;
  }

  .searchThreeFide {
    display: flex;
  }

  .input-main {
    margin-top: 0 !important
  }

  .nav-search {
    float: right;
    padding: 15px 0;
  }

  .tab-kuan {
    float: left;
  }

  .type {
    font-size: 12px;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    margin-right: 10px;
  }

  .remove {
    margin-left: 10px;
    line-height: 0px;
    margin-top: 7px;
  }

  /deep/ .el-pagination__jump {
    margin-right: 46px;
  }

  /deep/ .el-tag.el-tag--info {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 60% !important;
  }

  .aaa {
    font-size: 16px;
    margin-left: 10px
  }

  .searchIcon {
    height: 32px;
    width: 32px;
    float: right;
    position: relative;
  }

  .tab-button {
    width: 5%;
  }

  .adddepartment {
    height: 300px;
    overflow-y: auto;
  }

  .tab-item {
    display: flex;
    padding: 10px 0px 10px 0px;
  }

  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
</style>