emis-frontend/src/views/emis/emisWaybillProblemInfo/problemEntry.vue

<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-form ref="form" size="mini"  :model="form" label-width="80px">
        <el-col :span="8">
          <el-form-item :label="$t('通知网点')" prop="notifySite" label-width="80px">
            <EmisSiteSimplePicker v-model="form.notifySite"  @onChange="onScanSiteSelect"  ></EmisSiteSimplePicker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('问题类型')" prop="problemType" label-width="80px">
            <ProblemTypePicker v-model="form.problemId"   @onChange="onproblemTypeSelect"  ></ProblemTypePicker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="问题原因" prop="remark" label-width="80px">
            <el-input
              v-model="form.remark"
              :placeholder="$t('请输入')"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="问题图片" prop="xxx" label-width="80px">
            <ImageUpload v-model="form.picUrl" @input="handleInput" ></ImageUpload>
            </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="扫描单号" prop="billCode" label-width="80px">
            <span slot="label">
              <span style="color: red">扫描单号</span>
            </span>
            <el-input v-model="form.billCode" clearable="" placeholder="单号输入后按回车" @keyup.enter.native="handleScanInput"  >
              <i slot="suffix" class="iconfont">&#xe656;</i>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon=""
            size="mini"
            @click="handleScanInput"
          >查询</el-button>
        </el-col>
      </el-form>
    </el-row>

    <div>
    </div>

    <xd-table v-loading="loading"
           border stripe
           size="small"
           :data="emisWaybillList"
           :showSearch.sync="showSearch"
           :total="total"
           :queryParams="queryParams"
           @selection-change="handleSelectionChange"
           >
      <div slot="toolbar">
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              size="mini"
              :disabled="multiple"
              @click="handleUpload"
              v-hasPermi="['emis:emisTmsScanRecord:add']"
            >上传</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="danger"
              plain
              icon="el-icon-delete"
              size="mini"
              :disabled="multiple"
              @click="handleDelete"
              v-hasPermi="['emis:emisTmsScanRecord:remove']"
            >删除</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              size="mini"
              @click="handleUpload"
              v-hasPermi="['emis:emisTmsScanRecord:add']"
            >下载导入模版</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              size="mini"
              @click="handleUpload"
              v-hasPermi="['emis:emisTmsScanRecord:add']"
            >导入</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              size="mini"
              @click="handleBatchRegister"
            >批量登记</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              size="mini"
              @click="handleBatchModify"
            >批量修改</el-button>
          </el-col>
        </el-row>  
      </div> 
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column :label="$t('运单号')" align="center" prop="billCode" min-width="100" />
      <el-table-column :label="$t('通知网点')" align="center" prop="notifySiteName" min-width="100" />
      <el-table-column :label="$t('登记网点')" align="center" prop="scanSite" min-width="100" />
      <el-table-column :label="$t('登记日期')" align="center" prop="scanDate" min-width="100">
        <template slot-scope="scope">
              <span>{{ parseTime(scope.row.scanDate) }}</span>
            </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="scanMan" min-width="100" />
      <el-table-column :label="$t('图片路径')" align="center" prop="picUrl" min-width="100">
        <template slot-scope="scope">
          <span class="ellipsis">{{scope.row.picUrl}}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('问题件原因')" align="center" prop="remark" min-width="100" />
      <el-table-column :label="$t('数据来源')" align="center" prop="dataFrom" min-width="100" />
      <el-table-column :label="$t('所属业务员')" align="center" prop="marketMan" min-width="100" />
      <el-table-column :label="$t('业务员编号')" align="center" prop="marketManCode" min-width="100" />
    </xd-table>

    <!-- 添加或修改问题件对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" v-dialogDrag :close-on-click-modal="false" append-to-body>
      <el-row :gutter="0">
        <el-form ref="form" :model="form" size="mini" label-width="80px">
        <!-- <el-form ref="form" :model="form" :rules="rules" size="mini" label-width="80px"> -->
          <el-col :span="24">
            <el-form-item :label="$t('通知网点')" prop="notifySite" label-width="80px">
              <EmisSiteSimplePicker v-model="form.modifyNotifySite"  @onChange="onModifyScanSiteSelect"  ></EmisSiteSimplePicker>
            </el-form-item>
          </el-col>
          
        </el-form>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="titleBatch" :visible.sync="openBatch" width="50%" v-dialogDrag :close-on-click-modal="false" append-to-body>
        <el-form ref="formBatch" :model="formBatch" size="mini" label-width="60px">
         <el-row>
          <el-col :span="24">
            <el-form-item :label="$t('运单号')" prop="billCode">
              <el-input v-model="formBatch.billCode" type="textarea" :rows="8" placeholder="运单号"  />
            </el-form-item>
          </el-col>
          <el-col :span="24">
              <div style="padding-left: 60px;font-size: 12px;"> T0123219321 有问题</div>
          </el-col>
         </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align:center">
          <el-button type="primary" @click="submitFormBatch">确 定</el-button>
          <el-button @click="cancelBatch">取 消</el-button>
        </div>
      </el-dialog>
  </div>
