Skip to content

M
mengchangaigc
Commit 83a3b8c0 authored by 黄同智's avatar 黄同智
Browse files
Options

发布任务的弹窗表单布局和交互

parent 955df66b
Hide whitespace changes
Inline Side-by-side
Showing with 184 additions and 5 deletions
apps/web-vue/src/views/resource/script/index.vue
View file @ 83a3b8c0
...@@ -34,10 +34,10 @@ ...@@ -34,10 +34,10 @@
<el-table-column prop="storyboard" label="分镜" width="180" /> <el-table-column prop="storyboard" label="分镜" width="180" />
<el-table-column prop="operate" label="操作" width="180" fixed="right"> <el-table-column prop="operate" label="操作" width="180" fixed="right">
<template #default="scope"> <template #default="scope">
<ElButton type="primary" link @click="visibleLook=true">查看任务(2)</ElButton> <ElButton type="primary" link @click="visibleLook = true">查看任务(2)</ElButton>
<ElButton type="primary" link>复制</ElButton> <ElButton type="primary" link>复制</ElButton>
<br /> <br />
<ElButton type="primary" link @click="visiblePublish=true">发布任务</ElButton> <ElButton type="primary" link @click="visiblePublish = true">发布任务</ElButton>
<ElButton type="primary" link>分享链接</ElButton> <ElButton type="primary" link>分享链接</ElButton>
</template> </template>
</el-table-column> </el-table-column>
...@@ -61,11 +61,109 @@ ...@@ -61,11 +61,109 @@
</SeTable> </SeTable>
</div> </div>
</Dialog> </Dialog>
<Dialog v-model="visiblePublish" 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">新增任务</span>
</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 { ref } from 'vue'; import { reactive, 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';
...@@ -102,6 +200,87 @@ const visibleLook = ref(false) ...@@ -102,6 +200,87 @@ const visibleLook = ref(false)
// 发布任务 // 发布任务
const visiblePublish = ref(false) const visiblePublish = ref(false)
const publishForm = reactive({
assignee: 'team1',
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> <style scoped lang="scss">
\ No newline at end of file .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/tsconfig.json
View file @ 83a3b8c0
...@@ -16,6 +16,7 @@ ...@@ -16,6 +16,7 @@
"paths": { "paths": {
"@/*": ["src/*"] "@/*": ["src/*"]
}, },
"noEmit": true,
"types": ["node", "vite/client"] "types": ["node", "vite/client"]
}, },
"include": ["src/**/*"], "include": ["src/**/*"],
......
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