工具管理、技术交流平台、统计分析、消息中心静态页面调整

src/views/tool/AddDoc.vue

@@ -0,0 +1,58 @@
+<template>
+  <el-dialog title="新增文档" :visible.sync="visible" width="85%" append-to-body>
+    <edit-document ref="editDocumentRef" :toolId="toolId" @submit="editDocumentSubmit"/>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="$refs.editDocumentRef.submitForm()">确 定</el-button>
+      <el-button @click="cancel()">取 消</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import editDocument from "../document/editDocument";
+export default {
+  components: {
+    editDocument
+  },
+  props: {
+    /**
+     * 控制显示/隐藏
+     */
+    show: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * 工具id
+     */
+    toolId: {
+      type: String,
+      default: true
+    }
+  },
+  computed: {
+    visible: {
+      get() {
+        return this.show
+      },
+      set(val) {
+        this.$emit('update:show', false)
+      }
+    }
+  },
+  data () {
+    return {
+
+    }
+  },
+  methods: {
+    editDocumentSubmit(){
+      this.$emit('callback')
+      this.visible = false
+    },
+    cancel() {
+      this.$refs.editDocumentRef.cancel()
+      this.visible = false
+    }
+  }
+}
+</script>

src/views/tool/index.vue

@@ -88,7 +88,7 @@
             icon="el-icon-plus"
             @click="handleAdd"
             v-hasPermi="['system:user:add']"
-          >新增</el-button>
+          >工具发布</el-button>
           <el-button type="primary" icon="el-icon-position">发布</el-button>
           <el-button icon="el-icon-thumb" @click="applyUse()">申请使用</el-button>
           <el-button icon="el-icon-delete">批量删除</el-button>
@@ -150,7 +150,7 @@
     </el-card><!--el-card-->
 
     <!-- 添加或修改工具信息对话框 -->
-    <el-drawer :visible.sync="addDrawerOpen" size="75%">
+    <el-drawer :visible.sync="addDrawerOpen" size="75%" @open="openEvent">
       <template #title>
         <span>新增工具</span>
         <div class="drawer-head-btn">
@@ -160,104 +160,150 @@
       </template>
       <div class="el-form-border">
         <el-form ref="form" :model="form" :rules="rules" label-width="150px">
-          <el-row>
-            <el-col :span="12">
-              <el-form-item label="工具编号" prop="toolCode">
-                <el-input v-model="form.toolCode" placeholder="请输入工具编号"/>
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="工具名称" prop="toolName">
-                <el-input v-model="form.toolName" placeholder="请输入工具名称"/>
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <el-row>
-            <el-col :span="12">
-              <el-form-item label="负责人" prop="toolPrincipals">
-                <el-input v-model="form.toolPrincipalsName" placeholder="请选择负责人" maxlength="11" @focus="toolPrincipalsChoose = true"/>
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="归属部门" prop="toolRespDept">
-                <treeselect v-model="form.toolRespDept" :options="deptOptions" :show-count="true" placeholder="请选择归属部门" />
-              </el-form-item>
-            </el-col>
+          <div>
+            <div class="box-title">
+              基本信息
+            </div>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="工具编号" prop="toolCode">
+                  <el-input v-model="form.toolCode" placeholder="请输入工具编号"/>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="工具名称" prop="toolName">
+                  <el-input v-model="form.toolName" placeholder="请输入工具名称"/>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="负责人" prop="toolPrincipals">
+                  <el-input v-model="form.toolPrincipalsName" placeholder="请选择负责人" maxlength="11" @focus="toolPrincipalsChoose = true"/>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="归属部门" prop="toolRespDept">
+                  <treeselect v-model="form.toolRespDept" :options="deptOptions" :show-count="true" placeholder="请选择归属部门" />
+                </el-form-item>
+              </el-col>
 
