web_sh_audit/src/components/popup/LawPopup.vue

<template>
  <div class="law-related" v-if="lawPopupShow" v-drag>
    <div class="law-details-popup" v-if="lawDetailsPopupShow">
      <div class="law-details-popup-closebtn" @click="detailsCloseEvent"></div>
      <div class="law-details-popup-inner">
        <div class="law-inner-title">
          <div>浦东新区区级政府投资项目审计监督办法</div>
          <div>2002.09.25</div>
        </div>
        <div class="law-inner-content">
          第一章 总则 第一条
          为加强对区级政府投资项目的审计监督，促进政府投资项目的规范化管理，提高投资绩效，根据《中华人民共和国审计法》《中华人民共和国审计法实施条例》《上海市审计条例》等法律法规规定，参照《上海市市级政府投资项目审计监督办法》（沪府办规〔2020〕12号），结合本区高水平改革开放、打造社会主义现代化建设引领区要求和实际情况，制订本办法。
          第二条
          区审计局依法对区级政府投资和以区级政府投资为主的建设项目预算执行情况和决算情况，进行审计监督。
          第三条
          对财政性资金投入较大、建设周期较长、关系国计民生的区级政府投资项目，区审计局可以对其进行全过程的跟踪审计。
          第四条
          区审计局可以根据需要对建设资金的征集、管理和使用情况，以及与政府投资项目有关的重要事项进行专项审计或者专项审计调查。
          第五条
          区审计局在安排项目审计时，应当确定项目单位或代建单位为被审计单位。必要时，区审计局可以对项目直接有关的勘察、设计、施工、监理、造价咨询、招标代理、供货等单位取得建设项目资金的真实性、合法性进行核查。相关单位应当予以配合。
          第六条
          区审计局不参与与审计法定职责无关的、可能影响依法独立进行审计监督的议事协调机构或工作，不参与建设项目决策、审批、征地拆迁、工程招标、物资采购、质量评价、工程结算等管理活动。
          第七条
          区审计局运用与建设项目相关的管理部门和单位以及项目单位或代建单位的有关管理信息和数据建立政府投资项目审计监督与综合监管平台（以下简称“监管平台”）。数据采集采取分类管理方式，对重点项目的重要数据进行全面采集，相关部门和单位应当予以配合。
          区审计局利用监管平台开展数据查询和分析，确定开展审计监督的范围和重点。
          第八条
          各相关部门以及与政府投资项目有关的单位和个人应在各自职责范围内配合并协助区审计局开展政府投资项目审计监督工作。
          区发改委、区财政局等部门应当将区级政府投资项目的计划安排、资金拨付、竣工财务决算审核情况，定期通过监管平台提供给区审计局。
          区建交委应当通过监管平台定期向区审计局提供有关政府投资项目报建、招标投标管理、竣工验收备案、现场检查和处理处罚、企业资质和个人执业信息等情况。
          第九条
          区审计局在实施区级政府投资项目审计时，可以根据需要，聘请与审计事项相关的专业机构和专业人员参与审计业务或提供技术支持、专业咨询、专业鉴定。聘请专业机构和专业人员，应当按照政府采购及有关规定进行。所需经费按照规定列入财政预算。
          第十条
          项目单位及其主管部门的内审机构应当加强对本单位、本系统区级政府投资项目的内部审计监督，并接受区审计局的业务指导和监督。
          第十一条
          项目单位或代建单位委托社会中介机构开展项目工程结算和财务决算审核的，应当及时将中介机构出具的审价报告、审计报告以及主要的结算数据上传监管平台。
          第二章 审计计划和审计实施 第十二条
          区审计局根据法定的审计职责和权限，按照区委、区政府以及市审计局的要求，结合年度政府投资项目监督重点、预算执行情况审计和领导干部经济责任审计等工作，确定政府投资审计项目，并将其纳入年度审计计划。报经批准后，按照年度审计计划及时组织实施。
          第十三条
          对列入年度审计计划的政府投资项目的项目单位或代建单位应当根据区审计局的要求，通过监管平台填报相关的数据及信息。
          第十四条
          区审计局应当在政府投资项目实施审计三日前，向被审计单位送达审计通知书；遇特殊情况，经区审计局负责人批准，可直接持审计通知书实施审计。
          第十五条
          被审计单位收到审计通知后，应当向区审计局及时提供项目前期、招标投标、合同、工程结算、竣工验收、财务决算等资料（含电子数据），并对所提供资料的真实性和完整性负责。
          第十六条 政府投资项目审计应当关注下列事项：
          （一）国家、市、区重大政策措施落实情况； （二）履行基本建设程序情况；
          （三）投资控制和资金管理使用情况； （四）项目建设管理情况；
          （五）土地利用和征地拆迁情况； （六）环境保护情况；
          （七）工程造价结算情况； （八）资产移交接管情况； （九）投资绩效情况；
          （十）其他需要审计的重点内容。 第十七条
          对跟踪审计的项目，区审计局应当根据项目特点、建设所处阶段以及建设模式，采取阶段性审计、单项工程审计、专项内容审计等方式进行审计监督。
          第十八条
          区审计局应当根据项目特点、项目送审资料情况、监管平台分析情况等，编制项目审计实施方案，确定审计内容和审计重点。
          第十九条
          区审计局聘请专业机构或专业人员参与项目审计的，专业机构或专业人员应当根据区审计局编制的审计实施方案等要求，开展审计工作。
          第二十条
          区审计局应当加强对聘请的专业机构或专业人员的指导和监督，并对其工作成果的真实性、合法性负责。
          参与过政府投资项目招标代理、财务投资监理、工程监理、工程结算（财务决算）审核及其他与项目有直接工作关系的社会中介机构和人员应主动提出回避，不得参与该项目的审计工作。
          第二十一条
          区审计局在实施区级政府投资项目审计时，可以对被审计单位委托中介机构出具的审价、审计报告进行核查。发现违反合同约定、违反招投标文件等确定的结算原则、审核质量低劣、结算价格误差较大、重大事项未予以披露等问题的，应书面反馈核查结果，并可以按相关规定在向社会公布的审计结果中，一并公布对社会中介机构相关报告核查的结果。
        </div>
      </div>
    </div>
    <div class="title">
      <div class="title-text">XXXX疑点相关的法律法规</div>
      <div class="title-close-btn" @click="closeEvent"></div>
    </div>
    <div class="option">
      <div class="option-left">
        <el-input class="search-input" placeholder="请输入关键字"></el-input>
        <div class="search-icon"><i class="el-icon-search"></i></div>
      </div>
      <div class="option-right">
        <NewSelect class="option-right-item" />
        <NewSelect class="option-right-item" />
        <NewSelect class="option-right-item" />
      </div>
    </div>
    <div class="table">
      <el-table
        ref="singleTable"
        highlight-current-row
        style="width: 100%"
        :data="tableData"
        @current-change="handleCurrentChange"
      >
        <el-table-column prop="name" label="名称" align="center">
        </el-table-column>
        <el-table-column prop="date" label="日期" align="center">
        </el-table-column>
      </el-table>
    </div>
    <div class="footer">
      <Pagination :paginationData="paginationData" />
    </div>
  </div>
