版本2

Mr.Zhang

2023-10-28 901a7fd1c678c4dde1481d86f8166380a5ecd834

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<template>
  <GlobalWindow :title="title" :visible.sync="visible" :confirm-working="isWorking" @confirm="confirm">
    <el-form :model="form" ref="form" :rules="rules">
      <el-form-item label="登录账号" prop="userName">
        <el-input v-model="form.userName" :disabled="form.id ? true : false" maxlength="20" placeholder="请输入，不超过20个字符" v-trim />
      </el-form-item>
      <el-form-item label="登录密码" prop="password">
        <el-input v-model="form.password" :disabled="form.id ? true : false" show-password placeholder="密码支持数字、字符组合，长度6-18位" v-trim />
      </el-form-item>
      <el-form-item label="主播姓名" prop="realName">
        <el-input v-model="form.realName" placeholder="请输入主播姓名" v-trim />
      </el-form-item>
      <el-form-item label="手机号" prop="mobile">
        <el-input v-model="form.mobile" maxlength="11" show-word-limit placeholder="请输入手机号" v-trim />
      </el-form-item>
    </el-form>
  </GlobalWindow>
</template>
  
<script>
import BaseOpera from '@/components/base/BaseOpera'
import GlobalWindow from '@/components/common/GlobalWindow'
export default {
  name: 'OperaBrandWindow',
  extends: BaseOpera,
  components: { GlobalWindow },
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('登录密码不能为空'));
      } else {
        if (!/^(?![^a-zA-Z]+$)(?!\D+$)/.test(value)) {
          callback(new Error('密码支持数字、字符组合，长度6-18位'));
        }
        callback();
      }
    };
    var validatePhone = (rule, value, callback) => {
      if (value === '') {
        callback();
      } else {
        if (!/^1[3,4,5,6,7,8,9][0-9]{9}$/.test(value)) {
          callback(new Error('手机号码格式不正确！'));
        }
        callback();
      }
    };
    return {
      // 表单数据
      form: {
        id: null,
        userName: '',
        password: '',
        realName: '',
        mobile: ''
      },
      // 验证规则
      rules: {
        userName: [
          { required: true, message: '登录账号不能为空', trigger: 'blur' }
        ],
        password: [
          { required: true, validator: validatePass, trigger: 'blur' }
        ],
        realName: [
          { required: true, message: '主播姓名不能为空', trigger: 'blur' }
        ],
        mobile: [
          { required: true, validator: validatePhone, trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.config({
      api: '/business/anchor',
      'field.id': 'id'
    })
  }
}
</script>