mts / MTS-UI · Files

<template>
  <a-modal
    :width="modalWidth"
    :style="modalStyle"
    :visible="visible"
    :maskClosable="false"
    @cancel="handleCancel">
    <template slot="footer">
      <a-button @click="handleCancel">确认收货</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" />
        <p class="add_upload_close" @click="handleDeleteImage(item.id)">
          <img class="add_upload_close "  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} from "../../../api/api";
export default {
  name: 'ShipDetailsList',
  mixins:[JeecgListMixin, mixinDevice],
  components: {
  },
  data () {
    return {
      description: '用来存储需要抓取的plm节点管理页面',
      statusList: [],
      modalWidth: '90%',
      modalStyle: { 'top': '8px'},
      ids:'',
      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',
        }
      ],
      dictOptions:{},
      superFieldList:[],
    }
  },
  created() {
  },
  methods: {
    edit (headId) {
      this.visible=true
      this.queryDetailsList(headId)
    },

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

    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;
      console.log(files[0])
      if(fileName == null || fileName==""){
        alert("请选择文件");
      }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)
            let data = {
              mod: 5,
              opt: 2,
              formData
            };
            fetch('/upload', {
              method: 'POST',
              body: formData,
              headers: {
                // Auth: 'token'
                'Access-Control-Allow-Origin': '*',
                Authorization: 'Bearer ',
              },
            }).then((res) => {
              return res.json()
            }).then((res) => {
              console.log(res)
              if (res.sta == 0) {
                // 上传代码返回结果之后
                // console.log(res.data)
              } else {
                console.log(res.msg)
              }
            })

            let reader = new FileReader();
            reader.readAsDataURL(files[0]);
            reader.onload = function (e) {
              let timestamp = (new Date()).valueOf();
              that.imgs.push({id: timestamp, base64: this.result})
              console.log(that.imgs)
            }
          } else {
            alert("请选择要上传的图片");
          }
        }else{
          alert("上传文件类型错误！");
        }
      }
    },

    handleDeleteImage(id) {
      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;


}

.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 {
  position: absolute;
  left: 0;
  top: 0;
  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;
}
.add_upload_imgBox .add_upload_imgDiv img {
  width: 100%;
  height: 100%;
}
.add_upload_imgBox .add_upload_close {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.add_upload_imgBox .add_upload_close img {
  width: 100%;
  height: 100%;
  margin-top: 0.5rem;
}
</style>