share-fun-web/src/views/sceneManagement/sceneList/modal/ItemModal.vue

<template>
  <el-dialog
    :title="title"
    :visible.sync="modal"
    width="80%"
    :close-on-click-modal="false"
    @close="
      res => {
        $emit('cancel');
      }
    "
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="140px">
      <el-form-item label="幼儿园名称" prop="name"
        ><el-input v-model="form.name" placeholder="请输入幼儿园名称" />
      </el-form-item>
      <el-form-item label="幼儿园类型" prop="type">
        <el-radio-group v-model="form.type">
          <el-radio
            v-for="(item, index) in TypeOptions"
            :key="index"
            :label="item.value"
          >
            {{ item.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="所在地区" prop="addressArr" required>
        <!-- TODO 联动select -->
        <AddressSelect v-model="form.addressArr" />
      </el-form-item>
      <el-form-item label="详细地址" prop="address">
        <el-input v-model="form.address" placeholder="请输入详细地址" />
      </el-form-item>
      <el-form-item label="幼儿园logo" prop="logo" required>
        <upload v-model="form.logo" params="prefix=/kindergarten-logo"/>
        <el-row>建议尺寸：</el-row>
      </el-form-item>
      <el-form-item label="幼儿园预览图logo" prop="previewLogo" required>
        <upload v-model="form.previewLogo" params="prefix=/kindergarten-logo" />
        <el-row>建议尺寸：<a href="http://youxiangle.cn/yxl-back-end/static/yxl/fission/preview-logo-256*110.psd" target="_blank" style="color: rgb(245, 108, 108);">下载psd</a></el-row>
      </el-form-item>
      <el-form-item label="幼儿园高清图logo" prop="hdLogo" required>
        <upload v-model="form.hdLogo" params="prefix=/kindergarten-logo" />
        <el-row>建议尺寸：<a href="http://youxiangle.cn/yxl-back-end/static/yxl/fission/hd-logo-1252*521.psd" target="_blank" style="color: rgb(245, 108, 108);">下载psd</a></el-row>
      </el-form-item>
      <el-form-item label="封面图" prop="cover" required>
        <upload v-model="form.cover" :limit="9" params="prefix=/kindergarten-cover" />
        <el-row>建议尺寸：</el-row>
      </el-form-item>
      <el-form-item label="办公电话" prop="phonenumber">
        <el-input v-model="form.phonenumber" placeholder="请输入办公电话" />
      </el-form-item>
      <el-form-item label="幼儿园介绍" prop="brief">
        <el-input
          v-model="form.brief"
          type="textarea"
          :rows="2"
          placeholder="请输入幼儿园介绍"
        />
      </el-form-item>
      <el-form-item label="营业执照" prop="businessLicense" required>
        <upload
          v-model="form.businessLicense"
          :uploadUrl="$upload('/yxl-back-end/framework/oss/minio/upload')"
        />
      </el-form-item>
      <el-form-item label="申请人姓名" prop="realName">
        <el-input v-model="form.realName" placeholder="请输入申请人姓名" />
      </el-form-item>
      <el-form-item label="手机号" prop="personPhonenumber">
        <el-input v-model="form.personPhonenumber" placeholder="请输入手机号" />
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="form.email" placeholder="请输入邮箱" />
      </el-form-item>
      <el-form-item label="证照号码" prop="idCardNumber">
        <el-input v-model="form.idCardNumber" placeholder="请输入证照号码" />
      </el-form-item>
      <el-form-item label="半身照" prop="bodyPhoto" required>
        <upload
          v-model="form.bodyPhoto"
          :uploadUrl="$upload('/yxl-back-end/framework/oss/minio/upload')"
        />
      </el-form-item>
      <el-form-item label="证件正面" prop="idCardFront" required>
        <upload
          v-model="form.idCardFront"
          :uploadUrl="$upload('/yxl-back-end/framework/oss/minio/upload')"
        />
      </el-form-item>
      <el-form-item label="证件背面" prop="idCardBack" required>
        <upload
          v-model="form.idCardBack"
          :uploadUrl="$upload('/yxl-back-end/framework/oss/minio/upload')"
        />
      </el-form-item>
      <el-form-item label="显示/隐藏" prop="isShow">
        <el-radio-group v-model="form.isShow">
          <el-radio :label="true">显示</el-radio>
          <el-radio :label="false">隐藏</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="modal = false">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import SCENETYPE from '@/const/sceneType';
import { getItem, saveItem } from '@/api/scene';

const setListImg = str => {
  if (!str || str === '') {
    return [];
  } else {
    return str.split(',').map(x => ({ url: x }));
  }
};

export default {
  name: 'SceneItemModal',

  props: {
    id: {
      type: String,
      default: ''
    }
  },
  data() {
    var checkEmail = (rule, value, callback) => {
      const reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
      if (reg.test(value)) {
        callback();
      } else {
        callback(new Error('请输入正确的邮箱'));
      }
    };
    return {
      title: '新增幼儿园信息',
      modal: true,

      TypeOptions: SCENETYPE,

      form: {
        name: '',
        address: '',
        idCardNumber: '',
        phonenumber: '',
        brief: '',
        realName: '',
        personPhonenumber: '',
        type: '',

        // TODO 未对接接口字段
        province: '',
        city: '',
        area: '',
        logo: [],
        previewLogo: [],
        hdLogo: [],
        cover: [],
        businessLicense: [],
        bodyPhoto: [],
        idCardFront: [],
        idCardBack: [],
        addressArr: [],
        isShow: false
      },
      rules: {
        name: [{ required: true, min: 4, max: 64, message: '请输入幼儿园名称（4 ～ 64个字符）', trigger: 'change' }],
        addressArr: [{ type: 'array', required: true, message: '请选择省市区', trigger: 'change'}],
        address: [{ required: true, min: 4, max: 255, message: '请输入详细地址（4 ～ 255个字符）', trigger: 'change' }],
        phonenumber: [{ required: true, min: 4, max: 64, message: '请输入办公电话（4 ～ 64个字符）', trigger: 'change' }],
        brief: [{ required: true, min: 4, max: 255, message: '请输入幼儿园介绍（4 ～ 255个字符）', trigger: 'change' }],
        realName: [{ required: true, min: 2, max: 64, message: '请输入申请人姓名（2 ～ 64个字符）', trigger: 'change' }],
        personPhonenumber: [{ required: true, min: 4, max: 64, message: '请输入手机号（4 ～ 64个字符）', trigger: 'change' }],
        type: [{ required: true, message: '请选择幼儿园类型', trigger: 'change' }],
        email: [
          { required: true, min: 4, max: 64, message: '请输入邮箱（4 ～ 64个字符）', trigger: 'change' },
          { validator: checkEmail, trigger: 'blur' }
        ],
        idCardNumber: [{ required: true, min: 4, max: 64, message: '请输入证照号码（4 ～ 64个字符）', trigger: 'change' }],
        logo: [{ type: 'array', required: true, message: '请上传图片', trigger: 'change'}],
        previewLogo: [{ type: 'array', required: true, message: '请上传图片', trigger: 'change'}],
        hdLogo: [{ type: 'array', required: true, message: '请上传图片', trigger: 'change'}],
        cover: [{ type: 'array', required: true, message: '请上传图片', trigger: 'change' }],
        businessLicense: [{ type: 'array', required: true, message: '请上传图片', trigger: 'change' }],
        bodyPhoto: [{ type: 'array', required: true, message: '请上传图片', trigger: 'change' }],
        idCardFront: [{ type: 'array', required: true, message: '请上传图片', trigger: 'change' }],
        idCardBack: [{ type: 'array', required: true, message: '请上传图片', trigger: 'change' }],
        addressArr: [{ type: 'array', required: true, message: '请选择地址', trigger: 'change' }]
      }
    };
  },

  watch: {
    id: {
      handler(id) {
        if (id) {
          this.loadData();
          this.title = '编辑幼儿园信息';
        }
      },
      immediate: true
    }
  },

  mounted() {},

  methods: {
    async loadData() {
      const { success, data, msg } = await getItem({
        id: this.id
      });

      if (success) {
        let result = data;
        result.logo = [{ url: data.logo }];
        result.previewLogo = [{ url: data.previewLogo }];
        result.hdLogo = [{ url: data.hdLogo }];
        result.cover = data.coverList.map(x => ({ url: x })); // setListImg(data.cover);
        result.businessLicense = [{ url: data.businessLicense }];
        result.bodyPhoto = [{ url: data.bodyPhoto }];
        result.idCardFront = [{ url: data.idCardFront }];
        result.idCardBack = [{ url: data.idCardBack }];
        result.addressArr = [data.province, data.city, data.area];
        this.form = result;
      }
    },

    handleConfirm() {
      this.$refs.form.validate(async valid => {
        if (valid) {
          let params = Object.assign({}, this.form);
          params.province = this.form.addressArr[0];
          params.city = this.form.addressArr[1];
          params.area = this.form.addressArr[2];
          params.logo = this.form.logo[0].url;
          params.previewLogo = this.form.previewLogo[0].url;
          params.hdLogo = this.form.hdLogo[0].url;
          params.cover = this.form.cover.map(x => x.url).join(',');
          params.businessLicense = this.form.businessLicense[0].url;
          params.bodyPhoto = this.form.bodyPhoto[0].url;
          params.idCardFront = this.form.idCardFront[0].url;
          params.idCardBack = this.form.idCardBack[0].url;

          if (this.id) params.id = this.id;

          const { success, msg } = await saveItem(params);

          if (success) {
            this.$success('保存成功！');
            this.modal = false;
            this.$g_emit('scene_reload');
          }
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.pre-img {
  height: 80px;
}
</style>