add.vue

<template>
  <div>
    <el-dialog :title="isEdit=='add'?$t('button.groupAdd'):$t('button.groupEdit')" :visible.sync="isShow" v-if="isShow" :close-on-click-modal='false' class="manage-dialog dialog_lj" :before-close="closeDialog">
      <el-form :model="addForm" label-width="100px" :rules="rules" ref="addForm">
        <el-form-item :label="$t('table.areaName')" prop="name">
          <el-input v-model="addForm.name" maxlength="10" :placeholder="$t('pholder.input')"></el-input>
          <i class="error-tip">*</i>
        </el-form-item>
        <el-form-item :label="$t('table.areaNumber')" prop="code">
          <el-input v-model="addForm.code" :placeholder="$t('pholder.input')" ></el-input>
          <i class="error-tip">*</i>
        </el-form-item>
        <el-form-item :label="$t('table.areaType')" prop="type">
          <el-select v-model="addForm.type" :placeholder="$t('pholder.select')" >
            <el-option :label="$t('pholder.selfService')" :value="1"></el-option>
            <el-option :label="$t('pholder.manualCashier')" :value="2"></el-option>
          </el-select>
          <i class="error-tip">*</i>
        </el-form-item>
        <el-form-item :label="$t('table.areaStatus')" prop="status">
          <el-select v-model="addForm.status" :placeholder="$t('pholder.select')" >
            <el-option :label="$t('pholder.state1')" :value="0"></el-option>
            <el-option :label="$t('pholder.state2')" :value="1"></el-option>
          </el-select>
          <i class="error-tip">*</i>
        </el-form-item>
        <el-form-item :label="$t('table.square')" prop="square">
            <el-select v-model="addForm.mallId" filterable :placeholder="$t('pholder.select')">
              <el-option v-for="item in mallListForTerm" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          <i class="error-tip">*</i>
        </el-form-item>
        <el-form-item :label="$t('table.plan')" prop="pic">
            <el-upload
                class="avatar-uploader"
                :action="floorUploadUrl"
                :headers="uploadHeader"
                :show-file-list="false"
                :before-upload="beforeAvatarUpload"
                :on-success="handleAvatarSuccess"
                :on-error="handleAvatarError">
                <img v-if="addForm.floorPlan" :src="addForm.floorPlan" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </el-form-item>
        <el-form-item :label="$t('table.describe')" prop="platform">
          <el-input v-model="addForm.remarks" type="textarea" :placeholder="$t('pholder.input')" ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog" class="dialog-btn">{{$t('dialog.cancel')}}</el-button>
        <el-button type="primary" @click="addSubmit('addForm')" class="dialog-btn dialog-confirm-btn">
          {{$t('dialog.confirm')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        isEdit:'add',
        isShow: false,
        addForm: {
          accountId: this.$cookie.get('accountId'),
          name: '',
          mallId: null,
          type:1,
          status:1
        },
        floorUploadUrl: window._vionConfig.queuingUrl + '/b-cashier-area/upload',
        uploadHeader: {
            Authorization: this.$cookie.get('atoken')
        },
        imageUrl:'',
        rules: {
          name: [{
            required: true,
            message: this.$t("pholder.input"),
            trigger: 'blur'
          }],
          type: [{
            required: true,
            message: this.$t("pholder.select"),
            trigger: 'blur'
          }],
          status: [{
            required: true,
            message: this.$t("pholder.select"),
            trigger: 'blur'
          }],
          mallId: [{
            required: true,
            message: this.$t("pholder.select"),
            trigger: 'blur'
          }],
          pic: [{
            required: true,
            message: this.$t("dialog.upload"),
            trigger: 'blur'
          }],
          code: [{
            required: true,
            message: this.$t("pholder.input"),
            trigger: 'blur'
          }],
        },
      }
    },
    methods: {
        getMallListForTerm() {
          this.mallListForTerm = [];
          this.addForm.mallId = "";
          this.$api.base.mall(
              {
                accountId: this.$cookie.get('accountId'),
                status_arr: "1,3"
              },
              null,
              true
            )
            .then(data => {
              let result = data.data;
              if (result.data.length) {
                if (this.getSessionLocal("mallId")) {
                  this.addForm.mallId = Number(this.getSessionLocal("mallId"));
                } else {
                  this.addForm.mallId = result.data[0].id;
                  this.setSessionLocal("mallId", this.queryForm.mallId);
                }
                this.mallListForTerm = result.data;
              }
            })
        },
      dialogInit(type,row) {
        this.isEdit = type;
        this.isShow = true;
        if(row){
          this.addForm = {
              ...row
          }
          this.addForm.floorPlan = window._vionConfig.picUrl+ row.pic;
          this.$forceUpdate()
        }
        this.getMallListForTerm()
      },
      beforeAvatarUpload(file) {
      	let isLegalType = file.type === 'image/svg+xml' || file.type === 'image/jpeg';
      	if (!isLegalType) {
      		this.$message.error(this.$t('message.uploadImg') + ' JPG ' + this.$t('message.or') +  ' SVG ' + this.$t('message.imgFormat'));
      	}
      	return isLegalType;
      },
      handleAvatarSuccess(res, file) {
      	this.addForm.pic=res.msg;
      	this.addForm.floorPlan = window._vionConfig.picUrl+ res.msg;
        this.$forceUpdate();
      },
      handleAvatarError(res,file) {
      	 this.$message({
          showClose: true,
          message: this.$t('message.uploadFailed'),
          type: 'warning'
        });
      },
      addSubmit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if(this.isEdit=='add'){
              this.$api.queueManagementApi.addArea(this.addForm)
                .then((res) => {
                  let result = res.data;
                  if(result.code==200){
                    this.$message({
                      message: result.msg,
                      type: 'success'
                    });
                    this.$parent.getTableData();
                    this.$refs.addForm.resetFields();
                    this.addForm = {}
                    this.isShow = false
                  }else{
                    this.$message({
                      message: result.msg,
                      type: 'error'
                    });
                  }
                })
            }else{
              this.$api.queueManagementApi.updateArea(this.addForm).then((res) => {
                  let result = res.data;
                  if(result.code==200){
                    this.$message({
                      message: result.msg,
                      type: 'success'
                    });
                    this.$parent.getTableData();
                    this.$refs.addForm.resetFields();
                    this.addForm = {}
                    this.isShow = false
                  }else{
                    this.$message({
                      message: result.msg,
                      type: 'error'
                    });
                  }
                })
            }
          } else {
            return false;
          }
        });
      },
      closeDialog() {
        this.$refs.addForm.resetFields();
        this.addForm = {}
        this.isShow = false;
      }
    }
  }
</script>
<style lang="less" scoped="scoped">
  .dialog_lj{
    /deep/.el-form-item__label{
      width: 100px;
      text-align:left
    }
    /deep/.el-select{
      width: 100%;
    }
    /deep/.el-form-item__label+.el-form-item__content{
        float: none !important;
        line-height:40px !important;
    }
    /deep/.el-form-item__error{
        padding-top: 0px !important;
    }
  }
</style>