fl-web-component 0.1.0

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

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