-          </el-row>
-          <el-row>
-            <el-col :span="12">
-              <el-form-item label="工具来源" prop="toolSource">
-                <el-input v-model="form.toolSource" placeholder="请输入工具来源"/>
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="工具用途" prop="toolUse">
-                <el-input v-model="form.toolUse" placeholder="请输入工具用途" />
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <el-row>
-            <el-col :span="12">
-              <el-form-item label="工具类别">
-                <el-select v-model="form.toolType" placeholder="请选择工具类别" style="width: 100%">
-                  <el-option
-                    v-for="dict in dict.type.tool_type"
-                    :key="dict.value"
-                    :label="dict.label"
-                    :value="dict.value"
-                  ></el-option>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="状态">
-                <el-radio-group v-model="form.status">
-                  <el-radio
-                    v-for="dict in dict.type.sys_normal_disable"
-                    :key="dict.value"
-                    :label="dict.value"
-                  >{{dict.label}}</el-radio>
-                </el-radio-group>
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <el-row>
-            <el-col :span="24">
-              <el-form-item label="测试情况">
-                <el-input v-model="form.testSituation" type="textarea" :rows="3" maxlength="500" show-word-limit></el-input>
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <el-row>
-            <el-col :span="24">
-              <el-form-item label="功能描述">
-                <el-input v-model="form.functionDesc" type="textarea" :rows="3" maxlength="500" show-word-limit></el-input>
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <el-row>
-            <el-col :span="24">
-              <el-form-item label="适用条件">
-                <el-input v-model="form.applyCondition" type="textarea" :rows="3" maxlength="500" show-word-limit></el-input>
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <el-row>
-            <el-col :span="24">
-              <el-form-item label="操作说明">
-                <el-input v-model="form.operateExplain" type="textarea" :rows="3" maxlength="500" show-word-limit></el-input>
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <el-row>
-            <el-col :span="24">
-              <el-form-item label="备注">
-                <el-input v-model="form.remark" type="textarea" :rows="3" maxlength="500" show-word-limit></el-input>
-              </el-form-item>
-            </el-col>
-          </el-row>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="工具来源" prop="toolSource">
+                  <el-input v-model="form.toolSource" placeholder="请输入工具来源"/>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="工具用途" prop="toolUse">
+                  <el-input v-model="form.toolUse" placeholder="请输入工具用途" />
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="工具类别">
+                  <el-select v-model="form.toolType" placeholder="请选择工具类别" style="width: 100%">
+                    <el-option
+                      v-for="dict in dict.type.tool_type"
+                      :key="dict.value"
+                      :label="dict.label"
+                      :value="dict.value"
+                    ></el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="状态">
+                  <el-radio-group v-model="form.status">
+                    <el-radio
+                      v-for="dict in dict.type.sys_normal_disable"
+                      :key="dict.value"
+                      :label="dict.value"
+                    >{{dict.label}}</el-radio>
+                  </el-radio-group>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="24">
+                <el-form-item label="测试情况">
+                  <el-input v-model="form.testSituation" type="textarea" :rows="3" maxlength="500" show-word-limit></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="24">
+                <el-form-item label="功能描述">
+                  <el-input v-model="form.functionDesc" type="textarea" :rows="3" maxlength="500" show-word-limit></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="24">
+                <el-form-item label="适用条件">
+                  <el-input v-model="form.applyCondition" type="textarea" :rows="3" maxlength="500" show-word-limit></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="24">
+                <el-form-item label="操作说明">
+                  <el-input v-model="form.operateExplain" type="textarea" :rows="3" maxlength="500" show-word-limit></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="24">
+                <el-form-item label="备注">
+                  <el-input v-model="form.remark" type="textarea" :rows="3" maxlength="500" show-word-limit></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </div>
+          <div>
+            <div class="box-title">
+              关联附件
+            </div>
+            <div class="operate">
+              <el-button type="primary" icon="el-icon-upload2" @click="handleDocAdd">上传</el-button>
+              <el-button icon="el-icon-delete">删除</el-button>
+            </div><!--operate 操作按钮-->
+            <el-table :data="docList" style="width: 100%">
+              <el-table-column type="selection" width="50" align="center"> </el-table-column>
+              <el-table-column label="文档名称" prop="docName" :show-overflow-tooltip="true" />
+              <el-table-column label="类别" prop="docType" :show-overflow-tooltip="true" width="80" />
+              <el-table-column label="负责人" prop="docPrincipals" :show-overflow-tooltip="true" width="80" />
+              <el-table-column label="归属部门" prop="docRespDept" :show-overflow-tooltip="true" width="150" />
+              <el-table-column label="来源" prop="docSource" width="100" />
+              <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+                <template slot-scope="scope">
+                  <span>{{ parseTime(scope.row.createTime) }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="操作" align="center" width="180">
+                <template slot-scope="scope" v-if="scope.row.roleId !== 1">
+                  <el-button
+                    size="mini"
+                    type="text"
+                    icon="el-icon-view"
+                    @click="handlePriew(scope.row)"
+                  >预览</el-button>
+                  <el-button
+                    size="mini"
+                    type="text"
+                    icon="el-icon-delete"
+                    @click="handleDelete(scope.row)"
+                  >删除</el-button>
+                  <el-button type="text" icon="el-icon-download">下载</el-button>
+                </template>
+              </el-table-column>
+            </el-table><!--el-table-->
+          </div>
         </el-form>
+        <!-- 上传 -->
+        <AddDoc :show.sync="addDocShow" toolId="1111" @callback="openEvent"/>
       </div><!--el-form-border 表单-->
     </el-drawer><!--el-drawer 新增抽屉-->
 
@@ -353,6 +399,7 @@
 </template>
 
 <script>
+  import { listDocument } from "@/api/document/document";
   import { listTool, getTool, delTool, addTool, updateTool } from "@/api/tool/tool";
   import { deptTreeSelect } from "@/api/system/user";
 import { getToken } from "@/utils/auth";
@@ -361,11 +408,12 @@ import Treeselect from "@riophae/vue-treeselect";
 import blUserSelector from "@/components/user-selector/src/user-selector";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 import toolDetail from "./toolDetail";
+import AddDoc from './AddDoc'
 
 export default {
   name: "User",
   dicts: ['sys_normal_disable', 'tool_type'],
-  components: { Treeselect, blUserSelector, toolDetail },
+  components: { Treeselect, blUserSelector, toolDetail, AddDoc },
   data() {
     return {
       // 遮罩层
@@ -465,7 +513,18 @@ export default {
         toolUse: [
           { max: 50, message: '工具用途不能超过50个字', trigger: 'blur' }
         ]
-      }
+      },
+      // 新增时的关联附件
+      docList: [],
+      docQueryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        toolId: ''
+      },
+      addDocShow: false,
+      viewDialogOpen: false,
+      viewDialogTitle: '',
+      previewUrl: ''
     };
   },
   watch: {
@@ -482,6 +541,17 @@ export default {
     });
   },
   methods: {
+    handlePriew(row){
+      this.previewUrl = process.env.VUE_APP_TOOL_TECH_FILE_VIEW_API + '/onlinePreview?url=' + encodeURIComponent(Base64.encode(process.env.VUE_APP_BASE_API + row.docUrl));
+      this.viewDialogTitle = '文档在线预览'
+      this.viewDialogOpen = true;
+    },
+    /**
+     * 新增上传附件
+     */
+    handleDocAdd() {
+      this.addDocShow = true
+    },
     handleClick(){
 
     },
@@ -712,7 +782,33 @@ export default {
     // 提交上传文件
     submitFileForm() {
       this.$refs.upload.submit();
+    },
+    /**
+     * 打开新增页面的回调事件
+     */
+    openEvent() {
+      this.loading = true
+      this.docQueryParams.toolId = '1111'
+      listDocument(this.queryParams).then(response => {
+          this.docList = response.rows;
+          this.total = response.total;
+          this.loading = false;
+        }
+      );
     }
   }
 };
 </script>
+<style scoped>
+.box-title{
+  margin-bottom: 3px;
+}
+.box-title:before {
+    display: inline-block;
+    content: "";
+    height: 14px;
+    width: 3px;
+    background-color: #034aac;
+    margin-right: 5px;
+}
+</style>

src/views/tool/toolDetail.vue

@@ -123,25 +123,19 @@
         </div><!--list-->
       </div><!--pllist-->
     </div><!--fl 右侧评论-->
-
-    <el-dialog :title="title" :visible.sync="open" width="85%" append-to-body>
-      <edit-document ref="editDocumentRef" :toolId="toolDetail.toolId" @submit="editDocumentSubmit"/>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="$refs.editDocumentRef.submitForm()">确 定</el-button>
-        <el-button @click="$refs.editDocumentRef.cancel()">取 消</el-button>
-      </div>
-    </el-dialog>
-
+    <!-- 上传 -->
+    <AddDoc :show.sync="open" :toolId="toolDetail.toolId" @callback="getDocList"/>
   </div><!--fbox1 左右分栏-->
 </template>
 
 <script>
   import { listDocument, getDocument, delDocument, addDocument, updateDocument } from "@/api/document/document";
+  import AddDoc from './AddDoc'
   import editDocument from "../document/editDocument";
   import { Base64 } from 'js-base64';
   export default {
     name: 'toolDetail',
-    components: { editDocument },
+    components: { editDocument, AddDoc },
     props: {
       toolDetail: {
         type: Object,
@@ -186,7 +180,6 @@
         this.getDocList()
       },
       handlePriew(row){
-        console.log('mmmmmmmmmmm',process.env.VUE_APP_BASE_API + row.docUrl)
         this.previewUrl = process.env.VUE_APP_TOOL_TECH_FILE_VIEW_API + '/onlinePreview?url=' + encodeURIComponent(Base64.encode(process.env.VUE_APP_BASE_API + row.docUrl));
         this.viewDialogTitle = '文档在线预览'
         this.viewDialogOpen = true;