|
|
@@ -0,0 +1,119 @@
|
|
|
+<template>
|
|
|
+ <div class="flex-align-center">
|
|
|
+ <div>
|
|
|
+ <p>一级分类:</p>
|
|
|
+ <el-select clear="select" v-model="activeClass1" @clear="clearClass1" size="small" clearable>
|
|
|
+ <el-option v-for="item in selectList" :key="item.rowindex" :value="item.sat_sharematerial_classid"
|
|
|
+ :label="item.classname" @click.native="handleChange(item)" />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <p>二级分类:</p>
|
|
|
+ <el-select clear="select" v-model="activeClass2" size="small" @clear="clearClass2" clearable>
|
|
|
+ <el-option v-for="item in childrens" :key="item.rowindex" :value="item.sat_sharematerial_classid"
|
|
|
+ :label="item.classname" @click.native="handleChange(item)" />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div>
|
|
|
+ <p>搜索:</p>
|
|
|
+ <el-input style="width:200px" size="small" placeholder="请输入查询内容" @clear="changeSearchContent"
|
|
|
+ @keyup.native.enter="changeSearchContent" v-model="condition" prefix-icon="el-icon-search" clearable />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: "filterList",
|
|
|
+ mounted() {
|
|
|
+ this.getSelectList()
|
|
|
+ },
|
|
|
+ props: ["changeTypeId", "startSearch"],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ selectList: [],//分类列表
|
|
|
+ childrens: [],//子分类列表
|
|
|
+ activeClass1: "",//选择分类1
|
|
|
+ activeClass2: "",//选择分类2
|
|
|
+ class1id: "",
|
|
|
+ class2id: "",
|
|
|
+ returnId: 0,//最终返回id
|
|
|
+ condition: "",//搜索内容
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /* 获取分类列表 */
|
|
|
+ getSelectList(i = 0) {
|
|
|
+ this.$api.requested({
|
|
|
+ "classname": "webmanage.saletool.sharematerial.sharematerialClass",
|
|
|
+ "method": "select",
|
|
|
+ "content": {
|
|
|
+ parentid: 0
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ if (res.msg != '成功') return i < 5 ? this.getSelectList(i + 1) : this.$message.error(res.msg);
|
|
|
+ this.selectList = res.data;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /* 选择分类 */
|
|
|
+ handleChange(item) {
|
|
|
+ if (item.children) {
|
|
|
+ this.childrens = item.children;
|
|
|
+ this.activeClass2 = "";
|
|
|
+ this.class1id = item.sat_sharematerial_classid;
|
|
|
+ } else {
|
|
|
+ this.class2id = item.sat_sharematerial_classid;
|
|
|
+ }
|
|
|
+ this.returnId = item.sat_sharematerial_classid;
|
|
|
+ this.setId();
|
|
|
+ },
|
|
|
+ clearClass1() {
|
|
|
+ this.childrens = [];
|
|
|
+ this.activeClass1 = "";
|
|
|
+ this.activeClass2 = "";
|
|
|
+ this.class1id = "";
|
|
|
+ this.class2id = "";
|
|
|
+ this.returnId = 0;
|
|
|
+ this.setId();
|
|
|
+ },
|
|
|
+ clearClass2() {
|
|
|
+ this.class2id = "";
|
|
|
+ this.activeClass2 = "";
|
|
|
+ this.returnId = this.class1id ? this.class1id : 0;
|
|
|
+ this.setId();
|
|
|
+ },
|
|
|
+ /* 返回分类ID */
|
|
|
+ setId() {
|
|
|
+ this.$emit("changeTypeId", this.returnId)
|
|
|
+ },
|
|
|
+ /* 开始搜索 */
|
|
|
+ changeSearchContent() {
|
|
|
+ this.$emit("startSearch", this.condition.trim())
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.flex-align-center {
|
|
|
+ padding-bottom: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+.flex-align-center>div {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ max-width: 350px;
|
|
|
+}
|
|
|
+
|
|
|
+.flex-align-center>div>p {
|
|
|
+ font-size: 14px;
|
|
|
+ margin: 0 10px;
|
|
|
+ max-width: 80px;
|
|
|
+}
|
|
|
+
|
|
|
+.select {
|
|
|
+ width: 120px;
|
|
|
+ margin-right: 16px;
|
|
|
+}
|
|
|
+</style>
|
