【标签管理】属性配置页面-王公峰-2020-12-03

src/views/modules/user/tag-property.vue

@@ -3,56 +3,22 @@
              title="选择标签属性"
              :close-on-click-modal="false"
              :close-on-press-escape="false"
-             width="80%"
+             width="600px"
              height="90%">
     <el-card shadow="never" class="aui-card--fill">
       <div class="mod-sys__user">
-        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataListSearch()">
-          <el-form-item label="标签属性名称">
-            <el-input v-model="dataForm.dictName"
-                      :placeholder="$t('dict.dictName')"
-                      @keyup.native="btKeyUpDictName"
-                      clearable></el-input>
-          </el-form-item>
-          <el-form-item>
-            <el-button @click="getDataListSearch()" type="success">{{ $t('query') }}</el-button>
+        <el-form :inline="true" :model="dataForm">
+          <el-form-item label="">
+            <el-form-item label="标签属性" prop="tagPropertyid">
+              <el-select v-model="dataForm.tagPropertyid" placeholder="标签属性">
+                <el-option v-for="item in paramNameArr" :key="item.dictValue" :label="item.dictName" :value="item.dictValue" >
+                </el-option>
+              </el-select>
+            </el-form-item>
           </el-form-item>
         </el-form>
-        <el-table v-loading="dataListLoading" :data="dataList" max-height="450" style="width: 100%;" @selection-change="handleSelectionChange">
-          <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
-          <el-table-column
-              type="index"
-              header-align="center"
-              align="center"
-              width="50"
-              label='序号'
-          ></el-table-column>
-          <el-table-column prop="dictName"
-                           :label="$t('dict.dictName')"
-                           header-align="center"
-                           align="center"></el-table-column>
-          <el-table-column prop="remark"
-                           :label="$t('dict.remark')"
-                           header-align="center"
-                           align="center"></el-table-column>
-          <el-table-column prop="createDate"
-                           :label="$t('dict.createDate')"
-                           sortable="custom"
-                           header-align="center"
-                           align="center"
-                           width="180"></el-table-column>
-        </el-table>
-        <el-pagination
-            :current-page="page"
-            :page-sizes="[10, 20, 50, 100]"
-            :page-size="limit"
-            :total="total"
-            layout="total, sizes, prev, pager, next, jumper"
-            @size-change="pageSizeChangeHandle"
-            @current-change="pageCurrentChangeHandle">
-        </el-pagination>
         <el-form>
-          <el-button type="primary" @click="getInfo()" style="margin-left:48%" class="end">{{"确定"}}</el-button>
+          <el-button type="primary" @click="dataFormSubmitHandle()" style="margin-left:48%" class="end">{{"确定"}}</el-button>
         </el-form>
       </div>
     </el-card>
@@ -61,69 +27,70 @@
 
 <script>
 import mixinViewModule from '@/mixins/view-module'
