logpm_page/src/views/distribution/inventory/distributionStockArticleDetails.vue

<template>
  <basic-container>
    <div class="avue-crud">
      <el-row   v-if="!search" style="margin-bottom: 1%">
        <!-- 列表模块 -->
        <el-table
          ref="table"
          v-loading="loading"
          :data="data"
          style="width: 100%"
          :border="option.border"
        >
          <!--          <el-table-column type="selection" v-if="option.selection" width="55" align="center"></el-table-column>-->
          <!--          <el-table-column type="expand" v-if="option.expand" align="center"></el-table-column>-->
          <!--          <el-table-column v-if="option.index" label="序号" type="index" width="60" align="center">-->
          <!--          </el-table-column>-->
          <template v-for="(item, index) in option.columnBasic">
            <!-- table字段 -->
            <el-table-column
              v-if="item.hide !== true"
              :prop="item.prop"
              :label="item.label"
              :width="item.width"
              :key="index"
            >
            </el-table-column>
          </template>
        </el-table>
      </el-row>
      <el-row style="margin-bottom: 1%">
        <!-- 列表模块 -->
        <el-table
          ref="table"
          v-loading="loading"
          @selection-change="selectionChange"
          :data="data"
          style="width: 100%"
          :border="option.border"
        >
          <!--          <el-table-column type="selection" v-if="option.selection" width="55" align="center"></el-table-column>-->
          <!--          <el-table-column type="expand" v-if="option.expand" align="center"></el-table-column>-->
          <!--          <el-table-column v-if="option.index" label="序号" type="index" width="60" align="center">-->
          <!--          </el-table-column>-->
          <template v-for="(item, index) in option.columnTakeOver">
            <!-- table字段 -->
            <el-table-column
              v-if="item.hide !== true"
              :prop="item.prop"
              :label="item.label"
              :width="item.width"
              :key="index"
            >
            </el-table-column>
          </template>
          <!-- 操作栏模块 -->
          <el-table-column prop="menu" label="操作" :width="220" align="center">
            <template #="{ row }">
              <!--              <el-button type="primary" text icon="el-icon-view" @click="handleView(row)">查看</el-button>-->
              <el-button
                type="primary"
                text
                icon="el-icon-edit"
                @click="handleCallDelivery('3', row)"
                >编辑</el-button
              >
              <!--              <el-button type="primary" text icon="el-icon-delete" @click="rowDel(row)">删除</el-button>-->
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-row style="margin-bottom: 1%">
        <!-- 列表模块 -->
        <el-table
          ref="table"
          v-loading="loading"
          @selection-change="selectionChange"
          :data="data"
          style="width: 100%"
          :border="option.border"
        >
          <!--          <el-table-column type="selection" v-if="option.selection" width="55" align="center"></el-table-column>-->
          <!--          <el-table-column type="expand" v-if="option.expand" align="center"></el-table-column>-->
          <!--          <el-table-column v-if="option.index" label="序号" type="index" width="60" align="center">-->
          <!--          </el-table-column>-->
          <template v-for="(item, index) in option.columnTakeClice">
            <!-- table字段 -->
            <el-table-column
              v-if="item.hide !== true"
              :prop="item.prop"
              :label="item.label"
              :width="item.width"
              :key="index"
            >
            </el-table-column>
          </template>
          <!--          &lt;!&ndash; 操作栏模块 &ndash;&gt;-->
          <!--          <el-table-column prop="menu" label="操作" :width="220" align="center">-->
          <!--            <template #="{row}">-->
          <!--&lt;!&ndash;              <el-button type="primary" text icon="el-icon-view" @click="handleView(row)">查看</el-button>&ndash;&gt;-->
          <!--              <el-button type="primary" text icon="el-icon-edit" @click="handleCallDelivery('3',row)">编辑</el-button>-->
          <!--              &lt;!&ndash;              <el-button type="primary" text icon="el-icon-delete" @click="rowDel(row)">删除</el-button>&ndash;&gt;-->
          <!--            </template>-->
          <!--          </el-table-column>-->
        </el-table>
      </el-row>
      <h3>包件信息</h3>
      <div class="plck">
        <el-button type="primary" @click="allhandleQRCode">批量查看二维码</el-button>
        <el-button v-if="dataMaterial" type="primary" @click="handleMaterialList()"
          >补充物料信息</el-button
        >
      </div>
      <el-row>

        <!-- 列表模块 -->
        <tablecmt
          :columnList="columnList"
          :tableData="dataPare"
          :loading="loading"
          @inputTxt="inputsc"
          @timeCheck="timesc"
          @btnCheck="btnsc"
          @selectCheck="selectsc"
          @selection="selectionChange"
        >
          <template #default="slotProps">
            <!--            <el-button type="primary" text icon="el-icon-view" @click="handleView(slotProps.scope)">查看</el-button>-->
            <!--            <el-button type="primary" text icon="el-icon-edit" @click="handleCallDeliveryOwn(slotProps.scope)">修改客户信息</el-button>-->
            <el-text
              type="primary"
              text
              icon="el-icon-view"
              @click="handleTrajectory(slotProps.scope.row)"
              >查看轨迹</el-text
            >
            <el-text
              type="primary"
              text
              icon="el-icon-view"
              @click="handleQRCode(slotProps.scope.row)"
              >查看二维码</el-text
            >
            <el-text
              type="primary"
              text
              icon="el-icon-view"
              v-if="!slotProps.scope.row.materialId"
              @click="handleMaterial(slotProps.scope.row)"
              >补充物料信息</el-text
            >
          </template>
        </tablecmt>

        <!-- 列表模块 -->
        <!-- <el-table ref="table" v-loading="loading"
                  @selection-change="selectionChange"
                  :data="dataPare"
                  :height="height"
                  style="width: 100%"
                  :border="option.border">
          <el-table-column type="selection" v-if="option.selection" width="55" align="center"></el-table-column>
          <el-table-column type="expand" v-if="option.expand" align="center"></el-table-column>
          <el-table-column v-if="option.index" label="序号" type="index" width="60" align="center">
          </el-table-column>
          <template v-for="(item,index) in option.columnParcels">
            &lt;!&ndash; table字段 &ndash;&gt;
            <el-table-column v-if="item.hide!==true"
                             :prop="item.prop"
                             :label="item.label"
                             :width="item.width"
                             :key="index">
            </el-table-column>
          </template>
          &lt;!&ndash; 操作栏模块 &ndash;&gt;
          <el-table-column prop="menu" label="操作" :width="220" align="center">
            <template #="{row}">
              <el-button type="primary" text icon="el-icon-view" @click="handleTrajectory(row)">查看轨迹</el-button>
              <el-button type="primary" text icon="el-icon-view" @click="handleQRCode(row)">查看二维码</el-button>
              <el-button type="primary" text icon="el-icon-view" v-if="row.materialId == '' || row.materialId == '-1'" @click="handleMaterial(row)">补充物料信息</el-button>
&lt;!&ndash;              <el-button type="primary" text icon="el-icon-edit" @click="handleEdit(row)">编辑</el-button>&ndash;&gt;
&lt;!&ndash;              <el-button type="primary" text icon="el-icon-delete" @click="rowDel(row)">删除</el-button>&ndash;&gt;
            </template>
          </el-table-column>
        </el-table>-->
      </el-row>
      <el-row>
        <div class="avue-crud__pagination" style="width: 100%">
          <!-- 分页模块 -->
          <el-pagination
            align="right"
            background
            @size-change="sizeChange"
            @current-change="currentChange"
            :current-page="page.currentPage"
            :page-sizes="[30, 50,80, 120]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total"
          >
          </el-pagination>
        </div>
      </el-row>
      <!-- 物料选择模块 -->
      <el-dialog
        :title="titleMaterial"
        v-model="materialBox"
        width="70%"
        :before-close="beforeClose"
        append-to-body
      >
        <el-form :disabled="view" ref="form" :model="formMaterial" label-width="80px">
          <el-form-item label="物料名称" prop="typeService">
            <el-select
              v-model="formMaterial.materialId"
              filterable
              remote
              reserve-keyword
              placeholder="请输入物料名称"
              remote-show-suffix
              :remote-method="remoteMethodName"
              @change="getMethodName($event, '1')"
              :loading="loading"
            >
              <el-option
                v-for="item in optionsName"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="物料编码" prop="serviceNumber">
            <el-select
              v-model="formMaterial.materialCode"
              filterable
              remote
              reserve-keyword
              placeholder="请输入物料编码"
              remote-show-suffix
              :remote-method="remoteMethodCode"
              @change="getMethodName($event, '2')"
              :loading="loading"
            >
              <el-option
                v-for="item in optionsCode"
                :key="item.id"
                :label="item.productCode"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="物料单位" prop="orderCode">
            <!--            <el-input v-model="formMaterial.unit" placeholder="请输入物料单位"/>-->
            <el-select v-model="formMaterial.materialUnit" clearable placeholder="请选择单位">
              <el-option
                v-for="item in logpmUnit"
                :key="item.dictKey"
                :label="item.dictValue"
                :value="item.dictKey"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="SKU" prop="mallName">
            <el-input v-model="formMaterial.sku" placeholder="请输入SKU" />
          </el-form-item>
        </el-form>
        <!-- 表单按钮 -->
        <template #footer>
          <span v-if="!view" class="dialog-footer">
            <el-button type="primary" icon="el-icon-circle-check" @click="handleSubmitMethod"
              >提 交</el-button
            >
            <el-button icon="el-icon-circle-close" @click="materialBox = false">取 消</el-button>
          </span>
        </template>
      </el-dialog>
      <el-dialog v-model="dialogFormCustomer" title="修改客户信息">
        <el-form :model="formCustomer">
          <el-form-item label="姓名" :label-width="formLabelWidth">
            <el-input v-model="formCustomer.name" autocomplete="off" />
          </el-form-item>
          <el-form-item label="电话" :label-width="formLabelWidth">
            <el-input v-model="formCustomer.phone" autocomplete="off" />
          </el-form-item>
          <el-form-item label="地址" :label-width="formLabelWidth">
            <el-input
              v-model="formCustomer.address"
              :rows="2"
              type="textarea"
              placeholder="请填写地址"
            />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogFormCustomer = false">取消</el-button>
            <!--        <el-button type="primary" @click="dialogFormVisible = false"> 确定 </el-button>-->
            <el-button type="primary" @click="callFordelivery('3')"> 确定 </el-button>
          </span>
        </template>
      </el-dialog>

      <el-dialog title="二维码" :visible.sync="dialogVisible" width="780px" v-model="dialogVisible">
        <div>
          <div v-html="html"></div>

          <!-- <div v-for="(item,index) in qrCodeObj">
            <el-row>
              <el-col :span="24" >
                <el-image  width="10" height="10" w-full  :key="index" :src="item " alt="Preview Image"/>
              </el-col>
            </el-row>
          </div> -->
        </div>
        <span slot="footer" class="dialog-footer">
          <!--    <el-button type="primary" @click="ddd">导 出</el-button>-->
          <el-button type="primary" @click="printTemplate">打 印</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
          <el-button @click="dialogVisible = false">取 消</el-button>
        </span>
      </el-dialog>
    </div>
  </basic-container>
  <edittablehead
    @setcolum="setnewcolum"
    @closce="showdrawer"
    :drawerShow="drawerShow"
    :columnList="columnList"
  ></edittablehead>
