商户管理

ruoyi-ui/src/api/merchant.js

@@ -0,0 +1,41 @@
+/*
+ * @Author: 傅豪杰 18516149270@163.com
+ * @Date: 2023-07-24 13:57:02
+ * @LastEditors: 傅豪杰 18516149270@163.com
+ * @LastEditTime: 2023-08-24 13:51:28
+ * @FilePath: /infrared_remote/admin_web/ruoyi-ui/src/api/template/addTemplate/index.js
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import request from '@/utils/request'
+
+export class MerchantApi {
+    // 商家列表
+    getList = (data={})=>{
+        return  request({
+            url: '/platform/v1/merchantUser/list',
+            method: 'post',
+            data: data
+        })
+    }
+
+    // 新增/编辑商家
+    addOrUpdate= (data={})=>{
+        return  request({
+            url: '/platform/v1/merchantUser/addOrUpdate',
+            method: 'post',
+            data: data
+        })
+    }
+
+    // 删除
+    delete = (data={})=>{
+        return  request({
+            url: '/platform/v1/merchantUser/delete',
+            method: 'post',
+            data: data
+        })
+    }
+ 
+}
+
+export const merchantApi = new MerchantApi()

ruoyi-ui/src/views/merchant/blocks/detailDialog.vue

@@ -0,0 +1,142 @@
+<template>
+  <!-- 列表选择弹窗 -->
+  <f-dialog
+    ref="dialog"
+    title="商家信息"
+    :initData="handleInitData"
+    :beforeClose="handleBeforeClose"
+    width="1100px"
+  >
+    <template #contain>
+      <f-form
+        ref="ruleForm"
+        :form="fromData"
+        :disabled="dialogType==='detail'"
+        :config="fromDataConfig"
+        :rules="fromRules"
+        label-position="left"
+        :column="2"
+        required
+        :key="fromKey"
+      />
+    </template>
+  </f-dialog>
+</template>
+<script>
+import { merchantApi } from '@/api/merchant'
+
+export default {
+  name: "DetailDialog",
+  props: {
+    // 表单数据
+    rowData:{
+      type:Object,
+      default:()=>{}
+    },
+    // 表单类型 add detail edit
+    dialogType:{
+      type:String,
+      default:'add'
+    }
+  },
+  data() {
+    return {
+      // 数据对象
+      fromData:{
+      },
+      // 表单配置
+      fromDataConfig:[
+        {
+          itemType: "input",
+          prop: "name",
+          label:'商户名',
+          attrs: {
+            placeholder: "请输入商户名"
+          },
+        },
+        {
+          itemType: "input",
+          prop: "merchantAbb",
+          label:'商户缩写',
+          attrs: {
+            placeholder: "请输入商户缩写"
+          },
+        },
+        {
+          itemType: "input",
+          prop: "user",
+          label:'联系人',
+          attrs: {
+            placeholder: "请输入联系人"
+          },
+        },
+        {
+          itemType: "input",
+          prop: "phone",
+          label:'联系人电话',
+          attrs: {
+            placeholder: "请输入联系人电话"
+          },
+        },
+        {
+          itemType: "input",
+          prop: "address",
+          label:'联系地址',
+          attrs: {
+            placeholder: "请输入联系地址"
+          },
+        },
+      ],
+      // 表单验证
+      fromRules:{
+        name:[{required: true, message: '请输入商户名'}],
+      },
+      // 表单key
+      fromKey:0
+    };
+  },
+  methods: {
+    // 显示弹窗
+    show(){
+      this.$refs.dialog.show();
+    },
+    // 初始化表单数据
+    initFormData(fromData){
+      this.fromData = {
+          name:undefined,
+          merchantAbb:undefined,
+          merchantCode:undefined,
+          user:undefined,
+          phone:undefined,
+          address:undefined,
+          ...fromData
+      }
+      this.fromKey++;
+    },
+    handleInitData(){
+      this.initFormData(this.rowData)
+    },
+    // 关闭之前回调.
+    async handleBeforeClose(type){
+      if(type !='ok') return true;
+      const validate = await this.$refs.ruleForm.validate();
+
+      if(!validate) return false;
+      const params = {
+        ...this.fromData,
+      }
+      //  调接口更新数据
+      const res = await merchantApi.addOrUpdate(params);
+      if(res.code !=200){
+          this.$modal.msgError(res.msg);
+          return false;
+      }
+
+      this.$emit('updateList')
+      this.initFormData({})
+      return true;
+    }
+  }
+}
+</script>
+<style scoped lang="scss"></style>

ruoyi-ui/src/views/merchant/index.vue

@@ -0,0 +1,119 @@
+<template>
+  <div class="app-container">
+    <el-form :model="form" ref="form" size="small" :inline="true" label-position="left" label-width="70px">
+      <el-form-item>
+          <el-input v-model="form.name" placeholder="请输入" clearable />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="handleCurrentGetList">查询</el-button>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="handleOpenDialog('add', {})">新增</el-button>
+      </el-form-item>
+    </el-form>
+    <tableList
+      ref="table"
+      :column="tableConfig"
+      showOperation
+      operationWidth="100px"
+      :checkbox="false"
+      :getList="handleGetList"
+    >
+      <!-- 列表操作页 -->
+      <template #default="scope">
+        <!-- 已生效只能看详情 -->
+        <f-btn type="text" @click="handleOpenDialog('edit',scope.row)">编辑</f-btn>
+        <f-btn type="delete" @click="handleDelete('del', scope.row)">删除</f-btn>
+      </template>
+    </tableList>
+    <!-- 详情弹窗 -->
+    <detail-dialog 
+      ref="detailDialog" 
+      :rowData="rowData" 
+      :dialogType="dialogType" 
+      @updateList="handleCurrentGetList"
+    />
+  </div>
+</template>
+<script>
+import DetailDialog from './blocks/detailDialog.vue';
+import tableList from "@/comComponents/tableList";
+import { merchantApi } from '@/api/merchant'
+
+export default {
+  components: { DetailDialog, tableList },
+  data() {
+    return {
+      form: {
+        label: '',
+        bootCodeStatus:'0'
+      },
+      tableConfig: [
+        { "name": "商户名" },
+        { "merchantAbb": "商户缩写" },
+        { "merchantCode": "商家编码" },
+        { "user": "联系人" },
+        { "phone": "联系人电话" },
+        { "address": "联系地址"}
+      ],
+      // 弹窗数据对象
+      rowData:{
+        name:undefined
+      },
+      // 弹窗类型
+      dialogType:'add',
+      // 弹窗更新key
+      dialogKey:0
+    }
+  },
+  methods: {
+    selectDictLabel(listObj, key) {
+      return listObj.find(item => item.value == key).name
+    },
+    // 查询列表
+    handleCurrentGetList(){
+      this.$refs.table.handleQueryList();
+    },
+    // 获取列表
+    async handleGetList(page) {
+      const res = await merchantApi.getList(
+        {
+          ...page,
+          name:this.form.label
+        }
+      );
+      if(res.code!= 200 ) return {
+        current:1,
+        records:[],
+        total:0
+      }
+      return res.data;
+    },
+    // 打开详情、编辑\新增弹窗事件
+    handleOpenDialog(type, rowData) {
+      this.dialogType = type;
+      this.rowData = {...rowData};
+      this.$nextTick(()=>{
+        this.$refs.detailDialog.show();
+      })
+    },
+    // 编辑状态
+    handleDelete(type, row) {
+      this.$modal.confirm('是否确认删除此配置').then(async ()=> {
+        const res = await merchantApi.delete({ id: row.id });
+        if(res.code != 200){
+          this.$modal.msgErrpr(res.msg || "操作失败");
+          return false;
+        }
+        this.handleCurrentGetList();
+        this.$modal.msgSuccess("操作成功");
+      })
+    }
+  },
+  mounted() {
+    this.handleCurrentGetList()
+  },
+}
+</script>
+<style lang="scss" scoped>
+</style>