fl-web-component 0.1.1 → 1.0.1

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

@@ -1,31 +1,48 @@
 <template>
-  <div :class="[isClient ? '': 'box-card']">
-    <div :class="[isClient ? 'box-card box-card_pc': '']" style="height: calc(100vh - 134px)">
+  <div :class="[isClient ? '' : 'box-card']">
+    <div :class="[isClient ? 'box-card box-card_pc' : '']" style="height: calc(100vh - 134px)">
       <div class="box-title">
         <span class="box-title-desc">校审</span>
-        <i v-if="!isClient" class="el-icon-close box-title-close" style="cursor: pointer" @click="$emit('rightOperation', 'proof')" />
+        <i
+          v-if="!isClient"
+          class="el-icon-close box-title-close"
+          style="cursor: pointer"
+          @click="$emit('rightOperation', 'proof')"
+        />
       </div>
 
       <div v-show="!readOnlyMode" v-if="!isClient" v-loading="loading" class="box-add">
-        <el-button type="primary" style="margin-top: 8px; width: 100%"
+        <el-button
+          type="primary"
+          style="margin-top: 8px; width: 100%"
           @click="clickAdd"
-          v-hasPermi="[
-            `project:opinion:add:proj:${defaultParams.projectId}`,
-          ]"
-          >添加校审意见</el-button>
+          v-hasPermi="[`project:opinion:add:proj:${defaultParams.projectId}`]"
+          >添加校审意见</el-button
+        >
         <!-- :image="require('@/assets/images/no_drawer.png')" -->
       </div>
 
       <div class="box-filter">
-        <el-form @submit.native.prevent :model="filterModel" ref="queryForm" :inline="true" label-width="68px"
-          class="box-filter-form">
+        <el-form
+          @submit.native.prevent
+          :model="filterModel"
+          ref="queryForm"
+          :inline="true"
+          label-width="68px"
+          class="box-filter-form"
+        >
           <template v-if="isClient">
             <el-row class="row-bg" :gutter="10">
               <el-col :span="6">
                 <el-form-item width="100%">
                   <el-select clearable v-model="filterModel.postId" placeholder="选择专业">
-                    <el-option v-for="item in postList" :key="item.postId" :label="item.postName" :value="item.postId"
-                      :disabled="item.disabled">
+                    <el-option
+                      v-for="item in postList"
+                      :key="item.postId"
+                      :label="item.postName"
+                      :value="item.postId"
+                      :disabled="item.disabled"
+                    >
                     </el-option>
                   </el-select>
                 </el-form-item>
@@ -33,19 +50,29 @@
               <el-col :span="6">
                 <el-form-item>
                   <el-select clearable v-model="filterModel.status" placeholder="选择状态">
-                    <el-option v-for="item in filterStatusOpt" :key="item.value" :label="item.label" :value="item.value">
+                    <el-option
+                      v-for="item in filterStatusOpt"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    >
                     </el-option>
                   </el-select>
                 </el-form-item>
               </el-col>
               <el-col :span="8">
                 <el-form-item label="" prop="description" :style="{ width: `100%` }">
-                  <el-input v-model="filterModel.description" placeholder="问题描述" clearable size="small"
-                    @keyup.enter.native="handleQuery" />
+                  <el-input
+                    v-model="filterModel.description"
+                    placeholder="问题描述"
+                    clearable
+                    size="small"
+                    @keyup.enter.native="handleQuery"
+                  />
                 </el-form-item>
               </el-col>
               <!-- :offset="2" -->
-              <el-col :span="4" >
+              <el-col :span="4">
                 <el-form-item>
                   <el-button type="primary" size="small" @click="handleQuery">搜索</el-button>
                   <!-- <el-button icon="el-icon-refresh" size="small" @click="resetQuery"
@@ -60,8 +87,13 @@
               <el-col :span="12">
                 <el-form-item>
                   <el-select clearable v-model="filterModel.postId" placeholder="选择专业">