</template>

<script>

import {
  Search
} from '@element-plus/icons-vue'

import {
  getList,
  getDetail,
  add,
  update,
  remove,
  addStock,
  showOrderPackgeCode,
} from '@/api/distribution/distributionStockArticle';
import { getListOwn, updateParcelList } from '@/api/distribution/distributionParcelList';
import { addCallDelivery } from '@/api/distribution/distrilbutionCallDelivery';
import { addClient } from '@/api/distribution/distributionClientMessage';
import { addService } from '@/api/distribution/distributionServiceLog';
import option from '@/option/distribution/distributionStockArticle';
import { mapGetters } from 'vuex';
import { getDictionaryBiz } from '@/api/system/dict';
import { getListMaterial } from '@/api/basic/basicMaterial';
import { getLodop } from '@/utils/LodopFuncs';
import { getStockTemplate } from '@/api/distribution/distributionStockArticle';
import dayjs from 'dayjs';

export default {
  data() {
    return {
      height: 0,
      // 弹框标题
      title: '',
      // 是否展示弹框
      box: false,
      // 是否显示查询
      search: true,
      // 加载中
      loading: true,
      // 是否为查看模式
      view: false,
      // 查询信息
      query: {},
      queryPage: {},
      // 弹框标题
      titleMaterial: '',
      optionsName: [],
      optionsCode: [],
      logpmUnit: [],
      // 是否展示弹框
      materialBox: false,
      // 分页信息
      page: {
        currentPage: 1,
        pageSize: 30,
        total: 40,
      },
      // 表单数据
      form: {},
      formMaterial: {},
      formCall: {}, // 通知
      formService: {}, // 服务
      formCustomer: {}, // 客户
      materialQRCode: {}, // 客户
      // 选择行
      selectionList: [],
      // 表单配置
      option: option,
      // 表单列表
      data: [],
      dataPare: [],
      dataMaterial: false,
      distributionType: [],
      dialogTableVisible: false,
      dialogVisible: false, //二维码控制
      qrCodeObj: [], //二维码图片
      dialogFormVisible: false,
      dialogFormCustomer: false,
      dialogFormService: false,
      formLabelWidth: '120px',
      handler: true, //首次
      trade: false, // 商
      municipal: true, // 市
      taker: true, // 自提
      columnListedit: [],
      drawerShow: false,
      columnList: [
        {
          prop: '',
          label: '序号',
          type: 0,
          values: '',
          width: 55,
          checkarr: [],
          fixed: true,
        },
        {
          prop: 'serviceNumber',
          label: '服务号',
          type: 2,
          values: '',
          width: '150',
          checkarr: [],
          fixed: true,
          sortable: true,
          head: false,
        },
        {
          prop: 'waybillNumber',
          label: '运单号',
          type: 2,
          values: '',
          width: '150',
          checkarr: [],
          fixed: true,
          sortable: true,
          head: false,
        }, {
          prop: 'orderCode',
          label: '订单自编号',
          type: 2,
          values: '',
          width: '150',
          checkarr: [],
          fixed: false,
          sortable: true,
          head: false,
        },
        {
          prop: 'warehouse',
          label: '仓库',
          type: 2,
          values: '',
          width: '150',
          checkarr: [],
          fixed: false,
          sortable: true,
          head: false,
        },
        {
          prop: 'orderPackageStatusName',
          label: '包件状态',
          type: 3,
          values: '',
          width: '150',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          prop: 'orderPackageFreezeStatusName',
          label: '冻结状态',
          type: 3,
          values: '',
          width: '180',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          prop: 'orderPackageGroundingStatusName',
          label: '上架状态',
          type: 3,
          values: '',
          width: '180',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          prop: 'orderPackageStockupStatusName',
          label: '备货状态',
          type: 3,
          values: '',
          width: '180',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          prop: 'orderPackageReservationStatusName',
          label: '预约状态',
          type: 3,
          values: '',
          width: '180',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          prop: 'orderPackageCode',
          label: '包条码',
          type: 2,
          values: '',
          width: '180',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          prop: 'goodsAllocation',
          label: '货位信息',
          type: 2,
          values: '',
          width: '150',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          prop: 'pallet',
          label: '所在托盘',
          type: 2,
          values: '',
          width: '150',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          prop: 'firsts',
          label: '一级品',
          type: 2,
          values: '',
          width: '150',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          prop: 'second',
          label: '二级品',
          type: 2,
          values: '',
          width: '150',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          prop: 'thirdProduct',
          label: '三级品',
          type: 2,
          values: '',
          width: '150',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          prop: 'materialName',
          label: '物料名称',
          type: 2,
          values: '',
          width: '150',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          prop: 'quantity',
          label: '数量',
          type: 1,
          values: '',
          width: '150',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          prop: 'warehouseEntryTimeEnd',
          label: '入库时间',
          type: 4,
          values: '',
          width: '180',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          prop: 'trainNumber',
          label: '客户车次号',
          type: 2,
          values: '',
          width: '150',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          prop: 'sendWarehouseName',
          label: '发站仓',
          type: 2,
          values: '',
          width: '150',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          prop: '',
          label: '操作',
          type: 6,
          values: '',
          width: '230',
          checkarr: [],
          fixed: 'right',
          hide: true,
        },
      ],
      html: null, // 页面包条码内容
    };
  },
  mounted() {
    this.init();
    this.onLoad(this.page);
    /**
     * 初始化获取本地缓存的编辑隐藏的列表
     *  固定搭配，不能更改
     */
    // let checkList=[]
    // this.columnList.map(item => {
    //     item.head = false;
    // });
    let checkListnewarr = this.$functions.getStorage(window.location.pathname + 'checkList');
    let flexListnewarr = this.$functions.getStorage(window.location.pathname + 'flexList');
    let sortlistnewarr = this.$functions.getStorage(window.location.pathname + 'sortlist');
    if (checkListnewarr) {
      this.columnList.map(item => {
        item.head = false;
      });
      checkListnewarr.map(ite => {
        this.columnList.map(item => {
          if (ite == item.label) {
            item.head = true;
          }
        });
      });
    } else {
      let arr = [];
      this.columnList.map(item => {
        if (item.head) {
          arr.push(item.label);
        }
      });
      this.$functions.setStorage(window.location.pathname + 'checkList', arr);
    }
    if (flexListnewarr) {
      this.columnList.map(item => {
        item.fixed = false;
      });
      flexListnewarr.map(ite => {
        this.columnList.map(item => {
          if (ite == item.label) {
            if (item.type == 6) {
              item.fixed = 'right';
            } else {
              item.fixed = true;
            }
          }
        });
      });
    } else {
      let arr = [];
      this.columnList.map(item => {
        if (item.fixed) {
          arr.push(item.label);
        }
      });
      this.$functions.setStorage(window.location.pathname + 'flexList', arr);
    }
    if (sortlistnewarr) {
      this.columnList.map(item => {
        item.sortable = false;
      });
      sortlistnewarr.map(ite => {
        this.columnList.map(item => {
          if (ite == item.label) {
            item.sortable = true;
          }
        });
      });
    } else {
      let arr = [];
      this.columnList.map(item => {
        if (item.sortable) {
          arr.push(item.label);
        }
      });
      this.$functions.setStorage(window.location.pathname + 'sortlist', arr);
    }
  },
  watch: {
    '$route.query.id': {
      handler(newVal, oldVal) {
        // console.log(newVal, oldVal);
        this.onLoad(this.page);
        this.onLoadOwn(this.page);
      },
      deep: true,
      immediate: true,
    },
  },
  computed: {
    ...mapGetters(['permission']),
    permissionList() {
      return {
        addBtn: this.validData(this.permission.basicdataBrandCategory_add, false),
        viewBtn: this.validData(this.permission.basicdataBrandCategory_view, false),
        delBtn: this.validData(this.permission.basicdataBrandCategory_delete, false),
        editBtn: this.validData(this.permission.basicdataBrandCategory_edit, false),
      };
    },
    ids() {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(',');
    },
  },
  methods: {
    handleMaterialList() {
      if (this.selectionList.length === 0) {
        this.$message.warning('请选择需要补充的包件!!!');
        return;
      } else {
        let a = false;
        this.selectionList.forEach(i => {
          console.log('现在的数据》》》》  ', i);
          if (!!i.materialId && i.materialId != '-1') {
            a = true;
          }
        });
        if (a) {
          this.$message.warning('有包含物料的包件信息，请去除，在勾选！！！');
          return;
        }
        this.titleMaterial = '补充物料';
        this.materialBox = true;
      }
    },
    showdrawer(value) {
      this.drawerShow = value;
    },
    /**
     * 弹窗的勾选回调，用于更改头部数组
     * 固定搭配，只需要更换   columnList
     */
    setnewcolum(newarr, headarr, type) {
      // console.log(newarr,'+++++++++++')
      if (type == 1) {
        this.columnList = newarr;
        this.$functions.setStorage(window.location.pathname + 'checkList', headarr);
      } else if (type == 2) {
        this.columnList = newarr;
        this.$functions.setStorage(window.location.pathname + 'flexList', headarr);
      } else if (type == 3) {
        this.columnList = newarr;
        this.$functions.setStorage(window.location.pathname + 'sortlist', headarr);
      }
    },
    selectionsc(value) {
      console.log('11111', value);
    },
    delectsolt(scope) {
      const { row } = scope;
      console.log('2222222', row);
    },
    editsolt(scope) {
      const { row } = scope;
      console.log('33333', row);
    },
    btnsc(index, row) {
      console.log('4444444', index, row);
    },
    selectsc(index, row) {
      console.log(index, row);
      if (row.prop === 'orderPackageFreezeStatusName') {
        this.queryPage['orderPackageFreezeStatus'] = index;
      } else if (row.prop === 'orderPackageReservationStatusName') {
        this.queryPage['orderPackageReservationStatus'] = index;
      } else if (row.prop === 'orderPackageGroundingStatusName') {
        this.queryPage['orderPackageGroundingStatus'] = index;
      } else if (row.prop === 'orderPackageStockupStatusName') {
        this.queryPage['orderPackageStockupStatus'] = index;
      } else if (row.prop === 'orderPackageStatusName') {
        this.queryPage['orderPackageStatus'] = index;
      } else {
        this.queryPage[row.prop] = index;
      }
      this.onLoadOwn(this.page);
    },
    timesc(index, row) {
      console.log(index, row);
      if (!!index) {
        index = dayjs(index).format('YYYY-MM-DD');
      }
      this.queryPage[row.prop] = index;
      if (!index) {
        delete this.queryPage[row.prop];
      }
      this.onLoadOwn(this.page);
    },
    inputsc(index, row) {
      console.log(index, row);
      // console.log(index, row.prop);
      this.queryPage[row.prop] = index;
      this.onLoadOwn(this.page);
    },
    printTemplate() {
      let LODOP = getLodop();
      console.log("LODOP>>>>>",LODOP);
      // console.log("this.ids>>>>>",this.selectionList);
      // if (this.selectionList.length === 0){
      //   this.$message.warning("请选择至少一条数据");
      //   return;
      // }
      getStockTemplate({ id: this.materialQRCode.id }).then(res => {
        console.log('返回的数据', res.data.data);
        let templateData = res.data.data;
        // let templateData = "res.data.data";
        // console.log(templateData);
        LODOP.PRINT_INITA(1, 1, 900, 660, '测试预览功能');
        LODOP.SET_PRINT_MODE('WINDOW_DEFPRINTER', 'Godex G500');
        LODOP.SET_PRINT_STYLEA(0,"TextNeatRow",true);//允许标点溢出，且英文单词拆开
        // // 设置打印整宽且不变形
        LODOP.SET_PRINT_MODE('PRINT_PAGE_PERCENT', 'Auto-Width');
        // // 设置打印后自动关闭
        LODOP.SET_PRINT_MODE('AUTO_CLOSE_PREWINDOW', 1);
        // // data就是一段html文本
        LODOP.ADD_PRINT_HTM('0%', '0%', '100%', '100%', templateData);
        // LODOP.PREVIEW(); //预览(预览打印无脚标)
        LODOP.PRINT(); //直接打印

      });
    },
    //提交物品数据
    handleSubmitMethod() {
      // console.log(">>>",this.formMaterial);

      const regex = /^\d+$/;
      let id = [];
      let asm = {
        // id: this.formMaterial.id,
        // materialId: this.formMaterial.materialId,
      };
      if (regex.test(this.formMaterial.materialId)) {
        // console.log("全是数字");
        asm.materialId = this.formMaterial.materialId;
      } else {
        // console.log("包含非数字字符");
        asm.materialId = this.formMaterial.materialCode;
      }
      if(!!this.formMaterial.id){
        id.push(this.formMaterial.id);
      }else{
        if (this.selectionList.length > 0) {
          this.selectionList.forEach(i => {
            id.push(i.id);
          });
          console.log('shuju>>>>', this.selectionList.length);
        } else {
          id.push(this.formMaterial.id);
        }
      }
      asm.ids = id;
      console.log('>>>', asm);
      updateParcelList(asm).then(() => {
        this.materialBox = false;
        this.onLoadOwn(this.page);
        this.$message({
          type: 'success',
          message: '操作成功!',
        });
        this.formMaterial = {};
      });
    },
    getMethodName(row, num) {
      // console.log("名称选择事件",row);
      switch (num) {
        case '1':
          let a = this.optionsName.find(i => i.id == row);
          this.formMaterial.materialCode = a.productCode;
          this.formMaterial.materialUnit = a.logpmUnit;
          this.formMaterial.sku = a.sku;
          break;
        case '2':
          let b = this.optionsCode.find(i => i.id == row);
          this.formMaterial.materialId = b.name;
          this.formMaterial.materialUnit = b.logpmUnit;
          this.formMaterial.sku = b.sku;
          break;
      }
    },

    async remoteMethodName(query) {
      if (query) {
        this.loading = true;
        //查询物料数据
        let asd = await getListMaterial(this.page.currentPage, this.page.pageSize, {
          name: query,
        }).then();
        console.log('物料信息', asd.data.data);
        this.optionsName = asd.data.data.records;
        this.loading = false;
      } else {
        this.optionsName = [];
      }
    },
    async remoteMethodCode(query) {
      if (query) {
        this.loading = true;
        let asd = await getListMaterial(this.page.currentPage, this.page.pageSize, {
          productCode: query,
        }).then();
        console.log('物料编号信息', asd.data.data);
        this.optionsCode = asd.data.data.records;
        this.loading = false;
      } else {
        this.optionsCode = [];
      }
    },
    /*handleMoke(){
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.$router.push({
        path: '/distribution/reservation/reservationFrom',
        query:{
          id: this.ids,
          name: '添加预约单'


        }
      });
    },*/
    /* handleStockList(){
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.$router.push({
        path: '/distribution/inventory/distributionStockArticleFrom',
        query: {
          id : this.ids,
          name : "转库存单"
        }
      });


      //
      // this.$confirm("确定将选择的订单转为库存品吗？", {
      //   confirmButtonText: "确定",
      //   cancelButtonText: "取消",
      //   type: "warning"
      // })
      //   .then(() => {
      //     return addStock(this.ids);
      //   })
      //   .then(() => {
      //     this.selectionClear();
      //     this.onLoad(this.page);
      //     this.$message({
      //       type: "success",
      //       message: "操作成功!"
      //     });
      //   });
    },*/
    //确定通知提货按钮
    callFordelivery(inde) {
      switch (inde) {
        case '1':
          console.log(this.formCall);
          this.formCall.waybillNumber = this.ids;
          addCallDelivery(this.formCall).then(() => {
            this.$message({
              type: 'success',
              message: '操作成功!',
            });
            this.dialogFormVisible = false;
            this.formCall = {};
          });
          break;
        case '2':
          // console.log("服务类型",this.formService);
          addService(this.formService).then(() => {
            this.$message({
              type: 'success',
              message: '操作成功!',
            });
            this.dialogFormService = false;
            this.formService = {};
          });
          break;
        case '3':
          // console.log("客户信息！！！",this.formCustomer);
          this.formCustomer.stockArticleId = this.$route.query.id;
          console.log('客户信息！！！', this.formCustomer);
          addClient(this.formCustomer).then(() => {
            this.$message({
              type: 'success',
              message: '操作成功!',
            });
            this.dialogFormCustomer = false;
            this.formCustomer = {};
            this.onLoad(this.page);
          });
          break;
      }
    },
    //提货跳转
    handlebill(row) {
      console.log('>>>>', this.ids);
      if (this.selectionList.length === 0) {
        this.$message.warning('请选择至少一条数据');
        return;
      }
      this.$router.push({
        path: '/distribution/inventory/distrilbutionBillLading',
        query: {
          id: this.ids,
        },
      });
    },
    //通知提货
    handleCallDelivery(ind, row) {
      switch (ind) {
        case '1':
          let ids = [];
          this.selectionList.forEach(ele => {
            ids.push(ele.orderCode);
          });
          this.formCall.waybill = ids;
          this.dialogFormVisible = true;
          break;
        case '2':
          this.dialogFormService = true;
          break;
        case '3':
          this.dialogFormCustomer = true;
          console.log('<><>', row);
          this.formCustomer.name = row.customerName;
          this.formCustomer.phone = row.customerTelephone;
          this.formCustomer.address = row.customerAddress;
          break;
      }
    },
    init() {
      this.height = this.setPx(document.body.clientHeight - 580);
      getDictionaryBiz('distribution_type').then(res => {
        this.distributionType = res.data.data;
      });
      getDictionaryBiz('logpm_unit').then(res => {
        //单位
        this.logpmUnit = res.data.data;
      });
      getDictionaryBiz('order_package_status').then(res => {
        this.deliveryOrderStatus = res.data.data;
        this.checkcColumnList('orderPackageStatusName', this.columnList).checkarr =
          res.data.data.map(item => {
            item.value = item.dictKey;
            item.label = item.dictValue;
            return item;
          });
      });
      getDictionaryBiz('order_package_grounding_status').then(res => {
        this.checkcColumnList('orderPackageGroundingStatusName', this.columnList).checkarr =
          res.data.data.map(item => {
            item.value = item.dictKey;
            item.label = item.dictValue;
            return item;
          });
      });
      getDictionaryBiz('order_package_freeze_status').then(res => {
        this.checkcColumnList('orderPackageFreezeStatusName', this.columnList).checkarr =
          res.data.data.map(item => {
            item.value = item.dictKey;
            item.label = item.dictValue;
            return item;
          });
      });
      getDictionaryBiz('order_package_stockup_status').then(res => {
        this.checkcColumnList('orderPackageStockupStatusName', this.columnList).checkarr =
          res.data.data.map(item => {
            item.value = item.dictKey;
            item.label = item.dictValue;
            return item;
          });
      });
      getDictionaryBiz('order_package_reservation_status').then(res => {
        this.checkcColumnList('orderPackageReservationStatusName', this.columnList).checkarr =
          res.data.data.map(item => {
            item.value = item.dictKey;
            item.label = item.dictValue;
            return item;
          });
      });
    },
    checkcColumnList(prop, columnList) {
      for (var a = 0; a < columnList.length; a++) {
        if (columnList[a].prop === prop) {
          console.log('1111111111111', columnList[a]);
          return columnList[a];
        }
      }
    },
    searchHide() {
      this.search = !this.search;
    },
    searchChange() {
      this.onLoad(this.page);
    },
    searchReset() {
      this.query = {};
      this.page.currentPage = 1;
      this.onLoad(this.page);
    },
    handleSubmit() {
      if (!this.form.id) {
        add(this.form).then(() => {
          this.box = false;
          this.onLoad(this.page);
          this.$message({
            type: 'success',
            message: '操作成功!',
          });
        });
      } else {
        update(this.form).then(() => {
          this.box = false;
          this.onLoad(this.page);
          this.$message({
            type: 'success',
            message: '操作成功!',
          });
        });
      }
    },

    //全部
    handleEntire() {
      this.handler = true;
      this.taker = true;
      this.trade = false;
    },
    //商配
    handleTrade() {
      // this.handler = true;
      this.trade = true;
    },
    //商配
    handleMunicipal() {
      // this.handler = true;
      // this.taker = true;
    },
    //自提
    handlePickUpStore() {
      this.loading = true;
      // console.log("this.query",this.query);
      let params = {};
      this.query.typeService = '1';
      getList(this.page.currentPage, this.page.pageSize, Object.assign(params, this.query)).then(
        res => {
          const data = res.data.data;
          this.page.total = data.total;
          this.data = data.records;
          this.loading = false;
          this.selectionClear();
          this.handler = false;
          this.taker = false;
        }
      );
    }, //自提的通知
    handleInform(index) {
      this.loading = true;
      // console.log("this.query",this.query);
      let params = {};
      this.query.typeService = '1';
      switch (index) {
        case '1':
          this.query.notification = index;
          break;
        case '2':
          this.query.notification = index;
          break;
      }
      this.query.typeService = '1';
      getList(this.page.currentPage, this.page.pageSize, Object.assign(params, this.query)).then(
        res => {
          const data = res.data.data;
          this.page.total = data.total;
          this.data = data.records;
          this.loading = false;
          this.selectionClear();
          this.handler = false;
          this.taker = false;
        }
      );
    },
    handleAdd() {
      this.title = '新增';
      this.form = {};
      this.box = true;
    },
    handleEdit(row) {
      this.title = '编辑';
      this.box = true;
      getDetail(row.id).then(res => {
        this.form = res.data.data;
      });
    },
    handleView(row) {
      this.title = '查看';
      this.view = true;
      this.box = true;
      getDetail(row.id).then(res => {
        this.form = res.data.data;
      });
    },
    handleMaterial(row) {
      console.log('row>>>', row);
      this.titleMaterial = '补充物料';
      this.materialBox = true;
      this.formMaterial.id = row.id;
    },
    allhandleQRCode(){
      console.log(this.selectionList)
      if(this.selectionList.length==0){
        this.$message.error({message:'请先选择包件'})
        return
      }
      let checkcode=[]
      this.selectionList.map(item=>{
        checkcode.push(item.id)
        // checkcode.push(item.orderPackageCode)
      })
      // return
      let qr = {
        ids: checkcode.join(','),
        // qrCodes: checkcode.join(','),
      };
      showOrderPackgeCode(qr).then(res => {
        // this.orderPackageCode = res.data
        console.log(res.data);
        this.html=''
        this.html=this.getHtmls(res.data.data.dataList,res.data.data.templateHtml)

      });

      this.dialogVisible = true;
    },
    handleQRCode(row) {
      // this.title = '查看'
      // this.view = true;
      // this.box = true;
      this.materialQRCode = row;

      let qr = {
        ids: row.id,
      };
      showOrderPackgeCode(qr).then(res => {
        // this.orderPackageCode = res.data
        console.log(res.data);
        this.html=''
        this.html=this.getHtmls(res.data.data.dataList,res.data.data.templateHtml)

      });

      this.dialogVisible = true;
    },
    handleTrajectory(row) {
      console.log('>>>>', row);
      this.$message.warning('暂无法显示！！！');
      // this.title = '查看'
      // this.view = true;
      // this.box = true;
      // this.dialogVisible = true;
      // getDetail(row.id).then(res => {
      //   this.form = res.data.data;
      // });
    },
    handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning('请选择至少一条数据');
        return;
      }
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          return remove(this.ids);
        })
        .then(() => {
          this.selectionClear();
          this.onLoad(this.page);
          this.$message({
            type: 'success',
            message: '操作成功!',
          });
        });
    },
    rowDel(row) {
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          return remove(row.id);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: 'success',
            message: '操作成功!',
          });
        });
    },
    beforeClose(done) {
      done();
      this.form = {};
      this.view = false;
    },
    selectionChange(list) {
      // console.log("添加阿斯顿发生",list);
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
      // this.$refs.table.clearSelection();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
      this.onLoad(this.page);
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
      this.onLoad(this.page);
    },
    onLoad(page, params = {}) {
      this.loading = true;
      this.query.id = this.$route.query.id;
      getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
        const data = res.data.data;
        // this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
        this.selectionClear();
      });
    },
    onLoadOwn(page, params = {}) {
      this.loading = true;
      this.dataMaterial = false;
      params = {
        stockArticleId: this.$route.query.id,
      };
      getListOwn(page.currentPage, page.pageSize, Object.assign(params, this.queryPage)).then(
        res => {
          console.log('包件明细》》》》》', res.data.data);
          const data = res.data.data;
          this.page.total = data.total;
          this.dataPare = data.records;
          this.dataPare.some(i => {
            if (i.conditions == '1') {
              i.conditions = '定制品';
            } else {
              i.conditions = '库存品';
            }
            if (!i.materialId) {
              //有
              this.dataMaterial = true;
            }
          });
          this.loading = false;
          this.selectionClear();
        }
      );
    },
  },
};
</script>
<style lang="scss" scoped>
.plck{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 20px;
}
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>