CRM项目列表显示细节效果调整适配页面------CRM项目

  • 开发
  • 45
<template>
    <el-button type="primary" @click="addUser()">新增用户</el-button>
    <el-button type="danger" @click="batchDel()">批量删除</el-button>
    <el-table
        :data="userList"
        style="width: 100%"
        @selection-change="handleSelectionChange"
    >
        <!-- 复选框    -->
        <el-table-column type="selection" width="33%" />
        <el-table-column type="index" label="序号" width="52%" />
        <el-table-column prop="loginAct" label="账号" width="90%" show-overflow-tooltip />
        <el-table-column property="name" label="姓名" width="75%" show-overflow-tooltip />
        <el-table-column property="phone" label="联系电话" show-overflow-tooltip />
        <el-table-column property="email" label="邮箱" show-overflow-tooltip />
        <el-table-column property="createTime" label="创建时间" 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>
     <!-- 新增用户的弹窗(对话框) -->
     <el-dialog v-model="dialogVisible" label-width="10%" :title="Title" width="55%" draggable>
        <el-form ref="userRefForm" :model="newUser" :rules="userRules">
            <el-form-item label="账号:" prop="loginAct">
                <el-input v-model="newUser.loginAct"/>
            </el-form-item>
            <el-form-item label="密码:" v-if="newUser.id">
                <el-input
                    v-model="newUser.loginPwd"
                    type="password"
                    placeholder="密码默认不可见,可在此修改"
                    show-password
                />
            </el-form-item>
            <el-form-item label="密码:" prop="loginPwd" v-else>
                <el-input
                    v-model="newUser.loginPwd"
                    type="password"
                    show-password
                />
            </el-form-item>
            <el-form-item label="姓名:" prop="name">
                <el-input v-model="newUser.name"/>
            </el-form-item>
            <el-form-item label="联系电话:" prop="phone">
                <el-input v-model="newUser.phone"/>
            </el-form-item>
            <el-form-item label="邮箱:" prop="email">
                <el-input v-model="newUser.email" type="email"/>
            </el-form-item>
            <el-form-item label="账号未过期:" prop="accountNoExpired">
                <el-select v-model="newUser.accountNoExpired" placeholder="请选择">
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="密码未过期:" prop="credentialsNoExpired">
                <el-select v-model="newUser.credentialsNoExpired" placeholder="请选择">              
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="账号未锁定:" prop="accountNoLocked">
                <el-select v-model="newUser.accountNoLocked" placeholder="请选择">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                    />
            </el-select>
            </el-form-item>
            <el-form-item label="账号是否启用:" prop="accountEnabled">
                <el-select v-model="newUser.accountEnabled" placeholder="请选择">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                    />
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
        <div class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="submit()">
            确定
            </el-button>
        </div>
        </template>
    </el-dialog>
</template>

