打卡14

合集 - 软件工程日报(64)

1.新学期目标2024-03-052.打卡2024-05-293.打卡22024-05-294.打卡32024-05-295.打卡 42024-05-296.打卡52024-06-137.打卡62024-06-138.打卡72024-06-169.打卡82024-06-1610.打卡92024-06-1611.打卡102024-06-1612.结对作业（地铁查询项目）012024-06-1613.结对作业（地铁项目）022024-06-1614.结对作业（地铁项目）032024-06-1615.结对作业（地铁项目）042024-06-1616.结对作业（地铁项目）052024-06-1617.结对作业（地铁项目）062024-06-1618.结对作业（地铁项目）072024-06-1619.结对作业（地铁项目）082024-06-1620.结对作业（地铁项目）092024-06-1621.结对作业（地铁项目）102024-06-1622.结对作业（地铁项目）112024-06-1623.结对作业（地铁项目）122024-06-1624.结对作业（地铁项目）132024-06-1625.结对作业（地铁项目）142024-06-1626.五一冲刺（政策查询系统）12024-06-1627.五一冲刺（政策查询系统）22024-06-1628.政策查询系统（安卓）12024-06-1629.政策查询系统（安卓）22024-06-1630.政策查询系统（安卓）32024-06-1631.政策查询系统（安卓）42024-06-1632.政策查询系统（安卓）52024-06-1633.政策查询系统（安卓）62024-06-1634.政策查询系统（安卓）72024-06-1635.JS开发2024-02-2836.安卓app开发相关2024-02-2837.第一次个人作业（安卓学习记录系统）012024-06-1638.第一次个人作业（安卓学习记录系统）022024-06-1639.第一次个人作业（安卓学习记录系统）032024-06-1640.第一次个人作业（安卓学习记录系统）042024-06-1641.第一次个人作业（安卓学习记录系统）052024-06-1642.第一次个人作业（安卓学习记录系统）062024-06-1643.第一次个人作业（安卓学习记录系统）072024-06-1644.打卡112024-06-1945.打卡122024-06-1946.打卡132024-06-19

47.打卡142024-06-19

48.打卡152024-06-1949.打卡162024-06-1950.打卡172024-06-1951.打卡182024-06-1952.打卡192024-06-1953.打卡202024-06-1954.python学习2024-06-1955.python学习22024-06-1956.python学习32024-06-1957.Javaweb2024-06-1958.打卡212024-06-1959.fragment学习和使用2024-06-1960.mybits学习12024-06-1961.mybits学习22024-06-1962.mybits学习32024-06-1963.课程总结2024-06-1964.个人总结2024-06-19

收起

所花时间（包括上课）：	4h
代码量（行）：	200左右
搏客量（篇）：	1
了解到的知识点：	vue
备注（其他）：

<script lang ='ts' setup>
import LOGO from "@/assets/LOGO.png"
import {getPolicyService} from "@/api/getPolicy.js";
import { ref, onMounted } from 'vue'
import { getPolicyCountByTypes } from "@/api/getPolicy.js";
import {getPolicy} from "@/api/getPolicy.js";
import type Node from 'element-plus/es/components/tree/src/model/node'
import {ElMessage} from "element-plus"

let count = 1

interface Tree {
  name: string
}

const props = {
  label: 'name',
  children: 'zones',
}



const loadNode = (node: Node, resolve: (data: Tree[]) => void) => {
  if (node.level === 0) {
    return resolve([
      { name: '综合' },
      { name: '产业' },
      { name: '企业' },
      {name:'企业技术进步与高新技术产业化'},
      {name:'农村科技与社会发展'},
      {name:'创新载体'},
      {name:'国际科技合作'},
      {name:'基础研究'},
      {name:'平台基地'},
      {name:'科学技术普及'},
      {name:'科技中介服务'},
      {name:'科技人才'},
      {name:'科技奖励'},
      {name:'科技成果与知识产权'},
      {name:'科技条件与标准'},
      {name:'科技经费与财务'},
      {name:'科技计划管理'},
      {name:'科技金融与税收'},
      {name:'科研机构改革'}
    ])
  }
}



const name = ref('');       //政策名称
const document = ref('');   //发文字号
const organ = ref('');      //发文机构
const text = ref('');       //全文检索
const selectedPolicyText = ref('');
const drawer = ref(false)