</template>

<script>
import { addEmisWaybillProblemInfo,listEmisWaybillProblemInfo } from "@/api/emis/emisWaybillProblemInfo";
import { doScan } from "@/api/emis/emisTmsScanRecord";
import { listEmisWaybill } from "@/api/emis/emisWaybill";
import EmisSiteSimplePicker from '@/views/emis/EmisBaseTools/EmisSiteSimplePicker.vue';
import ProblemTypePicker from '@/views/emis/EmisBaseTools/ProblemTypePicker.vue';

export default {
  name: "ProblemEntry",
  components: { EmisSiteSimplePicker, ProblemTypePicker },
  dicts: ['emis_question_type'],
  data() {
    return {
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 创建时间搜索
      dateTimeRange:[],
      // 总条数
      total: 0,
      // 问题件表格数据
      emisWaybillList: [],

      title: "",
      open: false,
      titleBatch:"",
      openBatch:false,

      problemId:null,
      problemType:null,
      openForm: false,
      titleForm: "",

      titleEmisWaybillProblemInfo: "",
      openEmisWaybillProblemInfo: false,

      // 显示编辑框更多
      moreInputVisible: false,

      // 弹出展示层
      currentId:null,
      id:null,
      titleView:"",
      openView: false,
      // 备注时间范围
      daterangeRegisterDate: [],
      // 备注时间范围
      daterangeCreateTime: [],
      // 备注时间范围
      daterangeUpdateTime: [],
      // 表单参数
      form: {},
      formBatch:{},
      dataMap:[],
      queryParams:{}
      // 表单校验
      // rules: {
      //   id: [
      //     { required: true, message: "id不能为空", trigger: "blur" }
      //   ],
      // }
    };
  },
  created() {
    // this.getList();
    this.form.scanSiteCode=this.$store.getters.ownerSiteCode;
    this.form.scanSite=this.$store.getters.ownerSiteName;
    this.form.scanMan=this.$store.getters.empName;
    this.form.scanManCode=this.$store.getters.empCode;
    this.form.recordMan=this.$store.getters.empName;
    this.form.recordManCode=this.$store.getters.empCode;
    this.form.dispatchOrSendManCode=this.$store.getters.empCode;
  },
  methods: {
    // 取消按钮
    cancel() {
      this.open = false;
      this.modifyNotifySite=null;
      this.modifyNotifySiteName=null;
    },
    cancelBatch() {
      this.openBatch = false;
      this.formBatch={};
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    onScanSiteSelect(item){
      if(!item){
        this.form.modifyNotifySite = null;
        this.form.modifyNotifySiteName = null;
        return;
      }
      this.form.notifySite=item && item.siteCode;
      this.form.notifySiteName=item && item.siteName;
    },
    onproblemTypeSelect(item){
      // debugger;
      if(!item){
        this.form.problemType = null;
        this.form.problemId = null;
        return;
      }
      this.form.problemType = item.typeName;
      this.form.problemId=item.id;
    },
    handleInput(item){
      this.form.picUrl = item;
    },
    onModifyScanSiteSelect(item){ 
      if(!item){
        this.form.modifyNotifySite = null;
        this.form.modifyNotifySiteName = null;
        return;
      }
      this.form.modifyNotifySite=item && item.siteCode;
      this.form.modifyNotifySiteName=item && item.siteName;
    },
    handleBatchRegister(){
      if(this.form.notifySite==null || this.form.notifySite==''){
        this.$message.error("请选择通知网点");
        return;
      } 
      
      if(this.form.problemType==null || this.form.problemType==''){
        this.$message.error("请选择问题类型");
        return;
      }
      this.formBatch = {
        billCode: null,
      }
      this.titleBatch="批量登记";
      this.openBatch=true;
    },
    handleBatchModify(){
      if(this.ids !=null && this.ids.length>0){
        this.open=true;
        this.title="请选择通知网点"
      }else{
        this.$message.error("请先选择数据")
      }
    },
    handleScanInput(){
      if(this.form.billCode==null || this.form.billCode==''){
        this.$message.error("输入单号后回车");
        return;
      }
      if(this.form.notifySite==null || this.form.notifySite==''){
        this.$message.error("请选择通知网点");
        return;
      } 
      
      if(this.form.problemType==null || this.form.problemType==''){
        this.$message.error("请选择问题类型");
        return;
      }

      // if(this.dataMap[this.form.billCode]){
      //   this.$message.error("重复登记");
      //   this.playNoticeTone(1);
      //   return;
      // }
      this.getWaybill(this.form.billCode)
    },
    getWaybill(billCode){
      this.loading = true;
      listEmisWaybill({billCode:billCode}).then(response => {
        this.loading = false;
        let scanDate = new Date();
        if(response.code != 200){
          this.$message.error(response.msg);
          return;
        }
        let rows = response.rows;
        if(!rows || rows.length == 0){
          this.$message.error("未查到单号");
          return;
        }
        for (let index = 0; index < rows.length; index++) {
          let rsItem = rows[index];
          console.log(rsItem);
          let record =Object.assign({}, rsItem)
          record.notifySite = this.form.notifySite;
          record.notifySiteName = this.form.notifySiteName;
          record.scanSiteCode=this.form.scanSiteCode;
          record.scanSite=this.form.scanSite;
          record.scanDate=scanDate;
          record.problemType=this.form.problemType;
          record.scanMan=this.form.scanMan;
          record.scanManCode=this.form.scanManCode;
          record.picUrl=this.form.picUrl;
          record.remark=this.form.remark;
          record.dataFrom="PC";
          this.emisWaybillList.push(record);
          this.dataMap[this.form.billCode]=record;
        }
        this.form.billCode=null;
      })
    },
    handleUpload(){
      let scanData=[];
      let problemInfoList=[];
      this.emisWaybillList.forEach(item=>{
        if(this.ids.indexOf(item.id) > -1){
          scanData.push(
            {
              billCode:item.billCode,
              problemType:item.problemType,
              notifySite:item.notifySite,
              picUrl:item.picUrl,
              remark:item.remark,
              scanWeight:item.scanWeight,
              scanDate:item.scanDate
            }
          )
          problemInfoList.push({
            billCode: item.billCode,
            problemType: item.problemType,
            problemTitle: null,
            problemCause: item.remark,
            sendSite: item.sendSiteName,
            sendSiteCode: item.sendSiteCode,
            registerManCode: item.registerManCode,
            registerManDept: null,
            registerSiteCode: item.registerSiteCode,
            registerDate: item.registerDate,
            registerSaveDate: null,
            dataFrom: item.dataFrom,
            status: null,//item.waybillStatus,//？？？？？？？？是否正确
            isSendSiteRegister: null,
            // blReversion: false,//？？？？？？？？是否正确
            blReversion: null,
            reversionStr: null,
            reversionMan: null,
            reversionManCode: null,
            reversionDate: null,
            blCheckok: null,
            blSee: null,
            filePath: item.picUrl,
            modifySiteCode: null,
            delFlag: item.delFlag,//？？？？？？？？是否正确
            remark: item.remark,//？？？？？？？？是否正确
          })    
        }
      });

      let scanProblemInfo = {
        scanType:"-1",
        opType:2,
        scanData:scanData
      };

      doScan(scanProblemInfo).then(response => {
        let scanRstItem = response.data.scanResult[0];
        console.log(scanRstItem);
        if(scanRstItem.result != 'success'){
          this.$modal.msgError(scanRstItem.message);
          return;
        }

        this.$modal.msgSuccess(scanRstItem.message);
      });
      problemInfoList.forEach(item => {
        addEmisWaybillProblemInfo(item).then(response => {
          // debugger;
          if(response.code != "200"){
            this.$modal.msgError(response.msg);
            return;
          }
          this.$modal.msgSuccess(response.msg);
        })
      })
    },
    /** 提交按钮 */
    submitForm() {
      let newList = [];
      debugger
      for(let i = 0; i< this.emisWaybillList.length;i++){
        let waybill = {...this.emisWaybillList[i]};
        if(this.ids.indexOf(waybill.id) > -1){
          waybill.notifySite=this.form.modifyNotifySite;
          waybill.notifySiteName=this.form.modifyNotifySiteName;
          newList.push(waybill);
        }else{
          newList.push(waybill);
        }
      }
      this.emisWaybillList = newList;
      this.open = false;
    },
    submitFormBatch(){
      if(this.formBatch.billCode==null || this.formBatch.billCode==''){
        this.$message.error("输入单号后回车");
        return;
      }
      let bcList=this.formBatch.billCode.split(/[；\;\,\，\n]/)||[]; 
      bcList.forEach(code => {
        // if(this.dataMap[code]){
        //   this.$message.error("重复登记："+code);
        //   this.playNoticeTone(1);
        //   return;
        // }
        this.getWaybill(code)
      });
      this.openBatch=false;
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      let ids = [];
      let newList =[];
      this.emisWaybillList.forEach(item=>{
        if(this.ids.indexOf(item.id) == -1){
          newList.push(item);
          ids.push(item.id)
        }else{
          this.dataMap[item.billCode]=null;
        }
      });
      this.ids = ids;
      this.emisWaybillList = newList;
    },
    /** 导出按钮操作 */
    handleExport() {
     const loadingInstance = this.$loading({
            text: '正在导出...'
        })
       var qParam = {};
       qParam.pageNum=1;
       qParam.pageSize=5000;

       listEmisWaybillProblemInfo(this.addDateRange(qParam, this.dateTimeRange)).then(response => {
        this.downloadLoading = false
        if (response.code === 200) {
                const curList = response.rows
                import('@/vendor/Export2Excel').then(excel => {
                  const tHeader = ['id','运单号','问题类型:','问题件标题','问题件原因','发送站点','发送站点代码','登记人代码','登记人所在部门','登记站点代码','登记时间','登记保存时间','数据来源','状态','是否寄件网点发起','是否回复','回复内容','回复人','回复人代码','回复日期','是否检查','是否查看','文件路径','创建站点代码','修改站点代码','删除标志（0代表存在','创建者','创建时间','更新者','更新时间','备注',];
                  const filterVal = ['id','billCode','problemType','problemTitle','problemCause','sendSite','sendSiteCode','registerManCode','registerManDept','registerSiteCode','registerDate','registerSaveDate','dataFrom','status','isSendSiteRegister','blReversion','reversionStr','reversionMan','reversionManCode','reversionDate','blCheckok','blSee','filePath','createSiteCode','modifySiteCode','delFlag','createBy','createTime','updateBy','updateTime','remark',];
                  const data = this.formatJson(filterVal, curList, response.rows)
                  excel.export_json_to_excel({
                    header: tHeader,
                    data,
                    filename: '问题件',
                    autoWidth: true
                  })
                  loadingInstance.close()
                })
        }
      });
    },
    formatJson(filterVal, jsonData, resData) {
      let index = 0
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'index') {
          return ++index
        }
        if (j === 'status') {
          var statusStr='xxx'
          if(v[j] == 10){
              statusStr='xxx'
          }
          return statusStr;
        }
        return v[j]
      }))
    },
    /** 时间搜索响应函数 */
    dateTimeChange(value){
        this.dateTimeRange=value;
    },
  }
};
</script>

<style scoped>
  .el-divider{
    margin-top: 0px;
    background: 0 0;
    border-top: 1px solid #E6EBF5;
  }
  .el-divider__text {
    color: #0955ee;
    cursor: pointer;
  }
  .ellipsis {
    width:200px;
    overflow: hidden; /* 确保超出容器的内容被裁剪 */
    white-space: nowrap; /* 确保文本在一行内显示 */
    text-overflow: ellipsis; /* 超出部分显示省略号 */
  }
</style>