add

.env.development

@@ -2,7 +2,7 @@
 ENV = 'development'
 
 # 若依管理系统/开发环境
-VUE_APP_BASE_API = '/dev-api'
+VUE_APP_BASE_API = '/dev-api/'
 
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true

src/views/nested/menu1/index.vue

@@ -2,24 +2,24 @@
   <div style="padding:10px;">
     <!-- 搜索栏 -->
     <div class="search">
-      <el-form :inline="true" :model="searchForm">
+      <el-form :inline="true">
         <el-form-item label="剧本标题:" style="margin-right:50px;">
           <el-input
-            v-model="searchForm.date"
+            v-model="queryParams.query.title"
             style="height:30px;"
             placeholder="请输入剧本标题"
           />
         </el-form-item>
         <el-form-item label="工作室:" style="margin-right:50px;">
           <el-input
-            v-model="searchForm.name"
+            v-model="queryParams.query.studioName"
             style="height:30px;"
             placeholder="请输入工作室"
           />
         </el-form-item>
         <el-form-item label="标签:" style="margin-right:50px;">
           <el-input
-            v-model="searchForm.label"
+            v-model="queryParams.query.labelName"
             style="height:30px;"
             placeholder="请输入标签"
           />
@@ -30,11 +30,15 @@
           size="medium"
           type="primary"
           style="height:36px;width:100px;"
-        >搜索</el-button>
+          @click="search"
+          >搜索</el-button
+        >
         <el-button
           size="medium"
           style="margin-left:20px;height:36px;width:100px;"
-        >重置</el-button>
+          @click="refresh"
+          >重置</el-button
+        >
       </div>
     </div>
     <div class="add-button">
@@ -43,40 +47,52 @@
         type="primary"
         style="height:36px;width:100px;"
         @click="handleAdd"
-      >新建</el-button>
+        >新建</el-button
+      >
     </div>
     <!-- 列表 -->
     <div class="content">
-      <el-table ref="singleTable" :data="tableData" border style="width: 100%">
+      <el-table
+        v-loading="loading"
+        ref="singleTable"
+        :data="tableData"
+        border
+        style="width: 100%"
+      >
         <el-table-column align="center" type="index" label="序号" width="50" />
-        <el-table-column align="center" property="date" label="剧本标题" />
-        <el-table-column align="center" property="name" label="工作室" />
-        <el-table-column align="center" property="label" label="标签" />
-        <el-table-column align="center" property="time" label="创建时间" />
+        <el-table-column align="center" property="title" label="剧本标题" />
+        <el-table-column align="center" property="studioName" label="工作室" />
+        <el-table-column align="center" property="labelName" label="标签" />
+        <el-table-column
+          align="center"
+          property="createTime"
+          label="创建时间"
+        />
         <el-table-column align="center" label="操作">
           <template slot-scope="scope">
-            <el-button
-              type="text"
-              size="mini"
-              @click="handleView(scope.row)"
-            >查看</el-button>
-            <el-button
-              type="text"
-              size="mini"
-              @click="handleEdit(scope.row)"
-            >编辑</el-button>
+            <el-button type="text" size="mini" @click="handleView(scope.row)"
+              >查看</el-button
+            >
+            <el-button type="text" size="mini" @click="handleEdit(scope.row)"
+              >编辑</el-button
+            >
             <el-button type="text" size="mini">Tips维护</el-button>
-            <el-button
-              type="text"
-              size="mini"
-              @click="hanDel(scope.row)"
-            >删除</el-button>
+            <el-button type="text" size="mini" @click="hanDel(scope.row)"
+              >删除</el-button
+            >
           </template>
         </el-table-column>
       </el-table>
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="queryList"
+      />
     </div>
     <!-- 新增表单 -->
-    <el-dialog :title="dialog.title" :visible.sync="dialog.Visible" width="60%">
+    <el-dialog :title="dialog.title" :visible.sync="dialog.Visible" width="70%">
       <el-form
         ref="ruleForm"
         :model="ruleForm"
@@ -86,39 +102,48 @@
         class="demo-ruleForm"
       >
         <h3 class="form-title">基本信息</h3>
-        <el-form-item label="剧本标题:" prop="name" style="width:45%">
-          <el-input v-model="ruleForm.name" style="width:300px;" />
+        <el-form-item label="剧本标题:" prop="title" style="width:45%">
+          <el-input v-model="ruleForm.title" style="width:300px;" />
         </el-form-item>
-        <el-form-item label="工作室:" prop="name" style="width:45%">
-          <el-input v-model="ruleForm.name" style="width:300px;" />
+        <el-form-item label="工作室:" prop="studioName" style="width:45%">
+          <el-input v-model="ruleForm.studioName" style="width:300px;" />
         </el-form-item>
-        <el-form-item label="标签:" prop="name" style="width:100%">
-          <el-input v-model="ruleForm.name" style="width:300px;" />
+        <el-form-item label="标签:" prop="labelName" style="width:100%">
+          <el-input v-model="ruleForm.labelName" style="width:300px;" />
         </el-form-item>
         <h3 class="form-title">剧本图片</h3>
         <el-form-item label="封面">
+          <!-- :action="baseUrl + 'sys/file/upload'" -->
+          <!-- <el-image v-if="ruleForm.cover" style="width: 146px; height: 146px" :src="ruleForm.cover" fit="fill"> 
+          </el-image> -->
           <el-upload
             class="avatar-uploader"
-            action="https://jsonplaceholder.typicode.com/posts/"
+            action
             :show-file-list="false"
-            :on-success="handleAvatarSuccess"
+            :auto-upload="false"
+            :on-change="uploadImg"
+            :on-success="handleAvatar"
             :before-upload="beforeAvatarUpload"
           >
-            <img v-if="imageUrl" :src="ruleForm.imageUrl" class="avatar">
-            <i v-else class="el-icon-plus avatar-uploader-icon" />
+            <img v-if="ruleForm.cover" :src="ruleForm.cover" class="avatar" />
+            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
           </el-upload>
         </el-form-item>
         <el-form-item label="其它图片" style="width:100%">
           <el-upload
+            action
             class="avatar-uploader"
-            action="https://jsonplaceholder.typicode.com/posts/"
-            :show-file-list="false"
+            list-type="picture-card"
+            :auto-upload="false"
+            :on-change="changeImgs"
             :on-success="handleAvatarSuccess"
             :before-upload="beforeAvatarUpload"
           >
-            <img v-if="imageUrl" :src="ruleForm.imageUrl" class="avatar">
-            <i v-else class="el-icon-plus avatar-uploader-icon" />
+            <i class="el-icon-plus" />
           </el-upload>
+          <el-dialog :visible.sync="dialogVisible">
+            <img width="100%" :src="dialogImageUrl" alt="" />
+          </el-dialog>
         </el-form-item>
         <h3 class="form-title">剧本简介</h3>
         <el-form-item label="简介">
@@ -128,12 +153,12 @@
             rows="10"
             type="textarea"
           /> -->
-          <Tinymce ref="editor" v-model="ruleForm.desc" :height="400" />
+          <Tinymce ref="editor" v-model="ruleForm.introduction" :height="400" />
         </el-form-item>
         <h3 class="form-title">开本流程</h3>
         <el-table
-          :header-cell-style="{background:'#eee',color:'#606266'}"
-          :data="ruleForm.tableData"
+          :header-cell-style="{ background: '#eee', color: '#606266' }"
+          :data="ruleForm.processesList"
           border
           style="width: 90%;margin-left:30px;"
         >
@@ -143,33 +168,33 @@
             label="序号"
             width="50"
           />
-          <el-table-column align="center" property="date" label="流程标题">
+          <el-table-column align="center" property="title" label="流程标题">
             <template slot-scope="scope">
-              <el-input v-model="ruleForm.tableData[scope.$index].date" />
+              <el-input v-model="ruleForm.processesList[scope.$index].title" />
             </template>
           </el-table-column>
-          <el-table-column align="center" property="name" label="流程编号">
+          <el-table-column align="center" property="code" label="流程编号">
             <template slot-scope="scope">
-              <el-input v-model="ruleForm.tableData[scope.$index].name" />
+              <el-input v-model="ruleForm.processesList[scope.$index].code" />
             </template>
           </el-table-column>
-          <el-table-column align="center" property="label" label="简介">
+          <el-table-column align="center" property="introduction" label="简介">
             <template slot-scope="scope">
-              <el-input v-model="ruleForm.tableData[scope.$index].label" />
+              <el-input
+                v-model="ruleForm.processesList[scope.$index].introduction"
+              />
             </template>
           </el-table-column>
-          <el-table-column align="center" property="time" label="排序">
+          <el-table-column align="center" property="sort" label="排序">
             <template slot-scope="scope">
-              <el-input v-model="ruleForm.tableData[scope.$index].time" />
+              <el-input v-model="ruleForm.processesList[scope.$index].sort" />
             </template>
           </el-table-column>
           <el-table-column align="center" label="操作">
             <template slot-scope="scope">
-              <el-button
-                type="text"
-                size="mini"
-                @click="Del(scope.$index)"
-              >删除</el-button>
+              <el-button type="text" size="mini" @click="Del(scope.$index)"
+                >删除</el-button
+              >
             </template>
           </el-table-column>
         </el-table>
@@ -178,18 +203,19 @@
             type="success"
             style="height:36px;width:100px;margin-left:30px;color:#fff;background:#33DB99"
             @click="handleAddK"
