登记 & 收到 问题件查询页逻辑完善/新增评论列表等

src/views/emis/EmisBaseTools/Comments.vue

@@ -0,0 +1,259 @@
+<template>
+    <div class="main">
+      <div v-if="comments.length > 0">
+        <div class="item" v-for="(item,i) in comments" :key="item.id">
+          <div class="comment">
+            <div class="content-box">
+              <div class="meta-box">
+                <span class="username">{{item.createBy}}</span>
+              </div>
+              <div class="content">{{item.content}}</div>
+              <div class="reply-stat">
+                <span class="author-time">{{item.createTime}}</span>
+              </div>
+              <!-- <div class="reply-box">
+                <div class="item" v-for="(reply,j) in item.reply" :key="j">
+                  <div class="comment">
+                    <div class="content-box">
+                      <div class="meta-box">
+                        <span class="username">{{reply.from}}</span>
+                      </div>
+                      <div class="content">
+                        <span>回复<a>{{reply.to}}</a>:</span>
+                        <span class="reply">{{reply.comment}}</span>
+                      </div>
+                      <div class="reply-stat">
+                        <span class="author-time">{{reply.time}}</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div> -->
+            </div>
+          </div>
+        </div>
+      </div>
+      <div v-else>暂无数据</div>
+    </div>
+  </template>
+  <script>
+  
+  import { listEmisWaybillProblemFaq } from "@/api/emis/emisWaybillProblemFaq";
+
+  export default {
+    name: "Comments",
+    props: {
+      billCode: {
+        type: String,
+        required: false
+      },
+    },
+    data() {
+      return {
+        inputAdd:"",
+        isShowEmoji:false,
+        replyInput:"",
+        btnShow: false,
+        index: "0",
+        content:'',
+        emojiContent: "",
+        myName: "",
+        to: "",
+        toId: -1,
+        comments: []
+      };
+    },
+    watch: {
+      billCode(newVal) {
+        if(newVal){
+          this.getList();
+        }else{
+          this.comments = [];
+        }
+      },
+    },
+    directives: {  },
+    components: {
+      // VEmojiPicker
+    },
+    methods: {
+      getList(){
+        listEmisWaybillProblemFaq({billCode: this.billCode}).then(response => {
+          // debugger;
+          if(response && response.code == 200){
+            this.comments = response.rows;
+          }else{
+            this.$message.error(response.msg)
+          }
+        })
+      }
+    }
+  };
+  </script>
+<style  scoped>
+  .main {
+      margin: 0 auto;
+  }
+
+  .main .title {
+      color: #8a9aa9;
+      font-size: 16px;
+      font-weight: 400;
+      text-align: center;
+      padding: 1.67rem 0 5px;
+  }
+
+  .main .comment-form {
+      display: flex;
+      position: relative;
+      padding: 10px;
+      background-color: #fafbfc;
+      border-radius: 3px;
+      margin: 1.333rem 0;
+  }
+
+  .main .comment-form .avatar-box {
+      flex: 0 0 auto;
+  }
+
+  .main .comment-form .avatar-box .header-img {
+      margin-right: 10px;
+  }
+
+  .main .comment-form .form-box {
+      flex: 1 1 auto;
+      position: relative;
+  }
+
+  .main .comment-form .form-box .input-box {
+      position: relative;
+      display: inline-block;
+      width: 100%;
+  }
+
+  .main .comment-form .form-box .input-box .reply-input {
+      min-height: 20px;
+      line-height: 22px;
+      padding: 10px 110px 10px 10px;
+      color: #ccc;
+      background-color: #fff;
+      border: 1px solid #f1f1f1;
+      border-radius: 3px;
+      text-align: left;
+  }
+
+  .main .comment-form .form-box .input-box .reply-input:empty:before {
+      content: attr(placeholder);
+  }
+
+  .main .comment-form .form-box .input-box .reply-input:focus:before {
+      content: none;
+  }
+
+  .main .comment-form .form-box .input-box .reply-input:focus {
+      border: 1px solid #007fff;
+      outline: none;
+  }
+
+  .main .comment-form .form-box .action-box {
+      display: flex;
+      align-items: center;
+      margin: .65rem 0 0;
+  }
+
+  .main .comment-form .form-box .action-box .reply-btn-box {
+      flex: 0 0 auto;
+      margin-left: auto;
+  }
+
+  .main .item {
+      margin-bottom: 15px;
+      padding: 10px;
+  }
+
+  .main .item .comment {
+      display: flex;
+  }
+
+  .main .item .comment .user-popover-box {
+      height: 40px;
+  }
+
+  .main .item .comment .content-box {
+      border-bottom: 1px solid #f1f1f1;
+      /* margin-left: 15px; */
+      flex: 1 1 auto;
+      text-align: left;
+  }
+
+  .main .item .comment .content-box .meta-box {
+      display: flex;
+      align-items: center;
+      font-size: 14px;
+      line-height: 1.2;
+      white-space: nowrap;
+  }
+
+  .main .item .comment .content-box .content {
+      margin-top: 5px;
+      font-size: 16px;
+      line-height: 1.8;
+      word-wrap: break-word;
+      white-space: pre-wrap;
+      word-break: break-all;
+      color: #505050;
+  }
+
+  .main .item .comment .content-box .content a {
+      display: inline-block;
+      margin: 0 4px;
+      font-size: 14px;
+      font-weight: 400;
+      color: #406599;
+      cursor: pointer;
+  }
+
+  .main .item .comment .content-box .reply-stat {
+      display: flex;
+      margin-top: 10px;
+      font-weight: 400;
+  }
+
+  .main .item .comment .content-box .reply-stat .author-time {
+      font-size: 14px;
+      color: #8a9aa9;
+      cursor: default;
+  }
+
+  .main .item .comment .content-box .reply-stat .icon-btn {
+      flex: 0 0 auto;
+      display: flex;
+      justify-content: space-between;
+      margin-left: auto;
+      min-width: 8.8rem;
+      color: #8a93a0;
+      user-select: none;
+  }
+
+  .main .item .comment .content-box .reply-stat .icon-btn span {
+      display: inline-block;
+      margin: 0 8px;
+      min-width: 100px;
+      padding: 0 3px;
+      cursor: pointer;
+  }
+
+  .main .item .comment .content-box .reply-box {
+      margin: 15px 0;
+      background-color: #efefef;
+      border-radius: 3px;
+  }
+
+  .main .item .comment .content-box .reply-box .item {
+      padding: 10px 0 10px 10px;
+  }
+
+  .main .item .comment .content-box .reply-box .item:not(:last-child) {
+      border-bottom: 1px solid rgba(178, 186, 194, 0.3);
+  }
+</style>

src/views/emis/emisWaybillProblemInfo/receivedProblemInquiries.vue

@@ -61,15 +61,17 @@
 
     <xd-table v-loading="loading"
            border stripe
+           ref="singleSelectTable"
            size="small"
            :data="emisElectronicPagApplyList"
            :showSearch.sync="showSearch"
            :queryParams="queryParams"
            :total="total"
            @queryTable="getList"
-           @selection-change="handleSelectionChange"
+           @select="handleSelectionChange"
            @sort-change="handleSortChange"
            v-if="tableHeight" :max-height="tableHeight + 'px'"
+           :header-cell-class-name="cellClass"
            >
       <div slot="toolbar">
         <el-row :gutter="10" class="mb8">
@@ -101,17 +103,15 @@
       </el-table-column>
       <el-table-column :label="$t('回复状态')" align="center" prop="blReversion" min-width="100" >
         <template slot-scope="scope">
-              <span>{{ scope.row.blReversion ? "是" : "否" }}</span>
+          <span>{{ scope.row.blReversion ? "是" : "否" }}</span>
-            </template>
+        </template>
-        </el-table-column>
       </el-table-column>
       <el-table-column :label="$t('通知网点')" align="center" prop="sendSiteCode" min-width="100" />
       <el-table-column :label="$t('登记网点')" align="center" prop="registerSiteCode" min-width="100" />
       <el-table-column :label="$t('登记日期')" align="center" prop="registerDate" min-width="100">
         <template slot-scope="scope">
