addAct.vue

<template>
  <el-dialog :title="$t('button.addEvent')" class="manage-dialog" :visible.sync="addDialogVisible" :close-on-click-modal="false" @open="dialogOpen(addForm)" @close="addDialogClose">
    <el-form :model="addForm" status-icon :rules="rules" ref="addForm">
      <el-form-item :label="$t('table.eventName')" prop="name">
        <el-input v-model="addForm.name"></el-input>
        <i class="error-tip">*</i>
      </el-form-item>
      <el-form-item :label="$t('table.type')" prop="type" v-if="false">
        <el-select class="manage-sel" v-model="addForm.type" :placeholder="$t('pholder.eventType')" :disabled="addAbleType" @change="addchangeType">
          <el-option label="节假日" :value="0">{{$t('pholder.eventTypeA')}}</el-option>
          <el-option label="活动" :value="1">{{$t('pholder.eventTypeB')}}</el-option>
        </el-select>
        <i class="error-tip">*</i>
      </el-form-item>
      <el-form-item :label="$t('table.eventLevel')" prop="level">
        <el-select class="manage-sel" id="addForm.level" v-model="addForm.level" :disabled="levelDisabled" :placeholder="$t('pholder.eventLevel')" @change="addchangeLevel">
          <!-- :disabled="addAbleLevel" -->
          <el-option :label="$t('pholder.eventLevelA')" :value="1">{{$t('pholder.eventLevelA')}}</el-option>
          <el-option :label="$t('pholder.eventLevelB')" :value="2">{{$t('pholder.eventLevelB')}}</el-option>
        </el-select>
        <i class="error-tip">*</i>
      </el-form-item>
      <el-form-item :label="$t('table.square')" prop="mallId" v-show="addForm.level === 2">
        <el-select class="manage-sel" v-model="addForm.mallId" filterable :placeholder="$t('pholder.mall')" :no-data-text="$t('pholder.nodata')">
          <el-option v-for="item in addMallList" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
        <i class="error-tip">*</i>
      </el-form-item>
      <el-form-item :label="$t('dialog.duration')" prop="startDate">
        <el-col :span="11">
          <el-form-item class="spe-form-item">
            <el-date-picker class="manage-date-inp" v-model="addForm.startDate" format="MM 月 dd 日" type="date" size="mini" value-format="yyyy-MM-dd HH:mm:ss" :placeholder="$t('pholder.startDate')">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col class="line" :span="2" style="text-align: center;">-</el-col>
        <el-col :span="11">
          <el-form-item class="spe-form-item">
            <el-date-picker class="manage-date-inp" v-model="addForm.endDate" format="MM 月 dd 日" type="date" size="mini" value-format="yyyy-MM-dd HH:mm:ss" @change="endDateChange()" :placeholder="$t('pholder.endDate')">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <i class="error-tip">*</i>
      </el-form-item>
      <el-form-item :label="$t('table.eventDay')" prop="eventDate">
        <el-date-picker class="manage-date-inp" v-model="addForm.eventDate" format="yyyy-MM-dd" type="date" size="mini" value-format="yyyy-MM-dd HH:mm:ss" :placeholder="$t('table.eventDay')">
        </el-date-picker>
        <i class="error-tip">*</i>
      </el-form-item>
      <!-- <el-form-item label="持续天数" prop="name">
                  <el-input v-model="addForm.name"></el-input>
                  <i class="error-tip">*</i>
              </el-form-item> -->
      <el-form-item :label="$t('table.describe')" prop="intro">
        <el-input type="textarea" v-model="addForm.intro"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="addDialogVisible = false" 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>
</template>

