From 4ed01c60b810e3e0a0a2c72a6de1fcefeb6e3d89 Mon Sep 17 00:00:00 2001
From: wxz <wxz@test.com>
Date: Mon, 24 Jul 2023 10:06:51 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E5=85=9A=E5=91=98=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E3=80=91=E5=AE=8C=E6=88=90=E7=BC=B4=E8=B4=B9=E8=AE=B0=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../communityParty/members/memberList.vue     |  18 +-
 .../communityParty/members/payRecord.vue      | 361 ++++++++++++++++++
 2 files changed, 376 insertions(+), 3 deletions(-)
 create mode 100644 src/views/modules/communityParty/members/payRecord.vue

diff --git a/src/views/modules/communityParty/members/memberList.vue b/src/views/modules/communityParty/members/memberList.vue
index ac418a9dd..44c08397a 100644
--- a/src/views/modules/communityParty/members/memberList.vue
+++ b/src/views/modules/communityParty/members/memberList.vue
@@ -182,7 +182,7 @@
 
           <el-table-column
               label="操作"
-              width="180">
+              width="240">
             <template slot-scope="scope">
               <el-button type="text"
                          @click="handleDetailBtnClick(scope.row)"
@@ -196,6 +196,10 @@
                          @click="handleDeleteSingleBtnClick(scope.row)"
                          size="small"
                          class="div-table-button--detail">删除</el-button>
+              <el-button type="text"
+                         @click="handlePayRecordBtnClick(scope.row)"
+                         size="small"
+                         class="div-table-button--detail">缴费记录</el-button>
             </template>
           </el-table-column>
         </el-table>
@@ -217,6 +221,7 @@
     <Create ref="create" @finishUpdate="search"></Create>
     <Detail ref="detail" @finishUpdate="search"></Detail>
     <Update ref="update" @finishUpdate="search"></Update>
+    <PayRecord ref="payRecord" ></PayRecord>
   </div>
 </template>
 <script>
@@ -226,13 +231,13 @@ import { Loading } from 'element-ui';
 import Create from './create'
 import Detail from './detail'
 import Update from './update'
