From 65038b44ac5dc7879506cba8f2bbf13512d509ae Mon Sep 17 00:00:00 2001
From: liyanqi <15181887205@163.com>
Date: 星期二, 01 十一月 2022 18:43:00 +0800
Subject: [PATCH] 视频管理页面

---
 src/views/operate/video/createInterface/index.vue    |  459 +++++++++++++
 src/views/operate/video/detailInterface/index.vue    |  303 ++++++++
 src/views/operate/rectification/surveyList/index.vue |    2 
 src/router/index.js                                  |   17 
 src/views/operate/video/index.vue                    |  912 +++++++++++++++++++-------
 src/views/operate/video/updateInterface/index.vue    |  307 +++++++++
 6 files changed, 1,740 insertions(+), 260 deletions(-)

diff --git a/src/router/index.js b/src/router/index.js
index 0c4f355..acdcb0b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -281,14 +281,31 @@
                 component: () => import('@/views/operate/sms/smsTemplate'),
               },
             ]
+          },
+          {
+            path: "videoControl",
+            name: 'videoControl',
+            component: () => import('@/views/operate/video')
+          },
+          {
+            path: 'viewEvent',
+            name: 'viewEvent',
+            component: () => import('@/views/operate/viewEvent'),
+          },
+          {
+            path: 'images',
+            name: 'images',
+            component: () => import('@/views/operate/images'),
           }
         ]
       },
+      
       {
         path: "video",
         name: 'video',
         component: () => import('@/views/video')
       },
