tool-tech-front/src/views/interchange/toolDetail.vue

<template>
  <div class="card-box pt5">
    <div>
      <div class="box-title">
        基本信息
      </div>
      <div class="el-form-border">
        <el-form ref="form" label-width="150px">
          <el-row>
            <el-col :span="12"> <el-form-item label="工具编号">0001</el-form-item> </el-col>
            <el-col :span="12"> <el-form-item label="工具名称">工具名称2</el-form-item> </el-col>
            <el-col :span="12"> <el-form-item label="工具类别">网络工具</el-form-item> </el-col>
            <el-col :span="12"> <el-form-item label="工具来源">单位自建</el-form-item> </el-col>
            <el-col :span="12"> <el-form-item label="负责人">赵宁宇</el-form-item> </el-col>
            <el-col :span="12"> <el-form-item label="归属单位">人力资源部</el-form-item> </el-col>
            <el-col :span="12"> <el-form-item label="状态"><span class="green">在用</span></el-form-item> </el-col>
            <el-col :span="12"> <el-form-item label="工具用途">主要用于单位网络使用</el-form-item> </el-col>
            <el-col :span="12"> <el-form-item label="测试情况">运行良好，可正常使用</el-form-item> </el-col>
            <el-col :span="12"> <el-form-item label="功能描述">单位网络使用</el-form-item> </el-col>
            <el-col :span="12"> <el-form-item label="适用条件">网络正常</el-form-item> </el-col>
            <el-col :span="12"> <el-form-item label="操作说明">正常开启即可用</el-form-item> </el-col>
            <el-col :span="12"> <el-form-item label="备注">工具使用完成后，请做好保养工作。</el-form-item> </el-col>
          </el-row>
        </el-form><!--el-form-->
      </div><!--el-form-border 表单-->
    </div><!--fl 左侧页签-->
    <div>
      <div class="tboper">
        <div class="tit">评论</div>
      </div><!--tboper 标题与操作按钮-->
      <div class="pltextarea">
        <el-input type="textarea" placeholder="请输入您的意见" :rows="4" maxlength="1000" show-word-limit></el-input>
        <div class="plbtn"><el-button>发布</el-button></div>
      </div><!--pltextarea-->
      <div class="pllist">
        <div class="list">
          <div class="luser"><span class="xuser">张</span></div>
          <div class="ltext">
            <div class="nt"><span class="name">张鑫辉</span><span class="time">05/01 12:00</span></div>
            <div class="te">这个工具可以！</div>
            <div class="hb"><a class="btn"><i class="el-icon-chat-line-round"></i>回复</a></div>
            <div class="pltextarea">
              <el-input type="textarea" placeholder="请输入您的意见" :rows="2" maxlength="1000" show-word-limit></el-input>
              <div class="plbtn"><el-button>取消</el-button><el-divider direction="vertical"></el-divider><el-button>发布</el-button></div>
            </div><!--pltextarea-->
          </div>
        </div><!--list-->
        <div class="list">
          <div class="luser"><span class="xuser">钱</span></div>
          <div class="ltext">
            <div class="nt"><span class="name">钱多多</span><span class="time">05/01 12:00</span></div>
            <div class="te">好用！</div>
            <div class="hb"><a class="btn"><i class="el-icon-chat-line-round"></i>回复</a></div>
            <div class="list">
              <div class="luser"><span class="xuser">赵</span></div>
              <div class="ltext">
                <div class="nt"><span class="name">赵宇</span><span class="time">05/01 12:00</span></div>
                <div class="te">希望再选代一下，还有待完善的地方。</div>
                <div class="hb"><a class="btn"><i class="el-icon-chat-line-round"></i>回复</a></div>
              </div>
            </div><!--list-->
            <div class="list">
              <div class="luser"><span class="xuser">李</span></div>
              <div class="ltext">
                <div class="nt"><span class="name">李志</span><span class="time">05/01 12:00</span></div>
                <div class="te">很好的解决了我的问题，感谢！</div>
                <div class="hb"><a class="btn"><i class="el-icon-chat-line-round"></i>回复</a></div>
              </div>
            </div><!--list-->
          </div>
        </div><!--list-->
        <div class="list">
          <div class="luser"><span class="xuser">赵</span></div>
          <div class="ltext">
            <div class="nt"><span class="name">赵宇</span><span class="time">05/01 12:00</span></div>
            <div class="te">希望再选代一下，还有待完善的地方。</div>
            <div class="hb"><a class="btn"><i class="el-icon-chat-line-round"></i>回复</a></div>
          </div>
        </div><!--list-->
        <div class="list">
          <div class="luser"><span class="xuser">李</span></div>
          <div class="ltext">
            <div class="nt"><span class="name">李志</span><span class="time">05/01 12:00</span></div>
            <div class="te">很好的解决了我的问题，感谢！</div>
            <div class="hb"><a class="btn"><i class="el-icon-chat-line-round"></i>回复</a></div>
          </div>
        </div><!--list-->
      </div><!--pllist-->
    </div><!--fl 右侧评论-->
  </div><!--fbox1 左右分栏-->
</template>

<script>
  import { listDocument, getDocument, delDocument, addDocument, updateDocument } from "@/api/document/document";
  import editDocument from "../document/editDocument";
  import { Base64 } from 'js-base64';
  export default {
    name: 'toolDetail',
    components: { editDocument },
    props: {
      toolDetail: {
        type: Object,
        default: {},
      }
    },
    data(){
      return{
        detailActiveName: 'first',
        docList: [],
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          toolId: ''
        },
        previewUrl: '',
        viewDialogTitle: "",
        viewDialogOpen: false,
        title: '新增文档',
        open: false,
      }
    },
    created(){
      this.getDocList()
    },
    methods:{
      getDocList() {
        this.loading = true;
        this.queryParams.toolId = this.toolDetail.toolId
        listDocument(this.queryParams).then(response => {
            this.docList = response.rows;
            this.total = response.total;
            this.loading = false;
          }
        );
      },
      handleAdd(){
        this.open = true
      },
      editDocumentSubmit(){
        this.open = false
        this.getDocList()
      },
      handlePriew(row){
        this.previewUrl = process.env.VUE_APP_TOOL_TECH_FILE_VIEW_API + '/onlinePreview?url=' + encodeURIComponent(Base64.encode(process.env.VUE_APP_BASE_API + row.docUrl));
        this.viewDialogTitle = '文档在线预览'
        this.viewDialogOpen = true;
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const docIds = row.docId || this.ids;
        this.$modal.confirm('是否确认删除？').then(function() {
          return delDocument(docIds);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
      }
    }
  }
</script>

<style scoped>
.box-title {
  margin-bottom: 3px;
}
.box-title:before {
    display: inline-block;
    content: "";
    height: 14px;
    width: 3px;
    background-color: #034aac;
    margin-right: 5px;
}
</style>