客户修改，批量禁用

src/views/backstage/customMgt/customTabulate/add.vue

@@ -46,7 +46,7 @@
             :headers="uploadHeaders"
             :limit="2"
             :on-exceed="handleExceed"
-            :on-success="excelImported"
+            :on-success="handleImported"
             :on-preview="handlePictureCardPreview"
             :on-remove="handleRemove"
           >
@@ -56,7 +56,6 @@
             <img width="100%" :src="dialogImageUrl">
           </el-dialog>
         </div>
-        {{ formData.businessLicense }}
       </el-form-item>
       <el-form-item label="统一社会信用代码：" class="form-cell" prop="unifiedSocialCreditCode">
         <div class="cell-box">
@@ -94,7 +93,7 @@
       </el-form-item>
       <el-form-item label="成立日期：" class="form-cell" prop="establishmentDate">
         <div class="cell-box">
-          <el-date-picker v-model="formData.establishmentDate" type="date" placeholder="请选择日期" />
+          <el-date-picker v-model="formData.establishmentDate" type="date" clearable placeholder="请选择日期" />
         </div>
       </el-form-item>
       <el-form-item label="经营期限（年）：" class="form-cell" prop="operatingPeriod">
@@ -104,7 +103,7 @@
       </el-form-item>
       <el-form-item label="审核/年检日期：" class="form-cell" prop="annualInspectionDate">
         <div class="cell-box">
-          <el-date-picker v-model="formData.annualInspectionDate" type="date" placeholder="请选择日期" />
+          <el-date-picker v-model="formData.annualInspectionDate" type="date" clearable placeholder="请选择日期" />
         </div>
       </el-form-item>
       <el-form-item label="企业类型：" class="form-cell" prop="enterpriseType">
