element-dialog封裝成子組件
阿新 • • 發佈：2018-10-27
success [] ipc form index nat cal amp 手機
1.父組件
<template> <card-layout :title="L(‘Users‘)" :actions="actions" @click="handleClick"> <el-table :data="tableData4.slice((currentPage-1)*pagesize,currentPage*pagesize)" :default-sort="{prop: ‘date‘, order: ‘descending‘}" style="width: 100%"> <el-table-column fixedprop="id" label="編號" width="150"> </el-table-column> <el-table-column prop="name" label="姓名" width="120"> </el-table-column> <el-table-column prop="password" type="password" label="密碼" width="120"> </el-table-column> <el-table-column prop="sexType" label="性別" width="120" :formatter="sexTypes"> </el-table-column> <el-table-column prop="phone" label="電話" width="140"> </el-table-column> <el-table-column prop="email" label="郵箱" width="140"> </el-table-column> <el-table-column prop="birthday" label="生日" width="120"> </el-table-column> <el-table-column prop="integral" label="等級" width="100" :formatter="Getlevel"> </el-table-column> <el-table-column fixed="right" label="操作" width="180"> <template slot-scope="scope"> <el-button type="danger" @click.native.prevent="deleteRow(scope.row, tableData4)" size="small"> 移除 </el-button> <el-button type="primary" @click="EditClick(scope.row)" size="small"> {{Edit}} </el-button> </template> </el-table-column> </el-table> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 10, 20, 40]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="tableData4.length"> </el-pagination> <update :show.sync="shows" @renovate="getuser" :datas="mydata" ></update> <UserEdit :show.sync="show" @renovate="getuser"></UserEdit> </card-layout> </template> <script> import datatablepaging from "../.././components/basicElement/dataTable/dataTablePaging.vue"; import UserEdit from "./UserEdit-dialog.vue"; import update from ‘./Update.vue‘ export default { methods: { deleteRow(index, rows) { rows.splice(index, 1); } }, data() { return { Edit:"編輯", pagesize: 5, //每頁的數據條數 currentPage: 1, //默認開始頁面 show: false, shows:false, mydata:{}, SkipCount: 5, MaxResultCount: 10, actions: [ [ { id: "New", type: "primary", text: "New", icon: "fa fa-plus" }, { id: "Refresh", type: "success", text: "Refresh", icon: "fa fa-refresh" } ] ], tableData4: [] }; }, components: { UserEdit, datatablepaging, update }, methods: { open() { this.show = true; }, opens(){ this.shows = true; }, created: function() { this.total = this.tableData4.length; }, current_change: function(currentPage) { this.currentPage = currentPage; }, handleClick(id) { switch (id) { case "New": this.AddUser(); break; case "Refresh": this.Refresh(); break; default: break; } }, AddUser() { this.open(); }, Refresh() { this.getuser(); }, getuser() { this.$http .get( "/api/services/app/Userinfro/GetUserinofor?MaxResultCount=" + this.MaxResultCount ) .then(result => { this.tableData4 = result.data.result.items; //console.log(result.data.result.items); }) .catch(err => { console.log(err); }); }, sexTypes(row, column) { if (row.sexType == 1) { return "男"; } else { return "女"; } }, Getlevel(row, column) { if (row.integral >= 300 && row.integral < 600) { return "白銀"; } if (row.integral >= 600 && row.integral < 900) { return "黃金"; } if (row.integral >= 900 && row.integral < 1200) { return "鉑金"; } if (row.integral >= 1200) { return "鉆石"; } }, deleteRow(row) { this.$confirm("此操作將永久刪除該用戶, 是否繼續?", "提示", { confirmButtonText: "確定", cancelButtonText: "取消", type: "warning" }).then(() => { console.log(row.id); this.$http .delete("/api/services/app/Userinfro/DeleteUserByid?Id=" + row.id) .then(result => { this.$message({ type: "success", message: "刪除成功!" }); this.getuser(); }) .catch(err => { console.log(err); }); }); }, EditClick(data) { this.opens(); //console.log(data) this.mydata=data; }, handleSizeChange(size){ this.pagesize=size; }, handleCurrentChange(currentPage) { this.currentPage=currentPage; } }, created() { this.getuser(); } }; </script> <style> .el-pagination { padding-top: 12px; } </style>
2.子組件
<template>
<div>
<el-dialog title="UpdateCustomer" :visible.sync="visible" @close="$emit(‘update:show‘, false)" :show="show" append-to-body>
<el-form :model="form" ref="Userform" :rules="rules" label-position="top" label-width="80px">
<el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="密碼" :label-width="formLabelWidth" prop="password">
<el-input v-model="form.password" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="性別" :label-width="formLabelWidth" prop="sexType">
<el-radio-group v-model="form.sexType">
<el-radio :label="0">WuMan</el-radio>
<el-radio :label="1">Man</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="電話" :label-width="formLabelWidth" prop="phone">
<el-input v-model="form.phone" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="郵箱" :label-width="formLabelWidth" prop="email">
<el-input v-model="form.email" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="生日" :label-width="formLabelWidth" prop="birthday">
<el-date-picker v-model="form.birthday" type="date" style="width: 100%;" placeholder="選擇日期">
</el-date-picker>
</el-form-item>
<el-form-item label="積分" :label-width="formLabelWidth" prop="integral">
<el-input v-model="form.integral" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="cellsumbit">取 消</el-button>
<el-button type="primary" @click="sumbit">確 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
form: {
name: "",
password: "",
sexType: 0,
phone: "",
email: "",
birthday: "",
integral: ""
},
formLabelWidth: "80px",
visible: this.show,
rules: {
name: [
{ required: true, message: "name is not null", trigger: "blur" },
{
min: 2,
max: 8,
message: "Names are between two and eight characters "
}
],
password: [
{ required: true, message: "password is not null", trigger: "blur" },
{ min: 6, message: "Minimum length of six digits" }
],
phone: [
{ required: true, message: "phone is not nul", trigger: "blur" },
{ validator: this.checkphone, trigger: "blur" }
],
email: [
{ required: true, message: "email is not null", trigger: "blur" },
{ type: "email", message: "郵箱格式不正確", trigger: "blur" }
],
birthday: [
{ required: true, message: "birthday is not null", trigger: "blur" }
]
}
};
},
props: {
show: {
type: Boolean,
default: false
},
EDIT: {
type: String
},
datas:{
type :Object,
}
},
watch: {
show() { //註意要隨時監控
console.log(this.datas);
this.form=this.datas;
this.visible = this.show;
}
},
methods: {
checkphone(rule, value, callback) {
if (!Number.isInteger(+value)) {
callback(this.$message("請輸入數字類型"));
}
if (value) {
const reg = /^1[3|4|5|7|8][0-9]{9}$/;
if (reg.test(value)) {
callback();
} else {
return callback(this.$message("請輸入正確的手機格式"));
}
}
},
cellsumbit() {
this.visible = false;
this.$emit("renovate");
},
sumbit() {
this.visible = false;
this.$refs.Userform.validate(valid => {
console.log(valid)
if (valid) {
this.$http
.put("/api/services/app/Userinfro/UpdateUser", this.form)
.then(result => {
console.log(result.status);
if (result.status == 200) {
this.$message("更新成功");
this.$emit("renovate");
this.form.name = "";
}
})
.catch(err => {
console.log(err);
});
}
});
}
},
};
</script>
element-dialog封裝成子組件