mts / MTS-UI · Files

<template>
  <a-modal
    :width="modalWidth"
    :style="modalStyle"
    :visible="visible"
    :maskClosable="false"
    @cancel="handleCancel">
    <template slot="footer">
      <a-button style="color: #00A0E9" @click="confirmReceipt">确认收货</a-button>
      <a-button @click="handleCancel">关闭</a-button>
    </template>

    <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
      <i class="anticon anticon-info-circle ant-alert-icon"></i>已选择&nbsp;<a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项&nbsp;&nbsp;
      <a style="margin-left: 24px" @click="onClearSelected">清空</a>
    </div>

    <a-table
      ref="table"
      rowKey="id"
      size="middle"
      :columns="columns"
      :loading="loading"
      :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: selectChanges}"
      :dataSource="dataSource"
      :pagination="false">
    </a-table>

    <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
      上传收货信息图片:
    </div>

    <div class="add_upload_imgBox float_left">
      <div class="add_upload_imgDiv float_left" v-for="(item, index) in imgs" :key="item.id + index">
        <img :src="item.base64" :preview="item.base64"/>
        <p class="add_upload_close" >
          <img class="add_upload_close "  @click="handleDeleteImage(item.id)" src="~@/assets/delete.png" />
        </p>
      </div>

      <div class="add_upload float_left">
        <button class="add_upload_button">
          <img class="add_upload_icon" src="~@/assets/add.png" />
          <input id="upfile" type="file" accept="image/*" class="add_upload_file" @change="fileUpload" />
        </button>
      </div>
    </div>


  </a-modal>
</template>

<script>

import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import {queryDetailList,delMinio,minioList} from "../../../api/api";
import { finishAction} from '@/api/manage'

export default {
  name: 'ShipDetailsList',
  mixins:[JeecgListMixin, mixinDevice],
  components: {
  },
  data () {
    return {
      statusList: [],
      modalWidth: '90%',
      modalStyle: { 'top': '8px'},
      ids:'',
      headId:'',
      imgs:[],
      visible:false,
      // 表头
      columns: [
        {
          title: '#',
          dataIndex: '',
          key:'rowIndex',
          width:60,
          align:"center",
          customRender:function (t,r,index) {
            return parseInt(index)+1;
          }
        },
        {
          title:'名称',
          align:"center",
          dataIndex: 'name'
        },
        {
          title:'编码',
          align:"center",
          dataIndex: 'no',
        },
        {
          title:'数量',
          align:"center",
          dataIndex: 'num',
        }
      ],
      params:{
        id:'',
      },

    }
  },
  methods: {


    confirmReceipt(){
      let that = this;
      this.$confirm({
        title: '提示(核对数量,拍照上传)',
        content: '核对无误,确认收货吗 ?',
        width:'80%',
        onOk() {
          if (that.imgs.length<1){
            that.$message.error('请拍照上传');
            return false;
          }else{
            that.finshReceipt(that.headId);
          }

        },
        onCancel() {
        },
      });
    },
    edit (headId) {
      this.visible=true;
      this.headId=headId;
      this.queryDetailsList(headId);
      minioList({head_id:headId}).then((res)=>{
        if (res.code == 200) {
          for (var i=0;i<res.result.length;i++){
            this.imgs.push({id:res.result[i].id, base64:res.result[i].url});
          }
        }
      });
    },

    handleCancel(){
      this.imgs=[];
      this.visible = false
      this.dataSource=[];
    },

    finshReceipt(id){
      finishAction("/ship/shipHeader/finish", {id: id}).then((res) => {
        if (res.success) {
          this.$message.success(res.message);
          this.visible=false;
        } else {
          this.$message.warning(res.message);
        }
      });
    },

    queryDetailsList(headId){
      let params = {
        'headid': headId
      }
      queryDetailList(params).then((res) => {
        if (res.success) {
          this.dataSource = res.result
        }
      })
    },

    selectChanges(selectedRowKeys, selectionRows) {
      this.selectedRowKeys = selectedRowKeys;
      this.selectionRows = selectionRows;
      var array='';
      this.selectionRows.forEach(function (row) {
        array += row.id + ",";
      });
      this.ids=array;
    },

    fileUpload(){
      let that = this;
      let file = document.getElementById('upfile');
      let fileName = file.value;
      let files = file.files;
      if(fileName == null || fileName==""){
        this.$message.error("请选择文件");
      }else{
        let fileType = fileName.substr(fileName.length-4,fileName.length);
        if(fileType == ".jpg" || fileType == ".png"){
          if (files[0]) {
            let formData = new window.FormData()
            formData.append('file', files[0])
            formData.append('mod', 5)
            formData.append('opt', 2)
            formData.append('headId', this.headId)
            let data = {
              mod: 5,
              opt: 2,
              formData
            };
            fetch('http://172.16.43.151:8080/jeecg-boot/sys/upload/mmsMinio', {
              method: 'POST',
              body: formData,
              headers: {
                // Auth: 'token'
                'Access-Control-Allow-Origin': '*',
                Authorization: 'Bearer ',
              },
            }).then((res) => {
              return res.json()
            }).then((res) => {
              if (res.code == 0) {
                let reader = new FileReader();
                reader.readAsDataURL(files[0]);
                reader.onload = function (e) {
                  console.log("aaa:"+this.result)
                  that.imgs.push({id: res.message, base64: this.result})
                  console.log(that.imgs)
                }
                this.$message.success("上传成功!")
              } else {
                this.$message.error("上传失败!")
              }
            })

          } else {
            this.$message.error("请选择要上传的图片");
          }
        }else{
          this.$message.error("上传文件类型错误！");
        }
      }
    },

    handleDeleteImage(id) {
      delMinio({id:id}).then((res)=>{
        if (res.code == 0) {
          this.$message.success("删除成功!")
        }
      });

      let that = this;
      deleteImage()
      function deleteImage() {
        for(let i = 0; i < that.imgs.length; i+=1) {
          if(that.imgs[i].id === id) {
            that.imgs.splice(i, 1);
            break;
          }
        }
      }


    },

    }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>

<style scoped>
.float_left {
  display: inline-block;
  /*float: left;*/
  margin-bottom: 0.4rem;
  overflow: hidden;

}

.add_upload .add_upload_button {
  position: relative;
  width: 4.5rem;
  height: 4.5rem;
  border: none;
  background: rgb(236,236,236);
}
.add_upload .add_upload_icon {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.add_upload .add_upload_file {
  width: 100%;
  height: 100%;
  opacity: 0;
  font-size: 0;

}

.add_upload_imgBox .add_upload_imgDiv {
  position: relative;
  width: 4.5rem;
  height: 4.5rem;
  margin: 0 .0rem .0rem 0;
  margin-left: 0.4rem;
  background-color: pink;
}
.add_upload_imgBox .add_upload_imgDiv img {
  width: 100%;
  height: 100%;
  margin-top: .2rem;

}
.add_upload_imgBox .add_upload_close {
  position: absolute;
  top: -0.2rem;
  right: 0;
  width: 20%;
  height: 20%;
}
.add_upload_imgBox .add_upload_close img {
  width: 100%;
  height: 100%;
  margin-top: 0.5rem;
}
</style>