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

<template>
  <el-dialog
    :title="title"
    :visible.sync="modal"
    :close-on-click-modal="false"
    width="960px"
    @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="关联活动">
          <ActivitySelect
            v-model="form.activityId"
            :kindergartenId="form.kindergartenId"
            :firstLoad="false"
            :disabled="form.kindergartenId === null"
          />
        </el-form-item>
        <div class="f-fe-fs" :style="{ width: '50%' }">
          <el-button
            type="primary"
            round
            :disabled="!form.kindergartenId"
            @click="step++"
            >下一步</el-button
          >
        </div>
      </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,
      form: {
        kindergartenId: null,
        activityId: '',
        urls: []
      },
      rules: {
        kindergartenId: [
          { required: true, message: '请选择关联场景', trigger: 'blur' }
        ],
        urls: [{ required: true, message: '请上传图片', trigger: 'change' }]
      },

      step: 0
    };
  },

  watch: {
    'form.activityId': {
      handler(str) {
        if (str) {
          this.step = 1;
        }
      },
      immediate: true
    }
  },

  computed: {
    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>