saas_masterPlatform/src/views/financed/arap/dislogTip.vue

<template>
  <div class="dislogTipBox">
    <BaseDialog
      width="620px"
      :isShow.sync="isShow"
      title="催款提醒"
      @close="close"
      @submit="submitForm"
    >
      <el-form
        inline
        hide-required-asterisk
        :model="form"
        :rules="rules"
        ref="form"
        label-width="100px"
      >
        <div>
          <el-form-item label="最新提醒：">2023-12-12 12:12:12 </el-form-item>
        </div>

        <div>
          <el-form-item prop="email" label="提醒设置：">
            <el-select v-model="form.email" placeholder="请选择提醒类型">
              <el-option label="立即提醒" value="1"></el-option>
              <el-option label="每天提醒" value="2"></el-option>
              <el-option label="每周提醒" value="3"></el-option>
              <el-option label="每月提醒" value="4"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="email1" label="" v-if="form.email == 2"
            ><el-time-select
              v-model="form.email1"
              :picker-options="{
                start: '08:30',
                step: '00:15',
                end: '18:30',
              }"
              placeholder="选择时间"
            >
            </el-time-select>
          </el-form-item>
          <el-form-item prop="email2" label="" v-if="form.email == 3">
            <el-select v-model="form.email2" placeholder="请选择成本类型">
              <el-option
                v-for="week in weekList"
                :key="week.value"
                :label="week.label"
                :value="week.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="email3" label="" v-if="form.email == 4"
            ><el-date-picker
              v-model="form.email3"
              type="datetime"
              placeholder="选择日期时间"
              default-time="8:00:00"
            >
            </el-date-picker>
          </el-form-item>
        </div>
      </el-form>
    </BaseDialog>
  </div>
</template>

<script>
export default {
  name: "DislogTip",
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      form: {},
      rules: {
        email: [
          { required: true, message: "请选择提现类型", trigger: "change" },
        ],
        email1: [{ required: true, message: "请选择时间", trigger: "change" }],
        email2: [{ required: true, message: "请选择星期", trigger: "change" }],
        email3: [{ required: true, message: "请选择日期", trigger: "blur" }],
        email4: [
          { required: true, message: "请输入百分比成本", trigger: "blur" },
        ],
      },
      weekList: [
        { label: "星期一", value: "1" },
        { label: "星期二", value: 2 },
        { label: "星期三", value: 3 },
        { label: "星期四", value: 4 },
        { label: "星期五", value: 5 },
        { label: "星期六", value: 6 },
        { label: "星期日", value: 7 },
      ],
    };
  },

  mounted() {},

  methods: {
    init() {
      this.resetForm();
      if (this.id) {
      }
    },
    close() {
      this.$refs["form"].resetFields();
    },
    submit() {},
    resetForm() {
      this.form = {
        email: undefined,
        email1: undefined,
        email2: undefined,
        email3: undefined,
      };
    },
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.isShow = false;
          this.$emit("search");
        } else {
          return false;
        }
      });
    },
  },
  computed: {
    isShow: {
      get() {
        if (this.dialogVisible) {
          this.init();
        }
        return this.dialogVisible;
      },
      set(val) {
        this.$emit("update:dialogVisible", false);
      },
    },
  },
};
</script>

<style lang="scss" scoped></style>
<style lang="scss">
.el-picker-panel__body-wrapper {
  .el-date-picker__header {
    display: none !important;
  }
}
</style>