-                    <el-option v-for="item in postList" :key="item.postId" :label="item.postName" :value="item.postId"
-                      :disabled="item.disabled">
+                    <el-option
+                      v-for="item in postList"
+                      :key="item.postId"
+                      :label="item.postName"
+                      :value="item.postId"
+                      :disabled="item.disabled"
+                    >
                     </el-option>
                   </el-select>
                 </el-form-item>
@@ -69,21 +101,37 @@
               <el-col :span="12">
                 <el-form-item>
                   <el-select clearable v-model="filterModel.status" placeholder="选择状态">
-                    <el-option v-for="item in filterStatusOpt" :key="item.value" :label="item.label" :value="item.value">
+                    <el-option
+                      v-for="item in filterStatusOpt"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    >
                     </el-option>
                   </el-select>
                 </el-form-item>
               </el-col>
             </el-row>
-            <el-row type="flex" class="row-bg last-form-item" align="middle" justify="space-between" :gutter="24">
+            <el-row
+              type="flex"
+              class="row-bg last-form-item"
+              align="middle"
+              justify="space-between"
+              :gutter="24"
+            >
               <el-col :span="18">
                 <el-form-item label="" prop="description" :style="{ width: `100%` }">
-                  <el-input v-model="filterModel.description" placeholder="问题描述" clearable size="small"
-                    @keyup.enter.native="handleQuery" />
+                  <el-input
+                    v-model="filterModel.description"
+                    placeholder="问题描述"
+                    clearable
+                    size="small"
+                    @keyup.enter.native="handleQuery"
+                  />
                 </el-form-item>
               </el-col>
               <!-- :offset="2" -->
-              <el-col :span="6" >
+              <el-col :span="6">
                 <el-form-item>
                   <el-button type="primary" size="small" @click="handleQuery">搜索</el-button>
                   <!-- <el-button icon="el-icon-refresh" size="small" @click="resetQuery"
@@ -98,82 +146,106 @@
 
       <div class="box-content">
         <el-scrollbar>
-
-        <!-- v-infinite-scroll="load" -->
-        <!-- style="overflow-y: auto;height: calc(100vh - 250px)" -->
-        <div v-if="dataList.length" :class="[isClient ? 'data-item-container': '']">
-          <div v-for="(item, index) in dataList" :key="index" class="data-item" @click="selectRow(item)">
-            <el-card class="box-card-item"  :class="item.id == selectedRow.id ? 'selected-row': ''" >
-              <div slot="header" class="clearfix">
-                <el-descriptions title="" :column="2">
-                  <el-descriptions-item label="视点编号">{{ item.id }}</el-descriptions-item>
-                  <el-descriptions-item label="" labelClassName="item-label" contentClassName="item-content">
-                    <el-tag class="tag-reply" type="success" size="small" v-if="item.status === `1`">已回复</el-tag>
-                  </el-descriptions-item>
-                  <el-descriptions-item :contentClassName="isClient ? 'item-desc-pc': 'item-desc'" label="问题描述">{{ item.description }}</el-descriptions-item>
-                </el-descriptions>
-              </div>
-              <div :class="['footer', readOnlyMode ? 'readonly-mode' : '']">
-                <el-button 
-                  v-show="!readOnlyMode" 
-                  v-if="!isClient" 
-                  type="text" 
-                  @click="clickDelete(item)"
-                  v-hasPermi="[
-                    `project:opinion:remove:proj:${defaultParams.projectId}`,
-                  ]"
-                ><span>删除</span><i
-                    class="el-icon-delete pmc-fs-14 pmc-fc-BDC6CA" /></el-button>
-                <el-button type="text" @click="handleDetail(item)"><span>详情</span><i
-                    class="el-icon-arrow-right pmc-fs-14 pmc-fc-BDC6CA" /></el-button>
-              </div>
-            </el-card>
+          <!-- v-infinite-scroll="load" -->
+          <!-- style="overflow-y: auto;height: calc(100vh - 250px)" -->
+          <div v-if="dataList.length" :class="[isClient ? 'data-item-container' : '']">
+            <div
+              v-for="(item, index) in dataList"
+              :key="index"
+              class="data-item"
+              @click="selectRow(item)"
+            >
+              <el-card
+                class="box-card-item"
+                :class="item.id == selectedRow.id ? 'selected-row' : ''"
+              >
+                <div slot="header" class="clearfix">
+                  <el-descriptions title="" :column="2">
+                    <el-descriptions-item label="视点编号">{{ item.id }}</el-descriptions-item>
+                    <el-descriptions-item
+                      label=""
+                      labelClassName="item-label"
+                      contentClassName="item-content"
+                    >
+                      <el-tag
+                        class="tag-reply"
+                        type="success"
+                        size="small"
+                        v-if="item.status === `1`"
+                        >已回复</el-tag
+                      >
+                    </el-descriptions-item>
+                    <el-descriptions-item
+                      :contentClassName="isClient ? 'item-desc-pc' : 'item-desc'"
+                      label="问题描述"
+                      >{{ item.description }}</el-descriptions-item
+                    >
+                  </el-descriptions>
+                </div>
+                <div :class="['footer', readOnlyMode ? 'readonly-mode' : '']">
+                  <el-button
+                    v-show="!readOnlyMode"
+                    v-if="!isClient"
+                    type="text"
+                    @click="clickDelete(item)"
+                    v-hasPermi="[`project:opinion:remove:proj:${defaultParams.projectId}`]"
+                    ><span>删除</span><i class="el-icon-delete pmc-fs-14 pmc-fc-BDC6CA"
+                  /></el-button>
+                  <el-button type="text" @click="handleDetail(item)"
+                    ><span>详情</span><i class="el-icon-arrow-right pmc-fs-14 pmc-fc-BDC6CA"
+                  /></el-button>
+                </div>
+              </el-card>
+            </div>
           </div>
