فهرست منبع

新增上传模块

YaolongHan 5 سال پیش
والد
کامیت
3cc8799d67

+ 129 - 0
src/components/model/file/addFloorDialog.vue

@@ -0,0 +1,129 @@
+<template>
+  <!-- 新增楼层 -->
+  <div id="addFloorDialog">
+    <el-dialog title="新增楼层" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
+      <el-form ref="form" :model="form" label-width="80px">
+        <el-form-item ref="form" :model="form" label-width="80px">
+          <el-form-item label="活动名称">
+            <el-upload
+              class="upload-demo"
+              ref="upload"
+              action="https://jsonplaceholder.typicode.com/posts/"
+              :on-preview="handlePreview"
+              :on-remove="handleRemove"
+              :file-list="fileList"
+              :auto-upload="false"
+              :limit="1"
+            >
+              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
+            </el-upload>
+          </el-form-item>
+          <el-form-item label="模型所属楼层">
+            <div class="floorModle">
+              <el-select v-model="value" placeholder="请选择">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                ></el-option>
+              </el-select>
+              <!-- 计数 -->
+              <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
+              <!-- 是否夹层 -->
+              <el-radio v-model="radio" label="1">是否夹层</el-radio>
+              <!-- 夹层选择 -->
+              <el-select v-model="value" placeholder="请选择">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                ></el-option>
+              </el-select>
+            </div>
+          </el-form-item>
+          <el-form-item label="活动形式">
+            <el-input type="textarea" v-model="form.desc"></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="onSubmit">立即创建</el-button>
+            <el-button>取消</el-button>
+          </el-form-item>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      dialogVisible: false,
+      form: {
+        name: "",
+        region: "",
+        date1: "",
+        date2: "",
+        delivery: false,
+        type: [],
+        resource: "",
+        desc: ""
+      },
+      fileList: [],
+      radio: "1", //是否夹层
+      options: [
+        {
+          value: "选项1",
+          label: "黄金糕"
+        },
+        {
+          value: "选项2",
+          label: "双皮奶"
+        },
+        {
+          value: "选项3",
+          label: "蚵仔煎"
+        },
+        {
+          value: "选项4",
+          label: "龙须面"
+        },
+        {
+          value: "选项5",
+          label: "北京烤鸭"
+        }
+      ],
+      value: "",
+      num:0
+    };
+  },
+  methods: {
+    onSubmit() {
+      console.log("submit!");
+    },
+    // /上传到服务器/
+    submitUpload() {
+      this.$refs.upload.submit();
+    },
+    handleClose() {
+
+    },
+    handleRemove(file, fileList) {
+      console.log(file, fileList);
+    },
+    handlePreview(file) {
+      console.log(file);
+    },
+    handleChange(){}
+  }
+};
+</script>
+<style lang="less">
+#addFloorDialog {
+  .floorModle {
+    display: flex;
+    justify-content: left;
+  }
+}
+</style>

+ 24 - 0
src/components/model/file/addFolder.vue

@@ -0,0 +1,24 @@
+<template>
+  <div id="addFolder">
+    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
+        <div>
+            文件夹名称:
+            <el-input v-model="input" placeholder="请输入内容"></el-input>
+        </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      dialogVisible: false,
+      input:''
+    };
+  }
+};
+</script>

+ 104 - 0
src/components/model/file/modelLog.vue

@@ -0,0 +1,104 @@
+<template>
+  <!-- 模型日志弹窗 -->
+  <div id="modelLog">
+    <el-dialog title="模型日志" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
+      <div class="bodys">
+        <el-button plain icon="el-icon-delete" class="delete-model" @click="deleteModel">删除模型</el-button>
+        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+          <el-tab-pane label="上传日志" name="first">
+            <el-table :data="tableData" stripe style="width: 100%">
+              <el-table-column prop="date" label="版本"></el-table-column>
+              <el-table-column prop="name" label="上传时间"></el-table-column>
+              <el-table-column prop="address" label="上传人"></el-table-column>
+              <el-table-column prop="address" label="操作">
+                <template slot-scope="scope">
+                  <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-tab-pane>
+          <el-tab-pane label="工程改造" name="second">配置管理</el-tab-pane>
+        </el-tabs>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      dialogVisible: false, //是否显示该弹窗
+      activeName: "first",  //默认选择上传日志
+      tableData: [          //列表数据
+        {
+          date: "2016-05-02",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄"
+        },
+        {
+          date: "2016-05-04",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1517 弄"
+        },
+        {
+          date: "2016-05-01",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1519 弄"
+        },
+        {
+          date: "2016-05-03",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1516 弄"
+        }
+      ]
+    };
+  },
+  methods: {
+    handleClose(done) {
+      this.$confirm("确认关闭?")
+        .then(_ => {
+          done();
+        })
+        .catch(_ => {});
+    },
+    handleClick() {},
+    /**
+     * 删除模型
+     *
+     */
+    deleteModel() {
+      this.$confirm("此操作只可删除楼层模型文件,已经识别的对象及关系等,暂不可删除。确定删除?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+        .then(() => {
+          this.$message({
+            type: "success",
+            message: "删除成功!"
+          });
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消删除"
+          });
+        });
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+#modelLog {
+  .bodys {
+    position: relative;
+    .delete-model {
+      position: absolute;
+      right: 0;
+      top: 0;
+      z-index: 10;
+    }
+  }
+}
+</style>
+

