fl-web-component 1.2.12 → 1.2.13

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

@@ -1,846 +0,0 @@
-<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>