update

src/components/list.vue

@@ -851,6 +851,8 @@ export default {
           this.tableData_stop = res.data[2][0].num;
           this.tableData_start = res.data[1][0].num;
           this.tableLoading = false;
+          console.log("you",res.data);
+          
         })
         .catch((err) => {
           // 处理失败的响应

src/components/versionAdd.vue

@@ -0,0 +1,693 @@
+<template>
+  <div class="list_container">
+    <div class="title_examine">
+      <div class="pub_title">版本添加</div>
+      <div style="margin-left: auto;"><el-button type="primary" size="small" @click="addVersionm()">新增版本</el-button>
+      </div>
+
+    </div>
+    <!-- 内容区域 -->
+    <div class="content">
+      <!-- 按钮区域 -->
+      <div class="button_top">
+        <a @click="showType('正式')" :style="{ color: type == '正式' ? 'black' : 'rgb(179, 179, 179)' }">正式({{ countFormal
+        }})</a>
+        <a @click="showType('beta')" :style="{ color: type == 'beta' ? 'black' : 'rgb(179, 179, 179)' }">beta({{
+          countBeta }})</a>
+        <a @click="showType('hk')" :style="{ color: type == 'hk' ? 'black' : 'rgb(179, 179, 179)' }">hk({{ countHk
+        }})</a>
+        <a @click="showType('com')" :style="{ color: type == 'com' ? 'black' : 'rgb(179, 179, 179)' }">com({{ countCom
+        }})</a>
+      </div>
+      <div class="tableBox">
+        <el-table :data="tableData" stripe border style="width: 100%" :header-cell-style="headerCellStyle">
+          <el-table-column show-overflow-tooltip prop="update_at" label="更新日期" min-width="45"></el-table-column>
+          <el-table-column prop="update_title" label="更新标题" min-width="45" show-overflow-tooltip></el-table-column>
+          <el-table-column prop="update_desc" label="更新描述" width="180px" class="description"></el-table-column>
+          <el-table-column prop="update_details" label="更新详情" width="180px">
+            <template #default="scope">
+              <el-tooltip class="item" effect="dark" :content="scope.row.update_details" placement="top">
+                <div class="cell-ellipsis">{{ scope.row.update_details }}</div>
+              </el-tooltip>
+            </template>
+          </el-table-column>
+          <el-table-column prop="update_version" label="更新版本" min-width="45"></el-table-column>
+          <el-table-column prop="tagName" label="更新标签" min-width="45">
+            <template #default="scope">
+              <el-tooltip class="item" effect="dark" :content="scope.row.tagName" placement="top">
+                <div class="cell-ellipsis">{{ scope.row.tagName }}</div>
+              </el-tooltip>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="150px">
+            <template slot-scope="scope">
+              <div class="operate" style="display: flex;gap: 24px;">
+                <button style="color: #308fff;" @click="update(scope.row)">修改</button>
+                <button style="color: #ff2570;" @click="delete_version(scope.row.id)">删除</button>
+                <button style="color: rgb(21 189 97);" @click="go(scope.row)">预览</button>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <!-- 分页组件 -->
+      <el-pagination :current-page="currentPage" :page-size="pageSize" :total="total" @current-change="handlePageChange"
+        layout="total,prev, pager, next, jumper">
+      </el-pagination>
+
+    </div>
+    <el-dialog title="新增版本" class="table" :visible.sync="isTableUseVisible" width="700px">
+      <div>
+        <form class="el-form">
+          <div class="el-form-item">
+            <label class="el-form-item__label">更新日期</label>
+            <div class="el-form-item__content">
+              <el-date-picker v-model="currentDate" format="yyyy-MM-dd" type="date" value-format="yyyy-MM-dd"
+                placeholder="更新日期" />
+            </div>
+          </div>
+
+          <div class="el-form-item">
+            <label class="el-form-item__label">更新标题</label>
+            <div class="el-form-item__content">
+              <el-input placeholder="请输入标题" autocomplete="off" v-model="upTitle"></el-input>
+            </div>
+          </div>
+          <div class="el-form-item">
+            <label class="el-form-item__label">更新描述</label>
+            <div class="el-form-item__content">
+              <el-input type='textarea' placeholder="请输入描述" autocomplete="off" v-model="upDesc"
+                :autosize="{ minRows: 2, maxRows: 10 }"></el-input>
+            </div>
+          </div>
+          <div class="el-form-item">
+            <label class="el-form-item__label">更新详情</label>
+            <div class="el-form-item__content">
+              <el-input type='textarea' placeholder="请输入详情" autocomplete="off" v-model="upDetail"
+                :autosize="{ minRows: 2, maxRows: 10 }"></el-input>
+            </div>
+          </div>
+          <div class="el-form-item">
+            <label class="el-form-item__label">更新标签</label>
+            <div class="el-form-item__content">
+              <el-input v-model="newTag" placeholder="请输入标签，回车添加标签" autocomplete="off"
+                @keyup.enter.native.prevent="addTag"></el-input>
+            </div>
+            <div class="tags-container">
+              <el-tag v-for="(tag, index) in tags" :key="index" closable @close="removeTag(index)" class="tag-item">
+                {{ tag }}
+              </el-tag>
+            </div>
+          </div>
+          <div class="el-form-item">
+            <label class="el-form-item__label">版本分类</label>
+            <div class="el-form-item__content">
+              <el-select v-model="tagValue" placeholder="请选择">
+                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.label">
+                </el-option>
+              </el-select>
+            </div>
+          </div>
+        </form>
+      </div>
+      <!-- 按钮区域 -->
+      <div slot="footer" class="el-dialog__footer">
+        <el-button @click="isTableUseVisible = false;">取 消</el-button>
+        <el-button type="primary" @click="addVersion()">确认</el-button>
+      </div>
+    </el-dialog>
+    <el-dialog title="修改版本" class="table" :visible.sync="isTableUseVisible2" width="700px" @close="cancel()">
+      <div>
+        <form class="el-form">
+          <div class="el-form-item">
+            <label class="el-form-item__label">更新日期</label>
+            <div class="el-form-item__content">
+              <el-date-picker v-model="currentDate" format="yyyy-MM-dd" type="date" value-format="yyyy-MM-dd"
+                placeholder="更新日期" />
+            </div>
+          </div>
+
+          <div class="el-form-item">
+            <label class="el-form-item__label">更新标题</label>
+            <div class="el-form-item__content">
+              <el-input placeholder="请输入标题" autocomplete="off" v-model="upTitle"></el-input>
+            </div>
+          </div>
+          <div class="el-form-item">
+            <label class="el-form-item__label">更新描述</label>
+            <div class="el-form-item__content">
+              <el-input type='textarea' placeholder="请输入描述" autocomplete="off" v-model="upDesc"
+                :autosize="{ minRows: 2, maxRows: 10 }"></el-input>
+            </div>
+          </div>
+          <div class="el-form-item">
+            <label class="el-form-item__label">更新详情</label>
+            <div class="el-form-item__content">
+              <el-input type='textarea' placeholder="请输入详情" autocomplete="off" v-model="upDetail"
+                :autosize="{ minRows: 2, maxRows: 10 }"></el-input>
+            </div>
+          </div>
+          <div class="el-form-item">
+            <label class="el-form-item__label">更新标签</label>
+            <div class="el-form-item__content">
+              <el-input v-model="newTag" placeholder="请输入标签，回车添加标签" autocomplete="off"
+                @keyup.enter.native.prevent="addTag"></el-input>
+            </div>
+            <div class="tags-container">
+              <el-tag v-for="(tag, index) in tags" :key="index" closable @close="removeTag(index)" class="tag-item">
+                {{ tag }}
+              </el-tag>
+            </div>
+          </div>
+          <div class="el-form-item">
+            <label class="el-form-item__label">版本分类</label>
+            <div class="el-form-item__content">
+              <el-select v-model="tagValue" placeholder="请选择">
+                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.label">
+                </el-option>
+              </el-select>
+            </div>
+          </div>
+        </form>
+      </div>
+      <!-- 按钮区域 -->
+      <div slot="footer" class="el-dialog__footer">
+        <el-button @click="isTableUseVisible2 = false">取 消</el-button>
+        <el-button type="primary" @click="updateVersion()">确认</el-button>
+      </div>
+    </el-dialog>
+  </div>
+
+
+</template>
+<script>
+import { API_CONFIG } from '@/common/apiConfig';
+import { mapGetters } from 'vuex';
+export default {
+  name: 'versionAdd',
+  data() {
+    return {
+      type: '正式',
+      tableData: [],
+      options: [{
+        value: '选项1',
+        label: '正式'
+      }, {
+        value: '选项2',
+        label: 'beta'
+      }, {
+        value: '选项3',
+        label: 'hk'
+      }, {
+        value: '选项4',
+        label: 'com'
+      }],
+      tagValue: '',
+      //新增版本
+      isTableUseVisible: false,
+      isTableUseVisible2: false,
+      isPreviewVisible: false,
+      upTitle: '',
+      upDesc: '',
+      upDetail: '',
+      newTag: "", // 存储输入框的标签内容
+      tags: [], // 存储已添加的标签
+      nid: "",//修改的id
+      currentDate: "",
+      currentPage: 1,
+      total: 0,
+      pageSize: 10, // 每页显示的条目数
+      countFormal: 0,
+      countBeta: 0,
+      countHk: 0,
+      countCom: 0,
+      isChong: 0
+    }
+  },
+  computed: {
+    ...mapGetters(["userid"]),
+  },
+  created() {
+    this.formatDate();
+
+  },
+  methods: {
+    go(row) {
+      this.$router.push({
+        path: '/versionInstr',
+        query: {
+          id: row.id,
+          type: 2
+        }
+      });
+    },
+    formatDate() {
+      // 使用示例
+      const today = new Date(); // 获取当前日期
+      const year = today.getFullYear(); // 获取年份
+      const month = String(today.getMonth() + 1).padStart(2, '0'); // 获取月份，注意月份从0开始，所以要加1，并确保是两位数
+      const day = String(today.getDate()).padStart(2, '0'); // 获取日期，并确保是两位数
+
+      this.currentDate = `${year}-${month}-${day}`; // 返回格式化后的日期字符串
+    },
+    // 表头的背景色
+    headerCellStyle() {
+      return { backgroundColor: "#f1f1f1" };
+    },
+    showType(type) {
+      this.type = type;
+      this.currentPage = 1;
+      this.getData()
+    },
+    addVersionm() {
+      this.isTableUseVisible = true;
+    },
+    cancel() {
+      this.formatDate();
+      this.upTitle = '';
+      this.upDesc = '';
+      this.upDetail = '';
+      this.tagValue = '';
+      this.tags = [];
+    },
+    update(row) {
+      this.isTableUseVisible2 = true;
+      console.log("表格信息", row);
+      this.currentDate = row.update_at;
+      this.upTitle = row.update_title;
+      this.upDesc = row.update_desc;
+      this.upDetail = row.update_details;
+      this.tagValue = row.update_version;
+      this.tags = row.tagName ? row.tagName.split(',') : [];
+      //修改后的数据
+      this.nid = row.id;
+    },
+    // 添加标签
+    addTag() {
+      if (this.newTag.trim() !== '') {
+        this.tags.push(this.newTag.trim());
+        this.newTag = '';
+      }
+    },
+    // 关闭预览对话框 清空tags
+    handlePreviewClose() {
+      this.tags = [];
+    },
+    // 删除标签
+    removeTag(index) {
+      this.tags.splice(index, 1); // 从标签数组中删除标签
+    },
+    getData() {
+      let params = [
+        {
+          functionName: "getVersion",
+          uid: this.userid,
+          page: this.currentPage,
+          num: this.pageSize,
+          type: this.type
+        }
+      ];
+      this.$ajax
+        .post(API_CONFIG.baseUrl, params)
+        .then((res) => {
+          console.log("👉", res.data);
+          this.tableData = res.data[0];
+          this.total = res.data[0][0].num;
+          this.countFormal = res.data[1][0].countFormal;
+          this.countBeta = res.data[1][0].countBeta;
+          this.countHk = res.data[1][0].countHk;
+          this.countCom = res.data[1][0].countCom;
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    },
+    async addVersion() {
+      if (this.upTitle === '') {
+        this.$message.error("请填写标题");
+        return;
+      } else if (this.upDesc === '') {
+        this.$message.error("请填写描述");
+        return;
+      } else if (this.upDetail === '') {
+        this.$message.error("请填写详情");
+        return;
+      } else if (this.tags.length === 0) {
+        this.$message.error("请填写标签");
+        return;
+      } else if (this.tagValue === '') {
+        this.$message.error("请选择版本分类");
+        return;
+      }
+
+      await this.versionChong();
+      if (this.isChong === 1) {
+        console.log(1);
+
+        return;
+      }
+      this.isTableUseVisible = false;
+      let params = [
+        {
+          functionName: "addVersion",
+          uid: this.userid,
+          upTime: this.currentDate,
+          utitle: this.upTitle,
+          udesc: this.upDesc,
+          udetail: this.upDetail,
+          uversion: this.tagValue,
+          utags: this.tags.join(',')
+        }
+      ];
+      this.$ajax
+        .post(API_CONFIG.baseUrl, params)
+        .then((res) => {
+          console.log("👉", res.data);
+          this.$message({
+            message: '添加成功',
+            type: 'success'
+          });
+          this.getData();
+          this.upTitle = '';
+          this.upDesc = '';
+          this.upDetail = '';
+          this.tagValue = '';
+          this.tags = [];
+          console.log(this.currentDate);
+          this.formatDate()
+
+        })
+        .catch((err) => {
+          this.$message.error("添加失败");
+          console.log(err);
+        });
+
+
+    },
+    // 页码扩展按钮
+    handlePageChange(page) {
+      this.currentPage = page;
+      this.getData();
+    },
+    updateVersion() {
+      if (this.upTitle === '') {
+        this.$message.error("请填写标题");
+        return;
+      } else if (this.upDesc === '') {
+        this.$message.error("请填写描述");
+        return;
+      } else if (this.upDetail === '') {
+        this.$message.error("请填写详情");
+        return;
+      } else if (this.tags.length === 0) {
+        this.$message.error("请填写标签");
+        return;
+      } else if (this.tagValue === '') {
+        this.$message.error("请选择版本分类");
+        return;
+      }
+
+      let params = [
+        {
+          functionName: "updateVersion",
+          id: this.nid,
+          ntitle: this.upTitle,
+          ndesc: this.upDesc,
+          ndetail: this.upDetail,
+          ntags: this.tags,
+          nversion: this.tagValue,
+          ntime: this.currentDate
+        }
+      ];
+      this.$ajax
+        .post(API_CONFIG.baseUrl, params)
+        .then((res) => {
+          console.log("👉", res.data);
+          this.isTableUseVisible2 = false;
+          this.$message({
+            message: '修改成功',
+            type: 'success'
+          });
+          this.getData();
+
+        })
+        .catch((err) => {
+          this.$message.error("修改失败");
+          console.log(err);
+        });
+    },
+    delete_version(id) {
+      this.nid = id;
+
+      let params = [
+        {
+          functionName: "deleteVersion",
+          id: this.nid
+        }
+      ];
+      this.$confirm("确定删除此版本记录吗?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          this.$ajax
+            .post(API_CONFIG.baseUrl, params)
+            .then((res) => {
+              console.log("👉", res.data);
+              this.$message({
+                message: '删除成功',
+                type: 'success'
+              });
+              this.getData();
+
+            })
+        })
+        .catch((err) => {
+          this.$message.error("删除失败");
+          console.log(err);
+        });
+    },
+    async versionChong() {
+      let params = [
+        {
+          functionName: "selectVersionChong",
+          id: this.userid,
+          ntime: this.currentDate,
+          nversion: this.tagValue
+        }
+      ];
+      await this.$ajax
+        .post(API_CONFIG.baseUrl, params)
+        .then((res) => {
+          if (res.data[0][0].isChong === 1) {
+            // 如果日期和版本已存在，提示用户
+            this.$message.error("该日期在当前版本中已存在，请重新选择！");
+            this.isChong = 1;
+            console.log(res.data);
+
+          }
+          else {
+            this.isChong = 0;
+          }
+
+        })
+        .catch((err) => {
+          // 处理请求错误
+          console.error("检查日期和版本失败:", err);
+          this.$message.error("检查日期和版本失败，请稍后重试！");
+        });
+    },
+  },
+  mounted() {
+    this.getData();
+  },
+}
+</script>
+<style scoped>
+.list_container {
+  width: 100%;
+  height: 100%;
+  padding: 10px;
+  box-sizing: border-box;
+  overflow: auto;
+}
+
+/* 按钮区域 */
+.button_top {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  margin: 10px 0;
+}
+
+.button_top a {
+  cursor: pointer;
+  color: black;
+  font-weight: bold;
+}
+
+.button_top a+a {
+  margin-left: 20px;
+}
+
+.table>>>.el-dialog__header {
+  padding: 15px 20px;
+  background: #454545;
+}
+
+.table>>>.el-dialog__title {
+  color: #fff;
+}
+
+.tags-container {
+  margin-top: 10px;
+}
+
+.el-tag {
+  margin-right: 5px;
+}
+
+.el-form-item {
+  display: flex;
+  flex-direction: column;
+}
+
+.el-form-item__label {
+  font-size: 14px;
+  color: #606266;
+  line-height: 40px;
+  width: 70px;
+}
+
+.el-form-item__content {
+  line-height: 40px;
+  position: relative;
+  font-size: 14px;
+}
+
+/* 分页功能的样式 */
+.el-pagination {
+  /* 调整分页组件的顶部向上方距离50px */
+  margin-top: 10px;
+  padding: 0;
+}
+
+/* 设置分页按钮的宽度 */
+.el-pagination .el-pagination__prev,
+.el-pagination .el-pagination__next {
+  width: 60px;
+  /* 设置上一页和下一页按钮的宽度 */
+}
+
+/* 设置页码按钮的宽度 */
+.el-pagination .el-pager li {
+  width: 50px;
+  /* 设置每个页码按钮的宽度 */
+}
+
+/* 设置分页大小选择框的宽度 */
+.el-pagination .el-select {
+  width: 80px;
+  /* 设置分页大小选择框的宽度 */
+}
+
+.operate {
+  display: flex;
+  gap: 24px;
+}
+
+.operate button {
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+.version_middle {
+  margin: 34px 45px;
+  border-bottom: 1px solid #E7E7E7;
+  padding-bottom: 25px;
+}
+
+.v_m_title {
+  text-align: center;
+  margin-bottom: 14px;
+  font-size: 56px;
+}
+
+.v_m_instr {
+  color: #00000099;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  /* 限制显示的行数 */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 24px;
+  text-align: center;
+}
+
+.version_content {
+  display: flex;
+  margin: 39px 46px;
+  ;
+}
+
+.v_l_items {
+  display: flex;
+  gap: 13px;
+  flex-wrap: wrap;
+  margin-top: 10px;
+}
+
+.v_l_item {
+  padding: 2px 6px;
+  background: rgb(240, 244, 255);
+  color: rgb(51, 112, 255);
+  border-radius: 4px;
+  text-align: center;
+  font-size: 14px;
+  height: 20px;
+  line-height: 20px;
+  white-space: nowrap;
+  /* 禁止换行 */
+  overflow: hidden;
+  /* 超出部分隐藏 */
+  text-overflow: ellipsis;
+  cursor: pointer;
+  max-width: 165px;
+}
+
+.version_left {
+  max-width: 232px;
+}
+
+.version_right {
+  margin-left: 65px;
+}
+
+.v_r_text {
+  margin-top: 10px;
+  line-height: 35px;
+  text-align: center;
+}
+
+.cell-ellipsis {
+  white-space: nowrap;
+  /* 禁止换行 */
+  overflow: hidden;
+  /* 超出部分隐藏 */
+  text-overflow: ellipsis;
+  /* 显示省略号 */
+}
+
+.tag-item {
+  white-space: nowrap;
+  /* 禁止换行 */
+  overflow: hidden;
+  /* 超出部分隐藏 */
+  text-overflow: ellipsis;
+  /* 显示省略号 */
+  max-width: 200px;
+}
+</style>

src/permission.js

@@ -5,7 +5,7 @@ import 'nprogress/nprogress.css' // progress bar style
 
 NProgress.configure({ showSpinner: false }) // NProgress Configuration
 
-const whiteList = ['/login', '/examineDialog'] // no redirect whitelist
+const whiteList = ['/login', '/examineDialog','/versionInstr','/updateDate'] // no redirect whitelist
 
 router.beforeEach(async (to, from, next) => {
   // start progress bar

src/router/index.js

@@ -3,13 +3,18 @@ import VueRouter from 'vue-router';
 import HomeView from '../views/HomeView.vue';
 import UserList from '@/components/list.vue'; // 账号列表组件
 import UserExamine from '@/components/examine.vue'; // 账号审核组件.
+import VersionAdd from '@/components/versionAdd.vue';//版本添加组件
+import versionInstr from '@/views/versionInstr.vue';//版本说明组件
+import updateDate from '@/views/updateDate.vue';
+
 
 Vue.use(VueRouter);
 
 const routes = [
   {
     path: '/login',
-    component: () => import('@/views/login/index'),
+    name:'login',
+    component: () => import('@/views/login/index.vue'),
     meta: {
       title: '登录',
       keepAlive: false
@@ -31,6 +36,11 @@ const routes = [
         name: 'UserExamine',
         component: UserExamine,
       },
+      {
+        path: 'version-add',
+        name: 'VersionAdd',
+        component: VersionAdd,
+      },
     ],
   },
   {
@@ -38,6 +48,16 @@ const routes = [
     name: 'examineDialog',
     component: () => import(/* webpackChunkName: "examineDialog" */ '../views/examineDialog.vue'),
   },
+  {
+    path: '/versionInstr',
+    name: 'versionInstr',
+    component:versionInstr,
+  },
+  {
+    path: '/updateDate',
+    name: 'updateDate',
+    component:updateDate,
+  }
 ];
 
 const router = new VueRouter({

src/views/HomeView.vue

@@ -16,6 +16,9 @@
           <router-link class="menu_left" to="/user-examine">
             <i class="el-icon-edit"></i>账号审核
           </router-link>
+          <router-link class="menu_left" to="/version-add">
+            <i class="el-icon-document-add"></i>版本添加
+          </router-link>
         </ul>
       </div>
       <div class="table-container">

src/views/examineDialog.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="dialog">
     <div class="dialog-header">
-      <!-- <img src="@/assets/可可乐博logo.jpg" alt="logo" class="search-icon" /> -->
       <div class="dialog-title">
         <h1>可可智慧教育平台账号申请</h1>
       </div>
@@ -9,18 +8,9 @@
         <div class="dialog-content">
           <div class="dialog-content-item">
             <div class="dialog-content-item-content1">
-              <span> 
-                <img
-                  src="@/assets/startIcon.svg"
-                  alt="字符"
-                  class="search-icon2"
-                />组织名称 </span>
-                <input
-                  v-model="orgName"
-                  type="text"
-                  placeholder="请输入组织名称"
-                  class="input"
-                />
+              <span>
+                <img src="@/assets/startIcon.svg" alt="字符" class="search-icon2" />组织名称 </span>
+              <input v-model="orgName" type="text" placeholder="请输入组织名称" class="input" />
               <!-- <el-select
                 v-loading="orgLoading"
                 v-model="orgName"
@@ -72,51 +62,24 @@
 
             <div class="dialog-content-item-content1">
               <span>
-                <img
-                  src="@/assets/startIcon.svg"
-                  alt="字符"
-                  class="search-icon2"
-                />
+                <img src="@/assets/startIcon.svg" alt="字符" class="search-icon2" />
                 姓名
               </span>
-              <input
-                v-model="Name"
-                type="text"
-                placeholder="请输入名称"
-                class="input"
-              />
+              <input v-model="Name" type="text" placeholder="请输入名称" class="input" />
             </div>
             <div class="dialog-content-item-content1">
               <span>
-                <img
-                  src="@/assets/startIcon.svg"
-                  alt="字符"
-                  class="search-icon2"
-                />
+                <img src="@/assets/startIcon.svg" alt="字符" class="search-icon2" />
                 账号
               </span>
-              <input
-                v-model="username"
-                type="text"
-                placeholder="请输入账号"
-                class="input"
-              />
+              <input v-model="username" type="text" placeholder="请输入账号" class="input" />
             </div>
             <div class="dialog-content-item-content1">
               <span>
-                <img
-                  src="@/assets/startIcon.svg"
-                  alt="字符"
-                  class="search-icon2"
-                />
+                <img src="@/assets/startIcon.svg" alt="字符" class="search-icon2" />
                 联系电话
               </span>
-              <input
-                v-model="phonenumber"
-                type="text"
-                placeholder="请输入联系电话"
-                class="input"
-              />
+              <input v-model="phonenumber" type="text" placeholder="请输入联系电话" class="input" />
             </div>
 
             <div class="dialog-content-item-content1">
@@ -124,12 +87,7 @@
               <p style="color: gray; font-size: 12px; margin-top: 10px">
                 此项用于审核认证，如有请说明。
               </p>
-              <input
-                v-model="remark"
-                type="text"
-                placeholder="请输入备注"
-                class="input"
-              />
+              <input v-model="remark" type="text" placeholder="请输入备注" class="input" />
             </div>
           </div>
         </div>
@@ -216,7 +174,7 @@ export default {
           if (res.data && res.data[0][0].success == 2) {
             this.$message.success("提交成功");
             this.reset()
-          }else if(res.data && res.data[0][0].success == 1){
+          } else if (res.data && res.data[0][0].success == 1) {
             this.$message.error("此账号已创建，具体登录原因请联系管理员");
           }
           console.log("返回的结果为：", res.data);
@@ -226,13 +184,13 @@ export default {
           console.error("请求失败，错误信息：", err);
         });
     },
-    reset(){
+    reset() {
       this.orgName = "";
       this.schoolName = "";
       this.Name = "";
       this.username = "";
       this.phonenumber = "";
-      this.remark = ""; 
+      this.remark = "";
     },
     //组织查询
     ajax_org() {
@@ -283,17 +241,17 @@ export default {
           console.error("请求失败，错误信息：", err);
         });
     },
-    orgChange(){
+    orgChange() {
       // this.schoolName = ""
       // this.ajax_school()
     },
-    schoolChange(){
-      for(var i = 0; i < this.schools.length; i++){
-        if(this.schools[i].id == this.schoolName && this.schools[i].org){
+    schoolChange() {
+      for (var i = 0; i < this.schools.length; i++) {
+        if (this.schools[i].id == this.schoolName && this.schools[i].org) {
           this.orgName = this.schools[i].org
         }
       }
-      
+
     }
   },
   mounted() {
@@ -336,6 +294,7 @@ body {
   height: 50px;
   margin-top: 30px;
 }
+
 .search-icon2 {
   width: 10px;
   height: 10px;
@@ -351,7 +310,7 @@ body {
   font-weight: 550;
 }
 
-.dialog-content-item-content1 + .dialog-content-item-content1 {
+.dialog-content-item-content1+.dialog-content-item-content1 {
   margin-top: 20px;
 }
 
@@ -367,7 +326,7 @@ body {
   outline: none;
 }
 
-.input >>> .el-input--suffix .el-input__inner{
+.input>>>.el-input--suffix .el-input__inner {
   padding: 0
 }
 
@@ -409,12 +368,41 @@ body {
 
 /* 使用 v-deep 深度选择器，修改 el-input 内部 input 的背景色 */
 ::v-deep .el-input__inner {
-  background-color: #f0f2f5 !important; /* 修改输入框的背景色 */
+  background-color: #f0f2f5 !important;
+  /* 修改输入框的背景色 */
   border: none;
 }
 
 /* 保持字体颜色不变，防止被覆盖 */
 ::v-deep .el-select .el-input__inner::placeholder {
-  color: gray; /* 修改为你想要的颜色，如番茄色。 */
+  color: gray;
+  /* 修改为你想要的颜色，如番茄色。 */
+}
+
+.dialog_success {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.confirmBtn {
+  width: 5vw;
+  height: 30px;
+  background-color: #3681fc;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  font-size: 14px;
+  cursor: pointer;
+  text-align: center;
+  margin-top: 10px;
+  outline: none;
+  line-height: 30px;
 }
 </style>

src/views/updateDate.vue

@@ -0,0 +1,458 @@
+<template>
+    <div class="DateUpda">
+        <div class="DateUpda_head">
+            <div class="head_title">
+                <img src="../assets/version.png" alt="">
+                <div style="font-size: 14px;">版本说明</div>
+            </div>
+        </div>
+        <div class="DateUpda_area">
+            <div class="Date_left">
+                <div class="D_l_title">
+                    <img src="../assets/left_arrow.png">
+                    <div class="D_l_text">更新日历</div>
+                </div>
+                <div class="D_l_content">
+                    <div class="D_l_head">
+                        <div class="head_left" :class="{ 'active': isSelectActive }">选择年份：
+                            <el-select v-model="value" placeholder="" style="width: 86px;" @focus="handleFocus" @blur=handleBlur>
+                                <el-option v-for="item in options" :key="item.value" :label="item.label"
+                                    :value="item.value">
+                                </el-option>
+                            </el-select>
+                        </div>
+                        <div class="head_right">
+                            <div @click="prevPage" :class="{ 'active': isPrevActive }" class="prevBtn">上一页</div>
+                            <div @click="nextPage" :class="{ 'active': isNextActive }" class="nextBtn">下一页</div>
+                        </div>
+                    </div>
+                    <div class="calendars">
+                        <div class="calendar" v-for="month in currentPageMonths" :key="month.month">
+                            <div class="month">{{ month.name }}</div>
+                            <div class="days">
+                                <div class="day " v-for="day in month.days" :key="day"
+                                    :class="{ highlight: isHighlighted(day, month.month) }"
+                                    @click="selectDate(day, month.month)">{{ day }}</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="Date_right">
+                <div class="last_update">最新更新日期：<div>{{ latestDate || '暂无数据' }}</div>
+                </div>
+                <div class="update_count">最高月更新频次：<div style="font-family: DIN Alternate;">
+                        {{ getMostUpdatedMonth.month ? `${getMostUpdatedMonth.month} 月 (${getMostUpdatedMonth.count} 次)`
+                        : '暂无数据' }}
+                    </div>
+                </div>
+                <div class="update_number">版本数量：<div style="font-family: DIN Alternate;">{{
+                    filteredHighlightDates.length }}</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import { API_CONFIG } from '@/common/apiConfig';
+import { mapGetters } from 'vuex';
+export default {
+    data() {
+        return {
+            options: [],
+            value: '',
+            months: [
+                { month: 1, name: '1月', days: [] },
+                { month: 2, name: '2月', days: [] },
+                { month: 3, name: '3月', days: [] },
+                { month: 4, name: '4月', days: [] },
+                { month: 5, name: '5月', days: [] },
+                { month: 6, name: '6月', days: [] },
+                { month: 7, name: '7月', days: [] },
+                { month: 8, name: '8月', days: [] },
+                { month: 9, name: '9月', days: [] },
+                { month: 10, name: '10月', days: [] },
+                { month: 11, name: '11月', days: [] },
+                { month: 12, name: '12月', days: [] }
+            ],
+            currentPage: 0,
+            isPrevActive: false,
+            isNextActive: false,
+            isSelectActive: false,
+            highlightDates: [],
+            datesData: [],
+            filteredData: [],
+            filteredHighlightDates: [], // 筛选后的高亮日期
+        }
+    },
+    computed: {
+        ...mapGetters(["userid"]),
+        totalPages() {
+            return Math.ceil(this.months.length / 6); // 计算总页数，每页6个月
+        },
+        currentPageMonths() {
+            const start = this.currentPage * 6;
+            const end = start + 6;
+            return this.months.slice(start, end); // 获取当前页显示的月份
+        },
+        latestDate() {
+            if (!this.filteredHighlightDates || this.filteredHighlightDates.length === 0) {
+                return null; // 如果没有高亮日期，返回 null
+            }
+            // 找到最新日期
+            const latestDate = new Date(
+                Math.max(...this.filteredHighlightDates.map(date => new Date(date)))
+            );
+
+            // 格式化日期为 'YYYY-MM-DD'
+            const year = latestDate.getFullYear();
+            const month = String(latestDate.getMonth() + 1).padStart(2, '0');
+            const day = String(latestDate.getDate()).padStart(2, '0');
+            return `${year}-${month}-${day}`;
+        },
+        getMostUpdatedMonth() {
+            if (!this.filteredHighlightDates || this.filteredHighlightDates.length === 0) {
+                return { month: null, count: 0 }; // 如果没有高亮日期，返回默认值
+            }
+
+            // 创建一个对象用于统计每个月的更新次数
+            const monthCounts = {};
+
+            this.filteredHighlightDates.forEach(date => {
+                const month = date.substring(5, 7); // 提取月份部分，例如 '03' 表示 3 月
+                monthCounts[month] = (monthCounts[month] || 0) + 1; // 累加该月份的计数
+            });
+
+            // 找到更新次数最多的月份
+            let maxCount = 0;
+            let mostUpdatedMonth = null;
+
+            for (const [month, count] of Object.entries(monthCounts)) {
+                if (count > maxCount) {
+                    maxCount = count;
+                    mostUpdatedMonth = month;
+                }
+            }
+
+            return { month: mostUpdatedMonth, count: maxCount }; // 返回更新次数最多的月份和次数
+        },
+    },
+    watch: {
+        value(newYear) {
+            if (newYear) {
+                this.generateMonths(); // 根据选择的年份生成月份天数
+                this.filterHighlightDates(); // 根据选择的年份筛选高亮日期
+            }
+        }
+    },
+    mounted() {
+        this.generateYears();
+        this.generateMonths();
+        this.getDate();
+
+    },
+    methods: {
+        generateYears() {
+            const currentYear = new Date().getFullYear(); // 获取当前年份
+            this.options = Array.from({ length: 5 }, (_, i) => {
+                const year = currentYear - i;
+                return { value: year.toString(), label: year.toString() };
+            });
+            this.value = currentYear.toString(); // 默认选择当前年份
+        },
+        generateMonths() {
+            const selectedYear = parseInt(this.value, 10); // 获取选择的年份
+            this.months.forEach(month => {
+                const daysInMonth = new Date(selectedYear, month.month, 0).getDate(); // 获取当前月的天数
+                month.days = Array.from({ length: daysInMonth }, (_, index) => index + 1); // 生成天数
+            });
+        },
+
+        filterHighlightDates() {
+            const selectedYear = this.value; // 当前选择的年份
+            this.filteredHighlightDates = this.highlightDates.filter(date => date.startsWith(selectedYear));
+        },
+        isHighlighted(day, month) {
+            // 将 day 转换为字符串格式的日期，例如 '2023-10-01'
+            const dateStr = `${this.value}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
+            return this.filteredHighlightDates.includes(dateStr);
+        },
+        prevPage() {
+            if (this.currentPage > 0) {
+                this.currentPage--;
+                this.isPrevActive = true;
+                this.isNextActive = false;
+            }
+        },
+        nextPage() {
+            if (this.currentPage < this.totalPages - 1) {
+                this.currentPage++;
+                this.isNextActive = true;
+                this.isPrevActive = false;
+            }
+        },
+        handleFocus() {
+            this.isSelectActive = true;
+
+        },
+        handleBlur() {
+            this.isSelectActive = false;
+        },
+        selectDate(day, month) {
+            const dateString = `${this.value}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`;
+
+            // 检查日期是否在 filteredHighlightDates 中
+            if (!this.filteredHighlightDates.includes(dateString)) {
+                console.log(`日期 ${dateString} 未高亮，无法跳转`);
+                return; // 如果日期未高亮，直接返回
+            }
+            const selectedData = this.datesData.find(item => item.update_at.startsWith(dateString));
+            this.$router.push(
+                {
+                    path: '/versionInstr',
+                    query: {
+                        id: selectedData.id,
+                        type: 1
+                    }
+                });
+
+        },
+        getDate() {
+            let params = [
+                {
+                    functionName: "getDates",
+                    uid: this.userid
+                }
+            ];
+            this.$ajax
+                .post(API_CONFIG.baseUrl, params)
+                .then((res) => {
+                    this.datesData = res.data[0];
+                    // console.log("👉", this.highlightDates);
+                    const type = this.$route.query.type;
+                    console.log("我是type", type);
+
+                    this.filteredData = this.datesData.filter(item => item.update_version === type);
+                    console.log("filteredData", this.filteredData);
+
+                    // 提取 update_at 字段并添加到 highlightDates 数组中
+                    this.highlightDates = this.filteredData.map(item => item.update_at.substring(0, 10));
+                    console.log("highlightDates", this.highlightDates);
+                    this.filterHighlightDates();
+                })
+                .catch((err) => {
+                    console.log(err);
+                });
+        }
+    },
+}
+</script>
+<style scoped>
+html,
+body {
+    overflow: hidden;
+    /* 禁止页面滚动 */
+}
+.DateUpda{
+    height: 100%;
+    overflow: hidden;
+}
+.DateUpda_area {
+    display: flex;
+    justify-content: space-between;
+    height: calc(100% - 54px); 
+}
+
+.DateUpda_head {
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid #E7E7E7;
+    justify-content: space-between;
+    height: 54px;
+    background-color: #fff;
+}
+
+.head_title {
+    display: flex;
+    margin-left: 23px;
+}
+
+.head_title img {
+    width: 16px;
+    height: 16px;
+    margin-right: 7px;
+}
+
+.Date_left {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    margin: 20px;
+}
+
+.D_l_title {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: 16px;
+    margin-top: 17px;
+}
+
+.D_l_text {
+    font-size: 36px;
+    font-weight: bold;
+    margin-left: 19px;
+}
+
+.el-icon-arrow-left {
+    font-size: 27px;
+    font-weight: bold;
+}
+
+.D_l_content {
+    width: 63vw;
+    border-radius: 10px;
+    background: #fff;
+    box-shadow: 0px 0px 13px #ccd7ed;
+    margin-top: 38px;
+}
+
+.Date_right {
+    background: #fff;
+    width: 34vw;
+    height: 100%;
+    border-left: 1px solid #dddada;
+}
+
+.last_update,
+.update_count,
+.update_number {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border: 1px solid black;
+    border-radius: 6px;
+    padding: 22px 17px;
+    margin: 27px 49px;
+    font-size: 14px;
+}
+
+.update_count div,
+.update_number div {
+    font-size: 48px;
+    font-weight: bold;
+    margin-left: 8px;
+}
+
+.D_l_head {
+    display: flex;
+    justify-content: space-between;
+    margin: 23px 41px;
+    margin-bottom: 5px;
+}
+
+.head_left {
+    margin-left: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    border: 1px solid #DCDFE6;
+    color: #c0c4cc;
+    border-radius: 6px;
+    padding: 0px 10px;
+    cursor: pointer;
+    width: 160px;
+    font-size: 14px;
+}
+
+.head_left.active {
+    border: 1px solid black;
+    color: black;
+}
+
+.head_right {
+    display: flex;
+}
+
+.prevBtn,
+.nextBtn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid #DCDFE6;
+    color: #c0c4cc;
+    border-radius: 6px;
+    padding: 5px 17px;
+    margin-right: 10px;
+    cursor: pointer;
+}
+
+.prevBtn.active {
+    border: 1px solid black;
+    color: black;
+}
+
+.nextBtn.active {
+    border: 1px solid black;
+    color: black;
+}
+
+.calendars {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    gap: 7px;
+    margin-bottom: 15px;
+}
+
+.calendar {
+    border-radius: 10px;
+    margin: 10px;
+}
+
+.month {
+    font-size: 18px;
+    font-weight: bold;
+    padding: 10px 0;
+}
+
+.days {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 15px;
+}
+
+.day {
+    width: 30px;
+    height: 30px;
+    background-color: #E2EEFF;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 5px;
+    font-size: 16px;
+    font-weight: bold;
+}
+
+.day.highlight {
+    background-color: #3681fc;
+    color: white;
+    cursor: pointer;
+}
+
+
+/* 使用深度选择器覆盖子组件样式 */
+::v-deep .el-input__inner {
+    border: none !important;
+    box-shadow: none !important;
+}
+
+::v-deep .el-select .el-input__inner {
+    color: black !important;
+}
+
+.head_left.active ::v-deep .el-select .el-input .el-select__caret {
+    color: black !important;
+    /* 激活状态下箭头颜色 */
+}
+</style>

src/views/versionInstr.vue

@@ -0,0 +1,205 @@
+<template>
+    <div class="version_instr">
+        <div class="version_head">
+            <div class="version_title">
+                <img src="../assets/version.png" alt="">
+                <div style="font-size: 14px;">{{ message }}</div>
+            </div>
+            <div class="versionBtn" @click="handleClick">
+                <div style="font-size: 14px;">{{ type === '1' ? '查看更新日历' : '返回' }}</div>
+                <img v-if="type === '1'" src="../assets/date.png" alt="">
+            </div>
+        </div>
+        <div class="version_middle">
+            <div class="v_m_title">{{ tableData[0].update_title }}</div>
+            <div class="v_m_instr">{{ tableData[0].update_desc }}</div>
+
+        </div>
+        <div class="version_content">
+            <div class="version_left">
+                <div style="font-size: 12px;">{{ tableData[0].update_at }}</div>
+                <div class="v_l_items">
+                    <div class="v_l_item" v-for="(tag, index) in tagNameArray" :key="index">{{ tag }}</div>
+                </div>
+
+            </div>
+            <div class="version_right">
+                <p style="font-size: 18px;margin-bottom: 8px;" v-for="(details, index) in formattedDetails"
+                    :key="index">{{ details }}</p>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import { API_CONFIG } from '@/common/apiConfig';
+import { mapGetters } from 'vuex';
+export default {
+    name: 'versionInstr',
+    data() {
+        return {
+            message: '版本说明',
+            type: this.$route.query.type,
+            id: this.$route.query.id,
+            tableData: [],
+
+        }
+    },
+    computed: {
+        ...mapGetters(["userid"]),
+        tagNameArray() {
+            // 将 tagName 字符串转换为数组
+            return this.tableData[0].tagName ? this.tableData[0].tagName.split(',').map(tag => tag.trim()) : [];
+        },
+        formattedDetails() {
+            // 检查 tableData 是否有数据，并按换行符分割 update_details
+            return this.tableData[0]?.update_details
+                ? this.tableData[0].update_details.split('\n')
+                : [];
+        }
+    },
+    mounted() {
+        this.getData();
+        console.log("👉", this.tableData[0]);
+
+    },
+    methods: {
+        getData() {
+            let params = [
+                {
+                    functionName: "getVersionInstr",
+                    uid: this.userid,
+                    id: this.id
+                }
+            ];
+            this.$ajax
+                .post(API_CONFIG.baseUrl, params)
+                .then((res) => {
+
+                    this.tableData = res.data[0];
+                    console.log("👉", this.tableData);
+
+                })
+                .catch((err) => {
+                    console.log(err);
+                });
+        },
+        formatDate(dateString) {
+            // 将字符串转换为 Date 对象
+            const date = new Date(dateString);
+            // 获取年份、月份和日期
+            const year = date.getFullYear();
+            const month = date.getMonth() + 1; // 月份从 0 开始，所以要加 1
+            const day = date.getDate();
+            // 返回格式化后的字符串
+            return `${year}年${month}月${day}日`;
+        },
+        handleClick() {
+            if (this.type === 1) {
+                this.$router.push('/updateDate');
+            } else {
+                // 处理返回操作，例如返回到上一个页面
+                this.$router.go(-1);
+            }
+        }
+    }
+}
+</script>
+<style scoped>
+.version_instr {
+    background-color: #fff;
+    height: 100%;
+}
+
+.version_head {
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid #E7E7E7;
+    justify-content: space-between;
+    height: 54px;
+}
+
+.version_title {
+    display: flex;
+    margin-left: 23px;
+}
+
+.version_title img {
+    width: 16px;
+    height: 16px;
+    margin-right: 7px;
+}
+
+.versionBtn {
+    gap: 5px;
+    display: flex;
+    border: 1px solid black;
+    padding: 11px;
+    border-radius: 5px;
+    margin-right: 23px;
+    cursor: pointer;
+}
+
+.version_middle {
+    border-bottom: 1px solid #E7E7E7;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 28px;
+}
+
+.v_m_title {
+    font-size: 56px;
+}
+
+.v_m_instr {
+    color: #00000099;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    /* 限制显示的行数 */
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: 31px;
+}
+
+.version_content {
+    display: flex;
+    margin: 39px 46px;
+    ;
+}
+
+.v_l_items {
+    display: flex;
+    gap: 13px;
+    flex-wrap: wrap;
+    margin-top: 10px;
+}
+
+.v_l_item {
+    padding: 2px 6px;
+    background: rgb(240, 244, 255);
+    color: rgb(51, 112, 255);
+    border-radius: 4px;
+    text-align: center;
+    font-size: 14px;
+    height: 20px;
+    line-height: 20px;
+    white-space: nowrap;
+    /* 禁止换行 */
+    overflow: hidden;
+    /* 超出部分隐藏 */
+    text-overflow: ellipsis;
+    cursor: pointer;
+    max-width: 165px;
+}
+
+.version_left {
+    max-width: 232px;;
+}
+
+.version_right {
+    margin-left: 65px;
+}
+
+
+</style>