|
@@ -3,7 +3,8 @@
|
|
|
:title="form.id ? '编辑分类' : '添加分类'"
|
|
:title="form.id ? '编辑分类' : '添加分类'"
|
|
|
:isShow.sync="isShow"
|
|
:isShow.sync="isShow"
|
|
|
@close="close"
|
|
@close="close"
|
|
|
- :isShowFooter="false"
|
|
|
|
|
|
|
+ @open="open"
|
|
|
|
|
+ @submit="submitForm"
|
|
|
width="680px"
|
|
width="680px"
|
|
|
>
|
|
>
|
|
|
<el-form
|
|
<el-form
|
|
@@ -14,36 +15,76 @@
|
|
|
:rules="rules"
|
|
:rules="rules"
|
|
|
ref="form"
|
|
ref="form"
|
|
|
>
|
|
>
|
|
|
- <el-form-item label="商品分类:" prop="parent">
|
|
|
|
|
|
|
+ <el-form-item label="所属店铺:" prop="storeId">
|
|
|
|
|
+ <el-select
|
|
|
|
|
+ :disabled="goodsId"
|
|
|
|
|
+ :style="{ width: '100%' }"
|
|
|
|
|
+ v-model="form.storeId"
|
|
|
|
|
+ placeholder="请选择所属店铺"
|
|
|
|
|
+ @change="form.categoryIds = ''"
|
|
|
|
|
+ >
|
|
|
|
|
+ <el-option
|
|
|
|
|
+ v-for="item in storeList"
|
|
|
|
|
+ :key="item.storeId"
|
|
|
|
|
+ :label="item.storeName"
|
|
|
|
|
+ :value="item.storeId"
|
|
|
|
|
+ ></el-option>
|
|
|
|
|
+ </el-select>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <el-form-item label="商品分类:" prop="categoryIds">
|
|
|
<el-cascader
|
|
<el-cascader
|
|
|
- :options="options"
|
|
|
|
|
- :props="{ checkStrictly: true }"
|
|
|
|
|
- v-model="form.parent"
|
|
|
|
|
|
|
+ @change="changeCategory"
|
|
|
|
|
+ :disabled="goodsId"
|
|
|
|
|
+ ref="cascader"
|
|
|
|
|
+ placeholder="请选择商品分类"
|
|
|
|
|
+ :options="computerTree(categorytreeList)"
|
|
|
|
|
+ :show-all-levels="false"
|
|
|
|
|
+ clearable
|
|
|
|
|
+ filterable
|
|
|
|
|
+ :props="{
|
|
|
|
|
+ label: 'categoryName',
|
|
|
|
|
+ value: 'categoryId',
|
|
|
|
|
+ checkStrictly: true,
|
|
|
|
|
+ emitPath: false,
|
|
|
|
|
+ }"
|
|
|
|
|
+ v-model="form.categoryIds"
|
|
|
></el-cascader>
|
|
></el-cascader>
|
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
- <el-form-item label="产品名称:" prop="userName">
|
|
|
|
|
- <el-input v-model.Number="form.userName" placeholder="请输入产品名称">
|
|
|
|
|
|
|
+ <el-form-item label="产品名称:" prop="goodsName">
|
|
|
|
|
+ <el-input v-model.Number="form.goodsName" placeholder="请输入产品名称">
|
|
|
</el-input>
|
|
</el-input>
|
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
- <el-form-item label="商品主图:" prop="userName">
|
|
|
|
|
- <file-upload v-model="form.fileList" :limit="20"></file-upload>
|
|
|
|
|
|
|
+ <el-form-item label="商品主图:" prop="mainImg">
|
|
|
|
|
+ <file-upload v-model="form.mainImg" :limit="20"></file-upload>
|
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
- <el-form-item label="产品原价:" prop="userName">
|
|
|
|
|
- <el-input v-model.Number="form.userName" placeholder="请输入产品原价">
|
|
|
|
|
|
|
+ <el-form-item label="产品原价:" prop="standPrice">
|
|
|
|
|
+ <el-input v-model.Number="form.standPrice" placeholder="请输入产品原价">
|
|
|
</el-input>
|
|
</el-input>
|
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
- <el-form-item label="会员优惠价:" prop="userName">
|
|
|
|
|
- <el-input v-model.Number="form.userName" placeholder="请输入会员优惠价">
|
|
|
|
|
|
|
+ <el-form-item label="会员优惠价:" prop="specialPrice">
|
|
|
|
|
+ <el-input
|
|
|
|
|
+ v-model.Number="form.specialPrice"
|
|
|
|
|
+ placeholder="请输入会员优惠价"
|
|
|
|
|
+ >
|
|
|
</el-input>
|
|
</el-input>
|
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
- <el-form-item label="可抵扣积分:" prop="userName">
|
|
|
|
|
- <el-input v-model.Number="form.userName" placeholder="请输入可抵扣积分">
|
|
|
|
|
|
|
+ <el-form-item label="可抵扣积分:">
|
|
|
|
|
+ <el-input
|
|
|
|
|
+ disable
|
|
|
|
|
+ v-model.Number="form.userName"
|
|
|
|
|
+ placeholder="请输入可抵扣积分"
|
|
|
|
|
+ >
|
|
|
</el-input>
|
|
</el-input>
|
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
- <el-form-item label="产品详情" class="editor" prop="detail">
|
|
|
|
|
|
|
+ <el-form-item label="上架状态:" prop="status">
|
|
|
|
|
+ <el-radio-group v-model="form.status">
|
|
|
|
|
+ <el-radio :label="1">上架</el-radio
|
|
|
|
|
+ ><el-radio :label="0">下架</el-radio>
|
|
|
|
|
+ </el-radio-group>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <el-form-item label="产品详情" class="editor">
|
|
|
<quill-editor
|
|
<quill-editor
|
|
|
class="ql-editor"
|
|
class="ql-editor"
|
|
|
- v-model="form.detail"
|
|
|
|
|
ref="myQuillEditor"
|
|
ref="myQuillEditor"
|
|
|
:options="editorOption"
|
|
:options="editorOption"
|
|
|
@change="onEditorChange($event)"
|
|
@change="onEditorChange($event)"
|
|
@@ -51,12 +92,6 @@
|
|
|
</quill-editor>
|
|
</quill-editor>
|
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
</el-form>
|
|
</el-form>
|
|
|
-
|
|
|
|
|
- <div class="btns clearfix">
|
|
|
|
|
- <el-button @click="isShow = false">取消</el-button>
|
|
|
|
|
- <el-button type="primary" @click="submitForm">上架</el-button>
|
|
|
|
|
- <el-button type="info">保存</el-button>
|
|
|
|
|
- </div>
|
|
|
|
|
</Base-dialog>
|
|
</Base-dialog>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
@@ -64,55 +99,37 @@
|
|
|
import { mapGetters } from "vuex";
|
|
import { mapGetters } from "vuex";
|
|
|
import FileUpload from "../../../components/FileUpload/index.vue";
|
|
import FileUpload from "../../../components/FileUpload/index.vue";
|
|
|
import { quillEditor } from "vue-quill-editor";
|
|
import { quillEditor } from "vue-quill-editor";
|
|
|
|
|
+import { goodscategorytree } from "../../../api/goods/index";
|
|
|
export default {
|
|
export default {
|
|
|
props: {
|
|
props: {
|
|
|
dialogVisible: {
|
|
dialogVisible: {
|
|
|
type: Boolean,
|
|
type: Boolean,
|
|
|
default: false,
|
|
default: false,
|
|
|
},
|
|
},
|
|
|
|
|
+ goodsId: {
|
|
|
|
|
+ type: [Number, String],
|
|
|
|
|
+ },
|
|
|
},
|
|
},
|
|
|
data() {
|
|
data() {
|
|
|
return {
|
|
return {
|
|
|
form: {},
|
|
form: {},
|
|
|
rules: {
|
|
rules: {
|
|
|
- name: [{ required: true, message: "请输入真实姓名", trigger: "blur" }],
|
|
|
|
|
- parent: [
|
|
|
|
|
- { required: true, message: "请选择启动状态", trigger: "change" },
|
|
|
|
|
|
|
+ goodsName: [
|
|
|
|
|
+ { required: true, message: "请输入商品名称", trigger: "blur" },
|
|
|
],
|
|
],
|
|
|
- detail: [
|
|
|
|
|
- { required: true, message: "请输入产品详情", trigger: "blur" },
|
|
|
|
|
|
|
+ standPrice: [
|
|
|
|
|
+ { required: true, message: "请输入商品原价", trigger: "blur" },
|
|
|
|
|
+ ],
|
|
|
|
|
+ specialPrice: [
|
|
|
|
|
+ { required: true, message: "请输入会员优惠价", trigger: "blur" },
|
|
|
|
|
+ ],
|
|
|
|
|
+ categoryIds: [
|
|
|
|
|
+ { required: true, message: "请选择商品分类", trigger: "change" },
|
|
|
|
|
+ ],
|
|
|
|
|
+ mainImg: [
|
|
|
|
|
+ { required: true, message: "请上传商品主图", trigger: "change" },
|
|
|
],
|
|
],
|
|
|
},
|
|
},
|
|
|
- options: [
|
|
|
|
|
- {
|
|
|
|
|
- value: "zhinan",
|
|
|
|
|
- label: "指南",
|
|
|
|
|
- children: [
|
|
|
|
|
- {
|
|
|
|
|
- value: "shejiyuanze",
|
|
|
|
|
- label: "设计原则",
|
|
|
|
|
- children: [
|
|
|
|
|
- {
|
|
|
|
|
- value: "yizhi",
|
|
|
|
|
- label: "一致",
|
|
|
|
|
- },
|
|
|
|
|
- {
|
|
|
|
|
- value: "fankui",
|
|
|
|
|
- label: "反馈",
|
|
|
|
|
- },
|
|
|
|
|
- {
|
|
|
|
|
- value: "xiaolv",
|
|
|
|
|
- label: "效率",
|
|
|
|
|
- },
|
|
|
|
|
- {
|
|
|
|
|
- value: "kekong",
|
|
|
|
|
- label: "可控",
|
|
|
|
|
- },
|
|
|
|
|
- ],
|
|
|
|
|
- },
|
|
|
|
|
- ],
|
|
|
|
|
- },
|
|
|
|
|
- ],
|
|
|
|
|
editorOption: {
|
|
editorOption: {
|
|
|
placeholder: "请输入产品详情",
|
|
placeholder: "请输入产品详情",
|
|
|
modules: {
|
|
modules: {
|
|
@@ -146,21 +163,25 @@ export default {
|
|
|
],
|
|
],
|
|
|
},
|
|
},
|
|
|
},
|
|
},
|
|
|
|
|
+ categorytreeList: [],
|
|
|
};
|
|
};
|
|
|
},
|
|
},
|
|
|
methods: {
|
|
methods: {
|
|
|
|
|
+ open() {
|
|
|
|
|
+ this.resetForm();
|
|
|
|
|
+ this.goodscategorytree();
|
|
|
|
|
+ this.goodsId && this.getDatail();
|
|
|
|
|
+ },
|
|
|
resetForm() {
|
|
resetForm() {
|
|
|
this.form = {
|
|
this.form = {
|
|
|
- id: undefined,
|
|
|
|
|
- name: undefined,
|
|
|
|
|
- parent: undefined,
|
|
|
|
|
- detail: undefined,
|
|
|
|
|
- fileList: [
|
|
|
|
|
- {
|
|
|
|
|
- name: "info_2.png",
|
|
|
|
|
- url: "https://file-dev.xyyxt.net/oss/images/avatar/20230525/1684981330568/1684981330570_622728660",
|
|
|
|
|
- },
|
|
|
|
|
- ],
|
|
|
|
|
|
|
+ storeId: undefined,
|
|
|
|
|
+ goodsId: undefined,
|
|
|
|
|
+ goodsName: undefined,
|
|
|
|
|
+ standPrice: undefined,
|
|
|
|
|
+ specialPrice: undefined,
|
|
|
|
|
+ categoryIds: undefined,
|
|
|
|
|
+ mainImg: [],
|
|
|
|
|
+ status: 1,
|
|
|
};
|
|
};
|
|
|
this.clearForm("form");
|
|
this.clearForm("form");
|
|
|
},
|
|
},
|
|
@@ -184,7 +205,18 @@ export default {
|
|
|
this.clearForm("form");
|
|
this.clearForm("form");
|
|
|
},
|
|
},
|
|
|
onEditorChange({ quill, html, text }) {
|
|
onEditorChange({ quill, html, text }) {
|
|
|
- this.form.detail = html;
|
|
|
|
|
|
|
+ this.form.mobileDetailHtml = html;
|
|
|
|
|
+ },
|
|
|
|
|
+ goodscategorytree() {
|
|
|
|
|
+ goodscategorytree({ status: 1 }).then((res) => {
|
|
|
|
|
+ this.categorytreeList = res.data;
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
|
|
+ getDatail() {},
|
|
|
|
|
+ changeCategory(val) {
|
|
|
|
|
+ if (this.form.storeId) return;
|
|
|
|
|
+ let data = this.$refs["cascader"].getCheckedNodes()[0].data;
|
|
|
|
|
+ this.form.storeId = data.storeId;
|
|
|
},
|
|
},
|
|
|
},
|
|
},
|
|
|
computed: {
|
|
computed: {
|
|
@@ -196,31 +228,22 @@ export default {
|
|
|
this.$emit("update:dialogVisible", false);
|
|
this.$emit("update:dialogVisible", false);
|
|
|
},
|
|
},
|
|
|
},
|
|
},
|
|
|
- ...mapGetters(["roleList"]),
|
|
|
|
|
- },
|
|
|
|
|
- created() {},
|
|
|
|
|
- components: { FileUpload, quillEditor },
|
|
|
|
|
- watch: {
|
|
|
|
|
- dialogVisible: {
|
|
|
|
|
- handler(val) {
|
|
|
|
|
- if (val) {
|
|
|
|
|
- this.resetForm();
|
|
|
|
|
|
|
+ computerTree: function () {
|
|
|
|
|
+ return function (rows) {
|
|
|
|
|
+ if (this.form.storeId) {
|
|
|
|
|
+ rows = rows.filter((e) => e.storeId === this.form.storeId);
|
|
|
}
|
|
}
|
|
|
- },
|
|
|
|
|
- immediate: true,
|
|
|
|
|
|
|
+ return rows;
|
|
|
|
|
+ };
|
|
|
},
|
|
},
|
|
|
|
|
+ ...mapGetters(["roleList", "storeList"]),
|
|
|
},
|
|
},
|
|
|
|
|
+ created() {},
|
|
|
|
|
+ components: { FileUpload, quillEditor },
|
|
|
};
|
|
};
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
|
-.btns {
|
|
|
|
|
- .el-button {
|
|
|
|
|
- margin-top: 30px;
|
|
|
|
|
- float: right;
|
|
|
|
|
- margin-left: 14px;
|
|
|
|
|
- }
|
|
|
|
|
-}
|
|
|
|
|
.ql-editor {
|
|
.ql-editor {
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
margin-top: -20px;
|
|
margin-top: -20px;
|