From f4c324b44aadc4d8a44d4c67c588d2f76261ccaa Mon Sep 17 00:00:00 2001
From: wl <173@qq.com>
Date: 星期三, 30 十一月 2022 16:07:39 +0800
Subject: [PATCH] fix：消息分页 视频查询 图片查询
---
src/views/operate/video/updateInterface/index.vue | 411 ++++++++++++++++++++++++----------------------------------
1 files changed, 170 insertions(+), 241 deletions(-)
diff --git a/src/views/operate/video/updateInterface/index.vue b/src/views/operate/video/updateInterface/index.vue
index 63f233f..60805da 100644
--- a/src/views/operate/video/updateInterface/index.vue
+++ b/src/views/operate/video/updateInterface/index.vue
@@ -1,218 +1,199 @@
<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 prop="code" label="瑙嗛锛�">
- <video id="my-video" class="video-js" controls preload="auto" width="210px" height="150px"
- :poster="imagedata.imageUrl" data-setup="{}">
- <source :src="imagedata.videoUrl" type="video/mp4" />
- </video>
- </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>
+ <el-form label-position="right" label-width="150px" :model="videoData" :rules="rules" :disabled="isDisabled" ref="user">
+ <!-- <el-form-item prop="belongToId" label="鎵�灞炰簨浠剁紪鍙�">
+ <el-input v-model="videoData.belongToId"></el-input>
+ </el-form-item>
+ <el-form-item prop="eventSource" label="浜嬩欢鏉ユ簮">
+ <el-input v-model="videoData.eventSource"></el-input>
+ </el-form-item>
+ <el-form-item prop="category" label="闂绫诲埆">
+ <el-input v-model="videoData.category"></el-input>
+ </el-form-item>
+ <el-form-item prop="type" label="绫诲瀷">
+ <el-select v-model="videoData.type">
+ <el-option v-for="item in getResourceType()" :key="item.value" :label="item.label" :value="item.value" />
+ </el-select>
+ </el-form-item>
+ <el-form-item prop="regionName" label="绀惧尯鍚嶇О">
+ <el-input v-model="videoData.regionName"></el-input>
+ </el-form-item>
+ <el-form-item prop="id" label="瑙嗛Id">
+ <el-input v-model="videoData.id"></el-input>
+ </el-form-item> -->
+ <el-form-item prop="url" label="瑙嗛" min-width="8">
+ <template v-if="videoList" >
+ <div class="video-cover" v-for="video in videoList" :key="video">
+ <i v-if="isUpdate" @click="handleDelete(video)" class="el-icon-delete video-delete-icon"></i>
+ <video controls :src="video" width="100%" height="100%"/>
</div>
- <!-- </el-form-item> -->
- </el-form>
- </div>
- </main>
+ </template>
+ <el-upload
+ v-if="isUpdate"
+ class="avatar-uploader"
+ action=""
+ ref="image"
+ :limit="4"
+ :show-file-list="false"
+ :auto-upload="true"
+ :http-request="videoUpload">
+ <el-button size="small" type="primary">涓婁紶瑙嗛<i class="el-icon-upload el-icon--right"></i></el-button>
+ </el-upload>
+ </el-form-item>
+ <el-button v-if="!isDisabled" class="submit-button" type="primary" @click.native.prevent="onSubmit">鎻愪氦</el-button>
+ </el-form>
</div>
</template>
-<script src="https://vjs.zencdn.net/7.20.3/video.min.js"></script>
<script>
-import { getTypeList } from "@/utils/helper";
+import { deepClone, RESOURCE_TYPE } from "@/utils/helper";
+import videoManagement from "@/api/operate/videoManagement";
+import { FILE_ORIGINAL_URL } from "@/utils";
+import imageManagement from "@/api/operate/imageManagement";
+
export default {
data() {
-
+ const validateVideoUrl = (rule, value, callback) => {
+ if (this.videoData.url) {
+ callback();
+ } else {
+ callback(new Error('璇蜂笂浼犺棰�'));
+ }
+ };
return {
-
- imagedata: {
- code: "SJ202211010001",
- questionType: "杩濊",
- bigType: "杩濆弽鍥藉鏈夊叧鏍囧噯缂栧埗鍩庝埂瑙勫垝",
- smallType: "鍦ㄥ眳姘戜綇瀹呮ゼ銆佹湭閰嶅璁剧珛涓撶敤鐑熼亾鐨勫晢浣忕患鍚堟ゼ銆佸晢浣忕患鍚堟ゼ鍐呬笌灞呬綇灞傜浉閭荤殑鍟嗕笟妤煎眰鍐呮柊寤恒�佹敼寤恒�佹墿寤轰骇鐢熸补鐑熴�佸紓鍛炽�佸簾姘旂殑椁愰ギ鏈嶅姟椤圭洰",
- videoId: "1",
- uploadTime: "2022-10-31 20:20:01",
- imageUrl:"https://img0.baidu.com/it/u=1063261925,3306857657&fm=253&fmt=auto&app=138&f=JPEG?w=669&h=500",
- videoUrl:"http://vali-g1.cp31.ott.cibntv.net/youku/65730720cb94e7220271a3c96/0300080100632D30A3E43019FD116537F5162F-1035-48AC-BE1B-602DF0E92893.mp4?sid=166729534400010004780_00_Bda935cf9a33346c593fc27da8e694df3&sign=db39289573d143cf6e1ad8d8dff36682&ctype=50&si=183&psid=c732c4364319e7ef4685d8f1a568015941346"
+ videoData: {
+ belongToId: '',
+ eventSource: '',
+ regionName: '',
+ category: '',
+ id: '',
+ url: '',
+ type: ''
},
+ rules: {
+ belongToId: [{ required: true, trigger: 'blur', message: '璇疯緭鍏ユ墍灞炰簨浠剁紪鍙�' }],
+ eventSource: [{ required: true, trigger: 'blur', message: '璇疯緭鍏ヤ簨浠舵潵婧�' }],
+ regionName: [{ required: true, trigger: 'blur', message: '璇疯緭鍏ョぞ鍖哄悕绉�' }],
+ id: [{ required: true, trigger: 'blur', message: '璇疯緭鍏ヨ棰慖d' }],
+ category: [{ required: true, trigger: 'blue', message: '璇疯緭鍏ラ棶棰樼被鍨�' }],
+ url: [{ required: true, validator: validateVideoUrl }],
+ type: [{ required: true, trigger: ['blur', 'change'], message: '璇烽�夋嫨绫诲瀷' }]
+ },
+ isDisabled: false,
+ videoList: []
}
},
+
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();
+ this.videoData = deepClone(this.dialogData);
+ if (this.videoData.url) {
+ this.videoList = this.videoData.url.split(',');
+ }
+ this.isDisabled = !this.isUpdate;
},
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");
- // },
+ onSubmit() {
+ this.$refs.user.validate(valid => {
+ if (valid) {
+ const params = Object.assign({}, this.videoData);
+ delete params.regionName;
+ delete params.category;
+ delete params.eventSource;
+ delete params.id;
+ params.belongToId = +params.belongToId;
+ params.type="03"
+ if (this.isUpdate && !this.dialogData) {
+ videoManagement.addVideoResource(params)
+ .then(() => {
+ this.$message.success('鎿嶄綔鎴愬姛');
+ this.$emit('closeDialog');
+ })
+ .catch(err => this.$message.error(`${err}`))
+ } else {
+ videoManagement.updateVideoResource(params)
+ .then(() => {
+ this.$message.success('鎿嶄綔鎴愬姛');
+ this.$emit('closeDialog');
+ })
+ .catch(err => this.$message.error(`${err}`))
+ }
+ } else {
+ this.$message.warning('璇锋鏌ュ繀濉」');
+ }
+ })
+ },
+ videoUpload(file) {
+ const formData = new FormData();
+ formData.append('file', file.file);
+ imageManagement.importImage(formData)
+ .then(res => {
+ const url = res.url1 ?? res.url2 ?? res.url3 ?? res.url4;
+ const videoUrl = FILE_ORIGINAL_URL + url;
+ this.videoList.push(videoUrl);
+ this.$set(this.videoData, 'url', this.videoList.join(','));
+ this.$message.success('涓婁紶鎴愬姛');
+ })
+ .catch(err => {
+ this.$message.error(`${err}`);
+ this.$refs.image.clearFiles();
+ })
+ },
- // // 璁剧疆棰嗗
- // setLeader(idx) {
- // if (this.updateFlag) {
- // this.checkedList.forEach((item, index) => {
- // item.leader = index === idx;
- // });
- // }
- // },
+ handleDelete(data) {
+ this.videoList = this.videoList.filter(item => item !== data);
+ this.videoData.url = this.videoList.join(',');
+ },
- // // 鑾峰彇鎵�鏈夌敤鎴蜂俊鎭�
- // 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"],
+ getResourceType(value) {
+ return value ? RESOURCE_TYPE.find(item => item.value === value) : RESOURCE_TYPE;
+ }
},
- props: ['updateFlag']
+ props: {
+ dialogData: {
+ type: Object,
+ default: () => null
+ },
+ isUpdate: {
+ type: Boolean,
+ default: () => false
+ }
+ }
};
</script>
<style lang="scss" scoped>
.updateUser {
border-radius: 1px;
background-color: #09152f;
+ display: flex;
+ justify-content: center;
+ align-items: center;
- main {
- // border: 1px solid #fff;
- text-align: left;
- padding: 0 55px;
- background-color: #09152f;
- padding-bottom: 50px;
+ .video-cover {
+ height: 169px;
+ display: flex;
+ }
- // .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;
- }
- }
+ .video-cover:hover {
+ background-color: #ffffff;
+ opacity: .6;
+ .video-delete-icon {
+ display: block;
+ opacity: 1;
}
+ }
+
+ .video-delete-icon {
+ position: absolute;
+ color: red;
+ left: calc(100% - 160px);
+ top: calc(100% - 150px);
+ z-index: 2;
+ height: 14px;
+ font-size: 24px;
+ display: none;
+ }
+
+ .submit-button {
+ margin-left: 200px;
}
}
@@ -255,63 +236,11 @@
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 {
+.el-input, .el-select {
width: 280px !important;
}
</style>
\ No newline at end of file
--
Gitblit v1.8.0