From cfb3675f991f0377868d27bd631d2bd917655c52 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=91=E6=96=87=E5=8F=AF?= <1041367524@qq.com>
Date: Wed, 25 May 2022 16:30:31 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=B9=BF=E5=91=8A=E9=9D=99=E6=80=81?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/operation/advertise/index.js          |  28 +++
 .../modules/operation/advertise/advertise.js  | 134 +++++++++++
 src/views/operation/advertise/form.vue        | 215 ++++++++++++++++++
 src/views/operation/advertise/index.vue       | 194 ++++++++++++++++
 src/views/permission/role/index.vue           |   2 +
 vite.config.js                                |   4 +-
 6 files changed, 575 insertions(+), 2 deletions(-)
 create mode 100644 src/api/operation/advertise/index.js
 create mode 100644 src/store/modules/operation/advertise/advertise.js
 create mode 100644 src/views/operation/advertise/form.vue
 create mode 100644 src/views/operation/advertise/index.vue

diff --git a/src/api/operation/advertise/index.js b/src/api/operation/advertise/index.js
new file mode 100644
index 0000000..39ba3e5
--- /dev/null
+++ b/src/api/operation/advertise/index.js
@@ -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,
+    });
+};
diff --git a/src/store/modules/operation/advertise/advertise.js b/src/store/modules/operation/advertise/advertise.js
new file mode 100644
index 0000000..4c9eab9
--- /dev/null
+++ b/src/store/modules/operation/advertise/advertise.js
@@ -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,
+};
diff --git a/src/views/operation/advertise/form.vue b/src/views/operation/advertise/form.vue
new file mode 100644
index 0000000..ece3ce2
--- /dev/null
+++ b/src/views/operation/advertise/form.vue
@@ -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>
diff --git a/src/views/operation/advertise/index.vue b/src/views/operation/advertise/index.vue
new file mode 100644
index 0000000..1c8f0bd
--- /dev/null
+++ b/src/views/operation/advertise/index.vue
@@ -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>
diff --git a/src/views/permission/role/index.vue b/src/views/permission/role/index.vue
index 009de3f..e868c6d 100644
--- a/src/views/permission/role/index.vue
+++ b/src/views/permission/role/index.vue
@@ -158,6 +158,8 @@
 <script setup lang="jsx">
     import ElButton from '@/components/extra/ElButton.vue';
     import ElSwitch from '@/components/extra/ElSwitch.vue';
+    import { ElTag } from 'element-plus/es/components/tag/index';
+    import 'element-plus/es/components/tag/style/css';
     const { proxy } = getCurrentInstance();
     const store = useStore();
     const loading = ref(false);
diff --git a/vite.config.js b/vite.config.js
index 6516d2f..0147676 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -24,8 +24,8 @@ export default (configEnv) => {
                     // target: 'http://192.168.10.5:4500', // 高玉
                     // target: 'http://192.168.10.67:8090', // 罗战
                     // target: 'http://192.168.10.93:8090', // 周渺
-                    target: 'https://k8s-horse-gateway.mashibing.cn/', // 测试地址
-                    // target: 'https://you-gateway.mashibing.com', // 生产环境
+                    // target: 'https://k8s-horse-gateway.mashibing.cn/', // 测试地址
+                    target: 'https://you-gateway.mashibing.com', // 生产环境
                     changeOrigin: true,
                     rewrite: (path) => path.replace(/^\/api/, ''),
                 },