|
|
@@ -1,5 +1,218 @@
|
|
|
<template>
|
|
|
- <div>分镜配置</div>
|
|
|
+ <div class="mirror-setting">
|
|
|
+
|
|
|
+ <!-- 分镜配置 -->
|
|
|
+ <div class="project-title">
|
|
|
+ <el-input class="title" type="textarea" :autosize="{ minRows: 1, maxRows: 4 }" v-model="project.title" />
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <el-table class="main-table" key="id" border v-dragable="dragOptions" :data="data" header-row-class-name="t-head"
|
|
|
+ header-cell-class-name="t-cell">
|
|
|
+ <!-- <template v-for="item in columns" :key="item.prop">
|
|
|
+ <el-table-column :prop="item.prop" :label="item.label" />
|
|
|
+ 大纲
|
|
|
+ </template> -->
|
|
|
+ <el-table-column prop="name" label="大纲">
|
|
|
+ <template v-slot="{ row }">
|
|
|
+ <el-input type="textarea" :autosize="{ minRows: 3 }" v-model="row.name" :row="3" placeholder="概括拍摄内容" />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column prop="desc" label="分镜描述">
|
|
|
+ <template v-slot="{ row }">
|
|
|
+ <el-input class="gray" type="textarea" :autosize="{ minRows: 3 }" v-model="row.desc" :row="3"
|
|
|
+ placeholder="详细描述分镜" />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <!-- show-overflow-tooltip -->
|
|
|
+ <el-table-column prop="clip" label="已拍摄片段">
|
|
|
+ <template v-slot="{ row }">
|
|
|
+ <el-input class="gray" type="textarea" :autosize="{ minRows: 3 }" v-model="row.clip" placeholder="详细描述分镜" />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column prop="words" label="台词文案">
|
|
|
+ <template v-slot="{ row }">
|
|
|
+ <el-input class="gray" type="textarea" :autosize="{ minRows: 3 }" v-model="row.words"
|
|
|
+ placeholder="点击输入台词" />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column prop="marks" label="备注">
|
|
|
+ <template v-slot="{ row }">
|
|
|
+ <el-input class="gray" type="textarea" :autosize="{ minRows: 3 }" v-model="row.marks"
|
|
|
+ placeholder="点击输入内容" />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="add-handle">
|
|
|
+
|
|
|
+ <el-button type="primary">
|
|
|
+ <el-icon class="el-icon--right">
|
|
|
+ <Plus />
|
|
|
+ </el-icon>
|
|
|
+ 添加
|
|
|
+ <el-input class="add-line" type="text" v-model="addLine" size="small">
|
|
|
+ </el-input>
|
|
|
+ 行
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
-<script setup lang="ts"></script>
|
|
|
+<script lang="ts" setup>
|
|
|
+import { vDragable } from "./dragable";
|
|
|
+import { ElMessage } from "element-plus";
|
|
|
+import { reactive, ref } from "vue";
|
|
|
+
|
|
|
+const project = reactive({
|
|
|
+ title: "我的脚本"
|
|
|
+})
|
|
|
+const addLine = ref(3);
|
|
|
+
|
|
|
+const dragOptions = [
|
|
|
+ {
|
|
|
+ selector: "thead tr", // add drag support for column
|
|
|
+ option: {
|
|
|
+ // sortablejs's option
|
|
|
+ animation: 150,
|
|
|
+ onEnd: (evt) => {
|
|
|
+ let oldCol: any = {};
|
|
|
+ Object.assign(oldCol, columns.value[evt.oldIndex]);
|
|
|
+ columns.value.splice(evt.oldIndex, 1); // 因为新增了数据，所以要移除原来的列的index要在原来的基础上
|
|
|
+ setTimeout(() => {
|
|
|
+ columns.value.splice(evt.newIndex, 0, oldCol); // 把原来的列数据添加到新的位置，然后再从原位置移除它，触发table的重绘
|
|
|
+ }, 30);
|
|
|
+ console.log(evt.oldIndex, evt.newIndex);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ selector: "tbody", // add drag support for row
|
|
|
+ option: {
|
|
|
+ // sortablejs's option
|
|
|
+ animation: 150,
|
|
|
+ onEnd: (evt: any) => {
|
|
|
+ // ElMessage.success(
|
|
|
+ // `Drag the ${evt.oldIndex}th row to ${evt.newIndex}`
|
|
|
+ // );
|
|
|
+ console.log(evt.oldIndex, evt.newIndex);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+];
|
|
|
+
|
|
|
+const columns = ref([
|
|
|
+ // { prop: "id", label: "ID", hidden: true, },
|
|
|
+ { prop: "name", label: "大纲" },
|
|
|
+ { prop: "desc", label: "分镜描述" },
|
|
|
+ { prop: "clip", label: "已拍摄片段" },
|
|
|
+ { prop: "words", label: "台词文案" },
|
|
|
+ { prop: "marks", label: "备注" },
|
|
|
+]);
|
|
|
+
|
|
|
+const data = reactive([
|
|
|
+ { id: 1, name: "", desc: "" },
|
|
|
+ { id: 2, name: "", desc: "" },
|
|
|
+ { id: 3, name: "", desc: "" },
|
|
|
+
|
|
|
+]);
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+body,
|
|
|
+#app {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.mirror-setting {
|
|
|
+ width: 100%;
|
|
|
+ min-height: 100%;
|
|
|
+ padding-top: 80px;
|
|
|
+ min-height: calc(100vh - 80px);
|
|
|
+ margin: 0 auto;
|
|
|
+ background: #eee;
|
|
|
+}
|
|
|
+
|
|
|
+.content {
|
|
|
+ margin: 0 auto;
|
|
|
+ display: flex;
|
|
|
+ padding: 0 40px;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.t-head {
|
|
|
+ border: 1px solid #ddd;
|
|
|
+ /* padding: 10px; */
|
|
|
+ /* display: flex; */
|
|
|
+ position: relative;
|
|
|
+ background-color: #eee;
|
|
|
+}
|
|
|
+
|
|
|
+tbody {
|
|
|
+ /* border-top: 20px solid transparent; */
|
|
|
+}
|
|
|
+
|
|
|
+.t-head th {
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.project-title {
|
|
|
+ display: flex;
|
|
|
+ padding: 0 40px;
|
|
|
+ /* justify-content: center; */
|
|
|
+}
|
|
|
+
|
|
|
+.project-title .title {
|
|
|
+ font-size: 28px;
|
|
|
+ min-height: 0;
|
|
|
+ height: auto;
|
|
|
+ background-color: transparent !important;
|
|
|
+ /* width: 300px; */
|
|
|
+ margin: 30px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.el-textarea__inner {
|
|
|
+ background-color: transparent;
|
|
|
+ box-shadow: none;
|
|
|
+ resize: none;
|
|
|
+}
|
|
|
+
|
|
|
+.gray .el-textarea__inner {
|
|
|
+ background: rgba(227, 225, 225, 0.2);
|
|
|
+}
|
|
|
+
|
|
|
+.el-textarea__inner:focus {
|
|
|
+ box-shadow: none
|
|
|
+}
|
|
|
+
|
|
|
+.el-textarea__inner:hover {
|
|
|
+ box-shadow: none
|
|
|
+}
|
|
|
+
|
|
|
+.add-handle {
|
|
|
+ padding: 30px 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.add-line {
|
|
|
+ margin: 0 10px;
|
|
|
+ width: 30px;
|
|
|
+}
|
|
|
+
|
|
|
+.add-line .el-input__wrapper {
|
|
|
+ box-shadow: none;
|
|
|
+ background: rgba(23, 41, 46, .2);
|
|
|
+}
|
|
|
+
|
|
|
+.add-line input {
|
|
|
+ color: white;
|
|
|
+ text-align: center
|
|
|
+}
|
|
|
+</style>
|
gemercheung