|
@@ -1,82 +1,38 @@
|
|
|
<template>
|
|
|
<div class="m-container">
|
|
|
<h2>
|
|
|
- <el-page-header
|
|
|
- @back="onCancel"
|
|
|
- :content="pageTitle[pageType] + '商品'"
|
|
|
- ></el-page-header>
|
|
|
+ <el-page-header @back="onCancel" :content="pageTitle[pageType] + '商品'"></el-page-header>
|
|
|
</h2>
|
|
|
|
|
|
<div class="m-core">
|
|
|
- <el-form
|
|
|
- :model="form"
|
|
|
- :rules="rules"
|
|
|
- ref="form"
|
|
|
- label-width="160px"
|
|
|
- :inline="true"
|
|
|
- >
|
|
|
- <el-alert
|
|
|
- title="基础信息"
|
|
|
- :closable="false"
|
|
|
- class="alert"
|
|
|
- type="info"
|
|
|
- />
|
|
|
+ <el-form :model="form" :rules="rules" ref="form" label-width="160px" :inline="true">
|
|
|
+ <el-alert title="基础信息" :closable="false" class="alert" type="info" />
|
|
|
<el-form-item label="货号" prop="sn">
|
|
|
- <el-input
|
|
|
- v-model.trim="form.sn"
|
|
|
- :disabled="pageDisabled"
|
|
|
- placeholder="请输入货号"
|
|
|
- style="width: 220px !important"
|
|
|
- ></el-input>
|
|
|
+ <el-input v-model.trim="form.sn" :disabled="pageDisabled" placeholder="请输入货号"
|
|
|
+ style="width: 220px !important"></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="品牌" prop="brand">
|
|
|
- <el-input
|
|
|
- v-model.trim="form.brand"
|
|
|
- :disabled="pageDisabled"
|
|
|
- placeholder="请输入品牌"
|
|
|
- style="width: 220px !important"
|
|
|
- ></el-input>
|
|
|
+ <el-input v-model.trim="form.brand" :disabled="pageDisabled" placeholder="请输入品牌"
|
|
|
+ style="width: 220px !important"></el-input>
|
|
|
</el-form-item>
|
|
|
<!-- <el-form-item label="备查货号" prop="supplyChannel" v-if="pageType == 'create'">
|
|
|
<el-input v-model.trim="form.supplyChannel" placeholder="请输入备查货号" style="width: 400px"></el-input>
|
|
|
</el-form-item> -->
|
|
|
<el-form-item label="商品名称" prop="name">
|
|
|
- <el-input
|
|
|
- v-model.trim="form.name"
|
|
|
- placeholder="请输入商品名称"
|
|
|
- :disabled="pageDisabled"
|
|
|
- style="width: 220px !important"
|
|
|
- ></el-input>
|
|
|
+ <el-input v-model.trim="form.name" placeholder="请输入商品名称" :disabled="pageDisabled"
|
|
|
+ style="width: 220px !important"></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="商品类型" prop="type">
|
|
|
- <el-select
|
|
|
- v-model.trim="form.type"
|
|
|
- placeholder="请选择商品类型"
|
|
|
- :disabled="pageDisabled"
|
|
|
- style="width: 220px !important"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="(item, index) in goodsType"
|
|
|
- :key="index"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value"
|
|
|
- ></el-option>
|
|
|
+ <el-select v-model.trim="form.type" placeholder="请选择商品类型" :disabled="pageDisabled"
|
|
|
+ style="width: 220px !important">
|
|
|
+ <el-option v-for="(item, index) in goodsType" :key="index" :label="item.label"
|
|
|
+ :value="item.value"></el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="商品分类" prop="goodsCategoryId">
|
|
|
- <el-select
|
|
|
- v-model.trim="form.goodsCategoryId"
|
|
|
- placeholder="请选择商品分类"
|
|
|
- :disabled="pageDisabled"
|
|
|
- style="width: 220px !important"
|
|
|
- filterable
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="item in categoryList"
|
|
|
- :key="item.value"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value"
|
|
|
- >
|
|
|
+ <el-select v-model.trim="form.goodsCategoryId" placeholder="请选择商品分类" :disabled="pageDisabled"
|
|
|
+ style="width: 220px !important" filterable>
|
|
|
+ <el-option v-for="item in categoryList" :key="item.value" :label="item.label" :value="item.value">
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
@@ -99,49 +55,24 @@
|
|
|
</select-all>
|
|
|
</el-form-item> -->
|
|
|
<el-form-item label="商品型号" prop="specification">
|
|
|
- <el-input
|
|
|
- v-model.trim="form.specification"
|
|
|
- placeholder="请输入商品型号"
|
|
|
- :disabled="pageDisabled"
|
|
|
- style="width: 220px"
|
|
|
- ></el-input>
|
|
|
+ <el-input v-model.trim="form.specification" placeholder="请输入商品型号" :disabled="pageDisabled"
|
|
|
+ style="width: 220px"></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="库存类型" prop="stockType" v-if="tenantId == 1">
|
|
|
- <el-select
|
|
|
- v-model="form.stockType"
|
|
|
- placeholder="请选择库存类型"
|
|
|
- :disabled="pageDisabled"
|
|
|
- style="width: 220px !important"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="(item, index) in stockType"
|
|
|
- :key="index"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value"
|
|
|
- ></el-option>
|
|
|
+ <el-select v-model="form.stockType" placeholder="请选择库存类型" :disabled="pageDisabled"
|
|
|
+ style="width: 220px !important">
|
|
|
+ <el-option v-for="(item, index) in stockType" :key="index" :label="item.label"
|
|
|
+ :value="item.value"></el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
- <el-form-item
|
|
|
- label="是否库存预警"
|
|
|
- prop="stockWarning"
|
|
|
- v-if="tenantId == 1"
|
|
|
- >
|
|
|
- <el-select
|
|
|
- v-model="form.stockWarning"
|
|
|
- placeholder="请选择库存预警"
|
|
|
- :disabled="pageDisabled"
|
|
|
- style="width: 220px !important"
|
|
|
- >
|
|
|
+ <el-form-item label="是否库存预警" prop="stockWarning" v-if="tenantId == 1">
|
|
|
+ <el-select v-model="form.stockWarning" placeholder="请选择库存预警" :disabled="pageDisabled"
|
|
|
+ style="width: 220px !important">
|
|
|
<el-option label="是" :value="1"></el-option>
|
|
|
<el-option label="否" :value="0"></el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
- <el-alert
|
|
|
- title="价格信息"
|
|
|
- :closable="false"
|
|
|
- class="alert"
|
|
|
- type="info"
|
|
|
- />
|
|
|
+ <el-alert title="价格信息" :closable="false" class="alert" type="info" />
|
|
|
|
|
|
<el-form-item label="市场价" prop="marketPrice" class="hiddenStart">
|
|
|
<template slot="label">
|
|
@@ -152,26 +83,17 @@
|
|
|
<div slot="content">
|
|
|
商品标价,仅在商品购买时做展示,不以该价格向学员销售商品
|
|
|
</div>
|
|
|
- <i
|
|
|
- class="el-icon-question"
|
|
|
- style="
|
|
|
+ <i class="el-icon-question" style="
|
|
|
font-size: 18px;
|
|
|
color: #f56c6c;
|
|
|
position: relative;
|
|
|
top: 2px;
|
|
|
- "
|
|
|
- ></i>
|
|
|
+ "></i>
|
|
|
</el-tooltip>
|
|
|
</p>
|
|
|
</template>
|
|
|
- <el-input
|
|
|
- type="number"
|
|
|
- placeholder="请输入市场价"
|
|
|
- :disabled="pageDisabled"
|
|
|
- @mousewheel.native.prevent
|
|
|
- v-model.trim="form.marketPrice"
|
|
|
- style="width: 220px"
|
|
|
- ></el-input>
|
|
|
+ <el-input type="number" placeholder="请输入市场价" :disabled="pageDisabled" @mousewheel.native.prevent
|
|
|
+ v-model.trim="form.marketPrice" style="width: 220px"></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="零售价" prop="discountPrice" class="hiddenStart">
|
|
|
<template slot="label">
|
|
@@ -182,75 +104,42 @@
|
|
|
<div slot="content">
|
|
|
管理端APP、乐器维修时学员购买该商品的价格
|
|
|
</div>
|
|
|
- <i
|
|
|
- class="el-icon-question"
|
|
|
- style="
|
|
|
+ <i class="el-icon-question" style="
|
|
|
font-size: 18px;
|
|
|
color: #f56c6c;
|
|
|
position: relative;
|
|
|
top: 2px;
|
|
|
- "
|
|
|
- ></i>
|
|
|
+ "></i>
|
|
|
</el-tooltip>
|
|
|
</p>
|
|
|
</template>
|
|
|
- <el-input
|
|
|
- type="number"
|
|
|
- placeholder="请输入零售价"
|
|
|
- @mousewheel.native.prevent
|
|
|
- :disabled="pageDisabled"
|
|
|
- v-model.trim="form.discountPrice"
|
|
|
- style="width: 220px"
|
|
|
- ></el-input>
|
|
|
+ <el-input type="number" placeholder="请输入零售价" @mousewheel.native.prevent :disabled="pageDisabled"
|
|
|
+ v-model.trim="form.discountPrice" style="width: 220px"></el-input>
|
|
|
</el-form-item>
|
|
|
- <el-form-item
|
|
|
- label="商品团购价"
|
|
|
- prop="groupPurchasePrice"
|
|
|
- class="hiddenStart"
|
|
|
- >
|
|
|
+ <el-form-item label="商品团购价" prop="groupPurchasePrice" class="hiddenStart">
|
|
|
<template slot="label">
|
|
|
<p style="position: relative">
|
|
|
<span style="color: #f56c6c; margin-right: 4px">*</span>
|
|
|
团购价
|
|
|
<el-tooltip placement="top" popper-class="mTooltip">
|
|
|
<div slot="content">乐团报名缴费时学员购买该商品的价格</div>
|
|
|
- <i
|
|
|
- class="el-icon-question"
|
|
|
- style="
|
|
|
+ <i class="el-icon-question" style="
|
|
|
font-size: 18px;
|
|
|
color: #f56c6c;
|
|
|
position: relative;
|
|
|
top: 2px;
|
|
|
- "
|
|
|
- ></i>
|
|
|
+ "></i>
|
|
|
</el-tooltip>
|
|
|
</p>
|
|
|
</template>
|
|
|
- <el-input
|
|
|
- type="number"
|
|
|
- placeholder="请输入商品团购价"
|
|
|
- @mousewheel.native.prevent
|
|
|
- :disabled="pageDisabled"
|
|
|
- v-model.trim="form.groupPurchasePrice"
|
|
|
- style="width: 220px"
|
|
|
- ></el-input>
|
|
|
+ <el-input type="number" placeholder="请输入商品团购价" @mousewheel.native.prevent :disabled="pageDisabled"
|
|
|
+ v-model.trim="form.groupPurchasePrice" style="width: 220px"></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="分部成本" prop="organCostPrice">
|
|
|
- <el-input
|
|
|
- type="number"
|
|
|
- placeholder="请输入分部成本"
|
|
|
- @mousewheel.native.prevent
|
|
|
- :disabled="pageDisabled"
|
|
|
- v-model.trim="form.organCostPrice"
|
|
|
- style="width: 220px"
|
|
|
- ></el-input>
|
|
|
+ <el-input type="number" placeholder="请输入分部成本" @mousewheel.native.prevent :disabled="pageDisabled"
|
|
|
+ v-model.trim="form.organCostPrice" style="width: 220px"></el-input>
|
|
|
</el-form-item>
|
|
|
- <el-alert
|
|
|
- title="销售渠道"
|
|
|
- :closable="false"
|
|
|
- class="alert"
|
|
|
- type="info"
|
|
|
- />
|
|
|
+ <el-alert title="销售渠道" :closable="false" class="alert" type="info" />
|
|
|
<!-- <el-form-item label="学生端APP可售分部" prop="studentShowOrganId">
|
|
|
<select-all
|
|
|
v-model.trim="form.studentShowOrganId"
|
|
@@ -270,97 +159,38 @@
|
|
|
</select-all>
|
|
|
</el-form-item> -->
|
|
|
<el-form-item label="移动端可售分部" prop="educationShowOrganId">
|
|
|
- <select-all
|
|
|
- v-model.trim="form.educationShowOrganId"
|
|
|
- filterable
|
|
|
- placeholder="请选择分部"
|
|
|
- style="width: 400px !important"
|
|
|
- multiple
|
|
|
- :disabled="pageDisabled"
|
|
|
- clearable
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="item in selects.branchs"
|
|
|
- :key="item.id"
|
|
|
- :label="item.name"
|
|
|
- :value="item.id.toString()"
|
|
|
- ></el-option>
|
|
|
+ <select-all v-model.trim="form.educationShowOrganId" filterable placeholder="请选择分部"
|
|
|
+ style="width: 400px !important" multiple :disabled="pageDisabled" clearable>
|
|
|
+ <el-option v-for="item in selects.branchs" :key="item.id" :label="item.name"
|
|
|
+ :value="item.id.toString()"></el-option>
|
|
|
</select-all>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="课程收费乐团可售分部" prop="courseFeeShowOrganId">
|
|
|
- <select-all
|
|
|
- v-model.trim="form.courseFeeShowOrganId"
|
|
|
- filterable
|
|
|
- placeholder="请选择分部"
|
|
|
- style="width: 400px !important"
|
|
|
- multiple
|
|
|
- :disabled="pageDisabled"
|
|
|
- clearable
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="item in selects.branchs"
|
|
|
- :key="item.id"
|
|
|
- :label="item.name"
|
|
|
- :value="item.id.toString()"
|
|
|
- ></el-option>
|
|
|
+ <select-all v-model.trim="form.courseFeeShowOrganId" filterable placeholder="请选择分部"
|
|
|
+ style="width: 400px !important" multiple :disabled="pageDisabled" clearable>
|
|
|
+ <el-option v-for="item in selects.branchs" :key="item.id" :label="item.name"
|
|
|
+ :value="item.id.toString()"></el-option>
|
|
|
</select-all>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="会员收费乐团可售分部" prop="memberFeeShowOrganId">
|
|
|
- <select-all
|
|
|
- v-model.trim="form.memberFeeShowOrganId"
|
|
|
- filterable
|
|
|
- placeholder="请选择分部"
|
|
|
- style="width: 400px !important"
|
|
|
- multiple
|
|
|
- :disabled="pageDisabled"
|
|
|
- clearable
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="item in selects.branchs"
|
|
|
- :key="item.id"
|
|
|
- :label="item.name"
|
|
|
- :value="item.id.toString()"
|
|
|
- ></el-option>
|
|
|
+ <select-all v-model.trim="form.memberFeeShowOrganId" filterable placeholder="请选择分部"
|
|
|
+ style="width: 400px !important" multiple :disabled="pageDisabled" clearable>
|
|
|
+ <el-option v-for="item in selects.branchs" :key="item.id" :label="item.name"
|
|
|
+ :value="item.id.toString()"></el-option>
|
|
|
</select-all>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="免费乐团可售分部" prop="freeFeeShowOrganId">
|
|
|
- <select-all
|
|
|
- v-model.trim="form.freeFeeShowOrganId"
|
|
|
- filterable
|
|
|
- placeholder="请选择分部"
|
|
|
- style="width: 400px !important"
|
|
|
- multiple
|
|
|
- :disabled="pageDisabled"
|
|
|
- clearable
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="item in selects.branchs"
|
|
|
- :key="item.id"
|
|
|
- :label="item.name"
|
|
|
- :value="item.id.toString()"
|
|
|
- ></el-option>
|
|
|
+ <select-all v-model.trim="form.freeFeeShowOrganId" filterable placeholder="请选择分部"
|
|
|
+ style="width: 400px !important" multiple :disabled="pageDisabled" clearable>
|
|
|
+ <el-option v-for="item in selects.branchs" :key="item.id" :label="item.name"
|
|
|
+ :value="item.id.toString()"></el-option>
|
|
|
</select-all>
|
|
|
</el-form-item>
|
|
|
- <el-form-item
|
|
|
- label="乐器置换可售分部"
|
|
|
- prop="replacementShowOrganId"
|
|
|
- v-if="tenantId == 1"
|
|
|
- >
|
|
|
- <select-all
|
|
|
- v-model.trim="form.replacementShowOrganId"
|
|
|
- filterable
|
|
|
- placeholder="请选择所属分部"
|
|
|
- style="width: 400px !important"
|
|
|
- multiple
|
|
|
- :disabled="pageDisabled"
|
|
|
- clearable
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="item in selects.branchs"
|
|
|
- :key="item.id"
|
|
|
- :label="item.name"
|
|
|
- :value="item.id.toString()"
|
|
|
- ></el-option>
|
|
|
+ <el-form-item label="乐器置换可售分部" prop="replacementShowOrganId" v-if="tenantId == 1">
|
|
|
+ <select-all v-model.trim="form.replacementShowOrganId" filterable placeholder="请选择所属分部"
|
|
|
+ style="width: 400px !important" multiple :disabled="pageDisabled" clearable>
|
|
|
+ <el-option v-for="item in selects.branchs" :key="item.id" :label="item.name"
|
|
|
+ :value="item.id.toString()"></el-option>
|
|
|
</select-all>
|
|
|
</el-form-item>
|
|
|
<!-- <el-form-item label="学员是否展示" prop="clientShow">
|
|
@@ -426,12 +256,7 @@
|
|
|
<el-option label="否" :value="0"></el-option>
|
|
|
</el-select>
|
|
|
</el-form-item> -->
|
|
|
- <el-alert
|
|
|
- title="商品信息"
|
|
|
- :closable="false"
|
|
|
- class="alert"
|
|
|
- type="info"
|
|
|
- />
|
|
|
+ <el-alert title="商品信息" :closable="false" class="alert" type="info" />
|
|
|
<el-form-item label="商品图片" prop="image">
|
|
|
<!-- <el-upload
|
|
|
class="avatar-uploader"
|
|
@@ -446,14 +271,8 @@
|
|
|
<img v-if="form.image" :src="form.image" class="avatar" />
|
|
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
</el-upload> -->
|
|
|
- <image-cropper
|
|
|
- :options="cropperOptions"
|
|
|
- :disabled="pageDisabled"
|
|
|
- :imgSize="2"
|
|
|
- :imageUrl="form.image"
|
|
|
- @crop-upload-success="cropSuccess"
|
|
|
- bucket_name="mall"
|
|
|
- />
|
|
|
+ <image-cropper :options="cropperOptions" :disabled="pageDisabled" :imgSize="2" :imageUrl="form.image"
|
|
|
+ @crop-upload-success="cropSuccess" bucket_name="mall" />
|
|
|
<p class="imageSize">
|
|
|
<!-- 仅支持上传尺寸为:{{ imageWidthM }}x{{ imageHeightM }}的图片 -->
|
|
|
请上传大小2M以内,格式为jpg、png、gif图片
|
|
@@ -461,21 +280,11 @@
|
|
|
</el-form-item>
|
|
|
<br />
|
|
|
<el-form-item label="商品描述" prop="brief">
|
|
|
- <el-input
|
|
|
- type="textarea"
|
|
|
- v-model.trim="form.brief"
|
|
|
- :disabled="pageDisabled"
|
|
|
- style="width: 400px"
|
|
|
- ></el-input>
|
|
|
+ <el-input type="textarea" v-model.trim="form.brief" :disabled="pageDisabled" style="width: 400px"></el-input>
|
|
|
</el-form-item>
|
|
|
<br />
|
|
|
<el-form-item label="商品详情" prop="desc">
|
|
|
- <el-input
|
|
|
- type="textarea"
|
|
|
- v-model.trim="form.desc"
|
|
|
- :disabled="pageDisabled"
|
|
|
- style="width: 400px"
|
|
|
- ></el-input>
|
|
|
+ <el-input type="textarea" v-model.trim="form.desc" :disabled="pageDisabled" style="width: 400px"></el-input>
|
|
|
</el-form-item>
|
|
|
<br />
|
|
|
<el-form-item v-if="!pageDisabled">
|
|
@@ -991,7 +800,7 @@ replacementShowOrganId: 6,7 */
|
|
|
const _URL = window.URL || window.webkitURL;
|
|
|
const isSize = new Promise((resolve, reject) => {
|
|
|
const img = new Image();
|
|
|
- img.onload = function() {
|
|
|
+ img.onload = function () {
|
|
|
if (imageWidth && imageHeigh) {
|
|
|
this.width === imageWidth && this.height === imageHeigh
|
|
|
? resolve()
|
|
@@ -1091,9 +900,11 @@ replacementShowOrganId: 6,7 */
|
|
|
height: 120px;
|
|
|
display: block;
|
|
|
}
|
|
|
+
|
|
|
.el-select__tags .el-tag.el-tag--info.el-tag--small.el-tag--light {
|
|
|
max-width: 95px;
|
|
|
}
|
|
|
+
|
|
|
.imageSize {
|
|
|
color: red;
|
|
|
line-height: 1.5;
|