<script>
import { doGet, doPost, doPut, doDelete } from '../http/httpRequest';
import { messageTip, messageConfirm } from '../util/util';
export default {
    name:"userView",
    inject : ['reload'],
    data(){
        return {
            userList : [],
            pageSize : 0,
            total : 0,
            dialogVisible : false,
            newUser : {},
            // 标题
            Title : "",
            selectedIds : [],
            // 下拉选项
            options : [
                { label : "是", value : 1 },
                { label : "否", value : 0 }
            ],
            userRules : {                
                // 定义用户验证规则
                loginAct : [
                    { required: true, message: '登录账号不能为空', trigger: 'blur' },
                    { min: 3, max: 32, message: '登录账号长度范围为3-32个字符', trigger: 'blur' }
                ],
                loginPwd : [
                    { required: true, message: '登录密码不能为空', trigger: 'blur' },
                    { min: 6, max: 16, message: '登录密码长度为6-16位', trigger: 'blur' }
                ],
                name : [
                    { required: true, message: '姓名不能为空', trigger: 'blur' },
                    { pattern : /^[\u4e00-\u9fa5]{0,}$/, message: '姓名必须是中文汉字', trigger: 'blur'}
                ],
                phone : [
                    { required: true, message: '手机号码不能为空', trigger: 'blur' },
                    { pattern : /^1[3-9]\d{9}$/, message: '手机号码格式有误', trigger: 'blur'}
                ],
                email : [
                    { required: true, message: '邮箱不能为空', trigger: 'blur' },
                    { pattern : /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, message: '邮箱格式有误', trigger: 'blur'}
                ],
                accountNoExpired : [
                    { required: true, message: '请选择账号是否未过期', trigger: 'blur' }
                ],
                credentialsNoExpired : [
                    { required: true, message: '请选择密码是否未过期', trigger: 'blur' }
                ],
                accountNoLocked : [
                    { required: true, message: '请选择账号是否未未锁定', trigger: 'blur' }
                ],
                accountEnabled : [
                    { required: true, message: '请选择账号是否可用', trigger: 'blur' }
                ]
            }
        }
    },
    mounted(){
        this.getData(1);
    },
    methods : {
        // 勾选或者取消勾选触发
        handleSelectionChange(selectionItems){
            this.selectedIds = [];
            // 将已经勾选的数据传给我们
            selectionItems.forEach(data => {
                this.selectedIds.push(data.id);
            });
        },
        batchDel(){
            if(!this.selectedIds.length){
                messageTip("请选择要删除的数据","warning");
                return;
            }
            messageConfirm("注意:删除后不可恢复","您确定要删除?").then(() => {
                let ids = this.selectedIds.join(",");
                doDelete("/api/user/batchDel",{ids : ids}).then(resp => {
                    if(resp.data.code === 200){
                        messageTip("批量删除成功","success");
                        this.reload();
                    }
                    else{
                        messageTip("批量删除失败:"+resp.data.msg,"error");
                    }
                });
            }).catch(() => {
              messageTip("已取消批量删除","warning");
            });  
        },
        submit(){
            this.$refs.userRefForm.validate((isValid) => {
                if(isValid){
                    let formData = new FormData();
                    for(let field in this.newUser){
                        if(this.newUser[field]){
                            formData.append(field,this.newUser[field]);
                        }
                    }
                    if(this.newUser.id){
                        doPut("/api/user/edit",formData).then(resp => {
                            if(resp.data.code === 200){
                                messageTip("修改成功","success");
                                this.dialogVisible = false;
                                this.reload();
                            }
                            else{
                                messageTip("修改失败","error");
                            }
                        });
                    }
                    else{
                        doPost("/api/user/add",formData).then(resp => {
                        if(resp.data.code === 200){
                            messageTip("提交成功","success");
                            this.dialogVisible = false;
                            this.reload();
                        }
                        else{
                            messageTip("提交失败","error");
                        }
                    });
                    }
                }
            });
        },
        // 自动传参
        toPage(current){
            // 把当前页作为current传递给获取数据方法,就可以实现分页查询了
            this.getData(current);
        },
        getData(current){
            //获取数据,查询用户列表数据
            doGet("api/users",{
                // 当前查询第几页
                current : current
            }).then(resp => {
                if(resp.data.code === 200){
                    this.userList = resp.data.data.list;
                    this.total = resp.data.data.total;
                    this.pageSize = resp.data.data.pageSize;
                }
                else{
                  messageTip("网络错误","error");
                }
            });
        },
        view(id){
            // $route是获取当前路由的属性信息,不要和router搞混了
            this.$router.push("/dashboard/user/detail/"+id);
        },
        edit(id){
            this.Title = "修改用户信息";
            // $router是调用路由对象的方法,如push跳转等
            this.dialogVisible = true;
            this.loadUser(id);
        },
        loadUser(id){
            doGet("/api/user/" + id,{}).then(resp => {
                if(resp.data.code === 200){
                    this.newUser = resp.data.data;
                    this.newUser.loginPwd = "";
                }
                else{
                  messageTip("网络错误","error");
                }
            });
        },
        del(id){
            messageConfirm("注意:删除后不可恢复","您确定要删除?").then(() => {
                // 点击确定按钮
                doDelete("/api/user/del/" + id,{}).then(resp => {
                    if(resp.data.code === 200){
                        messageTip('删除成功','success');
                        this.reload();
                    }
                    else{
                        messageTip('删除失败:'+resp.data.msg,'error');
                    }
                });
                }).catch(() => {
                // 点击取消按钮
                    messageTip("已取消删除",'warning');
            });
        },
        addUser(){
            this.newUser = {};
            this.dialogVisible = true;
            this.Title = "新增用户";
        }
    }
}
</script>

