完成初版代码，仅能查看

src/apis/product.js

@@ -11,11 +11,16 @@ export const project_list = () => {
 }
 
 // 获取产品版本列表
-export const prd_list = () => {
+export const prd_list = (page_num, page_size, project='') => {
     // console.log('prd_list')
     return request({
         url: '/prd/prd_list',
-        method: 'get'
+        method: 'get',
+        params: {
+            page: page_num,
+            page_size: page_size,
+            project: project
+        }
     })
 }
 

src/components/product/ProductAdmin.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped>
+
+</style>

src/layout/components/PageAside.vue

@@ -38,6 +38,12 @@ const route = useRoute()
           </el-icon>
           <span>网售接口测试</span>
         </el-menu-item>
+        <el-menu-item index="prd">
+          <el-icon>
+            <icon-menu/>
+          </el-icon>
+          <span>产品文档</span>
+        </el-menu-item>
       </el-menu>
     </el-col>
   </el-row>

src/router/index.js

@@ -41,6 +41,14 @@ const routes = [
                 meta:{
                     keepAlive: true,
                 }
+            },
+            {
+                path: 'prd',
+                name: 'Prd',
+                component: () => import('@/views/product/index.vue'),
+                meta:{
+                    keepAlive: true,
+                }
             }
         ]
     }

src/views/product/index.vue

@@ -1,46 +1,48 @@
 <script setup>
 import {onBeforeMount, onMounted, reactive, ref, unref, computed} from 'vue';
 import {useStore, mapGetters, mapState} from "vuex";
-import {cinema_list, cinema_search, cinema_user, change_cinema_user, write_git_version_to_db} from "@/apis/update.js";
-import CinemaUpdate from "@/components/update/CinemaUpdate.vue";
+import {project_list, prd_list, prd_add, prd_get, prd_update, prd_delete} from "@/apis/product.js";
+
 
 // 注册vuex
 const store = useStore()
 
 
 // region 表单代码
-// 搜索条件字段
-const cinemaSearch = reactive({
-  ip: '',
-  version: '',
-})
+
 
 // 点击搜索时提交的数据
