dialog.vue

<template>
  <el-dialog
    custom-class="party-dialog"
    :title="title"
    width="540px"
    :visible.sync="formVisible"
    :before-close="close"
  >
    <div class="dialog-content">
      <el-form
        :model="formItem"
        class="party-form"
        ref="formItem"
        label-width="125px"
        label-position="right"
        :rules="rules"
      >
        <el-form-item label="所属单位：" prop="orgId">
          <el-select
            size="small"
            v-model="formItem.orgId"
            clearable
            placeholder="请选择所属单位"
            @change="selectItem"
          >
            <el-option
              v-for="item in orgOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="机构地理位置：" prop="areaName">
          <el-input size="small" v-model="formItem.areaName" disabled></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer btn-group">
      <el-button type="primary" @click="submitForm('formItem')">确定</el-button>
      <el-button @click="close">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>

export default {
  data() {
    return {
      title:'',
      formVisible: false,
      formItem: {},
      orgOptions: [],
      rules: {
        orgId: [{ required: true, message: "请选择所属单位", trigger: "change" }]
      }
    };
  },
  mounted(){
  },
  methods: {
    backFn(item) {
      this.formVisible = true;
      this.$nextTick(()=>{
        this.$refs.formItem.clearValidate();
      })
      // 新增
      this.orgOptions = item
      this.title="新增"
      this.formItem = {};
      
    },
    // 关闭
    close() {
      this.formVisible = false;
      for (let key in this.formItem) {
        this.formItem[key] = null;
      }
      this.$refs["formItem"].resetFields();
    },
    // 联动出地址
    selectItem(val) {
      this.orgOptions.forEach(item=>{
        if(val===item.id){
           this.formItem.areaName = item.areaName;
           this.formItem.areaId = item.areaId;
        }
        
        if(item.id===this.formItem.orgId){
          this.formItem.userName = item.name
        }
      })
     
    },
    // 保存编辑信息
    submitForm() {
      let _this = this;
      console.log(this.formItem)
      _this.$refs.formItem.validate(valid => {
        if (valid) {
          let searchObj = {};
          for (let key in _this.formItem) {
            if (this.formItem[key]) {
              searchObj[key] = _this.formItem[key];
            }
          }
          _this.$https({
                url: "tUser/boxAdd",
                method: "post",
                authType: this.backToken
              },
              _this.$qs.stringify(searchObj)
            ).then(res => {
                if (res.data.resultCode == '200') {
                  _this.$message({
                    type: "success",
                    message: res.data.message
                  });
                  _this.formVisible = false;
                  _this.$emit("refreshFn");
                } else {
                  _this.$message({
                    type: "error",
                    message: res.data.message
                  });
                }
              },
              error => {
                _this.$message({
                  type: "error",
                  message: error
                });
              }
            );
        }
      });
    }
  }
};
</script>

<style lang="less">
@import "../../../../style/dialog.less";
</style>