drp-ui/src/views/marketing/dealer-authorization/authprivAdd.vue

<!-- 经销商授权信息 编辑新增-->
<template>
  <el-dialog :title="isAdd ? '新增' : '编辑'" :visible.sync="visible" :close-on-click-modal="false"
    :close-on-press-escape="false" :before-close="beforeClose" @close="$emit('close')">
    <el-form :model="formData" ref="authprivAdd" label-position="left" label-width="120px" v-loading="loading">

      <el-form-item v-for="column in formColumns" :label="column.title" :prop="column.key"
        :rules="{ required: true, message: `请输入${column.title}`, trigger: column.type == 'Input' ? 'blur' : 'change' }">

        <el-input v-if="column.type == 'Input'" :clearable="column.clearable" v-model="formData[column.key]"
          autocomplete="off"></el-input>

        <el-date-picker v-if="column.type == 'DateRange'" :clearable="column.clearable" v-model="formData[column.key]"
          format="yyyy-MM-dd " value-format="yyyy-MM-dd" type="daterange" range-separator="至" start-placeholder="开始日期"
          end-placeholder="结束日期"></el-date-picker>

        <el-date-picker v-if="column.type == 'Date'" :clearable="column.clearable" v-model="formData[column.key]"
          format="yyyy-MM-dd " value-format="yyyy-MM-dd" type="date" placeholder="选择日期"></el-date-picker>

      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取 消</el-button>
      <el-button type="primary" @click="handleConfirm('authprivAdd')">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import dealerApi from '@/api/marketing/dealer-authorization';
import { FormColumns } from './column';
import { initParams } from '../utils/init'

const initFormColumns = () =>
  FormColumns.map((column) => {
    const clearable = column.clearable || true;
    return {
      ...column,
      clearable,
    };
  });

export default {

  name: 'authprivAdd',

  data() {

    return {
      visible: false,
      isAdd: true,
      loading: false,
      formData: { ...initParams(initFormColumns()) },
      formColumns: initFormColumns(),

    }
  },
  methods: {
    // 控制弹窗展示
    setVisible(val) {
      this.visible = val;
    },
    setFormData(data) {

      if (data.id) {

        this.loading = true;

        this.isAdd = false;

        this.formData = {

          ...data,

          time: [data.startTime, data.endTime]

        };

        setTimeout(() => {
          this.loading = false;
        }, 250);

        return
      }

      this.isAdd = true;
    },
    // 重置表单数据
    handleResetData() {
      this.formData = {
        ...initParams(initFormColumns())
      }
      this.$refs['authprivAdd'].clearValidate();
    },
    // 取消
    handleCancel() {
      this.handleResetData();
      this.setVisible(false);
    },
    // 确定
    handleConfirm(formName) {

      this.$refs[formName].validate(async (valid) => {

        if (valid) {
          // 校验通过
          let isTime = this.formData.time && this.formData.time != '' && this.formData.time.length;

          const { name, id, } = this.$store.state.user;

          let params = {
            ...this.formData,
            startTime: isTime ? this.formData.time[0] : '',
            endTime: isTime ? this.formData.time[1] : '',
            updatePerson: name,
            updateTime: new Date().Format('yyyy-MM-dd HH:mm:ss'),
            ...(
              this.isAdd ? {
                status: '0',
                createPerson: name,
                createTime: new Date().Format('yyyy-MM-dd HH:mm:ss'),
              } : {}
            )

          }
          delete params['time']
          console.log(params, 'params--------');

          try {
            this.loading = true;
            let { code, msg } = await (this.isAdd ?
              dealerApi.insert(params) :
              dealerApi.update(params))

            if (code === 200) {
              this.handleCancel();
            }

          } catch (error) {
            console.log(error, 'error');
          } finally {
            this.loading = false;
          }

        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    beforeClose(done) {
      this.handleResetData();
      done();
    },
  },
  created() {
  }

}
</script>


<style lang="scss" scoped>
.authpriv {
  width: calc(100% - 24px);
  height: 100%;
  margin: 10px
}
</style>