cmanager/src/views/manage/company/addAccount.vue

<template>
  <el-drawer
    title="添加账号"
    :visible.sync="visible"
    size="60%"
    @closed="closed"
    :class="{'avue--detail':!operation,
    'avue--view':!operation}"
  >
    <avue-form ref="form" v-model="form" :option="option" @submit="submit">
      <template slot="code">
        <span>灵活用工</span>
      </template>
      <template slot="role">
        <span>企业管理员</span>
      </template>
    </avue-form>
  </el-drawer>
</template>

<script>
// import { isMobile } from "@/util/validate";
import { getAdmin } from "@/api/manage/company";
import { add } from "@/api/manage/account";
// import { check18IdCardNo } from "@/util/validate";
import md5 from "js-md5";
import lodash from "lodash";

// const validateMobile = (rule, value, callback) => {
//   if (isMobile(value)) {
//     callback();
//   } else {
//     callback(new Error("手机号格式不正确"));
//   }
// };

export default {
  props: {},
  data () {
    return {
      visible: false,
      form: {},
      operation: false,
    };
  },
  computed: {
    option () {
      return {
        menuPosition: "right",
        disabled: !this.operation,
        menuBtn: this.operation,
        group: [
          {
            label: "基础信息",
            prop: "baseInfo",
            icon: "el-icon-user-solid",
            column: [
              {
                label: "账号",
                prop: "account",
                search: true,
                placeholder: "请输入手机号",
                rules: [
                  {
                    required: true,
                    whitespace: true,
                    message: "请输入登录手机号",
                    trigger: "blur",
                  },
                  // { validator: validateMobile, trigger: "blur" },
                ],
                span: 12,
              },
              {
                label: "密码",
                prop: "password",
                display: this.operation,
                rules: [
                  {
                    required: true,
                    whitespace: true,
                    message: "请输入密码",
                    trigger: "blur",
                  },
                ],
              },
            ],
          },
          {
            label: "详细信息",
            prop: "detailInfo",
            icon: "el-icon-s-order",
            column: [
              {
                label: "用户姓名",
                prop: "realName",
                hide: true,
                rules: [
                  {
                    required: true,
                    whitespace: true,
                    message: "请输入用户姓名",
                    trigger: "blur",
                  },
                ],
              },
              {
                label: "身份证号",
                prop: "idNumber",
                overHidden: true,
                rules: [
                  {
                    required: true,
                    whitespace: true,
                    message: "请输入身份证号",
                    trigger: "blur",
                  },
                  // {
                  //   validator: (rule, value, callback) => {
                  //     if (check18IdCardNo(value)) {
                  //       callback();
                  //     } else {
                  //       callback(new Error("身份证格式不正确"));
                  //     }
                  //   },
                  // },
                ],
              },
              {
                label: "用户性别",
                prop: "sex",
                type: "select",
                dicData: [
                  {
                    label: "男",
                    value: 1,
                  },
                  {
                    label: "女",
                    value: 2,
                  },
                  {
                    label: "不限",
                    value: 3,
                  },
                ],
                hide: true,
              },
              {
                label: "用户生日",
                type: "date",
                prop: "birthday",
                format: "yyyy-MM-dd",
                valueFormat: "yyyy-MM-dd hh:mm:ss",
                hide: true,
              },
              {
                label: "账号状态",
                prop: "statusName",
                hide: true,
                display: false,
              },
            ],
          },
          {
            label: "职责信息",
            prop: "dutyInfo",
            icon: "el-icon-s-custom",
            column: [
              {
                label: "开通产品",
                prop: "code",
                formslot: true,
              },
              {
                label: "所属角色",
                prop: "role",
                formslot: true,
              },
            ],
          },
        ],
      };
    },
  },
  methods: {
    submit (form, done) {
      const data = lodash.clone(form);
      data.password = md5(data.password);
      add(data)
        .then((resp) => {
          this.$message({ type: "success", message: resp.data.msg });
          done();
          this.visible = false;
        })
        .catch(() => {
          done();
        });
    },
    open (row) {
      this.form.companyId = row.id;
      this.form.tenantId = row.tenantId;
      this.form.stationId = row.stationId;
      getAdmin(row.id).then((resp) => {
        if (resp.data.data.id) {
          this.operation = false;
          this.form = resp.data.data;
        } else {
          this.operation = true;
        }
        this.visible = true;
      });
    },
    closed () {
      this.operation = false;
      this.$refs.form.resetForm();
    },
  },
  watch: {
    "form.account": function (value) {
      if (value && value.length === 11) {
        this.form.password = value.substring(5);
      }
    },
  },
};
</script>

<style>
</style>