小程序码管理页面查询功能

src/views/modules/sys/deptmacode.vue

@@ -0,0 +1,227 @@
+<template>
+  <el-card shadow="never"
+           class="aui-card--fill">
+    <div class="mod-sys__deptmacode}">
+      <el-form :inline="true"
+               :model="dataForm"
+               @keyup.enter.native="getDataList()">
+        <el-form-item label="所属街道"
+                      prop="deptId">
+          <el-select v-model="dataForm.streetId"
+                     @change="changeStreet"
+                     placeholder="所属街道">
+            <el-option v-for="item in streetList"
+                       :key="item.id"
+                       :label="item.name"
+                       :value="item.id">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="所属社区">
+          <el-select v-model="dataForm.communityId"
+                     @change="changeCommunity"
+                     placeholder="所属社区">
+            <el-option v-for="item in communityList"
+                       :key="item.id"
+                       :label="item.name"
+                       :value="item.id">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="所属网格">
+          <el-select v-model="dataForm.gridId"
+                     placeholder="所属网格">
+            <el-option v-for="item in gridList"
+                       :key="item.id"
+                       :label="item.name"
+                       :value="item.id">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="getDataList()">{{ $t('query') }}</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button v-if="$hasPermission('sys:deptmacode:delete')"
+                     type="danger"
+                     @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button v-if="$hasPermission('sys:deptmacode:init')"
+                     type="primary"
+                     @click="initDeptMaCodeHandle()">初始化</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table v-loading="dataListLoading"
+                :data="dataList"
+                border
+                @selection-change="dataListSelectionChangeHandle"
+                style="width: 100%;">
+        <el-table-column type="selection"
+                         header-align="center"
+                         align="center"
+                         width="50"></el-table-column>
+        <el-table-column prop="street"
+                         label="街道"
+                         header-align="center"
+                         align="center"></el-table-column>
+        <el-table-column prop="community"
+                         label="社区"
+                         header-align="center"
+                         align="center"></el-table-column>
+        <el-table-column prop="grid"
+                         label="网格"
+                         header-align="center"
+                         align="center"></el-table-column>
+        <el-table-column prop="codeUrl"
+                         label="小程序码"
+                         header-align="center"
+                         align="center">
+          <template slot-scope="scope">
+            <img v-if="scope.row.codeUrl"
+                 :src="scope.row.codeUrl"
+                 min-width="70"
+                 height="70" />
+          </template>
+        </el-table-column>
+        <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 v-if="$hasPermission('sys:deptmacode:delete') && scope.row.codeUrl"
+                       type="danger"
+                       size="mini"
+                       @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
+            <el-button v-if="$hasPermission('sys:deptmacode:create') && !scope.row.codeUrl"
+                       type="primary"
+                       size="mini"
+                       @click="createDeptMaCodeHandle(scope.row.gridId)">生成</el-button>
+          </template>
+        </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>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import mixinViewModule from '@/mixins/view-module'
+export default {
+  mixins: [mixinViewModule],
+  data () {
+    return {
+      mixinViewModuleOptions: {
+        getDataListURL: '/sys/deptmacode/page',
+        getDataListIsPage: true,
+        deleteURL: '/sys/deptmacode',
+        deleteIsBatch: true
+      },
+      dataForm: {
+        streetId: null,
+        communityId: null,
+        gridId: null
+      },
+      streetList: [],
+      communityList: [],
+      gridList: []
+    }
+  },
+  components: {
+  },
+  created () {
+    this.getDeptInfoList('street', '1169154711480528897')
+  },
+  methods: {
+    createDeptMaCodeHandle (id) {
+      this.$confirm(this.$t('prompt.info', { 'handle': '生成小程序码' }), this.$t('生成'), {
+        confirmButtonText: this.$t('confirm'),
+        cancelButtonText: this.$t('cancel'),
+        type: 'warning'
+      }).then(() => {
+        this.$http.post(`/sys/deptmacode/create/${id}`).then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          }
+          this.$message({
+            message: this.$t('prompt.success'),
+            type: 'success',
+            duration: 500,
+            onClose: () => {
+              this.getDataList()
+            }
+          })
+        }).catch(() => { })
+      }).catch(() => { })
+    },
+    initDeptMaCodeHandle () {
+      this.$confirm('初始化所有网格的小程序码', this.$t('初始化'), {
+        confirmButtonText: this.$t('confirm'),
+        cancelButtonText: this.$t('cancel'),
+        type: 'warning'
+      }).then(() => {
+        let loading = this.$loading({
+          lock: true,
+          text: '正在进行初始化...',
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.7)'
+        })
+        this.$http.post(`/sys/deptmacode/init`).then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          }
+          loading.close()
+          this.$message({
+            message: this.$t('prompt.success'),
+            type: 'success',
+            duration: 500,
+            onClose: () => {
+              this.getDataList()
+            }
+          })
+        }).catch(() => { })
+      }).catch(() => { })
+    },
+    getDeptInfoList (dataReceiver, faDeptId) {
+      this.$http.get(`/sys/dept/sublist/` + faDeptId).then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
+        if (dataReceiver === 'street') {
+          this.streetList = res.data
+        } else if (dataReceiver === 'community') {
+          this.communityList = res.data
+        } else if (dataReceiver === 'grid') {
+          this.gridList = res.data
+        }
+      }).catch(() => { })
+    },
+    changeStreet () {
+      // 清空社区与网格的变量值
+      this.dataForm.communityId = this.dataForm.gridId = null
+      this.communityList = this.gridList = []
+      // 获取街道下属社区
+      this.getDeptInfoList('community', this.dataForm.streetId)
+    },
+    changeCommunity () {
+      // 情况网格的变量值
+      this.dataForm.gridId = null
+      this.gridList = []
+      // 获取社区下属网格
+      this.getDeptInfoList('grid', this.dataForm.communityId)
+    }
+  }
+}
+</script>