1、发布工具流程-关联工具细节调整

2、文档资源管理调整

src/views/document/editDocument.vue

@@ -3,8 +3,8 @@
     <el-form ref="form" :model="form" :rules="rules" label-width="150px">
       <el-row>
         <el-col :span="24">
-          <el-form-item label="文件分类" prop="docCode">
-            <treeselect v-model="form.categoryId" :options="docCategory" :show-count="true" placeholder="请选择文件分类"/>
+          <el-form-item label="文件分类" prop="docCategoryId">
+            <treeselect v-model="form.docCategoryId" :options="docCategory" :show-count="true" placeholder="请选择文件分类"/>
           </el-form-item>
         </el-col>
 
@@ -21,20 +21,51 @@
         </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 label="文档类别" prop="docType" style="width: 100%">
+            <el-select v-model="form.docType" placeholder="请选择文档来源" style="width: 100% !important;">
+              <el-option style="width: 100%"
+                v-for="dict in dict.type.doc_class"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              ></el-option>
+            </el-select>
           </el-form-item>
         </el-col>
 
         <el-col :span="24">
           <el-form-item label="文档来源" prop="docSource">
-            <el-input v-model="form.docSource" placeholder="请输入文档来源" maxlength="50" show-word-limit/>
+            <el-select v-model="form.docSource" placeholder="请选择文档来源" style="width: 100%">
+              <el-option
+                v-for="dict in dict.type.doc_source"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              ></el-option>
+            </el-select>
+<!--            <el-input v-model="form.docSource" placeholder="请输入文档来源" maxlength="50" show-word-limit/>-->
           </el-form-item>
         </el-col>
-        <el-col :span="24">
+        <el-col :span="24" v-if="relatedTool">
           <el-form-item label="关联工具" prop="toolId">
-            <el-input v-model="form.toolId" placeholder="请选择关联工具" @focus="drawer1 = true"/>
+            <el-select
+              v-model="toolDataInfo"
+              ref="selectHeadTool"
+              multiple
+              value-key="toolId"
+              filterable
+              remote
+              placeholder="请选择关联工具"
+              @focus="toolSelect">
+              <el-option
+                v-for="item in toolDataInfo"
+                :key="item.toolId"
+                :label="item.toolName"
+                :value="item">
+              </el-option>
+            </el-select>
           </el-form-item>
+
         </el-col>
         <el-col :span="24">
           <el-form-item label="负责人" prop="docPrincipals">
@@ -43,75 +74,39 @@
         </el-col>
         <el-col :span="24">
           <el-form-item label="归属单位" prop="docRespDept">
-            <treeselect v-model="form.docRespDept" :options="deptOptions" :show-count="true" placeholder="请输入归属单位" />
+            <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
+              :display="editStatus"
               :uploadUrl="uploadFileUrl"
               :type="['.txt','.doc','.docx','.pdf','.mp4','.zip','.rar','.7z','.png','.jpg','.jpeg']"
               :acceptType="acceptType"
               :limit="1"
-              :onSuccess="handleUploadSuccess"
-              :onError="handleUploadError"
+              :dataFile="dataFile"
+              ref="uploadFile"
+              @handleSuccess="handleUploadSuccess"
+              @handleError="handleUploadError"
             />
-<!--            <uploadVue-->
-<!--            <upload-progress/>
-            <el-upload
-              class="upload-component"
-              ref="upload"
-              :auto-upload="false"
-              :file-list="fileList"
-              :on-change="onChange"
-              :on-remove="onRemove"
-              :multiple="true"
-              action=""
-            >
-              <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-form-item>
         </el-col>
         <el-col :span="24">
-          <el-form-item label="备注">
+          <el-form-item label="备注" prop="remark">
             <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-form><!--el-form-->
 
-    <el-dialog title="选择关联工具" :visible.sync="drawer1" width="75%" append-to-body>
-      <div>
-        <el-table :data="tableData2" @row-click="singleElection" highlight-current-row style="width: 100%">
-          <!--<el-table-column label="选择" align="center" width="65">
-            <template slot-scope="scope">
-              <el-radio :label="scope.row.prop1" v-model="radio" @change.native="getCurrentRow(scope.row)" />
-            </template>
-          </el-table-column>-->
-          <el-table-column align="center" width="55">
-            <template slot-scope="scope">
-              <el-radio v-model="templateSelection" :label="scope.row.prop1"></el-radio>
-            </template>
-          </el-table-column>
-          <el-table-column prop="prop1"  label="工具编号"></el-table-column>
-          <el-table-column prop="prop2" label="工具名称"></el-table-column>
-          <el-table-column prop="prop5" label="工具类别"  ></el-table-column>
-          <el-table-column prop="prop3" label="归属单位" width="180"> </el-table-column>
-          <el-table-column prop="prop4" label="负责人" width="100" ></el-table-column>
-        </el-table><!--el-table-->
-      </div>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="chooseToolConfirm()">确 定</el-button>
-        <el-button @click="cancel()">取 消</el-button>
-      </div>
-    </el-dialog><!--el-drawer 流程监控-抽屉-->
+    <tool-selector ref="toolSelect" @selectHandle="selectHandle"></tool-selector>
+
   </div><!--el-form-border 表单-->
 </template>
 
 <script>
-  import { addDocument, updateDocument } from "@/api/document/document";
+  import { addDocument, updateDocument, getDocument } from "@/api/document/document";
   import axios from 'axios';
   import { getToken } from '@/utils/auth'
   import { deptTreeSelect } from "@/api/system/user";
@@ -119,15 +114,22 @@
   import Treeselect from "@riophae/vue-treeselect";
   import uploadProgress from "./uploadProgress";
   import uploadVue from '@/components/FileUpload/optimizeUpload.vue'
+  import ToolSelector from '@/components/tool-selector/index.vue'
 
   export default {
     name: 'editDocument',
-    components: { Treeselect, uploadProgress, uploadVue},
+    components: { Treeselect, uploadProgress, uploadVue, ToolSelector},
+    dicts:['doc_class','doc_source'],
     props: {
       tooId: {
         type: String,
         default: "",
-      }
+        required: false
+      },
+      relatedTool: {
+        type: Boolean,
+        default: true,
+      },
     },
     data(){
       return{
@@ -152,19 +154,24 @@
         ],
         // 表单参数
         form: {
-          categoryId: undefined,
+          docId: undefined,
+          docCategoryId: undefined,
           docCode: '',
           docName: '',
           docType: '',
           docPrincipals: '',
           docRespDept: undefined,
           docSource: '',
-          toolId: ''
+          toolId: '',
+          remark: undefined
         },
         fileList: [],
         progress: 0,
         // 表单校验
         rules: {
+          docCategoryId: [
+            { required: true, message: "文档分类不能为空", trigger: "blur" }
+          ],
           docCode: [
             { required: true, message: "文档编号不能为空", trigger: "blur" }
           ],
@@ -182,7 +189,10 @@
         deptOptions:[],
         uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传文件服务器地址
         fileData: null,
-        acceptType: ".txt,.doc,.docx,.pdf,.mp4,.zip,.rar,.7z,.png,.jpg,.jpeg"
+        acceptType: ".txt,.doc,.docx,.pdf,.mp4,.zip,.rar,.7z,.png,.jpg,.jpeg",
+        editStatus: true,
+        toolDataInfo: [],
+        dataFile: [],
       }
     },
     created(){
@@ -229,21 +239,6 @@
         this.drawer1 = false;
         this.reset();
       },