<style>
</style>

<template>

    <el-button type="primary" @click="addUser()">新增用户</el-button>

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

    <el-table

        :data="userList"

        style="width: 100%"

        @selection-change="handleSelectionChange"

    >

        <!-- 复选框    -->

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

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

        <el-table-column prop="loginAct" label="账号" width="90%" show-overflow-tooltip />

        <el-table-column property="name" label="姓名" width="75%" show-overflow-tooltip />

        <el-table-column property="phone" label="联系电话" show-overflow-tooltip />

        <el-table-column property="email" label="邮箱" show-overflow-tooltip />

        <el-table-column property="createTime" label="创建时间" 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>

     <!-- 新增用户的弹窗(对话框) -->

     <el-dialog v-model="dialogVisible" label-width="10%" :title="Title" width="55%" draggable>

        <el-form ref="userRefForm" :model="newUser" :rules="userRules">

            <el-form-item label="账号:" prop="loginAct">

                <el-input v-model="newUser.loginAct"/>

            </el-form-item>

            <el-form-item label="密码:" v-if="newUser.id">

                <el-input

                    v-model="newUser.loginPwd"

                    type="password"

                    placeholder="密码默认不可见,可在此修改"

                    show-password

                />

            </el-form-item>

            <el-form-item label="密码:" prop="loginPwd" v-else>

                <el-input

                    v-model="newUser.loginPwd"

                    type="password"

                    show-password

                />

            </el-form-item>

            <el-form-item label="姓名:" prop="name">

                <el-input v-model="newUser.name"/>

            </el-form-item>

            <el-form-item label="联系电话:" prop="phone">

                <el-input v-model="newUser.phone"/>

            </el-form-item>

            <el-form-item label="邮箱:" prop="email">

                <el-input v-model="newUser.email" type="email"/>

            </el-form-item>

            <el-form-item label="账号未过期:" prop="accountNoExpired">

                <el-select v-model="newUser.accountNoExpired" placeholder="请选择">

                    <el-option

                        v-for="item in options"

                        :key="item.value"

                        :label="item.label"

                        :value="item.value"

                    />

                </el-select>

            </el-form-item>

            <el-form-item label="密码未过期:" prop="credentialsNoExpired">

                <el-select v-model="newUser.credentialsNoExpired" placeholder="请选择">              

                    <el-option

                            v-for="item in options"

                            :key="item.value"

                            :label="item.label"

                            :value="item.value"

                    />

                </el-select>

            </el-form-item>

            <el-form-item label="账号未锁定:" prop="accountNoLocked">

                <el-select v-model="newUser.accountNoLocked" placeholder="请选择">

                    <el-option

                            v-for="item in options"

                            :key="item.value"

                            :label="item.label"

                            :value="item.value"

                    />

            </el-select>

            </el-form-item>

            <el-form-item label="账号是否启用:" prop="accountEnabled">

                <el-select v-model="newUser.accountEnabled" placeholder="请选择">

                    <el-option

                            v-for="item in options"

                            :key="item.value"

                            :label="item.label"

                            :value="item.value"

                    />

                </el-select>

            </el-form-item>

        </el-form>

        <template #footer>

        <div class="dialog-footer">

            <el-button @click="dialogVisible = false">取消</el-button>

            <el-button type="primary" @click="submit()">

            确定

            </el-button>

        </div>

        </template>

    </el-dialog>

</template>

<script>

import { doGet, doPost, doPut, doDelete } from '../http/httpRequest';

import { messageTip, messageConfirm } from '../util/util';

