tongzhipeizhi.vue 7.73 KB
<template>
    <el-dialog :title="title" :visible.sync="open" v-if="open" width="1000px" append-to-body top="10vh" custom-class="new_dialog">
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item label="消息推送方式" prop="ruleList" label-width="120px">
                        短信
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item label="手机号" prop="idCard" label-width="120px">
                        <el-input v-model="form.idCard" placeholder="请输入手机号" :disabled='disabled' />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item label="消息推送方式" prop="ruleList" label-width="120px">
                        邮箱
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="24">
                    <el-form-item label="邮箱" prop="ruleList" label-width="120px">
                        <el-input v-model="form.reason" type="textarea" placeholder="请输入邮箱" show-word-limit :disabled='disabled' />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer" v-if="!disabled">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
        </div>
    </el-dialog>
</template>
  
  <script>
import { blackListSave, blackListModify, businessSourcePage } from "@/api/postList/list";
export default {
    name: 'addMobile',
    dicts: ['sys_normal_disable', 'name_roll_type'],
    props: [

    ],
    data() {
        return {
            imageUrl: '',
            labelProduct: [],
            checkList: [],
            open: false,
            // 弹出层标题
            title: "",
            // 表单参数
            form: {},
            domains: [{
                value: ''
            }],
            disabled: true,
            // 表单校验
            rules: {
                name: [
                    { required: true, message: "客户名称不能为空", trigger: "blur" }
                ],
                cellPhone: [
                    { required: true, message: "消息名称不能为空", trigger: "blur" }
                ],
                idCard: [
                    { required: true, message: "手机号不能为空", trigger: "blur" }
                ],
                source: [
                    { required: true, message: "来源产品不能为空", trigger: "blur" }
                ],
                rollType: [
                    { required: true, message: "名单类型不能为空", trigger: "blur" }
                ],
                reason: [
                    { required: true, message: "加入原因不能为空", trigger: "blur" }
                ]
            },
            pickerOptions: {
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                        picker.$emit('pick', new Date());
                    }
                }, {
                    text: '昨天',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24);
                        picker.$emit('pick', date);
                    }
                }, {
                    text: '一周前',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', date);
                    }
                }]
            },
            value2: '',
            id: ''
        }
    },
    methods: {
        // 取消按钮
        cancel() {
            this.open = false;
            this.form = {}
        },
        add() {
            this.open = true;
            this.form = {}
            this.id = ''
            var lis = {
                pageNum: 1,
                pageSize: 10000,
            }
            businessSourcePage(lis).then(response => {
                this.labelProduct = response.rows
            });
        },
        edit(res) {
            this.form = {}
            this.open = true;
        },
        see(res) {
            this.form = res
            this.open = true;
            var lis = {
                pageNum: 1,
                pageSize: 10000,
            }
            businessSourcePage(lis).then(response => {
                this.labelProduct = response.rows
            });
        },
        removeDomain(item) {
            var index = this.domains.indexOf(item)
            if (index !== -1) {
                this.domains.splice(index, 1)
            }
        },
        addDomain() {
            this.domains.push({
                value: '',
                key: Date.now()
            });
        },
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        /** 提交按钮 */
        submitForm: function () {
            this.$refs["form"].validate(valid => {
                this.form.relieveTime = this.value2
                this.form.type = 'PERSON'
                this.form.id = this.id
                if (valid) {
                    if (this.id) {
                        blackListModify(this.form).then(response => {
                            if (response.code == 200) {
                                this.$modal.msgSuccess(response.msg);
                                this.open = false;
                                this.$emit("getList")
                            } else {
                                this.$modal.msgSuccess(response.msg);
                            }
                        });
                    } else {
                        blackListSave(this.form).then(response => {
                            if (response.code == 200) {
                                this.$modal.msgSuccess(response.msg);
                                this.open = false;
                                this.$emit("getList")
                            } else {
                                this.$modal.msgSuccess(response.msg);
                            }
                        });
                    }
                }
            });
        },
    }
}
</script>
  
  <style>
  .box1 {
      display: flex;
      justify-content: space-around;
      width: 100%;
  }
  
  .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
  }
  
  .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
  }
  
  .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
  }
  
  .avatar {
      width: 178px;
      height: 178px;
      display: block;
  }
  
  .new_dialog {
      height: 70%;
      overflow: hidden;
      overflow-y: scroll;
  }
  </style>