需求清单---增删改查

api/system/require.js

@@ -42,3 +42,10 @@ export function delRequire(id) {
     method: 'delete'
   })
 }
+export function delRequires(ids) {
+    return request({
+        url: '/system/require/remove',
+        method: 'delete',
+        data: ids
+    })
+}

pages/mine/require/index.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="container">
     <view class="form-container">
-      <uni-section title="基础卡片" type="line" >
+      <uni-section title="基础卡片" type="line">
         <!-- 基础表单校验：缩小字体+一行两列布局 -->
         <uni-forms
             ref="valiForm"
@@ -12,18 +12,16 @@
         >
           <!-- 一行两列布局容器 -->
           <view class="form-row">
-            <uni-forms-item label="标题:" name="name" class="form-item">
+            <uni-forms-item label="标题:" name="title" class="form-item">
               <uni-easyinput
                   v-model="form.title"
                   placeholder="请输入标题搜索"
-                  
               />
             </uni-forms-item>
-            <uni-forms-item label="详情:" label-width="35px" name="age" class="form-item">
+            <uni-forms-item label="详情:" label-width="35px" name="detail" class="form-item">
               <uni-easyinput
                   v-model="form.detail"
                   placeholder="请输入详情搜索"
-                  
               />
             </uni-forms-item>
           </view>
@@ -33,15 +31,13 @@
             <uni-forms-item label="优先级:" name="priority" class="form-item">
               <uni-data-select
                   v-model="form.priority"
-                  :localdata="range"
+                  :localdata="priorityList"
-                  
               />
             </uni-forms-item>
             <uni-forms-item label="进度:" label-width="35px" name="progress" class="form-item">
               <uni-data-select
                   v-model="form.progress"
-                  :localdata="range"
+                  :localdata="progressList"
-                  
               />
             </uni-forms-item>
           </view>
@@ -49,26 +45,32 @@
 
         <view class="btn-group">
           <view class="btn-left">
-
+            <!-- 新增按钮：点击打开弹窗 -->
             <button
                 class="iconfont icon-add mini-btn add-btn"
-              @click="submit('form')"
+                @click="openDialog('add')"
                 hover-class="is-hover"
                 type="default"
                 size="mini"
             > 新增</button>
 
+            <!-- 删除按钮：未选中数据时禁用 -->
             <button
                 class="iconfont icon-ashbin mini-btn del-btn"
                 hover-class="is-hover"
                 type="default"
                 size="mini"
+                :disabled="selectedIndexs.length === 0"
+                @click="batchDel"
             > 删除</button>
+            <!-- 编辑按钮：未选中数据时禁用 -->
             <button
                 class="iconfont icon-edit mini-btn edit-btn"
                 hover-class="is-hover"
                 type="default"
                 size="mini"
+                :disabled="selectedIndexs.length === 0"
+                @click="openDialog('edit')"
             > 编辑</button>
           </view>
 
@@ -78,6 +80,7 @@
                 hover-class="is-hover"
                 type="default"
                 size="mini"
+                @click="search"
             > 查询</button>
           </view>
         </view>
@@ -94,35 +97,36 @@
           type="selection"
           emptyText="暂无更多数据"
           @selection-change="selectionChange"
-          style="width: 100%; font-size: 11px;"
+          style="width: 100%;"
           :border-width="1"
       >
         <uni-tr>
-          <uni-th align="center" style="width: auto; height: 18px; line-height: 18px; font-size: 11px;">选择</uni-th>
+          <uni-th align="center" class="ui-th" sortable width="200rpx" @sort-change="idSort">需求单号</uni-th>
-          <uni-th align="center" style="width: auto; height: 18px; line-height: 18px; font-size: 11px;">需求标题</uni-th>
+          <uni-th align="center"  width="200rpx" class="ui-th">需求标题</uni-th>
-          <uni-th align="center" style="width: auto; height: 18px; line-height: 18px; font-size: 11px;">需求详情</uni-th>
+          <uni-th align="center" width="240rpx" class="ui-th">需求详情</uni-th>
-          <uni-th align="center" style="width: auto; height: 18px; line-height: 18px; font-size: 11px;">优先级</uni-th>
+          <uni-th align="center" width="140rpx" @sort-change="prioritySort" sortable class="ui-th">优先级</uni-th>
-          <uni-th align="center" style="width: auto; height: 18px; line-height: 18px; font-size: 11px;">进度</uni-th>
+          <uni-th align="center" width="140rpx" class="ui-th">进度</uni-th>
-          <uni-th align="center" style="width: auto; height: 18px; line-height: 18px; font-size: 11px;">需求类型</uni-th>
+          <uni-th align="center" width="200rpx" class="ui-th">需求类型</uni-th>
-          <uni-th align="center" style="width: auto; height: 18px; line-height: 18px; font-size: 11px;">经办人名称</uni-th>
+          <uni-th align="center" width="200rpx" class="ui-th">经办人名称</uni-th>
-          <uni-th align="center" style="width: auto; height: 18px; line-height: 18px; font-size: 11px;">操作</uni-th>
+          <uni-th align="center" class="ui-th">操作</uni-th>
         </uni-tr>
         <uni-tr v-for="(item, index) in tableData" :key="index" style="height: 30px; line-height: 30px;">
