<template>
|
<div class="updateUser">
|
<main>
|
<div class="mainContent">
|
<el-form
|
ref="store"
|
label-width="140px"
|
autoComplete="on"
|
:model="store"
|
:rules="rules"
|
label-position="right"
|
>
|
<!-- 店铺类型 -->
|
<el-form-item
|
v-if="isStorePage"
|
class="optionItem"
|
label="店铺类型:"
|
prop="type"
|
>
|
<el-cascader :options="shopTypeList" v-model="store.type" />
|
</el-form-item>
|
<!-- 店铺编号 -->
|
<el-form-item v-if="store.id" class="optionItem" label="店铺编号:">
|
<el-input
|
v-model="store.storeNumber"
|
placeholder="请填写店铺编号"
|
disabled
|
></el-input>
|
</el-form-item>
|
<!-- 店铺名称 -->
|
<el-form-item class="optionItem" label="店铺名称:" prop="storeName">
|
<el-input
|
v-model="store.storeName"
|
placeholder="请填写店名称"
|
:disabled="isView()"
|
></el-input>
|
</el-form-item>
|
<!-- 店铺联系人 -->
|
<el-form-item class="optionItem" label="店铺联系人:" prop="owner">
|
<el-input
|
v-model="store.owner"
|
placeholder="请填写店铺联系人"
|
:disabled="isView()"
|
></el-input>
|
</el-form-item>
|
<!-- 店铺联系电话 -->
|
<el-form-item class="optionItem" label="店铺联系电话:" prop="contact">
|
<el-input
|
v-model="store.contact"
|
placeholder="请填写店铺联系电话"
|
:disabled="isView()"
|
></el-input>
|
</el-form-item>
|
<!-- 店铺详细地址 -->
|
<el-form-item
|
class="optionItem"
|
label="店铺详细地址:"
|
prop="storeAddress"
|
>
|
<el-input
|
v-model="store.storeAddress"
|
placeholder="请填写店铺详细地址"
|
:disabled="isView()"
|
></el-input>
|
</el-form-item>
|
<!-- 关联摄像机 -->
|
<el-form-item
|
v-if="isStorePage"
|
class="optionItem"
|
label="关联摄像机:"
|
>
|
<el-select
|
v-model="store.relationVideo"
|
placeholder="请填写关联摄像机"
|
:disabled="isView()"
|
>
|
<el-option
|
v-for="item in relationVideoList"
|
:key="item.id"
|
:value="item.id"
|
:label="item.name"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
|
<!-- 店铺状态 -->
|
<el-form-item
|
v-if="isStorePage"
|
class="optionItem"
|
label="店铺状态:"
|
prop="status"
|
>
|
<el-select
|
v-model="store.status"
|
placeholder="请选择店铺状态"
|
:disabled="isView()"
|
>
|
<el-option
|
v-for="item in statusList"
|
:key="item.id"
|
:value="item.id"
|
:label="item.name"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item
|
v-if="!isStorePage"
|
class="optionItem"
|
label="店铺得分:"
|
>
|
<el-input
|
v-model="store.storeScore"
|
:disabled="isView()"
|
></el-input>
|
</el-form-item>
|
<el-form-item v-if="!isView()">
|
<div class="optionBtn">
|
<el-button
|
type="primary"
|
class="btn submit"
|
@click.native.prevent="onSubmit"
|
>提交</el-button
|
>
|
</div>
|
</el-form-item>
|
</el-form>
|
</div>
|
</main>
|
</div>
|
</template>
|
<script>
|
import { deepClone, getCodeList } from "@/utils/helper";
|
import {
|
addStoreInfo,
|
getVideoPoint,
|
updateStoreInfo,
|
} from "@/api/operate/storeManagement";
|
|
export default {
|
data() {
|
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 validateStoreType = (rule, value, callback) => {
|
if (value) {
|
callback();
|
} else {
|
callback(new Error("请选择店铺类型"));
|
}
|
};
|
return {
|
store: {
|
storeNumber: "",
|
storeName: "",
|
owner: "",
|
contact: "",
|
storeAddress: "",
|
relationVideo: "",
|
type: null,
|
storeScore: null,
|
status: null,
|
},
|
rules: {
|
type: [{ required: true, validator: validateStoreType }],
|
storeNumber: [
|
{ required: true, trigger: "blur", message: "请输入店铺编号" },
|
],
|
storeName: [
|
{ required: true, trigger: "blur", message: "请输入店铺名称" },
|
],
|
owner: [
|
{ required: true, trigger: "blur", message: "请输入店铺联系人" },
|
],
|
contact: [
|
{ required: true, trigger: "blur", validator: validatePhone },
|
],
|
storeAddress: [
|
{ required: true, trigger: "blur", message: "请输入店铺详细地址" },
|
],
|
relationVideo: [
|
{ required: true, trigger: "blur", message: "请输入关联摄像机" },
|
],
|
status: [
|
{ required: true, trigger: "blur", message: "请选择店铺状态" },
|
],
|
},
|
shopTypeList: [],
|
relationVideoList: [],
|
statusList: [
|
{ id: 1, name: "经营" },
|
{ id: 2, name: "倒闭" },
|
],
|
};
|
},
|
async created() {
|
const result = await getVideoPoint({ current: 1, size: 1000 });
|
this.relationVideoList = result.records;
|
|
if (!this.isView()) {
|
await this.getShopTypeList();
|
}
|
|
if (this.storeInfo) {
|
this.$set(this, "store", this.storeInfo);
|
if (this.storeInfo && this.isStorePage && this.store.videoPoint) {
|
this.store.relationVideo = this.store.videoPoint.name;
|
}
|
|
const selectedStoreType = this.getSelectedStoreType(this.shopTypeList);
|
|
this.$set(this.store, "type", [
|
selectedStoreType.parentId,
|
selectedStoreType.id,
|
]);
|
}
|
},
|
|
methods: {
|
onSubmit() {
|
this.$refs.store.validate((valid) => {
|
if (valid) {
|
this.store.type = this.store.type[1];
|
if (this.isCreated()) {
|
addStoreInfo(this.store)
|
.then(() => {
|
this.$message({ type: "success", message: "操作成功" });
|
this.$emit("closeDialog");
|
})
|
.catch((err) => this.$message({ type: "error", message: err }));
|
} else {
|
updateStoreInfo(this.store)
|
.then(() => {
|
this.$message({ type: "success", message: "操作成功" });
|
this.$emit("closeDialog");
|
})
|
.catch((err) => this.$message({ type: "error", message: err }));
|
}
|
} else {
|
this.$message({ type: "warning", message: "请检查必填项" });
|
}
|
});
|
},
|
|
isView() {
|
return this.dialogType === "view";
|
},
|
|
isCreated() {
|
return this.dialogType === "create";
|
},
|
|
// 获取字典
|
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;
|
});
|
// 添加child
|
treeRoot.forEach((item) => {
|
item.children = [];
|
arr.forEach((child) => {
|
child.value = child.id;
|
child.label = child.name;
|
if (child.parentId === item.id) {
|
item.children.push(child);
|
}
|
});
|
});
|
return treeRoot;
|
}
|
},
|
getSelectedStoreType(shopTypeList) {
|
let selectedItem = null;
|
shopTypeList.forEach((item) => {
|
|
if (item.name === this.store.typeName) {
|
selectedItem = item;
|
} else if (item.children) {
|
let selected = this.getSelectedStoreType(item.children);
|
if (selected) {
|
selectedItem = selected;
|
}
|
}
|
});
|
return selectedItem;
|
},
|
},
|
|
beforeDestroy() {
|
this.store = null;
|
},
|
props: ["storeInfo", "dialogType", "isStorePage"],
|
};
|
</script>
|
<style lang="scss" scoped>
|
.updateUser {
|
border-radius: 1px;
|
// background-color: #09152f;
|
|
main {
|
text-align: left;
|
padding: 0 55px;
|
background-color: #ffffff;
|
|
.mainContent {
|
display: flex;
|
justify-content: center;
|
padding-top: 50px;
|
|
.el-form-item__content {
|
width: 400px;
|
|
.el-select {
|
width: 100%;
|
}
|
}
|
|
.optionHandleSp {
|
display: flex;
|
|
.areaNumber,
|
.moreNumber {
|
flex: 1;
|
}
|
|
.telNumber {
|
flex: 2;
|
}
|
}
|
|
.optionBtn {
|
display: flex;
|
margin-top: 20px;
|
|
.btn {
|
padding: 12px 50px;
|
}
|
}
|
}
|
}
|
}
|
|
.updateUser::v-deep .el-form-item__label {
|
color: #4b9bb7;
|
}
|
|
.updateUser::v-deep .el-input__inner {
|
// background-color: #09152f;
|
border: 1px solid #17324c;
|
}
|
</style>
|