const policyTypes = ref([]); // 存储政策类型及对应数量的数组

// 获取政策类型及对应数量的数据
const fetchPolicyTypes = async () => {
    const response = await getPolicyCountByTypes();
    policyTypes.value = response.data; // 将返回的数据赋值给 policyTypes
}

const policyData = ref([
  {
    name:'',
    organ:'',
    pubdata:'',
    type:'',
    text:''
  }
]);


//分页条数据模型
const pageNum = ref(1)//当前页
const total = ref(20)//总条数
const pageSize = ref(8)//每页条数

//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
  pageSize.value = size;
  policyList();
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
  pageNum.value = num;
  policyList();
}

//获取政策列表数据
const policyList = async () => {
  let params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    name:name.value ? name.value : null,
    document:document.value ? document.value : null,
    organ:organ.value ? organ.value : null,
    text:text.value ? text.value : null,
  }
  let result = await getPolicyService(params);
  total.value = result.data.total;
  policyData.value=result.data.items;
}

const handleCheckChange = async (
    data: Tree,
    checked: boolean,
    indeterminate: boolean
) => {
  console.log(data.name, checked, indeterminate)
  const name = data.name;
  if (checked == true) {
    let result = await getPolicy({type:name});
    total.value = result.data.total;
    policyData.value = result.data.items;
  }
}
const openDrawer = (row) => {
  selectedPolicyText.value = row.text; // 将选中政策的文本内容赋值给selectedPolicyText
  drawer.value = true; // 打开对话框
}

</script>

<template>
    <!--  element-plus中的容器  -->
    <el-container >
      <!-- 左侧菜单栏 -->
      <el-aside width="350px" style="overflow-y: auto;">
        <el-tree
            style="max-width: 600px"
            :props="props"
            :load="loadNode"
            lazy
            show-checkbox
            @check-change="handleCheckChange"
        />
      </el-aside>
        <!-- 右侧主区域 -->
        <el-container>
            <el-header style="display: flex; justify-content: center; align-items: center;">
                <el-avatar :size="50" :src="LOGO"/>
                <h1 >河北科技政策查询系统</h1>
            </el-header>
            <!-- 内容展示区域 -->
            <el-main>
              <el-form :inline="true" >
                <el-form-item label="政策名称">
                  <el-input v-model="name" placeholder="请输入政策名称" clearable />
                </el-form-item>
                <el-form-item label="发文字号">
                  <el-input v-model="document" placeholder="请输入发文字号" clearable />
                </el-form-item>
                <el-form-item label="发文机构">
                  <el-input v-model="organ"  clearable />
                </el-form-item>
                <el-form-item label="全文检索">
                  <el-input v-model="text"  clearable />
                </el-form-item>

                <el-form-item>
                  <el-button type="primary" @click="policyList()">搜索</el-button>
                </el-form-item>
              </el-form>
              <!-- 政策列表 -->
              <el-table :data="policyData" style="width: 100%">
                <el-table-column label="政策名称" width="650" prop="name"></el-table-column>
                <el-table-column label="发文机构" width="200" prop="organ"></el-table-column>
                <el-table-column label="颁布日期" width="200" prop="pubdata"> </el-table-column>
                <el-table-column label="政策分类" width="200" prop="type"></el-table-column>
                <el-table-column label="操作" width="100">
                  <template #default="{ row }">
                    <el-button   plain type="primary" @click=openDrawer(row)>查看</el-button>
                  </template>
                </el-table-column>
                <template #empty>
                  <el-empty description="没有数据" />
                </template>

              </el-table>
              <!-- 分页条 -->
              <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[3, 5, 10, 15]"
                             layout="jumper, total, sizes, prev, pager, next" background :total="total" @size-change="onSizeChange"
                             @current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end" />

              <el-dialog v-model="drawer"  :with-header="false">
                <div v-html="selectedPolicyText"></div>
              </el-dialog>
            </el-main>

            <!-- 底部区域 -->
            <el-footer> Copyright 1996-2024 All Rights Reserved 版权所有：河北省科学技术情报研究院 河北省科技创新战略研究院 技术支持：河北省科技信息处理实验室。</el-footer>
        </el-container>
    </el-container>
</template>

<style lang="scss" scoped>

.el-menu {
    border-right: none;
}

.el-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #666;
}
</style>