CRM项目Element-Plus组件本土化设置活动列表页的新增活动跳转------CRM项目

旧约Alatus

于 2024-02-15 17:51:17 发布

阅读量845

点赞数 25

分类专栏： CRM项目 # VUE框架前端文章标签： vue.js 前端 javascript elementui 前端框架 vue json

本文链接：https://blog.csdn.net/2201_75960169/article/details/136121521

版权

前端同时被 3 个专栏收录

329 篇文章 2 订阅

订阅专栏

VUE框架

250 篇文章 0 订阅

订阅专栏

CRM项目

142 篇文章 0 订阅

订阅专栏

// 程序入口,相当于main方法
// 这里从vue下导入了一个createApp方法\函数
import { createApp } from 'vue'
// 从Element-Plus导入该组件
import ElementPlus from 'element-plus'
// 导入了我们默认的app组件
import App from './App.vue'
// 导入ElementPlus的中文包
import zhCn from 'element-plus/es/locale/lang/zh-cn';
import 'element-plus/dist/index.css'
import router from "./router/router.js"
import * as ElementPlusIconsVue from '@element-plus/icons-vue';

// 利用上面导入的createApp函数创建一个vue应用
// 并将app挂载到这个#app这个ID下
let app = createApp(App);
// 把所有的图标以component的形式注册上去
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

app.use(ElementPlus,{locale: zhCn,}).use(router).mount('#app')
// 程序入口,相当于main方法

// 这里从vue下导入了一个createApp方法\函数

import { createApp } from 'vue'

// 从Element-Plus导入该组件

import ElementPlus from 'element-plus'

// 导入了我们默认的app组件

import App from './App.vue'

// 导入ElementPlus的中文包

import zhCn from 'element-plus/es/locale/lang/zh-cn';

import 'element-plus/dist/index.css'

import router from "./router/router.js"

import * as ElementPlusIconsVue from '@element-plus/icons-vue';

// 利用上面导入的createApp函数创建一个vue应用

// 并将app挂载到这个#app这个ID下

let app = createApp(App);

// 把所有的图标以component的形式注册上去

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {

app.component(key, component)

}

app.use(ElementPlus,{locale: zhCn,}).use(router).mount('#app')

<template>
  
  <el-form :inline="true" :model="activityQuery" :rules="activityRules">

    <el-form-item label="负责人">
      <el-select
        v-model="activityQuery.ownerId"
        placeholder="请选择负责人"
        clearable
        @click="loadOwner()"
      >
      <el-option
          v-for="item in owners"
          :key="item.id"
          :label="item.name"
          :value="item.id"
      />
      </el-select>
    </el-form-item>

    <el-form-item label="活动名称">
      <el-input v-model="activityQuery.activityName" placeholder="请输入活动名称" clearable />
    </el-form-item>


    <el-form-item label="活动时间" class="date">
        <el-date-picker
        v-model="activityQuery.activityTime"
        type="datetimerange"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        value-format="YYYY-MM-DD HH:mm:ss"
      />
    </el-form-item>

    <el-form-item label="活动预算" prop="cost">
      <el-input v-model="activityQuery.cost" placeholder="请输入活动预算" clearable />
    </el-form-item>

    <el-form-item label="创建时间" class="createTime">
        <el-date-picker
        v-model="activityQuery.createTime"
        type="datetime"
        placeholder="请选择创建时间"
        value-format="YYYY-MM-DD HH:mm:ss"
      />
    </el-form-item>

    <el-form-item>
        <el-button type="primary" plain @click="onReset()">重置</el-button>
        <el-button type="primary" @click="onSearch()">搜索</el-button>
    </el-form-item>

  </el-form>

  <hr>

  
  <el-button type="primary" @click="addUser()">录入市场活动</el-button>
    <el-button type="danger" @click="batchDel()">批量删除</el-button>
    <el-table
        :data="activityList"
        style="width: 100%"
        @selection-change="handleSelectionChange"
    >
        
        <el-table-column type="selection" width="30%" />
        <el-table-column type="index" label="序号" width="52%" />
        <el-table-column prop="ownerDO.name" label="负责人" width="75%" show-overflow-tooltip />
        <el-table-column property="name" label="活动名称" width="150%" show-overflow-tooltip />
        <el-table-column property="startTime" label="开始时间" width="150%" show-overflow-tooltip />
        <el-table-column property="endTime" label="结束时间" width="150%" show-overflow-tooltip />
        <el-table-column property="cost" label="活动预算" width="150%" show-overflow-tooltip />
        <el-table-column property="createTime" label="创建时间" width="150%" show-overflow-tooltip />
        <el-table-column label="操作" show-overflow-tooltip>
            <template #default="scope">
                <el-button type="primary" @click="view(scope.row.id)">详情</el-button>
                <el-button type="success" @click="edit(scope.row.id)">编辑</el-button>
                <el-button type="danger" @click="del(scope.row.id)">删除</el-button> 
            </template>
        </el-table-column>
    </el-table>

    
    <div class="parent">
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="pageSize"
        :total="total"
        @prev-click="toPage"
        @next-click="toPage"
        @current-change="toPage"
     />
    </div>
