✨ feat<任务管理>: 增加输入内容自动补全功能

src/views/reportManage/TaskManage/api.ts

@@ -49,3 +49,11 @@ export function getOperationSelect(query) {
     params: query,
   });
 }
+
+export function getCurrencyCodeSelect(query) {
+  return request({
+    url: '/api/report_manage/summary-tasks/currency_code_select/',
+    method: 'GET',
+    params: query,
+  });
+}

src/views/reportManage/TaskManage/index.vue

@@ -7,11 +7,14 @@ import {
   postCreateTask,
   getOperationSelect,
   postUpdateTask,
-  postDeleteTask
+  postDeleteTask,
+  getCurrencyCodeSelect
 } from '/src/views/reportManage/TaskManage/api.ts';
 import { ComponentSize, ElMessage, FormInstance, FormRules } from 'element-plus';
 import { Plus, Delete } from '@element-plus/icons-vue';
 
+const selectorRef = ref(null);
+
 //表单
 interface taskRuleForm {
   number: string;
@@ -48,6 +51,7 @@ const rules = reactive<FormRules>({
   currency: [{required: true, message: '请输入回款/余额币种', trigger: 'blur'}],
   currencyCodePlatform: [{required: true, message: '请输入平台货币', trigger: 'blur'}],
 });
+const currencyList = ref([]);
 
 //表格
 interface RowVO {
@@ -100,6 +104,7 @@ const gridOptions = reactive<VxeGridProps<RowVO>>({
     trigger: 'manual',
     mode: 'row',
     showStatus: true,
+    autoClear: false,
   },
   checkboxConfig: {
     reserve: true,
@@ -145,7 +150,7 @@ const gridEvents: VxeGridListeners<RowVO> = {
 
 async function fetchAllTasks(page = 1, limit = 100) {
   try {
-    const response = await getTasks({ page, limit });
+    const response = await getTasks({page, limit});
     allTasks = allTasks.concat(response.data);
 
     if (response.data.length === limit) {
@@ -177,8 +182,6 @@ async function getTaskList(filters = {}) {
 }
 
 
-const selectorRef = ref(null);
-
 function filteredDataChange(newList) {
   if (selectorRef.value) {
     // 重置页码到第一页
@@ -346,11 +349,12 @@ async function createTask() {
     const resp = await postCreateTask(body);
     if (resp.code === 2000) {
       dialogFormVisible.value = false;
+      gridOptions.data.push(body);
       await getTaskList(); // 重新获取任务列表
-      ElMessage({message: '创建成功', type: 'success',})
+      ElMessage({message: '创建成功', type: 'success',});
     }
   } catch (error) {
-    ElMessage({message: '创建失败', type: 'error',})
+    ElMessage({message: '创建失败', type: 'error',});
   }
 }
 
@@ -360,7 +364,7 @@ const submitForm = async (formEl: FormInstance | undefined) => {
     if (valid) {
       const isDuplicate = allTasks.some(task => String(task.platformNumber) === String(taskRuleForm.number));
       if (isDuplicate) {
-        await ElMessage({message: '平台编号已存在，请重新输入', type: 'warning',})
+        await ElMessage({message: '平台编号已存在，请重新输入', type: 'warning',});
         return;
       }
       await createTask();
@@ -385,9 +389,44 @@ async function fetchOperationSelect() {
   }
 }
 
+async function fetchCurrencyList() {
+  try {
+    const response = await getCurrencyCodeSelect(); // 替换为你的后端接口
+    currencyList.value = response.data;
+  } catch (error) {
+    ElMessage.error('请求失败');
+  }
+}
+
+const querySearch = (queryString, cb) => {
+  const results = queryString
+      ? currencyList.value.filter(currency => currency.toLowerCase().includes(queryString.toLowerCase()))
+      : currencyList.value;
+  cb(results);
+};
+
+const handleSelect = item => {
+  taskRuleForm.currency = item;
+};
+
+const handleCurrencyCodePlatformSelect = item => {
+  taskRuleForm.currencyCodePlatform = item;
+};
+
+function handleRowSelect (item, row){
+  row.currencyCode = item;
+};
+
+
+function handelRowCurrencyCodePlatformSelect(item, row) {
+  row.currencyCodePlatform = item;
+}
+
+
 onMounted(() => {
   getTaskList();
   fetchOperationSelect();
+  fetchCurrencyList();
 });
 </script>
 
@@ -400,8 +439,7 @@ onMounted(() => {
       <vxe-grid ref="xGrid" stripe v-bind="gridOptions" v-on="gridEvents">
         <template #toolbar_buttons>
           <el-button :icon="Plus" plain type="primary" @click="dialogFormVisible = true"> 添加任务</el-button>
-          <el-button :icon="Delete" type="danger" plain @click="removeEvent">删除</el-button>
-          <!--<vxe-button icon="vxe-icon-save" @click="saveEvent">保存</vxe-button>-->
+          <el-button :icon="Delete" plain type="danger" @click="removeEvent">删除</el-button>
         </template>
         <template #operate="{ row }">
           <template v-if="hasActiveEditRow(row)">
@@ -409,7 +447,6 @@ onMounted(() => {
             <vxe-button content="保存" status="success" type="text" @click="saveRowEvent(row)"></vxe-button>
           </template>
           <template v-else>
-            <!--<el-button type="text" icon="Edit" />-->
             <el-button icon="Edit" type="text" @click="editRowEvent(row)"></el-button>
           </template>
         </template>
@@ -432,17 +469,39 @@ onMounted(() => {
           </vxe-select>
         </template>
         <template #currency_edit="{ row }">
-          <vxe-input v-model="row.currencyCode"></vxe-input>
+          <!--<vxe-input v-model="row.currencyCode"></vxe-input>-->
+          <el-autocomplete
+              v-model="row.currencyCode"
+              :debounce="100"
+              :fetch-suggestions="querySearch"
+              :trigger-on-focus="false"
+              clearable
+              @select="item => handleRowSelect(item, row)"
+          >
+            <template v-slot="{ item }">
+              <div>{{ item }}</div>
+            </template>
+          </el-autocomplete>
         </template>
         <template #currencyCodePlatform_edit="{ row }">
-          <vxe-input v-model="row.currencyCodePlatform"></vxe-input>
-        </template>
-        <template #quantity_edit="{ row }">
+          <el-autocomplete
+              v-model="row.currencyCodePlatform"
+              :debounce="100"
+              :fetch-suggestions="querySearch"
+              :trigger-on-focus="false"
+              clearable
+              @select="item => handelRowCurrencyCodePlatformSelect(item,row)"
+          >
+            <template v-slot="{ item }">
+              <div>{{ item }}</div>
+            </template>
+          </el-autocomplete>
         </template>
       </vxe-grid>
     </div>
   </el-card>
-  <el-dialog v-model="dialogFormVisible" title="新建任务" width="500" style="border-radius: 10px;" :before-close="handleClose">
+  <el-dialog v-model="dialogFormVisible" :before-close="handleClose" style="border-radius: 10px;" title="新建任务"
+             width="500">
     <el-form
         ref="taskRuleFormRef"
         :model="taskRuleForm"
@@ -472,10 +531,34 @@ onMounted(() => {
         </el-select>
       </el-form-item>
       <el-form-item label="回款币种" prop="currency">
-        <el-input v-model="taskRuleForm.currency" placeholder="请输入回款币种" />
+        <el-autocomplete
+            v-model="taskRuleForm.currency"
+            :debounce="100"
+            :fetch-suggestions="querySearch"
+            :trigger-on-focus="false"
+            clearable
+            placeholder="请输入回款币种"
+            @select="handleSelect"
+        >
+          <template v-slot="{ item }">
+            <div>{{ item }}</div> <!-- 确保正确显示每个选项 -->
+          </template>
+        </el-autocomplete>
       </el-form-item>
       <el-form-item label="回款/余额币种" prop="currencyCodePlatform">
-        <el-input v-model="taskRuleForm.currencyCodePlatform" placeholder="请输入回款/余额币种" />
+        <el-autocomplete
+            v-model="taskRuleForm.currencyCodePlatform"
+            :debounce="100"
+            :fetch-suggestions="querySearch"
+            :trigger-on-focus="false"
+            clearable
+            placeholder="请输入回款/余额币种"
+            @select="handleCurrencyCodePlatformSelect"
+        >
+          <template v-slot="{ item }">
+            <div>{{ item }}</div> <!-- 确保正确显示每个选项 -->
+          </template>
+        </el-autocomplete>
       </el-form-item>
     </el-form>
     <template #footer>
@@ -506,4 +589,5 @@ onMounted(() => {
   border-color: #eee;
   transition: all 0.2s ease-in-out;
 }
+
 </style>