|
@@ -7,53 +7,21 @@
|
|
|
:mask-closable="false"
|
|
:mask-closable="false"
|
|
|
:ok-loading="loading"
|
|
:ok-loading="loading"
|
|
|
@cancel="close"
|
|
@cancel="close"
|
|
|
- @before-ok="submit"
|
|
|
|
|
- >
|
|
|
|
|
|
|
+ @before-ok="submit">
|
|
|
<!-- 表单信息 start -->
|
|
<!-- 表单信息 start -->
|
|
|
- <a-form
|
|
|
|
|
- ref="formRef"
|
|
|
|
|
- :model="formData"
|
|
|
|
|
- :rules="rules"
|
|
|
|
|
- :auto-label-width="true"
|
|
|
|
|
- >
|
|
|
|
|
|
|
+ <a-form ref="formRef" :model="formData" :rules="rules" :auto-label-width="true">
|
|
|
<a-form-item label="媒体ID" field="media_id">
|
|
<a-form-item label="媒体ID" field="media_id">
|
|
|
- <a-select
|
|
|
|
|
- v-model="formData.media_id"
|
|
|
|
|
- placeholder="请选择媒体ID"
|
|
|
|
|
- allow-clear
|
|
|
|
|
- :disabled="mode === 'edit'"
|
|
|
|
|
- >
|
|
|
|
|
- <a-option
|
|
|
|
|
- v-for="item in mediaOptions"
|
|
|
|
|
- :key="item.id"
|
|
|
|
|
- :value="item.id"
|
|
|
|
|
- :label="`${item.id}:${item.name}`"
|
|
|
|
|
- />
|
|
|
|
|
|
|
+ <a-select v-model="formData.media_id" placeholder="请选择媒体ID" allow-clear :disabled="mode === 'edit'">
|
|
|
|
|
+ <a-option v-for="item in mediaOptions" :key="item.id" :value="item.id" :label="`${item.id}:${item.name}`" />
|
|
|
</a-select>
|
|
</a-select>
|
|
|
</a-form-item>
|
|
</a-form-item>
|
|
|
<a-form-item label="渠道ID" field="agent_id">
|
|
<a-form-item label="渠道ID" field="agent_id">
|
|
|
- <a-select
|
|
|
|
|
- v-model="formData.agent_id"
|
|
|
|
|
- placeholder="请选择渠道ID"
|
|
|
|
|
- allow-clear
|
|
|
|
|
- :disabled="mode === 'edit'"
|
|
|
|
|
- >
|
|
|
|
|
- <a-option
|
|
|
|
|
- v-for="item in agentOptions"
|
|
|
|
|
- :key="item.id"
|
|
|
|
|
- :value="item.id"
|
|
|
|
|
- :label="`${item.id}:${item.name}`"
|
|
|
|
|
- />
|
|
|
|
|
|
|
+ <a-select v-model="formData.agent_id" placeholder="请选择渠道ID" allow-clear :disabled="mode === 'edit'">
|
|
|
|
|
+ <a-option v-for="item in agentOptions" :key="item.id" :value="item.id" :label="`${item.id}:${item.name}`" />
|
|
|
</a-select>
|
|
</a-select>
|
|
|
</a-form-item>
|
|
</a-form-item>
|
|
|
<a-form-item label="负责人ID" field="auth_id">
|
|
<a-form-item label="负责人ID" field="auth_id">
|
|
|
- <a-select
|
|
|
|
|
- v-model="formData.auth_id"
|
|
|
|
|
- :options="authOptions"
|
|
|
|
|
- placeholder="请选择负责人ID"
|
|
|
|
|
- allow-clear
|
|
|
|
|
- :disabled="mode === 'edit'"
|
|
|
|
|
- />
|
|
|
|
|
|
|
+ <auth-select v-model="formData.auth_id" />
|
|
|
</a-form-item>
|
|
</a-form-item>
|
|
|
<a-form-item label="广告位名称" field="name">
|
|
<a-form-item label="广告位名称" field="name">
|
|
|
<a-input v-model="formData.name" placeholder="请输入广告位名称" />
|
|
<a-input v-model="formData.name" placeholder="请输入广告位名称" />
|
|
@@ -64,27 +32,28 @@
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script setup>
|
|
<script setup>
|
|
|
-import { ref, reactive, computed } from "vue";
|
|
|
|
|
-import tool from "@/utils/tool";
|
|
|
|
|
-import { Message, Modal } from "@arco-design/web-vue";
|
|
|
|
|
-import api from "../../api/advert/agentSite";
|
|
|
|
|
-import advertCommonApi from "../../api/advert/common";
|
|
|
|
|
-import { useUserStore } from "@/store";
|
|
|
|
|
|
|
+import { ref, reactive, computed } from 'vue'
|
|
|
|
|
+import tool from '@/utils/tool'
|
|
|
|
|
+import { Message, Modal } from '@arco-design/web-vue'
|
|
|
|
|
+import api from '../../api/advert/agentSite'
|
|
|
|
|
+import advertCommonApi from '../../api/advert/common'
|
|
|
|
|
+import { useUserStore } from '@/store'
|
|
|
|
|
+import authSelect from '@/components/auth-select/index.vue'
|
|
|
|
|
|
|
|
-const emit = defineEmits(["success"]);
|
|
|
|
|
|
|
+const emit = defineEmits(['success'])
|
|
|
// 引用定义
|
|
// 引用定义
|
|
|
-const visible = ref(false);
|
|
|
|
|
-const loading = ref(false);
|
|
|
|
|
-const formRef = ref();
|
|
|
|
|
-const mode = ref("");
|
|
|
|
|
-const userStore = useUserStore();
|
|
|
|
|
-const mediaOptions = ref([]);
|
|
|
|
|
-const authOptions = ref([]);
|
|
|
|
|
-const agentOptions = ref([]);
|
|
|
|
|
|
|
+const visible = ref(false)
|
|
|
|
|
+const loading = ref(false)
|
|
|
|
|
+const formRef = ref()
|
|
|
|
|
+const mode = ref('')
|
|
|
|
|
+const userStore = useUserStore()
|
|
|
|
|
+const mediaOptions = ref([])
|
|
|
|
|
+const authOptions = ref([])
|
|
|
|
|
+const agentOptions = ref([])
|
|
|
|
|
|
|
|
let title = computed(() => {
|
|
let title = computed(() => {
|
|
|
- return "广告位" + (mode.value == "add" ? "-新增" : "-编辑");
|
|
|
|
|
-});
|
|
|
|
|
|
|
+ return '广告位' + (mode.value == 'add' ? '-新增' : '-编辑')
|
|
|
|
|
+})
|
|
|
|
|
|
|
|
// 表单初始值
|
|
// 表单初始值
|
|
|
const initialFormData = {
|
|
const initialFormData = {
|
|
@@ -92,103 +61,103 @@ const initialFormData = {
|
|
|
media_id: null,
|
|
media_id: null,
|
|
|
agent_id: null,
|
|
agent_id: null,
|
|
|
auth_id: null,
|
|
auth_id: null,
|
|
|
- name: "",
|
|
|
|
|
-};
|
|
|
|
|
|
|
+ name: '',
|
|
|
|
|
+}
|
|
|
|
|
|
|
|
// 表单信息
|
|
// 表单信息
|
|
|
-const formData = reactive({ ...initialFormData });
|
|
|
|
|
|
|
+const formData = reactive({ ...initialFormData })
|
|
|
|
|
|
|
|
// 验证规则
|
|
// 验证规则
|
|
|
const rules = {
|
|
const rules = {
|
|
|
- media_id: [{ required: true, message: "媒体ID必需填写" }],
|
|
|
|
|
- agent_id: [{ required: true, message: "渠道ID必需填写" }],
|
|
|
|
|
- auth_id: [{ required: true, message: "负责人ID必需填写" }],
|
|
|
|
|
- name: [{ required: true, message: "广告位名称必需填写" }],
|
|
|
|
|
-};
|
|
|
|
|
|
|
+ media_id: [{ required: true, message: '媒体ID必需填写' }],
|
|
|
|
|
+ agent_id: [{ required: true, message: '渠道ID必需填写' }],
|
|
|
|
|
+ auth_id: [{ required: true, message: '负责人ID必需填写' }],
|
|
|
|
|
+ name: [{ required: true, message: '广告位名称必需填写' }],
|
|
|
|
|
+}
|
|
|
|
|
|
|
|
// 获取媒体列表Options
|
|
// 获取媒体列表Options
|
|
|
const getMediaOptions = async () => {
|
|
const getMediaOptions = async () => {
|
|
|
- const res = await advertCommonApi.getMediaOptionsApi();
|
|
|
|
|
|
|
+ const res = await advertCommonApi.getMediaOptionsApi()
|
|
|
if (res.code == 200) {
|
|
if (res.code == 200) {
|
|
|
- mediaOptions.value = res.data;
|
|
|
|
|
|
|
+ mediaOptions.value = res.data
|
|
|
}
|
|
}
|
|
|
-};
|
|
|
|
|
|
|
+}
|
|
|
|
|
|
|
|
// 获取渠道列表Options
|
|
// 获取渠道列表Options
|
|
|
const getAgentOptions = async () => {
|
|
const getAgentOptions = async () => {
|
|
|
- const res = await advertCommonApi.getAgentOptionsApi();
|
|
|
|
|
|
|
+ const res = await advertCommonApi.getAgentOptionsApi()
|
|
|
if (res.code == 200) {
|
|
if (res.code == 200) {
|
|
|
- agentOptions.value = res.data;
|
|
|
|
|
|
|
+ agentOptions.value = res.data
|
|
|
}
|
|
}
|
|
|
-};
|
|
|
|
|
|
|
+}
|
|
|
|
|
|
|
|
// 获取后台归属人列表
|
|
// 获取后台归属人列表
|
|
|
const getAuthList = async () => {
|
|
const getAuthList = async () => {
|
|
|
- const res = await advertCommonApi.getAuthOptionsApi();
|
|
|
|
|
|
|
+ const res = await advertCommonApi.getAuthOptionsApi()
|
|
|
if (res.code == 200) {
|
|
if (res.code == 200) {
|
|
|
- authOptions.value = res.data;
|
|
|
|
|
|
|
+ authOptions.value = res.data
|
|
|
}
|
|
}
|
|
|
-};
|
|
|
|
|
|
|
+}
|
|
|
|
|
|
|
|
// 打开弹框
|
|
// 打开弹框
|
|
|
-const open = async (type = "add") => {
|
|
|
|
|
- mode.value = type;
|
|
|
|
|
|
|
+const open = async (type = 'add') => {
|
|
|
|
|
+ mode.value = type
|
|
|
// 重置表单数据
|
|
// 重置表单数据
|
|
|
- Object.assign(formData, initialFormData);
|
|
|
|
|
- formRef.value.clearValidate();
|
|
|
|
|
- visible.value = true;
|
|
|
|
|
- if (mode.value === "add") {
|
|
|
|
|
- formData.auth_id = userStore.user.id;
|
|
|
|
|
|
|
+ Object.assign(formData, initialFormData)
|
|
|
|
|
+ formRef.value.clearValidate()
|
|
|
|
|
+ visible.value = true
|
|
|
|
|
+ if (mode.value === 'add') {
|
|
|
|
|
+ formData.auth_id = userStore.user.id
|
|
|
}
|
|
}
|
|
|
- await initPage();
|
|
|
|
|
-};
|
|
|
|
|
|
|
+ await initPage()
|
|
|
|
|
+}
|
|
|
|
|
|
|
|
// 初始化页面数据
|
|
// 初始化页面数据
|
|
|
const initPage = async () => {
|
|
const initPage = async () => {
|
|
|
- await getMediaOptions();
|
|
|
|
|
- await getAgentOptions();
|
|
|
|
|
- await getAuthList();
|
|
|
|
|
-};
|
|
|
|
|
|
|
+ await getMediaOptions()
|
|
|
|
|
+ await getAgentOptions()
|
|
|
|
|
+ await getAuthList()
|
|
|
|
|
+}
|
|
|
|
|
|
|
|
// 设置数据
|
|
// 设置数据
|
|
|
const setFormData = async (data) => {
|
|
const setFormData = async (data) => {
|
|
|
for (const key in formData) {
|
|
for (const key in formData) {
|
|
|
if (data[key] != null && data[key] != undefined) {
|
|
if (data[key] != null && data[key] != undefined) {
|
|
|
- formData[key] = data[key];
|
|
|
|
|
|
|
+ formData[key] = data[key]
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
-};
|
|
|
|
|
|
|
+}
|
|
|
|
|
|
|
|
// 数据保存
|
|
// 数据保存
|
|
|
const submit = async (done) => {
|
|
const submit = async (done) => {
|
|
|
- const validate = await formRef.value?.validate();
|
|
|
|
|
|
|
+ const validate = await formRef.value?.validate()
|
|
|
if (!validate) {
|
|
if (!validate) {
|
|
|
- loading.value = true;
|
|
|
|
|
- let data = { ...formData };
|
|
|
|
|
- let result = {};
|
|
|
|
|
- if (mode.value === "add") {
|
|
|
|
|
|
|
+ loading.value = true
|
|
|
|
|
+ let data = { ...formData }
|
|
|
|
|
+ let result = {}
|
|
|
|
|
+ if (mode.value === 'add') {
|
|
|
// 添加数据
|
|
// 添加数据
|
|
|
- data.id = undefined;
|
|
|
|
|
- result = await api.save(data);
|
|
|
|
|
|
|
+ data.id = undefined
|
|
|
|
|
+ result = await api.save(data)
|
|
|
} else {
|
|
} else {
|
|
|
// 修改数据
|
|
// 修改数据
|
|
|
- result = await api.update(data.id, data);
|
|
|
|
|
|
|
+ result = await api.update(data.id, data)
|
|
|
}
|
|
}
|
|
|
if (result.code === 200) {
|
|
if (result.code === 200) {
|
|
|
- Message.success("操作成功");
|
|
|
|
|
- emit("success");
|
|
|
|
|
- done(true);
|
|
|
|
|
|
|
+ Message.success('操作成功')
|
|
|
|
|
+ emit('success')
|
|
|
|
|
+ done(true)
|
|
|
}
|
|
}
|
|
|
// 防止连续点击提交
|
|
// 防止连续点击提交
|
|
|
setTimeout(() => {
|
|
setTimeout(() => {
|
|
|
- loading.value = false;
|
|
|
|
|
- }, 500);
|
|
|
|
|
|
|
+ loading.value = false
|
|
|
|
|
+ }, 500)
|
|
|
}
|
|
}
|
|
|
- done(false);
|
|
|
|
|
-};
|
|
|
|
|
|
|
+ done(false)
|
|
|
|
|
+}
|
|
|
|
|
|
|
|
// 关闭弹窗
|
|
// 关闭弹窗
|
|
|
-const close = () => (visible.value = false);
|
|
|
|
|
|
|
+const close = () => (visible.value = false)
|
|
|
|
|
|
|
|
-defineExpose({ open, setFormData });
|
|
|
|
|
|
|
+defineExpose({ open, setFormData })
|
|
|
</script>
|
|
</script>
|