element-dialog封装成子组件

Posted 2021-01-15 huanhuan55

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 fixed prop="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>