export default {

    name:"userView",

    inject : ['reload'],

    data(){

        return {

            userList : [],

            pageSize : 0,

            total : 0,

            dialogVisible : false,

            newUser : {},

            // 标题

            Title : "",

            selectedIds : [],

            // 下拉选项

            options : [

                { label : "是", value : 1 },

                { label : "否", value : 0 }

            ],

            userRules : {                

                // 定义用户验证规则

                loginAct : [

                    { required: true, message: '登录账号不能为空', trigger: 'blur' },

                    { min: 3, max: 32, message: '登录账号长度范围为3-32个字符', trigger: 'blur' }

                ],

                loginPwd : [

                    { required: true, message: '登录密码不能为空', trigger: 'blur' },

                    { min: 6, max: 16, message: '登录密码长度为6-16位', trigger: 'blur' }

                ],

                name : [

                    { required: true, message: '姓名不能为空', trigger: 'blur' },

                    { pattern : /^[\u4e00-\u9fa5]{0,}$/, message: '姓名必须是中文汉字', trigger: 'blur'}

                ],

                phone : [

                    { required: true, message: '手机号码不能为空', trigger: 'blur' },

                    { pattern : /^1[3-9]\d{9}$/, message: '手机号码格式有误', trigger: 'blur'}

                ],

                email : [

                    { required: true, message: '邮箱不能为空', trigger: 'blur' },

                    { pattern : /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, message: '邮箱格式有误', trigger: 'blur'}

                ],

                accountNoExpired : [

                    { required: true, message: '请选择账号是否未过期', trigger: 'blur' }

                ],

                credentialsNoExpired : [

                    { required: true, message: '请选择密码是否未过期', trigger: 'blur' }

                ],

                accountNoLocked : [

                    { required: true, message: '请选择账号是否未未锁定', trigger: 'blur' }

                ],

                accountEnabled : [

                    { required: true, message: '请选择账号是否可用', trigger: 'blur' }

                ]

            }

        }

    },

    mounted(){

        this.getData(1);

    },

    methods : {

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

        handleSelectionChange(selectionItems){

            this.selectedIds = [];

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

            selectionItems.forEach(data => {

                this.selectedIds.push(data.id);

            });

        },

        batchDel(){

            if(!this.selectedIds.length){

                messageTip("请选择要删除的数据","warning");

                return;

            }

            messageConfirm("注意:删除后不可恢复","您确定要删除?").then(() => {

                let ids = this.selectedIds.join(",");

                doDelete("/api/user/batchDel",{ids : ids}).then(resp => {

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

                        messageTip("批量删除成功","success");

                        this.reload();

                    }

                    else{

                        messageTip("批量删除失败:"+resp.data.msg,"error");

                    }

                });

            }).catch(() => {

              messageTip("已取消批量删除","warning");

            });  

        },

        submit(){

            this.$refs.userRefForm.validate((isValid) => {

                if(isValid){

                    let formData = new FormData();

                    for(let field in this.newUser){

                        if(this.newUser[field]){

                            formData.append(field,this.newUser[field]);

                        }

                    }

                    if(this.newUser.id){

                        doPut("/api/user/edit",formData).then(resp => {

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

                                messageTip("修改成功","success");

                                this.dialogVisible = false;

                                this.reload();

                            }

                            else{

                                messageTip("修改失败","error");

                            }

                        });

                    }

                    else{

                        doPost("/api/user/add",formData).then(resp => {

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

                            messageTip("提交成功","success");

                            this.dialogVisible = false;

                            this.reload();

                        }

                        else{

                            messageTip("提交失败","error");

                        }

                    });

                    }

                }

            });

        },

        // 自动传参

        toPage(current){

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

            this.getData(current);

        },

        getData(current){

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

            doGet("api/users",{

                // 当前查询第几页

                current : current

            }).then(resp => {

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

                    this.userList = resp.data.data.list;

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

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

                }

                else{

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

                }

            });

        },

        view(id){

            // $route是获取当前路由的属性信息,不要和router搞混了

            this.$router.push("/dashboard/user/detail/"+id);

        },

        edit(id){

            this.Title = "修改用户信息";

            // $router是调用路由对象的方法,如push跳转等

            this.dialogVisible = true;

            this.loadUser(id);

        },

        loadUser(id){

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

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

                    this.newUser = resp.data.data;

                    this.newUser.loginPwd = "";

                }

                else{

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

                }

            });

        },

        del(id){

            messageConfirm("注意:删除后不可恢复","您确定要删除?").then(() => {

                // 点击确定按钮

                doDelete("/api/user/del/" + id,{}).then(resp => {

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

                        messageTip('删除成功','success');

                        this.reload();

                    }

                    else{

                        messageTip('删除失败:'+resp.data.msg,'error');

                    }

                });

                }).catch(() => {

                // 点击取消按钮

                    messageTip("已取消删除",'warning');

            });

        },

        addUser(){

            this.newUser = {};

            this.dialogVisible = true;

            this.Title = "新增用户";

        }

    }

}

