renli-pc/src/pages/qyMange/bm/components/edit.vue

<template>
  <el-dialog :close-on-click-modal="false" v-dialogDrag width="500px" powerId="form" :title="title+'部门'" :append-to-body="true" :visible.sync="dialogFormVisible" :before-close="handleClose">
    <div>
      <el-form :model="form" ref="form" :rules="rules" label-width="80px">
        <div class="form">
          <el-form-item label="部门名称" prop="regionName">
              <el-input ref="regionName" v-model="form.regionName" @change="handleChange" autocomplete="on" style='width:192px'></el-input>
          </el-form-item>
          <el-form-item label="部门编码" prop="regionNum">
              <el-input ref="regionName" v-model="form.regionNum" @change="handleChange" autocomplete="on" style='width:192px'></el-input>
          </el-form-item>
          <el-form-item label="北森部门id" >
              <el-input ref="beisenId" v-model="form.beisenId" autocomplete="on" style='width:192px'></el-input>
          </el-form-item>
          <el-form-item label="部门管理员:">
            <el-select @change="handleOptChange" v-model="form.manageId" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="部门地址:">
            <el-input placeholder="请输入详细地址" v-model="form.regionAddress" autocomplete="off" style='width:192px'></el-input>
            <el-button type="primary" size="mini" @click="dialogVisible2 = true">
              <i style="font-size:20px;" class="el-icon-location-information"></i>
            </el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button size="mini" type="primary" plain @click="(dialogFormVisible = false)">取 消</el-button>
      <el-button size="mini" type="primary" @click="confirm()" :loading="confirmLoad" >确 定</el-button>
    </div>
    <el-dialog title="提示" :visible.sync="dialogVisible2" width="80%" :before-close="handleClose" :append-to-body="true">
      <div style="height:50vh;overflow: auto;">
        <BMap @getAddrByPoint="getAddrByPoint"></BMap>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="danger" size="small" @click="(dialogVisible2 = false,form.regionAddress = '')">取 消</el-button>
        <el-button size="mini" type="primary" @click="(dialogVisible2 = false)" >确 定</el-button>
      </span>
    </el-dialog>
  </el-dialog>

</template>

<script>
import loadBMap from "../../../../loadBMap.js";
import BMap from "../../../../components/BMap/BMap";
import { addStore } from "../../../../api/storeManage.js";
import { getphonecode } from "../../../../api/user.js";
import { staffPage,regionList,updateRegionList } from "@/api/storeManage.js";
export default {
  components:{
    BMap
  },
  props:{
    rowId:{
      default:"",
      type:String
    }
  },
  data() {
    return {
      rules:{
        regionName: [
          { required: true, message: '请输入部门名称', trigger: 'change' },
        ],
        regionNum: [
          { required: true, message: '请输入部门编码', trigger: 'change' },
        ],
      },
      options:[],
      dialogVisible2:false,
      confirmLoad:false,
      dialogFormVisible: false, //弹窗开关
      form: {}, //主对象
      title: "添加",
    };
  },
  created(){
    this.getPage()
  },
  methods: {
    handleOptChange(val){
      let index = this.options.findIndex(item=>item.value == val)
      this.form.manageName = this.options[index].label
      this.form.mobilePhone = this.options[index].mobilePhone
    },
    getPage() {
      let params = { 
        pageNum: 1, 
        pageSize: 999,
        state:1
      }
      staffPage(params).then((res) => {
          res.pageInfo.list.forEach((item) => {
            if (item.row == 1) {
              item.row = true;
            } else if (item.row == 0) {
              item.row = false;
            }
          });
          this.options = res.pageInfo.list.map(item=>{
            return {
              label:item.staffName,
              value:item.id,
              mobilePhone:item.mobilePhone
            }
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getAddrByPoint(res) {
      this.form.regionAddress =res.addressComponents.street + "-" + res.addressComponents.streetNumber;
    },
    handleChange(){
      if(this.title == '添加'){
        if(this.form.cashPassword){
          this.$refs.form.clearValidate();
        }
      }
    },
    //关闭弹窗前的回调方法
    handleClose() {
      this.form = {};
      this.dialogFormVisible = false;
      this.$refs.form.clearValidate();
    },
    //组件传值
    show(row,parentId) {
      parentId = parentId||null
      if (row.id ) {
          this.title = "修改";
          this.form = {...row}
      } else {
        this.title =parentId? "新增多级":'新增';
        this.form = {
          parentId
        }
      }
      this.dialogFormVisible = true;
    },
    //确定返回方法
    confirm() {
      this.$refs['form'].validate((valid) => {
          if (valid) {
            this.confirmLoad = true
            if (this.title == "新增" || this.title =='新增多级') {
              let params = {
                ...this.form,
                storeId:this.rowId
              }
              regionList(params).then(res=>{
                this.confirmLoad = false
                if(res.code == '000000'){
                  this.$emit('init')
                  this.$message.success({ message: "操作成功" });
                  this.dialogFormVisible = false
                }
              })
            } else {
              let params = {
                ...this.form,
                storeId:this.rowId
              }
              updateRegionList(params).then(res=>{
                this.confirmLoad = false
                if(res.code == '000000'){
                  this.$emit('init')
                  this.$message.success({ message: "修改成功" });
                  this.dialogFormVisible = false
                }
              })
            }
          } 
        });
    },
  },
};
</script>

<style scoped>
.el-input {
  width: 260px;
}
</style>