fl-web-component 0.1.0 → 1.0.0

package/packages/components/model/components/proof-panel-detail.vue

@@ -16,30 +16,26 @@
       <el-row v-loading="loading" :gutter="20" type="flex" justify="center">
         <el-col
           :span="16"
-          style="
-            border-radius: 6px;
-            position: relative;
-            height: 530px;
-            background: #f6f6f6;
-          "
+          style="border-radius: 6px; position: relative; height: 530px; background: #f6f6f6"
         >
-          <div 
-            class="image-edit-container" 
-            v-show="!readOnlyMode"  
+          <div
+            class="image-edit-container"
+            v-show="!readOnlyMode"
             v-if="!isClient"
             v-hasPermi="btnPermission"
           >
-            <i 
-              class="el-icon-edit-outline image-edit"
-              @click="clickEdit"
-            ></i>
+            <i class="el-icon-edit-outline image-edit" @click="clickEdit"></i>
           </div>
-          <ImageViewer ref="ImageViewrRef" :image-url="screenshotUrl" :isErrorImage="isErrorImage"/>
+          <ImageViewer
+            ref="ImageViewrRef"
+            :image-url="screenshotUrl"
+            :isErrorImage="isErrorImage"
+          />
         </el-col>
         <!-- 新增批注内容 -->
         <!-- :disabled="disabledDetailForm" -->
         <el-col :span="8">
-          <el-descriptions :column="1"  v-if="readOnlyMode || isClient">
+          <el-descriptions :column="1" v-if="readOnlyMode || isClient">
             <el-descriptions-item label="所属专业">{{ postName }}</el-descriptions-item>
             <el-descriptions-item label="问题描述">
               <el-input
@@ -52,7 +48,7 @@
               >
               </el-input>
             </el-descriptions-item>
-          </el-descriptions >
+          </el-descriptions>
           <el-form
             v-else
             @submit.native.prevent
@@ -152,54 +148,56 @@
               >{{ detailModel.replyTime }}
             </el-form-item>
           </el-form>
-          <el-descriptions :column="1"  v-else>
+          <el-descriptions :column="1" v-else>
             <el-descriptions-item label="解决人">{{ detailModel.solveBy }}</el-descriptions-item>
             <el-descriptions-item label="解决意见">{{ proofStatus }}</el-descriptions-item>
             <el-descriptions-item label="备注">{{ detailModel.remark }}</el-descriptions-item>
-            <el-descriptions-item label="创建时间">{{ detailModel.createTime }}</el-descriptions-item>
-            <el-descriptions-item label="回复时间">{{ detailModel.replyTime }}</el-descriptions-item>
-          </el-descriptions >
+            <el-descriptions-item label="创建时间">{{
+              detailModel.createTime
+            }}</el-descriptions-item>
+            <el-descriptions-item label="回复时间">{{
+              detailModel.replyTime
+            }}</el-descriptions-item>
+          </el-descriptions>
         </el-col>
       </el-row>
       <span v-show="!readOnlyMode" slot="footer" class="dialog-footer">
         <el-button @click="close(true, true)">取消</el-button>
-        <el-button
-          v-if="isClient" 
-          type="primary" 
-          @click="clickSave" 
-          :loading="updatingOpinion"
-        >保存</el-button>
+        <el-button v-if="isClient" type="primary" @click="clickSave" :loading="updatingOpinion"
+          >保存</el-button
+        >
         <el-button
           v-else
-          type="primary" 
-          @click="clickSave" 
+          type="primary"
+          @click="clickSave"
           :loading="updatingOpinion"
           v-hasPermi="btnPermission"
-        >保存</el-button>
+          >保存</el-button
+        >
       </span>
     </el-dialog>
   </div>
 </template>
 <script>
