举牌验收添加上传附件功能

ruoyi-ui/src/views/project/projectChecking/projectCheckingDrawer.vue

@@ -95,8 +95,8 @@
         </el-table-column>
         <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width" width="150">
           <template slot-scope="scope">
-            <el-button v-if="scope.row.checkingFiles != null" size="mini" type="text" icon="el-icon-paperclip"
+            <el-button v-if="scope.row.files.length>0" size="mini" type="text" icon="el-icon-paperclip"
-              @click="handledownload(scope.row)" v-hasPermi="['project:projectChecking:list']">下载附件</el-button>
+              @click="handleDownload(scope.row)" v-hasPermi="['project:projectChecking:list']">下载附件</el-button>
             <el-button v-if="scope.row.approveStatus != null" size="mini" type="text" icon="el-icon-tickets"
               @click="handleAuditinfo(scope.row)">审批日志</el-button>
             <el-button v-if="scope.row.approveStatus != '4'" size="mini" type="text" icon="el-icon-edit"
@@ -111,24 +111,39 @@
         @pagination="getList" />
 
       <!-- 添加或修改项目举牌验收对话框 -->
-      <el-dialog :title="title" :visible.sync="open" width="780px" append-to-body :close-on-click-modal="false"
+      <el-dialog :title="title" :visible.sync="open" width="760px" append-to-body :close-on-click-modal="false" custom-class="prj-checking-drawer-dlg"
-        :close-on-press-escape="false">
+        :close-on-press-escape="false">        
         <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-          <el-form-item label="项目名称" prop="projectName">
+          <el-row>
-            <el-input v-model="form.projectName" placeholder="请输入项目名称" :disabled="true" />
+          <el-col :span="12">
-          </el-form-item>
+            <el-form-item label="项目名称" prop="projectName" class="mg-b-8">
-          <el-form-item label="单位名称" prop="deptName">
+              <el-input v-model="form.projectName" placeholder="请输入项目名称" :disabled="true" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+          <el-form-item label="单位名称" prop="deptName" class="mg-b-8">
             <el-input v-model="form.deptName" placeholder="请输入单位名称" :disabled="true" />
           </el-form-item>
+        </el-col>
+        </el-row>
+        <el-row>
+        <el-col :span="24">
           <el-form-item label="验收图片" prop="imageUrls">
             <image-upload v-model="form.imageUrls" :limit="9" />
           </el-form-item>
+        </el-col>
+      </el-row>
+     
+      <el-row>
+        <el-col :span="12">
           <el-form-item label="验收类型" prop="dataTypeLvl1">
             <el-select v-model="form.dataTypeLvl1" placeholder="请选择验收类型" style="width: 100%">
               <el-option v-for="dict in dict.type.project_checking_data_type_lvl1" :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="类型分类" prop="dataTypeLvl2" v-if="form.dataTypeLvl1">
             <el-select v-model="form.dataTypeLvl2" placeholder="请选择类型分类" style="width: 100%">
               <el-option v-for="dict in dict.type.project_checking_data_type_lvl2"
@@ -136,6 +151,10 @@
                 :value="dict.value"></el-option>
             </el-select>
           </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="12">
           <el-form-item label="质量专员" prop="qualityUser">
             <el-select v-model="form.qualityUser" placeholder="请选择质量专员" filterable style="width: 100%"
               @change="selectQualityUser">
@@ -147,6 +166,8 @@
               </el-option-group>
             </el-select>
           </el-form-item>
+        </el-col>
+        <el-col :span="12">
           <el-form-item label="监理专员" prop="superviseUser">
             <el-select v-model="form.superviseUser" placeholder="请选择监理专员" filterable style="width: 100%"
               @change="selectSuperviseUser">
@@ -158,17 +179,38 @@
               </el-option-group>
             </el-select>
           </el-form-item>
+        </el-col>
+      </el-row>
+        <el-row>
+          <el-col :span="24">
           <el-form-item label="工序部位" prop="checkWorkingPosition">
             <el-input type="textarea" v-model="form.checkWorkingPosition" placeholder="请输入验收工序部位" />
           </el-form-item>
+        </el-col>
+        </el-row>
+          <el-row>
+            <el-col :span="24">
           <el-form-item label="验收描述" prop="intro">
             <el-input v-model="form.intro" type="textarea" placeholder="请输入内容" />
           </el-form-item>
+            </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
           <el-form-item label="验收时间" prop="checkingDate">
             <el-date-picker style="width: 100%" v-model="form.checkingDate" type="datetime" placeholder="选择日期时间"
               default-time="10:00:00" value-format="yyyy-MM-dd HH:mm:ss">
             </el-date-picker>
           </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+        <el-col :span="24">
+          <el-form-item label="附件" prop="trainFile" class="mg-b-8">
+            <FileUpload :limit="10" v-model="form.files" />
+          </el-form-item>
+        </el-col>
+      </el-row>
           <el-form-item label="验收结果" prop="checkResult" v-if="false">
             <el-radio v-model="form.checkResult" v-for="dict in dict.type.project_checking_result" :label="dict.value"
               :key="dict.value" border size="small">{{ dict.label }}</el-radio>
@@ -331,7 +373,10 @@ export default {
       this.queryCount();
       this.loading = true;
       listProjectChecking(this.queryParams).then((response) => {
-        this.projectCheckingList = response.rows;
+        this.projectCheckingList = (response.rows||[]).map(it=>{
+          it.files=this.$tryToJson(it.checkingFiles,[]);
+          return it;
+        });
         this.total = response.total;
         this.loading = false;
       });
@@ -411,7 +456,14 @@ export default {
       this.reset();
       const id = row.id || this.ids;
       getProjectChecking(id).then((response) => {
-        this.form = response.data;
+        let obj=response.data;
+        obj.files=obj.checkingFiles?this.$tryToJson(obj.checkingFiles,[]).map(d=>{
+          return {
+            name:d,
+            url:d
+          };
+        }):[];
+        this.form = obj;
         this.form.projectName = this.project.projectName;
         this.nodes.forEach((item) => {
           if (item.unitId == this.unitActiveName) {
@@ -427,6 +479,7 @@ export default {
       this.$refs["form"].validate((valid) => {
         if (valid) {
           this.form.approveStatus = "1";
+          this.form.checkingFiles=this.form.files?JSON.stringify(this.form.files.map(d=>d.url)):"[]";
           if (this.form.id) {
             updateProjectChecking(this.form).then((response) => {
               this.$modal.msgSuccess("修改成功");
@@ -491,7 +544,8 @@ export default {
     },
     /** 下载附件 */
     handleDownload(row) {
-      this.files = row.checkingFiles.split(",");
+      debugger
+      this.files = row.files;
       this.files.forEach((item) => {
         this.$download.resource(item);
       });
@@ -505,3 +559,28 @@ export default {
   },
 };
 </script>
+<style lang="scss">
+.prj-checking-drawer-dlg{
+  .el-dialog__body{
+    padding:0px 10px;
+    .el-form-item{
+      margin-bottom: 16px;
+      &.mg-b-8{
+        margin-bottom: 8px;
+      }
+      .el-form-item__error{
+        z-index: 9;
+        margin-top:-4px;
+      }
+      .upload-file-list {
+        max-height: 120px;
+        overflow-y: auto;
+        padding-right:30px;
+        .el-upload-list__item{
+          margin-bottom: 0px !important;
+        }
+      }
+    }
+  }
+}
+</style>