Add technology stack management

2026-09-16 16:53:39 +08:00
parent e7ab83c564
commit 8f387b492b
8 changed files with 474 additions and 0 deletions
--- a/ruoyi-ui/src/api/app/techStack.js
+++ b/ruoyi-ui/src/api/app/techStack.js
@@ -0,0 +1,21 @@
+import request from '@/utils/request'
+
+export function listTechStack(query) {
+  return request({ url: '/app/techStack/list', method: 'get', params: query })
+}
+
+export function getTechStack(id) {
+  return request({ url: '/app/techStack/' + id, method: 'get' })
+}
+
+export function addTechStack(data) {
+  return request({ url: '/app/techStack', method: 'post', data })
+}
+
+export function updateTechStack(data) {
+  return request({ url: '/app/techStack', method: 'put', data })
+}
+
+export function delTechStack(ids) {
+  return request({ url: '/app/techStack/' + ids, method: 'delete' })
+}
--- a/ruoyi-ui/src/views/app/techStack/index.vue
+++ b/ruoyi-ui/src/views/app/techStack/index.vue
@@ -0,0 +1,155 @@
+<template>
+  <div class="app-container">
+    <el-form v-show="showSearch" ref="queryForm" :model="queryParams" size="small" :inline="true" label-width="80px">
+      <el-form-item label="技术栈" prop="name">
+        <el-input v-model="queryParams.name" placeholder="请输入技术栈名称" clearable @keyup.enter.native="handleQuery" />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="全部状态" clearable>
+          <el-option label="启用" value="0" />
+          <el-option label="停用" value="1" />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button v-hasPermi="['app:techStack:add']" type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button v-hasPermi="['app:techStack:edit']" type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate()">修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button v-hasPermi="['app:techStack:remove']" type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete()">删除</el-button>
+      </el-col>
+      <right-toolbar :show-search.sync="showSearch" @queryTable="getList" />
+    </el-row>
+
+    <el-table v-loading="loading" :data="techStackList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="技术栈名称" prop="name" min-width="220" />
+      <el-table-column label="排序" prop="sort" width="100" align="center" />
+      <el-table-column label="状态" width="100" align="center">
+        <template slot-scope="scope">
+          <el-tag :type="scope.row.status === '0' ? 'success' : 'info'" size="small">{{ scope.row.status === '0' ? '启用' : '停用' }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="备注" prop="remark" min-width="240" show-overflow-tooltip />
+      <el-table-column label="更新时间" prop="updateTime" width="165" />
+      <el-table-column label="操作" width="140" align="center" fixed="right">
+        <template slot-scope="scope">
+          <el-button v-hasPermi="['app:techStack:edit']" type="text" icon="el-icon-edit" size="mini" @click="handleUpdate(scope.row)">修改</el-button>
+          <el-button v-hasPermi="['app:techStack:remove']" type="text" icon="el-icon-delete" size="mini" @click="handleDelete(scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+
+    <el-dialog :title="title" :visible.sync="open" width="520px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="90px">
+        <el-form-item label="技术栈名称" prop="name">
+          <el-input v-model="form.name" maxlength="50" show-word-limit placeholder="例如：UniApp + Spring Boot" />
+        </el-form-item>
+        <el-form-item label="显示排序" prop="sort">
+          <el-input-number v-model="form.sort" :min="0" :max="9999" controls-position="right" />
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-radio-group v-model="form.status">
+            <el-radio label="0">启用</el-radio>
+            <el-radio label="1">停用</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" type="textarea" :rows="3" maxlength="500" show-word-limit placeholder="可填写适用场景" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确定</el-button>
+        <el-button @click="cancel">取消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { addTechStack, delTechStack, getTechStack, listTechStack, updateTechStack } from '@/api/app/techStack'
+
+export default {
+  name: 'TechStack',
+  data() {
+    return {
+      loading: false,
+      showSearch: true,
+      ids: [],
+      single: true,
+      multiple: true,
+      total: 0,
+      techStackList: [],
+      open: false,
+      title: '',
+      queryParams: { pageNum: 1, pageSize: 10, name: undefined, status: undefined },
+      form: {},
+      rules: {
+        name: [{ required: true, message: '请输入技术栈名称', trigger: 'blur' }],
+        sort: [{ required: true, message: '请输入显示排序', trigger: 'blur' }],
+        status: [{ required: true, message: '请选择状态', trigger: 'change' }]
+      }
+    }
+  },
+  created() { this.getList() },
+  methods: {
+    getList() {
+      this.loading = true
+      listTechStack(this.queryParams).then(response => {
+        this.techStackList = response.rows || []
+        this.total = response.total || 0
+      }).finally(() => { this.loading = false })
+    },
+    reset() {
+      this.form = { id: undefined, name: '', sort: 0, status: '0', remark: '' }
+      this.resetForm('form')
+    },
+    cancel() { this.open = false; this.reset() },
+    handleQuery() { this.queryParams.pageNum = 1; this.getList() },
+    resetQuery() { this.resetForm('queryForm'); this.handleQuery() },
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id)
+      this.single = selection.length !== 1
+      this.multiple = !selection.length
+    },
+    handleAdd() { this.reset(); this.title = '新增技术栈'; this.open = true },
+    handleUpdate(row) {
+      this.reset()
+      const id = row && row.id ? row.id : this.ids[0]
+      getTechStack(id).then(response => {
+        this.form = response.data
+        this.title = '修改技术栈'
+        this.open = true
+      })
+    },
+    submitForm() {
+      this.$refs.form.validate(valid => {
+        if (!valid) return
+        const request = this.form.id ? updateTechStack(this.form) : addTechStack(this.form)
+        request.then(() => {
+          this.$modal.msgSuccess(this.form.id ? '修改成功' : '新增成功')
+          this.open = false
+          this.getList()
+        })
+      })
+    },
+    handleDelete(row) {
+      const ids = row && row.id ? row.id : this.ids
+      this.$modal.confirm('确认删除选中的技术栈吗？历史需求中的技术栈名称不会受影响。').then(() => delTechStack(ids)).then(() => {
+        this.$modal.msgSuccess('删除成功')
+        this.getList()
+      }).catch(() => {})
+    }
+  }
+}
+</script>