-          <uni-td style="width: auto; padding: 1px 0; font-size: 11px;">
+
-            <uni-checkbox :value="index" @change="(e) => handleCheckboxChange(e, index)"></uni-checkbox>
+          <uni-td style="padding: 1px 0; font-size: 13px;">{{ item.id }}</uni-td>
-          </uni-td>
+          <uni-td style="padding: 1px 0; font-size: 13px;">{{ item.title }}</uni-td>
-          <uni-td style="width: auto; padding: 1px 0; font-size: 11px;">{{ item.title }}</uni-td>
+          <uni-td style="padding: 1px 0; font-size: 13px;">
-          <uni-td style="width: auto; padding: 1px 0; font-size: 11px;">
             <view class="name">{{ item.detail }}</view>
           </uni-td>
-          <uni-td align="center" style="width: auto; padding: 1px 0; font-size: 11px;">{{ item.priority }}</uni-td>
+          <uni-td align="center" style=" padding: 1px 0; font-size: 13px;">{{ item.priority }}</uni-td>
-          <uni-td align="center" style="width: auto; padding: 1px 0; font-size: 11px;">{{ item.progress }}</uni-td>
+          <uni-td align="center" style=" padding: 1px 0; font-size: 13px;">{{ item.progress }}</uni-td>
-          <uni-td align="center" style="width: auto; padding: 1px 0; font-size: 11px;">{{ item.reqType }}</uni-td>
+          <uni-td align="center" style=" padding: 1px 0; font-size: 13px;">{{ item.reqType }}</uni-td>
-          <uni-td align="center" style="width: auto; padding: 1px 0; font-size: 11px;">{{ item.assigneeName }}</uni-td>
+          <uni-td align="center" style=" padding: 1px 0; font-size: 13px;">{{ item.assigneeName }}</uni-td>
-          <uni-td style="width: auto; padding: 1px 0; font-size: 11px;">
+          <uni-td style="width: auto; padding: 1px 0; font-size: 13px;">
             <view class="uni-group">
-              <button class="uni-button" size="mini" type="primary" style="padding: 1px 6px; font-size: 10px;">修改</button>
+              <!-- 行内修改按钮：点击打开编辑弹窗 -->
-              <button class="uni-button" size="mini" type="warn" style="padding: 1px 6px; font-size: 10px; margin-left: 3px;">删除</button>
+              <button  size="mini" type="primary" style="padding: 1px 6px; font-size: 10px;" @click="openDialog('edit', item)">修改</button>
+              <!-- 行内删除按钮：点击单行删除 -->
+              <button  size="mini" type="warn" style="padding: 1px 6px; font-size: 10px;" @click="delSingle(item)">删除</button>
             </view>
           </uni-td>
         </uni-tr>
@@ -130,14 +134,85 @@
       <view class="uni-pagination-box" style="margin-top: 8px;">
         <uni-pagination
             show-icon
-            :page-size="pageSize"
+            :page-size="form.pageSize"
-            :current="pageCurrent"
+            :current="form.pageNum"
             :total="total"
             @change="change"
             style="font-size: 11px;"
         />
       </view>
     </view>