</template>
<script>
import NewSelect from "@/components/common/NewSelect.vue";
import Pagination from "@/components/common/Pagination.vue";
/**
 * XXXX 疑点相关的法律法规
 * @author: Gao Lu
 * @Date: 2022.11.25
 */
export default {
  name: "LawPopup",
  components: { NewSelect, Pagination },
  data() {
    return {
      lawDetailsPopupShow: false,
      sortSelectVal: "土地资源",
      sortOptions: [
        {
          value: "土地资源",
          label: "土地资源",
        },
      ],
      scopeSelectVal: "浦东新区",
      scopeOptions: [
        {
          value: "浦东新区",
          label: "浦东新区",
        },
      ],
      timeSelectVal: "2018",
      timeOptions: [
        {
          value: "2018",
          label: "2018",
        },
      ],
      tableData: [
        {
          name: "浦东新区区级政府投资项目审计监督办法",
          date: "2022.09.25",
        },
        {
          name: "审计法律法规文件1111",
          date: "2022.09.25",
        },
      ],
      paginationData: {
        pageSize: 10,
        pagerCount: 5,
        currentPage: 1,
        pageSizes: [5, 10, 20, 50],
        total: 200,
        currentChange: (val) => {
          this.handleCurrentChange(val);
        },
        handleSizeChange: (val) => {
          this.handleSizeChange(val);
        },
      },
      currentRow: null,
    };
  },
  computed: {
    lawPopupShow() {
      return this.$store.state.lawPopupShow;
    },
  },
  methods: {
    queryEvent() {
      console.log("查询");
    },
    resetEvent() {
      console.log("重置");
    },
    // 切换页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.paginationData.currentPage = val;
    },
    // 切换条数
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    closeEvent() {
      this.$store.state.lawPopupShow = false;
    },
    // 法律法规详细信息弹窗关闭
    detailsCloseEvent() {
      this.lawDetailsPopupShow = false;
    },
    // 选中当前行
    handleCurrentChange(val) {
      console.log(val, "currentRow");
      this.currentRow = val;
      this.lawDetailsPopupShow = true;
    },
  },
};
</script>
<style lang="less" scoped>
.law-related {
  width: 700px;
  height: 500px;
  background: rgba(0, 39, 77, 0.95);
  border: 1px solid #2fb8ff;
  pointer-events: auto;
  // 单击每一行后弹出法律相关的详细内容
  .law-details-popup {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 39, 77, 0.9);
    border: 1px solid #2fb8ff;
    &-closebtn {
      width: 30px;
      height: 30px;
      position: absolute;
      top: 1px;
      right: 1px;
      background: url("../../assets/image/close.png") no-repeat center;
      cursor: pointer;
    }
    &-inner {
      width: 95%;
      height: 90%;
      .law-inner-title {
        width: 100%;
        height: 20%;
        & > div {
          width: 80%;
          height: 40%;
          margin: 0 auto;
          text-align: center;
          color: #fff;
        }
        & > div:nth-child(1) {
          font-size: 20px;
          font-weight: 500;
        }
        & > div:nth-child(2) {
          color: rgb(192, 196, 204, 0.8);
        }
      }
      .law-inner-content {
        width: 100%;
        height: 80%;
        overflow: auto;
        color: rgb(192, 196, 204, 0.8);
      }
    }
  }
  .title {
    margin: 0 auto;
    width: 99%;
    height: 8%;
    position: relative;
    border-bottom: 1px solid;
    border-image: -webkit-linear-gradient(
        -90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(47, 184, 255, 1) 50%,
        rgba(255, 255, 255, 0) 99%
      )
      2 2 2 2;
    border-image: -moz-linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(47, 184, 255, 1) 50%,
        rgba(255, 255, 255, 0) 99%
      )
      2 2 2 2;
    border-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(47, 184, 255, 1) 50%,
        rgba(255, 255, 255, 0) 99%
      )
      2 2 2 2;

    &-text {
      position: absolute;
      left: 10px;
      top: 7px;
      color: #fff;
      word-spacing: 2px;
      letter-spacing: 2px;
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: 300;
    }
    &-close-btn {
      width: 30px;
      height: 30px;
      position: absolute;
      top: 1px;
      right: 1px;
      background: url("../../assets/image/close.png") no-repeat center;
      cursor: pointer;
    }
  }
  .option {
    width: 100%;
    height: 11%;
    position: relative;
    &-left {
      position: absolute;
      left: 0;
      width: 35%;
      .search-input {
        position: absolute;
        top: 7px;
        left: 5px;
        width: 225px;
      }
      /deep/.el-input__inner {
        height: 35px;
      }
      .search-icon {
        position: absolute;
        top: 12px;
        right: 25px;
        color: #fff;
        cursor: pointer;
      }
    }
    &-right {
      display: flex;
      align-items: center;
      justify-content: space-around;
      position: absolute;
      right: 0;
      width: 65%;
      &-item {
        width: 120px;
        height: 40px;
        line-height: 50px;
      }
    }
  }
  .table {
    width: 100%;
    height: 70%;
    /deep/.el-table {
      background: rgba(0, 39, 77, 0.6);
      // font-size: 0.95rem;
      font-family: PingFang SC;
      font-weight: 500;
      thead {
        color: #4dc3ff;
        font-size: 15px;
      }
      td {
        cursor: pointer;
      }
    }
  }
  .footer {
    margin: 0 auto;
    width: 100%;
    height: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>