</script>

<style>

</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="28%" />
        <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="100%" show-overflow-tooltip />
        <el-table-column property="startTime" label="开始时间" show-overflow-tooltip />
        <el-table-column property="endTime" label="结束时间" show-overflow-tooltip />
        <el-table-column property="cost" label="活动预算" width="80%" show-overflow-tooltip />
        <el-table-column property="createTime" label="创建时间" 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 : [{
              id : 0,
              name : ""
            }],
            activityRules : {
              // 定义市场活动表单验证规则
              cost : [
                { pattern : /^[0-9]+(\.[0-9]{2})?$/, message: '活动预算必须是整数或者两位小数', trigger: 'blur'}
              ]
            }
        }
    },
    methods : {
        // 勾选或者取消勾选触发
        handleSelectionChange(selectionItems){
            this.selectedIds = [];
            // 将已经勾选的数据传给我们
            selectionItems.forEach(data => {
                this.selectedIds.push(data.id);
            });
        },
        edit(id){
          this.$router.push("/dashboard/activity/edit/"+id);
        },
        view(id){
          this.$router.push("/dashboard/activity/detail/"+id);
        },
        del(){

        },
        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="28%" />

        <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="100%" show-overflow-tooltip />

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

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

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

        <el-table-column property="createTime" label="创建时间" 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 : [{

              id : 0,

              name : ""

            }],

            activityRules : {

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

              cost : [

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

              ]

            }

        }

    },

    methods : {

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

        handleSelectionChange(selectionItems){

            this.selectedIds = [];

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

            selectionItems.forEach(data => {

                this.selectedIds.push(data.id);

            });

        },

        edit(id){

          this.$router.push("/dashboard/activity/edit/"+id);

        },

        view(id){

          this.$router.push("/dashboard/activity/detail/"+id);

        },

        del(){

        },

        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 ref="activityRefForm" :model="activityRemarkQuery" label-width="20%" :rules="activityRemarkRules">
        <el-form-item label="ID">
          <div class="detail">{
   {activityDetail.id}}&nbsp;</div>
        </el-form-item>

        <el-form-item label="负责人">
          <div class="detail"> {
   {activityDetail.ownerDO.name}}&nbsp;</div>
        </el-form-item>

        <el-form-item label="活动名称">
          <div class="detail">{
   {activityDetail.name}}&nbsp;</div>
        </el-form-item>

        <el-form-item label="开始时间">
          <div class="detail">{
   {activityDetail.startDate}}&nbsp;</div>
        </el-form-item>

        <el-form-item label="结束时间">
          <div class="detail">{
   {activityDetail.endDate}}&nbsp;</div>
        </el-form-item>

        <el-form-item label="活动预算">
        <div class="detail">{
   {activityDetail.cost}}&nbsp;</div>
        </el-form-item>

        <el-form-item label="活动描述">
          <div class="detail">{
   {activityDetail.description}}&nbsp;</div>
        </el-form-item>

        <el-form-item label="创建时间">
          <div class="detail">{
   {activityDetail.createTime}}&nbsp;</div>
        </el-form-item>

        <el-form-item label="创建人">
          <div class="detail">{
   {activityDetail.createByDO.name}}&nbsp;</div>
        </el-form-item>

        <el-form-item label="编辑时间">
          <div class="detail">{
   {activityDetail.editTime}}&nbsp;</div>
        </el-form-item>

        <el-form-item label="编辑人">
          <div class="detail">{
   {activityDetail.editByDO.name}}&nbsp;</div>
        </el-form-item>

        <el-form-item label="填写备注:" prop="noteContent">
            <el-input
                v-model="activityRemarkQuery.noteContent"
                :rows="8"
                type="textarea"
                placeholder="请输入活动备注"
            />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submit()">提交</el-button>
          <el-button @click="goBack()">返回</el-button>
        </el-form-item>
        
    </el-form>
    <hr>
    <el-table
        :data="activityRemarkList"
        style="width: 100%"
    >
        <el-table-column type="index" label="序号" width="52%" />
        <el-table-column property="createByDO.name" label="备注人" width="75%" show-overflow-tooltip />
        <el-table-column property="createTime" label="备注时间" show-overflow-tooltip />
        <el-table-column property="editByDO.name" label="编辑人" width="75%" show-overflow-tooltip />
        <el-table-column property="editTime" label="编辑时间" show-overflow-tooltip />
        <el-table-column prop="noteContent" label="备注内容" show-overflow-tooltip />
        <el-table-column label="操作" show-overflow-tooltip>
            <template #default="scope">
                <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, doPost } from '../http/httpRequest';
