<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="4" :lg="7" :md="8" :sm="24">
            <a-form-item label="SAP类型">
              <a-select placeholder="请选择SAP.类型" v-model="queryParam.sapType" @change="getStoreAuthList">
                <a-select-option v-for="d in sapTypeList" :key="d">
                  {{ d }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xl="4" :lg="7" :md="8" :sm="24">
            <a-form-item label="工厂">
              <a-select placeholder="请输入工厂" v-model="queryParam.factory" @change="getStoreAuthList">
                <a-select-option v-for="d in factoryList" :key="d">
                  {{ d }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="单据类型">
              <a-select placeholder="请选择单据类型" v-model="queryParam.docType" @change="getStoreAuthList" allowClear>
                <a-select-option v-for="d in docTypeList" :key="d">
                  {{ d }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xl="4" :lg="7" :md="8" :sm="24">
            <a-form-item label="凭证编号">
              <j-input placeholder="请输入凭证编号" v-model="queryParam.docNo"></j-input>
            </a-form-item>
          </a-col>
          <a-col :xl="4" :lg="7" :md="8" :sm="24">
            <a-form-item label="操作人员">
              <a-input placeholder="请输入操作人员" v-model="queryParam.operator"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="4" :lg="7" :md="8" :sm="24">
            <a-form-item label="操作日期">
              <j-date placeholder="请选择操作日期" v-model="queryParam.modifyDate"></j-date>
            </a-form-item>
          </a-col>
          <a-col :xl="4" :lg="7" :md="8" :sm="24">
            <a-form-item label="状态">
              <a-select placeholder="请选择状态" v-model="queryParam.delFlag" :options="delFlagList"></a-select>
            </a-form-item>
          </a-col>
          <a-col :xl="4" :lg="7" :md="8" :sm="24">
            <a-form-item label="时间目录">
              <j-date placeholder="请输入时间目录" v-model="queryParam.dateDir" date-format="YYYYMM"></j-date>
            </a-form-item>
          </a-col>
          <a-col :xl="4" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              <a-button type="primary" icon="download" style="margin-left: 8px" @click="handleExportXls('单据上传明细')"
                >导出</a-button
              >
              <!-- <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
              </a> -->
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <!-- <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button> -->
      <a-upload
        name="file"
        :showUploadList="false"
        :multiple="false"
        :headers="tokenHeader"
        :action="importExcelUrl"
        @change="handleImportExcel"
      >
        <!-- <a-button type="primary" icon="import">导入</a-button> -->
      </a-upload>
      <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay">
          <a-menu-item key="1" :hidden="roleType == 3" @click="batchDel"><a-icon type="delete" />删除</a-menu-item>
          <a-menu-item key="2" @click="batchExport"><a-icon type="export" />下载</a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down"/></a-button>
      </a-dropdown>
    </div>

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

      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange,
          getCheckboxProps: record => ({
            props: {
              disabled: record.banFlag == true
            }
          })
        }"
        class="j-table-force-nowrap"
        @change="handleTableChange"
      >
        <span slot="action" slot-scope="text, record">
          <a @click="preveiw(record.storePath)">预览</a>
          <a-divider type="vertical" />
          <a @click="getDocLog(record.docNo, record.factory)">日志</a>
          <!-- <a-divider type="vertical" />
          <a
            :disabled="roleType == 3 || record.delFlag == 1 || (roleType == 2 && record.account != username)"
            @click="handleEdit(record)"
            >编辑</a
          > -->
        </span>

        <template slot="status" slot-scope="text, record">
          <a-tag v-if="record.delFlag == 1" color="red">已删除</a-tag>
          <a-tag v-else color="green">已上传</a-tag>
        </template>
      </a-table>
    </div>
    <financeDocRecords-modal ref="modalForm" @ok="modalFormOk"></financeDocRecords-modal>

    <a-modal :width="1200" title="凭证日志" v-model="logFlag" :footer="null">
      <financeDocLogList ref="modelClick"></financeDocLogList>
    </a-modal>
    <a-modal :width="1200" title="送货单明细" v-model="recordsDetail1" :footer="null">
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns2"
        :dataSource="dataSource2"
        
        :loading="loading"
        class="j-table-force-nowrap"></a-table>
    </a-modal>
  </a-card>
</template>

<script>
import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import FinanceDocRecordsModal from './modules/FinanceDocRecordsModal'
import FinanceDocLogList from './FinanceDocLogList'
import McOrderDetailList from './McOrderDetailList'
import JDate from '@/components/jeecg/JDate.vue'
import { getFileAction,httpAction, getAction } from '@/api/manage'
import JInput from '@/components/jeecg/JInput'

export default {
  name: 'FinanceDocRecordsList',
  mixins: [JeecgListMixin, mixinDevice],
  components: {
    JDate,
    FinanceDocRecordsModal,
    FinanceDocLogList,
    JInput
  },
  data() {
    return {
      description: '单据上传明细管理页面',
      sapTypeList: [],
      factoryList: [],
      docTypeList: [],
      dataSource2:{},
      queryParam: {
        delFlag: 0
      },
      delFlagList: [
        {
          title: '已上传',
          value: 0
        },
        {
          title: '已删除',
          value: 1
        }
      ],
      logFlag: false,
      recordsDetail1: false,
      roleType: 0,
      username: this.$store.state.user.username,
      docNo: '',
      // 表头
      columns: [
        {
          title: '序号',
          dataIndex: '',
          key:'rowIndex',
          width:60,
          align:"center",
          customRender:function (t,r,index) {
            return parseInt(index)+1;
          }
        },
        {
          title: 'SAP类型',
          align: 'center',
          sorter: (a, b) => {
            return a.sapType.localeCompare(b.mandt)
          },
          dataIndex: 'mandt'
        },
        {
          title: '客户代码',
          align: 'center',
          sorter: (a, b) => {
            return a.kunnr.localeCompare(b.kunnr)
          },
          dataIndex: 'kunnr'
        },
        {
          title: '客户名称',
          align: 'center',
          sorter: (a, b) => {
            return a.name1.localeCompare(b.name1)
          },
          dataIndex: 'name1'
        },
        
        
        {
          title: '送货单',
          align: 'center',
          sorter: (a, b) => {
            return a.docNo.localeCompare(b.printno)
          },
          dataIndex: 'printno',
          customRender: (text, row, index) => {
            const username = this.$store.state.user.realname;
            var _this=this;
            let child = this.$createElement('a', {
              domProps: {
                  innerHTML: text
              },
              on: {
                click: () => {
                  let row1 = row;
                  let printNo = row1.printno;
                  let params ={printno:printNo};
                  httpAction(this.url.queryDetailList,params,'post').then((res) => {
                    if (res.success) {
                      debugger
                      this.recordsDetail1 = true;
                      this.dataSource2 = res.result;
                    }
                    if (res.code === 510) {
                      this.$message.warning(res.message)
                    }
                  })
                }
              }
            },{})
            const obj = {
                children: child,
                attrs: {}
            }
            return obj
            
          },
        },
        {
          title: '来货单号',
          align: 'center',
          sorter: (a, b) => {
            return a.xblnr.localeCompare(b.xblnr)
          },
          dataIndex: 'xblnr'
        },
        {
          title: '移动类型',
          align: 'center',
          sorter: (a, b) => {
            return a.bwart.localeCompare(b.bwart)
          },
          dataIndex: 'bwart'
        },
        {
          title: '送货总数量',
          align: 'center',
          sorter: (a, b) => {
            return a.menge.localeCompare(b.menge)
          },
          dataIndex: 'menge'
        },
        {
          title: '收货类别',
          align: 'center',
          sorter: (a, b) => {
            return a.type.localeCompare(b.type)
          },
          dataIndex: 'type'
        },
        {
          title: '创建人工号',
          align: 'center',
          sorter: (a, b) => {
            return a.personid.localeCompare(b.personid)
          },
          dataIndex: 'personid'
        },
        {
          title: '过账日期',
          align: 'center',
          sorter: (a, b) => {
            return a.budat.localeCompare(b.budat)
          },
          dataIndex: 'budat'
        },
        {
          title: '放行日期',
          align: 'center',
          sorter: (a, b) => {
            return a.slipdata.localeCompare(b.slipdata)
          },
          dataIndex: 'slipdata'
        },
        {
          title: '放行条编码',
          align: 'center',
          sorter: (a, b) => {
            return a.slipno.localeCompare(b.slipno)
          },
          dataIndex: 'slipno'
        },
        {
          title: '工厂',
          align: 'center',
          sorter: (a, b) => {
            return a.factory.localeCompare(b.factory)
          },
          dataIndex: 'factory'
        },
        {
          title: '存档到期日期',
          align: 'center',
          sorter: (a, b) => {
            return a.lastModifyDate.localeCompare(b.lastModifyDate)
          },
          dataIndex: 'lastModifyDate'
        },
        {
          title: '实际存档日期',
          align: 'center',
          sorter: (a, b) => {
            return a.modifyDate.localeCompare(b.modifyDate)
          },
          dataIndex: 'modifyDate',
          customRender: function(text) {
            return !text ? '' : text.length > 19 ? text.substr(0, 19) : text
          }
        },
        {
          title: '状态',
          align: 'center',
          dataIndex: 'status',
          scopedSlots: { customRender: 'status' }
        },
        {
          title: '操作人员',
          align: 'center',
          sorter: (a, b) => {
            return a.operator.localeCompare(b.operator)
          },
          dataIndex: 'operator'
        },
        {
          title: '操作时间',
          align: 'center',
          sorter: (a, b) => {
            return a.createTime.localeCompare(b.createTime)
          },
          dataIndex: 'createTime',
          customRender: function(text) {
            return !text ? '' : text.length > 19 ? text.substr(0, 19) : text
          }
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          // fixed:"right",
          width: 147,
          scopedSlots: { customRender: 'action' }
        }
      ],
      columns2: [
          {
            title: '序号',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title:'集团',
            align:"center",
            dataIndex: 'mandt'
          },
          {
            title:'客户代码',
            align:"center",
            dataIndex: 'kunnr'
          },
          {
            title:'客户名称',
            align:"center",
            dataIndex: 'name1'
          },
          {
            title:'送货单',
            align:"center",
            dataIndex: 'printno'
          },
          {
            title:'收货单号[物料凭证]',
            align:"center",
            dataIndex: 'mblnr'
          },
          {
            title:'来货单号',
            align:"center",
            dataIndex: 'xblnr'
          },
          {
            title:'SO',
            align:"center",
            dataIndex: 'vbeln'
          },
          {
            title:'SO Item',
            align:"center",
            dataIndex: 'posnr'
          },
          {
            title:'成品编码',
            align:"center",
            dataIndex: 'matnr'
          },
          {
            title:'成品料号描述',
            align:"center",
            dataIndex: 'maktx'
          },
          {
            title:'素材编码',
            align:"center",
            dataIndex: 'comps'
          },
          {
            title:'素材物料描述',
            align:"center",
            dataIndex: 'maktxcomps'
          },
          {
            title:'库存地点',
            align:"center",
            dataIndex: 'lgort'
          },
          {
            title:'基本单位',
            align:"center",
            dataIndex: 'meins'
          },
          {
            title:'移动类型',
            align:"center",
            dataIndex: 'bwart'
          },
          {
            title:'送货数量',
            align:"center",
            dataIndex: 'menge'
          },
          {
            title:'状态',
            align:"center",
            dataIndex: 'status'
          },
          {
            title:'收货类别',
            align:"center",
            dataIndex: 'shType'
          },
          {
            title:'制单人',
            align:"center",
            dataIndex: 'zman'
          },
          {
            title:'创建人工号',
            align:"center",
            dataIndex: 'personid'
          },
          {
            title:'过账日期',
            align:"center",
            dataIndex: 'budat'
          },
          {
            title:'件数',
            align:"center",
            dataIndex: 'pieces'
          },
          {
            title:'放行日期',
            align:"center",
            dataIndex: 'slipdata'
          },
          {
            title:'放行条编码',
            align:"center",
            dataIndex: 'slipno'
          },
        ],
      url: {
        list: '/storedoc/financeDocRecords/list',
        // recordsDetailList: "/storedoc/mcOrderDetail/list",
        queryDetailList:'/storedoc/financeDocRecords/queryDetailList',
        delete: '/storedoc/financeDocRecords/delete',
        deleteBatch: '/storedoc/financeDocRecords/deleteBatch',
        exportXlsUrl: '/storedoc/financeDocRecords/exportXls',
        importExcelUrl: 'storedoc/financeDocRecords/importExcel'
      },
      dictOptions: {}
    }
  },
  computed: {
    importExcelUrl: function() {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    }
  },
  created() {
    this.getRoleType()
    this.getStoreAuthList()
  },
  methods: {
    initDictConfig() {},
    getStoreAuthList() {
      getAction('/storedoc/financeDocAuth/getStoreAuthList', this.model).then(res => {
        if (res.success) {
          this.sapTypeList = res.result.sapTypeList
          this.factoryList = res.result.factoryList
          this.docTypeList = res.result.docTypeList
          if (this.sapTypeList && this.sapTypeList.length == 1) {
            this.queryParam.sapType = res.result.sapTypeList[0]
          }
          if (this.factoryList && this.factoryList.length == 1) {
            this.queryParam.factory = res.result.factoryList[0]
          }
          if (this.docTypeList && this.docTypeList.length == 1) {
            this.queryParam.docType = res.result.docTypeList[0]
          }
        }
      })
    },
    preveiw(filePath) {
      if (!filePath || filePath == '') {
        this.$message.warning('文件不存在')
      } else {
        window.open(filePath)
        // getFileAction('/finance/orderBackUpload/exportFile', { filePath: filePath }).then(res => {
        //   let url = window.URL.createObjectURL(res)
        //   console.log(res)
        //   let result = `${window._CONFIG['domianURL']}/generic/web/viewer.html?file=` + encodeURIComponent(url)
        //   window.open(url)
        // })
      }
    },
    getRoleType() {
      getAction('/storedoc/financeDocAuth/getRoleType').then(res => {
        this.roleType = res.result
      })
    },
    getDocLog(docNo, factory) {
      this.logFlag = true
      this.$nextTick(() => {
        this.$refs.modelClick.refresh(docNo, factory)
      })
    },
    batchExport() {
      if (this.selectedRowKeys.length <= 0) {
        this.$message.warning('请选择一条记录！')
        return
      } else if (this.selectedRowKeys.length > 50) {
        this.$message.warning('最多选择50条记录！')
        return
      } else {
        var ids = ''
        for (var a = 0; a < this.selectedRowKeys.length; a++) {
          ids += this.selectedRowKeys[a] + ','
        }
        var that = this
        this.$confirm({
          title: '确认下载',
          content: '是否下载选中数据?',
          onOk: function() {
            that.loading = true
            getFileAction('/storedoc/financeDocRecords/batchDownload', { ids: ids })
              .then(res => {
                let url = window.URL.createObjectURL(res)
                const link = document.createElement('a') // 创建a标签
                link.href = url
                link.download = '单据明细.zip' // 重命名文件
                link.click()
                URL.revokeObjectURL(url) // 释放内存
                // window.open(url)
              })
              .finally(() => {
                that.loading = false
              })
          }
        })
      }
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>

