响应式优化
This commit is contained in:
		| @@ -1,6 +1,11 @@ | ||||
| <template> | ||||
|   <div class="app-container"> | ||||
|     <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px"> | ||||
|     <el-form | ||||
|       :model="queryParams" | ||||
|       ref="queryForm" | ||||
|       :inline="true" | ||||
|       label-width="68px" | ||||
|     > | ||||
|       <el-form-item label="选择幼儿" prop="childid"> | ||||
|         <el-select | ||||
|           v-model="queryParams.childid" | ||||
| @@ -36,12 +41,20 @@ | ||||
|         /> | ||||
|       </el-form-item> | ||||
|       <el-form-item> | ||||
|         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> | ||||
|         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> | ||||
|         <el-button | ||||
|           type="primary" | ||||
|           icon="el-icon-search" | ||||
|           size="mini" | ||||
|           @click="handleQuery" | ||||
|           >搜索</el-button | ||||
|         > | ||||
|         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery" | ||||
|           >重置</el-button | ||||
|         > | ||||
|       </el-form-item> | ||||
|     </el-form> | ||||
|  | ||||
|     <el-row :gutter="10" class="mb8"> | ||||
|     <div class="mb8 btn-list"> | ||||
|       <!-- <el-col :span="1.5"> | ||||
|         <el-button | ||||
|           type="primary" | ||||
| @@ -52,27 +65,25 @@ | ||||
|           v-hasPermi="['benyi:contactpeople:add']" | ||||
|         >新增</el-button> | ||||
|       </el-col> --> | ||||
|       <el-col :span="1.5"> | ||||
|         <el-button | ||||
|           type="success" | ||||
|           icon="el-icon-edit" | ||||
|           size="mini" | ||||
|           :disabled="single" | ||||
|           @click="handleUpdate" | ||||
|           v-hasPermi="['benyi:contactpeople:edit']" | ||||
|         >修改</el-button> | ||||
|       </el-col> | ||||
|       <el-col :span="1.5"> | ||||
|         <el-button | ||||
|           type="danger" | ||||
|           icon="el-icon-delete" | ||||
|           size="mini" | ||||
|           :disabled="multiple" | ||||
|           @click="handleDelete" | ||||
|           v-hasPermi="['benyi:contactpeople:remove']" | ||||
|         >删除</el-button> | ||||
|       </el-col> | ||||
|     </el-row> | ||||
|       <!-- <el-button | ||||
|         type="success" | ||||
|         icon="el-icon-edit" | ||||
|         size="mini" | ||||
|         :disabled="single" | ||||
|         @click="handleUpdate" | ||||
|         v-hasPermi="['benyi:contactpeople:edit']" | ||||
|         >修改</el-button | ||||
|       > --> | ||||
|       <el-button | ||||
|         type="danger" | ||||
|         icon="el-icon-delete" | ||||
|         size="mini" | ||||
|         :disabled="multiple" | ||||
|         @click="handleDelete" | ||||
|         v-hasPermi="['benyi:contactpeople:remove']" | ||||
|         >删除</el-button | ||||
|       > | ||||
|     </div> | ||||
|  | ||||
|     <el-table | ||||
|       v-loading="loading" | ||||
| @@ -81,14 +92,24 @@ | ||||
|     > | ||||
|       <el-table-column type="selection" width="55" align="center" /> | ||||
|       <!-- <el-table-column label="编号" align="center" prop="id" /> --> | ||||
|       <el-table-column label="幼儿" align="center" prop="childid" :formatter="childFormat" /> | ||||
|       <el-table-column | ||||
|         label="幼儿" | ||||
|         align="center" | ||||
|         prop="childid" | ||||
|         :formatter="childFormat" | ||||
|       /> | ||||
|       <el-table-column label="父亲姓名" align="center" prop="fathername" /> | ||||
|       <el-table-column label="父亲联系电话" align="center" prop="fphone" /> | ||||
|       <el-table-column label="父亲办公电话" align="center" prop="foffphone" /> | ||||
|       <el-table-column label="父亲联系电话" width="120" align="center" prop="fphone" /> | ||||
|       <el-table-column label="父亲办公电话" width="120" align="center" prop="foffphone" /> | ||||
|       <el-table-column label="母亲姓名" align="center" prop="mothername" /> | ||||
|       <el-table-column label="母亲联系电话" align="center" prop="mphone" /> | ||||
|       <el-table-column label="母亲办公电话" align="center" prop="moffphone" /> | ||||
|       <el-table-column label="操作" align="center" class-name="small-padding fixed-width"> | ||||
|       <el-table-column label="母亲联系电话" width="120" align="center" prop="mphone" /> | ||||
|       <el-table-column label="母亲办公电话" width="120" align="center" prop="moffphone" /> | ||||
|       <el-table-column | ||||
|         label="操作" | ||||
|         align="center" | ||||
|         width="100" | ||||
|         class-name="small-padding fixed-width" | ||||
|       > | ||||
|         <template slot-scope="scope"> | ||||
|           <el-button | ||||
|             size="mini" | ||||
| @@ -96,20 +117,22 @@ | ||||
|             icon="el-icon-edit" | ||||
|             @click="handleUpdate(scope.row)" | ||||
|             v-hasPermi="['benyi:contactpeople:edit']" | ||||
|           >修改</el-button> | ||||
|             >修改</el-button | ||||
|           > | ||||
|           <el-button | ||||
|             size="mini" | ||||
|             type="text" | ||||
|             icon="el-icon-delete" | ||||
|             @click="handleDelete(scope.row)" | ||||
|             v-hasPermi="['benyi:contactpeople:remove']" | ||||
|           >删除</el-button> | ||||
|             >删除</el-button | ||||
|           > | ||||
|         </template> | ||||
|       </el-table-column> | ||||
|     </el-table> | ||||
|  | ||||
|     <pagination | ||||
|       v-show="total>0" | ||||
|       v-show="total > 0" | ||||
|       :total="total" | ||||
|       :page.sync="queryParams.pageNum" | ||||
|       :limit.sync="queryParams.pageSize" | ||||
| @@ -117,12 +140,16 @@ | ||||
|     /> | ||||
|  | ||||
|     <!-- 添加或修改幼儿紧急情况联系人对话框 --> | ||||
|     <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body> | ||||
|     <el-dialog :title="title" :visible.sync="open" class="big-dialog" append-to-body> | ||||
|       <el-form ref="form" :model="form" :rules="rules" label-width="120px"> | ||||
|         <el-row :gutter="15"> | ||||
|           <el-col :span="24"> | ||||
|             <el-form-item label="选择幼儿" prop="childid"> | ||||
|               <el-select v-model="form.childid" placeholder="请输入选择幼儿" :disabled="true"> | ||||
|               <el-select | ||||
|                 v-model="form.childid" | ||||
|                 placeholder="请输入选择幼儿" | ||||
|                 :disabled="true" | ||||
|               > | ||||
|                 <el-option | ||||
|                   v-for="dict in childOptions" | ||||
|                   :key="dict.id" | ||||
| @@ -134,41 +161,62 @@ | ||||
|           </el-col> | ||||
|           <el-col :span="12"> | ||||
|             <el-form-item label="父亲姓名" prop="fathername"> | ||||
|               <el-input v-model="form.fathername" placeholder="请输入父亲姓名" /> | ||||
|               <el-input | ||||
|                 v-model="form.fathername" | ||||
|                 placeholder="请输入父亲姓名" | ||||
|               /> | ||||
|             </el-form-item> | ||||
|           </el-col> | ||||
|           <el-col :span="12"> | ||||
|             <el-form-item label="联系电话" prop="fphone"> | ||||
|               <el-input v-model="form.fphone" placeholder="请输入父亲联系电话" /> | ||||
|               <el-input | ||||
|                 v-model="form.fphone" | ||||
|                 placeholder="请输入父亲联系电话" | ||||
|               /> | ||||
|             </el-form-item> | ||||
|           </el-col> | ||||
|           <el-col :span="12"> | ||||
|             <el-form-item label="办公电话" prop="foffphone"> | ||||
|               <el-input v-model="form.foffphone" placeholder="请输入父亲办公电话" /> | ||||
|               <el-input | ||||
|                 v-model="form.foffphone" | ||||
|                 placeholder="请输入父亲办公电话" | ||||
|               /> | ||||
|             </el-form-item> | ||||
|           </el-col> | ||||
|         </el-row> | ||||
|         <el-row :gutter="15"> | ||||
|           <el-col :span="12"> | ||||
|             <el-form-item label="母亲姓名" prop="mothername"> | ||||
|               <el-input v-model="form.mothername" placeholder="请输入母亲姓名" /> | ||||
|               <el-input | ||||
|                 v-model="form.mothername" | ||||
|                 placeholder="请输入母亲姓名" | ||||
|               /> | ||||
|             </el-form-item> | ||||
|           </el-col> | ||||
|           <el-col :span="12"> | ||||
|             <el-form-item label="联系电话" prop="mphone"> | ||||
|               <el-input v-model="form.mphone" placeholder="请输入母亲联系电话" /> | ||||
|               <el-input | ||||
|                 v-model="form.mphone" | ||||
|                 placeholder="请输入母亲联系电话" | ||||
|               /> | ||||
|             </el-form-item> | ||||
|           </el-col> | ||||
|           <el-col :span="12"> | ||||
|             <el-form-item label="办公电话" prop="moffphone"> | ||||
|               <el-input v-model="form.moffphone" placeholder="请输入母亲办公电话" /> | ||||
|               <el-input | ||||
|                 v-model="form.moffphone" | ||||
|                 placeholder="请输入母亲办公电话" | ||||
|               /> | ||||
|             </el-form-item> | ||||
|           </el-col> | ||||
|         </el-row> | ||||
|         <el-row :gutter="15"> | ||||
|           <el-col :span="12"> | ||||
|             <el-form-item label="其他联系人姓名" prop="grandfathername"> | ||||
|               <el-input v-model="form.grandfathername" placeholder="请输入其他联系人姓名" /> | ||||
|               <el-input | ||||
|                 v-model="form.grandfathername" | ||||
|                 placeholder="请输入其他联系人姓名" | ||||
|               /> | ||||
|             </el-form-item> | ||||
|           </el-col> | ||||
|           <el-col :span="12"> | ||||
| @@ -190,7 +238,10 @@ | ||||
|           </el-col> | ||||
|           <el-col :span="12"> | ||||
|             <el-form-item label="办公电话" prop="gfoffphone"> | ||||
|               <el-input v-model="form.gfoffphone" placeholder="请输入办公电话" /> | ||||
|               <el-input | ||||
|                 v-model="form.gfoffphone" | ||||
|                 placeholder="请输入办公电话" | ||||
|               /> | ||||
|             </el-form-item> | ||||
|           </el-col> | ||||
|           <el-col :span="24"> | ||||
| @@ -202,7 +253,10 @@ | ||||
|         <el-row :gutter="15"> | ||||
|           <el-col :span="12"> | ||||
|             <el-form-item label="其他联系人姓名" prop="grandmothername"> | ||||
|               <el-input v-model="form.grandmothername" placeholder="请输入其他联系人姓名" /> | ||||
|               <el-input | ||||
|                 v-model="form.grandmothername" | ||||
|                 placeholder="请输入其他联系人姓名" | ||||
|               /> | ||||
|             </el-form-item> | ||||
|           </el-col> | ||||
|           <el-col :span="12"> | ||||
| @@ -224,7 +278,10 @@ | ||||
|           </el-col> | ||||
|           <el-col :span="12"> | ||||
|             <el-form-item label="办公电话" prop="gmoffphone"> | ||||
|               <el-input v-model="form.gmoffphone" placeholder="请输入办公电话" /> | ||||
|               <el-input | ||||
|                 v-model="form.gmoffphone" | ||||
|                 placeholder="请输入办公电话" | ||||
|               /> | ||||
|             </el-form-item> | ||||
|           </el-col> | ||||
|           <el-col :span="24"> | ||||
| @@ -248,7 +305,7 @@ import { | ||||
|   getContactpeople, | ||||
|   delContactpeople, | ||||
|   addContactpeople, | ||||
|   updateContactpeople, | ||||
|   updateContactpeople | ||||
| } from "@/api/benyi/contactpeople"; | ||||
|  | ||||
| import { listChild } from "@/api/benyi/child"; | ||||
| @@ -297,20 +354,20 @@ export default { | ||||
|         gmgx: undefined, | ||||
|         gmphone: undefined, | ||||
|         gmaddress: undefined, | ||||
|         gmoffphone: undefined, | ||||
|         gmoffphone: undefined | ||||
|       }, | ||||
|       // 表单参数 | ||||
|       form: {}, | ||||
|       // 表单校验 | ||||
|       rules: { | ||||
|         childid: [{ required: true, message: "请选择幼儿", trigger: "blur" }], | ||||
|       }, | ||||
|         childid: [{ required: true, message: "请选择幼儿", trigger: "blur" }] | ||||
|       } | ||||
|     }; | ||||
|   }, | ||||
|   created() { | ||||
|     this.getList(); | ||||
|     this.getChildList(); | ||||
|     this.getDicts("sys_dm_jtgx").then((response) => { | ||||
|     this.getDicts("sys_dm_jtgx").then(response => { | ||||
|       this.jtgxOptions = response.data; | ||||
|     }); | ||||
|   }, | ||||
| @@ -320,7 +377,7 @@ export default { | ||||
|       // return this.selectDictLabel(this.classOptions, row.classid); | ||||
|       var actions = []; | ||||
|       var datas = this.childOptions; | ||||
|       Object.keys(datas).map((key) => { | ||||
|       Object.keys(datas).map(key => { | ||||
|         if (datas[key].id == "" + row.childid) { | ||||
|           actions.push(datas[key].name); | ||||
|           return false; | ||||
| @@ -330,14 +387,14 @@ export default { | ||||
|     }, | ||||
|     /** 查询幼儿信息列表 */ | ||||
|     getChildList() { | ||||
|       listChild(null).then((response) => { | ||||
|       listChild(null).then(response => { | ||||
|         this.childOptions = response.rows; | ||||
|       }); | ||||
|     }, | ||||
|     /** 查询幼儿紧急情况联系人列表 */ | ||||
|     getList() { | ||||
|       this.loading = true; | ||||
|       listContactpeople(this.queryParams).then((response) => { | ||||
|       listContactpeople(this.queryParams).then(response => { | ||||
|         this.contactpeopleList = response.rows; | ||||
|         this.total = response.total; | ||||
|         this.loading = false; | ||||
| @@ -369,7 +426,7 @@ export default { | ||||
|         gmphone: undefined, | ||||
|         gmaddress: undefined, | ||||
|         gmoffphone: undefined, | ||||
|         createTime: undefined, | ||||
|         createTime: undefined | ||||
|       }; | ||||
|       this.resetForm("form"); | ||||
|     }, | ||||
| @@ -385,7 +442,7 @@ export default { | ||||
|     }, | ||||
|     // 多选框选中数据 | ||||
|     handleSelectionChange(selection) { | ||||
|       this.ids = selection.map((item) => item.id); | ||||
|       this.ids = selection.map(item => item.id); | ||||
|       this.single = selection.length != 1; | ||||
|       this.multiple = !selection.length; | ||||
|     }, | ||||
| @@ -399,18 +456,18 @@ export default { | ||||
|     handleUpdate(row) { | ||||
|       this.reset(); | ||||
|       const id = row.id || this.ids; | ||||
|       getContactpeople(id).then((response) => { | ||||
|       getContactpeople(id).then(response => { | ||||
|         this.form = response.data; | ||||
|         this.open = true; | ||||
|         this.title = "修改幼儿紧急情况联系人"; | ||||
|       }); | ||||
|     }, | ||||
|     /** 提交按钮 */ | ||||
|     submitForm: function () { | ||||
|       this.$refs["form"].validate((valid) => { | ||||
|     submitForm: function() { | ||||
|       this.$refs["form"].validate(valid => { | ||||
|         if (valid) { | ||||
|           if (this.form.id != undefined) { | ||||
|             updateContactpeople(this.form).then((response) => { | ||||
|             updateContactpeople(this.form).then(response => { | ||||
|               if (response.code === 200) { | ||||
|                 this.msgSuccess("修改成功"); | ||||
|                 this.open = false; | ||||
| @@ -418,7 +475,7 @@ export default { | ||||
|               } | ||||
|             }); | ||||
|           } else { | ||||
|             addContactpeople(this.form).then((response) => { | ||||
|             addContactpeople(this.form).then(response => { | ||||
|               if (response.code === 200) { | ||||
|                 this.msgSuccess("新增成功"); | ||||
|                 this.open = false; | ||||
| @@ -432,24 +489,20 @@ export default { | ||||
|     /** 删除按钮操作 */ | ||||
|     handleDelete(row) { | ||||
|       const ids = row.id || this.ids; | ||||
|       this.$confirm( | ||||
|         '是否确认删除幼儿紧急情况联系人数据项?', | ||||
|         "警告", | ||||
|         { | ||||
|           confirmButtonText: "确定", | ||||
|           cancelButtonText: "取消", | ||||
|           type: "warning", | ||||
|         } | ||||
|       ) | ||||
|         .then(function () { | ||||
|       this.$confirm("是否确认删除幼儿紧急情况联系人数据项?", "警告", { | ||||
|         confirmButtonText: "确定", | ||||
|         cancelButtonText: "取消", | ||||
|         type: "warning" | ||||
|       }) | ||||
|         .then(function() { | ||||
|           return delContactpeople(ids); | ||||
|         }) | ||||
|         .then(() => { | ||||
|           this.getList(); | ||||
|           this.msgSuccess("删除成功"); | ||||
|         }) | ||||
|         .catch(function () {}); | ||||
|     }, | ||||
|   }, | ||||
|         .catch(function() {}); | ||||
|     } | ||||
|   } | ||||
| }; | ||||
| </script> | ||||
| </script> | ||||
|   | ||||
		Reference in New Issue
	
	Block a user