feat(绑定账户):绑定账户

src/api/monitorManage/bindAccount.js

@@ -0,0 +1,55 @@
+import request from '@/utils/request'
+
+// 获取列表
+export function getList(data) {
+  return request({
+    url: '/accountMonitor/list',
+    method: 'post',
+    data
+  })
+}
+
+// 刷新账户绑定状态
+export function refreshStatus(data) {
+  return request({
+    url: '/accountMonitor/refreshStatus',
+    method: 'post',
+    data
+  })
+}
+
+// 刷新账户绑定状态
+export function updateStatus(data) {
+  return request({
+    url: '/accountMonitor/updateStatus',
+    method: 'post',
+    data
+  })
+}
+
+// 换绑账号接口
+export function changeAccount(data) {
+  return request({
+    url: '/accountMonitor/changeAccount',
+    method: 'post',
+    data
+  })
+}
+
+// 获取可用的登记簿账号
+export function getAccountList(data) {
+  return request({
+    url: '/accountMonitor/accountList',
+    method: 'post',
+    data
+  })
+}
+
+// 获取可用的登记簿账号
+export function getStatusLogList(data) {
+  return request({
+    url: '/accountMonitor/statusLogList',
+    method: 'post',
+    data
+  })
+}

src/router/moudules/monitorManage.js

