|
|
@@ -1,47 +1,134 @@
|
|
|
<template>
|
|
|
<Spin class="loading-style" :spinning="loading" tip="Loading...">
|
|
|
<div v-if="!loading">
|
|
|
- <Drawer :open="visible" title="群发消息" width="800" class="user-phase-drawer" @close="handleClose">
|
|
|
+ <Drawer
|
|
|
+ :open="visible"
|
|
|
+ title="群发消息"
|
|
|
+ width="800"
|
|
|
+ class="user-phase-drawer"
|
|
|
+ @close="handleClose"
|
|
|
+ >
|
|
|
<Steps :current="currentStep" size="default" class="step-style">
|
|
|
<Step class="custom-step" title="编辑群发"></Step>
|
|
|
<Step class="custom-step" title="编辑内容"></Step>
|
|
|
</Steps>
|
|
|
<!-- <div v-if="isDataLoaded"> -->
|
|
|
<div v-if="currentStep === 0" class="step-content">
|
|
|
- <Form :model="form" :label-col="{ span: 3 }" :wrapper-col="{ span: 19 }" ref="formRef" :rules="rules">
|
|
|
- <FormItem label="任务名称" name="taskName" :rules="[{ required: true, message: '请输入' }]">
|
|
|
- <Input :disabled="btnDisabled" v-model:value="form.taskName" placeholder="请输入" :maxlength="20"
|
|
|
- show-count />
|
|
|
+ <Form
|
|
|
+ :model="form"
|
|
|
+ :label-col="{ span: 3 }"
|
|
|
+ :wrapper-col="{ span: 19 }"
|
|
|
+ ref="formRef"
|
|
|
+ :rules="rules"
|
|
|
+ >
|
|
|
+ <FormItem
|
|
|
+ label="任务名称"
|
|
|
+ name="taskName"
|
|
|
+ :rules="[{ required: true, message: '请输入' }]"
|
|
|
+ >
|
|
|
+ <Input
|
|
|
+ :disabled="btnDisabled"
|
|
|
+ v-model:value="form.taskName"
|
|
|
+ placeholder="请输入"
|
|
|
+ :maxlength="20"
|
|
|
+ show-count
|
|
|
+ />
|
|
|
</FormItem>
|
|
|
<FormItem label="发送账号" name="wxid" :rules="[{ required: true, message: '请选择' }]">
|
|
|
- <Select :disabled="btnDisabled" v-model:value="form.wxid" placeholder="请选择"
|
|
|
- :options="accountList"></Select>
|
|
|
+ <Select
|
|
|
+ :disabled="btnDisabled"
|
|
|
+ v-model:value="form.wxid"
|
|
|
+ placeholder="请选择"
|
|
|
+ :options="accountList"
|
|
|
+ ></Select>
|
|
|
</FormItem>
|
|
|
- <FormItem label="标签" name="labels" :rules="[{ required: true, message: '请选择' }]">
|
|
|
- <Select :disabled="btnDisabled" v-model:value="form.labels" :options="actionLabel" allowClear
|
|
|
- mode="multiple" size="middle" placeholder="请选择" :style="{ margin: '0 5px' }"></Select>
|
|
|
- <span v-show="form.labels.length === 0" class="warning-style">请选择标签</span>
|
|
|
+ <FormItem
|
|
|
+ label="客户标签"
|
|
|
+ name="labels"
|
|
|
+ :rules="[{ required: true, message: '请选择' }]"
|
|
|
+ >
|
|
|
+ <Checkbox v-model:checked="form.checked" @change="handleSelectAll('labels', 'checked')">
|
|
|
+ 全选
|
|
|
+ </Checkbox>
|
|
|
+ <Select
|
|
|
+ :disabled="btnDisabled || form.checked"
|
|
|
+ v-model:value="form.labels"
|
|
|
+ :options="actionLabel"
|
|
|
+ allowClear
|
|
|
+ mode="multiple"
|
|
|
+ size="middle"
|
|
|
+ placeholder="请选择"
|
|
|
+ :style="{ margin: '0 5px', width: '515px' }"
|
|
|
+ :max-tag-count="2"
|
|
|
+ @change="handleSelectChange('labels', form.labels, 'checked')"
|
|
|
+ ></Select>
|
|
|
+ <!-- <span v-show="form.labels.length === 0" class="warning-style">请选择标签</span> -->
|
|
|
</FormItem>
|
|
|
- <FormItem label="发送方式" name="conditionOperator" :rules="[{ required: true, message: '请选择发送方式' }]">
|
|
|
+ <FormItem
|
|
|
+ label="客群标签"
|
|
|
+ name="labelsGroup"
|
|
|
+ :rules="[{ required: true, message: '请选择' }]"
|
|
|
+ >
|
|
|
+ <Checkbox
|
|
|
+ v-model:checked="form.checked1"
|
|
|
+ @change="handleSelectAll('labelsGroup', 'checked1')"
|
|
|
+ >
|
|
|
+ 全选
|
|
|
+ </Checkbox>
|
|
|
+ <Select
|
|
|
+ :disabled="btnDisabled || form.checked1"
|
|
|
+ v-model:value="form.labelsGroup"
|
|
|
+ :options="actionLabelGroup"
|
|
|
+ allowClear
|
|
|
+ mode="multiple"
|
|
|
+ size="middle"
|
|
|
+ placeholder="请选择"
|
|
|
+ :max-tag-count="2"
|
|
|
+ :style="{ margin: '0 5px', width: '515px' }"
|
|
|
+ @change="handleSelectChange('labelsGroup', form.labelsGroup, 'checked1')"
|
|
|
+ ></Select>
|
|
|
+ <!-- <span v-show="form.labelsGroup.length === 0" class="warning-style">请选择标签</span> -->
|
|
|
+ </FormItem>
|
|
|
+ <FormItem
|
|
|
+ label="发送方式"
|
|
|
+ name="conditionOperator"
|
|
|
+ :rules="[{ required: true, message: '请选择发送方式' }]"
|
|
|
+ >
|
|
|
<Radio.Group v-model:value="form.conditionOperator" :disabled="btnDisabled">
|
|
|
<Radio value="1">立即发送</Radio>
|
|
|
<Radio value="2">定时发送</Radio>
|
|
|
</Radio.Group>
|
|
|
</FormItem>
|
|
|
- <FormItem v-if="form.conditionOperator == '2'" label="发送时间" name="startTimeStr"
|
|
|
- :rules="[{ required: true, message: '请选择发送时间' }]">
|
|
|
+ <FormItem
|
|
|
+ v-if="form.conditionOperator == '2'"
|
|
|
+ label="发送时间"
|
|
|
+ name="startTimeStr"
|
|
|
+ :rules="[{ required: true, message: '请选择发送时间' }]"
|
|
|
+ >
|
|
|
<!-- <DatePicker v-model:value="form.sendTimeStr" placeholder="请选择发送时间" format="YYYY-MM-DD HH:mm:ss"
|
|
|
:disabled-date="disabledDate" :show-time="{ defaultValue: dayjs('00:00:00', 'HH:mm:ss') }"
|
|
|
:disabled="btnDisabled" /> -->
|
|
|
- <DatePicker v-model:value="form.startTimeStr" placeholder="请选择发送时间" format="YYYY-MM-DD HH:mm"
|
|
|
- :disabled-date="disabledDate" :show-time="{ defaultValue: dayjs('00:00:00', 'HH:mm') }" :disabled-time="disabledTime"
|
|
|
- :disabled="btnDisabled" @change="handleDateTimeChange" />
|
|
|
+ <DatePicker
|
|
|
+ v-model:value="form.startTimeStr"
|
|
|
+ placeholder="请选择发送时间"
|
|
|
+ format="YYYY-MM-DD HH:mm"
|
|
|
+ :disabled-date="disabledDate"
|
|
|
+ :show-time="{ defaultValue: dayjs('00:00:00', 'HH:mm') }"
|
|
|
+ :disabled-time="disabledTime"
|
|
|
+ :disabled="btnDisabled"
|
|
|
+ @change="handleDateTimeChange"
|
|
|
+ />
|
|
|
</FormItem>
|
|
|
</Form>
|
|
|
</div>
|
|
|
<!-- 第二步 -->
|
|
|
<div v-if="currentStep === 1" class="step-content">
|
|
|
- <Form :model="taskForm" :label-col="{ span: 3 }" :wrapper-col="{ span: 19 }" ref="taskFormRef">
|
|
|
+ <Form
|
|
|
+ :model="taskForm"
|
|
|
+ :label-col="{ span: 3 }"
|
|
|
+ :wrapper-col="{ span: 19 }"
|
|
|
+ ref="taskFormRef"
|
|
|
+ >
|
|
|
<FormItem label="" name="msg" :rules="[{ required: true, message: '请输入消息内容' }]">
|
|
|
<MsgContant v-model:value="taskForm.msg" :msgDisabled="btnDisabled" />
|
|
|
</FormItem>
|
|
|
@@ -60,320 +147,402 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import { unref, defineProps, defineEmits, ref, toRefs, watch, reactive, onMounted } from 'vue';
|
|
|
-import {
|
|
|
- Drawer,
|
|
|
- Form,
|
|
|
- FormItem,
|
|
|
- Input,
|
|
|
- Radio,
|
|
|
- Button,
|
|
|
- Steps,
|
|
|
- Step,
|
|
|
- Select,
|
|
|
- Spin,
|
|
|
- DatePicker,
|
|
|
- message,
|
|
|
-} from 'ant-design-vue';
|
|
|
-import type { FormInstance } from 'ant-design-vue';
|
|
|
-import { getLabelSelectList } from '@/api/wechat/label';
|
|
|
-import dayjs, { Dayjs } from 'dayjs';
|
|
|
-import MsgContant from './msgContant.vue';
|
|
|
-import { getWxList } from '@/api/wechat/wx';
|
|
|
-import { createBatchMsg, getBatchMsgById } from '@/api/wechat/batchMsg';
|
|
|
+ import { unref, defineProps, defineEmits, ref, toRefs, watch, reactive, onMounted } from 'vue';
|
|
|
+ import {
|
|
|
+ Drawer,
|
|
|
+ Form,
|
|
|
+ FormItem,
|
|
|
+ Input,
|
|
|
+ Radio,
|
|
|
+ Button,
|
|
|
+ Steps,
|
|
|
+ Step,
|
|
|
+ Select,
|
|
|
+ Spin,
|
|
|
+ DatePicker,
|
|
|
+ message,
|
|
|
+ SelectOptGroup,
|
|
|
+ SelectOption,
|
|
|
+ Checkbox,
|
|
|
+ } from 'ant-design-vue';
|
|
|
+ import type { FormInstance } from 'ant-design-vue';
|
|
|
+ import { getLabelSelectList } from '@/api/wechat/label';
|
|
|
+ import dayjs, { Dayjs } from 'dayjs';
|
|
|
+ import MsgContant from './msgContant.vue';
|
|
|
+ import { getWxList } from '@/api/wechat/wx';
|
|
|
+ import { createBatchMsg, getBatchMsgById } from '@/api/wechat/batchMsg';
|
|
|
+ import { UserOutlined, TeamOutlined } from '@ant-design/icons-vue';
|
|
|
+ const props = defineProps<{
|
|
|
+ visible: boolean;
|
|
|
+ msgId: {
|
|
|
+ type: Number; // 支持 number 和 ref 类型
|
|
|
+ required: true;
|
|
|
+ };
|
|
|
+ }>();
|
|
|
+ const emit = defineEmits<{
|
|
|
+ (event: 'update:open', value: boolean): void;
|
|
|
+ (event: 'update:getMsgList', value: { value: boolean }): void;
|
|
|
+ (event: 'update:msgId', value: { value: number | null }): void;
|
|
|
+ }>();
|
|
|
+ const { visible, msgId } = toRefs(props);
|
|
|
+ const loading = ref(false);
|
|
|
+ const currentStep = ref(0);
|
|
|
+ const formRef = ref<FormInstance | null>(null);
|
|
|
+ const taskFormRef = ref<FormInstance | null>(null);
|
|
|
+ const btnDisabled = ref(false);
|
|
|
+ const actionLabel = ref([]);
|
|
|
+ const actionLabelGroup = ref([]);
|
|
|
+ const accountList = ref([]);
|
|
|
+ const checked = ref(false);
|
|
|
+ const checked1 = ref(false);
|
|
|
+ const form = reactive({
|
|
|
+ taskName: '',
|
|
|
+ wxid: '',
|
|
|
+ conditionOperator: '1',
|
|
|
+ startTimeStr: '',
|
|
|
+ labels: [],
|
|
|
+ labelsGroup: [],
|
|
|
+ checked:false,
|
|
|
+ checked1:false,
|
|
|
+ });
|
|
|
+ const rules = {
|
|
|
+ taskName: [{ required: true, message: '请输入任务名称', trigger: 'blur' }],
|
|
|
+ conditionOperator: [{ required: true, message: '请选择条件关系', trigger: 'change' }],
|
|
|
+ };
|
|
|
+ const initialForm = reactive({
|
|
|
+ taskName: '',
|
|
|
+ conditionOperator: '1',
|
|
|
+ wxid: '',
|
|
|
+ startTimeStr: '',
|
|
|
+ labels: [],
|
|
|
+ labelsGroup: [],
|
|
|
+ checked:false,
|
|
|
+ checked1:false,
|
|
|
+ });
|
|
|
+ const taskForm = reactive({
|
|
|
+ msg: [{ type: 1, content: '' }],
|
|
|
+ });
|
|
|
+ const initialTaskForm = reactive({
|
|
|
+ msg: [{ type: 1, content: '' }],
|
|
|
+ });
|
|
|
+ onMounted(async () => {
|
|
|
+ loading.value = true;
|
|
|
+ try {
|
|
|
+ let res = await getLabelSelectList({ page: 1, pageSize: 1000, type: 1 });
|
|
|
+ // actionLabel.value = res.data.map((item) => ({
|
|
|
+ // label: item.label,
|
|
|
+ // value: item.label,
|
|
|
+ // }));
|
|
|
+ actionLabel.value = res.data;
|
|
|
+ let res1 = await getLabelSelectList({ page: 1, pageSize: 1000, type: 2 });
|
|
|
+ actionLabelGroup.value = res1.data;
|
|
|
+ const result = await getWxList({ page: 1, pageSize: 50 });
|
|
|
+ if (result.code == 0) {
|
|
|
+ accountList.value = result.data.data.map((item) => ({
|
|
|
+ label: item.nickname,
|
|
|
+ value: item.wxid,
|
|
|
+ }));
|
|
|
+ }
|
|
|
+ if (unref(msgId)) {
|
|
|
+ await getBatchDetail(unref(msgId));
|
|
|
+ btnDisabled.value = true;
|
|
|
+ console.log('预览----');
|
|
|
+ } else {
|
|
|
+ console.log('新建----');
|
|
|
+ resetForms();
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('初始化失败:', error);
|
|
|
+ } finally {
|
|
|
+ loading.value = false; // 数据加载完成，关闭 loading
|
|
|
+ }
|
|
|
+ });
|
|
|
|
|
|
-const props = defineProps<{
|
|
|
- visible: boolean;
|
|
|
- msgId: {
|
|
|
- type: Number; // 支持 number 和 ref 类型
|
|
|
- required: true;
|
|
|
+ const disabledDate = (current: Dayjs) => {
|
|
|
+ return current && current < dayjs().startOf('day');
|
|
|
};
|
|
|
-}>();
|
|
|
-const emit = defineEmits<{
|
|
|
- (event: 'update:open', value: boolean): void;
|
|
|
- (event: 'update:getMsgList', value: { value: boolean; }): void;
|
|
|
- (event: 'update:msgId', value: { value: number | null; }): void;
|
|
|
-}>();
|
|
|
-const { visible, msgId } = toRefs(props);
|
|
|
-const loading = ref(false);
|
|
|
-const currentStep = ref(0);
|
|
|
-const formRef = ref<FormInstance | null>(null);
|
|
|
-const taskFormRef = ref<FormInstance | null>(null);
|
|
|
-const btnDisabled = ref(false);
|
|
|
-const actionLabel = ref([]);
|
|
|
-const accountList = ref([]);
|
|
|
|
|
|
-const form = reactive({
|
|
|
- taskName: '',
|
|
|
- wxid: '',
|
|
|
- conditionOperator: '1',
|
|
|
- startTimeStr: '',
|
|
|
- labels: [],
|
|
|
-});
|
|
|
-const rules = {
|
|
|
- taskName: [{ required: true, message: '请输入任务名称', trigger: 'blur' }],
|
|
|
- conditionOperator: [{ required: true, message: '请选择条件关系', trigger: 'change' }],
|
|
|
-};
|
|
|
-const initialForm = reactive({
|
|
|
- taskName: '',
|
|
|
- conditionOperator: '1',
|
|
|
- wxid: '',
|
|
|
- startTimeStr: '',
|
|
|
- labels: [],
|
|
|
-});
|
|
|
-const taskForm = reactive({
|
|
|
- msg: [{ type: 1, content: '' }],
|
|
|
-});
|
|
|
-const initialTaskForm = reactive({
|
|
|
- msg: [{ type: 1, content: '' }],
|
|
|
-});
|
|
|
-onMounted(async () => {
|
|
|
- loading.value = true;
|
|
|
- try {
|
|
|
- let res = await getLabelSelectList({ page: 1, pageSize: 1000, type: 1 });
|
|
|
- actionLabel.value = res.data.map(item => ({
|
|
|
- label: item.label,
|
|
|
- value: item.label,
|
|
|
- }));
|
|
|
- const result = await getWxList({ page: 1, pageSize: 50 });
|
|
|
- if (result.code == 0) {
|
|
|
- accountList.value = result.data.data.map(item => ({
|
|
|
- label: item.nickname,
|
|
|
- value: item.wxid,
|
|
|
- }));
|
|
|
+ const disabledTime = (current: Dayjs) => {
|
|
|
+ if (current && current.isSame(dayjs(), 'day')) {
|
|
|
+ const now = dayjs();
|
|
|
+ return {
|
|
|
+ disabledHours: () => [...Array(now.hour()).keys()],
|
|
|
+ disabledMinutes: (selectedHour) => {
|
|
|
+ if (selectedHour === now.hour()) {
|
|
|
+ return [...Array(now.minute() + 1).keys()];
|
|
|
+ }
|
|
|
+ return [];
|
|
|
+ },
|
|
|
+ };
|
|
|
}
|
|
|
- if (unref(msgId)) {
|
|
|
- await getBatchDetail(unref(msgId));
|
|
|
- btnDisabled.value = true;
|
|
|
- console.log('预览----');
|
|
|
- } else {
|
|
|
- console.log('新建----');
|
|
|
- resetForms();
|
|
|
+ return {};
|
|
|
+ };
|
|
|
+ // 处理日期和时间选择的变化
|
|
|
+ const handleDateTimeChange = (selectedDateTime) => {
|
|
|
+ if (selectedDateTime) {
|
|
|
+ const selectedDate = dayjs(selectedDateTime).startOf('day');
|
|
|
+ const today = dayjs().startOf('day');
|
|
|
+ const selectedTime = dayjs(selectedDateTime).format('HH:mm');
|
|
|
+
|
|
|
+ // 如果选择的日期是今天并且时间在当前时间之前，则重置或提示
|
|
|
+ if (selectedDate.isSame(today) && selectedTime < dayjs().format('HH:mm')) {
|
|
|
+ // 根据需求进行处理，比如弹出提示或重置时间
|
|
|
+ // alert("选择的时间不能是当前时间之前");
|
|
|
+ message.error('选择的时间不能是当前时间之前');
|
|
|
+ form.startTimeStr = null; // 或者重置为其他有效值
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+ function handleSelectAll(type, checkedKey) {
|
|
|
+ if (checkedKey === 'checked') {
|
|
|
+ if (form.checked) {
|
|
|
+ // 当全选时，将表单字段设置为 0
|
|
|
+ form.labels = actionLabel.value;
|
|
|
+ } else {
|
|
|
+ // 取消全选时，重置表单字段
|
|
|
+ form.labels = [];
|
|
|
+ }
|
|
|
+ } else if (checkedKey === 'checked1') {
|
|
|
+ if (form.checked1) {
|
|
|
+ // 当全选时，将表单字段设置为 0
|
|
|
+ form.labelsGroup = actionLabelGroup.value;
|
|
|
+ } else {
|
|
|
+ // 取消全选时，重置表单字段
|
|
|
+ form.labelsGroup = [];
|
|
|
+ }
|
|
|
}
|
|
|
- } catch (error) {
|
|
|
- console.error('初始化失败:', error);
|
|
|
- } finally {
|
|
|
- loading.value = false; // 数据加载完成，关闭 loading
|
|
|
}
|
|
|
-});
|
|
|
-
|
|
|
-
|
|
|
-const disabledDate = (current: Dayjs) => {
|
|
|
- return current && current < dayjs().startOf('day');
|
|
|
-};
|
|
|
+ // 监听 Select 选项变化，动态更新 Checkbox 状态
|
|
|
+function handleSelectChange(type, selectedValues, checkedKey) {
|
|
|
+ // 获取所有选项的数量
|
|
|
+ const allOptions = type === 'labels' ? actionLabel.value : actionLabelGroup.value;
|
|
|
+ const allSelected = selectedValues.length === allOptions.length;
|
|
|
|
|
|
-const disabledTime = (current: Dayjs) => {
|
|
|
- if (current && current.isSame(dayjs(), 'day')) {
|
|
|
- const now = dayjs();
|
|
|
- return {
|
|
|
- disabledHours: () => [...Array(now.hour()).keys()],
|
|
|
- disabledMinutes: (selectedHour) => {
|
|
|
- if (selectedHour === now.hour()) {
|
|
|
- return [...Array(now.minute() + 1).keys()];
|
|
|
- }
|
|
|
- return [];
|
|
|
- },
|
|
|
- };
|
|
|
+ // 根据选择情况更新 Checkbox 状态
|
|
|
+ if (checkedKey === 'checked') {
|
|
|
+ form.checked = allSelected; // 当所有选中时，设置全选
|
|
|
+ } else if (checkedKey === 'checked1') {
|
|
|
+ form.checked1 = allSelected; // 当所有选中时，设置全选
|
|
|
}
|
|
|
- return {};
|
|
|
-};
|
|
|
-// 处理日期和时间选择的变化
|
|
|
-const handleDateTimeChange = (selectedDateTime) => {
|
|
|
- if (selectedDateTime) {
|
|
|
- const selectedDate = dayjs(selectedDateTime).startOf('day');
|
|
|
- const today = dayjs().startOf('day');
|
|
|
- const selectedTime = dayjs(selectedDateTime).format('HH:mm');
|
|
|
-
|
|
|
- // 如果选择的日期是今天并且时间在当前时间之前，则重置或提示
|
|
|
- if (selectedDate.isSame(today) && selectedTime < dayjs().format('HH:mm')) {
|
|
|
- // 根据需求进行处理，比如弹出提示或重置时间
|
|
|
- // alert("选择的时间不能是当前时间之前");
|
|
|
- message.error('选择的时间不能是当前时间之前');
|
|
|
- form.startTimeStr = null; // 或者重置为其他有效值
|
|
|
+}
|
|
|
+ function nextStep() {
|
|
|
+ if (currentStep.value === 0) {
|
|
|
+ formRef.value
|
|
|
+ ?.validate()
|
|
|
+ .then((res) => {
|
|
|
+ currentStep.value += 1;
|
|
|
+ })
|
|
|
+ .catch((error) => {
|
|
|
+ console.error('校验失败:', error);
|
|
|
+ });
|
|
|
}
|
|
|
}
|
|
|
-};
|
|
|
|
|
|
-function nextStep() {
|
|
|
- if (currentStep.value === 0) {
|
|
|
- formRef.value
|
|
|
- ?.validate()
|
|
|
- .then((res) => {
|
|
|
- currentStep.value += 1;
|
|
|
- })
|
|
|
- .catch((error) => {
|
|
|
- console.error('校验失败:', error);
|
|
|
- });
|
|
|
+ function prevStep() {
|
|
|
+ if (currentStep.value > 0) {
|
|
|
+ currentStep.value -= 1;
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-function prevStep() {
|
|
|
- if (currentStep.value > 0) {
|
|
|
- currentStep.value -= 1;
|
|
|
+ function resetForms() {
|
|
|
+ Object.assign(form, initialForm);
|
|
|
+ Object.assign(taskForm, initialTaskForm);
|
|
|
+ currentStep.value = 0;
|
|
|
+ emit('update:msgId', null);
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-function resetForms() {
|
|
|
- Object.assign(form, initialForm);
|
|
|
- Object.assign(taskForm, initialTaskForm);
|
|
|
- currentStep.value = 0;
|
|
|
- emit('update:msgId', null);
|
|
|
-}
|
|
|
+ async function getBatchDetail(id) {
|
|
|
+ loading.value = true;
|
|
|
+ try {
|
|
|
+ let data = await getBatchMsgById({ id, type: 1 });
|
|
|
+ let labels;
|
|
|
+ let checked;
|
|
|
+ let labelsGroups;
|
|
|
+ let checked1;
|
|
|
+ if(data.data?.labels === [0]){
|
|
|
+ checked = true;
|
|
|
+ labels = actionLabel.value;
|
|
|
+ }else{
|
|
|
+ checked = false;
|
|
|
+ labels = (data.data?.labels ?? '').split(',') || [];
|
|
|
+ }
|
|
|
+ if(data.data?.labelsGroups === [0]){
|
|
|
+ checked1 = true;
|
|
|
+ labelsGroups = actionLabelGroup.value;
|
|
|
+ }else{
|
|
|
+ checked1 = false;
|
|
|
+ labelsGroups = (data.data?.labelsGroup ?? '').split(',') || [];
|
|
|
+ }
|
|
|
+ // let labels = data.data.tag.split(',') || [];
|
|
|
+ // let labels = (data.data?.labels ?? '').split(',') || [];
|
|
|
+ // let labelsGroups = (data.data?.labelsGroups ?? '').split(',') || [];
|
|
|
+ console.log(data.data,'======');
|
|
|
+ let parsedDate = dayjs(data.data.startTimeStr, 'YYYY-MM-DD HH:mm');
|
|
|
+ Object.assign(form, {
|
|
|
+ taskName: data.data.taskName,
|
|
|
+ wxid: data.data.fromwxid,
|
|
|
+ conditionOperator: data.data.sendTime !== null ? '2' : '1',
|
|
|
+ labels,
|
|
|
+ checked: data.data?.labels === [0] ? true : false,
|
|
|
+ checked1: data.data?.labelsGroups === [0] ? true : false,
|
|
|
+ // labelsGroup,
|
|
|
+ // startTimeStr:dayjs(data.data.startTimeStr).format("YYYY-MM-DD HH:mm") || '',
|
|
|
+ startTimeStr: parsedDate.isValid() ? parsedDate : dayjs(),
|
|
|
+ });
|
|
|
+ let magList;
|
|
|
|
|
|
-async function getBatchDetail(id) {
|
|
|
- loading.value = true;
|
|
|
- try {
|
|
|
- let data = await getBatchMsgById({ id, type: 1 });
|
|
|
- let labels = data.data.tag.split(',') || [];
|
|
|
- console.log(data.data)
|
|
|
- let parsedDate = dayjs(data.data.startTimeStr, 'YYYY-MM-DD HH:mm');
|
|
|
- Object.assign(form, {
|
|
|
- taskName: data.data.taskName,
|
|
|
- wxid: data.data.fromwxid,
|
|
|
- conditionOperator: data.data.sendTime !== null ? '2' : '1',
|
|
|
- labels,
|
|
|
- // startTimeStr:dayjs(data.data.startTimeStr).format("YYYY-MM-DD HH:mm") || '',
|
|
|
- startTimeStr: parsedDate.isValid() ? parsedDate : dayjs(),
|
|
|
- });
|
|
|
- let magList;
|
|
|
+ magList = data.data.msg.replace(/\\"/g, '"');
|
|
|
+ Object.assign(taskForm, {
|
|
|
+ msg: JSON.parse(magList) || [{ type: 1, content: '' }],
|
|
|
+ });
|
|
|
+ } catch (error) {
|
|
|
+ console.error('获取详情失败:', error);
|
|
|
+ // 处理错误
|
|
|
+ } finally {
|
|
|
+ loading.value = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- magList = data.data.msg.replace(/\\"/g, '"');
|
|
|
- Object.assign(taskForm, {
|
|
|
- msg: JSON.parse(magList) || [{ type: 1, content: '' }],
|
|
|
+ function processArray(array: any[]) {
|
|
|
+ array.forEach((item) => {
|
|
|
+ if (item.type === 2 && Array.isArray(item.content)) {
|
|
|
+ const contentString = item.content[0]; // 假设content只有一个元素
|
|
|
+ const filename = contentString.split('/').pop(); // 获取最后一个/后的值
|
|
|
+ item.content = contentString; // 将content数组转成字符串
|
|
|
+ item.meta = { filename }; // 添加meta对象
|
|
|
+ }
|
|
|
});
|
|
|
- } catch (error) {
|
|
|
- console.error("获取详情失败:", error);
|
|
|
- // 处理错误
|
|
|
- } finally {
|
|
|
- loading.value = false;
|
|
|
+ return array;
|
|
|
}
|
|
|
-}
|
|
|
-
|
|
|
-function processArray(array: any[]) {
|
|
|
- array.forEach((item) => {
|
|
|
- if (item.type === 2 && Array.isArray(item.content)) {
|
|
|
- const contentString = item.content[0]; // 假设content只有一个元素
|
|
|
- const filename = contentString.split('/').pop(); // 获取最后一个/后的值
|
|
|
- item.content = contentString; // 将content数组转成字符串
|
|
|
- item.meta = { filename }; // 添加meta对象
|
|
|
- }
|
|
|
- });
|
|
|
- return array;
|
|
|
-}
|
|
|
-async function submitForm() {
|
|
|
- if (!btnDisabled.value) {
|
|
|
- // 提交表单逻辑
|
|
|
- const { taskName, wxid, labels } = form;
|
|
|
- // let startTimeStr = dayjs(form.startTimeStr).format('YYYY-MM-DD HH:mm:ss');
|
|
|
- const { msg } = taskForm;
|
|
|
- processArray(msg);
|
|
|
- let requestData;
|
|
|
- if (form.conditionOperator == '2') {
|
|
|
- requestData = {
|
|
|
- taskName,
|
|
|
- fromwxid: wxid,
|
|
|
- startTimeStr:form.startTimeStr,
|
|
|
- msg: JSON.stringify(msg),
|
|
|
- labels,
|
|
|
- type: 1,
|
|
|
- };
|
|
|
+ async function submitForm() {
|
|
|
+ if (!btnDisabled.value) {
|
|
|
+ // 提交表单逻辑
|
|
|
+ const { taskName, wxid, checked, checked1 } = form;
|
|
|
+ let labels;
|
|
|
+ let labelsGroup;
|
|
|
+ // let startTimeStr = dayjs(form.startTimeStr).format('YYYY-MM-DD HH:mm:ss');
|
|
|
+ if(checked){
|
|
|
+ labels = [0];
|
|
|
+ }else{
|
|
|
+ labels = form.labels;
|
|
|
+ }
|
|
|
+ if(checked1){
|
|
|
+ labelsGroup = [0];
|
|
|
+ }else{
|
|
|
+ labelsGroup = form.labelsGroup;
|
|
|
+ }
|
|
|
+ const { msg } = taskForm;
|
|
|
+ processArray(msg);
|
|
|
+ let requestData;
|
|
|
+ if (form.conditionOperator == '2') {
|
|
|
+ requestData = {
|
|
|
+ taskName,
|
|
|
+ fromwxid: wxid,
|
|
|
+ startTimeStr: form.startTimeStr,
|
|
|
+ msg: JSON.stringify(msg),
|
|
|
+ labels:labels,
|
|
|
+ labelsGroup:labelsGroup,
|
|
|
+ type: 1,
|
|
|
+ };
|
|
|
+ } else {
|
|
|
+ requestData = {
|
|
|
+ taskName,
|
|
|
+ fromwxid: wxid,
|
|
|
+ msg: JSON.stringify(msg),
|
|
|
+ labels:labels,
|
|
|
+ labelsGroup:labelsGroup,
|
|
|
+ type: 1,
|
|
|
+ };
|
|
|
+ }
|
|
|
+ console.log(labelsGroup,labels, 'labels');
|
|
|
+ // const allData = msg.every((item) => item.content.trim() !== '');
|
|
|
+ // if (!allData) {
|
|
|
+ // return;
|
|
|
+ // }
|
|
|
+ // loading.value = true;
|
|
|
+ // let response = await createBatchMsg({ ...requestData });
|
|
|
+
|
|
|
+ // if (response && response.code === 0 && response.msg != 'target does not exist') {
|
|
|
+ // console.log('新增成功', response);
|
|
|
+ // loading.value = false;
|
|
|
+ // emit('update:getMsgList', { value: true });
|
|
|
+ // handleClose();
|
|
|
+ // } else {
|
|
|
+ // loading.value = false;
|
|
|
+ // message.error('请选择可用的标签');
|
|
|
+ // console.error('新增失败');
|
|
|
+ // }
|
|
|
} else {
|
|
|
- requestData = {
|
|
|
- taskName,
|
|
|
- fromwxid: wxid,
|
|
|
- msg: JSON.stringify(msg),
|
|
|
- labels,
|
|
|
- type: 1,
|
|
|
- };
|
|
|
- }
|
|
|
-
|
|
|
- const allData = msg.every((item) => item.content.trim() !== '');
|
|
|
- if (!allData) {
|
|
|
- return;
|
|
|
- }
|
|
|
- loading.value = true;
|
|
|
- let response = await createBatchMsg({ ...requestData });
|
|
|
- if (response && response.code === 0 && response.msg != 'target does not exist') {
|
|
|
- console.log('新增成功', response);
|
|
|
- loading.value = false;
|
|
|
- emit('update:getMsgList', { value: true, });
|
|
|
handleClose();
|
|
|
- } else {
|
|
|
- loading.value = false;
|
|
|
- message.error('请选择可用的标签');
|
|
|
- console.error('新增失败');
|
|
|
}
|
|
|
- } else {
|
|
|
- handleClose();
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-// 打开或关闭抽屉
|
|
|
-function handleClose() {
|
|
|
- if (visible.value) {
|
|
|
- resetForms();
|
|
|
+ // 打开或关闭抽屉
|
|
|
+ function handleClose() {
|
|
|
+ if (visible.value) {
|
|
|
+ resetForms();
|
|
|
+ }
|
|
|
+ emit('update:open', false);
|
|
|
}
|
|
|
- emit('update:open', false);
|
|
|
-}
|
|
|
|
|
|
-// 在打开抽屉时保存初始状态
|
|
|
-watch(visible, (newVal) => {
|
|
|
- if (newVal) {
|
|
|
- Object.assign(initialForm, { ...form });
|
|
|
- Object.assign(initialTaskForm, { ...taskForm });
|
|
|
- }
|
|
|
-});
|
|
|
+ // 在打开抽屉时保存初始状态
|
|
|
+ watch(visible, (newVal) => {
|
|
|
+ if (newVal) {
|
|
|
+ Object.assign(initialForm, { ...form });
|
|
|
+ Object.assign(initialTaskForm, { ...taskForm });
|
|
|
+ }
|
|
|
+ });
|
|
|
</script>
|
|
|
<style scoped lang="less">
|
|
|
-.user-phase-drawer {
|
|
|
- width: 900px;
|
|
|
- height: 100vh;
|
|
|
-}
|
|
|
+ .user-phase-drawer {
|
|
|
+ width: 900px;
|
|
|
+ height: 100vh;
|
|
|
+ }
|
|
|
|
|
|
-.step-content {
|
|
|
- margin-top: 20px;
|
|
|
-}
|
|
|
+ .step-content {
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
|
|
|
-.steps-action {
|
|
|
- margin-top: 20px;
|
|
|
- display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
- gap: 10px;
|
|
|
-}
|
|
|
+ .steps-action {
|
|
|
+ margin-top: 20px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ gap: 10px;
|
|
|
+ }
|
|
|
|
|
|
-.step-style {
|
|
|
- margin: 0 auto;
|
|
|
- width: 60%;
|
|
|
-}
|
|
|
+ .step-style {
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 60%;
|
|
|
+ }
|
|
|
|
|
|
-.custom-step .ant-steps-item-title {
|
|
|
- font-size: 14px;
|
|
|
-}
|
|
|
+ .custom-step .ant-steps-item-title {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
|
|
|
-.loading-style {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- z-index: 10;
|
|
|
- position: fixed !important;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- background: rgba(255, 255, 255, 0.7);
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
+ .loading-style {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ z-index: 10;
|
|
|
+ position: fixed !important;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ background: rgba(255, 255, 255, 0.7);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
|
|
|
-.ant-spin-nested-loading>div>.ant-spin {
|
|
|
- max-height: 100% !important;
|
|
|
- background: rgba(255, 255, 255, 0.7);
|
|
|
-}
|
|
|
+ .ant-spin-nested-loading > div > .ant-spin {
|
|
|
+ max-height: 100% !important;
|
|
|
+ background: rgba(255, 255, 255, 0.7);
|
|
|
+ }
|
|
|
|
|
|
-.warning-style {
|
|
|
- color: #ff4949;
|
|
|
- font-size: 12px;
|
|
|
- margin-left: -240px;
|
|
|
- position: absolute;
|
|
|
- bottom: -20px;
|
|
|
-}
|
|
|
+ .warning-style {
|
|
|
+ color: #ff4949;
|
|
|
+ font-size: 12px;
|
|
|
+ margin-left: -240px;
|
|
|
+ position: absolute;
|
|
|
+ bottom: -20px;
|
|
|
+ }
|
|
|
</style>
|
