初步改造前端页面

ruoyi-ui/src/views/fantang/prepayment/index.vue

@@ -26,15 +26,6 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="预付费金额" prop="prepaid">
-        <el-input
-          v-model="queryParams.prepaid"
-          placeholder="请输入预付费金额"
-          clearable
-          size="small"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
       <el-form-item label="预付费时间" prop="prepaidAt">
         <el-date-picker clearable size="small" style="width: 200px"
                         v-model="queryParams.prepaidAt"
@@ -57,7 +48,7 @@
           size="mini"
           @click="handleAdd"
           v-hasPermi="['fantang:prepayment:add']"
-        >新增
+        >预付收款
         </el-button>
       </el-col>
       <el-col :span="1.5">
@@ -147,16 +138,34 @@
 
     <!-- 添加或修改收费管理对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+      <el-form ref="formAddPrepayment" :model="formAddPrepayment" :rules="rules" label-width="80px">
+        <el-form-item label="住院号" prop="hospitalId">
+          <el-autocomplete
+            popper-class="my-autocomplete"
+            v-model="state"
+            :fetch-suggestions="querySearch"
+            placeholder="请输入住院号"
+            @select="handleSelect">
+            <i
+              class="el-icon-edit el-input__icon"
+              slot="suffix"
+              @click="handleIconClick">
+            </i>
+            <template slot-scope="{ item }">
+              <div class="name">{{ item.value }}</div>
+              <span class="addr">{{ item.address }}</span>
+            </template>
+          </el-autocomplete>
+        </el-form-item>
         <el-form-item label="病人id" prop="patientId">
-          <el-input v-model="form.patientId" placeholder="请输入病人id"/>
+          <el-input v-model="formAddPrepayment.patientId" placeholder="请输入病人id"/>
         </el-form-item>
         <el-form-item label="预付费金额" prop="prepaid">
-          <el-input v-model="form.prepaid" placeholder="请输入预付费金额"/>
+          <el-input v-model="formAddPrepayment.prepaid" placeholder="请输入预付费金额"/>
         </el-form-item>
         <el-form-item label="预付费时间" prop="prepaidAt">
           <el-date-picker clearable size="small" style="width: 200px"
-                          v-model="form.prepaidAt"
+                          v-model="formAddPrepayment.prepaidAt"
                           type="date"
                           value-format="yyyy-MM-dd"
                           placeholder="选择预付费时间">
@@ -172,20 +181,22 @@
 </template>
 
 <script>
-import {
+  import {
     addPrepayment,
     delPrepayment,
     exportPrepayment,
     getPrepayment,
     listPrepayment,
     updatePrepayment
-} from "@/api/fantang/prepayment";
+  } from "@/api/fantang/prepayment";
 
-export default {
+  export default {
     name: "Prepayment",
     components: {},
     data() {
       return {
+        restaurants: [],
+        state: '',
         // 遮罩层
         loading: true,
         // 选中数组
@@ -215,7 +226,7 @@ export default {
           prepaidAt: null
         },
         // 表单参数
-      form: {},
+        formAddPrepayment: {},
         // 表单校验
         rules: {
           patientId: [
@@ -233,7 +244,42 @@ export default {
     created() {
       this.getList();
     },
+    mounted() {
+      this.restaurants = this.loadAll();
+    },
+
     methods: {
+      // 响应自动查询回显
+      querySearch(queryString, cb) {
+        var restaurants = this.restaurants;
+        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
+        // 调用 callback 返回建议列表的数据
+        cb(results);
+      },
+
+      // 处理过滤器
+      createFilter(queryString) {
+        return (restaurant) => {
+          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
+        };
+      },
+
+      // 填充所有待缴预付伙食费的病人清单
+      loadAll() {
+        return [
+          { "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }
+        ];
+      },
+
+      // 处理自动查询列表选择的事件
+      handleSelect(item) {
+        console.log(item);
+      },
+
+      // 处理点击查询图标的事件
+      handleIconClick(ev) {
+        console.log(ev);
+      },
       /** 查询收费管理列表 */
       getList() {
         this.loading = true;
@@ -250,7 +296,7 @@ export default {
       },
       // 表单重置
       reset() {
-      this.form = {
+        this.formAddPrepayment = {
           prepaymentId: null,
           patientId: null,
           collectAt: null,
@@ -291,7 +337,7 @@ export default {
         this.reset();
         const prepaymentId = row.prepaymentId || this.ids
         getPrepayment(prepaymentId).then(response => {
-        this.form = response.data;
+          this.formAddPrepayment = response.data;
           this.open = true;
           this.title = "修改收费管理";
         });
@@ -300,14 +346,14 @@ export default {
       submitForm() {
         this.$refs["form"].validate(valid => {
           if (valid) {
-          if (this.form.prepaymentId != null) {
+            if (this.formAddPrepayment.prepaymentId != null) {
-            updatePrepayment(this.form).then(response => {
+              updatePrepayment(this.formAddPrepayment).then(response => {
                 this.msgSuccess("修改成功");
                 this.open = false;
                 this.getList();
               });
             } else {
-            addPrepayment(this.form).then(response => {
+              addPrepayment(this.formAddPrepayment).then(response => {
                 this.msgSuccess("新增成功");
                 this.open = false;
                 this.getList();
@@ -344,5 +390,28 @@ export default {
         })
       }
     }
-};
+  };
 </script>
+
+<style lang="scss">
+  .my-autocomplete {
+    li {
+      line-height: normal;
+      padding: 7px;
+
+      .name {
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+
+      .addr {
+        font-size: 12px;
+        color: #b4b4b4;
+      }
+
+      .highlighted .addr {
+        color: #ddd;
+      }
+    }
+  }
+</style>