@@ -5,7 +5,7 @@ import Layout from '@/layout'
 export default {
   path: '/monitorManage',
   component: Layout,
-  redirect: '/eSign',
+  redirect: '/monitorBindAccount',
   name: 'MonitorManage',
   alwaysShow: true,
   meta: {
@@ -18,7 +18,16 @@ export default {
       name: 'MonitorBindAccount',
       component: () => import('@/views/monitorManage/bindAccount/index.vue'),
       meta: { title: '绑定账号监测' },
-      hidden: false
+      hidden: false,
+      children: [
+        {
+          path: '/monitorBindAccount/record/:id',
+          name: 'MonitorBindAccountRecord',
+          component: () => import('@/views/monitorManage/bindAccount/record.vue'),
+          meta: { title: '状态更新记录' },
+          hidden: true
+        }
+      ]
     },
     {
       path: '/blacklist',

src/store/modules/constant.js

@@ -42,7 +42,8 @@ export default {
       capitalStatus: [], // 资方管理 - 资方状态
       payCollectionMethod: [], // 资方管理 - 回款方式
       payBackMethod: [], // 资方管理 - 还款方式
-      CreditStatus: [] // 资方管理 - 授信状态
+      CreditStatus: [], // 资方管理 - 授信状态
+      accountBindingStatus: [] //  监测管理 - 账户绑定状态
     }
   },
   mutations: {

src/styles/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4737986 */
-  src: url('//at.alicdn.com/t/c/font_4737986_u7jpat1l7jd.woff2?t=1730962132287') format('woff2'),
-       url('//at.alicdn.com/t/c/font_4737986_u7jpat1l7jd.woff?t=1730962132287') format('woff'),
-       url('//at.alicdn.com/t/c/font_4737986_u7jpat1l7jd.ttf?t=1730962132287') format('truetype');
+  src: url('//at.alicdn.com/t/c/font_4737986_mu5ytwd6ua9.woff2?t=1731032180433') format('woff2'),
+       url('//at.alicdn.com/t/c/font_4737986_mu5ytwd6ua9.woff?t=1731032180433') format('woff'),
+       url('//at.alicdn.com/t/c/font_4737986_mu5ytwd6ua9.ttf?t=1731032180433') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-yichuheimingdan:before {
+  content: "\e607";
+}
+
 .icon-huanbang:before {
   content: "\e603";
 }

src/styles/search.scss

@@ -9,7 +9,7 @@
       margin-left: 10px;
       margin-bottom: 15px;
       .el-select, .el-input {
-        width: 140px;
+        min-width: 140px;
       }
     }
   }

src/views/monitorManage/bindAccount/mainContent.vue

@@ -1,149 +1,169 @@
 <template>
   <div class="bindAccount">
-    <div class="search">
-      <div class="left"></div>
-      <div class="right">
-        <div>
-          <el-input
-            v-model="search.keyword"
-            style="width: 250px"
-            placeholder="请输入店铺ID/店铺名称"
-            clearable
-          />
-        </div>
-        <div>
-          <el-select
-            v-model="search.capitalStatus"
-            placeholder="请选择平台"
-            clearable
-            style="width: 100%"
-          >
-            <el-option
-              v-for="item in constant.capitalStatus"
-              :key="item.code"
-              :label="item.name"
-              :value="item.code"
+
+    <el-tabs v-model="activeName" type="border-card" @tab-click="handleTabClick">
+      <el-tab-pane label="待处理" name="pending"> </el-tab-pane>
+      <el-tab-pane label="全部" name="all"></el-tab-pane>
+      <div class="search">
+        <div class="left"></div>
+        <div class="right">
+          <div>
+            <el-input
+              v-model="search.shopName"
+              style="width: 250px"
+              placeholder="请输入店铺ID/店铺名称"
+              clearable
+            />
+          </div>
+          <div v-if="activeName === 'pending'">
+            <el-input
+              v-model="search.accountName"
+              style="width: 250px"
+              placeholder="请输入绑定账户名称/绑定账户账号"
+              clearable
+            />
+          </div>
+          <div>
+            <el-select
+              v-model="search.platformCode"
+              placeholder="请选择平台"
+              clearable
             >
-            </el-option>
-          </el-select>
-        </div>
-        <div>
-          <el-select
-            v-model="search.capitalStatus"
-            placeholder="请选择账号绑定状态"
-            clearable
-            style="width: 100%"
-          >
-            <el-option
-              v-for="item in constant.capitalStatus"
-              :key="item.code"
-              :label="item.name"
-              :value="item.code"
+              <el-option
+                v-for="item in constant.platformType"
+                :key="item.code"
+                :label="item.name"
+                :value="item.code"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div v-if="activeName === 'all'">
+            <el-select
+              v-model="search.accountStatus"
+              placeholder="请选择账号绑定状态"
+              clearable
+              style="width: 200px"
             >
-            </el-option>
-          </el-select>
-        </div>
-        <div class="leftBtn">
-          <el-button type="primary" @click="fetchData">查询</el-button>
+              <el-option
+                v-for="item in constant.accountBindingStatus"
+                :key="item.code"
+                :label="item.name"
+                :value="item.code"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div class="leftBtn">
+            <el-button type="primary" @click="fetchData">查询</el-button>
+          </div>
         </div>
       </div>
-    </div>
-    <cy-comm-table
-      ref="commTable"
-      v-loading="loading"
-      parent-component="CapitalManage"
-      :columns="columns"
-      :data="tableData"
-      :count="total"
-      :table-options="{
-        maxHeight: 'calc(100vh - 410px)',
-        height: 'calc(100vh - 410px)'
-      }"
-    />
-    <cy-dialog ref="editStatus" title="修正账户绑定状态" width="800px">
-      <el-form
-        ref="editRuleForm"
-        :model="editRuleForm"
-        :rules="editRules"
-        label-position="top"
-        label-width="150px"
-        class="rule-form-orange"
-      >
-        <el-form-item label="账户绑定状态" prop="payBackMethod" style="width: 100%">
-          <el-select
-            v-model="editRuleForm.payBackMethod"
-            placeholder="请选择账户绑定状态"
-            clearable
-            style="width: 100%"
-            :disabled="disabled"
-          >
-            <el-option
-              v-for="item in constant.payBackMethod"
-              :key="item.code"
-              :label="item.name"
-              :value="item.code"
+      <cy-comm-table
+        ref="commTable"
+        v-loading="loading"
+        parent-component="MonitorBindAccount"
+        :columns="columns"
+        :data="tableData"
+        :count="total"
+        :table-options="{
+          maxHeight: 'calc(100vh - 410px)',
+          height: 'calc(100vh - 410px)'
+        }"
+      />
+      <cy-dialog ref="editStatus" title="修正账户绑定状态" width="800px">
+        <el-form
+          ref="editRuleForm"
+          :model="editRuleForm"
+          :rules="editRules"
+          label-position="top"
+          label-width="150px"
+          class="rule-form-orange"
+        >
+          <el-form-item label="账户绑定状态" prop="accountStatus" style="width: 100%">
+            <el-select
+              v-model="editRuleForm.accountStatus"
+              placeholder="请选择账户绑定状态"
+              clearable
+              style="width: 100%"
             >