-const cinemaSearchRef = ref()
-
-// 数据校验部分 校验ip地址是否合法
-const ip_validate = (rule, value, callback) => {
-  const regex = new RegExp('((2(5[0-5]|[0-4]\\d))|[0-1]?\\d{1,2})(\\.((2(5[0-5]|[0-4]\\d))|[0-1]?\\d{1,2})){3}');
-  if (value === '') {
-    callback()
-  }
-  if (!regex.test(value)) {
-    callback(new Error('请输入正确的IP地址'))
-  } else {
-    callback()
-  }
+const fromData = reactive({
+  project: '全部',
+})
+// region 表格数据代码
+// 表格展示的数据
+const tableData = ref([])
+
+// 过滤条件数据
+const projectList = ref([])
+
+const currentPage = ref(1)
+const pageSize = ref(20)
+
+const total = ref(0)
+
+// 处理翻页
+const handleCurrentChange = (newPage) => {
+  currentPage.value = newPage
+  get_table_data(currentPage.value, pageSize.value, fromData.project)
+}
+
+const handleSizeChange = (newPageSize) => {
+  pageSize.value = newPageSize
+  get_table_data(currentPage.value, pageSize.value, fromData.project)
 }
 
-// 指定表单的校验规则， 仅对ip进行校验
-const ipRule = reactive({
-  ip: [{validator: ip_validate, trigger: 'change'}]
-})
 
 // 数据提交 点击搜索按键提交数据
-const submitSearch = async (formEl) => {
-  const {ip, version} = unref(cinemaSearch)
+const submitSearch = async () => {
   tableData.value = []
-  await cinema_search({ip, version}).then(
+  await get_table_data(currentPage.value, pageSize.value, fromData.project).then(
       res => {
         if (Array.isArray(res)) {
           tableData.value = [...res]
@@ -53,64 +55,37 @@ const submitSearch = async (formEl) => {
       err => {
       }
   )
-  if (!formEl) return
-  formEl.validate((valid) => {
-    if (valid) {
-      console.log('提交数据')
-    } else {
-      console.log('提交失败')
-      return false
-    }
-  })
-}
-
-// 重置搜索数据的逻辑
-const resetSearch = (formEl) => {
-  if (!formEl) return
-  formEl.resetFields()
 }
 
-// 刷新逻辑
-const refresh = (formEL) => {
-  formEL.resetFields()
-  refresh_disable.value = true;
-  refresh_loading.value = true;
-  get_table_data()
-  update_git_version()
-  setTimeout(() => {
-    refresh_disable.value = false;
-    refresh_loading.value = false;
-  }, 5000)
-}
-// endregion
-
-// region
-const update_git_version = async () => {
-  await write_git_version_to_db().then(res => {
-    console.log(res)
+// 通过异步请求获取影院列表数据
+async function get_project_data() {
+  projectList.value = []
+  await project_list().then(res => {
+    if (Array.isArray(res)) {
+      projectList.value = [...res]
+      projectList.value.unshift({'id': 0, 'project_name': '全部', is_delete: false})
+    } else {
+    }
   }).catch(err => {
         console.log(err)
       }
   )
 }
-// endregion
-
-
-// region 表格数据代码
-// 表格展示的数据
-const tableData = ref([])
-
-// 定义开关控制刷新按键的状态 disable和loading
-let refresh_disable = ref(false)
-let refresh_loading = ref(false)
 
 // 通过异步请求获取影院列表数据
-async function get_table_data() {
+async function get_table_data(page_num = currentPage.value, page_size = pageSize.value, project_val = fromData.project) {
   tableData.value = []
-  await cinema_list().then(res => {
-    if (Array.isArray(res)) {
-      tableData.value = [...res]
+  console.log('get_table_data')
+  console.log(project_val)
+  project_val = project_val === '全部' ? '' : project_val
+  console.log(project_val)
+  await prd_list(page_num, page_size, project_val).then(res => {
+    total.value = res['count']
+    if (Array.isArray(res['results'])) {
+      tableData.value = [...res['results']]
+      console.log(tableData.value)
     } else {
+      console.log('get_table_data.res is not an array')
     }
   }).catch(err => {
         console.log(err)
@@ -121,120 +96,88 @@ async function get_table_data() {
 // 定义生命周期，在加载时获取一次表格数据
 onMounted(
     async () => {
-      await get_table_data();
+      await get_project_data();
+      await get_table_data(currentPage.value, pageSize.value, fromData.project);
     }
 )
 
 // endregion
 
-// region 常用人代码
-// 定义常用人代码被选中的结果
-const selectedUser = ref('')
-// 定义变量用于接受返回数据
-let userData = ref([])
-// 定义用于展示的数据变量
-onMounted(async () => {
-  await cinema_user().then((res) => {
-    const user_list = res.map((item, index) => {
-      return {key: item.id, label: item.username, value: item.username}
-    })
-    user_list.unshift({key: 0, label: '暂无', value: '暂无'})
-    userData.value = [...user_list]
-  }).catch((err) => {
-  })
-})
-
-const cinemaUserChange = (user, id) => {
-  const params = {user, id}
-  change_cinema_user(params).then(res => {
-  }).catch(err => {
-  })
-}
-
-// endregion
-
-// region 升级相关代码
-const update_ip = ref('')
-const ver_id = ref(0)
-
-const changeDialogStatus = (ip, ver) => {
-  store.state.updateModule.update_dialog_show = true
-  update_ip.value = ip
-  ver_id.value = ver
-}
-// endregion
-
 </script>
 
 <template>
   <el-form
-      ref="cinemaSearchRef"
-      :model="cinemaSearch"
-      status-icon
-      :rules="ipRule"
-      class="cinema-search"
+      :model="fromData"
+      :inline="true"
+      class="search_form"
   >
-    <el-row>
-      <el-col :span="5">
-        <el-form-item label="影院IP" prop="ip" label-width="60">
-          <el-input v-model="cinemaSearch.ip" placeholder="请输入完整的影院IP" style="width: 180px;"></el-input>
-        </el-form-item>
-      </el-col>
-      <el-col :span="5">
-        <el-form-item label="系统版本" prop="version">
-          <el-input v-model="cinemaSearch.version" placeholder="支持模糊查询" style="width: 160px;"></el-input>
-        </el-form-item>
-      </el-col>
-      <el-col :span="6">
-        <el-button type="primary" @click="submitSearch(cinemaSearchRef)">搜索</el-button>
-        <el-button @click="resetSearch(cinemaSearchRef)">重置</el-button>
-        <el-button v-bind:disabled="refresh_disable" @click="refresh(cinemaSearchRef)" v-bind:loading="refresh_loading">
-          刷新
-        </el-button>
-      </el-col>
-    </el-row>
+    <el-form-item label="所属项目" label-width="90">
+      <el-select v-model="fromData.project" placeholder="请选择">
+        <el-option v-for="item in projectList" :key="item['project_name']" :label="item['project_name']"
+                   :value="item['project_name']"/>
+      </el-select>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" @click="submitSearch">搜索</el-button>
+    </el-form-item>
+<!--    <el-button style="margin-right: 0">添加</el-button>-->
   </el-form>
   <el-table :data="tableData" style="width: 100%">
-    <el-table-column prop="update_time" label="最后查询时间" min-width="180"></el-table-column>
-    <el-table-column prop="ip" label="操作" min-width="80">
+    <el-table-column prop="project" label="所属项目" min-width="200"></el-table-column>
+    <el-table-column prop="prd_version" label="版本" min-width="200"></el-table-column>
+    <el-table-column prop="prd_doc_link" label="产品原型链接" min-width="300">
       <template v-slot="scope">
-        <el-button type="info" size="small" @click="changeDialogStatus(scope.row.ip, scope.row.ver_id)">更新</el-button>
+        <a target="_blank" style="color:#007bff;" v-if="scope.row.prd_doc_link!=null"
+           v-bind:href="scope.row.prd_doc_link">
+          {{ scope.row.prd_doc_link }}
+        </a>
+        <!--        <span v-else> {{ scope.row.prd_doc_link }}</span>-->
       </template>
     </el-table-column>
-    <el-table-column prop="selectedUser" label="当前使用人" min-width="120">
-      <template v-slot="scope">
-        <el-select v-model="scope.row.user" class="m-2" size="small" laceholder="请选择" style="width: 80px"
-                   @change="cinemaUserChange(scope.row.user, scope.row.id)">
-          <el-option v-for="data in userData" :key="data.id" :label="data.label"
-                     :value="data.value"></el-option>
-        </el-select>
+    <el-table-column prop="prd_comment" label="版本描述" min-width="300">
+      <template #default="{ row }">
+        <el-tooltip
+            class="item"
+            popper-class="custom-tooltip"
+            effect="dark"
+            :raw-content="true"
+            :content="row.prd_comment"
+            placement="top-end">
+          <span>{{ row.prd_comment.length > 10 ? row.prd_comment.slice(0, 10) + '...' : row.prd_comment }}</span>
+        </el-tooltip>
       </template>
     </el-table-column>
-    <el-table-column prop="name" label="影院名称" min-width="250"></el-table-column>
-    <el-table-column prop="ip" label="影院IP" min-width="120">
-      <template v-slot="scope">
-        <a target="_blank" style="color:#007bff;" v-if="scope.row.ip!=null"
-           v-bind:href="'http://'+scope.row.ip+'/?code=leying'">
-          {{ scope.row.ip }}
-        </a>
-        <span v-else> {{ scope.row.ip }}</span>
-      </template>
-    </el-table-column>
-    <el-table-column prop="zz_num" label="专资编码" min-width="100"></el-table-column>
-    <el-table-column prop="inner_id" label="鼎新编码" min-width="90"></el-table-column>
-    <el-table-column prop="sys_ver" label="系统版本" min-width="175"></el-table-column>
-    <el-table-column prop="client_ver" label="客户端版本" min-width="150"></el-table-column>
-    <el-table-column prop="is_cloud" label="云版本" min-width="80"></el-table-column>
-    <el-table-column prop="remote_label" label="远程办公识别码" min-width="160" class-name="remote"></el-table-column>
-    <el-table-column prop="db_user" label="数据库账号" min-width="100"></el-table-column>
-    <el-table-column prop="db_pwd" label="数据库密码" min-width="120"></el-table-column>
+    <el-table-column prop="update_at" label="最后更新时间" min-width="180"></el-table-column>
   </el-table>
-  <CinemaUpdate :ip="update_ip" :ver_id="ver_id"></CinemaUpdate>
+  <div class="pagination-container">
+    <el-pagination
+        v-model:current-page="currentPage"
+        v-model:page-size="pageSize"
+        :page-sizes="[10, 20, 50]"
+        size="small"
+        layout="sizes, prev, pager, next"
+        :total="total"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+    >
+    </el-pagination>
+  </div>
 </template>
 
 
-<style scoped>
-:deep(td.remote div) {
-  font-family: "YaHei Consolas Hybrid";
+<style>
+.pagination-container {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 20px;
+}
+
+.search_form {
+  display: flex;
+  justify-content: flex-start;
+}
+
+.custom-tooltip {
+  max-width: 500px; /* 设置最大宽度为 300px */
 }
 </style>