-          >新建</el-button>
+            >新建</el-button
+          >
         </div>
         <h3 class="form-title">剧本资源</h3>
         <el-form-item label="图片" prop="imgUrls" style="width: 100%;">
-          <el-radio-group v-model="ruleForm.resource" @change="changeImg">
+          <el-radio-group v-model="radioImg" @change="changeImg">
             <el-radio label="1">本地上传</el-radio>
             <el-radio label="2">网易云地址</el-radio>
           </el-radio-group>
         </el-form-item>
-        <el-form-item v-if="active == 2" style="width: 100%;" class="urlTable">
+        <el-form-item v-if="radioImg == 2" style="width: 100%;" class="urlTable">
           <el-table
-            :data="ruleForm.data"
+            :data="ruleForm.radioImg"
             border
             style="width: 80%;margin-left:100px;"
           >
@@ -201,21 +227,40 @@
             />
             <el-table-column align="center" property="date" label="资源标题">
               <template slot-scope="scope">
-                <el-input v-model="ruleForm.data[scope.$index].date" />
+                <el-input v-model="ruleForm.radioImg[scope.$index].title" />
               </template>
             </el-table-column>
-            <el-table-column align="center" property="name" label="资源URL">
+            <el-table-column align="center" property="url" label="资源URL">
+              <template slot-scope="scope">
+                <el-input v-model="ruleForm.radioImg[scope.$index].url" />
+              </template>
+            </el-table-column>
+            <el-table-column
+              align="center"
+              property="processId"
+              label="关联流程"
+            >
               <template slot-scope="scope">
-                <el-input v-model="ruleForm.data[scope.$index].name" />
+                <el-select
+                  v-model="ruleForm.radioImg[scope.$index].processId"
+                  clearable
+                  placeholder="请选择流程"
+                >
+                  <el-option
+                    v-for="item in lcData"
+                    :key="item.value"
+                    :label="item.title"
+                    :value="item.id"
+                  >
+                  </el-option>
+                </el-select>
               </template>
             </el-table-column>
             <el-table-column align="center" label="操作">
               <template slot-scope="scope">
-                <el-button
-                  type="text"
-                  size="mini"
-                  @click="Del(scope.$index)"
-                >删除</el-button>
+                <el-button type="text" size="mini" @click="Del(scope.$index)"
+                  >删除</el-button
+                >
               </template>
             </el-table-column>
           </el-table>
@@ -223,19 +268,20 @@
             <el-button
               type="success"
               style="height:36px;width:100px;margin-left:30px;color:#fff;background:#33DB99"
-              @click="handleAddUrl"
-            >新建</el-button>
+              @click="handleAddImg"
+              >新建</el-button
+            >
           </div>
         </el-form-item>
         <el-form-item label="音频" prop="imgUrls" style="width: 100%;">
-          <el-radio-group v-model="ruleForm.resource" @change="changeImg">
+          <el-radio-group v-model="radioMusic" @change="changeMusic">
             <el-radio label="1">本地上传</el-radio>
             <el-radio label="2">网易云地址</el-radio>
           </el-radio-group>
         </el-form-item>
-        <el-form-item v-if="active == 2" style="width: 100%;" class="urlTable">
+        <el-form-item v-if="radioMusic == 2" style="width: 100%;" class="urlTable">
           <el-table
-            :data="ruleForm.data"
+            :data="ruleForm.radioMusic"
             border
             style="width: 80%;margin-left:100px;"
           >
@@ -245,23 +291,42 @@
               label="序号"
               width="50"
             />
-            <el-table-column align="center" property="date" label="资源标题">
+            <el-table-column align="center" property="title" label="资源标题">
               <template slot-scope="scope">
-                <el-input v-model="ruleForm.data[scope.$index].date" />
+                <el-input v-model="ruleForm.radioMusic[scope.$index].title" />
               </template>
             </el-table-column>
-            <el-table-column align="center" property="name" label="资源URL">
+            <el-table-column align="center" property="url" label="资源URL">
               <template slot-scope="scope">
-                <el-input v-model="ruleForm.data[scope.$index].name" />
+                <el-input v-model="ruleForm.radioMusic[scope.$index].url" />
+              </template>
+            </el-table-column>
+            <el-table-column
+              align="center"
+              property="processId"
+              label="关联流程"
+            >
+              <template slot-scope="scope">
+                <el-select
+                  v-model="ruleForm.radioMusic[scope.$index].processId"
+                  clearable
+                  placeholder="请选择流程"
+                >
+                  <el-option
+                    v-for="item in lcData"
+                    :key="item.value"
+                    :label="item.title"
+                    :value="item.id"
+                  >
+                  </el-option>
+                </el-select>
               </template>
             </el-table-column>
             <el-table-column align="center" label="操作">
               <template slot-scope="scope">