-        </div>
-        <el-empty v-if="dataList.length === 0 && !loading" :image-size="150" description="暂无校审意见" />
+          <el-empty
+            v-if="dataList.length === 0 && !loading"
+            :image-size="150"
+            description="暂无校审意见"
+          />
         </el-scrollbar>
       </div>
     </div>
     <!-- @clickEdit="handleEdit" -->
     <!-- v-if="annotationDetailDialog" -->
     <proof-panel-detail
-        ref="proofPanelDetail"
-        :key="dataId"
-        :dialog-visible="annotationDetailDialog"
-        :data-id="dataId"
-        :postList="postList"
-        :userList="userList"
-        :detailProps="detailData"
-        :isClient="isClient"
-        :readOnlyMode="readOnlyMode"
-        :updatingOpinion="updatingOpinion"
-        :defaultParams="defaultParams"
-        @close="closeAnnotationDetailDialog"
-        @clickSaveBtn="saveForm"
-        @clickEditPic="handleEditPic"
-      />
+      ref="proofPanelDetail"
+      :key="dataId"
+      :dialog-visible="annotationDetailDialog"
+      :data-id="dataId"
+      :postList="postList"
+      :userList="userList"
+      :detailProps="detailData"
+      :isClient="isClient"
+      :readOnlyMode="readOnlyMode"
+      :updatingOpinion="updatingOpinion"
+      :defaultParams="defaultParams"
+      @close="closeAnnotationDetailDialog"
+      @clickSaveBtn="saveForm"
+      @clickEditPic="handleEditPic"
+    />
   </div>
 </template>
 
 <script>
