向文可
3 years ago
parent
5b836978d8
commit
cfb3675f99
@ -0,0 +1,28 @@
|
||||
import request from '@/utils/request.js';
|
||||
export const search = (params) => {
|
||||
return request({
|
||||
url: '/mall/marketing/advertisement',
|
||||
method: 'get',
|
||||
params,
|
||||
});
|
||||
};
|
||||
export const detail = (id) => {
|
||||
return request({
|
||||
url: '/mall/marketing/advertisement/' + id,
|
||||
method: 'get',
|
||||
});
|
||||
};
|
||||
export const create = (data) => {
|
||||
return request({
|
||||
url: '/mall/marketing/advertisement',
|
||||
method: 'post',
|
||||
data,
|
||||
});
|
||||
};
|
||||
export const update = (data) => {
|
||||
return request({
|
||||
url: '/mall/marketing/advertisement/' + data.id,
|
||||
method: 'put',
|
||||
data,
|
||||
});
|
||||
};
|
||||
@ -0,0 +1,134 @@
|
||||
import * as api from '@/api/permission/employee.js';
|
||||
import * as categoryAPI from '@/api/sales/category.js';
|
||||
import { ElMessage, ElMessageBox } from '@/plugins/element-plus';
|
||||
const state = () => ({
|
||||
code: 'AdvertiseManagement',
|
||||
condition: {},
|
||||
list: [],
|
||||
total: 0,
|
||||
opts: {
|
||||
init: false,
|
||||
location: [
|
||||
{
|
||||
label: '首页轮播',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '首页金刚区',
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
label: '商品分类广告',
|
||||
value: 3,
|
||||
},
|
||||
],
|
||||
platform: [
|
||||
{
|
||||
label: '移动端',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: 'PC端',
|
||||
value: 2,
|
||||
},
|
||||
],
|
||||
status: [
|
||||
{
|
||||
label: '未启用',
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
label: '已启用',
|
||||
value: 1,
|
||||
},
|
||||
],
|
||||
category: [],
|
||||
},
|
||||
});
|
||||
const getters = {};
|
||||
const mutations = {
|
||||
setCode: (state, data) => (state.code = data),
|
||||
setCondition: (state, data) => (state.condition = data),
|
||||
setList: (state, data) => (state.list = data),
|
||||
setTotal: (state, data) => (state.total = data),
|
||||
setOpts: (state, data) => (state.opts = data),
|
||||
};
|
||||
const actions = {
|
||||
search: async ({ state, commit, rootGetters }) => {
|
||||
let res = await api.search({ ...rootGetters['local/page'](state.code), ...state.condition });
|
||||
if (res) {
|
||||
commit('setList', res.records);
|
||||
commit('setTotal', res.total);
|
||||
} else {
|
||||
ElMessage.error('查询失败');
|
||||
commit('setList', []);
|
||||
}
|
||||
return res;
|
||||
},
|
||||
load: async ({ state, commit }) => {
|
||||
commit('setOpts', {
|
||||
...state.opts,
|
||||
init: true,
|
||||
category: await categoryAPI.search(),
|
||||
});
|
||||
},
|
||||
detail: async (context, id) => {
|
||||
let res = await api.detail(id);
|
||||
if (!res) {
|
||||
ElMessage.error('加载详情失败');
|
||||
}
|
||||
return res;
|
||||
},
|
||||
save: async ({ dispatch }, data) => {
|
||||
let save = data.id ? api.update : api.create;
|
||||
let res = await save(data);
|
||||
if (res) {
|
||||
if (!data.id) {
|
||||
data.id = res;
|
||||
}
|
||||
res = await api.savePermission(data.id, { roleIds: data.roleIds });
|
||||
if (res) {
|
||||
ElMessage.success('保存成功');
|
||||
dispatch('search');
|
||||
} else {
|
||||
ElMessage.error('保存角色失败');
|
||||
}
|
||||
} else {
|
||||
ElMessage.error('保存失败');
|
||||
}
|
||||
return res;
|
||||
},
|
||||
remove: async ({ dispatch }, idList) => {
|
||||
if (!idList.length) {
|
||||
ElMessage.warning('请选择要删除的数据');
|
||||
} else {
|
||||
try {
|
||||
await ElMessageBox.confirm('数据删除后无法恢复，确定要删除吗?', '危险操作');
|
||||
let res = await api.remove(idList.join(','));
|
||||
if (res) {
|
||||
ElMessage.success('删除成功');
|
||||
dispatch('search');
|
||||
} else {
|
||||
ElMessage.error('删除失败');
|
||||
}
|
||||
} catch (e) {
|
||||
console.info('取消删除', e);
|
||||
}
|
||||
}
|
||||
},
|
||||
enable: async ({ dispatch }, data) => {
|
||||
let res = await api.update(data);
|
||||
if (res) {
|
||||
ElMessage.success((data.isEnable ? '启用' : '禁用') + '成功');
|
||||
dispatch('search');
|
||||
} else {
|
||||
ElMessage.error((data.isEnable ? '启用' : '禁用') + '失败');
|
||||
}
|
||||
},
|
||||
};
|
||||
export default {
|
||||
state,
|
||||
getters,
|
||||
mutations,
|
||||
actions,
|
||||
};
|
||||
@ -0,0 +1,215 @@
|
||||
<template>
|
||||
<div class="form-container">
|
||||
<el-form
|
||||
ref="refsForm"
|
||||
v-loading="loading"
|
||||
class="form-content"
|
||||
label-width="100px"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
>
|
||||
<el-form-item label="广告平台" prop="platform">
|
||||
<el-radio-group v-model="form.platform" :opts="opts.platform" />
|
||||
</el-form-item>
|
||||
<el-form-item label="广告位置" prop="location">
|
||||
<el-select v-model="form.location" :opts="opts.location" />
|
||||
</el-form-item>
|
||||
<el-form-item label="商品分类" prop="categoryId">
|
||||
<el-select v-model="form.categoryId" :opts="opts.category" />
|
||||
</el-form-item>
|
||||
<el-form-item label="员工姓名" prop="employeeName">
|
||||
<el-input v-model="form.employeeName" />
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号" prop="phone">
|
||||
<el-input v-model="form.phone" />
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱" prop="email">
|
||||
<el-input v-model="form.email" />
|
||||
</el-form-item>
|
||||
<el-form-item label="是否启用" prop="isEnable">
|
||||
<el-switch v-model="form.isEnable" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" type="textarea" />
|
||||
</el-form-item>
|
||||
<el-form-item label="账号角色" prop="roleIds">
|
||||
<div class="role-list">
|
||||
<div v-for="(item, index) in opts.system" :key="index" class="system">
|
||||
<h3 class="system-header">
|
||||
{{ item.systemName }}
|
||||
</h3>
|
||||
<div class="flex">
|
||||
<el-tag
|
||||
v-for="(role, j) in handleSystemRole(item.id)"
|
||||
:key="index + '' + j"
|
||||
closable
|
||||
size="large"
|
||||
@close="handleDelRole(role.id)"
|
||||
>
|
||||
{{ role.roleName }}
|
||||
</el-tag>
|
||||
<el-button @click="handleAddRole(item.id)">添加角色</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog v-model="roleVisible" title="添加角色">
|
||||
<el-form v-loading="loading2">
|
||||
<el-form-item>
|
||||
<el-select
|
||||
v-model="checkedRole"
|
||||
:config="{
|
||||
label: 'roleName',
|
||||
value: 'id',
|
||||
disabled: (item) =>
|
||||
handleSystemRole(currentSystemId).findIndex((role) => role.id === item.id) !==
|
||||
-1,
|
||||
}"
|
||||
multiple
|
||||
:opts="systemRoleList"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="roleVisible = false">取消</el-button>
|
||||
<el-button :loading="loading2" type="primary" @click="handleSaveRole">确定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="form-footer">
|
||||
<el-button @click="handleCancel">取消</el-button>
|
||||
<el-button :disabled="loading" :loading="submitting" type="primary" @click="handleSave">保存</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
/* 全局 */
|
||||
const store = useStore();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const { proxy } = getCurrentInstance();
|
||||
/* 表单 */
|
||||
const loading = ref(false);
|
||||
const submitting = ref(false);
|
||||
const refsForm = ref(null);
|
||||
const form = reactive({
|
||||
id: null,
|
||||
departmentId: null,
|
||||
email: '',
|
||||
employeeName: '',
|
||||
employeeType: 1,
|
||||
isEnable: false,
|
||||
phone: '',
|
||||
remark: '',
|
||||
userName: '',
|
||||
roleIds: [],
|
||||
});
|
||||
const permissionList = reactive([]);
|
||||
const handleSystemRole = (systemId) => permissionList.filter((item) => item.systemId === systemId);
|
||||
const rules = reactive({
|
||||
departmentId: [{ required: unref(computed(() => !form.id)), message: '所在组织不能为空' }],
|
||||
userName: [{ required: true, message: '用户名不能为空' }],
|
||||
phone: [{ required: true, message: '手机号码不能为空' }],
|
||||
email: [{ required: true, message: '邮箱地址不能为空' }],
|
||||
employeeName: [{ required: true, message: '员工姓名不能为空' }],
|
||||
roleIds: [{ required: true, message: '账号角色不能为空' }],
|
||||
});
|
||||
const opts = computed(() => store.state.employee.opts);
|
||||
if (!unref(opts).init) {
|
||||
store.dispatch('employee/load');
|
||||
}
|
||||
/* 数据 */
|
||||
const handleLoad = async () => {
|
||||
if (route.params.id) {
|
||||
loading.value = true;
|
||||
const id = +route.params.id;
|
||||
if (form.id !== id) {
|
||||
let res = await store.dispatch('employee/detail', id);
|
||||
Object.assign(form, res);
|
||||
}
|
||||
permissionList.splice(0);
|
||||
permissionList.push(...(await store.dispatch('employee/permission', id)));
|
||||
form.roleIds = permissionList.map((item) => item.id);
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
onActivated(handleLoad);
|
||||
/* 交互 */
|
||||
const handleSave = async () => {
|
||||
submitting.value = true;
|
||||
try {
|
||||
await proxy.$validate(refsForm);
|
||||
let data = { ...unref(form) };
|
||||
data.voucherClueUrls = data.voucherClueUrls || [];
|
||||
data.voucherClueUrl = data.voucherClueUrls.join(',');
|
||||
let res = await store.dispatch('employee/save', data);
|
||||
if (res) {
|
||||
if (!data.id) {
|
||||
unref(refsForm).resetFields();
|
||||
}
|
||||
handleClose();
|
||||
}
|
||||
} catch (e) {
|
||||
console.info('取消保存', e);
|
||||
}
|
||||
submitting.value = false;
|
||||
};
|
||||
const handleCancel = async () => {
|
||||
try {
|
||||
await proxy.$confirm('确定要放弃未保存的数据继续离开吗?', '数据未保存');
|
||||
handleClose();
|
||||
} catch (e) {
|
||||
console.info('取消关闭', e);
|
||||
}
|
||||
};
|
||||
const handleClose = () => {
|
||||
router.push({ name: 'EmployeeManagement' });
|
||||
};
|
||||
const loading2 = ref(false);
|
||||
const roleVisible = ref(false);
|
||||
const currentSystemId = ref(null);
|
||||
const checkedRole = ref([]);
|
||||
const systemRoleList = ref([]);
|
||||
const handleAddRole = async (id) => {
|
||||
loading2.value = true;
|
||||
currentSystemId.value = id;
|
||||
checkedRole.value = [];
|
||||
roleVisible.value = true;
|
||||
systemRoleList.value = await store.dispatch('deptRole/role', id);
|
||||
loading2.value = false;
|
||||
};
|
||||
const handleDelRole = (id) => {
|
||||
form.roleIds.splice(form.roleIds.findIndex(id), 1);
|
||||
permissionList.splice(
|
||||
permissionList.findIndex((item) => item.id === id),
|
||||
1
|
||||
);
|
||||
};
|
||||
const handleSaveRole = async () => {
|
||||
form.roleIds.push(...unref(checkedRole));
|
||||
permissionList.push(...unref(systemRoleList).filter((item) => unref(checkedRole).indexOf(item.id) !== -1));
|
||||
roleVisible.value = false;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.role-list {
|
||||
.system {
|
||||
& + .system {
|
||||
margin-top: @layout-space;
|
||||
}
|
||||
.system-header {
|
||||
margin-bottom: @layout-space;
|
||||
}
|
||||
.flex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.el-tag {
|
||||
margin: @layout-space-small @layout-space @layout-space-small 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,194 @@
|
||||
<template>
|
||||
<div class="list-container">
|
||||
<table-list
|
||||
v-loading="loading"
|
||||
:code="code"
|
||||
:config="config"
|
||||
:data="list"
|
||||
:operation="['create', 'search']"
|
||||
:reset="handleReset"
|
||||
title="广告"
|
||||
:total="total"
|
||||
@create="handleCreate"
|
||||
@remove="handleRemove"
|
||||
@search="handleSearch"
|
||||
>
|
||||
<template #search>
|
||||
<el-form inline>
|
||||
<el-form-item label="广告名称" prop="name">
|
||||
<el-input v-model="state.condition.name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="广告位置" prop="location">
|
||||
<el-select v-model="state.condition.location" :opts="opts.location" />
|
||||
</el-form-item>
|
||||
<el-form-item label="广告平台" prop="platform">
|
||||
<el-select v-model="state.condition.platform" :opts="opts.platform" />
|
||||
</el-form-item>
|
||||
<el-form-item label="是否启用" prop="isEnable">
|
||||
<el-select v-model="state.condition.isEnable" :opts="opts.status" />
|
||||
</el-form-item>
|
||||
<el-form-item label="到期时间" prop="dateRange">
|
||||
<el-date-picker
|
||||
v-model="state.condition.dateRange"
|
||||
:default-time="[new Date(0, 0, 0, 0, 0, 0), new Date(0, 0, 0, 23, 59, 59)]"
|
||||
type="datetimerange"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
</table-list>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import ElButton from '@/components/extra/ElButton.vue';
|
||||
import ElImage from '@/components/extra/ElImage.vue';
|
||||
import ElSwitch from '@/components/extra/ElSwitch.vue';
|
||||
const router = useRouter();
|
||||
const store = useStore();
|
||||
const { proxy } = getCurrentInstance();
|
||||
const loading = ref(false);
|
||||
const code = computed(() => store.state.advertise.code);
|
||||
const list = computed(() => _.cloneDeep(store.state.advertise.list));
|
||||
const total = computed(() => store.state.advertise.total);
|
||||
const opts = computed(() => store.state.advertise.opts);
|
||||
if (!unref(opts).init) {
|
||||
store.dispatch('advertise/load');
|
||||
}
|
||||
const state = reactive({
|
||||
condition: {
|
||||
name: null,
|
||||
location: null,
|
||||
platform: null,
|
||||
isEnbale: null,
|
||||
dateRange: [],
|
||||
},
|
||||
});
|
||||
watch(
|
||||
() => state.condition,
|
||||
(value) => {
|
||||
store.commit('advertise/setCondition', _.cloneDeep(value));
|
||||
},
|
||||
{ immediate: true, deep: true }
|
||||
);
|
||||
const handleReset = () => {
|
||||
state.condition = {
|
||||
name: null,
|
||||
location: null,
|
||||
platform: null,
|
||||
isEnbale: null,
|
||||
dateRange: [],
|
||||
};
|
||||
};
|
||||
const handleSearch = async () => {
|
||||
loading.value = true;
|
||||
await store.dispatch('advertise/search');
|
||||
loading.value = false;
|
||||
};
|
||||
onActivated(handleSearch);
|
||||
const handleCreate = () => {
|
||||
router.push({ name: 'CreateAdvertise' });
|
||||
};
|
||||
const handleUpdate = (row) => {
|
||||
router.push({ name: 'UpdateAdvertise', params: { id: row.id } });
|
||||
};
|
||||
const handleRemove = async (rows) => {
|
||||
store.dispatch(
|
||||
'advertise/remove',
|
||||
rows.map((item) => item.id)
|
||||
);
|
||||
};
|
||||
const handleEnable = async (row) => {
|
||||
loading.value = true;
|
||||
await store.dispatch('advertise/enable', { id: row.id, isEnable: !row.isEnable });
|
||||
loading.value = false;
|
||||
};
|
||||
const config = reactive({
|
||||
// 表格列配置
|
||||
columns: [
|
||||
{
|
||||
label: 'ID',
|
||||
prop: 'id',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
label: '广告名称',
|
||||
prop: 'name',
|
||||
minWidth: 160,
|
||||
},
|
||||
{
|
||||
label: '广告位置',
|
||||
width: 160,
|
||||
slots: {
|
||||
default: ({ row }) => proxy.$dict(unref(opts).location, row.location),
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '平台',
|
||||
width: 120,
|
||||
slots: {
|
||||
default: ({ row }) => proxy.$dict(unref(opts).platform, row.platform),
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '广告图片',
|
||||
width: 120,
|
||||
slots: {
|
||||
default: ({ row }) => <ElImage src={row.pictureUrl} alt={row.name} />,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '起止时间',
|
||||
width: 180,
|
||||
slots: {
|
||||
default: ({ row }) => (
|
||||
<div class="col">
|
||||
<p>{row.advertisementStartTime}</p>
|
||||
<p>~</p>
|
||||
<p>{row.advertisementEndTime}</p>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '启用',
|
||||
width: 100,
|
||||
slots: {
|
||||
default: ({ row }) => <ElSwitch v-model={row.isEnable} onChange={() => handleEnable(row)} />,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '创建时间',
|
||||
prop: 'createTime',
|
||||
width: 180,
|
||||
},
|
||||
{
|
||||
label: '操作',
|
||||
fixed: 'right',
|
||||
width: 180,
|
||||
slots: {
|
||||
default: ({ row }) => (
|
||||
<div>
|
||||
<ElButton type="text" onClick={() => handleUpdate(row)}>
|
||||
编辑
|
||||
</ElButton>
|
||||
<ElButton type="text" onClick={() => handleRemove([row])}>
|
||||
删除
|
||||
</ElButton>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue