fl-web-component 0.1.0

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

@@ -0,0 +1,770 @@
+<template>
+  <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')" />
+      </div>
+
+      <div v-show="!readOnlyMode" v-if="!isClient" v-loading="loading" class="box-add">
+        <el-button type="primary" style="margin-top: 8px; width: 100%"
+          @click="clickAdd"
+          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">
+          <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>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <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>
+                  </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-form-item>
+              </el-col>
+              <!-- :offset="2" -->
+              <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"
+                  >重置</el-button
+                > -->
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </template>
+          <template v-else>
+            <el-row type="flex" class="row-bg" align="middle" justify="space-between" :gutter="24">
+              <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>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <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>
+                  </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-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-form-item>
+              </el-col>
+              <!-- :offset="2" -->
+              <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"
+                  >重置</el-button
+                > -->
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </template>
+        </el-form>
+      </div>
+
+      <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>
+          </div>
+        </div>
+        <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"
+      />
+  </div>
+</template>
+
+<script>
+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",
+  components: { ProofPanelDetail },
+  props: {
+    // 文件id
+    fileId: {
+      type: Number,
+      default: 0
+    },
+    defaultParams: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+    proofData: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+    readOnlyMode:{
+      type: Boolean,
+      default: false,
+    }
+  },
+  data() {
+    return {
+      // 查询参数
+      queryParams: {
+        origFileId: this.fileId, // 批注前  原始的文件id
+        pageNum: 1,
+        pageSize: 3
+      },
+      dataList: [],
+      userList: [],
+      filterModel: {},
+      filterStatusOpt: [
+        {
+          value: "0",
+          label: "未处理",
+        },
+        {
+          value: "1",
+          label: "已处理",
+        },
+        {
+          value: "2",
+          label: "待确认",
+        }
+      ],
+      postList: [],
+      loading: false,
+      annotationDetailDialog: false, // 查询详情弹窗
+      dataId: '', // 主键 id
+      screenHeight: document.documentElement.clientHeight, // 屏幕高度
+      selectedRow: {},
+      detailData: {},
+      updatingOpinion: false,
+    }
+  },
+  computed: {
+    isClient() {
+      return this.defaultParams.client == 'true'
+    },
+  },
+  watch:{
+    // 列表详情
+    selectedRow(row) {
+      console.log('selectedRow')
+      this.detailData = Object.assign({}, row);
+    },
+    // 编辑新建详情
+    proofData:{
+      handler(data){
+        this.detailData = Object.assign({}, data);
+        console.log(this.detailData)
+      },
+      deep: true,
+    }
+  },
+  created() {
+  },
+  mounted() {
+    // web端正常初始化，pc端不初始化
+    if(!this.isClient){
+      this.init()
+    }
+  },
+  methods: {
+    init(){
+      this.getProofOpinionList(this.defaultParams);
+      this.getPostList();
+      this.getProofProjectUserList({
+        projectId: this.defaultParams.projectId,
+      });
+    },
+    getProofOpinionList(params) {
+      modelApi
+        .getProofOpinionList(params)
+        .then((res) => {
+          // if (this.lodash.isEmpty(res)) {
+          //   this.$message({ type: "warning", message: "暂无数据" });
+          //   return;
+          // }
+          // res.rows.forEach(item => {
+          //   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 : []);
+        })
+        .catch((err) => { })
+        .finally(() => {
+          this.currentRow = null;
+          this.detailStatus = "view";
+        });
+    },
+    getPostList() {
+      modelApi.getPostList().then((res) => {
+        if (res.code != 200) {
+          this.$message({ type: "warning", message: "暂无属性数据" });
+          return;
+        } else {
+          this.postList = res.rows;
+        }
+      });
+    },
+    load() {
+      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
+        reader.onload = function () {
+          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
+      })
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false
+      this.reset()
+    },
+    // 关闭
+    closeAnnotationDetailDialog(refresh) {
+      refresh && this.getProofOpinionList(this.defaultParams);
+      this.annotationDetailDialog = false
+    },
+    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);
+              this.$message({
+                type: "success",
+                message: res.msg,
+              });
+            }
+          })
+          .catch((res) => {
+            this.$message({
+              type: "error",
+              message: res.msg,
+            });
+          });
+      }).catch(() => {
+      });
+    },
+    handleQuery() {
+      const params = {
+        ...this.filterModel,
+        ...this.defaultParams,
+      };
+      this.getProofOpinionList(params);
+    },
+    clickAdd() {
+      this.detailStatus = "add";
+      this.selectedRow = {}; // 清空已选数据
+      // this.$refs.tableRef.setCurrentRow(); // 清空表格列表选择项
+      this.detailModel = {}; // 清空表单
+      this.detailData = {}
+      // this.disabledForm(false); // 表单可编辑
+      this.$emit("clickAddBtn", {
+        detailStatus: this.detailStatus,
+      });
+    },
+    handleProofSavelBtn(data){
+      this.$emit('clickSaveBtn', data)
+    },
+    // saveForm(data, success, fail){
+    //   this.annotationDetailDialog = true;
+
+    //   this.$nextTick(() => {
+    //     console.log(this.$refs.proofPanelDetail)
+    //     this.$refs.proofPanelDetail.saveForm(data, success, fail)
+    //     this.annotationDetailDialog = false;
+    //   })
+    // },
+    saveForm(data, success, fail) {
+      console.log(data);
+      this.annotationDetailDialog = true;
+
+      // this.$nextTick(() => {
+      //   console.log(this.$refs.proofPanelDetail)
+      //   this.$refs.proofPanelDetail.saveForm(data, success, fail)
+      // })
+      
+      // 去除临时截图数据
+      if(data.previewScreenshotData){
+        delete data.previewScreenshotData;
+      }
+
+      // 上传截图判断
+      if(!data.problemPrintscreenId){
+        this.$message({
+          type: "warning",
+          message: '视点截图上传中，请稍后...',
+        });
+        return
+      }
+      
+      this.updatingOpinion = true;
+
+      if (data.id) {
+        // if(this.defaultParams.toProjectId){
+        //   data.projectId = '';
+        //   data.toProjectId = this.defaultParams.toProjectId
+        // }
+        modelApi
+          .putProofOpinion(data)
+          .then((res) => {
+            if (res.code != 200) {
+              this.$message({
+                type: "error",
+                message: res.msg,
+              });
+            } else {
+              // this.disabledForm(true);
+
+              // this.detailModel = {}; // 清空表单
+
+              this.getProofOpinionList(this.defaultParams);
+
+              this.$message({
+                type: "success",
+                message: res.msg,
+              });
+            }
+            success && success();
+          })
+          .catch((res) => {
+            this.$message({
+              type: "error",
+              message: res.msg,
+            });
+            fail && fail();
+          })
+          .finally(() => {
+            this.annotationDetailDialog = false;
+            this.updatingOpinion = false
+            // this.detailStatus = "view";
+          });
+      } else {
+        // if(this.defaultParams.projectId){
+        //   data.projectId = this.defaultParams.projectId;
+        //   data.toProjectId = '';
+        // }
+        data.status = '0'; // 未处理
+
+        modelApi
+          .addProofOpinion(data)
+          .then((res) => {
+            if (res.code != 200) {
+              this.$message({
+                type: "error",
+                message: res.msg,
+              });
+            } else {
+              // this.disabledForm(true);
+              this.getProofOpinionList(this.defaultParams);
+
+              this.$message({
+                type: "success",
+                message: res.msg,
+              });
+            }
+            success && success();
+          })
+          .catch((res) => {
+            this.$message({
+              type: "error",
+              message: res.msg,
+            });
+            fail && fail();
+          })
+          .finally(() => {
+            this.annotationDetailDialog = false;
+            this.updatingOpinion = false
+          });
+      }
+    },
+    handleEditPic(detailData){
+      this.annotationDetailDialog = false
+      this.$emit('clickEditBtn', detailData)
+    },
+    selectRow(row){
+      this.selectedRow = row;
+      this.$emit('selectRow', this.selectedRow)
+    },
+    clickEditPic(data) {
+      this.detailStatus = "edit";
+      // backupDetailModel = Object.assign({}, this.detailModel);
+
+      this.$emit("clickEditBtn", {
+        detailStatus: this.detailStatus,
+      });
+    },
+    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
+            }
+          })
+        }
+      });
+    },
+    IfUpdateModel(params) {
+      timer = setInterval(() => {
+        modelApi.IfUpdateModel(params).then((res) => {
+          if (res.code == 200) {
+            const data = res.data;
+            if (NEED_UPDATE_ENUM.false !== data) {
+              this.$confirm('检测到模型更新，是否刷新页面进行更新?', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+              }).then(() => {
+                window.location.reload();
+              })
+              clearInterval(timer);
+            }
+          }
+        });
+      }, 30000)
+    },
+    clearUpdateModelInterval(){
+      clearInterval(timer);
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.box-card {
+  padding-top: 0;
+  padding-bottom: 0;
+  background: #fff;
+  width: 400px;
+
+  .tree-header {
+    height: 52px;
+    line-height: 52px;
+    border-bottom: 1px solid #dfdfdf;
+    // margin-bottom: 15px;
+  }
+
+  .data-item {
+    // height: 248px;
+    background: #ffffff;
+    border-radius: 8px;
+    border: 1px solid #e6e6e6;
+    margin-top: 14px;
+
+    .info {
+      padding: 0 12px;
+      height: 36px;
+    }
+
+    .selected-row {
+      border: 1px solid #008DE9;
+    }
+  }
+
+
+  .footer {
+    height: 36px;
+    line-height: 36px;
+    padding: 0 12px;
+    border-top: 1px solid #e6e6e6;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+
+    span {
+      font-size: 14
+    }
+  }
+
+  .box-content,
+  .box-filter,
+  .box-add {
+    padding: 5px 10px;
+  }
+
+  .box-content {
+    height: 540px;
+  }
+
+  .data-item {
+    margin: 10px 0;
+
+    &:first-child {
+      margin-top: 0;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  &.box-card_pc {
+    .data-item {
+      margin: 10px 0;
+    }
+  }
+
+  ::v-deep .box-card-item {
+    .item-label {
+      display: none;
+    }
+
+    .item-content {
+      flex-direction: row-reverse;
+    }
+
+    .item-desc {
+      display: -webkit-box;
+      display: -moz-box;
+      /* 旧版Firefox */
+      display: box;
+      -webkit-box-orient: vertical;
+      -moz-box-orient: vertical;
+      box-orient: vertical;
+      -webkit-line-clamp: 2;
+      line-clamp: 2;
+      /* 标准属性 */
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .item-desc-pc {
+      display: inline-block;
+      max-width: 100%;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  .box-filter-form {
+    display: flex;
+    flex-direction: column;
+
+    ::v-deep .el-form-item {
+      width: 100%;
+
+      .el-form-item__content {
+        width: 100%;
+        box-sizing: border-box;
+        // padding-right: 20px;
+      }
+    }
+  }
+
+  .box-title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 52px;
+    line-height: 52px;
+    padding-left: 8px;
+    padding-right: 8px;
+    border-bottom: 1px solid #dfdfdf;
+
+    .box-title-desc {
+      font-size: 14px;
+      font-weight: bold;
+    }
+
+    .box-title-close {
+      font-size: 24px;
+    }
+  }
+
+  ::v-deep .el-scrollbar__thumb {
+    background-color: #e0e0e0;
+  }
+
+}
+
+::v-deep .box-card_pc {
+  width: 100%;
+
+  .data-item-container {
+    display: grid;
+    grid-template-columns: repeat(2, 49%);
+    column-gap: 20px;
+  }
+
+  .el-card__header {
+    padding: 10px;
+  }
+
+  .el-card__body {
+    padding: 0;
+  }
+
+  .footer {
+    flex-direction: row-reverse;
+  }
+
+  .box-filter {
+    .el-select {
+      width: 100%;
+    }
+  }
+}
+
+.readonly-mode.footer {
+  flex-direction: row-reverse;
+}
+
+::v-deep.el-scrollbar {
+  height: 580px;
+
+  .el-scrollbar__wrap {
+    margin-bottom: 0px !important;
+    margin-right: 0px !important;
+  }
+}
+
+.tag-reply {
+  height: 20px;
+  line-height: 20px;
+}
+
+::v-deep .last-form-item {
+  margin-bottom: -25px;
+}
+</style>