|
|
|
|
@ -4,7 +4,7 @@
|
|
|
|
|
ref="refsForm"
|
|
|
|
|
v-loading="loading"
|
|
|
|
|
class="form-content"
|
|
|
|
|
label-width="100px"
|
|
|
|
|
label-width="120px"
|
|
|
|
|
:model="form"
|
|
|
|
|
:rules="rules"
|
|
|
|
|
>
|
|
|
|
|
@ -12,78 +12,83 @@
|
|
|
|
|
<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-select
|
|
|
|
|
v-model="form.location"
|
|
|
|
|
:config="{ disabled: (item, index) => form.platform === 2 && index !== 0 }"
|
|
|
|
|
:opts="opts.location"
|
|
|
|
|
/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="商品分类" prop="categoryId">
|
|
|
|
|
<el-select v-model="form.categoryId" :opts="opts.category" />
|
|
|
|
|
<el-form-item v-if="form.location === 3" label="商品分类" prop="productCategoryId">
|
|
|
|
|
<el-cascader
|
|
|
|
|
v-model="form.productCategoryId"
|
|
|
|
|
:options="opts.category"
|
|
|
|
|
:props="{
|
|
|
|
|
checkStrictly: true,
|
|
|
|
|
expandTrigger: 'hover',
|
|
|
|
|
label: 'name',
|
|
|
|
|
value: 'id',
|
|
|
|
|
children: 'childList',
|
|
|
|
|
emitPath: false,
|
|
|
|
|
}"
|
|
|
|
|
/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="员工姓名" prop="employeeName">
|
|
|
|
|
<el-input v-model="form.employeeName" />
|
|
|
|
|
<el-form-item label="广告名称" prop="name">
|
|
|
|
|
<el-input v-model="form.name" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="手机号" prop="phone">
|
|
|
|
|
<el-input v-model="form.phone" />
|
|
|
|
|
<el-form-item label="起止时间" prop="dateRange">
|
|
|
|
|
<el-date-picker
|
|
|
|
|
v-model="form.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-item label="邮箱" prop="email">
|
|
|
|
|
<el-input v-model="form.email" />
|
|
|
|
|
<el-form-item label="广告图片" prop="pictureUrl">
|
|
|
|
|
<el-upload-image v-model="form.pictureUrl" config-id="advertise/" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="是否启用" prop="isEnable">
|
|
|
|
|
<el-switch v-model="form.isEnable" />
|
|
|
|
|
<el-form-item label="跳转类型" prop="jumpType">
|
|
|
|
|
<el-radio-group v-model="form.jumpType" :opts="opts.jumpType" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="备注" prop="remark">
|
|
|
|
|
<el-input v-model="form.remark" type="textarea" />
|
|
|
|
|
<el-form-item v-if="form.jumpType === 1" label="商品详情" prop="jumpUrl">
|
|
|
|
|
<el-button @click="handlePick">选择商品</el-button>
|
|
|
|
|
<span style="margin-left: 10px">
|
|
|
|
|
{{ form.jumpUrl?.name || '' }}
|
|
|
|
|
</span>
|
|
|
|
|
<product-picker ref="refsPicker" single @pick="form.jumpUrl = $event" />
|
|
|
|
|
</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 v-if="form.jumpType === 2" label="分类商品列表" prop="jumpUrl">
|
|
|
|
|
<el-cascader
|
|
|
|
|
v-model="form.jumpUrl"
|
|
|
|
|
:options="opts.category"
|
|
|
|
|
:props="{
|
|
|
|
|
checkStrictly: true,
|
|
|
|
|
expandTrigger: 'hover',
|
|
|
|
|
label: 'name',
|
|
|
|
|
value: 'id',
|
|
|
|
|
children: 'childList',
|
|
|
|
|
emitPath: false,
|
|
|
|
|
}"
|
|
|
|
|
/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item v-if="form.jumpType === 3" label="链接" prop="jumpUrl">
|
|
|
|
|
<el-input v-model="form.jumpUrl" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
<div class="form-footer">
|
|
|
|
|
<el-checkbox v-model="next" style="margin-right: 10px">继续为该位置添加广告</el-checkbox>
|
|
|
|
|
<el-button @click="handleCancel">取消</el-button>
|
|
|
|
|
<el-button :disabled="loading" :loading="submitting" type="primary" @click="handleSave">保存</el-button>
|
|
|
|
|
<el-button :disabled="loading" :loading="loading" plain type="primary" @click="handleSave()">
|
|
|
|
|
保存
|
|
|
|
|
</el-button>
|
|
|
|
|
<el-button :disabled="loading" :loading="loading" type="primary" @click="handleSave(true)">
|
|
|
|
|
保存并发布
|
|
|
|
|
</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup>
|
|
|
|
|
import ProductPicker from '@/views/sales/product/picker.vue';
|
|
|
|
|
/* 全局 */
|
|
|
|
|
const store = useStore();
|
|
|
|
|
const route = useRoute();
|
|
|
|
|
@ -91,69 +96,108 @@
|
|
|
|
|
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,
|
|
|
|
|
platform: 1,
|
|
|
|
|
location: 1,
|
|
|
|
|
productCategoryId: null,
|
|
|
|
|
name: null,
|
|
|
|
|
dateRange: [],
|
|
|
|
|
pictureUrl: null,
|
|
|
|
|
jumpType: 1,
|
|
|
|
|
jumpUrl: null,
|
|
|
|
|
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: '账号角色不能为空' }],
|
|
|
|
|
platform: [{ required: true, message: '广告平台不能为空' }],
|
|
|
|
|
location: [{ required: true, message: '广告位置不能为空' }],
|
|
|
|
|
productCategoryId: [{ required: true, message: '商品分类不能为空' }],
|
|
|
|
|
name: [{ required: true, message: '广告名称不能为空' }],
|
|
|
|
|
pictureUrl: [{ required: true, message: '广告图片不能为空' }],
|
|
|
|
|
jumpType: [{ required: true, message: '跳转类型不能为空' }],
|
|
|
|
|
jumpUrl: [
|
|
|
|
|
{
|
|
|
|
|
required: true,
|
|
|
|
|
validator(rule, value, cb) {
|
|
|
|
|
let type = ['', '商品详情', '分类商品列表', '链接'][form.jumpType];
|
|
|
|
|
if (type && !value) {
|
|
|
|
|
cb(`${type}不能为空`);
|
|
|
|
|
} else {
|
|
|
|
|
cb();
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
});
|
|
|
|
|
const opts = computed(() => store.state.employee.opts);
|
|
|
|
|
const opts = computed(() => store.state.advertise.opts);
|
|
|
|
|
if (!unref(opts).init) {
|
|
|
|
|
store.dispatch('employee/load');
|
|
|
|
|
store.dispatch('advertise/load');
|
|
|
|
|
}
|
|
|
|
|
watch(
|
|
|
|
|
() => form.platform,
|
|
|
|
|
(value) => {
|
|
|
|
|
if (value === 2) {
|
|
|
|
|
form.location = 1;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{ immediate: true }
|
|
|
|
|
);
|
|
|
|
|
watch(
|
|
|
|
|
() => form.jumpType,
|
|
|
|
|
() => {
|
|
|
|
|
form.jumpUrl = null;
|
|
|
|
|
},
|
|
|
|
|
{ immediate: true }
|
|
|
|
|
);
|
|
|
|
|
/* 数据 */
|
|
|
|
|
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);
|
|
|
|
|
let res = await store.dispatch('advertise/detail', id);
|
|
|
|
|
res.dateRange = [res.advertisementStartTime, res.advertisementEndTime];
|
|
|
|
|
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;
|
|
|
|
|
const refsPicker = ref(null);
|
|
|
|
|
const handlePick = () => {
|
|
|
|
|
refsPicker.value.show();
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const next = ref(false);
|
|
|
|
|
const handleSave = async (isEnable = false) => {
|
|
|
|
|
loading.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);
|
|
|
|
|
data.isEnable = isEnable;
|
|
|
|
|
let res = await store.dispatch('advertise/save', data);
|
|
|
|
|
if (res) {
|
|
|
|
|
if (!data.id) {
|
|
|
|
|
unref(refsForm).resetFields();
|
|
|
|
|
if (unref(next)) {
|
|
|
|
|
Object.assign(form, {
|
|
|
|
|
id: null,
|
|
|
|
|
name: null,
|
|
|
|
|
dateRange: [],
|
|
|
|
|
pictureUrl: null,
|
|
|
|
|
jumpType: 1,
|
|
|
|
|
jumpUrl: null,
|
|
|
|
|
isEnable: false,
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
store.commit('layout/closeTab', { current: true });
|
|
|
|
|
handleClose();
|
|
|
|
|
}
|
|
|
|
|
handleClose();
|
|
|
|
|
}
|
|
|
|
|
} catch (e) {
|
|
|
|
|
console.info('取消保存', e);
|
|
|
|
|
}
|
|
|
|
|
submitting.value = false;
|
|
|
|
|
loading.value = false;
|
|
|
|
|
};
|
|
|
|
|
const handleCancel = async () => {
|
|
|
|
|
try {
|
|
|
|
|
@ -164,32 +208,7 @@
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
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;
|
|
|
|
|
router.push({ name: 'AdvertiseManagement' });
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
向文可
3 years ago