kd-aiot-frontend-wms/src/views/warehouseManagement/statisticalReports/transceiverDetails/add.vue

<template>
  <el-dialog
    top="5vh"
    :visible.sync="visible"
    :title="isView ? '查看收发明细表明细' : '选择收发明细表明细'"
    width="90vw"
  >
    <el-card shadow="never" style="height: 70vh">
      <!-- 数据表格 -->
      <div>
        <el-form
          ref="formRef"
          label-position="left"
          class="ele-form-search"
          :model="formData"
          :rules="rules"
          @keyup.enter.native="search"
          @submit.native.prevent
        >
          <el-row :gutter="15">
            <el-col :span="6">
              <el-form-item label-width="90px" label="编码:" prop="code">
                <el-input
                  disabled
                  v-model="formData.code"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label-width="90px" label="名称:" prop="name">
                <el-input
                  :disabled="isView"
                  v-model="formData.name"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label-width="90px" label="起止时间:" prop="time">
                <el-date-picker
                  :disabled="isView"
                  style="width: 100%"
                  class="w100"
                  size="small"
                  v-model="formData.time"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd"
                  :picker-options="pickerOptions"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label-width="90px" label="关键词:" prop="keyWord">
                <el-input
                  :disabled="isView"
                  v-model="formData.keyWord"
                  placeholder="请输入物品名称/型号/批次号/物品编码/颜色/客户"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label-width="90px" label="出入库:" prop="type">
                <el-select
                  filterable
                  placeholder="请选择"
                  v-model="formData.type"
                  clearable
                  :disabled="isView"
                  @change="handleOutInChange"
                >
                  <el-option
                    v-for="item in outInOption"
                    :key="item.code"
                    :value="item.code + ''"
                    :label="item.label"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label-width="90px" :label="formData.type == 2 ? '出库类型:' : '入库类型:'" prop="bizType">
                <el-select
                  filterable
                  placeholder="请选择"
                  v-model="formData.bizType"
                  :disabled="isView"
                  clearable
                >
                  <el-option
                    v-for="item in outInStateOption"
                    :key="item.code"
                    :value="item.code + ''"
                    :label="item.label"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label-width="90px" label="物品类型:" prop="categoryLevelId">
                <el-select
                  filterable
                  placeholder="请选择"
                  v-model="formData.categoryLevelId"
                  :disabled="isView"
                  clearable
                >
                  <el-option
                    v-for="item in codeOption"
                    :key="item.dictCode"
                    :value="item.dictCode"
                    :label="item.dictValue"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="6">
              <el-form-item label-width="90px" label="型号:" prop="modelType">
                <el-input
                  :disabled="isView"
                  v-model="formData.modelType"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
            </el-col> -->
            <el-col v-if="!isView" :span="6">
              <div class="ele-form-actions">
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  class="ele-btn-icon"
                  @click="search"
                  size="small"
                >
                  查询
                </el-button>
                <el-button
                  @click="reset"
                  icon="el-icon-refresh-left"
                  size="small"
                  type="primary"
                  >重置</el-button
                >
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <ele-pro-table
        ref="table"
        class="table"
        :columns="columns"
        :datasource="datasource"
        height="calc(100% - 100px)"
        full-height="calc(100vh - 56px)"
        tool-class="ele-toolbar-form"
        :page-size="20"
        style="margin-top: 18px"
      >
        <!-- 状态 -->
        <!-- <template v-slot:verifyStatus="{ row }">
          <span :class="status[row.verifyStatus].class">
            {{ status[row.verifyStatus].label }}
          </span>
        </template> -->
        <template v-slot:bizType="{ row }">
          {{ handleBizType(row.bizType, row.type) }}
        </template>

        <template v-slot:assetType="{ row }">
          {{ handleAssetType(row?.extInfo?.assetType) }}
        </template>
      </ele-pro-table>
    </el-card>
    <div slot="footer" class="dialog-footer" style="margin-right: 2%">
      <el-button
        v-if="!isView"
        size="small"
        @click="downLoad('statistics')"
        :loading="loading"
        type="primary"
        >统计导出</el-button
      >
      <el-button
        v-if="!isView"
        size="small"
        @click="downLoad('detail')"
        :loading="loading"
        type="primary"
        >明细导出</el-button
      >
      <el-button v-else size="small" @click="visible = false" type="primary"
        >确定</el-button
      >
      <el-button size="small" @click="visible = false">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { getCode } from '@/api/codeManagement/index.js';
  import ItemSearch from './components/item-search.vue';
  import {
    sendReceiveExcel,
    sendReceiveDetailListExcel,
    outintwoPage
  } from '@/api/warehouseManagement/statisticalReports';
  import storageApi from '@/api/warehouseManagement';
  import { allCategoryLevel } from '@/api/classifyManage';
  import { getTreeByGroup } from '@/api/classifyManage';
  import {
    warehousingType,
    sceneState,
    outputSceneState,
    auditStatus,
    useDict
  } from '@/utils/dict/index';
  export default {
    components: { ItemSearch },
    data() {
      return {
        auditStatus,
        outputSceneState,
        warehousingType,
        sceneState,
        status: [
          { label: '未审核', class: 'ele-text-info' },
          { label: '审核中', class: 'ele-text-primary' },
          { label: '审核通过', class: 'ele-text-success' },
          { label: '驳回', class: 'ele-text-danger' }
        ],
        outInOption: [
          { code: '2', label: '出库' },
          { code: '1', label: '入库' }
        ],
        codeOption: [],
        loading: false,
        isView: false,
        formData: {
          code: '',
          name: '',
          time: [],
          status: 2,
          keyWord: '',
          bizType: '',
          categoryLevelId: '',
          type: ''
        },
        // 表单验证规则
        rules: {
          name: [
            { required: true, message: '请输入库存余额名称', trigger: 'blur' }
          ],
          time: [
            { required: true, message: '请选择起止时间', trigger: 'change' }
          ]
        },
        pickerOptions: {
          shortcuts: [
            {
              text: '最近一周',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit('pick', [start, end]);
              }
            },
            {
              text: '最近一个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit('pick', [start, end]);
              }
            },
            {
              text: '最近三个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                picker.$emit('pick', [start, end]);
              }
            },
            {
              text: '最近一年',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
                picker.$emit('pick', [start, end]);
              }
            }
          ]
        },
        visible: false
      };
    },
    computed: {
      // 表格列配置
      columns() {
        console.log(this.isView);

        let arr = [
          {
            type: 'index',
            label: '序号',
            width: 50,
            align: 'center'
          },
          {
            prop: 'bizNo',
            label: '单号',
            align: 'center',
            slot: 'bizNo',
            showOverflowTooltip: true,
            width: 150
          },
          {
            prop: 'bizType',
            slot: 'bizType',
            label: '出入库类型',
            align: 'center',
            showOverflowTooltip: true,
            width: 130
          },
          {
            prop: 'assetType',
            slot: 'assetType',
            label: '物品类型',
            align: 'center',
            showOverflowTooltip: true,
            width: 130
          },
          {
            prop: 'categoryNames',
            label: '物品名称',
            align: 'center',
            showOverflowTooltip: true,
            width: 150
          },
          {
            prop: 'categoryCodes',
            label: '物品编码',
            align: 'center',
            showOverflowTooltip: true,
            width: 150
          },
          {
            prop: 'batchNo',
            label: '批次号',
            align: 'center',
            showOverflowTooltip: true,
            width: 120
          },
          {
            prop: 'modelType',
            label: '型号',
            align: 'center',
            showOverflowTooltip: true,
            width: 120
          },
          {
            prop: 'clientName',
            label: '客户',
            align: 'center',
            showOverflowTooltip: true,
            width: 120
          },
          {
            prop: 'totalQuantity',
            label: '数量',
            align: 'center',
            showOverflowTooltip: true,
            width: 120
          },
          {
            prop: 'colorKey',
            label: '颜色',
            align: 'center',
            showOverflowTooltip: true,
            width: 150
          },
          {
            prop: 'modelKey',
            label: '机型',
            align: 'center',
            showOverflowTooltip: true,
            width: 120
          },
          {
            prop: 'sourceBizNo',
            label: '来源单据',
            align: 'center',
            showOverflowTooltip: true,
            width: 120
          },

          {
            prop: 'createUserName',
            label: '操作人',
            align: 'center',
            showOverflowTooltip: true,
            width: 120
          },
          {
            width: 160,
            prop: 'storageTime',
            label: '出入库时间',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'verifyName',
            label: '审核人',
            align: 'center',
            showOverflowTooltip: true,
            width: 120
          }
          // {
          //   prop: 'verifyStatus',
          //   label: '状态',
          //   align: 'center',
          //   slot: 'verifyStatus',
          //   showOverflowTooltip: true,
          //   width: 100
          // }
        ];

        // if (!this.isView) {
          return arr.filter((item) => item != '');
        // }

        // if (this.isView) {
        //   return [
        //     {
        //       type: 'index',
        //       label: '序号',
        //       width: 50,
        //       align: 'center'
        //     },
        //     {
        //       prop: 'categoryCode',
        //       label: '物品编码',
        //       align: 'center',
        //       showOverflowTooltip: true,
        //       width: 150
        //     },
        //     {
        //       prop: 'categoryName',
        //       label: '物品名称',
        //       align: 'center',
        //       showOverflowTooltip: true,
        //       width: 150
        //     },
        //     {
        //       prop: 'categoryLevelPath',
        //       label: '物品类型',
        //       align: 'center',
        //       showOverflowTooltip: true,
        //       width: 150
        //     },
        //     {
        //       prop: 'specification',
        //       label: '规格',
        //       align: 'center',
        //       showOverflowTooltip: true,
        //       width: 150
        //     },
        //     {
        //       width: 160,
        //       prop: 'inStorageTime',
        //       label: '出入库时间',
        //       align: 'center',
        //       showOverflowTooltip: true
        //     },

        //     {
        //       prop: 'bizNo',
        //       label: '单号',
        //       align: 'center',
        //       slot: 'bizNo',
        //       showOverflowTooltip: true,
        //       width: 150
        //     },
        //     {
        //       prop: 'inBizType',
        //       slot: 'inBizType',
        //       label: '出入库类型',
        //       align: 'center',
        //       showOverflowTooltip: true,
        //       width: 150,
        //       formatter: (row) => {
        //         return (
        //           sceneState.find((item) => item.code == row.inBizType).label ??
        //           ''
        //         );
        //       }
        //     },

        //     {
        //       prop: 'supplierName',
        //       label: '往来单位',
        //       align: 'center',
        //       showOverflowTooltip: true
        //     },
        //     {
        //       prop: 'warehouseName',
        //       label: '仓库名称',
        //       align: 'center',
        //       showOverflowTooltip: true
        //     },
        //     {
        //       prop: 'remark',
        //       label: '备注',
        //       align: 'center',
        //       showOverflowTooltip: true
        //     },

        //     {
        //       prop: 'inQuantity',
        //       label: '入库数量',
        //       align: 'center',
        //       showOverflowTooltip: true
        //     },

        //     {
        //       prop: 'inUnitPrice',
        //       label: '入库单价',
        //       align: 'center',
        //       showOverflowTooltip: true
        //     },
        //     {
        //       prop: 'inPrice',
        //       label: '入库成本小计',
        //       align: 'center',
        //       showOverflowTooltip: true
        //     },
        //     {
        //       prop: 'outQuantity',
        //       label: '出库数量',
        //       align: 'center',
        //       showOverflowTooltip: true
        //     },
        //     {
        //       prop: 'outUnitPrice',
        //       label: '出库单价',
        //       align: 'center',
        //       showOverflowTooltip: true
        //     },
        //     {
        //       prop: 'outPrice',
        //       label: '出库成本小计',
        //       align: 'center',
        //       showOverflowTooltip: true
        //     },
        //     {
        //       prop: 'totalQuantity',
        //       label: '结存数量',
        //       align: 'center',
        //       showOverflowTooltip: true
        //     },
        //     {
        //       prop: 'totalUnitPrice',
        //       label: '结存单位成本',
        //       align: 'center',
        //       showOverflowTooltip: true
        //     },
        //     {
        //       prop: 'totalPrice',
        //       label: '结存成本',
        //       align: 'center',
        //       showOverflowTooltip: true
        //     }
        //   ];
        // }
      },
      clientEnvironmentId() {
        return this.$store.state.user.info.clientEnvironmentId;
      },
      outInStateOption() {
        return this.formData.type == 2 ? this.outputSceneState : this.formData.type == 1 ? this.sceneState : []
      }
    },
    created() {
      this.getTypeList();
      this.getAssetTypeList()
    },
    methods: {
      // 获取物品类型下拉选择树
      async getAssetTypeList() {
        const { data } = await getTreeByGroup({ type: 2 });
        this.codeOption = data.map((item) => {
          return { dictCode: item.id, dictValue: item.name };
        });
      },
      handleOutInChange() {
        // this.formData.bizType = '';
      },
      async getTypeList() {
        const { data } = await allCategoryLevel();
        this.codeList = data.map((item) => {
          return { dictCode: item.id, dictValue: item.name };
        });
      },
      handleAssetType(r) {
        const code = this.codeList.find((item) => item.dictCode == r);
        return code?.dictValue;
      },
      handleBizType(code, type) {
        // console.log(this.sceneState);
        // console.log(code, type);

        if (type == 1) {
          // 入库
          for (const key in this.sceneState) {
            if (this.sceneState[key].code == code) {
              return this.sceneState[key].label;
            }
          }
        } else {
          // 出库
          for (const key in this.outputSceneState) {
            if (this.outputSceneState[key].code == code) {
              return this.outputSceneState[key].label;
            }
          }
        }
      },
      // 获取时间函数
      getDate(date) {
        console.log(date);
        let obj = {
          year: date.getFullYear(), //获取完整的年份(4位)
          month: date.getMonth() + 1, //获取当前月份(0-11,0代表1月)
          strDate: date.getDate() // 获取当前日(1-31)
        };
        Object.keys(obj).forEach((key) => {
          if (obj[key] < 10) obj[key] = `0${obj[key]}`;
        });
        return `${obj.year}-${obj.month}-${obj.strDate}`;
      },
      downLoad(type) {
        if (!this.formData.name) {
          return this.$message.error('请输入名称');
        }
        if (this.formData.time.length <= 0) {
          return this.$message.error('请选择时间');
        }
        this.loading = true;
        const params = Object.assign({}, this.formData);
        if (params.time?.length) {
          params.startTime = params.time[0];
          params.endTime = params.time[1];
        }
        delete params.time;
        const requestApi = type == 'statistics' ? sendReceiveExcel : sendReceiveDetailListExcel;
        requestApi(params).then((data) => {
          try {
            let objectUrl1 = window.URL.createObjectURL(new Blob([data]));
            let elink = document.createElement('a');
            elink.setAttribute(
              'download',
              decodeURI(decodeURI('收发明细表.xlsx'))
            );
            elink.style.display = 'none';
            elink.href = objectUrl1;
            document.body.appendChild(elink);
            elink.click();
            document.body.removeChild(elink);
            window.URL.revokeObjectURL(elink.href);
            this.loading = false;
            this.visible = false;
            this.$emit('reload');
          } catch (err) {
            this.$message.error('导出失败,请联系管理员!');
          }
        });
      },

      async getList(row) {
        const res = await outintwoPage({
          type: 1,
          code: row.code,
          name: row.name,
          startTime: row.startTime,
          endTime: row.endTime,
          pageNum: 1,
          size: -1
        });

        this.tableList = res.data;

        console.log(this.tableList);
      },

      async open(isView, row, searchParams) {
        console.log('open', row, this.$refs.formRef, searchParams);
        if(this.$refs.formRef) {
          this.$refs.formRef.resetFields()
        }
      
        if (isView) {
          // await this.getList(row);

          // this.tableList = row.info.map((item) => {
          //   return {
          //     ...item,
          //     startTime: this.getDate(new Date(Number(item.startTime)))
          //   };
          // });
          // console.log(this.tableList);

          this.formData.code = row.code;
          this.formData.name = row.name;
          this.formData.status = 2;
          this.formData.time =
            row.startTime && row.endTime ? [row.startTime, row.endTime] : [];
          this.formData.keyWord = row.keyWord;
          this.formData.type = (row.isType == 0 || !row.isType) ? '' : row.isType;
          this.formData.bizType = (row.bizType == 0 || !row.bizType) ? '' : row.bizType;
          this.formData.categoryLevelId = (row.categoryLevelId == 0 || !row.categoryLevelId) ? '' : row.categoryLevelId;
        } else {
          this.tableList = [];
          this.formData = Object.assign({}, {
            code: await getCode('statistics_log_code'),
            name: '',
            status: 2,
            time: [],
            keyWord: '',
            type: '',
            bizType: '',
            categoryLevelId: ''
          }, searchParams);
        }
        this.isView = isView;
        this.visible = true;
        this.$nextTick(() => {
          this.$refs.table.reload();
        });
      },
      /* 表格数据源 */
      async datasource({ page, limit, where, order }) {
        // if (this.isView) {
        //   return this.tableList;
        // } else {
          const params = Object.assign({}, this.formData);
          if (params.time?.length) {
            params.startTime = params.time[0];
            params.endTime = params.time[1];
          }
          delete params.time;
          const data = await storageApi.getInboundGoodsList({
            ...params,
            ...where,
            ...order,
            pageNum: page,
            size: limit
          });
          console.log(data);
          this.tableList = data;
          return data;
        // }
      },
      search() {
        this.$refs.table.reload();
      },
      reset() {
        this.formData.time = [];
        this.formData.keyWord = '';
        this.formData.type = '';
        this.formData.bizType = '';
        this.formData.categoryLevelId = '';
        this.$refs.formRef.resetFields()
        this.search();
      }
    }
  };
</script>
<style lang="scss" scoped>
  #inventoryBalance {
    height: 100%;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    .ele-form-actions {
      display: flex;
      justify-content: flex-end;
    }
  }

  :deep(.table) {
    height: calc(100% - 100px);
  }
</style>