Skip to content

G
gs1
Commit 32dfa8dd by 林家欣
Options

Merge branch 'master' of https://gitee.com/gs1-office-web-sit/gs1

parents 3cef5b8f e7aeb370
Showing with 372 additions and 406 deletions
src/axios/module/search.js
...@@ -2,7 +2,6 @@ import { ...@@ -2,7 +2,6 @@ import {
POST POST
} from "../fetch.js" } from "../fetch.js"
const Prefix = process.env.NODE_ENV === 'development' ? '/gs1' : ''; const Prefix = process.env.NODE_ENV === 'development' ? '/gs1' : '';
// 条码查询—GLN查询/境外码查询 // 条码查询—GLN查询/境外码查询
...@@ -15,8 +14,25 @@ const searchGetList = (params = {}) => { ...@@ -15,8 +14,25 @@ const searchGetList = (params = {}) => {
return POST(`${Prefix}/office/shortcode/api/getList`, params) return POST(`${Prefix}/office/shortcode/api/getList`, params)
} }
// 条码查询—境内码查询
const searchInternal = (params = {}) => {
return POST(`${Prefix}/office/codeSearch/api/domesticCode`, params)
}
// 条码查询—自行车企业代码公告查询
const searchBike = (params = {}) => {
return POST(`${Prefix}/office/bikefirm/api/getBikeFirm`, params)
}
// 条码查询—术语查询
const searchGlossary = (params = {}) => {
return POST(`${Prefix}/office/glossary/api/terminology`, params)
}
export default { export default {
searchGln, searchGln,
searchGetList, searchGetList,
searchInternal,
searchBike,
searchGlossary,
} }
src/views/Search/bike.vue
...@@ -3,11 +3,18 @@ ...@@ -3,11 +3,18 @@
<div class="title">自行车企业代码公告查询</div> <div class="title">自行车企业代码公告查询</div>
<div class="body"> <div class="body">
<div style="padding-top:20px"> <div style="padding-top:20px">
<el-form label-position="left" label-width="180px" :model="search"> <el-radio-group v-model="type">
<el-form-item label="境外商品条码信息查询："> <el-radio :label="CODE">企业代码</el-radio>
<el-radio :label="NAME">企业名称</el-radio>
</el-radio-group>
<el-form label-position="left"
style="margin-top:40px"
label-width="100px"
:model="search">
<el-form-item :label="type===CODE?'企业代码：':'企业名称：'">
<el-input <el-input
v-model="search.code" v-model="search.code"
placeholder="请输入正确的境外商品条码！" :placeholder="type===CODE?'请输入正确的4位企业代码！':'请输入正确的企业名称！'"
class="w240" class="w240"
></el-input> ></el-input>
</el-form-item> </el-form-item>
...@@ -15,20 +22,21 @@ ...@@ -15,20 +22,21 @@
<el-form-item label="验证码："> <el-form-item label="验证码：">
<div class="y-center"> <div class="y-center">
<el-input <el-input
v-model="search.validate" v-model="captcha"
placeholder="请输入验证码" placeholder="请输入验证码"
class="w160" class="w160"
></el-input> ></el-input>
<div class="validate-code"> <div class="validate-code">
<img src="../../assets/image/validate.jpg" alt="" /> <img :src="captchaPath" @click="getCaptcha()" alt=""/>
</div> </div>
<el-button <el-button
style="margin-left:40px" style="margin-left:40px"
type="primary" type="primary"
@click="handleSearch" @click="handleSearch"
>查询</el-button >查询
</el-button
> >
</div> </div>
</el-form-item> </el-form-item>
...@@ -38,12 +46,24 @@ ...@@ -38,12 +46,24 @@
<div class="result-box-title">查询 {{ searchCodeShow }} 结果</div> <div class="result-box-title">查询 {{ searchCodeShow }} 结果</div>
<div class="result-box-body"> <div class="result-box-body">
<template v-if="result"> <template v-if="result">
<div class="title">商品信息</div> <el-table
<div class="product-info"></div> :data="result"
<div class="title">企业信息</div> header-cell-class-name="search-table-hc"
<div class="company-info"></div> style="width: 100%"
>
<el-table-column prop="code" label="企业代码" width="100">
</el-table-column>
<el-table-column label="企业名称">
<template slot-scope="scope">
<span type="text" class="hover" size="small">{{
scope.row.firmName
}}</span>
</template>
</el-table-column>
<el-table-column prop="status" label="公告状态" width="80"></el-table-column>
</el-table>
</template> </template>
<span v-else>您输入的商品条码格式不正确，请确认后重试。</span> <span class="error-msg" v-else>{{ errorMsg }}</span>
</div> </div>
</div> </div>
</div> </div>
...@@ -51,13 +71,9 @@ ...@@ -51,13 +71,9 @@
<div class="notice"> <div class="notice">
<div class="title">友情提示</div> <div class="title">友情提示</div>
<div class="content-wrapper"> <div class="content-wrapper">
<img src="./img/query-external-barcode.png" align="right" alt="" /> <img src="./img/bikecode.jpeg" style="width: 240px" align="right" alt=""/>
<p>
1、目前，国际物品编码组织（GS1）已将690至697之间的前缀码分配给中国物品编码中心使用，通常以这些前缀码开始的厂商识别代码都是由中国物品编码中心负责分配和管理的；以其他前缀码开始的则由境外GS1成员组织负责，一般称为"境外条码"，以下为您提供了境外商品条码信息的查询工具，请根据提示进行相关查询。欲了解GS1分配的前缀码，请点击：了解更多
>>
</p>
<p> <p>
2、本查询仅适用于中华人民共和国境外注册的商品条码信息。 右图为新自行车的编码规则的示意，新自行车编码采用的是15位全数字代码结构，由4部分组成，X1～X4是企业代码，X5是车种代码，X6～X7是生产年份代码，X8～X15是生产流水号代码。请根据自行车企业的代码和名称进行查询。
</p> </p>
</div> </div>
</div> </div>
...@@ -65,21 +81,47 @@ ...@@ -65,21 +81,47 @@
</template> </template>
<script> <script>
import validation from "@/views/Search/validation";
const CODE = 0
const NAME = 1
export default { export default {
mixins: [validation],
data() { data() {
return { return {
search: { code: "", validate: "" }, CODE,
NAME,
type: CODE,
search: {code: ""},
searchCodeShow: "", searchCodeShow: "",
showResult: false, showResult: false,
result: null, result: null,
}; };
}, },
methods: { methods: {
handleSearch() { async handleSearch() {
const params = {
code: "",
firmName: "",
uuid: this.uuid,
captcha: this.captcha,
};
if (this.type === CODE) {
params.code = this.search.code
} else if (this.type === NAME) {
params.firmName = this.search.code
}
this.searchCodeShow = this.search.code; this.searchCodeShow = this.search.code;
this.showResult = true; this.showResult = true;
if (this.search.code === "1") { const searchGlnRes = await this.$api.search.searchBike(params);
this.result = {}; const {returnCode, data} = searchGlnRes;
if (returnCode === "0") {
this.result = data;
} else {
this.errorMsg =
searchGlnRes.returnMsg ||
"没有符合条件的记录！";
this.result = null;
} }
}, },
}, },
...@@ -93,6 +135,7 @@ export default { ...@@ -93,6 +135,7 @@ export default {
width: 70px; width: 70px;
height: 40px; height: 40px;
margin-left: 11px; margin-left: 11px;
> img { > img {
width: 100%; width: 100%;
height: 100%; height: 100%;
......
src/views/Search/check.vue
...@@ -4,60 +4,52 @@ ...@@ -4,60 +4,52 @@
<div class="body"> <div class="body">
<div style="padding-top:20px"> <div style="padding-top:20px">
<el-form label-position="left" label-width="180px" :model="search"> <el-form label-position="left" label-width="180px" :model="search">
<el-form-item label="境外商品条码信息查询："> <el-form-item label="包装指示符：">
<el-input <el-input
v-model="search.code" v-model="search.pack"
placeholder="请输入正确的境外商品条码！" class="w160"
class="w240" @input="handlePackChange"
></el-input> ></el-input>
<span>（备注：单品为0）</span>
</el-form-item> </el-form-item>
<el-form-item label="验证码："> <el-form-item label="请输入您要校验的商品条码（前12位)：">
<div class="y-center">
<el-input <el-input
v-model="search.validate" v-model="search.code"
placeholder="请输入验证码"
class="w160" class="w160"
@input="handleCodeChange"
></el-input> ></el-input>
</el-form-item>
<div class="validate-code"> <el-form-item label="生成校验码：">
<img src="../../assets/image/validate.jpg" alt="" /> <div class="y-center">
</div> <el-input
disabled
<el-button v-model="search.result"
style="margin-left:40px" class="w40"
type="primary" ></el-input>
@click="handleSearch" <a href="http://www.ancc.org.cn/Knowledge/BarcodeArticle.aspx?id=301" style="margin-left: 20px"
>查询</el-button target="_blank" class="hover">检验码计算方法</a>
>
</div> </div>
</el-form-item> </el-form-item>
</el-form> </el-form>
<div class="result-box" v-if="showResult">
<div class="result-box-title">查询 {{ searchCodeShow }} 结果</div>
<div class="result-box-body">
<template v-if="result">
<div class="title">商品信息</div>
<div class="product-info"></div>
<div class="title">企业信息</div>
<div class="company-info"></div>
</template>
<span v-else>您输入的商品条码格式不正确，请确认后重试。</span>
</div>
</div>
</div> </div>
</div> </div>
<div class="notice"> <div class="notice">
<div class="title">友情提示</div> <div class="title">友情提示</div>
<div class="content-wrapper"> <div class="content-wrapper">
<img src="./img/query-external-barcode.png" align="right" alt="" /> <img src="./img/query-external-barcode.png" align="right" alt=""/>
<p> <p>
1、目前，国际物品编码组织（GS1）已将690至697之间的前缀码分配给中国物品编码中心使用，通常以这些前缀码开始的厂商识别代码都是由中国物品编码中心负责分配和管理的；以其他前缀码开始的则由境外GS1成员组织负责，一般称为"境外条码"，以下为您提供了境外商品条码信息的查询工具，请根据提示进行相关查询。欲了解GS1分配的前缀码，请点击：了解更多 1.请根据下列提示，输入商品的包装指示符和商品条码，系统会自动计算出它的校验码。欲了解校验码的计算规则，请点击
>> <a
href="http://www.ancc.org.cn/Knowledge/goodsGln.aspx"
target="_blank"
style="color: #5ac8fa"
>了解更多 >></a
>
</p> </p>
<p> <p>
2、本查询仅适用于中华人民共和国境外注册的商品条码信息。 2.校验码是位于商品条码最后一位的数字，用于检验编码是否正确。请核对系统自动生成的校验码与要查询的商品条码的最后一位数字是否一致，一致则为正确。
</p> </p>
</div> </div>
</div> </div>
...@@ -68,20 +60,41 @@ ...@@ -68,20 +60,41 @@
export default { export default {
data() { data() {
return { return {
search: { code: "", validate: "" }, search: {code: "", pack: "", result: ''},
searchCodeShow: "",
showResult: false,
result: null, result: null,
}; };
}, },
methods: { methods: {
handleSearch() { handleCodeChange() {
this.searchCodeShow = this.search.code; if (this.search.code.length === 13) {
this.showResult = true; this.search.code = this.search.code.substring(0, 12)
if (this.search.code === "1") { }
this.result = {}; if (this.search.code) {
this.search.result = this.barcodeChecksum(this.search.pack + this.search.code)
} }
}, },
handlePackChange() {
if (this.search.pack.length === 2) {
this.search.pack = this.search.pack.substring(0, 1)
}
if (this.search.code) {
this.search.result = this.barcodeChecksum(this.search.pack + this.search.code)
}
},
barcodeChecksum(barcode) {
let l = barcode.length,
sum = 0;
if (typeof barcode !== 'string' || /\D/.test(barcode) || (l !== 12 && l !== 13)) {
throw new Error('参数不是12(EAN-13)或13(ITF-14)位数字字符！');
//return;
}
barcode.split('').reverse().forEach(function (n, i) {
sum += i % 2 ? Number(n) : Number(n) * 3;
});
return Math.ceil(sum / 10) * 10 - sum;
},
handleToMethod() {
},
}, },
}; };
</script> </script>
...@@ -93,6 +106,7 @@ export default { ...@@ -93,6 +106,7 @@ export default {
width: 70px; width: 70px;
height: 40px; height: 40px;
margin-left: 11px; margin-left: 11px;
> img { > img {
width: 100%; width: 100%;
height: 100%; height: 100%;
......
src/views/Search/external.vue
...@@ -43,63 +43,20 @@ ...@@ -43,63 +43,20 @@
<div class="result-box-title">查询 {{ searchCodeShow }} 结果</div> <div class="result-box-title">查询 {{ searchCodeShow }} 结果</div>
<div class="result-box-body"> <div class="result-box-body">
<template v-if="result"> <template v-if="result">
<div class="title">商品信息</div>
<div v-if="result.product" class="product-info row">
<div class="left col-lg-8">
<div
class="row_"
:key="item.key"
v-for="item in productFields"
>
<div class="cell">
{{ item.label }}
</div>
<div class="value">
{{ result.product[item.key] }}
</div>
</div>
</div>
<div class="right col-lg-4"></div>
</div>
<div v-else class="product-info row">
<div class="left col-lg-8">
<div class="row_">
<div class="cell">商品条码</div>
<div class="value">
{{ searchCodeShow }}
</div>
</div>
</div>
<p
style="
font-size: 14px;
font-weight: 400;
color: #f26335;
line-height: 22px;
text-align: center;
margin-bottom: 29px;
margin-top: 14px;
"
>
该进口商品的中文信息尚未通报，进口商品经营企业可查看《进口商品数据通报操作指南》
（http://import.gds.org.cn/Content/staticpage/operateGuide.html）进行通报。
</p>
</div>
<div class="title">企业信息</div>
<div class="company-info"> <div class="company-info">
<el-table <el-table
:data="result.companyInfo" :data="result"
header-cell-class-name="search-table-hc" header-cell-class-name="search-table-hc"
style="width: 100%" style="width: 100%"
> >
<el-table-column prop="brand" label="国际品牌商"> <el-table-column prop="address.name" label="企业名称"></el-table-column>
</el-table-column> <el-table-column prop="gepirRequestedKey.requestedKeyValue" label="GTIN"></el-table-column>
<el-table-column prop="address" label="国际品牌商地址"> <el-table-column prop="address.streetAddressOne" label="地址"></el-table-column>
</el-table-column> <el-table-column prop="address.city" label="城市"></el-table-column>
</el-table> </el-table>
</div> </div>
</template> </template>
<span v-else>您输入的商品条码格式不正确，请确认后重试。</span> <span style="color: rgb(255, 59, 48)" v-else>{{ errorMsg }}</span>
</div> </div>
</div> </div>
</div> </div>
...@@ -119,94 +76,40 @@ ...@@ -119,94 +76,40 @@
</template> </template>
<script> <script>
import { getUUID } from "@/utils/utils"; import validation from "@/views/Search/validation";
export default { export default {
mixins: [validation],
data() { data() {
return { return {
captchaPath: "", search: { code: "" },
search: { code: "", captcha: "", uuid: "" },
searchCodeShow: "", searchCodeShow: "",
showResult: false, showResult: false,
result: null, result: null,
productFields: [
{
key: "id",
label: "商品条码：",
},
{
key: "name",
label: "产品名称：",
},
{
key: "brand",
label: "品牌：",
},
{
key: "classify",
label: "产品分类：",
},
{
key: "standard",
label: "规格：",
},
{
key: "netContent",
label: "净含量：",
},
{
key: "origin",
label: "产地：",
},
],
}; };
}, },
created() {
this.getCaptcha();
},
methods: { methods: {
// 获取验证码 async handleSearch() {
getCaptcha() {
this.search.uuid = getUUID();
const query = {
uuid: this.search.uuid,
};
this.$api.getCaptcha(query).then((res) => {
console.log(res, 'res');
this.captchaPath = window.URL.createObjectURL(res.body);
});
},
handleSearch() {
this.searchCodeShow = this.search.code; this.searchCodeShow = this.search.code;
this.showResult = true; this.showResult = true;
if (this.search.code === "1") { const params = {
this.result = { "code": this.search.code,
product: { "type": "GTIN",
id: "1", "requestedLanguage":"en",
name: "法国梦巴黎圣萨蒂黑歌海娜红", "captcha":this.captcha,
brand: "法国梦巴黎", "uuid":this.uuid
classify: "利口酒",
standard: "750ML",
netContent: "750毫升",
origin: "法国",
},
companyInfo: [
{ brand: "CAVES LANGUEDOC ROUSILLON", address: "ZAC MILLENAIRE" },
],
};
} else if (this.search.code === "2") {
this.result = {
companyInfo: [
{ brand: "CAVES LANGUEDOC ROUSILLON", address: "ZAC MILLENAIRE" },
],
}; };
const searchGlnRes = await this.$api.search.searchGln(params);
const { returnCode, data } = searchGlnRes;
if (returnCode === "0") {
this.result = [data];
} else { } else {
this.errorMsg =
searchGlnRes.returnMsg ||
"您输入的商品条码格式不正确，请确认后重试。";
this.result = null; this.result = null;
} }
}, },
openUrl(url) {
window.open(url)
}
}, },
}; };
</script> </script>
...@@ -222,18 +125,6 @@ export default { ...@@ -222,18 +125,6 @@ export default {
cursor: pointer; cursor: pointer;
} }
} }
.validate-code {
display: inline-block;
width: 70px;
height: 40px;
margin-left: 11px;
> img {
width: 100%;
height: 100%;
cursor: pointer;
}
}
.product-info { .product-info {
margin-top: -15px; margin-top: -15px;
...@@ -263,13 +154,5 @@ export default { ...@@ -263,13 +154,5 @@ export default {
.right { .right {
} }
} }
.w160 {
width: 160px;
}
.w240 {
width: 240px;
}
} }
</style> </style>
src/views/Search/glossary.vue
...@@ -3,11 +3,21 @@ ...@@ -3,11 +3,21 @@
<div class="title">条码术语查询</div> <div class="title">条码术语查询</div>
<div class="body"> <div class="body">
<div style="padding-top:20px"> <div style="padding-top:20px">
<el-form label-position="left" label-width="180px" :model="search"> <el-form label-position="left" label-width="120px" :model="search">
<el-form-item label="境外商品条码信息查询："> <el-form-item label="选择搜索范围：">
<el-select class="w240" v-model="type" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="术语搜索：">
<el-input <el-input
v-model="search.code" v-model="search.code"
placeholder="请输入正确的境外商品条码！"
class="w240" class="w240"
></el-input> ></el-input>
</el-form-item> </el-form-item>
...@@ -15,20 +25,21 @@ ...@@ -15,20 +25,21 @@
<el-form-item label="验证码："> <el-form-item label="验证码：">
<div class="y-center"> <div class="y-center">
<el-input <el-input
v-model="search.validate" v-model="captcha"
placeholder="请输入验证码" placeholder="请输入验证码"
class="w160" class="w160"
></el-input> ></el-input>
<div class="validate-code"> <div class="validate-code">
<img src="../../assets/image/validate.jpg" alt="" /> <img :src="captchaPath" @click="getCaptcha()" alt=""/>
</div> </div>
<el-button <el-button
style="margin-left:40px" style="margin-left:40px"
type="primary" type="primary"
@click="handleSearch" @click="handleSearch"
>查询</el-button >查询
</el-button
> >
</div> </div>
</el-form-item> </el-form-item>
...@@ -38,73 +49,69 @@ ...@@ -38,73 +49,69 @@
<div class="result-box-title">查询 {{ searchCodeShow }} 结果</div> <div class="result-box-title">查询 {{ searchCodeShow }} 结果</div>
<div class="result-box-body"> <div class="result-box-body">
<template v-if="result"> <template v-if="result">
<div class="title">商品信息</div> <el-table
<div class="product-info"></div> :data="result"
<div class="title">企业信息</div> header-cell-class-name="search-table-hc"
<div class="company-info"></div> style="width: 100%"
>
<el-table-column prop="titleEn" label="英文标题" width="130">
</el-table-column>
<el-table-column prop="titleCn" width="110" label="中文标题">
</el-table-column>
<el-table-column prop="content" label="解释">
</el-table-column>
<el-table-column prop="keyword" label="关键字" width="160"></el-table-column>
</el-table>
</template> </template>
<span v-else>您输入的商品条码格式不正确，请确认后重试。</span> <span class="error-msg" v-else>{{errorMsg}}</span>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="notice">
<div class="title">友情提示</div>
<div class="content-wrapper">
<img src="./img/query-external-barcode.png" align="right" alt="" />
<p>
1、目前，国际物品编码组织（GS1）已将690至697之间的前缀码分配给中国物品编码中心使用，通常以这些前缀码开始的厂商识别代码都是由中国物品编码中心负责分配和管理的；以其他前缀码开始的则由境外GS1成员组织负责，一般称为"境外条码"，以下为您提供了境外商品条码信息的查询工具，请根据提示进行相关查询。欲了解GS1分配的前缀码，请点击：了解更多
>>
</p>
<p>
2、本查询仅适用于中华人民共和国境外注册的商品条码信息。
</p>
</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import validation from "@/views/Search/validation";
export default { export default {
mixins: [validation],
data() { data() {
return { return {
search: { code: "", validate: "" }, type: '',
options: [
{label: '中文标题', value: '1'},
{label: '英文标题', value: '2'},
{label: '关键字', value: '3'},
{label: '术语解释', value: '4'},
],
search: {code: "",},
searchCodeShow: "", searchCodeShow: "",
showResult: false, showResult: false,
result: null, result: null,
}; };
}, },
methods: { methods: {
handleSearch() { async handleSearch() {
const params = {
keyword: this.search.code,
type: this.type,
uuid: this.uuid,
captcha: this.captcha,
};
this.searchCodeShow = this.search.code; this.searchCodeShow = this.search.code;
this.showResult = true; this.showResult = true;
if (this.search.code === "1") { const searchGlnRes = await this.$api.search.searchGlossary(params);
this.result = {}; const {returnCode, data} = searchGlnRes;
if (returnCode === "0") {
this.result = data;
} else {
this.errorMsg =
searchGlnRes.returnMsg ||
"没有符合条件的记录！";
this.result = null;
} }
}, },
}, },
}; };
</script> </script>
<style lang="scss">
.search-content {
.validate-code {
display: inline-block;
width: 70px;
height: 40px;
margin-left: 11px;
> img {
width: 100%;
height: 100%;
}
}
.w160 {
width: 160px;
}
.w240 {
width: 240px;
}
}
</style>
src/views/Search/internal.vue
...@@ -39,29 +39,23 @@ ...@@ -39,29 +39,23 @@
</el-form-item> </el-form-item>
<el-form-item label="验证码："> <el-form-item label="验证码：">
<el-button <div class="y-center">
type="primary" <el-input
class="w240" v-model="captcha"
icon="gs-guard-icon" placeholder="请输入验证码"
@click="handleVerification" class="w160"
v-if="!isVerificationPass" ></el-input>
>
点击此处进行验证 <div class="validate-code">
</el-button> <img :src="captchaPath" @click="getCaptcha()" alt="" />
<el-button </div>
type="success"
class="w240"
icon="el-icon-circle-check"
v-else
>
验证通过
</el-button>
<el-button <el-button
style="margin-left: 40px" style="margin-left: 40px"
type="primary" type="primary"
@click="handleSearchCompany" @click="handleSearchCompany"
>查询 >查询</el-button>
</el-button> </div>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
...@@ -85,7 +79,7 @@ ...@@ -85,7 +79,7 @@
<el-form-item label="验证码："> <el-form-item label="验证码：">
<el-button type="primary" class="w240"> <el-button type="primary" class="w240">
<div style="diplay: flex; align-item: center"> <div style="diplay: flex; align-item: center">
<img style="height: 14px" src="./img/guard.png" alt="" /> <img style="height: 14px" src="./img/guard.png" alt=""/>
点击此处进行验证 点击此处进行验证
</div> </div>
</el-button> </el-button>
...@@ -120,7 +114,7 @@ ...@@ -120,7 +114,7 @@
</el-table-column> </el-table-column>
<el-table-column prop="name" label="厂商名称" width="180"> <el-table-column prop="name" label="厂商名称" width="180">
</el-table-column> </el-table-column>
<el-table-column prop="status" label="状态"> </el-table-column> <el-table-column prop="status" label="状态"></el-table-column>
<el-table-column label="详细"> <el-table-column label="详细">
<template> <template>
<span <span
...@@ -145,7 +139,7 @@ ...@@ -145,7 +139,7 @@
</el-table-column> </el-table-column>
</el-table> </el-table>
</template> </template>
<span v-else>没有符合条件的记录！</span> <span style="color: rgb(255, 59, 48)" v-else>{{ errorMsg }}</span>
</div> </div>
</div> </div>
</div> </div>
...@@ -153,7 +147,7 @@ ...@@ -153,7 +147,7 @@
<div class="notice"> <div class="notice">
<div class="title">友情提示</div> <div class="title">友情提示</div>
<div class="content-wrapper"> <div class="content-wrapper">
<img src="./img/pic_ex_jl.png" align="right" alt="" /> <img src="./img/pic_ex_jl.png" align="right" alt=""/>
<p> <p>
1、<a 1、<a
href="http://www.ancc.org.cn/Knowledge/goodsGln.aspx" href="http://www.ancc.org.cn/Knowledge/goodsGln.aspx"
...@@ -178,19 +172,21 @@ ...@@ -178,19 +172,21 @@
</div> </div>
</div> </div>
<Vcode :show="isShowVcode" @success="onSuccess" @close="onClose" /> <Vcode :show="isShowVcode" @success="onSuccess" @close="onClose"/>
</div> </div>
</template> </template>
<script> <script>
import { getUUID } from "@/utils/utils"; import {getUUID} from "@/utils/utils";
import Vcode from "vue-puzzle-vcode"; import Vcode from "vue-puzzle-vcode";
import validation from "@/views/Search/validation";
const CODE = '1'; const CODE = '1';
const NAME = '2'; const NAME = '2';
const ADDRESS = '3'; const ADDRESS = '3';
export default { export default {
mixins:[validation],
data() { data() {
return { return {
CODE, CODE,
...@@ -210,13 +206,28 @@ export default { ...@@ -210,13 +206,28 @@ export default {
}, },
result: null, result: null,
searchCodeShow: "", searchCodeShow: "",
errorMsg: "",
showResult: false, showResult: false,
}; };
}, },
components: { components: {
Vcode, Vcode,
}, },
created() {
this.getCaptcha();
},
methods: { methods: {
// 获取验证码
getCaptcha() {
this.uuid = getUUID()
const query = {
uuid: this.uuid
};
this.$api.getCaptcha(query).then((res) => {
console.log(res, "res");
this.captchaPath = window.URL.createObjectURL(res.body);
});
},
// 点击此处进行验证 // 点击此处进行验证
handleVerification() { handleVerification() {
console.log("点击此处进行验证"); console.log("点击此处进行验证");
...@@ -244,32 +255,20 @@ export default { ...@@ -244,32 +255,20 @@ export default {
this.showResult = true; this.showResult = true;
if (this.company === CODE) { if (this.company === CODE) {
this.searchCodeShow = this.companySearch.code; this.searchCodeShow = this.companySearch.code;
if (this.companySearch.code === "1") {
this.result = [
{ id: "6912614", name: "北京阿里巴巴食品有限公司", 状态: "已注销" },
{ id: "6912614", name: "北京阿里巴巴食品有限公司", 状态: "已注销" },
{ id: "6912614", name: "北京阿里巴巴食品有限公司", 状态: "已注销" },
{ id: "6912614", name: "北京阿里巴巴食品有限公司", 状态: "已注销" },
{ id: "6912614", name: "北京阿里巴巴食品有限公司", 状态: "已注销" },
{ id: "6912614", name: "北京阿里巴巴食品有限公司", 状态: "已注销" },
{ id: "6912614", name: "北京阿里巴巴食品有限公司", 状态: "已注销" },
{ id: "6912614", name: "北京阿里巴巴食品有限公司", 状态: "已注销" },
];
}
} else if (this.company === NAME) { } else if (this.company === NAME) {
this.searchCodeShow = this.companySearch.name; this.searchCodeShow = this.companySearch.name;
} else { } else {
this.searchCodeShow = this.companySearch.address; this.searchCodeShow = this.companySearch.address;
} }
const params = { type:this.company,uuid: getUUID() }; const params = {type: this.company, uuid: this.uuid, code: this.searchCodeShow, captcha: this.captcha,};
const searchGlnRes = await this.$api.search.searchGln(params); const searchGlnRes = await this.$api.search.searchInternal(params);
const { returnCode, data } = searchGlnRes; const {returnCode, data} = searchGlnRes;
if (returnCode === "0") { if (returnCode === "0") {
this.result = [data]; this.result = [data];
} else { } else {
this.errorMsg = this.errorMsg =
searchGlnRes.returnMsg || searchGlnRes.returnMsg ||
"您输入的商品条码格式不正确，请确认后重试。"; "没有符合条件的记录！";
this.result = null; this.result = null;
} }
}, },
...@@ -284,10 +283,6 @@ export default { ...@@ -284,10 +283,6 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.w240 {
width: 240px;
}
.gs-guard-icon { .gs-guard-icon {
display: inline-block; display: inline-block;
margin-bottom: -1px; margin-bottom: -1px;
......
src/views/Search/shortcode.vue
...@@ -2,59 +2,26 @@ ...@@ -2,59 +2,26 @@
<div class="search-content"> <div class="search-content">
<div class="title">缩短码查询</div> <div class="title">缩短码查询</div>
<div class="body"> <div class="body">
<el-tabs v-model="activeName" class="tab-no-bottom">
<el-tab-pane label="查询产品信息" name="first">
<el-form label-position="left"
label-width="180px"
style="margin-top:20px"
:model="productSearch">
<el-form-item label="缩短码查询：">
<el-input
v-model="productSearch.code"
placeholder="请输入正确的8位商品条码！"
class="w240"
>
</el-input>
</el-form-item>
<el-form-item label="验证码：">
<div class="y-center">
<el-input
v-model="productSearch.validate"
placeholder="请输入验证码"
class="w160"
></el-input>
<div class="validate-code">
<img src="../../assets/image/validate.jpg" alt="" />
</div>
<el-button
style="margin-left:40px"
type="primary"
@click="handleSearchProduct"
>查询</el-button
>
</div>
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane label="查询厂商信息" name="second">
<div style="padding-top:20px"> <div style="padding-top:20px">
<el-radio-group v-model="company"> <el-radio-group v-model="company">
<el-radio :label="CODE">EAN/UCC-8缩短码</el-radio>
<el-radio :label="NAME">根据厂商名称查询</el-radio> <el-radio :label="NAME">根据厂商名称查询</el-radio>
<el-radio :label="ADDRESS">根据厂商地址查询</el-radio> <el-radio :label="ADDRESS">根据厂商地址查询</el-radio>
</el-radio-group> </el-radio-group>
<el-form <el-form
label-position="left" label-position="left"
label-width="180px" label-width="120px"
style="margin-top:40px" style="margin-top:40px"
:model="companySearch" :model="companySearch"
> >
<el-form-item label="缩短码查询："> <el-form-item label="缩短码查询：">
<el-input <el-input
v-show="company === CODE"
v-model="companySearch.code"
placeholder="请输入正确的8位商品条码！"
class="w240"
></el-input>
<el-input
v-show="company === NAME" v-show="company === NAME"
v-model="companySearch.name" v-model="companySearch.name"
placeholder="请输入正确的厂商名称！" placeholder="请输入正确的厂商名称！"
...@@ -71,44 +38,53 @@ ...@@ -71,44 +38,53 @@
<el-form-item label="验证码："> <el-form-item label="验证码：">
<div class="y-center"> <div class="y-center">
<el-input <el-input
v-model="companySearch.validate" v-model="captcha"
placeholder="请输入验证码" placeholder="请输入验证码"
class="w160" class="w160"
></el-input> ></el-input>
<div class="validate-code"> <div class="validate-code">
<img src="../../assets/image/validate.jpg" alt="" /> <img :src="captchaPath" @click="getCaptcha()" alt=""/>
</div> </div>
<el-button <el-button
style="margin-left:40px" style="margin-left:40px"
type="primary" type="primary"
@click="handleSearchCompany" @click="handleSearchCompany"
>查询</el-button >查询
</el-button
> >
</div> </div>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
</el-tab-pane>
</el-tabs>
<div class="result-box" v-if="showResult"> <div class="result-box" v-if="showResult">
<div class="result-box-title">查询 {{ searchCodeShow }} 结果</div> <div class="result-box-title">查询 {{ searchCodeShow }} 结果</div>
<div class="result-box-body"> <div class="result-box-body">
<template v-if="result"> <template v-if="result">
<div class="title">商品信息</div> <el-table
<div class="product-info"></div> :data="result"
<div class="title">企业信息</div> header-cell-class-name="search-table-hc"
<div class="company-info"></div> style="width: 100%"
>
<el-table-column prop="shortCode" label="缩短码">
</el-table-column>
<el-table-column prop="produceName" label="商品名称">
</el-table-column>
<el-table-column prop="brandName" label="商标"></el-table-column>
<el-table-column prop="produceStyle" label=规格></el-table-column>
<el-table-column prop="producePack" label="包装"></el-table-column>
<el-table-column prop="firmName" label="厂商名称"></el-table-column>
</el-table>
</template> </template>
<span v-else>没有符合条件的记录！</span> <span class="error-msg" v-else>{{ errorMsg }}</span>
</div> </div>
</div> </div>
</div> </div>
<div class="notice"> <div class="notice">
<div class="title">友情提示</div> <div class="title">友情提示</div>
<div class="content-wrapper"> <div class="content-wrapper">
<img src="./img/query-short-code.png" align="right" alt="" /> <img src="./img/query-short-code.png" align="right" alt=""/>
<p> <p>
1、缩短码是由7位商品代码和1位校验码构成的8位数字的条码，只有当标准码尺寸超过总印刷面积的25％时，才允许申报。请根据下列提示进行相关查询。 1、缩短码是由7位商品代码和1位校验码构成的8位数字的条码，只有当标准码尺寸超过总印刷面积的25％时，才允许申报。请根据下列提示进行相关查询。
</p> </p>
...@@ -118,11 +94,16 @@ ...@@ -118,11 +94,16 @@
</template> </template>
<script> <script>
import validation from "@/views/Search/validation";
const CODE = 0;
const NAME = 1; const NAME = 1;
const ADDRESS = 2; const ADDRESS = 2;
export default { export default {
mixins: [validation],
data() { data() {
return { return {
CODE,
NAME, NAME,
ADDRESS, ADDRESS,
activeName: "first", activeName: "first",
...@@ -130,70 +111,42 @@ export default { ...@@ -130,70 +111,42 @@ export default {
companySearch: { companySearch: {
validate: "", validate: "",
code: "", code: "",
name: "",
address: "", address: "",
}, },
productSearch: {
code: "",
validate: ""
},
searchCodeShow: "", searchCodeShow: "",
showResult: false, showResult: false,
result: null, result: null,
}; };
}, },
methods: { methods: {
handleSearchProduct() { async handleSearchCompany() {
this.searchCodeShow = this.productSearch.code;
if (this.productSearch.code === "1") {
this.result = {};
}else{
this.result = null;
}
this.showResult = true; this.showResult = true;
}, const params = {
handleSearchCompany() { shortCode: "",
if (this.company === NAME) { firmName: "",
this.searchCodeShow = this.companySearch.code; registerAddress: "",
if (this.companySearch.code === '1') { uuid: this.uuid,
this.result = [ captcha: this.captcha,
{id: '6912614', name: '北京阿里巴巴食品有限公司', 状态: "已注销"}, };
{id: '6912614', name: '北京阿里巴巴食品有限公司', 状态: "已注销"}, if (this.company === CODE) {
{id: '6912614', name: '北京阿里巴巴食品有限公司', 状态: "已注销"}, params.shortCode = this.companySearch.code;
{id: '6912614', name: '北京阿里巴巴食品有限公司', 状态: "已注销"}, } else if (this.company === NAME) {
{id: '6912614', name: '北京阿里巴巴食品有限公司', 状态: "已注销"}, params.firmName = this.companySearch.name;
{id: '6912614', name: '北京阿里巴巴食品有限公司', 状态: "已注销"}, } else {
{id: '6912614', name: '北京阿里巴巴食品有限公司', 状态: "已注销"}, params.registerAddress = this.companySearch.address;
{id: '6912614', name: '北京阿里巴巴食品有限公司', 状态: "已注销"},
]
} }
const searchGlnRes = await this.$api.search.searchGetList(params);
const {returnCode, data} = searchGlnRes;
if (returnCode === "0") {
this.result = data;
} else { } else {
this.searchCodeShow = this.companySearch.address; this.errorMsg =
searchGlnRes.returnMsg ||
"没有符合条件的记录！";
this.result = null;
} }
this.showResult = true;
}, },
}, },
}; };
</script> </script>
<style lang="scss">
.search-content {
.validate-code {
display: inline-block;
width: 70px;
height: 40px;
margin-left: 11px;
> img {
width: 100%;
height: 100%;
}
}
.w160 {
width: 160px;
}
.w240 {
width: 240px;
}
}
</style>
src/views/Search/style/common.scss
...@@ -24,6 +24,10 @@ ...@@ -24,6 +24,10 @@
.body { .body {
padding: 20px 30px; padding: 20px 30px;
.error-msg{
color: #FF3B30;
}
} }
.notice { .notice {
...@@ -100,6 +104,31 @@ ...@@ -100,6 +104,31 @@
} }
} }
} }
.validate-code {
display: inline-block;
width: 70px;
height: 40px;
margin-left: 11px;
overflow: hidden;
> img {
width: 100%;
height: 100%;
}
}
.w40 {
width: 40px;
}
.w160 {
width: 160px;
}
.w240 {
width: 240px;
}
} }
.el-tabs__item.is-active { .el-tabs__item.is-active {
...@@ -118,10 +147,11 @@ ...@@ -118,10 +147,11 @@
} }
.hover{ .hover{
color: #008dbd; cursor: pointer;
color: #5ac8fa;
&:hover{ &:hover{
color: #008dbd; color: #36a5d5;
} }
} }
} }
src/views/Search/validation.js 0 → 100644
import { getUUID } from "@/utils/utils";
export default {
created() {
this.getCaptcha();
},
data(){
return {
captchaPath:'',
uuid: '',
captcha: '',
errorMsg: '',
}
},
methods: {
getCaptcha() {
this.uuid = getUUID()
const query = {
uuid: this.uuid
};
this.$api.getCaptcha(query).then((res) => {
this.captchaPath = window.URL.createObjectURL(res.body);
});
},
},
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment