提交 c08681a6 authored 作者: 王腾飞's avatar 王腾飞

0806

上级 e779ca3d
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="description" />
<meta name="keywords" />
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
<title>数字资源库系统</title>
<script>
function ifUndefined(data){
return Object.prototype.toString.call(data) !== '[object Undefined]'
}
</script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=ooLnUyMoINUWvDwXo4rTDMb27329w5k5"></script>
</head>
<body>
<script src=<%= htmlWebpackPlugin.options.path %>/tinymce4.7.5/tinymce.min.js></script>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="referrer" content="no-referrer" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="description" />
<meta name="keywords" />
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
<title>数字资源库系统</title>
<script>
function ifUndefined(data){
return Object.prototype.toString.call(data) !== '[object Undefined]'
}
</script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=ooLnUyMoINUWvDwXo4rTDMb27329w5k5"></script>
</head>
<body>
<script src=<%= htmlWebpackPlugin.options.path %>/tinymce4.7.5/tinymce.min.js></script>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="referrer" content="no-referrer" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="description" />
<meta name="keywords" />
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
<title>数字资源库系统</title>
<script>
function ifUndefined(data){
return Object.prototype.toString.call(data) !== '[object Undefined]'
}
</script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=ooLnUyMoINUWvDwXo4rTDMb27329w5k5"></script>
</head>
<body>
<script src=<%= htmlWebpackPlugin.options.path %>/tinymce4.7.5/tinymce.min.js></script>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="description" />
<meta name="keywords" />
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
<title>数字资源库系统</title>
<script>
function ifUndefined(data){
return Object.prototype.toString.call(data) !== '[object Undefined]'
}
</script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=ooLnUyMoINUWvDwXo4rTDMb27329w5k5"></script>
</head>
<body>
<script src=<%= htmlWebpackPlugin.options.path %>/tinymce4.7.5/tinymce.min.js></script>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
<template>
<div class="commitBox app-container">
<div class="resourceCommitTop">
<em v-if="this.$route.query.resourceType === '1'">提交文本资源</em>
<em v-else-if="this.$route.query.resourceType === '2'">提交照片资源</em>
<em v-else-if="this.$route.query.resourceType === '3'">提交音频资源</em>
<em v-else-if="this.$route.query.resourceType === '4'">提交视频资源</em>
<em v-else-if="this.$route.query.resourceType === '5'">提交三维文件资源</em>
<!-- <em>提交文本资源</em> -->
</div>
<div class="formBox">
<div class="formLeft">
<h2>>资源内容描述类</h2>
<el-form label-width="86px" :model="formData" ref="formOne" :rules="rulesOne">
<el-form-item label="题名:" prop="name">
<el-input autocomplete="off" placeholder="文档有原始题名的,使用原始题名。" v-model="formData.name"></el-input>
</el-form-item>
<el-form-item label="主题:">
<el-input autocomplete="off" placeholder="描述、识别或诠释资源的术语或片语。" v-model="formData.theme"></el-input>
</el-form-item>
<el-form-item label="文件上传:">
<el-upload
:action="`${uploadUrl}/${uploadPath}/info`"
:show-file-list="false"
:on-success="handleSuccess"
:before-upload="beforeUpload"
:on-progress="handleProgress"
class="upload-demo"
drag>
<img :src="`${this.domain}${this.requestPath.file}?fileName=${this.formData.fileName}&isOnLine=true`" alt="" v-if="formData.fileName && this.$route.query.resourceType == 2" style="width:auto; height:100%;">
<p v-else-if="uploadFileName && this.$route.query.resourceType == 1 || this.$route.query.oid">{{ uploadFileName }}</p>
<p v-else-if="uploadFileName && this.$route.query.resourceType == 3 || this.$route.query.oid">{{ uploadFileName }}</p>
<p v-else-if="uploadFileName && this.$route.query.resourceType == 4 || this.$route.query.oid">{{ uploadFileName }}</p>
<p v-else-if="uploadFileName && this.$route.query.resourceType == 5 || this.$route.query.oid">{{ uploadFileName }}</p>
<div v-else>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
</div>
<div class="el-upload__tip" slot="tip" v-if="this.$route.query.resourceType == 1">支持office格式、pdf以及txt。</div>
<div class="el-upload__tip" slot="tip" v-else-if="this.$route.query.resourceType == 2">支持jpeg格式、png, gif以及jpg。</div>
<div class="el-upload__tip" slot="tip" v-else-if="this.$route.query.resourceType == 3">支持mp3格式、mpeg以及wma。</div>
<div class="el-upload__tip" slot="tip" v-else-if="this.$route.query.resourceType == 4">支持mp4格式、avi, flv以及mov。</div>
<div class="el-upload__tip" slot="tip" v-else-if="this.$route.query.resourceType == 5">支持abc, glTF, fbx, obj, dae, stl, 3ds, ply等三维文件格式。</div>
<div class="el-upload__tip" slot="tip" v-else>支持office格式、pdf以及txt。</div>
</el-upload>
<el-progress v-show="showProcess" :percentage="processLength" :stroke-width="2"></el-progress>
</el-form-item>
<el-form-item label="描述/摘要:">
<el-input type="textarea" v-model="formData.description" @input="changeType($event)" placeholder="对文档的简要摘要性描述。"></el-input>
</el-form-item>
<el-form-item label="来源:">
<el-input autocomplete="off" placeholder="文档的出处。" v-model="formData.source"></el-input>
</el-form-item>
<el-form-item label="关键词:" prop="keyword">
<el-input autocomplete="off" placeholder="一般选择3-5个关键词。" v-model="formData.keyword"></el-input>
</el-form-item>
<el-form-item label="语种:">
<el-input autocomplete="off" v-model="formData.languages" placeholder="指所著录文档资源所主要使用的语言,一般为中文。"></el-input>
</el-form-item>
</el-form>
</div>
<div class="formRight">
<h2>>外部属性描述类</h2>
<el-form label-width="92px" :model="formData" :rules="rulesOne" ref="formTwo">
<el-form-item label="形成时间:" prop="formationTime">
<el-date-picker
value-format="yyyy-MM-dd"
v-model="formData.formationTime"
type="date"
placeholder="文档形成时间。"
style="width:100%;">
</el-date-picker>
</el-form-item>
<el-form-item label="地理位置:">
<el-input autocomplete="off" :disabled="true" v-model="location" placeholder="资源内容所指或者所相关的地理位置。">
<i slot="append" class="el-icon-location" @click="showMark">选择位置</i>
</el-input>
</el-form-item>
<el-form-item label="资源分类:">
<div class="block">
<el-cascader
placeholder="指定资源所属类别,类目体系在资源库系统中设置。"
change-on-select
v-model="optionResourceDiyTypeShow"
style="width:100%;"
ref="myCascader"
:props="{expandTrigger: 'click'}"
:options="optionResourceDiyType"
@change="handleChange">
</el-cascader>
</div>
</el-form-item>
<el-form-item label="资源标签:" prop="label">
<!-- <el-select v-model="resourceLabel" multiple placeholder="指定资源所属专题与内容特征,相关标签需提前在“资源标签”功能中设置。" style="width:100%;" @change="selectOpt">
<el-option
v-for="item in resourceLabelList"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select> -->
<!-- <el-input v-model="resourceLabel" multiple placeholder="指定资源所属专题与内容特征,相关标签需提前在“资源标签”功能中设置。" @focus="showLableDia"></el-input> -->
<div style="display:flex;">
<div class="entityDataCon">
<span v-for="(item, key) in resourceLabel" :key="key" class="entitySpan" @click="deleteLableItem(key)">{{ item }}<i class="el-icon-error" style="padding-left:5px;"></i></span>
</div>
<i class="el-icon-star-off" @click="showLableDia" style="width:140px; text-align:center; line-height:36px; color:#fff; background:#409EFF; border-top-right-radius:4px; border-bottom-right-radius:4px; cursor:pointer;">请选择资源标签</i>
</div>
</el-form-item>
</el-form>
<h2>>版权信息描述类</h2>
<el-form label-width="86px" :model="formData" ref="formThree" :rules="rulesOne">
<el-form-item label="责任者:" prop="responsibility">
<el-input autocomplete="off" placeholder="文档责任者,创建者。" v-model="formData.responsibility"></el-input>
</el-form-item>
<el-form-item label="版权信息:">
<el-input autocomplete="off" placeholder="文档出版版权信息等。" v-model="formData.copyright"></el-input>
</el-form-item>
</el-form>
<h2>>关联信息描述类</h2>
<el-form label-width="110px">
<el-form-item label="关联实体选择:">
<div style="display:flex;">
<div class="entityDataCon" autocomplete="off" :disabled="true">
<span v-for="(item, key) in entityData" :key="key" class="entitySpan" @click="deleteEntity(key, item)">{{ item.keyword }}<i class="el-icon-error" style="padding-left:5px;"></i></span>
</div>
<i class="el-icon-star-off" @click="showEntityMark" style="width:111px; text-align:center; line-height:36px; color:#fff; background:#409EFF; border-top-right-radius:4px; border-bottom-right-radius:4px; cursor:pointer;">请选择实体</i>
</div>
<em></em>
</el-form-item>
</el-form>
<div v-if="this.$route.query.resourceType == 2">
<h2>>照片评分</h2>
<label for="" style="font-size: 14px; color: #606266; float:left;">照片评分:</label>
<el-rate v-model="formData.score" style="float:left;"></el-rate>
</div>
</div>
<div class="formBottom">
<div class="formBottomLeft">
<h2>>自定义元数据项目</h2>
<el-select v-model="formData.moduleId" placeholder="请选择" @change="changeMetaDataVal" class="specialSelect">
<el-option
v-for="item in options"
:key="item.value"
:label="item.name"
:value="item.value">
</el-option>
</el-select>
<el-form label-width="110px">
<el-form-item :label="item.name + ':'" v-for="(item, key) in fieldJsonData" :key="key">
<el-input autocomplete="off" :placeholder="item.description" v-if="item.type === '1'" v-model="item.metaDataValue"></el-input>
<el-date-picker
style="width:100%;"
v-else-if="item.type === '2'"
v-model="item.metaDataValue"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择日期">
</el-date-picker>
<el-select v-model="item.metaDataValue" placeholder="请选择" v-else-if="item.type === '3'" style="width:100%;">
<el-option
v-for="item1 in item.reallSelectDataArr"
:key="item1.value"
:label="item1.label"
:value="item1.value">
</el-option>
</el-select>
<el-input v-else type="textarea" autocomplete="off" :placeholder="item.description" v-model="item.metaDataValue"></el-input>
</el-form-item>
</el-form>
</div>
</div>
<div class="threeBtn">
<button @click="$router.back(-1)">取消</button>
<!-- <button v-if="isShowSavaBtn">提交并转录目录</button> -->
<button @click="commitResource" v-if="isShowSavaBtn">提交入库</button>
<button @click="saveEdit" v-if="isShowSavaBtn1">再次提交</button>
</div>
</div>
<el-dialog title="标签资源" :visible.sync="dialogTableVisible" class="lableDia">
<el-autocomplete
popper-class="my-autocomplete"
v-model="searchPageLableForm.search"
:fetch-suggestions="querySearch"
placeholder="请输入内容"
@select="handleSelect">
<i slot="append" class="el-icon-search" @click="searchLable">检索标签</i>
<template slot-scope="{ item }">
<div class="name">{{ item.value }}</div>
</template>
</el-autocomplete>
<el-table :data="gridData" @selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column property="name" label="标签名称"></el-table-column>
<el-table-column property="description" label="标签说明"></el-table-column>
<el-table-column property="createrName" label="创建者"></el-table-column>
<el-table-column property="createTime" label="创建时间"></el-table-column>
</el-table>
<pagination v-if="totalCount>0" :total="totalCount" :page-size="searchPageLableForm.pageSize" :page-sizes="[6, 12, 18, 24, 30]" @pagesize="pagesizeFun" @currentPage="currentPageFun"></pagination>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogTableVisible = false">取 消</el-button>
<el-button type="primary" @click="sureLable">确 定</el-button>
</div>
</el-dialog>
<mapmark :isShowMark="isShowMark" @changeIsShowMark="changeVal" @locationChange="locationChange"></mapmark>
<linkentity :isShowLineEntityMark="isShowLineEntityMark" @changeStateVal="changeStateVal" @getEntity="getEntity"></linkentity>
</div>
</template>
<script>
import mapmark from '../mapmark'
import linkentity from '../linkentity'
import { uploadUrl, uploadPath, requestPath } from "@/utils/global";
import { debounce } from "@/utils/publicFunctions";
import _ from 'lodash'
import pagination from '@/components/pagination/pagination'
import {
resourceCommitAPI,
resourceDiyTypeAPI,
resourceLabelListAPI,
editItemAPI,
saveEditAPI,
getMetaDataPlanListAPI,
searchPageLableAPI
} from "@/api/resourcecommit";
import { detailsAPI } from '@/api/metadataPlan/index'
import { convertTree } from '@/utils/format'
export default {
name: 'resourcecommit',
components: {
mapmark,
linkentity,
pagination
},
data() {
return {
restaurants: [],
totalCount: 0,
gridData: [],
multipleSelection: [],
dialogTableVisible: false,
searchPageLableForm: {
search: null,
pageNum: 1,
pageSize: 6,
orderBy: null
},
domain: process.env.BASE_API,
requestPath: requestPath,
vals: [],
val: [],
isShowMark: false,
isShowLineEntityMark: false,
uploadUrl: uploadUrl,
uploadPath: uploadPath,
location: '',
entityData: [],
lng: '',
lat: '',
addressDetail: '',
isShowSavaBtn: false,
isShowSavaBtn1: false,
fieldJsonData: null,
processLength: 0,
showProcess: false,
// timeVal: '',
formData: {
resourceType: this.$route.query.resourceType,
name: '',
theme: '',
description: '',
source: '',
keyword: '',
languages: '',
formationTime: '',
longitude: '',
latitude: '',
address: '',
fileName: '',
suffix: '',
text: '',
size: '',
pdfName: null,
diyType: [
// {
// code: '',
// dtId: 0,
// resourceId: ''//新增不传
// }
],
label: [
// {
// labelId: 0,
// resourceId: ''//新增不传
// }
],
relationParticiple:[
{
// keyword:
// participleId:
// participleType:
}
],
responsibility: '',
copyright: '',
score: null,
fieldJson: null,
fieldJsonArr: [],
moduleId: null, //自定义元数据id
},
uploadFileName: null,
rulesOne: {
name: [
{ required: true, message: '请输入题名', trigger: 'blur' },
{ required: true, message: '请输入题名', trigger: 'change' }
],
keyword: [
{ required: true, message: '请输入关键词', trigger: 'blur' },
{ required: true, message: '请输入关键词', trigger: 'change' }
],
formationTime: [
{ required: true, message: '请选择形成时间', trigger: 'change' }
],
responsibility: [
{ required: true, message: '请输入责任者', trigger: 'blur' },
{ required: true, message: '请输入责任者', trigger: 'change' }
],
resourceLabel: [
{ required: true, message: '请选择资源标签', trigger: 'change' }
],
label: [
{ required: true, message: '请选择资源标签', trigger: 'change' }
],
// diyType: [
// { required: true, message: '请选择资源类型', trigger: 'change' }
// ]
},
resourceLabelList: [], //资源标签列表
resourceDiyType: '',
resourceLabel: [],
options: [
// {
// value: '选项1',
// label: '黄金糕'
// }
],
optionsOne: [
// {
// value: '选项1',
// label: '黄金糕'
// }
],
value: '',
value1: [],
dateValue: null,
optionResourceDiyTypeShow: [],//资源分类的数据
optionResourceDiyType: [
// {
// value: 'zhinan',
// label: '指南',
// children: [{
// value: 'shejiyuanze',
// label: '设计原则',
// }],
// }
]
}
},
computed: {
searchWord () {
return this.searchPageLableForm.search
}
},
mounted() {
this.getresourceDiyTypeList();
this.resourceLabelListAPI();
this.getLookContent();
this.getNowTime();
//this.formSixBtn();
this.getMetaDataPlanList();
console.log(this.formData.fieldJsonArr, 'XXeeeeeeeeeee')
},
watch: {
$route: {
handler: function(val, oldVal){
console.log(oldVal, "()()(111");
if (val) {
oldVal.meta.keepAlive = false;
}
},
deep: true
},
searchWord: {
handler (newVal, oldVal) {
console.log( newVal )
this.searchPageLableForm.search = newVal;
this.getSearchPageLable ();
},
deep: true,
immediate: true
}
},
methods: {
showMark() {
this.isShowMark = true;
},
changeVal(val) {
this.isShowMark = val;
},
locationChange(val) {
console.log(val,"YYY")
this.location = '经度' + val.lng + ',' + '维度' + val.lat + ',' + val.localWhere;
this.formData.longitude = val.lng;
this.formData.latitude = val.lat;
this.formData.address = val.localWhere;
},
showEntityMark() {
this.isShowLineEntityMark = true;
window.scrollTo(0,0)
},
changeStateVal(val) {
this.isShowLineEntityMark = val;
},
getEntity(val) {
this.entityData = val;
let entityArr = [];
val.map((item, index) => {
let entityObj = {
keyword: item.keyword,
participleId: item.id,
participleType: item.state
};
entityArr.push(entityObj)
});
this.formData.relationParticiple = entityArr;
},
deleteEntity(key,item) {
this.entityData.splice(key, 1);
item.choosedAlready = false;
},
// 上传附件有关
beforeUpload(file) {
console.log(file, '11!!')
let type = file.name.slice(file.name.lastIndexOf(".") + 1).toLowerCase();
console.log(type,"0000")
const isLt100M = file.size / 1024 / 1024 < 100;
if (!isLt100M) {
this.$message.error("上传附件大小不能超过100M!");
return isLt100M;
}
var isType;
if (this.formData.resourceType == 1) {
isType = type == "doc" || type == "docx" || type == "pdf" || type == "txt";
if (!isType) {
this.$message.error("上传附件格式工为doc, docx, pdf, txt!");
return isType;
} else {
this.$message.warning("上传中");
}
} else if (this.formData.resourceType == 2) {
isType = type == "jpeg" || type == "png" || type == "gif" || type == "jpg";
if (!isType) {
this.$message.error("上传附件格式工为jpeg, png, gif, jpg!");
return isType;
} else {
this.$message.warning("上传中");
}
} else if (this.formData.resourceType == 3) {
isType = type == "mp3" || type == "mpeg" || type == "wma";
if (!isType) {
this.$message.error("上传附件格式工为mp3, mpeg, wma!");
return isType;
} else {
this.$message.warning("上传中");
}
} else if (this.formData.resourceType == 4) {
isType = type == "mp4" || type == "avi" || type == "flv" || type == "mov";
if (!isType) {
this.$message.error("上传附件格式工为mp4, avi, flv, mov!");
return isType;
} else {
this.$message.warning("上传中");
}
} else if (this.formData.resourceType == 5) {
isType = type == "abc" || type == "fbx" || type == "dae" || type == "obj" || type == "bvh" || type == "dxf" || type == "psk" || type == "stl" || type == "ply" || type == "x3d";
if (!isType) {
this.$message.error("上传附件格式工为abc, glTF, fbx, obj, dae, stl, 3ds, ply!");
return isType;
} else {
this.$message.warning("上传中");
}
}
},
handleSuccess(response, file, fileList) {
console.log(response, 'ooo');
this.$message.success("上传成功");
this.showProcess = false
this.formData.text = response.content;
this.formData.size = response.size;
this.formData.suffix = response.suffixName;
this.formData.fileName = response.fileName;
this.uploadFileName = response.originalFileName;
this.formData.pdfName = response.pdfPath;
this.formData.name = response.originalFileName
},
getresourceDiyTypeList() { //获取资源分类的数据
resourceDiyTypeAPI(1)
.then(res => {
if (res.data.code === 0) {
this.optionResourceDiyType = convertTree(res.data.data)
console.log(res.data.data, "()()")
console.log(this.optionResourceDiyType,"PP")
this.optionResourceDiyType.splice(0,1)
}
})
},
handleChange(val) {
//1234567就是id
console.log(val,'UU')
let idArr = [];
val.map((item, index) => {
var obj = {
dtId: item
}
idArr.push(obj)
})
this.formData.diyType = idArr;
},
selectOpt(value) {
let optIdArr = [];
value.map((item, index) => {
var obj = {
labelId: item
}
optIdArr.push(obj)
})
this.formData.label = optIdArr;
},
changeType(e) {//解决el-input type为textarea时候无法输入的问题
this.$forceUpdate()
},
resourceLabelListAPI() { //获取资源标签列表数据
resourceLabelListAPI()
.then(res => {
console.log(res, "III")
if (res.data.code === 0) {
this.resourceLabelList = res.data.data;
}
})
},
// commitResource: debounce(function() {// 提交资源防抖处理
// console.log(11)
// this.formData.fieldJson = JSON.stringify(this.formData.fieldJsonArr)
// const formOne = new Promise((resolve,reject) => {
// this.$refs['formOne'].validate(valid=>{
// if(valid) resolve()
// })
// });
// const formTwo = new Promise((resolve,reject) => {
// this.$refs['formTwo'].validate(valid => {
// if(valid) resolve()
// })
// });
// const formThree = new Promise((resolve,reject) => {
// this.$refs['formThree'].validate(valid => {
// if(valid) resolve()
// })
// });
// Promise.all([formOne, formTwo, formThree]).then(() => {
// resourceCommitAPI(this.formData)
// .then(res => {
// console.log(res, '%%%%%%%%%%%%%^')
// if (res.data.code === 0) {
// this.$message.success('提交成功');
// this.$router.back(-1);
// } else {
// this.$message.error('提交失败');
// }
// })
// })
// }),
commitResource: _.throttle(function() {// 提交资源节流处理
console.log(11)
this.formData.fieldJson = JSON.stringify(this.formData.fieldJsonArr)
const formOne = new Promise((resolve,reject) => {
this.$refs['formOne'].validate(valid=>{
if(valid) resolve()
})
});
const formTwo = new Promise((resolve,reject) => {
this.$refs['formTwo'].validate(valid => {
if(valid) resolve()
})
});
const formThree = new Promise((resolve,reject) => {
this.$refs['formThree'].validate(valid => {
if(valid) resolve()
})
});
Promise.all([formOne, formTwo, formThree]).then(() => {
resourceCommitAPI(this.formData)
.then(res => {
console.log(res, '%%%%%%%%%%%%%^')
if (res.data.code === 0) {
this.$message.success('提交成功');
this.$router.back(-1);
} else {
this.$message.error('提交失败');
}
})
})
}, 1000),
formSixBtn() {
if (this.$route.query.resourceType) {
this.isShowSavaBtn = true;
this.isShowSavaBtn1 = false;
}
},
getLookContent() {//查看
if(this.$route.query.oid && this.$route.query.flag) {
this.isShowSavaBtn1 = true;
this.isShowSavaBtn = false;
} else {
this.isShowSavaBtn1 = false;
this.isShowSavaBtn = true;
}
if (this.$route.query.oid) {
//this.isShowSavaBtn = true;
editItemAPI(this.$route.query.oid)
.then(res => {
console.log(res, 'OPOPOPO');
if (res.data.code === 0) {
this.formData = res.data.data;
this.$nextTick(() => this.$refs.formOne.clearValidate())
this.$nextTick(() => this.$refs.formTwo.clearValidate())
this.$nextTick(() => this.$refs.formThree.clearValidate())
if (res.data.data.moduleId) {
this.changeMetaDataVal1(res.data.data.moduleId);
setTimeout(() => {
this.fieldJsonData = JSON.parse(res.data.data.fieldJson);
},500)
}
if (res.data.data.name) {
this.uploadFileName = res.data.data.name;
}
if (res.data.data.longitude) {
this.location = '经度:' + res.data.data.longitude + ',' + '维度:' + res.data.data.latitude + ',' + res.data.data.address;
}
res.data.data.label.map((item, index) => {
this.$set(item, 'value', item.labelId);
this.resourceLabel.push(item.name)
})
res.data.data.diyType.map((item, index) => {
this.$set(item, 'value', item.dtId);
this.$set(item, 'label', item.typeName);
this.optionResourceDiyTypeShow.push(item.value);
})
if (res.data.data.participleList) {
this.entityData = res.data.data.participleList
}
}
})
} else {
return;
}
},
saveEdit() {//保存编辑
this.formData.fieldJson = JSON.stringify(this.fieldJsonData)
const formOne = new Promise((resolve,reject) => {
this.$refs['formOne'].validate(valid=>{
if(valid) resolve()
})
});
const formTwo = new Promise((resolve,reject) => {
this.$refs['formTwo'].validate(valid => {
if(valid) resolve()
})
});
const formThree = new Promise((resolve,reject) => {
this.$refs['formThree'].validate(valid => {
if(valid) resolve()
})
});
Promise.all([formOne, formTwo, formThree]).then(() => {
saveEditAPI(this.formData)
.then(res => {
if (res.data.code === 0) {
this.$message.success('保存变更成功');
this.$router.back(-1);
}
})
})
},
getNowTime() {
var now = new Date();
var year = now.getFullYear(); //得到年份
var month = now.getMonth(); //得到月份
var date = now.getDate(); //得到日期
month = month + 1;
month = month.toString().padStart(2, "0");
date = date.toString().padStart(2, "0");
var defaultDate = `${year}-${month}-${date}`;
// this.$set(this.searchFormField, "date", defaultDate);
console.log(defaultDate,"()***")
this.formData.formationTime = defaultDate;
console.log(this.formData.formationTime,"()***")
},
getMetaDataPlanList() {
getMetaDataPlanListAPI()
.then(res => {
console.log(res, '333333');
if (res.data.code === 0) {
this.options = res.data.data;
for (var i = this.options.length - 1; i >= 0; i--) {
if (this.options[i].status === 0) {
this.options.splice(i, 1)
this.$set(this.options[i], 'value', this.options[i].id)
}
}
}
})
},
changeMetaDataVal1(val) {
console.log(val, '小明不愛學習');
detailsAPI(val)
.then(res => {
console.log(res, '我是根據id查找的詳情');
if (res.data.code === 0) {
this.fieldJsonData = JSON.parse(res.data.data.fieldJson);
}
})
},
changeMetaDataVal(val) {
console.log(val, '小明不愛學習');
detailsAPI(val)
.then(res => {
console.log(res, '我是根據id查找的詳情');
if (res.data.code === 0) {
this.fieldJsonData = JSON.parse(res.data.data.fieldJson);
console.log(this.fieldJsonData, '222222');
this.fieldJsonData.map((item, index) => {
this.$set(item, 'metaDataValue', null)
var itemArr = [];
item.dynamicTags.map((item1, index1) => {
let itemObj = {
value: index1,
label: item1
}
itemArr.push(itemObj)
})
this.optionsOne = itemArr;
this.$set(item, 'reallSelectDataArr', this.optionsOne)
this.formData.fieldJsonArr = this.fieldJsonData;
})
}
})
},
handleProgress(event, file, fileList) {
//if (file.status === 'uploading') {
this.processLength = 0
this.showProcess = true
this.processLength = file.percentage.toFixed(0)*1;
//}
console.log(this.processLength, '22211aa')
},
getSearchPageLable () {
searchPageLableAPI(this.searchPageLableForm)
.then(res => {
console.log(res, '21312')
if ( res.data.code === 0 ) {
this.gridData = res.data.data.list
this.totalCount = res.data.data.total
for ( let [ index, ele ] of this.gridData.entries () ) {
this.$set( ele, 'value', ele.name )
}
}
})
},
showLableDia () {
this.dialogTableVisible = true;
this.getSearchPageLable ();
},
handleSelectionChange (val) {
// multipleSelection
console.log(val, '123val')
this.multipleSelection = val;
let optIdArr = [];
this.multipleSelection.map((item, index) => {
var obj = {
labelId: item.id
}
optIdArr.push(obj)
if (!this.resourceLabel.includes(item.name)) {
this.resourceLabel.push(item.name)
}
})
this.formData.label = optIdArr;
},
sureLable () {
// this.multipleSelection.map((item, index) => {
// if (!this.resourceLabel.includes(item.name)) {
// this.resourceLabel.push(item.name)
// }
// })
this.dialogTableVisible = false
},
deleteLableItem (key) {
this.resourceLabel.splice(key, 1)
},
querySearch (queryString, cb) {
var restaurants = this.gridData;
console.log(restaurants, '1231rr')
var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
cb(results);
},
createFilter (queryString) {
return (restaurant) => {
return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
};
},
handleSelect (item) {
console.log(item);
this.searchPageLableForm.search = item.value;
},
searchLable () {
this.getSearchPageLable ()
},
pagesizeFun(val){
this.searchPageLableForm.pageSize = val;
this.getSearchPageLable ()
},
currentPageFun(val){
this.searchPageLableForm.pageNum = val;
this.getSearchPageLable ()
},
},
beforeRouteLeave(to, from, next) {
from.meta.keepAlive = false;
next();
},
}
</script>
<style lang="less" scoped>
.commitBox {
width:100%;
padding:37px 40px 0;
}
.resourceCommitTop {
width:100%;
padding-bottom:23px;
em {
font-style:normal;
color:#3F4560;
font-size:20px;
}
}
.formBox {
width:100%;
h2 {
color:#293C6C;
font-size:18px;
margin:40px 0 46px 0;
}
// .el-form-item {
// margin-bottom:12px;
// }
em {
font-style:normal;
color:#FBA57F;
font-size:12px;
display:block;
margin-top:-5px;
}
.formLeft,.formBottomLeft {
margin-right:20px;
}
.formLeft,.formRight{
float:left;
width:calc(50% - 10px);
background:#fff;
padding:0 40px;
}
.formBottomLeft {
width:100%;
padding:0 40px;
position:relative;
.specialSelect {
position:absolute;
right:40px;
top:40px;
}
.el-form {
display:flex;
flex-wrap:wrap;
margin-top:80px;
}
.el-form-item {
width:50%;
&:nth-of-type(2n+1) {
width:calc(50% - 40px);
}
&:nth-of-type(2n) {
margin-left:40px;
}
}
}
.formRight, .formLeft {
padding-bottom:26px;
height:822px;
}
.formBottom {
width:100%;
float:left;
background:#fff;
margin-top:20px;
}
}
.threeBtn {
width:100%;
height:80px;
background:#fff;
clear:both;
text-align:center;
button {
border-radius:4px;
font-size:14px;
font-weight:bold;
outline:none;
margin-top:21px;
cursor:pointer;
&:nth-of-type(1) {
color:#666666;
width:98px;
height:38px;
background:#fff;
border:1px solid #DCDFE6;
}
&:nth-of-type(2) {
color:#FFFFFF;
width:130px;
height:38px;
background:#4A94FE;
border:none;
margin:0 13px;
}
&:nth-of-type(3),&:nth-of-type(4) {
color:#FFFFFF;
width:98px;
height:38px;
background:#4A94FE;
border:none;
}
}
}
.entitySpan {
display:inline-block;
padding:0 11px;
height:28px;
line-height:28px;
border:1px solid #C9E4FF;
background:#EBF5FF;
color:#55A3FF;
font-size:12px;
margin:0 10px 10px 0;
cursor:pointer;
}
.entityDataCon {
height:36px;
border:1px solid #DCDFE6;
border-top-left-radius:4px;
border-bottom-left-radius:4px;
flex:1;
overflow-y:auto;
padding:0 9px;
&::-webkit-scrollbar {
width:5px;
height:5px;
}
}
.el-autocomplete {
width:50%;
margin-bottom:10px;
}
.my-autocomplete {
li {
line-height: normal;
padding: 7px;
.name {
text-overflow: ellipsis;
overflow: hidden;
}
.addr {
font-size: 12px;
color: #b4b4b4;
}
.highlighted .addr {
color: #ddd;
}
}
}
</style>
<style lang="scss">
@import './index'
</style>
\ No newline at end of file
<template>
<div class="commitBox app-container">
<div class="resourceCommitTop">
<em v-if="this.$route.query.resourceType === '1'">提交文本资源</em>
<em v-else-if="this.$route.query.resourceType === '2'">提交照片资源</em>
<em v-else-if="this.$route.query.resourceType === '3'">提交音频资源</em>
<em v-else-if="this.$route.query.resourceType === '4'">提交视频资源</em>
<em v-else-if="this.$route.query.resourceType === '5'">提交三维文件资源</em>
<!-- <em>提交文本资源</em> -->
</div>
<div class="formBox">
<div class="formLeft">
<h2>>资源内容描述类</h2>
<el-form label-width="86px" :model="formData" ref="formOne" :rules="rulesOne">
<el-form-item label="题名:" prop="name">
<el-input autocomplete="off" placeholder="文档有原始题名的,使用原始题名。" v-model="formData.name"></el-input>
</el-form-item>
<el-form-item label="主题:">
<el-input autocomplete="off" placeholder="描述、识别或诠释资源的术语或片语。" v-model="formData.theme"></el-input>
</el-form-item>
<el-form-item label="文件上传:">
<el-upload
:action="`${uploadUrl}/${uploadPath}/info`"
:show-file-list="false"
:on-success="handleSuccess"
:before-upload="beforeUpload"
:on-progress="handleProgress"
class="upload-demo"
drag>
<img :src="`${this.domain}${this.requestPath.file}?fileName=${this.formData.fileName}&isOnLine=true`" alt="" v-if="formData.fileName && this.$route.query.resourceType == 2" style="width:auto; height:100%;">
<p v-else-if="uploadFileName && this.$route.query.resourceType == 1 || this.$route.query.oid">{{ uploadFileName }}</p>
<p v-else-if="uploadFileName && this.$route.query.resourceType == 3 || this.$route.query.oid">{{ uploadFileName }}</p>
<p v-else-if="uploadFileName && this.$route.query.resourceType == 4 || this.$route.query.oid">{{ uploadFileName }}</p>
<p v-else-if="uploadFileName && this.$route.query.resourceType == 5 || this.$route.query.oid">{{ uploadFileName }}</p>
<div v-else>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
</div>
<div class="el-upload__tip" slot="tip" v-if="this.$route.query.resourceType == 1">支持office格式、pdf以及txt。</div>
<div class="el-upload__tip" slot="tip" v-else-if="this.$route.query.resourceType == 2">支持jpeg格式、png, gif以及jpg。</div>
<div class="el-upload__tip" slot="tip" v-else-if="this.$route.query.resourceType == 3">支持mp3格式、mpeg以及wma。</div>
<div class="el-upload__tip" slot="tip" v-else-if="this.$route.query.resourceType == 4">支持mp4格式、avi, flv以及mov。</div>
<div class="el-upload__tip" slot="tip" v-else-if="this.$route.query.resourceType == 5">支持abc, glTF, fbx, obj, dae, stl, 3ds, ply等三维文件格式。</div>
<div class="el-upload__tip" slot="tip" v-else>支持office格式、pdf以及txt。</div>
</el-upload>
<el-progress v-show="showProcess" :percentage="processLength" :stroke-width="2"></el-progress>
</el-form-item>
<el-form-item label="描述/摘要:">
<el-input type="textarea" v-model="formData.description" @input="changeType($event)" placeholder="对文档的简要摘要性描述。"></el-input>
</el-form-item>
<el-form-item label="来源:">
<el-input autocomplete="off" placeholder="文档的出处。" v-model="formData.source"></el-input>
</el-form-item>
<el-form-item label="关键词:" prop="keyword">
<el-input autocomplete="off" placeholder="一般选择3-5个关键词。" v-model="formData.keyword"></el-input>
</el-form-item>
<el-form-item label="语种:">
<el-input autocomplete="off" v-model="formData.languages" placeholder="指所著录文档资源所主要使用的语言,一般为中文。"></el-input>
</el-form-item>
</el-form>
</div>
<div class="formRight">
<h2>>外部属性描述类</h2>
<el-form label-width="92px" :model="formData" :rules="rulesOne" ref="formTwo">
<el-form-item label="形成时间:" prop="formationTime">
<el-date-picker
value-format="yyyy-MM-dd"
v-model="formData.formationTime"
type="date"
placeholder="文档形成时间。"
style="width:100%;">
</el-date-picker>
</el-form-item>
<el-form-item label="地理位置:">
<el-input autocomplete="off" :disabled="true" v-model="location" placeholder="资源内容所指或者所相关的地理位置。">
<i slot="append" class="el-icon-location" @click="showMark">选择位置</i>
</el-input>
</el-form-item>
<el-form-item label="资源分类:">
<div class="block">
<el-cascader
placeholder="指定资源所属类别,类目体系在资源库系统中设置。"
change-on-select
v-model="optionResourceDiyTypeShow"
style="width:100%;"
ref="myCascader"
:props="{expandTrigger: 'click'}"
:options="optionResourceDiyType"
@change="handleChange">
</el-cascader>
</div>
</el-form-item>
<el-form-item label="资源标签:" prop="label">
<!-- <el-select v-model="resourceLabel" multiple placeholder="指定资源所属专题与内容特征,相关标签需提前在“资源标签”功能中设置。" style="width:100%;" @change="selectOpt">
<el-option
v-for="item in resourceLabelList"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select> -->
<!-- <el-input v-model="resourceLabel" multiple placeholder="指定资源所属专题与内容特征,相关标签需提前在“资源标签”功能中设置。" @focus="showLableDia"></el-input> -->
<div style="display:flex;">
<div class="entityDataCon">
<span v-for="(item, key) in resourceLabel" :key="key" class="entitySpan" @click="deleteLableItem(key)">{{ item }}<i class="el-icon-error" style="padding-left:5px;"></i></span>
</div>
<i class="el-icon-star-off" @click="showLableDia" style="width:140px; text-align:center; line-height:36px; color:#fff; background:#409EFF; border-top-right-radius:4px; border-bottom-right-radius:4px; cursor:pointer;">请选择资源标签</i>
</div>
</el-form-item>
</el-form>
<h2>>版权信息描述类</h2>
<el-form label-width="86px" :model="formData" ref="formThree" :rules="rulesOne">
<el-form-item label="责任者:" prop="responsibility">
<el-input autocomplete="off" placeholder="文档责任者,创建者。" v-model="formData.responsibility"></el-input>
</el-form-item>
<el-form-item label="版权信息:">
<el-input autocomplete="off" placeholder="文档出版版权信息等。" v-model="formData.copyright"></el-input>
</el-form-item>
</el-form>
<h2>>关联信息描述类</h2>
<el-form label-width="110px">
<el-form-item label="关联实体选择:">
<div style="display:flex;">
<div class="entityDataCon" autocomplete="off" :disabled="true">
<span v-for="(item, key) in entityData" :key="key" class="entitySpan" @click="deleteEntity(key, item)">{{ item.keyword }}<i class="el-icon-error" style="padding-left:5px;"></i></span>
</div>
<i class="el-icon-star-off" @click="showEntityMark" style="width:111px; text-align:center; line-height:36px; color:#fff; background:#409EFF; border-top-right-radius:4px; border-bottom-right-radius:4px; cursor:pointer;">请选择实体</i>
</div>
<em></em>
</el-form-item>
</el-form>
<div v-if="this.$route.query.resourceType == 2">
<h2>>照片评分</h2>
<label for="" style="font-size: 14px; color: #606266; float:left;">照片评分:</label>
<el-rate v-model="formData.score" style="float:left;"></el-rate>
</div>
</div>
<div class="formBottom">
<div class="formBottomLeft">
<h2>>自定义元数据项目</h2>
<el-select v-model="formData.moduleId" placeholder="请选择" @change="changeMetaDataVal" class="specialSelect">
<el-option
v-for="item in options"
:key="item.value"
:label="item.name"
:value="item.value">
</el-option>
</el-select>
<el-form label-width="110px">
<el-form-item :label="item.name + ':'" v-for="(item, key) in fieldJsonData" :key="key">
<el-input autocomplete="off" :placeholder="item.description" v-if="item.type === '1'" v-model="item.metaDataValue"></el-input>
<el-date-picker
style="width:100%;"
v-else-if="item.type === '2'"
v-model="item.metaDataValue"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择日期">
</el-date-picker>
<el-select v-model="item.metaDataValue" placeholder="请选择" v-else-if="item.type === '3'" style="width:100%;">
<el-option
v-for="item1 in item.reallSelectDataArr"
:key="item1.value"
:label="item1.label"
:value="item1.value">
</el-option>
</el-select>
<el-input v-else type="textarea" autocomplete="off" :placeholder="item.description" v-model="item.metaDataValue"></el-input>
</el-form-item>
</el-form>
</div>
</div>
<div class="threeBtn">
<button @click="$router.back(-1)">取消</button>
<!-- <button v-if="isShowSavaBtn">提交并转录目录</button> -->
<button @click="commitResource" v-if="isShowSavaBtn">提交入库</button>
<button @click="saveEdit" v-if="isShowSavaBtn1">再次提交</button>
</div>
</div>
<el-dialog title="标签资源" :visible.sync="dialogTableVisible" class="lableDia">
<el-autocomplete
popper-class="my-autocomplete"
v-model="searchPageLableForm.search"
:fetch-suggestions="querySearch"
placeholder="请输入内容"
@select="handleSelect">
<i slot="append" class="el-icon-search" @click="searchLable">检索标签</i>
<template slot-scope="{ item }">
<div class="name">{{ item.value }}</div>
</template>
</el-autocomplete>
<el-table :data="gridData" @selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column property="name" label="标签名称"></el-table-column>
<el-table-column property="description" label="标签说明"></el-table-column>
<el-table-column property="createrName" label="创建者"></el-table-column>
<el-table-column property="createTime" label="创建时间"></el-table-column>
</el-table>
<pagination v-if="totalCount>0" :total="totalCount" :page-size="searchPageLableForm.pageSize" :page-sizes="[6, 12, 18, 24, 30]" @pagesize="pagesizeFun" @currentPage="currentPageFun"></pagination>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogTableVisible = false">取 消</el-button>
<el-button type="primary" @click="sureLable">确 定</el-button>
</div>
</el-dialog>
<mapmark :isShowMark="isShowMark" @changeIsShowMark="changeVal" @locationChange="locationChange"></mapmark>
<linkentity :isShowLineEntityMark="isShowLineEntityMark" @changeStateVal="changeStateVal" @getEntity="getEntity"></linkentity>
</div>
</template>
<script>
import mapmark from '../mapmark'
import linkentity from '../linkentity'
import { uploadUrl, uploadPath, requestPath } from "@/utils/global";
import { debounce } from "@/utils/publicFunctions";
import _ from 'lodash'
import pagination from '@/components/pagination/pagination'
import {
resourceCommitAPI,
resourceDiyTypeAPI,
resourceLabelListAPI,
editItemAPI,
saveEditAPI,
getMetaDataPlanListAPI,
searchPageLableAPI
} from "@/api/resourcecommit";
import { detailsAPI } from '@/api/metadataPlan/index'
import { convertTree } from '@/utils/format'
export default {
name: 'resourcecommit',
components: {
mapmark,
linkentity,
pagination
},
data() {
return {
restaurants: [],
totalCount: 0,
gridData: [],
multipleSelection: [],
dialogTableVisible: false,
searchPageLableForm: {
search: null,
pageNum: 1,
pageSize: 6,
orderBy: null
},
domain: process.env.BASE_API,
requestPath: requestPath,
vals: [],
val: [],
isShowMark: false,
isShowLineEntityMark: false,
uploadUrl: uploadUrl,
uploadPath: uploadPath,
location: '',
entityData: [],
lng: '',
lat: '',
addressDetail: '',
isShowSavaBtn: false,
isShowSavaBtn1: false,
fieldJsonData: null,
processLength: 0,
showProcess: false,
// timeVal: '',
formData: {
resourceType: this.$route.query.resourceType,
name: '',
theme: '',
description: '',
source: '',
keyword: '',
languages: '',
formationTime: '',
longitude: '',
latitude: '',
address: '',
fileName: '',
suffix: '',
text: '',
size: '',
pdfName: null,
diyType: [
// {
// code: '',
// dtId: 0,
// resourceId: ''//新增不传
// }
],
label: [
// {
// labelId: 0,
// resourceId: ''//新增不传
// }
],
relationParticiple:[
{
// keyword:
// participleId:
// participleType:
}
],
responsibility: '',
copyright: '',
score: null,
fieldJson: null,
fieldJsonArr: [],
moduleId: null, //自定义元数据id
},
uploadFileName: null,
rulesOne: {
name: [
{ required: true, message: '请输入题名', trigger: 'blur' },
{ required: true, message: '请输入题名', trigger: 'change' }
],
keyword: [
{ required: true, message: '请输入关键词', trigger: 'blur' },
{ required: true, message: '请输入关键词', trigger: 'change' }
],
formationTime: [
{ required: true, message: '请选择形成时间', trigger: 'change' }
],
responsibility: [
{ required: true, message: '请输入责任者', trigger: 'blur' },
{ required: true, message: '请输入责任者', trigger: 'change' }
],
resourceLabel: [
{ required: true, message: '请选择资源标签', trigger: 'change' }
],
label: [
{ required: true, message: '请选择资源标签', trigger: 'change' }
],
// diyType: [
// { required: true, message: '请选择资源类型', trigger: 'change' }
// ]
},
resourceLabelList: [], //资源标签列表
resourceDiyType: '',
resourceLabel: [],
options: [
// {
// value: '选项1',
// label: '黄金糕'
// }
],
optionsOne: [
// {
// value: '选项1',
// label: '黄金糕'
// }
],
value: '',
value1: [],
dateValue: null,
optionResourceDiyTypeShow: [],//资源分类的数据
optionResourceDiyType: [
// {
// value: 'zhinan',
// label: '指南',
// children: [{
// value: 'shejiyuanze',
// label: '设计原则',
// }],
// }
]
}
},
computed: {
searchWord () {
return this.searchPageLableForm.search
}
},
mounted() {
this.getresourceDiyTypeList();
this.resourceLabelListAPI();
this.getLookContent();
this.getNowTime();
//this.formSixBtn();
this.getMetaDataPlanList();
console.log(this.formData.fieldJsonArr, 'XXeeeeeeeeeee')
},
watch: {
$route: {
handler: function(val, oldVal){
console.log(oldVal, "()()(111");
if (val) {
oldVal.meta.keepAlive = false;
}
},
deep: true
},
searchWord: {
handler (newVal, oldVal) {
console.log( newVal )
this.searchPageLableForm.search = newVal;
this.getSearchPageLable ();
},
deep: true,
immediate: true
}
},
methods: {
showMark() {
this.isShowMark = true;
},
changeVal(val) {
this.isShowMark = val;
},
locationChange(val) {
console.log(val,"YYY")
this.location = '经度' + val.lng + ',' + '维度' + val.lat + ',' + val.localWhere;
this.formData.longitude = val.lng;
this.formData.latitude = val.lat;
this.formData.address = val.localWhere;
},
showEntityMark() {
this.isShowLineEntityMark = true;
window.scrollTo(0,0)
},
changeStateVal(val) {
this.isShowLineEntityMark = val;
},
getEntity(val) {
this.entityData = val;
let entityArr = [];
val.map((item, index) => {
let entityObj = {
keyword: item.keyword,
participleId: item.id,
participleType: item.state
};
entityArr.push(entityObj)
});
this.formData.relationParticiple = entityArr;
},
deleteEntity(key,item) {
this.entityData.splice(key, 1);
item.choosedAlready = false;
},
// 上传附件有关
beforeUpload(file) {
console.log(file, '11!!')
let type = file.name.slice(file.name.lastIndexOf(".") + 1).toLowerCase();
console.log(type,"0000")
const isLt100M = file.size / 1024 / 1024 < 100;
if (!isLt100M) {
this.$message.error("上传附件大小不能超过100M!");
return isLt100M;
}
var isType;
if (this.formData.resourceType == 1) {
isType = type == "doc" || type == "docx" || type == "pdf" || type == "txt";
if (!isType) {
this.$message.error("上传附件格式工为doc, docx, pdf, txt!");
return isType;
} else {
this.$message.warning("上传中");
}
} else if (this.formData.resourceType == 2) {
isType = type == "jpeg" || type == "png" || type == "gif" || type == "jpg";
if (!isType) {
this.$message.error("上传附件格式工为jpeg, png, gif, jpg!");
return isType;
} else {
this.$message.warning("上传中");
}
} else if (this.formData.resourceType == 3) {
isType = type == "mp3" || type == "mpeg" || type == "wma";
if (!isType) {
this.$message.error("上传附件格式工为mp3, mpeg, wma!");
return isType;
} else {
this.$message.warning("上传中");
}
} else if (this.formData.resourceType == 4) {
isType = type == "mp4" || type == "avi" || type == "flv" || type == "mov";
if (!isType) {
this.$message.error("上传附件格式工为mp4, avi, flv, mov!");
return isType;
} else {
this.$message.warning("上传中");
}
} else if (this.formData.resourceType == 5) {
isType = type == "abc" || type == "fbx" || type == "dae" || type == "obj" || type == "bvh" || type == "dxf" || type == "psk" || type == "stl" || type == "ply" || type == "x3d";
if (!isType) {
this.$message.error("上传附件格式工为abc, glTF, fbx, obj, dae, stl, 3ds, ply!");
return isType;
} else {
this.$message.warning("上传中");
}
}
},
handleSuccess(response, file, fileList) {
console.log(response, 'ooo');
this.$message.success("上传成功");
this.showProcess = false
this.formData.text = response.content;
this.formData.size = response.size;
this.formData.suffix = response.suffixName;
this.formData.fileName = response.fileName;
this.uploadFileName = response.originalFileName;
this.formData.pdfName = response.pdfPath;
this.formData.name = response.originalFileName
},
getresourceDiyTypeList() { //获取资源分类的数据
resourceDiyTypeAPI(1)
.then(res => {
if (res.data.code === 0) {
this.optionResourceDiyType = convertTree(res.data.data)
console.log(res.data.data, "()()")
console.log(this.optionResourceDiyType,"PP")
this.optionResourceDiyType.splice(0,1)
}
})
},
handleChange(val) {
//1234567就是id
console.log(val,'UU')
let idArr = [];
val.map((item, index) => {
var obj = {
dtId: item
}
idArr.push(obj)
})
this.formData.diyType = idArr;
},
selectOpt(value) {
let optIdArr = [];
value.map((item, index) => {
var obj = {
labelId: item
}
optIdArr.push(obj)
})
this.formData.label = optIdArr;
},
changeType(e) {//解决el-input type为textarea时候无法输入的问题
this.$forceUpdate()
},
resourceLabelListAPI() { //获取资源标签列表数据
resourceLabelListAPI()
.then(res => {
console.log(res, "III")
if (res.data.code === 0) {
this.resourceLabelList = res.data.data;
}
})
},
// commitResource: debounce(function() {// 提交资源防抖处理
// console.log(11)
// this.formData.fieldJson = JSON.stringify(this.formData.fieldJsonArr)
// const formOne = new Promise((resolve,reject) => {
// this.$refs['formOne'].validate(valid=>{
// if(valid) resolve()
// })
// });
// const formTwo = new Promise((resolve,reject) => {
// this.$refs['formTwo'].validate(valid => {
// if(valid) resolve()
// })
// });
// const formThree = new Promise((resolve,reject) => {
// this.$refs['formThree'].validate(valid => {
// if(valid) resolve()
// })
// });
// Promise.all([formOne, formTwo, formThree]).then(() => {
// resourceCommitAPI(this.formData)
// .then(res => {
// console.log(res, '%%%%%%%%%%%%%^')
// if (res.data.code === 0) {
// this.$message.success('提交成功');
// this.$router.back(-1);
// } else {
// this.$message.error('提交失败');
// }
// })
// })
// }),
commitResource: _.throttle(function() {// 提交资源节流处理
console.log(11)
this.formData.fieldJson = JSON.stringify(this.formData.fieldJsonArr)
const formOne = new Promise((resolve,reject) => {
this.$refs['formOne'].validate(valid=>{
if(valid) resolve()
})
});
const formTwo = new Promise((resolve,reject) => {
this.$refs['formTwo'].validate(valid => {
if(valid) resolve()
})
});
const formThree = new Promise((resolve,reject) => {
this.$refs['formThree'].validate(valid => {
if(valid) resolve()
})
});
Promise.all([formOne, formTwo, formThree]).then(() => {
resourceCommitAPI(this.formData)
.then(res => {
console.log(res, '%%%%%%%%%%%%%^')
if (res.data.code === 0) {
this.$message.success('提交成功');
this.$router.back(-1);
} else {
this.$message.error('提交失败');
}
})
})
}, 1000),
formSixBtn() {
if (this.$route.query.resourceType) {
this.isShowSavaBtn = true;
this.isShowSavaBtn1 = false;
}
},
getLookContent() {//查看
if(this.$route.query.oid && this.$route.query.flag) {
this.isShowSavaBtn1 = true;
this.isShowSavaBtn = false;
} else {
this.isShowSavaBtn1 = false;
this.isShowSavaBtn = true;
}
if (this.$route.query.oid) {
//this.isShowSavaBtn = true;
editItemAPI(this.$route.query.oid)
.then(res => {
console.log(res, 'OPOPOPO');
if (res.data.code === 0) {
this.formData = res.data.data;
this.$nextTick(() => this.$refs.formOne.clearValidate())
this.$nextTick(() => this.$refs.formTwo.clearValidate())
this.$nextTick(() => this.$refs.formThree.clearValidate())
if (res.data.data.moduleId) {
this.changeMetaDataVal1(res.data.data.moduleId);
setTimeout(() => {
this.fieldJsonData = JSON.parse(res.data.data.fieldJson);
},500)
}
if (res.data.data.name) {
this.uploadFileName = res.data.data.name;
}
if (res.data.data.longitude) {
this.location = '经度:' + res.data.data.longitude + ',' + '维度:' + res.data.data.latitude + ',' + res.data.data.address;
}
res.data.data.label.map((item, index) => {
this.$set(item, 'value', item.labelId);
this.resourceLabel.push(item.name)
})
res.data.data.diyType.map((item, index) => {
this.$set(item, 'value', item.dtId);
this.$set(item, 'label', item.typeName);
this.optionResourceDiyTypeShow.push(item.value);
})
if (res.data.data.participleList) {
this.entityData = res.data.data.participleList
}
}
})
} else {
return;
}
},
saveEdit() {//保存编辑
this.formData.fieldJson = JSON.stringify(this.fieldJsonData)
const formOne = new Promise((resolve,reject) => {
this.$refs['formOne'].validate(valid=>{
if(valid) resolve()
})
});
const formTwo = new Promise((resolve,reject) => {
this.$refs['formTwo'].validate(valid => {
if(valid) resolve()
})
});
const formThree = new Promise((resolve,reject) => {
this.$refs['formThree'].validate(valid => {
if(valid) resolve()
})
});
Promise.all([formOne, formTwo, formThree]).then(() => {
saveEditAPI(this.formData)
.then(res => {
if (res.data.code === 0) {
this.$message.success('保存变更成功');
this.$router.back(-1);
}
})
})
},
getNowTime() {
var now = new Date();
var year = now.getFullYear(); //得到年份
var month = now.getMonth(); //得到月份
var date = now.getDate(); //得到日期
month = month + 1;
month = month.toString().padStart(2, "0");
date = date.toString().padStart(2, "0");
var defaultDate = `${year}-${month}-${date}`;
// this.$set(this.searchFormField, "date", defaultDate);
console.log(defaultDate,"()***")
this.formData.formationTime = defaultDate;
console.log(this.formData.formationTime,"()***")
},
getMetaDataPlanList() {
getMetaDataPlanListAPI()
.then(res => {
console.log(res, '333333');
if (res.data.code === 0) {
this.options = res.data.data;
for (var i = this.options.length - 1; i >= 0; i--) {
if (this.options[i].status === 0) {
this.options.splice(i, 1)
this.$set(this.options[i], 'value', this.options[i].id)
}
}
}
})
},
changeMetaDataVal1(val) {
console.log(val, '小明不愛學習');
detailsAPI(val)
.then(res => {
console.log(res, '我是根據id查找的詳情');
if (res.data.code === 0) {
this.fieldJsonData = JSON.parse(res.data.data.fieldJson);
}
})
},
changeMetaDataVal(val) {
console.log(val, '小明不愛學習');
detailsAPI(val)
.then(res => {
console.log(res, '我是根據id查找的詳情');
if (res.data.code === 0) {
this.fieldJsonData = JSON.parse(res.data.data.fieldJson);
console.log(this.fieldJsonData, '222222');
this.fieldJsonData.map((item, index) => {
this.$set(item, 'metaDataValue', null)
var itemArr = [];
item.dynamicTags.map((item1, index1) => {
let itemObj = {
value: index1,
label: item1
}
itemArr.push(itemObj)
})
this.optionsOne = itemArr;
this.$set(item, 'reallSelectDataArr', this.optionsOne)
this.formData.fieldJsonArr = this.fieldJsonData;
})
}
})
},
handleProgress(event, file, fileList) {
//if (file.status === 'uploading') {
this.processLength = 0
this.showProcess = true
this.processLength = file.percentage.toFixed(0)*1;
//}
console.log(this.processLength, '22211aa')
},
getSearchPageLable () {
searchPageLableAPI(this.searchPageLableForm)
.then(res => {
console.log(res, '21312')
if ( res.data.code === 0 ) {
this.gridData = res.data.data.list
this.totalCount = res.data.data.total
for ( let [ index, ele ] of this.gridData.entries () ) {
this.$set( ele, 'value', ele.name )
}
}
})
},
showLableDia () {
this.dialogTableVisible = true;
this.getSearchPageLable ();
},
handleSelectionChange (val) {
// multipleSelection
console.log(val, '123val')
this.multipleSelection = val;
let optIdArr = [];
this.multipleSelection.map((item, index) => {
var obj = {
labelId: item.id
}
optIdArr.push(obj)
if (!this.resourceLabel.includes(item.name)) {
this.resourceLabel.push(item.name)
}
})
this.formData.label = optIdArr;
},
sureLable () {
// this.multipleSelection.map((item, index) => {
// if (!this.resourceLabel.includes(item.name)) {
// this.resourceLabel.push(item.name)
// }
// })
this.dialogTableVisible = false
},
deleteLableItem (key) {
this.resourceLabel.splice(key, 1)
},
querySearch (queryString, cb) {
var restaurants = this.gridData;
console.log(restaurants, '1231rr')
var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
cb(results);
},
createFilter (queryString) {
return (restaurant) => {
return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
};
},
handleSelect (item) {
console.log(item);
this.searchPageLableForm.search = item.value;
},
searchLable () {
this.getSearchPageLable ()
},
pagesizeFun(val){
this.searchPageLableForm.pageSize = val;
this.getSearchPageLable ()
},
currentPageFun(val){
this.searchPageLableForm.pageNum = val;
this.getSearchPageLable ()
},
},
beforeRouteLeave(to, from, next) {
from.meta.keepAlive = false;
next();
},
}
</script>
<style lang="less" scoped>
.commitBox {
width:100%;
padding:37px 40px 0;
}
.resourceCommitTop {
width:100%;
padding-bottom:23px;
em {
font-style:normal;
color:#3F4560;
font-size:20px;
}
}
.formBox {
width:100%;
h2 {
color:#293C6C;
font-size:18px;
margin:40px 0 46px 0;
}
// .el-form-item {
// margin-bottom:12px;
// }
em {
font-style:normal;
color:#FBA57F;
font-size:12px;
display:block;
margin-top:-5px;
}
.formLeft,.formBottomLeft {
margin-right:20px;
}
.formLeft,.formRight{
float:left;
width:calc(50% - 10px);
background:#fff;
padding:0 40px;
}
.formBottomLeft {
width:100%;
padding:0 40px;
position:relative;
.specialSelect {
position:absolute;
right:40px;
top:40px;
}
.el-form {
display:flex;
flex-wrap:wrap;
margin-top:80px;
}
.el-form-item {
width:50%;
&:nth-of-type(2n+1) {
width:calc(50% - 40px);
}
&:nth-of-type(2n) {
margin-left:40px;
}
}
}
.formRight, .formLeft {
padding-bottom:26px;
height:822px;
}
.formBottom {
width:100%;
float:left;
background:#fff;
margin-top:20px;
}
}
.threeBtn {
width:100%;
height:80px;
background:#fff;
clear:both;
text-align:center;
button {
border-radius:4px;
font-size:14px;
font-weight:bold;
outline:none;
margin-top:21px;
cursor:pointer;
&:nth-of-type(1) {
color:#666666;
width:98px;
height:38px;
background:#fff;
border:1px solid #DCDFE6;
}
&:nth-of-type(2) {
color:#FFFFFF;
width:130px;
height:38px;
background:#4A94FE;
border:none;
margin:0 13px;
}
&:nth-of-type(3),&:nth-of-type(4) {
color:#FFFFFF;
width:98px;
height:38px;
background:#4A94FE;
border:none;
}
}
}
.entitySpan {
display:inline-block;
padding:0 11px;
height:28px;
line-height:28px;
border:1px solid #C9E4FF;
background:#EBF5FF;
color:#55A3FF;
font-size:12px;
margin:0 10px 10px 0;
cursor:pointer;
}
.entityDataCon {
height:36px;
border:1px solid #DCDFE6;
border-top-left-radius:4px;
border-bottom-left-radius:4px;
flex:1;
overflow-y:auto;
padding:0 9px;
&::-webkit-scrollbar {
width:5px;
height:5px;
}
}
.el-autocomplete {
width:50%;
margin-bottom:10px;
}
.my-autocomplete {
li {
line-height: normal;
padding: 7px;
.name {
text-overflow: ellipsis;
overflow: hidden;
}
.addr {
font-size: 12px;
color: #b4b4b4;
}
.highlighted .addr {
color: #ddd;
}
}
}
</style>
<style lang="scss">
@import './index'
</style>
\ No newline at end of file
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论