补贴管理页面联调

ruoyi-ui/src/views/szxc/butie/index.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
+      <el-form-item label="补贴组织" prop="deptId">
+        <treeselect v-model="queryParams.deptId" :options="deptOptions" :disable-branch-nodes="true" style="width:215px;"
+                    placeholder="请选择补贴组织"/>
+      </el-form-item>
       <el-form-item label="补贴项目名称" prop="xmTitle">
         <el-input
           v-model="queryParams.xmTitle"
@@ -33,14 +37,6 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="补贴居民id" prop="jmId">
-        <el-input
-          v-model="queryParams.jmId"
-          placeholder="请输入补贴居民id"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
       <el-form-item label="补贴人" prop="name">
         <el-input
           v-model="queryParams.name"
@@ -49,38 +45,6 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="审核备注" prop="shRemark">
-        <el-input
-          v-model="queryParams.shRemark"
-          placeholder="请输入审核备注"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="部门id" prop="deptId">
-        <el-input
-          v-model="queryParams.deptId"
-          placeholder="请输入部门id"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="补贴组织" prop="deptName">
-        <el-input
-          v-model="queryParams.deptName"
-          placeholder="请输入补贴组织"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="创建者ID" prop="userId">
-        <el-input
-          v-model="queryParams.userId"
-          placeholder="请输入创建者ID"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
@@ -133,22 +97,23 @@
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="butieList" @selection-change="handleSelectionChange">
+    <el-table v-loading="loading" :data="list" @selection-change="handleSelectionChange" border>
-      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column type="selection" width="45" align="center" />
-      <el-table-column label="id" align="center" prop="id" />
+      <el-table-column label="ID" align="center" prop="id" />
       <el-table-column label="补贴类别" align="center" prop="type" />
       <el-table-column label="补贴项目名称" align="center" prop="xmTitle" />
       <el-table-column label="项目编号" align="center" prop="xmId" />
       <el-table-column label="年度" align="center" prop="year" />
       <el-table-column label="标准金额" align="center" prop="money" />
-      <el-table-column label="补贴居民id" align="center" prop="jmId" />
       <el-table-column label="补贴人" align="center" prop="name" />
-      <el-table-column label="内容描述" align="center" prop="content" />
+<!--      <el-table-column label="内容描述" align="center" prop="content" />-->
-      <el-table-column label="审核状态" align="center" prop="zfStatus" />
+      <el-table-column label="审核状态" align="center" prop="zfStatus" >
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.szxc_audit_status" :value="scope.row.zfStatus"/>
+        </template>
+      </el-table-column>
       <el-table-column label="审核备注" align="center" prop="shRemark" />
-      <el-table-column label="部门id" align="center" prop="deptId" />
       <el-table-column label="补贴组织" align="center" prop="deptName" />
-      <el-table-column label="创建者ID" align="center" prop="userId" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
           <el-button
@@ -168,7 +133,7 @@
         </template>
       </el-table-column>
     </el-table>
-    
+
     <pagination
       v-show="total>0"
       :total="total"
@@ -178,40 +143,38 @@
     />
 
     <!-- 添加或修改补贴管理对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
         <el-form-item label="补贴项目名称" prop="xmTitle">
           <el-input v-model="form.xmTitle" placeholder="请输入补贴项目名称" />
         </el-form-item>
         <el-form-item label="项目编号" prop="xmId">
           <el-input v-model="form.xmId" placeholder="请输入项目编号" />
         </el-form-item>
+
+        <el-form-item label="补贴居民" prop="name">
+          <el-input readonly
+                    placeholder="请选择补贴居民"
+                    v-model="form.name">
+            <el-button slot="append" icon="el-icon-search" @click="jminSelect"></el-button>
+          </el-input>
+        </el-form-item>
+
+        <el-form-item label="补贴组织" prop="deptName">
+          <el-input v-model="form.deptName" placeholder="请输入补贴组织" disabled/>
+        </el-form-item>
+
         <el-form-item label="年度" prop="year">
           <el-input v-model="form.year" placeholder="请输入年度" />
         </el-form-item>
         <el-form-item label="标准金额" prop="money">
           <el-input v-model="form.money" placeholder="请输入标准金额" />
         </el-form-item>
-        <el-form-item label="补贴居民id" prop="jmId">
-          <el-input v-model="form.jmId" placeholder="请输入补贴居民id" />
-        </el-form-item>
-        <el-form-item label="补贴人" prop="name">
-          <el-input v-model="form.name" placeholder="请输入补贴人" />
-        </el-form-item>
         <el-form-item label="内容描述">
-          <editor v-model="form.content" :min-height="192"/>
+          <editor v-model="form.content" :min-height="150"/>
         </el-form-item>
         <el-form-item label="审核备注" prop="shRemark">