-import ProofPanelDetail from './proof-panel-detail.vue'
-import * as modelApi from "../api/index";
+import ProofPanelDetail from './proof-panel-detail.vue';
+import * as modelApi from '../api/index';
 
 let timer = null;
 
 const NEED_UPDATE_ENUM = {
   false: 0,
   true: 1,
-}
+};
 
 export default {
-  name: "proofPanel",
+  name: 'proofPanel',
   components: { ProofPanelDetail },
   props: {
     // 文件id
     fileId: {
       type: Number,
-      default: 0
+      default: 0,
     },
     defaultParams: {
       type: Object,
@@ -187,10 +259,10 @@ export default {
         return {};
       },
     },
-    readOnlyMode:{
+    readOnlyMode: {
       type: Boolean,
       default: false,
-    }
+    },
   },
   data() {
     return {
@@ -198,24 +270,24 @@ export default {
       queryParams: {
         origFileId: this.fileId, // 批注前  原始的文件id
         pageNum: 1,
-        pageSize: 3
+        pageSize: 3,
       },
       dataList: [],
       userList: [],
       filterModel: {},
       filterStatusOpt: [
         {
-          value: "0",
-          label: "未处理",
+          value: '0',
+          label: '未处理',
         },
         {
-          value: "1",
-          label: "已处理",
+          value: '1',
+          label: '已处理',
         },
         {
-          value: "2",
-          label: "待确认",
-        }
+          value: '2',
+          label: '待确认',
+        },
       ],
       postList: [],
       loading: false,
@@ -225,38 +297,37 @@ export default {
       selectedRow: {},
       detailData: {},
       updatingOpinion: false,
-    }
+    };
   },
   computed: {
     isClient() {
-      return this.defaultParams.client == 'true'
+      return this.defaultParams.client == 'true';
     },
   },
-  watch:{
+  watch: {
     // 列表详情
     selectedRow(row) {
-      console.log('selectedRow')
+      console.log('selectedRow');
       this.detailData = Object.assign({}, row);
     },
     // 编辑新建详情
-    proofData:{
-      handler(data){
+    proofData: {
+      handler(data) {
         this.detailData = Object.assign({}, data);
-        console.log(this.detailData)
+        console.log(this.detailData);
       },
       deep: true,
-    }
-  },
-  created() {
+    },
   },
+  created() {},
   mounted() {
     // web端正常初始化，pc端不初始化
-    if(!this.isClient){
-      this.init()
+    if (!this.isClient) {
+      this.init();
     }
   },
   methods: {
-    init(){
+    init() {
       this.getProofOpinionList(this.defaultParams);
       this.getPostList();
       this.getProofProjectUserList({
@@ -275,19 +346,19 @@ export default {
           //   item.stageId = this.defaultParams.stageId;
           //   item.projectId = this.defaultParams.projectId
           // }); // TODO dev delete
-          console.log(res.rows)
-          this.$set(this, "dataList", res.rows ? res.rows : []);
+          console.log(res.rows);
+          this.$set(this, 'dataList', res.rows ? res.rows : []);
         })
-        .catch((err) => { })
+        .catch((err) => {})
         .finally(() => {
           this.currentRow = null;
-          this.detailStatus = "view";
+          this.detailStatus = 'view';
         });
     },
     getPostList() {
       modelApi.getPostList().then((res) => {
         if (res.code != 200) {
-          this.$message({ type: "warning", message: "暂无属性数据" });
+          this.$message({ type: 'warning', message: '暂无属性数据' });
           return;
         } else {
           this.postList = res.rows;
@@ -295,91 +366,96 @@ export default {
       });
     },
     load() {
-      if (this.dataList.length >= this.total) return false
-      this.queryParams.pageNum += 1
-      this.getList()
+      if (this.dataList.length >= this.total) return false;
+      this.queryParams.pageNum += 1;
+      this.getList();
     },
     // 预览
     handlePerview(id, callback) {
       perview({ id }).then((res) => {
-        let reader = new FileReader()
-        reader.readAsDataURL(res) // 转换为base64
+        let reader = new FileReader();
+        reader.readAsDataURL(res); // 转换为base64
         reader.onload = function () {
-          callback(reader.result)
-        }
-      })
+          callback(reader.result);
+        };
+      });
     },
     handleDetail(row) {
       const params = {
         id: row.id,
         projectId: this.defaultParams.projectId,
-      }
-      modelApi.getProofOpinionById(params).then((res) => {
-        if(res.code == 200){
-          this.selectedRow = res.data
-        }else{
-          this.selectedRow = row
-        }
-      }).catch((err) => {
-        console.log(err)
-        this.selectedRow = row
-      }).finally(() => {
-        this.annotationDetailDialog = true
-      })
+      };
+      modelApi
+        .getProofOpinionById(params)
+        .then((res) => {
+          if (res.code == 200) {
+            this.selectedRow = res.data;
+          } else {
+            this.selectedRow = row;
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+          this.selectedRow = row;
+        })
+        .finally(() => {
+          this.annotationDetailDialog = true;
+        });
     },
     // 取消按钮
     cancel() {
-      this.open = false
-      this.reset()
+      this.open = false;
+      this.reset();
     },
     // 关闭
     closeAnnotationDetailDialog(refresh) {
       refresh && this.getProofOpinionList(this.defaultParams);
-      this.annotationDetailDialog = false
+      this.annotationDetailDialog = false;
     },
-    openAnnotationDetailDialog(){
-      this.annotationDetailDialog = true
+    openAnnotationDetailDialog() {
+      this.annotationDetailDialog = true;
     },
     clickDelete(item) {
       this.$confirm('此操作将删除, 是否继续?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        const { id } = item;
-        modelApi
-          .deleteProofOpinion({
-            ids: id,
-            projectId: this.defaultParams.projectId,
-            // stageId: this.defaultParams.stageId,
-          })
-          .then((res) => {
-            if (res.code != 200) {
-              this.$message({
-                type: "error",
-                message: res.msg,
-              });
-            } else {
-              // this.disabledForm(true);
-
-              this.currentRow = null;
-              this.detailModel = {};
-              this.$emit("deleteRow", true);
-              this.getProofOpinionList(this.defaultParams);
+        type: 'warning',
+      })
+        .then(() => {
+          const { id } = item;
+          modelApi
+            .deleteProofOpinion({
+              ids: id,
+              projectId: this.defaultParams.projectId,
+              // stageId: this.defaultParams.stageId,
+            })
+            .then((res) => {
+              if (res.code != 200) {
+                this.$message({
+                  type: 'error',
+                  message: res.msg,
+                });
+              } else {
+                // this.disabledForm(true);
+
+                this.currentRow = null;
+                this.detailModel = {};
+                this.$emit('deleteRow', true);
+                this.getProofOpinionList(this.defaultParams);
+                this.$message({
+                  type: 'success',
+                  message: res.msg,
+                });
+              }
+            })
+            .catch((res) => {
               this.$message({
-                type: "success",
+                type: 'error',
                 message: res.msg,
               });
-            }
-          })
-          .catch((res) => {
-            this.$message({
-              type: "error",
-              message: res.msg,
             });
-          });
-      }).catch(() => {
-      });
+        })
+        .catch(() => {});
     },
     handleQuery() {
       const params = {
@@ -389,18 +465,18 @@ export default {
       this.getProofOpinionList(params);
     },
     clickAdd() {
-      this.detailStatus = "add";
+      this.detailStatus = 'add';
       this.selectedRow = {}; // 清空已选数据
       // this.$refs.tableRef.setCurrentRow(); // 清空表格列表选择项
       this.detailModel = {}; // 清空表单
-      this.detailData = {}
+      this.detailData = {};
       // this.disabledForm(false); // 表单可编辑
-      this.$emit("clickAddBtn", {
+      this.$emit('clickAddBtn', {
         detailStatus: this.detailStatus,
       });
     },
-    handleProofSavelBtn(data){
-      this.$emit('clickSaveBtn', data)
+    handleProofSavelBtn(data) {
+      this.$emit('clickSaveBtn', data);
     },
     // saveForm(data, success, fail){
     //   this.annotationDetailDialog = true;
@@ -419,21 +495,21 @@ export default {
       //   console.log(this.$refs.proofPanelDetail)
       //   this.$refs.proofPanelDetail.saveForm(data, success, fail)
       // })
-      
+
       // 去除临时截图数据
-      if(data.previewScreenshotData){
+      if (data.previewScreenshotData) {
         delete data.previewScreenshotData;
       }
 
       // 上传截图判断
-      if(!data.problemPrintscreenId){
+      if (!data.problemPrintscreenId) {
         this.$message({
-          type: "warning",
+          type: 'warning',
           message: '视点截图上传中，请稍后...',
         });
-        return
+        return;
       }
-      
+
       this.updatingOpinion = true;
 
       if (data.id) {
@@ -446,7 +522,7 @@ export default {
           .then((res) => {
             if (res.code != 200) {
               this.$message({
-                type: "error",
+                type: 'error',
                 message: res.msg,
               });
             } else {
@@ -457,7 +533,7 @@ export default {
               this.getProofOpinionList(this.defaultParams);
 
               this.$message({
-                type: "success",
+                type: 'success',
                 message: res.msg,
               });
             }
@@ -465,14 +541,14 @@ export default {
           })
           .catch((res) => {
             this.$message({
-              type: "error",
+              type: 'error',
               message: res.msg,
             });
             fail && fail();
           })
           .finally(() => {
             this.annotationDetailDialog = false;
-            this.updatingOpinion = false
+            this.updatingOpinion = false;
             // this.detailStatus = "view";
           });
       } else {
@@ -487,7 +563,7 @@ export default {
           .then((res) => {
             if (res.code != 200) {
               this.$message({
-                type: "error",
+                type: 'error',
                 message: res.msg,
               });
             } else {
@@ -495,7 +571,7 @@ export default {
               this.getProofOpinionList(this.defaultParams);
 
               this.$message({
-                type: "success",
+                type: 'success',
                 message: res.msg,
               });
             }
@@ -503,43 +579,45 @@ export default {
           })
           .catch((res) => {
             this.$message({
-              type: "error",
+              type: 'error',
               message: res.msg,
             });
             fail && fail();
           })
           .finally(() => {
             this.annotationDetailDialog = false;
-            this.updatingOpinion = false
+            this.updatingOpinion = false;
           });
       }
     },
-    handleEditPic(detailData){
-      this.annotationDetailDialog = false
-      this.$emit('clickEditBtn', detailData)
+    handleEditPic(detailData) {
+      this.annotationDetailDialog = false;
+      this.$emit('clickEditBtn', detailData);
     },
-    selectRow(row){
+    selectRow(row) {
       this.selectedRow = row;
-      this.$emit('selectRow', this.selectedRow)
+      this.$emit('selectRow', this.selectedRow);
     },
     clickEditPic(data) {
-      this.detailStatus = "edit";
+      this.detailStatus = 'edit';
       // backupDetailModel = Object.assign({}, this.detailModel);
 
-      this.$emit("clickEditBtn", {
+      this.$emit('clickEditBtn', {
         detailStatus: this.detailStatus,
       });
     },
-    getProofProjectUserList(params){
+    getProofProjectUserList(params) {
       modelApi.getProofProjectUserList(params).then((res) => {
         if (res.code == 200) {
           let data = res.rows;
-          this.userList = data && data.map((item) => {
-            return {
-              userName: item.userName,
-              userId: item.userId
-            }
-          })
+          this.userList =
+            data &&
+            data.map((item) => {
+              return {
+                userName: item.userName,
+                userId: item.userId,
+              };
+            });
         }
       });
     },
@@ -552,21 +630,21 @@ export default {
               this.$confirm('检测到模型更新，是否刷新页面进行更新?', '提示', {
                 confirmButtonText: '确定',
                 cancelButtonText: '取消',
-                type: 'warning'
+                type: 'warning',
               }).then(() => {
                 window.location.reload();
-              })
+              });
               clearInterval(timer);
             }
           }
         });
-      }, 30000)
+      }, 30000);
     },
-    clearUpdateModelInterval(){
+    clearUpdateModelInterval() {
       clearInterval(timer);
-    }
-  }
-}
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
@@ -596,11 +674,10 @@ export default {
     }
 
     .selected-row {
-      border: 1px solid #008DE9;
+      border: 1px solid #008de9;
     }
   }
 
-
   .footer {
     height: 36px;
     line-height: 36px;
@@ -612,7 +689,7 @@ export default {
     cursor: pointer;
 
     span {
-      font-size: 14
+      font-size: 14;
     }
   }
 
@@ -715,7 +792,6 @@ export default {
   ::v-deep .el-scrollbar__thumb {
     background-color: #e0e0e0;
   }
-
 }
 
 ::v-deep .box-card_pc {