@@ -175,7 +174,7 @@ export default {
       dialogImageUrl: '',
       dialogImageVisible: false,
       visible: false,
-      title: '客户信息',
+      title: '添加客户信息详情',
       provinceOpts: [],
       cityOpts: [],
       countyOpts: [],
@@ -246,13 +245,16 @@ export default {
     submitForm() {
       this.$refs.formViewRef.validate((valid, obj) => {
         if (valid) {
-          console.log(this.formData)
           HttpReq.backstageApi.addCustomer(this.formData).then((res) => {
             this.$notify({
               title: res.msg,
               type: 'success',
               duration: 2500
             })
+            if (res.code === 200) {
+              this.cancelView()
+              this.$parent.loadData()
+            }
           })
         } else {
           this.$message({
@@ -288,7 +290,7 @@ export default {
       this.dialogImageUrl = file.url
       this.dialogImageVisible = true
     },
-    excelImported(response, file, fileList) {
+    handleImported(response, file, fileList) {
       this.$nextTick(() => {
         const arr = this.formData.businessLicense ? this.formData.businessLicense.split(';') : []
         arr.push(response.businessLicense)
@@ -347,6 +349,9 @@ export default {
   >>>.el-input.is-disabled .el-input__icon {
     cursor: text;
   }
+  >>>.el-icon-circle-check {
+    color: #13ce66;
+  }
   //>>>.el-icon-arrow-up:before {
   //  content: '';
   //}

src/views/backstage/customMgt/customTabulate/index.vue

@@ -2,13 +2,13 @@
   <div class="app-container">
     <!--工具栏-->
     <div class="head-container">
-      <el-input v-model="query.username" clearable placeholder="请输入用户名" style="width:150px;" />
-      <el-select v-model="query.area" clearable placeholder="请选择地区" style="width: 120px">
+      <el-input v-model="query.userName" clearable placeholder="请输入用户名" style="width:150px;" />
+      <el-select v-model="query.registeredAddressProvince" clearable placeholder="请选择地区" style="width: 120px">
         <el-option v-for="item in dict.area_province" :key="item.value" :label="item.label" :value="item.value" />
       </el-select>
-      <el-input v-model="query.username" clearable placeholder="请输入企业名称" style="width:150px;" />
-      <el-input v-model="query.username" clearable placeholder="请输入联系人" style="width:150px;" />
-      <el-input v-model="query.username" clearable placeholder="请输入联系电话" style="width:150px;" />
+      <el-input v-model="query.enterpriseName" clearable placeholder="请输入企业名称" style="width:150px;" />
+      <el-input v-model="query.enterpriseContactPerson" clearable placeholder="请输入联系人" style="width:150px;" />
+      <el-input v-model="query.enterpriseContactPersonPhone" clearable placeholder="请输入联系电话" style="width:150px;" />
       <el-select v-model="query.status" clearable placeholder="请选择状态" style="width: 120px">
         <el-option v-for="item in dict.custom_status" :key="item.value" :label="item.label" :value="item.value" />
       </el-select>
@@ -21,8 +21,8 @@
         <el-button type="primary" icon="el-icon-circle-plus-outline" @click="toAdd">添加客户</el-button>
       </div>
       <div style="text-align: right">
-        <el-button type="success" icon="el-icon-finished" :disabled="!multipleSelection.length" @click="batchOperate(1)">批量激活</el-button>
-        <el-button type="danger" icon="el-icon-help" :disabled="!multipleSelection.length" @click="batchOperate(0)">批量锁定</el-button>
+        <el-button type="success" icon="el-icon-finished" :disabled="!multipleSelection.length" @click="batchOperate(true)">批量激活</el-button>
+        <el-button type="danger" icon="el-icon-help" :disabled="!multipleSelection.length" @click="batchOperate(false)">批量锁定</el-button>
       </div>
     </div>
     <!-- 表格 -->
@@ -30,14 +30,14 @@
       <el-table id="dataTable" ref="dataTable" v-loading="loading" :data="tableData" tooltip-effect="dark" style="width:auto;min-height: 70vh" @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55" />
         <el-table-column type="index" width="55" label="序号" :index="indexMethod" />
-        <el-table-column prop="username" label="用户名" />
-        <el-table-column prop="area" label="区域" />
-        <el-table-column prop="xxx" label="企业名称" />
-        <el-table-column prop="xxx" label="联系人" />
-        <el-table-column prop="xxx" label="联系电话" />
+        <el-table-column prop="userName" label="用户名" />
+        <el-table-column prop="registeredAddressProvince" label="区域" :formatter="(row, column, cellValue)=>{return dict.label.area_province[cellValue]}" />
+        <el-table-column prop="enterpriseName" label="企业名称" />
+        <el-table-column prop="enterpriseContactPerson" label="联系人" />
+        <el-table-column prop="enterpriseContactPersonPhone" label="联系电话" />
         <el-table-column label="状态" width="100">
           <template slot-scope="scope">
-            <div>{{ dict.label.custom_status[scope.row.status] }}</div>
+            <div :style="'color:'+textColors[scope.row.status]">{{ dict.label.custom_status[scope.row.status] }}</div>
           </template>
         </el-table-column>
         <el-table-column label="锁定/激活" align="center" width="100">
@@ -45,30 +45,36 @@
             <el-switch v-model="scope.row.enabled" :disabled="scope.row.status>2" active-color="#13ce66" inactive-color="#F56C6C" @change="changeEnabled(scope.row, scope.row.enabled)" />
           </template>
         </el-table-column>
-        <el-table-column prop="xxx" label="注册时间" align="center" width="100" />
-        <el-table-column prop="xxx" label="操作" align="right" width="200">
+        <el-table-column prop="createTime" label="注册时间" align="center" width="160" />
+        <el-table-column label="操作" align="right" width="200">
           <template slot-scope="scope">
+            <el-tooltip v-if="scope.row.status==='3'" content="审核"><el-button round plain type="warning" icon="el-icon-s-check" @click="toView(scope.row, true)" /></el-tooltip>
             <el-tooltip content="编辑"><el-button round plain type="primary" icon="el-icon-edit-outline" @click="toEdit(scope.row)" /></el-tooltip>
-            <el-tooltip content="审核"><el-button round plain type="warning" icon="el-icon-s-check" @click="toEdit(scope.row)" /></el-tooltip>
-            <el-tooltip content="查看"><el-button round plain icon="el-icon-view" @click="toEdit(scope.row)" /></el-tooltip>
+            <el-tooltip content="查看"><el-button round plain icon="el-icon-view" @click="toView(scope.row)" /></el-tooltip>
           </template>
         </el-table-column>
       </el-table>
       <!--分页组件-->
       <el-pagination :total="total" :current-page="page" :page-size="pageSize" style="margin-top: 8px;" layout="total, prev, pager, next, sizes" @size-change="sizeChange" @current-change="pageChange" />
     </div>
-    <add-view ref="addView" />
+    <add-page ref="addPage" />
+    <edit-page ref="editPage" />
+    <view-page ref="viewPage" />
   </div>
 </template>
 <script>
+import { HttpReq } from '@/api/common.js'
 import DateRangePicker from '@/components/DateRangePicker'
-import AddView from './add'
+import addPage from './add'
+import editPage from './edit'
+import viewPage from './view'
 
 export default {
-  components: { DateRangePicker, AddView },
+  components: { DateRangePicker, addPage, editPage, viewPage },
   dicts: ['user_status', 'custom_status', 'area_province'],
   data() {
     return {
+      textColors: ['#ccc', '#32cd32', '#bba', '#000', '#f00'],
       loading: false,
       page: 1,
       pageSize: 20,
@@ -93,46 +99,71 @@ export default {
       this.multipleSelection = val
     },
     loadData() {
-      var sort = 'id,desc'
-      var param = { ...this.query }
-      param.page = this.page
-      param.pageSize = this.pageSize
-      param.sort = sort
-      this.tableData = [
-        { username: '张三', area: '火星', status: 1, enabled: true, xxx: '2023-05-09' },
-        { username: '李四', area: '地球', status: 3, enabled: false, xxx: '2023-05-09' }
-      ]
-      this.total = 2
+      // 清除参数无值的情况
+      Object.keys(this.query).length !== 0 && Object.keys(this.query).forEach(item => {
+        if (this.query[item] === null || this.query[item] === '') this.query[item] = undefined
+      })
+      HttpReq.backstageApi.queryCustomer({
+        page: this.page - 1,
+        pageSize: this.pageSize,
+        ...this.query
+      }).then((res) => {
+        this.tableData = res.data.data
+        this.total = res.data.total
+      })
     },
-    batchOperate(opt) {
+    batchOperate(type) {
       if (!this.multipleSelection.length) {
         return this.$message({
           message: '未选取数据',
           type: 'info'
         })
       }
-      if (opt) {
-        console.log('启用', this.multipleSelection)
-      } else {
-        console.log('启用', this.multipleSelection)
-      }
+      HttpReq.backstageApi.userEnableDisable({
+        ids: this.multipleSelection.map(item => { return item.sysUserId }),
+        type: type
+      }).then((res) => {
+        this.$notify({
+          title: res.msg,
+          type: 'success',
+          duration: 2500
+        })
+        if (res.code === 200) {
+          this.loadData()
+        }
+      })
     },
     changeEnabled(data, val) {
-      this.$confirm('此操作将 "' + this.dict.label.user_status[val] + '" ' + data.username + ', 是否继续？', '提示', {
+      this.$confirm('此操作将 "' + this.dict.label.user_status[val] + '" 用户' + data.userName + '的账号, 是否继续？', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
-
+        HttpReq.backstageApi.userEnableDisable({
+          ids: [data.sysUserId],
+          type: val
+        }).then((res) => {
+          this.$notify({
+            title: res.msg,
+            type: 'success',
+            duration: 2500
+          })
+          if (res.code === 200) {
+            this.loadData()
+          }
+        })
       }).catch(() => {
         data.enabled = !data.enabled
       })
     },
     toAdd() {
-      this.$refs.addView.showView()
+      this.$refs.addPage.showView()
     },
     toEdit(item) {
-
+      this.$refs.editPage.loadData(item.customerId)
+    },
+    toView(item, isReview) {
+      this.$refs.viewPage.loadData(item.customerId, isReview)
     },
     toSearch() {
       this.page = 1