<template>
|
<div class="createUser">
|
<main>
|
<div class="mainContent">
|
<el-form ref="user" label-width="140px" autoComplete="on" :model="store" :rules="createUserRules"
|
label-position="right">
|
<!-- 店铺类型 -->
|
<el-form-item class="optionItem" label="店铺类型:" prop="storetype">
|
<el-select v-model="store.storetype" placeholder="请选择店铺类型">
|
<el-option value="1">
|
<el-tree ref="tree" :check-strictly="true" :data="shopTypeList" :props="defaultProps"
|
show-checkbox @check-change="handleCheck" default-expand-all node-key="id">
|
</el-tree>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<!-- 店铺名称 -->
|
<el-form-item class="optionItems" label="店铺名称:" prop="storename">
|
<el-input v-model="store.storename" placeholder="请填写店铺名称"></el-input>
|
</el-form-item>
|
<!-- 负责人 -->
|
<el-form-item class="optionItem" label="负责人:" prop="owner">
|
<el-input v-model="store.owner" placeholder="请填写店铺负责人名字"></el-input>
|
</el-form-item>
|
<!-- 店铺描述 -->
|
<el-form-item class="optionItem" label="店铺描述:" prop="storedesc">
|
<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" maxlength="300" show-word-limit
|
v-model="store.storedesc" placeholder="输入店铺描述"></el-input>
|
<!-- <el-input type="textarea" v-model="user.storedesc" placeholder="输入部门描述"></el-input> -->
|
</el-form-item>
|
<!-- 联系方式 -->
|
<el-form-item class="optionItem" label="联系方式:" prop="contact">
|
<el-input v-model="store.contact" placeholder="请填写店铺联系方式"></el-input>
|
</el-form-item>
|
<!-- 店铺地址 -->
|
<el-form-item class="optionItem" label="店铺地址:" prop="storeaddr">
|
<el-input v-model="store.storeaddr" placeholder="请填写店铺详细地址"></el-input>
|
</el-form-item>
|
</el-form>
|
</div>
|
</main>
|
<footer>
|
<div class="optionBtn">
|
<el-button class="btn reset" @click="handleBack">取消</el-button>
|
<el-button type="primary" class="btn submit" @click="handleStore">确定</el-button>
|
</div>
|
</footer>
|
</div>
|
</template>
|
<script>
|
import { getCodeList } from '@/utils/helper'
|
export default {
|
data() {
|
const validateNickname = (rule, value, callback) => {
|
if (!value) {
|
callback(new Error("负责人不能为空"));
|
} else {
|
callback();
|
}
|
};
|
const validatePass = (rule, value, callback) => {
|
if (!value) {
|
callback();
|
} else {
|
callback();
|
}
|
};
|
const validateTruename = (rule, value, callback) => {
|
if (!value) {
|
callback(new Error('店铺地址不能为空'));
|
} else {
|
callback()
|
}
|
};
|
const validatePhone = (rule, value, callback) => {
|
if (!value) {
|
callback(new Error("请填写手机号码"));
|
} else {
|
const rep = /(^1[3|4|5|7|8|9]\d{9}$)|(^09\d{8}$)/
|
if (!rep.test(value)) {
|
callback("请输入正确的手机号码");
|
} else {
|
callback();
|
}
|
}
|
};
|
const validateMail = (rule, value, callback) => {
|
if (value) {
|
callback();
|
} else {
|
callback(new Error('店铺名称不能为空'))
|
}
|
};
|
const validateType = (rule, value, callback) => {
|
if (!value) {
|
callback(new Error('门店类型不能为空'));
|
} else {
|
callback();
|
}
|
};
|
const validateDesc = (rule, value, callback) => {
|
if (!value) {
|
callback();
|
} else {
|
callback();
|
}
|
};
|
return {
|
store: {
|
contact: '',
|
idcardinfo: '',
|
owner: '',
|
storeaddr: '',
|
storename: '',
|
storedesc: '',
|
storetype: '',
|
},
|
createUserRules: {
|
owner: [
|
{ required: true, trigger: "blur", validator: validateNickname },
|
],
|
storetype: [
|
{
|
required: true, trigger: 'change', validator: validateType,
|
}
|
],
|
idcardinfo: [
|
{ required: true, trigger: "blur", validator: validatePass },
|
],
|
storeaddr: [
|
{ required: true, trigger: "blur", validator: validateTruename },
|
],
|
contact: [
|
{ required: true, trigger: "blur", validator: validatePhone },
|
],
|
storename: [
|
{ required: true, trigger: "blur", validator: validateMail },
|
],
|
storedesc: [
|
{ required: false, trigger: "blur", validator: validateDesc },
|
],
|
},
|
shopTypeList: [
|
{ name: '类型1', value: 1 }, { name: '类型2', value: 2 }
|
],
|
defaultProps: {
|
children: 'children',
|
label: 'name',
|
disabled: (data, node) => {
|
if (node.level === 1 && node.childNodes.length !== 0) {
|
return !data.leaf
|
}
|
}
|
},
|
selectOrg: {
|
orgsid: []
|
},
|
}
|
},
|
created() {
|
this.getShopTypeList();
|
},
|
methods: {
|
handleStore() {
|
const { store } = this;
|
this.$refs.user.validate((valid) => {
|
console.log(valid);
|
if (valid) {
|
this.$axios({
|
method: 'post',
|
url: 'sccg/store/storeinfo/add',
|
data: {
|
contact: store.contact,
|
idcardinfo: '511025184612310215',
|
owner: store.owner,
|
storeaddr: store.storeaddr,
|
storename: store.storename,
|
}
|
})
|
.then(res => {
|
console.log(res);
|
if (res.code === 200) {
|
this.$message({
|
type: 'success',
|
message: '添加成功',
|
})
|
this.$emit('sendDialog', { flag: false });
|
} else {
|
this.$message({
|
type: 'error',
|
message: res.message,
|
})
|
}
|
})
|
} else {
|
return false;
|
}
|
})
|
},
|
handleBack() {
|
this.$emit('sendDialog', { flag: false })
|
},
|
// 获取字典
|
async getShopTypeList() {
|
let arr = await getCodeList('16');
|
this.shopTypeList = this.createShopTypeTree(arr);
|
},
|
// 创建商铺类型树
|
createShopTypeTree(arr) {
|
if (arr.length && arr.length !== 0) {
|
// 获取顶级菜单
|
let treeRoot = arr.filter(item => {
|
return item.parentId === 0
|
})
|
console.log(treeRoot);
|
// 添加child
|
treeRoot.forEach(item => {
|
item.children = []
|
arr.forEach(child => {
|
if (child.parentId === item.id) {
|
item.children.push(child)
|
}
|
})
|
})
|
return treeRoot;
|
}
|
},
|
handleCheck(data, checked) {
|
this.store.storetype = data.name;
|
// 获取当前选择的id在数组中的索引
|
const indexs = this.selectOrg.orgsid.indexOf(data.id)
|
// 如果不存在数组中，并且数组中已经有一个id并且checked为true的时候，代表不能再次选择。
|
if (indexs < 0 && this.selectOrg.orgsid.length === 1 && checked) {
|
this.$message({
|
message: '只能选择一个部门！',
|
type: 'warning',
|
showClose: true
|
})
|
// 设置已选择的节点为false 很重要
|
this.$refs.tree.setChecked(data, false)
|
} else if (this.selectOrg.orgsid.length === 0 && checked) {
|
// 发现数组为空 并且是已选择
|
// 防止数组有值，首先清空，再push
|
this.selectOrg.orgsid = []
|
this.selectOrg.orgsid.push(data.id)
|
} else if (
|
indexs >= 0 &&
|
this.selectOrg.orgsid.length === 1 &&
|
!checked
|
) {
|
// 再次直接进行赋值为空操作
|
this.selectOrg.orgsid = []
|
this.store.storetype = ''
|
}
|
},
|
},
|
props: ['sendDialog']
|
}
|
</script>
|
<style lang="scss" scoped>
|
.createUser {
|
border-radius: 1px;
|
background-color: #09152f;
|
padding-bottom: 50px;
|
|
main {
|
text-align: left;
|
padding: 0 55px;
|
background-color: #09152f;
|
padding-top: 20px;
|
|
.mainContent {
|
display: flex;
|
justify-content: center;
|
margin-top: 50px;
|
|
&::v-deep .el-form-item__label {
|
color: #4b9bb7;
|
}
|
|
&::v-deep .el-input__inner {
|
background-color: #09152f;
|
border: 1px solid #17324c;
|
}
|
|
&::v-deep .el-textarea__inner {
|
background-color: #09152f;
|
border: 1px solid #17324c;
|
}
|
|
.el-form-item__content {
|
width: 400px;
|
|
.el-select {
|
width: 100%;
|
}
|
}
|
|
.optionHandleSp {
|
display: flex;
|
|
.areaNumber,
|
.moreNumber {
|
flex: 1;
|
}
|
|
.telNumber {
|
flex: 2;
|
}
|
}
|
|
}
|
}
|
|
footer {
|
border-top: 1px solid #4b9bb7;
|
display: flex;
|
justify-content: flex-end;
|
padding: 0 20px;
|
|
.optionBtn {
|
display: flex;
|
margin-top: 20px;
|
|
.btn {
|
padding: 12px 50px;
|
}
|
}
|
}
|
|
::v-deep .el-textarea__inner {
|
background-color: #09152f;
|
border: 1px solid #17324c;
|
}
|
|
::v-deep .el-input__count {
|
background-color: #09152f;
|
}
|
}
|
</style>
|
