123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463 |
- <!DOCTYPE html>
- <html>
- <head>
- <title></title>
- #parse("sys/header.html")
- <style>
- .upload-list {
- display: inline-block;
- width: 60px;
- height: 60px;
- text-align: center;
- line-height: 60px;
- border: 1px solid transparent;
- border-radius: 4px;
- overflow: hidden;
- background: #fff;
- position: relative;
- box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
- margin-right: 4px;
- }
- .upload-list img {
- width: 100%;
- height: 100%;
- }
- .upload-list-cover {
- display: none;
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- background: rgba(0, 0, 0, .6);
- }
- .upload-list:hover .upload-list-cover {
- display: block;
- }
- .upload-list-cover i {
- color: #fff;
- font-size: 20px;
- cursor: pointer;
- margin: 0 2px;
- }
- .hselect {
- margin: 0;
- padding: 0;
- }
- </style>
- </head>
- <body>
- <div id="rrapp" v-cloak>
- <div v-show="showList">
- <Row :gutter="16">
- <div class="search-group">
- <i-col span="3">
- <i-select v-model="q.merchSn" placeholder="商户编号" filterable label-in-value>
- <i-option v-for="merch in queryMerch" :value="merch.merchSn"
- :key="merch.merchSn">{{merch.merchName}}
- </i-option>
- </i-select>
- </i-col>
- <i-col span="3">
- <i-input v-model="q.goodsSn" @on-enter="query" placeholder="商品编码"/>
- </i-col>
- <i-col span="3">
- <i-input v-model="q.prodBarcode" @on-enter="query" placeholder="产品条码"/>
- </i-col>
- <i-col span="3">
- <i-input v-model="q.name" @on-enter="query" placeholder="名称"/>
- </i-col>
- <i-col span="3">
- <i-select v-model="q.goodsBizType" placeholder="货品业务类型"
- label-in-value>
- <i-option v-for="macro in macros" :value="macro.value" :key="macro.id">{{macro.name}}
- </i-option>
- </i-select>
- </i-col><!--
- <i-col span="3">
- <i-select v-model="q.category" placeholder="商品分类" filterable @on-change="changeQueryCategories"
- label-in-value>
- <i-option v-for="category in queryCategories" :value="category.id"
- :key="categoqry.id">{{category.name}}
- </i-option>
- </i-select>
- </i-col>
- <i-col span="3">
- <i-select v-model="q.categoryTwo" placeholder="商品二级分类" filterable label-in-value>
- <i-option v-for="category in queryCategoriesTwo" :value="category.id"
- :key="category.id">{{category.name}}
- </i-option>
- </i-select>
- </i-col>-->
- <i-button @click="query">查询</i-button>
- <i-button @click="reloadSearch">重置</i-button>
- </div>
- <div class="buttons-group" style="width: 100%;margin-top: 8px; padding-left: 10px;">
- #if($shiro.hasPermission("goods:save"))
- <i-button type="info" @click="add"><i class="fa fa-plus"></i> 新增</i-button>
- #end
- #if($shiro.hasPermission("goods:update"))
- <i-button type="warning" @click="update"><i class="fa fa-pencil-square-o"></i> 修改</i-button>
- #end
- #if($shiro.hasPermission("goods:delete"))
- <i-button type="error" @click="del"><i class="fa fa-trash-o"></i> 删除</i-button>
- #end
- <i-button type="primary" @click="enSale"><i class="fa fa-hand-o-up"></i> 上架</i-button>
- <i-button type="dashed" @click="unSale"><i class="fa fa-hand-o-down"></i> 下架</i-button>
- <!--<i-button type="info" @click="goodsExport"><i class="fa fa-plus"></i> 商品导入</i-button>-->
- <!--<i-button type="info" @click="sameGoodsExport"><i class="fa fa-plus"></i> 普货商品导入</i-button>-->
- #if($shiro.hasPermission("goods:upload"))
- <i-col style="display: inline-grid;">
- <Upload :show-upload-list="false" :on-success="uploadExcelSuccess" :on-error="uploadExcelError" :on-format-error="uploadExcelFormatError"
- :format="['xls','xlsx']"
- action="../goods/upload">
- <i-button type="ghost" icon="ios-cloud-upload-outline">商品导入</i-button>
- </Upload>
- </i-col>
- #end
- #if($shiro.hasPermission("goods:generalGoodsUpload"))
- <i-col style="display: inline-grid;">
- <Upload :show-upload-list="false" :on-success="uploadExcelSuccess" :on-error="uploadExcelError" :on-format-error="uploadExcelFormatError"
- :format="['xls','xlsx']"
- action="../goods/generalGoodsUpload">
- <i-button type="ghost" icon="ios-cloud-upload-outline">普货商品导入</i-button>
- </Upload>
- </i-col>
- #end
-
- <a href="../statics/file/goods_export_yyyy_mm_dd_v1.0.0.xls">商品模板下载</a>
- <a href="../statics/file/general_goods_export_yyyy_mm_dd_v1.0.0.xls">普货商品模板下载</a>
- </div>
- </Row>
- <table id="jqGrid"></table>
- <div id="jqGridPager"></div>
- </div>
- <Card v-show="!showList">
- <p slot="title">{{title}}</p>
- <i-form ref="formValidate" :model="goods" :rules="ruleValidate" :label-width="140">
- <Tabs value="name1">
- <Tab-Pane label="通用信息" name="name1">
- <Row>
- <i-col span="16" style="margin-top: -10px;">
- <span style="margin-left: 140px;color: red;font-size: 12px;">* 修改商品二级分类将清空商品参数列表</span>
- </i-col>
- </Row>
- <!--<i-form ref="formValidate" :model="goods" :rules="ruleValidate" :label-width="80">-->
- <Form-item label="商户" prop="merchSn">
- <i-select v-model="goods.merchSn" filterable placeholder="商户" @on-change="showMerchInfo" label-in-value>
- <i-option v-for="merch in merchList" :value="merch.merchSn" :key="merch.merchSn">{{merch.merchName}}</i-option>
- </i-select>
- </Form-item>
- <Form-item label="第三方商户" prop="merchSn">
- <i-select v-model="goods.thirdPartyMerchCode" placeholder="第三方商户" label-in-value>
- <i-option v-for="thirdMerchant in thirdMerchantBizList" :value="thirdMerchant.thirdPartyMerchCode" :key="thirdMerchant.thirdPartyMerchCode">{{thirdMerchant.thirdPartyMerchName}}</i-option>
- </i-select>
- </Form-item>
- <Form-item label="商品编码" prop="goodsSn">
- <i-input v-model="goods.goodsSn" placeholder="商品编码"/>
- </Form-item>
- <Form-item label="名称" prop="name">
- <i-input v-model="goods.name" placeholder="名称"/>
- </Form-item>
- <Form-item label="商品单位" prop="goodsUnit">
- <i-input v-model="goods.goodsUnit" placeholder="商品单位" style="width: 268px;"/>
- </Form-item>
- <!--<Form-item label="类别" prop="attributeCategory" style="width: 268px;">
- <i-select v-model="goods.attributeCategory" filterable label-in-value>
- <i-option v-for="attributeCategory in attributeCategories" :value="attributeCategory.id" :key="attributeCategory.id">{{attributeCategory.name}}
- </i-option>
- </i-select>
- </Form-item>-->
- <Form-item label="SKU" prop="sku">
- <i-input v-model="goods.sku" placeholder="SKU" style="width: 268px;"/>
- </Form-item>
- <Form-item label="产品条码" prop="prodBarcode">
- <i-input v-model="goods.prodBarcode" placeholder="产品条码"/>
- </Form-item>
- <Form-item label="货品业务类型" prop="goodsBizType" >
- <i-select v-model="goods.goodsBizType" filterable placeholder="货品业务类型"
- label-in-value style="width: 268px;" @on-change="changeGoodsBizType">
- <i-option v-for="macro in macros" :value="macro.value" :key="macro.id">{{macro.name}}
- </i-option>
- </i-select>
- </Form-item>
- <Form-item label="供应商" prop="supplierId">
- <i-select v-model="goods.supplierId" placeholder="供应商"
- label-in-value style="width: 268px;">
- <i-option v-for="supplier in suppliers" :value="supplier.id" :key="supplier.id">{{supplier.childSupplierName}}
- </i-option>
- </i-select>
- </Form-item>
- <!--<Form-item label="运费模版" prop="freightId">
- <i-select v-model="goods.freightId" placeholder="运费模版"
- label-in-value style="width: 268px;">
- <i-option v-for="freight in freights" :value="freight.id" :key="freight.id">{{freight.name}}
- </i-option>
- </i-select>
- </Form-item>-->
- <!--<Form-item label="市场价" prop="marketPrice">-->
- <!--<Input-number :min="0.01" :step="0.01" v-model="goods.marketPrice" placeholder="市场价" style="width: 268px;"/>-->
- <!--</Form-item>-->
- <!--<Form-item label="零售价" prop="retailPrice">-->
- <!--<Input-number :min="0.01" :step="0.01" v-model="goods.retailPrice" placeholder="零售价" style="width: 268px;"/>-->
- <!--</Form-item>-->
- <Form-item label="商品税率(0.00)" prop="goodsRate">
- <Input-number :min="0.001" :step="0.001" v-model="goods.goodsRate" placeholder="商品税率" style="width: 268px;"/>
- </Form-item>
- <Row>
- <i-col span="16">
- <Form-item label="商品主图" prop="primaryPicUrl">
- <i-input v-model="goods.primaryPicUrl" placeholder="商品主图" readonly/>
- </Form-item>
- </i-col>
- <i-col span="4">
- <Form-item :label-width="1">
- <Upload style="width: 300px;" action="../sys/oss/upload" :format="['jpg','jpeg','png']"
- max-size="2048"
- :on-success="handleSuccessPicUrl" :on-format-error="handleFormatError"
- :show-upload-list="false"
- :on-exceeded-size="handleMaxSize">
- <i-button icon="ios-cloud-upload-outline">上传图片</i-button>
- </Upload>
- </Form-item>
- </i-col>
- <i-col span="4">
- <Form-item :label-width="1">
- <i-button icon="eye" @click="eyeImagePicUrl">预览图片</i-button>
- </Form-item>
- </i-col>
- </Row>
- <Row>
- <i-col span="16" style="margin-top: -30px;">
- <span style="margin-left: 140px;color: red;font-size: 12px;">* 尺寸建议200x200(正方形模式)像素以内,大小2M以下</span>
- </i-col>
- </Row>
- <Row>
- <i-col span="16">
- <Form-item label="商品列表图" prop="listPicUrl">
- <i-input v-model="goods.listPicUrl" placeholder="商品列表图" readonly/>
- </Form-item>
- </i-col>
- <i-col span="4">
- <Form-item :label-width="1">
- <Upload style="width: 300px;" action="../sys/oss/upload" :format="['jpg','jpeg','png']"
- max-size="2048"
- :on-success="handleSuccessListPicUrl" :on-format-error="handleFormatError"
- :show-upload-list="false"
- :on-exceeded-size="handleMaxSize">
- <i-button icon="ios-cloud-upload-outline">上传图片</i-button>
- </Upload>
- </Form-item>
- </i-col>
- <i-col span="4">
- <Form-item :label-width="1">
- <i-button icon="eye" @click="eyeImageListPicUrl">预览图片</i-button>
- </Form-item>
- </i-col>
- </Row>
- <Row>
- <i-col span="16" style="margin-top: -30px;">
- <span style="margin-left: 140px;color: red;font-size: 12px;">* 尺寸建议200x200(正方形模式)像素以内,大小2M以下</span>
- </i-col>
- </Row>
- <Row>
- <i-col span="16">
- <Form-item label="上传视频" prop="listPicUrl">
- <i-input v-model="goods.videoUrl" placeholder="主视频" readonly/>
- </Form-item>
- </i-col>
- <i-col span="4">
- <Form-item :label-width="1">
- <Upload style="width: 300px;" action="../sys/oss/upload" :format="['mp4']"
- max-size="2048"
- :on-success="handleSuccessListVideoUrl" :on-format-error="handleVideoFormatError"
- :show-upload-list="false"
- :on-exceeded-size="handleVideoMaxSize">
- <i-button icon="ios-cloud-upload-outline">本地上传</i-button>
- </Upload>
- </Form-item>
- </i-col>
- <i-col span="4">
- <Form-item :label-width="1">
- <i-button icon="eye" @click="eyeImageListVideoUrl">预览视频</i-button>
- </Form-item>
- </i-col>
- </Row>
- <Row>
- <i-col span="16" style="margin-top: -30px;">
- <span style="margin-left: 140px;color: red;font-size: 12px;">* 视频不能超过10M,视频时限20秒内,支持mp4视频格式</span>
- </i-col>
- </Row>
- <!--</i-form>-->
- </Tab-Pane>
- <Tab-Pane label="海关信息" name="name2">
- <!--<i-form ref="formValidate" :model="goods" :rules="ruleValidate" :label-width="80">-->
- <Form-item label="产品品牌" prop="brand">
- <i-input v-model="goods.brand" placeholder="产品品牌"/>
- </Form-item>
- <Form-item label="海关备案编号" prop="cusRecCode">
- <i-input v-model="goods.cusRecCode" placeholder="海关备案编号"/>
- </Form-item>
- <Form-item label="计量单位" prop="unitCode">
- <i-select v-model="goods.unitCode" filterable placeholder="计量单位"
- label-in-value>
- <i-option v-for="cusUnitCode in cusUnitCodeList" :value="cusUnitCode.code" :key="cusUnitCode.sn">{{cusUnitCode.name}}
- </i-option>
- </i-select>
- </Form-item>
- <Form-item label="海关商品编码" prop="cusGoodsCode">
- <i-input v-model="goods.cusGoodsCode" placeholder="海关商品编码"/>
- </Form-item>
- <Form-item label="国检规格型号" prop="ciqProdModel" >
- <i-input v-model="goods.ciqProdModel" placeholder="国检规格型号"/>
- </Form-item>
- <Form-item label="原产国" prop="oriCntCode">
- <i-select v-model="goods.oriCntCode" filterable placeholder="原产国"
- label-in-value>
- <i-option v-for="cusNationCode in cusNationCodeList" :value="cusNationCode.code" :key="cusNationCode.sn">{{cusNationCode.name}}
- </i-option>
- </i-select>
- </Form-item>
- <Form-item label="海关申报要素" prop="cusDeclEle">
- <i-input v-model="goods.cusDeclEle" placeholder="海关申报要素"/>
- </Form-item>
- <!--</i-form>-->
- </Tab-Pane>
- <!--<Tab-Pane label="规格" name="name3">
- <!–<i-form ref="formValidate" :model="goods" :rules="ruleValidate" :label-width="80">–>
- <table class="table table-bordered">
- <tr>
- <td style="text-align: center; width: 200px">编码</td>
- <td style="text-align: center; width: 100px">商品默认</td>
- <!–<td style="text-align: center; width: 100px">规格</td>–>
- <td style="text-align: center;">规格说明</td>
- <td style="text-align: center; width: 90px">操作</td>
- </tr>
- <tr v-for="(item,index) in productEntityList" v-show="item.isDelete==0">
- <td>
- <i-input v-model="item.goodsSn" placeholder="商品编码"/>
- </td>
- <td>
- <select class="hselect" v-model="item.goodsDefault" filterable label-in-value>
- <option value="1">是</option>
- <option value="0">否</option>
- </select>
- </td>
- <td>
- <i-input v-model="item.goodsSpecificationNameValue" placeholder="规格说明"/>
- </td>
- <td>
- <button v-if="index == 0" class="btn btn-primary btn-sm" type="button"
- @click="addSpeRow">
- <i class="fa fa-plus"></i>
- </button>
- <button class="btn red btn-sm" type="button" @click="delSpeRow(index)">
- <i class="fa fa-trash-o"></i>
- </button>
- </td>
- </tr>
- </table>
- <!–</i-form>–>
- </Tab-Pane>-->
- <Tab-Pane label="详细描述" name="name4">
- <template>
- <div class="upload-list" v-for="item in uploadList">
- <template v-if="item.status === 'finished'">
- <img :src="item.imgUrl"/>
- <div class="upload-list-cover">
- <Icon type="ios-eye-outline" @click.native="handleView(item.imgUrl)"></Icon>
- <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
- </div>
- </template>
- <template v-else>
- <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
- </template>
- </div>
- <Upload
- ref="upload"
- :show-upload-list="false"
- :default-file-list="uploadList"
- :on-success="handleSuccess"
- :format="['jpg','jpeg','png']"
- :max-size="2048"
- :on-format-error="handleFormatError"
- :on-exceeded-size="handleMaxSize"
- :before-upload="handleBeforeUpload"
- multiple
- type="drag"
- action="../sys/oss/upload"
- style="display: inline-block;width:58px;">
- <div style="width: 58px;height:58px;line-height: 58px;">
- <Icon type="camera" size="20"></Icon>
- </div>
- </Upload>
- <Modal title="查看图片" v-model="visible">
- <img :src="imgName" v-if="visible" style="width: 100%"/>
- </Modal>
- <span style="color: red;font-size: 12px;">* 商品详情轮播图,尺寸建议750x750(正方形模式)像素以内,大小2M以下</span>
- </template>
- <div id="goodsDesc"></div>
- </Tab-Pane>
- <!--<Tab-Pane label="参数" name="name5">-->
- <!--<!–<i-form ref="formValidate" :model="goods" :rules="ruleValidate" :label-width="80">–>-->
- <!---->
- <!--<!–</i-form>–>-->
- <!--</Tab-Pane>-->
- <Tab-Pane label="其他信息" name="name6">
- <!--<i-form ref="formValidate" :model="goods" :rules="ruleValidate" :label-width="80">-->
- <Form-item label="排序" prop="sortOrder">
- <Input-number :min="1" :step="1" v-model="goods.sortOrder" placeholder="排序" style="width: 188px;"/>
- </Form-item>
- <Form-item label="上架" prop="isOnSale">
- <Radio-group v-model="goods.isOnSale">
- <Radio label="0">
- <span>否</span>
- </Radio>
- <Radio label="1">
- <span>是</span>
- </Radio>
- </Radio-group>
- </Form-item>
- <Form-item v-if="showInput" label="热销" prop="isHot">
- <Radio-group v-model="goods.isHot">
- <Radio label="0">
- <span>否</span>
- </Radio>
- <Radio label="1">
- <span>是</span>
- </Radio>
- </Radio-group>
- </Form-item>
- <Form-item label="推广描述" prop="promotionDesc">
- <i-input v-model="goods.promotionDesc" placeholder="推广描述"/>
- </Form-item>
- <Form-item label="简明介绍" prop="goodsBrief">
- <i-input v-model="goods.goodsBrief" placeholder="简明介绍"/>
- </Form-item>
- <!--</i-form>-->
- </Tab-Pane>
- </Tabs>
- </i-form>
- <div style="padding-left: 20px">
- <i-button type="primary" @click="handleSubmit('formValidate')">提交</i-button>
- <i-button type="warning" @click="reload" style="margin-left: 8px"/>返回</i-button>
- <!--<i-button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</i-button>-->
- </div>
- </Card>
- </div>
- <!-- 选择类型 -->
- <div id="categoryLayer" style="display: none;padding: 10px;">
- <ul id="categoryTree" class="ztree"></ul>
- </div>
- <script src="${rc.contextPath}/js/shop/goods.js?_${date.systemTime}"></script>
- </body>
- </html>
|