Skip to content

Z
zhichan
Commit c2454e01 by 任建
Options

rj

parents 0570d3ef f13c8122
Showing with 214 additions and 41 deletions
channel-access/src/api/tmTools.js
......@@ -2,8 +2,8 @@ import http from "@/http/http.js";
let baseUrl = "/api/web/action/tmTools/springBoard";
// 获取selftmreg的尼斯查询 一级查询得到二级树
export function getNiceQueryLevelOne(nclcodeSCode) {
// 获取selftmreg的尼斯查询 一级查询得到二级树 二级查询得到三级树
export function getNiceQueryCategory(nclcodeSCode) {
return http.post(baseUrl, {
actionBody: {
nclcode: nclcodeSCode
......@@ -13,12 +13,14 @@ export function getNiceQueryLevelOne(nclcodeSCode) {
});
}
// 分类过滤接口
export function getNiceQueryLevelTwo() {
// 获取selftmreg的尼斯查询分类过滤数据
export function getNiceQueryFilter(key, classCodes) {
return http.post(baseUrl, {
actionBody: {
name: "生物化学", //Y strin 尼斯名称
ncls: ["01"] //N List 尼斯大类编码列表
// name: "123", //Y strin 尼斯名称
// ncls: ["01", "02", "03"] //N List 尼斯大类编码列表
name: key, //Y strin 尼斯名称
ncls: classCodes //N List 尼斯大类编码列表
},
actionType: "getNclByLikeNameAndNcl"
});
......
channel-access/src/views/pages/jdtrademark/Jdtmsearch.vue
......@@ -6,8 +6,15 @@
<span>商标检索</span>
</div>
<div @mouseleave="typeListShow = false">
<input type="text" v-model="searchValue" placeholder="请输入您想检索的商标名称，申请号，申请人等信息" />
<div @mouseenter="typeListShow = true" class="jdtrademark-search-alltype">
<input
type="text"
v-model="searchValue"
placeholder="请输入您想检索的商标名称，申请号，申请人等信息"
/>
<div
@mouseenter="typeListShow = true"
class="jdtrademark-search-alltype"
>
全部类别
<i class="el-icon-arrow-down"></i>
</div>
......@@ -17,14 +24,19 @@
:indeterminate="isIndeterminate"
v-model="checkAll"
@change="handleCheckAllChange"
>全选</el-checkbox>
<div style="margin: 15px 0;"></div>
<el-checkbox-group v-model="checkedType" @change="handleCheckedCitiesChange">
>全选</el-checkbox
>
<div></div>
<el-checkbox-group
v-model="checkedType"
@change="handleCheckedCitiesChange"
>
<el-checkbox
v-for="item in typeList"
:label="item.code + item.name "
:label="item.code + item.name"
:key="item.code"
>{{item.code}}{{item.name}}</el-checkbox>
>{{ item.code }}{{ item.name }}</el-checkbox
>
</el-checkbox-group>
</div>
</transition>
......@@ -101,7 +113,6 @@ export default {
});
this.checkedType = data;
this.isIndeterminate = false;
console.log(this.checkedType, this.typeList, "1111111111");
} else {
this.checkedType = [];
}
......@@ -186,6 +197,9 @@ export default {
.el-checkbox {
width: 96.41px;
}
> div {
margin: 15px 0;
}
}
> input {
padding-left: 12px;
......
channel-access/src/views/pages/selftmreg/ModifyTrademark.vue
......@@ -119,14 +119,43 @@
<!-- 分类信息选择 -->
<div class="classTrademark">
<div class="classTrademark-left">
<!-- 分类过滤搜索 -->
<div class="classTrademark-left-top">
<el-button>分类</el-button>
<el-button @click="typeListShow = true">分类</el-button>
<el-input
placeholder="请输入关键字进行过滤"
suffix-icon="el-icon-search"
v-model="keyZi"
@keyup.enter.native="filterKeyZi"
></el-input>
<span class="quxiao">取消</span>
<span class="quxiao" @click="cancelSearch">取消</span>
</div>
<!-- 全部分类类别展示 -->
<div class="classTrademark-typelist" v-if="typeListShow">
<div class="typelist-nav">
<!--
@change="handleCheckAllChange"
@keyup.enter="handleCheckAllChange"
-->
<el-checkbox
:indeterminate="isIndeterminate"
v-model="checkAll"
@change="handleCheckAllChange"
>全选</el-checkbox
>
<el-button type="text" @click="confirmClass">确定</el-button>
</div>
<el-checkbox-group
v-model="checkedType"
@change="handleCheckedCitiesChange"
>
<el-checkbox
v-for="(item, index) in checkedList"
:label="item.code + item.name"
:key="index + '-' + item.code"
>{{ item.code }}</el-checkbox
>
</el-checkbox-group>
</div>
<!-- 树形控件 -->
<div class="classTrademark-left-tree">
......@@ -137,6 +166,8 @@
node-key="name"
show-checkbox
:expand-on-click-node="false"
:default-expand-all="isTreeExpand"
:render-after-expand="false"
lazy
:load="loadNode"
@check-change="handleCheckChange"
......@@ -169,10 +200,10 @@
</div>
<div class="classData-main">
<el-tag
:key="tag.fullname"
v-for="tag in classDataList"
:key="index + 1 + '-' + tag.fullname"
v-for="(tag, index) in classDataList"
closable
:disable-transitions="false"
:disable-transitions="true"
@close="handleClose(tag)"
>{{ tag.fullname }}</el-tag
>
......@@ -185,7 +216,7 @@
</template>
<script>
import { getNiceQueryLevelOne, getNiceQueryLevelTwo } from "@/api/tmTools.js";
import { getNiceQueryCategory, getNiceQueryFilter } from "@/api/tmTools.js";
export default {
data() {
......@@ -217,6 +248,7 @@ export default {
},
children: "children"
},
// 初始静态分类数据 和全部分类 typeList 的复用数据
ncldata: [
{ code: "01", name: "化学原料", type: 1 },
{ code: "02", name: "颜料油漆", type: 1 },
......@@ -264,10 +296,27 @@ export default {
{ code: "44", name: "医疗园艺", type: 1 },
{ code: "45", name: "社会服务", type: 1 }
],
// 被选中分类数据，最多十条
classDataList: [],
classCode: ""
// 判断选中的是否是同一类别
classCode: "",
// 分类全部类别的显示
typeListShow: false,
isIndeterminate: true,
checkAll: false,
checkedType: [],
checkedList: [],
// 树是否展开
isTreeExpand: false
};
},
created() {
this.checkedList = this.ncldata;
// 测试数据
},
methods: {
// 抽屉展示
lookImg(title, index) {
......@@ -275,12 +324,15 @@ export default {
this.lookIndex = index;
this.drawerRight = true;
},
// 分类信息选择
// 清除选中的标签
handleClose(tag) {
this.classDataList.splice(this.classDataList.indexOf(tag), 1);
// 清除左边对应的数组的选中状态
this.$refs.tree.setChecked(tag, false);
},
// 删除所有的分类标签数据
deleteClassData() {
this.$confirm("确定清空所有已选商品/服务项吗？", "提示", {
confirmButtonText: "确定",
......@@ -288,11 +340,10 @@ export default {
type: "warning"
})
.then(() => {
// 把左边的样式取消
// 把左边的复选框的选中样式取消
this.classDataList.map(item => {
this.$refs.tree.setChecked(item, false);
});
// 数组置为空
this.classDataList = [];
this.$message({
......@@ -319,26 +370,39 @@ export default {
// 树形结构的处理节点是否被选中
handleCheckChange(data, checked, indeterminate) {
// 检测第三级节点是否被选中(一级节点两位code，二级节点四位code,三级节点6位或是0位code)
if (data.code.length !== 2 || data.code.length !== 4) {
// 如果第三级节点被选中
if (checked) {
// 判断是否是同一类别
// 判断选中的是否是同一类别
if (!this.classDataList.length) {
// 如果动态数据为空，就把这第一个选中的复选框的前两位类别码保存为全局的类别码
this.classCode = data.pcode.substring(0, 2);
}
// 保存选中的节点的前两位
let datacode = data.pcode.substring(0, 2);
// 被选中的数据小于十条
if (this.classDataList.length < 10) {
// 被选中的数据属于同一个类别
if (datacode == this.classCode) {
this.classDataList.push(data);
let index = this.classDataList.findIndex((item, index) => {
return data.code == item.code;
});
if (index == -1) {
// this.classDataList.splice(index, 1);
this.classDataList.push(data);
}
} else {
// 被选中的数据不属于同一个类别，给出相应的提示信息
this.$message({
message: "只能选择同一个类别",
type: "warning"
});
// 被选中的数据不属于同一个类别，把此节点设置为不可选中状态
this.$refs.tree.setChecked(data, false);
}
} else {
// 大于10之后勾选时，直接把Checked设置为false
// 被选中的数据大于10条，给出相应提示，并把Checked设置为false
this.$message({
message: "最多选择10项",
type: "warning"
......@@ -346,7 +410,7 @@ export default {
this.$refs.tree.setChecked(data, false);
}
} else {
// 没被选中
// 如果第三级节点没被选中，找出没被选中的数据的下标，把其从数组中清除，以此实现左边勾选取消右侧的选中的标签数据的对应清除
let index = this.classDataList.findIndex((item, index) => {
return data.code == item.code;
});
......@@ -363,7 +427,7 @@ export default {
if (node.data !== null) {
hasChild = true;
}
console.log(node);
// 初始的一级45个类别的静态数据的装填
if (node.level === 0) {
return resolve(this.ncldata);
......@@ -372,14 +436,18 @@ export default {
if (node.level > 2) return resolve([]);
// 根据node.data.code得到对应的尼斯查询（一）接口 nclcode 的一级二级查询
getNiceQueryLevelOne(node.data.code).then(res => {
getNiceQueryCategory(node.data.code).then(res => {
// 尼斯码为两位，给ncldata添加一级children
if (node.data.code.length == 2) {
this.ncldata[node.data.code * 1 - 1].children = res.data.rows;
let index = this.ncldata.findIndex((item, index) => {
return item.code == node.data.code;
});
console.log(index);
this.ncldata[index].children = res.data.rows;
setTimeout(() => {
var data;
if (hasChild) {
data = this.ncldata[node.data.code * 1 - 1].children;
data = this.ncldata[index].children;
}
resolve(data);
}, 0);
......@@ -387,27 +455,73 @@ export default {
// 尼斯码为四位，给ncldata添加二级children
if (node.data.code.length == 4) {
// 四位代码的(前两位代码*1-1)是第一级children的数据数组对象的装填，(后两位代码*1-1)是第二级children的数据数组对象的装填
this.ncldata[node.data.code.substring(0, 2) * 1 - 1].children[
let index = this.ncldata.findIndex((item, index) => {
return item.code == node.data.code.substring(0, 2);
});
this.ncldata[index].children[
node.data.code.substring(2, 4) * 1 - 1
].children = res.data.rows;
setTimeout(() => {
var data;
if (hasChild) {
data = this.ncldata[node.data.code.substring(0, 2) * 1 - 1]
.children[node.data.code.substring(2, 4) * 1 - 1].children;
data = this.ncldata[index].children[
node.data.code.substring(2, 4) * 1 - 1
].children;
}
resolve(data);
}, 0);
}
});
},
// 全部选中
handleCheckAllChange(val) {
if (val) {
let data = [];
this.checkedList.map((item, index) => {
data.push(`${item.code}${item.name}`);
});
this.checkedType = data;
this.isIndeterminate = false;
} else {
this.checkedType = [];
}
},
//选中
handleCheckedCitiesChange(value) {
this.checkedType = value;
let checkedCount = value.length;
this.checkAll = checkedCount === this.checkedList.length;
this.isIndeterminate =
checkedCount > 0 && checkedCount < this.checkedList.length;
this.keyZi = "";
},
// 点击确定,隐藏类别选择框
confirmClass() {
this.typeListShow = false;
},
// 过滤关键字 绑定el-input的change事件,使得在输入框失去焦点或用户按下回车keyCode=13时触发
filterKeyZi() {
let classCodes = this.checkedType.map(item => {
return item.substring(0, 2);
});
// 根据输入的关键字和选择的分类类别进行尼斯查询过滤
getNiceQueryFilter(this.keyZi, classCodes).then(res => {
console.log("过滤之后的尼斯数据:", res.data);
// this.ncldata = [];
this.ncldata = res.data;
});
},
// 取消搜索
cancelSearch() {
this.keyZi = "";
this.checkedType = [];
}
},
created() {
// 获取分类数据查询
// getNiceQueryLevelTwo().then(res => {
// console.log(res);
// });
},
mounted() {}
};
</script>
......@@ -512,6 +626,7 @@ export default {
display: flex;
.classTrademark-left {
width: 295px;
position: relative;
}
.classTrademark-right {
flex: 1;
......@@ -554,6 +669,38 @@ export default {
cursor: pointer;
}
}
// 全部类别
.classTrademark-typelist {
border: 1px solid #ebeef5;
background-color: #fff;
transition: 0.3s;
border-radius: 4px;
overflow: hidden;
z-index: 1000;
font-size: 13px;
color: #303133;
padding-bottom: 20px;
position: absolute;
top: 0;
width: 100%;
margin: 0px 2%;
.typelist-nav {
padding: 10px 20px 0 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
> div.el-checkbox-group {
padding: 0 20px;
display: flex;
flex-wrap: wrap;
> label.el-checkbox {
width: 20%;
padding: 3px;
}
}
}
.classTrademark-left-tree::-webkit-scrollbar {
width: 10px;
height: 1px;
......@@ -586,6 +733,16 @@ export default {
> .el-checkbox {
display: none;
}
.el-tree
> .el-tree-node
> .el-tree-node__children
> .el-tree-node
> .el-tree-node__children
> .el-tree-node
> .el-tree-node__content
> .el-tree-node__expand-icon {
display: none;
}
}
.classTrademark-right-top {
width: 100%;
......
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