From e242f54431c2033f389082cf44928d2ac7aa5dc2 Mon Sep 17 00:00:00 2001
From: yangpeng <3074487626@qq.com>
Date: Sun, 11 Aug 2024 10:31:53 +0800
Subject: [PATCH] =?UTF-8?q?fix():=E5=88=A0=E9=99=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/pay/customer.js          |  62 +++++--
 src/views/pay/customer/index.vue | 270 ++++++++++++++++---------------
 2 files changed, 184 insertions(+), 148 deletions(-)

diff --git a/src/api/pay/customer.js b/src/api/pay/customer.js
index 5f4db4b..588c1aa 100644
--- a/src/api/pay/customer.js
+++ b/src/api/pay/customer.js
@@ -1,34 +1,66 @@
-import request from '@/utils/request'
+import request  from "@/utils/request";
 
 //查看客户列表
 export function selectList(data) {
   return request({
-    url:'/pay/customer/list',
-    method:"POST",
-    data:data
+    url: '/pay/customer/list',
+    method: 'POST',
+    data: data
   })
 }
 
 //请求未入住的服务code
-export function customerAll(){
+export function customerAll() {
   return request({
-    url:'/pay/customer/all',
-    method:'GET'
+    url: '/pay/customer/all',
+    method: 'GET'
   })
 }
 
-//添加
-export function save(data){
+//添加客户
+export function save(data) {
   return request({
-    url:'/pay/customer',
-    method:'POST'
+    url: '/pay/customer',
+    method: 'POST',
+    data: data
+  })
+}
+//修改客户
+export function update(data) {
+  return request({
+    url: `/pay/customer/${data.id}`,
+    method: 'PUT',
+    data: data
   })
 }
 
-//修改
-export function update(data){
+//获取单条
+export function get(orderCustomerId) {
   return request({
-    url:'/pay/customer',
-    method:'PUT'
+    url: `/pay/customer/${orderCustomerId}`,
+    method: 'GET'
+  })
+}
+
+//客户信息删除
+export function del(orderCustomerId){
+  return request({
+    url: `/pay/customer/${orderCustomerId}`,
+    method: 'DELETE'
+  })
+}
+
+//通过ID启动客户
+export function enable(orderCustomerId){
+  return request({
+    url: `/pay/customer/enable/${orderCustomerId}`,
+    method: 'GET'
+  })
+}
+//通过ID禁用客户
+export function disable(orderCustomerId){
+  return request({
+    url: `/pay/customer/disable/${orderCustomerId}`,
+    method: 'GET'
   })
 }
diff --git a/src/views/pay/customer/index.vue b/src/views/pay/customer/index.vue
index 4b86252..3abdd0a 100644
--- a/src/views/pay/customer/index.vue
+++ b/src/views/pay/customer/index.vue
@@ -1,7 +1,5 @@
 <template>
-
   <div class="app-container">
-
     <el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams" label-width="68px" size="small">
       <el-form-item label="客户名称">
         <el-input
@@ -31,23 +29,11 @@
           />
         </el-select>
       </el-form-item>
-      <el-form-item label="创建时间">
-        <el-date-picker
-          v-model="dateRange"
-          end-placeholder="结束日期"
-          range-separator="-"
-          start-placeholder="开始日期"
-          style="width: 240px"
-          type="daterange"
-          value-format="yyyy-MM-dd"
-        ></el-date-picker>
-      </el-form-item>
       <el-form-item>
         <el-button icon="el-icon-search" size="mini" type="primary" @click="getList">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
-
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
         <el-button
@@ -60,30 +46,6 @@
         >新增
         </el-button>
       </el-col>
-      <el-col :span="1.5">
-        <el-button
-          v-hasPermi="['system:config:edit']"
-          :disabled="single"
-          icon="el-icon-edit"
-          plain
-          size="mini"
-          type="success"
-          @click="handleUpdate"
-        >修改
-        </el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          v-hasPermi="['system:config:remove']"
-          :disabled="multiple"
-          icon="el-icon-delete"
-          plain
-          size="mini"
-          type="danger"
-          @click="handleDelete"
-        >删除
-        </el-button>
-      </el-col>
       <el-col :span="1.5">
         <el-button
           v-hasPermi="['system:config:export']"
@@ -97,32 +59,42 @@
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
-
     <el-row :gutter="10">
-      <el-empty description="暂无支付客户" v-if="customerList.length === 0"></el-empty>
-      <el-col :span="8" v-for="customer in customerList" v-if="customerList.length === 0" >
+      <el-empty description="暂无支付客户" v-if="customerList.length == 0"></el-empty>
+      <el-col :span="8" v-for="customer in customerList" v-if="customerList.length != 0">
         <el-card class="box-card">
           <div slot="header" class="clearfix">
-            <span style="font-size: 18px;font-weight: 900;">{{customer.appName}}</span>
+            <span style="font-size: 18px;font-weight: 900">{{ customer.appName }}</span>
             <el-switch
-              style="float: right; margin: 4px 5px 0;"
-              v-model="switchValue"
+              style="float: right;margin: 4px 5px 0"
+              v-model="customer.status"
+              active-value="Y"
+              inactive-value="N"
               active-color="#13ce66"
-              inactive-color="#ff4949">
+              inactive-color="#ff4949"
+              @change="handleStatusChange(customer)"
+            >
             </el-switch>
-            <el-button style="float: right; padding: 5px; margin: 0 5px" type="danger" icon="el-icon-delete"
-                       @click="handleDelete"
+            <el-popconfirm
+              confirm-button-text='好的'
+              cancel-button-text='不用了'
+              icon="el-icon-info"
+              icon-color="red"
+              title="你确定要删除此支付客户嘛？"
+              @confirm="handleDelete(customer.id)"
+            >
+              <el-button style="float: right;padding: 5px;margin: 0 5px" type="danger" slot="reference" icon="el-icon-delete"
+                         circle></el-button>
+            </el-popconfirm>
+            <el-button style="float: right;padding: 5px;margin: 0 5px" type="primary" icon="el-icon-edit"
+                       @click="handleUpdate(customer.id)"
                        circle></el-button>
-            <el-button style="float: right; padding: 5px; margin: 0 5px" type="primary" icon="el-icon-edit"
-                       @click="handleUpdate"
-                       circle></el-button>
-
           </div>
           <div>
             <el-descriptions class="margin-top" :column="1" :size="size" border>
               <el-descriptions-item>
                 <template slot="label"><i class="el-icon-user"></i>客户名称</template>
-                {{ customer.appName }}
+                {{customer.appName}}
               </el-descriptions-item>
               <el-descriptions-item>
                 <template slot="label"><i class="el-icon-user"></i>客户编码</template>
@@ -130,34 +102,38 @@
               </el-descriptions-item>
               <el-descriptions-item>
                 <template slot="label"><i class="el-icon-user"></i>创建人</template>
-                {{ customer.createBy }}
+                {{customer.createBy}}
               </el-descriptions-item>
               <el-descriptions-item>
-                <template slot="label"><i class="el-icon-user"></i>创建日期</template>
-                {{ customer.createTime }}
+                <template slot="label"><i class="el-icon-user"></i>创建时间</template>
+                {{customer.createTime}}
               </el-descriptions-item>
             </el-descriptions>
             <el-divider content-position="center">近五笔交易记录</el-divider>
             <el-table
-            :data="customer.orderPaySimpleRespList"
-            style="width: 100%">
-            <el-table-column prop="cusOrderNumber" label="客户单号"/>
-            <el-table-column prop="price" label="支付金额"/>
-            <el-table-column prop="channelTypeName" label="渠道商"/>
+              :data="customer.orderPaySimpleRespList"
+              style="width: 100%">
+              <el-table-column prop="cusOrderNumber" label="客户单号"/>
+              <el-table-column prop="price" label="支付金额"/>
+              <el-table-column prop="channelTypeName" label="渠道商"/>
             </el-table>
           </div>
         </el-card>
       </el-col>
     </el-row>
 
+
+
+
+
     <el-dialog
-      title="title"
+      :title="title"
       :visible.sync="open"
       width="50%">
       <el-form ref="form" :model="form" label-width="120px" :rules="rules">
         <el-form-item label="客户编码" prop="appCode">
-          <span v-if="this.form.id!=null" style="font-size: 16px">cloud-1</span>
-          <el-select v-if="this.form.id==null" v-model="form.appCode" placeholder="请选择未入住的客户" style="width: 100%">
+          <span v-if="this.form.id != null" style="font-size: 16px">{{form.appCode}}</span>
+          <el-select v-if="this.form.id == null" v-model="form.appCode" placeholder="请选择未入住的客户" style="width: 100%">
             <el-option
               v-for="item in appCodeList"
               :key="item"
@@ -170,100 +146,94 @@
           <el-input v-model="form.appName"></el-input>
         </el-form-item>
         <el-form-item label="激活开通" prop="status">
-            <el-radio-group v-model="form.status">
-              <el-radio
-                v-for="dict in dict.type.sys_yes_no"
-                :key="dict.value"
-                :label="dict.value"
-              >{{ dict.label }}
-              </el-radio>
-            </el-radio-group>
-          </el-form-item>
+          <el-radio-group v-model="form.status">
+            <el-radio
+              v-for="dict in dict.type.sys_yes_no"
+              :key="dict.value"
+              :label="dict.value"
+            >{{ dict.label }}
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
         <el-form-item label="客户备注">
           <el-input v-model="form.remark" type="textarea" rows="6"></el-input>
         </el-form-item>
         <el-form-item label="详细描述">
-<!--          <el-input v-model="form.appDesc"></el-input>-->
+          <!--          <el-input v-model="form.appDesc"></el-input>-->
           <editor v-model="form.appDesc" :min-height="192"/>
         </el-form-item>
       </el-form>
       <span slot="footer" class="dialog-footer">
-        <el-button @click="dialogVisible = false">取 消</el-button>
-        <el-button type="primary" @click="dialogVisible = false">提交</el-button>
-      </span>
+    <el-button @click="open = false">取 消</el-button>
+    <el-button type="primary" @click="submitForm">提交</el-button>
+  </span>
     </el-dialog>
-
   </div>
-
-
 </template>
 
 <script>
-import {customerAll, selectList} from "@/api/pay/customer";
-import {addConfig, updateConfig} from "@/api/system/config";
+import {customerAll, disable, enable, save, selectList, update, del, get} from "@/api/pay/customer";
 
 export default {
-  name: 'Customer',
+  name: "Customer",
   dicts: ['sys_yes_no'],
   data() {
     return {
       // 显示搜索条件
       showSearch: true,
-      // 查询条件
-      queryParams: {
-      "appName": "",
-      "appCode": "",
-      "status": "Y"
+      //查询条件
+      queryParams:{
+        "appName":"",
+        "appCode":"",
+        "status":"Y"
       },
       //客户列表
       customerList:[],
-      switchValue:true,
-      //修改/添加
-      open: false,
+      switchValue: true,
+      open:false,
       //模态框标题
-      title:"",
-      // 表单内容
-      form: {
-        "appName": "",
-        "appCode": "",
-        "appDesc": "",
-        "status": "Y",
-        "remark": "",
+      title: "",
+      //表单内容
+      form:{
+        "appName":"",
+        "appCode":"",
+        "appDesc":"",
+        "status":"Y",
+        "remark":""
       },
       //未入住的客户
       appCodeList:["cloud-1","cloud-2","cloud-3"],
       // 表单校验
       rules: {
         appCode: [
-          {required: true, message: "请选择客户编码", trigger: "change"}
+          {required: true, message: "参数名称不能为空", trigger: "change"}
         ],
         appName: [
-          {required: true, message: "客户名称不能为空", trigger: "blur"}
+          {required: true, message: "参数键名不能为空", trigger: "blur"}
         ],
         status: [
-          {required: true, message: "请选择客户是否开通", trigger: "blur"}
+          {required: true, message: "参数键值不能为空", trigger: "blur"}
         ]
       }
-    }
-    },
+    };
+  },
   created() {
-    this.getList()
+    this.getList();
   },
   methods: {
-    /** 重置按钮操作 */
+    // 重置按钮操作
     resetQuery() {
-      this.queryParams={
-          "appName": "",
-          "appCode": "",
-          "status": "Y"
-
+      this.queryParams = {
+        "appName": "",
+        "appCode": "",
+        "status": "Y"
       }
       this.getList();
     },
     //搜索
-    getList(){
-      selectList(this.queryParams).then(response=>{
-          this.customerList=response.data;
+    getList() {
+      selectList(this.queryParams).then(response => {
+        this.customerList = response.data;
       })
     },
     // 表单重置
@@ -273,40 +243,33 @@ export default {
         "appCode": "",
         "appDesc": "",
         "status": "Y",
-        "remark": "",
+        "remark": ""
       };
       this.resetForm("form");
       this.customerList = [];
-      customerAll().then(response=>{
-        this.customerList=response.data;
+      customerAll().then(response => {
+        this.appCodeList = response.data;
       })
     },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "添加支付单客户信息";
-    },
-    /** 修改按钮操作 */
-    handleUpdate() {
-      this.reset();
-      // TODO 请求接口
-      this.form.id = "1";
-      this.open = true;
-      this.title = "添加支付单客户信息";
+    /** 删除按钮 */
+    handleDelete(orderCustomerId) {
+      del(orderCustomerId).then(response => {
+        this.$modal.msgSuccess("删除成功");
+        this.getList();
+      });
     },
     /** 提交按钮 */
     submitForm: function () {
       this.$refs["form"].validate(valid => {
         if (valid) {
           if (this.form.id != undefined) {
-            updateConfig(this.form).then(response => {
+            update(this.form).then(response => {
               this.$modal.msgSuccess("修改成功");
               this.open = false;
               this.getList();
             });
           } else {
-            addConfig(this.form).then(response => {
+            save(this.form).then(response => {
               this.$modal.msgSuccess("新增成功");
               this.open = false;
               this.getList();
@@ -315,13 +278,54 @@ export default {
         }
       });
     },
-
+    /** 客户状态更改触发 */
+    handleStatusChange(row) {
+      if (row.status == 'Y') {
+        enable(row.id).then(response => {
+          this.$modal.msgSuccess("启用成功");
+          row.status = 'Y'; // 显式地更新状态
+          this.getList();
+        }).catch(error => {
+          this.$modal.msgError("启用失败");
+          row.status = 'N'; // 回退状态
+          console.error(error);
+        });
+      } else {
+        disable(row.id).then(response => {
+          this.$modal.msgSuccess("禁用成功");
+          row.status = 'N'; // 显式地更新状态
+          this.getList();
+        }).catch(error => {
+          this.$modal.msgError("禁用失败");
+          row.status = 'Y'; // 回退状态
+          console.error(error);
+        });
+      }
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加支付单客户信息";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(orderCustomerId) {
+      this.reset();
+      get(orderCustomerId).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改支付单客户信息";
+      }).catch(error => {
+        this.$modal.msgError("获取客户信息失败");
+        console.error(error);
+      });
+    },
   }
 }
 </script>
 
 <style scoped>
-.el-card{
+.el-card {
   margin: 10px 0;
 }
 </style>