标签功能

src/router/routes.js

@@ -47,11 +47,15 @@ const appRoutes = [
             path: '/systemManagement/tbls', name: 'tbls', component: resolve => require(['@/views/houseData/tbls'], resolve), //Tbls,
             meta: { title: '拓展信息管理', menuPath: true, menuIcon: 'setting', hideInBread: false, },
           },
+          { //  标签管理
+            path: '/systemManagement/lvot', name: 'lvot', component: resolve => require(['@/views/label/labelList'], resolve), //Tbls,
+            meta: { title: '标签管理', menuPath: true, menuIcon: 'setting', hideInBread: false, },
+          },
         ]
       }, 
       {
         path: '/house', name: 'house', component: resolve => require(['@/components/Layout/content-wrapper'], resolve), // ContentWrapper,
-        meta: { title: '住宅信息', menuPath: true, menuIcon: 'profile', hideInBread: true },
+        meta: { title: '住宅信息', menuPath: true, menuIcon: 'profile', hideInBread: true, requirePerm: false },
         children: [ 
           { // 小区列表
             path: '/houseData/basicInfo', name: 'basicInfo', component: resolve => require(['@/views/houseData/basicInfo'], resolve), //basicInfo,

src/views/label/labelList.vue

+
+<template>
+  <div class="routerWapper">
+    <div class="portalDetailTitle" v-if="$route.name=='lvot'">
+			<span class="title">标签维护</span>
+			<div class="detailOperations">
+				<a-button @click="backPage"> 返回 </a-button>
+			</div>
+		</div>
+    <div v-if="$route.name=='lvot'">
+      <a-row>
+        <a-col :span='5' class="layoutMargin layoutPadding">
+          <a-row>
+            <a-button size='small' type="default"> <a-icon type="plus" />添加标签 </a-button>
+          </a-row>
+          <a-tree
+            :tree-data="treeData"
+            :replace-fields="replaceFields"
+            :selected-keys="selectedKeys"
+            @select="onSelect"
+          />
+        </a-col>
+        <a-col :span='1'></a-col>
+        <a-col :span='17' class="layoutMargin layoutPadding">
+          <RightPanel />
+        </a-col>
+      </a-row>
+    </div>
+    <RouterWapper v-else />
+  </div>
+</template>
+
+<script>
+import RightPanel from '@/views/label/labelRightSide.vue'
+
+const treeData = []
+
+export default {
+  name: 'lvot',
+  components: {
+    RightPanel,
+  },
+  data() {
+    return {
+      treeData,
+      replaceFields: {
+        children: 'children',
+        title: 'labelName',
+        key: 'id'
+      },
+      selectedKeys: [],
+    }
+  },
+  mounted() {
+    this.getLabelList()
+  },
+  methods: {
+    getLabelList() {
+      this.$ajax.get({
+        url: this.$api.GET_LABEL_LIST,
+      }).then(res => {
+        if (res.code == 200) {
+          this.treeData = this.$com.confirm(res, 'data.content', [])
+          console.log(JSON.stringify(this.treeData))
+        }
+      })
+    },
+    backPage(){ // 返回按钮
+      this.$router.back()
+    },
+    onSelect(selectedKeys, info) {
+      console.log('selected', selectedKeys, info)
+    },
+    onCheck(checkedKeys, info) {
+      console.log('onCheck', checkedKeys, info)
+    },
+  },
+}
+</script>
+
+<style scoped>
+
+</style>
+

src/views/label/labelRightSide.vue

+<template>
+  <div class="routerWapper">
+		<div>
+      <a-row>
+        <a-col :span='1'>
+          <a-button type='default'>删除</a-button>
+        </a-col>
+        <a-col :span='1' :offset='1'>
+          <a-button type='default'>编辑</a-button>
+        </a-col>
+        <a-col :span='1' :offset='1'>
+          <a-button type='primary' @click="save()">添加</a-button>
+        </a-col>
+        <a-col :span='19'></a-col>
+      </a-row>
+    </div>
+    <a-divider type='horizontal' />
+    <a-form :form='labelForm'>
+      <a-form-item label='标签名' :label-col="{span:2}" :wrapper-col="{span:14}">
+        <a-input v-decorator="['labelName',{validateTrigger:'blur',rules: []}]"></a-input>
+      </a-form-item>
+      <a-form-item label='标签分组' :label-col="{span:2}" :wrapper-col="{span:14}">
+        <a-select v-decorator="['parentLabel',{validateTrigger:'blur',rules: []}]"></a-select>
+      </a-form-item>
+      <a-form-item label='业务对象' :label-col="{span:2}" :wrapper-col="{span:14}">
+        <a-select v-decorator="['businessObj',{validateTrigger:'blur',rules: []}]">
+          <a-select-option value='xq'>小区</a-select-option>
+          <a-select-option value='mpz'>门牌幢</a-select-option>
+        </a-select>
+      </a-form-item>
+    </a-form>
+    <a-row style="font-weight: bold">信息筛选配置</a-row>
+    <a-form :form='infoSettingForm' layout='inline'>
+      <div v-for="(item, index) in loopContent.data" :key='index'>
+        <a-form-item v-if="!!item.relation">
+          <a-select style="width: 160px" placeholder='请选择条件' v-decorator="['relation' + index,{initialValue: item.relation, validateTrigger:'blur',rules: []}]">
+            <a-select-option value='and'>与</a-select-option>
+            <a-select-option value='or'>或</a-select-option>
+            <a-select-option value='ne'>非</a-select-option>
+          </a-select>
+        </a-form-item>
+
+        <a-form-item v-else style="margin-left: 160px"></a-form-item>
+
+        <a-form-item>
+          <a-select style="width: 160px" placeholder='请选择业务属性' v-decorator="['businessProperty' + index,{initialValue: item.businessProperty, validateTrigger:'blur',rules: [{required: true, message: '请至少选择一项！'}]}]">
+            <a-select-option value='sx1'>属性一</a-select-option>
+            <a-select-option value='sx2'>属性二</a-select-option>
+          </a-select>
+        </a-form-item>
+
+        <a-form-item>
+          <a-select style="width: 160px" placeholder='区间' v-decorator="['range' + index,{validateTrigger:'blur',rules: [{required: true, message: '请至少选择一项！'}]}]">
+            <a-select-option value='equals'>等于</a-select-option>
+            <a-select-option value='gt'>大于</a-select-option>
+            <a-select-option value='gte'>大于等于</a-select-option>
+            <a-select-option value='lt'>小于</a-select-option>
+            <a-select-option value='lte'>小于等于</a-select-option>
+            <a-select-option value='btw'>区间</a-select-option>
+          </a-select>
+        </a-form-item>
+
+        <a-form-item>
+          <a-input placeholder='请输入' v-decorator="['inputOne' + index,{initialValue: item.inputOne, validateTrigger:'blur',rules: [],}]"></a-input>
+        </a-form-item>
+
+        <a-form-item v-if="!!item.range && item.range == 'btw'">
+          <a-input :disabled="!!item.range && item.range == 'equals'" placeholder='请输入' v-decorator="['inputTwo' + index,{initialValue: item.inputTwo, validateTrigger:'blur',rules: []}]"></a-input>
+        </a-form-item>
+
+        <a-form-item>
+          <a-icon v-if="index+1 == loopContent.data.length" theme='filled' style="color:lightgreen;" type="plus-circle" @click="addRow()" />
+          <a-icon v-if="index+1 == loopContent.data.length" theme='filled' style="color:red; margin-left: 5px" type="minus-circle" @click="deleteRow(index)" />
+        </a-form-item>
+      </div>
+    </a-form>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      labelForm: this.$form.createForm(this),
+      infoSettingForm: this.$form.createForm(this),
+      loopContent: {
+        data: [{
+          businessProperty: '',
+          range: 'equals',
+          inputOne: ''
+        }]
+      },
+      jsonData: []
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    addRow() {
+      this.loopContent.data.push({
+        businessProperty: '',
+        range: 'equals',
+        inputOne: '',
+        relation: 'and'
+      })
+      console.log(this.loopContent)
+    },
+    deleteRow(index) {
+      console.log(JSON.stringify(this.loopContent.data))
+      console.log(index)
+      this.loopContent.data.splice(index, 1)
+      console.log(JSON.stringify(this.loopContent.data))
+    },
+    save() {
+      this.jsonData = []
+      this.infoSettingForm.validateFields((err, values) => {
+        if(!err) {
+          let loopCounts = this.loopContent.data.length
+          let formData = this.infoSettingForm.getFieldsValue()
+          // console.log(loopCounts)
+          // console.log(formData)
+
+          for(let i = 0; i < loopCounts; i++) {
+            // for(let j = 0; j < Object.keys(formData).length; j++) {
+            //   if(Object.keys(formData)[j].indexOf(i) > -1){
+            //   }
+            // }
+
+            if(formData['inputTwo' + i] !== undefined) {
+              this.jsonData.push({
+                key: formData['businessProperty'+i],
+                val: formData['inputOne' + i],
+                condition: formData['range'+i],
+                relation: formData['relation' + i],
+              })
+            } else { // 区间值
+              this.jsonData.push({
+                key: formData['businessProperty'+i],
+                val: formData['inputOne' + i],
+                condition: formData['range'+i],
+                relation: formData['relation' + i],
+              })
+            }
+          }
+
+          console.log(JSON.stringify(this.jsonData))
+        }
+      })
+    },
+  },
+}
+</script>
\ No newline at end of file