import { goBack,messageTip } from '../util/util.js';
export default {
    name : "activityDetail",
    mounted(){
        this.loadActivityDetail();
        this.getData(1);
    },
    inject : ["reload"],
    data(){
        return {
            activityRules : {},
            activityDetail : {
                ownerDO : {},
                createByDO : {},
                editByDO : {}
            },
            activityRemarkList : [
              {
                createByDO : {},
                editByDO : {}
              }
            ],
            pageSize : 0,
            total : 0,
            activityRemarkQuery : {
              noteContent : ""
            },
            activityRemarkRules : {
              noteContent : [
                { required: true, message: '请输入活动备注', trigger: 'blur' },
                { min: 5, max: 255, message: '活动备注长度为5-255字符', trigger: 'blur' }
              ]
            }
        }
    },
    methods : {
        loadActivityDetail(){
            let id = this.$route.params.id;
            doGet("/api/activity/"+id,{}).then(resp => {
                if(resp.data.code === 200){
                  this.activityDetail = resp.data.data;
                  if(!this.activityDetail.ownerDO){
                    this.activityDetail.ownerDO = {};
                  }
                  if(!this.activityDetail.createByDO){
                    this.activityDetail.createByDO = {};
                  }
                  if(!this.activityDetail.editByDO){
                    this.activityDetail.editByDO = {};
                  }
                  this.activityDetail.id = id;
                }
                else{
                  messageTip("网络错误","error");
                }
            });    
        },
        toPage(current){
            // 把当前页作为current传递给获取数据方法,就可以实现分页查询了
            this.getData(current);
        },
        getData(current){
          //获取数据,查询用户列表数据
          doGet("/api/acitivity/remark",{
              // 当前查询第几页
              current : current,
              activityId : this.$route.params.id
          }).then(resp => {
              if(resp.data.code === 200){
                  this.activityRemarkList = resp.data.data.list;
                  console.log(resp.data.data.list)
                  this.pageSize = resp.data.data.pageSize;
                  this.total = resp.data.data.total;
              }
              else{
                messageTip("网络错误","error");
              }
          });
        },
        submit(){
          this.$refs.activityRefForm.validate((isValid) => {
            if(isValid){
              doPost("/api/activity/remark",{
                activityId : this.activityDetail.id,
                noteContent : this.activityRemarkQuery.noteContent
              }).then(resp => {
                if(resp.data.code === 200){
                  messageTip("提交成功","success");
                  this.reload();
                }
                else{
                  messageTip("网络错误","error");
                }
              })
            }
          });
        },
        goBack,
        edit(id){
          
        },
        del(id){
          messageConfirm("注意:删除后不可恢复","您确定要删除?").then(() => {
                doDelete("/api/activity/remark/delete",{id : id}).then(resp => {
                    if(resp.data.code === 200){
                        messageTip("删除成功","success");
                        this.reload();
                    }
                    else{
                        messageTip("删除失败:"+resp.data.msg,"error");
                    }
                });
            }).catch(() => {
              messageTip("已取消删除","warning");
            }); 
        }
    }
}
</script>

