更换首页图片，分类特殊属性前端页面

src/views/index.vue

@@ -1,3 +1,17 @@
+<template>
+  <div class="app-container home">
+  </div>
+</template>
+
+<style scoped lang="scss">
+.home{
+  width: 100%;
+  height: calc(100vh - 90px);
+  background-image: url('../assets/images/homePage.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+</style>
 <!-- <template>
   <div class="app-container home">
     <el-row :gutter="20">

src/views/material/specialAttr/index.vue

@@ -0,0 +1,170 @@
+<template>
+  <div class="specialAttr">
+    <el-row :gutter="10" class="mb10">
+      <el-col :span="1.5">
+
+        <el-select size="small" v-model="textValue" placeholder="请选择">
+        <el-option
+          v-for="item in text"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value">
+        </el-option>
+      </el-select>
+
+      <el-select size="small" v-model="ruleValue" placeholder="请选择">
+        <el-option
+          v-for="item in rule"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value">
+        </el-option>
+      </el-select>
+
+      <el-input
+        v-model="input"
+        size="small"
+        placeholder="请输入"
+        clearable
+        style="width: 240px"
+      />
+
+      </el-col>
+
+      <el-col :span="1.5">
+        <el-button type="primary" size="small" plain>查询</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="primary" size="small" plain>高级查询</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="primary" size="small" plain>重置</el-button>
+      </el-col>
+
+    </el-row>
+
+    <el-card>
+      <el-row :gutter="10" class="contrnt">
+        <el-col :span="6">
+          <el-input
+            placeholder="输入关键字进行过滤"
+            size="small"
+            v-model="filterText">
+          </el-input>
+
+          <el-tree
+            class="filter-tree"
+            :data="data"
+            :props="defaultProps"
+            default-expand-all
+            :filter-node-method="filterNode"
+            ref="tree">
+          </el-tree>
+        </el-col>
+        
+        <el-col :span="18">
+
+          <el-row>
+            <el-button type="primary" size="small" plain>新增</el-button>
+            <el-button type="primary" size="small" plain>删除</el-button>
+          </el-row>
+
+          <el-row>
+            <el-table 
+              :data="taskList" 
+              class="request-table"
+              @selection-change="handleSelectionChange"
+            >
+              <el-table-column type="selection" width="55" />
+              <el-table-column type="index" label="序号" width="55" align="center" />
+              <el-table-column label="属性名称" align="center" prop="name" />
+              <el-table-column label="属性编码" align="center" prop="code" />
+              <el-table-column label="字段类型" align="center" prop="type" />
+              <el-table-column label="字段ID值" align="center" prop="id" />
+              <el-table-column label="排序" align="center" prop="id" />
+              <el-table-column label="字段说明" align="center" prop="remark" />
+            </el-table>
+          </el-row>
+
+        </el-col>
+      </el-row>
+    </el-card>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'specialAttr',
+  watch: {
+    filterText(val) {
+      this.$refs.tree.filter(val);
+    }
+  },
+  data () {
+    return{
+      textValue: 1,
+      text: [{label: '文本字段', value: 1}, {label: '字典字段', value: 2}],
+      ruleValue: 1,
+      rule:[{label: '包含', value: 1}, {label: '不包含', value: 2}, {label: '等于', value: 3}, {label: '不等于', value: 4}],
+      input: '',
+      filterText: '',
+      data: [{
+          id: 1,
+          label: '一级 1',
+          children: [{
+            id: 4,
+            label: '二级 1-1',
+            children: [{
+              id: 9,
+              label: '三级 1-1-1'
+            }, {
+              id: 10,
+              label: '三级 1-1-2'
+            }]
+          }]
+        }, {
+          id: 2,
+          label: '一级 2',
+          children: [{
+            id: 5,
+            label: '二级 2-1'
+          }, {
+            id: 6,
+            label: '二级 2-2'
+          }]
+        }, {
+          id: 3,
+          label: '一级 3',
+          children: [{
+            id: 7,
+            label: '二级 3-1'
+          }, {
+            id: 8,
+            label: '二级 3-2'
+          }]
+      }],
+      defaultProps: {
+          children: 'children',
+          label: 'label'
+      },
+      taskList:[]
+    }
+  },
+  methods: {
+    filterNode(value, data) {
+        if (!value) return true;
+        return data.label.indexOf(value) !== -1;
+    },
+    handleSelectionChange() { }
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.specialAttr {
+  height: calc(100vh - 84px);
+  padding: 12px;
+  box-sizing: border-box;
+}
+</style>