czsj-vue/src/views/account/locus/index.vue
2024-12-01 01:31:32 +08:00

327 lines
10 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="会员ID" prop="memberUid">
<el-input
v-model="queryParams.memberUid"
placeholder="请输入会员ID"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="处理日期" prop="createDate">
<el-date-picker clearable
v-model="queryParams.createDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择处理日期">
</el-date-picker>
</el-form-item>
<el-form-item label="创建人ID" prop="createUserId">
<el-input
v-model="queryParams.createUserId"
placeholder="请输入创建人ID"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="修改人ID" prop="updateUserId">
<el-input
v-model="queryParams.updateUserId"
placeholder="请输入修改人ID"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['account:locus:add']"
>新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['account:locus:edit']"
>修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['account:locus:remove']"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['account:locus:export']"
>导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="locusList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="会员轨迹ID" align="center" prop="uid" />
<el-table-column label="会员ID" align="center" prop="memberUid" />
<el-table-column label="轨迹类型(1:信息动态;2:社交动态;3:活动规则;4:待办动态)" align="center" prop="trajectoryType" />
<el-table-column label="文案内容" align="center" prop="content" />
<el-table-column label="处理日期" align="center" prop="createDate" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createDate, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column label="创建人ID" align="center" prop="createUserId" />
<el-table-column label="修改人ID" align="center" prop="updateUserId" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['account:locus:edit']"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['account:locus:remove']"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改会员轨迹信息对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="会员ID" prop="memberUid">
<el-input v-model="form.memberUid" placeholder="请输入会员ID" />
</el-form-item>
<el-form-item label="文案内容">
<editor v-model="form.content" :min-height="192"/>
</el-form-item>
<el-form-item label="处理日期" prop="createDate">
<el-date-picker clearable
v-model="form.createDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择处理日期">
</el-date-picker>
</el-form-item>
<el-form-item label="有效标识0有效1无效" prop="delFlag">
<el-input v-model="form.delFlag" placeholder="请输入有效标识0有效1无效" />
</el-form-item>
<el-form-item label="创建人ID" prop="createUserId">
<el-input v-model="form.createUserId" placeholder="请输入创建人ID" />
</el-form-item>
<el-form-item label="修改人ID" prop="updateUserId">
<el-input v-model="form.updateUserId" placeholder="请输入修改人ID" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { listLocus, getLocus, delLocus, addLocus, updateLocus } from "@/api/account/locus";
export default {
name: "Locus",
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 会员轨迹信息表格数据
locusList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
memberUid: null,
trajectoryType: null,
content: null,
createDate: null,
createUserId: null,
updateUserId: null
},
// 表单参数
form: {},
// 表单校验
rules: {
createTime: [
{ required: true, message: "创建时间不能为空", trigger: "blur" }
],
updateTime: [
{ required: true, message: "更新时间不能为空", trigger: "blur" }
],
delFlag: [
{ required: true, message: "有效标识0有效1无效不能为空", trigger: "blur" }
],
createUserId: [
{ required: true, message: "创建人ID不能为空", trigger: "blur" }
],
updateUserId: [
{ required: true, message: "修改人ID不能为空", trigger: "blur" }
]
}
};
},
created() {
this.getList();
},
methods: {
/** 查询会员轨迹信息列表 */
getList() {
this.loading = true;
listLocus(this.queryParams).then(response => {
this.locusList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
uid: null,
memberUid: null,
trajectoryType: null,
content: null,
createDate: null,
createTime: null,
updateTime: null,
delFlag: null,
createUserId: null,
updateUserId: null
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.uid)
this.single = selection.length!==1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加会员轨迹信息";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const uid = row.uid || this.ids
getLocus(uid).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改会员轨迹信息";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.uid != null) {
updateLocus(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addLocus(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const uids = row.uid || this.ids;
this.$modal.confirm('是否确认删除会员轨迹信息编号为"' + uids + '"的数据项?').then(function() {
return delLocus(uids);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.download('account/locus/export', {
...this.queryParams
}, `locus_${new Date().getTime()}.xlsx`)
}
}
};
</script>