</template>

<script>
import { doGet } from '../http/httpRequest.js';
import { messageTip } from '../util/util.js'
export default {
    name:"activityView",
    mounted(){
      this.getData(1);
    },
    data(){
        return {
            activityQuery : {},
            activityList : [{
              ownerDO : {}
            }],
            selectedIds : [],
            pageSize : 0,
            total : 0,
            owners : [{}],
            activityRules : {
              // 定义市场活动表单验证规则
              cost : [
                { pattern : /^[0-9]+(\.[0-9]{2})?$/, message: '活动预算必须是整数或者两位小数', trigger: 'blur'}
              ]
            }
        }
    },
    methods : {
        // 勾选或者取消勾选触发
        handleSelectionChange(selectionItems){
            this.selectedIds = [];
            // 将已经勾选的数据传给我们
            selectionItems.forEach(data => {
                this.selectedIds.push(data.id);
            });
        },
        onReset(){
          this.activityQuery = {};
        },
        addUser(){
          this.$router.push("/dashboard/activity/add")
        },
        onSearch(){
          this.getData(1);
        },
        toPage(current){
            // 把当前页作为current传递给获取数据方法,就可以实现分页查询了
            this.getData(current);
        },
        getData(current){
          //开始时间
          let startTime = '';
          // 结束时间
          let endTime = '';
          for( let key in this.activityQuery.activityTime){
            if(key === '0'){
              startTime = this.activityQuery.activityTime[key];
            }
            if(key === '1'){
              endTime = this.activityQuery.activityTime[key];
            }
          }
          //获取数据,查询用户列表数据
          doGet("/api/activities",{
              // 当前查询第几页
              current : current,
              // 6个搜索条件
              ownerId : this.activityQuery.ownerId,
              name : this.activityQuery.activityName,
              startTime : startTime,
              endTime : endTime,
              cost : this.activityQuery.cost,
              createTime : this.activityQuery.createTime
          }).then(resp => {
              if(resp.data.code === 200){
                  this.activityList = resp.data.data.list;
                  this.total = resp.data.data.total;
                  this.pageSize = resp.data.data.pageSize;
              }
              else{
                messageTip("网络错误","error");
              }
          });
        },
        loadOwner(){
          doGet("/api/user/activityOwner",{}).then(resp => {
                if(resp.data.code === 200){
                  this.owners = resp.data.data;
                }
                else{
                  messageTip("网络错误","error");
                }
            });
        }
    }
}
</script>

<style scoped>
.el-form-item{
    width: 20%;
}
.date{
    width: 50%;
}
.createTime{
    width: 30%;
}
</style>
<template>



<el-form :inline="true" :model="activityQuery" :rules="activityRules">

<el-form-item label="负责人">

<el-select

v-model="activityQuery.ownerId"

placeholder="请选择负责人"

clearable

@click="loadOwner()"

>

<el-option

v-for="item in owners"

:key="item.id"

:label="item.name"

:value="item.id"

/>

</el-select>

</el-form-item>

<el-form-item label="活动名称">

<el-input v-model="activityQuery.activityName" placeholder="请输入活动名称" clearable />

</el-form-item>

<el-form-item label="活动时间" class="date">

<el-date-picker

v-model="activityQuery.activityTime"

type="datetimerange"

start-placeholder="开始时间"

end-placeholder="结束时间"

value-format="YYYY-MM-DD HH:mm:ss"

/>

</el-form-item>

<el-form-item label="活动预算" prop="cost">

<el-input v-model="activityQuery.cost" placeholder="请输入活动预算" clearable />

</el-form-item>

<el-form-item label="创建时间" class="createTime">

<el-date-picker

v-model="activityQuery.createTime"

type="datetime"

placeholder="请选择创建时间"

value-format="YYYY-MM-DD HH:mm:ss"

/>

</el-form-item>

<el-form-item>

<el-button type="primary" plain @click="onReset()">重置</el-button>

<el-button type="primary" @click="onSearch()">搜索</el-button>

</el-form-item>

</el-form>

<hr>



<el-button type="primary" @click="addUser()">录入市场活动</el-button>

<el-button type="danger" @click="batchDel()">批量删除</el-button>

<el-table

:data="activityList"

style="width: 100%"

@selection-change="handleSelectionChange"

>



<el-table-column type="selection" width="30%" />

<el-table-column type="index" label="序号" width="52%" />

<el-table-column prop="ownerDO.name" label="负责人" width="75%" show-overflow-tooltip />

<el-table-column property="name" label="活动名称" width="150%" show-overflow-tooltip />

<el-table-column property="startTime" label="开始时间" width="150%" show-overflow-tooltip />

<el-table-column property="endTime" label="结束时间" width="150%" show-overflow-tooltip />

<el-table-column property="cost" label="活动预算" width="150%" show-overflow-tooltip />

<el-table-column property="createTime" label="创建时间" width="150%" show-overflow-tooltip />

<el-table-column label="操作" show-overflow-tooltip>

<template #default="scope">

<el-button type="primary" @click="view(scope.row.id)">详情</el-button>

<el-button type="success" @click="edit(scope.row.id)">编辑</el-button>

<el-button type="danger" @click="del(scope.row.id)">删除</el-button>

</template>

</el-table-column>

</el-table>



<div class="parent">

<el-pagination

background

layout="prev, pager, next"

:page-size="pageSize"

:total="total"

@prev-click="toPage"

@next-click="toPage"

@current-change="toPage"

/>

</div>

</template>

<script>

import { doGet } from '../http/httpRequest.js';

import { messageTip } from '../util/util.js'

export default {

name:"activityView",

mounted(){

this.getData(1);

},

data(){

return {

activityQuery : {},

activityList : [{

ownerDO : {}

}],

selectedIds : [],

pageSize : 0,

total : 0,

owners : [{}],

activityRules : {

// 定义市场活动表单验证规则

cost : [

{ pattern : /^[0-9]+(\.[0-9]{2})?$/, message: '活动预算必须是整数或者两位小数', trigger: 'blur'}

]

}

}

},

methods : {

// 勾选或者取消勾选触发

handleSelectionChange(selectionItems){

this.selectedIds = [];

// 将已经勾选的数据传给我们

selectionItems.forEach(data => {

this.selectedIds.push(data.id);

});

},

onReset(){

this.activityQuery = {};

},

addUser(){

this.$router.push("/dashboard/activity/add")

},

onSearch(){

this.getData(1);

},

toPage(current){

// 把当前页作为current传递给获取数据方法,就可以实现分页查询了

this.getData(current);

},

getData(current){

//开始时间

let startTime = '';

// 结束时间

let endTime = '';

for( let key in this.activityQuery.activityTime){

if(key === '0'){

startTime = this.activityQuery.activityTime[key];

}

if(key === '1'){

endTime = this.activityQuery.activityTime[key];

}

}

//获取数据,查询用户列表数据

doGet("/api/activities",{

// 当前查询第几页

current : current,

// 6个搜索条件

ownerId : this.activityQuery.ownerId,

name : this.activityQuery.activityName,

startTime : startTime,

endTime : endTime,

cost : this.activityQuery.cost,

createTime : this.activityQuery.createTime

}).then(resp => {

if(resp.data.code === 200){

this.activityList = resp.data.data.list;

this.total = resp.data.data.total;

this.pageSize = resp.data.data.pageSize;

}

else{

messageTip("网络错误","error");

}

});

},

loadOwner(){

doGet("/api/user/activityOwner",{}).then(resp => {

if(resp.data.code === 200){

this.owners = resp.data.data;

}

else{

messageTip("网络错误","error");

}

});

}

}

}

</script>

<style scoped>

.el-form-item{

width: 20%;

}

.date{

width: 50%;

}

.createTime{

width: 30%;

}

</style>

import { createRouter,createWebHistory } from "vue-router";

const router = createRouter({
    // 路由历史
    history:createWebHistory(),
    // 配置路由,可以配置多个路由
    routes:[
        {
            //路由路径
            path:"/",
            //对应路径的页面
            component:() => import('../view/login.vue')
        },
        {
            //路由路径
            path:"/dashboard",
            //对应路径的页面
            component:() => import('../view/dashboard.vue'),
            // 子路由
            children : [
                {
                    // 子路由的path开始不能有/
                    path:"user",
                    //对应路径的页面
                    component:() => import('../view/userView.vue'),
                },
                {
                    // 子路由路径
                    path:"user/detail/:id",
                    //路由路径所展示的页面
                    component : () => import('../view/userDetail.vue')
                },
                {
                    path:"activity",
                    component : () => import('../view/activityView.vue')
                },
                {
                    path:"activity/add",
                    component : () => import('../view/activityRecordView.vue')
                },
            ]
        }
    ]
});

export default router;
import { createRouter,createWebHistory } from "vue-router";

const router = createRouter({

// 路由历史

history:createWebHistory(),

// 配置路由,可以配置多个路由

routes:[

{

//路由路径

path:"/",

//对应路径的页面

component:() => import('../view/login.vue')

},

{

//路由路径

path:"/dashboard",

//对应路径的页面

component:() => import('../view/dashboard.vue'),

// 子路由

children : [

{

// 子路由的path开始不能有/

path:"user",

//对应路径的页面

component:() => import('../view/userView.vue'),

},

{

// 子路由路径

path:"user/detail/:id",

//路由路径所展示的页面

component : () => import('../view/userDetail.vue')

},

{

path:"activity",

component : () => import('../view/activityView.vue')

},

{

path:"activity/add",

component : () => import('../view/activityRecordView.vue')

},

]

}

]

});

export default router;