|
|
@@ -0,0 +1,392 @@
|
|
|
+<!-- -->
|
|
|
+<template>
|
|
|
+ <div class="template">
|
|
|
+ <div class="top">
|
|
|
+ <div class="location">数据管理 / 项目资料 / <span>新增</span></div>
|
|
|
+ </div>
|
|
|
+ <div class="conten">
|
|
|
+ <div class="search">
|
|
|
+ <div class="txt">项目数据新增</div>
|
|
|
+ <ul>
|
|
|
+ <li
|
|
|
+ v-for="(item, index) in topTab"
|
|
|
+ :key="index"
|
|
|
+ :class="{ active: topTabInd === index }"
|
|
|
+ @click="tabCut(index)"
|
|
|
+ >
|
|
|
+ <a :href="item.id">{{ item.name }}</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="tabAll">
|
|
|
+ <!-- 项目详情 -->
|
|
|
+ <div id="tab0" class="conten_box">
|
|
|
+ <div class="title">项目详情</div>
|
|
|
+ <div class="from">
|
|
|
+ <el-form
|
|
|
+ :model="ruleForm"
|
|
|
+ :rules="rules"
|
|
|
+ ref="ruleForm"
|
|
|
+ label-width="100px"
|
|
|
+ class="demo-ruleForm"
|
|
|
+ >
|
|
|
+ <el-form-item label="项目名称：" prop="name">
|
|
|
+ <el-input
|
|
|
+ v-model="ruleForm.name"
|
|
|
+ placeholder="请输入项目名称"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="项目时间：">
|
|
|
+ <el-input
|
|
|
+ v-model="ruleForm.age"
|
|
|
+ placeholder="请输入项目时间"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="项目分类：">
|
|
|
+ <el-select v-model="ruleForm.typeId">
|
|
|
+ <el-option label="区域一" value="shanghai"></el-option>
|
|
|
+ <el-option label="区域二" value="beijing"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="展示形式：">
|
|
|
+ <el-select v-model="ruleForm.application">
|
|
|
+ <el-option label="网页端" value="web"></el-option>
|
|
|
+ <el-option label="移动端" value="app"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="应用技术：">
|
|
|
+ <el-select v-model="ruleForm.technology">
|
|
|
+ <el-option label="实景拍摄" value="live"></el-option>
|
|
|
+ <el-option label="虚拟建模" value="virtual"></el-option>
|
|
|
+ <el-option label="四维看看" value="4dkk"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="保密级别：">
|
|
|
+ <el-select v-model="ruleForm.level">
|
|
|
+ <el-option label="一般--所有人可查阅" :value="1"></el-option>
|
|
|
+ <el-option
|
|
|
+ label="秘密--查阅人为公司内部所有员工，经过允许可对外分享"
|
|
|
+ :value="2"
|
|
|
+ ></el-option>
|
|
|
+ <el-option
|
|
|
+ label="机密--查阅人为管理员、项目负责人、获得允许的员工"
|
|
|
+ :value="3"
|
|
|
+ ></el-option>
|
|
|
+ <el-option
|
|
|
+ label="绝密--查阅人仅为管理员、项目负责人"
|
|
|
+ :value="4"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="项目合作方：">
|
|
|
+ <el-input
|
|
|
+ v-model="ruleForm.cooperation"
|
|
|
+ placeholder="请输入项目合作方"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div id="tab1" class="conten_box">
|
|
|
+ <div class="title">项目网址</div>
|
|
|
+
|
|
|
+ <div class="row" v-for="(item, index) in tab1Arr" :key="index">
|
|
|
+ <el-input v-model="tab1Arr[index].name" placeholder="网址名称" style="width:200px;margin-right: 20px;"></el-input>
|
|
|
+ <el-input v-model="tab1Arr[index].herf" placeholder="URL网址链接" style="width:500px"></el-input>
|
|
|
+ <i class="el-icon-circle-close" @click="tab1Del(index)" v-if="index!==0"></i>
|
|
|
+ <div class="tab_btn" @click="tab1Add" v-else>+ 添加网址</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div id="tab2" class="conten_box">
|
|
|
+ <div class="title">三维场景</div>
|
|
|
+
|
|
|
+ <div class="row" v-for="(item, index) in tab2Arr" :key="index">
|
|
|
+ <el-input v-model="tab2Arr[index].name" placeholder="场景名称" style="width:200px;margin-right: 20px;"></el-input>
|
|
|
+ <el-input v-model="tab2Arr[index].herf" placeholder="URL网址链接" style="width:500px"></el-input>
|
|
|
+ <i class="el-icon-circle-close" @click="tab2Del(index)" v-if="index!==0"></i>
|
|
|
+ <div class="tab_btn" @click="tab2Add" v-else>+ 添加场景</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div id="tab3" class="conten_box">
|
|
|
+ <div class="title">资料文档</div>
|
|
|
+ <el-upload
|
|
|
+ class="upload-demo"
|
|
|
+ drag
|
|
|
+ action="https://jsonplaceholder.typicode.com/posts/"
|
|
|
+ multiple
|
|
|
+ >
|
|
|
+ <i class="el-icon-upload"></i>
|
|
|
+ <div class="el-upload__text">
|
|
|
+ 将文件拖到此处，或<em>点击上传</em>
|
|
|
+ </div>
|
|
|
+ <div class="el-upload__tip" slot="tip">
|
|
|
+ 只能上传jpg/png文件，且不超过500kb
|
|
|
+ </div>
|
|
|
+ </el-upload>
|
|
|
+ <div class="imgBox">
|
|
|
+ <div>
|
|
|
+ <img src="@/assets/img/wd1.png" alt="" />12345678911111111
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div id="tab4" class="conten_box">
|
|
|
+ <div class="title">文物</div>
|
|
|
+ <div class="imgBox">
|
|
|
+ <div>
|
|
|
+ <img src="@/assets/img/logo22.png" alt="" />1234567891111111111111
|
|
|
+ </div>
|
|
|
+ <div><img src="@/assets/img/logo22.png" alt="" />12345678</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 底部按钮 -->
|
|
|
+ <div class="button_btn">
|
|
|
+ <div @click="$router.go(-1)">取 消</div>
|
|
|
+ <div class="edit">保 存</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
|
|
+// 例如：import 《组件名称》 from '《组件路径》';
|
|
|
+
|
|
|
+export default {
|
|
|
+ // import引入的组件需要注入到对象中才能使用
|
|
|
+ name: 'tab1Add',
|
|
|
+ components: {},
|
|
|
+ data () {
|
|
|
+ // 这里存放数据
|
|
|
+ return {
|
|
|
+ // 项目网址数据
|
|
|
+ tab1Arr: [{ name: '', href: '' }],
|
|
|
+ tab1: {
|
|
|
+ name: '',
|
|
|
+ herf: ''
|
|
|
+ },
|
|
|
+ // 三维场景数据
|
|
|
+ tab2Arr: [{ name: '', href: '' }],
|
|
|
+ tab2: {
|
|
|
+ name: '',
|
|
|
+ herf: ''
|
|
|
+ },
|
|
|
+ topTabInd: 0,
|
|
|
+ topTab: [
|
|
|
+ { name: '项目详情', id: '#tab0' },
|
|
|
+ { name: '项目网址', id: '#tab1' },
|
|
|
+ { name: '三维场景', id: '#tab2' },
|
|
|
+ { name: '资料文档', id: '#tab3' },
|
|
|
+ { name: '文物', id: '#tab4' }
|
|
|
+ ],
|
|
|
+ ruleForm: {
|
|
|
+ name: '',
|
|
|
+ age: '',
|
|
|
+ typeId: 'shanghai',
|
|
|
+ application: 'web',
|
|
|
+ technology: 'live',
|
|
|
+ level: 1,
|
|
|
+ cooperation: ''
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ name: { required: true, message: '请输入项目名称', trigger: 'blur' }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 监听属性 类似于data概念
|
|
|
+ computed: {},
|
|
|
+ // 监控data中的数据变化
|
|
|
+ watch: {},
|
|
|
+ // 方法集合
|
|
|
+ methods: {
|
|
|
+ // 上面的tab栏切换
|
|
|
+ tabCut (index) {
|
|
|
+ this.topTabInd = index
|
|
|
+ },
|
|
|
+ // 点击添加网址
|
|
|
+ tab1Add () {
|
|
|
+ this.tab1Arr.push({ name: '', href: '' })
|
|
|
+ },
|
|
|
+ tab1Del (index) {
|
|
|
+ this.$confirm('确定删除吗?', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ this.tab1Arr.splice(index, 1)
|
|
|
+ this.$message.success('删除成功!')
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.$message.info('已取消删除!')
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 点击添加场景
|
|
|
+ tab2Add () {
|
|
|
+ this.tab2Arr.push({ name: '', href: '' })
|
|
|
+ },
|
|
|
+ tab2Del (index) {
|
|
|
+ this.$confirm('确定删除吗?', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ this.tab2Arr.splice(index, 1)
|
|
|
+ this.$message.success('删除成功!')
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.$message.info('已取消删除!')
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 生命周期 - 创建完成（可以访问当前this实例）
|
|
|
+ created () {},
|
|
|
+ // 生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
+ mounted () {},
|
|
|
+ beforeCreate () {}, // 生命周期 - 创建之前
|
|
|
+ beforeMount () {}, // 生命周期 - 挂载之前
|
|
|
+ beforeUpdate () {}, // 生命周期 - 更新之前
|
|
|
+ updated () {}, // 生命周期 - 更新之后
|
|
|
+ beforeDestroy () {}, // 生命周期 - 销毁之前
|
|
|
+ destroyed () {}, // 生命周期 - 销毁完成
|
|
|
+ activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang='less' scoped>
|
|
|
+/deep/.el-select {
|
|
|
+ width: 500px;
|
|
|
+}
|
|
|
+//@import url(); 引入公共css类
|
|
|
+.template {
|
|
|
+ position: relative;
|
|
|
+ padding: 0px 30px;
|
|
|
+ .top {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 58px;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .location {
|
|
|
+ font-size: 22px;
|
|
|
+ color: #999;
|
|
|
+ & > span {
|
|
|
+ color: black;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .conten {
|
|
|
+ width: 100%;
|
|
|
+ height: 720px;
|
|
|
+ .txt {
|
|
|
+ font-weight: 700;
|
|
|
+ height: 40px;
|
|
|
+ border-bottom: 2px dashed black;
|
|
|
+ }
|
|
|
+ .search {
|
|
|
+ position: relative;
|
|
|
+ padding: 15px 20px 0;
|
|
|
+ border-radius: 5px;
|
|
|
+ box-shadow: 0px 0px 5px 0px;
|
|
|
+ height: 110px;
|
|
|
+ background-color: #d8dadc;
|
|
|
+ ul {
|
|
|
+ margin-top: 15px;
|
|
|
+ display: flex;
|
|
|
+ li {
|
|
|
+ padding-bottom: 5px;
|
|
|
+ cursor: pointer;
|
|
|
+ color: #666;
|
|
|
+ margin-right: 100px;
|
|
|
+ }
|
|
|
+ li:hover {
|
|
|
+ color: black;
|
|
|
+ border-bottom: 2px solid #dc3545;
|
|
|
+ }
|
|
|
+ .active {
|
|
|
+ color: black;
|
|
|
+ border-bottom: 2px solid #dc3545;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .conten_box {
|
|
|
+ position: relative;
|
|
|
+ padding: 15px 30px;
|
|
|
+ background-color: #fff;
|
|
|
+ margin-top: 10px;
|
|
|
+ .title {
|
|
|
+ font-weight: 700;
|
|
|
+ padding-bottom: 8px;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #c82333;
|
|
|
+ border-bottom: 1px solid #ccc;
|
|
|
+ }
|
|
|
+ .from {
|
|
|
+ margin-top: 22px;
|
|
|
+ width: 600px;
|
|
|
+ }
|
|
|
+ .tab_btn {
|
|
|
+ margin-left: 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ color: #fff;
|
|
|
+ width: 130px;
|
|
|
+ height: 40px;
|
|
|
+ border-radius: 10px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background-color: #dc3545;
|
|
|
+ }
|
|
|
+ .row {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin: 15px 0 0;
|
|
|
+ & > div {
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+ a {
|
|
|
+ background-color: #e7e9eb;
|
|
|
+ padding: 5px 10px;
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+ i {
|
|
|
+ margin-left: 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tabAll {
|
|
|
+ max-height: 600px;
|
|
|
+ overflow-y: auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .button_btn {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ position: absolute;
|
|
|
+ left: 100px;
|
|
|
+ bottom: 30px;
|
|
|
+ width: 300px;
|
|
|
+ height: 40px;
|
|
|
+ div {
|
|
|
+ border-radius: 10px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ width: 100px;
|
|
|
+ height: 40px;
|
|
|
+ background-color: #fff;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .edit {
|
|
|
+ color: #fff !important;
|
|
|
+ background-color: #dc3545 !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+</style>
|