+import debounce from 'lodash/debounce'
 export default {
   mixins: [mixinViewModule],
   data () {
     return {
       mixinViewModuleOptions: {
-        getDataListURL: '/sys/dict/page',
+        getDataListURL: '/app-user/tagproperty/page',
         getDataListIsPage: true,
-        deleteURL: '/sys/user',
+        deleteURL: '/app-user/tagproperty',
         deleteIsBatch: true,
-        exportURL: '/sys/user/export'
+        exportURL: '/app-user/tagproperty/export'
       },
       visible: false,
       dataForm: {
-        pid: '1333600380046565377',
-        dictName: '',
-        dictType: 'tag_property',
-        dictValue: ''
+        id: '',
+        tagid: '',
+        tagPropertyid: ''
       },
-      responseData: []
+      paramNameArr: []
     }
   },
   methods: {
-    btKeyUpDictName (e) {
-      e.target.value = e.target.value.replace(/[`~!#$%^&*()_\+=<>?:"{}|~！#￥%……&*（）={}|《》？：“”【】\\[\]、；‘’，。、\s+]/g, '')
-      this.dataForm.dictName = e.target.value
-    },
-    btKeyUpRealname (e) {
-      e.target.value = e.target.value.replace(/[`~!@#$%^&*()_\-+=<>?:"{}|·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、]/g, '')
-      this.dataForm.realname = e.target.value
-    },
-    btKeyUpEmail (e) {
-      e.target.value = e.target.value.replace(/[`~!#$%^&*()_\-+=<>?:"{}|~！#￥%……&*（）——={}|《》？：“”【】、；‘’，。、]/g, '')
-      this.dataForm.email = e.target.value
-    },
-    btKeyUpMobile (e) {
-      e.target.value = e.target.value.replace(/[`~!@#$%^&*()_=<>?:"{}|·~！@#￥%……&*（）——={}|《》？：“”【】、；‘’，。、]/g, '')
-      this.dataForm.mobile = e.target.value
-    },
-    getDataListOverWrite () {
-      this.page = 1
-      this.getDataList()
-    },
     // 获取数据列表
-    init () {
+    init (tagId, propertyId, relationId) {
       this.visible = true
       this.$nextTick(() => {
-        this.getDataList()
+        // 调用获取标签属性下拉信息接口
+        this.getParamListInfo()
+        this.dataForm.tagid = tagId
+        if (propertyId !== '' || propertyId !== null) {
+          this.dataForm.tagPropertyid = propertyId
+        }
+        if (relationId !== '' || relationId !== null) {
+          this.dataForm.id = relationId
+        }
+        console.log(this.dataForm)
       })
     },
-    handleSelectionChange (val) {
-      this.responseData = val
+    // 获取标签属性下拉信息
+    getParamListInfo () {
+      this.$http.get(`/app-user/property/listSimple`).then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
+        this.paramNameArr = res.data
+      }).catch(() => {})
     },
-    getInfo () {
-      if (this.responseData.length === 0) {
+    // 表单提交
+    dataFormSubmitHandle: debounce(function () {
+      this.$http[!this.dataForm.id ? 'post' : 'put']('/app-user/tagproperty/', this.dataForm).then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
         this.$message({
-          message: '请选择用户！',
-          type: 'warning'
+          message: this.$t('prompt.success'),
+          type: 'success',
+          duration: 500,
+          onClose: () => {
+            this.visible = false
+            this.$emit('refreshDataList')
+          }
         })
-        return false
-      }
-      this.$emit('connectResponse', this.responseData)
-      this.visible = false
-    }
+      }).catch(() => {})
+    }, 1000, { 'leading': true, 'trailing': false })
   }
 }
 </script>

src/views/modules/user/usertag.vue

@@ -26,7 +26,7 @@
         <el-table-column prop="createdTime" label="创建时间" header-align="center" align="center"></el-table-column>
         <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
           <template slot-scope="scope">
-            <el-button  type="text" size="small" @click="addProperty(scope.row.id)">配置属性</el-button>
+            <el-button  type="text" size="small" @click="addProperty(scope.row.id,scope.row.propertyId,scope.row.relationId)">配置属性</el-button>
             <el-button v-if="$hasPermission('usertag:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>
             <el-button v-if="$hasPermission('usertag:delete')" type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
           </template>
@@ -52,7 +52,7 @@
 <script>
 import mixinViewModule from '@/mixins/view-module'
 import AddOrUpdate from './usertag-add-or-update'
-import MasterUser from "@/views/modules/user/tag-property";
+import MasterUser from '@/views/modules/user/tag-property'
 export default {
   mixins: [mixinViewModule],
   data () {
@@ -66,7 +66,7 @@ export default {
       dataForm: {
         id: ''
       },
-      masterUserVisible: false,
+      masterUserVisible: false
     }
   },
   components: {
@@ -74,10 +74,10 @@ export default {
     MasterUser
   },
   methods: {
-    addProperty(id){
+    addProperty (id, propertyId, relationId) {
       this.masterUserVisible = true
       this.$nextTick(() => {
-        this.$refs.masterUser.init()
+        this.$refs.masterUser.init(id, propertyId, relationId)
       })
     },
     // dialog回调函数
@@ -87,14 +87,12 @@ export default {
         let nickname = item.username
         this.$set(item, 'nickName', nickname)
       }
-      // 打开数据校验
-      this.dataCheckAble = true
       if (connectResponse.length === 1) {
         this.formData.splice(this.updateIndex, 1, connectResponse[0])
       } else {
         this.formData = connectResponse
       }
-    },
+    }
   }
 }
 </script>