pblUserManage/src/components/versionAdd.vue

<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>