feat: 脚本修改

src/app/mirror/App.vue

@@ -1,55 +1,129 @@
 <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-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 class="main-table" key="id" border v-dragable="dragOptions" :data="data" header-row-class-name="t-head"
-        header-cell-class-name="t-cell">
+      <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> -->
+        </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="概括拍摄内容" />
+            <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="详细描述分镜" />
+            <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="详细描述分镜" />
+            <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="点击输入台词" />
+            <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="点击输入内容" />
+            <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-button type="primary" @click="handleAdd">
         <el-icon class="el-icon--right">
           <Plus />
         </el-icon>
@@ -65,13 +139,21 @@
 <script lang="ts" setup>
 import { vDragable } from "./dragable";
 import { ElMessage } from "element-plus";
-import { reactive, ref } from "vue";
+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 addLine = ref(3);
+  title: "我的脚本",
+});
+const dialogImageUrl = ref("");
+const dialogVisible = ref(false);
+const disabled = ref(false);
 
+const addLine = ref(1);
+const active = ref(0);
 const dragOptions = [
   {
     selector: "thead tr", // add drag support for column
@@ -114,15 +196,62 @@ const columns = ref([
 ]);
 
 const data = reactive([
-  { id: 1, name: "", desc: "" },
-  { id: 2, name: "", desc: "" },
-  { id: 3, name: "", desc: "" },
-
+  { id: 1, name: "", desc: "", fileList:[] },
+  { id: 2, name: "", desc: "", fileList:[] },
+  { id: 3, name: "", desc: "", fileList:[] },
 ]);
+onMounted(()=> {
+  caseId.value = GetRequest('caseId');
+  getCaseScriptInfo(caseId.value).then((res) => {
+    console.log('getCaseScriptInfo', res)  //query传参
+  })
+  console.log('caseId', caseId)  //query传参
+})
+function handleAdd() {
+  for(var i = 1; i <= addLine.value; i++) {
+    console.log(i);
+    data.push({ id: data.length + 1, name: "", desc: "", fileList:[] });
+  }
+}
+const handleRemove = (data) => {
+  data.fileList = []
+};
+
+const handlePictureCardPreview = (file: UploadFile) => {
+  dialogImageUrl.value = file.url!;
+  dialogVisible.value = true;
+};
+
+const saveProject = () => {
+  CaseScriptSaveOrUpdate({
+    caseId: caseId.value, 
+    name: project.title,
+    content: data,
+  }).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>
+<style lang="scss">
 body,
 #app {
   margin: 0;
@@ -142,7 +271,6 @@ body,
   margin: 0 auto;
   display: flex;
   padding: 0 40px;
-
 }
 
 .t-head {
@@ -164,6 +292,7 @@ tbody {
 .project-title {
   display: flex;
   padding: 0 40px;
+  align-items: center;
   /* justify-content: center; */
 }
 
@@ -187,18 +316,17 @@ tbody {
 }
 
 .el-textarea__inner:focus {
-  box-shadow: none
+  box-shadow: none;
 }
 
 .el-textarea__inner:hover {
-  box-shadow: none
+  box-shadow: none;
 }
 
 .add-handle {
   padding: 30px 0;
   display: flex;
   justify-content: center;
-
 }
 
 .add-line {
@@ -208,11 +336,42 @@ tbody {
 
 .add-line .el-input__wrapper {
   box-shadow: none;
-  background: rgba(23, 41, 46, .2);
+  background: rgba(23, 41, 46, 0.2);
 }
 
 .add-line input {
   color: white;
-  text-align: center
+  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;
+    }
+  }
 }
 </style>

src/app/mirror/store/script.ts

@@ -0,0 +1,65 @@
+import { UN_REQ_NUM } from "@/constant/sys";
+import {
+  getCaseScriptSaveOrUpdateUrl,
+  getCaseScriptInfoUrl,
+  axios,
+} from "@/request";
+
+export enum FireStatus {
+  all = UN_REQ_NUM,
+  incomplete = 0,
+  complete = 1,
+}
+
+export type Fire = {
+  accidentDate: string;
+  createTime: string;
+  creatorDeptId: string;
+  caseId: number;
+  mapShow: boolean;
+  creatorId: string;
+  creatorName: string;
+  deptId: string;
+  editTime: string;
+  editorId: string;
+  editorName: string;
+  fireReason: string;
+  id: string;
+  isTeached: number;
+  organizerDeptName: string;
+  organizerUsers: string;
+  projectAddress: string;
+  latAndLong: string;
+  latlng: string;
+  projectName: string;
+  projectSite: string;
+  projectSiteCode: string;
+  projectSn: string;
+  status: FireStatus;
+  statusDesc: string;
+  updateTime: string;
+  isDelete?: number;
+
+  field1: string;
+  field2: string;
+  field3: string;
+  field4: string;
+
+  field5: string;
+  field6: string;
+  field7: string;
+  field8: string;
+  field9: string;
+  field10: string;
+};
+
+export enum FirePaggingRoute {
+  fire = 1,
+  teached = 2,
+}
+
+export const getCaseScriptInfo = async (caseId) =>
+  (await axios.get(getCaseScriptInfoUrl, { params:{caseId} })).data;
+
+export const CaseScriptSaveOrUpdate = async (fire: Omit<Fire, "id">) =>
+  axios.post(getCaseScriptSaveOrUpdateUrl, fire);

src/request/config.ts

@@ -23,6 +23,8 @@ import {
   uploadModel,
   userLogin,
   userReg,
+  getCaseScriptInfoUrl,
+  getCaseScriptSaveOrUpdateUrl,
 } from "./urls";
 
 // 不需要登录就能请求的接口

src/request/urls.ts

@@ -238,3 +238,6 @@ export const caseApiUpdateSort = "/fusion-xj/caseImg/updateSort";
 
 export const getSysSetting = `/fusion-xj/systemSetting/info`;
 export const updateSysSetting = `/fusion-xj/systemSetting/save`;
+// 脚本管理
+export const getCaseScriptInfoUrl = `/fusion-xj/caseScript/info`;
+export const getCaseScriptSaveOrUpdateUrl = `/fusion-xj/caseScript/saveOrUpdate`;