查看任务的弹窗

apps/web-vue/src/views/resource/script/index.vue

@@ -34,16 +34,33 @@
                 <el-table-column prop="storyboard" label="分镜" width="180" />
                 <el-table-column prop="operate" label="操作" width="180" fixed="right">
                     <template #default="scope">
-                        <ElButton type="primary" link>查看任务(2)</ElButton>
+                        <ElButton type="primary" link @click="visibleLook=true">查看任务(2)</ElButton>
                         <ElButton type="primary" link>复制</ElButton>
                         <br />
-                        <ElButton type="primary" link>发布任务</ElButton>
+                        <ElButton type="primary" link @click="visiblePublish=true">发布任务</ElButton>
                         <ElButton type="primary" link>分享链接</ElButton>
                     </template>
                 </el-table-column>
             </el-table>
         </section>
         <UploadDialog v-model:visible="dialogVisible" />
+        <Dialog v-model="visibleLook" bg-color="#fff" width="800">
+            <div class="fw-500 px-16 py-10 color-000" style="border-bottom: 1px solid #eee;">查看任务</div>
+            <div class="p-20">
+                <SeTable size="small" :dataList="tableData">
+                    <el-table-column prop="content" label="任务名称" />
+                    <el-table-column prop="content" label="负责人" />
+                    <el-table-column prop="content" label="部门" />
+                    <el-table-column prop="content" label="截止时间" />
+                    <el-table-column prop="content" label="进度状态" />
+                    <el-table-column prop="operate" label="操作" width="80" fixed="right">
+                        <template #default="scope">
+                            <ElButton type="primary" link>查看</ElButton>
+                        </template>
+                    </el-table-column>
+                </SeTable>
+            </div>
+        </Dialog>
     </div>
 </template>
 
@@ -57,7 +74,7 @@ const tableData = [
         title: '脚本 1 - 口播温和洁面破圈案',
         type: 'AI分镜拆解',
         tags: ['美妆团队A'],
-        content: '1: 哪怕是你一周染一次，也不会损伤你的头发，什么干枯毛躁，开叉打结都不会，就这样按一洗，洗出丰富的泡沫，使劲揉，使劲搓啊，它也不沾头皮就这样按一洗，洗出丰富的泡沫，使劲揉，使劲搓啊，它也不沾头皮',
+        content: '哪怕是你一周染一',
         status: 0,
         storyboard: '6 场分镜',
     },
@@ -65,7 +82,7 @@ const tableData = [
         title: '脚本 2 - 秋冬穿搭羊绒大衣氛围感种草 ',
         type: 'AI分镜拆解',
         tags: ['美妆团队A'],
-        content: '1: 其实我挺感谢咱们家粉丝姐妹推荐我这条鸡蛋裤。其实我夏天吧，愿意穿大衫，拉上一穿上那个下边配芭比裤的时候出一下汗，一脱下来哈，槽的虎的。就这个小裤，你看它就是可薄可薄的了 (运镜特写——参考对标)，而且弹力特别特别好。你看我这个大腿指甲轻了，这么一撑都能看看',
+        content: '其实我挺感',
         status: 1,
         storyboard: '4 场分镜',
     },
@@ -75,10 +92,16 @@ const handleSelectionChange = (val: any) => {
     console.log(44444, val)
 }
 // 上传视频的弹窗内容
-const dialogVisible  =ref(false)
+const dialogVisible = ref(false)
 const openDialog = () => {
-  dialogVisible.value = true;
+    dialogVisible.value = true;
 };
+
+// 查看任务的弹唱
+const visibleLook = ref(false)
+
+// 发布任务
+const visiblePublish = ref(false)
 </script>
 
 <style scoped lang="scss"></style>
\ No newline at end of file