caseEditor/src/app/mirror/App.vue

<template>
  <div class="mirror-setting">
    <!-- 图片预览 -->
    <el-dialog v-model="dialogVisible">
      <img
        style="width: 100%"
        w-full
        :src="dialogImageUrl"
        alt="Preview Image"
      />
    </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="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 } from "vue";
import type { UploadFile } from "element-plus";
import { uploadFile as uploadFileUrl } from "@/request";
import {
  getCaseScriptInfo,
  CaseScriptSaveOrUpdate,
} from "@/app/mirror/store/script";

const caseId = ref(null);
const project = reactive({
  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 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">
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);
}

.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, 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%;
      object-fit: cover;
    }
  }
}
.marksDiv{
  position: relative;
  .table-delete{
    position: absolute;
    right: -10px;
    top: -3px;
  }
}
</style>