文档资源调整

src/views/document/editDocument.vue

@@ -3,21 +3,32 @@
     <el-form ref="form" :model="form" :rules="rules" label-width="150px">
       <el-row>
         <el-col :span="24">
-          <!--<el-form-item label="文档类别" required>
-            <el-select placeholder="请选择">
-              <el-option label="管理手册" value=""></el-option>
-              <el-option label="操作手册" value=""></el-option>
-              <el-option label="程序文件" value=""></el-option>
-              <el-option label="需求文档" value=""></el-option>
-            </el-select>
-          </el-form-item>-->
-          <el-form-item label="文档类别" prop="docType">
-            <el-input v-model="form.docType" placeholder="请输入文档类别" />
+          <el-form-item label="文件分类" prop="docCode">
+            <treeselect v-model="form.categoryId" :options="docCategory" :show-count="true" placeholder="请选择文件分类"/>
           </el-form-item>
         </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="文档编号" prop="docCode">
+            <el-input v-model="form.docCode" placeholder="请输入文档编号" maxlength="50" show-word-limit/>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="文档名称" prop="docName">
+            <el-input v-model="form.docName" placeholder="请输入文档名称" maxlength="200" show-word-limit/>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="文档类别" prop="docType">
+            <el-input v-model="form.docType" placeholder="请输入文档类别" maxlength="50" show-word-limit/>
+          </el-form-item>
+        </el-col>
+
         <el-col :span="24">
           <el-form-item label="文档来源" prop="docSource">
-            <el-input v-model="form.docSource" placeholder="请输入文档来源" />
+            <el-input v-model="form.docSource" placeholder="请输入文档来源" maxlength="50" show-word-limit/>
           </el-form-item>
         </el-col>
         <el-col :span="24">
@@ -27,16 +38,26 @@
         </el-col>
         <el-col :span="24">
           <el-form-item label="负责人" prop="docPrincipals">
-            <el-input v-model="form.docPrincipals" placeholder="请输入负责人" />
+            <el-input v-model="form.docPrincipals" placeholder="请输入负责人" maxlength="50" show-word-limit/>
           </el-form-item>
         </el-col>
         <el-col :span="24">
-          <el-form-item label="归属部门" prop="docRespDept">
-            <el-input v-model="form.docRespDept" placeholder="请输入归属部门" />
+          <el-form-item label="归属单位" prop="docRespDept">
+            <treeselect v-model="form.docRespDept" :options="deptOptions" :show-count="true" placeholder="请输入归属单位" />
           </el-form-item>
         </el-col>
         <el-col :span="24">
           <el-form-item label="文件" required>
+            <uploadVue
+              :uploadUrl="uploadFileUrl"
+              :type="['.txt','.doc','.docx','.pdf','.mp4','.zip','.rar','.7z','.png','.jpg','.jpeg']"
+              :acceptType="acceptType"
+              :limit="1"
+              :onSuccess="handleUploadSuccess"
+              :onError="handleUploadError"
+            />
+<!--            <uploadVue-->
+<!--            <upload-progress/>
             <el-upload
               class="upload-component"
               ref="upload"
@@ -50,7 +71,7 @@
               <el-button size="small" type="primary">点击上传</el-button>
               <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
               <div slot="tip" class="el-upload__tip"><el-progress :percentage="progress"></el-progress></div>
-            </el-upload>
+            </el-upload>-->
           </el-form-item>
         </el-col>
         <el-col :span="24">
@@ -71,7 +92,7 @@
           </el-table-column>-->
           <el-table-column align="center" width="55">
             <template slot-scope="scope">
-              <el-radio v-model="templateSelection" :label="scope.row.prop1">&nbsp;</el-radio>
+              <el-radio v-model="templateSelection" :label="scope.row.prop1"></el-radio>
             </template>
           </el-table-column>
           <el-table-column prop="prop1"  label="工具编号"></el-table-column>
@@ -93,8 +114,15 @@
   import { addDocument, updateDocument } from "@/api/document/document";
   import axios from 'axios';
   import { getToken } from '@/utils/auth'
+  import { deptTreeSelect } from "@/api/system/user";
+  import { documentTree } from "@/api/documentCategory/documentCategory.js";
+  import Treeselect from "@riophae/vue-treeselect";
+  import uploadProgress from "./uploadProgress";
+  import uploadVue from '@/components/FileUpload/optimizeUpload.vue'
+
   export default {
     name: 'editDocument',
+    components: { Treeselect, uploadProgress, uploadVue},
     props: {
       tooId: {
         type: String,
@@ -124,10 +152,12 @@
         ],
         // 表单参数
         form: {
+          categoryId: undefined,
+          docCode: '',
           docName: '',
           docType: '',
           docPrincipals: '',
-          docRespDept: '',
+          docRespDept: undefined,
           docSource: '',
           toolId: ''
         },
@@ -135,16 +165,29 @@
         progress: 0,
         // 表单校验
         rules: {
+          docCode: [
+            { required: true, message: "文档编号不能为空", trigger: "blur" }
+          ],
+          docName: [
+            { required: true, message: "文档名称不能为空", trigger: "blur" }
+          ],
           docType: [
             { required: true, message: "类别不能为空", trigger: "blur" }
           ],
           docSource: [
             { required: true, message: "文档来源不能为空", trigger: "blur" }
           ]
-        }
+        },
+        docCategory:[],
+        deptOptions:[],
+        uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传文件服务器地址
+        fileData: null,
+        acceptType: ".txt,.doc,.docx,.pdf,.mp4,.zip,.rar,.7z,.png,.jpg,.jpeg"
       }
     },
     created(){
+      this.getDeptTree();
+      this.getDocumentTree();
     },
     mounted(){
      /* this.$nextTick(() => {
@@ -153,7 +196,8 @@
     },
     methods:{
       chooseToolConfirm(){
-        this.form.toolId = this.templateSelection
+        this.$set(this.form, "toolId", this.templateSelection)
+        this.drawer1 = false;
       },
       singleElection(row) {
         this.templateSelection = row.prop1
@@ -182,7 +226,7 @@
       },
       // 取消按钮
       cancel() {
-        this.open = false;
+        this.drawer1 = false;
         this.reset();
       },
       onChange(file, fileList) {
@@ -285,6 +329,46 @@
           console.error('Failed to upload file:', error);
         });
       },
+      /** 查询部门下拉树结构 */
+      getDeptTree() {
+        deptTreeSelect().then(response => {
+          this.deptOptions = response.data;
+        });
+      },
+      /** 查询树形下拉树结构 */
+      getDocumentTree() {
+        documentTree().then(response => {
+          this.docCategory = response.data;
+        });
+      },
+      /** 转换部门数据结构 */
+      normalizer(node) {
+        if (node.children && !node.children.length) {
+          delete node.children;
+        }
+        return {
+          id: node.deptId,
+          label: node.deptName,
+          children: node.children
+        };
+      },
+      // flag 为true表示新增
+      getData(data, flag, index) {
+        console.info("data============", data)
+        console.info("flag============", flag)
+        console.info("index============", index)
+      },
+      getError(message) {
+        this.$message.error(message);
+      },
+      handleUploadSuccess(response) {
+        alert('File uploaded successfully');
+        // 处理上传成功后的逻辑
+      },
+      handleUploadError(error) {
+        alert('Failed to upload file');
+        // 处理上传失败后的逻辑
+      }
     }
   }
 </script>

src/views/document/index.vue

@@ -23,26 +23,21 @@
     </el-card>
     <el-card class="lrtt">
       <div class="lt">
-        <el-input
-          v-model="deptName"
-          placeholder="请输入部门名称"
-          clearable
-          size="small"
-          prefix-icon="el-icon-search"
-          style="margin-bottom: 20px"
-        />
+        <el-input placeholder="请输入..." prefix-icon="el-icon-search"></el-input>
         <div class="divide"></div><!--divide 分隔-->