-              <span>{{ parseTime(scope.row.registerDate) }}</span>
+          <span>{{ parseTime(scope.row.registerDate) }}</span>
-            </template>
+        </template>
-        </el-table-column>
       </el-table-column>
       <el-table-column :label="$t('问题件类型')" align="center" prop="problemType" min-width="100" />
       <el-table-column :label="$t('登记人')" align="center" prop="registerManCode" min-width="100" />
@@ -134,47 +134,86 @@
       <el-table-column :label="$t('备注')" align="center" prop="remark" min-width="100" />
       <el-table-column :label="$t('数据产生来源')" align="center" prop="xxx" min-width="100" />
     </xd-table>
-
+    <el-divider class="divider"></el-divider>
-    <el-row :gutter="20" class="reversion">
+    <el-row :gutter="0" class="reversion" v-show="showProblemDetail">
-      <el-row :gutter="20" class="reversion-title">
+      <el-row :gutter="0" class="reversion-title">
         {{$t('问题件回复')}}
       </el-row>
-      <el-row :gutter="20" >
+      <el-row :gutter="0" >
         <el-col :span="8">
-          <el-col :span="8" >
+          <el-col :span="8" class="labeltext">
             {{$t('登记网点联系人和电话')}}
           </el-col>
-          <el-col :span="16" >
+          <el-col :span="16" class="labelcontent">
             <el-row>
-              {{$t("登记网点：") + (reversion.siteName || '总部')}}
+              {{$t("登记网点：") + (reversion.registerSiteCode || '总部')}}
             </el-row>
             <el-row>
-              {{$t("负责人：") + (reversion.empName || 'xxx')}}
+              {{$t("负责人：") + (reversion.registerManCode || '未填写')}}
             </el-row>
             <el-row>
-              {{$t("联系电话：") + (reversion.empPhone || 'xxx')}}
+              {{$t("联系电话：") + (reversion.empPhone || '未填写')}}
             </el-row>
           </el-col>
         </el-col>
         <el-col :span="8">
-          <el-col :span="6">
+          <el-col :span="6"class="labeltext">
             {{$t('问题原因：')}}
           </el-col>
-          <el-col :span="18" >
+          <el-col :span="18" class="labelcontent">
             <el-row>
-              {{(reversion.problemCause || 'xxxxxxxxxx')}}
+              {{(reversion.problemCause || "暂无")}}
             </el-row>
           </el-col>
         </el-col>
         <el-col :span="8">
-          <el-col :span="6">
+          <el-row>
-            {{$t('回复：')}}
+            <el-col :span="4" class="labeltext">
-          </el-col>
+              <span>处理结果：</span>
-          <el-col :span="18" >
+            </el-col>
-            <el-row>
+            <el-col :span="20">
-              {{(reversion.reversionStr || 'xxxxxxxxxx')}}
+              <el-select v-model="reversion.status">
-            </el-row>
+                <el-option :label="$t('处理中')" value="1"></el-option>
-          </el-col>
+                <el-option :label="$t('处理完毕')" value="2"></el-option>
+              </el-select>
+            </el-col>
+          </el-row>
+          <el-row class="row-top">
+            <el-col :span="4" class="labeltext">
+              <span>回复：</span>
+            </el-col>
+            <el-col :span="20">
+              <el-input
+                v-model="reversion.content"
+                :placeholder="$t('请输入')"
+                clearable
+                type="textarea"
+                rows="2"
+              />
+            </el-col>
+            <el-col :span="6">
+              <el-button
+                type="primary"
+                plain
+                size="mini"
+                @click="saveReversion"
+              >{{ $t('保存') }}</el-button>
+            </el-col>
+            <el-col :span="6">
+              <el-button
+                type="primary"
+                plain
+                size="mini"
+                @click="cancelReversion"
+              >{{ $t('取消') }}</el-button>
+            </el-col>
+          </el-row>
+        </el-col>
+        <el-col :span="8" class="labeltext">
+          <el-row >{{$t('回复列表：')}}</el-row>
+          <el-row>
+            <Comments ref="commentList" :billCode="currentRow.billCode"/>
+          </el-row>
         </el-col>
       </el-row >
     </el-row>
@@ -184,6 +223,7 @@
 <script>
 import { listEmisWaybillProblemInfo } from "@/api/emis/emisWaybillProblemInfo";
 import { listEmisWaybill } from "@/api/emis/emisWaybill";
+import { addEmisWaybillProblemFaq, listEmisWaybillProblemFaq } from "@/api/emis/emisWaybillProblemFaq";
 
 import elDateAdvPicker from '@/components/DatePickerAdv/elDateAdvPicker';
 import EmisSiteSimplePicker from '@/views/emis/EmisBaseTools/EmisSiteSimplePicker.vue';
@@ -191,12 +231,12 @@ import EmisGetNextSitePicker from '@/views/emis/EmisBaseTools/EmisGetNextSitePic
 import DestinationPicker from '@/views/emis/EmisBaseTools/DestinationPicker.vue';
 import EmisUserSimplePicker from '@/views/emis/EmisBaseTools/EmisUserSimplePicker.vue';
 import CountryPicker from '@/views/emis/EmisBaseTools/CountryPicker.vue';
+import Comments from '@/views/emis/EmisBaseTools/Comments.vue';
 
 import { getDateTimeToString } from '@/utils/payutils'
 export default {
   name: "ReceivedProblemInquiries",
-  // components: { elDateSimplePicker,emisElectronicPagApplyView,emisElectronicPagApplyForm },
+  components: { Comments, EmisUserSimplePicker, CountryPicker, elDateAdvPicker, EmisSiteSimplePicker, EmisGetNextSitePicker, DestinationPicker },
-  components: { EmisUserSimplePicker, CountryPicker, elDateAdvPicker, EmisSiteSimplePicker, EmisGetNextSitePicker, DestinationPicker },
   dicts: ['emis_scan_type'],
   data() {
 
@@ -207,10 +247,6 @@ export default {
       loading: false,
       // 选中数组
       ids: [],
-      // 非单个禁用
-      single: true,
-      // 非多个禁用
-      multiple: true,
       // 显示搜索条件
       showSearch: true,
       // 创建时间搜索
@@ -223,6 +259,7 @@ export default {
       title: "",
       // 是否显示弹出层
       open: false,
+      currentRow:{},
 
       openForm: false,
       titleForm: "",
@@ -233,7 +270,11 @@ export default {
       // 显示编辑框更多
       moreInputVisible: false,
 
-      reversion:{},
+      reversion:{
+        status:"1",
+        content:''
+      },
+      showProblemDetail: false,
 
       // 弹出展示层
       currentId:null,
@@ -251,7 +292,7 @@ export default {
         pageNum: 1,
         pageSize: 20,
         orderSN:null,
-        billCode: null,
+        billCode: "",
         scanType: null,
         scanDate: null,
         scanManCode: null,
@@ -331,6 +372,7 @@ export default {
         this.queryParams.params.beginRegisterDate = null;
         this.queryParams.params.endRegisterDate = null;
       }
+      this.queryParams.billCode = this.queryParams.billCode.trim();
       // this.queryParams.params.queryType = this.queryParams.queryType;//1：yd;2：dd;
       // this.queryParams.params.isSubBill = this.queryParams.isSubBill;//1：子单；0：主单
 
@@ -339,7 +381,7 @@ export default {
         this.queryParams.orderSN=null;
       }else if(queryType == "2"){
         this.queryParams.orderSN=this.queryParams.billCode;
-        this.queryParams.billCode=null;
+        this.queryParams.billCode="";
       }
       // listEmisTmsScanRecord(this.queryParams).then(response => {
       // listEmisWaybillProblemInfo(this.queryParams).then(response => {
@@ -363,8 +405,17 @@ export default {
           record.preOrNextStation = this.queryParams.preOrNextStation || scanRstItem.preOrNextStation;
           this.emisElectronicPagApplyList.push(record);
         }
+        this.currentRow = {};
+        this.showProblemDetail = false;
+        this.reversion = {
+          status:1,
+          content:''
+        }
       });
     },
+    cellClass () {
+        return 'selectAllbtnDis'
+    },
     // 取消按钮
     cancel() {
       this.open = false;
@@ -498,10 +549,74 @@ export default {
       }
     },
     // 多选框选中数据
-    handleSelectionChange(selection) {
+    handleSelectionChange(selection,row) {
-      this.ids = selection.map(item => item.id)
+      if (selection.length > 1) {
-      this.single = selection.length!==1
+        // this.$message.error("只能选择一条数据");
-      this.multiple = !selection.length
+        debugger
+        this.$refs.singleSelectTable.getInstance().clearSelection();
+        this.$refs.singleSelectTable.getInstance().toggleRowSelection(row);
+        this.currentRow = row;
+        this.showProblemDetail = true;
+        this.reversion = this.currentRow;
+      } else if(selection.length==1) {
+        debugger
+        this.currentRow = selection[0];
+        this.showProblemDetail = true;
+        this.reversion = this.currentRow;
+      }else{
+        this.currentRow = {};
+        this.showProblemDetail = false;
+        
+      }
+      this.reversion = {
+        status:1,
+        content:''
+      }
+      // this.ids = selection.map(item => item.id)
+
+      
+    },
+    async saveReversion(){
+      let commentList = this.$refs.commentList;
+      let reply = {
+        // id: null,
+        probId: null,//问题件序号
+        billCode: this.currentRow.billCode,
+        title: this.currentRow.title,
+        content: this.reversion.content,//具体内容
+        status: this.reversion.status,//状态
+        // showFlag: null,//是否显示
+        replayId: this.currentRow.replayId,//针对的回复的ID
+        // delFlag: null,
+        createBy: this.$store.getters.empName,
+        createTime: this.parseTime(new Date()),
+        // updateBy: null,
+        // updateTime: null,
+        // remark: null,
+        createSite: this.$store.getters.ownerSiteName,//创建站点
+        // updateSite: null//更新站点
+      }
+      let response = await addEmisWaybillProblemFaq(reply);
+      console.log(commentList)
+      if(response && response.code == 200){
+        commentList.getList();
+        this.reversion = {
+          status:1,
+          content:''
+        }
+      }else{
+        this.$message.error(response & response.msg || "未知错误")
+      }
+    },
+    cancelReversion(){
+      this.$refs.singleSelectTable.clearSelection();
+      this.currentRow = {};
+      this.showProblemDetail = false;
+      this.reversion = {
+        status:1,
+        content:''
+      }
+
     },
     // 排序 查询字段是表格中字段名字 动态取值排序顺序
     handleSortChange(column) {
@@ -718,13 +833,16 @@ export default {
         margin-right: 0;
     }
   }
+  .divider{
+    margin-top: 20px;
+  }
   .reversion{
     margin-left: 0px;
     margin-right: 0px;
     padding: 20px;
-    border-style: solid;
+    /* border-style: solid;
-    border-width: 0.5px;
+    border-width: 0.5px; */
-    margin-top: 20px;
+    /* margin-top: 20px; */
   }
   .reversion-title{
     margin-left: -10px;
@@ -732,4 +850,29 @@ export default {
     margin-bottom: 20px;
     font-weight: 600;
   }
+  .row-top{
+    margin-top: 20px;
+  }
+  .labeltext{
+    line-height: 28px;
+    text-align: left;
+    vertical-align: middle;
+    float: left;
+    font-size: 14px;
+    font-weight: 700;
+    color: #606266;
+    padding: 0 12px 0 0;
+    box-sizing: border-box;
+  }
+  .labelcontent{
+    line-height: 28px;
+    text-align: left;
+    vertical-align: middle;
+    float: left;
+    font-size: 14px;
+    /* font-weight: 700; */
+    color: #000000;
+    padding: 0 12px 0 0;
+    box-sizing: border-box;
+  }
 </style>

src/views/emis/emisWaybillProblemInfo/registrationProblemInquiry.vue

@@ -61,15 +61,17 @@
 
     <xd-table v-loading="loading"
            border stripe
+           ref="singleSelectTable"
            size="small"
            :data="emisElectronicPagApplyList"
            :showSearch.sync="showSearch"
            :queryParams="queryParams"
            :total="total"
            @queryTable="getList"
-           @selection-change="handleSelectionChange"
+           @select="handleSelectionChange"
            @sort-change="handleSortChange"
            v-if="tableHeight" :max-height="tableHeight + 'px'"
+           :header-cell-class-name="cellClass"
            >
       <div slot="toolbar">
         <el-row :gutter="10" class="mb8">
@@ -101,17 +103,15 @@
       </el-table-column>
       <el-table-column :label="$t('回复状态')" align="center" prop="blReversion" min-width="100" >
         <template slot-scope="scope">
-              <span>{{ scope.row.blReversion ? "是" : "否" }}</span>
+          <span>{{ scope.row.blReversion ? "是" : "否" }}</span>
-            </template>
+        </template>
-        </el-table-column>
       </el-table-column>
       <el-table-column :label="$t('通知网点')" align="center" prop="sendSiteCode" min-width="100" />
       <el-table-column :label="$t('登记网点')" align="center" prop="registerSiteCode" min-width="100" />
       <el-table-column :label="$t('登记日期')" align="center" prop="registerDate" min-width="100">
         <template slot-scope="scope">
-              <span>{{ parseTime(scope.row.registerDate) }}</span>
+          <span>{{ parseTime(scope.row.registerDate) }}</span>
-            </template>
+        </template>
-        </el-table-column>
       </el-table-column>
       <el-table-column :label="$t('问题件类型')" align="center" prop="problemType" min-width="100" />
       <el-table-column :label="$t('登记人')" align="center" prop="registerManCode" min-width="100" />
@@ -134,47 +134,43 @@
       <el-table-column :label="$t('备注')" align="center" prop="remark" min-width="100" />
       <el-table-column :label="$t('数据产生来源')" align="center" prop="xxx" min-width="100" />
     </xd-table>
-
+    <el-divider class="divider"></el-divider>
-    <el-row :gutter="20" class="reversion">
+    <el-row :gutter="0" class="reversion" v-show="showProblemDetail">
-      <el-row :gutter="20" class="reversion-title">
+      <el-row :gutter="0" class="reversion-title">
         {{$t('问题件回复')}}
       </el-row>
-      <el-row :gutter="20" >
+      <el-row :gutter="0" >
         <el-col :span="8">
-          <el-col :span="8" >
+          <el-col :span="8" class="labeltext">
             {{$t('登记网点联系人和电话')}}
           </el-col>
-          <el-col :span="16" >
+          <el-col :span="16" class="labelcontent">
             <el-row>
-              {{$t("登记网点：") + (reversion.siteName || '总部')}}
+              {{$t("登记网点：") + (reversion.registerSiteCode || '总部')}}
             </el-row>
             <el-row>
-              {{$t("负责人：") + (reversion.empName || 'xxx')}}
+              {{$t("负责人：") + (reversion.registerManCode || '未填写')}}
             </el-row>
             <el-row>
-              {{$t("联系电话：") + (reversion.empPhone || 'xxx')}}
+              {{$t("联系电话：") + (reversion.empPhone || '未填写')}}
             </el-row>
           </el-col>
         </el-col>
         <el-col :span="8">
-          <el-col :span="6">
+          <el-col :span="6"class="labeltext">
             {{$t('问题原因：')}}
           </el-col>
-          <el-col :span="18" >
+          <el-col :span="18" class="labelcontent">
             <el-row>
-              {{(reversion.problemCause || 'xxxxxxxxxx')}}
+              {{(reversion.problemCause || "暂无")}}
             </el-row>
           </el-col>
         </el-col>
-        <el-col :span="8">
+        <el-col :span="8" class="labeltext">
-          <el-col :span="6">
+          <el-row >{{$t('回复列表：')}}</el-row>
-            {{$t('回复：')}}
+          <el-row>
-          </el-col>
+            <Comments ref="commentList" :billCode="currentRow.billCode"/>
-          <el-col :span="18" >
+          </el-row>
-            <el-row>
-              {{(reversion.reversionStr || 'xxxxxxxxxx')}}
-            </el-row>
-          </el-col>
         </el-col>
       </el-row >
     </el-row>
@@ -184,6 +180,7 @@
 <script>
 import { listEmisWaybillProblemInfo } from "@/api/emis/emisWaybillProblemInfo";
 import { listEmisWaybill } from "@/api/emis/emisWaybill";
+import { addEmisWaybillProblemFaq, listEmisWaybillProblemFaq } from "@/api/emis/emisWaybillProblemFaq";
 
 import elDateAdvPicker from '@/components/DatePickerAdv/elDateAdvPicker';
 import EmisSiteSimplePicker from '@/views/emis/EmisBaseTools/EmisSiteSimplePicker.vue';
@@ -191,12 +188,12 @@ import EmisGetNextSitePicker from '@/views/emis/EmisBaseTools/EmisGetNextSitePic
 import DestinationPicker from '@/views/emis/EmisBaseTools/DestinationPicker.vue';
 import EmisUserSimplePicker from '@/views/emis/EmisBaseTools/EmisUserSimplePicker.vue';
 import CountryPicker from '@/views/emis/EmisBaseTools/CountryPicker.vue';
+import Comments from '@/views/emis/EmisBaseTools/Comments.vue';
 
 import { getDateTimeToString } from '@/utils/payutils'
 export default {
-  name: "RegistrationProblemInquiry",
+  name: "ReceivedProblemInquiries",
-  // components: { elDateSimplePicker,emisElectronicPagApplyView,emisElectronicPagApplyForm },
+  components: { Comments, EmisUserSimplePicker, CountryPicker, elDateAdvPicker, EmisSiteSimplePicker, EmisGetNextSitePicker, DestinationPicker },
-  components: { EmisUserSimplePicker, CountryPicker, elDateAdvPicker, EmisSiteSimplePicker, EmisGetNextSitePicker, DestinationPicker },
   dicts: ['emis_scan_type'],
   data() {
 
@@ -207,10 +204,6 @@ export default {
       loading: false,
       // 选中数组
       ids: [],
-      // 非单个禁用
-      single: true,
-      // 非多个禁用
-      multiple: true,
       // 显示搜索条件
       showSearch: true,
       // 创建时间搜索
@@ -223,6 +216,7 @@ export default {
       title: "",
       // 是否显示弹出层
       open: false,
+      currentRow:{},
 
       openForm: false,
       titleForm: "",
@@ -233,7 +227,11 @@ export default {
       // 显示编辑框更多
       moreInputVisible: false,
 
-      reversion:{},
+      reversion:{
+        status:"1",
+        content:''
+      },
+      showProblemDetail: false,
 
       // 弹出展示层
       currentId:null,
@@ -251,7 +249,7 @@ export default {
         pageNum: 1,
         pageSize: 20,
         orderSN:null,
-        billCode: null,
+        billCode: "",
         scanType: null,
         scanDate: null,
         scanManCode: null,
@@ -331,6 +329,7 @@ export default {
         this.queryParams.params.beginRegisterDate = null;
         this.queryParams.params.endRegisterDate = null;
       }
+      this.queryParams.billCode = this.queryParams.billCode.trim();
       // this.queryParams.params.queryType = this.queryParams.queryType;//1：yd;2：dd;
       // this.queryParams.params.isSubBill = this.queryParams.isSubBill;//1：子单；0：主单
 
@@ -339,7 +338,7 @@ export default {
         this.queryParams.orderSN=null;
       }else if(queryType == "2"){
         this.queryParams.orderSN=this.queryParams.billCode;
-        this.queryParams.billCode=null;
+        this.queryParams.billCode="";
       }
       // listEmisTmsScanRecord(this.queryParams).then(response => {
       // listEmisWaybillProblemInfo(this.queryParams).then(response => {
@@ -363,8 +362,17 @@ export default {
           record.preOrNextStation = this.queryParams.preOrNextStation || scanRstItem.preOrNextStation;
           this.emisElectronicPagApplyList.push(record);
         }
+        this.currentRow = {};
+        this.showProblemDetail = false;
+        this.reversion = {
+          status:1,
+          content:''
+        }
       });
     },
+    cellClass () {
+        return 'selectAllbtnDis'
+    },
     // 取消按钮
     cancel() {
       this.open = false;
@@ -498,10 +506,74 @@ export default {
       }
     },
     // 多选框选中数据
-    handleSelectionChange(selection) {
+    handleSelectionChange(selection,row) {
-      this.ids = selection.map(item => item.id)
+      if (selection.length > 1) {
-      this.single = selection.length!==1
+        // this.$message.error("只能选择一条数据");
-      this.multiple = !selection.length
+        debugger
+        this.$refs.singleSelectTable.getInstance().clearSelection();
+        this.$refs.singleSelectTable.getInstance().toggleRowSelection(row);
+        this.currentRow = row;
+        this.showProblemDetail = true;
+        this.reversion = this.currentRow;
+      } else if(selection.length==1) {
+        debugger
+        this.currentRow = selection[0];
+        this.showProblemDetail = true;
+        this.reversion = this.currentRow;
+      }else{
+        this.currentRow = {};
+        this.showProblemDetail = false;
+        
+      }
+      this.reversion = {
+        status:1,
+        content:''
+      }
+      // this.ids = selection.map(item => item.id)
+
+      
+    },
+    async saveReversion(){
+      let commentList = this.$refs.commentList;
+      let reply = {
+        // id: null,
+        probId: null,//问题件序号
+        billCode: this.currentRow.billCode,
+        title: this.currentRow.title,
+        content: this.reversion.content,//具体内容
+        status: this.reversion.status,//状态
+        // showFlag: null,//是否显示
+        replayId: this.currentRow.replayId,//针对的回复的ID
+        // delFlag: null,
+        createBy: this.$store.getters.empName,
+        createTime: this.parseTime(new Date()),
+        // updateBy: null,
+        // updateTime: null,
+        // remark: null,
+        createSite: this.$store.getters.ownerSiteName,//创建站点
+        // updateSite: null//更新站点
+      }
+      let response = await addEmisWaybillProblemFaq(reply);
+      console.log(commentList)
+      if(response && response.code == 200){
+        commentList.getList();
+        this.reversion = {
+          status:1,
+          content:''
+        }
+      }else{
+        this.$message.error(response & response.msg || "未知错误")
+      }
+    },
+    cancelReversion(){
+      this.$refs.singleSelectTable.clearSelection();
+      this.currentRow = {};
+      this.showProblemDetail = false;
+      this.reversion = {
+        status:1,
+        content:''
+      }
+
     },
     // 排序 查询字段是表格中字段名字 动态取值排序顺序
     handleSortChange(column) {
@@ -718,13 +790,16 @@ export default {
         margin-right: 0;
     }
   }
+  .divider{
+    margin-top: 20px;
+  }
   .reversion{
     margin-left: 0px;
     margin-right: 0px;
     padding: 20px;
-    border-style: solid;
+    /* border-style: solid;
-    border-width: 0.5px;
+    border-width: 0.5px; */
-    margin-top: 20px;
+    /* margin-top: 20px; */
   }
   .reversion-title{
     margin-left: -10px;
@@ -732,4 +807,29 @@ export default {
     margin-bottom: 20px;
     font-weight: 600;
   }
+  .row-top{
+    margin-top: 20px;
+  }
+  .labeltext{
+    line-height: 28px;
+    text-align: left;
+    vertical-align: middle;
+    float: left;
+    font-size: 14px;
+    font-weight: 700;
+    color: #606266;
+    padding: 0 12px 0 0;
+    box-sizing: border-box;
+  }
+  .labelcontent{
+    line-height: 28px;
+    text-align: left;
+    vertical-align: middle;
+    float: left;
+    font-size: 14px;
+    /* font-weight: 700; */
+    color: #000000;
+    padding: 0 12px 0 0;
+    box-sizing: border-box;
+  }
 </style>