【pc端 添加用户指标展示管理】-【前端页面展示】-（魏凯）-2020/11/24

src/views/modules/kpi/analysis-user.vue

@@ -0,0 +1,143 @@
+<template>
+  <el-dialog :visible.sync="visible"
+              title="选择开通查看指标用户"
+              :close-on-click-modal="false"
+              :close-on-press-escape="false"
+              width="80%"
+              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.username" :placeholder="$t('user.username')" clearable maxlength="10" @keyup.native="btKeyUpUserName"></el-input>
+        </el-form-item>
+        <el-form-item label="真实姓名">
+          <el-input v-model="dataForm.realname" placeholder='真实姓名' clearable maxlength="10" @keyup.native="btKeyUpRealname"></el-input>
+        </el-form-item>
+        <el-form-item label="邮箱">
+          <el-input v-model="dataForm.email" placeholder="邮箱" clearable maxlength="20" @keyup.native="btKeyUpEmail"></el-input>
+        </el-form-item>
+        <el-form-item label="手机号">
+          <el-input v-model="dataForm.mobile" placeholder="手机号" clearable maxlength="11" @keyup.native="btKeyUpMobile"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="getDataListOverWrite()" type="success">{{ $t('query') }}</el-button>
+        </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="username" :label="$t('user.username')" sortable="custom" header-align="center" align="center" width="100"></el-table-column>
+        <el-table-column prop="realName" :label="$t('user.realName')" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="deptName" :label="$t('user.deptName')" header-align="center" align="center" min-width="120"></el-table-column>
+        <el-table-column prop="email" :label="$t('user.email')" header-align="center" align="center" width="200"></el-table-column>
+        <el-table-column prop="mobile" :label="$t('user.mobile')" sortable="custom" header-align="center" align="center" width="120"></el-table-column>
+        <el-table-column prop="status" :label="$t('user.status')" sortable="custom" header-align="center" align="center" width="180">
+          <template slot-scope="scope">
+            <el-tag v-if="scope.row.status === 0" size="small" type="danger">{{ $t('user.status0') }}</el-tag>
+            <el-tag v-else size="small" type="success">{{ $t('user.status1') }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createDate" :label="$t('user.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-form>
+    </div>
+    </el-card>
+  </el-dialog>
+</template>
+
+<script>
+import mixinViewModule from '@/mixins/view-module'
+export default {
+  mixins: [mixinViewModule],
+  data () {
+    return {
+      mixinViewModuleOptions: {
+        getDataListURL: '/sys/analysis/userpage',
+        getDataListIsPage: true,
+        deleteURL: '/sys/user',
+        deleteIsBatch: true,
+        exportURL: '/sys/user/export'
+      },
+      visible: false,
+      dataForm: {
+        username: '',
+        realname: '',
+        mobile: '',
+        email: ''
+      },
+      responseData: []
+    }
+  },
+  methods: {
+    btKeyUpUserName (e) {
+      e.target.value = e.target.value.replace(/[`~!@#$%^&*()_\-+=<>?:"{}|·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、]/g, '')
+      this.dataForm.username = 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 () {
+      this.visible = true
+      this.$nextTick(() => {
+        this.getDataList()
+      })
+    },
+    handleSelectionChange (val) {
+      this.responseData = val
+    },
+    getInfo () {
+      if (this.responseData.length === 0) {
+        this.$message({
+          message: '请选择用户！',
+          type: 'warning'
+        })
+        return false
+      }
+      this.$emit('connectResponse', this.responseData)
+      this.visible = false
+    }
+  }
+}
+</script>
+<style scoped lang='scss'>
+.el-form{
+  .end{
+    margin-top: 10px;
+  }
+}
+.el-button--success{
+  margin-top: 0px!important;
+}
+</style>

src/views/modules/kpi/useranalysisnote-add-or-update.vue

@@ -3,9 +3,15 @@
     <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
           <el-form-item label="用户ID" prop="userId">
           <el-input v-model="dataForm.userId" placeholder="用户ID"></el-input>
+      </el-form-item>
+          <el-form-item label="用户名称" prop="userName">
+          <el-input v-model="dataForm.userName" placeholder="用户名称"></el-input>
       </el-form-item>
           <el-form-item label="部门ID" prop="deptId">
           <el-input v-model="dataForm.deptId" placeholder="部门ID"></el-input>
+      </el-form-item>
+          <el-form-item label="部门名称" prop="deptName">
+          <el-input v-model="dataForm.deptName" placeholder="部门名称"></el-input>
       </el-form-item>
           <el-form-item label="用户手机号" prop="mobile">
           <el-input v-model="dataForm.mobile" placeholder="用户手机号"></el-input>
@@ -54,7 +60,9 @@ export default {
       dataForm: {
         id: '',
         userId: '',
+        userName: '',
         deptId: '',
+        deptName: '',
         mobile: '',
         deptType: '',
         delFlag: '',
@@ -74,9 +82,15 @@ export default {
         userId: [
           { required: true, message: this.$t('validate.required'), trigger: 'blur' }
         ],
+        userName: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
         deptId: [
           { required: true, message: this.$t('validate.required'), trigger: 'blur' }
         ],
+        deptName: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
         mobile: [
           { required: true, message: this.$t('validate.required'), trigger: 'blur' }
         ],

src/views/modules/kpi/useranalysisnote-add.vue

@@ -0,0 +1,189 @@
+<template>
+  <el-card shadow="never" class="aui-card--fill">
+    <div class="mod-__masteruserrelation}">
+      <el-form :inline="true" :rules="dataRule" ref="dataForm" :model="dataForm" @keyup.enter.native="dataFormSubmitHandle()">
+        <el-form-item>
+          <el-button type="primary" @click="backToUserRelationList">{{"返回"}}</el-button>
+          <el-button type="primary" :disabled="isAble" @click="dataFormSubmitHandle()">{{"确定"}}</el-button>
+        </el-form-item>
+      </el-form>
+      <div v-for="(item, index) in this.formData" :key="index">
+        <el-form :inline="true" :rules="dataRule" ref="item" :model="item" >
+          <div style="text-align: left;">{{"发送短信用户"+(index+1)+":"}}</div>
+          <el-row>
+            <el-form-item label="选择用户" prop="deptName" label-width="80px">
+              <el-input v-model="item.deptName"
+                        :disabled="true"
+                        type="text"
+                        clearable
+                        style="width: 30rem;">
+              </el-input>&emsp;
+
+              <el-input v-model="item.realName"
+                        :disabled="true"
+                        type="text"
+                        clearable
+                        style="width: 10rem;">
+              </el-input> &emsp;
+              <el-button @click="selectUserMethod(index)">{{"选择用户"}}</el-button>&emsp;&emsp;
+            </el-form-item>
+            <el-form-item label="手机号" prop="mobile" label-width="80px">
+              <el-input v-model="item.mobile"
+                        type="text"
+                        style="width: 30rem;"
+                        maxlength="60">
+              </el-input>&emsp;
+              <el-button @click="deleteUserMethod(index)">{{"删除"}}</el-button>&emsp;&emsp;
+            </el-form-item>
+          </el-row>
+        </el-form>
+      </div>
+      <!-- 弹窗, 新增 / 修改 -->
+      <master-user v-if="masterUserVisible" ref="masterUser" @refreshDataList="getDataList" v-on:connectResponse="connectResponse"></master-user>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import mixinViewModule from '@/mixins/view-module'
+import MasterUser from "@/views/modules/kpi/analysis-user";
+export default {
+  mixins: [mixinViewModule],
+  data () {
+    return {
+      mixinViewModuleOptions: {
+        getDataListURL: '/cloudAnalysis/masteruserrelation/page',
+        getDataListIsPage: true,
+        deleteURL: '/cloudAnalysis/masteruserrelation',
+        deleteIsBatch: true
+      },
+      dataForm: {
+        id: ''
+      },
+      masterUserVisible: false,
+      isAble: false,
+      formData: [
+          {
+            deptName: '',
+            username: '',
+            mobile : '',
+            id:'',
+            deptId:'',
+            remark:''
+          }
+          ],
+      updateIndex: 0,
+      dataCheckAble: true
+    }
+  },
+  computed: {
+    dataRule () {
+      return {
+        mobile: [
+          { required: this.dataCheckAble, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        realName: [
+          { required: false, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        deptName: [
+          { required: false, message: this.$t('validate.required'), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  components: {
+    MasterUser
+  },
+  methods: {
+    // 返回按钮点击事件
+    backToUserRelationList () {
+      this.$emit('refreshDataList')
+      this.$parent.selectComponent = 'UserAnalysisNote'
+      this.$router.push({ path: '/kpi-useranalysisnoteroute' })
+    },
+    // 选择书记按钮点击事件
+    selectUserMethod (index) {
+      this.updateIndex = index
+      this.masterUserVisible = true
+      this.$nextTick(() => {
+        this.$refs.masterUser.init()
+      })
+      // 关闭数据校验
+      this.dataCheckAble = false
+    },
+    // 删除单个人员
+    deleteUserMethod (index) {
+      // 关闭数据校验
+      this.dataCheckAble = false
+      if (this.formData.length === 1) {
+        this.formData = [{ deptName: '', username: '',mobile : '',id:'',deptId:'',remark:'' }]
+      } else {
+        this.formData.splice(index, 1)
+      }
+      // 打开数据校验
+      this.dataCheckAble = true
+    },
+    // dialog回调函数
+    connectResponse (connectResponse) {
+      for (var i = 0; i < connectResponse.length; i++) {
+        let item = connectResponse[i]
+        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
+      }
+    },
+    // 表单提交
+    dataFormSubmitHandle () {
+      if (this.formData.length < 1 || this.formData[0].username === '') {
+        this.$message({
+          message: '请选择书记！',
+          type: 'warning'
+        })
+        return false
+      }
+      // 昵称非空校验
+      for (var i = 0; i < this.formData.length; i++) {
+        if (this.formData[i].mobile === '' || this.formData[i].mobile === null) {
+          this.$message({
+            message: '存在空手机号，请完善手机号！',
+            type: 'warning'
+          })
+          return false
+        }
+      }
+      this.isAble = true
+      let postData = {
+        aformDataParams: this.formData
+      }
+      this.$http['post'](
+          '/sys/analysis/add',
+          postData
+      ).then(({ data: res }) => {
+        if (res.code !== 0) {
+          this.isAble = false
+          return this.$message.error(res.msg)
+        }
+        this.$message({
+          message: this.$t('prompt.success'),
+          type: 'success',
+          duration: 500,
+          onClose: () => {
+            this.isAble = false
+            this.$emit('refreshDataList')
+            // 返回主列表
+            this.backToUserRelationList()
+          }
+        })
+      }).catch(() => {})
+    }
+
+
+  }
+}
+</script>

src/views/modules/kpi/useranalysisnote.vue

@@ -2,38 +2,32 @@
   <el-card shadow="never" class="aui-card--fill">
     <div class="mod-news__useranalysisnote}">
       <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
-        <el-form-item>
+        <el-form-item label="用户名">
-          <el-input v-model="dataForm.id" placeholder="id" clearable></el-input>
+          <el-input v-model="dataForm.username" :placeholder="$t('user.username')"></el-input>
         </el-form-item>
-        <el-form-item>
+        <el-form-item label="手机号">
-          <el-button @click="getDataList()">{{ $t('query') }}</el-button>
+          <el-input v-model="dataForm.mobile" placeholder="手机号"></el-input>
         </el-form-item>
         <el-form-item>
-          <el-button v-if="$hasPermission('news:useranalysisnote:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
+          <el-button @click="getDataList()">{{ $t('query') }}</el-button>
         </el-form-item>
         <el-form-item>
-          <el-button v-if="$hasPermission('news:useranalysisnote:delete')" type="danger" @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button>
+          <el-button  type="primary" @click="addHandle()">{{ $t('add') }}</el-button>
         </el-form-item>
       </el-form>
-      <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;">
+      <el-table v-loading="dataListLoading"
-        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
+                :data="dataList"
-        <el-table-column prop="id" label="主键" header-align="center" align="center"></el-table-column>
+                border
-        <el-table-column prop="userId" label="用户ID" header-align="center" align="center"></el-table-column>
+                @selection-change="dataListSelectionChangeHandle"
-        <el-table-column prop="deptId" label="部门ID" header-align="center" align="center"></el-table-column>
+                @sort-change="dataListSortChangeHandle"
+                style="width: 100%;">
+        <el-table-column type="index" label="序号" header-align="center" align="center" width="50"></el-table-column>
+        <el-table-column prop="userName" label="用户名称" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="deptName" label="部门名称" header-align="center" align="center"></el-table-column>
         <el-table-column prop="mobile" label="用户手机号" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="deptType" label="部门类型(0:区，1：街道)" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="delFlag" label="0：正常，1：删除" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="allDeptIds" label="所有部门ID(冗余字段)" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="allDeptNames" label="所有部门名称(冗余字段)" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="revision" label="乐观锁" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="createdBy" label="创建人" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="createdTime" label="创建时间" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="updatedBy" label="更新人" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="updatedTime" 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 v-if="$hasPermission('news:useranalysisnote:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>
+            <el-button  type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
-            <el-button v-if="$hasPermission('news:useranalysisnote:delete')" type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -60,18 +54,25 @@ export default {
   data () {
     return {
       mixinViewModuleOptions: {
-        getDataListURL: '/news/useranalysisnote/page',
+        getDataListURL: '/sys/analysis/page',
         getDataListIsPage: true,
-        deleteURL: '/news/useranalysisnote',
+        deleteURL: '/sys/analysis',
         deleteIsBatch: true
       },
       dataForm: {
-        id: ''
+        username: '',
+        mobile: '',
       }
     }
   },
   components: {
     AddOrUpdate
+  },
+  methods:{
+    addHandle() {
+      this.$parent.selectComponent = 'UserAnalysisNoteAdd'
+      this.$router.push({path: 'kpi-useranalysisnoteroute'})
+    },
   }
 }
 </script>

src/views/modules/kpi/useranalysisnoteroute.vue

@@ -0,0 +1,31 @@
+<template>
+  <keep-alive include="UserAnalysisNote">
+    <component :is="selectComponent"></component>
+  </keep-alive>
+</template>
+
+<script>
+import UserAnalysisNote from './useranalysisnote'
+import UserAnalysisNoteAdd from './useranalysisnote-add'
+export default {
+  name: "useranalysisnoteroute",
+  data () {
+    return {
+      selectComponent: UserAnalysisNote
+    }
+  },
+  components: {
+    UserAnalysisNote,
+    UserAnalysisNoteAdd
+  },
+  methods: {
+    init () {
+      this.selectComponent = UserAnalysisNote
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>