（二十六）VueCli3.0全栈——添加按钮和添加功能

1、修改fundlist，把添加按钮加上

2、新建dialog

3、Fundlist引入dialog

• 引入(import)，

• 注册(components)，

• 使用<Dialog></Dialog>

• 给状态

dialog:{
    show:false
}

• 添加按钮：

handleAdd(){
    this.dialog.show=true;
}

• 组件绑定：<Dialog :dialog="dialog"></Dialog>

• 关闭组件：给Dialog组件添加sync :visible.sync="dialog.show"

• 注意：表单提交传递的是ref

4、代码

//Dialog.vue
<template>
  <div class="dialog">
    <el-dialog
      title="添加资金信息"
      :visible.sync="dialog.show"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :modal-append-to-body="false"
    >
      <div class="form">
        <el-form  ref="form" :model="formData" :rules="rules" label-width="120px" style="margin:10px;width:auto;">
          <el-form-item label="收支类型：">
            <el-select v-model="formData.type" placeholder="收支类型:">
              <el-option
                v-for="(formtype,index) in format_type_list"
                :key="index"
                :label="formtype"
                :value="formtype"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="describe" label="收支描述:">
            <el-input type="describe" v-model="formData.describe"></el-input>
          </el-form-item>
          <el-form-item prop="income" label="收入:">
            <el-input type="income" v-model="formData.income"></el-input>
          </el-form-item>
          <el-form-item prop="expend" label="支出:">
            <el-input type="expend" v-model="formData.expend"></el-input>
          </el-form-item>
          <el-form-item prop="cash" label="账户现金:">
            <el-input type="cash" v-model="formData.cash"></el-input>
          </el-form-item>
          <el-form-item prop="remark" label="备注:">
            <el-input type="textarea" v-model="formData.remark"></el-input>
          </el-form-item>
          <el-form-item class="text_right">
            <el-button @click="dialog.show=false">取消</el-button>
            <el-button type="primary" @click="onSubmit('form')">提交</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "dialog",
  data() {
    return {
      formData: {
        type: "",
        describe: "",
        income: "",
        expend: "",
        cash: "",
        remark: ""
        // id: ""
      },
      rules: {
        describe: [
          {
            requied: true,
            message: "收支描述不能为空",
            trigger: "blur"
          }
        ],
        income: [{ requied: true, message: "收入不能为空", trigger: "blur" }],
        expend: [{ requied: true, message: "支出不能为空", trigger: "blur" }],
        cash: [{ requied: true, message: "账户不能为空", trigger: "blur" }]
      },
      format_type_list: [
        "提现",
        "提现手续费",
        "充值",
        "优惠券",
        "充值礼券",
        "转账"
      ]
    };
  },
  props: {
    dialog: Object
  },
  methods: {
      onSubmit(form){
          this.$refs[form].validate(valid=>{
              if(valid){
                  this.$axios.post("/api/profiles/add",this.formData)
                  .then(res=>{
                    //   添加成功
                    this.$message({
                        message:"数据添加成功",
                        type:'success'
                        })
                  });

                //   隐藏对话框
                this.dialog.show = false;

                // 自动刷新
                this.$emit('update');
              }
          })
      }

  }
};
</script>

<style>
</style>

//FundList.vue
<template>
  <div class="fillContainer">
    <!-- 添加按钮 -->
    <div>
      <el-form :inline="true" ref="add_data">
        <el-form-item class="btnRight">
          <el-button type="primary" size="small" icon="view" @click="handleAdd()">添加</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="table_container">
      <el-table
        v-if="tableData.length>0"
        :data="tableData"
        style="width: 100%"
        max-height="450"
        border
      >
        <el-table-column type="index" label="序号" width="70" align="center"></el-table-column>
        <el-table-column prop="date" label="创建时间" width="200" align="center">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.date }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="收支类型" width="120" align="center"></el-table-column>
        <el-table-column prop="describe" label="收支描述" width="160" align="center"></el-table-column>
        <el-table-column prop="income" label="收入" width="150" align="center">
          <template slot-scope="scope">
            <span style="color:#00d053">{{scope.row.income}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="expend" label="支出" width="150" align="center">
          <template slot-scope="scope">
            <span style="color:#f56767">{{scope.row.expend}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="cash" label="账户现金" width="150" align="center">
          <template slot-scope="scope">
            <span style="color:#4db3ff">{{scope.row.cash}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" width="180" align="center"></el-table-column>
        <el-table-column label="操作" align="center" width="180" fixed="right" prop="operation">
          <template slot-scope="scope">
            <el-button
              type="warning"
              icon="edit"
              size="small"
              @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button>
            <el-button
              size="small"
              type="danger"
              icon="delete"
              @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <Dialog :dialog="dialog" @update="this.getProfile"></Dialog>
  </div>
</template>

<script>
import Dialog from '../components/Dialog'
export default {
  name: "fundlist",
  data() {
    return {
      tableData: [],
      dialog:{
          show:false
      }
    };
  },
  created() {
    this.getProfile();
  },
  methods: {
    getProfile() {
      // 获取表格数据
      this.$axios
        .get("/api/profiles")
        .then(res => {
          this.tableData = res.data;
        })
        .catch(err => console.log(err));
    },
    handleEdit(index, row) {
      console.log(123);
    },
    handleDelete(index, row) {
      console.log(456);
    },
    handleAdd(){
        this.dialog.show=true;
    }
  },
  components: {
        Dialog
  }
};
</script>

<style scoped>
.fillContainer {
  width: 100%;
  height: 100%;
  padding: 16px;
  box-sizing: border-box;
}
.btnRight{
    float: right;
}
</style>