初始化添加页面

src/components/product/ProductAdmin.vue

@@ -1,11 +1,203 @@
-<script setup lang="ts">
+<script setup>
+import {onBeforeMount, onMounted, onBeforeUnmount, reactive, ref, unref, computed} from 'vue';
+import {useStore, mapGetters, mapState} from "vuex";
+import {
+  project_list,
+  prd_list,
+  prd_add,
+  prd_get,
+  prd_update,
+  prd_delete,
+  prd_history,
+  prd_list_ax_cloud
+} from "@/apis/product.js";
+import {storage} from "@/storage/storage.js";
+import {onBeforeRouteLeave} from "vue-router";
+
+
+// 注册vuex
+const store = useStore()
+
+
+// region 表单代码
+
+
+// 点击搜索时提交的数据
+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)
+}
+
+// 数据提交 点击搜索按键提交数据
+const submitSearch = async () => {
+  tableData.value = []
+  await get_table_data(currentPage.value, pageSize.value, fromData.project).then(
+      res => {
+        if (Array.isArray(res)) {
+          tableData.value = [...res]
+
+        } else {
+
+        }
+      }
+  ).catch(
+      err => {
+      }
+  )
+}
+
+// 通过异步请求获取影院列表数据
+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)
+      }
+  )
+}
+
+// 通过异步请求获取影院列表数据
+async function get_table_data(page_num = currentPage.value, page_size = pageSize.value, project_val = fromData.project) {
+  // 获取数据
+  tableData.value = []
+  console.log('get_table_data')
+  console.log(project_val)
+  project_val = project_val === '全部' ? '' : project_val
+  console.log(project_val)
+  await prd_list_ax_cloud(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)
+      }
+  )
+}
+
+// 定义生命周期，在加载时获取一次表格数据
+onMounted(
+    async () => {
+      await get_project_data();
+      await get_table_data(currentPage.value, pageSize.value, fromData.project);
+    }
+)
+// endregion
 
 </script>
 
 <template>
+  <el-form
+      :model="fromData"
+      :inline="true"
+      class="search_form"
+  >
+    <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="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" show-overflow-tooltip>
+      <template v-slot="scope">
+        <a target="_blank" style="color:#007bff;" v-if="scope.row.prd_doc_link!=null"
+           @click="mark_read(scope.row.id, scope.row.update_at)"
+           v-bind:href="scope.row.prd_doc_link">
+          {{
+            scope.row.prd_doc_link.length > 30 ? scope.row.prd_doc_link.slice(0, 30) + '...' : scope.row.prd_doc_link
+          }}
+        </a>
+      </template>
+    </el-table-column>
+    <el-table-column prop="prd_comment" label="版本描述" min-width="260">
+      <template #default="{ row }">
+        <el-tooltip
+            class="item"
+            popper-class="custom-tooltip"
+            effect="dark"
+            :raw-content="true"
+            :content="row.prd_comment.split('\n').join('<br>')"
+            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="update_at" label="最后更新时间" min-width="210">
+    </el-table-column>
+    <el-table-column prop="id" label="操作" min-width="120">
+      <template v-slot="scope">
+        <el-button type="primary" size="small" @click="PrdItemEdit(scope.row.id)">编辑</el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+  <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>
 
+<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>