module.exports = function(inputName,compoenntName) {
return `<template>
<el-dialog
:title="title"
:center="true"
align="left"
top="5vh"
width="1040px"
@close="closeModel"
:close-on-click-modal="false"
:visible.sync="showModelThis"
v-loading="loading"
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
>
<el-card>
<el-row :gutter="10">
<el-col :span="24">
<el-form
:model="ruleForm"
status-icon
:rules="rulesThis"
ref="ruleForm"
label-width="110px"
class="demo-ruleForm"
>
<el-form-item
label="登录名"
prop="loginName"
v-if="id === 'add' || isDetail"
>
<el-input
v-model="ruleForm.loginName"
:disabled="isDetail"
></el-input>
</el-form-item>
<el-form-item label="姓名" prop="fullName">
<el-input
v-model="ruleForm.fullName"
:disabled="isDetail"
></el-input>
</el-form-item>
<el-form-item label="手机号" prop="tel">
<el-input v-model="ruleForm.tel" :disabled="isDetail"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password" v-if="id === 'add'">
<el-input
type="password"
placeholder="密码"
:maxlength="20"
v-model="ruleForm.password"
></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="password2" v-if="id === 'add'">
<el-input
type="password"
placeholder="再次输入密码"
:maxlength="20"
v-model="ruleForm.password2"
></el-input>
</el-form-item>
</el-form>
</el-col>
<el-col :span="24" style="text-align: right;">
<el-button type="primary" @click="submitForm" v-if="!isDetail"
>保 存
</el-button>
<el-button @click="showModelThis = false">{{ isDetail ? "关 闭" : "取 消" }}</el-button>
</el-col>
</el-row>
</el-card>
</el-dialog>
</template>
<script>
import asyncRequest from "@/apis/service/${inputName}";
import resToken from "@/mixins/resToken";
import {
isnumber,
isMobile,
validEmail,
isAlphanumeric,
isChinese,
isEmoticon,
validAlphabets,
} from "@/utils/validate";
export default {
name: '${compoenntName}',
props: ["showModel", "id", "isDetail","sitem"],
mixins: [resToken],
data() {
const validateusername = (rule, value, callback) => {
if (value === "") {
callback(new Error("账号不能为空！"));
} else {
if (value.length < 6 || value.length > 18) {
callback(new Error("账号规则为6~18位数字与字母组合！"));
} else {
if (isnumber(value)) {
callback(new Error("账号规则为6~18位数字与字母组合！"));
} else if (validAlphabets(value)) {
callback(new Error("账号规则为6~18位数字与字母组合！"));
} else if (!isAlphanumeric(value)) {
callback(new Error("账号规则为6~18位数字与字母组合！"));
} else {
callback();
}
}
}
};
const validatename = (rule, value, callback) => {
if (value === "") {
callback(new Error("真实姓名不能为空！"));
} else {
if (value.length < 2 || value.length > 12) {
callback(new Error("真实姓名规则为2~12位汉字！"));
} else {
if (!isChinese(value)) {
console.log(9999);
callback(new Error("真实姓名规则为2~12位汉字！"));
} else if (isEmoticon(value)) {
console.log(2345);
callback(new Error("真实姓名规则为2~12位汉字！"));
} else {
callback();
}
}
}
};
const validatemobile = (rule, value, callback) => {
if (value === "") {
callback(new Error("手机号不能为空！"));
} else {
if (!isMobile(value)) {
callback(new Error("手机号格式不正确！"));
} else {
callback();
}
}
};
const validateEmail = (rule, value, callback) => {
if (value === "") {
callback();
} else {
if (!validEmail(value)) {
callback(new Error("邮箱格式不正确！"));
} else {
callback();
}
}
};
return {
loading: false,
title: "添加账号",
showModelThis: this.showModel,
ruleForm: {
username: "", // 账号
name: "", // 真实姓名
mobile: "",
email: "",
role_id: "",
status: "1",
item: [],
},
rulesThis: this.rules,
rules: {
name: [
{
required: true,
validator: validatename,
trigger: "blur",
},
],
username: [
{
required: true,
validator: validateusername,
trigger: "blur",
},
],
mobile: [
{
required: true,
validator: validatemobile,
trigger: "blur",
},
],
email: [
{
required: false,
validator: validateEmail,
trigger: "blur",
},
],
role_id: [
{
required: true,
message: "请选择角色",
trigger: "change",
},
],
item: [
{
type: "array",
required: true,
message: "请选择所在部门",
trigger: "change",
},
],
status: [
{
required: true,
message: "请选择状态",
trigger: "change",
},
],
}
};
},
watch: {
showModel: function(val) {
this.showModelThis = val;
if (val) {
this.initForm();
}
},
showModelThis(val) {
if (!val) {
this.$emit("cancel");
}
}
},
methods: {
closeModel() {
console.log("closeModel!!");
},
async initForm() {
this.loading = true;
// await this.getRole();
if (this.id === "add") {
this.title = "添加账号";
this.rulesThis = this.rules;
await this.resetForm();
} else {
if (this.isDetail) {
this.title = "账号详情";
this.rulesThis = {};
} else {
this.title = "修改账号";
this.rulesThis = this.rules;
}
await this.resetForm(this.sitem);
// await this.initData()
}
this.loading = false;
},
// async getRole() {
// const model = {
// status: "", // 状态
// level: "", // 姓名
// role_name: "",
// };
// const res = await asyncRequest.getRole(model);
// if (res && res.code === 0 && res.data) {
// this.roleList = res.data;
// this.roleList.map((v1) => {
// v1.id += "";
// v1.status += "";
// return v1;
// });
// }
// },
async initData() {
const res = await asyncRequest.detail({ id: this.id });
if (res && res.code === 0 && res.data) {
this.ruleForm = res.data;
this.ruleForm.role_id = this.ruleForm.role;
} else if (res && res.code >= 100 && res.code <= 104) {
await this.logout();
} else {
this.$message.warning(res.message);
}
},
async resetForm(sitem) {
// 重置
await this.$nextTick(() => {
if (this.$refs.ruleForm) {
this.$refs.ruleForm.resetFields();
this.$refs.ruleForm.clearValidate();
const { username, nickname, mobile, email, roleid, status, item } =
sitem;
this.ruleForm = {
username: username || "", // 账号
name: nickname || "", // 真实姓名
mobile: mobile || "",
email: email || "",
role_id: roleid || "",
status: status || "",
item: item || [],
};
if (this.id === "add" || this.isDetail) {
this.rules.username[0].required = false;
}
}
});
},
async submitForm() {
await this.$refs.ruleForm.validate(async (valid) => {
if (valid) {
this.loading = true;
const { username, name, mobile, email, role_id, status } = JSON.parse(
JSON.stringify(this.ruleForm)
);
const model = {
id: this.id,
username: username || "", // 账号
nickname: name || "", // 真实姓名
mobile: mobile || "",
email: email || "",
role: role_id || "",
status: status || "",
};
let res = {};
if (this.id === "add") {
delete model["id"];
res = await asyncRequest.add(model);
} else {
res = await asyncRequest.update(model);
}
this.loading = false;
if (res && res.code === 0) {
const title = this.id === "add" ? "添加成功" : "修改成功";
this.$notify.success({
title,
message: "",
});
this.showModelThis = false;
// 刷新
this.$emit("refresh");
} else if (res && res.code >= 100 && res.code <= 104) {
await this.logout();
} else {
this.$message.warning(res.message);
}
} else {
console.log("error submit!!");
return false;
}
});
},
},
};
</script>
<style lang="scss" scoped>
.${compoenntName} {
}
</style>
`;
};