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">
    <el-form :model="formData" ref="authprivAdd" label-position="left" label-width="120px">

      <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 { fcall } from 'q';

export default {

  name: 'authprivAdd',

  data() {
    const arr2Obj = function (data, keyName, valueName) {
      return Object.fromEntries(
        data.map((item) => [item[keyName], item[valueName]])
      );
    };

    const formColumns = [
      { title: '经销商名称', key: 'dealerName', type: 'Input' },
      { title: '授权区/医院', key: 'authorizedAreaName', type: 'Input' },
      { title: '授权产品', key: 'authorizedProductsName', type: 'Input' },
      { title: '授权期限', key: 'time', type: 'DateRange' },
      { title: '授权书开具时间', key: 'issueTime', type: 'Date' },
    ];

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

    const initFormData = () => arr2Obj(initFormColumns(), "key", "value")

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

    }
  },
  methods: {
    // 控制弹窗展示
    setVisible(val) {

      this.visible = val;

    },
    // 取消
    handleCancel() {
      this.setVisible(false);
    },
    // 确定
    handleConfirm(formName) {

      console.log(this.formData, 'this.formData');

      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 校验通过
          let isTime = this.formData.time && this.formData.time != '' && this.formData.time.length;
          let params = {
            ...this.formData,
            startTime: isTime ? this.formData.time[0] : '',
            endTime: isTime ? this.formData.time[1] : '',
          }
          delete params['time']
          console.log(params, 'params--------');
          // this.setVisible(false);
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  },
  created() {

  }

}
</script>


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