<style>
</style>

<template>

    <el-form ref="activityRefForm" :model="activityRemarkQuery" label-width="20%" :rules="activityRemarkRules">

        <el-form-item label="ID">

          <div class="detail">{ {activityDetail.id}}&nbsp;</div>

        </el-form-item>

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

          <div class="detail"> { {activityDetail.ownerDO.name}}&nbsp;</div>

        </el-form-item>

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

          <div class="detail">{ {activityDetail.name}}&nbsp;</div>

        </el-form-item>

        <el-form-item label="开始时间">

          <div class="detail">{ {activityDetail.startDate}}&nbsp;</div>

        </el-form-item>

        <el-form-item label="结束时间">

          <div class="detail">{ {activityDetail.endDate}}&nbsp;</div>

        </el-form-item>

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

        <div class="detail">{ {activityDetail.cost}}&nbsp;</div>

        </el-form-item>

        <el-form-item label="活动描述">

          <div class="detail">{ {activityDetail.description}}&nbsp;</div>

        </el-form-item>

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

          <div class="detail">{ {activityDetail.createTime}}&nbsp;</div>

        </el-form-item>

        <el-form-item label="创建人">

          <div class="detail">{ {activityDetail.createByDO.name}}&nbsp;</div>

        </el-form-item>

        <el-form-item label="编辑时间">

          <div class="detail">{ {activityDetail.editTime}}&nbsp;</div>

        </el-form-item>

        <el-form-item label="编辑人">

          <div class="detail">{ {activityDetail.editByDO.name}}&nbsp;</div>

        </el-form-item>

        <el-form-item label="填写备注:" prop="noteContent">

            <el-input

                v-model="activityRemarkQuery.noteContent"

                :rows="8"

                type="textarea"

                placeholder="请输入活动备注"

            />

        </el-form-item>

        <el-form-item>

          <el-button type="primary" @click="submit()">提交</el-button>

          <el-button @click="goBack()">返回</el-button>

        </el-form-item>

       

    </el-form>

    <hr>

    <el-table

        :data="activityRemarkList"

        style="width: 100%"

    >

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

        <el-table-column property="createByDO.name" label="备注人" width="75%" show-overflow-tooltip />

        <el-table-column property="createTime" label="备注时间" show-overflow-tooltip />

        <el-table-column property="editByDO.name" label="编辑人" width="75%" show-overflow-tooltip />

        <el-table-column property="editTime" label="编辑时间" show-overflow-tooltip />

        <el-table-column prop="noteContent" label="备注内容" show-overflow-tooltip />

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

            <template #default="scope">

                <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, doPost } from '../http/httpRequest';

import { goBack,messageTip } from '../util/util.js';

export default {

    name : "activityDetail",

    mounted(){

        this.loadActivityDetail();

        this.getData(1);

    },

    inject : ["reload"],

    data(){

        return {

            activityRules : {},

            activityDetail : {

                ownerDO : {},

                createByDO : {},

                editByDO : {}

            },

            activityRemarkList : [

              {

                createByDO : {},

                editByDO : {}

              }

            ],

            pageSize : 0,

            total : 0,

            activityRemarkQuery : {

              noteContent : ""

            },

            activityRemarkRules : {

              noteContent : [

                { required: true, message: '请输入活动备注', trigger: 'blur' },

                { min: 5, max: 255, message: '活动备注长度为5-255字符', trigger: 'blur' }

              ]

            }

        }

    },

    methods : {

        loadActivityDetail(){

            let id = this.$route.params.id;

            doGet("/api/activity/"+id,{}).then(resp => {

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

                  this.activityDetail = resp.data.data;

                  if(!this.activityDetail.ownerDO){

                    this.activityDetail.ownerDO = {};

                  }

                  if(!this.activityDetail.createByDO){

                    this.activityDetail.createByDO = {};

                  }

                  if(!this.activityDetail.editByDO){

                    this.activityDetail.editByDO = {};

                  }

                  this.activityDetail.id = id;

                }

                else{

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

                }

            });    

        },

        toPage(current){

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

            this.getData(current);

        },

        getData(current){

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

          doGet("/api/acitivity/remark",{

              // 当前查询第几页

              current : current,

              activityId : this.$route.params.id

          }).then(resp => {

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

                  this.activityRemarkList = resp.data.data.list;

                  console.log(resp.data.data.list)

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

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

              }

              else{

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

              }

          });

        },

        submit(){

          this.$refs.activityRefForm.validate((isValid) => {

            if(isValid){

              doPost("/api/activity/remark",{

                activityId : this.activityDetail.id,

                noteContent : this.activityRemarkQuery.noteContent

              }).then(resp => {

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

                  messageTip("提交成功","success");

                  this.reload();

                }

                else{

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

                }

              })

            }

          });

        },

        goBack,

        edit(id){

         

        },

        del(id){

          messageConfirm("注意:删除后不可恢复","您确定要删除?").then(() => {

                doDelete("/api/activity/remark/delete",{id : id}).then(resp => {

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

                        messageTip("删除成功","success");

                        this.reload();

                    }

                    else{

                        messageTip("删除失败:"+resp.data.msg,"error");

                    }

                });

            }).catch(() => {

              messageTip("已取消删除","warning");

            });

        }

    }

}