-// import Update from '@/views/modules/communityParty/members/update.vue'
+import PayRecord from './payRecord'
 import SelectPrincipal from '@/views/modules/communityParty/partyOrg/select_principal.vue'
 import { requestGet, requestPost } from '@/js/dai/request'
 import { EpmetResultResolver } from '@/js/epmet-result-resolver'
 
 export default {
-  components: { Create, Detail, Update },
+  components: { Create, Detail, Update, PayRecord },
   mounted () {
     this.epmetResultResolver = new EpmetResultResolver(this)
     // 备份一下dataForm
@@ -573,6 +578,13 @@ export default {
       this.searchForm = this.searchFormClear;
     },
 
+    /**
+     * 缴费记录
+     */
+    handlePayRecordBtnClick(row) {
+      this.$refs.payRecord.init(row.id, row.partyOrgName, row.name, row.mobile, row.idCard);
+    },
+
     /** ● ========================方法======================== **/
     
     
diff --git a/src/views/modules/communityParty/members/payRecord.vue b/src/views/modules/communityParty/members/payRecord.vue
new file mode 100644
index 000000000..3bde862e3
--- /dev/null
+++ b/src/views/modules/communityParty/members/payRecord.vue
@@ -0,0 +1,361 @@
+<template>
+  <el-dialog :visible="dlgVisible" v-if="dlgVisible" @close="handleDlgClose" :title="'缴费记录'">
+    <el-form>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="所属党组织">
+            <el-input disabled v-model="partyOrgName" style="width: 240px"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="党员姓名">
+            <el-input disabled v-model="partyMemberName" style="width: 240px"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="联系电话">
+            <el-input disabled v-model="mobile" style="width: 240px"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="证件号">
+            <el-input disabled v-model="idCard" style="width: 240px"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <div style="padding-right: 20px;">
+      <div class="mt10">
+        <el-button size="small"
+                   class="diy-button--add"
+                   @click="handleAdd">新增
+        </el-button>
+      </div>
+      <el-table :data="tableData"
+                row-key="id"
+                border
+                style="width: 100%"
+                class="resi-table"
+                height="400px"
+                :header-cell-style="getRowClass">
+        <el-table-column label="序号"
+                         type="index"
+                         align="center"
+                         width="50">
+        </el-table-column>
+        <el-table-column prop="name"
+                         label="缴费日期"
+                         align="center"
+                         width="250px">
+          <template slot-scope="scope">
+            <el-date-picker v-if="scope.row.isEdit"
+                            v-model="scope.row.payDate"
+                            type="date"
+                            value-format="yyyy-MM-dd"
+                            placeholder="选择日期">
+            </el-date-picker>
+            <div v-else
+                 class="div-content">{{ scope.row.payDate }}
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="name"
+                         label="缴费金额"
+                         align="center"
+                         width="180px">
+          <template slot-scope="scope">
+            <el-input v-if="scope.row.isEdit"
+                      type="number"
+                      v-model="scope.row.money"
+                      placeholder="请输入"
+                      class="input-width"
+                      clearable></el-input>
+            <div v-else
+                 class="div-content">{{ scope.row.money }}
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="name"
+                         label="缴费年度"
+                         align="center"
+                         min-width="250px">
+          <template slot-scope="scope">
+            <el-date-picker v-if="scope.row.isEdit"
+                            v-model="scope.row.timeRange"
+                            type="monthrange"
+                            value-format="yyyy-MM"
+                            range-separator="至"
+                            start-placeholder="开始日期"
+                            end-placeholder="结束日期"
+                            @change="handleTimeChangePay($event, scope.row)">
+            </el-date-picker>
+            <div v-else
+                 class="div-content">{{ scope.row.startDate + ' - ' + scope.row.endDate }}
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column
+            label="操作"
+            align="center"
+            width="120">
+          <template slot-scope="scope">
+            <template v-if="scope.row.isEdit">
+              <el-button @click="handleEdit(scope.row)"
+                         type="text"
+                         size="small"
+                         class="btn-color-edit">保存
+              </el-button>
+              <el-button @click="handleChange(scope.row, 'cancle')"
+                         type="text"
+                         size="small"
+                         class="btn-color-edit">取消
+              </el-button>
+            </template>
+            <template v-else>
+              <el-button @click="handleChange(scope.row, 'edit')"
+                         type="text"
+                         size="small"
+                         class="btn-color-edit">修改
+              </el-button>
+              <el-popconfirm title="删除之后无法恢复，确认删除？"
+                             @onConfirm="del(scope.row)">
+                <el-button slot="reference"
+                           type="text"
+                           size="small"
+                           class="btn-color-del"
+                           style="margin-left: 10px;">删除
+                </el-button>
+              </el-popconfirm>
+            </template>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  // props: {
+  //   partyId: {
+  //     type: String,
+  //     default: ''
+  //   },
+  //   disabled: {
+  //     type: Boolean,
+  //     default: false
+  //   }
+  // },
+  data () {
+    return {
+      partyOrgName: null,// 党组织名称
+      partyMemberName: null,// 党员姓名
+      mobile: null,// 手机号
+      idCard: null,// 证件号
+      partyId: null,// 党员id
+      dlgVisible: false,//是否显示对话框 
+      btnDisabled: false,
+      btnType: 'cancle',
+      isEdit: false,
+      tableData: [],
+      tempRow: {}
+    }
+  },
+  watch: {
+    partyId: {
+      handler (val) {
+        console.log('val------points', val)
+        if (val.length > 0) {
+          this.btnDisabled = false
+          this.getList()
+        } else {
+          this.btnDisabled = true
+        }
+
+      },
+      immediate: true
+    }
+  },
+  created () {
+    // if (this.partyId) this.getList()
+  },
+  methods: {
+    /**
+     * 初始化
+     */
+    init (partyId, partyOrgName, partyMemberName, mobile, idCard) {
+      this.dlgVisible = true
+      this.partyId = partyId
+      this.partyOrgName = partyOrgName
+      this.partyMemberName = partyMemberName
+      this.mobile = mobile
+      this.idCard = idCard
+    },
+    getRowClass ({ rowIndex, columnIndex }) {
+      if (rowIndex === 0) {
+        return 'background: #2195fe; color: #fff;'
+      }
+    },
+    handleChange (row, type) {
+      console.log('type----', type)
+      if (type == 'cancle') {
+
+        row = { ...this.tempRow }
+        row.isEdit = false
+        row.timeRange = []
+        if (this.btnType == 'add') this.tableData.pop()
+        this.getList()
+        console.log('row----', row)
+      } else {
+        this.tempRow = { ...row }
+        row.isEdit = true
+        row.timeRange = [row.startDate, row.endDate]
+      }
+      this.btnType = type
+      this.isEdit = !this.isEdit
+
+    },
+    handleTimeChangePay (val, row) {
+      console.log('vall', val)
+      console.log('varowll', row)
+      if (val != null && val.length > 0) {
+        row.startDate = val[0]
+        row.endDate = val[1]
+      } else {
+        row.startDate = ''
+        row.endDate = ''
+        row.timeRange = []
+      }
+    },
+    async handleEdit (row) {
+      if (this.btnType == 'add') {
+        this.save(row)
+      } else {
+        this.edit(row)
+      }
+    },
+    handleAdd () {
+      this.btnType = 'add'
+      this.isEdit = true
+      const item = {
+        isEdit: true,
+        partyMemberId: this.partyId,
+        payDate: '',
+        money: '',
+        startDate: '',
+        endDate: '',
+        timeRange: ''
+      }
+      this.tableData.push(item)
+    },
+    async save (row) {
+      const params = {
+        partyMemberId: this.partyId,
+        payDate: row.payDate,
+        money: row.money,
+        startDate: row.startDate,
+        endDate: row.endDate,
+      }
+      await this.$http
+          .post('/actual/base/party/member/payRecord/save', params)
+          .then(({ data: res }) => {
+            if (res.code !== 0) {
+              return this.$message.error(res.msg)
+            } else {
+              this.$message.success('保存成功')
+              row.isEdit = false
+              this.isEdit = false
+              this.btnType = 'cancle'
+              this.getList()
+            }
+          })
+          .catch(err => {
+            console.log('err', err)
+            return this.$message.error('网络错误')
+          })
+    },
+    async edit (row) {
+      const params = {
+        ...row
+      }
+      await this.$http
+          .post('/actual/base/party/member/payRecord/update', params)
+          .then(({ data: res }) => {
+            if (res.code !== 0) {
+              return this.$message.error(res.msg)
+            } else {
+              this.$message.success('保存成功')
+              row.isEdit = false
+              this.isEdit = false
+              this.getList()
+            }
+          })
+          .catch(err => {
+            console.log('err', err)
+            return this.$message.error('网络错误')
+          })
+    },
+    async del (row) {
+      const params = {
+        ...row
+      }
+      await this.$http
+          .post('/actual/base/party/member/payRecord/delete', [row.id])
+          .then(({ data: res }) => {
+            if (res.code !== 0) {
+              return this.$message.error(res.msg)
+            } else {
+              this.$message.success('删除成功')
+              this.getList()
+            }
+          })
+          .catch(err => {
+            console.log('err', err)
+            return this.$message.error('网络错误')
+          })
+    },
+    async getList () {
+      const params = {
+        page: 1,
+        limit: 9999,
+        partyMemberId: this.partyId
+
+      }
+      await this.$http
+          .get('/actual/base/party/member/payRecord/page', { params: params, })
+          .then(({ data: res }) => {
+            if (res.code !== 0) {
+              return this.$message.error(res.msg)
+            } else {
+              this.tableData = res.data.list.map(item => {
+                return {
+                  ...item,
+                  isEdit: false,
+                  timeRange: []
+                }
+              })
+            }
+          })
+          .catch(err => {
+            console.log('err', err)
+            return this.$message.error('网络错误')
+          })
+    },
+
+    /**
+     * 关闭对话框
+     */
+    handleDlgClose () {
+      this.dlgVisible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.mt10 {
+  margin-bottom: 10px;
+}
+</style>