完成历史文档版本

src/components/product/ProductHistory.vue

@@ -1,65 +0,0 @@
-<script setup>
-import {onBeforeMount, ref, computed} from "vue";
-import {useStore} from "vuex";
-import {prd_history} from '@/apis/product.js';
-
-// 定义数据源
-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-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="history_doc_link" label="产品原型链接">
-
-      </el-table-column>
-    </el-table>
-  </el-dialog>
-</template>
-
-<style scoped>
-
-</style>

src/store/index.js

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

src/views/product/index.vue

@@ -1,9 +1,7 @@
 <script setup>
 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 {project_list, prd_list, prd_add, prd_get, prd_update, prd_delete, prd_history} from "@/apis/product.js";
-import CinemaUpdate from "@/components/update/CinemaUpdate.vue";
-import ProductHistory from "@/components/product/ProductHistory.vue";
 
 
 // 注册vuex
@@ -46,8 +44,32 @@ const handleSizeChange = (newPageSize) => {
 const changeDialogStatus = (id) => {
   history_dialog_id.value = id
   console.log('changeDialogStatus', id)
-  store.state.updateModule.update_dialog_show = true
+  get_history(history_dialog_id.value)
-  console.log(store.state.updateModule.update_dialog_show)
+}
+
+
+// 定义数据源
+const history_data = ref([])
+
+// 定义对话框开关
+let history_dialog_show = ref(false)
+
+// 通过接口获取历史数据
+function get_history(id) {
+  prd_history(id).then(res => {
+    console.log('get_history')
+    if (Array.isArray(res)) {
+      history_data.value = [...res]
+    }
+    history_dialog_show.value = true
+  }).catch(err => {
+    console.log(err)
+  });
+}
+
+const handleClose = () => {
+  history_dialog_show.value = false
+  history_data.value = []
 }
 
 
@@ -132,7 +154,7 @@ onMounted(
     <el-form-item>
       <el-button type="primary" @click="submitSearch">搜索</el-button>
     </el-form-item>
-<!--    <el-button style="margin-right: 0">添加</el-button>-->
+    <!--    <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>
@@ -141,7 +163,9 @@ onMounted(
       <template v-slot="scope">
         <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.length > 30 ? scope.row.prd_doc_link.slice(0, 30) + '...' : 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>
         <!--        <span v-else> {{ scope.row.prd_doc_link }}</span>-->
       </template>
@@ -162,7 +186,9 @@ onMounted(
     <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>
+        <el-button type="primary" size="small" @click="changeDialogStatus(scope.row.id)"
+                   :disabled="!scope.row.have_history">查看
+        </el-button>
       </template>
     </el-table-column>
   </el-table>
@@ -179,7 +205,25 @@ onMounted(
     >
     </el-pagination>
   </div>
-  <ProductHistory :id="history_dialog_id"></ProductHistory>
+  <template>
+    <el-dialog v-model="history_dialog_show" title="历史记录" width="500px" :modal="true"
+               :close-on-click-modal="false" :append-to-body="true" @close="handleClose">
+      <el-table :data="history_data" style="width: 100%">
+        <el-table-column prop="update_at" label="版本发布日期" min-width="100"></el-table-column>
+        <el-table-column prop="history_doc_link" label="产品原型链接" min-width="300" show-overflow-tooltip>
+          <template v-slot="scope">
+            <a target="_blank" style="color:#007bff;" v-if="scope.row.history_doc_link!=null"
+               v-bind:href="scope.row.history_doc_link">
+              {{
+                scope.row.history_doc_link.length > 30 ? scope.row.history_doc_link.slice(0, 30) + '...' : scope.row.history_doc_link
+              }}
+            </a>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
+  </template>
+
 </template>