更新企微投放
This commit is contained in:
王博冉
BIN
src/assets/img/business_wechat.png
Normal file
BIN
src/assets/img/business_wechat.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
@@ -275,6 +275,12 @@ const constantRoutes = [
|
||||
meta: { showPreview: false, showPublish: false, keepAlive: true, showShare: true },
|
||||
component: () => import(/* webpackChunkName: "publish" */ '@/views/Publish/launch-center/launch-task/create')
|
||||
},
|
||||
{
|
||||
path: 'enterprise-weChat',
|
||||
name: 'enterprise-weChat',
|
||||
meta: { showPreview: false, showPublish: false, keepAlive: true, showShare: true },
|
||||
component: () => import(/* webpackChunkName: "publish" */ '@/views/Publish/launch-center/launch-task/enterpriseWeChat')
|
||||
},
|
||||
// {
|
||||
// path: "link",
|
||||
// name: "link",
|
||||
|
||||
@@ -0,0 +1,472 @@
|
||||
<template>
|
||||
<div class="link-container">
|
||||
<sub-title>基本信息</sub-title>
|
||||
<!-- <div class="title">分享链接</div> -->
|
||||
<div class="content">
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="formState"
|
||||
:rules="rules"
|
||||
:label-col="labelCol"
|
||||
:wrapper-col="wrapperCol"
|
||||
>
|
||||
<a-form-item ref="deliveryName" label="投放名称" name="deliveryName">
|
||||
<a-input
|
||||
placeholder="请输入本次投放名称"
|
||||
v-model:value="formState.deliveryName"
|
||||
:disabled="!iscreate"
|
||||
:show-count="true"
|
||||
:maxlength="50"
|
||||
class="input"
|
||||
>
|
||||
<template #suffix
|
||||
><span class="show-count"> {{ formState.deliveryName.length }}/50</span>
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<!-- <a-form-item ref="attachment" label="附件" name="attachment">
|
||||
<div class="attachment" v-if="iscreate">
|
||||
<span class="input-upload-show" v-if="formState.attachmentName">
|
||||
{{ formState.attachmentName }}
|
||||
<i
|
||||
class="icon iconfont curror"
|
||||
@click="
|
||||
() => {
|
||||
if (iscreate) {
|
||||
deleteUpdate();
|
||||
}
|
||||
}
|
||||
"
|
||||
></i
|
||||
>
|
||||
</span>
|
||||
<a-upload
|
||||
v-else
|
||||
:customRequest="onCustomRequest"
|
||||
:beforeUpload="onBeforeUpload"
|
||||
v-model:file-list="fileList"
|
||||
:accept="'.jpg,.jpeg,.png,.pdf,.rar,.zip'"
|
||||
:showUploadList="false"
|
||||
:directory="false"
|
||||
@change="onUpload"
|
||||
:disabled="!iscreate"
|
||||
>
|
||||
<a-button class="input-upload">
|
||||
<upload-outlined @change="onUpload"></upload-outlined>
|
||||
上传文件
|
||||
</a-button>
|
||||
</a-upload>
|
||||
<span class="show-upload-accept"> 支持扩展名:.jpg .jpeg .png .pdf .rar .zip</span>
|
||||
</div>
|
||||
<div class="attachment" v-if="!iscreate">
|
||||
<a @click="onOpen(formState)"> {{ formState.attachmentName }}</a>
|
||||
</div>
|
||||
</a-form-item> -->
|
||||
<!-- <a-form-item ref="description" label="投放描述" name="description">
|
||||
<a-textarea
|
||||
placeholder="系统会将作答设置信息自动同步，如有额外的投放描述，请在此输入…"
|
||||
v-model:value="formState.description"
|
||||
:auto-size="{ minRows: 5, maxRows: 5 }"
|
||||
type="text-area"
|
||||
:disabled="!iscreate"
|
||||
:maxlength="200"
|
||||
:show-count="true"
|
||||
>
|
||||
</a-textarea>
|
||||
</a-form-item> -->
|
||||
<a-form-item label="样本数量限制" name="">
|
||||
<a-switch class="custom-switch" v-model:checked="formState.checked" />
|
||||
<span v-if="!formState.checked">（不开启样本数量限制）</span>
|
||||
<div class="limitation" v-else>
|
||||
<span> 样本数量达到 </span>
|
||||
<a-input-number :min="1" :max="100000" v-model:value="formState.number" />
|
||||
<span> 时，停止收集数据</span>
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-form-item label="问卷链接" name="">
|
||||
<div class="copy">
|
||||
<a-input v-model:value="formState.code" style="width: 580px"></a-input>
|
||||
<div class="copy-btn" @click="handleCopy">
|
||||
<img class="copy-icon" :src="require('@/assets/img/publish/copy_icon.png')" alt="" />
|
||||
<span>复制</span>
|
||||
</div>
|
||||
</div>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, reactive } from "@vue/reactivity";
|
||||
import SubTitle from "@/views/DataAnalyse/components/SubTitle.vue";
|
||||
import { UploadOutlined } from "@ant-design/icons-vue";
|
||||
import common from "@/api/common.js";
|
||||
import { Modal, message } from "ant-design-vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import { deliveryPlan } from "../api/php";
|
||||
import { onMounted } from "@vue/runtime-core";
|
||||
|
||||
export default {
|
||||
name: "share-links",
|
||||
components: {
|
||||
SubTitle,
|
||||
// UploadOutlined,
|
||||
},
|
||||
props: {
|
||||
status: {
|
||||
type: Number,
|
||||
default: () => 0,
|
||||
},
|
||||
isCreate: {
|
||||
type: Boolean,
|
||||
default: () => true,
|
||||
},
|
||||
},
|
||||
setup(props, context) {
|
||||
const formRef = ref();
|
||||
|
||||
/*上传文件配置 */
|
||||
|
||||
const accept = "";
|
||||
const route = useRoute();
|
||||
const iscreate = ref(route.query.iscreate === "1");
|
||||
|
||||
const isUpload = ref(false);
|
||||
|
||||
const fileList = ref([]);
|
||||
|
||||
const rules = {
|
||||
deliveryName: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入本次投放名称",
|
||||
trigger: "blur",
|
||||
},
|
||||
// { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
|
||||
],
|
||||
attachmentName: [
|
||||
{
|
||||
required: true,
|
||||
message: "请上传附件",
|
||||
trigger: "change",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
// description: [
|
||||
// {
|
||||
// required: true,
|
||||
// message: "请输入投放描述",
|
||||
// trigger: "change",
|
||||
// trigger: "blur",
|
||||
// },
|
||||
// ],
|
||||
};
|
||||
const formState = ref({
|
||||
deliveryName: "",
|
||||
checked: false,
|
||||
number: null,
|
||||
code: "",
|
||||
|
||||
attachmentName: "",
|
||||
description: "",
|
||||
attachment: [],
|
||||
});
|
||||
const onSubmit = () => {
|
||||
return formRef.value.validate();
|
||||
};
|
||||
const resetForm = () => {
|
||||
formRef.value.resetFields();
|
||||
};
|
||||
|
||||
/*上传文件配置 */
|
||||
const onCustomRequest = (file) => {
|
||||
console.log(file || file?.file || file?.file?.originFileObj);
|
||||
};
|
||||
/*上传文件配置 */
|
||||
const onBeforeUpload = (file) => {
|
||||
file = file?.file || file?.file?.originFileObj || file;
|
||||
console.log(file);
|
||||
const isLt50M = file.size / 1024 / 1024 < 50;
|
||||
if (!isLt50M) {
|
||||
Modal.error({
|
||||
title: "提示",
|
||||
content: "上传文件需小于50MB!",
|
||||
});
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
/* 上传文件 */
|
||||
const onUpload = async (file) => {
|
||||
file = file?.file && file?.file?.originFileObj;
|
||||
console.log(file);
|
||||
|
||||
const data = await common.cosUpload(file, file.name, "", () => {});
|
||||
console.log(data);
|
||||
fileList.value = [];
|
||||
formState.value.attachmentName = data?.name || file?.name;
|
||||
formState.value.attachment = [
|
||||
{
|
||||
url: data?.url || file?.name,
|
||||
name: file?.name,
|
||||
attachmentId: data?.attachmentId || file?.name,
|
||||
},
|
||||
];
|
||||
isUpload.value = false;
|
||||
};
|
||||
|
||||
const deleteUpdate = () => {
|
||||
console.log("deleteUpdate");
|
||||
formState.value.attachment = "";
|
||||
formState.value.attachmentName = "";
|
||||
formState.value.attachment = [];
|
||||
fileList.value = [];
|
||||
};
|
||||
|
||||
const getData = async () => {
|
||||
if (!iscreate.value) {
|
||||
const data = await deliveryPlan({
|
||||
sn: route.query.sn,
|
||||
deliveryPlanId: route.query.id,
|
||||
});
|
||||
// console.log(data);
|
||||
formState.value.deliveryName = data.data.title;
|
||||
formState.value.description = data.data.memo;
|
||||
if (data.data.attachment.length > 0) {
|
||||
formState.value.attachmentName = data.data.attachment[0].name;
|
||||
formState.value.attachment = data.data.attachment;
|
||||
} else {
|
||||
formState.value.attachmentName = "";
|
||||
formState.value.attachment = [];
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getData();
|
||||
});
|
||||
|
||||
const onOpen = (value) => {
|
||||
window.open(value.attachment[0].url);
|
||||
};
|
||||
|
||||
const handleCopy = (text) => {
|
||||
let input = document.createElement("input");
|
||||
input.value = formState.value.code;
|
||||
document.body.appendChild(input);
|
||||
input.select();
|
||||
document.execCommand("Copy");
|
||||
document.body.removeChild(input);
|
||||
message.success("复制成功");
|
||||
};
|
||||
|
||||
return {
|
||||
formRef,
|
||||
labelCol: {
|
||||
span: 3,
|
||||
style: {
|
||||
"text-align": "left",
|
||||
},
|
||||
},
|
||||
wrapperCol: { span: 14 },
|
||||
other: "",
|
||||
formState,
|
||||
rules,
|
||||
isUpload,
|
||||
fileList,
|
||||
iscreate,
|
||||
onBeforeUpload,
|
||||
deleteUpdate,
|
||||
onCustomRequest,
|
||||
onSubmit,
|
||||
resetForm,
|
||||
onUpload,
|
||||
onOpen,
|
||||
handleCopy,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.link-container {
|
||||
padding: 32px 24px;
|
||||
background: #fff;
|
||||
.title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.content {
|
||||
margin-top: 16px;
|
||||
.limitation {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.left {
|
||||
display: flex;
|
||||
}
|
||||
.isEditTable {
|
||||
::v-deep .ant-table-tbody > tr:hover:not(.ant-table-expanded-row) > td,
|
||||
.ant-table-row-hover,
|
||||
.ant-table-row-hover > td .rowClass {
|
||||
background-color: #f6f7fa !important;
|
||||
color: #e1e2e5;
|
||||
a {
|
||||
color: #e1e2e5;
|
||||
}
|
||||
}
|
||||
.is_copy {
|
||||
color: #2575fe;
|
||||
}
|
||||
.is_onmouse {
|
||||
color: #e1e2e5;
|
||||
padding-left: 15px;
|
||||
position: relative;
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 0;
|
||||
content: "";
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: #e1e2e5;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tableBox {
|
||||
margin-top: 16px;
|
||||
.is_active {
|
||||
color: #30c57c;
|
||||
padding-left: 15px;
|
||||
position: relative;
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 0;
|
||||
content: "";
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: #30c57c;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
.is_pause {
|
||||
color: #8c8c8c;
|
||||
padding-left: 15px;
|
||||
position: relative;
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 0;
|
||||
content: "";
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: #8c8c8c;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.customer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-left: 54px;
|
||||
}
|
||||
.copy {
|
||||
display: flex;
|
||||
}
|
||||
.copy-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 76px;
|
||||
height: 32px;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 2px 0 rgb(0 0 0 / 2%);
|
||||
cursor: pointer;
|
||||
background: #f5f5f5;
|
||||
&:hover {
|
||||
background: #d9d9d9;
|
||||
}
|
||||
}
|
||||
.copy-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.share-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.qrcode {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
.qrcode img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.download {
|
||||
margin-top: 12px;
|
||||
font-size: 14px;
|
||||
color: #70b936;
|
||||
}
|
||||
.download-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
.input {
|
||||
width: 328px;
|
||||
height: 32px;
|
||||
opacity: 1;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.input-upload {
|
||||
width: 103px;
|
||||
height: 32px;
|
||||
border-radius: 5px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.input-upload-show {
|
||||
min-width: 96px;
|
||||
padding: 0 10px;
|
||||
background: #fafafa;
|
||||
opacity: 1;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
border-radius: 5px;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
.iconfont {
|
||||
color: #d9d9d9;
|
||||
font-size: 14px;
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
.attachment {
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
align-items: center;
|
||||
}
|
||||
.curror {
|
||||
cursor: pointer;
|
||||
}
|
||||
.show-upload-accept {
|
||||
margin-left: 20px;
|
||||
color: rgb(191, 191, 191);
|
||||
}
|
||||
.show-count {
|
||||
color: rgb(191, 191, 191);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<div class="content">
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="formState"
|
||||
:rules="rules"
|
||||
:label-col="labelCol"
|
||||
:wrapper-col="wrapperCol"
|
||||
>
|
||||
<a-form-item label="消息接收者" name="">
|
||||
<a-input
|
||||
placeholder="请输入本次投放名称"
|
||||
v-model:value="formState.deliveryName"
|
||||
:show-count="true"
|
||||
:maxlength="50"
|
||||
class="input"
|
||||
>
|
||||
<template #suffix
|
||||
><span class="show-count"> {{ formState.deliveryName.length }}/50</span>
|
||||
</template>
|
||||
</a-input>
|
||||
<a-button type="text" class="custom-button" @click="addLogicHandle">
|
||||
<div class="flex-align">
|
||||
<i class="iconfont"></i>
|
||||
<span style="margin-left: 6px">新增人群包</span>
|
||||
</div>
|
||||
</a-button>
|
||||
<a-button type="text" class="custom-button" @click="addLogicHandle">
|
||||
<div class="flex-align">
|
||||
<i class="iconfont"></i>
|
||||
<span style="margin-left: 6px">查看人群包</span>
|
||||
</div>
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
<a-form-item label="消息内容" name="">
|
||||
<a-textarea
|
||||
placeholder="系统会将作答设置信息自动同步，如有额外的投放描述，请在此输入…"
|
||||
v-model:value="formState.description"
|
||||
:auto-size="{ minRows: 5, maxRows: 5 }"
|
||||
type="text-area"
|
||||
:maxlength="200"
|
||||
:show-count="true"
|
||||
style="min-width:580px"
|
||||
>
|
||||
</a-textarea>
|
||||
</a-form-item>
|
||||
<a-form-item label="消息展现示例" name="">
|
||||
<div style="width: 720px;height: 263px;background: #F9F9F9;opacity: 1;display: flex;justify-content: center;padding-top: 30px;">
|
||||
<img style="width: 45px;height: 37px;margin-right: 15px;" :src="require('@/assets/img/business_wechat.png')" alt="">
|
||||
<div style="width: 605px;height: 76px;background: #FFF;border-radius: 4px 4px 4px 4px;opacity: 0.7;padding: 10px;">
|
||||
<span style="color:#000">您好！我们诚邀您参加本次问卷调研。点击</span>
|
||||
<span style="color:#70B936"> xxxx品牌新品调研</span>
|
||||
<span style="color:#000"> 即可参与。感谢您的支持。</span>
|
||||
</div>
|
||||
</div>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
defineProps({
|
||||
|
||||
})
|
||||
const formState = ref({
|
||||
deliveryName: "",
|
||||
checked: false,
|
||||
number: null,
|
||||
code: "",
|
||||
|
||||
attachmentName: "",
|
||||
description: "",
|
||||
attachment: [],
|
||||
});
|
||||
const labelCol = ref({
|
||||
span: 6,
|
||||
style: {
|
||||
"text-align": "left",
|
||||
},
|
||||
})
|
||||
const wrapperCol = ref({ span: 18 })
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.input {
|
||||
width: 328px;
|
||||
height: 32px;
|
||||
opacity: 1;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -252,6 +252,7 @@ export default {
|
||||
.link-container {
|
||||
padding: 32px 24px;
|
||||
background: #fff;
|
||||
box-shadow: 0px 0px 6px 0px rgb(0 0 0 / 10%);
|
||||
.title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
|
||||
394
src/views/Publish/launch-center/launch-task/enterpriseWeChat.vue
Normal file
394
src/views/Publish/launch-center/launch-task/enterpriseWeChat.vue
Normal file
@@ -0,0 +1,394 @@
|
||||
<template>
|
||||
<div class="launch-center-create">
|
||||
<basicInformation ref="basicInformationRef" :isCreate="isCreate"></basicInformation>
|
||||
<div class="link-container" style="margin-top: 20px">
|
||||
<div class="customer">
|
||||
<sub-title>渠道应用信息</sub-title>
|
||||
<!-- <div class="customer-btn" style="text-align: right">
|
||||
<a-button type="primary" style="margin-right: 12px" @click="open" v-if="isCreate">
|
||||
<i class="iconfont icon-tianjia mr-10"></i>
|
||||
添加渠道应用
|
||||
</a-button>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="tableBox">
|
||||
<quantityLimitTable
|
||||
:isCreate="isCreate"
|
||||
v-model:datasource="datasource"
|
||||
@deleteRecord="deleteRecord"
|
||||
@update:datasource="onUpdate"
|
||||
:publish_number="publish_number"
|
||||
ref="quantityLimitTableRef"
|
||||
></quantityLimitTable>
|
||||
<!-- <launchListEmpty v-else></launchListEmpty> -->
|
||||
</div>
|
||||
<div class="customer-btn" style="text-align: right">
|
||||
<a-button type="primary" style="margin-right: 12px" v-if="isCreate" @click="save">
|
||||
确定投放
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<addChannelApplication
|
||||
ref="addChannelApplicationRef"
|
||||
:datasource="datasource"
|
||||
@selectRows="onSelectRows"
|
||||
></addChannelApplication>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import basicInformation from "../components/enterpriseBasicInformation.vue";
|
||||
import SubTitle from "@/views/DataAnalyse/components/SubTitle.vue";
|
||||
import quantityLimitTable from "../components/enterpriseQuantityLimitTable.vue";
|
||||
import launchListEmpty from "../components/launchListEmpty.vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { onMounted, ref, watch } from "@vue/runtime-core";
|
||||
import addChannelApplication from "../components/createChannelApplication.vue";
|
||||
import { add, channels } from "../api/php";
|
||||
import { getQrcode } from "@/api/publish";
|
||||
import { getAnswerSetting } from "@/views/planetDesign/api/api";
|
||||
import { Modal } from "ant-design-vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
basicInformation,
|
||||
quantityLimitTable,
|
||||
// launchListEmpty,
|
||||
SubTitle,
|
||||
addChannelApplication,
|
||||
},
|
||||
setup() {
|
||||
const route = useRoute();
|
||||
const isCreate = ref(false);
|
||||
const addChannelApplicationRef = ref();
|
||||
const basicInformationRef = ref();
|
||||
const datasource = ref([]);
|
||||
const loading = ref(false);
|
||||
const publish_number = ref(0);
|
||||
const quantityLimitTableRef = ref();
|
||||
const id = ref();
|
||||
const router = useRouter();
|
||||
isCreate.value = route.query.iscreate === "1" ? true : false;
|
||||
|
||||
watch(
|
||||
() => route.query.iscreate,
|
||||
(value) => {
|
||||
isCreate.value = value === "1" ? true : false;
|
||||
}
|
||||
);
|
||||
watch(
|
||||
() => route.query.id,
|
||||
(value) => {
|
||||
id.value = value;
|
||||
getList();
|
||||
}
|
||||
);
|
||||
id.value = route.query.id;
|
||||
|
||||
const open = () => {
|
||||
addChannelApplicationRef.value.showModal(datasource.value);
|
||||
};
|
||||
|
||||
const onSelectRows = (value) => {
|
||||
datasource.value = JSON.parse(JSON.stringify(value));
|
||||
console.log("onSelectRows", value);
|
||||
};
|
||||
const deleteRecord = (recode) => {
|
||||
datasource.value = JSON.parse(JSON.stringify(datasource.value.filter((s) => s !== recode)));
|
||||
};
|
||||
|
||||
const save = async () => {
|
||||
const params = await basicInformationRef.value.onSubmit();
|
||||
if (quantityLimitTableRef.value) {
|
||||
quantityLimitTableRef.value.onSubmit();
|
||||
}
|
||||
|
||||
console.log("save", datasource.value);
|
||||
|
||||
if (datasource.value.length > 0) {
|
||||
let sampleQuotaValue = 0;
|
||||
sampleQuotaValue = datasource.value
|
||||
.map((s) => s.sampleQuota)
|
||||
.reduce((s, v) => {
|
||||
let sampleQuota = 0;
|
||||
if (s) {
|
||||
sampleQuota += s || 0;
|
||||
}
|
||||
if (v) {
|
||||
sampleQuota += v;
|
||||
}
|
||||
return sampleQuota;
|
||||
});
|
||||
|
||||
if (sampleQuotaValue > publish_number.value && publish_number.value > 0) {
|
||||
Modal.error({
|
||||
content: "样本数量限制累计不能大于" + publish_number.value,
|
||||
title: "提示",
|
||||
});
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
Modal.error({
|
||||
content: "未添加渠道应用",
|
||||
title: "提示",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
Modal.confirm({
|
||||
title: "提示",
|
||||
content: "确定后,该投放任务将无法修改（除样本数量限制），可在投放中心查询业务进度",
|
||||
okText: "确认",
|
||||
cancelText: "取消",
|
||||
onOk() {
|
||||
setTimeout(async () => {
|
||||
if (params) {
|
||||
const url = await getUrl(route.query.sn);
|
||||
const data = await add({
|
||||
...params,
|
||||
deliverySource: 1,
|
||||
attachment: JSON.stringify(params.attachment),
|
||||
deliveryPlanList: datasource.value.map((s) => {
|
||||
return {
|
||||
channelId: s.systemName,
|
||||
deliveryStatus: 1,
|
||||
// directorCode: s.systemDescribe,
|
||||
// directorName: s.systemAdministrator,
|
||||
outerPlanId: route.query.sn,
|
||||
receiveApplicationCode: s.applicationCode,
|
||||
receiveApplicationName: s.applicationChineseName,
|
||||
sampleQuota: s.sampleQuota > 0 ? s.sampleQuota : 0,
|
||||
questionnaireUrl: url,
|
||||
receiverCodeNameList: JSON.stringify([
|
||||
{
|
||||
receiverCode: s.systemAdministratorPhone,
|
||||
receiverName: s.systemAdministrator,
|
||||
},
|
||||
]),
|
||||
};
|
||||
})
|
||||
,
|
||||
sn: route.query.sn,
|
||||
});
|
||||
if (data) {
|
||||
Modal.success({
|
||||
title: "提示",
|
||||
content: "添加成功",
|
||||
});
|
||||
router.back();
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const getNum = async () => {
|
||||
const data = await getAnswerSetting(route.query.sn);
|
||||
console.log("getNum", data.data.publish_number);
|
||||
publish_number.value = data.data.publish_number;
|
||||
};
|
||||
|
||||
const getUrl = async (sn) => {
|
||||
const data = await getQrcode(sn);
|
||||
return data.data.url;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getNum();
|
||||
getList();
|
||||
});
|
||||
|
||||
const getList = async () => {
|
||||
if (!(id.value && route.query.sn)) {
|
||||
return;
|
||||
}
|
||||
loading.value = true;
|
||||
const data = await channels({
|
||||
sn: route.query.sn,
|
||||
deliveryPlanId: route.query.id,
|
||||
}).finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
datasource.value = data.data.map((s) => {
|
||||
return {
|
||||
systemAdministratorPhone: s.system_administrator_phone,
|
||||
applicationChineseName: s.app_name,
|
||||
systemChineseName: "小程序",
|
||||
sampleQuota: s.samples > 0 ? s.samples : undefined,
|
||||
systemAdministrator: s.system_administrator,
|
||||
id: s.id,
|
||||
};
|
||||
});
|
||||
console.log("data.data.map", datasource.value);
|
||||
};
|
||||
|
||||
const onUpdate = (value) => {
|
||||
datasource.value = value.value;
|
||||
};
|
||||
|
||||
return {
|
||||
// eslint-disable-next-line vue/no-dupe-keys
|
||||
basicInformationRef,
|
||||
datasource,
|
||||
isCreate,
|
||||
addChannelApplicationRef,
|
||||
onUpdate,
|
||||
deleteRecord,
|
||||
onSelectRows,
|
||||
publish_number,
|
||||
open,
|
||||
save,
|
||||
quantityLimitTableRef,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.launch-center-create {
|
||||
// position: relative;
|
||||
.link-container {
|
||||
padding: 32px 24px;
|
||||
background: #fff;
|
||||
box-shadow: 0px 0px 6px 0px rgb(0 0 0 / 10%);
|
||||
.title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.content {
|
||||
margin-top: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.left {
|
||||
display: flex;
|
||||
}
|
||||
.isEditTable {
|
||||
::v-deep .ant-table-tbody > tr:hover:not(.ant-table-expanded-row) > td,
|
||||
.ant-table-row-hover,
|
||||
.ant-table-row-hover > td .rowClass {
|
||||
background-color: #f6f7fa !important;
|
||||
color: #e1e2e5;
|
||||
a {
|
||||
color: #e1e2e5;
|
||||
}
|
||||
}
|
||||
.is_copy {
|
||||
color: #2575fe;
|
||||
}
|
||||
.is_onmouse {
|
||||
color: #e1e2e5;
|
||||
padding-left: 15px;
|
||||
position: relative;
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 0;
|
||||
content: "";
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: #e1e2e5;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tableBox {
|
||||
margin-top: 16px;
|
||||
.is_active {
|
||||
color: #30c57c;
|
||||
padding-left: 15px;
|
||||
position: relative;
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 0;
|
||||
content: "";
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: #30c57c;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
.is_pause {
|
||||
color: #8c8c8c;
|
||||
padding-left: 15px;
|
||||
position: relative;
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 0;
|
||||
content: "";
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: #8c8c8c;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.customer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-left: 54px;
|
||||
}
|
||||
.copy-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 76px;
|
||||
height: 32px;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 2px 0 rgb(0 0 0 / 2%);
|
||||
cursor: pointer;
|
||||
background: #f5f5f5;
|
||||
&:hover {
|
||||
background: #d9d9d9;
|
||||
}
|
||||
}
|
||||
.copy-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.share-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.qrcode {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
.qrcode img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.download {
|
||||
margin-top: 12px;
|
||||
font-size: 14px;
|
||||
color: #70b936;
|
||||
}
|
||||
.download-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
.mr-10 {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.fixed {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -65,6 +65,45 @@
|
||||
</div>
|
||||
</div>
|
||||
<div v-else></div>
|
||||
<a-modal
|
||||
v-model:visible="visible"
|
||||
wrapClassName="custom-modal"
|
||||
width="624px"
|
||||
style="height:368px"
|
||||
:destroyOnClose="true"
|
||||
:centered="true"
|
||||
:maskClosable="false"
|
||||
:footer="null"
|
||||
@cancel="onCancel"
|
||||
title="选择投放类型"
|
||||
>
|
||||
<div class="delivery-type">
|
||||
<div class="wechat-type" :class="isSelected===1?'selected':''" @click="onSelected(1)">
|
||||
<div class="title">
|
||||
<img :src="require('@/assets/img/business_wechat.png')" alt="">
|
||||
<span>企业微信</span>
|
||||
</div>
|
||||
<div class="present">
|
||||
<p>适用于内部员工调研</p>
|
||||
<p>可指定多成员、多部门、多标签参与</p>
|
||||
</div>
|
||||
<a-button class="custom-button" style="color: #000;" @click="onNewBuilt(1)">
|
||||
开始新建
|
||||
</a-button>
|
||||
</div>
|
||||
<div class="wechat-type" :class="isSelected===2?'selected':''" @click="onSelected(2)">
|
||||
<div class="title">小程序</div>
|
||||
<div class="present program">
|
||||
<p>通过消息中心传递至小程序</p>
|
||||
<p>请先联系小程序运营人员支持标签参与</p>
|
||||
</div>
|
||||
<div class="typeBtn"></div>
|
||||
<a-button class="custom-button" style="color: #000;" @click="onNewBuilt(2)">
|
||||
开始新建
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -138,16 +177,22 @@ export default {
|
||||
// projectname.value = res.data.project_name;
|
||||
};
|
||||
|
||||
const visible = ref(false)
|
||||
const addLaunchTask = (iscreate = 0, item) => {
|
||||
console.log("create", item);
|
||||
router.push({
|
||||
path: "create",
|
||||
query: {
|
||||
...route.query,
|
||||
iscreate: iscreate,
|
||||
id: item?.record?.plan_id,
|
||||
},
|
||||
});
|
||||
if(iscreate===1) {
|
||||
visible.value = true
|
||||
}else{
|
||||
// 小程序投放入口
|
||||
router.push({
|
||||
path: "create",
|
||||
query: {
|
||||
...route.query,
|
||||
iscreate: iscreate,
|
||||
id: item?.record?.plan_id,
|
||||
},
|
||||
});
|
||||
}
|
||||
};
|
||||
const lockLaunchTask = (item) => {
|
||||
addLaunchTask(0, item);
|
||||
@@ -194,6 +239,35 @@ export default {
|
||||
}
|
||||
};
|
||||
|
||||
const isSelected = ref(0)
|
||||
const onSelected = (isSelect) => {
|
||||
isSelected.value = isSelect
|
||||
}
|
||||
const onNewBuilt = (type) => {
|
||||
if(type===1) {
|
||||
// 企业微信投放入口
|
||||
router.push({
|
||||
path: "enterprise-weChat",
|
||||
query: {
|
||||
...route.query,
|
||||
iscreate: 1,
|
||||
},
|
||||
});
|
||||
}else{
|
||||
// 小程序投放入口
|
||||
router.push({
|
||||
path: "create",
|
||||
query: {
|
||||
...route.query,
|
||||
iscreate: 1,
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
const onCancel = () => {
|
||||
isSelected.value = 0
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await fetchInfo(route.query.sn);
|
||||
if (status.value === 1) {
|
||||
@@ -225,6 +299,11 @@ export default {
|
||||
createQuantityLimitRef,
|
||||
onPageChange,
|
||||
onShowSizeChange,
|
||||
visible,
|
||||
isSelected,
|
||||
onSelected,
|
||||
onCancel,
|
||||
onNewBuilt,
|
||||
};
|
||||
},
|
||||
};
|
||||
@@ -389,4 +468,42 @@ export default {
|
||||
height: 36px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.delivery-type {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.wechat-type {
|
||||
width: 264px;
|
||||
height: 256px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 6px 6px 6px 6px;
|
||||
opacity: 1;
|
||||
border: 1px solid #DFE0E3;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
.wechat-type:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
.present {
|
||||
margin: 24px 0 31px;
|
||||
text-align: center;
|
||||
color: #908B8B;
|
||||
p {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.program {
|
||||
margin: 25px 0 32px;
|
||||
}
|
||||
img {
|
||||
margin-right: 9px;
|
||||
}
|
||||
.selected {
|
||||
border: 1px solid #70B936;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user