fl-web-component 1.2.11 → 1.2.13

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

@@ -1,568 +0,0 @@
-<template>
-  <!-- 添加批注 -->
-  <div>
-    <el-dialog
-      v-if="showDialog"
-      title="视点"
-      confirm-text="确定"
-      width="60%"
-      custom-class="test-dialog"
-      :append-to-body="true"
-      :visible.sync="showDialog"
-      :fullscreen="isClient"
-      :show-close="!this.isClient"
-      :before-close="beforeClose"
-    >
-      <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"
-        >
-          <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>
-          </div>
-          <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-item label="所属专业">{{ postName }}</el-descriptions-item>
-            <el-descriptions-item label="问题描述">
-              <el-input
-                type="textarea"
-                :rows="3"
-                size="medium"
-                placeholder="请输入"
-                v-model="detailModel.description"
-                disabled
-              >
-              </el-input>
-            </el-descriptions-item>
-          </el-descriptions>
-          <el-form
-            v-else
-            @submit.native.prevent
-            :model="detailModel"
-            ref="detailForm"
-            :inline="true"
-            label-width="68px"
-            class="detail-form"
-          >
-            <el-form-item label="所属专业" prop="postId">
-              <el-select v-model="detailModel.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-form-item label="问题描述" prop="description">
-              <el-input
-                type="textarea"
-                :rows="3"
-                size="medium"
-                placeholder="请输入"
-                v-model="detailModel.description"
-              >
-              </el-input>
-              <!-- <el-input
-                
-                v-model="detailModel.desc"
-                prefix-icon="el-icon-search"
-                placeholder="请输入"
-                clearable
-                size="small"
-                @keyup.enter.native="handleQuery"
-              /> -->
-            </el-form-item>
-          </el-form>
-          <el-divider content-position="left">回复</el-divider>
-          <el-form
-            v-if="isClient"
-            ref="form"
-            :model="detailModel"
-            label-width="68px"
-            class="reply-form"
-            :rules="rules"
-          >
-            <el-form-item label="解决人" prop="solveBy">
-              <el-select v-model="detailModel.solveBy" placeholder="请选择">
-                <el-option
-                  v-for="item in userList"
-                  :key="item.userId"
-                  :label="item.userName"
-                  :value="item.userName"
-                >
-                </el-option>
-              </el-select>
-            </el-form-item>
-
-            <el-form-item label="解决意见" prop="status">
-              <el-select v-model="detailModel.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-form-item label="视点截图">
-              <el-image
-                v-if="detailModel.replyPrintscreen"
-                :src="`//${detailModel.replyPrintscreen}`"
-                :preview-src-list="[`//${detailModel.replyPrintscreen}`]"
-              >
-              </el-image>
-              <span v-else>暂无</span>
-            </el-form-item> -->
-            <el-form-item label="备注" prop="remark">
-              <el-input
-                type="textarea"
-                :rows="2"
-                size="small"
-                placeholder="请输入"
-                v-model="detailModel.remark"
-              />
-            </el-form-item>
-            <el-form-item label="创建时间" prop="createTime">
-              {{ detailModel.createTime }}
-            </el-form-item>
-            <el-form-item label="回复时间" prop="replyTime"
-              >{{ detailModel.replyTime }}
-            </el-form-item>
-          </el-form>
-          <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-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-else
-          type="primary"
-          @click="clickSave"
-          :loading="updatingOpinion"
-          v-hasPermi="btnPermission"
-          >保存</el-button
-        >
-      </span>
-    </el-dialog>
-  </div>
-</template>
-<script>
-import ImageViewer from './imageViewer';
-export default {
-  components: {
-    ImageViewer,
-  },
-  props: {
-    dialogVisible: {
-      type: Boolean,
-      default: false,
-    },
-    // 批注前初始的文档文件数据
-    fileData: {
-      type: Object,
-      default: () => {},
-    },
-    // 批注后文件的数据
-    annotationFileData: {
-      type: Object,
-      default: () => {},
-    },
-    // // 列表id 用于查看详情
-    // dataId: {
-    //   type: Number,
-    //   default: 0
-    // },
-    // 操作类型
-    moduleType: {
-      type: String,
-      default: 'add',
-    },
-    detailProps: {
-      type: Object,
-      default: () => {},
-    },
-    postList: {
-      type: Array,
-      default: () => [],
-    },
-    userList: {
-      type: Array,
-      default: () => [],
-    },
-    isClient: {
-      type: Boolean,
-      default: false,
-    },
-    readOnlyMode: {
-      type: Boolean,
-      default: false,
-    },
-    updatingOpinion: {
-      type: Boolean,
-      default: false,
-    },
-    defaultParams: {
-      type: Object,
-      default() {
-        return {};
-      },
-    },
-  },
-  computed: {
-    screenshotUrl: {
-      get() {
-        // console.log(this.detailModel.previewScreenshotData)
-        const screenshotUrl =
-          this.detailModel.previewScreenshotData || `//${this.detailModel.problemPrintscreen}`;
-        return screenshotUrl;
-      },
-      set(val) {
-        this.detailModel.problemPrintscreen = val;
-      },
-    },
-    detailModel: {
-      get() {
-        const detailData = Object.keys(this.detailProps).length
-          ? this.detailProps
-          : Object.keys(this.detailData).length
-          ? this.detailData
-          : {};
-
-        return detailData;
-      },
-    },
-    isErrorImage() {
-      return !(this.detailModel.previewScreenshotData || this.detailModel.problemPrintscreen);
-    },
-    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;
-    },
-    postName() {
-      const item = this.postList.find((item) => item.postId === this.detailModel.postId);
-      return item && item.postName;
-    },
-    isEditing() {
-      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;
-    },
-  },
-  data() {
-    return {
-      loading: false,
-      dialogLoading: false,
-      form: {},
-      imageUrl: '', // 图片路径
-      // nickName: this.filterUser(store.getters.userId), // 用户名
-      // userName: store.getters.name, // 用户登录名
-      // departName: JSON.parse(sessionStorage.getItem('dept')).deptName, // 部门
-      chooseUserDialog: false,
-      // fileId: '',
-      confirmText: '提交',
-      detailData: {},
-      filterStatusOpt: [
-        {
-          value: '0',
-          label: '未处理',
-        },
-        {
-          value: '1',
-          label: '已处理',
-        },
-        {
-          value: '2',
-          label: '待确认',
-        },
-      ],
-      showDialog: false,
-      rules: {
-        solveBy: [{ required: true, message: '请选择解决人', trigger: 'blur' }],
-      },
-    };
-  },
-  watch: {
-    dialogVisible(val) {
-      if (val) {
-        this.showDialog = true;
-      } else {
-        this.showDialog = false;
-      }
-    },
-    showDialog(val) {
-      val === false && this.close(true);
-    },
-  },
-  created() {
-    if (this.moduleType === 'add') {
-      // this.fileId = this.annotationFileData.fileId
-      // this.getUserList() // 获取用户列表
-      // this.perview() // 预览
-    } else {
-      // this.moduleType === 'operation' && this.getUserList() // 获取用户列表
-      this.handleDetail();
-    }
-  },
-  methods: {
-    perview() {
-      let _this = this;
-      perview({ id: this.fileId })
-        .then((res) => {
-          let reader = new FileReader();
-          reader.readAsDataURL(res); // 转换为base64
-          reader.onload = function () {
-            _this.imageUrl = reader.result;
-            _this.$refs.ImageViewrRef.resetImage();
-          };
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-    // 详情
-    handleDetail() {
-      this.loading = true;
-      detail({ id: this.dataId }).then((res) => {
-        if (res.code === 200) {
-          this.detailData = res.data;
-          // 撤回状态
-          if (res.data.status === '2' && this.moduleType === 'view')
-            this.detailData.recordList = [res.data];
-          // 流程字段 操作模式并当前登陆人 = 创建人
-          if (
-            this.moduleType === 'operation' &&
-            this.detailData.createBy === this.userName &&
-            this.detailData.recordList.length === 0
-          ) {
-            this.form.operateState = '0';
-            this.$nextTick(() => {
-              this.$refs.form.clearValidate('operateState'); // 移除校验
-            });
-          }
-          this.fileId = res.data.fileId;
-          this.perview();
-        }
-      });
-    },
-    // 下一处理人 输入建议
-    querySearch(queryString, cb) {
-      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', '');
-      }
-      cb(results);
-    },
-    createFilter(queryString) {
-      return (restaurant) => {
-        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.$nextTick(() => {
-        this.$refs.form.clearValidate('nextUserName'); // 移除校验
-      });
-    },
-    // 提交/撤回/操作处理
-    dialogConfirm() {
-      let that = this;
-      let timer = null;
-      switch (this.moduleType) {
-        case 'view':
-          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);
-              }
-            });
-          }, 300);
-          break;
-      }
-    },
-    // 新增批注
-    addAnnotations() {
-      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：文档
-      };
-      // 添加批注
-      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');
-        })
-        .finally(() => {
-          this.dialogLoading = false;
-        });
-    },
-    // 撤销
-    revokeAnnotations() {
-      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);
-        })
-        .finally(() => {
-          this.dialogLoading = false;
-        });
-    },
-    // 操作  处理
-    operateAnnotations() {
-      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);
-        })
-        .finally(() => {
-          this.dialogLoading = false;
-        });
-    },
-    // 关闭弹窗  refresh 判断是否需要刷新列表数据
-    close(refresh, resetForm) {
-      if (this.isClient && resetForm) {
-        this.$refs.form.resetFields();
-      }
-      this.$emit('close', refresh);
-    },
-    dialogConfirmChooseUser(list) {
-      this.form.nextUser = list[0].label;
-      this.$set(this.form, 'nextUserName', list[0].nickName);
-      this.$nextTick(() => {
-        this.$refs.form.clearValidate('nextUserName'); // 移除校验
-      });
-      this.chooseUserDialog = false;
-    },
-    clickEdit() {
-      this.$emit('clickEditPic', this.detailModel);
-    },
-    clickSave() {
-      if (this.isClient) {
-        this.$refs['form'].validate(async (valid) => {
-          if (valid) {
-            this.handleSave();
-          }
-        });
-      } else {
-        this.handleSave();
-      }
-    },
-    handleSave(reset) {
-      this.close(true, reset);
-      this.$emit('clickSaveBtn', this.detailModel);
-    },
-    beforeClose() {
-      // this.detailData = {};
-      this.close(true);
-    },
-  },
-};
-</script>
-<style lang="scss" scoped>
-.nextUser {
-  position: relative;
-  i {
-    position: absolute;
-    bottom: 4px;
-    right: 10px;
-    z-index: 1;
-    color: #c2d8e6;
-    font-size: 20px;
-  }
-}
-.list-item {
-  padding: 12px;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.09);
-}
-.operation {
-  padding: 12px;
-  border-top: 1px solid rgba(0, 0, 0, 0.09);
-}
-.image-edit-container {
-  cursor: pointer;
-  float: right;
-  width: 36px;
-  height: 36px;
-  background: #fff;
-  border-radius: 5px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  .image-edit {
-    font-size: 32px;
-  }
-}
-</style>