网格员申办

packages/2.0.5/AppGridMember/AppGridMember.vue

@@ -1,79 +1,117 @@
 <template>
-  <div class="AppGridMember">
-    <keep-alive :include="['List']">
-      <component
-        ref="component"
-        :is="component"
-        @change="onChange"
-        :params="params"
-        :instance="instance"
-        :dict="dict"
-      ></component>
-    </keep-alive>
-  </div>
+  <ai-list class="AppGridMember" v-if="!isShowDetail">
+    <template slot="title">
+      <ai-title title="网格员管理" :isShowBottomBorder="false"></ai-title>
+    </template>
+    <template slot="tabs">
+      <el-tabs v-model="currIndex">
+        <el-tab-pane v-for="(tab,i) in tabs" :key="i" :label="tab.label">
+          <component :ref="String(i)" v-if="currIndex == i" :is="tab.comp" @change="onChange" lazy :instance="instance" :dict="dict" :permissions="permissions"/>
+        </el-tab-pane>
+      </el-tabs>
+    </template>
+  </ai-list>
+  <Add v-else-if="component === 'Add'" :params="params" :instance="instance" :dict="dict" :permissions="permissions" @change="onChange"></Add>
+  <Family v-else-if="component === 'Family'" :params="params" :instance="instance" :dict="dict" :permissions="permissions" @change="onChange"></Family>
+  <ApplyDetail v-else-if="component === 'ApplyDetail'" :params="params" :instance="instance" :dict="dict" :permissions="permissions" @change="onChange"></ApplyDetail>
+  <ApplyAdd v-else-if="component === 'ApplyAdd'" :params="params" :instance="instance" :dict="dict" :permissions="permissions" @change="onChange"></ApplyAdd>
 </template>
 
 <script>
-import List from "./components/list";
-import Add from "./components/add";
-import Family from "./components/Family";
+  import List from './components/list'
+  import ApplyList from './components/ApplyList'
+  import Add from './components/add'
+  import ApplyDetail from './components/ApplyDetail'
+  import ApplyAdd from './components/ApplyAdd'
+  import Family from './components/Family'
 