+
+    <!-- 新增/修改弹窗 -->
+    <uni-popup ref="formDialog" type="center" :mask-click="false">
+      <view class="dialog-container">
+        <view class="dialog-title">{{ dialogType === 'add' ? '新增需求' : '编辑需求' }}</view>
+        <!-- 弹窗表单 -->
+        <uni-forms
+            ref="dialogForm"
+            label-width="65px"
+            label-position="left"
+            :modelValue="dialogFormData"
+            :rules="formRules"
+            style="padding: 10rpx;"
+        >
+          <!-- 需求标题（必填） -->
+          <uni-forms-item label="需求标题：" name="title" required>
+            <uni-easyinput
+                v-model="dialogFormData.title"
+                placeholder="请输入需求标题"
+                style="font-size: 12px;"
+            />
+          </uni-forms-item>
+          <!-- 详情（必填） -->
+          <uni-forms-item label="详情：" name="detail" required>
+            <uni-easyinput
+                v-model="dialogFormData.detail"
+                type="textarea"
+                placeholder="请输入需求详情"
+                style="font-size: 12px; height: 100px;"
+            />
+          </uni-forms-item>
+          <!-- 优先级（下拉框，默认高） -->
+          <uni-forms-item label="优先级：" name="priority">
+            <uni-data-select
+                v-model="dialogFormData.priority"
+                :localdata="priorityList"
+                style="font-size: 12px;"
+            />
+          </uni-forms-item>
+          <!-- 进度（下拉框） -->
+          <uni-forms-item label="进度：" name="progress">
+            <uni-data-select
+                v-model="dialogFormData.progress"
+                :localdata="progressList"
+                style="font-size: 12px;"
+            />
+          </uni-forms-item>
+          <!-- 需求类型（下拉框） -->
+          <uni-forms-item label="需求类型：" name="reqType">
+            <uni-data-select
+                v-model="dialogFormData.reqType"
+                :localdata="reqTypeList"
+                style="font-size: 12px;"
+            />
+          </uni-forms-item>
+          <!-- 经办人（可选输入框） -->
+          <uni-forms-item label="经办人：" name="assigneeName">
+            <uni-easyinput
+                v-model="dialogFormData.assigneeName"
+                placeholder="请输入经办人名称"
+                style="font-size: 12px;"
+            />
+          </uni-forms-item>
+        </uni-forms>
+        <!-- 弹窗按钮 -->
+        <view class="dialog-btn-group">
+          <button class="cancel-btn" @click="closeDialog">取消</button>
+          <button class="confirm-btn" @click="submitDialog">确定</button>
+        </view>
+      </view>
+    </uni-popup>
   </view>
 </template>
 
@@ -145,28 +220,72 @@
 import UniTh from "../../../uni_modules/uni-table/components/uni-th/uni-th.vue";
 import UniTr from "../../../uni_modules/uni-table/components/uni-tr/uni-tr.vue";
 import UniTd from "../../../uni_modules/uni-table/components/uni-td/uni-td.vue";
-import UniPagination from "../../../uni_modules/uni-pagination/components/uni-pagination/uni-pagination.vue";
+import {addRequire, delRequire, delRequires, listRequire, updateRequire} from "../../../api/system/require";
-import { listRequire } from "../../../api/system/require";
 import UniTable from "../../../uni_modules/uni-table/components/uni-table/uni-table.vue";