+ 81 - 0
src/components/model/file/replaceModelDialog.vue

@@ -0,0 +1,81 @@
+ <!-- 替换模型弹窗 -->
+<template>
+  <div id="replaceModel">
+    <el-dialog title="替换模型" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
+      <el-form ref="form" :model="form" label-width="80px">
+        <el-form-item ref="form" :model="form" label-width="80px">
+          <el-form-item label="上传新模型">
+            <el-upload
+              class="upload-demo"
+              ref="upload"
+              action="https://jsonplaceholder.typicode.com/posts/"
+              :on-preview="handlePreview"
+              :on-remove="handleRemove"
+              :file-list="fileList"
+              :auto-upload="false"
+              limit="1"
+            >
+              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
+            </el-upload>
+          </el-form-item>
+          <el-form-item label="选择模型文件替换原因:">
+            <div class="radios">
+              <el-radio v-model="radio" label="1">之前模型画错,要修改</el-radio>
+              <el-radio v-model="radio" label="2">因工程改造,更新模型文件</el-radio>
+            </div>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="onSubmit">立即创建</el-button>
+            <el-button>取消</el-button>
+          </el-form-item>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      dialogVisible: false,
+      form: {
+        name: "",
+        region: "",
+        date1: "",
+        date2: "",
+        delivery: false,
+        type: [],
+        resource: "",
+        desc: ""
+      },
+      radio:1,
+      fileList: []
+    };
+  },
+  methods: {
+    onSubmit() {
+      console.log("submit!");
+    },
+    handleClose() {},
+    // /上传到服务器/
+    submitUpload() {
+      this.$refs.upload.submit();
+    },
+    handleRemove(file, fileList) {
+      console.log(file, fileList);
+    },
+    handlePreview(file) {
+      console.log(file);
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+#replaceModel {
+  .radios {
+    display: flex;
+    flex-direction: column;
+  }
+}
+</style>
+

+ 187 - 20
src/views/model/file/index.vue

@@ -1,28 +1,195 @@
 <template>
-    <div>
-      <das-board>
-        <template v-slot:explain>
-          <span>{{explain}}</span>
-        </template>
-        <template v-slot:time>
-          <span>{{time}}</span>
-        </template>
-      </das-board>
-    </div>
+  <div id="file_moddle_manage">
+    <!-- 左边模型文件夹列表 -->
+    <el-col :span="5">
+      <div class="grid-content grid-left">
+        <el-card class="box-card" :body-style="{ padding: '0px' }">
+          <div class="top_hand left_top_hand">
+            <div class="folder-box">
+              <i class="box-icon el-icon-circle-plus-outline"></i>
+              <i class="box-icon el-icon-remove-outline"></i>
+            </div>
+            <div class="file-box">
+              <i class="box-icon el-icon-edit"></i>
+            </div>
+          </div>
+          <div class="folder-list">
+            <div class="head">模型文件夹</div>
+            <ul class="lists">
+              <li @click="openFolder">文件夹1</li>
+              <li @click="openFolder">文件夹2</li>
+              <li @click="openFolder">文件夹13</li>
+              <li @click="openFolder">文件夹4</li>
+            </ul>
+          </div>
+        </el-card>
+      </div>
+    </el-col>
+    <!-- 右边文件表格 -->
+    <el-col :span="19">
+      <div class="grid-content"></div>
+      <el-card class="box-card" :body-style="{ padding: '0px' }">
+        <!-- 顶部操作栏 -->
+        <div class="top_hand right_top_hand">
+          <el-button type="primary">添加楼层文件</el-button>
+          <el-button type="primary" round>刷新</el-button>
+        </div>
+        <el-table
+          :data="tableData"
+          style="width: 100%"
+          :header-cell-style="{background:'#909399',color:'#000'}"
+        >
+          <el-table-column prop="date" label="模型文件" width="180">
+            <template slot-scope="scope">
+              <i class="el-icon-document-checked" width="30" height="30"></i>
+              <span style="margin-left: 10px">{{ scope.row.date }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="name" label="备注" width="180"></el-table-column>
+          <el-table-column prop="address" label="版本号"></el-table-column>
+          <el-table-column prop="address" label="上传时间"></el-table-column>
+          <el-table-column prop="address" label="上传人"></el-table-column>
+          <el-table-column prop="address" label="操作">
+            <template slot-scope="scope">
+              <el-button  type="primary" icon="el-icon-download"></el-button>
+              <el-button type="primary" icon="el-icon-goods" @click="handleClick(scope.row)"></el-button>
+              <el-button  type="primary" icon="el-icon-date"></el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-card>
+    </el-col>
+    <!-- 弹窗 开始-->
+
+    <!-- 模型日志弹窗 -->
+    <modelLog></modelLog>
+    <!-- 替换模型弹窗 -->
+    <repliceModel></repliceModel>
+    <!-- 新增楼层 -->
+    <addFloorDialog></addFloorDialog>
+    <!-- 新增文件夹名称 -->
+    <addFolder></addFolder>
+    <!-- 弹窗 结束-->
+
+  </div>
 </template>
 
 <script>
 import dasBoard from "@/views/dasboard/index";
+import modelLog from "@/components/model/file/modelLog" //模型日志弹窗
+import repliceModel from '@/components/model/file/replaceModelDialog' //替换模型弹窗
+import addFloorDialog from '@/components/model/file/addFloorDialog' //新增楼层弹窗
+import addFolder from '@/components/model/file/addFolder' //新增文件夹
 export default {
-    components: {
-      dasBoard
-    },
-    data() {
-        return {
-          explain:"模型文件管理",
-          time:"2019-06-25"
+  components: {
+    dasBoard,
+    modelLog,
+    repliceModel,
+    addFloorDialog,
+    addFolder
+  },
+  data() {
+    return {
+      explain: "模型文件管理",
+      time: "2019-06-25",
+      tableData: [
+        {
+          date: "2016-05-02",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄"
+        },
+        {
+          date: "2016-05-04",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1517 弄"
+        },
+        {
+          date: "2016-05-01",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1519 弄"
+        },
+        {
+          date: "2016-05-03",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1516 弄"
         }
-    },
-    mounted() {}
+      ]
+    };
+  },
+  methods: {
+    openFolder() {}
+  },
+  mounted() {}
+};
+</script>
+<style lang="less" scoped>
+#file_moddle_manage {
+  width: 100%;
+  .box-card {
+    min-height: 800px;
+  }
+  .grid-left {
+    padding-right: 10px;
+    box-sizing: border-box;
+  }
+  // 顶部
+  .top_hand {
+    height: 60px;
+    width: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+    display: flex;
+  }
+  .left_top_hand {
+    align-items: center;
+    justify-content: space-between;
+    .folder-box {
+      display: flex;
+      height: 40px;
+      flex-direction: row;
+    }
+    .box-icon {
+      width: 40px;
+      height: 40px;
+      font-size: 30px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      float: left;
+    }
+  }
+  // 左侧文件夹列表
+  .folder-list {
+    width: 100%;
+    .head {
+      height: 42px;
+      width: 100%;
+      padding-left: 10px;
+      box-sizing: border-box;
+      background: #909399;
+      color: #000;
+      display: flex;
+      justify-content: left;
+      align-items: center;
+      font-weight: bold;
+    }
+    .lists {
+      width: 100%;
+      li {
+        height: 42px;
+        display: flex;
+        justify-content: left;
+        align-items: center;
+        padding-left: 20px;
+        box-sizing: border-box;
+      }
+      li:hover {
+        background: #909399;
+      }
+      .li-active {
+        background: #909399;
+      }
+    }
+  }
 }
-</script>
+</style>