-export default {
-  name: "AppGridMember",
-  label: "网格管理员",
+  export default {
+    name: "AppGridMember",
+    label: "网格管理员",
 
-  props: {
-    instance: Function,
-    dict: Object,
-  },
-
-  data() {
-    return {
-      component: "List",
-      params: {},
-      include: [],
-    };
-  },
-
-  components: {
-    Add,
-    List,
-    Family
-  },
-
-  mounted() {},
-
-  methods: {
-    onChange(data) {
-      if (data.type === "Add") {
-        this.component = "Add";
-        this.params = data.params;
-      }
-
-      if (data.type === "Family") {
-        this.component = "Family"
-        this.params = data.params
-      }
-
-      if (data.type === "list") {
-        this.component = "List";
-        this.params = data.params;
-
-        this.$nextTick(() => {
-          if (data.isRefresh) {
-            this.$refs.component.getList();
-          }
-        });
-      }
+    props: {
+      instance: Function,
+      dict: Object,
+      permissions: Function
     },
-  },
-};
+
+    data() {
+      return {
+        component: "List",
+        params: {},
+        include: [],
+        currIndex: '0',
+        isShowDetail: false
+      };
+    },
+
+      computed: {
+        tabs () {
+          const tabList = [
+            {label: '网格员信息', name: 'List', comp: List, permission: ''},
+            {label: '申报信息', name: 'ApplyList', comp: ApplyList, permission: ''}
+          ].filter(item => {
+            return true
+          })
+
+          return tabList
+        }
+      },
+
+    components: {
+      Add,
+      List,
+      Family,
+      ApplyList,
+      ApplyDetail,
+      ApplyAdd
+    },
+
+    mounted() {},
+
+    methods: {
+      onChange(data) {
+        if (data.type === "Add") {
+          this.component = "Add"
+          this.isShowDetail = true
+          this.params = data.params
+        }
+
+        if (data.type === "Family") {
+          this.component = "Family"
+          this.isShowDetail = true
+          this.params = data.params
+        }
+        if (data.type === "ApplyDetail") {
+          this.component = "ApplyDetail"
+          this.isShowDetail = true
+          this.params = data.params
+        }
+
+        if (data.type === "ApplyAdd") {
+          this.component = "ApplyAdd"
+          this.isShowDetail = true
+          this.params = data.params
+        }
+
+        if (data.type === "list") {
+          this.component = "List"
+          this.isShowDetail = false
+          this.params = data.params
+        }
+
+        if (data.type === "ApplyList") {
+          this.component = "ApplyList"
+          this.isShowDetail = false
+          this.params = data.params
+        }
+      }
+    }
+  }
 </script>
 
 <style lang="scss">
-.AppGridMember {
-  height: 100%;
-  background: #f3f6f9;
-  overflow: auto;
-}
+  .AppGridMember {
+    height: 100%;
+  }
 </style>

packages/2.0.5/AppGridMember/components/ApplyAdd.vue

@@ -0,0 +1,107 @@
+<template>
+  <ai-detail class="content-add">
+    <template slot="title">
+      <ai-title :title="params.id ? '编辑' : '添加'" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
+      </ai-title>
+    </template>
+    <template slot="content">
+      <ai-card title="基本信息">
+        <template #content>
+          <el-form class="ai-form" :model="form" label-width="120px" ref="form">
+            <el-form-item label="姓名" style="width: 100%;" prop="name" :rules="[{required: true, message: '请输入姓名', trigger: 'blur'}]">
+              <el-input size="small" v-model="form.name" placeholder="请输入..." :maxlength="20"></el-input>
+            </el-form-item>
+            <el-form-item label="联系电话" style="width: 100%;" prop="phone" :rules="[{required: true, message: '请输入联系电话', trigger: 'blur'}]">
+              <el-input size="small" v-model="form.phone" placeholder="请输入..." :maxlength="11"></el-input>
+            </el-form-item>
+            <el-form-item label="网格名称" style="width: 100%;" prop="girdName" :rules="[{required: true, message: '请输入网格名称', trigger: 'blur'}]">
+              <el-input size="small" v-model="form.girdName" placeholder="请输入..." :maxlength="50"></el-input>
+            </el-form-item>
+          </el-form>
+        </template>
+      </ai-card>
+    </template>
+    <template #footer>
+      <el-button @click="cancel">取消</el-button>
+      <el-button type="primary" :loading="isLoading" @click="confirm">提交</el-button>
+    </template>
+  </ai-detail>
+</template>
+
+<script>
+  export default {
+    name: 'ApplyAdd',
+
+    props: {
+      instance: Function,
+      dict: Object,
+      params: Object
+    },
+
+    data () {
+      return {
+        form: {
+          name: '',
+          phone: '',
+          gridName: ''
+        },
+        isLoading: false,
+        id: ''
+      }
+    },
+
+    created () {
+      if (this.params && this.params.id) {
+        this.id = this.params.id
+        this.getInfo(this.params.id)
+      }
+    },
+
+    methods: {
+      getInfo (id) {
+        this.instance.post(`/app/appcontentinfo/queryDetailById?id=${id}`).then(res => {
+          if (res.code === 0) {
+            this.form = res.data
+          }
+        })
+      },
+
+      onChange () {
+        this.form.files = []
+      },
+
+      confirm () {
+        this.$refs.form.validate((valid) => {
+          if (valid) {
+            this.isLoading = true
+            this.instance.post(`/app/appgirdmemberapply/addOrUpdate`, {
+              ...this.form,
+              id: this.params.id || ''
+            }).then(res => {
+              if (res.code == 0) {
+                this.$message.success('提交成功')
+                setTimeout(() => {
+                  this.cancel(true)
+                }, 600)
+              } else {
+                this.isLoading = false
+              }
+            }).catch(() => {
+              this.isLoading = false
+            })
+          }
+        })
+      },
+
+      cancel (isRefresh) {
+        this.$emit('change', {
+          type: 'list',
+          isRefresh: !!isRefresh
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+</style>

packages/2.0.5/AppGridMember/components/ApplyDetail.vue

@@ -0,0 +1,65 @@
+<template>
+  <ai-detail>
+    <template slot="title">
+      <ai-title title="详情" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
+      </ai-title>
+    </template>
+    <template slot="content">
+      <ai-card title="基本信息">
+        <template #content>
+          <ai-wrapper>
+            <ai-info-item label="姓名" isLine :value="info.name"></ai-info-item>
+            <ai-info-item label="联系电话" isLine :value="info.phone"></ai-info-item>
+            <ai-info-item label="网格名称" isLine :value="info.girdName"></ai-info-item>
+          </ai-wrapper>
+        </template>
+      </ai-card>
+    </template>
+  </ai-detail>
+</template>
+
+<script>
+  export default {
+    name: 'ApplyDetail',
+
+    props: {
+      instance: Function,
+      dict: Object,
+      params: Object
+    },
+
+    data () {
+      return {
+        info: {},
+        id: ''
+      }
+    },
+
+    created () {
+      if (this.params && this.params.id) {
+        this.id = this.params.id
+        this.getInfo(this.params.id)
+      }
+    },
+
+    methods: {
+      getInfo (id) {
+        this.instance.post(`/app/appgirdmemberapply/queryDetailById?id=${id}`).then(res => {
+          if (res.code === 0) {
+            this.info = res.data
+          }
+        })
+      },
+
+      cancel (isRefresh) {
+        this.$emit('change', {
+          type: 'ApplyList',
+          isRefresh: !!isRefresh
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+</style>

packages/2.0.5/AppGridMember/components/ApplyList.vue

@@ -0,0 +1,179 @@
+<template>
+  <ai-list class="list" isTabs>
+    <template slot="content">
+      <ai-search-bar bottomBorder>
+        <template slot="left">
+          <el-button
+            icon="iconfont iconAdd"
+            type="primary"
+            size="small"
+            @click="add('')">添加</el-button>
+          <el-button
+            icon="iconfont iconDelete"
+            @click="deleteById(ids.join(','))"
+            :disabled="!Boolean(ids.length)">
+            删除
+          </el-button>
+          <ai-import :instance="instance" :dict="dict" type="appgirdmemberapply" name="网格员申报" @success="getList()">
+            <el-button icon="iconfont iconImport">导入</el-button>
+          </ai-import>
+        </template>
+        <template slot="right">
+          <el-input
+            v-model="searchObj.name"
+            size="small"
+            placeholder="网格员/责任网格"
+            @keyup.enter.native="(page.current = 1), getList()"
+            clearable
+            @clear="(searchObj.name = '', page.current = 1), getList()"
+            suffix-icon="iconfont iconSearch" />
+        </template>
+      </ai-search-bar>
+      <ai-table
+        :tableData="tableData"
+        :col-configs="colConfigs"
+        :total="page.total"
+        ref="aitableex"
+        :current.sync="page.current"
+        :size.sync="page.size"
+        @selection-change="(v) => (ids = v.map((e) => e.id))"
+        @getList="getList()">
+        <el-table-column label="操作" slot="options" align="center" fixed="right" width="120">
+          <template slot-scope="{ row }">
+            <div class="table-options">
+              <el-button type="text" @click="toDetail(row.id)">详情</el-button>
+              <el-button type="text" @click="deleteById(row.id)">删除</el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </ai-table>
+    </template>
+  </ai-list>
+</template>
+
+<script>
+  export default {
+    name: 'ApplyList',
+    label: '网格员管理',
+    props: {
+      instance: Function,
+      dict: Object,
+      permissions: Function,
+    },
+    data() {
+      return {
+        searchObj: {
+          name: "",
+          selectionDate: "",
+        },
+        page: {
+          current: 1,
+          size: 10,
+          total: 0,
+        },
+        goAdd: false,
+        tableData: [],
+        fileList: [],
+        ids: [],
+        detail: {},
+      };
+    },
+    created() {
+      this.dict.load("sex", "girdMemberType", "politicsStatus", "education");
+      this.getList();
+    },
+    computed: {
+      colConfigs() {
+        let _ = this;
+        return [
+          {
+            type: "selection",
+          },
+          {
+            prop: "name",
+            label: "网格员姓名",
+          },
+          {
+            prop: "girdName",
+            align: "left",
+            label: "责任网格",
+          },
+          {
+            prop: "phone",
+            align: "center",
+            label: "联系电话",
+          }
+        ];
+      },
+    },
+    methods: {
+      getList() {
+        this.instance
+          .post("/app/appgirdmemberapply/list", null, {
+            params: {
+              ...this.searchObj,
+              ...this.page,
+            },
+          })
+          .then((res) => {
+            if (res.code == 0) {
+              this.tableData = res.data.records;
+              this.page.total = res.data.total;
+            }
+          });
+      },
+      deleteById(ids) {
+        ids &&
+          this.$confirm("是否要删除该网格员？", {
+            type: "error",
+          })
+            .then(() => {
+              this.instance
+                .post("/app/appgirdmemberapply/delete", null, {
+                  params: { ids },
+                })
+                .then((res) => {
+                  if (res?.code == 0) {
+                    this.$message.success("删除成功!");
+                    this.getList();
+                  }
+                });
+            })
+            .catch(() => {});
+      },
+      add (id) {
+        this.$emit('change', {
+          type: 'ApplyAdd',
+          params: {
+            id: id || ''
+          }
+        })
+      },
+
+      toDetail (id) {
+        this.$emit('change', {
+          type: 'ApplyDetail',
+          params: {
+            id
+          }
+        })
+      },
+
+      handleSelectionChange(val) {
+        this.ids = [];
+        val.map((e) => {
+          this.ids.push(e.id);
+        });
+      },
+      resetSearch() {
+        Object.keys(this.searchObj).map((e) => {
+          this.searchObj[e] = "";
+        });
+        this.getList();
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+</style>

packages/2.0.5/AppGridMember/components/list.vue

@@ -1,8 +1,5 @@
 <template>
-  <ai-list class="list">
-    <template slot="title">
-      <ai-title title="网格员管理" :isShowBottomBorder="true"></ai-title>
-    </template>
+  <ai-list class="list" isTabs>
     <template slot="content">
       <ai-search-bar bottomBorder>
         <template slot="left">
@@ -56,7 +53,7 @@
           <template slot-scope="{ row }">
             <div class="table-options">
               <el-button type="text" @click="toFamily(row.id)">责任家庭</el-button>
-              <el-button type="text" @click="add(row.id)">查看</el-button>
+              <el-button type="text" @click="add(row.id)">详情</el-button>
               <el-button type="text" @click="deleteById(row.id)">删除</el-button>
             </div>
           </template>
@@ -68,7 +65,7 @@
 
 <script>
 export default {
-  name: "list",
+  name: "List",
   label: "网格员管理",
   props: {
     instance: Function,