更新 版本管理

src/views/index/Versions.vue

@@ -2,7 +2,37 @@
   <el-button type="primary" class="mb20" @click="isModalVisable = true"
     >添加版本记录</el-button
   >
-  <el-dialog title="版本管理" width="400px" v-model="isModalVisable">
+  <el-popover placement="bottom" trigger="hover" :width="240">
+    <el-timeline>
+      <el-timeline-item
+        v-for="item in versions"
+        center
+        :timestamp="item.timer"
+        placement="top"
+      >
+        <div class="log-card">
+          <p style="margin-bottom: 10px">Version: {{ item.version }}</p>
+          <div
+            style="margin-bottom: 5px; font-size: 12px"
+            v-for="(item1, index) in item.remarks"
+          >
+            {{ index + 1 }}. {{ item1.text }}
+          </div>
+        </div>
+      </el-timeline-item>
+    </el-timeline>
+    <template #reference>
+      <el-badge value="new">
+        <div class="log">新功能日志</div>
+      </el-badge>
+    </template>
+  </el-popover>
+  <el-dialog
+    title="版本管理"
+    width="500px"
+    v-model="isModalVisable"
+    @closed="cancel"
+  >
     <el-form
       ref="ruleFormRef"
       :model="ruleForm"
@@ -24,13 +54,25 @@
         :label="'发布内容 ' + parseInt(index + 1) + ' :'"
         prop="remarks"
       >
-        <el-input
-          type="textarea"
-          style="width: 240px"
-          v-model="item.text"
-          autosize
-        ></el-input>
+        <div class="df aic jcsb">
+          <el-input
+            type="textarea"
+            style="width: 240px"
+            v-model="item.text"
+            autosize
+          ></el-input>
+          <el-button size="small" type="danger">删除</el-button>
+        </div>
       </el-form-item>
+      <div class="df aic jcfe">
+        <el-button
+          size="small"
+          type="primary"
+          @click="ruleForm.remarks.push({})"
+          >添加一条记录</el-button
+        >
+      </div>
+      <hr class="mt20 mb20" />
       <div class="df aic jcfe">
         <el-button @click="cancel(ruleFormRef)">取消</el-button>
         <el-button type="primary" @click="add(ruleFormRef)">提交</el-button>
@@ -58,7 +100,12 @@
     ></el-table-column>
     <el-table-column label="版本内容" min-width="150" align="center">
       <template v-slot="scope">
-        {{ scope.row.remarks }}
+        <div
+          style="width: 100%; text-align: left"
+          v-for="(item, index) in scope.row.remarks"
+        >
+          {{ index + 1 + ". " + item.text }}
+        </div>
       </template>
     </el-table-column>
     <el-table-column label="操作" min-width="150" align="center">
@@ -68,10 +115,10 @@
           type="primary"
           size="small"
         >
-          查看
+          修改
         </el-button>
         <el-button
-          @click="deleteItem(scope.row, scope.$index)"
+          @click="deleteItem(scope.row._id, scope.$index)"
           type="danger"
           size="small"
         >
@@ -84,36 +131,81 @@
 
 <script setup>
 import tcb from "apis/cloudLogin";
+import _ from "lodash";
 const db = tcb.database();
 const v = db.collection("huihenduo_versions");
 import { reactive, ref, onMounted } from "vue";
 let versions = ref([]);
-let isModalVisable = ref(true);
-function detail() {}
+let isModalVisable = ref(false);
+let ruleFormRef = ref(null);
+let currentPage = ref(1);
+let pageSize = ref(10);
+let currentVersionId = ref(null);
 
-async function deleteItem() {}
+function detail(item1) {
+  let item = _.cloneDeep(item1);
+  let { _id, version, timer, remarks } = item;
+  currentVersionId.value = _id;
+  ruleForm.value = { version, timer, remarks };
+
+  isModalVisable.value = true;
+  console.log(ruleForm.value);
+}
+
+async function deleteItem(_id) {
+  let res = await v.doc(_id).remove();
+  getVersions();
+  console.log(res);
+}
 
 async function update() {}
 
 async function add() {
-  console.log(ruleForm);
-  let res = await v.add({
-    ...ruleForm,
-    createTime: db.serverDate(),
+  ruleFormRef.value.validate(async (valid) => {
+    if (valid) {
+      let res;
+      if (currentVersionId.value) {
+        res = await v.doc(currentVersionId.value).update({
+          ...ruleForm.value,
+          updateTime: db.serverDate(),
+        });
+      } else {
+        res = await v.add({
+          ...ruleForm.value,
+          createTime: db.serverDate(),
+        });
+      }
+
+      getVersions();
+      cancel();
+    } else {
+      console.log("未提交", ruleForm.value);
+    }
   });
-  console.log(res);
 }
+
 async function getVersions() {
-  let res = await v.get();
+  let res = await v
+    .skip((currentPage.value - 1) * pageSize.value)
+    .limit(pageSize.value)
+    .get();
   versions.value = res.data;
 }
 
-function cancel() {}
+function cancel() {
+  isModalVisable.value = false;
+  ruleForm.value = {
+    version: "",
+    timer: "",
+    remarks: [],
+  };
+  currentVersionId.value = null;
+}
 
-const ruleForm = reactive({
+let ruleForm = ref({
   version: "",
   timer: "",
-  remarks: [{}, {}],
+  remarks: [],
 });
 
 const rules = reactive({