-                <el-button
-                  type="text"
-                  size="mini"
-                  @click="Del(scope.$index)"
-                >删除</el-button>
+                <el-button type="text" size="mini" @click="DelMusic(scope.$index)"
+                  >删除</el-button
+                >
               </template>
             </el-table-column>
           </el-table>
@@ -269,19 +334,20 @@
             <el-button
               type="success"
               style="height:36px;width:100px;margin-left:30px;color:#fff;background:#33DB99"
-              @click="handleAddUrl"
-            >新建</el-button>
+              @click="handleAddMusic"
+              >新建</el-button
+            >
           </div>
         </el-form-item>
         <el-form-item label="视频" prop="imgUrls" style="width: 100%;">
-          <el-radio-group v-model="ruleForm.resource" @change="changeImg">
+          <el-radio-group v-model="radioVideo" @change="changeVideo">
             <el-radio label="1">本地上传</el-radio>
             <el-radio label="2">网易云地址</el-radio>
           </el-radio-group>
         </el-form-item>
-        <el-form-item v-if="active == 2" style="width: 100%;" class="urlTable">
+        <el-form-item v-if="radioVideo == 2" style="width: 100%;" class="urlTable">
           <el-table
-            :data="ruleForm.data"
+            :data="ruleForm.radioVideo"
             border
             style="width: 80%;margin-left:100px;"
           >
@@ -291,23 +357,42 @@
               label="序号"
               width="50"
             />
-            <el-table-column align="center" property="date" label="资源标题">
+            <el-table-column align="center" property="title" label="资源标题">
               <template slot-scope="scope">
-                <el-input v-model="ruleForm.data[scope.$index].date" />
+                <el-input v-model="ruleForm.radioVideo[scope.$index].title" />
               </template>
             </el-table-column>
-            <el-table-column align="center" property="name" label="资源URL">
+            <el-table-column align="center" property="url" label="资源URL">
               <template slot-scope="scope">
-                <el-input v-model="ruleForm.data[scope.$index].name" />
+                <el-input v-model="ruleForm.radioVideo[scope.$index].url" />
+              </template>
+            </el-table-column>
+            <el-table-column
+              align="center"
+              property="processId"
+              label="关联流程"
+            >
+              <template slot-scope="scope">
+                <el-select
+                  v-model="ruleForm.radioVideo[scope.$index].processId"
+                  clearable
+                  placeholder="请选择流程"
+                >
+                  <el-option
+                    v-for="item in lcData"
+                    :key="item.value"
+                    :label="item.title"
+                    :value="item.id"
+                  >
+                  </el-option>
+                </el-select>
               </template>
             </el-table-column>
             <el-table-column align="center" label="操作">
               <template slot-scope="scope">
-                <el-button
-                  type="text"
-                  size="mini"
-                  @click="Del(scope.$index)"
-                >删除</el-button>
+                <el-button type="text" size="mini" @click="DelVideo(scope.$index)"
+                  >删除</el-button
+                >
               </template>
             </el-table-column>
           </el-table>
@@ -315,8 +400,9 @@
             <el-button
               type="success"
               style="height:36px;width:100px;margin-left:30px;color:#fff;background:#33DB99"
-              @click="handleAddUrl"
-            >新建</el-button>
+              @click="handleAddVideo"
+              >新建</el-button
+            >
           </div>
         </el-form-item>
         <!-- <el-form-item>
@@ -326,116 +412,251 @@
       </el-form>
       <span slot="footer" class="dialog-footer">
         <el-button @click="dialog.Visible = false">取 消</el-button>
-        <el-button
-          type="primary"
-          @click="dialog.Visible = false"
-        >确 定</el-button>
+        <el-button type="primary" @click="subMit">确 定</el-button>
       </span>
     </el-dialog>
   </div>
 </template>
 <script>