+import UniPopup from "../../../uni_modules/uni-popup/components/uni-popup/uni-popup.vue";
+import UniForms from "../../../uni_modules/uni-forms/components/uni-forms/uni-forms.vue";
+import UniFormsItem from "../../../uni_modules/uni-forms/components/uni-forms-item/uni-forms-item.vue";
+import UniEasyinput from "../../../uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue";
+import UniDataSelect from "../../../uni_modules/uni-data-select/components/uni-data-select/uni-data-select.vue";
 
 export default {
-  components: {UniTable, UniPagination, UniTd, UniTr, UniTh },
+  components: {
+    UniTable, UniTd, UniTr, UniTh,
+    UniPopup, UniForms, UniFormsItem, UniEasyinput, UniDataSelect
+  },
   data() {
     return {
       searchVal: '',
       tableData: [],
-      pageSize: 10,
-      pageCurrent: 1,
       total: 0,
-      range:[],
+      // 优先级下拉选项
+      priorityList: [
+        { value: 0, text: '高' },
+        { value: 1, text: '中' },
+        { value: 2, text: '低' }
+      ],
+      // 进度下拉选项
+      progressList: [
+        { value: 0, text: '未完成' },
+        { value: 1, text: '进行中' },
+        { value: 2, text: '已完成' }
+      ],
+      // 需求类型下拉选项（可根据实际需求补充）
+      reqTypeList: [
+        { value: 0, text: '功能需求' },
+        { value: 1, text: '优化需求' },
+        { value: 2, text: 'BUG修复' }
+      ],
       form: {
-        title:null,
+        title: null,
-        detail:null,
+        detail: null,
-        priority:null,
+        priority: null,
-        progress: null
+        progress: null,
+        pageNum: 1,
+        pageSize: 10
       },
       loading: false,
-      selectedIndexs: [] // 已选择的行索引
+      selectedIndexs: [], // 已选择的行索引
+      // 弹窗相关
+      dialogType: 'add', // add-新增 edit-编辑
+      dialogFormData: {
+        title: '',
+        detail: '',
+        priority: 0, // 默认高
+        progress: 0,
+        reqType: '',
+        assigneeName: ''
+      },
+      // 表单校验规则
+      formRules: {
+        title: {
+          rules: [{ required: true, errorMessage: '请输入需求标题' }]
+        },
+        detail: {
+          rules: [{ required: true, errorMessage: '请输入需求详情' }]
+        }
+      },
+      currentEditItem: null // 当前编辑的行数据
     }
   },
   onLoad() {
@@ -177,20 +296,53 @@ export default {
     selectedItems() {
       return this.selectedIndexs.map(i => this.tableData[i])
     },
-    // 多选（修复参数传递）
+    // 补充selection-change事件
-    handleCheckboxChange(e, index) {
+    selectionChange(e) {
-      if (e.detail.value) {
+      this.selectedIndexs = e.detail.index
-        // 去重处理
+      console.info(e)
-        if (!this.selectedIndexs.includes(index)) {
-          this.selectedIndexs.push(index)
-        }
-      } else {
-        this.selectedIndexs = this.selectedIndexs.filter(item => item !== index)
-      }
     },
+    idSort(e) {
+      if (e["order"] === 'descending') {
+        this.tableData.sort((a, b) => b.id - a.id);
+        return;
+      }
+      this.tableData.sort((a, b) => a.id - b.id);
+    },
+    prioritySort(e) {
+      if (e.order === 'descending') {
+        this.tableData.sort((a, b) => b.priority - a.priority);
+        return;
+      }
+      this.tableData.sort((a, b) => a.priority - b.priority);
+    },
+    // ========== 删除相关方法 ==========
     // 批量删除
-    delTable() {
+    batchDel() {
-      console.log(this.selectedItems())
+      const selectedItems = this.selectedItems()
+      if (selectedItems.length === 0) {
+        uni.showToast({ title: '请选择要删除的数据', icon: 'none' })
+        return
+      }
+      const selectedIds = selectedItems.map(item => Number(item.id))
+          .filter(id => id !== undefined && id !== null && id !== '');
+
+      uni.showModal({
+        title: '提示',
+        content: `确定要删除选中的${selectedItems.length}条数据吗？`,
+        success: (res) => {
+          if (res.confirm) {
+            delRequires(selectedIds).then((response) => {
+              if (response.code === 200) {
+                uni.showToast({ title: '批量删除成功', icon: 'success' })
+              } else {
+                uni.showToast({ title: '批量删除失败', icon: 'error' })
+              }
+              this.getData()
+              this.selectedIndexs=[]
+            })
+          }
+        }
+      })
     },
     // 分页触发
     change(e) {
@@ -201,19 +353,11 @@ export default {
     search() {
       this.getData()
     },
-    submit(form) {
-      console.info(form)
-    },
     // 获取数据
-    getData(pageCurrent) {
+    getData(pageNum) {
       this.loading = true
-      this.pageCurrent = pageCurrent || this.pageCurrent
+      this.form.pageNum = pageNum || this.form.pageNum
-      const queryParams = {
+      listRequire(this.form).then(response => {
-        imei: this.imei,
-        pageNum: this.pageCurrent,
-        pageSize: this.pageSize,
-      }
-      listRequire(queryParams).then(response => {
         if (response.code === 200 && response.rows) {
           this.tableData = response.rows
           this.total = response.total
@@ -224,9 +368,93 @@ export default {
         this.loading = false
       })
     },
-    // 补充selection-change事件
+
-    selectionChange(e) {
+
-      console.log('表格选中项:', e)
+    // ========== 弹窗相关方法 ==========
+    // 打开弹窗
+    openDialog(type, item = null) {
+      this.dialogType = type
+      // 重置表单
+      this.dialogFormData = {
+        title: '',
+        detail: '',
+        priority: 0,
+        progress: 0,
+        reqType: '',
+        assigneeName: ''
+      }
+      // 编辑模式：回显数据
+      if (type === 'edit') {
+        // 批量编辑取第一个选中项，行内编辑取传入的item
+        const editItem = item || this.selectedItems()[0]
+        if (editItem) {
+          this.currentEditItem = editItem
+          this.dialogFormData = { ...editItem }
+        } else {
+          uni.showToast({ title: '请选择要编辑的数据', icon: 'none' })
+          return
+        }
+      }
+      // 打开弹窗
+      this.$refs.formDialog.open()
+    },
+    // 关闭弹窗
+    closeDialog() {
+      this.$refs.formDialog.close()
+      // 重置表单校验
+      this.$refs.dialogForm.clearValidate()
+    },
+    // 提交弹窗表单
+    submitDialog() {
+      // 表单校验
+      this.$refs.dialogForm.validate().then(() => {
+        if (this.dialogType === 'add') {
+          addRequire(this.dialogFormData).then(response => {
+            if (response.code===200) {
+              this.$modal.msgSuccess("新增成功")
+            } else {
+              this.$modal.msgError("新增失败")
+            }
+            this.getData()
+          })
+        } else {
+          updateRequire(this.dialogFormData).then(response => {
+            if (response.code===200) {
+              this.$modal.msgSuccess("修改成功")
+            } else {
+              this.$modal.msgError("修改失败")
+            }
+            this.getData()
+          })
+        }
+        // 关闭弹窗并刷新数据
+        this.closeDialog()
+
+      }).catch(err => {
+        console.error('表单校验失败:', err)
+      })
+    },
+
+
+    // 单行删除
+    delSingle(item) {
+      uni.showModal({
+        title: '提示',
+        content: '确定要删除这条数据吗？',
+        success: (res) => {
+          if (res.confirm) {
+            delRequire(item.id).then(response => {
+              if (response.code === 200) {
+                uni.showToast({title: '删除成功', icon: 'success'})
+              } else {
+                uni.showToast({title: '删除失败', icon: 'success'})
+              }
+            })
+            this.getData()
+            this.selectedIndexs=[]
+          }
+        }
+      })
     }
   }
 }
@@ -320,7 +548,6 @@ page {
   height: 30px;
 }
 
-
 .form-item {
   display: flex;
   align-items: center;
@@ -329,5 +556,56 @@ page {
   margin: 0 !important; /* 清除默认间距 */
 }
 
+/* 弹窗样式 */
+.dialog-container {
+  background: #fff;
+  border-radius: 10rpx;
+  padding: 20rpx;
+  width: 600rpx;
+}
 
+.dialog-title {
+  font-size: 16px;
+  font-weight: bold;
+  text-align: center;
+  padding: 10rpx 0;
+  border-bottom: 1px solid #eee;
+  margin-bottom: 10rpx;
+}
+
+.dialog-btn-group {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 20rpx;
+  gap: 10rpx;
+}
+
+/* 禁用按钮样式 */
+/deep/ button[disabled] {
+  background-color: #e5e5e5 !important;
+  color: #999 !important;
+  border-color: #ddd !important;
+}
+/deep/ .uni-forms-item {
+  margin-bottom: 12rpx;
+}
+
+/deep/ .uni-table-td {
+  text-align: center !important;
+}
+.ui-th {
+  width: auto; 
+  height: 18px; 
+  line-height: 18px; 
+  font-size: 13px;
+}
+.ui-th:last-child {
+  width: 160rpx;
+}
+/deep/ .uni-table-th {
+  padding: 16rpx 5rpx;
+}
+.uni-group button:last-child {
+  margin-left: 0;
+}
 </style>

static/scss/global.scss

@@ -112,6 +112,8 @@
 .del-btn { color: #71e2a3 !important; background: #e7faf0 !important; border-color: #d0f5e0 !important; }
 /* 编辑按钮 */
 .edit-btn { color: #ff9292 !important; background: #ffeded !important; border-color: #ffdbdb !important; }
+.cancel-btn { color: #333 !important; background: #f5f5f5 !important; border-color: #f5f5f5 !important; height: 55rpx; line-height: 55rpx; font-size: 14px !important; }
+.confirm-btn { color: #fff !important; background: #1890ff !important; border-color: #1890ff !important; height: 55rpx; line-height: 55rpx; font-size: 14px !important; }
 
 /* hover统一样式 */
 .is-hover {