-import ImageViewer from './imageViewer'
+import ImageViewer from './imageViewer';
 export default {
   components: {
-    ImageViewer
+    ImageViewer,
   },
   props: {
     dialogVisible: {
       type: Boolean,
-      default: false
+      default: false,
     },
     // 批注前初始的文档文件数据
     fileData: {
       type: Object,
-      default: () => {}
+      default: () => {},
     },
     // 批注后文件的数据
     annotationFileData: {
       type: Object,
-      default: () => {}
+      default: () => {},
     },
     // // 列表id 用于查看详情
     // dataId: {
@@ -209,25 +207,25 @@ export default {
     // 操作类型
     moduleType: {
       type: String,
-      default: 'add'
+      default: 'add',
     },
     detailProps: {
       type: Object,
-      default: () => {}
+      default: () => {},
     },
     postList: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     userList: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
-    isClient:{
+    isClient: {
       type: Boolean,
-      default: false
+      default: false,
     },
-    readOnlyMode:{
+    readOnlyMode: {
       type: Boolean,
       default: false,
     },
@@ -244,45 +242,51 @@ export default {
   },
   computed: {
     screenshotUrl: {
-      get(){
+      get() {
         // console.log(this.detailModel.previewScreenshotData)
-        const screenshotUrl = this.detailModel.previewScreenshotData || `//${this.detailModel.problemPrintscreen}`;
+        const screenshotUrl =
+          this.detailModel.previewScreenshotData || `//${this.detailModel.problemPrintscreen}`;
         return screenshotUrl;
       },
-      set(val){
+      set(val) {
         this.detailModel.problemPrintscreen = val;
-      }
+      },
     },
     detailModel: {
-      get(){
-        const detailData = Object.keys(this.detailProps).length ? this.detailProps
-        : Object.keys(this.detailData).length ? this.detailData : {};
+      get() {
+        const detailData = Object.keys(this.detailProps).length
+          ? this.detailProps
+          : Object.keys(this.detailData).length
+          ? this.detailData
+          : {};
 
-        return detailData
-      }
+        return detailData;
+      },
     },
-    isErrorImage(){
+    isErrorImage() {
       return !(this.detailModel.previewScreenshotData || this.detailModel.problemPrintscreen);
     },
-    solveBy(){
-      const item = this.userList.find(item => item.value === this.detailModel.solveBy)
+    solveBy() {
+      const item = this.userList.find((item) => item.value === this.detailModel.solveBy);
       return item && item.value;
     },
-    proofStatus(){
-      const item = this.filterStatusOpt.find(item => item.value === this.detailModel.status)
-      return item && item.label
+    proofStatus() {
+      const item = this.filterStatusOpt.find((item) => item.value === this.detailModel.status);
+      return item && item.label;
     },
-    postName(){
-      const item = this.postList.find(item => item.postId === this.detailModel.postId)
-      return item && item.postName
+    postName() {
+      const item = this.postList.find((item) => item.postId === this.detailModel.postId);
+      return item && item.postName;
     },
     isEditing() {
-      return this.detailProps.id != undefined  
+      return this.detailProps.id != undefined;
     },
     btnPermission() {
-      const btnPermission = this.isEditing ? [`project:opinion:edit:proj:${this.defaultParams.projectId}`] : [`project:opinion:add:proj:${this.defaultParams.projectId}`];
-      return btnPermission
-    }
+      const btnPermission = this.isEditing
+        ? [`project:opinion:edit:proj:${this.defaultParams.projectId}`]
+        : [`project:opinion:add:proj:${this.defaultParams.projectId}`];
+      return btnPermission;
+    },
   },
   data() {
     return {
@@ -299,37 +303,35 @@ export default {
       detailData: {},
       filterStatusOpt: [
         {
-          value: "0",
-          label: "未处理",
+          value: '0',
+          label: '未处理',
         },
         {
-          value: "1",
-          label: "已处理",
+          value: '1',
+          label: '已处理',
         },
         {
-          value: "2",
-          label: "待确认",
-        }
+          value: '2',
+          label: '待确认',
+        },
       ],
       showDialog: false,
       rules: {
-        solveBy: [
-          { required: true, message: "请选择解决人", trigger: "blur" },
-        ],
-      }
-    }
+        solveBy: [{ required: true, message: '请选择解决人', trigger: 'blur' }],
+      },
+    };
   },
   watch: {
     dialogVisible(val) {
       if (val) {
-        this.showDialog = true
+        this.showDialog = true;
       } else {
-        this.showDialog = false
+        this.showDialog = false;
       }
     },
-    showDialog(val){
-      val === false && this.close(true)
-    }
+    showDialog(val) {
+      val === false && this.close(true);
+    },
   },
   created() {
     if (this.moduleType === 'add') {
@@ -338,196 +340,196 @@ export default {
       // this.perview() // 预览
     } else {
       // this.moduleType === 'operation' && this.getUserList() // 获取用户列表
-      this.handleDetail()
+      this.handleDetail();
     }
   },
   methods: {
     perview() {
-      let _this = this
+      let _this = this;
       perview({ id: this.fileId })
         .then((res) => {
-          let reader = new FileReader()
-          reader.readAsDataURL(res) // 转换为base64
+          let reader = new FileReader();
+          reader.readAsDataURL(res); // 转换为base64
           reader.onload = function () {
-            _this.imageUrl = reader.result
-            _this.$refs.ImageViewrRef.resetImage()
-          }
+            _this.imageUrl = reader.result;
+            _this.$refs.ImageViewrRef.resetImage();
+          };
         })
         .finally(() => {
-          this.loading = false
-        })
+          this.loading = false;
+        });
     },
     // 详情
     handleDetail() {
-      this.loading = true
+      this.loading = true;
       detail({ id: this.dataId }).then((res) => {
         if (res.code === 200) {
-          this.detailData = res.data
+          this.detailData = res.data;
           // 撤回状态
           if (res.data.status === '2' && this.moduleType === 'view')
-            this.detailData.recordList = [res.data]
+            this.detailData.recordList = [res.data];
           // 流程字段 操作模式并当前登陆人 = 创建人
           if (
             this.moduleType === 'operation' &&
             this.detailData.createBy === this.userName &&
             this.detailData.recordList.length === 0
           ) {
-            this.form.operateState = '0'
+            this.form.operateState = '0';
             this.$nextTick(() => {
-              this.$refs.form.clearValidate('operateState') // 移除校验
-            })
+              this.$refs.form.clearValidate('operateState'); // 移除校验
+            });
           }
-          this.fileId = res.data.fileId
-          this.perview()
+          this.fileId = res.data.fileId;
+          this.perview();
         }
-      })
+      });
     },
     // 下一处理人 输入建议
     querySearch(queryString, cb) {
-      var restaurants = this.userList
-      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
+      var restaurants = this.userList;
+      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
       // 调用 callback 返回建议列表的数据
       if (results.length === 0) {
-        this.form.nextUser = ''
-        this.form.nextUserName = ''
-        this.$set(this.form, 'nextUserName', '')
+        this.form.nextUser = '';
+        this.form.nextUserName = '';
+        this.$set(this.form, 'nextUserName', '');
       }
-      cb(results)
+      cb(results);
     },
     createFilter(queryString) {
       return (restaurant) => {
-        return restaurant.nickName.toLowerCase().indexOf(queryString.toLowerCase()) === 0
-      }
+        return restaurant.nickName.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
+      };
     },
     // 选择处理人
     handleSelect(item) {
-      this.form.nextUser = item.userName
-      this.form.nextUserName = item.nickName
-      this.$set(this.form, 'nextUserName', item.nickName)
+      this.form.nextUser = item.userName;
+      this.form.nextUserName = item.nickName;
+      this.$set(this.form, 'nextUserName', item.nickName);
       this.$nextTick(() => {
-        this.$refs.form.clearValidate('nextUserName') // 移除校验
-      })
+        this.$refs.form.clearValidate('nextUserName'); // 移除校验
+      });
     },
     // 提交/撤回/操作处理
     dialogConfirm() {
-      let that = this
-      let timer = null
+      let that = this;
+      let timer = null;
       switch (this.moduleType) {
         case 'view':
-          this.revokeAnnotations() // 撤销
-          break
+          this.revokeAnnotations(); // 撤销
+          break;
 
         default:
           timer = setTimeout(() => {
             that.$refs.form.validate((valid) => {
               if (valid) {
-                that.moduleType === 'add' && that.addAnnotations()
-                that.moduleType === 'operation' && that.operateAnnotations()
-                clearTimeout(timer)
+                that.moduleType === 'add' && that.addAnnotations();
+                that.moduleType === 'operation' && that.operateAnnotations();
+                clearTimeout(timer);
               }
-            })
-          }, 300)
-          break
+            });
+          }, 300);
+          break;
       }
     },
     // 新增批注
     addAnnotations() {
-      this.dialogLoading = true
+      this.dialogLoading = true;
       let params = {
         // projectId: store.getters.projectId,
         name: this.fileData.fileName,
         origFileId: this.fileData.fileId, // 原始的文件id
         fileId: this.annotationFileData.fileId,
         // deptName: store.getters.deptName,
-        type: 'doc' // model：模型。doc：文档
-      }
+        type: 'doc', // model：模型。doc：文档
+      };
       // 添加批注
       add(Object.assign(params, this.form))
         .then((res) => {
           this.$message({
             type: res.code === 200 ? 'success' : 'error',
-            message: res.msg
-          })
-          if (res.code === 200) this.$emit('handleAdd')
+            message: res.msg,
+          });
+          if (res.code === 200) this.$emit('handleAdd');
         })
         .finally(() => {
-          this.dialogLoading = false
-        })
+          this.dialogLoading = false;
+        });
     },
     // 撤销
     revokeAnnotations() {
-      this.dialogLoading = true
+      this.dialogLoading = true;
       revoke({ id: this.detailData.id })
         .then((res) => {
           this.$message({
             type: res.code === 200 ? 'success' : 'error',
-            message: res.msg
-          })
-          if (res.code === 200) this.close(true)
+            message: res.msg,
+          });
+          if (res.code === 200) this.close(true);
         })
         .finally(() => {
-          this.dialogLoading = false
-        })
+          this.dialogLoading = false;
+        });
     },
     // 操作  处理
     operateAnnotations() {
-      this.dialogLoading = true
+      this.dialogLoading = true;
       let params = {
         id: this.detailData.id,
         // fileId: this.detailData.fileId,
         // deptName: store.getters.deptName
-      }
+      };
       operate(Object.assign(params, this.form))
         .then((res) => {
           this.$message({
             type: res.code === 200 ? 'success' : 'error',
-            message: res.msg
-          })
-          if (res.code === 200) this.close(true)
+            message: res.msg,
+          });
+          if (res.code === 200) this.close(true);
         })
         .finally(() => {
-          this.dialogLoading = false
-        })
+          this.dialogLoading = false;
+        });
     },
     // 关闭弹窗  refresh 判断是否需要刷新列表数据
     close(refresh, resetForm) {
-      if(this.isClient && resetForm){
+      if (this.isClient && resetForm) {
         this.$refs.form.resetFields();
       }
-      this.$emit('close', refresh)
+      this.$emit('close', refresh);
     },
     dialogConfirmChooseUser(list) {
-      this.form.nextUser = list[0].label
-      this.$set(this.form, 'nextUserName', list[0].nickName)
+      this.form.nextUser = list[0].label;
+      this.$set(this.form, 'nextUserName', list[0].nickName);
       this.$nextTick(() => {
-        this.$refs.form.clearValidate('nextUserName') // 移除校验
-      })
-      this.chooseUserDialog = false
+        this.$refs.form.clearValidate('nextUserName'); // 移除校验
+      });
+      this.chooseUserDialog = false;
     },
