You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
359 lines
8.7 KiB
359 lines
8.7 KiB
<template>
|
|
<div class="user-edit">
|
|
<!-- Drawer抽屉 -->
|
|
<Drawer :title="title" v-model="visible" width="720" draggable :mask-closable="type == '0'">
|
|
<div :style="{ maxHeight: maxHeight }" class="drawer-content">
|
|
|
|
|
|
<Form ref="form" :model="form" :rules="formValidate" label-position="top">
|
|
<Row :gutter="32">
|
|
<Col span="12">
|
|
<FormItem label="店铺名称" prop="shopName">
|
|
<Input v-model="form.shopName" autocomplete="off" :maxlength="16" />
|
|
</FormItem>
|
|
</Col>
|
|
<Col span="12">
|
|
<FormItem label="店铺图标" class="form-noheight">
|
|
<upload-pic-input v-model="form.shopIcon"></upload-pic-input>
|
|
</FormItem>
|
|
</Col>
|
|
</Row>
|
|
<Row :gutter="32">
|
|
<Col span="12">
|
|
<FormItem label="所属区域" class="form-noheight">
|
|
<shopArea-tree-choose @on-change="handleSelectShopAreaTree"
|
|
ref="shopAreaTree"></shopArea-tree-choose>
|
|
</FormItem>
|
|
</Col>
|
|
<Col span="12">
|
|
<FormItem label="店铺分类" class="form-noheight">
|
|
<dict dict="shopType" v-model="form.shopType" transfer />
|
|
</FormItem>
|
|
</Col>
|
|
</Row>
|
|
<Row :gutter="32">
|
|
<Col span="24">
|
|
<FormItem label="店铺详细地址" prop="shopAddress">
|
|
<Input v-model="form.shopAddress" />
|
|
</FormItem>
|
|
</Col>
|
|
</Row>
|
|
<Row :gutter="32">
|
|
<Col span="12">
|
|
<FormItem label="联系方式" prop="contactPhone">
|
|
<Input v-model="form.contactPhone" autocomplete="off" :maxlength="16" />
|
|
</FormItem>
|
|
</Col>
|
|
<Col span="12">
|
|
<FormItem label="副标题" prop="contactPhone">
|
|
<Input v-model="form.subtitle" autocomplete="off" :maxlength="16" />
|
|
</FormItem>
|
|
</Col>
|
|
</Row>
|
|
<Row :gutter="32">
|
|
<Col span="12">
|
|
<FormItem label="支付宝账号" prop="contactPhone">
|
|
<Input v-model="form.aliAccount" autocomplete="off" :maxlength="16" />
|
|
</FormItem>
|
|
</Col>
|
|
<Col span="12">
|
|
<FormItem label="支付宝户名" prop="contactPhone">
|
|
<Input v-model="form.aliName" autocomplete="off" :maxlength="16" />
|
|
</FormItem>
|
|
</Col>
|
|
</Row>
|
|
<Row :gutter="32">
|
|
<Col span="12">
|
|
<FormItem label="排名" prop="shoprank">
|
|
<Input v-model="form.shoprank" autocomplete="off" :maxlength="16" />
|
|
</FormItem>
|
|
</Col>
|
|
</Row>
|
|
<Row :gutter="32">
|
|
|
|
<Col span="24">
|
|
<FormItem label="备注">
|
|
<Input type="textarea" v-model="form.remark" :rows="4" />
|
|
</FormItem>
|
|
</Col>
|
|
</Row>
|
|
<Divider />
|
|
|
|
|
|
|
|
</Form>
|
|
</div>
|
|
<div class="drawer-footer br" v-show="type != '0'">
|
|
<Button type="primary" :loading="submitLoading" @click="submit">提交</Button>
|
|
<Button @click="visible = false">取消</Button>
|
|
</div>
|
|
</Drawer>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getUsersByRoleName,
|
|
getDictDataByType
|
|
} from "@/api/index";
|
|
import {
|
|
validateUsername,
|
|
validateMobile,
|
|
validatePassword,
|
|
} from "@/libs/validate";
|
|
import shopAreaTreeChoose from "@/views/my-components/hiver/shopArea-tree-choose";
|
|
import uploadPicInput from "@/views/my-components/hiver/upload-pic-input";
|
|
import SetPassword from "@/views/my-components/hiver/set-password";
|
|
import dict from "@/views/my-components/hiver/dict";
|
|
import {
|
|
addShop,
|
|
editShop,
|
|
initShopArea,
|
|
loadShopArea,
|
|
} from "@/api/app";
|
|
export default {
|
|
name: "addEdit",
|
|
components: {
|
|
shopAreaTreeChoose,
|
|
uploadPicInput,
|
|
SetPassword,
|
|
dict,
|
|
},
|
|
props: {
|
|
value: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
data: {
|
|
type: Object,
|
|
},
|
|
type: {
|
|
type: String,
|
|
default: "0",
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
roleList: [],
|
|
roleList2: [],
|
|
shopAreaList: [],
|
|
businessDistrictLevelList: [],
|
|
visible: this.value,
|
|
title: "",
|
|
passColor: "",
|
|
submitLoading: false,
|
|
maxHeight: 510,
|
|
form: {
|
|
address: [],
|
|
},
|
|
formValidate: {
|
|
// 表单验证规则
|
|
username: [{
|
|
required: true,
|
|
message: "请输入登录账号",
|
|
trigger: "blur"
|
|
},
|
|
{
|
|
validator: validateUsername,
|
|
trigger: "blur"
|
|
},
|
|
],
|
|
nickname: [{
|
|
required: true,
|
|
message: "请输入用户名",
|
|
trigger: "blur"
|
|
}, ],
|
|
mobile: [{
|
|
required: true,
|
|
message: "请输入手机号",
|
|
trigger: "blur"
|
|
},
|
|
{
|
|
validator: validateMobile,
|
|
trigger: "blur"
|
|
},
|
|
],
|
|
password: [{
|
|
required: true,
|
|
message: "请输入密码",
|
|
trigger: "blur"
|
|
},
|
|
{
|
|
validator: validatePassword,
|
|
trigger: "blur"
|
|
},
|
|
],
|
|
email: [{
|
|
required: true,
|
|
message: "请输入邮箱地址"
|
|
},
|
|
{
|
|
type: "email",
|
|
message: "邮箱格式不正确"
|
|
},
|
|
],
|
|
},
|
|
};
|
|
},
|
|
methods: {
|
|
init(v) {
|
|
console.log("111")
|
|
this.getRoleList(v);
|
|
},
|
|
getRoleList(v) {
|
|
getUsersByRoleName("ROLE_OWNER").then((res) => {
|
|
if (res.success) {
|
|
this.roleList = res.result;
|
|
}
|
|
});
|
|
getUsersByRoleName("ROLE_MANAGER").then((res) => {
|
|
if (res.success) {
|
|
this.roleList2 = res.result;
|
|
}
|
|
});
|
|
getDictDataByType("mallMuseumType").then((res) => {
|
|
if (res.success) {
|
|
this.businessDistrictLevelList = res.result;
|
|
}
|
|
});
|
|
initShopArea().then((res) => {
|
|
|
|
if (res.success) {
|
|
res.result.forEach(function(e) {
|
|
if (e.isParent) {
|
|
e.loading = false;
|
|
e.children = [];
|
|
e._loading = false;
|
|
}
|
|
});
|
|
this.data = res.result;
|
|
}
|
|
});
|
|
getDictDataByType("shopType").then((res) => {
|
|
if (res.success) {
|
|
this.shopType = res.result;
|
|
}
|
|
});
|
|
},
|
|
handleSelectShopAreaTree(v) {
|
|
this.form.shopArea = v;
|
|
},
|
|
changePass(v, grade, strength) {
|
|
this.form.passStrength = strength;
|
|
},
|
|
submit() {
|
|
this.$refs.form.validate((valid) => {
|
|
if (valid) {
|
|
if (typeof this.form.chargeTime == "object") {
|
|
this.form.chargeTime = this.format(this.form.chargeTime, "yyyy-MM-dd");
|
|
}
|
|
if (typeof this.form.startTime == "object") {
|
|
this.form.startTime = this.format(this.form.startTime, "yyyy-MM-dd");
|
|
}
|
|
if (typeof this.form.endTime == "object") {
|
|
this.form.endTime = this.format(this.form.endTime, "yyyy-MM-dd");
|
|
}
|
|
debugger;
|
|
if (this.form.users == '' || this.form.users == null) {
|
|
delete this.form.users;
|
|
}
|
|
// 处理商品分类的名称
|
|
if (this.form.shopType != '' && this.form.shopType != null) {
|
|
this.shopType.forEach(item => {
|
|
debugger;
|
|
if (this.form.shopType == item.value) {
|
|
this.form.shopTypeTitle = item.title;
|
|
}
|
|
});
|
|
}
|
|
this.form.shopMangerId = this.form.shopOwnerId
|
|
if (this.type == "1") {
|
|
// 编辑
|
|
this.submitLoading = true;
|
|
delete this.form.products
|
|
delete this.form.saleCount
|
|
delete this.form.shopTakeaway
|
|
|
|
editShop(this.form).then((res) => {
|
|
this.submitLoading = false;
|
|
if (res.success) {
|
|
this.$Message.success("操作成功");
|
|
this.$emit("on-submit", true);
|
|
this.visible = false;
|
|
}
|
|
});
|
|
} else {
|
|
// 添加
|
|
this.submitLoading = true;
|
|
addShop(this.form).then((res) => {
|
|
this.submitLoading = false;
|
|
if (res.success) {
|
|
this.$Message.success("操作成功");
|
|
this.$emit("on-submit", true);
|
|
this.visible = false;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
});
|
|
},
|
|
setCurrentValue(value) {
|
|
if (value === this.visible) {
|
|
return;
|
|
}
|
|
if (this.type == "1") {
|
|
this.title = "编辑店铺";
|
|
this.maxHeight =
|
|
Number(document.documentElement.clientHeight - 121) + "px";
|
|
} else if (this.type == "2") {
|
|
this.title = "添加店铺";
|
|
this.maxHeight =
|
|
Number(document.documentElement.clientHeight - 121) + "px";
|
|
} else {
|
|
this.title = "店铺详情";
|
|
this.maxHeight = "100%";
|
|
}
|
|
// 清空数据
|
|
this.$refs.form.resetFields();
|
|
if (this.type == "0" || this.type == "1") {
|
|
// 回显数据
|
|
let data = this.data;
|
|
// 地址
|
|
if (data.address) {
|
|
data.address = data.address.split(",");
|
|
} else {
|
|
data.address = [];
|
|
}
|
|
// 商圈
|
|
this.$refs.shopAreaTree.setData(data.shopArea, data.shopAreaTitle);
|
|
// 回显
|
|
this.form = data;
|
|
} else {
|
|
// 添加
|
|
//this.$refs.shopAreaTree.setData("", "");
|
|
this.form = {
|
|
/*type: 0,
|
|
sex: "",
|
|
address: [],*/
|
|
};
|
|
}
|
|
this.visible = value;
|
|
},
|
|
},
|
|
watch: {
|
|
value(val) {
|
|
this.setCurrentValue(val);
|
|
},
|
|
visible(value) {
|
|
this.$emit("input", value);
|
|
},
|
|
},
|
|
mounted() {
|
|
this.init();
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less">
|
|
@import "@/styles/drawer-common.less";
|
|
</style>
|