blue-help/src/views/Home.vue

<template>
  <div class="home">
    <el-row class="title">{{ typeList[typeFree].name }}</el-row>
    <el-row class="search" v-if="typeList[typeFree].inputList.length > 0">
      <el-input
        v-model="inputObj[item.prop]"
        placeholder="请输入内容"
        v-for="item in typeList[typeFree].inputList"
        :key="item.symbol"
      ></el-input>
      <el-button type="primary" @click="getData()">查询</el-button>
    </el-row>
    <el-row class="tableBox">
      <el-table :data="tableData" border style="width: 100%" height="100%">
        <el-table-column type="index" align="center" width="50" label="">
        </el-table-column>
        <el-table-column
          align="center"
          v-for="(item, ind) in typeList[typeFree].tableDataHeader"
          :key="ind"
          :prop="item.prop"
          :label="item.name"
        >
        </el-table-column>
      </el-table>
    </el-row>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[30, 50, 100, 150]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      typeList: [
        {
          name: "项目申报记录",
          tableDataHeader: [
            { prop: "unit", name: "办理单位" },
            { prop: "no", name: "办理单号" },
            { prop: "classify", name: "业务类型" },
            { prop: "date", name: "办理日期" },
            { prop: "certificate", name: "电子凭证" },
            { prop: "certificateImage", name: "图片链接" },
            { prop: "maskedPhoneNo", name: "办理人手机号" },
            { prop: "phoneNo", name: "手机编码" },
            { prop: "s", name: "状态" },
            { prop: "createTime", name: "创建时间" },
            { prop: "lastUpdTime", name: "末次修改时间" },
            { prop: "projectName", name: "申报项目名称" },
            { prop: "privateName", name: "内容系统名称" },
            { prop: "address", name: "项目地址" },
            { prop: "username", name: "联系人" },
            { prop: "newDate", name: "出文日期" },
            { prop: "sendClassify", name: "电子凭证状态" },
            { prop: "certificateS", name: "状态" },
            { prop: "legalPersonName", name: "法人姓名" },
            { prop: "legalPersonPhone", name: "法人手机号" },
            { prop: "pdfUrl", name: "PDF链接" },
            { prop: "downloadCode", name: "下载码" },
            { prop: "downloadNum", name: "下载次数 " },
          ],
          url: "/bule/bmfwEvent/page",
          inputList: [{ prop: "unit", name: "单位信息", symbol: Symbol() }],
        },
        {
          name: "用户反馈记录",
          tableDataHeader: [
            { prop: "content", name: "反馈内容" },
            { prop: "images", name: "附件图片" },
            { prop: "createTime", name: "创建时间" },
          ],
          url: "/bule/bmfwFeedback/page",
          inputList: [],
        },
        {
          name: "法规目录表",
          tableDataHeader: [
            { prop: "lawsId", name: "法规名称" },
            { prop: "chapter", name: "章节" },
            { prop: "name", name: "章节名称" },
            { prop: "createTime", name: "创建时间" },
          ],
          url: "/bule/bmfwLawsCatalog/page",
          inputList: [
            { prop: "name", name: "名称", symbol: Symbol() },
            // { prop: "lawsId", name: "法律名称", symbol: Symbol() },
          ],
        },
        {
          name: "法规目录详情表",
          tableDataHeader: [
            { prop: "catalogName", name: "法规目录名称" },
            { prop: "value", name: "条目名称" },
            { prop: "intro", name: "详情" },
            { prop: "createTime", name: "创建时间" },
            { prop: "lastUpdTime", name: "末次修改时间" },
          ],
          url: "/bule/bmfwLawsCatalogInfo/page",
          inputList: [
            { prop: "param", name: "名称", symbol: Symbol() },
            // { prop: "lawsId", name: "法律名称", symbol: Symbol() },
          ],
        },
        {
          name: "普法宣传记录表",
          tableDataHeader: [
            { prop: "classify", name: "原创图文/转载/视频" },
            { prop: "name", name: "标题" },
            { prop: "cover", name: "封面" },
            { prop: "url", name: "链接" },
            { prop: "intro", name: "详情" },
            { prop: "createTime", name: "创建时间" },
            { prop: "lastUpdTime", name: "末次修改时间" },
          ],
          url: "/bule/bmfwLawsNew/page",
          inputList: [
            { prop: "name", name: "名称", symbol: Symbol() },
            // { prop: "lawsId", name: "法律名称", symbol: Symbol() },
          ],
        },
        {
          name: "用户信息表",
          tableDataHeader: [
            { prop: "name", name: "用户名称" },
            { prop: "maskedPhoneNo", name: "联系电话" },
            { prop: "phoneNo", name: "详情" },
            { prop: "s", name: "绑定状态" },
            { prop: "createTime", name: "创建时间" },
          ],
          url: "/bule/bmfwUser/page",
          inputList: [],
        },
        {
          name: "题目表",
          tableDataHeader: [
            { prop: "title", name: "题目" },
            { prop: "answer", name: "答案" },
            { prop: "questionKey", name: "关键字" },
            { prop: "size", name: "搜索次数" },
            { prop: "createTime", name: "创建时间" },
            { prop: "lastUpdTime", name: "末次修改时间" },
            { prop: "s", name: "状态" },
          ],
          url: "/bule/robotQuestion/page",
          inputList: [],
        },
        {
          name: "关键字表",
          tableDataHeader: [
            { prop: "id", name: "关键字名称" },
            { prop: "s", name: "关键字状态" },
            { prop: "size", name: "搜索次数" },
            { prop: "createTime", name: "创建时间" },
            { prop: "lastUpdTime", name: "末次修改时间" },
          ],
          url: "/bule/robotQuestionKey/page",
          inputList: [{ prop: "name", name: "名称", symbol: Symbol() }],
        },
        {
          name: "搜索问题记录表",
          tableDataHeader: [
            { prop: "message", name: "问题描述" },
            { prop: "reply", name: "回复" },
            { prop: "s", name: "未知已解决" },
            { prop: "classify", name: "分类" },
            { prop: "createTime", name: "创建时间" },
            { prop: "lastUpdTime", name: "末次修改时间" },
          ],
          url: "/bule/robotQuestionMessage/page",
          inputList: [{ prop: "classIf", name: "名称", symbol: Symbol() }],
        },
        {
          name: "留言记录信息",
          tableDataHeader: [
            { prop: "content", name: "留言内容" },
            { prop: "username", name: "用户名称" },
            { prop: "maskedPhoneNo", name: "手机号" },
            { prop: "createTime", name: "创建时间" },
            { prop: "lastUpdTime", name: "末次修改时间" },
          ],
          url: "/bule/robotQuestionMessageRecord/page",
          inputList: [],
        },
      ],
      inputObj: {},
      typeFree: 0,
      tableData: [],
      currentPage: 1,
      pageSize: 50,
      total: 0,
    };
  },
  created() {
    this.inputObj = {};
    if (
      this.$route.query.type &&
      this.$route.query.type < this.typeList.length
    ) {
      this.typeFree = this.$route.query.type;
    } else {
      this.typeFree = 0;
    }
  },
  mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      let data = {
        current: this.currentPage,
        size: this.pageSize,
      };
      Object.assign(data,this.inputObj)
      let res = await this.$axios.get(
        this.typeList[this.typeFree].url + "?" + this.$qs.stringify(data)
      );
      this.tableData = res.data.data.records;
      this.total = res.data.data.total;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getData();
      console.log(`每页 ${this.pageSize} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getData();
      console.log(`当前页: ${this.currentPage}`);
    },
  },
};
</script>
<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  padding: 30px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .title {
    font-size: 50px;
    line-height: 100px;
    text-align: center;
  }
  .search {
    height: 50px;
  }
  .el-input {
    width: 500px;
  }
  .el-button {
    margin-left: 10px;
  }
  .tableBox {
    flex: 1;
    width: 100%;
  }
  .el-pagination {
    display: flex;
    justify-content: flex-end;
    padding: 20px 20px 0;
  }
}
</style>