share-fun-web/src/views/photographerManagement/photoVerify/modal/MultItemModal.vue

<template>
  <el-dialog
    :title="title"
    :visible.sync="modal"
    width="500px"
    :close-on-click-modal="false"
    @close="
      res => {
        $emit('cancel');
      }
    "
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-steps class="mrow-40 pb-40" :space="200" :active="step">
        <el-step title="关联信息"></el-step>
        <el-step title="批量上传"></el-step>
      </el-steps>

      <div v-if="step === 0">
        <el-form-item label="关联场景" prop="kindergartenId">
          <SceneSelect v-model="form.kindergartenId" />
        </el-form-item>
        <el-form-item label="关联活动" prop="activityId">
          <ActivitySelect
            v-model="form.activityId"
            :kindergartenId="form.kindergartenId"
            :firstLoad="false"
            :disabled="form.kindergartenId === null"
          />
        </el-form-item>
      </div>
      <el-form-item v-show="step === 1" label="图片" prop="urls" required>
        <mult-upload
          v-model="form.urls"
          :api="multUpload"
          :limit="999"
          :paramsData="uploadParams"
          @finish="handleFinish"
        />
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { saveItem, multUpload } from '@/api/photoWarehouse';

export default {
  name: 'PhotoUploadModal',

  data() {
    return {
      title: '上传图片',
      modal: true,

      multUpload: multUpload,

      // step: 0,

      form: {
        urls: [],
        kindergartenId: '',
        activityId: ''
      },
      rules: {
        urls: [{ required: true, message: '请上传图片', trigger: 'change' }],
        kindergartenId: [
          { required: true, message: '请选择关联场景', trigger: 'blur' }
        ],
        activityId: [
          { required: true, message: '请选择关联活动', trigger: 'blur' }
        ]
      }
    };
  },

  computed: {
    step() {
      const { kindergartenId, activityId } = this.form;
      let result = 1;
      if (!kindergartenId || !activityId) {
        result = 0;
      }
      return result;
    },
    uploadParams() {
      const { kindergartenId, activityId } = this.form;
      return { kindergartenId, activityId };
    }
  },

  watch: {
    'form.kindergartenId': {
      handler(val) {
        this.form.activityId = '';
      },
      immediate: true
    }
  },

  mounted() {},

  methods: {
    handleFinish() {
      this.$success('保存成功！');
      this.modal = false;
      this.$g_emit('photo_reload');
    }
  }
};
</script>

<style lang="scss" scoped></style>