store+统计分析+用户管理

web/src/views/system/user.vue

@@ -1,38 +1,196 @@
-   <template>
-     <div  class="user">
-      <SearchBox></SearchBox>
+<template>
+  <div class="user">
+    <searchBox
+      :btn-option-list="btnOptionList"
+      @onSearch="onSearch"
+      :search-options="searchOptions"
+      @operateForm="operateForm"
+    ></searchBox>
 
-      <div class="table-content">
+    <div class="content-table">
+      <ComTable
+        :columns="columns"
+        :table-data="tableData"
+        @handlePagesizeChange="handlePagesizeChange"
+        ref="comTable"
+        :table-option="tableOption"
+        :page-option="pageOption"
+        :table-h="tableH"
+      >
+       <template #gender="record">
+        <!-- 0:女; 1:男 -->
+          <span>{{ ['女', '男'][record.gender] }}</span>
+        </template>
+    
+        <template #action="record">
+          <OperateCom :record="record" :operate-list="operateList" @operateForm="operateForm" />
+        </template>
+    </ComTable>
+    </div>
 
-      </div>
+    </div>
+</template>
 
-      
-     </div>
-   </template>
-   
 <script>
-import SearchBox from '@/components/SearchBox.vue'
+import { columnList } from '../../../public/config/columnList'
+import { mapState } from 'vuex'
+import { getReq, postReq } from '@/request/api.js'
+import ComTable from '@/components/ComTable'
+import OperateCom from '@/components/OperateCom'
+
+import searchBox from '@/components/SearchBox.vue'
 export default {
   name: '',
-  components:{
-    SearchBox
+  components: {
+    searchBox,
+    ComTable,
+    OperateCom
   },
-  props: {
-   
-  },
-  data() { 
+  props: {},
+  data() {
     return {
-   
+      pageOption:{},
+      btnOptionList: [],
+      paramsDate:{
+       
+      }
     }
   },
+  computed: {
+    ...mapState(['page', 'detailType', 'type'])
+  },
+  created() {
+    let info = []
+    let col = columnList.find((i) => i.page == 'user').columns
+    if (col.length) {
+      col.forEach((item) => {
+        info.push(this.$setWidth(item))
+      })
+    }
+    this.columns = info
+  },
+ 
   mounted() {
-   
-  },
-  methods:{
-   
+    this.operateList = this.$getBtns(['查看', '编辑', '删除'])
+    this.btnOptionList = this.$getBtns(['新增', '批量删除'])
+    this.getList()
   },
+
+  methods: {
+    async getList() {
+      this.$refs.comTable.loading = true
+
+      const { page, pageSize } = this.pageOption
+
+      const params = {
+        ...this.paramsDate,
+        page_size: pageSize,
+        page
+      }
+
+      try {
+        const res = await getReq('/api/queryUserList',params)
+        if (res.errcode === 0) {
+          this.$refs.comTable.loading = false
+
+          this.tableData = res.data
+
+          this.pageOption = {
+            page: res.page,
+            pageSize: res.page_size,
+            count: res.count
+          }
+        } else {
+          const err = { tip: res.errmsg }
+          throw err
+        }
+      } catch (error) {
+        //统一处理报错提示
+      }
+    },
+    operateForm(type, record = {}) {
+      switch (type) {
+      case 'detail':
+        this.$store.commit('updateState', {
+          detailType: 'edit', //edit or view
+          page: 'detail',
+          title: '查看',
+          type: 'user'
+        })
+
+       
+
+        this.getRuleFormInfo(record)
+        break
+
+      case 'back':
+        this.$store.commit('updateState', {
+          page: 'main'
+        })
+        this.isShowFlag = false
+        this.getList()
+        break
+
+      default:
+        break
+      }
+    },
+    async getRuleFormInfo(record) {
+      function getInfo(data, url) {
+        return new Promise((reslove, reject) => {
+          getReq(data, url).then((res) => {
+            reslove(res.data)
+          })
+        })
+      }
+
+      let row = {}
+      if (record.id) {
+        row = await getInfo({ id: record.id }, this.apiMethods[0].get)
+        this.record = row
+        this.$store.commit('updateState', {
+          // 配电柜-集中器-查看
+          title:
+            (row.cabinetName ? row.cabinetName + '-' : '') +
+            (row.name.split('集中器')[0] ? row.name.split('集中器')[0] : '') +
+            '集中器-查看'
+        })
+      }
+      let connectorType
+      cabinetOptions.forEach((e, index) => {
+        e.list.forEach((i) => {
+          if (index == 1) {
+            // 集中器状态
+            if (i.key == 'ctrMode' || i.key == 'powerStatus') {
+              e.ruleForm[i.key] = row.deviceStatus.lightStatus[i.key]
+            } else {
+              e.ruleForm[i.key] = row.deviceStatus[i.key]
+            }
+          } else if (i.key == 'connectorType') {
+            connectorType = row.deviceExtend[i.key]
+            e.ruleForm[i.key] = row.deviceExtend[i.key]
+          } else {
+            e.ruleForm[i.key] = row ? row[i.key] : ''
+            e.ruleForm.id = row.id
+          }
+        })
+      })
+
+      // C型控制器，手自动状态和故障状态显示为“无”
+      if (connectorType == 1) {
+        cabinetOptions[1].ruleForm.status = 5
+        cabinetOptions[1].ruleForm.ctrMode = 5
+      }
+      this.isShowFlag = true
+    },
+    handlePagesizeChange(pageOption) {
+      this.pageOption.pageSize = pageOption.pageSize
+      this.pageOption.page = pageOption.page
+
+      this.getList()
+    }
+  }
 }
 </script>
-   
-   <style lang="scss" scoped>
-   </style>
+
+<style lang="scss" scoped></style>