Skip to content

M
mengchangaigc
Commit 3f60d8d5 authored by 黄同智's avatar 黄同智
Browse files
Options

抽离发布任务的弹窗表单组件，同时用在脚本管理和任务协作的发布任务功能

parent 5e36d32c
Show whitespace changes
Inline Side-by-side
Showing with 267 additions and 184 deletions
apps/web-vue/src/components/TaskPublishDialog/index.vue 0 → 100644
View file @ 3f60d8d5
<template>
<Dialog v-model="visible" bg-color="#fff" width="670">
<div class="publish-dialog round-10 hidden">
<div class="h-58 px-24 flex-items-center publish-dialog__header">
<span class="w-4 h-16 round-10 bg-main mr-10"></span>
<span class="fs-16 font-bold color-000">{{ title }}</span>
</div>
<div class="px-24 pt-24 pb-16">
<el-form :model="form" label-width="92px" label-position="left">
<el-form-item label="指派给" required>
<el-select v-model="form.assignee" class="w-full" placeholder="请选择指派对象" clearable>
<el-option v-for="item in assigneeOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="下单数量" required>
<el-input v-model="form.orderCount" placeholder="请输入下单数量" />
</el-form-item>
<el-form-item label="出片日期" required>
<el-date-picker
v-model="form.deliveryDate"
class="w-full"
type="date"
placeholder="请选择出片日期"
format="YYYY/MM/DD"
value-format="YYYY/MM/DD"
/>
</el-form-item>
<el-form-item label="出片可见性">
<el-radio-group v-model="form.visibility" fill="#5a34bd">
<el-radio-button label="不设置" :value="0" />
<el-radio-button label="指定可见性" :value="1" />
</el-radio-group>
<el-button class="ml-20" link type="primary">指定我的小组</el-button>
</el-form-item>
<el-form-item v-if="form.visibility === 1">
<el-radio-group v-model="form.visibility2">
<el-radio label="公开" :value="0" />
<el-radio :value="1">公用资源①</el-radio>
<el-radio label="指定范围" :value="2" />
</el-radio-group>
</el-form-item>
<el-form-item v-if="form.visibility2 === 2">
<div class="round-6 w-full p-10 bg-f5">
<el-form-item label="指定部门" required>
<el-select v-model="form.department" class="w-full" placeholder="请选择指定部门" clearable>
<el-option v-for="item in departmentOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="指定小组" required>
<el-select v-model="form.group" class="w-full" placeholder="请选择指定小组" clearable>
<el-option v-for="item in groupOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="指定人员" required>
<el-select v-model="form.member" class="w-full" placeholder="请选择指定人员" clearable>
<el-option v-for="item in memberOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
</div>
</el-form-item>
<el-form-item label="公开日期">
<el-date-picker
v-model="form.publicDate"
class="w-full"
type="date"
placeholder="请选择公开日期"
format="YYYY/MM/DD"
value-format="YYYY/MM/DD"
/>
</el-form-item>
<el-form-item label="备注">
<el-input v-model="form.remark" type="textarea" placeholder="备注需求说明" />
</el-form-item>
<el-form-item label="产品" required>
<el-select v-model="form.product" class="w-full" placeholder="请选择产品">
<el-option v-for="item in productOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="脚本类型">
<el-select v-model="form.scriptType" class="w-full" placeholder="请选择脚本类型">
<el-option v-for="item in scriptTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="关联脚本">
<div class="h-34 px-12 round-6 flex-between w-full related-script">
<span class="font-bold color-main ellipsis">{{ form.relatedScript }}</span>
<el-tag type="primary" effect="dark" class="ml-12 border-none round-4 bg-main related-script__tag">
{{ autoRelated ? '已自动关联' : '待选择' }}
</el-tag>
</div>
</el-form-item>
</el-form>
</div>
<div class="px-24 pt-16 pb-20 flex justify-end gap-12 publish-dialog__footer">
<el-button class="minw-64" @click="visible = false">取消</el-button>
<el-button class="minw-64" type="primary" @click="handleConfirm">确定</el-button>
</div>
</div>
</Dialog>
</template>
<script setup lang="ts">
import { reactive, watch } from 'vue';
type TaskPublishForm = {
assignee: string;
orderCount: string;
deliveryDate: string;
visibility: number;
visibility2: number;
department: string;
group: string;
member: string;
publicDate: string;
remark: string;
product: string;
scriptType: string;
relatedScript: string;
};
const props = withDefaults(
defineProps<{
title?: string;
relatedScript?: string;
autoRelated?: boolean;
}>(),
{
title: '新增任务',
relatedScript: '请选择关联脚本',
autoRelated: false,
}
);
const visible = defineModel<boolean>('visible', { required: true });
const emit = defineEmits<{
(event: 'confirm', form: TaskPublishForm): void;
}>();
const form = reactive<TaskPublishForm>({
assignee: 'team1',
orderCount: '1',
deliveryDate: '2026/08/15',
visibility: 0,
visibility2: 0,
department: '',
group: '',
member: '',
publicDate: '2026/08/07',
remark: '',
product: 'product1',
scriptType: 'script1',
relatedScript: props.relatedScript,
});
watch(
() => props.relatedScript,
(val) => {
form.relatedScript = val || '请选择关联脚本';
},
{ immediate: true }
);
const assigneeOptions = [
{ label: '剪辑一组 / 视频后发 / 张三', value: 'team1' },
{ label: '剪辑二组 / 视频后发 / 李四', value: 'team2' },
];
const departmentOptions = [
{ label: '信息流投放部', value: 'department1' },
{ label: '内容制作部', value: 'department2' },
];
const groupOptions = [
{ label: '视频号投流组', value: 'group1' },
{ label: '剪辑一组', value: 'group2' },
];
const memberOptions = [
{ label: '张三', value: 'member1' },
{ label: '李四', value: 'member2' },
];
const productOptions = [
{ label: '得力双头马克笔', value: 'product1' },
{ label: '电商产品图模板', value: 'product2' },
];
const scriptTypeOptions = [
{ label: '爆款拆解', value: 'script1' },
{ label: 'AI分镜拆解', value: 'script2' },
];
const handleConfirm = () => {
emit('confirm', { ...form });
visible.value = false;
};
</script>
<style scoped lang="scss">
.publish-dialog__header {
border-bottom: 1px solid #edf0f5;
}
.publish-dialog__footer {
border-top: 1px solid #edf0f5;
}
.publish-dialog {
:deep(.el-form-item) {
margin-bottom: 16px;
align-items: center;
}
:deep(.el-form-item__label) {
justify-content: flex-end;
}
:deep(.el-form-item.is-required:not(.is-no-asterisk).asterisk-left > .el-form-item__label::before) {
color: #f56c6c;
}
:deep(.el-input__wrapper),
:deep(.el-select__wrapper) {
min-height: 34px;
border-radius: 6px;
box-shadow: 0 0 0 1px #dce4f0 inset;
}
:deep(.el-input__wrapper.is-focus),
:deep(.el-select__wrapper.is-focused) {
box-shadow: 0 0 0 1px rgba(var(--main-color), 0.45) inset;
}
:deep(.el-date-editor.el-input) {
width: 100%;
}
}
.related-script {
border: 1px solid rgba(var(--main-color), 0.35);
background-color: rgba(var(--main-color), 0.06);
}
.related-script__tag {
flex-shrink: 0;
}
</style>
apps/web-vue/src/views/resource/script/index.vue
View file @ 3f60d8d5
...@@ -61,111 +61,20 @@ ...@@ -61,111 +61,20 @@
</SeTable> </SeTable>
</div> </div>
</Dialog> </Dialog>
<Dialog v-model="visiblePublish" bg-color="#fff" width="670"> <TaskPublishDialog
<div class="publish-dialog round-10 hidden"> v-model:visible="visiblePublish"
<div class="h-58 px-24 flex-items-center publish-dialog__header"> related-script="脚本 1 - 口播温和洁面破圈案"
<span class="w-4 h-16 round-10 bg-main mr-10"></span> auto-related
<span class="fs-16 font-bold color-000">新增任务</span> @confirm="handlePublishConfirm"
</div> />
<div class="px-24 pt-24 pb-16">
<el-form :model="publishForm" label-width="92px" label-position="left">
<el-form-item label="指派给" required>
<el-select v-model="publishForm.assignee" class="w-full" placeholder="请选择指派对象" clearable>
<el-option v-for="item in assigneeOptions" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="下单数量" required>
<el-input v-model="publishForm.orderCount" placeholder="请输入下单数量" />
</el-form-item>
<el-form-item label="出片日期" required>
<el-date-picker v-model="publishForm.deliveryDate" class="w-full" type="date"
placeholder="请选择出片日期" format="YYYY/MM/DD" value-format="YYYY/MM/DD" />
</el-form-item>
<el-form-item label="出片可见性">
<el-radio-group v-model="publishForm.visibility" fill="#5a34bd">
<el-radio-button label="不设置" :value="0" />
<el-radio-button label="指定可见性" :value="1" />
</el-radio-group>
<el-button class="ml-20" link type="primary">指定我的小组</el-button>
</el-form-item>
<el-form-item v-if="publishForm.visibility === 1">
<el-radio-group v-model="publishForm.visibility2">
<el-radio label="公开" :value="0" />
<el-radio :value="1">公用资源①</el-radio>
<el-radio label="指定范围" :value="2" />
</el-radio-group>
</el-form-item>
<el-form-item v-if="publishForm.visibility2 === 2">
<div class="round-6 w-full p-10" style="background-color: #eef1f3;">
<el-form-item label="指定部门" required>
<el-select v-model="publishForm.assignee" class="w-full" placeholder="请选择指派对象"
clearable>
<el-option v-for="item in assigneeOptions" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="指定小组" required>
<el-select v-model="publishForm.assignee" class="w-full" placeholder="请选择指派对象"
clearable>
<el-option v-for="item in assigneeOptions" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="指定人员" required>
<el-select v-model="publishForm.assignee" class="w-full" placeholder="请选择指派对象"
clearable>
<el-option v-for="item in assigneeOptions" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
</el-form-item>
</div>
</el-form-item>
<el-form-item label="公开日期">
<el-date-picker v-model="publishForm.publicDate" class="w-full" type="date"
placeholder="请选择公开日期" format="YYYY/MM/DD" value-format="YYYY/MM/DD" />
</el-form-item>
<el-form-item label="备注">
<el-input type="textarea" v-model="publishForm.remark" placeholder="备注需求说明" />
</el-form-item>
<el-form-item label="产品" required>
<el-select v-model="publishForm.product" class="w-full" placeholder="请选择产品">
<el-option v-for="item in productOptions" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="脚本类型">
<el-select v-model="publishForm.scriptType" class="w-full" placeholder="请选择脚本类型">
<el-option v-for="item in scriptTypeOptions" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="关联脚本">
<div class="h-34 px-12 round-6 flex-between w-full related-script">
<span class="font-bold color-main ellipsis">{{ publishForm.relatedScript }}</span>
<el-tag type="primary" effect="dark"
class="ml-12 border-none round-4 bg-main related-script__tag">
已自动关联
</el-tag>
</div>
</el-form-item>
</el-form>
</div>
<div class="px-24 pt-16 pb-20 flex justify-end gap-12 publish-dialog__footer">
<el-button class="minw-64" @click="visiblePublish = false">取消</el-button>
<el-button class="minw-64" type="primary" @click="handlePublishConfirm">确定</el-button>
</div>
</div>
</Dialog>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { reactive, ref } from 'vue'; import { ref } from 'vue';
import Classify from '../components/Classify.vue'; import Classify from '../components/Classify.vue';
import UploadDialog from './UploadDialog.vue'; import UploadDialog from './UploadDialog.vue';
import TaskPublishDialog from '@/components/TaskPublishDialog/index.vue';
const tableData = [ const tableData = [
{ {
...@@ -200,87 +109,9 @@ const visibleLook = ref(false) ...@@ -200,87 +109,9 @@ const visibleLook = ref(false)
// 发布任务 // 发布任务
const visiblePublish = ref(false) const visiblePublish = ref(false)
const publishForm = reactive({ const handlePublishConfirm = (form: any) => {
assignee: 'team1', console.log('publish task', form)
orderCount: '1',
deliveryDate: '2026/08/15',
visibility: 0,
visibility2: 0,
publicDate: '2026/08/07',
remark: '',
product: 'product1',
scriptType: 'script1',
relatedScript: '脚本 1 - 口播温和洁面破圈案',
})
const assigneeOptions = [
{ label: '剪辑一组 / 视频后发 / 张三', value: 'team1' },
{ label: '剪辑二组 / 视频后发 / 李四', value: 'team2' },
]
const productOptions = [
{ label: '得力双头马克笔', value: 'product1' },
{ label: '电商产品图模板', value: 'product2' },
]
const scriptTypeOptions = [
{ label: '爆款拆解', value: 'script1' },
{ label: 'AI分镜拆解', value: 'script2' },
]
const handlePublishConfirm = () => {
visiblePublish.value = false
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss"></style>
.publish-dialog__header {
border-bottom: 1px solid #edf0f5;
}
.publish-dialog__footer {
border-top: 1px solid #edf0f5;
}
.publish-dialog {
:deep(.el-form-item) {
margin-bottom: 16px;
align-items: center;
}
:deep(.el-form-item__label) {
justify-content: flex-end;
}
:deep(.el-form-item.is-required:not(.is-no-asterisk).asterisk-left > .el-form-item__label::before) {
color: #f56c6c;
}
:deep(.el-input__wrapper),
:deep(.el-select__wrapper) {
min-height: 34px;
border-radius: 6px;
box-shadow: 0 0 0 1px #dce4f0 inset;
}
:deep(.el-input__wrapper.is-focus),
:deep(.el-select__wrapper.is-focused) {
box-shadow: 0 0 0 1px rgba(var(--main-color), 0.45) inset;
}
:deep(.el-date-editor.el-input) {
width: 100%;
}
}
.visibility-tabs__item {
&.active {
border-radius: 6px 0 0 6px;
}
}
.related-script {
border: 1px solid rgba(var(--main-color), 0.35);
background-color: rgba(var(--main-color), 0.06);
}
.related-script__tag {
flex-shrink: 0;
}
</style>
apps/web-vue/src/views/task/index.vue
View file @ 3f60d8d5
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
</div> </div>
</section> </section>
<section class="bg-fff round-10 p-14 mt-16 filter-card"> <section class="bg-fff round-6 p-14 mt-16 filter-card">
<div class="flex flex-wrap gap-10"> <div class="flex flex-wrap gap-10">
<div class="flex filter-combo"> <div class="flex filter-combo">
<el-select v-model="filters.publisherType" class="w-90"> <el-select v-model="filters.publisherType" class="w-90">
...@@ -194,12 +194,14 @@ ...@@ -194,12 +194,14 @@
background layout="sizes, prev, pager, next, jumper" :total="filteredList.length" /> background layout="sizes, prev, pager, next, jumper" :total="filteredList.length" />
</div> </div>
</section> </section>
<TaskPublishDialog v-model:visible="visiblePublish" @confirm="handlePublishConfirm" />
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { computed, reactive, ref } from 'vue'; import { computed, reactive, ref } from 'vue';
import { ElMessage } from 'element-plus'; import { ElMessage } from 'element-plus';
import TaskPublishDialog from '@/components/TaskPublishDialog/index.vue';
type TaskItem = { type TaskItem = {
id: number; id: number;
...@@ -223,6 +225,7 @@ type TaskItem = { ...@@ -223,6 +225,7 @@ type TaskItem = {
const activeTab = ref('all'); const activeTab = ref('all');
const activeStatus = ref('all'); const activeStatus = ref('all');
const visiblePublish = ref(false);
const sortType = ref('publishTime'); const sortType = ref('publishTime');
const currentPage = ref(1); const currentPage = ref(1);
const pageSize = ref(50); const pageSize = ref(50);
...@@ -505,7 +508,12 @@ const showAction = (row: TaskItem, action: string) => { ...@@ -505,7 +508,12 @@ const showAction = (row: TaskItem, action: string) => {
ElMessage.success(`${action}: ${row.taskId}`); ElMessage.success(`${action}: ${row.taskId}`);
}; };
const publishTask = () => ElMessage.success('发布任务'); const publishTask = () => {
visiblePublish.value = true;
};
const handlePublishConfirm = (form: any) => {
ElMessage.success(`已发布任务：${form.relatedScript}`);
};
const exportTask = () => ElMessage.success('批量导出'); const exportTask = () => ElMessage.success('批量导出');
</script> </script>
...@@ -526,11 +534,11 @@ const exportTask = () => ElMessage.success('批量导出'); ...@@ -526,11 +534,11 @@ const exportTask = () => ElMessage.success('批量导出');
.filter-combo { .filter-combo {
:deep(.el-select:first-child .el-select__wrapper) { :deep(.el-select:first-child .el-select__wrapper) {
border-radius: 6px 0 0 6px; border-radius: 4px 0 0 4px;
} }
:deep(.el-select:last-child .el-select__wrapper) { :deep(.el-select:last-child .el-select__wrapper) {
border-radius: 0 6px 6px 0; border-radius: 0 4px 4px 0;
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment