卢龙web端功能迁移

project/lulong/AppResidentInfo/components/List.vue

@@ -0,0 +1,181 @@
+<template>
+  <ai-list class="activitiesList">
+    <ai-title
+      slot="title"
+      title="居民信息"
+      isShowBottomBorder
+      isShowArea
+      :hideLevel="$store.state.user.info.areaList.length - 1"
+      v-model="search.areaId"
+      :instance="instance"
+      @change="search.current = 1, getList()">
+    </ai-title>
+    <template #content>
+      <ai-search-bar bottomBorder>
+        <template #left>
+          <el-button type="primary" icon="iconfont iconAdd" @click="toAdd('')">添加</el-button>
+          <ai-import
+            :instance="instance"
+            :dict="dict"
+            type="appresidentapplet"
+            name="居民信息"
+            @success="search.current = 1, getList()">
+          </ai-import>
+        </template>
+        <template #right>
+          <el-input
+            v-model="search.name"
+            size="small"
+            placeholder="姓名/身份证/联系方式"
+            clearable
+            v-throttle="() => {search.current = 1, getList()}"
+            @clear="search.name = '', getList()"
+            suffix-icon="iconfont iconSearch">
+          </el-input>
+        </template>
+      </ai-search-bar>
+      <ai-table
+        :tableData="tableData"
+        :total="search.total"
+        :current.sync="search.current"
+        :size.sync="search.size"
+        @getList="getList"
+        :col-configs="colConfigs"
+        :dict="dict">
+        <el-table-column slot="options" label="操作" fixed="right" align="center" width="160px">
+          <template slot-scope="{ row }">
+            <div class="table-options">
+              <el-button type="text" @click="toDetail(row.id)">详情</el-button>
+              <el-button type="text" @click="toAdd(row.id)">编辑</el-button>
+              <el-button type="text" @click="remove(row.id)">删除</el-button>
+              <el-button type="text" @click="qrCode(row)">生成二维码</el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </ai-table>
+      <ai-dialog :visible.sync="dialogCode" title="二维码" width="500px" customFooter>
+        <div class="code-div">
+          <img :src="codeImgUrl" alt="" class="code-img">
+        </div>
+        <el-button slot="footer" @click="dialogCode=false" type="primary">关闭</el-button>
+      </ai-dialog>
+    </template>
+  </ai-list>
+</template>
+
+<script>
+  export default {
+    props: {
+      instance: Function,
+      dict: Object
+    },
+
+    data () {
+      return {
+        search: {
+          current: 1,
+          size: 10,
+          total: 0,
+          name: '',
+          areaId: ''
+        },
+        tableData: [],
+        dialogCode: false,
+        codeImgUrl: ''
+      }
+    },
+
+    computed: {
+      colConfigs() {
+        return [
+          { label: "姓名", prop: "name", align: "left" },
+          // { label: "性别", prop: "sex", dict: 'sex', align: "center" },
+          { prop: 'idNumber', label: '身份证号', align: 'center'},
+          // format: v => v.substring(0, 10) + '****' + v.substring(14, 18)
+          // { label: "年龄", prop: "age", align: "center"},
+          { label: "现住址", prop: "currentAreaName", align: "center" },
+          { label: "网格", prop: "girdName", align: "center" },
+          { label: "民族", prop: "nation", align: "center", dict: "nation" },
+          { label: "文化程度", prop: "education", align: "center", dict: "education" },
+          { label: "政治面貌", prop: "politicsStatus", align: "center", dict: "politicsStatus" },
+          { slot: "options", },
+        ]
+      }
+    },
+
+    created () {
+      this.search.areaId = this.$store.state.user.info.areaId
+      this.$dict.load(['nation', 'education', 'politicsStatus']).then(()=> {
+        this.getList()
+      })
+    },
+
+    methods: {
+      getList() {
+        this.instance.post(`/app/appresidentapplet/list`,null, {
+          params: {
+            ...this.search,
+          }
+        }).then(res=> {
+          if(res?.data) {
+            this.tableData = res.data.records
+            this.search.total = res.data.total
+          }
+        })
+      },
+
+      toDetail (id) {
+        this.$emit('change', {
+          type: 'Detail',
+          params: {
+            id: id || '',
+            type: 'Detail'
+          }
+        })
+      },
+
+      toAdd(id) {
+        this.$emit('change', {
+          type: 'Add',
+          params: {
+            type: id ? 'Edit' : 'Add',
+            id: id || ''
+          }
+        })
+      },
+
+      remove (id) {
+        this.$confirm('确定删除该数据？').then(() => {
+          this.instance.post(`/app/appresidentapplet/delete?ids=${id}`).then(res=>{
+            if(res.code == 0) {
+              this.$message.success('删除成功！')
+              this.getList()
+            }
+          })
+        })
+      },
+
+      qrCode(row) {
+        this.instance.post(`/app/appresidentapplet/generateQrCode?id=${row.id}`).then(res=>{
+          if(res.code == 0) {
+            this.dialogCode = true
+            this.codeImgUrl = res.data
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .activitiesList {
+    height: 100%;
+    .code-div {
+      text-align: center;
+    }
+    .code-img {
+      width: 300px;
+      height: 300px;
+    }
+  }
+</style>