<script>
export default {
  data() {
    return {
      addDialogVisible: false,
      addMallList: [],
      addAbleType: false,
      addAbleLevel: false,
      addForm: {
        name: '',
        mallId: null,
        type: null,
        level: null,
        startDate: '',
        endDate: '',
        eventDate: '',
        intro: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入区域名称', trigger: 'blur' },
          // { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择类型', trigger: 'change' },
        ],
        status: [
          { required: true, message: '请选择状态', trigger: 'change' },
        ],
        // mallId: [
        // 	{ required: true, message: '请选择门店', trigger: 'change' },
        // ],
        // accountId: [
        // 	{ required: true, message: '请选择集团', trigger: 'blur' },
        // ],
        floorId: [
          { required: true, message: '请选择区域', trigger: 'change' },
        ],
        startDate: [
          { required: true, message: '请选择日期', trigger: 'change' },
        ],
        endDate: [
          { required: true, message: '请选择日期', trigger: 'change' },
        ],
        eventDate: [
          { required: true, message: '请选择日期', trigger: 'change' },
        ]
      },
      curMallId: null
    }
  },
  computed: {
    userId() {
      return this.$cookie.get("userId")
    },
    notUser() {
      const userType = this.$cookie.get('user_type')
      return userType === 'admin' || userType === 'super'
    },
    levelDisabled() {
      return !this.notUser && this.addForm.level === 2
    }
  },
  methods: {
    dialogInit(mall_id) {
      if (!this.notUser) {
        this.addForm.level = 2
      }
      this.curMallId = mall_id;
      this.addDialogVisible = true;
    },
    dialogOpen(formDatas, dialogType) {
      formDatas.accountId = Number(this.$cookie.get('accountId'));
      this.getAddMallList(formDatas.accountId);
    },
    async getAddMallList(account_id) {
      const { notUser, fetchUserMall, fetchMallList } = this
      this.addMallList = [];
      this.addForm.mallId = '';
      let mallList = [], mallPermissionList = []
      const allMallData = await fetchMallList(account_id)
      if (!notUser) {
        mallPermissionList = await fetchUserMall()
      }
      if (mallPermissionList.length) {
        mallList = allMallData.filter(
          item => mallPermissionList.some(
            mallPermissionItem => mallPermissionItem.mallId === item.id
          )
        )
        const currRowMall = allMallData.find(item => item.id === this.curMallId)
        this.addForm.mallId = currRowMall ? currRowMall.id : mallList[0].id
      }
      !mallPermissionList.length && (mallList = allMallData)
      this.addMallList = mallList
    },
    fetchUserMall() {
      return new Promise(resolve => {
        this.$api.management
        .userMall({
          userId: this.userId
          // _t: Date.parse(new Date()) / 1000
        })
        .then(m => {
          let result = m.data
          resolve(result.data)
        })
      })
    },
    fetchMallList(account_id) {
      return new Promise(resolve => {
        this.$api.base.mall(
          {
            accountId: account_id,
            status_arr: '1,3'
          },
          null,
          true
        ).then((data) => {
          let result = data.data;
          result.data.forEach(item => {
            if (item.id == this.curMallId) {
              this.addForm.mallId = item.id;
            }
          })
          if (result.data.length) {
            if (!this.curMallId) {
              this.addForm.mallId = result.data[0].id;
            }
            this.addMallList = result.data;
          }
        })
      })
    },
    addchangeType(val) {
      if (val == 0) {
        this.addForm.level = 1;
        this.addAbleLevel = true;
      } else {
        this.addAbleLevel = false;
      }
    },
    addchangeLevel(val) {
      if (val == 2) {
        this.addForm.type = 1;
        this.addAbleType = true;
      } else {
        this.addAbleType = false;
      }
    },
    endDateChange() {
      let sDate = '', eDate = '';
      sDate = this.addForm.startDate;
      eDate = this.addForm.endDate;
      if (sDate && eDate) {
        let isIegal = Date.parse(eDate) >= Date.parse(sDate);
        if (!isIegal) {
          this.$message({
            showClose: true,
            message: this.$t('message.timeIllegal'),
            type: 'warning'
          });
          this.addForm.endDate = '';
          return;
        }
      }
    },
    addSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.addForm.type = 1
          if (this.addForm.level === 1) {
            this.addForm.mallId = null
          }
          this.$api.management.addEvent(this.addForm)
            .then((data) => {
              if (data.data.code == 200) {
                this.addDialogVisible = false;
                this.$parent.getTableData();
              } else {
                this.$message({
                  showClose: true,
                  type: 'warning',
                  message: this.$t('message.addAbnormal') + data.data.msg
                });
              }
            })
            .catch((error) => { })
        } else {
          return false;
        }
      });
    },
    addDialogClose() {
      this.$refs.addForm.resetFields();
      this.addForm = {
        name: '',
        mallId: null,
        type: null,
        level: null,
        startDate: '',
        endDate: '',
        eventDate: '',
        intro: ''
      },
        this.addAbleType = false;
      this.addAbleLevel = false;
    },
  }
}
</script>

<style scoped>
.manage-date-inp {
  width: 100%;
}
</style>