-import Tinymce from '@/components/Tinymce'
+import Tinymce from "@/components/Tinymce";
+import {
+  queryJbInfo,
+  addJbInfo,
+  updateJbInfo,
+  queryJbDetail,
+  deleteJbInfo,
+  queryFindList
+} from "@/api/userInfoApi.js";
+import { uploadFile, delFile } from "@/api/upload/upload.js";
+const baseUrl = process.env.VUE_APP_BASE_API;
 export default {
   components: { Tinymce },
   data() {
     return {
-      searchForm: {},
-      tableData: [
-        {
-          date: '标题1',
-          name: '工作室1',
-          label: '剧情，神秘',
-          time: '2021-09-01'
-        },
-        {
-          date: '标题2',
-          name: '工作室2',
-          label: '剧情，神秘',
-          time: '2021-09-01'
-        },
-        {
-          date: '标题3',
-          name: '工作室3',
-          label: '剧情，神秘',
-          time: '2021-09-01'
-        },
-        {
-          date: '标题4',
-          name: '工作室4',
-          label: '剧情，神秘',
-          time: '2021-09-01'
+      baseUrl,
+      loading: true,
+      queryParams: {
+        pageNum: 1,
+        pageSize: 15,
+        query: {
+          title: undefined,
+          studioName: undefined,
+          labelName: undefined
         }
-      ],
+      },
+      tableData: [],
+      rules: {
+        title: [{ required: true, message: "请输入标题名称", trigger: "blur" }],
+        labelName: [
+          { required: true, message: "请输入标签名称", trigger: "blur" }
+        ]
+      },
       dialog: {
-        title: '新增剧本',
+        title: "新增剧本",
         Visible: false
       },
       ruleForm: {
-        resource: '1',
-        tableData: [],
-        imgUrls: [],
-        data: []
+        resource: "1",
+        processesList: [],
+        imgUrl: "",
+        data: [],
+        radioImg:[],
+        radioMusic:[],
+        radioVideo:[],
+        resourcesList:[]
       },
       dialogVisible: false,
-      active: ''
-    }
+      active: "",
+      imageUrl: "",
+      total: 0,
+      dialogVisible: false,
+      dialogImageUrl: "",
+      dataImg: [],
+      lcData: [],
+      radioImg:"1",
+      radioMusic:'1',
+      radioVideo:"1"
+    };
+  },
+  mounted() {
+    this.queryList();
+    this.queryFindList();
   },
   methods: {
+    //获取列表
+    async queryList() {
+      this.loading = true;
+      try {
+        let res = await queryJbInfo(this.queryParams);
+        console.log(res);
+        this.tableData = res.data.rows;
+        this.total = res.data.total;
+        this.loading = false;
+      } catch (err) {
+        console.log(err);
+      }
+    },
+    //搜索
+    search() {
+      this.queryList();
+    },
+    //重置
+    refresh() {
+      this.queryParams = {
+        pageNum: 1,
+        pageSize: 15,
+        query: {
+          title: undefined,
+          studioName: undefined,
+          labelName: undefined
+        }
+      };
+      this.queryList();
+    },
+    //获取流程
+    async queryFindList() {
+      try {
+        let res = await queryFindList({});
+        // console.log(res.data, "流程列表");
+        this.lcData = res.data;
+      } catch (err) {
+        console.log(err);
+      }
+    },
+    //获取详情
+    async queryListDetail(id) {
+      try {
+        let res = await queryJbDetail(id);
+        console.log(res, "详情");
+        this.ruleForm = res.data;
+      } catch (err) {
+        console.log(err);
+      }
+    },
     // 新增
     handleAdd() {
-      this.dialog.Visible = true
-      this.dialog.title = '新增剧本'
+      this.dialog.Visible = true;
+      this.dialog.title = "新增剧本";
+    },
+    async subMit() {
+      this.ruleForm.imgUrl = this.dataImg.join(",");
+      this.ruleForm.resourcesList = this.ruleForm.resourcesList.concat(this.ruleForm.radioImg).concat(this.ruleForm.radioMusic).concat(this.ruleForm.radioVideo)
+      console.log(this.ruleForm, "参数");
+      try{
+        let res = await addJbInfo(this.ruleForm)
+         if (res.code == 200) {
+          this.$message.success("新增成功");
+          this.dialog.Visible = false
+          this.queryList();
+        } else {
+          this.$message({
+            message: res.msg,
+            type: "error"
+          });
+        }
+      }catch(err){
+        console.log(err)
+      }
     },
     // 编辑
     handleEdit(row) {
-      console.log(row)
-      this.dialog.Visible = true
-      this.dialog.title = '编辑剧本'
-      this.ruleForm = row
+      console.log(row);
+      this.dialog.Visible = true;
+      this.dialog.title = "编辑剧本";
+      this.ruleForm = row;
     },
     // 查看
     handleView(row) {
-      console.log(row)
+      this.queryListDetail(row.id);
     },
     // 删除
-    hanDle(row) {
-      console.log(row)
+    async hanDel(row) {
+      try {
+        await this.$confirm("此操作将永久删除该剧本,是否继续?", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        });
+        let res = await deleteJbInfo(row.id);
+        if (res.code == 200) {
+          this.$message.success("删除成功");
+          this.queryList();
+        } else {
+          this.$message({
+            message: res.msg,
+            type: "error"
+          });
+        }
+      } catch (err) {
+        console.log(err);
+      }
+    },
+    handleAvatar(res, file, fileList) {
+      console.log(res, file, "整个");
     },
-    // 图片
     handleAvatarSuccess(res, file) {
-      this.ruleForm.imageUrl = URL.createObjectURL(file.raw)
+      console.log(res, file, "成功了吗");
+    },
+    //上传图片
+    async uploadImg(file, fileList) {
+      try {
+        let formData = new FormData();
+        let type = file.raw.type;
+        formData.append("file", file.raw);
+        formData.append("type", type);
+        let res = await uploadFile(formData);
+        // this.ruleForm.cover = res.data.wjUrl;
+        this.$set(this.ruleForm, "cover", res.data.wjUrl);
+        console.log(this.ruleForm.cover);
+      } catch (err) {
+        console.log(err);
+      }
+    },
+    async changeImgs(file, fileList) {
+      try {
+        let formData = new FormData();
+        let type = file.raw.type;
+        formData.append("file", file.raw);
+        formData.append("type", type);
+        let res = await uploadFile(formData);
+        console.log(res, 142131);
+        this.dataImg.push(res.data.wjUrl);
+      } catch (err) {
+        console.log(err);
+      }
     },
     beforeAvatarUpload(file) {
-      const isJPG = file.type
-      const isLt2M = file.size / 1024 / 1024 < 2
+      console.log(file, 41231);
+      const isJPG = file.type;
+      const isLt2M = file.size / 1024 / 1024 < 2;
       if (!isLt2M) {
-        this.$message.error('上传头像图片大小不能超过 2MB!')
+        this.$message.error("上传头像图片大小不能超过 2MB!");
       }
-      return isJPG && isLt2M
+      return isJPG && isLt2M;
     },
     // 开本流程新增
     handleAddK() {
-      this.ruleForm.tableData.push({
-        date: '',
-        name: '',
-        label: '',
-        time: ''
-      })
+      this.ruleForm.processesList.push({
+        title: "",
+        code: "",
+        introduction: "",
+        sort: ""
+      });
     },
     // 开本流程删除
     Del(index) {
-      this.ruleForm.tableData.splice(index, 1)
+      this.ruleForm.processesList.splice(index, 1);
     },
     // 图片预览
     dialogimg(e) {
-      this.dialogVisible = true
-      this.dialogImageUrl = this.ruleForm.imgUrls[e]
+      console.log(e);
+      this.dialogVisible = true;
+      this.dialogImageUrl = this.ruleForm.imgUrls[e];
     },
     // 图片删除
     deldialogimg(index) {
-      this.ruleForm.imgUrls.splice(index, 1)
-      var img = this.ruleForm.imgUrls[index]
+      this.ruleForm.imgUrls.splice(index, 1);
+      var img = this.ruleForm.imgUrl[index];
       // proUpdate({ wjUrl: img }).then((res) => {
       //   if (res.code == 200) {
       //     that.back();
@@ -443,16 +664,44 @@ export default {
       // });
     },
     changeImg(val) {
-      this.active = val
+      this.radioImg = val;
+    },
+    changeMusic(val) {
+      this.radioMusic = val;
+    },
+    changeVideo(val) {
+      this.radioVideo = val;
     },
-    handleAddUrl() {
-      this.ruleForm.data.push({
-        date: '',
-        name: ''
-      })
+    //新增图片资源
+    handleAddImg(){
+      this.ruleForm.radioImg.push({
+        title: "",
+        url: "",
+        processId:'',
+        mediaType:1,
+        sourceType:this.radioImg
+      });
+    },
+    handleAddMusic() {
+      this.ruleForm.radioMusic.push({
+        title: "",
+        url: "",
+        processId:'',
+        mediaType:2,
+        sourceType:this.radioMusic
+      });
+    },
+    handleAddVideo() {
+      this.ruleForm.radioVideo.push({
+        title: "",
+        url: "",
+        processId:'',
+        mediaType:3,
+        sourceType:this.radioVideo
+      });
     }
   }
-}
+};
 </script>
 <style scoped>
 .content {
@@ -496,7 +745,7 @@ export default {
   height: 178px;
   display: block;
 }
-.urlTable /deep/ .el-form-item__content{
+.urlTable /deep/ .el-form-item__content {
   width: 100%;
 }
 </style>

src/views/nested/menu2/index.vue

@@ -2,78 +2,374 @@
   <div style="padding:30px;">
     <!-- 搜索栏 -->
     <div class="search">
-      <el-form :inline="true" :model="searchForm">
+      <el-form :inline="true">
         <el-form-item label="剧本标题:" style="margin-right:50px;">
-          <el-input v-model="searchForm.date" placeholder="请输入剧本标题" />
+          <el-select
+            v-model="queryParams.query.scenarioId"
+            clearable
+            placeholder="请选择剧本标题"
+          >
+            <el-option
+              v-for="item in jbData"
+              :key="item.value"
+              :label="item.title"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
         </el-form-item>
         <el-form-item label="流程标题:" style="margin-right:50px;">
-          <el-input v-model="searchForm.name" placeholder="请输入工作室" />
+          <el-select
+            v-model="queryParams.query.processId"
+            clearable
+            placeholder="请选择流程标题"
+          >
+            <el-option
+              v-for="item in lcData"
+              :key="item.value"
+              :label="item.title"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
         </el-form-item>
         <el-form-item label="Tips内容:" style="margin-right:50px;">
-          <el-input v-model="searchForm.label" placeholder="请输入标签" />
+          <el-input
+            clearable
+            v-model="queryParams.query.content"
+            placeholder="Tips内容"
+          />
         </el-form-item>
       </el-form>
       <div class="search-button">
-        <el-button size="medium" type="primary" style="height:36px;width:100px;">搜索</el-button>
-        <el-button size="medium" style="margin-left:20px;height:36px;width:100px;">重置</el-button>
+        <el-button
+          size="medium"
+          type="primary"
+          style="height:36px;width:100px;"
+          @click="search"
+          >搜索</el-button
+        >
+        <el-button
+          size="medium"
+          style="margin-left:20px;height:36px;width:100px;"
+          @click="refresh"
+          >重置</el-button
+        >
       </div>
     </div>
     <div class="add-button">
-      <el-button size="medium" type="primary" style="height:36px;width:100px;" @click="handleAdd">新建</el-button>
+      <el-button
+        size="medium"
+        type="primary"
+        style="height:36px;width:100px;"
+        @click="handleAdd"
+        >新建</el-button
+      >
     </div>
     <!-- 列表 -->
     <div class="content">
-      <el-table ref="singleTable" :data="tableData" border style="width: 100%">
+      <el-table
+        v-loading="loading"
+        ref="singleTable"
+        :data="tableData"
+        border
+        style="width: 100%"
+      >
         <el-table-column align="center" type="index" label="序号" width="50" />
-        <el-table-column align="center" property="date" label="剧本标题" />
-        <el-table-column align="center" property="name" label="流程名称" />
-        <el-table-column align="center" property="label" label="Tips内容" />
-        <el-table-column align="center" property="time" label="点赞数量" />
-        <el-table-column align="center" property="time" label="创建时间" />
+        <el-table-column
+          align="center"
+          property="scenarioTitle"
+          label="剧本标题"
+        />
+        <el-table-column
+          align="center"
+          property="processTitle"
+          label="流程名称"
+        />
+        <el-table-column align="center" property="content" label="Tips内容" />
+        <el-table-column align="center" property="likeCount" label="点赞数量" />
+        <el-table-column
+          align="center"
+          property="createTime"
+          label="创建时间"
+        />
         <el-table-column align="center" label="操作">
           <template slot-scope="scope">
-            <el-button type="text" size="mini">查看</el-button>
-            <el-button type="text" size="mini">编辑</el-button>
-            <el-button type="text" size="mini">删除</el-button>
+            <el-button type="text" size="mini" @click="handleView(scope.row)"
+              ><div style="color:#000;">查看</div></el-button
+            >
+            <el-button type="text" size="mini" @click="handleEdit(scope.row)"
+              ><div style="color:#02A7F0;">编辑</div></el-button
+            >
+            <el-button type="text" size="mini" @click="hanDel(scope.row)"
+              ><div style="color:#D9001B;">删除</div></el-button
+            >
           </template>
         </el-table-column>
       </el-table>
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="queryTipsList"
+      />
     </div>
     <!-- 新增表单 -->
+    <el-dialog
+      :title="dialog.title"
+      :visible.sync="dialog.Visible"
+      center
+      width="35%"
+    >
+      <el-form ref="form" :model="form" :inline="true">
+        <el-form-item label="剧本标题:" prop="name" style="width:100%">
+          <el-select
+            :disabled="disabled"
+            v-model="form.scenarioId"
+            clearable
+            placeholder="请选择剧本标题"
+            style="width:300px"
+          >
+            <el-option
+              v-for="item in jbData"
+              :key="item.value"
+              :label="item.title"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="流程标题:" style="width:100%">
+          <el-select
+            :disabled="disabled"
+            v-model="form.processId"
+            clearable
+            placeholder="请选择活动区域"
+            style="width:300px"
+          >
+            <el-option
+              v-for="item in lcData"
+              :key="item.value"
+              :label="item.title"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="Tips内容:" style="width:100%">
+          <el-input
+            :disabled="disabled"
+            style="width:300px"
+            v-model="form.content"
+            type="textarea"
+            :rows="6"
+            placeholder="请输入内容"
+            autocomplete="off"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialog.Visible = false">取 消</el-button>
+        <el-button v-if="type != 'view'" type="primary" @click="subMitForm()">确 定</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 <script>
+import {
+  queryJbInfos,
+  queryTipsList,
+  addTipsList,
+  updateTipsList,
+  deteleTipsList,
+  queryTipsDetail,
+  queryFindList
+} from "@/api/userInfoApi.js";
 export default {
   data() {
     return {
-      searchForm: {},
-      tableData: [
-        {
-          date: '标题1',
-          name: '第一幕',
-          label: '剧情，神秘',
-          count: '5',
-          creator: '管理员',
-          time: '2021-09-01'
+      loading: true,
+      queryParams: {
+        pageNum: 1,
+        pageSize: 15,
+        query: {
+          scenarioId: undefined,
+          processId: undefined,
+          content: undefined
         }
-      ]
-    }
+      },
+      form: {},
+      disabled: false,
+      dialog: {
+        title: "新增",
+        Visible: false
+      },
+      tableData: [],
+      jbData: [],
+      lcData: [],
+      total: 0,
+      type: "add"
+    };
+  },
+  mounted() {
+    this.queryJbInfos();
+    this.queryFindList();
+    this.queryTipsList();
   },
   methods: {
+    //获取剧本列表
+    async queryJbInfos() {
+      try {
+        let res = await queryJbInfos({});
+        // console.log(res.data, "剧本列表");
+        this.jbData = res.data;
+      } catch (err) {
+        console.log(err);
+      }
+    },
+    //获取流程列表
+    async queryFindList() {
+      try {
+        let res = await queryFindList({});
+        // console.log(res.data, "流程列表");
+        this.lcData = res.data;
+      } catch (err) {
+        console.log(err);
+      }
+    },
+    //获取Tips列表
+    async queryTipsList() {
+      this.loading = true;
+      try {
+        let res = await queryTipsList(this.queryParams);
+        this.tableData = res.data.rows;
+        this.total = res.data.total;
+        this.loading = false;
+      } catch (err) {
+        console.log(err);
+      }
+    },
+    //搜索
+    search() {
+      this.queryTipsList();
+    },
+    refresh() {
+      this.queryParams = {
+        pageNum: 1,
+        pageSize: 15,
+        query: {
+          scenarioId: undefined,
+          processId: undefined,
+          content: undefined
+        }
+      };
+      this.queryTipsList();
+    },
     // 新增
     handleAdd() {
-      alert(1111)
+      this.dialog.title = "新增";
+      this.type = 'add'
+      this.form = {}
+      this.disabled = false;
+      this.dialog.Visible = true;
+    },
+    //提交表单
+    async subMitForm() {
+      try {
+        this.$refs["form"].validate(async valid => {
+          if (valid) {
+            if (this.type == "add") {
+              let res = await addTipsList(this.form);
+              if (res.code == 200) {
+                this.$message.success("新增成功");
+                this.dialog.Visible = false;
+                this.form = {};
+                this.queryTipsList();
+              } else {
+                this.$message({
+                  message: res.msg,
+                  type: "error"
+                });
+              }
+            }
+            if(this.type == 'edit'){
+              let res = await updateTipsList(this.form);
+              if (res.code == 200) {
+                this.$message.success("编辑成功");
+                this.dialog.Visible = false;
+                this.form = {};
+                this.queryTipsList();
+              } else {
+                this.$message({
+                  message: res.msg,
+                  type: "error"
+                });
+              }
+            }
+          }
+        });
+      } catch (err) {
+        console.log(err);
+      }
+    },
+    //获取详情
+    async queryTipsDetail(id) {
+      try {
+        let res = await queryTipsDetail(id);
+        // console.log(res, "详情");
+        this.form = res.data;
+      } catch (err) {
+        console.log(err);
+      }
+    },
+    //查看详情
+    handleView(row) {
+      this.queryTipsDetail(row.id);
+      this.dialog.title = "查看";
+      this.type = "view";
+      this.disabled = true;
+      this.dialog.Visible = true;
+    },
+    //编辑
+    handleEdit(row) {
+      this.queryTipsDetail(row.id);
+      this.dialog.title = "编辑";
+      this.type = "edit";
+      this.disabled = false;
+      this.dialog.Visible = true;
+    },
+    //删除
+    async hanDel(row) {
+      try {
+        await this.$confirm("此操作将永久删除,是否继续?", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        });
+        let res = await deteleTipsList(row.id);
+        if (res.code == 200) {
+          this.$message.success("删除成功");
+          this.queryList();
+        } else {
+          this.$message({
+            message: res.msg,
+            type: "error"
+          });
+        }
+      } catch (err) {
+        console.log(err);
+      }
     }
   }
-}
+};
 </script>
 <style scoped>
 .content {
   background: #fff;
-  margin-top:15px;
+  margin-top: 15px;
 }
-.add-button{
-  margin-top:15px;
+.add-button {
+  margin-top: 15px;
 }
 .search-button {
   display: flex;