-      onChange(file, fileList) {
-        // valid the suffix of file
-        /*let validSuffix = ['pdf', 'docx', 'doc', 'txt', 'eml', 'mp4']
-        let splits = file.name.split('.')
-        let suffix = splits[splits.length - 1]
-        if (!validSuffix.includes(suffix)) {
-          this.$message.error(`只能上传 ${validSuffix.join(',')} 类型的文件！`)
-          this.fileList = fileList.filter(item => item.uid !== file.uid)
-          return
-        }*/
-        this.fileList = fileList
-      },
-      onRemove(file, fileList) {
-        this.fileList = fileList.filter(item => item.uid !== file.uid)
-      },
       generateUniqueID() {
         // 使用时间戳来生成唯一ID
         const timestamp = new Date().getTime();
@@ -253,80 +248,81 @@
       },
       /** 提交按钮 */
       submitForm: function() {
+        let fileName = []
+        //编辑时走该逻辑
+        if(this.form.docId && (this.fileList == null || this.fileList.length <= 0 )){
+          fileName = this.$refs.uploadFile.fileList[0]
+          this.fileList = this.$refs.uploadFile.fileList
+        }else{
+          fileName = this.fileList[0]
+          this.fileList = this.fileList
+        }
         //判断是否有文件再上传
-        if (this.fileList.length === 0) {
+        if (this.fileList.length == 0) {
           return this.$message.warning('请选取文件后再上传')
         }
-        this.fileList.map(file =>{
+        /*this.fileList.map(file =>{
           this.form.docName = file.name
-        })
-        this.form.toolId = this.toolId
+        })*/
+        if(fileName){
+          this.$set(this.form,"docUrl", fileName.filePath)
+          this.$set(this.form,"docStatus", "ysc")
+          this.$set(this.form,"attachment", fileName)
+        }
+        if(this.toolDataInfo && this.toolDataInfo.length > 0){
+          this.$set(this.form,"toolId", this.toolDataInfo[0].toolId)
+        }
+
         this.$refs["form"].validate(valid => {
           if (valid) {
-            if (this.form.id != undefined) {
-              updateDocument(this.form).then(response => {
+            if (this.form.docId) {
+              updateDocument(this.form).then(res => {
                 this.$modal.msgSuccess("修改成功");
                 this.open = false;
                 this.$emit("submit");
               });
             } else {
-              addDocument(this.form).then(response => {
+              addDocument(this.form).then(res => {
                 this.$modal.msgSuccess("新增成功");
                 this.open = false;
-                this.confirmSubmit(response.data);
+                // this.confirmSubmit(response.data);
                 this.$emit("submit");
               });
             }
           }
         });
       },
-      testUpdate(docId){
-        // 创建 formData 对象
-        const formData = new FormData()
-        // 将所有 的 upload 组件中的文件对象放入到 FormData 对象中
-        this.fileList.forEach((file) => {
-          formData.append('folder', file.raw)
-        })
-        formData.append('docId', '')
-        formData.append('requestId', this.generateUniqueID())
-        axios.post(process.env.VUE_APP_BASE_API + '/document/upload/folder', formData, {
-          headers: {
-            'Content-Type': 'multipart/form-data',
-            'Authorization': 'Bearer ' + getToken(),
+      /** 提交按钮 */
+      assembleSubmit: function() {
+        let self = this
+        let fileName = []
+        //编辑时走该逻辑
+        if(this.form.docId && (this.fileList == null || this.fileList.length <= 0 )){
+          fileName = this.$refs.uploadFile.fileList[0]
+          this.fileList = this.$refs.uploadFile.fileList
+        }else{
+          fileName = this.fileList[0]
+        }
+        //判断是否有文件再上传
+        if (this.fileList.length == 0) {
+          return this.$message.warning('请选取文件后再上传')
+        }
+        /*this.fileList.map(file =>{
+          this.form.docName = file.name
+        })*/
+        if(fileName){
+          this.$set(this.form,"docUrl", fileName.filePath)
+          this.$set(this.form,"docStatus", "ysc")
+          this.$set(this.form,"attachment", fileName)
+        }
+        if(this.toolDataInfo && this.toolDataInfo.length > 0){
+          this.$set(this.form,"toolId", this.toolDataInfo[0].toolId)
+        }
+
+        this.$refs["form"].validate(valid => {
+          if (valid) {
+            self.$emit("docSubmitData",self.form)
           }
-        }).then((response) => {
-          if(response.data.code===200){
-            this.$emit("submit");
-          }else{
-            // 弹框报错 response.data.message
-          }
-        }).catch((error) => {
-          console.error('Failed to upload file:', error);
-        });
-      },
-      confirmSubmit(docId) {
-        // 创建 formData 对象
-        const formData = new FormData()
-        // 将所有 的 upload 组件中的文件对象放入到 FormData 对象中
-        this.fileList.forEach((file) => {
-          formData.append('files', file.raw)
-        })
-        formData.append('docId', docId)
-        formData.append('requestId', this.generateUniqueID())
-        //自定义的接口也可以用ajax或者自己封装的接口
-        axios.post(process.env.VUE_APP_BASE_API + '/document/upload', formData, {
-          headers: {
-            'Content-Type': 'multipart/form-data',
-            'Authorization': 'Bearer ' + getToken(),
-          }
-        }).then((response) => {
-          if(response.data.code===200){
-            this.$emit("submit");
-          }else{
-            // 弹框报错 response.data.message
-          }
-        }).catch((error) => {
-          console.error('Failed to upload file:', error);
         });
       },
       /** 查询部门下拉树结构 */
@@ -354,20 +350,57 @@
       },
       // 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');
+      handleUploadSuccess(res) {
+        this.fileList = []
+        this.fileList.push(res)
         // 处理上传成功后的逻辑
       },
       handleUploadError(error) {
-        alert('Failed to upload file');
         // 处理上传失败后的逻辑
+      },
+      toolSelect(){
+        this.$refs.selectHeadTool.blur();
+        this.$nextTick(()=>{
+          this.$refs.toolSelect.init(null,null,false)
+        })
+      },
+      selectHandle(source,index,data){
+        this.toolDataInfo = []
+        let toolInfo = {toolId:data.toolId,toolCode:data.toolCode,toolName:data.toolName}
+        this.toolDataInfo.push(toolInfo)
+      },
+      /**初始化 **/
+      resetForm() {
+        this.$refs.form.resetFields();
+        this.toolDataInfo = []
+        this.fileList = []
+        this.$nextTick(()=>{
+          this.$refs.uploadFile.clearFile();
+        })
+      },
+      editInit(docId, type){
+        this.$refs.form.resetFields();
+        this.toolDataInfo = []
+        this.$nextTick(()=>{
+          this.$refs.uploadFile.clearFile();
+
+          getDocument(docId).then(res => {
+            this.form = res.data
+            this.toolDataInfo = []
+            let toolInfo = {toolId:this.form.toolId,toolName:this.form.toolName}
+            this.toolDataInfo.push(toolInfo)
+
+            this.dataFile = []
+            let fileData = res.data.attachment
+            this.$set(fileData, "name", fileData.fileOldName)
+            this.$set(fileData, "size", fileData.fileSize)
+            this.dataFile.push(fileData)
+          });
+        })
       }
     }
   }