feat(黑名单):黑名单

src/api/monitorManage/blacklist.js

@@ -0,0 +1,37 @@
+import request from '@/utils/request'
+
+// 获取列表
+export function getList(data) {
+  return request({
+    url: '/blacklist/list',
+    method: 'post',
+    data
+  })
+}
+
+// 移出黑名单
+export function moveBlack(data) {
+  return request({
+    url: '/blacklist/move',
+    method: 'post',
+    data
+  })
+}
+
+// 移出黑名单
+export function addBlack(data) {
+  return request({
+    url: '/blacklist/add',
+    method: 'post',
+    data
+  })
+}
+
+// 模糊搜索获取监测对象
+export function getMonitorObject(data) {
+  return request({
+    url: '/blacklist/findMonitorObject',
+    method: 'post',
+    data
+  })
+}

src/components/CustomSelect/index.vue

@@ -44,6 +44,8 @@ export default {
       handler(count) {
         if (count) {
           this.selectValue = count
+        } else {
+          this.selectValue = ''
         }
       },
       immediate: true

src/views/monitorManage/bindAccount/record.vue

@@ -44,7 +44,7 @@ export default {
 
         {
           label: '触发原因/备注',
-          prop: 'correctionReason',
+          prop: 'triggerReason',
           showTooltip: true
         },
         {

src/views/monitorManage/blacklist/mainContent.vue

@@ -1,23 +1,23 @@
 <template>
   <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="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.keyword" style="width: 250px" placeholder="请输入监测对象/监测对象证件号" clearable />
+            <el-input v-model="search.searchName" style="width: 250px" placeholder="请输入监测对象/监测对象证件号" clearable />
           </div>
           <div>
             <el-select
-              v-model="search.capitalStatus"
+              v-model="search.type"
               placeholder="请选择监测类型"
               clearable
               style="width: 100%"
             >
               <el-option
-                v-for="item in constant.capitalStatus"
+                v-for="item in [{ name: '企业', code: 1 }, { name: '个人', code: 0 }]"
                 :key="item.code"
                 :label="item.name"
                 :value="item.code"
@@ -27,13 +27,13 @@
           </div>
           <div>
             <el-select
-              v-model="search.capitalStatus"
+              v-model="search.blacklist"
               placeholder="请选择是否加入黑名单"
               clearable
               style="width: 100%"
             >
               <el-option
-                v-for="item in constant.capitalStatus"
+                v-for="item in [{ name: '是', code: 1 }, { name: '否', code: 0 }]"
                 :key="item.code"
                 :label="item.name"
                 :value="item.code"
@@ -41,9 +41,22 @@
               </el-option>
             </el-select>
           </div>
+          <div v-if="activeName === 'all'">
+            <el-date-picker
+              v-model="search.addDate"
+              type="date"
+              placeholder="请选择加入日期"
+              value-format="yyyy-MM-dd"
+              clearable
+            >
+            </el-date-picker>
+          </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>
+            <template v-if="activeName === 'all'">
+              <el-button v-power="'addBlacklist'" type="primary" @click="handlerOperate('join')">加入黑名单</el-button>
+            </template>
+
           </div>
         </div>
       </div>
@@ -66,14 +79,14 @@
         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 label="请输入移出原因 " prop="moveReason" style="width: 100%">
+          <el-input v-model="blackRuleForm.moveReason" 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>
+        <el-button type="primary" @click="blackSubmit">确定</el-button>
       </div>
     </cy-dialog>
     <cy-dialog ref="joinBlackListRef" title="加入黑名单">
@@ -85,15 +98,15 @@
         label-width="150px"
         class="rule-form-orange"
       >
-        <el-form-item label="监测类型" prop="donorAccountName" style="width: 100%">
+        <el-form-item label="监测类型" prop="monitorType" style="width: 100%">
           <el-select
-            v-model="joinRuleForm.capitalStatus"
+            v-model="joinRuleForm.monitorType"
             placeholder="请选择监测类型"
-            clearable
             style="width: 100%"
+            @change="monitorTypeChange"
           >
             <el-option
-              v-for="item in constant.capitalStatus"
+              v-for="item in [{ name: '企业', code: 1 }, { name: '个人', code: 0 }]"
               :key="item.code"
               :label="item.name"
               :value="item.code"
@@ -101,19 +114,32 @@
             </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 label="监测对象" prop="monitorObject" style="width: 100%">
+          <custom-select
+            :value.sync="joinRuleForm.monitorObject"
+            placeholder="请输入监测对象"
+            @search-click="getMonitorList"
+            @search-change="searchChange"
+          >
+            <el-option
+              v-for="item in monitorList"
+              :key="item.monitorObject"
+              :label="item.monitorObject"
+              :value="item.monitorObject"
+            />
+          </custom-select>
         </el-form-item>
-        <el-form-item label="监测对象证件号" prop="donorAccountName" style="width: 100%">
-          <el-input v-model="joinRuleForm.donorAccountName" placeholder="请输入监测对象证件号" />
+        <el-form-item label="监测对象证件号" prop="monitorNumber" style="width: 100%">
+          <el-input v-model="joinRuleForm.monitorNumber" placeholder="请输入监测对象证件号" />
         </el-form-item>
-        <el-form-item label="加入原因" prop="donorAccountName" style="width: 100%">
-          <el-input v-model="joinRuleForm.donorAccountName" placeholder="请输入加入原因" />
+        <el-form-item label="加入原因" prop="addReason" style="width: 100%">
+          <el-input v-model="joinRuleForm.addReason" 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>
+        <el-button type="primary" @click="joinBlackSubmit">确定</el-button>
       </div>
     </cy-dialog>
   </div>
@@ -121,27 +147,57 @@
 
 <script>
 import { mapGetters } from 'vuex'
+import { getList, moveBlack, addBlack, getMonitorObject } from '@/api/monitorManage/blacklist'
 export default {
+  components: {
+    CustomSelect: () => import('@/components/CustomSelect/index.vue')
+  },
   data() {
     return {
       search: {
-        keyword: '',
-        capitalStatus: '',
-        creditStartDate: '',
-        creditEndDate: ''
+        searchName: '',
+        type: '',
+        blacklist: '',
+        addDate: ''
       },
       total: 0,
       loading: false,
-      activeName: 'black',
+      activeName: 'pending',
       tableData: [{ capitalName: '123123' }],
       tableOptions: {
         maxHeight: 'calc(100vh - 410px)',
         height: 'calc(100vh - 410px)'
       },
-      blackRuleForm: {},
-      blackRules: {},
-      joinRuleForm: {},
-      joinRules: {}
+      blackRuleForm: {
+        id: '',
+        moveReason: ''
+      },
+      blackRules: {
+        moveReason: [
+          { required: true, message: '请输入移出原因', trigger: 'blur' }
+        ]
+      },
+      joinRuleForm: {
+        monitorType: 1,
+        monitorObject: '',
+        monitorNumber: '',
+        addReason: ''
+      },
+      joinRules: {
+        monitorType: [
+          { required: true, message: '请选择监测类型', trigger: 'change' }
+        ],
+        monitorObject: [
+          { required: true, message: '请输入监测对象', trigger: 'blur' }
+        ],
+        monitorNumber: [
+          { required: true, message: '请输入监测对象证件号', trigger: 'blur' }
+        ],
+        addReason: [
+          { required: true, message: '请输入加入原因', trigger: 'blur' }
+        ]
+      },
+      monitorList: []
     }
   },
   computed: {
@@ -154,74 +210,74 @@ export default {
         },
         {
           label: '监测类型',
-          prop: 'creditNo',
-          showTooltip: true
+          prop: 'monitorType',
+          showTooltip: true,
+          render: (h, row) => {
+            return <span>{ row.monitorType ? '企业' : '个人' }</span>
+          }
         },
         {
           label: '监测对象',
-          prop: 'capitalName',
+          prop: 'monitorObject',
           showTooltip: true
         },
         {
           label: '监测对象证件号',
-          prop: 'institutionType',
+          prop: 'monitorNumber',
           showTooltip: true
         },
         {
           label: '是否黑名单',
-          prop: 'businessType',
+          prop: 'isBlacklist',
           showTooltip: true,
           show: this.activeName === 'all',
           render: (h, row) => {
-            return <span>{ row.businessType ? '是' : '否' }</span>
+            return <span>{ row.isBlacklist ? '是' : '否' }</span>
           }
 
         },
         {
           label: '加入原因',
-          prop: 'businessTypeNo',
+          prop: 'addReason',
           showTooltip: true,
           show: this.activeName === 'all',
           render: (h, row) => {
-            return <span>{ row.businessType ? '是' : '否' }</span>
+            return <span>{ row.addReason }</span>
           },
           width: '120'
         },
         {
           label: '移出原因',
-          prop: 'belongName',
+          prop: 'moveReason',
           showTooltip: true,
           show: this.activeName === 'all',
           render: (h, row) => {
-            return <span>{ row.businessType ? '是' : '否' }</span>
+            return <span>{ row.moveReason }</span>
           }
         },
         {
           label: '加入日期',
-          prop: 'orgName',
-          showTooltip: true,
-          render: (h, row) => {
-            return <span>{ row.businessType ? '是' : '否' }</span>
-          }
+          prop: 'addDate',
+          showTooltip: true
         },
         {
           label: '移出日期',
-          prop: 'creditAmount',
+          prop: 'moveDate',
           showTooltip: true,
           show: this.activeName === 'all',
           render: (h, row) => {
-            return <span>{ row.businessType ? '是' : '否' }</span>
+            return <span>{ row.moveDate }</span>
           }
         },
         {
           label: '操作',
-          show: this.activeName === 'black',
+          show: this.activeName === 'pending',
           render: (h, row) => {
             const btnList = [
               {
                 msg: '移除黑名单',
                 icon: 'iconfont icon-yichuheimingdan',
-                power: '',
+                power: 'moveBlacklist',
                 tabPower: ['all', 'pending'],
                 rowPower: [],
                 category: 'remove'
@@ -258,6 +314,9 @@ export default {
       }
     }
   },
+  created() {
+    this.fetchData()
+  },
   methods: {
     fetchData(type) {
       this.loading = true
@@ -270,27 +329,80 @@ export default {
         ...this.search,
         page: this.page || 1,
         rows: this.size || 10,
-        flag: this.activeName,
-        realTimeUpdateFlag: type === 'update'
+        flag: this.activeName
       }
-      // getList(params).then(({ rows, records }) => {
-      //   this.tableData = rows
-      //   this.total = records
-      //   this.loading = false
-      // })
+      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()
+      this.fetchData()
     },
     handlerOperate(type, row) {
       if (type === 'remove') {
+        this.blackRuleForm.id = row.id
+        this.blackRuleForm.moveReason = ''
         this.$refs.removeBlackListRef.show = true
       } else if (type === 'join') {
+        this.joinRuleForm.monitorType = 1
+        this.joinRuleForm.monitorObject = ''
+        this.joinRuleForm.monitorNumber = ''
+        this.joinRuleForm.addReason = ''
         this.$refs.joinBlackListRef.show = true
       }
+    },
+
+    monitorTypeChange(val) {
+      this.joinRuleForm.monitorObject = ''
+      this.monitorList = []
+      this.joinRuleForm.monitorNumber = ''
+    },
+    getMonitorList() {
+      const params = {
+        monitorType: this.joinRuleForm.monitorType,
+        monitorObject: this.joinRuleForm.monitorObject
+      }
+      getMonitorObject(params).then(({ data }) => {
+        this.monitorList = data
+      })
+    },
+
+    searchChange(val) {
+      const obj = this.monitorList.find(item => item.monitorObject === val)
+      if (!obj) return
+      const { monitorNumber } = obj
+      this.joinRuleForm.monitorNumber = monitorNumber
+    },
+    blackSubmit() {
+      this.$refs.blackRuleForm.validate(valid => {
+        if (valid) {
+          moveBlack(this.blackRuleForm).then(() => {
+            this.$message.success('移出成功')
+            this.$refs.removeBlackListRef.show = false
+            this.fetchData()
+          })
+        } else {
+          return false
+        }
+      })
+    },
+    joinBlackSubmit() {
+      this.$refs.joinRuleForm.validate(valid => {
+        if (valid) {
+          addBlack(this.joinRuleForm).then(() => {
+            this.$message.success('加入成功')
+            this.$refs.joinBlackListRef.show = false
+            this.fetchData()
+          })
+        } else {
+          return false
+        }
+      })
     }
   }
 }