-            </el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="备注" prop="donorAccountName" style="width: 100%">
-          <el-input v-model="editRuleForm.donorAccountName" placeholder="请输入备注" />
-        </el-form-item>
-
-      </el-form>
-      <div class="submit-btn">
-        <el-button @click="$refs.editStatus.show = false">关闭</el-button>
-        <el-button type="primary" @click="submit('submit')">确定</el-button>
-      </div>
-    </cy-dialog>
-    <cy-dialog ref="changeBind" title="换绑账号" width="800px">
-      <el-form
-        ref="changeRuleForm"
-        :model="changeRuleForm"
-        :rules="changeRules"
-        label-position="top"
-        label-width="150px"
-        class="rule-form-orange"
-      >
-        <el-form-item label="换绑账号" prop="payBackMethod" style="width: 100%">
-          <el-select
-            v-model="editRuleForm.payBackMethod"
-            placeholder="请选择换绑账号"
-            clearable
-            style="width: 100%"
-            :disabled="disabled"
-          >
-            <el-option
-              v-for="item in constant.payBackMethod"
-              :key="item.code"
-              :label="item.name"
-              :value="item.code"
+              <el-option
+                v-for="item in editAccountStatus"
+                :key="item.code"
+                :label="item.name"
+                :value="item.code"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="备注" prop="triggerReason" style="width: 100%">
+            <el-input v-model="editRuleForm.triggerReason" placeholder="请输入备注" />
+          </el-form-item>
+        </el-form>
+        <div class="submit-btn">
+          <el-button @click="$refs.editStatus.show = false">关闭</el-button>
+          <el-button type="primary" @click="editSubmit">确定</el-button>
+        </div>
+      </cy-dialog>
+      <cy-dialog ref="changeBind" title="换绑账号" width="800px">
+        <el-form
+          ref="changeRuleForm"
+          :model="changeRuleForm"
+          :rules="changeRules"
+          label-position="top"
+          label-width="150px"
+          class="rule-form-orange"
+        >
+          <el-form-item label="换绑账号" prop="accountNumber" style="width: 100%">
+            <el-select
+              v-model="changeRuleForm.accountNumber"
+              placeholder="请选择换绑账号"
+              clearable
+              style="width: 100%"
+              @change="accountNameChange"
             >
-            </el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="换绑账户名称" prop="donorAccountName" style="width: 100%">
-          <el-input v-model="editRuleForm.donorAccountName" placeholder="请输入换绑账户名称" />
-        </el-form-item>
+              <el-option
+                v-for="item in accountList"
+                :key="item.accountNumber"
+                :label="item.accountNumber"
+                :value="item.accountNumber"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="换绑账户名称" prop="accountName" style="width: 100%">
+            <el-input v-model="changeRuleForm.accountName" disabled placeholder="请输入换绑账户名称" />
+          </el-form-item>
 
