caseEditor/src/app/mirror/App.vue

<template>
  <div class="mirror-setting">
    <!-- 图片预览 -->
    <el-dialog v-model="dialogVisible">
      <img
        v-if="checkSourceIsImage(dialogImageUrl)"
        style="width: 100%; height: 500px; object-fit: scale-down"
        w-full
        :src="dialogImageUrl"
        alt="Preview Image"
      />

      <video
        v-if="checkSourceIsVideo(dialogImageUrl)"
        style="width: 100%"
        w-full
        controls
        :src="dialogImageUrl"
      />

      <audio
        v-if="checkSourceIsAudio(dialogImageUrl)"
        style="width: 100%"
        w-full
        controls
        :src="dialogImageUrl"
      />
    </el-dialog>
    <!-- 分镜配置 -->
    <div class="project-title">
      <el-input
        class="title"
        type="textarea"
        :autosize="{ minRows: 1, maxRows: 4 }"
        v-model="project.title"
      />
      <el-button type="primary" @click="saveProject">保存</el-button>
    </div>
    <div class="content">
      <el-table
        :key="data.list.length"
        class="main-table"
        key="id"
        border
        v-dragable="dragOptions"
        :data="data.list"
        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> 
        :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
        -->
        <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-upload
              ref="upload"
              v-model:file-list="row.fileList"
              class="list-upload-style"
              :class="{
                activefileList: row.fileList && row.fileList.length == 1,
              }"
              list-type="picture-card"
              :action="uploadFileUrl"
              :on-success="handleUploadSuccess"
              :limit="1"
            >
              <div
                class="uploadImg"
                v-if="row.fileList && row.fileList.length == 0"
              >
                <el-icon><Plus /></el-icon>
              </div>
              <template #file="{ file }">
                <div style="width: 100%">
                  <img
                    class="el-upload-list__item-thumbnail"
                    :src="getCoverUrl(file.url)"
                    alt=""
                  />
                  <span class="el-upload-list__item-actions">
                    <span
                      class="el-upload-list__item-preview"
                      @click="handlePictureCardPreview(file)"
                    >
                      <el-icon><zoom-in /></el-icon>
                    </span>
                    <span
                      class="el-upload-list__item-delete"
                      @click="handleRemove(row)"
                    >
                      <el-icon><Delete /></el-icon>
                    </span>
                  </span>
                </div>
              </template>
            </el-upload>
          </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, $index }">
            <div class="marksDiv">
              <el-input
                class="gray"
                type="textarea"
                :autosize="{ minRows: 3 }"
                v-model="row.marks"
                placeholder="点击输入内容"
              />
              <span
                class="table-delete"
                @click="handleTableRemove($index, row)"
              >
                <el-icon><Delete /></el-icon>
              </span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="add-handle">
      <el-button type="primary" @click="handleAdd">
        <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 lang="ts" setup>
import { vDragable } from "./dragable";
import { ElMessage } from "element-plus";
import { reactive, ref, onMounted, computed } from "vue";
import type { UploadFile } from "element-plus";
import { uploadFile as uploadFileUrl } from "@/request";
import {
  getCaseScriptInfo,
  CaseScriptSaveOrUpdate,
} from "@/app/mirror/store/script";
import linkIco from "@/assets/image/fire.ico";
import musicHeadphones from "@/assets/image/music.png";

const link = document.querySelector<HTMLLinkElement>("#app-icon")!;
link.setAttribute("href", linkIco);

const caseId = ref(null);
const project = reactive({
  title: "我的脚本",
});

document.title = project.title;
const dialogImageUrl = ref("");
const dialogVisible = ref(false);
const disabled = ref(false);

const addLine = ref(1);
const active = ref(1);
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) => {
        // let oldItem = sortList.value[evt.oldIndex];
        // let sortLists = sortList.value.filter(
        //   (_, index) => index !== evt.oldIndex
        // );
        // sortLists.splice(evt.newIndex, 0, oldItem);
        // sortList.value = sortLists;
        let list = JSON.parse(JSON.stringify(data.newSortList));
        const target = list.splice(evt.oldIndex, 1);
        list.splice(evt.newIndex, 0, target[0]);
        data.newSortList = list;
        console.log(evt.oldIndex, evt.newIndex, data.newSortList, data.list);
      },
    },
  },
];

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 checkSourceIsVideo = computed(() => (url: string) => {
  return url.includes(".mp4");
});
const checkSourceIsAudio = computed(() => (url: string) => {
  return url.includes(".mp3");
});
const checkSourceIsImage = computed(() => (url: string) => {
  return url.includes(".jpg") || url.includes(".png") || url.includes(".gif");
});