-    clickEdit(){
+    clickEdit() {
       this.$emit('clickEditPic', this.detailModel);
     },
-    clickSave(){
-      if(this.isClient){
-        this.$refs["form"].validate(async (valid) => {
+    clickSave() {
+      if (this.isClient) {
+        this.$refs['form'].validate(async (valid) => {
           if (valid) {
             this.handleSave();
           }
         });
-      }else{
+      } else {
         this.handleSave();
       }
     },
-    handleSave(reset){
-      this.close(true, reset)
-      this.$emit("clickSaveBtn", this.detailModel);
+    handleSave(reset) {
+      this.close(true, reset);
+      this.$emit('clickSaveBtn', this.detailModel);
     },
-    beforeClose(){
+    beforeClose() {
       // this.detailData = {};
-      this.close(true)
-    }
-  }
-}
+      this.close(true);
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
 .nextUser {
@@ -549,7 +551,7 @@ export default {
   padding: 12px;
   border-top: 1px solid rgba(0, 0, 0, 0.09);
 }
-.image-edit-container{
+.image-edit-container {
   cursor: pointer;
   float: right;
   width: 36px;
@@ -559,9 +561,8 @@ export default {
   display: flex;
   justify-content: center;
   align-items: center;
-  .image-edit{
+  .image-edit {
     font-size: 32px;
   }
 }
-
 </style>