<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 v-for="item in shopTypeList" :key="item.name" :label="item.name" :value="item.value">
|
</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="storeAddress">
|
<el-input v-model="store.storeAddress" 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="handleUser">确定</el-button>
|
</div>
|
</footer>
|
</div>
|
</template>
|
<script>
|
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: {
|
},
|
createUserRules: {
|
owner: [
|
{ required: true, trigger: "blur", validator: validateNickname },
|
],
|
storetype:[
|
{
|
required:true,trigger:'change', validator:validateType,
|
}
|
],
|
idcardinfo: [
|
{ required: true, trigger: "blur", validator: validatePass },
|
],
|
storeAddress: [
|
{ 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 }
|
],
|
}
|
},
|
created() {
|
const {userInfo} = this;
|
console.log(userInfo)
|
this.store = userInfo;
|
},
|
methods: {
|
handleUser() {
|
const { store } = this;
|
this.$refs.user.validate((valid)=>{
|
console.log(valid);
|
if(valid){
|
this.$axios({
|
method:'put',
|
url:'sccg/store/storeinfo/update',
|
data:{
|
contact:store.contact,
|
idcardinfo:store.idCardInfo,
|
owner:store.owner,
|
storeAddress:store.storeAddress,
|
storeName:store.storeName,
|
id:store.id,
|
storePhoto:store.storePhoto,
|
storeScore:store.storeScore,
|
}
|
})
|
.then(res=>{
|
console.log(res);
|
if(res.code===200){
|
this.$message({
|
type:'success',
|
message:'修改成功',
|
})
|
this.$emit('changeDialog',{flag:false});
|
}else{
|
this.$message({
|
type:'error',
|
message:res.message,
|
})
|
}
|
})
|
}else{
|
return false;
|
}
|
})
|
},
|
handleBack(){
|
this.$emit('changeDialog',{flag:false})
|
}
|
},
|
props: ['userInfo','changeDialog']
|
}
|
</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>
|