</script>

<style>

</style>

阅读全部

相关推荐

  1. CRM项目列表显示细节效果调整适配页面------CRM项目

    2024-02-20 11:40:02       46 阅读

  2. CRM项目活动列表页使用封装的Axios请求向后台请求活动信息数据------CRM项目

    2024-02-20 11:40:02       46 阅读

  5. CRM项目基于JWT实现Token回传Json给前台登录保持并用redis储存登录信息------CRM项目

    2024-02-20 11:40:02       42 阅读

  6. CRM项目使用redis作为缓存工具类并通过Redis-Service的逻辑拆分实现解耦合------CRM项目

    2024-02-20 11:40:02       53 阅读

  8. SpringMVC项目报错ClassNotFoundException: com.bbb.XXX

    2024-02-20 11:40:02       36 阅读

最近更新

  3. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-02-20 11:40:02       98 阅读

  4. Could not load dynamic library ‘cudart64_100.dll‘

    2024-02-20 11:40:02       106 阅读

  9. 在Django里面运行非项目文件

    2024-02-20 11:40:02       87 阅读

  19. Python语言-面向对象

    2024-02-20 11:40:02       96 阅读

  20. 如何分清楚常见的 Git 分支管理策略Git Flow、GitHub Flow 和 GitLab Flow

    2024-02-20 11:40:02       91 阅读

热门阅读

  2. 代码随想录算法训练营第三十天|860.柠檬水找零，406.根据身高重建队列，452. 用最少数量的箭引爆气球

    2024-02-20 11:40:02       62 阅读

  4. 学习 Kubernetes（K8s）、常用命令

    2024-02-20 11:40:02       62 阅读

  5. K8S学习

    2024-02-20 11:40:02       55 阅读

  7. 蓝桥杯刷题--python-9(2023填空题2）

    2024-02-20 11:40:02       57 阅读

  9. 2.Angular组件概述

    2024-02-20 11:40:02       52 阅读

  14. 自存放忘 angular 动态加载子节点

    2024-02-20 11:40:02       41 阅读

  16. 消息中间件：Puslar、Kafka、RabbigMQ、ActiveMQ

    2024-02-20 11:40:02       42 阅读

  17. 你知道Web框架有哪些吗?

    2024-02-20 11:40:02       50 阅读

  18. uni-app判断不同端

    2024-02-20 11:40:02       47 阅读

  20. PMP考试之20240220

    2024-02-20 11:40:02       51 阅读

  21. Springboot JPA实现多数据源配置

    2024-02-20 11:40:02       55 阅读

  23. nginx 安装

    2024-02-20 11:40:02       56 阅读
  24. Nginx

    Nginx

    2024-02-20 11:40:02      49 阅读

  27. Flask——基本前后端数据传输示例

    2024-02-20 11:40:02       54 阅读

  29. vscode导入其他文件夹下报错No Module

    2024-02-20 11:40:02       56 阅读