超市前台

2023-11-18 14:13:13 +08:00 · 2023-11-18 14:13:13 +08:00 · 23f22bf8fa
parent e99cf499de
commit 23f22bf8fa
8 changed files with 380 additions and 17 deletions
--- a/.eslintignore
+++ b/.eslintignore
@ -2,3 +2,4 @@ build/*.js
 src/assets
 public
 dist
+*
--- a/src/api/customer.js
+++ b/src/api/customer.js
@ -0,0 +1,37 @@
+import request from '@/utils/request'
+
+export function list(data) {
+  return request({
+    url: '/customer/list',
+    method: 'post',
+    data
+  })
+}
+
+
+export function add(data) {
+  return request({
+    url: '/customer/add',
+    method: 'post',
+    data
+  })
+}
+export function update(data) {
+  return request({
+    url: '/customer/update',
+    method: 'post',
+    data
+  })
+}
+export function findById(userId) {
+  return request({
+    url: '/customer/findById/' + userId,
+    method: 'post'
+  })
+}
+export function deleteId(customerId) {
+  return request({
+    url: '/customer/deleteId/' + customerId,
+    method: 'delete'
+  })
+}
--- a/src/router/index.js
+++ b/src/router/index.js
@ -129,6 +129,19 @@ export const constantRoutes = [
    ]
  },

+  {
+    path: '/customer',
+    component: Layout,
+    children: [
+      {
+        path: 'customer',
+        name: '客户管理',
+        component: () => import('@/views/customer/index'),
+        meta: { title: '客户管理', icon: 'customer' }
+      }
+    ]
+  },
+
  {
    path: '/nested',
    component: Layout,
--- a/src/views/customer/index.vue
+++ b/src/views/customer/index.vue
@ -0,0 +1,197 @@
+<template>
+    <div>
+      <el-form ref="form" :model="customerRequest" label-width="80px">
+        <el-form-item label="id">
+          <el-input v-model="customerRequest.customerId"></el-input>
+        </el-form-item>
+
+        <el-form-item label="客户名称">
+          <el-input v-model="customerRequest.customerName"></el-input>
+        </el-form-item>
+
+        <el-form-item>
+          <el-button type="primary" @click="onSubmit">查询</el-button>
+          <el-button>取消</el-button>
+        </el-form-item>
+      </el-form>
+
+      <el-button type="primary" @click="add">添加</el-button>
+
+      <el-table :data="customerResponse.list" style="width: 100%">
+        <el-table-column label="客户编号" width="180">
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{scope.row.customerId}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="客户姓名" width="180">
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{scope.row.customerName}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="客户年龄" width="180">
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{scope.row.customerAge}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="客户性别" width="180">
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{scope.row.customerGender}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="客户住址" width="180">
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{scope.row.customerAddress}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="客户联系方式" width="180">
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{scope.row.customerTel}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <el-button size="mini" @click="update(scope.row.customerId)">编辑</el-button>
+            <el-button size="mini" type="danger" @click="deleteId(scope.row.customerId)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="customerRequest.pageNum"
+        :page-sizes="[100, 200, 300, 400]"
+        :page-size="customerRequest.pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="customerResponse.total">
+      </el-pagination>
+
+      <el-dialog :title="title" :visible.sync="dialogFormVisible">
+        <el-form :model="customer">
+          <el-form-item label="客户姓名" :label-width="formLabelWidth">
+            <el-input v-model="customer.customerName" autocomplete="off"></el-input>
+            <el-button @click="customerName2">验证客户名称</el-button>
+          </el-form-item>
+          <el-form-item label="客户年龄" :label-width="formLabelWidth">
+            <el-input v-model="customer.customerAge" autocomplete="off"></el-input>
+          </el-form-item>
+          <el-form-item label="客户性别" :label-width="formLabelWidth">
+            <el-select v-model="customer.customerGender" placeholder="请选择活动区域">
+              <el-option label="男" value="男"></el-option>
+              <el-option label="女" value="女"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="客户住址" :label-width="formLabelWidth">
+            <el-input v-model="customer.customerAddress" autocomplete="off"></el-input>
+
+          </el-form-item>
+          <el-form-item label="客户联系方式" :label-width="formLabelWidth">
+            <el-input v-model="customer.customerTel" autocomplete="off"></el-input>
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="dialogFormVisible = false">取 消</el-button>
+          <el-button type="primary" @click="operAdd">确 定</el-button>
+        </div>
+      </el-dialog>
+
+    </div>
+</template>
+<script>
+  import {list,add,update,deleteId,findById} from '@/api/customer'
+
+  export default {
+    name: 'customer',
+    data() {
+      return {
+        customerRequest:{
+          customerId:'',
+          customerName:'',
+          pageNum:1,
+          pageSize:3
+        },
+        customerResponse:{
+          total:0,
+          list:[]
+        },
+        dialogFormVisible:false,
+        formLabelWidth:'120px',
+        customer:{},
+        title:'表单',
+
+        vailcustomerName:/^(?:[\u4e00-\u9fa5·]{2,16})$/
+      }
+    },
+    created() {
+      this.onSubmit()
+    },
+    methods: {
+      customerName2(){
+        if (this.vailcustomerName.test(this.customer.customerName)){
+          alert("客户名称格式正确")
+        }else{
+          alert("客户名称格式错误")
+        }
+      },
+      add(){
+        this.dialogFormVisible=true
+        this.customer={}
+        this.title='添加'
+      },
+      update(customerId){
+        findById(customerId).then(res=>{
+          this.dialogFormVisible=true
+          this.customer=res.data
+          this.title='编辑'
+        })
+      },
+      operAdd(){
+        if (this.customer.customerId){
+          this.updateCustomer()
+        }else{
+          this.addCustomer()
+        }
+      },
+      addCustomer(){
+        add(this.customer).then(res=>{
+          this.dialogFormVisible=false
+          this.customer={}
+          this.title='编辑'
+          alert("添加成功")
+          this.onSubmit()
+        })
+      },
+      updateCustomer(){
+        update(this.customer).then(res=>{
+          this.dialogFormVisible=false
+          this.customer={}
+          this.title='编辑'
+          alert("修改成功")
+          this.onSubmit()
+        })
+      },
+      deleteId(customerId){
+        deleteId(customerId).then(res=>{
+          this.$message.success('删除成功')
+          alert("删除成功")
+          this.onSubmit()
+        })
+      },
+      onSubmit(){
+        list(this.customerRequest).then(res=>{
+          this.customerResponse=res.data
+        })
+      },
+      handleSizeChange(val){
+        this.customerRequest.pageSize=val
+        this.onSubmit()
+      },
+      handleCurrentChange(val){
+        this.customerRequest.pageNum=val
+        this.onSubmit()
+      }
+    }
+  }
+</script>
+<style scoped>
+</style>
--- a/src/views/merch/index.vue
+++ b/src/views/merch/index.vue
@ -40,6 +40,7 @@
            <span style="margin-left: 10px">{{scope.row.salesProPrice}}</span>
          </template>
        </el-table-column>
+
      </el-table>

      <el-pagination
--- a/src/views/user/index.vue
+++ b/src/views/user/index.vue
@ -92,6 +92,7 @@
        <el-form :model="User">
          <el-form-item label="用户名字" :label-width="formLabelWidth">
            <el-input v-model="User.userName" autocomplete="off"></el-input>
+            <el-button @click="userName2">验证用户名称</el-button>
          </el-form-item>
          <el-form-item label="用户密码" :label-width="formLabelWidth">
            <el-input v-model="User.userPwd" autocomplete="off"></el-input>
@ -104,9 +105,11 @@
          </el-form-item>
          <el-form-item label="用户身份证" :label-width="formLabelWidth">
            <el-input v-model="User.userIdcard" autocomplete="off"></el-input>
+            <el-button @click="userIdcard2">验证用户身份证</el-button>
          </el-form-item>
          <el-form-item label="用户年龄" :label-width="formLabelWidth">
            <el-input v-model="User.userAge" autocomplete="off"></el-input>
+            <el-button @click="userAge2">验证用户年龄</el-button>
          </el-form-item>
          <el-form-item label="用户性别" :label-width="formLabelWidth">
            <el-select v-model="User.userGender" placeholder="请选择">
@ -116,6 +119,7 @@
          </el-form-item>
          <el-form-item label="用户住址" :label-width="formLabelWidth">
            <el-input v-model="User.userAddress" autocomplete="off"></el-input>
+            <el-button @click="userAddress2">验证地址格式</el-button>
          </el-form-item>
          <el-form-item label="用户职位" :label-width="formLabelWidth">
            <el-select v-model="User.userPosition" placeholder="请选择">
@ -128,10 +132,12 @@
          </el-form-item>
          <el-form-item label="手机号" :label-width="formLabelWidth">
            <el-input v-model="User.phone" autocomplete="off"></el-input>
+            <el-button @click="phone2">验证手机号</el-button>
          </el-form-item>
-          <el-form-item label="工作开始时间" :label-width="formLabelWidth">
-            <el-input v-model="User.userDate" autocomplete="off"></el-input>
-          </el-form-item>
+
+<!--          <el-form-item label="工作开始时间" :label-width="formLabelWidth">-->
+<!--            <el-input v-model="User.userDate" autocomplete="off"></el-input>-->
+<!--          </el-form-item>-->
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
@ -160,13 +166,54 @@
        dialogFormVisible:false,
        formLabelWidth:"120px",
        title:'表单',
-        User:{}
+        User:{},
+        vailuserName:/^[\u4E00-\u9FA5]+$/,
+        vailuserIdcard:/^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/,
+        vailuserAge:/^(1?\d{1,2}|200)$/,
+        vailphone:/^\d{11}$/,
+        vailAddress:/^.{5,50}$/
+
      }
    },
    created() {
      this.onSubmit()
    },
    methods: {
+      userAddress2(){
+        if (this.vailAddress.test(this.User.userAddress)){
+          alert("地址格式正确")
+        }else{
+          alert("地址格式错误")
+        }
+      },
+      phone2(){
+        if (this.vailphone.test(this.User.phone)){
+          alert("手机号格式正确")
+        }else{
+          alert("手机号格式错误")
+        }
+      },
+      userName2(){
+        if (this.vailuserName.test(this.User.userName)){
+          alert("用户名称格式正确")
+        }else{
+          alert("用户名称格式错误")
+        }
+      },
+      userIdcard2(){
+        if (this.vailuserIdcard.test(this.User.userIdcard)){
+          alert("身份证格式正确")
+        }else{
+          alert("身份证格式错误")
+        }
+      },
+      userAge2(){
+        if (this.vailuserAge.test(this.User.userAge)){
+          alert("年龄格式正确")
+        }else{
+          alert("年龄格式错误")
+        }
+      },
      deleteId(userId){
        deleteId(userId).then(res=>{
          alert("删除成功")
@ -204,16 +251,27 @@
      },
      addUser(){
        add(this.User).then(res=>{
-          this.dialogFormVisible=false
-          alert("添加成功")
-          this.title='添加成功'
-          this.User={}
-          this.onSubmit()
+          if (
+            this.User.userAddress && this.vailAddress.test(this.User.userAddress)&&
+            this.User.phone && this.vailphone.test(this.User.phone)&&
+            this.User.userName && this.vailuserName.test(this.User.userName)&&
+            this.User.userIdcard && this.vailuserIdcard.test(this.User.userIdcard)&&
+            this.User.userAge && this.vailuserAge.test(this.User.userAge)
+          ){
+            this.dialogFormVisible=false
+            alert("添加成功")
+            this.title='添加成功'
+            this.User={}
+            this.onSubmit()
+          }else{
+            alert("表单格式错误,请仔细检查")
+          }
        })
      },
      onSubmit(){
        list(this.userRequest).then(res=>{
          this.userResponse=res.data
+
        })
      },

--- a/src/views/user2/index.vue
+++ b/src/views/user2/index.vue
@ -90,8 +90,9 @@

      <el-dialog :title="title" :visible.sync="dialogFormVisible">
        <el-form :model="User">
-          <el-form-item label="用户名字" :label-width="formLabelWidth">
-            <el-input v-model="User.userName" autocomplete="off"></el-input>
+          <el-form-item label="用户名称" :label-width="formLabelWidth">
+            <el-input v-model="User.userName"></el-input>
+            <el-button @click="userName2">验证用户名称</el-button>
          </el-form-item>
          <el-form-item label="用户密码" :label-width="formLabelWidth">
            <el-input v-model="User.userPwd" autocomplete="off"></el-input>
@ -104,9 +105,11 @@
          </el-form-item>
          <el-form-item label="用户身份证" :label-width="formLabelWidth">
            <el-input v-model="User.userIdcard" autocomplete="off"></el-input>
+            <el-button @click="userIdcard2">验证用户身份证</el-button>
          </el-form-item>
          <el-form-item label="用户年龄" :label-width="formLabelWidth">
            <el-input v-model="User.userAge" autocomplete="off"></el-input>
+            <el-button @click="userAge2">验证用户年龄</el-button>
          </el-form-item>
          <el-form-item label="用户性别" :label-width="formLabelWidth">
            <el-select v-model="User.userGender" placeholder="请选择">
@ -116,6 +119,7 @@
          </el-form-item>
          <el-form-item label="用户住址" :label-width="formLabelWidth">
            <el-input v-model="User.userAddress" autocomplete="off"></el-input>
+            <el-button @click="userAddress2">验证地址格式</el-button>
          </el-form-item>
          <el-form-item label="用户职位" :label-width="formLabelWidth">
            <el-select v-model="User.userPosition" placeholder="请选择">
@ -128,10 +132,13 @@
          </el-form-item>
          <el-form-item label="手机号" :label-width="formLabelWidth">
            <el-input v-model="User.phone" autocomplete="off"></el-input>
+            <el-button @click="phone2">验证手机号</el-button>
+
          </el-form-item>
-          <el-form-item label="工作开始时间" :label-width="formLabelWidth">
-            <el-input v-model="User.userDate" autocomplete="off"></el-input>
-          </el-form-item>
+<!--          <el-form-item label="工作开始时间" :label-width="formLabelWidth">-->
+<!--            <el-input v-model="User.userDate" autocomplete="off"></el-input>-->
+<!--          </el-form-item>-->
+
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
@ -160,13 +167,54 @@
        dialogFormVisible:false,
        formLabelWidth:"120px",
        title:'表单',
-        User:{}
-      }
+        User:{},
+
+        vailuserName:/^[\u4E00-\u9FA5]+$/,
+        vailuserIdcard:/^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/,
+        vailuserAge:/^(1?\d{1,2}|200)$/,
+        vailphone:/^\d{11}$/,
+        vailAddress:/^.{5,50}$/
+    }
    },
    created() {
      this.onSubmit()
    },
    methods: {
+      userAddress2(){
+        if (this.vailAddress.test(this.User.userAddress)){
+          alert("地址格式正确")
+        }else{
+          alert("地址格式错误")
+        }
+      },
+      phone2(){
+        if (this.vailphone.test(this.User.phone)){
+          alert("手机号格式正确")
+        }else{
+          alert("手机号格式错误")
+        }
+      },
+      userName2(){
+        if (this.vailuserName.test(this.User.userName)){
+          alert("用户名称格式正确")
+        }else{
+          alert("用户名称格式错误")
+        }
+      },
+      userIdcard2(){
+        if (this.vailuserIdcard.test(this.User.userIdcard)){
+          alert("身份证格式正确")
+        }else{
+          alert("身份证格式错误")
+        }
+      },
+      userAge2(){
+        if (this.vailuserAge.test(this.User.userAge)){
+          alert("年龄格式正确")
+        }else{
+          alert("年龄格式错误")
+        }
+      },
      deleteId(userId){
        deleteId(userId).then(res=>{
          alert("删除成功")
--- a/vue.config.js
+++ b/vue.config.js
@ -36,7 +36,15 @@ module.exports = {
      warnings: false,
      errors: true
    },
-    before: require('./mock/mock-server.js')
+    proxy: {
+      [process.env.VUE_APP_BASE_API]: {
+        target: 'http://127.0.0.1:18080',
+        changeOrigin: true,
+        pathRewrite: {
+          ['^' + process.env.VUE_APP_BASE_API]: ''
+        }
+      }
+    }
  },
  configureWebpack: {
    // provide the app's title in webpack's name field, so that