-      </el-form>
-      <div class="submit-btn">
-        <el-button @click="$refs.changeBind.show = false">关闭</el-button>
-        <el-button type="primary" @click="submit('submit')">确定</el-button>
-      </div>
-    </cy-dialog>
+        </el-form>
+        <div class="submit-btn">
+          <el-button @click="$refs.changeBind.show = false">关闭</el-button>
+          <el-button type="primary" @click="changeSubmit">确定</el-button>
+        </div>
+      </cy-dialog>
+    </el-tabs>
   </div>
 
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
+import { getList, refreshStatus, changeAccount, getAccountList, updateStatus } from '@/api/monitorManage/bindAccount'
+import { filterListData } from '@/utils'
 export default {
+  name: 'MonitorBindAccount',
   data() {
     return {
-      search: {},
+      search: {
+        shopName: '',
+        accountStatus: '',
+        accountName: '',
+        platformCode: ''
+      },
       total: 0,
-      tableData: [{ capitalName: '11111' }],
+      page: 1,
+      size: 10,
+      tableData: [],
       columns: [
         {
           label: '序号',
@@ -151,47 +171,42 @@ export default {
         },
         {
           label: '平台',
-          prop: 'creditNo',
+          prop: 'platformName',
           showTooltip: true
         },
         {
           label: '店铺ID',
-          prop: 'capitalName',
+          prop: 'shopId',
           showTooltip: true
         },
         {
           label: '店铺名称',
-          prop: 'capitalName',
+          prop: 'shopName',
           showTooltip: true
         },
         {
           label: '绑定账户名称',
-          prop: 'capitalName',
+          prop: 'accountName',
           showTooltip: true
         },
         {
           label: '绑定账户账号',
-          prop: 'capitalName',
+          prop: 'accountNumber',
           showTooltip: true
         },
         {
           label: '账户绑定状态',
-          prop: 'capitalName',
-          showTooltip: true
-        },
-        {
-          label: '修正原因',
-          prop: 'capitalName',
+          prop: 'accountStatusName',
           showTooltip: true
         },
         {
-          label: '操作人',
-          prop: 'capitalName',
+          label: '触发原因',
+          prop: 'triggerReason',
           showTooltip: true
         },
         {
-          label: '操作时间',
-          prop: 'capitalName',
+          label: '更新时间',
+          prop: 'gmtModified',
           showTooltip: true
         },
         {
@@ -201,40 +216,47 @@ export default {
               {
                 msg: '刷新账户绑定状态 ',
                 icon: 'iconfont icon-shuaxin',
-                power: '',
-                tabPower: [],
+                power: 'reflushAccountStatus',
+                tabPower: ['pending', 'all'],
                 rowPower: [],
                 category: 'updateBind'
               },
               {
                 msg: '换绑',
                 icon: 'iconfont icon-huanbang',
-                power: '',
-                tabPower: [],
-                rowPower: [],
+                power: 'changeBinding',
+                tabPower: ['pending', 'all'],
+                rowPower: ['account_risk'],
                 category: 'changeBind'
               },
-              {
-                msg: '解绑',
-                icon: 'iconfont icon-jiebang',
-                power: '',
-                tabPower: [],
-                rowPower: [],
-                category: 'unbind'
-              },
+              // {
+              //   msg: '解绑',
+              //   icon: 'iconfont icon-jiebang',
+              //   power: '',
+              //   tabPower: [],
+              //   rowPower: [],
+              //   category: 'unbind'
+              // },
               {
                 msg: '修正绑定状态',
                 icon: 'iconfont icon-xiugai',
-                power: '',
-                tabPower: [],
+                power: 'updateAccountStatus',
+                tabPower: ['pending', 'all'],
                 rowPower: [],
                 category: 'editStatus'
+              },
+              {
+                msg: '状态更新日志',
+                icon: 'iconfont icon-xiangqing',
+                power: 'updateStatusLog',
+                tabPower: ['all'],
+                rowPower: [],
+                category: 'statusUpdate'
               }
             ]
             const options = btnList.map(item => {
-              //  this.tablePower({ item, tab: this.activeName, row }) &&
               return (
-                <el-tooltip class='item' effect='dark' content={item.msg} placement='top'>
+                this.tablePower({ item, tab: this.activeName, row }) && <el-tooltip class='item' effect='dark' content={item.msg} placement='top'>
                   <span class='table-icon-box' v-power={item.power}>
                     <i class={item.icon} onClick={() => { this.handlerOperate(item.category, row) }}></i>
                   </span>
@@ -246,20 +268,38 @@ export default {
           width: 160
         }
       ],
-      editRuleForm: {},
-      editRules: {},
-      changeRuleForm: {},
-      changeRules: {}
+      editRuleForm: {
+        id: '',
+        accountStatus: ''
+      },
+      editRules: {
+        accountStatus: [{ required: true, message: '请选择账户绑定状态', trigger: 'cahnge' }],
+        triggerReason: [{ required: true, message: '请输入触发原因', trigger: 'cahnge' }]
+      },
+      changeRuleForm: {
+        id: '',
+        accountName: '',
+        accountNumber: ''
+      },
+      changeRules: {
+        accountNumber: [{ required: true, message: '请选择换绑账号', trigger: 'cahnge' }]
+      },
+      activeName: 'pending',
+      accountList: []
     }
   },
   computed: {
     ...mapGetters(['constant']),
     tablePower() {
       return ({ item, tab, row }) => {
-        const { tabPower, rowPower } = item
+        const { tabPower, rowPower, category } = item
         if (rowPower && rowPower.length) {
-          if (tabPower.includes(tab) && rowPower.includes(row.capitalStatus)) {
-            return true
+          if (category === 'changeBind') {
+            return row.accountStatus === 'account_risk'
+          } else {
+            if (tabPower.includes(tab) && rowPower.includes(row.capitalStatus)) {
+              return true
+            }
           }
         } else {
           if (tabPower.includes(tab)) {
@@ -267,18 +307,60 @@ export default {
           }
         }
       }
+    },
+    editAccountStatus() {
+      return filterListData(this.constant.accountBindingStatus, ['account_empty', 'account_risk'])
     }
   },
   created() {
-    this.$store.dispatch('getConstant', ['capitalStatus'])
+    this.$store.dispatch('getConstant', ['platformType', 'accountBindingStatus'])
+    this.fetchData()
   },
   methods: {
+    fetchData(type) {
+      this.loading = true
+      if (type === 'search') {
+        this.page = 1
+        this.size = 10
+        this.$refs.commTable.initPage()
+      }
+      const params = {
+        ...this.search,
+        page: this.page || 1,
+        rows: this.size || 10,
+        flag: this.activeName
+      }
+      getList(params).then(({ rows, records }) => {
+        this.tableData = rows
+        this.total = records
+        this.loading = false
+      })
+    },
+    handleTabClick(tab) {
+      this.activeName = tab.name
+      this.page = 1
+      this.size = 10
+      this.fetchData()
+    },
     handlerOperate(type, row) {
-      if (type === 'editStatus' || type === 'changeBind') {
+      if (type === 'updateBind') {
+        this.refreshStatusClick(row.id)
+      } else if (type === 'editStatus') {
         this.$refs[type].show = true
-      }
-      if (type === 'unbind') {
+        this.editRuleForm.id = row.id
+      } else if (type === 'changeBind') {
+        this.$refs[type].show = true
+        this.changeRuleForm.id = row.id
+        this.changeRuleForm.accountName = ''
+        this.changeRuleForm.accountNumber = ''
+        this.getAccountListData(row)
+      } else if (type === 'unbind') {
         this.unBind()
+      } else if (type === 'statusUpdate') {
+        this.$router.push({
+          name: 'MonitorBindAccountRecord',
+          params: { id: row.id }
+        })
       }
     },
     unBind() {
@@ -288,7 +370,63 @@ export default {
       }).then(() => {
 
       })
+    },
+    refreshStatusClick(id) {
+      refreshStatus({ id }).then(() => {
+        this.$message.success('刷新成功')
+        this.fetchData()
+      })
+    },
+    getAccountListData(row) {
+      const { platformCode, shopId } = row
+      const params = {
+        platformCode,
+        shopId
+      }
+      getAccountList(params).then(({ data }) => {
+        this.accountList = data
+      })
+    },
+    accountNameChange(val) {
+      this.changeRuleForm.accountName = this.accountList.find(item => item.accountNumber === val).accountName
+    },
+    editSubmit() {
+      this.$refs.editRuleForm.validate((valid) => {
+        if (valid) {
+          const params = {
+            ...this.editRuleForm
+          }
+          updateStatus(params).then(() => {
+            this.$message.success('修改成功')
+            this.$refs.editRuleForm.resetFields()
+            this.$refs.editRuleForm.clearValidate()
+            this.$refs.editRuleForm.resetFields()
+            this.$refs.editStatus.show = false
+            this.fetchData()
+          })
+        } else {
+          return false
+        }
+      })
+    },
+    changeSubmit() {
+      this.$refs.changeRuleForm.validate((valid) => {
+        if (valid) {
+          const params = {
+            ...this.changeRuleForm
+          }
+          changeAccount(params).then(() => {
+            this.$message.success('换绑成功')
+            this.$refs.changeRuleForm.resetFields()
+            this.$refs.changeBind.show = false
+            this.fetchData()
+          })
+        } else {
+          return false
+        }
+      })
     }
+
   }
 }
 </script>

src/views/monitorManage/bindAccount/record.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="record-box">
+    <cy-comm-table
+      ref="commTable"
+      v-loading="loading"
+      :columns="columns"
+      :data="tableData"
+      :count="0"
+    />
+  </div>
+</template>
+
+<script>
+import { getStatusLogList } from '@/api/monitorManage/bindAccount'
+export default {
+  data() {
+    return {
+      tableData: [],
+      columns: [
+        {
+          label: '序号',
+          index: true
+        },
+        {
+          label: '店铺名称',
+          prop: 'shopName',
+          showTooltip: true
+        },
+        {
+          label: '绑定账户名称',
+          prop: 'accountName',
+          showTooltip: true
+        },
+        {
+          label: '绑定账户账号',
+          prop: 'accountNumber',
+          showTooltip: true
+        },
+        {
+          label: '账户绑定状态',
+          prop: 'accountStatusName',
+          showTooltip: true
+        },
+
+        {
+          label: '触发原因/备注',
+          prop: 'correctionReason',
+          showTooltip: true
+        },
+        {
+          label: '操作人',
+          prop: 'userCreateName',
+          showTooltip: true
+        },
+        {
+          label: '更新时间',
+          prop: 'gmtModified',
+          showTooltip: true
+        }
+      ]
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      getStatusLogList({ id: this.$route.params.id }).then(({ data }) => {
+        this.tableData = data
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/monitorManage/blacklist/mainContent.vue

@@ -1,12 +1,298 @@
 <template>
-  <div>
-    31231231
+  <div class="black-list-content">
+    <el-tabs v-model="activeName" type="border-card" @tab-click="handleTabClick">
+      <el-tab-pane label="黑名单" name="black"> </el-tab-pane>
+      <el-tab-pane label="全部" name="all"></el-tab-pane>
+      <div class="search">
+        <div class="left"></div>
+        <div class="right">
+          <div>
+            <el-input v-model="search.keyword" style="width: 250px" placeholder="请输入监测对象/监测对象证件号" clearable />
+          </div>
+          <div>
+            <el-select
+              v-model="search.capitalStatus"
+              placeholder="请选择监测类型"
+              clearable
+              style="width: 100%"
+            >
+              <el-option
+                v-for="item in constant.capitalStatus"
+                :key="item.code"
+                :label="item.name"
+                :value="item.code"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div>
+            <el-select
+              v-model="search.capitalStatus"
+              placeholder="请选择是否加入黑名单"
+              clearable
+              style="width: 100%"
+            >
+              <el-option
+                v-for="item in constant.capitalStatus"
+                :key="item.code"
+                :label="item.name"
+                :value="item.code"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div class="leftBtn">
+            <el-button type="primary" @click="fetchData">查询</el-button>
+            <el-button v-if="activeName === 'all'" type="primary" @click="handlerOperate('join')">加入黑名单</el-button>
+          </div>
+        </div>
+      </div>
+      <cy-comm-table
+        ref="commTable"
+        v-loading="loading"
+        parent-component="CapitalManage"
+        :columns="columns"
+        :data="tableData"
+        :count="total"
+        :table-options="tableOptions"
+      />
+    </el-tabs>
+    <cy-dialog ref="removeBlackListRef" title="移出黑名单">
+      <el-form
+        ref="blackRuleForm"
+        :model="blackRuleForm"
+        :rules="blackRules"
+        label-position="top"
+        label-width="150px"
+        class="rule-form-orange"
+      >
+        <el-form-item label="请输入移出原因 " prop="donorAccountName" style="width: 100%">
+          <el-input v-model="blackRuleForm.donorAccountName" placeholder="请输入请输入移出原因 " />
+        </el-form-item>
+
+      </el-form>
+      <div class="submit-btn">
+        <el-button @click="$refs.removeBlackListRef.show = false">关闭</el-button>
+        <el-button type="primary" @click="submit('submit')">确定</el-button>
+      </div>
+    </cy-dialog>
+    <cy-dialog ref="joinBlackListRef" title="加入黑名单">
+      <el-form
+        ref="joinRuleForm"
+        :model="joinRuleForm"
+        :rules="joinRules"
+        label-position="top"
+        label-width="150px"
+        class="rule-form-orange"
+      >
+        <el-form-item label="监测类型" prop="donorAccountName" style="width: 100%">
+          <el-select
+            v-model="joinRuleForm.capitalStatus"
+            placeholder="请选择监测类型"
+            clearable
+            style="width: 100%"
+          >
+            <el-option
+              v-for="item in constant.capitalStatus"
+              :key="item.code"
+              :label="item.name"
+              :value="item.code"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="监测对象" prop="donorAccountName" style="width: 100%">
+          <el-input v-model="joinRuleForm.donorAccountName" placeholder="请输入监测对象" />
+        </el-form-item>
+        <el-form-item label="监测对象证件号" prop="donorAccountName" style="width: 100%">
+          <el-input v-model="joinRuleForm.donorAccountName" placeholder="请输入监测对象证件号" />
+        </el-form-item>
+        <el-form-item label="加入原因" prop="donorAccountName" style="width: 100%">
+          <el-input v-model="joinRuleForm.donorAccountName" placeholder="请输入加入原因" />
+        </el-form-item>
+      </el-form>
+      <div class="submit-btn">
+        <el-button @click="$refs.joinBlackListRef.show = false">关闭</el-button>
+        <el-button type="primary" @click="submit('submit')">确定</el-button>
+      </div>
+    </cy-dialog>
   </div>
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
 export default {
+  data() {
+    return {
+      search: {
+        keyword: '',
+        capitalStatus: '',
+        creditStartDate: '',
+        creditEndDate: ''
+      },
+      total: 0,
+      loading: false,
+      activeName: 'black',
+      tableData: [{ capitalName: '123123' }],
+      tableOptions: {
+        maxHeight: 'calc(100vh - 410px)',
+        height: 'calc(100vh - 410px)'
+      },
+      blackRuleForm: {},
+      blackRules: {},
+      joinRuleForm: {},
+      joinRules: {}
+    }
+  },
+  computed: {
+    ...mapGetters(['constant']),
+    columns() {
+      return [
+        {
+          label: '序号',
+          index: true
+        },
+        {
+          label: '监测类型',
+          prop: 'creditNo',
+          showTooltip: true
+        },
+        {
+          label: '监测对象',
+          prop: 'capitalName',
+          showTooltip: true
+        },
+        {
+          label: '监测对象证件号',
+          prop: 'institutionType',
+          showTooltip: true
+        },
+        {
+          label: '是否黑名单',
+          prop: 'businessType',
+          showTooltip: true,
+          show: this.activeName === 'all',
+          render: (h, row) => {
+            return <span>{ row.businessType ? '是' : '否' }</span>
+          }
 
+        },
+        {
+          label: '加入原因',
+          prop: 'businessTypeNo',
+          showTooltip: true,
+          show: this.activeName === 'all',
+          render: (h, row) => {
+            return <span>{ row.businessType ? '是' : '否' }</span>
+          },
+          width: '120'
+        },
+        {
+          label: '移出原因',
+          prop: 'belongName',
+          showTooltip: true,
+          show: this.activeName === 'all',
+          render: (h, row) => {
+            return <span>{ row.businessType ? '是' : '否' }</span>
+          }
+        },
+        {
+          label: '加入日期',
+          prop: 'orgName',
+          showTooltip: true,
+          render: (h, row) => {
+            return <span>{ row.businessType ? '是' : '否' }</span>
+          }
+        },
+        {
+          label: '移出日期',
+          prop: 'creditAmount',
+          showTooltip: true,
+          show: this.activeName === 'all',
+          render: (h, row) => {
+            return <span>{ row.businessType ? '是' : '否' }</span>
+          }
+        },
+        {
+          label: '操作',
+          show: this.activeName === 'black',
+          render: (h, row) => {
+            const btnList = [
+              {
+                msg: '移除黑名单',
+                icon: 'iconfont icon-yichuheimingdan',
+                power: '',
+                tabPower: ['all', 'pending'],
+                rowPower: [],
+                category: 'remove'
+              }
+            ]
+            const options = btnList.map(item => {
+              // this.tablePower({ item, tab: this.activeName, row }) &&
+              return (
+                <el-tooltip class='item' effect='dark' content={item.msg} placement='top'>
+                  <span class='table-icon-box' v-power={item.power}>
+                    <i class={item.icon} onClick={() => { this.handlerOperate(item.category, row) }}></i>
+                  </span>
+                </el-tooltip>
+              )
+            })
+            return <div>{ options }</div>
+          },
+          width: 100
+        }
+      ]
+    },
+    tablePower() {
+      return ({ item, tab, row }) => {
+        const { tabPower, rowPower } = item
+        if (rowPower && rowPower.length) {
+          if (tabPower.includes(tab) && rowPower.includes(row.capitalStatus)) {
+            return true
+          }
+        } else {
+          if (tabPower.includes(tab)) {
+            return true
+          }
+        }
+      }
+    }
+  },
+  methods: {
+    fetchData(type) {
+      this.loading = true
+      if (type === 'search') {
+        this.page = 1
+        this.size = 10
+        this.$refs.commTable.initPage()
+      }
+      const params = {
+        ...this.search,
+        page: this.page || 1,
+        rows: this.size || 10,
+        flag: this.activeName,
+        realTimeUpdateFlag: type === 'update'
+      }
+      // getList(params).then(({ rows, records }) => {
+      //   this.tableData = rows
+      //   this.total = records
+      //   this.loading = false
+      // })
+    },
+    handleTabClick(tab) {
+      this.activeName = tab.name
+      this.page = 1
+      this.size = 10
+      // this.fetchData()
+    },
+    handlerOperate(type, row) {
+      if (type === 'remove') {
+        this.$refs.removeBlackListRef.show = true
+      } else if (type === 'join') {
+        this.$refs.joinBlackListRef.show = true
+      }
+    }
+  }
 }
 </script>