renli-pc/src/pages/branch/subbranch/component/index.vue

<template>
    <el-dialog :close-on-click-modal="false" append-to-body v-dialogDrag width="600px" powerId="form" :title="title" :visible.sync="dialogFormVisible" :before-close="handleClose">
      <div >
        <el-form :model="form" ref="form" label-width="80px">
          <div class="form">
            <el-form-item label="门店编码：" prop="storeNum">
              <el-input v-model="form.storeNum"></el-input>
            </el-form-item>
            <el-form-item label="门店名称：" prop="storeName">
              <el-input v-model="form.storeName" ></el-input>
            </el-form-item>
            <el-form-item label="归属" prop="description">
              <el-select
                v-model="form.description"
                filterable
                allow-create
                default-first-option>
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
                <!-- <el-button type="primary" size="mini" @click="handleStoreShow">
                <i style="font-size:20px;" class="el-icon-plus"></i> -->
              <!-- </el-button> -->
            </el-form-item>
            <el-form-item label="省：">
              <el-input v-model="form.province" disabled></el-input>
            </el-form-item>
            <el-form-item label="市：">
              <el-input v-model="form.city" disabled></el-input>
            </el-form-item>
            <el-form-item label="区/县：">
              <el-input v-model="form.county" disabled></el-input>
            </el-form-item>
            <el-form-item label="地址：">
              <el-input v-model="form.storeAddress" disabled></el-input>
              <el-button type="primary" size="mini" @click="handleMapShow">
                <i style="font-size:20px;" class="el-icon-location-information"></i>
              </el-button>
            </el-form-item>
            <el-form-item label="联系人：">
              <el-input v-model="form.registrant"></el-input>
            </el-form-item>
            <el-form-item label="联系方式：">
              <el-input v-model="form.registrantMobilePhone"></el-input>
            </el-form-item>
            <el-form-item label="服务电话：">
              <el-input v-model="form.telephone"></el-input>
            </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()">确 定</el-button>
      </div>
      <Map ref="map" @confirm="handleMapConfirm"></Map>
      <store ref="store"/>
    </el-dialog>
  </template>
  
  <script>
  import Map from './map.vue'
  import store from './addStore.vue'
  import { selectDescription,updataStore } from "@/api/login.js";
  export default {
    components:{
      Map,
      store
    },
    data() {
        return {
            title:"分店明细",
            dialogFormVisible:false,
            form:{},
            options:[],
        }
    },
    watch:{
      dialogFormVisible:{
        handler(arr){
          this.getAscription()
        },
        immediate:true
      }
    },
    methods: {
      getAscription(){
        selectDescription().then(res=>{
          if(res.code == "000000"){
            this.options = res.data.map(item=>{
              return {
                label:item,
                value:item
              }
            })
            console.log(this.options);
          }
        })
      },
      handleStoreShow(){
        this.$refs.store.show()
      },
      show(row){
        this.form = {...row}
        this.dialogFormVisible = true
      },
      handleMapConfirm(res){
        this.form.province = res.addressComponents.province
        this.form .city = res.addressComponents.city
        this.form.county = res.addressComponents.district
        this.form.storeAddress = res.address
      },
      handleMapShow(){
        this.$refs.map.dialogVisible = true
      },
      handleClose() {
        this.form = {};
        this.dialogFormVisible = false;
        this.$refs.form.clearValidate();
      },
      confirm(){
        updataStore(this.form).then(res=>{
          if(res.code == '000000'){
          this.$message.success({ message: "操作成功" });
          this.dialogFormVisible = false;
          this.$emit('confirm')
        }else{
            this.$alert(res.message, "提示", {
              confirmButtonText: "确定",
              confirmButtonClass: "confirmbtnFalses",
              type: "warning",
              center: true,
              callback: (action) => {},
            });
          }
        })
      }
    },
  };
  </script>
  
  <style scoped>
  .el-input {
    width: 260px;
  }
  </style>