定时发布和立即发布切换
This commit is contained in:
@ -96,19 +96,17 @@
|
||||
<div class="flex items-center justify-between w-384px">
|
||||
<div class="section-title">发布计划</div>
|
||||
<CommonSelect
|
||||
v-model="publishQuery"
|
||||
:options="accountList || []"
|
||||
:multiple="true"
|
||||
@change="(val) => handleChange('accounts', val)"
|
||||
class="w-180px background-#fff"
|
||||
placeholder="请选择账号名称"
|
||||
:allowSearch="true"
|
||||
:maxTagCount="999"
|
||||
v-model="publishType"
|
||||
:options="publishOptions"
|
||||
@change="handlePublishTypeChange"
|
||||
class="w-180px background-#fff publish-type-select"
|
||||
:allowSearch="false"
|
||||
:multiple="false"
|
||||
popup-container=".filter-popup-content"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="isTiming">
|
||||
<div v-if="publishType === 'timing'">
|
||||
<div class="line"></div>
|
||||
<div class="flex items-center justify-between mt-16px w-384px">
|
||||
<div class="section-title">日期</div>
|
||||
@ -123,7 +121,7 @@
|
||||
<div class="line"></div>
|
||||
<div class="flex items-center justify-between mt-16px w-384px">
|
||||
<div class="section-title">时间</div>
|
||||
<a-time-picker v-model:value="strValue" format="HH:mm" class="w-180px h-40px background-#fff" />
|
||||
<a-time-picker v-model="strValue" format="HH:mm" class="w-180px h-40px background-#fff" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -151,7 +149,7 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import { ref, reactive, onMounted, watch } from 'vue';
|
||||
import aiIcon from '@/assets/img/media-account/icon-AI.png';
|
||||
import { Checkbox, Button, Space, Pagination, notification, DatePicker, TimePicker } from 'ant-design-vue';
|
||||
import { TABS_LIST, ORIGIN_LIST, RawMaterialType } from '@/views/material-center/components/raw-material/constants';
|
||||
@ -212,6 +210,21 @@ const handleSearch = async () => {
|
||||
materialData.value = [...materialData.value, ...res.data.data];
|
||||
};
|
||||
const isActive = ref('ai');
|
||||
|
||||
// 发布类型选项
|
||||
const publishOptions = ref([
|
||||
{ value: 'immediate', label: '立即发布' },
|
||||
{ value: 'timing', label: '定时发布' },
|
||||
]);
|
||||
|
||||
// 发布类型,默认为立即发布
|
||||
const publishType = ref('immediate');
|
||||
|
||||
// 处理发布类型变化
|
||||
const handlePublishTypeChange = (value) => {
|
||||
publishType.value = value;
|
||||
};
|
||||
|
||||
const publishQuery = ref([
|
||||
{
|
||||
id: 1,
|
||||
@ -228,7 +241,15 @@ const showDrawer2 = ref(false);
|
||||
const emit = defineEmits(['filter-change']);
|
||||
const isTiming = ref(true);
|
||||
const currentDate = ref(new Date());
|
||||
const strValue = ref('12:08');
|
||||
// 将时间选择器默认值设置为当前时间
|
||||
const strValue = ref(dayjs().format('HH:mm'));
|
||||
|
||||
// 监听抽屉显示状态,每次打开时更新时间为当前时间
|
||||
watch(showDriwer, (newVal) => {
|
||||
if (newVal) {
|
||||
strValue.value = dayjs().format('HH:mm');
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
handleSearch();
|
||||
@ -412,6 +433,13 @@ defineExpose({
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.publish-type-select :deep(.ant-select-selection-item) {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.publish-select {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
|
||||
@ -592,7 +592,8 @@ onMounted(() => {
|
||||
color: #6d4cfe !important;
|
||||
}
|
||||
|
||||
:deep(.arco-table-cell) {
|
||||
/* 只对 td 单元格应用样式,避免影响表头 */
|
||||
:deep(td .arco-table-cell) {
|
||||
padding: 0px !important;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
Reference in New Issue
Block a user