-          <el-input v-model="form.shRemark" placeholder="请输入审核备注" />
+          <el-input v-model="form.shRemark" type="textarea" placeholder="请输入审核备注" />
-        </el-form-item>
-        <el-form-item label="部门id" prop="deptId">
-          <el-input v-model="form.deptId" placeholder="请输入部门id" />
-        </el-form-item>
-        <el-form-item label="补贴组织" prop="deptName">
-          <el-input v-model="form.deptName" placeholder="请输入补贴组织" />
-        </el-form-item>
-        <el-form-item label="创建者ID" prop="userId">
-          <el-input v-model="form.userId" placeholder="请输入创建者ID" />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -219,14 +182,66 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
+
+    <el-dialog title="选择居民" :visible.sync="jmin.visible" width="1000px" append-to-body>
+      <el-form :model="jmin.queryParams" ref="queryForm" size="small" :inline="true" label-width="70px">
+        <el-form-item label="身份证号" prop="cardId">
+          <el-input
+            v-model="jmin.queryParams.cardId"
+            placeholder="请输入身份证号"
+            clearable
+            @keyup.enter.native="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item label="姓名" prop="name">
+          <el-input
+            v-model="jmin.queryParams.name"
+            placeholder="请输入姓名"
+            clearable
+            @keyup.enter.native="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="el-icon-search" size="mini" @click="jminQuery">搜索</el-button>
+        </el-form-item>
+      </el-form>
+      <el-alert title="双击选择户主" type="warning" :closable="false"></el-alert>
+      <el-table v-loading="jmin.loading" :data="jmin.list" border @cell-dblclick="jminDblclick">
+        <el-table-column label="姓名" align="center" prop="name" min-width="80"/>
+        <el-table-column label="身份证号" align="center" prop="cardId" min-width="180"/>
+        <el-table-column label="所属网格" align="center" prop="deptName" min-width="100"/>
+        <el-table-column label="性别" align="center" prop="sex">
+          <template slot-scope="scope">
+            <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.sex"/>
+          </template>
+        </el-table-column>
+        <el-table-column label="籍贯" align="center" prop="jg" min-width="180"/>
+        <el-table-column label="手机号" align="center" prop="phone" min-width="120"/>
+        <el-table-column label="现居住地" align="center" prop="currentAddress" min-width="180"/>
+      </el-table>
+      <pagination
+        v-show="jmin.total>0"
+        :total="jmin.total"
+        :page.sync="jmin.queryParams.pageNum"
+        :limit.sync="jmin.queryParams.pageSize"
+        @pagination="getlistJminfo"
+      />
+    </el-dialog>
+
   </div>
 </template>
 
 <script>
 import { listButie, getButie, delButie, addButie, updateButie } from "@/api/szxc/butie";
+import { listJminfo } from "@/api/szxc/jminfo";
+import { deptTreeSelect } from "@/api/system/user";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 
 export default {
   name: "Butie",
+  components: { Treeselect },
+  dicts: ['szxc_yes_no', 'szxc_audit_status'],
   data() {
     return {
       // 遮罩层
@@ -242,7 +257,9 @@ export default {
       // 总条数
       total: 0,
       // 补贴管理表格数据
-      butieList: [],
+      list: [],
+      // 组织树选项
+      deptOptions: undefined,
       // 弹出层标题
       title: "",
       // 是否显示弹出层
@@ -269,18 +286,43 @@ export default {
       form: {},
       // 表单校验
       rules: {
-      }
+      },
+      // 居民信息
+      jmin: {
+        visible: false,
+        // 遮罩层
+        loading: false,
+        // 总条数
+        total: 0,
+        // 查询参数
+        queryParams:{
+          pageNum: 1,
+          pageSize: 10,
+          off: '0',
+          cardId: '',
+          name: ''
+        },
+        // 查询列表
+        list: []
+      },
     };
   },
   created() {
     this.getList();
+    this.getDeptTree();
   },
   methods: {
+    /** 查询组织下拉树结构 */
+    getDeptTree() {
+      deptTreeSelect().then(response => {
+        this.deptOptions = response.data;
+      });
+    },
     /** 查询补贴管理列表 */
     getList() {
       this.loading = true;
       listButie(this.queryParams).then(response => {
-        this.butieList = response.rows;
+        this.list = response.rows;
         this.total = response.total;
         this.loading = false;
       });
@@ -357,6 +399,7 @@ export default {
               this.getList();
             });
           } else {
+            this.form.zfStatus = '0'
             addButie(this.form).then(response => {
               this.$modal.msgSuccess("新增成功");
               this.open = false;
@@ -381,7 +424,34 @@ export default {
       this.download('szxc/butie/export', {
         ...this.queryParams
       }, `butie_${new Date().getTime()}.xlsx`)
-    }
+    },
+    /** 查询居民信息列表 */
+    getlistJminfo() {
+      this.jmin.loading = true;
+      listJminfo(this.jmin.queryParams).then(response => {
+        this.jmin.list = response.rows;
+        this.jmin.total = response.total;
+        this.jmin.loading = false;
+      });
+    },
+    // 点击选择居民
+    jminSelect(){
+      this.jmin.visible = true;
+      this.getlistJminfo()
+    },
+    // 居民查询
+    jminQuery(){
+      this.jmin.queryParams.pageNum = 1;
+      this.getlistJminfo();
+    },
+    // 居民选择 选中数据
+    jminDblclick(row) {
+      this.form.jmId = row.id;
+      this.form.name = row.name;
+      this.form.deptId = row.deptId;
+      this.form.deptName = row.deptName;
+      this.jmin.visible = false
+    },
   }
 };
 </script>