-        <el-tree
-          :data="deptOptions"
-          :props="defaultProps"
-          :expand-on-click-node="false"
-          :filter-node-method="filterNode"
-          ref="tree"
-          node-key="id"
-          default-expand-all
-          highlight-current
-          @node-click="handleNodeClick"
-        />
+        <el-tree :data="docCategory" :props="docCategoryProps" @node-click="handleNodeClick">
+					<span class="custom-tree-node" slot-scope="{ node, data }">
+					    <span>{{ node.label }}</span>
+                <el-dropdown>
+                  <span class="el-dropdown-link"><i class="el-icon-more"></i></span>
+                  <el-dropdown-menu slot="dropdown">
+                    <el-dropdown-item  @click.native="handleDocCategoryAdd(data)"><i class="el-icon-plus"></i>添加</el-dropdown-item>
+                    <el-dropdown-item v-if="data.types != 'system'" @@click.native="handleDocCategoryUpdate(data)"><i class="el-icon-edit"></i>编辑</el-dropdown-item>
+                    <el-dropdown-item v-if="data.types != 'system'" @@click.native="handleDocCategoryDelete(data)"><i class="el-icon-delete"></i>删除</el-dropdown-item>
+                  </el-dropdown-menu>
+                </el-dropdown>
+          </span>
+        </el-tree>
       </div><!--lt 左-->
       <div class="rt">
         <div class="operate">
@@ -106,6 +101,28 @@
       </div>
     </el-card>
 
+
+
+    <el-dialog :title="docCategoryTitle" :visible.sync="docCategoryOpen"  width="50%" append-to-body>
+      <el-form ref="docCategoryForm" :model="docCategoryForm" :rules="docCategoryRules" label-width="80px">
+        <el-form-item label="父分类" prop="parentId">
+          <treeselect v-model="docCategoryForm.parentId" :options="docCategory" :show-count="true" placeholder="如果不选择，默认为顶级节点" />
+        </el-form-item>
+        <el-form-item label="分类名称" prop="categoryName">
+          <el-input v-model="docCategoryForm.categoryName" placeholder="请输入分类名称" maxlength="50" show-word-limit/>
+        </el-form-item>
+        <el-form-item label="分类描述" prop="categoryDescription">
+          <el-input v-model="docCategoryForm.categoryDescription"
+                    type="textarea" :rows="3" maxlength="500" show-word-limit
+                    placeholder="请输入分类描述" />
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="docCategorySubmitForm">确 定</el-button>
+        <el-button @click="docCategoryCancel">取 消</el-button>
+      </span>
+    </el-dialog>
+
     <el-dialog :title="viewDialogTitle" :visible.sync="viewDialogOpen" fullscreen width="500px" append-to-body>
       <i-frame :src="previewUrl" />
     </el-dialog>
@@ -128,15 +145,18 @@
 <script>
 import { listDocument, getDocument, delDocument, addDocument, updateDocument } from "@/api/document/document";
 import { deptTreeSelect } from "@/api/system/user";
+import { documentTree,addCategory,updateCategory,delCategory,getCategory } from "@/api/documentCategory/documentCategory.js";
+
 import { Base64 } from 'js-base64';
 import iFrame from "@/components/iFrame/index"
 import editDocument from "./editDocument";
 import uploadProgress from "./uploadProgress";
 import { w3cwebsocket as WebSocket } from 'websocket';