+     
       {
         path: "lampblack",
         name: 'lampblack',
diff --git a/src/views/operate/rectification/surveyList/index.vue b/src/views/operate/rectification/surveyList/index.vue
index d6c82e8..4c2e34d 100644
--- a/src/views/operate/rectification/surveyList/index.vue
+++ b/src/views/operate/rectification/surveyList/index.vue
@@ -39,7 +39,7 @@
           <el-input placeholder="璇疯緭鍏ユ爣棰樻垨鑰呬换鍔$紪鍙�"></el-input>
         </div>
         <div class="btn">
-          <el-button icon="el-icon-plus" type="primary">鎼滅储</el-button>
+          <el-button icon="el-icon-search" type="primary">鎼滅储</el-button>
           <el-button icon="el-icon-delete">閲嶇疆</el-button>
         </div>
       </div>
diff --git a/src/views/operate/video/createInterface/index.vue b/src/views/operate/video/createInterface/index.vue
new file mode 100644
index 0000000..7111397
--- /dev/null
+++ b/src/views/operate/video/createInterface/index.vue
@@ -0,0 +1,459 @@
+<template>
+  <div class="createUser">
+    <main>
+      <div class="mainContent">
+        <el-form
+          ref="user"
+          label-width="140px"
+          autoComplete="on"
+          :model="depart"
+          :rules="createDepartRules"
+          label-position="right"
+        >
+          <!-- 閮ㄩ棬鍚嶇О -->
+          <el-form-item class="optionItem" label="闂绫诲瀷:" prop="departName">
+            <el-input
+              v-model="depart.departName"
+              placeholder="璇疯緭鍏ラ棶棰樼被鍨�"
+            ></el-input>
+          </el-form-item>
+          <!-- 涓婄骇閮ㄩ棬 -->
+          <el-form-item class="optionItems" label="澶х被鍚嶇О:" prop="parentId">
+            <el-select v-model="depart.parentId" placeholder="璇疯緭鍏ュぇ绫诲悕绉�">
+              <el-option :value="mylabel">
+                <el-tree
+                  ref="tree"
+                  :check-strictly="true"
+                  :data="departList"
+                  :props="defaultProps"
+                  show-checkbox
+                  @check-change="handleCheck"
+                  default-expand-all
+                  node-key="id"
+                >
+                </el-tree>
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <!-- 閮ㄩ棬绫诲瀷 -->
+          <el-form-item class="optionItem" label="灏忕被鍚嶇О:" prop="departType">
+            <el-select v-model="depart.departType" placeholder="璇烽�夋嫨灏忕被鍚嶇О">
+              <el-option
+                v-for="item in departTypeList"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <!--娣诲姞浜哄憳  -->
+          <el-form-item class="optionItem add" label="娣诲姞瑙嗛:">
+            <ul class="addPerson">
+              <li
+                v-for="(item, index) in checkedList"
+                :key="index"
+                @click="setLeader(index)"
+              >
+                <div class="li-item">
+                  <div class="li-icon">
+                    <i
+                      :class="[
+                        'el-icon-user-solid',
+                        item.leader ? 'leader' : '',
+                      ]"
+                    ></i>
+                  </div>
+                  <label
+                    style="font-size: 12px"
+                    :class="[item.leader ? 'leader' : '']"
+                    >{{ item.username }}</label
+                  >
+                </div>
+              </li>
+              <li class="li-btn">
+                <i class="el-icon-plus" @click="openUser = true"></i>
+              </li>
+            </ul>
+            <div class="card" v-if="openUser">
+              <el-card class="box-card">
+                <div slot="header" class="myclear">
+                  <span>宸ヤ綔浜哄憳</span>
+                  <div @click="addUser">纭</div>
+                </div>
+                <div class="scrollWrap">
+                  <el-checkbox-group v-model="checkedUser">
+                    <el-checkbox
+                      v-for="user in userList"
+                      :label="user.id"
+                      :key="user.id"
+                    >
+                      {{ user.username}}
+                    </el-checkbox>
+                  </el-checkbox-group>
+                </div>
+                <div class="hidebar"></div>
+              </el-card>
+            </div>
+          </el-form-item>
+        </el-form>
+      </div>
+    </main>
+    <footer>
+      <div class="optionBtn">
+        <el-button @click="handleClose">鍙栨秷</el-button>
+        <el-button type="primary" class="btn submit" @click="handleUser"
+          >纭畾</el-button
+        >
+      </div>
+    </footer>
+  </div>
+</template>
+<script>
+import { getTypeList } from "@/utils/helper";
+export default {
+  data() {
+    const validateNickname = (rule, value, callback) => {
+      if (!value) {
+        callback(new Error("璇峰~鍐欓儴闂ㄥ悕绉�"));
+      } else {
+        callback();
+      }
+    };
+    const validatePass = (rule, value, callback) => {
+      if (!value) {
+        callback();
+      } else {
+        callback();
+      }
+    };
+    const validatePhone = (rule, value, callback) => {
+      if (!value) {
+        callback();
+      } else {
+        callback();
+      }
+    };
+    return {
+      depart: {
+        departName: "",
+        parentId: "",
+        departType: "",
+        departDes: "",
+      },
+      createDepartRules: {
+        departName: [
+          { required: true, trigger: "blur", validator: validateNickname },
+        ],
+        parentId: [
+          { required: false, trigger: "blur", validator: validatePass },
+        ],
+        departType: [
+          { required: false, trigger: "blur", validator: validatePhone },
+        ],
+        departDes: [{ required: false, trigger: "blur" }],
+      },
+      userList: [],
+      departList: [],
+      checkedUser: [],
+      checkedList: [],
+      openUser: false,
+      departTypeList: [],
+      selectOrg: {
+        orgsid: [],
+      },
+      mylabel: "",
+      defaultProps: {
+        children: "children",
+        label: "departName",
+      },
+    };
+  },
+  created() {
+    const that = this;
+    // 鑾峰彇閮ㄩ棬鏍戝舰缁撴瀯鍥�
+    this.getDepartTree();
+    // 鑾峰彇鐢ㄦ埛鍒楄〃
+    this.getUserList();
+    // 鑾峰彇閮ㄩ棬绫诲瀷鍒楄〃
+    this.getDepartTypeList();
+  },
+  methods: {
+    handleUser() {
+      this.$refs.user.validate((valid) => {
+        if (valid) {
+          const { depart, checkedList, selectOrg } = this;
+          const arr = [];
+          checkedList.forEach((item) => {
+            arr.push({ leader: item.leader, userId: item.id });
+          });
+          console.log(arr);
+          this.$axios({
+            method: "post",
+            url: "/sccg/depart/create",
+            data: {
+              departName: depart.departName,
+              parentId: selectOrg.orgsid[0],
+              departType: depart.departType,
+              departDes: depart.departDes,
+              departManagerList: arr,
+            },
+          }).then((res) => {
+            if (res.code === 200) {
+              this.$message({
+                message: res.message,
+                type: "success",
+              });
+              this.refresh();
+            } else if (res.code === 2001) {
+              this.$message({
+                message: res.message,
+                type: "error",
+              });
+              this.refresh();
+            }
+          });
+        } else {
+          return false;
+        }
+      });
+    },
+    // 鑾峰彇閮ㄩ棬鏍戝舰缁撴瀯鍥�
+    getDepartTree() {
+      this.$axios({
+        method: "get",
+        url: "sccg/depart/tree",
+      }).then((res) => {
+        // console.log(res);
+        // res.data.unshift({ id: 0, departName: "椤剁骇鑿滃崟" });
+        this.departList = res.data;
+      });
+    },
+    // 鑾峰彇鎵�鏈夌敤鎴蜂俊鎭�
+    getUserList() {
+      // 鑾峰彇鎵�鏈夌敤鎴蜂俊鎭�佺敤鎴锋煡璇�(鏆傛椂鏀寔鐢佃瘽鍙风爜)
+      this.$axios.get(`/sccg/depart/query_surplus_user`).then((res) => {
+        if (res.code === 200) {
+          this.userList = res.data;
+        }
+      });
+    },
+    addUser() {
+      console.log(this.checkedUser);
+      console.log(this.userList);
+      this.checkedList = [];
+      this.userList.forEach((item) => {
+        this.checkedUser.forEach((child) => {
+          if (item.id == child) {
+            this.checkedList.push({
+              id: item.id,
+              username: item.username,
+              leader: false,
+            });
+          }
+        });
+      });
+      this.checkedList[0].leader = true;
+      this.openUser = false;
+    },
+    handleClose() {
+      this.$emit("changMyDialog", { flag: false });
+    },
+    // 鑾峰彇閮ㄩ棬绫诲瀷
+    async getDepartTypeList() {
+      this.departTypeList = await getTypeList(1, "08");
+    },
+    handleCheck(data, checked) {
+      this.depart.parentId = data.departName;
+      // 鑾峰彇褰撳墠閫夋嫨鐨刬d鍦ㄦ暟缁勪腑鐨勭储寮�
+      const indexs = this.selectOrg.orgsid.indexOf(data.id);
+      // 濡傛灉涓嶅瓨鍦ㄦ暟缁勪腑锛屽苟涓旀暟缁勪腑宸茬粡鏈変竴涓猧d骞朵笖checked涓簍rue鐨勬椂鍊欙紝浠h〃涓嶈兘鍐嶆閫夋嫨銆�
+      if (indexs < 0 && this.selectOrg.orgsid.length === 1 && checked) {
+        this.$message({
+          message: "鍙兘閫夋嫨涓�涓儴闂紒",
+          type: "warning",
+          showClose: true,
+        });
+        // 璁剧疆宸查�夋嫨鐨勮妭鐐逛负false 寰堥噸瑕�
+        this.$refs.tree.setChecked(data, false);
+      } else if (this.selectOrg.orgsid.length === 0 && checked) {
+        // 鍙戠幇鏁扮粍涓虹┖ 骞朵笖鏄凡閫夋嫨
+        // 闃叉鏁扮粍鏈夊�硷紝棣栧厛娓呯┖锛屽啀push
+        this.selectOrg.orgsid = [];
+        this.selectOrg.orgsid.push(data.id);
+      } else if (
+        indexs >= 0 &&
+        this.selectOrg.orgsid.length === 1 &&
+        !checked
+      ) {
+        // 鍐嶆鐩存帴杩涜璧嬪�间负绌烘搷浣�
+        this.selectOrg.orgsid = [];
+        this.depart.parentId = "";
+      }
+    },
+    // 璁剧疆棰嗗
+    setLeader(idx) {
+      this.checkedList.forEach((item, index) => {
+        item.leader = index === idx;
+      });
+    },
+  },
+  props: ["refresh", "changMyDialog"],
+};
+</script>
+<style lang="scss" scoped>
+.createUser {
+  border-radius: 1px;
+  background-color: #09152f;
+
+  main {
+    text-align: left;
+    padding: 0 55px;
+    background-color: #09152f;
+    padding-bottom: 50px;
+
+    .mainContent {
+      display: flex;
+      justify-content: center;
+      padding-top: 50px;
+
+      &::v-deep .el-form-item__label {
+        color: #4b9bb7;
+      }
+
+      &::v-deep .el-input__inner {
+        background-color: #09152f;
+        border: 1px solid #17324c;
+      }
+
+      &::v-deep .el-textarea__inner {
+        background-color: #09152f;
+        border: 1px solid #17324c;
+      }
+
+      .addPerson {
+        display: flex;
+        list-style: none;
+        padding: 0;
+        flex-wrap: wrap;
+        max-width: 280px;
+        li {
+          color: #fff;
+          text-align: center;
+          font-size: 30px;
+          margin-left: 10px;
+        }
+      }
+      .li-icon {
+        background-color: #cccccc;
+        width: 36px;
+        height: 36px;
+        border-radius: 50%;
+        margin: 0 auto;
+      }
+      .li-btn {
+        background-color: #cccccc;
+        width: 36px;
+        height: 36px;
+        border-radius: 50%;
+      }
+      .el-form-item__content {
+        width: 400px;
+
+        .el-select {
+          width: 100%;
+        }
+      }
+
+      .optionHandleSp {
+        display: flex;
+
+        .areaNumber,
+        .moreNumber {
+          flex: 1;
+        }
+
+        .telNumber {
+          flex: 2;
+        }
+      }
+    }
+
+    .add {
+      position: relative;
+
+      .card {
+        position: absolute;
+        z-index: 2000;
+        right: 0;
+
+        .box-card {
+          min-height: 240px;
+          max-height: 260px;
+          overflow: hidden;
+          background-color: #09152f;
+          position: relative;
+          max-width: 220px;
+
+          .scrollWrap {
+            overflow: scroll;
+            height: 180px;
+            position: relative;
+            color: #4b9bb7;
+
+            .el-checkbox-group {
+              display: flex;
+              flex-direction: column;
+
+              .el-checkbox {
+                line-height: 20px;
+              }
+            }
+          }
+
+          .myclear {
+            width: 100%;
+            line-height: 20px;
+            color: #4b9bb7;
+            display: flex;
+            justify-content: space-between;
+          }
+
+          .hidebar {
+            position: absolute;
+            top: 77px;
+            right: 20px;
+            width: 20px;
+            height: 180px;
+            background-color: #09152f;
+          }
+
+          .item {
+            line-height: 40px;
+          }
+        }
+      }
+    }
+  }
+
+  .li-item {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .leader {
+    color: red;
+  }
+  .el-input {
+    width: 280px !important;
+  }
+  footer {
+    border-top: 1px solid #fff;
+    height: 80px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding-right: 20px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/operate/video/detailInterface/index.vue b/src/views/operate/video/detailInterface/index.vue
new file mode 100644
index 0000000..b0ea2f9
--- /dev/null
+++ b/src/views/operate/video/detailInterface/index.vue
@@ -0,0 +1,303 @@
+<template>
+  <div class="updateUser">
+    <main>
+      <div class="mainContent">
+        <el-form ref="user" style="width: 100%;">
+          <el-form-item prop="code" label="鎵�灞炰簨浠剁紪鍙�" >
+            <el-input v-model="imagedata.code"></el-input>
+          </el-form-item>
+          <el-form-item prop="code" label="澶х被鍚嶇О" >
+            <el-input v-model="imagedata.questionType"></el-input>
+          </el-form-item>
+          <el-form-item prop="code" label="灏忕被鍚嶇О" >
+            <el-input v-model="imagedata.bigType"></el-input>
+          </el-form-item>
+          <el-form-item prop="code" label="瑙嗛Id" >
+            <el-input v-model="imagedata.videoId"></el-input>
+          </el-form-item>
+          <el-form-item prop="code" label="涓婁紶鏃堕棿" >
+            <el-input v-model="imagedata.uploadTime"></el-input>
+          </el-form-item>
+          <!-- <el-form-item v-if="updateFlag"> -->
+          <!-- </el-form-item> -->
+        </el-form>
+      </div>
+    </main>
+  </div>
+</template>
+<script>
+import { getTypeList } from "@/utils/helper";
+export default {
+  data() {
+
+    return {
+
+      imagedata: {
+        code: "SJ202211010001",
+        questionType: "杩濊",
+        bigType: "杩濆弽鍥藉鏈夊叧鏍囧噯缂栧埗鍩庝埂瑙勫垝",
+        smallType: "鍦ㄥ眳姘戜綇瀹呮ゼ銆佹湭閰嶅璁剧珛涓撶敤鐑熼亾鐨勫晢浣忕患鍚堟ゼ銆佸晢浣忕患鍚堟ゼ鍐呬笌灞呬綇灞傜浉閭荤殑鍟嗕笟妤煎眰鍐呮柊寤恒�佹敼寤恒�佹墿寤轰骇鐢熸补鐑熴�佸紓鍛炽�佸簾姘旂殑椁愰ギ鏈嶅姟椤圭洰",
+        videoId: "1",
+        uploadTime: "2022-10-31 20:20:01"
+      },
+    }
+  },
+  created() {
+    // const that = this;
+    // this.user = JSON.parse(JSON.stringify(that.userInfo));
+    // console.log(this.user);
+    // this.user.parentId = this.user.parentId === 0 ? '鏆傛棤涓婄骇閮ㄩ棬' : this.user.parentId;
+    // this.checkedList = this.user.userInfoDTOS;
+    // this.checkedList.forEach((e) => {
+    //   this.checkedUser.push(e.userId);
+    // });
+    // console.log(this.checkedUser)
+    // this.$axios({
+    //   method: "get",
+    //   url: "sccg/depart/tree",
+    // }).then((res) => {
+    //   that.departList = res.data;
+    // });
+    // this.getUserList(this.user.id);
+    // // 鑾峰彇閮ㄩ棬绫诲瀷
+    // this.getDepartType();
+  },
+  methods: {
+    //   handleUser() {
+    //     this.$refs["user"].validate((valid) => {
+    //       if (valid) {
+    //         const { user, checkedList } = this;
+    //         const arr = [];
+    //         checkedList.forEach((item) => {
+    //           arr.push({ leader: item.leader, userId: item.id ? item.id : item.userId });
+    //         });
+    //         if (arr.length === 0) {
+    //           this.$message({
+    //             type: 'warning',
+    //             message: '璇烽�夋嫨閮ㄩ棬浜哄憳',
+    //           })
+    //         } else {
+    //           this.$axios
+    //             .post("sccg/depart/update", {
+    //               id: user.id,
+    //               departName: user.departName,
+    //               parentId: user.parentId === '鏆傛棤涓婄骇閮ㄩ棬' ? 0 : user.parentId,
+    //               departDes: user.departDes,
+    //               departManagerList: arr,
+    //             })
+    //             .then((res) => {
+    //               this.$message({
+    //                 message: res.message,
+    //                 type: res.code === 200 ? "success" : "warning",
+    //               });
+    //               this.$emit("changeDialog", { flag: false });
+    //               this.getDepartList();
+    //             });
+    //         }
+    //       } else {
+    //         return false;
+    //       }
+    //     });
+    //   },
+    //   // 鑾峰彇閮ㄩ棬绫诲瀷
+    //   async getDepartType() {
+    //     this.typeList = await getTypeList(1, "08");
+    //   },
+
+    //   // 璁剧疆棰嗗
+    //   setLeader(idx) {
+    //     if (this.updateFlag) {
+    //       this.checkedList.forEach((item, index) => {
+    //         item.leader = index === idx;
+    //       });
+    //     }
+    //   },
+
+    //   // 鑾峰彇鎵�鏈夌敤鎴蜂俊鎭�
+    //   getUserList(id) {
+    //     // 鑾峰彇鎵�鏈夌敤鎴蜂俊鎭�佺敤鎴锋煡璇�(鏆傛椂鏀寔鐢佃瘽鍙风爜)
+    //     this.$axios.get(`/sccg/depart/query_surplus_exist_user?id=`+id).then((res) => {
+    //       if (res.code === 200) {
+    //         this.userList = res.data;
+    //       }
+    //     });
+    //   },
+    //   addUser() {
+    //     this.checkedList = [];
+    //     this.userList.forEach((item) => {
+    //       this.checkedUser.forEach((child) => {
+    //         if (item.id == child) {
+    //           this.checkedList.push({
+    //             id: item.id,
+    //             username: item.username,
+    //             leader: false,
+    //           });
+    //         }
+    //       });
+    //     });
+    //     this.checkedList[0].leader = true;
+    //     console.log(this.checkedList);
+    //     this.openUser = false;
+    //   },
+    // },
+    // props: ["userInfo", "updateFlag", "getDepartList", "changeDialog"],
+  },
+  props:['updateFlag']
+};
+</script>
+<style lang="scss" scoped>
+.updateUser {
+  border-radius: 1px;
+  background-color: #09152f;
+
+  main {
+    // border: 1px solid #fff;
+    text-align: left;
+    padding: 0 55px;
+    background-color: #09152f;
+    padding-bottom: 50px;
+
+    // .mainTitle {
+    //     color: #4b9bb7;
+    //     font-weight: 600;
+    //     line-height: 100px;
+    //     font-size: 14px;
+    // }
+
+    .mainContent {
+      display: flex;
+      justify-content: center;
+      padding-top: 50px;
+
+      .el-form-item__content {
+        width: 400px;
+
+        .el-select {
+          width: 100%;
+        }
+      }
+
+      .optionHandleSp {
+        display: flex;
+
+        .areaNumber,
+        .moreNumber {
+          flex: 1;
+        }
+
+        .telNumber {
+          flex: 2;
+        }
+      }
+
+      .optionBtn {
+        display: flex;
+        margin-top: 20px;
+        justify-content: center;
+        .btn {
+          padding: 12px 50px;
+        }
+      }
+    }
+  }
+}
+
+.updateUser::v-deep .el-form-item__label {
+  color: #4b9bb7;
+}
+
+.updateUser::v-deep .el-input__inner {
+  background-color: #09152f;
+  border: 1px solid #17324c;
+}
+
+.addPerson {
+  display: flex;
+  list-style: none;
+  padding: 0;
+  flex-wrap: wrap;
+  max-width: 280px;
+
+  li {
+    color: #fff;
+    text-align: center;
+    font-size: 30px;
+    margin-left: 10px;
+  }
+}
+
+.li-icon {
+  background-color: #cccccc;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  margin: 0 auto;
+}
+
+.li-btn {
+  background-color: #cccccc;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+}
+
+.card {
+  position: absolute;
+  z-index: 2000;
+  right: 0;
+
+  .box-card {
+    min-height: 240px;
+    max-height: 260px;
+    overflow: hidden;
+    background-color: #09152f;
+    position: relative;
+    max-width: 220px;
+
+    .scrollWrap {
+      overflow: scroll;
+      height: 180px;
+      position: relative;
+      color: #4b9bb7;
+
+      .el-checkbox-group {
+        display: flex;
+        flex-direction: column;
+
+        .el-checkbox {
+          line-height: 20px;
+        }
+      }
+    }
+
+    .myclear {
+      width: 100%;
+      line-height: 20px;
+      color: #4b9bb7;
+      display: flex;
+      justify-content: space-between;
+    }
+
+    .hidebar {
+      position: absolute;
+      top: 77px;
+      right: 20px;
+      width: 20px;
+      height: 180px;
+      background-color: #09152f;
+    }
+
+    .item {
+      line-height: 40px;
+    }
+  }
+}
+
+.leader {
+  color: red;
+}
+
+.el-input {
+  width: 280px !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/operate/video/index.vue b/src/views/operate/video/index.vue
index 011fa59..f0e044e 100644
--- a/src/views/operate/video/index.vue
+++ b/src/views/operate/video/index.vue
@@ -1,296 +1,690 @@
 <template>
-    <div class="otherInterface">
-        <header>
-            <div class="headerTitle">杩愯惀绠$悊 >> 瑙嗛绠$悊</div>
-        </header>
-        <main>
-            <div class="mainHeader">
-                <div class="add">
-                    <el-button type="primary" icon="el-icon-plus">鏂板浠诲姟</el-button>
-                </div>
-                <div class="date-search">
-                    <span>鎸夊ぉ鏌ヨ:</span>
-                    <div class="mydate">
-                        <el-input placeholder="璇疯緭鍏ュ紑濮嬫椂闂�"></el-input>
-                        <div class="line">
-                            鈥斺�斺�� 鈥斺�斺��
-                        </div>
-                        <el-input placeholder="璇疯緭鍏ョ粨鏉熸椂闂�"></el-input>
-                    </div>
-                </div>
-                <div class="search">
-                    <el-input placeholder="璇疯緭鍏ユ爣棰樻垨鑰呬换鍔$紪鍙�"></el-input>
-                </div>
-                <div class="btn">
-                    <el-button icon="el-icon-plus" type="primary">鎼滅储</el-button>
-                    <el-button icon="el-icon-delete">閲嶇疆</el-button>
-                </div>
+  <div class="userList">
+    <header>
+      <div class="headerContent">
+        <div class="search">
+          <span>绫诲瀷鏌ヨ:</span>
+          <div class="option">
+            <el-input
+              v-model="info.type"
+              placeholder="璇疯緭鍏ラ棶棰樼被鍨嬫煡璇�"
+            ></el-input>
+          </div>
+          <span>涓婁紶鏃堕棿:</span>
+          <div class="option">
+            <el-input
+              v-model="info.startTime"
+              placeholder="閫夋嫨涓婁紶鏃堕棿"
+            ></el-input>
+          </div>
+          <div class="findBtn">
+            <el-button type="primary" @click="handleView(scope.row)">鏌ヨ</el-button>
+          </div>
+          <div class="findBtn">
+            <el-button type="primary" @click="addVideo">娣诲姞瑙嗛</el-button>
+          </div>
+        </div>
+      </div>
+    </header>
+    <main>
+      <div class="mainContent">
+        <div class="type-nav">
+          <div
+            @click="changeTypeChecked(index)"
+            v-for="(item, index) in typeList"
+            :key="item.name"
+            :class="[item.checked ? 'is-active' : '', 'type-item']"
+          >
+            {{ item.name }}
+          </div>
+        </div>
+        <!-- 鏁版嵁灞曠ず -->
+        <el-table
+          ref="multipleTable"
+          :header-cell-style="{
+            background: '#06122c',
+            'font-size': '12px',
+            color: '#4b9bb7',
+            'font-weight': '650',
+            'line-height': '45px',
+          }"
+          :data="tableData"
+          style="width: 100%"
+          :row-class-name="tableRowClassName"
+          @selection-change="tableChange"
+        >
+          <el-table-column type="selection" min-width="5"> </el-table-column>
+          <el-table-column prop="code" label="鎵�灞炰簨浠剁紪鍙�" min-width="18">
+          </el-table-column>
+          <el-table-column prop="questionType" label="闂绫诲瀷" min-width="8">
+          </el-table-column>
+          <el-table-column prop="bigType" label="澶х被鍚嶇О" min-width="8">
+          </el-table-column>
+          <el-table-column prop="smallType" label="灏忕被鍚嶇О" min-width="8">
+          </el-table-column>
+          <el-table-column prop="videoId" label="瑙嗛Id" min-width="8">
+          </el-table-column>
+          <el-table-column
+            prop="uploadTime"
+            label="涓婁紶鏃堕棿"
+            min-width="15"
+            v-if="mystatus === 1"
+          >
+          </el-table-column>
+          <el-table-column prop="operation" label="鎿嶄綔" min-width="15">
+            <template slot-scope="scope">
+              <div class="operation">
+                <span @click="handleFind(scope.row)">鏌ョ湅</span>
+                <span class="line">|</span>
+                <span @click="handleUpdate(scope.row)">淇敼</span>
+                <span class="line">|</span>
+                <span @click="handleDelete(scope.row)">鍒犻櫎</span>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+        <!-- 璇︽儏椤靛睍绀� -->
+        <el-dialog
+          :visible.sync="dialogView"
+          width="80%"
+          title="鍩虹淇℃伅(浜哄伐)"
+          v-if="dialogView"
+          :before-close="handleClose"
+        >
+          <MyDetail :info="info" v-if="mystatus == 1 ? true : false"></MyDetail>
+          <MyIllDetail :info="info" v-else></MyIllDetail>
+        </el-dialog>
+        <!-- 涓婁紶椤甸潰 -->
+        <!-- <el-dialog :visible.sync="dialogUpload" width="80%" title="涓婁紶澶勭疆缁撴灉" v-if="dialogUpload"
+                    :before-close="handleClose"> -->
+        <!-- <uploadVio v-if="mystatus === 1" :caseId="caseId" :mycode="caseCode"  @closeDialog="closeDialog"></uploadVio>
+                    <uploadIll v-else :caseId="caseId" :mycode="caseCode" @closeDialog="closeDialog"></uploadIll> -->
+        <!-- </el-dialog> -->
+        <!-- tools -->
+        <!-- 鏌ョ湅淇敼椤甸潰 -->
+        <el-dialog
+          :visible.sync="dialogUpdate"
+          width="40%"
+          title="淇敼"
+          v-if="dialogUpdate"
+          :before-close="handleClose"
+        >
+          <updateInterface />
+          <!-- :updateFlag="updateFlag"
+            :userInfo="userInfo"
+            :getDepartList="context === '' ? getUserList : search"
+            @changeDialog="changMyDialog" -->
+        </el-dialog>
+        <el-dialog
+          :visible.sync="dialogcheck"
+          width="40%"
+          title="鏌ョ湅"
+          v-if="dialogcheck"
+          :before-close="handleClose"
+        >
+          <detailInterface />
+          <!-- :updateFlag="updateFlag"
+            :userInfo="userInfo"
+            :getDepartList="context === '' ? getUserList : search"
+            @changeDialog="changMyDialog" -->
+        </el-dialog>
+
+        <el-dialog
+          :visible.sync="dialogAdd"
+          width="40%"
+          title="娣诲姞"
+          v-if="dialogAdd"
+          :before-close="handleClose"
+        >
+          <createInterface />
+          <!-- :updateFlag="updateFlag"
+            :userInfo="userInfo"
+            :getDepartList="context === '' ? getUserList : search"
+            @changeDialog="changMyDialog" -->
+        </el-dialog>
+
+        <div class="tools">
+          <div class="funs">
+            <div class="funsItem funs-sp">
+              <el-checkbox v-model="all" @change="selectAll()"
+                >鍏ㄩ��</el-checkbox
+              >
             </div>
-            <div class="mainContent">
-                <!-- @selection-change="handleSelectionChange" -->
-                <!-- 鏁版嵁娓叉煋 -->
-                <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
-                    :header-cell-style="{background:'#06122c','font-size':'12px',color:'#4b9bb7','font-weight':'650','line-height':'45px'}"
-                    :row-class-name="tableRowClassName">
-                    <el-table-column type="selection" width="55">
-                    </el-table-column>
-                    <el-table-column label="浠诲姟缂栧彿" prop="applicationName" min-width="10">
-                    </el-table-column>
-                    <el-table-column prop="applicationType" label="鏍囬" min-width="10">
-                    </el-table-column>
-                    <el-table-column prop="websiteUrl" label="绫诲瀷" min-width="10">
-                    </el-table-column>
-                    <el-table-column prop="applicationType" label="绾у埆" min-width="10">
-                    </el-table-column>
-                    <el-table-column prop="applicationType" label="琛楅亾" min-width="10">
-                    </el-table-column>
-                    <el-table-column prop="applicationType" label="绀惧尯" min-width="10">
-                    </el-table-column>
-                    <el-table-column prop="applicationType" label="寮�濮嬫椂闂�" min-width="10">
-                    </el-table-column>
-                    <el-table-column prop="applicationType" label="缁撴潫鏃堕棿" min-width="10">
-                    </el-table-column>
-                    <el-table-column prop="applicationType" label="浠诲姟鎻忚堪" min-width="10">
-                    </el-table-column>
-                    <el-table-column prop="applicationType" label="鐘舵��" min-width="10">
-                    </el-table-column>
-                    <el-table-column label="鎿嶄綔" min-width="10">
-                        <template slot-scope="scope">
-                            <span @click="handleView(scope.row)">缂栬緫</span>
-                            <span class="line">|</span>
-                            <span @click="handleDelete(scope.row)">鏌ョ湅</span>
-                        </template>
-                    </el-table-column>
-                </el-table>
-                <!-- 鍒嗛〉 -->
-                <!-- <div class="pagination">
-                    <el-pagination background :current-page="currentPage" layout="prev, pager, next" :total="totalNum"
-                        :page-size="pageSize" @current-change="changeCurrentPage" @prev-click="handlePrev"
-                        @next-click="handleNext">
-                    </el-pagination>
-                </div> -->
+            <div class="funsItem funs-sp">
+              <el-checkbox v-model="unsame" @change="disSame(tableData)"
+                >鍙嶉��</el-checkbox
+              >
             </div>
-        </main>
-        <footer>
-            <!-- 鍒涘缓寮圭獥 -->
-            <el-dialog :visible.sync="dialogCreate" title="鏂板绗笁鏂规帴鍙�" width="45%" v-if="dialogCreate"
-                :before-close="handleClose">
-                <createInterface />
-            </el-dialog>
-            <!-- 鏌ョ湅寮圭獥 -->
-            <el-dialog :visible.sync="dialogUpdate" :title="updateFlag ?'淇敼绗笁鏂规帴鍙�':'鏌ョ湅绗笁鏂规帴鍙�'" width="45%"
-                v-if="dialogUpdate" :before-close="handleClose">
-                <viewInterface :updateFlag="updateFlag" :userInfo=userInfo />
-            </el-dialog>
-        </footer>
-    </div>
+            <div class="funsItem">
+              <el-select
+                v-model="myIdx"
+                placeholder="鎵归噺鎿嶄綔"
+                @change="selectChange"
+                disabled
+              >
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                  :disabled="item.disabled"
+                >
+                </el-option>
+              </el-select>
+            </div>
+          </div>
+          <div class="pagination">
+            <el-pagination
+              background
+              :current-page="currentPage"
+              layout="prev, pager, next"
+              :total="totalNum"
+              :page-size="pageSize"
+              @current-change="changeCurrentPage"
+              @prev-click="handlePrev"
+              @next-click="handleNext"
+            >
+            </el-pagination>
+          </div>
+        </div>
+      </div>
+    </main>
+  </div>
 </template>
 <script>
-// import createInterface from './components/createInterface';
-// import viewInterface from './components/viewInterface'
+import createInterface from "./createInterface";
+import updateInterface from "./updateInterface";
+import detailInterface from "./detailInterface";
 export default {
-    components: {
-        // createInterface, viewInterface
+  components: {
+    createInterface,
+    updateInterface,
+    detailInterface
+  },
+  data() {
+    return {
+      dialogUpdate: false,
+      dialogcheck: false,
+      tableData: [
+        {
+          code: "SJ202211010001",
+          questionType: "杩濊",
+          bigType: "杩濆弽鍥藉鏈夊叧鏍囧噯缂栧埗鍩庝埂瑙勫垝",
+          smallType:
+            "鍦ㄥ眳姘戜綇瀹呮ゼ銆佹湭閰嶅璁剧珛涓撶敤鐑熼亾鐨勫晢浣忕患鍚堟ゼ銆佸晢浣忕患鍚堟ゼ鍐呬笌灞呬綇灞傜浉閭荤殑鍟嗕笟妤煎眰鍐呮柊寤恒�佹敼寤恒�佹墿寤轰骇鐢熸补鐑熴�佸紓鍛炽�佸簾姘旂殑椁愰ギ鏈嶅姟椤圭洰",
+          videoId: "1",
+          uploadTime: "2022-10-31 20:20:01",
+        },
+        {
+          code: "SJ202211010001",
+          questionType: "杩濊",
+          bigType: "杩濆弽鍥藉鏈夊叧鏍囧噯缂栧埗鍩庝埂瑙勫垝",
+          smallType:
+            "鍦ㄥ眳姘戜綇瀹呮ゼ銆佹湭閰嶅璁剧珛涓撶敤鐑熼亾鐨勫晢浣忕患鍚堟ゼ銆佸晢浣忕患鍚堟ゼ鍐呬笌灞呬綇灞傜浉閭荤殑鍟嗕笟妤煎眰鍐呮柊寤恒�佹敼寤恒�佹墿寤轰骇鐢熸补鐑熴�佸紓鍛炽�佸簾姘旂殑椁愰ギ鏈嶅姟椤圭洰",
+          videoId: "1",
+          uploadTime: "2022-10-31 20:20:01",
+        },
+        {
+          code: "SJ202211010001",
+          questionType: "杩濊",
+          bigType: "杩濆弽鍥藉鏈夊叧鏍囧噯缂栧埗鍩庝埂瑙勫垝",
+          smallType:
+            "鍦ㄥ眳姘戜綇瀹呮ゼ銆佹湭閰嶅璁剧珛涓撶敤鐑熼亾鐨勫晢浣忕患鍚堟ゼ銆佸晢浣忕患鍚堟ゼ鍐呬笌灞呬綇灞傜浉閭荤殑鍟嗕笟妤煎眰鍐呮柊寤恒�佹敼寤恒�佹墿寤轰骇鐢熸补鐑熴�佸紓鍛炽�佸簾姘旂殑椁愰ギ鏈嶅姟椤圭洰",
+          videoId: "1",
+          uploadTime: "2022-10-31 20:20:01",
+        },
+        {
+          code: "SJ202211010001",
+          questionType: "杩濊",
+          bigType: "杩濆弽鍥藉鏈夊叧鏍囧噯缂栧埗鍩庝埂瑙勫垝",
+          smallType:
+            "鍦ㄥ眳姘戜綇瀹呮ゼ銆佹湭閰嶅璁剧珛涓撶敤鐑熼亾鐨勫晢浣忕患鍚堟ゼ銆佸晢浣忕患鍚堟ゼ鍐呬笌灞呬綇灞傜浉閭荤殑鍟嗕笟妤煎眰鍐呮柊寤恒�佹敼寤恒�佹墿寤轰骇鐢熸补鐑熴�佸紓鍛炽�佸簾姘旂殑椁愰ギ鏈嶅姟椤圭洰",
+          videoId: "1",
+          uploadTime: "2022-10-31 20:20:01",
+        },
+      ],
+      context: "",
+      dialogUpload: false,
+      // dialogUpdate: false,
+      dialogView: false,
+      updateFlag: false,
+      userInfo: {},
+      info: {},
+      totalNum: 5,
+      pageSize: 10,
+      currentPage: 1,
+      all: false,
+      unsame: false,
+      myIdx: 0,
+      preMyIdx: 0,
+      options: [
+        {
+          value: 0,
+          label: "鎵归噺鎿嶄綔",
+          disabled: true,
+        },
+        {
+          value: 1,
+          label: "鎵归噺鍚敤",
+        },
+        {
+          value: 2,
+          label: "鎵归噺绂佺敤",
+        },
+        {
+          value: 3,
+          label: "鎵归噺鍒犻櫎",
+        },
+      ],
+      tempList: [],
+      typeList: [
+        {
+          name: "鎽勫儚澶存帹閫�",
+          value: 1,
+          checked: true,
+        },
+        {
+          name: "鍗曞叺鎺ㄩ��",
+          value: 2,
+          checked: false,
+        },
+      ],
+      statusArr: [],
+      mystatus: 1,
+      caseId: "",
+      caseCode: null,
+      dialogAdd: false,
+    };
+  },
+  created() {
+    this.statusArr[0] = 6;
+    this.typeList.forEach((item) => {
+      if (item.checked) {
+        this.statusArr[1] = item.value;
+      }
+    });
+    this.getUserList();
+  },
+  methods: {
+    //淇敼
+    handleUpdate() {
+      this.dialogUpdate = true;
     },
-    data() {
-        return {
-            tableData: [],
-            search: "",
-            dialogCreate: false,
-            dialogUpdate: false,
-            updateFlag: false,
-            userInfo: '',
-            date:'',
-            // totalNum: 200,
-            // pageSize: 10,
-            // currentPage: 1,
-        }
+    // 鏌ョ湅
+    handleFind(data) {
+      console.log(data);
+      this.userInfo = data;
+      this.dialogcheck = true;
     },
-    created() {
+    // 椤堕儴涓嬫媺妗�
+    setMystatus(value) {
+      console.log(value);
+      this.statusArr[1] = value;
+      this.changeTypeChecked(value - 1);
+      this.getUserList();
+    },
+    // 鎵归噺鍒犻櫎
+    mulDelete(idArr) {
+      console.log(idArr);
+      this.$axios({
+        method: "delete",
+        url: "sccg/violations/batch_delete?ids=" + idArr,
+      }).then((res) => {
         this.getUserList();
+        this.$message({
+          message: res.message,
+          type: res.code === 200 ? "success" : "warning",
+        });
+      });
     },
-    methods: {
-        // 鑾峰彇鎺ュ彛鍒楄〃
-        getUserList() {
-            const that = this;
-            // const { currentPage, pageSize, search } = this;
-            this.dialogCreate = false;
-            this.$axios.get("sccg/system/portal/thirdApp/search").then(res => {
-                const { code, data } = res;
-                if (code == 200) {
-                    this.tableData = data;
-                }
-            })
-        },
-        // 璁剧疆琛ㄦ牸鏂戦┈绾�
-        tableRowClassName({ row, rowIndex }) {
-            if ((rowIndex + 1) % 2 == 0) {
-                return 'warning-row';
-            } else {
-                return 'success-row';
-            }
-            return '';
-        },
-        // 鎵撳紑鏂板鐣岄潰
-        handleAdd() {
-            this.dialogCreate = true;
-        },
-        // 鍒涘缓寮圭獥鍏抽棴
-        handleClose(done) {
-            const that = this;
-            this.$confirm('纭鍏抽棴锛�')
-                .then(_ => {
-                    that.dialogCreate = false;
-                    done();
-                })
-                .catch(_ => { });
-        },
-        // 鍒涘缓鏌ョ湅寮圭獥
-        handleView(rowData) {
-            this.userInfo = rowData;
-            this.dialogUpdate = true;
-        },
-        // 鍒犻櫎绗笁鏂规帴鍙�
-        handleDelete({ id }) {
-            console.log(id);
-            this.$axios.delete('sccg/system/portal/thirdApp/delete', {
-                params: {
-                    id
-                }
-            }).then(res => {
-                console.log(res);
-            })
+    // 鎵ц涓嬫媺妗嗘搷浣�
+    selectChange(list) {
+      console.log(this.tempList);
+      if (this.tempList.length !== 0) {
+        if (list === 3) {
+          this.preMyIdx = list;
+          this.mulDelete(this.tempList);
         }
-        // // 褰撳墠椤垫敼鍙樿Е鍙戜簨浠�
-        // changeCurrentPage(page) {
-        //     this.currentPage = page;
-        //     this.getUserList();
-        // },
-        // // 涓婁竴椤电偣鍑讳簨浠�
-        // handlePrev(page) {
-        //     this.currentPage = page;
-        //     this.getUserList();
-        // },
-        // // 涓嬩竴椤电偣鍑讳簨浠�
-        // handleNext(page) {
-        //     this.currentPage = page;
-        //     this.getUserList();
-        // },
-    }
-}
+      } else {
+        this.myIdx = this.preMyIdx;
+        this.$message({
+          type: "warning",
+          message: "鎮ㄨ繕娌¢�変腑浠讳綍鏁版嵁",
+        });
+      }
+    },
+    // 鐩戝惉琛ㄦ牸
+    tableChange(list) {
+      this.tempList = [];
+      list.forEach((item) => {
+        this.tempList.push(item.code);
+      });
+      if (list.length === this.tableData.length) {
+        this.all = true;
+      } else {
+        this.all = false;
+      }
+    },
+    // 鍏ㄩ��
+    selectAll() {
+      this.$refs.multipleTable.toggleAllSelection();
+    },
+    // 鍙嶉��
+    disSame(list) {
+      list.forEach((row) => {
+        this.$refs.multipleTable.toggleRowSelection(row);
+      });
+    },
+    // 鍒犻櫎鍗曟潯鏁版嵁
+    handleDelete({ number }) {
+      console.log(number);
+      this.$confirm("纭鍒犻櫎锛�")
+        .then((_) => {
+          console.log(1);
+          this.$axios({
+            method: "delete",
+            url: `sccg/violations/delete?id=${number}`,
+          }).then((res) => {
+            console.log(res);
+            this.$message({
+              type: res.code === 200 ? "success" : "warning",
+              message: res.message,
+            });
+
+            this.getUserList();
+          });
+        })
+        .catch((_) => {
+          console.log(2);
+        });
+    },
+    // 鑾峰彇鐢ㄦ埛鍒楄〃
+    getUserList() {
+      const { currentPage, pageSize, context, statusArr } = this;
+      console.log(statusArr);
+      // this.$axios({
+      //     method: 'get',
+      //     url: `sccg/base_case/query?state=${statusArr[0]}&current=${currentPage}&size=${pageSize}&resource=2&type=${statusArr[1]}`
+      // }).then(res => {
+      //     this.totalNum = res.data.total;
+      //     this.tableData = res.data.records;
+      //     console.log(res);
+      // })
+    },
+    // 鏇存敼杩濊/杩濆缓
+    changeTypeChecked(idx) {
+      this.typeList.forEach((item, index) => {
+        if (index === idx) {
+          item.checked = true;
+        } else {
+          item.checked = false;
+        }
+      });
+      this.mystatus = idx + 1;
+      console.log(this.mystatus);
+      this.statusArr[1] = this.typeList[idx].value;
+      this.getUserList();
+    },
+    // 璁剧疆琛ㄦ牸鏂戦┈绾�
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 == 0) {
+        return "warning-row";
+      } else {
+        return "success-row";
+      }
+      return "";
+    },
+    // 褰撳墠椤垫敼鍙樿Е鍙戜簨浠�
+    changeCurrentPage(page) {
+      this.currentPage = page;
+      this.getUserList();
+    },
+    // 涓婁竴椤电偣鍑讳簨浠�
+    handlePrev(page) {
+      this.currentPage = page;
+      this.getUserList();
+    },
+    // 涓嬩竴椤电偣鍑讳簨浠�
+    handleNext(page) {
+      this.currentPage = page;
+      this.getUserList();
+    },
+    addVideo() {
+      this.dialogAdd = true;
+    },
+    handleClose(done) {
+      this.$confirm("纭鍏抽棴锛�")
+        .then((_) => {
+          this.dialogUpload = false;
+          // this.dialogUpdate = false;
+          done();
+        })
+        .catch((_) => {});
+    },
+    handleClose(done) {
+      this.$confirm("纭鍏抽棴锛�")
+        .then((_) => {
+          this.dialogUpload = false;
+          // this.dialogUpdate = false;
+          done();
+        })
+        .catch((_) => {});
+    },
+    async JumpView(data) {
+      await this.getEventInfo(data.code);
+    },
+    // 鑾峰彇妗堜欢淇℃伅
+    async getEventInfo(code) {
+      await this.$axios({
+        method: "get",
+        url: `sccg/base_case/baseCaseDetail/${code}`,
+      }).then((res) => {
+        this.info = res.data;
+        this.dialogView = true;
+      });
+    },
+    opernDialog(data) {
+      this.dialogUpload = true;
+      this.caseId = data.id;
+      this.caseCode = data.code;
+      // console.log(data);
+    },
+    // 鍏抽棴涓婁紶鐣岄潰
+    closeDialog({ flag }) {
+      this.dialogUpload = flag;
+      this.getUserList();
+    },
+    // 澶勭悊鏃堕棿
+    filterTime(time) {
+      return helper(time);
+    },
+  },
+};
 </script>
-<!-- sccg/system/portal/thirdApp/search -->
 <style lang="scss" scoped>
-.otherInterface {
-    header {
+.userList {
+  text-align: left;
+  margin: 10px 20px;
+  color: #4b9bb7;
+
+  header {
+    background-color: #09152f;
+    border: 1pox solid #fff;
+
+    .headerContent {
+      padding: 0 40px;
+      display: flex;
+      line-height: 100px;
+      justify-content: space-between;
+      align-items: center;
+
+      .search {
         display: flex;
-        line-height: 60px;
-        justify-content: space-between;
-        padding: 0 20px;
-        color: #4b9bb7;
+        justify-content: flex-start;
 
-        &::v-deep .el-button {
-            background-color: #eb5d01;
-            border: none;
-            color: #fff;
-            border-radius: 20px;
+        span {
+          flex: 1;
         }
-    }
 
-    main {
-        padding: 10px 20px;
+        .el-input {
+          flex: 2;
+          color: #1d3f57;
 
-        .mainHeader {
-            padding-left: 20px;
-            display: flex;
-            line-height: 60px;
-            color: #4b9bb7;
+          &::v-deep .el-input__inner {
             background-color: #09152f;
-            display: flex;
-            .add,.search,.btn{
-                flex:1;
-            }
-            .date-search{
-                flex: 3;
-                display: flex;
-                .mydate{
-                    display: flex;
-                    .line{
-                        margin:0 10px 0 20px;
-                    }
-                }
-            }
-            .el-input {
-                width: 180px;
-                height: 35px;
-                margin-left: 10px;
-
-                &::v-deep .el-input__inner {
-                    background-color: #09152f;
-                    border: 1px solid #17324c;
-                    font-size: 12px;
-                }
-            }
+            border: 1px solid #17324c;
+          }
         }
+      }
 
-        .mainContent {
-            margin-top: 20px;
+      .findBtn {
+        line-height: 100px;
+        margin-left: 15px;
+        display: flex;
+        align-items: center;
+        margin-top: -2px;
 
-            .el-table {
-                color: #4b9bb7;
-
-                &::v-deep .el-table__empty-block {
-                    background-color: #06122c;
-                }
-
-                &::v-deep .el-table__empty-text {
-                    color: #4b9bb7;
-                }
-
-                &::v-deep .warning-row {
-                    background-color: #06122c;
-                }
-
-                &::v-deep .success-row {
-                    background-color: #071f39;
-                }
-            }
-
-            .line {
-                padding: 0 5px;
-                // margin-top: -10px;
-            }
+        .el-button {
+          padding: 12px 25px;
+          border-radius: 20px;
         }
+      }
+
+      .addBtn {
+        background-color: #eb5d01;
+        border: none;
+        border-radius: 20px;
+        padding: 12px 30px;
+      }
+    }
+  }
+
+  &::v-deep .el-input__inner {
+    background-color: #09152f;
+    border: 1px solid #17324c;
+  }
+
+  main {
+    background-color: #09152f;
+    margin-top: 20px;
+    padding-bottom: 50px;
+    border: 1pox solid #fff;
+
+    .btn span:hover {
+      cursor: pointer;
     }
 
-    footer {
+    .type-nav {
+      display: flex;
+      line-height: 40px;
+      margin-left: 30px;
+      padding-top: 10px;
+      margin-bottom: 10px;
 
-        &::v-deep .el-dialog__header,
-        &::v-deep .el-dialog__body {
-            background-color: #06122c;
+      .type-item {
+        width: 80px;
+        text-align: center;
+
+        &:hover {
+          cursor: pointer;
         }
+      }
 
-        &::v-deep .el-dialog__header {
-            display: flex;
-            align-items: center;
-            background-color: #fff;
-            padding: 20px;
-            line-height: 60px;
-        }
+      .is-active {
+        background-color: #070f22;
+        border-radius: 4px;
+        color: #fff;
+      }
+    }
 
-        &::v-deep .el-dialog__title {
+    .tools {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0 20px;
+
+      .funs-sp {
+        border: 1px solid #17324c;
+      }
+
+      .funs {
+        display: flex;
+
+        .funsItem {
+          line-height: 28px;
+          display: flex;
+          align-items: center;
+          border-radius: 4px;
+          font-size: 12px;
+          margin-left: 10px;
+
+          .el-checkbox {
+            width: 80px;
+            padding: 0 10px;
+          }
+
+          .el-select {
+            width: 120px;
+          }
+
+          &:hover {
+            border: 1px solid #4b9bb7;
+          }
+
+          &:hover .el-checkbox {
             color: #4b9bb7;
+          }
         }
+      }
 
-        &::v-deep .el-dialog__close {
-            width: 20px;
-            height: 20px;
-            // color: #fff;
-        }
+      .pagination {
+        margin-top: 50px;
+        display: flex;
+        line-height: 50px;
+        justify-content: center;
 
-        &::v-deep .el-dialog__body {
-            padding: 0;
+        .el-pagination {
+          &::v-deep li,
+          &::v-deep .btn-prev,
+          &::v-deep .btn-next {
+            background-color: #071f39;
+            color: #4b9bb7;
+          }
+
+          &::v-deep .active {
+            background-color: #409eff;
+            color: #fff;
+          }
         }
+      }
     }
+
+    .el-table {
+      color: #4b9bb7;
+      font-size: 10px;
+
+      &::v-deep .cell {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+      }
+
+      .operation {
+        display: flex;
+
+        .line {
+          padding: 0 5px;
+        }
+
+        span:hover {
+          cursor: pointer;
+        }
+      }
+    }
+  }
+
+  .line {
+    padding: 0 5px;
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/operate/video/updateInterface/index.vue b/src/views/operate/video/updateInterface/index.vue
new file mode 100644
index 0000000..a3758a6
--- /dev/null
+++ b/src/views/operate/video/updateInterface/index.vue
@@ -0,0 +1,307 @@
+<template>
+  <div class="updateUser">
+    <main>
+      <div class="mainContent">
+        <el-form ref="user" style="width: 100%;">
+          <el-form-item prop="code" label="鎵�灞炰簨浠剁紪鍙�" >
+            <el-input v-model="imagedata.code"></el-input>
+          </el-form-item>
+          <el-form-item prop="code" label="澶х被鍚嶇О" >
+            <el-input v-model="imagedata.questionType"></el-input>
+          </el-form-item>
+          <el-form-item prop="code" label="灏忕被鍚嶇О" >
+            <el-input v-model="imagedata.bigType"></el-input>
+          </el-form-item>
+          <el-form-item prop="code" label="瑙嗛Id" >
+            <el-input v-model="imagedata.videoId"></el-input>
+          </el-form-item>
+          <el-form-item prop="code" label="涓婁紶鏃堕棿" >
+            <el-input v-model="imagedata.uploadTime"></el-input>
+          </el-form-item>
+          <!-- <el-form-item v-if="updateFlag"> -->
+          <div class="optionBtn">
+            <el-button type="primary" class="btn submit" @click.native.prevent="handleUser">鎻愪氦
+            </el-button>
+          </div>
+          <!-- </el-form-item> -->
+        </el-form>
+      </div>
+    </main>
+  </div>
+</template>
+<script>
+import { getTypeList } from "@/utils/helper";
+export default {
+  data() {
+
+    return {
+
+      imagedata: {
+        code: "SJ202211010001",
+        questionType: "杩濊",
+        bigType: "杩濆弽鍥藉鏈夊叧鏍囧噯缂栧埗鍩庝埂瑙勫垝",
+        smallType: "鍦ㄥ眳姘戜綇瀹呮ゼ銆佹湭閰嶅璁剧珛涓撶敤鐑熼亾鐨勫晢浣忕患鍚堟ゼ銆佸晢浣忕患鍚堟ゼ鍐呬笌灞呬綇灞傜浉閭荤殑鍟嗕笟妤煎眰鍐呮柊寤恒�佹敼寤恒�佹墿寤轰骇鐢熸补鐑熴�佸紓鍛炽�佸簾姘旂殑椁愰ギ鏈嶅姟椤圭洰",
+        videoId: "1",
+        uploadTime: "2022-10-31 20:20:01"
+      },
+    }
+  },
+  created() {
+    // const that = this;
+    // this.user = JSON.parse(JSON.stringify(that.userInfo));
+    // console.log(this.user);
+    // this.user.parentId = this.user.parentId === 0 ? '鏆傛棤涓婄骇閮ㄩ棬' : this.user.parentId;
+    // this.checkedList = this.user.userInfoDTOS;
+    // this.checkedList.forEach((e) => {
+    //   this.checkedUser.push(e.userId);
+    // });
+    // console.log(this.checkedUser)
+    // this.$axios({
+    //   method: "get",
+    //   url: "sccg/depart/tree",
+    // }).then((res) => {
+    //   that.departList = res.data;
+    // });
+    // this.getUserList(this.user.id);
+    // // 鑾峰彇閮ㄩ棬绫诲瀷
+    // this.getDepartType();
+  },
+  methods: {
+    //   handleUser() {
+    //     this.$refs["user"].validate((valid) => {
+    //       if (valid) {
+    //         const { user, checkedList } = this;
+    //         const arr = [];
+    //         checkedList.forEach((item) => {
+    //           arr.push({ leader: item.leader, userId: item.id ? item.id : item.userId });
+    //         });
+    //         if (arr.length === 0) {
+    //           this.$message({
+    //             type: 'warning',
+    //             message: '璇烽�夋嫨閮ㄩ棬浜哄憳',
+    //           })
+    //         } else {
+    //           this.$axios
+    //             .post("sccg/depart/update", {
+    //               id: user.id,
+    //               departName: user.departName,
+    //               parentId: user.parentId === '鏆傛棤涓婄骇閮ㄩ棬' ? 0 : user.parentId,
+    //               departDes: user.departDes,
+    //               departManagerList: arr,
+    //             })
+    //             .then((res) => {
+    //               this.$message({
+    //                 message: res.message,
+    //                 type: res.code === 200 ? "success" : "warning",
+    //               });
+    //               this.$emit("changeDialog", { flag: false });
+    //               this.getDepartList();
+    //             });
+    //         }
+    //       } else {
+    //         return false;
+    //       }
+    //     });
+    //   },
+    //   // 鑾峰彇閮ㄩ棬绫诲瀷
+    //   async getDepartType() {
+    //     this.typeList = await getTypeList(1, "08");
+    //   },
+
+    //   // 璁剧疆棰嗗
+    //   setLeader(idx) {
+    //     if (this.updateFlag) {
+    //       this.checkedList.forEach((item, index) => {
+    //         item.leader = index === idx;
+    //       });
+    //     }
+    //   },
+
+    //   // 鑾峰彇鎵�鏈夌敤鎴蜂俊鎭�
+    //   getUserList(id) {
+    //     // 鑾峰彇鎵�鏈夌敤鎴蜂俊鎭�佺敤鎴锋煡璇�(鏆傛椂鏀寔鐢佃瘽鍙风爜)
+    //     this.$axios.get(`/sccg/depart/query_surplus_exist_user?id=`+id).then((res) => {
+    //       if (res.code === 200) {
+    //         this.userList = res.data;
+    //       }
+    //     });
+    //   },
+    //   addUser() {
+    //     this.checkedList = [];
+    //     this.userList.forEach((item) => {
+    //       this.checkedUser.forEach((child) => {
+    //         if (item.id == child) {
+    //           this.checkedList.push({
+    //             id: item.id,
+    //             username: item.username,
+    //             leader: false,
+    //           });
+    //         }
+    //       });
+    //     });
+    //     this.checkedList[0].leader = true;
+    //     console.log(this.checkedList);
+    //     this.openUser = false;
+    //   },
+    // },
+    // props: ["userInfo", "updateFlag", "getDepartList", "changeDialog"],
+  },
+  props:['updateFlag']
+};
+</script>
+<style lang="scss" scoped>
+.updateUser {
+  border-radius: 1px;
+  background-color: #09152f;
+
+  main {
+    // border: 1px solid #fff;
+    text-align: left;
+    padding: 0 55px;
+    background-color: #09152f;
+    padding-bottom: 50px;
+
+    // .mainTitle {
+    //     color: #4b9bb7;
+    //     font-weight: 600;
+    //     line-height: 100px;
+    //     font-size: 14px;
+    // }
+
+    .mainContent {
+      display: flex;
+      justify-content: center;
+      padding-top: 50px;
+
+      .el-form-item__content {
+        width: 400px;
+
+        .el-select {
+          width: 100%;
+        }
+      }
+
+      .optionHandleSp {
+        display: flex;
+
+        .areaNumber,
+        .moreNumber {
+          flex: 1;
+        }
+
+        .telNumber {
+          flex: 2;
+        }
+      }
+
+      .optionBtn {
+        display: flex;
+        margin-top: 20px;
+        justify-content: center;
+        .btn {
+          padding: 12px 50px;
+        }
+      }
+    }
+  }
+}
+
+.updateUser::v-deep .el-form-item__label {
+  color: #4b9bb7;
+}
+
+.updateUser::v-deep .el-input__inner {
+  background-color: #09152f;
+  border: 1px solid #17324c;
+}
+
+.addPerson {
+  display: flex;
+  list-style: none;
+  padding: 0;
+  flex-wrap: wrap;
+  max-width: 280px;
+
+  li {
+    color: #fff;
+    text-align: center;
+    font-size: 30px;
+    margin-left: 10px;
+  }
+}
+
+.li-icon {
+  background-color: #cccccc;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  margin: 0 auto;
+}
+
+.li-btn {
+  background-color: #cccccc;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+}
+
+.card {
+  position: absolute;
+  z-index: 2000;
+  right: 0;
+
+  .box-card {
+    min-height: 240px;
+    max-height: 260px;
+    overflow: hidden;
+    background-color: #09152f;
+    position: relative;
+    max-width: 220px;
+
+    .scrollWrap {
+      overflow: scroll;
+      height: 180px;
+      position: relative;
+      color: #4b9bb7;
+
+      .el-checkbox-group {
+        display: flex;
+        flex-direction: column;
+
+        .el-checkbox {
+          line-height: 20px;
+        }
+      }
+    }
+
+    .myclear {
+      width: 100%;
+      line-height: 20px;
+      color: #4b9bb7;
+      display: flex;
+      justify-content: space-between;
+    }
+
+    .hidebar {
+      position: absolute;
+      top: 77px;
+      right: 20px;
+      width: 20px;
+      height: 180px;
+      background-color: #09152f;
+    }
+
+    .item {
+      line-height: 40px;
+    }
+  }
+}
+
+.leader {
+  color: red;
+}
+
+.el-input {
+  width: 280px !important;
+}
+</style>
\ No newline at end of file

--
Gitblit v1.8.0