提交临时代码

src/apis/product.js

@@ -82,7 +82,10 @@ export const prd_delete = (id) => {
 // 获取历史数据
 export const prd_history = (id) => {
     return request({
-        url: `/prd/prd_history/${id}/`,
+        url: `/prd/prd_history`,
         method: 'get',
+        params: {
+            prd_id: id,
+        }
     })
 }

src/components/product/ProductHistory.vue

@@ -1,26 +1,63 @@
 <script setup>
+import {onBeforeMount, ref, computed} from "vue";
+import {useStore} from "vuex";
 import {prd_history} from '@/apis/product.js';
 
- async function get_history(id){
+// 定义数据源
+const history_data = ref([])
+
+// 注册store
+const store = useStore()
+
+// 注册props
+const props = defineProps({
+  id: {
+    type: Number,
+    required: true,
+    default: 1
+  }
+})
+
+const handleOpen = () => {
+  get_history(props.id);
+}
 
+const handleClose = () => {
+  store.state.updateModule.update_dialog_show = false
 }
 
+// 通过接口获取历史数据
+async function get_history(id) {
+  await prd_history(id).then(res => {
+    console.log('get_history')
+    if (Array.isArray(res)) {
+      history_data.value = [...res]
+    }
+  }).catch(err => {
+    console.log(err)
+  });
+}
+
+// onBeforeMount(
+//     async () => {
+//       await get_history(props.id);
+//     }
+// )
+
 </script>
 
 <template>
-<el-row>
-  <el-col>
-    <el-button>返回</el-button>
-  </el-col>
-</el-row>
+  <el-dialog v-model="store.state.prdModule.history_dialog_show" title="历史记录" :modal="true" width="720px"
+             :close-on-click-modal="false" @open="handleOpen" @close="handleClose">
     <el-table>
       <el-table-column prop="update_at" label="版本发布日期">
 
       </el-table-column>
-    <el-table-column prop="prd_history_doc_link" label="产品原型链接">
+      <el-table-column prop="history_doc_link" label="产品原型链接">
 
       </el-table-column>
     </el-table>
+  </el-dialog>
 </template>
 
 <style scoped>

src/store/index.js

@@ -88,9 +88,23 @@ const ecApiModule = {
     actions: {},
 }
 
+const prdModule = {
+    namespaced: true,
+    state: {
+        history_dialog_show: false,
+    },
+    getter: {
+        dialog_change: state => {
+            state.history_dialog_show = !state.history_dialog_show
+            return state.history_dialog_show
+        },
+    },
+}
+
 export default createStore({
     modules: {
         updateModule,
         ecApiModule,
+        prdModule,
     },
 })

src/views/product/index.vue

@@ -2,6 +2,8 @@
 import {onBeforeMount, onMounted, 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} from "@/apis/product.js";
+import CinemaUpdate from "@/components/update/CinemaUpdate.vue";
+import ProductHistory from "@/components/product/ProductHistory.vue";
 
 
 // 注册vuex
@@ -27,6 +29,8 @@ const pageSize = ref(20)
 
 const total = ref(0)
 
+const history_dialog_id = ref(1)
+
 // 处理翻页
 const handleCurrentChange = (newPage) => {
   currentPage.value = newPage
@@ -38,6 +42,14 @@ const handleSizeChange = (newPageSize) => {
   get_table_data(currentPage.value, pageSize.value, fromData.project)
 }
 
+// 处理历史记录对话框
+const changeDialogStatus = (id) => {
+  history_dialog_id.value = id
+  console.log('changeDialogStatus', id)
+  store.state.updateModule.update_dialog_show = true
+  console.log(store.state.updateModule.update_dialog_show)
+}
+
 
 // 数据提交 点击搜索按键提交数据
 const submitSearch = async () => {
@@ -148,6 +160,11 @@ onMounted(
       </template>
     </el-table-column>
     <el-table-column prop="update_at" label="最后更新时间" min-width="180"></el-table-column>
+    <el-table-column prop="id" label="历史文档" min-width="120">
+      <template v-slot="scope">
+        <el-button type="primary" size="small" @click="changeDialogStatus(scope.row.id)">查看</el-button>
+      </template>
+    </el-table-column>
   </el-table>
   <div class="pagination-container">
     <el-pagination
@@ -162,6 +179,7 @@ onMounted(
     >
     </el-pagination>
   </div>
+  <ProductHistory :id="history_dialog_id"></ProductHistory>
 </template>