emis-frontend/src/views/emis/emisCustomerUser/batchUpdateForm.vue

<template>
  <div >
        <el-form ref="form" size="mini" :model="form" :rules="rules" label-width="100px">
          <el-row :gutter="0"  style="display: flex;flex-wrap: wrap;">
          <!-- <el-col :span="12">
            <el-form-item label="结算类型" prop="settledType">
              <el-select v-model="form.settledType" placeholder="请选择">
                      <el-option
                        v-for="dict in dict.type.emis_cus_settled_type"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                      ></el-option>
                    </el-select>
            </el-form-item>
          </el-col> -->
          <!-- <el-col :span="12">
            <el-form-item label="专属业务员" prop="opEmpCode" >
              <EmisUserSimplePicker0 :placeholder="$t('专属业务员')" v-model="form.opEmpCode"  ></EmisUserSimplePicker0>
            </el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-form-item label="回款联系人" prop="payee" >
              <PayeePicker :placeholder="$t('回款联系人')" v-model="form.payee"  ></PayeePicker>

              <!-- <EmisUserSimplePicker1 :placeholder="$t('回款联系人')" v-model="form.payee"  ></EmisUserSimplePicker1> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="销售联系人" prop="salesmen" >
              <SalemanPicker :placeholder="$t('销售联系人')" v-model="form.salesmen"  ></SalemanPicker>

              <!-- <EmisUserSimplePicker2 :placeholder="$t('销售联系人')" v-model="form.salesmen"  ></EmisUserSimplePicker2> -->
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="业务网点范围" prop="bizSite" >
              <div @click="handleSelectSite">选择网点</div>
              <el-input v-model="form.bizSiteName" rows="5" type="textarea" disabled placeholder="" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="开通OMS" prop="blOpenOms" >
              <el-radio-group v-model="form.blOpenOms">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="是否短信" prop="blSms">
              <el-radio-group v-model="form.blSms">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否启用" prop="status">
              <el-radio-group v-model="form.status">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" type="textarea" placeholder="请输入备注" />
            </el-form-item>
          </el-col>
        </el-row>


        </el-form>

      <div style="text-align: center;margin-bottom: 10px;">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>

      <el-dialog title="选择网点" :visible.sync="openSiteSelectTreeForm" width="40%" :destroy-on-close="true" v-dialogDrag append-to-body>
        <EmisSiteSelectTreePicker  :selectSiteCode="form.bizSite" :selectSiteName="form.bizSiteName" @on-changed="onSelectSiteTreeCheckChange" ></EmisSiteSelectTreePicker>
      </el-dialog>

  </div>
</template>

<script>
import {  editMonthUser } from "@/api/emis/emisCustomerUser";
import CountryPicker from '@/views/emis/EmisBaseTools/CountryPicker.vue';
import EmisSiteSimplePicker from '@/views/emis/EmisBaseTools/EmisSiteSimplePicker.vue';
import ProvincePicker from '@/views/emis/EmisBaseTools/ProvincePicker.vue';
import CityPicker from '@/views/emis/EmisBaseTools/CityPicker.vue';
import DistrictPicker from '@/views/emis/EmisBaseTools/DistrictPicker.vue';


import EmisUserSimplePicker0 from '@/views/emis/EmisBaseTools/EmisUserSimplePicker.vue';
import EmisUserSimplePicker1 from '@/views/emis/EmisBaseTools/EmisUserSimplePicker.vue';
import EmisUserSimplePicker2 from '@/views/emis/EmisBaseTools/EmisUserSimplePicker.vue';

import EmisSiteSelectTreePicker from '@/views/emis/EmisBaseTools/EmisSiteSelectTreePicker.vue';
import PayeePicker from '@/views/emis/EmisBaseTools/PayeePicker.vue';
import SalemanPicker from '@/views/emis/EmisBaseTools/SalemanPicker.vue';


export default {
  name: "emisCustomerUserForm",
  props:{
    ids:{
        type:[Number,Array]
    },
  },
  components: {
    PayeePicker,
    SalemanPicker,
    CountryPicker,
    EmisSiteSimplePicker,ProvincePicker,CityPicker,DistrictPicker,
    EmisUserSimplePicker0,EmisUserSimplePicker1,EmisUserSimplePicker2,
    EmisSiteSelectTreePicker
  },
  dicts: ['emis_cus_settled_type'],
  data() {
    return {
      openSiteSelectTreeForm:false,
      emisCustomerUserOptions: [],
      // 遮罩层
      loading: true,
      // 表单参数
      form: {},
      isDataChangeCount:0,
      // 表单校验
      rules: {

      }
    };
  },
   watch: {
      "ids": {
        handler (newValue, oldValue) {
          this.id = newValue;
        },
        deep: true
      },
      form: {
        handler (n, o) {
          this.isDataChangeCount++
        },
        deep: true
      }

  },
  created() {
    this.isDataChangeCount=0;
    this.reset();
  },

  methods: {
    handleSelectSite(){
      this.openSiteSelectTreeForm=true;
    },
    onSelectSiteTreeCheckChange(item){
        this.openSiteSelectTreeForm=false;
        this.form.bizSiteName=item.selectSiteNameStr;
        this.form.bizSite=item.selectSiteCodeStr;
        // console.log(item)
    },
    // 取消按钮
    cancel() {
      this.reset();
      this.$emit("on-cancel");
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        customerCode: null,
        customerName: null,
        customerNameEn: null,
        simpleName: null,
        phone: null,
        mobile: null,
        customerType: null,
        settledType: null,
        userType: null,
        company: null,
        deptId: null,
        avatar: null,
        sex: null,
        invitationInfo: null,
        loginIp: null,
        loginDate: null,
        nickName: null,
        unionId: null,
        openid: null,
        monthlyPayCode: null,
        userName: null,
        password: null,
        ownerSite: null,
        bizSite: null,
        bizSiteName: null,
        country: null,
        province: null,
        city: null,
        county: null,
        town: null,
        address: null,
        email: null,
        sendCountry: null,
        sendProvince: null,
        sendCity: null,
        sendCounty: null,
        sendTown: null,
        postCode: null,
        status: null,
        realName: null,
        idNo: null,
        payee: null,
        salesmen: null,
        dataFrom: null,
        blOpenOms: null,
        blSms: null,
        opEmpCode: null,
        orderNum: null,
        remark: null,
        delFlag: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        createSite: null,
        updateSite: null
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    async submitForm() {
      // 判断是否有变动
      if (this.isDataChangeCount>0 ) {
          console.log(this.ids);
          if(this.ids.length==0){
            this.form.id=item;
            await editMonthUser(this.form).then(response => {
                // console.log(response);
              });
          }else{
            this.ids.forEach(async item => {
                this.form.id=item;
                await editMonthUser(this.form).then(response => {
                  // console.log(response);
                });
            });
          }
          this.$modal.msgSuccess("修改成功");
          this.$emit("on-changed");

      }else{
        this.$modal.msgSuccess("无变动，无需修改");
      }
    },

  }
};
</script>

<style lang="scss" scoped>
// .el-row{
//   display:flex;
//   flex-wrap: wrap;
// }

// .el-col{
//     min-height: 1px;
// }

</style>