+import Treeselect from "@riophae/vue-treeselect";
 
 export default {
   name: "Document",
-  components: { iFrame, editDocument, uploadProgress },
+  components: { iFrame, editDocument, uploadProgress, Treeselect},
   data() {
     return {
       // 遮罩层
@@ -157,6 +177,12 @@ export default {
         children: "children",
         label: "label"
       },
+      // 文档树
+      docCategory: undefined,
+      docCategoryProps: {
+        children: "children",
+        label: "label"
+      },
       // 总条数
       total: 0,
       // 表格数据
@@ -194,12 +220,35 @@ export default {
         docSource: [
           { required: true, message: "文档来源不能为空", trigger: "blur" }
         ]
-      }
+      },
+      docCategoryRules: {
+        categoryName: [
+          { required: true, message: "分类名称不能为空", trigger: "blur" }
+        ],
+        createBy: [
+          { required: true, message: "创建人名称不能为空", trigger: "blur" }
+        ],
+        createById: [
+          { required: true, message: "创建人id不能为空", trigger: "blur" }
+        ],
+        createTime: [
+          { required: true, message: "创建时间不能为空", trigger: "blur" }
+        ],
+      },
+      docCategoryTitle: "",
+      docCategoryOpen: false,
+      // 文档资源参数
+      docCategoryForm: {
+        categoryName: null,
+        categoryDescription: null,
+        parentId: null
+      },
     };
   },
   created() {
     this.getList();
     this.getDeptTree();
+    this.getDocumentTree();
   },
   methods: {
     /** 查询部门下拉树结构 */
@@ -208,6 +257,12 @@ export default {
         this.deptOptions = response.data;
       });
     },
+    /** 查询树形下拉树结构 */
+    getDocumentTree() {
+      documentTree().then(response => {
+        this.docCategory = response.data;
+      });
+    },
     // 筛选节点
     filterNode(value, data) {
       if (!value) return true;
@@ -268,7 +323,70 @@ export default {
         this.getList();
         this.$modal.msgSuccess("删除成功");
       }).catch(() => {});
+    },
+    /** 新增按钮操作 */
+    handleDocCategoryAdd(data) {
+      console.info("data================", data)
+      this.docCategoryOpen = true;
+      // this.docCategoryForm.parentId = data.id;
+      this.$nextTick(() => {
+        this.resetDocCategoryForm();
+        this.docCategoryForm.parentId = data.id;
+      })
+      this.docCategoryTitle = "添加文档资源分类";
+    },
+    /** 删除按钮操作 */
+    handleDocCategoryDelete(row) {
+      this.$modal.confirm('是否删除该项数据？').then(function() {
+        return delCategory(row.id);
+      }).then(() => {
+        this.getDocumentTree();
+        this.$modal.msgSuccess("删除成功");
+      }).catch((err) => {
+        console.info("err============", err)
+      });
+    },
+    /** 修改按钮操作 */
+    handleDocCategoryUpdate(row) {
+      this.resetDocCategoryForm();
+      const id = row.id;
+      getCategory(id).then(response => {
+        this.docCategoryForm = response.data;
+        this.docCategoryOpen = true;
+        this.docCategoryTitle = "修改文档资源分类";
+      });
+    },
+    /** 提交按钮 */
+    docCategorySubmitForm() {
+      this.$refs["docCategoryForm"].validate(valid => {
+        if (valid) {
+          if (this.docCategoryForm.id != null) {
+            updateCategory(this.docCategoryForm).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.docCategoryOpen = false;
+              this.getDocumentTree();
+            });
+          } else {
+            this.$set(this.docCategoryForm, "type", "user")
+            addCategory(this.docCategoryForm).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.docCategoryOpen = false;
+              this.getDocumentTree();
+            });
+          }
+        }
+      });
+    },
+    // 取消按钮
+    docCategoryCancel() {
+      this.docCategoryOpen = false;
+      this.resetDocCategoryForm();
+    },
+    /** 重置 **/
+    resetDocCategoryForm(){
+      this.$refs.docCategoryForm.resetFields();
     }
+
   }
 };
 </script>

src/views/login.vue

@@ -124,7 +124,7 @@ export default {
 };
 </script>
 
-<style rel="stylesheet/scss" lang="scss">
+<style rel="stylesheet/scss" lang="scss" scoped>
 .login {
   display: flex;
   justify-content: center;

src/views/register.vue

@@ -146,7 +146,7 @@ export default {
 };
 </script>
 
-<style rel="stylesheet/scss" lang="scss">
+<style rel="stylesheet/scss" lang="scss" scoped>
 .register {
   display: flex;
   justify-content: center;