修改合同保证金

oa-ui/src/views/oa/deposit/contract.vue

 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="128px">
-      <el-form-item label="合同id" prop="contractId">
-        <el-input v-model="queryParams.contractId" placeholder="请输入合同id" clearable @keyup.enter.native="handleQuery" />
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="108px">
+      <el-form-item label="合同名称" prop="contractId">
+        <el-select v-model="queryParams.contractId" clearable filterable remote reserve-keyword placeholder="请输入合同名称"
+          :remote-method="remoteMethod" :loading="loading" style="width: 400px;" @change="handleQuery">
+          <el-option v-for="contract in contractList" :key="contract.contractId"
+            :label="contract.contractName" :value="contract.contractId">
+          </el-option>
+        </el-select>
       </el-form-item>
       <el-form-item label="预计退还日期" prop="returnTime">
         <el-date-picker clearable v-model="queryParams.returnTime" type="date" value-format="yyyy-MM-dd"
 
 <script>
 import { listDeposit, getDeposit, delDeposit, addDeposit, updateDeposit } from "@/api/oa/deposit/deposit";
+import { listContract } from "@/api/oa/contract/contract";
 import depositForm from '../../flowable/form/finance/depositForm.vue';
 
 export default {
       },
       // 表单校验
       rules: {
-      }
+      },
+      contractList:[]
     };
   },
   created() {
       this.download('oa/deposit/export', {
         ...this.queryParams
       }, `deposit_${new Date().getTime()}.xlsx`)
-    }
+    },
+    remoteMethod(val) {
+      listContract({
+        pageNum: 1,
+        pageSize: 20, 
+        contractName: val
+      }).then(res => {
+        this.contractList = res.rows;
+      })
+    },
   }
 };
 </script>