团队赛队员配置修改

jeecgboot-vue3-master/src/views/annualCompPoint/committee/components/AnnualCompPointForm.vue

@@ -302,14 +302,27 @@
     @register="register"
     title="Modal Title"
   >
-    <div  v-for="(item,index) in num" :key="index">
+<!--    <div  v-for="(item,index) in num" :key="index">-->
-      <a-input-number v-model="item.index"></a-input-number>
+<!--      <a-input-number v-model="item.index"></a-input-number>-->
-      <a-input-number v-model="item.value"></a-input-number>
+<!--      <a-input-number v-model="item.value"></a-input-number>-->
-      <a-button @click="delNum(index)">删除</a-button>
+<!--      <a-button @click="delNum(index)">删除</a-button>-->
-    </div>
+<!--    </div>-->
-    <a-button type="primary" @click="addNum" class="mr-2">从内部关闭弹窗</a-button>
+<!--    <a-button type="primary" @click="addNum" class="mr-2">从内部关闭弹窗</a-button>-->
 
-    <a-button type="primary" @click="setModalProps">从内部修改title</a-button>
+<!--    <a-button type="primary" @click="setModalProps">从内部修改title</a-button>-->
+    <JVxeTable
+      ref="tableRef"
+      stripe
+      toolbar
+      rowNumber
+      rowSelection
+      rowExpand
+      resizable
+      :maxHeight="480"
+      :columns="columns"
+      :dataSource="dataSource"
+      @save="handleTableSave"
+    />
   </BasicModal>
 </template>
 
@@ -325,6 +338,78 @@ import JPopup from '/@/components/Form/src/jeecg/components/JPopup.vue';
 import {getValueType} from '/@/utils';
 import {saveOrUpdate, getProjectlevel} from '../AnnualCompPoint.api';
 import {Form} from 'ant-design-vue';
+import { JVxeTable } from '/@/components/jeecg/JVxeTable';
+import { JVxeTypes, JVxeColumn} from '/@/components/jeecg/JVxeTable/types';
+const dataSource = ref([])
+const columns = ref<any>([
+  {
+    title: '单行文本',
+    key: 'input',
+    type: JVxeTypes.input,
+    width: 180,
+    defaultValue: '',
+    placeholder: '请输入${title}',
+    validateRules: [
+      {
+        required: true, // 必填
+        message: '请输入${title}', // 显示的文本
+      },
+      {
+        pattern: /^[a-z|A-Z][a-z|A-Z\d_-]*$/, // 正则
+        message: '必须以字母开头，可包含数字、下划线、横杠',
+      },
+      {
+        unique: true,
+        message: '${title}不能重复',
+      },
+      {
+        handler({ cellValue, row, column }, callback, target) {
+          // cellValue 当前校验的值
+          // callback(flag, message) 方法必须执行且只能执行一次
+          //          flag = 是否通过了校验，不填写或者填写 null 代表不进行任何操作
+          //          message = 提示的类型，默认使用配置的 message
+          // target 行编辑的实例对象
+          if (cellValue === 'abc') {
+            callback(false, '${title}不能是abc')  // false = 未通过校验
+          } else {
+            callback(true) // true = 通过验证
+          }
+        },
+        message: '${title}默认提示',
+      },
+    ],
+  },
+])
+function handleTableSave({ $table, target }) {
+  // 校验整个表格
+  $table.validate().then((errMap) => {
+    // 校验通过
+    if (!errMap) {
+      // 获取所有数据
+      let tableData = target.getTableData();
+      console.log('当前保存的数据是：', tableData);
+      // 获取新增的数据
+      let newData = target.getNewData();
+      console.log('-- 新增的数据：', newData);
+      // 获取删除的数据
+      let deleteData = target.getDeleteData();
+      console.log('-- 删除的数据：', deleteData);
+      // 【模拟保存】
+      loading.value = true;
+      defHttp
+        .post({
+          url: Api.saveAll,
+          params: tableData,
+        })
+        .then(() => {
+          createMessage.success(`保存成功！`);
+        })
+        .finally(() => {
+          loading.value = false;
+        });
+    }
+  });
+}
 const props = defineProps({
   // objLevelll: { type: Array, default: () => [] },
   formDisabled: {type: Boolean, default: false},