vue列表中用弹框mixins展示新增，编辑，查看

1、mixins基础概况

混入 (mixins)： 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

2、与vuex的区别

• vuex：用来做状态管理的，里面定义的变量在每个组件中均可以使用和修改，在任一组件中修改此变量的值之后，其他组件中此变量的值也会随之修改。

• Mixins：可以定义共用的变量，在每个组件中使用，引入组件中之后，各个变量是相互独立的，值的修改在组件中不会相互影响。

3、封装一个弹框，可实现新增，编辑，查看

新建一个mixins文件夹，里面在建一个index.js和opreate.js

opreate.js里面代码如下：

// 弹窗mixins
//import {getStore} from '@/utils/store'
const operateMixins = {
  props:{
    visible: {
    	type: Boolean,
    	default: false
    },
    source:{
      type:String,
      default:''
    },
    infoObj:{
      type:Object,
      default(){
        return {}
      }
    }
  },
  data() {
    return {
      optForm:{

      },
      btnLoading: false,
    }
  },
  computed: {
    isLook(){
      return this.source === "detail";
    },
    isEdit(){
      return this.source === "edit";
    },
    isAdd(){
      return this.source === "add";
    },
    isParamsAdd(){
      return this.source === "paramsAdd";
    },
    getTitle(){
      if(this.source === 'add' || this.source === 'paramsAdd'){
        return '新增'
      }else if(this.source === 'edit'){
        return '编辑'
      }else{
        return '查看'
      }
    },
     // userInfo(){
    //   return getStore({name: 'userInfo'})
    // }
  },
  created() {
    if (this.isEdit || this.isLook || this.isParamsAdd) {
      this.optForm = JSON.parse(JSON.stringify(this.infoObj));
    }
  },
  methods: {
    handleClose(){
  		this.$emit('update:visible',false)
  	},
    executeSave(optName,apiName,funcName,params){
      //params.userId = this.userInfo.userId
      this.$refs.optForm.validate((valid, props) => {
      	if (valid) {
          let apiFunc = this.$api[apiName][funcName];
          this.btnLoading = true;
          apiFunc(params).then(res => {
            this.btnLoading = false;
            let data = res.data;
            if(data.code == '0'){
              this.showMessage('success',optName + '成功!');
              this.$emit('update:visible',false);
              this.$emit('queryFresh');
            }else{
              this.showMessage('info',optName + "失败：" + data.msg);
            }
          }).catch(error => {
            this.btnLoading = false;
          });
        }
      });
    },
    showMessage(type,message){
      this.$message({
        type: type,
        message: message
      });
    },
  },
}
export default operateMixins;

在index.js里面引入opreate.js，代码如下：

export const operateMixins = require('./opreate').default;

在vue组件中混入operateMixins

<!--新增、编辑、详情弹窗-->
<template>
  <el-drawer
    size="500px"
    :visible.sync="visible"
    :title="getTitle"
    :before-close="handleClose"
    direction="rtl">
    <el-form :model="optForm" :rules="rules" ref="optForm" label-width="110px" style="margin-top: 20px;" class="opt-form">
      <el-form-item label="费用项" prop="expenseItem">
        <el-input v-model="optForm.expenseItem" placeholder="请输入" clearable :disabled="isLook"></el-input>
      </el-form-item>
      <el-form-item label="计价单位" prop="units">
        <el-input v-model="optForm.units" autosize type="textarea"></el-input>
      </el-form-item>
      <el-form-item label="财务科目" prop="financialSub">
        <el-input v-model="optForm.financialSub" placeholder="请输入" clearable :disabled="isLook"></el-input>
      </el-form-item>
      <el-form-item label="税率" prop="taxRate">
        <el-input v-model="optForm.taxRate" placeholder="请输入" clearable :disabled="isLook" style="width: 100px;"></el-input> %
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="optForm.status" :disabled="isLook">
          <el-radio label="1">启用</el-radio>
          <el-radio label="0">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-row v-if="!isAdd">
        <el-form-item label="创建人" prop="creator">
          <div>{{(optForm.creator||"")+','+(optForm.createTime||'')}}</div>
        </el-form-item>
        <el-form-item label="编辑人" prop="creator">
          <div>{{(optForm.lastEditor||'')+','+(optForm.lastUpdateTime||'')}}</div>
        </el-form-item>
      </el-row>
    </el-form>
    <div class="text-center">
      <el-button type="default" @click="handleClose">取消</el-button>
      <el-button
        v-if="!isLook"
        type="primary"
        @click="handleSubmit"
        :loading="btnLoading">保存</el-button>
    </div>
  </el-drawer>
</template>

<script>
import { operateMixins } from '@/mixins'
import rules from '@/utils/rules.js'

export default{
  mixins: [operateMixins],
  data(){
    return {
      btnLoading:false,
      optForm:{
        parentId:'',
        expenseId:'',
        expenseItem:'',
        financialSub:'',
        status:'1',
        taxRate:'',
        creator:'',
        createTime:'',
        lastEditor:'',
        lastUpdateTime:'',
      },
      rules:{
        expenseItem:[
          { required: true, trigger: 'blur', message:'该项为必填项'},
          { min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }
        ],
        taxRate:[
          { validator:rules.FormValidate.Form().validateInt, trigger: 'blur' }
        ],
        units:[{ required: true, message: '该项为必填项', trigger: 'blur' }],
      }
    }
  },
  created(){
  },
  methods:{
    handleSubmit(){
      this.optForm.parentId=this.infoObj.parentId
      this.executeSave('操作','contract','saveInfoExpense',this.optForm)
    }
  }
}
</script>

<style lang="scss">
</style>

列表里面引入弹框的组件

<!-- 新增、编辑、详情 -->
      <pro-opt
       v-if="addVisible"
       :visible.sync="addVisible"
       :source="source"
       @queryFresh="getList"
       :infoObj="infoObj">
      </pro-opt>


// 编辑
    handleEdit(row) {
      this.addVisible = true;
      this.source = "edit";
      this.infoObj = row;
    },


// 新增
    handleAdd(row) {
      this.addVisible = true;
      this.source = "add";
      this.infoObj = {
        parentId: row.expenseId,
      };
    },