ducha-qianduan/src/views/grassrootsregistration/bdglmeetings/index.vue

<!-- 查看团支部记录本领导 -->
<template>
  <div class="arr_conten">
    <ul>
      <li v-for="(item, i) in lieList" :key="i">
        <div class="names">{{ item.deptName }}</div>
        <div class="btn">
          <el-button size="btJS" @click="chaKan(item)">查看</el-button>
        </div>
      </li>
    </ul>

    <!-- 查看第一次 -->
    <el-dialog :visible.sync="tableStatus" :title="title" append-to-body id="list" :close-on-click-modal="false"
      custom-class="lieBiao">
      <el-table v-loading="loading" :data="bdglpartyList"
        :header-cell-style="{ background: '#003C69', color: 'white' }">
        <el-table-column label="序号" type="index" width="50" align="center">
          <template scope="scope">
            <span>{{
            (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="单位" align="center" prop="deptName" />
        <el-table-column label="召开时间" align="center" prop="convokeTime" width="120">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.convokeTime, "{y}-{m}-{d}") }}</span>
          </template>
        </el-table-column>
        <el-table-column label="召开地点" align="center" prop="address" />
        <el-table-column label="主持人" align="center" prop="compereRen" />
        <el-table-column label="参加人" align="center" prop="joinId" show-overflow-tooltip />
        <el-table-column label="列席人" align="center" prop="peopleIds" show-overflow-tooltip />
        <el-table-column label="缺席人" align="center" prop="absentIds" show-overflow-tooltip />
        <el-table-column label="记录人" align="center" prop="peopleJiLu" />
        <el-table-column label="会议议题" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ onEditor(scope.row.title) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="100">
          <template slot-scope="scope">
            <el-button size="btk" type="text" @click="handleChakan(scope.row)"
              v-hasPermi="['grassrootsregistration:bdgldiary:edit']"><span class="chakan">查看</span></el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    </el-dialog>

    <!-- 查看 -->
    <el-dialog :visible.sync="menuRoleVisible" :title="title" append-to-body id="chakan" :close-on-click-modal="false"
      :before-close="closes">
      <bdglmeeting v-if="menuRoleVisible" ref="menuRole" :message="wordInfo"></bdglmeeting>
    </el-dialog>
  </div>
</template>

<script>
import {
  getMeetingList,
  getBdglmeeting,
  getMeetingOnUnitList
} from "@/api/grassrootsregistration/bdglmeeting";
//引入查看表格
import bdglmeeting from "@/components/look_word/bdglmeeting.vue";
export default {
  data() {
    return {
      lieList: [],
      //查看页面
      menuRoleVisible: false,
      title: null,
      tableStatus: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // 党支部记录本表格数据
      bdglpartyList: [],
      loading: false,
      total: 0,
      unitId: undefined
    };
  },

  created() {
    getMeetingList().then((res) => {
      this.lieList = res.rows;
    });
  },
  methods: {
    getList() {
      this.queryParams.unitId = this.unitId;
      getMeetingOnUnitList(this.queryParams).then((response) => {
        this.bdglpartyList = response.rows;
        this.total = response.total;
      });
    },
    chaKan(row) {
      this.queryParams.unitId = row.deptId;
      this.unitId = row.deptId
      getMeetingOnUnitList(this.queryParams).then((response) => {
        this.bdglpartyList = response.rows;
        this.title = "查看团支部记录本";
        this.tableStatus = true;
        this.total = response.total;
      });
    },
    handleChakan(row) {
      this.tableStatus = false;
      const id = row.id || this.ids;
      getBdglmeeting(id).then((response) => {
        this.wordInfo = response.data;
        this.title = "查看团支部记录本";
        this.menuRoleVisible = true;
      });
    },
    // 转义视图不加标签
    onEditor(str) {
      //可以在这里进行对应的操作 quill为富文本对象,html为富文本对象内内容由html标签组成,text为quill内容里面的所有文本内容
      if (str) {
        var str = str.replace(/<\/?[^>]*>/g, ""); //去除HTML tag
        str = str.replace(/[ | ]*\n/g, "\n"); //去除行尾空白
        return str;
      }
    },
    closes() {
      this.menuRoleVisible = false;
      this.tableStatus = true;
    }
  },
  components: {
    bdglmeeting,
  },

  computed: {},

  mounted() { },
  watch: {},
};
</script>
<style  scoped>
::v-deep .el-dialog {
  width: 1070px !important;
}

::v-deep .el-dialog__body {
  margin: 10px 30px 20px 44px;
  padding-top: 20px !important;
  box-sizing: border-box;
}

::v-deep .el-dialog__header {
  border-bottom: 1px solid #718a9d;
}

.arr_conten {
  padding-top: 20px;
}

ul {
  display: flex;
  /* justify-content: space-between; */
  padding: 0 22px;
  flex-wrap: wrap;
}

li {
  list-style: none;
  background: url("../../../assets/images/book.png") no-repeat;
  height: 140px;
  width: 222px;
  /* margin: 20px 0; */
  margin-bottom: 20px;
  background-size: 100% 100%;
  flex: 0 0 16%;
  margin-right: 10px;
}

.names {
  color: #fff;
  font-size: 14px;
  text-align: center;
  padding: 26px 26px 38px 26px;
  letter-spacing: 1px;
}

.btn {
  text-align: center;
}



::v-deep .lieBiao {
  background: #004d86 !important;
  min-height: 42vh !important;
}

::v-deep .el-dialog__title {
  color: #fff;
  font: 18px;
}

::v-deep .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}

::v-deep .pagination-container {
  /* display: none;  */
  position: relative;
  height: 49px;
  margin-bottom: 10px;
  margin-top: 6vh;
  padding: 10px 20px !important;
  background: transparent !important;
}

::v-deep .el-pagination .el-select .el-input .el-input__inner {
  background: #00365F !important;
}

::v-deep .el-pagination.is-background .btn-prev,
.el-pagination.is-background .btn-next {
  background: #00365F !important;
}

::v-deep .el-pagination__editor.el-input .el-input__inner {
  background: #00365F !important;
}

::v-deep .el-pagination.is-background .btn-next {
  background: #00365F !important;
}

::v-deep .el-pagination.is-background .el-pager li {
  background: #00365F;
}
</style>