const getCoverUrl = computed(() => (url: string) => {
  switch (true) {
    case url.includes(".mp4"):
      return (
        url + "?x-oss-process=video/snapshot,t_0,f_jpg,w_0,h_0,m_fast,ar_auto"
      );
    case url.includes(".mp3") || url.includes(".wmv"):
      return musicHeadphones;
    default:
      return url;
  }
});

const data = reactive({
  list: [{ id: 1, name: "", desc: "", fileList: [] }],
  newSortList: [],
});
const sortList = ref([0]);
onMounted(() => {
  caseId.value = GetRequest("caseId");
  getCaseScriptList();
  console.log("caseId", caseId); //query传参
});

function getCaseScriptList() {
  getCaseScriptInfo(caseId.value)
    .then((res) => {
      project.title = res.name;
      data.list = res.content;
      data.newSortList = res.content;
      const idList = data.list.map((ele) => ele.id);
      active.value = Math.max.apply(null, idList) || 1;
      sortList.value = data.list.map((_, index) => index);
    })
    .catch((err) => {
      console.log(err);
    });
}
function handleAdd() {
  // let content = sortList.value.map((index) => data.list[index]);
  // data.list.length = 0;
  // Object.assign(data.list, content);
  console.log("add", data.newSortList);
  for (var i = 1; i <= addLine.value; i++) {
    console.log(i);
    data.newSortList.push({
      id: active.value + 1,
      name: "",
      desc: "",
      fileList: [],
    });
  }
  active.value++;
  data.list = data.newSortList;
  sortList.value = data.list.map((_, index) => index);
}
const handleRemove = (data) => {
  data.fileList = [];
};
const handleTableRemove = (index, datas) => {
  data.newSortList = data.newSortList.filter((ele) => ele.id !== datas.id);
  console.log("saveProject", data.newSortList);
  data.list = data.newSortList;
  // let content = sortList.value.map((index) => data.list[index]);
  // data.list.length = 0;
  // content.splice(index, 1);
  // Object.assign(data.list, content);
  // sortList.value = content.map((_, index) => index);
  console.log("saveProject", index, datas, data.list);
};
const handlePictureCardPreview = (file: UploadFile) => {
  dialogImageUrl.value = file.url!;
  dialogVisible.value = true;
};

const saveProject = () => {
  // let content = sortList.value.map((index) => data.list[index]);
  console.log("saveProject", data.list, data.newSortList);
  CaseScriptSaveOrUpdate({
    caseId: caseId.value,
    name: project.title,
    content: data.newSortList,
  }).then((res) => {
    console.log("saveProject");
  });
};
function handleUploadSuccess(response: any, uploadFile: UploadFile) {
  uploadFile.url = response.data;
  console.log(response, uploadFile);
}

function GetRequest(value) {
  var url = decodeURI(window.location.search); //?id="123456"&name="www";
  var object = {};
  if (url.indexOf("?") != -1) {
    //url中存在问号，也就说有参数。
    var str = url.substr(1); //得到?后面的字符串
    var strs = str.split("&"); //将得到的参数分隔成数组[id="123456",name="www"];
    for (var i = 0; i < strs.length; i++) {
      object[strs[i].split("=")[0]] = strs[i].split("=")[1]; //得到{id:'123456',name:'www'}
    }
  }
  return object[value];
}
</script>
<style lang="scss" scoped></style>

<style lang="scss">
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;
    align-items: center;
    /* 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);
  }

  .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, 0.2);
  }

  .add-line input {
    color: white;
    text-align: center;
  }
  .activefileList {
    .el-upload-list--picture-card {
    }
    .el-upload--picture-card {
      display: none;
    }
  }
  .list-upload-style {
    width: 100%;
    text-align: center;
    .el-upload-list,
    .el-upload--text {
      width: 100%;
    }
    .el-upload-list__item-thumbnail,
    .el-upload--picture-card {
      min-height: 73px;
      height: 73px;
      width: 100%;
    }
    .uploadImg,
    .el-upload-list__item {
      width: 100%;
      min-height: 73px;
      height: 73px;
      line-height: 73px;
      .el-upload-list__item-thumbnail {
        width: 100%;
        max-width: 100px;
        object-fit: cover;
      }
    }
  }
  .marksDiv {
    position: relative;
    .table-delete {
      position: absolute;
      right: -10px;
      top: -3px;
    }
  }
}
</style>